* {
    box-sizing: border-box;
}

:root {
    --Primary-font: 'Titillium Web', sans-serif;
    --text-gray: #959CAA;
    --text-sandal: #5CFAC3;
    --text-white: #fff;
    --text-white1: #00FBFB;
    --text-white2: #00DDE1;
    --text-l-gray: #ADB7D0;
    --text-gray1: #797F8E;
    --text-d-blue: #00081C;
    --text-gray2: #999FAC;
    --text-gray3: #7E848F;
    --text-gray4: #C3C9D2;



}

img {
    max-width: 100%;
}

body {
    font-family: var(--Primary-font);
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    background: #00142F url(../images/Grain.png) center top no-repeat;
    background-size: cover;
}

.T-w {
    color: var(--text-white)
}

.T-w1 {
    color: var(--text-white1)
}

.T-w2 {
    color: var(--text-white2)
}

.T-gry {
    color: var(--text-gray)
}

.T-d-b {
    color: var(--text-d-blue)
}

.T-g1 {
    color: var(--text-gray1)
}

.T-dg {
    color: var(--text-d-gray)
}

.T-lg {
    color: var(--text-l-gray)
}

.T-g2 {
    color: var(--text-gray2)
}

.T-g3 {
    color: var(--text-gray3)
}

.T-g4 {
    color: var(--text-gray4)
}

.T-sndl {
    color: var(--text-sandal)
}

.T-blc {
    color: #000;
}

.T-c01 {
    color: #60B239;
}

.T-c02 {
    color: #FF543E;
}




.Fn-10 {
    font-size: 10px;
}

.Fn-12 {
    font-size: 12px;
}

.Fn-13 {
    font-size: 13px;
}

.Fn-14 {
    font-size: 14px;
}

.Fn-15 {
    font-size: 15px;
}

.Fn-16 {
    font-size: 16px;
}

.Fn-18 {
    font-size: 18px;
}

.Fn-20 {
    font-size: 20px;
}

.Fn-22 {
    font-size: 22px;
}

.Fn-23 {
    font-size: 23px;
}

.Fn-24 {
    font-size: 24px;
}

.Fn-25 {
    font-size: 25px;
}

.Fn-28 {
    font-size: 28px;
}

.Fn-28 {
    font-size: 28px;
}

.Fn-30 {
    font-size: 30px;
}

.Fn-35 {
    font-size: 35px;
}

.Fn-65 {
    font-size: 65px;
}

.Fn-w-500 {
    font-weight: 500;
}

.Fn-w-600 {
    font-weight: 600;
}

.Fn-w-700 {
    font-weight: 700;
}

.Fn-B {
    font-weight: bold;
}

a:hover {
    text-decoration: unset;
}


ul {
    list-style: none;
}

a:hover {
    transition: .5s all ease-in-out;
}


/*[[[#main content#]]]*/
/* menubar css */
.menu-section .navbar-dark .navbar-nav li {
    padding: 0px 20px;
}

.header-section {
    height: auto;
}

.menu-section .navbar-dark.bg-dark {
    background-color: transparent !important;
}

ul.navbar-nav li.nav-item a.nav-link {
    color: #fff;
    position: relative;
    padding: 5px 25px;
}

ul.navbar-nav li.nav-item a.nav-link.active,
ul.navbar-nav li.nav-item a.nav-link:hover {
    color: #DF1C3C;
    transition: .4s all ease-in-out;
}

.navbar {
    padding: 15px 15px;
    min-height: 60px;
}

/* ANIMATED X */
.navbar-toggler.x {
    border: none;
}

.navbar-toggler.x:focus {
    outline: none;
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

.navbar-toggler.x .icon-bar {
    width: 22px;
    display: block;
    height: 2px;
    background-color: #ffffff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.navbar-toggler.x .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-toggler.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggler.x .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

/* .banner-sec-inner { } */
.banner-section {
    background: url(../images/Bnn-bg.png) center top no-repeat;
    min-height: 930px;
    background-size: cover;
}

.Grd-Btn {
    position: relative;
    min-width: 150px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
}

.Grd-Btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(0deg, #46CAD8, #33A3EA);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.Grd-Btn:hover,
.Grd-Btn.active {
    background: linear-gradient(91.69deg, #237FFB -1.89%, #5CFAC3 88.34%);
    border-radius: 15px;
    color: #000C22
}

.Mtrx-Bat .Grd-Btn:hover,
.Mtrx-Bat .Grd-Btn.active {
    border-radius: 10px;
}

.Grd-Btn:hover::before,
.Grd-Btn.active::before {
    background: transparent;
}

.HEW-Xob {
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    backdrop-filter: blur(28px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 30px;
    min-height: 320px;
    padding: 43px 20px;
}

.HEW-img {
    margin-bottom: 40px;
}

.Gda-H {
    margin-bottom: 110px;
}

.Sec-00-a {
    padding-bottom: 110px;
}

.Gda-Lnr-BG {
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    backdrop-filter: blur(15px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 30px;
}

.Gda-H-xirt {
    background: #00081C;
    border-radius: 5px;
    max-width: 180px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.Gda-M-Chld {
    display: flex;
    justify-content: space-around;
    margin-bottom: 70px;
}

.Gda-M-Chld span {
    background: #00081C;
    border: 1px solid #00FBFB;
    box-sizing: border-box;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    padding: 7px 0px;
}

.Mtx-chld-a {
    position: relative;
}

.Mtx-chld-a:before {
    content: "";
    background: #fff;
    width: 1px;
    height: 99px;
    position: absolute;
    left: 73px;
    top: -75px;
    transform: rotate(54deg);
}

.Mtx-chld-b {
    position: relative;
}

.Mtx-chld-b:before {
    content: "";
    background: #fff;
    width: 1px;
    height: 99px;
    position: absolute;
    right: 73px;
    top: -75px;
    transform: rotate(-54deg);
}

.Mtx-chld-b1 {
    position: relative;
}

.Mtx-chld-b1:before {
    content: "";
    width: 1px;
    height: 84px;
    background: #fff;
    position: absolute;
    right: 42px;
    top: -79px;
    transform: rotate(-30deg);
}

.Mtx-chld-a1 {
    position: relative;
}

.Mtx-chld-a1:before {
    content: "";
    width: 1px;
    height: 84px;
    background: #fff;
    position: absolute;
    left: 42px;
    top: -79px;
    transform: rotate(30deg);
}

.Mtx-chld-a2 {
    position: relative;
}

.Mtx-chld-a2:before {
    content: "";
    width: 1px;
    height: 78px;
    background: #fff;
    position: absolute;
    left: 32px;
    top: -75px;
    transform: rotate(21deg);
}

.Mtx-chld-b2 {
    position: relative;
}

.Mtx-chld-b2:before {
    content: "";
    width: 1px;
    height: 78px;
    background: #fff;
    position: absolute;
    right: 32px;
    top: -75px;
    transform: rotate(-21deg);
}

.Gda-M1-eert {
    max-width: 432px;
    margin: auto;
}

.Gda-Pf {
    min-height: 782px;
    padding: 40px 40px 50px;
}

.Gda-M-det {
    background: #00081C;
    border-radius: 5px;
    padding: 25px 10px;
}

.Gda-M-txt {
    font-size: 14px;
    line-height: 28px;
    color: var(--text-l-gray)
}

.Sec-00-b {
    background: url(../images/matrix-bg.png) center top 50% no-repeat
}

.Pdd-B-110 {
    padding-bottom: 110px;
}

/*Owl-carosel style*/
.Gda-Slid .Gda-Ow-xob {
    background: #00081C;
    border-radius: 5px;
}

.Gda-Slid .Ow-di-daeh {
    background: linear-gradient(221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    border-radius: 8px 8px 0px 0px;
    padding: 20px 40px;
}

.Gda-Slid .Owl-Cnt {
    padding: 40px 40px
}

.Gda-Slid .Owl-di-icon {
    background: rgba(0, 8, 28, 0.5);
    border-radius: 50%;
    width: 84px;
    height: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Gda-Slid .owl-carousel .owl-item img {
    width: auto;
}

.Gda-Slid .owl-item>div {
    cursor: auto;
    transition: margin 0.4s ease;
}

.Gda-Slid .owl-item.center>div {
    background: #00081C url(../images/center-item.png) right top 75% no-repeat;
    margin: 0;
    cursor: pointer;

}

.Gda-Slid .owl-item:not(.center)>div {
    opacity: .65;
}

.OW-Gda-H {
    margin-bottom: 70px;
}

.Gda-Slid .owl-carousel .owl-dots button.owl-dot span {
    background: #43597B;
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 50%;
    margin: 0px 5px;
}

.Gda-Slid .owl-carousel .owl-dots button.owl-dot.active span {
    background: #00DDE1;
    transition: .3s all ease-in-out;
}

.Gda-Slid .owl-carousel .owl-dots {
    text-align: center;
}

.Gda-Slid .owl-carousel i.Owl-Nv-txt {
    position: absolute;
    top: 50%;
    transform: translate(-51%, -50%);
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    width: 61px;
    height: 61px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.Gda-Slid .owl-carousel i.Owl-Nv-txt.Owl-prv {
    left: 0;
}

.Gda-Slid .owl-carousel i.Owl-Nv-txt.Owl-nxt {
    right: -55px;
}

.Gda-Slid .owl-carousel i.Owl-Nv-txt:hover {
    background: linear-gradient(221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    transition: .4s all ease-in-out;
}

.Linr-Grnt:after {
    content: "";
    background: linear-gradient(5deg, transparent 70%, #439aa4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    -moz-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -moz-mask-composite: destination-out;
    position: absolute;
    width: 100%;
    padding: 2px;
    border-radius: 12px;
    height: 100%;
    top: 0;
    z-index: -1;
}

.soc_icons .Linr-Grnt:after {
    transform: rotate(45deg);
}

.HEW-Xob.Linr-Grnt:after {
    background: linear-gradient(53deg, #102035 70%, #439aa4);
    border-radius: 30px;
    right: 0;
}

.Gda-Pf.Linr-Grnt:after {
    background: linear-gradient(63deg, #0b1b3100 58%, #439aa4);
    right: 0;
    border-radius: 30px;
}

/*Faq style S*/
.faq-box .card {
    border: unset;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    margin-bottom: 15px;
    background: transparent;
}

.faq-box .card-header {
    background: transparent;
    border-bottom: unset;
    padding: 0px 0px;
    position: relative;
}

.faq-box .card-header h5 {
    font-weight: 600;
    font-size: 18px;
    padding: 13px 30px 14px;
    margin: 0;
    line-height: 35px;
    color: #FFFFFF;
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    backdrop-filter: blur(28px);
    border-radius: 10px;
}

.faq-box .card-header h5 i.fa {
    margin-right: 17px;
}

.faq-box .card-body {
    padding: 20px 20px 10px;
}

.faq-box .card-body p {
    font-size: 15px;
    color: #999FAC;
    line-height: 24px;
}

.faq-box [data-toggle="collapse"] .fa:before {
    content: "\f068";
    font-size: 14px;
    font-weight: 500;
    transition: .5s all ease-in-out;
    display: inline-block;
    margin-top: 6px;
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
    padding: 4px 6px;
    border-radius: 100%;
}

.faq-box [data-toggle="collapse"].collapsed .fa:before {
    content: "\f067";
    transform: rotate(-180deg);
    transition: .5s all ease-in-out;
}

.faq-inn {
    padding: 40px 0px 55px;
}

.faq-box .card-header:hover h5,
.faq-box .card-header:focus h5 {
    background: linear-gradient(183deg, #00F260 -41.82%, #72B8FF 105.95%);
    border-radius: 10px;
    color: #000B26;
    transition: .4s all ease-in-out;
}

.faq-box .card-header:hover .fa:before {
    color: #000B26;
    border: 2px solid #000B26;
}

.faq-box .card-header:hover::after {
    content: "";
    background: transparent;
}

.faq-box .card-header:after {
    content: "";
    background: linear-gradient(5deg, transparent 70%, #439aa4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    position: absolute;
    width: 100%;
    padding: 2px;
    border-radius: 12px;
    height: 100%;
    top: 0;
}

.soc_icons li a {
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    backdrop-filter: blur(28px);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0px 5px;
    position: relative;
}

.soc_icons li a:hover {
    background: linear-gradient(221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    color: #000B23
}

.soc_icons li a.Linr-Grnt:after {
    border-radius: 50%
}

.soc_icons li a.Linr-Grnt:hover::after {
    background: transparent;
}

.Sec-00-a {
    position: relative;
    margin-top: -12rem;
}

.Sec-00-a:after {
    content: "";
    background: url(../images/sec-a-bg.png) left top 40% no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-size: 45%;
    z-index: -1;
}

.Blu-Blr {
    position: relative;
}

.Blu-Blr:after {
    content: "";
    background: url(../images/sec-2-bg.png) right no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -50px;
    background-size: 30%;
    z-index: -1;
}

.Ft-Ces {
    position: relative;
    padding: 100px 0px 20px;
}

.Ft-bg:after {
    content: "";
    background: url(../images/ft-bg.png) left bottom no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    background-size: 57%;
    z-index: -1;
}

.Owl-ces-c {
    position: relative;
}

.Owl-ces-c:after {
    content: "";
    background: url(../images/sec3-bg.png) left top 80% no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100px;
    background-size: 25%;
    z-index: -1;
}

.Owl-ces-c:before {
    content: "";
    background: url(../images/sec3-wv-bg.png) right bottom 70% no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background-size: 70%;
    z-index: -1;
}

.Bnn-Img:before {
    content: "";
    background: url(../images/tron.png) right no-repeat;
    width: 732px;
    height: 580px;
    position: absolute;
    top: -2rem;
    right: -16rem;
}

.Bnn-Img img {
    display: none
}

/*Modal popup styles*/
.wallet-Lgn {
    background: rgb(9 18 37 / 75%)
}

.wallet-Lgn .modal-content {
    background: #000817;
    border-radius: 25px;
    padding: 25px 15px 25px;
}

.wallet-Lgn .modal-header {
    border-bottom: none;
}

a.Wll-cnn {
    display: flex;
    margin: 25px 0px;
    justify-content: center;
    align-items: center;
    min-height: 75px;
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    box-shadow: 5px 4px 35px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(28px);
    border-radius: 10px;
    /* max-width: 225px;*/
}

.Tp-Rt-BTN {
    position: absolute;
    top: -10px;
    right: -10px;
}

.Lin-Grd-TXT {
    font-size: 30px;
    font-weight: bold;
    background: linear-gradient(91deg, #237FFB 40%, #5CFAC3 59%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.Wll-cnn:hover {
    background: linear-gradient(91.69deg, rgba(35, 127, 251, 0.25) -1.89%, rgba(92, 250, 195, 0.25) 88.34%);
}

.Gda-Lgn .modal-dialog {
    max-width: 1130px;
}

.Lg-inn {
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%) !important;
    box-shadow: 5px 4px 35px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(28px);
    border-radius: 10px;
    min-height: 62px;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.Gda-dd .dropdown-menu {
    background: #00132b;
    box-shadow: inset 0px 0px 7px #398590;
    border-radius: 16px;
    right: 0;
    left: auto;
    min-width: 110px;
    margin-top: 7px;
}

.Innr-Hd-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid #98C1C1;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 4px 10px;
}

.Gda-dd .DD-lng {
    border: 1px solid #00D3D3;
    border-radius: 10px;
    background: #000D23;
    padding: 3px 10px;
}

.Gda-dd .dropdown-menu a {
    color: #fff;
}

.Gda-dd .dropdown-menu a:hover {
    color: #000D23
}

.W-Lg-inn {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(28px);
    border-radius: 10px;
    min-height: 51px;
    border: 1px solid transparent;
    color: #fff;
}

.W-Lg-inn:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    box-shadow: unset;
    color: #fff;
}

.W-Lg-inn:placeholder {
    color: #fff
}

.Srch-Noci input,
.Srch-Noci .input-group-text {
    border: 1px solid #737980;
    border-radius: 10px;
    background: transparent;
}

.Srch-Noci input {
    border-right: unset;
}

.Srch-Noci .input-group-text {
    border-left: unset;
}

.Srch-Noci input:focus,
.Srch-Noci .input-group-text:focus {
    background: transparent;
    box-shadow: none;
    border-color: #737980;
    color: #fff;
}

/*===Table style===*/
.His-elbat .table td,
.His-elbat .table th {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    min-width: 140px;
}

.His-elbat .table td.T-Comp {
    color: #18BC3C;
}

.His-elbat .table td.T-Cncl {
    color: #DB1515;
}

.His-elbat .table th {
    font-weight: 600;
    font-size: 14px;
    color: #92969D;
    background-color: transparent;
    border-bottom: 1px solid #1F2A3E;
    padding-bottom: 15px;
}

.His-elbat {
    background: #000817;
    border-radius: 25px;
    padding: 30px;
}

.His-elbat table tbody tr:first-child td {
    padding: 20px 15px 15px;
}

.Pg-Nvv .page-link {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 0px 3px;
}

.Pg-Nvv .page-link:hover {
    background: linear-gradient(221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    border-radius: 50%;
    padding: 7px 11px;
    color: #020B29
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    background: #545454;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    line-height: 14px;
    font-size: 18px;
    color: white;
    font-weight: bold;
    display: inline-block;
    margin: 0 2px;
}

.page-item:first-child .page-link:hover,
.page-item:last-child .page-link:hover {
    background: #C8C8C8;
}

.Unem-kinl li a {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin-right: 45px;
    position: relative;
}

.Unem-kinl li.active a:hover,
.Unem-kinl li a:hover,
.Unem-kinl li a.active:hover {
    color: #5CFAC3
}

.Unem-kinl li.active a:after,
.Unem-kinl li a:after,
.Unem-kinl li a.active:after {
    background: none repeat scroll 0 0 transparent;
    bottom: -25px;
    content: "";
    display: block;
    height: 3px;
    left: 50%;
    position: absolute;
    background: #5CFAC3;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.Unem-kinl li.active a:after, .Unem-kinl li a:hover::after, .Unem-kinl li a.active:hover::after {
    width: 100%;
    left: 0;
}

.Inn-Hdd {
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.Innr-Hd-btn {
    background: #000D25;
    border: 1px solid #00D3D3;
    box-sizing: border-box;
    border-radius: 10px;
    margin-left: 10px;
}

.Innr-Hd-btn:hover {
    background: linear-gradient(91.69deg, rgba(35, 127, 251, 0.25) -1.89%, rgba(92, 250, 195, 0.25) 88.34%);
    color: #fff;
    border: 1px solid transparent;
}

.Db-Gda-Xob {
    border-radius: 15px;
    padding: 40px 0px 20px;
}

.Brd-Rt {
    border-right: 1px solid #474F60;
}

.Mtrx-Bat-Ces .Linr-Grnt:after {
    left: 0
}

.Mtrx-Bat {
    border-bottom: unset;
    margin-bottom: 55px;
}

.Dpst-Modl .modal-dialog {
    max-width: 952px;
}

.Dpst-Modl .modal-content {
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.07) -15.31%, rgba(255, 255, 255, 0.045) 105.84%);
    backdrop-filter: blur(28px);
    border-radius: 10px;
    padding: 40px 10px;
}

.Dpst-Modl .modal-header {
    border-bottom: unset;
}

.Dp-innp input {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 5px 4px 35px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-height: 60px;
    border: unset;
    color: #fff;
}

.Dp-innp input:after {
    content: "";
    background: linear-gradient(5deg, #102035 70%, #439aa4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    position: absolute;
    width: 100%;
    padding: 2px;
    border-radius: 12px;
    height: 100%;
    top: 0;
}

.Dp-innp .input-group-text {
    background: linear-gradient(91.69deg, #237FFB -1.89%, #5CFAC3 88.34%);
    border-radius: 0px 10px 10px 0px;
    color: #101010;
    font-weight: 700;
    border: unset;
    padding: 0px 20px;
}

.Dp-innp input:focus,
.Dp-innp .input-group-text:focus {
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.14) -15.31%, rgba(255, 255, 255, 0.09) 105.84%);
    box-shadow: unset;
    color: #fff;
}

.Inner-Blr {
    position: relative;
}

.Inner-Blr:after {
    content: "";
    background: url(../images/Inr-bg2.png) bottom no-repeat;
    width: 620px;
    max-width: 100%;
    height: 710px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-size: 100%;
    z-index: -1;
}

.Inner-Blr:before {
    content: "";
    background: url(../images/Inr-bg1.png) left top no-repeat;
    width: 654px;
    max-width: 100%;
    height: 970px;
    position: absolute;
    top: 0;
    background-size: 100%;
    z-index: -1;
}

.Reff-bg {
    background: #000817;
    border-radius: 10px;
    padding: 30px 30px;
}

.prmo-bg {
    background: #000817;
    border-radius: 10px;
    overflow-y: scroll;
    max-height: 615px;
}

/* Scrollbar Styling */
.prmo-bg::-webkit-scrollbar {
    width: 5px;
}

.prmo-bg::-webkit-scrollbar-track {
    background-color: #233351;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.prmo-bg::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #5CFAC3;
}

.W-D-Inn .Innr-Hd-btn {
    padding: 9px 20px;
}

.Prf-Gda.Innr-Hd-btn {
    background: rgba(255, 255, 255, 0.15);
}

button:focus {
    outline: none
}

button.Grd-Btn.active {
    border: unset;
}

.Grd-Btn.active:hover {
    background: linear-gradient(280deg, #237FFB -1.89%, #5CFAC3 88.34%);
    cursor: pointer;
    transition: .4s all ease-in-out;
}

button.Grd-Btn {
    border: unset;
    background: transparent;
}

.W-Lg-inn::placeholder {
    color: #BFC8C7
}

select.W-Lg-inn option {
    background: #000D25;
    border: 1px solid #00D3D3;
    border-radius: 10px;
}

.C-wll .modal-dialog {
    max-width: 610px;
}

.Rg-Mdl .modal-dialog {
    max-width: 750px;
}

.Wll-cnn.Hv-Gda {
    background: linear-gradient(91.69deg, rgba(35, 127, 251, 0.25) -1.89%, rgba(92, 250, 195, 0.25) 88.34%);
    max-width: 246px;
    min-height: 60px;
}

.Wll-cnn.Hv-Gda:hover {
    background: linear-gradient(280deg, rgba(35, 127, 251, 0.25) -1.89%, rgba(92, 250, 195, 0.25) 88.34%);
}

input.Lg-inn.Wll-cnn {
    border: unset;
}

input:focus-visible {
    border: unset;
    outline: none;
}

.Txt-clc {
    color: #42C2DC
}

.Txt-clc:hover {
    color: #fff
}

.rdio {
    position: relative;
}

.rdio input[type=radio] {
    opacity: 0;
}

.rdio label {
    padding-left: 10px;
    cursor: pointer;

}

.rdio label:before {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 0;
    content: "";
    display: inline-block;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #fff;
}

.rdio input[type=radio] {
    margin: 0px;
}

.rdio input[type=radio]:disabled+label {
    color: #999;
}

.rdio input[type=radio]:disabled+label:before {
    background-color: #fbc52d;
}

.rdio input[type=radio]:checked+label::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    display: inline-block;
    font-size: 11px;
    width: 10px;
    height: 10px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.rdio-default input[type=radio]:checked+label:before {
    background: linear-gradient(91.69deg, #237FFB -1.89%, #5CFAC3 88.34%);
}

.rdio-primary input[type=radio]:checked+label:before {
    background: linear-gradient(91.69deg, #237FFB -1.89%, #5CFAC3 88.34%);
}

.rdio-primary input[type=radio]:checked+label::after {
    background: linear-gradient(91.69deg, #237FFB -1.89%, #5CFAC3 88.34%);
}

@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}





@media (max-width: 1650px) {
    .Bnn-Img:before {
        background-size: contain;
        max-width: 100%;
        right: 0;
    }

    .banner-section {
        min-height: 730px;
    }

    .Fn-65 {
        font-size: 58px;
    }

    .Sec-00-a {
        margin-top: -5rem;
    }
}

@media (max-width: 1199px) {
    .Unem-kinl li a {
        margin-right: 15px;
    }

    .W-D-Inn .Innr-Hd-btn {
        padding: 8px 10px;
    }

    .Sec-00-a {
        margin-top: -2rem;
    }

}

@media (max-width: 991px) {
    .Sec-00-a {
        margin-top: -12rem;
    }

    ul.Unem-kinl {
        flex-direction: column;
    }

    .Bnn-Img:before {
        display: none;
    }

    .Unem-kinl li a {
        margin: 20px 15px;
        display: inline-block;
    }

    .Ft-Ces {
        padding: 40px 0px 20px
    }
}

@media (max-width: 767px) {
    .banner-section {
        min-height: 640px;
    }

    .Fn-65 {
        font-size: 27px;
    }

    .Grd-Btn {
        min-width: 135px;
    }

    .Fn-35 {
        font-size: 24px;
    }

    .Pdd-B-110 {
        padding-bottom: 30px;
    }

    .Gda-H {
        margin-bottom: 40px;
    }

    .Gda-Slid .owl-carousel i.Owl-Nv-txt.Owl-nxt {
        right: -45px;
    }

    .Gda-Pf {
        min-height: 590px;
        padding: 40px 20px 50px;
    }

    .Db-FS-Xob {
        padding: 8px 30px;
    }

    .Brd-Rt {
        border-right: unset;
    }

    .prmo-bg {
        padding: 20px 20px
    }

    .Fn-25 {
        font-size: 20px;
    }

    .Mtrx-Bat .Grd-Btn {
        margin: 10px 0px
    }

    .Lin-Grd-TXT {
        font-size: 24px;
    }

    .Mtrx-Bat {
        margin-bottom: 30px;
    }

    .Bann-Ces {
        padding: 25px 0px;
    }

    .Rg-Mdl .modal-dialog {
        margin: 20px;
    }
}

.Rg-Mdl .positionsScroll {
    max-height: 400px;
    overflow-y: scroll;
}

@media (max-width: 575px) {
    .toggle-line {
        margin-left: 10px;
    }

    .navbar-toggle {
        background: #534193;
        border-radius: 100px;
        position: fixed;
        top: 10px;
        right: 0px;
        z-index: 999;
        padding: 9px 0px;
        width: 50px;
        height: 47px;
    }

    .toggle-line::after,
    .toggle-line::before,
    .toggle-line>span {
        content: '';
        background: #fff;
    }

    .Innr-Prf-lug {
        margin: 10px 0px
    }

}
/* tree1 */
.t-h1 {
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
}

.tree-total-cd {
    overflow-x: auto;
}

.total-tree {
    width: 1270px;
}

.line-2 {
    display: flex;
    justify-content: space-around;
    padding-top: 40px;
}

.t-h1::before {
    content: '';
    position: absolute;
    top: 50px;
    right: 318px;
    border-top: 1px dashed #ccc;
    width: 635px;
    height: 20px;
}

.t-h1 img {
    position: relative;
}

.t-h1::after {
    content: '';
    position: absolute;
    top: 41px;
    left: 631px;
    border-left: 1px dashed #ccc;
    width: 0;
    height: 10px;

}

.line2 {
    position: relative;
}

.line2::after {
    content: '';
    position: absolute;
    top: 41px;
    left: 19px;
    border-left: 1px dashed #ccc;
    width: 0;
    height: 11px;
}

.line2::before {
    content: '';
    position: absolute;
    top: -27px;
    left: 19px;
    border-left: 1px dashed #ccc;
    width: 0;
    height: 25px;
}

.under-1 {
    position: relative;
}

.under-1::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -139px;
    border-top: 1px dashed #ccc;
    width: 317px;
    height: 20px;
}

.under-2 {
    position: relative;
}

.under-2::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -60px;
    border-top: 1px dashed #ccc;
    width: 160px;
    height: 20px;
}

.under-3 {
    position: relative;
}

.under-3::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -19px;
    border-top: 1px dashed #ccc;
    width: 77px;
    height: 20px;
}

.id-1 {
    position: relative;
}

.id-1 h2 {
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    right: 534px;
    top: 10px;
}

.under-1 h2 {
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: #FFFFFF;
    white-space: nowrap;
    top: 13px;
    right: -66px;
}

.under-2 h2 {
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: #FFFFFF;
    white-space: nowrap;
    top: 13px;
    right: -66px;
}

.under-3 h2 {
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    color: #FFFFFF;
    white-space: nowrap;
    top: 12px;
    right: -54px;
}

.under-wd {
    position: relative;
}

.under-wd h2 {
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    color: #FFFFFF;
    white-space: nowrap;
    top: 42px;
    right: -7px;
}

.under-wd::after {
    content: '';
    position: absolute;
    top: 71px;
    right: 0px;
    border-top: 1px dashed #ccc;
    width: 40px;
    height: 20px;
}

.line22::after {

    top: 59px;
    left: 19px;

}

.line-last-3 {
    padding-top: 50px;
}

.last-line-1 {
    position: relative;
}

.last-line-1::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 8px;
    border-left: 1px dashed #ccc;
    width: 0;
    height: 22px;
}

.tree-details h2 {
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    margin-bottom: 0;
}

.tree-details-1 {
    min-width: 126px;
    border-right: 1px solid #404D62;
    padding: 0px 20px 0px 10px;
}

.tree-details-2 {
    min-width: 200px;
    border-right: 1px solid #404D62;
    padding: 0px 20px 0px 10px;
}

.tree-details-3 {
    min-width: 160px;
    border-right: 1px solid #404D62;
    padding: 0px 20px 0px 10px;
}

.tree-details-4 {
    min-width: 183px;
    border-right: 1px solid #404D62;
    padding: 0px 20px 0px 10px;
}

.tree-details-5 {
    min-width: 170px;
    border-right: 1px solid #404D62;
    padding: 0px 20px 0px 10px;
}

.tree-details {
    padding: 25px 20px 25px 20px;
    background: linear-gradient(280.14deg, rgba(255, 255, 255, 0.084) -15.31%, rgba(255, 255, 255, 0.054) 105.84%);
    backdrop-filter: blur(28px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 0px 0px 15px 15px;
}

/* Matrix2 */
.matrix-2-cd-1 h2 {
    font-family: Titillium Web;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    color: #FFFFFF;
    margin-bottom: 0px;
}
.matrix-2-total{
    padding: 10px 25px 10px 25px;
}
/*Additional*/
.show_text {
    display: none;
}
.abtn{
  background: transparent;    
  border: none;
}

/* edit */
.id-1-1-1 h2{
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    right: 700px;
    top: 10px;

}
.id-1-1-2 h2{
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    right: 299px;
    top: 10px;

}
.id-1-1-3 h2{
    position: absolute;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    right: 299px;
    top: 10px;

}
.node a{
    display: flex;
    align-items: center;
    position: relative;
    left: 26px;
}
.node-1 a{
    display: initial;
    left: 0px;
}
.node a h2{
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    white-space: nowrap;
    margin-bottom: 0px;
    padding-left: 6px;
}
/* .node{
    position: relative;
} */






/*--||
My Community Page Content Start
||--*/
.tree-total-2{
    padding: 10px 10px 10px 10px;
    overflow: auto;
}
.myTree {   
    width: 100%;
    padding: 10px 10px 10px 10px;    
}

.myTree::-webkit-scrollbar {
    width: 9px;
    height: 8px;
}

.myTree::-webkit-scrollbar-track {
    background-color: #ffffff;
}


.myTree::-webkit-scrollbar-thumb {
    background-color: rgb(207 211 225);
    border-radius: 8px;
}

.myTree::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/*--||
My Community Page Content End
||--*/


/*--||






/*--||
404 Page Content End
||--*/
.fullPage {
    min-height: 100vh;
}

.fnfCon h2 {
    font-size: 30px;
    color: #ffffff;
    font-weight: 800;
}

.fnfImg {
    margin: 1.5rem 0;
}

.bth {
    padding: 2.5rem 0 0;
}
/*--||
404 Page Content End
||--*/


/*--||
Tree Page Content Start
||--*/
a{
    outline:none;
}

.node-cell
{
    position: relative;
}
.node
{
    cursor: default;    
}

#myTreeTbl td {
    text-align: center;
    vertical-align: top;
}

#myTreeTbl .node {
    margin-bottom: -5px;
    color: #428bca;
}

#myTreeTbl .left {
    border-right: 1px dashed #ccc;
    border-top: none;
}

#myTreeTbl .right {
    border-left: 1px dashed #ccc;
}

#myTreeTbl .line {
    height: 18px;
    width: 1px;
}

#myTreeTbl .top {
    border-top: 1px dashed #ccc;
}

#myTreeTbl .username {
    overflow: hidden;
    width: auto;
    color: #FFFFFF;
    background-color: rgb(51, 111, 255);
    padding: 2px 6px;
    position: relative;
    border-radius: 2px;
    display: inline-block;  
}

#myTreeTbl .down {
    /* background-color: #ffffff; */
    margin: 0px auto;
    /* margin: 0px auto; */
    border-right: 1px dashed #ccc;
}

#myTreeTbl .node {
    font-size: 12px !important;
    color: #428bca;
}

#myTreeTbl .node {
    display: inline-block;
    width: 95px;
    margin: 0px 3px 0px;
    z-index: 10;
    overflow: hidden;
    /* word-break: break-all; */
}

.sidespan {
    display: block;
}

.showChild {
    display: inline-block;
    text-decoration: none;
    color: #000000;
}

.showChild:hover {
    text-decoration: none;
    color: #000000;
}

.tree_icon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid #454552;
    background-color: white;
    border: 2px solid #454552;
    margin-left: -3px;
    margin-bottom: 2px;
    object-fit: cover;
}

.imgdowns i {
    margin-left: 5px;
    font-size: 18px;
}

#myTreeTbl .right.top {
    border-left: 1px dashed white;
    border-top: 1px dashed #ffffff;
}

#myTreeTbl .right {
    border: none;
}


.visibilty-hidden {
    visibility: hidden !important;
}


#myDiv.fullscreen {
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background:#fff;
    overflow:scroll
}



.tree-hover-dv
{
    display: none;
}
.tree-hover-dv {
    width: 400px;
    z-index: 9999;
    position: absolute;
    left: 90px;
    top: 80%;
}

.tree-hover-dv.show-tree-detail
{
    display: block;
}
.tbl-tree-hover 
{
    width: 100%;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 4px 4px 13px 2px #00000026;
    -webkit-box-shadow: 4px 4px 13px 2px #00000026;
    -moz-box-shadow: 4px 4px 13px 2px #00000026;
}
.tbl-tree-hover tr th,
.tbl-tree-hover tr td 
{
    background: #ffffff;
    word-break: break-word;
    color: #000000;
    font-size: 14px;
}
.tbl-tree-hover tr td,
.panel #myTreeTbl td 
{
    position: relative;
}
body #myTreeTbl .node,
#myTreeTbl .username
{
    overflow: visible !important;
}
@media only screen and (min-width: 768px)
{
    .username:hover .tree-hover-dv 
    {
        display:block;
    }
}



.mdlPrimary .modal-title
{
    color: #000000;
}
.mdlPrimary .close
{
    outline: 0px;
}
.mdlPrimary .boxTl 
{
    font-size: 16px;
}
.mdlPrimary .tSty_1 thead th,
.mdlPrimary .tSty_1 tbody td
{
    font-size: 14px;
    padding: 9px 20px;
}
@media only screen and (max-width: 480px)
{
    .mdlPrimary .modal-title
    {
        font-size: 16px;
    }
}
/*--||
Tree Page Content End
||--*/

#Downline_history_filter input {
    border: 1px solid #737980;
    border-radius: 10px;
    background: transparent;
    min-height: 35px;
    color: #fff;
    font-size: 15px;
    padding: 8px 15px;
}
#Downline_history_paginate a.paginate_button {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 0px 3px;
    padding: 10px 12px;
    border-radius: 50%;
}

#Downline_history_paginate a.paginate_button:hover{background: linear-gradient(
221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    border-radius: 50%;
    padding: 7px 11px;
    color: #020B29;}



#statistics_history_filter input {
    border: 1px solid #737980;
    border-radius: 10px;
    background: transparent;
    min-height: 35px;
    color: #fff;
    font-size: 15px;
    padding: 8px 15px;
}
#statistics_history_paginate a.paginate_button {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 0px 3px;
    padding: 10px 12px;
    border-radius: 50%;
}

#statistics_history_paginate a.paginate_button:hover{background: linear-gradient(
221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    border-radius: 50%;
    padding: 7px 11px;
    color: #020B29;}    

.Unem-kinl li.active a {
    color: #5CFAC3;
}    

#withdraw_history_filter input {
    border: 1px solid #737980;
    border-radius: 10px;
    background: transparent;
    min-height: 35px;
    color: #fff;
    font-size: 15px;
    padding: 8px 15px;
}
#withdraw_history_paginate a.paginate_button {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 0px 3px;
    padding: 10px 12px;
    border-radius: 50%;
}

#withdraw_history_paginate a.paginate_button:hover{background: linear-gradient(
221.97deg, #00F260 -41.82%, #72B8FF 105.95%);
    border-radius: 50%;
    padding: 7px 11px;
    color: #020B29;}
.abtn, .login-auto{
    display: block;
    width: 246px;
    height: 60px;
    cursor: pointer;
}
.login-auto{
    line-height: 60px;
}

#cover-spin .show_text{    
    background: linear-gradient(0deg, #46CAD8, #33A3EA);
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    z-index: 9999;
    position: relative;}

.Gda-Pf {
    position: relative;
}
.Gda-Pf.Linr-Grnt:after {
    background: linear-gradient(63deg, #0b1b3100 58%, #439aa4);
    right: -2px;
    border-radius: 30px;
    mix-blend-mode: hard-light;
    top: -2px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}

.HEW-Xob {
    position: relative;
}
.HEW-Xob.Linr-Grnt:after {
    background: linear-gradient(63deg, #0b1b3100 58%, #439aa4);
    right: -2px;
    border-radius: 30px;
    mix-blend-mode: hard-light;
    top: -2px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}

.C-wll .login-auto {
    width: 100%;
}

.Db-Gda-Xob {
    position: relative;
}

.Unem-kinl li a img {
    width: 22px;
    height: 22px;
}

#dropdownMenuButton {
    display: inline-block;
}

.Dpst-Modl {
    background: rgb(9 18 37 / 75%);
}

.Dpst-Modl .modal-content {
    background: #000817;
}

.dataTables_filter {
    float: right;
}

.dataTables_paginate {
    float: right;
}

#cover-spin {
    position: fixed;
    width: 100%;
    z-index: 9999999999;
    top: 20px;
    pointer-events: none;
}

#cover-spin .show_text {
    background: linear-gradient(0deg, #46CAD8, #33A3EA);
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    z-index: 9999;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 80%);
    position: relative;
    display: none;
}

#cover-spin.show {
    pointer-events: all;
}

#cover-spin.show .show_text {
    display: block;
}

#cover-spin .close_loader {
    margin-top: 20px;
    font-size: 20px;
    border: 1px solid white;
    display: inline-block;
    padding: 5px 20px;
    background: #003249;
    cursor: pointer;
    display: none;
}

#cover-spin.show .close_loader {
    display: inline-block;
}

.emptyPositionG {
    opacity: 0.5;
}

.bpFormSubmit {
    cursor: pointer;
}

.topListContainer {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    bottom: 0;
    left: 0;
    transition-duration: 400ms;
}

.topListContainer.closed {
    bottom: -450px;
    transition-duration: 400ms;
}

.topListContainer .listCont {
    width: 200px;
    height: 200px;
    min-height: 0;
    margin: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topListContainer .listCont h2 {
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 5px 5px 10px 5px
}

.topListContainer .listCont .list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.topListContainer .listCont.scroll .list .listScrolling {
    animation: animateListText 10s 1s linear infinite;
}

.topListContainer .listCont .list > p {
    font-size: 13px;
}

.closeContainer .close {
    margin-top: 10px;
    margin-right: 10px;
    background: none;
    border: 1px solid #d8fff2;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
    font-weight: normal;
    border-radius: 50%;
    text-shadow: none;
}

.topListContainer.closed .closeContainer .close {
    transform: rotate(180deg);
}

.closeContainer .close:hover {
    background: #d8fff2;
    border: 1px solid transparent;
}

.closeContainer .close span {
    color: #d8fff2;
    transform: translate(0px, 10px);
    
}

.closeContainer .close:hover span {
    color: black;
}

@keyframes animateListText {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, -100%, 0);
    }
}

.selectSlotBtn {
    min-width: 0;
    min-height: 0;
    padding: 10px 20px;
    cursor: pointer;
}

body {
    overflow-x: hidden;
}