:root {
    --color-teal: #0ead98;
    --bg-teal: #0ead9817;
    --color-tealLight: #0ead9817;
    --bg-neutralCustom: #1f2229;
    --white-color: #fff;
    --text-zincCustom-900: #171a1f;
    --text-slate-50: #f7f8fa;
    --text-grayCustom-100: #f3f4f6;
    --text-grayCustom-200: #e5e7eb;
    --text-grayCustom-300: #d1d5db;
    --text-grayCustom-400: #9ca3af;
    --text-grayCustom-500: #6b7280;
    --text-grayCustom-600: #4b5563;
    --text-grayCustom-700: #374151;
    --text-grayCustom-800: #1f2937;
    --text-grayCustom-900: #111827;
    --text-green-500: #22c55e;
    --text-yellow-500: #eab308
}

html.dark .bg-light {
    background: var(--text-zincCustom-900) !important
}

.bg-light {
    background-image: url(/images/bgHeaderLight.png?b13a1bafabcb728de28f496ebb076fc2)!important;
    background-size: 100% 100%;
    height: 100vh
}

html.dark .bg-header-landing {
    background-image: url(/images/bg_night.webp?ea05644a008570db1ee9823e08312859)!important;
    background-size: 100% 100%
}

html.dark body {
    background-color: #171a1f !important
}

body {
    background-color: var(--text-slate-50)
}

.bg-header-landing {
    background-image: url(/images/bgHeaderLight.png?b13a1bafabcb728de28f496ebb076fc2);
    background-size: 100% 100%
}

.color-increment--price, .language-item a.active {
    color: var(--color-teal)
}

.opacity-5 {
    opacity: .05
}

.trade-bg-night {
    background-image: url(/images/trade_bg.png?ee5cd02d5db4ef78d43740beb6bc5c73);
    background-size: 100% 100%
}

.box-smooth:after {
    background-image: url(/images/global_decor.png?19430c85a3617ddefae37ed432512b13);
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    height: 11rem;
    position: absolute;
    right: 0;
    top: .5rem;
    width: 120px
}

@media (min-width: 768px) {
    .box-smooth:after {
        height: 181px;
        right: 0;
        top: 30px
    }
}

.box-asset {
    background: linear-gradient(180deg, #067d6e 4.44%, #1bbea9)
}

.box-asset:after {
    background-image: url(/images/asset_decor.png?8c3f6b2c43bcdc220bd56258886165dc);
    background-repeat: no-repeat;
    background-size: 100% auto;
    bottom: 0;
    content: "";
    display: block;
    height: 84px;
    position: absolute;
    width: 96px
}

:is([dir=ltr] .box-asset):after {
    right: 0
}

:is([dir=rtl] .box-asset):after {
    left: 0
}

@media (min-width: 768px) {
    .box-asset:after {
        height: 0
    }
}

@media (min-width: 1024px) {
    .box-asset:after {
        height: 140px;
        width: 160px
    }
}

.dropdown-menu-futures {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-futures {
    height: 182px;
    opacity: 1
}

.dropdown-menu-finance {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-finance {
    height: 190px;
    opacity: 1
}

.dropdown-menu-promotion {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-promotion {
    height: 289px;
    opacity: 1
}

.dropdown-menu-reports {
    height: 0;
    opacity: 0;
    transition: all .3s;
    visibility: hidden
}

.items-menu:hover .dropdown-menu-reports {
    height: 220px;
    opacity: 1;
    visibility: visible
}

.dropdown-menu-other {
    height: 0;
    opacity: 0;
    transition: all .3s;
    visibility: hidden
}

.items-menu:hover .dropdown-menu-other {
    height: 180px;
    opacity: 1;
    visibility: visible
}

.dropdown-menu-market {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-market {
    height: 209px;
    opacity: 1
}

.dropdown-menu-analysis {
    height: 0;
    opacity: 0;
    transition: all .3s;
    visibility: hidden
}

.items-menu:hover .dropdown-menu-analysis {
    height: 157px;
    opacity: 1;
    visibility: visible
}

.dropdown-menu-ticket {
    height: 0;
    opacity: 0;
    transition: all .3s;
    visibility: hidden
}

.items-menu:hover .dropdown-menu-ticket {
    height: 105px;
    opacity: 1;
    visibility: visible
}

.dropdown-menu-wallet {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-wallet {
    height: 147px;
    opacity: 1
}

.dropdown-menu-orders {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-orders {
    height: 240px;
    opacity: 1
}

.dropdown-menu-assets {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-assets {
    height: 432px;
    opacity: 1
}

.dropdown-menu-account {
    height: 0;
    opacity: 0;
    transition: all .3s;
    visibility: hidden
}

.items-menu:hover .dropdown-menu-account {
    height: auto;
    opacity: 1;
    visibility: visible
}

.dropdown-menu-volume {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-volume {
    height: 432px;
    opacity: 1
}

.dropdown-menu-notif {
    transition: all .3s;
    visibility: hidden
}

.items-menu:hover .dropdown-menu-notif {
    visibility: visible
}

.dropdown-menu-lang {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-lang {
    height: auto;
    opacity: 1
}

.dropdown-menu-scan {
    height: 0;
    opacity: 0;
    transition: all .3s
}

.items-menu:hover .dropdown-menu-scan {
    height: 150px;
    opacity: 1
}

.items-menu:hover .angle-down-icon {
    color: var(--color-teal);
    transform: rotate(180deg);
    transition: all .3s
}

.dropdown-menu-list:hover .item-list-drop span, .dropdown-menu-list:hover .one-item-list, .items-menu:hover .items-menu-futures {
    color: var(--color-teal)
}

.drop-menu--right:after {
    background-color: #7a7878;
    content: "";
    height: 15px;
    width: 1px
}

.scan-download-app:after {
    background-color: #494949;
    content: "";
    height: 115px;
    position: absolute;
    right: -18px;
    top: 0;
    width: 1px
}

.check-icon {
    display: none !important
}

.list-language > a.active {
    background: var(--color-teal);
    color: #fff !important
}

.list-language > a.active .check-icon {
    display: block !important
}

.exchange-rate:before {
    background: #424242;
    content: "";
    height: 100px;
    position: absolute;
    width: 1px
}

:is([dir=ltr] .exchange-rate):before {
    right: 0
}

:is([dir=rtl] .exchange-rate):before {
    left: 0
}

tr td {
    transition: all .3s ease
}

html.dark tr:hover td:first-child {
    background: var(--bg-neutralCustom)
}

tr:hover td:first-child {
    background: var(--text-slate-50)
}

html.dark tr:hover td:last-child {
    background: var(--bg-neutralCustom)
}

tr:hover td:last-child {
    background: var(--text-slate-50)
}

html.dark tr:hover td:not(:first-child,:last-child) {
    background: var(--bg-neutralCustom)
}

tr:hover td:not(:first-child,:last-child) {
    background: var(--text-slate-50)
}

.tabs .tab-header div.active {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    border-bottom-width: 3px;
    border-color: rgb(255 255 255/var(--tw-border-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem
}

@media (min-width: 768px) {
    .tabs .tab-header div.active {
        border-bottom-width: 0;
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    :is([dir=ltr] .tabs .tab-header div.active) {
        border-left-width: 3px
    }

    :is([dir=rtl] .tabs .tab-header div.active) {
        border-right-width: 3px
    }
}

.semi-circle {
    border-radius: 15rem 15rem 0 0
}

.semi-circle-min {
    border-radius: 10rem 10rem 0 0
}

.semi-circle.active-circle {
    animation: circle .7s linear
}

.semi-circle-min.active-circle-min {
    animation: circle-min .7s linear
}

@keyframes circle {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes circle-min {
    0% {
        transform: rotate(150deg)
    }
    to {
        transform: rotate(-90deg)
    }
}

.receive-app:hover .svg-ios {
    fill: #6ceddc !important
}

.receive-app:hover .app-store {
    color: #6ceddc !important
}

.box-protect:after {
    background-image: url(/images/protect_decor.png?b152d4f8af0c0663d3b676c71e7f1023);
    background-repeat: no-repeat;
    background-size: 100% auto;
    bottom: 0;
    content: "";
    display: block;
    height: 245px;
    position: absolute;
    top: 140px;
    width: 100px
}

:is([dir=ltr] .box-protect):after {
    right: 10px
}

:is([dir=rtl] .box-protect):after {
    left: 10px
}

@media (min-width: 1024px) {
    .box-protect:after {
        top: 30px;
        width: 245px
    }
}

.more-service--item:hover .more-service--span {
    color: var(--color-teal)
}

.more-service:after {
    background: #545353;
    content: "";
    display: none;
    height: 80%;
    position: absolute;
    top: 40px;
    width: 1px
}

:is([dir=ltr] .more-service):after {
    right: -112px
}

:is([dir=rtl] .more-service):after {
    left: -112px
}

@media (min-width: 1280px) {
    .more-service:after {
        display: block
    }
}

@media screen and (min-width: 768px) {
    html.dark .explore-crypto {
        background-image: url(/images/trip_bg_night.png?5e431358b2baeea4216525695c71c06a)
    }

    .explore-crypto, html.dark .explore-crypto {
        background-color: transparent;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 846px 216px
    }

    .explore-crypto {
        background-image: url(/images/trip_bg_light.png?e956a2b76fa81a5f261a27260cfd4cd6)
    }
}

.tab button.active {
    background-color: #252a33;
    border: 2px solid var(--color-teal) !important;
    color: var(--color-teal)
}

.accordion button {
    background: none;
    border: none;
    display: block;
    font-size: 1.15rem;
    font-weight: 400;
    outline: none;
    padding: 1em 0;
    position: relative;
    width: 100%
}

:is([dir=ltr] .accordion button) {
    text-align: left
}

:is([dir=rtl] .accordion button) {
    text-align: right
}

.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px
}

:is([dir=ltr] .accordion button .icon) {
    right: 0
}

:is([dir=rtl] .accordion button .icon) {
    left: 0
}

.accordion button[aria-expanded=true] .icon {
    transform: rotate(90deg)
}

.accordion button[aria-expanded=true] + .accordion-content {
    max-height: 13em;
    opacity: 1;
    transition: all .2s linear;
    will-change: opacity, max-height
}

.accordion .accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .2s linear, max-height .2s linear;
    will-change: opacity, max-height
}

.accordion .accordion-content p {
    font-size: 1rem;
    font-weight: 300;
    margin: 2em 0
}

.active-1 .arrow-svg {
    fill: var(--color-teal) !important;
    transform: rotate(90deg)
}

.active-1 .acctive-item {
    color: var(--color-teal)
}

.active-menu--svg, .active-user--svg {
    fill: var(--color-teal) !important
}

.new-user:after {
    background-image: url(/images/new-user.png?cbbf402d083533467cf944a6d4797ded);
    background-position: 50%;
    background-size: cover;
    content: "";
    height: 35px;
    position: absolute;
    top: -10px;
    width: 35px
}

:is([dir=ltr] .new-user):after {
    left: -1.25rem
}

:is([dir=rtl] .new-user):after {
    right: -1.25rem
}

html.dark .btn-buy.active {
    background-color: #1f2937;
    color: var(--color-teal)
}

.btn-buy.active {
    background-color: #fff
}

.btn-buy.active, .btn-buy.active i {
    color: var(--color-teal)
}

.btn-sale.active {
    background: #1f2937;
    color: red
}

.btn-sale.active i {
    color: red
}

.tab-content {
    display: none;
    padding: 10px
}

.form {
    animation: fadeEffect 2s
}

@keyframes fadeEffect {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.tab-content.active {
    display: block
}

.switch-button {
    animation-direction: alternate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: online;
    animation-timing-function: linear
}

@keyframes online {
    0% {
        opacity: .5
    }
    to {
        opacity: 1
    }
}

html.dark .apexcharts-canvas line {
    stroke: #1f2937
}

.weblog-drop {
    display: none
}

.weblog:hover .weblog-drop {
    display: block !important
}

.official-drop {
    display: none
}

.official:hover .official-drop {
    display: block !important
}

:root {
    --color-primary: #44d4fd;
    --color-label: #a7a7a7;
    --color-default: #e2dede
}

.link-show--currency {
    background: #fff
}

html.dark .link-show--currency {
    background-image: linear-gradient(90deg, rgba(96, 53, 4, 0) -11.15%, #603504 95.38%) !important;
    background: initial !important
}

.lds-roller {
    display: inline-block;
    height: 50px;
    position: relative;
    transform: scale(.5);
    width: 50px
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    transform-origin: 40px 40px
}

.lds-roller div:after {
    background: var(--color-teal);
    border-radius: 50%;
    content: " ";
    display: block;
    height: 9px;
    margin: -4px 0 0 -4px;
    position: absolute;
    width: 9px
}

.lds-roller div:first-child {
    animation-delay: -36ms
}

.lds-roller div:first-child:after {
    left: 63px;
    top: 63px
}

.lds-roller div:nth-child(2) {
    animation-delay: -72ms
}

.lds-roller div:nth-child(2):after {
    left: 56px;
    top: 68px
}

.lds-roller div:nth-child(3) {
    animation-delay: -.108s
}

.lds-roller div:nth-child(3):after {
    left: 48px;
    top: 71px
}

.lds-roller div:nth-child(4) {
    animation-delay: -.144s
}

.lds-roller div:nth-child(4):after {
    left: 40px;
    top: 72px
}

.lds-roller div:nth-child(5) {
    animation-delay: -.18s
}

.lds-roller div:nth-child(5):after {
    left: 32px;
    top: 71px
}

.lds-roller div:nth-child(6) {
    animation-delay: -.216s
}

.lds-roller div:nth-child(6):after {
    left: 24px;
    top: 68px
}

.lds-roller div:nth-child(7) {
    animation-delay: -.252s
}

.lds-roller div:nth-child(7):after {
    left: 17px;
    top: 63px
}

.lds-roller div:nth-child(8) {
    animation-delay: -.288s
}

.lds-roller div:nth-child(8):after {
    left: 12px;
    top: 56px
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.copy-address:hover i, .qrcode-address:hover i {
    color: var(--color-teal) !important
}

.qrcode-address:hover .qrcode-address--wallet {
    display: block !important
}

.el-currency-name:hover small, .el-currency-name:hover span {
    color: var(--color-teal)
}

::-webkit-scrollbar {
    height: 3px;
    width: 5px
}

::-webkit-scrollbar-track {
    border-radius: 5px
}

::-webkit-scrollbar-thumb {
    border-radius: 5px
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
    background: var(--color-teal)
}

@media screen and (min-width: 1024px) {
    .steps-authen:after {
        border: 1px dashed var(--color-teal)
    }

    .steps-authen-1:after, .steps-authen:after {
        content: "";
        height: 2px;
        position: absolute;
        right: 34px;
        top: 12px;
        width: 83%
    }

    .steps-authen-1:after {
        border: 1px dashed var(--color-tealLight)
    }
}

@media screen and (min-width: 400px) {
    .form-upload-img {
        padding: 50px
    }
}

.sidebar-profile:hover > a > svg {
    fill: var(--color-teal) !important
}

.sidebar-profile.active {
    background-color: var(--color-tealLight);
    color: var(--color-teal)
}

.sidebar-profile.active > a > svg {
    fill: var(--color-teal) !important
}

.input-order-btc:after, .input-order-rial:after {
    background: #d1d5db;
    content: "";
    height: 30px;
    left: -12px;
    position: absolute;
    width: 1px
}

.input-order-btc:after {
    top: 0
}

@media screen and (max-width: 1024px) {
    #accordion-collapse-body-1, #accordion-collapse-body-2 {
        display: none
    }

    .header-menu--mobile {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 20
    }
}

.background-menu-mobile {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

:is(.dark .background-menu-mobile) {
    --tw-bg-opacity: 1;
    background-color: rgb(23 26 31/var(--tw-bg-opacity))
}

html.dark .accordion-menu svg {
    fill: #fff
}

.accordion-menu svg {
    fill: #000
}

html.dark .accordion-item button svg {
    fill: #fff
}

.accordion-item button svg {
    fill: #000
}

.accordion-interest:hover, .spna-interset i {
    color: var(--color-teal)
}

.accordion-interest.active, .spna-interset i {
    background-color: var(--color-tealLight);
    color: var(--color-teal)
}

html.dark .Two-factoridentification > li:after {
    color: #fff
}

.Two-factoridentification > li:after, html.dark .Two-factoridentification > li:after {
    content: attr(data-content);
    position: absolute;
    text-align: center;
    top: 25px;
    width: 100px
}

.Two-factoridentification > li:after {
    color: #000
}

html.dark .bg-refer {
    background: url(/images/top-shadow.png?e1ead6443692311d8b2738c9cdcfa156), linear-gradient(180deg, #3e3e43, #1b1b1e);
    background-repeat: no-repeat;
    height: 380px;
    width: 100%
}

.switch {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 47px
}

switch input[type=checkbox] {
    display: none;
    height: 0;
    opacity: 0;
    width: 0
}

.switch-check {
    background-color: #d3d5d9;
    border-radius: 12px;
    cursor: pointer;
    inset: 0;
    position: absolute;
    transition: .4s
}

.switch-check:before {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 15px;
    left: 3px;
    position: absolute;
    top: 2px;
    transition: .4s;
    width: 15px
}

.switch input:checked + .switch-check {
    background: var(--color-teal)
}

.switch input:checked + .switch-check:before {
    transform: translateX(26px)
}

#items-guides li a.active {
    background-color: var(--color-teal) !important;
    color: #fff
}

:is([dir=ltr] #items-guides li:last-child button) {
    margin-right: .75rem
}

:is([dir=rtl] #items-guides li:last-child button) {
    margin-left: .75rem
}

@media (min-width: 1024px) {
    :is([dir=ltr] #items-guides li:last-child button) {
        margin-right: 0
    }

    :is([dir=rtl] #items-guides li:last-child button) {
        margin-left: 0
    }
}

.content-tab-guide {
    animation: fadeEffectTab 1s
}

@keyframes fadeEffectTab {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@media screen and (min-width: 768px) {
    #sidebar-guide::-webkit-scrollbar {
        display: none;
        width: 3px
    }
}

html.dark .background-form-order {
    background: linear-gradient(142deg, #090a0a0d, #505866b3)
}

.background-form-order {
    background: var(--bg-teal)
}