@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0
    }
    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1
    }
    to {
        transform: translateX(-100%);
        opacity: 0
    }
}

:root {
    --black: var(--custom-black);
    --font-montserrat: var(--font-montserrat)
}

body {
    font-family: var(--font-montserrat), "Montserrat", sans-serif;
    font-weight: 500;
    color: var(--custom-gray70);
    font-size: 12px
}

a {
    color: var(--custom-white);
    text-decoration: none
}

a:hover {
    color: var(--custom-green)
}

.auth-language {
    position: absolute;
    top: 20px;
    right: 45px
}

.auth-language .dropdown-toggle {
    display: flex
}

.form-input-group {
    border: 1px solid var(--custom-white);
    border-radius: 10px;
    padding: 5px 10px;
    display: flex
}

.form-input-group .input-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%
}

.form-input-group .input-group .input-group-text {
    align-items: center;
    display: flex;
    color: var(--custom-white);
    height: 40px !important
}

.form-input-group .form-control {
    background: transparent;
    border: 1px solid rgba(var(--custom-gray70), .2);
    border-radius: 8px;
    color: var(--custom-white)
}

.form-input-group .form-control:focus {
    background: transparent;
    border-color: var(--custom-green);
    color: var(--custom-white);
    box-shadow: none
}

.form-input-group .form-control::placeholder {
    color: var(--custom-gray50)
}

.form-input-group .form-control:-webkit-autofill,
.form-input-group .form-control:-webkit-autofill:focus,
.form-input-group .form-control:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .839) !important;
    -webkit-text-fill-color: var(--custom-white) !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s
}

.form-input-group .form-control:focus-visible {
    outline: none !important;
    color: var(--custom-white) !important
}

.nav-password {
    color: var(--custom-gray50)
}

.nav-separate {
    border-top: 1px solid var(--custom-gray50)
}

.nav-separate span {
    background: var(--custom-dark-gray);
    margin-top: -10px;
    position: absolute;
    width: 50px;
    margin-left: -25px
}

.text-gradient,
.text-highlight {
    background-image: linear-gradient(91.71deg, var(--custom-orange), var(--custom-yellow), var(--custom-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.referral-wrapper .text-highlight {
    background: linear-gradient(90deg, #00ff85, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .reward-header .reward-overlay .text-highlight {
    background-image: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .text-highlight {
    background: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.spot-detail-wrapper .text-highlight {
    background: linear-gradient(to right, var(--green), var(--green-light));
    -webkit-text-fill-color: transparent
}

.text-highlight {
    display: inline-block
}

.top-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    padding: 10px;
    display: flex;
    justify-content: space-between
}

.top-nav .btn-back {
    display: flex;
    color: var(--custom-gray70);
    align-items: center
}

.top-nav .btn-back svg {
    margin-right: 5px
}

.top-nav .page-title {
    text-transform: capitalize
}

input[type=checkbox] {
    margin-right: 5px
}

.form-validation,
.text-danger {
    font-size: 11px;
    margin-top: 10px
}

.text-danger {
    color: var(--custom-red)
}

.btn:disabled {
    opacity: .5
}

body,
html {
    height: 100%
}

body {
    font-family: var(--font-montserrat), Montserrat, sans-serif;
    background-color: #222;
    font-size: 14px;
    color: var(--custom-white)
}

.container {
    padding-left: 20px;
    padding-right: 20px;
    z-index: 9
}

.full-screen-main-container,
.main-container {
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    background-color: var(--custom-dark-gray);
    position: relative
}

.main-container {
    max-width: 428px
}

.main-container.authentication {
    display: flex;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px
}

.main-container.after-login {
    padding-top: 20px;
    padding-bottom: 100px
}

.main-container.after-login.overlay {
    padding-top: 0;
    padding-bottom: 100px
}

.container-toolbar {
    padding: 20px 15px
}

.bg-login-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50vh;
    background-image: url(bg-header-login.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.bg-login-header .auth-language img {
    border-radius: 50%;
    width: 20px;
    height: 20px
}

.bg-login-header .logo {
    position: absolute;
    left: 50%;
    top: 40px;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-size: contain
}

.login-wrap {
    padding-top: 50%
}

.logo-login {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -91px
}

.btn {
    height: 50px;
    font-size: 16px;
    border-radius: 10px;
    font-weight: 500;
    align-items: center
}

.btn-gradient,
.btn-gradient:hover {
    border: 0;
    background: linear-gradient(91.71deg, var(--custom-orange) 0, var(--custom-yellow) 49.12%, var(--custom-green) 95.38%);
    color: var(--black)
}

.btn-gradient:disabled,
.btn-gradient:hover:disabled {
    background: var(--custom-gray50);
    color: var(--white)
}

.input-otp-row div {
    margin: 0 auto
}

.input-otp-row .w-9 {
    margin-right: 10px;
    width: 3.25rem;
    background-color: var(--custom-light-gray);
    border-radius: 5px;
    overflow: hidden
}

.input-otp-row .h-9 {
    height: 3.25rem
}

.otp-code .input-otp {
    border-radius: 5px;
    border: 1px solid var(--custom-gray50);
    background-color: transparent;
    color: var(--custom-gray70);
    height: 3.25rem;
    width: 3rem
}

.nav-link {
    color: var(--custom-green);
    font-size: 12px;
    text-decoration: none
}

.left-nav {
    width: 100%;
    height: 100vh;
    background: #0e1a18;
    top: 0;
    width: 270px;
    background: var(--custom-dark-gray);
    display: block;
    z-index: 999;
    position: fixed;
    margin-left: -12px;
    transition: all .3s ease
}

.left-nav.opacity-0 {
    animation: slideOut .3s ease-out forwards
}

.left-nav.opacity-10 {
    animation: slideIn .3s ease-in forwards
}

.left-nav.opacity-0 {
    transform: translateX(-100%);
    transition: all .3s ease-out
}

.left-nav.opacity-10 {
    transform: translateX(0);
    transition: all .3s ease-in
}

.left-nav .left-nav-header .member-info {
    padding: 15px;
    margin: 5px 15px;
    border-bottom: 1px solid var(--custom-gray50)
}

.left-nav .left-nav-menu {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 15px 0
}

.left-nav .left-nav-menu .nav-link {
    display: flex;
    align-items: center;
    color: var(--custom-white);
    padding: 10px 20px;
    margin: 0;
    text-decoration: none;
    border-left: 4px solid transparent;
    font-size: 14px;
    width: 100%;
    min-height: 44px
}

.left-nav .left-nav-menu .nav-link img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0 15px 0 0;
    transition: .3s
}

.left-nav .left-nav-menu .nav-link span {
    flex: 1;
    white-space: nowrap
}

.left-nav .left-nav-menu .nav-link.active,
.left-nav .left-nav-menu .nav-link:hover {
    border-left: 4px solid transparent;
    border-image: linear-gradient(to bottom, var(--custom-orange), var(--custom-yellow), var(--custom-green)) 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .147) 115.12%)
}

.left-nav .left-nav-menu .nav-link.active span,
.left-nav .left-nav-menu .nav-link:hover span {
    background-image: linear-gradient(91.71deg, var(--custom-orange), var(--custom-yellow), var(--custom-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.referral-wrapper .left-nav .left-nav-menu .nav-link.active span,
.referral-wrapper .left-nav .left-nav-menu .nav-link:hover span {
    background: linear-gradient(90deg, #00ff85, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .reward-header .reward-overlay .left-nav .left-nav-menu .nav-link.active span,
.reward-wrapper .reward-header .reward-overlay .left-nav .left-nav-menu .nav-link:hover span {
    background-image: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .left-nav .left-nav-menu .nav-link.active span,
.reward-wrapper .left-nav .left-nav-menu .nav-link:hover span {
    background: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.spot-detail-wrapper .left-nav .left-nav-menu .nav-link.active span,
.spot-detail-wrapper .left-nav .left-nav-menu .nav-link:hover span {
    background: linear-gradient(to right, var(--green), var(--green-light));
    -webkit-text-fill-color: transparent
}

.left-nav .left-nav-menu .nav-link.active img:hover,
.left-nav .left-nav-menu .nav-link:hover img:hover {
    content: attr(data-hover)
}

.left-nav .left-nav-menu hr {
    margin: 20px;
    border-color: var(--custom-gray50)
}

.left-nav .left-nav-menu .sub-menu {
    width: 100%;
    padding-left: 15px
}

.left-nav .left-nav-menu .sub-menu img {
    margin-right: 15px
}

.left-nav .left-nav-menu .sub-menu .sub-menu {
    padding-left: 40px
}

.left-nav.opacity-0 {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out, visibility .3s ease-out
}

.left-nav.opacity-10 {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease-in, visibility .3s ease-in
}

.member-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0
}

.member-info img {
    margin: 0 10px 0 0
}

.member-info .member-info-name {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.member-info .member-info-name h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500
}

.member-info .member-info-name h5 {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--custom-gray50)
}

.simplebar-scrollbar:before {
    background: var(--custom-green) !important
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: 1 !important
}

.main-nav .top-nav {
    padding: 10px 15px;
    top: 10px;
    z-index: 999
}

.main-nav .top-nav h1 {
    font-size: 18px;
    font-weight: 700
}

.float-end {
    float: right !important
}

.btn-deposit {
    width: 80px;
    padding: 6px;
    display: block;
    position: relative;
    border-radius: 38px;
    background: linear-gradient(90deg, var(--custom-orange) 0, var(--custom-yellow) 51.5%, var(--custom-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    font-weight: 600
}

.btn-deposit:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 38px;
    border: 1px solid transparent;
    background: linear-gradient(140deg, var(--custom-orange), var(--custom-yellow)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude
}

.link-more {
    font-size: 12px;
    color: var(--custom-gray50)
}

.text-green {
    color: var(--custom-green)
}

.text-red {
    color: var(--custom-red)
}

.percentage {
    margin-left: 5px
}

.percentage i {
    margin-right: 5px
}

.price-balance {
    font-size: 24px;
    background: linear-gradient(90deg, var(--custom-orange) 0, var(--custom-yellow) 51.5%, var(--custom-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.text-gray50 {
    color: var(--custom-gray50)
}

.text-upper {
    text-transform: uppercase
}

.image-container img {
    margin: 0 auto
}

.phone-input-container.react-tel-input {
    width: 100%;
    border: 0
}

.phone-input-container.react-tel-input .form-control {
    border: 0
}

.phone-input-container.react-tel-input .flag-dropdown {
    background-color: transparent;
    border: none;
    border-radius: 0
}

.phone-input-container.react-tel-input .selected-flag:focus,
.phone-input-container.react-tel-input .selected-flag:hover {
    background-color: transparent !important
}

.phone-input-container.react-tel-input .flag-dropdown.open,
.phone-input-container.react-tel-input .flag-dropdown.open .selected-flag {
    background: transparent !important
}

.phone-input-container.react-tel-input .country-list {
    background-color: var(--custom-dark-gray) !important
}

.phone-input-container.react-tel-input .country-list .country.highlight,
.phone-input-container.react-tel-input .country-list .country:hover {
    background-color: var(--custom-gray50)
}

.phone-input-container.react-tel-input .country-list .search {
    background-color: var(--custom-dark-gray)
}

.phone-input-container.react-tel-input .country-list .search-box {
    background: var(--custom-dark-gray)
}

.updateProfileSelectedFlag .selected-flag {
    margin-left: -47px;
    margin-top: -2px
}

.left-lang-nav {
    width: 100%
}

.left-lang-nav .nav-language-selector {
    background-color: #262929
}

.left-lang-nav .nav-language-selector .nav-language-selector-item {
    background-color: transparent;
    color: var(--custom-white);
    padding: 15px 15px 15px 35px
}

.left-lang-nav .nav-language-selector .nav-language-selector-item:hover {
    background-color: var(--custom-white);
    color: var(--custom-black)
}

.hidden-span {
    width: 50px
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    z-index: 1000
}

.modal .modal-content {
    background-color: var(--custom-dark-gray);
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    overflow: auto;
    margin: auto;
    box-shadow: 0 2px 10px hsla(0, 0%, 100%, .1);
    color: var(--custom-white)
}

.modal .modal-content.bg-wallet {
    background: var(--custom-dark-gray)
}

.modal .modal-content .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.modal .modal-content .modal-hd-line {
    margin: 0 auto;
    width: 180px;
    height: 3px;
    background: hsla(0, 0%, 100%, .3)
}

.modal .modal-content .modal-body {
    font-size: .9rem
}

.modal .modal-content .modal-body h4 {
    font-size: 18px;
    font-weight: 600
}

.modal .modal-content .modal-body .list-choose-network {
    margin-top: 0;
    margin-bottom: 1rem
}

.modal .modal-content .modal-body .list-choose-network li {
    padding: 20px;
    border-top: 1px solid var(--custom-gray50);
    cursor: pointer
}

.modal .modal-content .modal-body .network-remark {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.modal .modal-content .modal-body .network-remark svg {
    margin-right: 5px;
    margin-top: -5px
}

.phone-input-container.react-tel-input .form-control {
    margin-left: 50px;
    background-color: transparent;
    color: var(--custom-white)
}

.phone-input-wrapper .phone-input-container.react-tel-input .form-control {
    margin-left: 0
}

.form-justify-between {
    display: flex;
    justify-content: space-between;
    margin: 30px 0
}

.form-justify-between label {
    font-size: 16px;
    font-weight: 500;
    color: hsla(0, 0%, 100%, .5)
}

.modal-form-footer {
    border-top: 1px solid var(--custom-gray50);
    margin: 30px -15px 0;
    padding: 15px
}

.modal-form-footer .form-justify-between {
    margin: 10px 0
}

.btn-max {
    color: var(--custom-green);
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    margin-left: 10px
}

.btn-green,
.btn-green:hover {
    background-color: var(--custom-green);
    color: var(--custom-black);
    padding: 5px 20px;
    height: 40px;
    font-size: 14px
}

.modal-header {
    border-bottom: none !important
}

input {
    background-color: transparent;
    color: var(--custom-white);
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 16px
}

input:not(:placeholder-shown) {
    background-color: rgba(0, 0, 0, .573);
    color: #fff
}

input::placeholder {
    color: #aaa
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 30px rgba(0, 0, 0, .573) !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s
}

input:autofill {
    background-color: rgba(0, 0, 0, .573) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, .573) !important
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: rgba(0, 0, 0, .573) !important;
    color: #fff !important
}

.country-select ul {
    background-color: #000 !important;
    color: #fff !important
}

.mobile-toast {
    animation: fadeInOut 3s ease;
    padding: 12px 16px !important;
    font-size: 16px !important
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    10% {
        opacity: 1;
        transform: translateY(0)
    }
    90% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(20px)
    }
}

@media(max-width:768px) {
    .mobile-toast {
        margin-bottom: 20px;
        width: 90% !important;
        max-width: none !important
    }
}

iframe {
    border: none !important;
    outline: none !important;
    left: -100em !important
}

.text-gold-gradient {
    background-image: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.text-gray70 {
    color: hsla(0, 0%, 100%, .7)
}

.text-gray50 {
    color: hsla(0, 0%, 100%, .5)
}

.text-gray30 {
    color: hsla(0, 0%, 100%, .3)
}

.text-gray-50 {
    color: hsla(0, 0%, 100%, .5)
}

.text-orange {
    color: #ff882e
}

.text-white {
    color: #fff
}

.page-wrapper {
    background-image: url(bg-home.png);
    padding: 128px 15px 80px
}

.leaderboard-wrapper,
.page-wrapper {
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    min-height: 100vh
}

.leaderboard-wrapper {
    background-image: url(bg-bitcoin.svg);
    padding: 48px 15px 80px
}

.about-wrapper,
.announcement-wrapper,
.bitbooster-purchase-wrapper,
.channel-listing-wrapper,
.mining-wrapper,
.ticket-info-wrapper,
.wallet-info-wrapper {
    background-size: contain;
    min-height: 100vh;
    padding: 88px 15px 80px
}

.transfer-page,
.withdrawal-page {
    background-size: contain;
    min-height: 100vh;
    padding: 88px 0 80px
}

.mining-page {
    background-image: url(bg-downline-tree-top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    min-height: 100vh;
    padding: 75px 15px 80px
}

.mining-page .booster-select {
    background: transparent;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    width: 200px;
    margin: 10px;
    cursor: pointer;
    font-size: 14px
}

.mining-page .booster-select option {
    background-color: #1a1a1a;
    color: #fff;
    padding: 8px
}

.downline-tree-wrapper,
.wallet-wrapper {
    padding: 88px 0 80px
}

.assets-wrapper,
.bitbooster-wrapper,
.deposit-list-wrapper,
.downline-tree-wrapper,
.transaction-list-wrapper,
.wallet-wrapper {
    background-image: url(bg-downline-tree-top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    min-height: 100vh
}

.assets-wrapper,
.bitbooster-wrapper,
.deposit-list-wrapper,
.transaction-list-wrapper {
    padding: 68px 0 80px
}

.channel-wrapper {
    background-image: url(bg-downline-tree-top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    min-height: 100vh;
    padding: 68px 15px 80px
}

.card-form-wrapper,
.card-management-wrapper,
.deposit-wrapper,
.ekyc-wrapper,
.referral-wrapper {
    background-size: contain;
    min-height: 100vh;
    padding: 48px 15px 80px
}

.spot-detail-wrapper {
    padding: 68px 15px 15px
}

.reward-wrapper {
    background-image: url(promotion.png);
    padding: 48px 15px 15px;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain
}

.channel-details-wrapper,
.event-details-wrapper {
    background-size: contain;
    min-height: 100vh;
    padding: 0 0 80px
}

.channel-video,
.channel-video .carousel-container {
    padding: 20px 0
}

.channel-video .carousel-item {
    padding: 0 10px
}

.channel-video .carousel-item .video-title {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500
}

.my-referral-wrapper {
    margin-top: 40px
}

.jackpot-pool-page {
    background-image: url(bg-downline-tree-top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    min-height: 100vh;
    padding: 75px 15px 80px
}

.page-register .page-title {
    margin-bottom: 50px
}

.page-register .page-title h1 {
    font-size: 28px;
    font-weight: 700
}

.page-register .page-title h4 {
    font-size: 14px;
    color: var(--custom-gray70);
    font-weight: 400
}

.form-input-group {
    position: relative
}

.form-input-group .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--custom-gray70)
}

.form-input-group label {
    color: #777;
    position: absolute;
    left: 40px
}

.form-input-group.focused label {
    color: #fff;
    background-color: #000;
    position: absolute;
    left: 10px;
    top: -15px;
    font-size: 12px;
    transition: all .2s ease-in
}

.form-input-group.focused input::placeholder {
    font-size: small;
    top: -100px;
    color: #fff;
    transition: all .2ms ease
}

.home-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    color: #fff
}

.hero-section {
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(255, 136, 46, .1) 0, transparent 70%)
}

.hero-background {
    position: relative;
    width: 100%;
    height: 100%
}

.hero-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(255, 136, 46, .2), rgba(32, 241, 158, .2));
    filter: blur(1px)
}

.decoration-circle.decoration-circle-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation: float 6s ease-in-out infinite
}

.decoration-circle.decoration-circle-2 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 15%;
    animation: float 8s ease-in-out infinite reverse
}

.decoration-circle.decoration-circle-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation: float 7s ease-in-out infinite
}

.decoration-ellipse {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 300px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(32, 241, 158, .1), rgba(255, 136, 46, .1));
    filter: blur(2px);
    animation: pulse 4s ease-in-out infinite
}

@keyframes float {
    0%,
    to {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px)
    }
}

@keyframes pulse {
    0%,
    to {
        opacity: .5;
        transform: scale(1)
    }
    50% {
        opacity: .8;
        transform: scale(1.1)
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 100px 0
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center
}

.hero-title .title-line-1,
.hero-title .title-line-2 {
    display: block;
    background: linear-gradient(45deg, #ff882e, #20f19e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hero-title .title-line-2 {
    font-size: 3.5rem;
    margin-top: -.5rem
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    opacity: .9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
}

.hero-actions .btn {
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 25px;
    transition: all .3s ease
}

.hero-actions .btn.btn-primary {
    background: linear-gradient(45deg, #ff882e, #20f19e);
    border: none
}

.hero-actions .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 136, 46, .3)
}

.hero-actions .btn.btn-outline-light {
    border: 2px solid hsla(0, 0%, 100%, .3)
}

.hero-actions .btn.btn-outline-light:hover {
    background: hsla(0, 0%, 100%, .1);
    transform: translateY(-2px)
}

.stats-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, .3)
}

.stats-container .stat-card {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .02));
    border-radius: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    backdrop-filter: blur(10px);
    transition: all .3s ease
}

.stats-container .stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 136, 46, .3)
}

.stats-container .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #20f19e;
    margin-bottom: 10px
}

.stats-container .stat-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px
}

.stats-container .stat-description {
    font-size: .9rem;
    opacity: .7
}

.features-section {
    padding: 80px 0
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, #ff882e, #20f19e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.section-subtitle {
    font-size: 1.1rem;
    opacity: .8;
    max-width: 600px;
    margin: 0 auto
}

.feature-card {
    display: flex;
    align-items: flex-start;
    padding: 30px;
    background: linear-gradient(135deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .02));
    border-radius: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    backdrop-filter: blur(10px);
    transition: all .3s ease;
    height: 100%
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 136, 46, .3)
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0
}

.feature-icon span {
    font-size: 1.5rem
}

.feature-content {
    flex: 1
}

.feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff
}

.feature-description {
    font-size: .95rem;
    opacity: .8;
    line-height: 1.6;
    margin: 0
}

.partnerships-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, .3)
}

.partnership-card {
    padding: 30px;
    background: linear-gradient(135deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .02));
    border-radius: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    backdrop-filter: blur(10px);
    transition: all .3s ease;
    height: 100%
}

.partnership-card:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 241, 158, .3)
}

.partnership-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.partnership-icon {
    font-size: 2rem;
    margin-right: 15px
}

.partnership-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0
}

.partnership-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.partnership-item {
    display: flex;
    align-items: center;
    padding: 10px 0
}

.partnership-item i {
    color: #20f19e;
    margin-right: 10px
}

.ecosystem-section {
    padding: 80px 0
}

.ecosystem-feature {
    margin-bottom: 60px
}

.ecosystem-content {
    padding-right: 30px
}

.ecosystem-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #ff882e, #20f19e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.ecosystem-description {
    font-size: 1.1rem;
    opacity: .8;
    line-height: 1.6
}

.pillars-container .pillar-card {
    text-align: center;
    padding: 25px 15px;
    background: linear-gradient(135deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .02));
    border-radius: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    backdrop-filter: blur(10px);
    transition: all .3s ease;
    height: 100%
}

.pillars-container .pillar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 136, 46, .3)
}

.pillars-container .pillar-icon {
    font-size: 2rem;
    margin-bottom: 15px
}

.pillars-container .pillar-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #20f19e
}

.pillars-container .pillar-description {
    font-size: .9rem;
    opacity: .8;
    margin: 0
}

.faq-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, .3)
}

.faq-container .faq-item {
    margin-bottom: 15px;
    background: linear-gradient(135deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .02));
    border-radius: 10px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all .3s ease
}

.faq-container .faq-item.active {
    border-color: rgba(255, 136, 46, .3)
}

.faq-container .faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 25px 25px
}

.faq-container .faq-question {
    padding: 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .3s ease
}

.faq-container .faq-question:hover {
    background: hsla(0, 0%, 100%, .05)
}

.faq-container .faq-question h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600
}

.faq-container .faq-question i {
    color: #ff882e;
    transition: transform .3s ease
}

.faq-container .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease
}

.faq-container .faq-answer p {
    margin: 0;
    opacity: .8;
    line-height: 1.6
}

@media(max-width:768px) {
    .hero-title {
        font-size: 2.5rem
    }
    .hero-title .title-line-2 {
        font-size: 2rem
    }
    .hero-subtitle {
        font-size: 1rem
    }
    .section-title {
        font-size: 2rem
    }
    .feature-card {
        flex-direction: column;
        text-align: center
    }
    .feature-card .feature-icon {
        margin-right: 0;
        margin-bottom: 15px
    }
    .ecosystem-content {
        padding-right: 0;
        margin-bottom: 30px
    }
}

.widget_balance {
    width: 100%;
    height: 261px;
    background-image: url(border-balance.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 400px 261px
}

.widget_balance .widget_balance_header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.widget_balance .widget_balance_header .balance_title {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .698)
}

.widget_balance .widget_balance_header .balance_title a {
    margin-left: 5px
}

.widget_balance .title-currency {
    display: flex;
    align-items: center;
    font-size: 12px;
    width: 50px;
    margin: 10px 0 5px
}

.widget_balance .title-currency img {
    margin: 0 5px 0 0
}

.widget_notification_content {
    margin: 30px 0;
    text-align: left;
    border-left: 3px solid #ff882e;
    background-color: #151919;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.widget_notification_content img {
    margin: 0 10px 0 0
}

.widget_notification_content span {
    font-size: 15px
}

.widget_notification_content .notification-item {
    display: block;
    width: 93%;
    font-size: 20px
}

.widget_booster {
    margin: 30px 0
}

.widget_booster h2 {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px
}

.widget_booster .bootster_item {
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.widget_booster .bootster_item .bootster_item_text h4 {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize
}

.widget_booster .bootster_item .bootster_item_text h5 {
    font-size: 14px
}

.widget_booster .bootster_item.bootster_item_active {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, rgba(14, 34, 16, .8), rgba(0, 0, 0, .147) 50%);
    border-radius: 15px
}

.widget_booster .bootster_item.bootster_item_active h4 {
    color: #20f19e
}

.widget_booster .bootster_item.bootster_item_inactive {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, rgba(41, 24, 10, .8), rgba(0, 0, 0, .147) 50%);
    border-radius: 15px
}

.widget_booster .bootster_item.bootster_item_inactive h4 {
    color: #ff882e
}

.widget_booster .bootster_item.bootster_item_low {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, rgba(39, 35, 15, .8), rgba(0, 0, 0, .147) 50%);
    border-radius: 15px
}

.widget_booster .bootster_item.bootster_item_low h4 {
    color: #f1b71c
}

.widget_booster .bootster_item.bootster_item_disabled {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, rgba(29, 32, 32, .8), rgba(0, 0, 0, .147) 50%);
    border-radius: 15px
}

.widget_booster .bootster_item.bootster_item_disabled h4 {
    color: #a0a0a0
}

.widget_booster .bootster_item .bootster_item_icon {
    margin-right: 10px
}

.widget_banner {
    border-radius: 15px;
    overflow: hidden;
    position: relative
}

.widget_banner,
.widget_bitbooster {
    margin: 10px 0 30px
}

.widget_bitbooster .widget_bitbooster_header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.widget_bitbooster .widget_bitbooster_header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.widget_bitbooster .widget_bitbooster_content p {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .522)
}

.widget_bitbooster .widget_bitbooster_content p span {
    color: #20f19e
}

.widget_referral_performance {
    margin: 10px 0 30px
}

.widget_referral_performance h2 {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px
}

.widget_referral_performance .widget_referral_performance_content {
    padding: 30px;
    background: linear-gradient(148.37deg, hsla(0, 0%, 100%, .08) -10.01%, hsla(0, 0%, 100%, .008) 79.32%);
    border-radius: 10px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    margin-top: 15px
}

.widget_referral_performance .widget_referral_performance_content ul {
    padding: 0
}

.widget_referral_performance .widget_referral_performance_content ul li {
    margin: 0 0 15px
}

.widget_referral_performance .widget_referral_performance_content ul li .widget_referral_performance_content_item {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.widget_referral_performance .widget_referral_performance_content ul li .widget_referral_performance_content_item .widget_referral_performance_content_item_left {
    margin-right: 10px
}

.widget_referral_performance .widget_referral_performance_content ul li .widget_referral_performance_content_item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    line-height: 12px
}

.widget_referral_performance .widget_referral_performance_content ul li .widget_referral_performance_content_item span {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .522)
}

.widget_reward {
    margin: 10px 0 30px
}

.widget_reward h2 {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px
}

.widget_reward .widget_reward_content_item {
    margin-bottom: 10px;
    padding: 30px;
    background: linear-gradient(264.15deg, hsla(0, 0%, 100%, .08) 2.15%, hsla(0, 0%, 100%, .03) 95.06%);
    border-radius: 10px
}

.widget_reward .widget_reward_content_item.total_mining_reward {
    padding: 30px;
    border-radius: 10px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-image: linear-gradient(180deg, #ff882e, #f1b71c, #1bf29e) 1;
    background: linear-gradient(267.98deg, hsla(0, 0%, 100%, .08) 2.47%, hsla(0, 0%, 100%, .03) 94.74%);
    text-align: center
}

.widget_reward .widget_reward_content_item h3 {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 2px
}

.widget_reward .widget_reward_content_item h1 {
    font-size: 22px;
    font-weight: 700;
    color: #20f19e;
    margin-bottom: 2px;
    line-height: 24px
}

.widget_reward .widget_reward_content_item h4 {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .502);
    margin-bottom: 2px
}

.widget_reward .widget_reward_content_item .widget_reward_content_item_line {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.widget_reward .widget_reward_content_item .widget_reward_content_item_line .widget_reward_content_item_line_left {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .702)
}

.widget_reward .widget_reward_content_item .widget_reward_content_item_line .widget_reward_content_item_line_right {
    font-size: 11px
}

.widget_income {
    margin: 10px 0 30px
}

.widget_income h1 {
    font-size: 14px
}

.widget_income h2 {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px
}

.widget_income h3 {
    font-size: 16px
}

.widget_income .total_network_income {
    border-left: 4px solid #20f19e;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .08), rgba(0, 0, 0, .08));
    background-blend-mode: screen;
    border-radius: 3px;
    padding: 8px 25px
}

.widget_income .total_network_income h1 {
    font-size: 21px;
    font-weight: 400;
    color: #20f19e;
    margin-bottom: 2px;
    line-height: 24px
}

.widget_income ul {
    padding: 0
}

.widget_income li .widget_income_content_item_line {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.widget_income li .widget_income_content_item_line .widget_income_content_item_line_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: hsla(0, 0%, 100%, .702);
    font-size: 12px
}

.widget_income li .widget_income_content_item_line .widget_income_content_item_line_left img {
    margin-right: 5px
}

.widget_income li .widget_income_content_item_line .income_total {
    font-size: 12px;
    color: #fff;
    text-align: right
}

.widget_income li .widget_income_content_item_line .income_total2 {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .702);
    text-align: right
}

.widget_income li:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center
}

.footer {
    margin-top: 50px;
    text-align: center;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .702)
}

.nav_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #030808;
    padding: 15px 20px 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    max-width: 428px;
    margin: 0 auto;
    z-index: 9
}

.nav_footer:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-top: 1px solid transparent;
    background-image: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .25) 25%, hsla(0, 0%, 100%, .25) 75%, transparent), linear-gradient(180deg, #030808, #030808);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box
}

.nav_footer .nav-link {
    color: hsla(0, 0%, 100%, .702)
}

.nav_footer .nav-link.active,
.nav_footer .nav-link:hover {
    color: #20f19e
}

.nav_footer .nav-link img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto 5px
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    margin-right: 10px
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.modal-actions .btn {
    margin-left: 10px
}

.network-remark {
    display: flex;
    align-items: center;
    margin-top: 20px
}

.network-remark-text {
    margin-left: 10px
}

.btn-close-white.disabled {
    opacity: .5;
    cursor: not-allowed
}

.page-container {
    min-height: 100vh;
    background: #f5f5f5
}

.page-container .page-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.stat-card h3 {
    color: #666;
    margin-bottom: 10px
}

.stat-card .amount {
    font-size: 24px;
    font-weight: 700;
    color: #333
}

.primary-btn {
    background: #007aff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer
}

.primary-btn:hover {
    background: #06c
}

.secondary-btn {
    background: #fff;
    color: #007aff;
    border: 1px solid #007aff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer
}

.secondary-btn:hover {
    background: #f5f5f5
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px
}

.event-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.event-card .event-image {
    position: relative;
    height: 200px
}

.event-card .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.event-card .event-image .status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600
}

.event-card .event-image .status-badge.ongoing {
    background: #4caf50;
    color: #fff
}

.event-card .event-image .status-badge.upcoming {
    background: #2196f3;
    color: #fff
}

.event-card .event-image .status-badge.ended {
    background: #9e9e9e;
    color: #fff
}

.event-card .event-content {
    padding: 15px
}

.event-card .event-content h3 {
    margin: 0 0 10px;
    font-size: 18px
}

.event-card .event-content .date {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px
}

.event-card .event-content .description {
    color: #333;
    margin-bottom: 20px
}

.event-card .event-content .join-btn {
    width: 100%;
    padding: 10px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer
}

.event-card .event-content .join-btn:hover {
    background: #06c
}

.event-item {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.event-item span {
    margin-left: 5px;
    margin-top: -2px
}

.theme-options {
    display: grid;
    gap: 20px;
    margin-bottom: 30px
}

.theme-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all .3s ease;
    border: 2px solid transparent
}

.theme-card.active {
    border-color: #007aff
}

.theme-card .theme-icon {
    font-size: 24px;
    margin-right: 20px
}

.theme-card .theme-info {
    flex: 1
}

.theme-card .theme-info h3 {
    margin: 0 0 5px
}

.theme-card .theme-info p {
    margin: 0;
    color: #666
}

.theme-card .theme-check {
    width: 24px;
    height: 24px
}

.theme-card .theme-check .check-icon {
    color: #007aff
}

.theme-preview {
    background: #fff;
    border-radius: 12px;
    padding: 20px
}

.theme-preview .preview-container {
    height: 300px;
    border-radius: 8px;
    overflow: hidden
}

.theme-preview .preview-container.light {
    background: #fff
}

.theme-preview .preview-container.dark {
    background: #1a1a1a
}

.events-filter {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px
}

.events-filter .filter-btn {
    margin: 70px 10px;
    padding: 5px 20px;
    border-radius: 15px;
    background: #181b1b;
    color: hsla(0, 0%, 100%, .5);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700
}

.events-filter .filter-btn.active {
    background: #1bf29e;
    color: #000
}

.events-wrapper .event-card {
    background-image: url(bg-event-card.png);
    background-size: contain;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top;
    width: 100%;
    height: 165px;
    padding: 20px;
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 20px
}

.events-wrapper .event-card .event-image {
    position: relative;
    width: 86px;
    height: 111px;
    background: transparent
}

.events-wrapper .event-card .event-image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.events-wrapper .event-card h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700
}

.events-wrapper .event-card .skeleton-image {
    width: 100%;
    height: 100%;
    background: #ccc;
    border-radius: 8px
}

.events-wrapper .event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px
}

.events-wrapper .event-footer .event-period {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.events-wrapper .event-footer .view-more-btn {
    color: #1bf29e;
    font-size: 12px
}

.event-details-wrapper {
    padding-bottom: 100px
}

.event-details-wrapper .event-body-wrapper {
    padding: 40px 0 0;
    border-radius: 20px 20px 0 0;
    background: #000;
    margin-top: -20px;
    position: relative
}

.event-details-wrapper .event-image {
    position: relative
}

.event-details-wrapper .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.event-details-wrapper .event-image .share-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    z-index: 999
}

.event-details-wrapper .event-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4)
}

.event-details-wrapper .event-content {
    padding: 0 20px
}

.event-details-wrapper .event-content .event-title h4 {
    font-size: 18px;
    font-weight: 700
}

.event-details-wrapper .event-content .event-date {
    margin-top: 10px;
    color: #666;
    font-size: 14px
}

.event-details-wrapper h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px
}

.event-details-wrapper .tickets-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.event-details-wrapper .tickets-row .tickets-row-item {
    color: #666;
    font-size: 14px;
    padding: 0 10px;
    display: flex;
    align-items: center
}

.event-details-wrapper .tickets-row .tickets-row-item:nth-child(2) {
    margin: 0 10px;
    border-color: hsla(0, 0%, 100%, .3) !important;
    border-width: 0 1px
}

.event-details-wrapper .tickets-row .tickets-row-item h2 {
    font-size: 24px;
    font-weight: 700;
    color: #20f19e;
    margin: 5px 10px
}

.event-details-wrapper .tickets-row .tickets-row-item .tickets-row-item-desc {
    font-size: 12px;
    font-weight: 700;
    width: 60px
}

.event-details-wrapper .ticket-info {
    margin-top: 20px;
    border: 1px solid hsla(0, 0%, 100%, .3);
    padding: 20px;
    border-radius: 12px
}

.event-details-wrapper .ticket-info .ticket-info-item {
    display: flex;
    align-items: center
}

.event-details-wrapper .ticket-image {
    margin-right: 10px
}

.event-details-wrapper .ticket-info-row {
    margin-bottom: 20px
}

.event-details-wrapper .event-description {
    margin: 50px 0
}

.event-details-wrapper .event-description h2 {
    font-size: 18px;
    font-weight: 700
}

.progress-bar {
    margin-top: 10px
}

.progress-bar .bg-primary {
    background-color: #20f19e
}

.progress-bar .bg-primary\/20 {
    background: #585858
}

.progress-bar .progress-bar-text {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    margin-bottom: 2px
}

.ProgressIndicator {
    background-color: #fff;
    width: 100%;
    height: 100%;
    transition: transform .66s cubic-bezier(.65, 0, .35, 1)
}

.about-wrapper .about-logo {
    margin: 20px 0;
    text-align: center
}

.about-wrapper .about-logo img {
    margin: 0 auto
}

.about-wrapper .about-banner,
.about-wrapper .about-section {
    margin: 20px 0
}

.about-wrapper .about-section h2 {
    font-size: 18px;
    font-weight: 700
}

.about-wrapper .about-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #20f19e
}

.about-wrapper .about-section img {
    width: 100%;
    height: auto;
    margin: 20px 0
}

.about-wrapper .about-description {
    margin: 20px 0
}

.about-wrapper .about-description p {
    font-size: 12px;
    color: #666
}

.about-wrapper .about-description ul {
    margin-top: 10px
}

.about-wrapper .about-description ul li {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
    display: flex;
    align-items: center
}

.about-wrapper .about-description ul li svg {
    margin-right: 5px
}

.about-wrapper .about-achievements-section,
.about-wrapper .about-steps {
    margin: 40px 0
}

.about-wrapper .about-achievements-section h2,
.about-wrapper .about-steps h2 {
    font-size: 18px;
    font-weight: 700
}

.about-wrapper .about-achievements-section .about-achievements-images,
.about-wrapper .about-steps .about-achievements-images {
    margin: 20px auto;
    text-align: center
}

.about-wrapper .about-achievements-section .about-achievements-images img,
.about-wrapper .about-steps .about-achievements-images img {
    width: 100%;
    height: auto;
    margin: 0 auto
}

.about-wrapper .about-achievements-section .about-achievements-images h4,
.about-wrapper .about-steps .about-achievements-images h4 {
    font-size: 14px;
    font-weight: 700;
    color: #ccc
}

.about-wrapper .about-achievements-section .about-achievements-images h5,
.about-wrapper .about-steps .about-achievements-images h5 {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.about-wrapper .about-featured-section {
    margin: 40px 0
}

.about-wrapper .about-featured-section h2 {
    font-size: 18px;
    font-weight: 700
}

.about-wrapper .about-featured-section .about-feature-item {
    display: flex;
    align-items: center;
    margin-top: 20px
}

.about-wrapper .about-featured-section .about-feature-item img {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-right: 20px;
    border: 1px solid #242424
}

.about-wrapper .about-featured-section .about-feature-item .about-feature-title h4 {
    font-size: 14px;
    font-weight: 400
}

.about-wrapper .about-featured-section .about-feature-item .about-feature-title a {
    display: flex;
    align-items: center;
    color: #20f19e
}

.about-wrapper .about-featured-section .about-feature-item .about-feature-title a svg {
    margin-right: 5px
}

.about-wrapper .about-steps ul {
    padding: 0;
    margin: 20px 0
}

.about-wrapper .about-steps ul li {
    list-style: none
}

.about-wrapper .about-steps ul li .about-step-list {
    background: linear-gradient(89.48deg, hsla(0, 0%, 100%, .1) -8.21%, hsla(0, 0%, 100%, .047) 96.13%);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.about-wrapper .about-steps ul li .about-step-list h4 {
    font-size: 18px
}

.about-wrapper .about-steps ul li .about-step-list p {
    color: hsla(0, 0%, 100%, .7)
}

.about-wrapper .about-steps ul li .about-step-list .about-step-image {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px
}

.about-wrapper .about-steps ul li .about-step-list .about-step-image svg {
    color: #fff
}

.about-wrapper .marquee {
    margin: 30px 0
}

.about-wrapper .marquee .rfm-child {
    text-align: center;
    white-space: nowrap;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 1vh 1vw 0;
    text-transform: uppercase;
    color: #030808;
    text-shadow: -1px -1px 0 #20f19e, 1px -1px 0 #20f19e, -1px 1px 0 #20f19e, 1px 1px 0 #20f19e
}

.about-wrapper .about-faq {
    margin: 40px 0
}

.about-wrapper .about-faq h4 {
    font-size: 18px;
    font-weight: 700
}

.about-wrapper .about-faq .about-faq-box {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 20px;
    background: linear-gradient(224.42deg, hsla(0, 0%, 100%, .08) 22.5%, hsla(0, 0%, 100%, 0) 60.95%)
}

.about-wrapper .about-faq .about-faq-box .accordion-trigger {
    color: #fff;
    transition: color .3s ease
}

.about-wrapper .about-faq .about-faq-box .accordion-trigger[aria-expanded=true],
.about-wrapper .about-faq .about-faq-box .accordion-trigger[data-state=open] {
    color: #20f19e
}

.about-wrapper .about-faq .about-faq-box .accordion-item {
    position: relative
}

.about-wrapper .about-faq .about-faq-box .accordion-item .accordion-content {
    font-size: 14px;
    font-weight: 400;
    color: gray
}

.about-wrapper .about-faq .about-faq-box .accordion-item:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.announcement-wrapper .announcement-item {
    background-color: #111515;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px
}

.announcement-wrapper .announcement-item .date {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.announcement-details-wrapper {
    padding-top: 80px;
    padding-bottom: 100px
}

.announcement-details-wrapper .date {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.announcement-details-wrapper .announcement-header {
    text-align: center
}

.announcement-details-wrapper .announcement-content {
    padding: 10px
}

.pagination {
    margin: 20px 0;
    display: flex;
    justify-content: center
}

.pagination button {
    margin: 0 5px
}

.pagination button.active {
    color: #20f19e
}

.pagination button.disabled {
    color: hsla(0, 0%, 100%, .5);
    opacity: .5
}

.cursor-pointer {
    cursor: pointer
}

.underlineText {
    text-decoration: "underline"
}

#loadingScreen {
    background: transparent
}

.page-account {
    border-radius: 15px 15px 0 0;
    padding: 15px 10px;
    margin: -10px -15px 0;
    background-color: #000
}

.page-account .profile-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px
}

.page-account .profile-section .avatar {
    margin-top: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    overflow: visible;
    padding: 2px;
    background: linear-gradient(141.45deg, #ff882e, #d5c872 48.47%, #1bf29e 94.11%);
    margin-right: 10px
}

.page-account .profile-section .avatar img {
    width: 80px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #000
}

.page-account .profile-section .profile-info {
    width: 200px
}

.page-account .profile-section .profile-info h2 {
    font-size: 20px;
    font-weight: 600
}

.page-account .profile-section .profile-info h4 {
    font-size: 12px;
    font-weight: 400;
    color: #818383;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-account .profile-section .profile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.page-account .profile-section .profile-action img {
    opacity: .5
}

.page-account .profile-nav .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    position: relative
}

.page-account .profile-nav .menu-item .menu-item-icon {
    margin-right: 10px
}

.page-account .profile-nav .menu-item .menu-item-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.page-account .profile-nav .menu-item:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.inner-page-content {
    padding: 80px 15px
}

.inner-page-content .member-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    flex-direction: column
}

.inner-page-content .member-header .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: visible;
    padding: 2px;
    background: linear-gradient(141.45deg, #ff882e, #d5c872 48.47%, #1bf29e 94.11%);
    margin-right: 10px;
    position: relative
}

.inner-page-content .member-header .avatar img.avatar-img {
    width: 80px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #000;
    overflow: hidden
}

.inner-page-content .member-header .avatar .avatar-edit-btn {
    position: absolute;
    bottom: -5px;
    right: -5px;
    cursor: pointer;
    z-index: 999;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.inner-page-content .member-header .profile-info {
    margin-top: 10px
}

.inner-page-content .member-header .profile-info h2 {
    font-size: 20px;
    font-weight: 600
}

.inner-page-content .update-profile-form .form-input-group {
    flex-direction: column;
    border-radius: 0;
    border: solid hsla(0, 0%, 100%, .42);
    border-width: 0 0 1px;
    padding: 5px 10px 5px 0
}

.inner-page-content .update-profile-form .form-input-group .form-control:disabled,
.inner-page-content .update-profile-form .form-input-group .form-control[readonly] {
    background-color: hsla(180, 1%, 51%, .1);
    opacity: .7;
    cursor: not-allowed;
    color: #818383;
    border: none
}

.inner-page-content .update-profile-form .form-input-group .form-control:disabled::placeholder,
.inner-page-content .update-profile-form .form-input-group .form-control[readonly]::placeholder {
    color: #818383
}

.inner-page-content .update-profile-form .form-input-group .form-control:disabled:focus,
.inner-page-content .update-profile-form .form-input-group .form-control:disabled:hover,
.inner-page-content .update-profile-form .form-input-group .form-control[readonly]:focus,
.inner-page-content .update-profile-form .form-input-group .form-control[readonly]:hover {
    border: none;
    outline: none;
    box-shadow: none
}

.inner-page-content .update-profile-form .form-input-group label {
    font-size: 12px;
    font-weight: 400;
    color: #818383;
    display: block;
    width: 100%
}

.inner-page-content .update-profile-form .form-input-group .form-control {
    padding: 0 10px 0 0
}

.inner-page-content .update-profile-form .form-input-group img {
    margin-right: 10px
}

.inner-page-content .btn-primary {
    display: block;
    width: 100%
}

.form-header {
    margin: 30px 0;
    font-size: 16px;
    font-weight: 600
}

.form-header:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center
}

.StepProgress {
    position: relative;
    padding-left: 45px;
    list-style: none
}

.StepProgress:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 19px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #ccc
}

.StepProgress .StepProgress-item {
    position: relative;
    counter-increment: list
}

.StepProgress .StepProgress-item div {
    color: #eaebf0
}

.StepProgress .StepProgress-item:not(:last-child) {
    padding-bottom: 20px
}

.StepProgress .StepProgress-item:before {
    display: inline-block;
    content: "";
    position: absolute;
    left: -26px;
    height: 100%;
    width: 10px
}

.StepProgress .StepProgress-item:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -37px;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #fff
}

.StepProgress .StepProgress-item.current:after {
    content: counter(list);
    padding-top: 4px;
    width: 40px;
    height: 40px;
    top: -5px;
    left: -45px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #20f19e;
    background-color: #0d1e17;
    border: 5px solid #030808
}

.StepProgress .input-ga-code {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid hsla(0, 0%, 100%, .702);
    background-color: #000
}

.form-footer {
    padding: 0 30px;
    margin-top: 50px
}

.page-success h1 {
    font-size: 24px;
    font-weight: 600
}

.page-success h4 {
    font-size: 13px;
    font-weight: 400;
    color: #818383
}

.page-success .btn {
    margin-top: 30px
}

.qrcode-box {
    padding: 30px;
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .1) 11.77%, hsla(0, 0%, 100%, .049) 90.91%);
    border-radius: 10px;
    text-align: center
}

.qrcode-box .qrcode-box-inner {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background-image: url(qr_frame.png);
    background-size: 220px 220px;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 10px
}

.qrcode-box .qrcode-box-inner svg {
    margin: 5px auto 0;
    border-radius: 10px;
    overflow: hidden
}

.qrcode-box .text-value {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    margin: 10px 0
}

.qrcode-box .btn-copy {
    font-size: 12px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .702);
    margin: 10px 0;
    border: 1px solid hsla(0, 0%, 100%, .702);
    border-radius: 15px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.qrcode-box .btn-copy span {
    margin-left: 5px
}

.qrcode-box .qrcode-page-header h1 {
    font-size: 21px;
    font-weight: 600
}

.qrcode-box .qrcode-page-header p {
    font-size: 13px;
    font-weight: 400;
    color: #818383;
    margin: 10px 0 30px;
    line-height: 1.2
}

.separator {
    margin: 30px 0;
    width: 100%;
    height: 21px
}

.separator:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center
}

.wallet-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px
}

.wallet-item .wallet-info {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column
}

.wallet-item .wallet-info label {
    font-size: 12px;
    font-weight: 400;
    color: #818383
}

.wallet-item .wallet-info input {
    width: 100%;
    padding: 5px 10px;
    border-radius: 0;
    border-width: 0 0 1px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .29);
    background-color: #000
}

.wallet-item .wallet-info input:focus {
    border-color: #fff;
    outline: none;
    box-shadow: none
}

.form-bottom {
    margin-top: 80px
}

.form-bottom button {
    margin-top: 20px
}

.page-content {
    min-height: 80vh
}

.unbind-form-wrapper {
    padding: 0 15px
}

.unbind-form-wrapper .unbind-header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 30px 0
}

.unbind-form-wrapper .form-footer {
    padding: 0
}

.downline-user:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.downline-list {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.downline-user {
    transition: all .2s
}

.downline-user-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    position: relative
}

.downline-user-wrapper .downline-user {
    min-width: 330px;
    border-radius: 15px;
    background-color: #000;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .028) 11.77%, hsla(0, 0%, 100%, .049) 90.91%);
    margin-top: 15px;
    overflow: hidden;
    z-index: 9
}

.downline-user-wrapper .downline-user .downline-user-name {
    font-size: 13px
}

.downline-user-wrapper .downline-user .downline-user-ranking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 90px
}

.downline-user-wrapper .downline-user .downline-user-box {
    background-color: #000;
    position: relative;
    z-index: 9
}

.downline-user-wrapper .downline-user.active {
    border: 1px solid transparent;
    background-image: linear-gradient(#000, #000), linear-gradient(91.71deg, #ff882e, #d5c872 49.12%, #1bf29e 95.38%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding: 0
}

.downline-user-wrapper .downline-user.active:after {
    border-left: none
}

.downline-user-wrapper .btn-downline,
.downline-user-wrapper .btn-more-info {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000
}

.downline-user-wrapper .btn-downline.hidden,
.downline-user-wrapper .btn-more-info.hidden {
    opacity: 0
}

.downline-user-wrapper .btn-downline {
    background-color: #20f19e
}

.downline-user-wrapper .btn-more-info {
    color: #20f19e
}

.downline-user-wrapper .downline-user-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.downline-user-wrapper .downline-user-btn-wrapper {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.downline-user-wrapper .downline-user-btn-wrapper.hidden {
    opacity: 0
}

.downline-sub-list {
    margin-left: 35px
}

.downline-tree {
    padding: 0 15px
}

.downline-levels .simplebar-scrollable-x {
    padding-bottom: 30px
}

.downline-user-item {
    position: relative
}

.downline-user-item:before {
    content: "";
    position: absolute;
    top: 45px;
    left: 10px;
    width: 20px;
    height: 2px;
    border-bottom: 1px dashed #20f19e;
    z-index: 8
}

.downline-user-item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    width: 2px;
    height: calc(100% + 45px);
    border-left: 1px solid #20f19e;
    z-index: 8
}

.downline-user-item:last-child:after {
    top: 0;
    height: calc(100% - 45px);
    bottom: auto
}

.downline-user-item:first-child:not(.downline-sub-list .downline-user-item):after {
    height: 0
}

.downline-user-item .node-empty {
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%
}

.modal-search {
    background-color: #1c1d1e;
    border: 1px solid #303132;
    margin: 30px
}

.modal-search .sales-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px
}

.modal-search .search-input {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid hsla(0, 0%, 100%, .5);
    background-color: transparent;
    color: hsla(0, 0%, 100%, .5);
    padding: 10px 0
}

.modal-search .search-input:focus {
    border-color: hsla(0, 0%, 100%, .5);
    outline: none;
    box-shadow: none
}

.modal-search .btn {
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 14px;
    height: 40px
}

.modal-search .btn.btn-cancel {
    background-color: #818383
}

.modal-search .btn.btn-search {
    background-color: #20f19e;
    color: #000
}

.modal-sales-info {
    background-color: #000;
    border: 1px solid #303132;
    border-radius: 0;
    margin: 30px auto
}

.modal-sales-info .sales-info-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .5);
    padding: 10px 0
}

.modal-sales-info .sales-info-item span {
    font-size: 14px;
    font-weight: 400;
    color: #fff
}

.modal-sales-info .sales-info-item span:first-child {
    color: #20f19e
}

.modal-sales-info .sales-info-item span:last-child {
    color: #fff
}

.modal-sales-info .btn {
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 14px;
    height: 40px
}

.modal-sales-info .btn.btn-cancel {
    background-color: #818383
}

.modal-sales-info .btn.btn-search {
    background-color: #20f19e;
    color: #000
}

.z-9999 {
    z-index: 9999
}

.text-light-gray {
    color: #a0a0a0;
    font-family: Montserrat, sans-serif
}

.assets-wrapper .input-group-text {
    background-color: transparent;
    border: none;
    padding: 0
}

.wallet-wrapper .widget_assets_balance {
    padding: 15px
}

.wallet-wrapper .widget_assets_balance .widget_assets_balance_header .widget_assets_balance_info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px
}

.wallet-wrapper .widget_assets_balance .widget_assets_balance_header .widget_assets_balance_info span {
    margin-right: 5px
}

.wallet-wrapper .widget_assets_balance .widget_assets_balance_header .widget_assets_balance_title .balance-usd {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.wallet-wrapper .widget_assets_balance .widget_assets_balance_body {
    margin-top: 30px
}

.wallet-wrapper .widget_assets_balance .btn-wallet {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .1) 11.77%, hsla(0, 0%, 100%, .049) 90.91%);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1)
}

.wallet-wrapper .widget_assets_balance .btn-wallet span {
    margin: 5px 5px 0;
    font-size: 14px;
    line-height: 1.5
}

.wallet-wrapper .widget_assets_list {
    background: linear-gradient(177.54deg, #202424 2.19%, rgba(5, 16, 13, .13) 82.78%);
    border-radius: 25px 25px 0 0;
    padding: 20px;
    margin-top: 30px
}

.wallet-wrapper .widget_assets_list h4 {
    font-size: 14px;
    font-weight: 700
}

.wallet-wrapper .widget_assets_list .widget_assets_list_item {
    margin: 10px auto;
    background: hsla(0, 0%, 100%, .08);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.wallet-wrapper .widget_assets_list .widget_assets_list_item .asset-details {
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.wallet-wrapper .widget_assets_list .widget_assets_list_item .asset-details .asset-amount {
    font-size: 12px;
    color: #20f19e
}

.wallet-wrapper .widget_assets_list .widget_assets_list_item .asset-details .asset-amount .display-unit {
    margin-right: 5px
}

.wallet-wrapper .widget_assets_list .widget_assets_list_item .asset-details .asset-action span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.wallet-wrapper .widget_assets_list .widget_assets_list_item .asset-details .asset-action span svg {
    margin-left: 5px
}

.wallet-wrapper .input-group-text {
    background-color: transparent;
    border: none
}

.wallet-info-wrapper .deposit-info-card,
.wallet-info-wrapper .deposit-qrcode-card {
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .1) 11.77%, hsla(0, 0%, 100%, .049) 90.91%);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    margin-bottom: 15px
}

.wallet-info-wrapper .deposit-qrcode-card {
    text-align: center
}

.wallet-info-wrapper .deposit-qrcode-card .qrcode-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px
}

.wallet-info-wrapper .deposit-qrcode-card .btn-copy-lg {
    margin: 30px 0;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 10px 15px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.wallet-info-wrapper .deposit-qrcode-card .btn-copy-lg svg {
    margin-right: 5px
}

.wallet-info-wrapper .network-info-item,
.wallet-info-wrapper .network-info-item .network-title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column
}

.wallet-info-wrapper .network-info-item .network-title {
    margin-bottom: 15px
}

.wallet-info-wrapper .network-info-item .network-title h4 {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin: 0
}

.wallet-info-wrapper .network-info-item .network-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: #f1b71c;
    margin: 0
}

.wallet-info-wrapper .network-info-item .network-title h3 span {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 0 5px
}

.withdrawal-page .wallet-info {
    padding: 20px;
    background: hsla(0, 0%, 100%, .03);
    margin-bottom: 30px
}

.withdrawal-page .wallet-info h2 {
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.withdrawal-page .wallet-info p {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .5)
}

.withdrawal-page .withdrawal-form-content {
    padding: 20px
}

.withdrawal-page .withdrawal-form-content.text-green {
    color: var(--green)
}

.withdrawal-page .withdrawal-form-footer {
    border-top: 1px solid hsla(0, 0%, 100%, .2);
    padding: 20px;
    background: linear-gradient(231.68deg, #202424 -21.03%, rgba(32, 36, 36, .25) 72.07%)
}

.withdrawal-page .withdrawal-amount {
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.withdrawal-page .btn-submit {
    margin-top: 30px;
    height: 50px;
    font-size: 16px;
    border-radius: 10px;
    font-weight: 500;
    width: 100%;
    background-color: #6c757d
}

.withdrawal-page .form-group label {
    font-size: 16px;
    font-weight: 500;
    color: #fff
}

.withdrawal-page .form-group .no-address {
    padding: 30px 0;
    text-align: center
}

.withdrawal-page .form-group .no-address p {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .5)
}

.withdrawal-page .form-group .remark {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.withdrawal-page .form-group .input-withdrawal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    margin-bottom: 5px
}

.withdrawal-page .form-group .input-withdrawal input {
    width: 100%;
    padding: 5px;
    font-size: 30px
}

.withdrawal-page .form-group .input-withdrawal input:focus-visible {
    outline: none
}

.withdrawal-page .form-group .input-withdrawal input:focus {
    outline: none
}

.withdrawal-page .address-list {
    padding: 10px 0
}

.withdrawal-page .address-list .address-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: hsla(0, 0%, 100%, .08);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px
}

.withdrawal-page .address-list .address-item.active {
    border: 1px solid #20f19e
}

.withdrawal-page .address-list .address-item .wallet-item-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 15px
}

.withdrawal-page .address-list .address-item .wallet-item-info .wallet-type {
    margin: 5px 0
}

.withdrawal-page .address-list .address-item .wallet-item-info .wallet-address {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .5);
    word-break: break-word;
    text-align: left
}

.modal .input-security-password {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    padding: 10px 0;
    margin-top: 30px
}

.modal .input-security-password img {
    margin-right: 10px
}

.modal .input-security-password input {
    width: 100%;
    padding: 5px;
    font-size: 16px;
    background: transparent;
    border: none
}

.modal .input-security-password input:focus-visible {
    outline: none
}

.modal .input-security-password input:focus {
    outline: none
}

.modal .input-form-group {
    margin-top: 50px
}

.modal .input-form-group label {
    font-size: 16px;
    font-weight: 500;
    color: hsla(0, 0%, 100%, .5)
}

.modal .input-form-group .input-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    padding: 10px 0
}

.modal .input-form-group .input-form img {
    margin-right: 10px
}

.modal .input-form-group .input-form input {
    width: 100%;
    padding: 5px;
    font-size: 21px;
    font-weight: 700;
    border: none
}

.modal .input-form-group .input-form input:focus-visible {
    outline: none
}

.modal .input-form-group .input-form input:focus {
    outline: none
}

.modal .form-remark {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px
}

.modal .form-remark img {
    margin-right: 10px;
    margin-top: 2px;
    opacity: .5
}

.modal.form-security-password .modal-body h2 {
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.modal.form-security-password .modal-body h4 {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .5);
    font-weight: 400
}

.modal .label-otp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.modal .label-otp label {
    font-size: 12px;
    font-weight: 400;
    color: #fff
}

.modal .remark {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.wallet-type {
    margin: 30px 0 15px;
    width: 240px
}

.wallet-type.active {
    border: 1px solid #20f19e;
    border-radius: 10px;
    padding: 10px
}

.balance-toggle .balance-unit {
    font-size: 90%;
    color: hsla(0, 0%, 100%, .5) !important;
    background-color: transparent !important;
    background-image: none !important
}

.page-form-fail .page-title,
.page-form-success .page-title {
    margin-top: 0;
    margin-bottom: 50px;
    font-size: 18px;
    font-weight: 400
}

.page-form-fail .page-description,
.page-form-success .page-description {
    margin: 30px auto;
    width: 280px
}

.page-form-fail .page-description h4,
.page-form-success .page-description h4 {
    font-size: 14px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .7)
}

.page-form-fail .page-description h4 span,
.page-form-success .page-description h4 span {
    font-weight: 700;
    color: #20f19e
}

.page-form-fail .result-form,
.page-form-success .result-form {
    margin-top: 80px
}

.page-form-fail .result-form .result-item,
.page-form-success .result-form .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.page-form-fail .result-form .result-item .result-label,
.page-form-success .result-form .result-item .result-label {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.page-form-fail .result-form .result-item .result-value,
.page-form-success .result-form .result-item .result-value {
    font-size: 12px;
    color: #fff
}

.page-form-fail .result-form .result-item .result-value.bold,
.page-form-success .result-form .result-item .result-value.bold {
    color: #20f19e
}

.page-form-fail .result-action,
.page-form-success .result-action {
    margin-top: 80px
}

.page-form-fail .page-description h4 span {
    font-weight: 700;
    color: #fb0000
}

.page-form-fail .result-form .result-item .result-value.bold {
    color: #fb0000
}

.transfer-page.text-green {
    color: #20f19e
}

.transfer-page label {
    font-size: 12px;
    font-weight: 500;
    color: hsla(0, 0%, 100%, .7)
}

.transfer-page .input-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    padding: 0
}

.transfer-page .input-form img {
    margin-right: 10px
}

.transfer-page .input-form input {
    width: 80%;
    padding: 5px;
    font-size: 21px;
    font-weight: 400;
    border: none;
    background-color: transparent
}

.transfer-page .input-form input:focus-visible {
    outline: none
}

.transfer-page .input-form input:focus {
    outline: none
}

.transfer-page .input-form input.form-large {
    font-size: 36px;
    font-weight: 700
}

.transfer-page .input-form span {
    font-size: 12px;
    font-weight: 500;
    color: hsla(0, 0%, 100%, .7)
}

.transfer-page .input-form textarea {
    font-size: 14px;
    background-color: transparent
}

.transfer-page .remark {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.transfer-page .result-details .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0
}

.transfer-page .result-details .result-item .result-label {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.transfer-page .result-details .result-item .result-value {
    font-size: 12px;
    color: #fff
}

.transfer-page .result-details .result-item .result-value.bold {
    color: #20f19e
}

.transfer-page .heading-success {
    margin: 10px 0;
    font-size: 28px;
    font-weight: 700
}

.transfer-page .modal-description h4 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: hsla(0, 0%, 100%, .7) !important
}

.transfer-page .modal-description h5 {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: hsla(0, 0%, 100%, .5) !important
}

.convert-wallet-type,
.reward_details_list ul {
    padding: 0
}

.reward_details_list ul .reward_details_list_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    color: #fff
}

.reward_details_list ul .reward_details_list_item .reward_details_list_item_header {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.reward_details_list ul .reward_details_list_item .transaction-amount {
    font-size: 12px;
    color: #20f19e
}

.modal-content.transaction_details {
    background-color: #1c1d1e
}

.modal-content.transaction_details .modal-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.modal-content.transaction_details .modal-title h1 {
    margin: 0
}

.modal-content.transaction_details .modal-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 15px
}

.modal-content.transaction_details .modal-title h4 {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin: 15px 0;
    position: relative;
    text-align: center
}

.modal-content.transaction_details .modal-title h4:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center
}

.modal-content.transaction_details .modal-title h5 {
    font-size: 14px;
    font-weight: 400;
    color: #20f19e;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 15px 0
}

.widget_booster_count label {
    color: #20f19e;
    margin-left: 5px
}

.widget_booster_count_content {
    margin: 10px 0;
    text-align: left;
    border-left: 3px solid #20f19e;
    background-color: #151919;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.widget_booster_count_content img {
    margin: 0 10px 0 0
}

.widget_booster_count_content span {
    font-size: 10px
}

.booster-list-widget {
    margin: 30px 0
}

.booster-list-widget .booster-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px
}

.booster-list-widget .booster-list .booster-item-wrapper {
    margin-bottom: 10px
}

.booster-list-widget .booster-list .booster-item-wrapper .booster-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%
}

.booster-list-widget .booster-list .booster-item-wrapper .booster-item .booster-icon {
    margin-right: 10px
}

.booster-list-widget .booster-list .booster-item-wrapper .booster-item .booster-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%
}

.booster-list-widget .booster-list .booster-item-wrapper .booster-item .booster-info h4 {
    font-size: 14px;
    font-weight: 400
}

.booster-list-widget .booster-list .booster-item-wrapper .booster-item .booster-info h5 {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .7)
}

.booster-list-widget .booster-list .booster-item-wrapper:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center
}

.booster-meter-widget {
    margin: 0 0 10px
}

.booster-meter-widget .booster-meter-widget-value {
    color: #20f19e;
    font-size: 15px;
    width: 150px;
    margin: 20px auto 0;
    display: block;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px
}

.booster-meter-widget .booster-meter-widget-value span {
    font-size: 12px;
    opacity: .8;
    display: block;
    width: 100%;
    text-align: center
}

.booster-meter-widget .booster-meter-widget-gauge {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid #151919;
    box-shadow: inset 0 0 10px #393939;
    position: relative
}

.booster-meter-widget .booster-meter-widget-gauge .g1 {
    position: absolute;
    top: 2px;
    right: 13px
}

.booster-meter-widget .booster-meter-widget-gauge .g2 {
    width: 290px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 9
}

.booster-meter-widget .booster-meter-widget-gauge .g2 .tspan {
    font-size: 10px;
    color: #ff7a7a
}

.bitbooster-wrapper .bitbooster-content {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 20px;
    background: linear-gradient(216.38deg, hsla(0, 0%, 100%, .058) 25.64%, hsla(0, 0%, 100%, .022) 80.49%)
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info {
    margin-bottom: 50px
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info h3 .sub-title {
    background-color: transparent !important;
    color: hsla(0, 0%, 100%, .5) !important;
    font-size: 14px;
    font-weight: 400
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info h4 .price_ori {
    font-size: 12px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .5);
    margin-left: 5px;
    text-decoration: line-through
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info p {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .3)
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info .columns-3 {
    text-align: center;
    margin: 30px 0
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info .columns-3 img {
    margin: 0 auto
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info .columns-3 h5 {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .5);
    margin: 10px auto;
    width: 90px;
    text-align: center
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info .columns-3 .column-item {
    position: relative
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info .columns-3 .column-item:nth-child(2):before {
    content: "";
    width: 1px;
    height: 70px;
    border-left: 1px solid hsla(0, 0%, 100%, .3);
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info .columns-3 .column-item:nth-child(2):after {
    content: "";
    width: 1px;
    height: 70px;
    border-right: 1px solid hsla(0, 0%, 100%, .3);
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 0
}

.bitbooster-wrapper .bitbooster-content .bitbooster-content-info ul {
    padding: 0
}

.bitbooster-wrapper .bitbooster-content ul li .content_item_line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px
}

.bitbooster-wrapper .bitbooster-content ul li .content_item_line .content_item_line_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: hsla(0, 0%, 100%, .5);
    width: 50%
}

.bitbooster-wrapper .bitbooster-content ul li .content_item_line .content_item_line_left img {
    margin-right: 15px
}

.bitbooster-wrapper .bitbooster-content ul li .content_item_line .content_item_line_right {
    text-align: right
}

.bitbooster-wrapper .bitbooster-content ul li .content_item_line .content_item_line_right .item_total {
    color: #20f19e
}

.bitbooster-wrapper .bitbooster-content ul li .content_item_line .content_item_line_right .item_total2 {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.bitbooster-wrapper .bitbooster-content ul li:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center
}

.bitbooster-wrapper .bitbooster-content .package-item {
    border: 1px solid hsla(0, 0%, 100%, .3);
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px
}

.bitbooster-wrapper .bitbooster-content .package-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px
}

.bitbooster-wrapper .bitbooster-content .package-item h5 {
    font-size: 14px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .5);
    margin: 0
}

.bitbooster-wrapper .bitbooster-content .package-item.active {
    border: 1px solid rgba(32, 241, 158, .5)
}

.bitbooster-wrapper .bitbooster-content .package-item.active h4 {
    background-image: linear-gradient(90deg, #ff882e, #f69733, #eda43d, #e5b04a, #ddbb5a, #d4c35f, #cbcb66, #c1d36f, #acdb72, #92e37b, #6ceb8a, #1bf29e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.bitbooster-wrapper .bitbooster-content .package-item.active h5 {
    color: #20f19e
}

.bitbooster-wrapper .btn {
    margin-top: 50px
}

.bitbooster-content-info {
    position: relative
}

.bitbooster-purchase-wrapper {
    padding-bottom: 260px
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item {
    border: 1px solid hsla(0, 0%, 100%, .3);
    padding: 14px;
    border-radius: 10px;
    margin: 0 5px 15px;
    text-align: center
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item h4 {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 5px
}

@media screen and (max-width:376px) {
    .bitbooster-purchase-wrapper .bitbooster-purchase .package-item h4 {
        font-size: 13px
    }
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item h4 .sub-title {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .5);
    margin-left: 5px
}

@media screen and (max-width:376px) {
    .bitbooster-purchase-wrapper .bitbooster-purchase .package-item h4 .sub-title {
        font-size: 11px
    }
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item h5 {
    font-size: 12px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .5);
    margin: 0
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item.active {
    border: 1px solid rgba(32, 241, 158, .5)
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item.active h4 {
    background-image: linear-gradient(90deg, #ff882e, #f69733, #eda43d, #e5b04a, #ddbb5a, #d4c35f, #cbcb66, #c1d36f, #acdb72, #92e37b, #6ceb8a, #1bf29e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.bitbooster-purchase-wrapper .bitbooster-purchase .package-item.active h5 {
    color: #20f19e
}

.bitbooster-purchase-wrapper .bitbooster-purchase .remark {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    margin: 0;
    padding: 5px
}

.bitbooster-purchase-wrapper .bitbooster-purchase .purchase-form-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: hsla(0, 0%, 100%, .05);
    padding: 10px;
    border-radius: 10px;
    margin: 25px 0
}

.bitbooster-purchase-wrapper .bitbooster-purchase .purchase-form-input label {
    font-size: 18px
}

.bitbooster-purchase-wrapper .remark {
    padding: 0
}

.bitbooster-purchase-wrapper .remark-highlight {
    color: #20f19e;
    font-size: 12px;
    padding: 0
}

.bitbooster-purchase-wrapper .purchase-additional-info {
    margin-bottom: 50px
}

.bitbooster-purchase-wrapper .purchase-additional-info .form-group {
    margin-bottom: 5px;
    padding-top: 20px
}

.bitbooster-purchase-wrapper .purchase-wallet-info {
    margin-bottom: 50px
}

.bitbooster-purchase-wrapper .purchase-wallet-info .wallet-selection {
    margin-top: 10px
}

.bitbooster-purchase-wrapper .purchase-wallet-info .wallet-selection .wallet-item-wrapper {
    margin-bottom: 10px
}

.bitbooster-purchase-wrapper .purchase-wallet-info .wallet-selection .wallet-item-wrapper .wallet-item {
    display: block;
    border-radius: 5px;
    background-color: hsla(0, 0%, 100%, .05);
    width: 100%;
    border: 1px solid hsla(0, 0%, 100%, .3);
    padding: 15px 10px;
    height: auto;
    text-align: center;
    font-size: 16px;
    margin: 0
}

.bitbooster-purchase-wrapper .purchase-wallet-info .wallet-selection .wallet-item-wrapper .wallet-item.active {
    border-color: #20f19e
}

.bitbooster-purchase-wrapper .input-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1e2121;
    width: 150px
}

.bitbooster-purchase-wrapper .input-qty input {
    font-size: 18px;
    font-weight: 700;
    background-color: transparent;
    border: none;
    color: #fff;
    width: 80px;
    text-align: center
}

.bitbooster-purchase-wrapper .input-qty .input-group-text {
    border: 0;
    background-color: #262929;
    padding: 5px 8px
}

.bitbooster-purchase-wrapper .input-qty .input-group-text.left {
    border-radius: 5px 0 0 5px
}

.bitbooster-purchase-wrapper .input-qty .input-group-text.right {
    border-radius: 0 5px 5px 0
}

.bitbooster-purchase-wrapper .purchase-total-info {
    position: fixed;
    width: 100%;
    max-width: 428px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 40px;
    background: linear-gradient(231.68deg, #0a1010 100%, rgba(20, 22, 22, .6) 0);
    box-shadow: -4px -5px 10.8px rgba(0, 0, 0, .15);
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    z-index: 5;
    padding: 0 20px 50px
}

.bitbooster-purchase-wrapper .purchase-total-info .purchase-form-input {
    background-color: transparent;
    margin: 5px 0
}

.bitbooster-purchase-wrapper .modal-success-purchase h4 {
    margin: 20px 0
}

.bitbooster-purchase-wrapper .modal-success-purchase .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bitbooster-purchase-wrapper .modal-success-purchase .text-gray-70 {
    color: hsla(0, 0%, 100%, .7)
}

.floating-label {
    position: relative;
    margin-bottom: 0
}

.floating-label label {
    position: absolute;
    left: 10px;
    top: 10px;
    transition: all .2s ease;
    color: #999
}

.floating-label input {
    border: 1px solid #ccc;
    padding: 15px 10px;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 10px
}

.floating-label input:focus {
    border-color: #fff
}

.floating-label input:focus+label,
.floating-label input:not(:placeholder-shown)+label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    padding: 0 5px
}

.referral-wrapper h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 100%
}

.referral-wrapper .banner img {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto
}

.referral-wrapper .dark-box-referral {
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .042) 11.77%, hsla(0, 0%, 100%, .045) 90.91%);
    backdrop-filter: blur(3.05px);
    border: 1px solid hsla(0, 0%, 100%, .1);
    background: rgba(31, 33, 35, .5);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px
}

.referral-wrapper .dark-box-referral ul {
    margin: 0;
    padding: 0
}

.referral-wrapper .dark-box-referral ul li {
    list-style: none
}

.referral-wrapper .dark-box-referral ul li .d-flex .pe-2 {
    display: flex
}

.referral-wrapper .referral-rating {
    width: 75px;
    height: 75px;
    padding: 10px;
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .042) 11.77%, hsla(0, 0%, 100%, .045) 90.91%);
    backdrop-filter: blur(3.05px);
    border-radius: 10px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    display: table;
    text-align: center
}

.referral-wrapper .referral-rating .inner {
    display: table-cell;
    vertical-align: middle
}

.referral-wrapper .referral-rating .inner i {
    color: #20f19e
}

.referral-wrapper .text-gradient {
    background: linear-gradient(90deg, #00ff85, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.referral-wrapper .text-green {
    color: #00ff85
}

.referral-wrapper .text-gray70 {
    color: #b3b3b3
}

.referral-wrapper .list-sp-line li {
    padding: 15px 0;
    position: relative
}

.referral-wrapper .list-sp-line li:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.referral-wrapper .list-sp-line li:last-child:after {
    content: ""
}

.referral-wrapper .modal-filter {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0
}

.referral-wrapper .modal-filter:focus {
    box-shadow: none
}

.referral-wrapper .modal-filter option {
    background: #1f2123;
    color: #fff
}

.referral-wrapper .fs-7 {
    font-size: 12px
}

.referral-wrapper .separator {
    margin: 2px 0
}

.referral-wrapper .dark-box {
    background: hsla(0, 0%, 9%, .6);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(8px)
}

.referral-wrapper .text-gray50 {
    color: gray
}

.referral-wrapper .text-green {
    color: #4caf50
}

.referral-wrapper .text-success {
    color: #4caf50 !important
}

.referral-wrapper .text-danger {
    color: #f44 !important
}

.referral-wrapper .bg-success-soft {
    background-color: rgba(76, 175, 80, .1) !important
}

.referral-wrapper .bg-danger-soft {
    background-color: rgba(255, 68, 68, .1) !important
}

.referral-wrapper .table {
    margin-bottom: 0;
    font-size: 14px
}

.referral-wrapper .table th {
    color: gray;
    font-weight: 400
}

.referral-wrapper .table td,
.referral-wrapper .table th {
    border-bottom-color: hsla(0, 0%, 100%, .1);
    white-space: nowrap;
    padding: 12px 16px
}

.referral-wrapper .table td {
    vertical-align: middle
}

.referral-wrapper .table tbody tr:hover {
    background-color: hsla(0, 0%, 100%, .05)
}

.referral-wrapper .form-control,
.referral-wrapper .form-select {
    border-color: hsla(0, 0%, 100%, .1);
    font-size: 14px;
    min-width: 120px
}

.referral-wrapper .form-control:focus,
.referral-wrapper .form-select:focus {
    border-color: hsla(0, 0%, 100%, .2);
    box-shadow: none
}

.referral-wrapper .form-control::placeholder,
.referral-wrapper .form-select::placeholder {
    color: gray
}

.referral-wrapper .badge {
    font-weight: 400;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px
}

.referral-wrapper .spinner-border {
    width: 2rem;
    height: 2rem
}

.referral-wrapper .react-datepicker-wrapper {
    width: 100%
}

.referral-wrapper .react-datepicker {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important
}

.referral-wrapper .react-datepicker__header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important
}

.referral-wrapper .react-datepicker__navigation {
    top: 8px !important
}

.referral-wrapper .react-datepicker__navigation-icon:before {
    border-color: #fff !important
}

.referral-wrapper .react-datepicker__current-month,
.referral-wrapper .react-datepicker__day,
.referral-wrapper .react-datepicker__day-name {
    color: #fff !important
}

.referral-wrapper .react-datepicker__day:hover {
    background-color: #333 !important
}

.referral-wrapper .react-datepicker__day--keyboard-selected,
.referral-wrapper .react-datepicker__day--selected {
    background-color: var(--bs-primary) !important;
    color: #fff !important
}

.referral-wrapper .react-datepicker__day--disabled {
    color: #666 !important
}

.referral-wrapper .react-datepicker__day--disabled:hover {
    background-color: transparent !important
}

.referral-wrapper .react-datepicker__triangle:after,
.referral-wrapper .react-datepicker__triangle:before {
    border-bottom-color: #333 !important
}

.react-datepicker-wrapper .input-group-text {
    background-color: transparent;
    border: none;
    color: hsla(0, 0%, 100%, .5)
}

.react-datepicker-wrapper .input-group {
    border-bottom: 1px solid hsla(0, 0%, 100%, .3)
}

.react-datepicker-wrapper .input-group .form-control {
    background-color: transparent !important;
    border: none;
    color: hsla(0, 0%, 100%, .5)
}

.leaderboard-wrapper .leaderboard-content {
    padding: 10px
}

.leaderboard-wrapper .leaderboard-content .custom-table-alike {
    font-size: 12px
}

.leaderboard-wrapper .leaderboard-content .custom-table-alike .ct-body {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 1px;
    margin-bottom: 1px
}

.leaderboard-wrapper .leaderboard-content .col-1-5 {
    flex: 0 0 auto;
    width: 12.5%
}

.leaderboard-wrapper .leaderboard-content .col-3-5 {
    flex: 0 0 auto;
    width: 29.166666655%
}

.leaderboard-wrapper .leaderboard-content .text-leaderboard {
    color: #ebdf9a;
    text-shadow: 0 0 5px #ebdf9a
}

.leaderboard-wrapper .leaderboard-content .bg-custom {
    position: relative;
    z-index: 1
}

.leaderboard-wrapper .leaderboard-content .bg-custom:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f8be3b 0, #ffe373, #f8be3b);
    opacity: .2;
    z-index: -1
}

.leaderboard-wrapper .leaderboard-content .number-color {
    color: #ebdf9a;
    text-shadow: 0 0 5px #ebdf9a;
    font-weight: 800
}

.leaderboard-wrapper .leaderboard-content .gradient-text {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, #f7e27d, #daa520, #f7e27d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: YourCustomFont, sans-serif
}

.leaderboard-wrapper .leaderboard-content .top30-text {
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-size: clamp(3rem, 5vw, 3rem);
    font-weight: 900;
    font-family: YourCustomFont, sans-serif;
    background: linear-gradient(90deg, #fff8d6, #d4a941, #fff8d6);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 223, 100, .6), 0 0 25px rgba(255, 185, 0, .5);
    margin: 0;
    padding: 0
}

.leaderboard-wrapper .leaderboard-content .centered-clip {
    width: 50%;
    display: block;
    margin: .5rem auto 0
}

.reward-wrapper .reward-content {
    position: relative;
    z-index: 1
}

.reward-wrapper .reward-header {
    position: relative;
    width: 100%;
    height: 260px;
    display: block;
    min-height: 150px
}

.reward-wrapper .reward-header .reward-overlay {
    position: absolute;
    top: 60px;
    left: 10px;
    text-align: left;
    position: relative;
    z-index: 2
}

.reward-wrapper .reward-header .reward-overlay .text-gradient {
    background-image: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .top-curve {
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 50px;
    background: #000;
    border-radius: 30px 30px 0 0;
    margin-bottom: -20px;
    position: relative;
    z-index: 1
}

.reward-wrapper .bg-overlay {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .4);
    width: 100%;
    height: 320px
}

.reward-wrapper .top-nav h1 {
    font-size: 23px
}

.reward-wrapper .reward-info {
    background: #000;
    padding: 20px 0;
    min-height: calc(100vh - 250px)
}

.reward-wrapper .invitation-ticket-box {
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .042) 11.77%, hsla(0, 0%, 100%, .045) 90.91%);
    border: 1px solid #3b3e3e;
    background: hsla(0, 0%, 100%, .1);
    border-radius: 10px;
    padding: 15px
}

.reward-wrapper .event-single-line {
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.reward-wrapper .accordion.about .accordion-item.promotion {
    background: transparent;
    border: none
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button.promotion {
    background: transparent;
    color: #fff;
    box-shadow: none;
    padding: 10px 0;
    font-weight: 400
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button.promotion:after {
    filter: brightness(0) invert(1)
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button.promotion:not(.collapsed) {
    color: hsla(0, 0%, 100%, .5)
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button.promotion.collapsed {
    color: #fff
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-collapse.collapse.show {
    visibility: visible
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-body {
    padding: 5px 0;
    font-weight: 400
}

.reward-wrapper .accordion.about .accordion-item {
    background-color: transparent;
    border: none
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button {
    background-color: transparent;
    color: #fff;
    padding: 0;
    box-shadow: none
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-button.collapsed:after {
    transform: rotate(-90deg)
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-collapse.collapse:not(.show) {
    display: none
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-collapse.collapse.show {
    display: block
}

.reward-wrapper .accordion.about .accordion-item.promotion .accordion-collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease
}

.reward-wrapper .text-gradient {
    background: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .text-green {
    color: lime
}

.reward-wrapper .fs-10 {
    font-size: 10px
}

.ticket-info-wrapper .ticket-form .form-group {
    margin-bottom: 20px
}

.ticket-info-wrapper .ticket-form .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-weight: 500
}

.ticket-info-wrapper .ticket-form .form-group .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    border-radius: 8px;
    background: rgba(0, 0, 0, .1);
    color: #fff
}

.ticket-info-wrapper .ticket-form .form-group .form-control:focus {
    border-color: #20f19e;
    outline: none;
    box-shadow: none
}

.ticket-info-wrapper .ticket-form .form-group .form-control::placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.ticket-info-wrapper .ticket-form .form-group textarea.form-control {
    resize: vertical;
    min-height: 120px
}

.ticket-info-wrapper .ticket-form .form-group .error-message {
    color: #fb0000;
    font-size: 14px;
    margin-top: 4px
}

.ticket-info-wrapper .ticket-form .file-upload .upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 8px;
    background: rgba(0, 0, 0, .1);
    color: #20f19e;
    cursor: pointer;
    transition: all .3s ease;
    text-align: center
}

.ticket-info-wrapper .ticket-form .file-upload .upload-btn:hover {
    border-color: #20f19e;
    background: rgba(32, 241, 158, .1)
}

.ticket-info-wrapper .ticket-form .file-upload .upload-btn svg {
    color: #20f19e
}

.ticket-info-wrapper .ticket-form .file-upload .file-preview-list {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.ticket-info-wrapper .ticket-form .file-upload .file-preview-list .file-preview-item {
    position: relative;
    width: 100px
}

.ticket-info-wrapper .ticket-form .file-upload .file-preview-list .file-preview-item .file-preview-image {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.ticket-info-wrapper .ticket-form .file-upload .file-preview-list .file-preview-item .file-preview-name {
    margin-top: 4px;
    font-size: 12px;
    color: #fff;
    word-break: break-all;
    max-width: 100px
}

.ticket-info-wrapper .ticket-form .file-upload .file-preview-list .file-preview-item .remove-file {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fb0000;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    padding: 0;
    font-size: 14px
}

.ticket-info-wrapper .ticket-form .file-upload .file-preview-list .file-preview-item .remove-file:hover {
    background: #e20000
}

.ticket-info-wrapper .ticket-form .btn-primary {
    background: #20f19e;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: all .3s ease;
    color: #000
}

.ticket-info-wrapper .ticket-form .btn-primary:disabled {
    opacity: .7;
    cursor: not-allowed
}

.ticket-info-wrapper .ticket-form .btn-primary:not(:disabled):hover {
    background: #13f098
}

.ticket-info-wrapper .ticket-form .form-remark {
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin-top: 10px
}

.ticket-wrapper {
    position: relative
}

.ticket-wrapper .ticket-btn {
    position: absolute;
    bottom: 180px;
    right: 20px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #20f19e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.ticket-wrapper .modal-search label {
    color: hsla(0, 0%, 100%, .5);
    margin-bottom: 5px
}

.ticket-wrapper .modal-search .form-check label {
    color: #fff
}

.ticket-wrapper .ticket-box {
    width: 100%;
    background-color: #101414;
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .042) 11.77%, hsla(0, 0%, 100%, .045) 90.91%);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px
}

.ticket-wrapper .ticket-box .ticket-title {
    color: #fff;
    font-weight: 500
}

.ticket-detail .ticket-header {
    margin-bottom: 24px
}

.ticket-detail .ticket-header .ticket-subject {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px
}

.ticket-detail .ticket-header .ticket-meta {
    display: flex;
    gap: 16px;
    align-items: center
}

.ticket-detail .ticket-header .ticket-meta .ticket-status {
    color: #20f19e;
    font-weight: 500
}

.ticket-detail .ticket-header .ticket-meta .ticket-date {
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px
}

.ticket-detail .ticket-message {
    background: rgba(0, 0, 0, .1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px
}

.ticket-detail .ticket-message p {
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.5
}

.ticket-detail .ticket-attachments {
    margin-top: 16px;
    border-top: 1px solid hsla(0, 0%, 100%, .2);
    padding-top: 16px
}

.ticket-detail .ticket-attachments h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px
}

.ticket-detail .ticket-attachments .attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.ticket-detail .ticket-attachments .attachment-list .attachment-item {
    background: rgba(0, 0, 0, .2);
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px
}

.ticket-detail .ticket-replies {
    margin-top: 30px
}

.ticket-detail .ticket-replies h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px
}

.ticket-detail .ticket-replies .reply-item {
    border: 1px solid hsla(0, 0%, 100%, .8);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px
}

.ticket-detail .ticket-replies .reply-item.admin-reply {
    border-color: rgba(32, 241, 158, .5)
}

.ticket-detail .ticket-replies .reply-item .reply-message {
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.5
}

.ticket-detail .ticket-replies .reply-item .reply-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 12px
}

.ticket-detail .ticket-replies .reply-item .reply-meta .reply-date {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.ticket-detail .ticket-replies .reply-item .reply-meta .reply-author {
    color: #fff;
    font-size: 14px;
    font-weight: 500
}

.ticket-detail .ticket-replies .reply-item .reply-meta:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.ticket-detail .dark-box-ticket-details {
    padding: 20px;
    background: linear-gradient(128.64deg, hsla(0, 0%, 100%, .1) 42.42%, hsla(0, 0%, 100%, .03) 115.45%);
    border-radius: 10px
}

.ticket-detail .dark-box-ticket-details .ticket-detail-items span {
    font-size: 12px
}

.ticket-detail .dark-box-ticket-details .ticket-detail-items span:first-child {
    margin-right: 10px;
    width: 100px;
    display: inline-block;
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px;
    font-weight: 500
}

.modal-search {
    background: #000;
    border-radius: 10px;
    margin-top: 100px
}

.modal-search .btn-cancel {
    background: transparent;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px
}

.modal-search .btn-cancel:hover {
    background: hsla(0, 0%, 100%, .5)
}

.modal-search .btn-search {
    background: #20f19e;
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px
}

.modal-search .btn-search:hover {
    background: #13f098
}

.modal-search .form-check {
    margin-bottom: 10px
}

.modal-search .form-check .form-check-input:checked {
    background-color: #20f19e;
    border-color: #20f19e
}

.spot-detail-wrapper .spot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(128.64deg, hsla(0, 0%, 100%, .1) 42.42%, hsla(0, 0%, 100%, .03) 115.45%);
    border-radius: 8px;
    margin-bottom: 15px
}

.spot-detail-wrapper .spot-header .spot-pair {
    font-size: 16px;
    font-weight: 500;
    color: #fff
}

.spot-detail-wrapper .spot-chart {
    background: linear-gradient(128.64deg, hsla(0, 0%, 100%, .1) 42.42%, hsla(0, 0%, 100%, .03) 115.45%);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px
}

.spot-detail-wrapper .spot-chart .price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.spot-detail-wrapper .spot-chart .price-info .current-price {
    font-size: 24px;
    font-weight: 600;
    color: #20f19e
}

.spot-detail-wrapper .spot-chart .price-info .price-change {
    display: flex;
    align-items: center;
    gap: 10px
}

.spot-detail-wrapper .spot-chart .price-info .price-change .change-percentage {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500
}

.spot-detail-wrapper .spot-chart .price-info .price-change .change-percentage.positive {
    background-color: rgba(32, 241, 158, .1);
    color: #20f19e
}

.spot-detail-wrapper .spot-chart .price-info .price-change .change-percentage.negative {
    background-color: rgba(251, 0, 0, .1);
    color: #fb0000
}

.spot-detail-wrapper .spot-chart .price-info .price-change .high-low {
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px
}

.spot-detail-wrapper .spot-trading {
    background: linear-gradient(128.64deg, hsla(0, 0%, 100%, .1) 42.42%, hsla(0, 0%, 100%, .03) 115.45%);
    border-radius: 8px;
    padding: 15px
}

.spot-detail-wrapper .spot-trading .trading-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .3);
    padding-bottom: 10px
}

.spot-detail-wrapper .spot-trading .trading-tabs .tab {
    color: hsla(0, 0%, 100%, .5);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding-bottom: 10px;
    position: relative
}

.spot-detail-wrapper .spot-trading .trading-tabs .tab.active {
    color: #fff
}

.spot-detail-wrapper .spot-trading .trading-tabs .tab.active:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #20f19e
}

.spot-detail-wrapper .spot-trading .trading-form .form-group {
    margin-bottom: 15px
}

.spot-detail-wrapper .spot-trading .trading-form .form-group label {
    display: block;
    color: hsla(0, 0%, 100%, .5);
    margin-bottom: 8px;
    font-size: 14px
}

.spot-detail-wrapper .spot-trading .trading-form .form-group .input-group {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .3);
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 8px;
    overflow: hidden
}

.spot-detail-wrapper .spot-trading .trading-form .form-group .input-group input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    color: #fff;
    font-size: 16px
}

.spot-detail-wrapper .spot-trading .trading-form .form-group .input-group input:focus {
    outline: none
}

.spot-detail-wrapper .spot-trading .trading-form .form-group .input-group .input-suffix {
    padding: 12px;
    color: hsla(0, 0%, 100%, .5);
    background: rgba(0, 0, 0, .5);
    font-size: 14px
}

.spot-detail-wrapper .spot-trading .trading-form .percentage-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

.spot-detail-wrapper .spot-trading .trading-form .percentage-buttons button {
    flex: 1;
    padding: 8px;
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 4px;
    background: transparent;
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease
}

.spot-detail-wrapper .spot-trading .trading-form .percentage-buttons button.active,
.spot-detail-wrapper .spot-trading .trading-form .percentage-buttons button:hover {
    background-color: rgba(32, 241, 158, .1);
    border-color: #20f19e;
    color: #20f19e
}

.spot-detail-wrapper .spot-trading .trading-form .action-buttons {
    display: flex;
    gap: 15px
}

.spot-detail-wrapper .spot-trading .trading-form .action-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all .3s ease
}

.spot-detail-wrapper .spot-trading .trading-form .action-buttons button.buy-button {
    background: #20f19e;
    color: #000;
    border: none
}

.spot-detail-wrapper .spot-trading .trading-form .action-buttons button.buy-button:hover {
    opacity: .9
}

.spot-detail-wrapper .spot-trading .trading-form .action-buttons button.sell-button {
    background: #fb0000;
    color: #fff;
    border: none
}

.spot-detail-wrapper .spot-trading .trading-form .action-buttons button.sell-button:hover {
    opacity: .9
}

.spot-transactions .nav-pills .nav-item {
    flex: 1;
    text-align: center
}

.spot-transactions .nav-pills .nav-item .nav-link {
    width: 100%;
    color: hsla(0, 0%, 100%, .5);
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: .5rem;
    font-size: 12px
}

.spot-transactions .nav-pills .nav-item .nav-link.active {
    background: none;
    color: #20f19e;
    position: relative
}

.spot-transactions .nav-pills .nav-item .nav-link.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 2px;
    margin: 0 auto;
    background-color: #20f19e
}

.spot-transactions .order-item,
.spot-transactions .trade-item {
    padding: 0 15px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 12px
}

.spot-transactions .order-item .text-success,
.spot-transactions .trade-item .text-success {
    color: var(--success) !important
}

.spot-transactions .order-item .text-warning,
.spot-transactions .trade-item .text-warning {
    color: var(--warning) !important
}

.spot-transactions .order-item .order-details,
.spot-transactions .order-item .trade-details,
.spot-transactions .trade-item .order-details,
.spot-transactions .trade-item .trade-details {
    position: relative;
    padding-bottom: 20px;
    color: hsla(0, 0%, 100%, .5)
}

.spot-transactions .order-item .order-details span:last-child,
.spot-transactions .order-item .trade-details span:last-child,
.spot-transactions .trade-item .order-details span:last-child,
.spot-transactions .trade-item .trade-details span:last-child {
    color: #fff
}

.spot-transactions .order-item .order-details:after,
.spot-transactions .order-item .trade-details:after,
.spot-transactions .trade-item .order-details:after,
.spot-transactions .trade-item .trade-details:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.spot-transactions .order-item .trade-details,
.spot-transactions .trade-item .trade-details {
    color: #fff
}

.spot-transactions .order-item .trade-details span:last-child,
.spot-transactions .trade-item .trade-details span:last-child {
    color: hsla(0, 0%, 100%, .5)
}

.spot-transactions .order-item:first-child .order-details,
.spot-transactions .order-item:first-child .trade-details,
.spot-transactions .trade-item:first-child .order-details,
.spot-transactions .trade-item:first-child .trade-details {
    padding-top: 30px
}

.spot-transactions .order-item:first-child .order-details:before,
.spot-transactions .order-item:first-child .trade-details:before,
.spot-transactions .trade-item:first-child .order-details:before,
.spot-transactions .trade-item:first-child .trade-details:before {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    top: 0
}

.spot-transactions .modal-search label {
    color: hsla(0, 0%, 100%, .5);
    margin-bottom: 5px
}

.spot-transactions .modal-search .form-select {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath fill='white' d='M2 4L0 0h4z'/%3e%3c/svg%3e") no-repeat right .5rem center/5px 5px !important;
    font-size: 12px;
    color: var(--white);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #fff
}

.spot-transactions .modal-search .input-group-text {
    background-color: transparent !important
}

.spot-transactions .modal-search .react-datepicker-wrapper .input-group {
    border-bottom: 1px solid #fff
}

.slider-amount {
    padding: 0 10px
}

.spot-trading-slider.buy-slider .MuiSlider-track,
.spot-trading-slider.sell-slider .MuiSlider-track {
    background-color: #00c087 !important
}

.spot-trading-slider.buy-slider .MuiSlider-thumb,
.spot-trading-slider.sell-slider .MuiSlider-thumb {
    background-color: #00c087 !important;
    width: 20px !important;
    height: 20px !important
}

.spot-trading-slider.buy-slider .MuiSlider-thumb:after,
.spot-trading-slider.sell-slider .MuiSlider-thumb:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #33ffc2
}

.spot-trading-slider.buy-slider .MuiSlider-thumb.Mui-focusVisible,
.spot-trading-slider.buy-slider .MuiSlider-thumb:hover,
.spot-trading-slider.sell-slider .MuiSlider-thumb.Mui-focusVisible,
.spot-trading-slider.sell-slider .MuiSlider-thumb:hover {
    box-shadow: 0 0 0 8px rgba(0, 192, 135, .16) !important
}

.spot-trading-slider.buy-slider .MuiSlider-valueLabel,
.spot-trading-slider.sell-slider .MuiSlider-valueLabel {
    background-color: #999 !important
}

.spot-trading-slider .MuiSlider-mark {
    background-color: #33ffc2;
    opacity: 1;
    width: 6px;
    height: 6px;
    border-radius: 50%
}

.spot-trading-slider .MuiSlider-valueLabel {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px
}

.spot-trading-slider .MuiSlider-valueLabel:before {
    display: none
}

.spot-trading-slider .MuiSlider-rail {
    opacity: .3
}

.spot-wrapper .spot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px
}

.spot-wrapper .spot-header .spot-pair {
    font-size: 16px;
    font-weight: 500;
    color: #fff
}

.spot-wrapper .rmv-margin,
.spot-wrapper .separator {
    margin: 5px 0
}

.spot-wrapper .buysell-tabs {
    background-color: hsla(0, 0%, 85%, .3);
    border-radius: 10px;
    padding: 8px 8px 6px
}

.spot-wrapper .buysell-tabs .nav-link.active {
    background: hsla(0, 0%, 85%, .1);
    border-radius: 8px;
    color: var(--green);
    font-size: 12px;
    font-weight: 500
}

.spot-wrapper .buysell-tabs #nav-buy.active {
    background-color: #54b539 !important
}

.spot-wrapper .buysell-tabs #nav-sell.active {
    background-color: #d74f3a !important
}

.spot-wrapper .spot-trading.form-select {
    background-color: #262929
}

.spot-wrapper .form-select.select-2 {
    border-radius: 8px;
    border: 0;
    background: hsla(0, 0%, 100%, .08);
    color: #fff;
    height: 50px;
    background-position: 100%;
    background-repeat: no-repeat;
    background-position-x: calc(100% - 15px);
    background-size: 10px;
    padding-right: 20px;
    text-align: center;
    font-size: 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.spot-wrapper .form-control,
.spot-wrapper .form-control:active,
.spot-wrapper .form-control:focus,
.spot-wrapper .input-group-text,
.spot-wrapper .input-group-text:focus {
    background-color: transparent;
    height: 50px;
    border: 1px solid var(--gray50);
    box-shadow: none;
    color: var(--gray50);
    font-size: 14px
}

.spot-wrapper .input-group .form-control {
    background-color: #1e2121;
    color: #fff;
    border: 0
}

.spot-wrapper .input-group.number .form-control,
.spot-wrapper .input-group.number .input-group-text {
    height: 40px
}

.spot-wrapper .input-group .input-group-text {
    border: 0;
    background-color: #262929
}

.spot-wrapper .btn-bth-usdt {
    padding: 8px;
    border: 1px solid #2c2c2c;
    background-color: transparent;
    color: #fff;
    border-radius: 4px;
    transition: all .3s ease
}

.spot-wrapper .btn-bth-usdt:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

.spot-wrapper .btn-bth-usdt.active {
    background-color: #2c2c2c;
    background: rgba(245, 200, 20, .05);
    border: 1px solid rgba(245, 200, 20, .5);
    border-radius: 5px;
    color: #f1b71c
}

.spot-wrapper .btn-bth-usdt {
    background: hsla(0, 0%, 100%, .05);
    border-radius: 5px;
    color: hsla(0, 0%, 100%, .3);
    font-weight: 500;
    font-size: 12px;
    width: 100%
}

.spot-wrapper .form-control {
    font-size: 12px
}

.spot-wrapper .form-control::placeholder {
    color: #fff !important;
    opacity: .7
}

.spot-wrapper .form-control::-webkit-input-placeholder {
    color: #fff !important;
    opacity: .7
}

.spot-wrapper .form-control::-moz-placeholder {
    color: #fff !important;
    opacity: .7
}

.spot-wrapper .form-control:-ms-input-placeholder {
    color: #fff !important;
    opacity: .7
}

.spot-wrapper .form-control:-moz-placeholder {
    color: #fff !important;
    opacity: .7
}

.ct-heading {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.ct-body {
    font-size: 12px;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 1px;
    margin-bottom: 1px
}

.ct-body .progress-bar {
    margin-top: 0
}

.ct-body .progress-bar.bg-red-opacity {
    background-color: rgba(255, 144, 123, .1);
    padding: 7px 0
}

.ct-body .progress-bar.bg-green-opacity {
    background-color: rgba(122, 209, 179, .1)
}

.spot-detail-content {
    padding: 1rem;
    background: var(--dark-box);
    border-radius: .5rem
}

.spot-detail-content .section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem
}

.spot-detail-content .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem
}

.spot-detail-content .info-grid .info-item {
    padding: 1rem;
    background: var(--dark-box-lighter);
    border-radius: .5rem
}

.spot-detail-content .info-grid .info-item label {
    display: block;
    color: var(--text-secondary);
    font-size: .9rem;
    margin-bottom: .5rem
}

.spot-detail-content .info-grid .info-item span {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500
}

.spot-detail-content .info-grid .info-item span.text-green {
    color: var(--green)
}

.spot-detail-content .info-grid .info-item span.text-red {
    color: var(--red)
}

.spot-detail-content .rules-list .rule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color)
}

.spot-detail-content .rules-list .rule-item:last-child {
    border-bottom: none
}

.spot-detail-content .rules-list .rule-item label {
    color: var(--text-secondary);
    font-size: .9rem
}

.spot-detail-content .rules-list .rule-item span {
    color: var(--text-primary);
    font-weight: 500
}

.spot-detail-wrapper .spot-detail-header {
    border-radius: .5rem;
    padding: 0 1rem;
    margin-bottom: 1rem
}

.spot-detail-wrapper .spot-detail-content {
    background: var(--dark-box);
    border-radius: .5rem;
    padding: 0 1rem
}

.spot-detail-wrapper .spot-price-list {
    background: var(--dark-box);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem
}

.spot-detail-wrapper .spot-price-list h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 30px 0 10px
}

.spot-detail-wrapper .spot-price-list .custom-table-alike.green,
.spot-detail-wrapper .spot-price-list .custom-table-alike.yellow {
    margin-bottom: 0
}

.spot-detail-wrapper .spot-price-list .btn-spot {
    background-color: hsla(0, 0%, 100%, .05);
    border-radius: 15px;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: block;
    width: 100%;
    text-decoration: none
}

.spot-detail-wrapper .spot-price-list .btn-spot.btn-spot-sell {
    color: #ff882e
}

.spot-detail-wrapper .spot-price-list .btn-spot.btn-spot-buy {
    color: #20f19e
}

.spot-detail-wrapper .text-gradient {
    background: linear-gradient(to right, var(--green), var(--green-light));
    -webkit-text-fill-color: transparent
}

.card-form-wrapper h4,
.deposit-wrapper h4 {
    margin: 30px 0 10px;
    font-size: 16px
}

.card-form-wrapper .page-content,
.deposit-wrapper .page-content {
    padding: 1rem
}

.card-form-wrapper .step-indicator,
.deposit-wrapper .step-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem
}

.card-form-wrapper .step-indicator .step,
.deposit-wrapper .step-indicator .step {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border-radius: 10px
}

.card-form-wrapper .step-indicator .step.active,
.deposit-wrapper .step-indicator .step.active {
    background-color: #0e1a18;
    border: 2px solid #20f19e;
    position: relative;
    padding-top: 30px
}

.card-form-wrapper .step-indicator .step.active .step_badge,
.deposit-wrapper .step-indicator .step.active .step_badge {
    background-color: #20f19e;
    width: 55px;
    height: 25px;
    color: #000;
    border-radius: 5px 0 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0
}

.card-form-wrapper .step-indicator .step.active .step-label,
.deposit-wrapper .step-indicator .step.active .step-label {
    color: #20f19e
}

.card-form-wrapper .step-indicator .step.active:after,
.deposit-wrapper .step-indicator .step.active:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 20%;
    height: 15px;
    width: 15px;
    transform: translate(50%, -42%) rotate(45deg) translateZ(0);
    background: linear-gradient(-45deg, #0e1a18 52%, transparent 0);
    border: inherit;
    border-width: 0 2px 2px 0
}

.card-form-wrapper .step-indicator .step .step-icon,
.deposit-wrapper .step-indicator .step .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center
}

.card-form-wrapper .step-indicator .step .step-label,
.deposit-wrapper .step-indicator .step .step-label {
    font-size: .875rem;
    color: var(--gray-500)
}

.card-form-wrapper .deposit-info h2,
.deposit-wrapper .deposit-info h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem
}

.card-form-wrapper .deposit-info .balance-card,
.deposit-wrapper .deposit-info .balance-card {
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    min-height: 200px
}

.card-form-wrapper .deposit-info .balance-card .balance-label,
.deposit-wrapper .deposit-info .balance-card .balance-label {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px;
    margin-bottom: 5px
}

.card-form-wrapper .deposit-info .balance-card .balance-amount,
.deposit-wrapper .deposit-info .balance-card .balance-amount {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white)
}

.card-form-wrapper .deposit-info .balance-card .card-preview,
.deposit-wrapper .deposit-info .balance-card .card-preview {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: auto;
    opacity: .8
}

.card-form-wrapper .deposit-info .form-section,
.deposit-wrapper .deposit-info .form-section {
    margin-top: 2rem;
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 1rem;
    padding: 1.5rem
}

.card-form-wrapper .deposit-info .form-section .form-group,
.deposit-wrapper .deposit-info .form-section .form-group {
    margin-bottom: 1.5rem
}

.card-form-wrapper .deposit-info .form-section .form-group label,
.deposit-wrapper .deposit-info .form-section .form-group label {
    display: block;
    margin-bottom: .5rem;
    color: var(--gray-300)
}

.card-form-wrapper .deposit-info .form-section .form-row,
.deposit-wrapper .deposit-info .form-section .form-row {
    display: grid
}

.card-form-wrapper .deposit-info .form-section .balance-info,
.deposit-wrapper .deposit-info .form-section .balance-info {
    margin-top: 5px;
    font-size: .875rem;
    color: hsla(0, 0%, 100%, .5)
}

.card-form-wrapper .deposit-info .form-actions,
.deposit-wrapper .deposit-info .form-actions {
    margin-top: 15px
}

.card-form-wrapper .deposit-info .form-actions button:disabled,
.deposit-wrapper .deposit-info .form-actions button:disabled {
    opacity: .7;
    cursor: not-allowed
}

.card-form-wrapper .deposit-info select,
.card-form-wrapper input,
.card-form-wrapper select,
.card-form-wrapper textarea,
.deposit-wrapper .deposit-info select,
.deposit-wrapper input,
.deposit-wrapper select,
.deposit-wrapper textarea {
    width: 100%;
    padding: 12px;
    background: #1e2121;
    border: 1.5px solid #3f4747 !important;
    border-radius: 8px;
    color: #fff;
    font-size: 14px
}

.card-form-wrapper input::placeholder,
.card-form-wrapper select::placeholder,
.card-form-wrapper textarea::placeholder,
.deposit-wrapper input::placeholder,
.deposit-wrapper select::placeholder,
.deposit-wrapper textarea::placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.card-form-wrapper input:focus,
.card-form-wrapper select:focus,
.card-form-wrapper textarea:focus,
.deposit-wrapper input:focus,
.deposit-wrapper select:focus,
.deposit-wrapper textarea:focus {
    outline: none
}

.deposit-banner {
    padding: 2rem;
    background: hsla(0, 0%, 100%, .05);
    border-radius: 1rem;
    margin-bottom: 2rem
}

.deposit-banner img {
    margin: 0 auto 2rem
}

.deposit_history_list {
    background: linear-gradient(177.54deg, #202424 2.19%, rgba(5, 16, 13, .13) 82.78%);
    border-radius: 25px 25px 0 0;
    padding: 20px;
    margin-top: 30px
}

.deposit_history_list h4 {
    margin: 10px 0 30px;
    font-size: 18px;
    font-weight: 400
}

.deposit_history_list_row {
    margin-top: 1rem
}

.deposit_history_list_row .deposit_history_list_item {
    padding: 1rem;
    background: #282d2d;
    border-radius: 1rem;
    margin-bottom: 15px
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title .deposit-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 16px;
    font-weight: 700
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title .deposit-icon .deposit-amount span {
    margin-right: 5px
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title .deposit-status {
    background: hsla(0, 0%, 100%, .05);
    border-radius: 1rem;
    padding: .5rem 1rem;
    text-transform: capitalize;
    font-size: 12px
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title .deposit-status.pending {
    background: rgba(255, 144, 123, .1);
    color: #ff907b
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title .deposit-status.approved {
    background: rgba(122, 209, 179, .1);
    color: #7ad1b3
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-title .deposit-status.rejected {
    background: rgba(255, 68, 68, .1);
    color: #f44
}

.deposit_history_list_row .deposit_history_list_item .deposit-details-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.deposit_history_list_row .deposit_history_list_item .deposit-txid {
    font-size: 14px;
    font-weight: 400;
    margin: 0
}

.deposit-list-wrapper .deposit_history_list_row {
    padding: 0 15px
}

.deposit-list-wrapper .react-datepicker__input-container input:focus {
    outline: none;
    box-shadow: none;
    border-color: #3f4747
}

.deposit-list-wrapper .react-datepicker__input-container input::placeholder {
    color: #8b8e8e;
    opacity: 0;
    position: static
}

.transaction-list-wrapper .transaction_history_list_row {
    padding: 0 15px
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item {
    padding: 1rem;
    background: #282d2d;
    border-radius: 1rem;
    margin-bottom: 15px
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item .card-details {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item .card-details:last-child {
    margin-bottom: 0
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item .card-details .card-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 16px;
    font-weight: 700
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item .card-details .card-icon .card-amount span {
    margin-right: 5px
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item .card-details .card-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    flex-direction: column
}

.transaction-list-wrapper .transaction_history_list_row .transaction_history_list_item .card-details .card-info .card-title {
    color: #20f19e;
    margin: 0
}

.border-gray {
    border: 1.5px solid #3f4747 !important
}

.ekyc-content {
    padding-top: 30px;
    padding-bottom: 30px
}

.ekyc-content .ekyc-content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.ekyc-content .ekyc-content-item h4 {
    font-size: 14px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .7);
    margin: 0
}

.ekyc-content .ekyc-content-item span {
    padding: 7px 12px;
    color: #8b8e8e;
    background-color: #171c1b;
    border-radius: 20px
}

.ekyc-banner {
    padding: 2rem;
    background: hsla(0, 0%, 100%, .05);
    border-radius: 1rem;
    margin-bottom: 2rem
}

.ekyc-banner img {
    margin: 0 auto 2rem
}

.ekyc-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    --tw-bg-opacity: 1;
    background-color: rgb(23 28 28/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .page-content {
    flex: 1 1 0%;
    padding: 1rem
}

.ekyc-wrapper .section-header {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ekyc-wrapper .section-header h4 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff
}

.ekyc-wrapper .section-header .status {
    margin-bottom: .25rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(41 41 41/var(--tw-bg-opacity, 1));
    padding: .375rem .75rem;
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(139 142 142/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .form-section {
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(40 45 45/var(--tw-bg-opacity, 1));
    padding: 1rem;
    margin-bottom: 50px
}

.ekyc-wrapper .form-group {
    margin-bottom: 1rem
}

.ekyc-wrapper .form-group label {
    margin-bottom: .5rem;
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff
}

.ekyc-wrapper .form-group label .required {
    --tw-text-opacity: 1;
    color: rgb(239 68 68/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .form-group .password-hint {
    margin-top: .5rem;
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(139 142 142/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .form-group .password-input {
    position: relative
}

.ekyc-wrapper .form-group .password-input .password-toggle {
    position: absolute;
    right: .75rem;
    top: 50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-text-opacity: 1;
    color: rgb(139 142 142/var(--tw-text-opacity, 1));
    cursor: pointer
}

.ekyc-wrapper .form-group .form-input-group,
.ekyc-wrapper .form-group input[type=date],
.ekyc-wrapper .form-group input[type=email],
.ekyc-wrapper .form-group input[type=password],
.ekyc-wrapper .form-group input[type=tel],
.ekyc-wrapper .form-group input[type=text],
.ekyc-wrapper .form-group select,
.ekyc-wrapper .form-group textarea {
    width: 100%;
    border-radius: .5rem;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgb(30 33 33/var(--tw-bg-opacity, 1));
    padding: .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff;
    border: 1.5px solid #3f4747
}

.ekyc-wrapper .form-group .form-input-group:focus,
.ekyc-wrapper .form-group input[type=date]:focus,
.ekyc-wrapper .form-group input[type=email]:focus,
.ekyc-wrapper .form-group input[type=password]:focus,
.ekyc-wrapper .form-group input[type=tel]:focus,
.ekyc-wrapper .form-group input[type=text]:focus,
.ekyc-wrapper .form-group select:focus,
.ekyc-wrapper .form-group textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(63 71 71/var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px
}

.ekyc-wrapper .form-group .form-input-group::placeholder,
.ekyc-wrapper .form-group input[type=date]::placeholder,
.ekyc-wrapper .form-group input[type=email]::placeholder,
.ekyc-wrapper .form-group input[type=password]::placeholder,
.ekyc-wrapper .form-group input[type=tel]::placeholder,
.ekyc-wrapper .form-group input[type=text]::placeholder,
.ekyc-wrapper .form-group select::placeholder,
.ekyc-wrapper .form-group textarea::placeholder {
    --tw-text-opacity: 1;
    color: rgb(139 142 142/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-group {
    padding: 5px
}

.ekyc-wrapper .form-group .form-input-group .form-control {
    background-color: transparent;
    border: none
}

.ekyc-wrapper .form-group .phone-input {
    display: flex;
    gap: .5rem
}

.ekyc-wrapper .form-group .phone-input .country-code {
    width: 5rem;
    flex-shrink: 0
}

.ekyc-wrapper .form-group .phone-input .phone-number {
    flex: 1 1 0%
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .form-control {
    width: 100% !important;
    height: 44px !important;
    color: #fff !important;
    border-radius: 8px !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-button {
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #3f4747 !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-button .selected-flag,
.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-button .selected-flag:focus,
.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-button .selected-flag:hover {
    background-color: transparent !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown {
    background-color: #1e2121 !important;
    border: 1px solid #3f4747 !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown .country {
    background-color: transparent !important;
    color: #fff !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown .country:hover {
    background-color: #3f4747 !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown .country .dial-code {
    color: #8b8e8e !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown .search {
    background-color: #1e2121 !important;
    border-bottom: 1px solid #3f4747 !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown .search input {
    background-color: #1e2121 !important;
    color: #fff !important;
    border: 1px solid #3f4747 !important
}

.ekyc-wrapper .form-group .phone-input-container .react-tel-input .country-dropdown .search input::placeholder {
    color: #8b8e8e !important
}

.ekyc-wrapper .form-group .form-input-select {
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(30 33 33/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control) {
    border-radius: .5rem;
    --tw-border-opacity: 1;
    border-color: rgb(63 71 71/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 33 33/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control):hover {
    --tw-border-opacity: 1;
    border-color: rgb(0 196 143/var(--tw-border-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control) :global(.select__value-container) {
    padding: .5rem
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control) :global(.select__single-value) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control) :global(.select__placeholder) {
    --tw-text-opacity: 1;
    color: rgb(139 142 142/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control) :global(.select__indicator-separator) {
    --tw-bg-opacity: 1;
    background-color: rgb(63 71 71/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__control) :global(.select__indicator) {
    --tw-text-opacity: 1;
    color: rgb(139 142 142/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__menu) {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(63 71 71/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 33 33/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__menu) :global(.select__option) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff
}

.ekyc-wrapper .form-group .form-input-select :global(.select__menu) :global(.select__option):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(40 45 45/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__menu) :global(.select__option):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(40 45 45/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .form-group .form-input-select :global(.select__menu) :global(.select__option):global(.select__option--is-selected) {
    --tw-bg-opacity: 1;
    background-color: rgb(0 196 143/var(--tw-bg-opacity, 1))
}

.ekyc-wrapper .error-message {
    margin-top: .25rem;
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(239 68 68/var(--tw-text-opacity, 1))
}

.ekyc-wrapper .file-upload button {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.ekyc-wrapper .file-upload button:hover {
    opacity: .9
}

.ekyc-wrapper .file-upload button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.ekyc-wrapper .file-upload button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .5rem;
    --tw-border-opacity: 1;
    border-color: rgb(63 71 71/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 33 33/var(--tw-bg-opacity, 1));
    padding: .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 12px;
    color: var(--custom-green)
}

.withdrawal-page .withdrawal-form-content.ekyc-wrapper .file-upload button {
    color: var(--green)
}

.transfer-page.ekyc-wrapper .file-upload button {
    color: #20f19e
}

.referral-wrapper .ekyc-wrapper .file-upload button {
    color: #00ff85;
    color: #4caf50
}

.reward-wrapper .ekyc-wrapper .file-upload button {
    color: lime
}

.spot-detail-content .info-grid .info-item span.ekyc-wrapper .file-upload button {
    color: var(--green)
}

.ekyc-wrapper .file-upload button {
    border: 1.5px solid #3f4747
}

.ekyc-wrapper .submit-button {
    width: 100%;
    border-radius: .5rem;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #00c48f var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(0, 196, 143, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #00e0a4 var(--tw-gradient-to-position);
    padding: .75rem 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.ekyc-wrapper .submit-button:hover {
    opacity: .9
}

.ekyc-wrapper .submit-button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.ekyc-wrapper .mobile-application {
    margin-bottom: 1.5rem
}

.ekyc-wrapper .mobile-application h2 {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff
}

.ekyc-wrapper .personal-information {
    margin-bottom: 1.5rem
}

.ekyc-wrapper .personal-information h2 {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    color: #fff
}

.ekyc-wrapper .form-info ul {
    padding-left: 15px
}

.ekyc-wrapper .form-info ul li {
    list-style: disc
}

.date-input-wrapper {
    position: relative;
    width: 100%
}

.date-input-wrapper:before {
    content: "";
    position: absolute;
    right: auto;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    pointer-events: none;
    z-index: 1
}

.date-input-wrapper .date-input {
    width: 100%;
    padding: 12px 12px 12px 40px !important;
    background-color: #1e2121;
    color: #fff;
    border: 1px solid #3f4747;
    border-radius: 8px;
    font-size: 14px
}

.date-input-wrapper .date-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.date-input-wrapper .date-input:focus {
    outline: none;
    border-color: #3f4747
}

.special-label {
    display: none !important
}

.card-management-wrapper h4 {
    margin: 30px 0 10px;
    font-size: 16px
}

.card-management-wrapper .page-content {
    padding: 0
}

.card-management-wrapper .card_list {
    background: linear-gradient(177.54deg, #202424 2.19%, rgba(5, 16, 13, .13) 82.78%);
    border-radius: 25px 25px 0 0;
    padding: 20px;
    margin: 30px -15px 0
}

.card-management-wrapper .card_list h4 {
    margin: 10px 0 30px;
    font-size: 18px;
    font-weight: 400
}

.card-management-wrapper .card_list .card_list_item {
    background: #282d2d;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px
}

.card-management-wrapper .card_list .card-details {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    gap: 20px
}

.card-management-wrapper .card_list .card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px
}

.card-management-wrapper .card_list .card-info .card-info-item {
    font-size: 12px;
    display: flex;
    flex-direction: column
}

.card-management-wrapper .card_list .card-info .card-info-item .title {
    color: hsla(0, 0%, 100%, .5)
}

.card-management-wrapper .card_list .card-add-info {
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 15px;
    padding: 10px;
    display: flex;
    gap: 10px;
    justify-content: space-between
}

.card-management-wrapper .card_list .card-add-info .card-number h4 {
    font-size: 13px;
    color: #fff;
    margin: 0;
    font-weight: 400
}

.card-management-wrapper .card_list .card-add-info .card-number h5 {
    font-size: 13px;
    color: hsla(0, 0%, 100%, .5);
    margin: 5px 0 0;
    font-weight: 400
}

.card-management-wrapper .card_list .card-add-info .card-action {
    align-items: center;
    display: flex
}

.card-management-wrapper .card_list .card-add-info .card-action .card-status {
    background: hsla(0, 0%, 100%, .05);
    border-radius: 10px;
    padding: 5px 10px;
    text-transform: capitalize;
    font-size: 10px
}

.card-management-wrapper .card_list .card-add-info .card-action .card-status.pending {
    background: rgba(255, 144, 123, .1);
    color: #9747ff
}

.card-management-wrapper .card_list .card-add-info .card-action .card-status.active {
    background: rgba(122, 209, 179, .1);
    color: #7ad1b3
}

.card-management-wrapper .card_list .card-add-info .card-action .card-status.rejected {
    background: rgba(255, 68, 68, .1);
    color: #f44
}

.card-form-wrapper .card-form-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 10px 0 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .3)
}

.card-form-wrapper .card-form-header h4 {
    font-size: 14px;
    color: #20f19e;
    margin: 0 0 5px
}

.card-form-wrapper .card-form-header h5 {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    margin: 0
}

.card-form-wrapper .card-fee {
    text-align: center;
    margin: 5px 0 0;
    color: hsla(0, 0%, 100%, .5)
}

.card-form-wrapper .card-fee span {
    color: #20f19e
}

.card-form-wrapper .card-remark {
    margin: 15px 0;
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px;
    text-align: center
}

.carousel-nav-class {
    position: absolute;
    outline: 0;
    transition: all .5s;
    border-radius: 35px;
    z-index: 1000;
    border: 0;
    background: #20f19e;
    color: #000;
    min-width: 25px;
    min-height: 25px;
    opacity: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.carousel-nav-class.carousel-nav-left-class {
    left: calc(4% + 1px)
}

.carousel-nav-class.carousel-nav-right-class {
    right: calc(4% + 1px)
}

.channel_quick_nav {
    margin-top: 30px
}

.channel_quick_nav .react-multi-carousel-list {
    padding-bottom: 30px
}

.channel_quick_nav .react-multi-carousel-list .quick-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    flex-direction: column
}

.channel_quick_nav .react-multi-carousel-list .quick-nav-item .quick-nav-icon {
    margin-bottom: 5px
}

.channel_quick_nav .react-multi-carousel-list .quick-nav-item .quick-nav-label {
    font-size: 12px;
    text-align: center
}

.channel_quick_nav .react-multi-carousel-list .react-multi-carousel-dot.react-multi-carousel-dot--active button {
    background-color: #20f19e;
    border-color: #20f19e
}

.channel-lists {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 5px 15px;
    border-radius: 15px 15px 0 0;
    border-top: 1px solid #a0a0a0;
    box-shadow: inset 1px 2px 4px 0 #272727;
    margin: 30px -15px 0
}

.channel-lists .channel-list-item {
    margin: 15px
}

.channel-lists .nav-link {
    display: flex;
    align-items: center
}

.channel-list-category {
    margin-top: 1.25rem
}

.channel-list-category .channel-list-category-header {
    margin-top: 1.25rem;
    margin-bottom: .75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.channel-list-category .channel-list-category-header h4 {
    font-size: 16px
}

.channel-list-category .channel-list-item {
    margin: 15px
}

.channel-list-wrapper {
    padding: 0 15px;
    position: relative
}

.channel-list-wrapper .horizontal-scroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap
}

.channel-list-wrapper .scoll-indicator {
    position: absolute;
    top: 0;
    bottom: 48px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .31)
}

.channel-list-wrapper .scoll-indicator.btn-left {
    left: 0
}

.channel-list-wrapper .scoll-indicator.btn-right {
    right: 0
}

.channel-card-wrapper {
    display: inline-block;
    margin-right: 15px;
    width: 260px;
    min-width: 260px
}

.channel-card-wrapper h3 {
    font-size: 14px;
    margin: 10px 0 5px
}

.channel-card-wrapper .channel-period {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .5)
}

.channel-details-wrapper {
    padding-bottom: 100px
}

.channel-details-wrapper .channel-image {
    position: relative
}

.channel-details-wrapper .channel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.channel-details-wrapper .channel-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4)
}

.channel-details-wrapper .channel-header h2 {
    font-size: 16px
}

.channel-details-wrapper .channel-header .date {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5)
}

.channel-details-wrapper .channel-content {
    padding: 40px 15px;
    border-radius: 20px 20px 0 0;
    background: #000;
    margin-top: -20px;
    position: relative
}

.channel-details-wrapper .channel-single-line {
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.channel-listing {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    position: relative;
    padding: 15px 0 30px
}

.channel-listing .channel-image {
    position: relative;
    width: 120px;
    display: flex
}

.channel-listing .channel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.channel-listing .channel-content {
    position: relative;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.channel-listing .channel-content h3 {
    font-size: 16px
}

.channel-listing .channel-content .channel-period {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .5)
}

.channel-listing:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center
}

.channel-video-list .channel-video {
    padding: 0
}

.channel-video-list .channel-video .video-wrapper {
    height: 200px
}

.channel-video-list .channel-listing {
    flex-direction: column;
    margin: 0 0 15px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: #101414;
    padding: 0 0 15px
}

.channel-video-list .channel-listing .channel-content-header {
    display: flex;
    justify-content: space-between
}

.channel-video-list .channel-listing .channel-content {
    justify-content: flex-start;
    padding: 30px 15px 5px
}

.channel-video-list .channel-listing .channel-content p {
    color: hsla(0, 0%, 100%, .5);
    font-size: 12px
}

.channel-video-list .channel-listing .pdf-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url(bg-white-paper-texture.jpg);
    background-size: cover;
    background-position: 50%;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.channel-video-list .channel-listing .pdf-wrapper .btn-view-document {
    background-color: #000;
    display: inline-block;
    width: 150px;
    padding: 10px;
    border-radius: 5px;
    text-align: center
}

.channel-video-list .channel-listing .pdf-wrapper .btn-view-document span {
    background-image: linear-gradient(91.71deg, var(--custom-orange), var(--custom-yellow), var(--custom-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.referral-wrapper .channel-video-list .channel-listing .pdf-wrapper .btn-view-document span {
    background: linear-gradient(90deg, #00ff85, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .reward-header .reward-overlay .channel-video-list .channel-listing .pdf-wrapper .btn-view-document span {
    background-image: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.reward-wrapper .channel-video-list .channel-listing .pdf-wrapper .btn-view-document span {
    background: linear-gradient(180deg, beige 45%, #a48955 55%, beige);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.spot-detail-wrapper .channel-video-list .channel-listing .pdf-wrapper .btn-view-document span {
    background: linear-gradient(to right, var(--green), var(--green-light));
    -webkit-text-fill-color: transparent
}

.channel-gallery-list .channel-gallery {
    padding: 0
}

.channel-gallery-list .channel-gallery .channel-gallery-item {
    padding: 0;
    margin: 0 0 15px
}

.channel-gallery-list .channel-gallery .channel-gallery-item img {
    border-radius: 10px;
    overflow: hidden
}

.nav-language-selector {
    min-width: 8rem;
    margin: 0;
    z-index: 1000;
    right: 1px
}

.nav-language-selector .languageSelector {
    max-height: 100%
}

.nav-language-selector ul {
    list-style: none;
    border-radius: .375rem;
    background-color: #222;
    padding: 10px;
    margin: 0 0 0 100
}

.nav-language-selector ul .container {
    display: block;
    margin-bottom: 5px;
    border-radius: .375rem;
    padding: 8px 10px
}

.nav-language-selector ul li {
    display: block;
    padding: 4px;
    margin-bottom: 5px;
    transition: background-color .3s ease
}

.nav-language-selector ul li span {
    color: gray;
    margin-left: 15px
}

.booster-group {
    position: relative;
    padding-left: 101px;
    min-height: 160px;
    margin-bottom: 35px
}

.group-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.group-icon img {
    width: 100px;
    height: 215px
}

.group-cards {
    flex: 1;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 10px
}

.booster-list,
.group-cards {
    display: flex;
    flex-direction: column
}

.booster-list {
    padding: 16px;
    gap: 22px;
    font-size: 20px;
    overflow-x: hidden
}

.booster-card {
    background: hsla(0, 0%, 100%, .05);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    gap: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .3s ease
}

.booster-card.selected,
.booster-card:hover {
    border-color: #00ff9d
}

.booster-icon {
    width: 80px;
    height: 40px
}

.booster-info {
    flex: 1
}

.booster-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px
}

.booster-title h2 {
    font-size: 18px;
    margin: 0
}

.sub-title {
    color: #888
}

.status-tag {
    color: gray;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: auto
}

.booster-details {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.booster-details .label,
.booster-details .value {
    font-size: 10px
}

.detail-row {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 14px
}

.value {
    color: #00ff9d
}

.price {
    color: #fff;
    font-size: 10px
}

.check-details-btn {
    width: calc(100% - 32px);
    margin: 16px;
    padding: 16px;
    background: #00ff9d;
    color: #000;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer
}

.check-details-btn:disabled {
    background-color: gray;
    cursor: not-allowed;
    opacity: .7
}

.jackpot_pool_content {
    position: relative
}

.jackpot_pool_content .background-container {
    position: absolute;
    top: 500px;
    left: 0;
    width: 100%;
    height: 85%;
    z-index: 1;
    opacity: 60%
}

.jackpot_pool_content .background-container .background-object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2a1d18;
    border-radius: 12px;
    box-shadow: inset 0 0 23.4px 0 rgba(121, 86, 56, .302)
}

.jackpot_pool_content .background-container .background-object[data-selected="1"] {
    background-color: #1a1a1a
}

.jackpot_pool_content .background-container .background-object[data-selected="2"] {
    background-color: #412a1e
}

.jackpot_pool_content .banner-section {
    background: radial-gradient(34.4% 62.37% at 73.24% 37.63%, #2c7498 0, #141446 33.86%, #131313 74.91%);
    padding: .5rem 1.5rem;
    border-radius: 1rem;
    margin: 1rem;
    z-index: 1
}

.jackpot_pool_content .banner-section .banner-header {
    position: relative;
    min-height: 143px
}

.jackpot_pool_content .banner-section .banner-header .text-content {
    position: absolute;
    margin-top: 17px;
    z-index: 2;
    max-width: 60%
}

.jackpot_pool_content .banner-section .banner-header .background-image {
    z-index: 1;
    right: -24px !important
}

.jackpot_pool_content .banner-section .banner-body h1 {
    color: #fff;
    font-size: .8rem;
    font-weight: 100;
    margin-bottom: .5rem
}

.jackpot_pool_content .banner-section .banner-body .prize-info h2 {
    color: orange;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem
}

.jackpot_pool_content .banner-section .banner-body .current-round {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem
}

.jackpot_pool_content .banner-section .banner-body .current-round .label {
    color: #8b8b8b;
    font-size: .875rem;
    margin-bottom: .25rem
}

.jackpot_pool_content .banner-section .banner-body .current-round .date {
    color: #fff;
    font-size: .875rem;
    font-weight: 10;
    opacity: 90%
}

.jackpot_pool_content .jackpot-section {
    padding: .5rem 1.2rem;
    z-index: 2
}

.jackpot_pool_content .jackpot-section .jackpot-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #131313;
    padding: 15px;
    border-radius: .5rem
}

.jackpot_pool_content .jackpot-section .jackpot-info .trophy-icon {
    font-size: 2rem
}

.jackpot_pool_content .jackpot-section .jackpot-info .label {
    color: #8b8b8b;
    font-size: .875rem;
    margin-bottom: .25rem
}

.jackpot_pool_content .jackpot-section .jackpot-info .amount {
    color: #20f19e;
    font-size: .8rem;
    font-weight: 600
}

.jackpot_pool_content .leagueMode-section {
    position: relative;
    padding: .5rem 1.2rem;
    margin-top: 30px;
    z-index: 2
}

.jackpot_pool_content .leagueMode-section .title {
    font-size: 16px;
    margin-bottom: 20px
}

.jackpot_pool_content .leagueMode-section .trophy-section {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    z-index: 3
}

.jackpot_pool_content .leagueMode-section .league-pool {
    background-color: #2a1d18;
    border-radius: 12px;
    padding: 16px;
    margin-top: 35px;
    box-shadow: inset 2px 2px 2.9px 0 #412a1e, inset -2px -2px 2.9px 0 #1f0e05, 2px 2px 2.9px 0 #412a1e;
    z-index: 3
}

.jackpot_pool_content .leagueMode-section .league-pool[data-selected="1"] {
    background-color: #1a1a1a;
    box-shadow: inset 2px 2px 2.9px 0 #313131, inset -2px -2px 2.9px 0 #000, 2px 2px 2.9px 0 #494949
}

.jackpot_pool_content .leagueMode-section .league-pool[data-selected="2"] {
    background-color: #412a1e;
    box-shadow: inset 2px 2px 2.9px 0 #412a1e, inset -2px -2px 2.9px 0 #150c02, 2px 2px 2.9px 0 rgba(65, 42, 30, .431)
}

.jackpot_pool_content .leagueMode-section .league-pool .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.jackpot_pool_content .leagueMode-section .league-pool .header .titles {
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

.jackpot_pool_content .leagueMode-section .league-pool .header .subtitle {
    color: #9b9b9b;
    font-size: 14px
}

.jackpot_pool_content .leagueMode-section .league-pool .number-container {
    display: flex;
    align-items: center;
    gap: 2px
}

.jackpot_pool_content .leagueMode-section .league-pool .number-container .currency-symbol {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-right: 4px
}

.jackpot_pool_content .leagueMode-section .league-pool .number-container .number-wrapper {
    display: flex;
    gap: 2px;
    font-family: monospace;
    font-size: 24px
}

.jackpot_pool_content .leagueMode-section .league-pool .numberBox {
    background-image: url(jackpot-pool-number-background.png);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: cover;
    background-color: #1a1a1a;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 32px;
    height: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .4);
    overflow: hidden
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking {
    padding: 16px;
    background: #29170d;
    border-radius: 8px;
    margin-top: 40px;
    z-index: 3
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking[data-selected="1"] {
    background-color: #1a1a1a
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking[data-selected="2"] {
    background-color: #412a1e
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking h3 {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item {
    display: flex;
    align-items: center;
    background: #29170d;
    border: 1px solid hsla(0, 0%, 100%, .149);
    border-radius: 8px;
    padding: 12px;
    gap: 12px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item[data-selected="1"] {
    background-color: #1a1a1a
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item[data-selected="2"] {
    background-color: #412a1e
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-number {
    padding: 5px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 52px;
    font-weight: 700;
    background: linear-gradient(180deg, #fff, #9f6b4e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info {
    flex: 1
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info .username {
    color: #fff;
    font-size: 16px;
    font-weight: 500
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info .prize-label {
    color: gray;
    font-size: 11px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info .prize-amount {
    font-weight: 600;
    font-size: 20px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info .prize-amount[data-rank="1"] {
    background: linear-gradient(119.9deg, #ffedd6 26.3%, #926334 105.68%, #c3a28f 180.58%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info .prize-amount[data-rank="2"] {
    background: linear-gradient(119.94deg, #fff7f7 25.11%, #979797 81.93%, #9893b1 120.62%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item .rank-info .prize-amount[data-rank="3"] {
    background: linear-gradient(120.32deg, #fddcc7 -13.25%, #b47350 68.18%, #eeb082 132.06%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item.second .rank-number {
    background: linear-gradient(180deg, #fff, #97959d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .ranking-list .rank-item.third .rank-number {
    background: linear-gradient(180deg, #fff, #9b6d3e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .other-ranks {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .other-ranks .rank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #29170d;
    border: 1px solid hsla(0, 0%, 100%, .149);
    border-radius: 8px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .other-ranks .rank-row[data-selected="1"] {
    background-color: #1a1a1a
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .other-ranks .rank-row[data-selected="2"] {
    background-color: #412a1e
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .other-ranks .rank-row .rank-label {
    color: gray;
    font-size: 14px;
    margin-left: 15px
}

.jackpot_pool_content .leagueMode-section .jackpot-ranking .other-ranks .rank-row .rank-prize {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-right: 15px
}

.jackpot_pool_content .leagueMode-section .leader-board {
    background: #29170d;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    z-index: 3
}

.jackpot_pool_content .leagueMode-section .leader-board[data-selected="1"] {
    background-color: #1a1a1a
}

.jackpot_pool_content .leagueMode-section .leader-board[data-selected="2"] {
    background-color: #412a1e
}

.jackpot_pool_content .leagueMode-section .leader-board .board-header {
    margin-bottom: 24px
}

.jackpot_pool_content .leagueMode-section .leader-board .board-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px
}

.jackpot_pool_content .leagueMode-section .leader-board .board-header .last-updated {
    color: gray;
    font-size: 14px
}

.jackpot_pool_content .leagueMode-section .leader-board .board-table .table-header {
    display: grid;
    grid-template-columns: 48px 1fr 1fr 1fr;
    padding: 8px 12px;
    color: gray;
    font-size: 12px;
    border-top: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c
}

.jackpot_pool_content .leagueMode-section .leader-board .board-table .table-row {
    display: grid;
    grid-template-columns: 48px 1fr 1fr 1fr;
    padding: 16px 12px;
    color: #fff;
    font-size: 14px
}

.jackpot_pool_content .leagueMode-section .leader-board .board-table .table-row .rank,
.jackpot_pool_content .leagueMode-section .leader-board .board-table .table-row .username {
    color: #fff
}

.jackpot_pool_content .leagueMode-section .leader-board .board-table .table-row .direct-sales {
    color: #20f19e
}

.jackpot_pool_content .leagueMode-section .leader-board .board-table .table-row .max-price {
    color: #fff
}

.jackpot_pool_content .leagueMode-section .faqs-section {
    margin-top: 24px;
    padding: 16px;
    border-radius: 8px;
    z-index: 3
}

.jackpot_pool_content .leagueMode-section .faqs-section h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item {
    overflow: hidden;
    border-bottom: 1px solid hsla(0, 0%, 50%, .3);
    align-items: center
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 10px;
    color: orange;
    font-size: 16px;
    cursor: pointer
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item .faq-header .question {
    color: #fff
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item .faq-header .question.open {
    color: orange
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item .faq-header .arrow {
    color: #fff;
    transform: rotate(180deg);
    transition: transform .3s ease
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item .faq-header .arrow.open {
    transform: rotate(0deg)
}

.jackpot_pool_content .leagueMode-section .faqs-section .faq-list .faq-item .faq-content {
    padding: 0 16px 16px;
    color: gray;
    font-size: 14px;
    line-height: 1.5
}

.bthPurchase-wrapper,
.megaStake-wrapper {
    background-image: url(bg-downline-tree-top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    min-height: 100vh;
    padding: 88px 0 80px
}

.megaStake-wrapper .section-1 p {
    margin-bottom: 0
}

.megaStake-wrapper #yourMegaStake .btn-wallet {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(209.74deg, hsla(0, 0%, 100%, .1) 11.77%, hsla(0, 0%, 100%, .049) 90.91%);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid hsla(0, 0%, 100%, .1)
}

.megaStake-wrapper #yourMegaStake .btn-wallet span {
    margin: 5px 5px 0;
    font-size: 14px;
    line-height: 1.5
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list {
    margin-top: 30px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list h4 {
    font-size: 16px;
    color: #fff;
    font-weight: 700
}

.megaStake-wrapper #yourMegaStake .assets_transaction_action {
    margin: 20px 0 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.megaStake-wrapper #yourMegaStake .assets_transaction_action .wallet-action {
    margin-right: 25px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_action .wallet-action span {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .7);
    text-align: center;
    display: block;
    margin-top: 5px;
    width: 90%
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_tabs ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid hsla(0, 0%, 100%, .3);
    width: 100%;
    padding-left: 0
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_tabs ul li {
    padding: 10px 12px;
    border-bottom: 1px solid transparent;
    color: hsla(0, 0%, 100%, .3);
    font-size: 14px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_tabs ul li.active {
    color: #20f19e;
    border-bottom: 1px solid #20f19e
}

@media(min-width:768px) {
    .megaStake-wrapper #yourMegaStake .assets_transaction_list_item_tabs ul li {
        padding: 10px 16px
    }
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content {
    padding: 0
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul {
    padding-left: 10px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 5px 0 15px;
    margin-bottom: 5px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-icon {
    margin-right: 15px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    max-width: 200px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-info span.transaction-name {
    font-size: 12px;
    color: #fff
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-info span.transaction-time {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .5)
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount {
    width: auto;
    margin-right: 10px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-coin {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
    gap: 5px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-coin .coin-name {
    display: inline-block
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-usd {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
    gap: 5px
}

.megaStake-wrapper #yourMegaStake .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-usd .coin-name {
    display: inline-block
}

.shop-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif
}

.shop-page .title {
    font-size: 20px
}

.hero-section {
    position: relative;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #1a3a1a, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px
}

.hero-section .hero-overlay {
    z-index: 2;
    max-width: 600px
}

.hero-section .hero-overlay h1 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: Montserrat;
    margin: 70px 0 0
}

.nft-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif
}

.nft-page .title {
    font-size: 20px
}

.shop_content {
    flex: 1;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden
}

.nft-section,
.shop_content {
    display: flex;
    width: 100%;
    position: relative
}

.nft-section {
    height: 90px;
    background: linear-gradient(180deg, #1a3a1a, #000);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px
}

.nft-section .hero-overlay {
    z-index: 2;
    max-width: 600px
}

.nft-section .hero-overlay h1 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: Montserrat;
    margin: 70px 0 0
}

.logo-section {
    background: radial-gradient(circle, #4a3000 5%, #000 100%);
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px
}

.product-section {
    display: flex;
    min-height: 300px;
    position: relative;
    overflow: hidden
}

.product-section .product-info {
    flex: 1;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2
}

.product-section .product-info h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px
}

.product-section .product-info .shop-now {
    color: gray;
    text-decoration: none;
    font-size: 16px;
    margin-top: 10px;
    display: inline-block;
    transition: color .3s ease
}

.product-section .product-info .shop-now:hover {
    color: #fff
}

.product-section .product-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    background-size: contain;
    background-position: 100%;
    background-repeat: no-repeat;
    z-index: 1
}

.product-section.tee-section {
    background-color: #f5f5f5;
    color: #000
}

.product-section.tee-section .product-info {
    padding-left: 30px
}

.product-section.tee-section .product-image {
    background-image: url(tee-placeholder.jpg);
    background-color: #f5f5f5
}

.product-section.hoodie-section {
    background-color: #1a1a1a;
    color: #fff
}

.product-section.hoodie-section .product-info {
    padding-left: 30px
}

.product-section.hoodie-section .product-image {
    background-image: url(hoodie-placeholder.jpg);
    background-color: #1a1a1a
}

.order-history-section {
    background-color: #000;
    padding: 30px 0;
    text-align: center
}

.order-history-section .order-history-link {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5px;
    position: relative;
    padding-bottom: 5px;
    opacity: .7
}

.order-history-section .order-history-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease
}

.order-history-section .order-history-link:hover:after {
    transform: scaleX(1);
    transform-origin: left
}

.shop-purchase-page {
    background: #000;
    color: #fff
}

.shop-purchase-page .purchase-content {
    padding: 20px;
    max-width: 500px;
    margin: 0 auto
}

.shop-purchase-page .product-image-section {
    margin-bottom: 30px
}

.shop-purchase-page .product-image-section .product-image {
    width: 100%;
    height: 400px;
    background: #1a1a1a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.shop-purchase-page .product-image-section .product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.shop-purchase-page .product-details .product-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2
}

.shop-purchase-page .product-details .production-price-label {
    font-size: 12px;
    margin-top: 10px;
    opacity: 70%
}

.shop-purchase-page .product-details .product-price {
    font-size: 18px;
    margin-bottom: 20px
}

.shop-purchase-page .product-details .product-size-label {
    font-size: 12px;
    margin-top: 10px;
    opacity: 70%
}

.shop-purchase-page .product-details .product-description {
    margin-bottom: 30px
}

.shop-purchase-page .product-details .product-description p {
    color: #ccc;
    line-height: 1.5
}

.shop-purchase-page .product-details .size-selection {
    margin-bottom: 30px
}

.shop-purchase-page .product-details .size-selection h3 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600
}

.shop-purchase-page .product-details .size-selection .size-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.shop-purchase-page .product-details .size-selection .size-options .size-option {
    padding: 6px 16px;
    border: 1px solid #333;
    background: transparent;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s ease
}

.shop-purchase-page .product-details .size-selection .size-options .size-option:hover {
    border-color: #0f8
}

.shop-purchase-page .product-details .size-selection .size-options .size-option.selected {
    background: #0f8;
    color: #000;
    border-color: #0f8
}

.shop-purchase-page .product-details .quantity-selection {
    margin-bottom: 30px
}

.shop-purchase-page .product-details .quantity-selection h3 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600
}

.shop-purchase-page .product-details .quantity-selection .quantity-controls {
    display: flex;
    align-items: center;
    gap: 15px
}

.shop-purchase-page .product-details .quantity-selection .quantity-controls .quantity-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    background: transparent;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .3s ease
}

.shop-purchase-page .product-details .quantity-selection .quantity-controls .quantity-btn:hover {
    border-color: #0f8;
    color: #0f8
}

.shop-purchase-page .product-details .quantity-selection .quantity-controls .quantity-value {
    font-size: 18px;
    font-weight: 600;
    min-width: 30px;
    text-align: center
}

.shop-purchase-page .product-details .buy-now-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ff6b35, #0f8);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 30px;
    transition: all .3s ease
}

.shop-purchase-page .product-details .buy-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, .3)
}

.shop-purchase-page .product-details .product-info {
    margin-bottom: 30px
}

.shop-purchase-page .product-details .product-info .info-item {
    padding: 8px 0;
    border-bottom: 1px solid #333
}

.shop-purchase-page .product-details .product-info .info-item:last-child {
    border-bottom: none
}

.shop-purchase-page .product-details .product-info .info-item strong {
    color: #0f8
}

.shop-purchase-page .product-details .shipping-return {
    margin-bottom: 30px
}

.shop-purchase-page .product-details .shipping-return h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600
}

.shop-purchase-page .product-details .shipping-return p {
    color: #ccc;
    line-height: 1.5
}

.shop-purchase-page .product-details .related-products h3 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600
}

.shop-purchase-page .product-details .related-products .related-items {
    display: flex;
    gap: 15px
}

.shop-purchase-page .product-details .related-products .related-items .related-item {
    flex: 1
}

.shop-purchase-page .product-details .related-products .related-items .related-item .related-image {
    width: 100%;
    height: 130px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 8px
}

.shop-purchase-page .product-details .related-products .related-items .related-item p {
    font-size: 14px;
    color: #ccc;
    text-align: left;
    margin-bottom: 0
}

.checkout-page {
    background: #1a1a1a;
    color: #fff
}

.checkout-page .checkout_content {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto
}

.checkout-page .checkout_content .order-summary-section {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 50px;
    padding: 20px;
    background: #2a2a2a
}

.checkout-page .checkout_content .order-summary-section h2 {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 100;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px
}

.checkout-page .checkout_content .order-summary-section .price {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px
}

.checkout-page .checkout_content .contact-section,
.checkout-page .checkout_content .delivery-section,
.checkout-page .checkout_content .final-order-summary,
.checkout-page .checkout_content .payment-section,
.checkout-page .checkout_content .remember-section,
.checkout-page .checkout_content .shipping-section {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px
}

.checkout-page .checkout_content .contact-section h3,
.checkout-page .checkout_content .delivery-section h3,
.checkout-page .checkout_content .final-order-summary h3,
.checkout-page .checkout_content .payment-section h3,
.checkout-page .checkout_content .remember-section h3,
.checkout-page .checkout_content .shipping-section h3 {
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff
}

.checkout-page .checkout_content .city-input,
.checkout-page .checkout_content .contact-input,
.checkout-page .checkout_content .country-select,
.checkout-page .checkout_content .discount-input,
.checkout-page .checkout_content .full-input,
.checkout-page .checkout_content .name-input,
.checkout-page .checkout_content .postcode-input {
    width: 100%;
    padding: 16px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    margin-bottom: 10px
}

.checkout-page .checkout_content .city-input::placeholder,
.checkout-page .checkout_content .contact-input::placeholder,
.checkout-page .checkout_content .country-select::placeholder,
.checkout-page .checkout_content .discount-input::placeholder,
.checkout-page .checkout_content .full-input::placeholder,
.checkout-page .checkout_content .name-input::placeholder,
.checkout-page .checkout_content .postcode-input::placeholder {
    color: #888
}

.checkout-page .checkout_content .city-input option.placeholder-option,
.checkout-page .checkout_content .contact-input option.placeholder-option,
.checkout-page .checkout_content .country-select option.placeholder-option,
.checkout-page .checkout_content .discount-input option.placeholder-option,
.checkout-page .checkout_content .full-input option.placeholder-option,
.checkout-page .checkout_content .name-input option.placeholder-option,
.checkout-page .checkout_content .postcode-input option.placeholder-option {
    color: #888
}

.checkout-page .checkout_content .city-input:focus,
.checkout-page .checkout_content .contact-input:focus,
.checkout-page .checkout_content .country-select:focus,
.checkout-page .checkout_content .discount-input:focus,
.checkout-page .checkout_content .full-input:focus,
.checkout-page .checkout_content .name-input:focus,
.checkout-page .checkout_content .postcode-input:focus {
    outline: none;
    border-color: #0f8
}

.checkout-page .checkout_content .country-select {
    width: 100%;
    padding: 12px 15px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    color: hsla(0, 0%, 100%, .5);
    margin-bottom: 10px;
    font-size: 15px
}

.checkout-page .checkout_content .country-select::placeholder {
    color: #888
}

.checkout-page .checkout_content .country-select option {
    color: hsla(0, 0%, 100%, .7);
    background-color: #1a1a1a
}

.checkout-page .checkout_content .country-select option.placeholder-option {
    color: hsla(0, 0%, 100%, .7)
}

.checkout-page .checkout_content .country-select:focus {
    outline: none;
    border-color: #0f8;
    color: #fff
}

.checkout-page .checkout_content .form-row {
    display: flex;
    gap: 10px
}

.checkout-page .checkout_content .form-row .name-input,
.checkout-page .checkout_content .form-row .postcode-input {
    flex: 1
}

.checkout-page .checkout_content .form-row .city-input {
    flex: 2
}

.checkout-page .checkout_content .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    color: #ccc;
    margin-bottom: 10px;
    opacity: .7
}

.checkout-page .checkout_content .checkbox-label input[type=checkbox] {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    margin: 0;
    padding: 0
}

.checkout-page .checkout_content .checkbox-label input[type=checkbox]:checked {
    background-color: #0f8;
    border-color: #0f8
}

.checkout-page .checkout_content .checkbox-label input[type=checkbox]:checked:after {
    content: "✓";
    position: absolute;
    color: #000;
    font-size: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700
}

.checkout-page .checkout_content .wallet-options {
    border: 1px solid #444;
    padding: 10px;
    border-radius: 10px
}

.checkout-page .checkout_content .wallet-options .wallet-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #1a1a1a
}

.checkout-page .checkout_content .wallet-options .wallet-option .wallet-amount {
    font-weight: 500;
    color: #fff;
    background-color: #171c1c
}

.checkout-page .checkout_content .wallet-options .wallet-note {
    padding: 0 10px 10px;
    font-size: 12px;
    color: #888;
    margin-top: 10px
}

.checkout-page .checkout_content .secure-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    color: #ccc
}

.checkout-page .checkout_content .secure-note .info-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px
}

.checkout-page .checkout_content .final-order-summary .order-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-family: Montserrat, sans-serif
}

.checkout-page .checkout_content .final-order-summary .discount-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px
}

.checkout-page .checkout_content .final-order-summary .discount-section .discount-input {
    flex: 1;
    margin-bottom: 0
}

.checkout-page .checkout_content .final-order-summary .discount-section .apply-btn {
    padding: 8px 20px;
    background: #444;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    cursor: pointer
}

.checkout-page .checkout_content .final-order-summary .discount-section .apply-btn:hover {
    background: #555
}

.checkout-page .checkout_content .final-order-summary .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-family: Montserrat, sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    opacity: .7
}

.checkout-page .checkout_content .final-order-summary .summary-row.total {
    border-top: 1px solid #444;
    padding-top: 15px;
    margin-top: 15px;
    font-weight: 600;
    font-size: 14px;
    opacity: 1
}

.checkout-page .checkout_content .final-order-summary .summary-row.total .total-amount {
    color: #0f8;
    font-size: 16px
}

.checkout-page .checkout_content .final-order-summary .buy-now-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #0f8, #00cc6a);
    border: none;
    border-radius: 8px;
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px
}

.checkout-page .checkout_content .final-order-summary .buy-now-btn:hover {
    background: linear-gradient(135deg, #00cc6a, #0a5)
}

.tab-button-custom {
    position: relative;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    font-weight: 600;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 1;
    background-color: transparent;
    border: none;
    color: #a0a0a0;
    white-space: nowrap
}

.tab-button-custom:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #202a24;
    z-index: -1;
    transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.tab-button-custom:not(:first-child):before {
    width: calc(100% + 19px);
    clip-path: polygon(0 0, 80% 0, 100% 100%, -10% 100%);
    border-top-right-radius: 50px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 8px;
    z-index: -1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

.tab-button-custom:first-child:before {
    width: calc(100% + 10px);
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 2px
}

.tab-button-custom {
    border-top-right-radius: 20px
}

.tab-button-custom:hover:before {
    background-color: #282e2c
}

.tab-button-custom.active {
    color: #1fbd7e;
    z-index: 5
}

.tab-button-custom.active:before {
    background-color: #282e2c
}

.tab-button-custom.active:after {
    content: "";
    bottom: 0;
    right: 0;
    width: 20px;
    height: 28px;
    background-color: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 10px 10px 0 0 #282e2c;
    z-index: 3
}

.tab-button-custom:not(:first-child) {
    margin-left: -15px
}

.tab-button-custom:not(.active) {
    z-index: 1
}

.tab-button-custom:has(+.active) {
    z-index: 4
}

.tab-button-custom:first-child:before {
    transform: none
}

.tab-button-custom span {
    position: relative;
    z-index: 10
}

.custom-border-green {
    border-color: #20f19e !important
}

.custom-border-brown {
    border-color: #563418 !important
}

.custom-border-gray {
    border-color: #3a3e3e !important
}

.custom-border-light-gray {
    border-color: #b3b5b5 !important
}

.custom-border-upcoming {
    border-color: #995f33 !important
}

.custom-border-expired {
    border-color: #4f5151 !important
}

.boxxNft-page {
    height: auto;
    min-height: 166vh;
    display: flex;
    flex-direction: column;
    background: url(boxxNft-Background.png) no-repeat 50%;
    color: #fff;
    background-attachment: fixed
}

.boxxNft-page .title {
    font-size: 17px
}

.boxxNft-page .boxxNft_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 50px 20px 0;
    justify-content: flex-start;
    align-items: center
}

.boxxNft-page .boxxNft_content .boxxNft-background {
    width: 100%;
    height: auto;
    border-radius: 11px;
    object-fit: cover;
    margin-top: 30px
}

.boxxNft-page .boxxNft_content .boxx-nft-image {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px
}

.boxxNft-page .boxxNft_content .boxx-nft-image .boxxNft-image_icon_1,
.boxxNft-page .boxxNft_content .boxx-nft-image .boxxNft-image_icon_2 {
    width: 25%;
    height: auto;
    border-radius: 8px;
    transition: all .3s ease
}

.boxxNft-page .boxxNft_content .boxx-nft-image .boxxNft-image_icon_1:hover,
.boxxNft-page .boxxNft_content .boxx-nft-image .boxxNft-image_icon_2:hover {
    padding: 3px;
    background: linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e);
    border-radius: 11px;
    box-shadow: inset 0 0 0 1000px linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e)
}

.boxxNft-page .boxxNft_content .shareholder-image {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    gap: 3px
}

.boxxNft-page .boxxNft_content .shareholder-image .shareholder-image_icon_1,
.boxxNft-page .boxxNft_content .shareholder-image .shareholder-image_icon_2 {
    width: 23.8%;
    height: auto;
    border-radius: none
}

.boxxNft-page .boxxNft_content .shareholder-image .shareholder-image_icon_1:hover,
.boxxNft-page .boxxNft_content .shareholder-image .shareholder-image_icon_2:hover {
    padding: none;
    background: none;
    border-radius: none;
    box-shadow: none
}

.boxxNft-page .boxxNft_content .boxxNft_selection {
    width: 100%;
    font-family: Montserrat, sans-serif
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    width: 100%
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group {
    display: flex;
    gap: 10px;
    align-items: center
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button {
    padding: 10px 16px 0 4px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color .3s ease;
    position: relative;
    font-size: 16px
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover {
    background: linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 42%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    height: 1.5px;
    background: linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e)
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover .social-media-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover .social_media_1,
.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover .social_media_2 {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .2s ease
}

.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover .social_media_1:hover,
.boxxNft-page .boxxNft_content .boxxNft_selection .tab-buttons .tab-group button:hover .social_media_2:hover {
    transform: scale(1.1)
}

.boxxNft-page .boxxNft_content .boxxNft_selection .social-media-icons {
    display: flex;
    gap: 15px;
    align-items: center
}

.boxxNft-page .boxxNft_content .boxxNft_selection .social-media-icons .social_media_1,
.boxxNft-page .boxxNft_content .boxxNft_selection .social-media-icons .social_media_2 {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .2s ease
}

.boxxNft-page .boxxNft_content .boxxNft_selection .social-media-icons .social_media_1:hover,
.boxxNft-page .boxxNft_content .boxxNft_selection .social-media-icons .social_media_2:hover {
    transform: scale(1.1)
}

.boxxNft-page .boxxNft_content .tab-content {
    width: 100%;
    padding: 0 0 0 4px;
    text-align: justify;
    font-family: Montserrat, sans-serif
}

.boxxNft-page .boxxNft_content .tab-content h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #fff
}

.boxxNft-page .boxxNft_content .tab-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    opacity: .5
}

.boxxNft-page .boxxNft_content .tab-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0 100px
}

.boxxNft-page .boxxNft_content .tab-content .team1,
.boxxNft-page .boxxNft_content .tab-content .team2,
.boxxNft-page .boxxNft_content .tab-content .team3 {
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.boxxNft-page .boxxNft_content .tab-content .team1 img,
.boxxNft-page .boxxNft_content .tab-content .team2 img,
.boxxNft-page .boxxNft_content .tab-content .team3 img {
    width: 40%;
    height: auto;
    border-radius: 8px;
    margin: 0
}

.boxxNft-page .boxxNft_content .tab-content .team1 h3,
.boxxNft-page .boxxNft_content .tab-content .team2 h3,
.boxxNft-page .boxxNft_content .tab-content .team3 h3 {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px
}

.boxxNft-page .boxxNft_content .tab-content .team1 p,
.boxxNft-page .boxxNft_content .tab-content .team2 p,
.boxxNft-page .boxxNft_content .tab-content .team3 p {
    font-size: 12px;
    opacity: .7;
    margin: 0 0 6px
}

.boxxNft-page .boxxNft_content .tab-content .on-going {
    background: linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-size: 16px
}

.boxxNft-page .boxxNft_content .tab-content .upcoming {
    color: hsla(0, 0%, 100%, .161);
    font-weight: 600;
    font-size: 16px
}

.boxxNft-page .boxxNft_content .tab-content .team2,
.boxxNft-page .boxxNft_content .tab-content .team3 {
    margin-top: 40px
}

.boxxNft-page .buttons {
    display: flex;
    margin-top: 30px;
    gap: 10px;
    width: 100%
}

.boxxNft-page .buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500px;
    transition: background-color .3s ease
}

.boxxNft-page .buttons .order_history {
    width: 100%;
    position: relative;
    border-radius: 8px;
    background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e) border-box;
    border: 2px solid transparent;
    padding: 12px 16px;
    cursor: pointer;
    background-clip: padding-box, border-box
}

.boxxNft-page .buttons .order_history p {
    margin: 0;
    background: linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-size: 16px
}

.boxxNft-page .buttons .purchase {
    width: 100%;
    background: linear-gradient(90deg, #f1b71c 0, #bbf885 45%, #1bf29e);
    color: #000;
    border-radius: 8px
}

.the-process-title {
    background: linear-gradient(90deg, #ff882e, #d5c872 51.5%, #1bf29e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    margin-bottom: 2px
}

.custom-border-green {
    border: 1px solid #0d3a28
}

.custom-border-brown {
    border: 1px solid #784f1e
}

.custom-border-red {
    border: 1px solid #e60000
}

.custom-border-gray {
    border: 1px solid #4f5c55
}

.custom-border-yellow {
    border: 1px solid #60510e
}

.custom-border-dark-yellow {
    border: 1px solid #61510e
}

.assets_buyback_list {
    margin-top: 30px
}

.assets_buyback_list h4 {
    font-size: 16px;
    color: #fff;
    font-weight: 700
}

.assets_buyback_action {
    margin: 20px 0 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.assets_buyback_action .wallet-action {
    margin-right: 25px
}

.assets_buyback_action .wallet-action span {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .7);
    text-align: center;
    display: block;
    margin-top: 5px;
    width: 90%
}

.assets_buyback_list_item_tabs ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    padding-left: 0;
    margin-bottom: 0
}

.assets_buyback_list_item_tabs ul li {
    border-bottom: 1px solid transparent;
    color: #686b6b;
    font-size: 12px;
    font-weight: 500;
    font-family: Montserrat, sans-serif
}

.assets_buyback_list_item_tabs ul li.active {
    color: #b3b5b5;
    font-weight: 500
}

@media(min-width:768px) {
    .assets_buyback_list_item_tabs ul li {
        padding: 12px
    }
}

.assets_content {
    padding: 15px
}

.assets_content .widget_assets_balance {
    background-image: url(bg-my-asset-top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    max-width: 100%;
    width: 400px;
    height: 180px;
    padding: 10px 15px;
    margin: 0 auto
}

.assets_content .widget_assets_balance .balance_title {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.assets_content .widget_assets_balance .balance_title span {
    margin: 0 10px 0 0;
    color: hsla(0, 0%, 100%, .7);
    font-size: 14px
}

.assets_content .widget_assets_balance .balance_content {
    margin-top: 40px;
    padding: 0 10px
}

.assets_content .assets_transaction_list {
    margin-top: 30px
}

.assets_content .assets_transaction_list h4 {
    font-size: 16px;
    color: #fff;
    font-weight: 700
}

.assets_content .assets_transaction_action {
    margin: 20px 0 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.assets_content .assets_transaction_action .wallet-action {
    margin-right: 25px
}

.assets_content .assets_transaction_action .wallet-action span {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .7);
    text-align: center;
    display: block;
    margin-top: 5px;
    width: 90%
}

.assets_content .assets_transaction_list_item_tabs ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid hsla(0, 0%, 100%, .3);
    width: 100%;
    padding-left: 0
}

.assets_content .assets_transaction_list_item_tabs ul li {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    color: hsla(0, 0%, 100%, .3);
    font-size: 14px
}

.assets_content .assets_transaction_list_item_tabs ul li.active {
    color: #20f19e;
    border-bottom: 1px solid #20f19e
}

.assets_content .assets_transaction_list_item_content {
    padding: 0
}

.assets_content .assets_transaction_list_item_content ul {
    padding-left: 10px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 5px 0 15px;
    margin-bottom: 5px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-icon {
    margin-right: 15px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    max-width: 200px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-info span.transaction-name {
    font-size: 12px;
    color: #fff
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-info span.transaction-time {
    font-size: 11px;
    color: hsla(0, 0%, 100%, .5)
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount {
    width: auto;
    margin-right: 10px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-coin {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
    gap: 5px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-coin .coin-name {
    display: inline-block
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-usd {
    font-size: 12px;
    color: hsla(0, 0%, 100%, .5);
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
    gap: 5px
}

.assets_content .assets_transaction_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-usd .coin-name {
    display: inline-block
}

.assets_buyback_list_item_content {
    padding: 0
}

.assets_buyback_list_item_content ul {
    padding-left: 10px
}

.assets_buyback_list_item_content ul li .transaction-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 5px 0 15px;
    margin-bottom: 5px
}

.assets_buyback_list_item_content ul li .transaction-item:after {
    display: block;
    width: 100%;
    content: url(line-gradient-gray.png);
    text-align: center;
    position: absolute;
    bottom: 0
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-icon {
    margin-right: 15px
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 200px
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-info span.transaction-name {
    font-size: 14px;
    color: #cdced3;
    font-weight: 500
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-info span.transaction-time {
    font-size: 12px;
    font-weight: 500;
    color: #484c4e
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-amount {
    width: auto;
    margin-right: 10px
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-coin {
    font-size: 14px;
    color: #cdced3;
    font-weight: 500;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
    gap: 5px
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-coin .coin-name {
    display: inline-block
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-usd {
    font-size: 12px;
    color: #484c4e;
    font-weight: 500;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
    gap: 5px
}

.assets_buyback_list_item_content ul li .transaction-item .transaction-details .transaction-amount .transaction-amount-in-usd .coin-name {
    display: inline-block
}