.mobile-tab-bar-component {
    --bar-bg: var(--normal-900);
    --bar-text-color: var(--normal-400);
    --bar-text-color-active: var(--normal-100);
    --bar-middle-primary-bg: var(--primary-01);
    --bar-middle-primary-shadow: 0 8px 16px 0 color-mix(in srgb, var(--primary-04) 35%, transparent);
    --bar-middle-primary-icon: var(--normal-900);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--bar-bg);
    color: var(--bar-text-color);
    z-index: 999;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none
}

.mobile-tab-bar-component-active {
    color: var(--bar-text-color-active);
    position: relative;
    animation: scaleMove .5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.mobile-tab-bar-component-active:after {
    width: 70px;
    height: 70px;
    content: "";
    display: inline-block;
    background: var(--bar-text-color-active);
    opacity: 0;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -35px;
    animation: scaleActive .25s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.mobile-tab-bar-component-active svg {
    fill: var(--bar-text-color-active)
}

@keyframes scaleMove {
    0% {
        transform: scale(1)
    }

    12% {
        transform: scale(.95)
    }

    24% {
        transform: scale(.9)
    }

    36% {
        transform: scale(.95)
    }

    48% {
        transform: scale(1)
    }

    60% {
        transform: scale(1.05)
    }

    72% {
        transform: scale(1)
    }

    85% {
        transform: scale(.95)
    }

    to {
        transform: scale(1)
    }
}

.mobile-tab-bar-component .middleTopIcon {
    z-index: 3
}

.mobile-tab-bar-component .middleTopIcon.type1 {
    width: 76px;
    height: 76px;
    top: -45px
}

.mobile-tab-bar-component .middleTopIcon.type1:after,.mobile-tab-bar-component .middleTopIcon.type1:before {
    content: " ";
    position: absolute;
    width: 19px;
    height: 20px;
    top: 11px
}

.mobile-tab-bar-component .middleTopIcon.type1:after {
    left: -13px;
    background: radial-gradient(circle at -2.5% -2%,transparent 20px,var(--bar-bg) 20px)
}

.mobile-tab-bar-component .middleTopIcon.type1:before {
    right: -13px;
    background: radial-gradient(circle at 103.5% 0,transparent 20px,var(--bar-bg) 20px)
}

.mobile-tab-bar-component .middleTopIcon.type2 {
    width: 56px;
    height: 56px;
    top: -6px
}

.mobile-tab-bar-component .middleTopIcon.type2 .round_c {
    border: 4px solid var(--primary-02)
}

.mobile-tab-bar {
    --bar-bg: var(--normal-900);
    --bar-text-color: var(--normal-400);
    --bar-text-color-active: var(--normal-100);
    --bar-middle-primary-bg: var(--primary-01);
    --bar-middle-primary-shadow: 0 8px 16px 0 color-mix(in srgb, var(--primary-04) 35%, transparent);
    --bar-middle-primary-icon: var(--normal-900);
    z-index: 998;
    height: var(--mobile-tab-bar-height, 75px)
}

.mobile-tab-bar.bar-type3 .mobile-tab-bar-bg {
    position: relative;
    width: 100%;
    height: 100%
}

.mobile-tab-bar.bar-type3 .mobile-tab-bar-bg svg {
    transform: translate(-50%)
}

.mobile-tab-bar.bar-type3 .mobile-tab-bar-bg:after,.mobile-tab-bar.bar-type3 .mobile-tab-bar-bg:before {
    content: " ";
    position: absolute;
    width: 35%;
    height: 100%;
    background: var(--bar-bg);
    top: 0
}

.mobile-tab-bar.bar-type3 .mobile-tab-bar-bg:after {
    left: 0
}

.mobile-tab-bar.bar-type3 .mobile-tab-bar-bg:before {
    right: 0
}

.mobile-tab-bar.bar-type3 .mobile-tab-bar-component {
    background-color: transparent
}

.mobile-tab-bar.bar-type3 .type3 {
    top: -45px
}

.mobile-tab-bar .open .floatingBubble {
    box-shadow: 0 12px 16px #0a0a0a4d
}

.mobile-tab-bar .open .bubble3 {
    transform: translate(-50%) translate(69.28px,-40px)
}

.mobile-tab-bar .open .bubble2 {
    transform: translate(-50%) translate(27.71px,-75.88px)
}

.mobile-tab-bar .open .bubble1 {
    transform: translate(-50%) translate(-27.71px,-75.88px)
}

.mobile-tab-bar .open .bubble0 {
    transform: translate(-50%) translate(-69.28px,-40px)
}

.mobile-tab-bar .floatingBubble {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bar-bg);
    left: 50%;
    transform: translate(-50%);
    top: -45px;
    z-index: 2;
    transition: transform .3s ease
}

html[class~=LAYOUT-THEME-2] .mobile-tab-bar-component {
    --bar-bg: var(--Neutral-100);
    --bar-text-color: var(--Neutral-400);
    --bar-text-color-active: var(--Primary01-400);
    --bar-middle-primary-bg: var(--Primary01-400);
    --bar-middle-primary-shadow: 0 8px 16px 0 color-mix(in srgb, var(--Primary01-400) 35%, transparent);
    --bar-middle-primary-icon: var(--Auxiliary-ForeverWhite)
}

.ximage-component {
    background-size: 100%
}

.components-text {
    --text-default-color: var(--normal-100);
    color: var(--text-default-color);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    line-height: 18px
}

.components-text-white {
    color: var(--forever-white)
}

.components-text-gray {
    color: var(--normal-400)
}

.components-text-dark {
    color: var(--normal-500)
}

.components-text-welcome {
    font-size: 24px;
    line-height: 28.8px;
    font-weight: 700
}

.components-text-label {
    color: var(--normal-400)
}

.components-text-title {
    color: var(--normal-100);
    font-size: 16px
}

.components-text-tip {
    color: var(--normal-500)
}

.components-text-link {
    color: var(--success-01)
}

.components-text-linkLight,.components-text-primary {
    color: var(--primary-01)
}

.components-text-down {
    color: var(--color-down)
}

.components-text-up {
    color: var(--color-up)
}

.components-text-warning {
    color: var(--warning-01)
}

.components-text-danger {
    color: var(--danger-01)
}

.components-text-success {
    color: var(--success-01)
}

html[class~=LAYOUT-THEME-2] .components-text {
    --text-default-color: var(--Neutral-800)
}

html[class~=LAYOUT-THEME-2] .components-text-gray {
    color: var(--Gray-400)
}

.components-button-a {
    --background-color: var(--primary-01);
    --border-color: var(--primary-01);
    --text-color: var(--normal-100);
    --btn-border-radius: 12px;
    border-radius: var(--btn-border-radius);
    font-size: 14px;
    line-height: 21px;
    color: var(--text-color);
    font-weight: 600;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all
}

.components-button-a-color-primary {
    --background-color: var(--primaryButton-01);
    --border-color: var(--primaryButton-01);
    color: var(--normal-900)
}

.components-button-a-color-primary.adm-button-fill-outline {
    --border-color: var(--primary-01);
    color: var(--primary-01)
}

.components-button-a-color-primaryDisabled {
    font-size: 14px;
    --background-color: var(--primaryButton-03);
    --border-color: var(--primaryButton-03);
    color: var(--normal-900);
    opacity: 1
}

.components-button-a-color-primaryDailyDisabled {
    font-size: 14px;
    font-weight: 800;
    --background-color: var(--primary-03);
    --border-color: var(--primary-03);
    color: var(--normal-900);
    opacity: 1
}

.components-button-a-color-up {
    --background-color: var(--color-up);
    --border-color: var(--color-up);
    color: var(--forever-white);
    font-size: 16px;
    font-weight: 800
}

.components-button-a-color-down {
    --background-color: var(--color-down);
    --border-color: var(--color-down);
    color: var(--forever-white);
    font-size: 16px;
    font-weight: 800
}

.components-button-a-color-danger {
    --background-color: var(--danger-01);
    --border-color: var(--danger-01);
    color: var(--normal-100);
    font-size: 16px;
    font-weight: 800
}

.components-button-a-color-warning {
    --background-color: var(--warning-01);
    --border-color: var(--warning-01);
    color: var(--normal-900);
    font-size: 14px
}

.components-button-a-color-cancel {
    --background-color: var(--secondaryButton-01);
    --border-color: var(--secondaryButton-01);
    color: var(--normal-100);
    font-size: 14px
}

.components-button-a-color-disabled {
    --background-color: var(--normal-500);
    --border-color: var(--normal-500);
    color: var(--normal-900);
    font-size: 14px
}

.components-button-a-color-link {
    --background-color: var(--gradients-10);
    --border-color: var(--normal-500);
    color: var(--normal-900);
    font-size: 14px
}

.components-button-a-color-gray {
    --background-color: var(--normal-800);
    --border-color: var(--normal-700);
    color: var(--normal-100)
}

.adm-button {
    background-color: unset!important;
    background: var(--background-color)!important
}

.adm-button:not(.adm-button-default) {
    --text-color: var(--adm-color-text-light-solid);
    --background-color: var(--background-color);
    --border-color: var(--background-color)
}

.adm-button.adm-button-large {
    height: 48px;
    font-size: 14px!important
}

.adm-button-middle {
    height: 40px;
    font-size: 14px!important;
    line-height: 21px
}

.adm-button-small {
    height: 32px;
    font-size: 12px!important;
    line-height: 18px
}

.adm-button-mini {
    height: 20px;
    font-size: 10px!important;
    line-height: 15px;
    border-radius: 4px
}

html[class~=LAYOUT-THEME-2] .components-button-a {
    --background-color: var(--Primary01-100);
    --border-color: var(--Primary01-100);
    --text-color: var(--Neutral-100);
    --btn-border-radius: 40px;
    color: var(--text-color)
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-primary {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    --background-color: var(--Primary01-100);
    --border-color: var(--Primary01-100);
    color: var(--Neutral-100)
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-primary.adm-button-fill-outline {
    --border-color: var(--background-color);
    color: var(--background-color)
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-primaryDisabled {
    font-size: 14px;
    --background-color: var(--primaryButton-03);
    --border-color: var(--primaryButton-03);
    color: var(--normal-900);
    opacity: 1
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-primaryDailyDisabled {
    font-size: 14px;
    font-weight: 800;
    --background-color: var(--primary-03);
    --border-color: var(--primary-03);
    color: var(--normal-900);
    opacity: 1
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-up {
    --background-color: var(--color-up);
    --border-color: var(--color-up);
    color: var(--Auxiliary-ForeverWhite);
    font-size: 16px;
    font-weight: 800
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-down {
    --background-color: var(--color-down);
    --border-color: var(--color-down);
    color: var(--Auxiliary-ForeverWhite);
    font-size: 16px;
    font-weight: 800
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-danger {
    --background-color: var(--danger-01);
    --border-color: var(--danger-01);
    color: var(--normal-100);
    font-size: 16px;
    font-weight: 800
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-warning {
    --background-color: var(--warning-01);
    --border-color: var(--warning-01);
    color: var(--normal-900);
    font-size: 14px
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-cancel {
    --background-color: var(--secondaryButton-01);
    --border-color: var(--secondaryButton-01);
    color: var(--normal-100);
    font-size: 14px
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-disabled {
    --background-color: var(--normal-500);
    --border-color: var(--normal-500);
    color: var(--normal-900);
    font-size: 14px
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-link {
    --background-color: var(--gradients-10);
    --border-color: var(--normal-500);
    color: var(--normal-900);
    font-size: 14px
}

html[class~=LAYOUT-THEME-2] .components-button-a-color-gray {
    --background-color: var(--normal-800);
    --border-color: var(--normal-700);
    color: var(--normal-100)
}

html[class~=LAYOUT-THEME-2] .adm-button-middle {
    height: 40px;
    font-size: 16px!important;
    line-height: 24px;
    font-weight: 600
}

.custom-list-header.sortable .sort-up,.custom-list-header.sortable .sort-down {
    color: var(--normal-400)
}

.table-acomponent {
    --scrollbar-height: 4px;
    --item-line-padding-x: 8px;
    --item-line-padding-y: 4px
}

.table-acomponent table {
    border-spacing: 0
}

.table-acomponent table tr th {
    position: relative;
    padding: 0 var(--item-line-padding-x)
}

.table-acomponent table tr th:first-child {
    padding-left: 0
}

.table-acomponent table tr th:last-child {
    padding-right: 0
}

.table-acomponent table tr td:first-child {
    padding-left: 0
}

.table-acomponent table tr td:last-child {
    padding-right: 0
}

.table-acomponent table td {
    padding: var(--item-line-padding-y) var(--item-line-padding-x)
}

.table-acomponent table .rc-table-tbody {
    will-change: transform;
    transform: translateZ(0)
}

.table-acomponent .HomeList-table table {
    width: 100%!important
}

.table-acomponent-header-cell-sort-asc .table-sort-up {
    color: var(--primary-01)
}

.table-acomponent-header-cell-sort-asc .table-sort-down,.table-acomponent-header-cell-sort-desc .table-sort-up {
    color: var(--normal-600)
}

.table-acomponent-header-cell-sort-desc .table-sort-down {
    color: var(--primary-01)
}

.table-acomponent ::-webkit-scrollbar {
    display: block;
    height: var(--scrollbar-height)
}

.table-acomponent ::-webkit-scrollbar-thumb {
    background-color: var(--normal-500);
    border-radius: 100px;
    background-clip: content-box
}

.table-acomponent-infinite {
    width: 100%
}

.table-border-bottom tbody tr:first-child td:after {
    content: " ";
    display: none
}

.table-border-bottom tbody tr td:first-child:after,.table-border-bottom tbody tr td:nth-child(2):after {
    content: " ";
    display: none
}

.table-border-bottom tbody tr td {
    position: relative
}

.table-border-bottom tbody tr td:after {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    width: 84vw;
    background: var(--normal-700);
    z-index: 1
}

[dir=rtl] .table-border-bottom tbody tr td:after {
    right: auto;
    left: 0
}

[dir=rtl] .table-acomponent table tr th {
    position: relative;
    padding: 0 var(--item-line-padding-x)
}

[dir=rtl] .table-acomponent table tr th:first-child {
    padding-right: 0
}

[dir=rtl] .table-acomponent table tr th:last-child {
    padding-left: 0
}

[dir=rtl] .table-acomponent table tr td:first-child {
    padding-right: 0
}

[dir=rtl] .table-acomponent table tr td:last-child {
    padding-left: 0
}

[dir=rtl] .table-acomponent table tr .rc-table-cell-fix-right {
    left: 0!important
}

.custom-list {
    --header-item-padding-top: 5px;
    --header-item-padding-bottom: 12px;
    --header-item-padding-left: 0;
    --header-item-padding-right: 0;
    --cell-item-padding-top: 5px;
    --cell-item-padding-bottom: 12px;
    --cell-item-padding-left: 8px;
    --cell-item-padding-right: 8px;
    --col-gap: 12px;
    --row-gap: 0;
    display: flex;
    flex-direction: column;
    gap: var(--col-gap) var(--row-gap);
    width: 100%;
    overflow-x: auto
}

.custom-list-header {
    position: relative
}

.custom-list-header .header-title {
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
    color: var(--normal-400)
}

.custom-list-header.sortable .active {
    opacity: 1;
    color: var(--primary-01)
}

.custom-list-header.sortable .unActive {
    color: var(--normal-600)
}

.custom-list-cell {
    position: relative;
    padding: var(--cell-item-padding-top) var(--cell-item-padding-right) var(--cell-item-padding-bottom) var(--cell-item-padding-left)
}

.market-list-border .custom-list-cell:after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 56px;
    height: 1px;
    width: 100%;
    background-color: var(--normal-700)
}

html[class~=LAYOUT-THEME-2] .custom-list {
    --header-item-padding-top: 5px;
    --header-item-padding-bottom: 12px;
    --header-item-padding-left: 0;
    --header-item-padding-right: 0;
    --cell-item-padding-top: 12px;
    --cell-item-padding-bottom: 12px;
    --cell-item-padding-left: 12px;
    --cell-item-padding-right: 12px;
    --col-gap: 12px;
    --row-gap: 0
}

.adm-popup {
    --adm-color-background: var(--normal-900);
    --max-content-h: 66vh;
    --full-pop-bg: var(--normal-800)
}

.apopup-acomponent {
    border-radius: 24px 24px 0 0;
    box-sizing: border-box;
    padding-top: 24px;
    border-top: 1px solid var(--apopup-top-border-color);
    background: var(--adm-color-background)
}

.apopup-acomponent-tips,.apopup-acomponent-fun {
    --apopup-top-border-color: var(--primary-01)
}

.apopup-acomponent.transparent {
    background: transparent!important;
    border: none
}

.apopup-acomponent.full {
    border: none;
    border-radius: 0;
    padding-top: 0;
    top: 0;
    left: 0;
    background: var(--full-pop-bg)
}

.apopup-acomponent.full .content-wrap {
    box-sizing: border-box;
    max-height: calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-width: 100vw;
    height: 100%;
    width: 100%;
    overflow: auto
}

.apopup-acomponent.full .content-wrap .login-page {
    height: 100%;
    width: 100%
}

.apopup-acomponent.full:after {
    content: " ";
    display: none
}

.apopup-acomponent:after {
    content: " ";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%);
    width: 48px;
    height: 4px;
    border-radius: 12px;
    background: var(--normal-700)
}

.apopup-acomponent .popup-title {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: start;
    padding: 12px;
    align-items: center;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    z-index: 10;
    background: inherit
}

.apopup-acomponent .content-wrap {
    width: 100%;
    max-height: var(--max-content-h);
    overflow: auto;
    background: inherit
}

html[class~=LAYOUT-THEME-2] .adm-popup {
    --full-pop-bg: var(--Neutral-100);
    --adm-color-background: var(--Neutral-100);
    --page-background: var(--Neutral-100)
}

html[class~=LAYOUT-THEME-2] .adm-popup-body.notFull {
    padding-left: 12px;
    padding-right: 12px;
    background-color: transparent!important
}

html[class~=LAYOUT-THEME-2] .adm-popup-body.notFull .content-wrap {
    background: var(--adm-color-background);
    border-radius: 16px
}

html[class~=LAYOUT-THEME-2] .adm-popup-body.notFull .popup-title {
    background: var(--adm-color-background)
}

.tabs-acomponents-normal {
    --active-title-color: var(--primary-01);
    --active-line-color: var(--primary-01);
    --adm-color-border: var(--primary-01);
    --fixed-active-line-width: 16px;
    --active-line-height: 1px;
    --title-font-size: 14px;
    --tabs-tab-wrapper-padding-left: 12px;
    --tabs-tab-wrapper-padding-top: 4px;
    --tabs-tab-wrapper-padding-right: 12px;
    --tabs-tab-wrapper-padding-bottom: 4px
}

.tabs-acomponents-normal .adm-tabs-header {
    border-bottom: 1px solid var(--normal-700)
}

.tabs-acomponents-normal-noLine .adm-tabs-header {
    border-bottom: unset
}

.tabs-acomponents-normal-noLine .adm-tabs-tab-line {
    display: none
}

.tabs-acomponents-normal-noLine .adm-tabs-tab-wrapper {
    font-size: 16px
}

.tabs-acomponents-normal-segment .adm-tabs-header {
    border-bottom: unset
}

.tabs-acomponents-normal-segment .adm-tabs-tab-list {
    gap: 12px
}

.tabs-acomponents-capsule {
    --tab-color: var(--normal-100);
    --tab-color-active: var(--primary-01);
    --tab-bg: var(--normal-700);
    --tab-border: var(--normal-600);
    --tab-bg-active: var(--normal-700);
    --tab-border-active: var(--primary-01)
}

.tabs-acomponents-capsule .adm-capsule-tabs-header,.tabs-acomponents-capsule .adm-capsule-tabs-tab-wrapper {
    padding: unset;
    flex: unset
}

.tabs-acomponents-capsule .adm-capsule-tabs-tab-list {
    gap: 8px
}

.tabs-acomponents-capsule .adm-capsule-tabs-tab {
    border-radius: 8px;
    background: var(--tab-bg);
    border: 1px solid var(--tab-border);
    color: var(--tab-color);
    padding: 8px;
    font-size: 12px
}

.tabs-acomponents-capsule .adm-capsule-tabs-tab-active {
    color: var(--tab-color-active);
    border: 1px solid var(--tab-border-active)
}

.adm-tabs-tab-wrapper {
    padding: 0 var(--tabs-tab-wrapper-padding-right, 12px) 0 var(--tabs-tab-wrapper-padding-left, 12px)
}

.adm-tabs-tab {
    padding: var(--tabs-tab-wrapper-padding-top, 8px) 0 var(--tabs-tab-wrapper-padding-bottom, 10px)
}

.adm-image {
    display: flex;
    justify-content: center;
    align-items: center
}

.adm-image-tip {
    min-height: unset;
    min-width: unset;
    height: inherit;
    width: inherit
}

.adm-image-tip>svg {
    width: inherit;
    height: inherit
}

.adm-tabs-header-mask-left,.adm-scroll-mask-left {
    left: 0;
    background: transparent
}

.adm-tabs-header-mask-right,.adm-scroll-mask-right {
    right: 0;
    background: transparent
}

html[class~=LAYOUT-THEME-2] .tabs-acomponents-capsule {
    --tab-color: var(--Neutral-400);
    --tab-color-active: var(--Neutral-100);
    --tab-bg: var(--Functional-BG02);
    --tab-border: var(--Functional-BG02);
    --tab-bg-active: var(--Primary01-400);
    --tab-border-active: var(--Primary01-400)
}

html[class~=LAYOUT-THEME-2] .tabs-acomponents-capsule .adm-capsule-tabs-tab {
    border-radius: 9999px
}

html[class~=LAYOUT-THEME-2] .tabs-acomponents-capsule .adm-capsule-tabs-tab-list {
    gap: 12px
}

html[class~=LAYOUT-THEME-2] .tabs-acomponents-capsule .adm-capsule-tabs-tab-active {
    color: var(--tab-color-active);
    border: 1px solid var(--tab-border-active);
    background-color: var(--tab-bg-active)
}

.my_card_wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-size: cover;
    box-sizing: border-box
}

.my_card_title {
    padding: 16px;
    font-size: 16px;
    border-bottom: 1px solid #363636
}

.my_card_content {
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    font-size: 14px;
    align-items: center
}

.lottie-web.lottie-web-bg {
    background: var(--gradients-01)
}

.baseinput-component {
    --base-input-height: 40px;
    --base-input-bg: var(--normal-900);
    --base-input-padding-x: 8px;
    --base-input-padding-y: 0;
    --base-input-border-radius: 12px;
    --base-input-text-color: var(--normal-100);
    --base-input-placeholder-color: var(--normal-500);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.baseinput-component-inner {
    height: var(--base-input-height);
    background-color: var(--base-input-bg);
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--base-input-padding-y) var(--base-input-padding-x);
    border-radius: var(--base-input-border-radius);
    gap: 4px
}

.baseinput-component-inner-input {
    min-height: 18px;
    height: 18px;
    width: unset;
    flex: 1;
    --color: var(--base-input-text-color)
}

.baseinput-component-inner input {
    min-height: 18px;
    line-height: 18px;
    --placeholder-color: var(--base-input-placeholder-color)
}

html[class~=LAYOUT-THEME-2] .baseinput-component {
    --base-input-bg: var(--Functional-BG02);
    --base-input-text-color: var(--Neutral-400);
    --base-input-placeholder-color: var(--Neutral-400);
    --base-input-padding-x: 16px;
    --base-input-padding-y: 0;
    --base-input-border-radius: 100px
}

html[class~=LAYOUT-THEME-2] .baseinput-component-inner>div {
    flex-direction: row-reverse
}

.ainput-acomponent {
    --color: var(--normal-100);
    --font-size: 14px
}

.components-tagSelector {
    --tagSelector-text-color: var(--normal-100);
    --tagSelector-background-color: var(--normal-700);
    --tagSelector-border-color: var(--normal-600);
    --tagSelector-selected-color: var(--success-01);
    --tagSelector-column-gap: 4px;
    --tagSelector-row-gap: 12px;
    --tagSelector-radius: 8px;
    --tagSelector-padding-x: 6px;
    --tagSelector-padding-y: 6px;
    --tagSelector-minWidth: none;
    --tagSelector-height: unset;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    column-gap: var(--tagSelector-column-gap);
    row-gap: var(--tagSelector-row-gap)
}

.components-tagSelector-item {
    height: var(--tagSelector-height);
    padding-left: var(--tagSelector-padding-x);
    padding-right: var(--tagSelector-padding-x);
    padding-top: var(--tagSelector-padding-y);
    padding-bottom: var(--tagSelector-padding-y);
    border-radius: var(--tagSelector-radius);
    background-color: var(--tagSelector-background-color);
    color: var(--tagSelector-text-color);
    border: 1px solid var(--tagSelector-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--tagSelector-minWidth)
}

.components-tagSelector-item-selected {
    background-color: var(--tagSelector-selected-color);
    border: 1px solid var(--tagSelector-selected-color);
    color: var(--forever-white)
}

.components-tagSelector-item-circle {
    background-color: unset;
    border: 1px solid var(--tagSelector-selected-color);
    color: var(--tagSelector-selected-color)
}

.components-tagSelector-item.disabled {
    opacity: .35;
    pointer-events: none;
    user-select: none;
    cursor: not-allowed
}

.components-tagSelector-theme1 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.components-tagSelector-theme1 .tag-item {
    padding: 4px 16px;
    border-radius: 12px;
    background-color: #242424;
    color: #f5f5f5;
    font-size: 12px;
    transition: all .3s
}

.components-tagSelector-theme1 .tag-item.selected {
    background-color: #8dff40;
    color: #0a0a0a
}

.components-tagSelector-theme1 .tag-item.disabled {
    background-color: #ddd;
    color: #aaa;
    cursor: not-allowed
}

.mobile-infinite-scroll-refresh-component .rotating-circle {
    animation: rotate 2s cubic-bezier(.25,.1,.25,1) infinite
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

.select-components {
    --select-bg: var(--normal-800);
    --toggle-radius: 8px;
    position: relative
}

.select-components-toggle {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 4px 8px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    grid-gap: 4px;
    gap: 4px;
    height: inherit;
    border-radius: var(--toggle-radius);
    background: var(--select-bg)
}

.select-components-menu {
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding-top: 4px;
    padding-bottom: 4px;
    position: absolute;
    top: 104%;
    left: 0;
    z-index: 1000;
    grid-gap: 4px;
    gap: 4px;
    background: var(--select-bg);
    box-shadow: 0 4px 6px #0000001a
}

.select-components-menu-item {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 4px 8px;
    text-align: center;
    grid-gap: 4px;
    gap: 4px
}

.header-component {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 12px 12px 4px;
    width: 100%;
    color: var(--normal-100)
}

.header-component .header-component-left,.header-component .header-component-right,.header-component .header-component-title {
    word-break: break-all;
    font-size: 16px
}

.header-component-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.header-component-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    grid-gap: 16px;
    gap: 16px
}

.header-component-left-con {
    flex: 1
}

.header-component-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.header-component-col-2 .header-component-left {
    flex: 1
}

.header-component-col-3 {
    gap: 6px
}

.header-component-col-3 .header-component-left,.header-component-col-3 .header-component-right {
    max-width: 33%;
    min-width: 60px;
    flex: 1
}

.demo-mode-component {
    background-color: var(--warning-01);
    color: var(--normal-900);
    font-size: 12px;
    line-height: 24px;
    height: 24px;
    text-align: center;
    margin-bottom: 12px;
    animation: blink-twice 2s ease-in-out 1
}

@keyframes blink-twice {
    0%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

#chartIqII-Iframe {
    will-change: transform;
    transform: translateZ(0)
}

.chart-right-bottom-btn {
    right: 8px
}

[dir=rtl] .chart-right-bottom-btn {
    left: 8px
}

.ChartTypeListTag-component {
    --ChartTypeListTag-active-color: var(--primary-01)
}

.ChartTypeListTag-component-item-content {
    width: 60px;
    height: 60px
}

.ChartTypeListTag-component-item-active .ChartTypeListTag-component-item-content {
    border: 1px solid var(--ChartTypeListTag-active-color)
}

.ChartTypeListTag-component-item-active .ChartTypeListTag-component-item-text {
    color: var(--ChartTypeListTag-active-color)
}

.aswitch-acomponent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 4px;
    padding-bottom: 4px;
    grid-gap: 0px;
    gap: 0px;
    --aswitch-label-color: var(--normal-100);
    --aswitch-box-radius: 4px;
    --aswitch-box-width: 36px;
    --aswitch-box-height: 20px;
    --aswitch-handle-radius: 2px;
    --aswitch-handle-height: 12px;
    --aswitch-handle-width: 12px;
    --aswitch-unchecked-color: var(--normal-500)
}

.aswitch-acomponent.right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aswitch-acomponent-label {
    color: var(--aswitch-label-color);
    cursor: pointer
}

.aswitch-acomponent-switch {
    background: var(--aswitch-unchecked-color);
    --checked-color: var(--success-01);
    --width: var(--aswitch-box-width);
    --height: var(--aswitch-box-height);
    border-radius: var(--aswitch-box-radius);
    overflow: hidden
}

.aswitch-acomponent-switch .adm-switch-checkbox {
    border-radius: var(--aswitch-box-radius)
}

.aswitch-acomponent-switch .adm-switch-checkbox:before {
    background: unset
}

.aswitch-acomponent-switch .adm-switch-handle {
    border-radius: var(--aswitch-handle-radius);
    width: var(--aswitch-handle-width);
    height: var(--aswitch-handle-height);
    box-shadow: unset;
    top: calc((var(--aswitch-box-height) - var(--aswitch-handle-height)) / 2);
    left: calc((var(--aswitch-box-height) - var(--aswitch-handle-height)) / 2)
}

.aswitch-acomponent-switch.adm-switch-checked .adm-switch-handle {
    right: calc((var(--aswitch-box-height) - var(--aswitch-handle-height)) / 2);
    left: unset
}

.login-popup-component-popup {
    transition: transform .5s ease-in-out
}

.login-popup-component-popup.slide-in {
    transform: translate(100%)
}

.login-popup-component-popup:not(.slide-in) {
    transform: translate(0)
}

.login-top-component {
    width: 100%;
    overflow: hidden
}

@keyframes zoom {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

.login-top-component .animate-zoom {
    animation: zoom 10s ease-in-out infinite
}

.login-top-component .animate-zoom:before {
    content: " ";
    z-index: 1;
    background: linear-gradient(180deg,rgba(249,250,251,0) 40%,var(--normal-800) 98%);
    position: absolute;
    inset: 0 0 -2px
}

html[class^=DARK-] .login-top-component .animate-zoom:before {
    background: linear-gradient(180deg,rgba(18,18,18,0) 40%,var(--normal-800) 98%)
}

.input-component-label-left-btn {
    color: var(--warning-01);
    font-size: 12px
}

.input-component-box-btn {
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 600;
    height: 24px;
    font-size: 12px;
    line-height: 1;
    padding-left: 12px;
    padding-right: 12px;
    background: var(--gradients-02);
    color: var(--normal-900)
}

.input-component-box-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    height: 20px;
    padding-right: 12px;
    grid-gap: 8px;
    gap: 8px;
    padding-left: var(--email-input-gap);
    border-right: 1px solid var(--border-color-area)
}

.input-component-box-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    height: 20px;
    padding-right: 12px;
    grid-gap: 8px;
    gap: 8px;
    padding-left: var(--password-input-gap);
    border-right: 1px solid var(--border-color-area)
}

.input-component-box .password-input {
    padding: 0 var(--input-gap)!important
}

.input-component-box-area {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    height: 20px;
    padding-right: 12px;
    grid-gap: 8px;
    gap: 8px;
    border-right: 1px solid var(--border-color-area)
}

.input-component .phone-box {
    padding: 0 var(--input-gap)!important
}

.input-component-tips {
    color: var(--danger-01, #F13005);
    font-size: 10px;
    font-weight: 600;
    line-height: 150%;
    margin: 4px 16px 0
}

.countries-list {
    --svg-icon-width: 34px;
    --svg-icon-height: 24px;
    --countries-list-item-padding: 8px
}

.countries-list-item {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: var(--countries-list-item-padding) 0
}

.countries-list-item .countries-icon>svg {
    border-radius: 2px;
    overflow: hidden;
    width: var(--svg-icon-width, 34px);
    height: var(--svg-icon-height, 24px)
}

.three-party-login-component-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    grid-gap: 12px;
    gap: 12px;
    margin: var(--from-item-gap) 0
}

.three-party-login-component-list>div {
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--normal-700, #242424);
    background: var(--normal-800, #121212)
}

.input-component-label {
    font-weight: 600;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--normal-400);
    padding: 0 var(--input-gap);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.input-component-label-btn {
    color: var(--warning-01)
}

.input-component-box-btn {
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-weight: 600;
    height: 24px;
    font-size: 12px;
    line-height: 1;
    padding-left: 12px;
    padding-right: 12px;
    background: var(--gradients-02);
    color: var(--normal-900)
}

.input-component-box-btn-active {
    background: var(--gradients-01);
    color: var(--normal-100)
}

.input-component {
    --border-color-area: var(--normal-700)
}

.input-component-label {
    font-weight: 600;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--normal-400);
    padding: 0 var(--input-gap)
}

.input-component-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 48px;
    background-color: var(--normal-900);
    border-radius: 12px;
    padding-right: var(--input-gap)
}

.input-component-box-input {
    --font-size: 14px;
    --placeholder-color: var(--normal-500);
    padding: 0 0 0 var(--input-gap);
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%
}

.input-component-inside {
    background-color: var(--normal-900);
    border-radius: 12px
}

.input-component-inside .input-component-label {
    margin-bottom: 6px;
    padding-top: 12px
}

.input-component-inside .input-component-box {
    height: 42px;
    padding-bottom: 2px
}

.input-component .hasBorder {
    border-radius: 12px;
    border: 1px solid var(--normal-500)
}

.input-component-box-input .adm-text-area-element {
    color: var(--normal-100)
}

.custom-number-keyboard {
    --page-tr-background: var(--page-background);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%
}

.custom-number-keyboard .keyboard-keys {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column
}

.custom-number-keyboard .keyboard-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.custom-number-keyboard .keyboard-key {
    border-style: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    text-align: center;
    background: var(--page-tr-background);
    color: var(--normal-100);
    height: 50px;
    font-size: 24px;
    font-weight: 700;
    border: 1px solid var(--page-tr-background)
}

.custom-number-keyboard .keyboard-key:active {
    border-radius: 12px;
    border: 1px solid var(--normal-700);
    background: var(--gradients-06, linear-gradient(276deg, #2ed573 44.33%, #7bed9f 98.56%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.custom-number-keyboard .keyboard-key:active>svg {
    --icon-color: #2ed573
}

.custom-number-keyboard .keyboard-close-button {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity));
    width: 100%;
    background: #007bff;
    border: none
}

.custom-number-keyboard .keyboard-close-button:active {
    background: #0056b3
}

.custom-pass-code-input-component {
    margin-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px
}

.custom-pass-code-input-component .custom-pass-code-input-label {
    font-weight: 600;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--normal-400);
    padding: 0 var(--input-gap);
    line-height: 18px
}

.custom-pass-code-input-component .pass-code-box-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    grid-gap: 8px;
    gap: 8px
}

.custom-pass-code-input-component .passcode-box {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
    border: 1px solid var(--normal-700);
    border-radius: 12px;
    background-color: var(--normal-900);
    transition: all .3s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.custom-pass-code-input-component .passcode-box.active {
    border-color: var(--primary-01);
    color: var(--primary-01);
    transform: scale(1)
}

.custom-pass-code-input-component .passcode-box.active:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 2px;
    height: 50%;
    background-color: var(--primary-01);
    animation: blink 1s infinite
}

.custom-pass-code-input-component .passcode-box.error {
    animation: shake .5s ease;
    border-color: var(--danger-01);
    color: var(--danger-01)
}

@keyframes shake {
    0%,to {
        transform: translate(0)
    }

    25%,75% {
        transform: translate(-4px)
    }

    50% {
        transform: translate(4px)
    }
}

@keyframes blink {
    0%,50% {
        opacity: 1
    }

    51%,to {
        opacity: 0
    }
}

.glob-loading-component {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #32333359;
    backdrop-filter: blur(1px);
    z-index: 99999
}

.glob-loading-component-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.domPurify img {
    max-width: 100%
}

.global-toast-component {
    --toastify-color-light: rgba(238, 241, 242, .9);
    --toastify-color-dark: rgba(36, 36, 36, .9);
    --toastify-radius: 12px;
    --toastify-toast-shadow: 0px 4px 8px 0px rgba(0, 0, 0, .5);
    --toastify-text-color-dark: var(--normal-100);
    --toastify-text-color-light: var(--normal-100);
    --toastify-toast-padding: 12px 52px 12px 16px;
    --toastify-toast-icon-size: 28px;
    --toastify-toast-close-button-icon-size: 20px
}

.global-toast-component .Toastify__toast {
    border-radius: var(--toastify-radius);
    align-items: flex-start;
    font-size: 12px;
    gap: 16px
}

.global-toast-component .Toastify__toast-icon {
    margin-inline-end:0;width: var(--toastify-toast-icon-size);
    height: var(--toastify-toast-icon-size)
}

.global-toast-component .Toastify__close-button {
    top: 12px;
    right: 16px
}

.global-toast-component .Toastify__close-button>svg {
    width: var(--toastify-toast-close-button-icon-size);
    height: var(--toastify-toast-close-button-icon-size);
    fill: var(--normal-100)
}

@media only screen and (max-width: 480px) {
    .global-toast-component .Toastify__toast {
        margin-bottom:8px
    }

    .global-toast-component .Toastify__toast-container {
        width: 91.46vw;
        left: env(safe-area-inset-left);
        margin: 0
    }

    .global-toast-component .Toastify__toast-container--top-center {
        top: var(--toastify-toast-top);
        left: 50%;
        transform: translate(-50%);
        align-items: center
    }
}

.captcha-component-component {
    position: fixed;
    top: 50%;
    left: 50%;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-rotate: 0;
    --tw-rotate-x: 0;
    --tw-rotate-y: 0;
    --tw-rotate-z: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
    -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
    transform: translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotate(var(--tw-rotate-z)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    z-index: 2000;
    --captcha-bg: var(--normal-900, #1A1A1A);
    --captcha-border: var(--normal-600, #363636);
    --captcha-tip-color: var(--normal-100, #FFFFFF);
    --captcha-move-btn-bg: var(--gradients-02, linear-gradient(90deg, #31B4ED .01%, #53EAD6 100%));
    --captcha-track-mask-bg: var(--normal-700, #EEF1F2);
    --captcha-move-track-mask-bg: linear-gradient(90deg, rgba(49, 180, 237, .3) .01%, rgba(83, 234, 214, .3) 100%)
}

.captcha-component-component #tianai-captcha-parent {
    border-radius: 12px;
    padding: 16px 12px;
    height: auto;
    border: 1px solid var(--captcha-border);
    box-shadow: 0 4px 8px #00000080
}

.captcha-component-component #tianai-captcha-parent #tianai-captcha-box {
    min-height: 290px;
    height: auto
}

.captcha-component-component #tianai-captcha-parent #tianai-captcha-bg-img {
    background-color: var(--captcha-bg)
}

.captcha-component-component #tianai-captcha.tianai-captcha-slider .slider-tip {
    color: var(--captcha-tip-color);
    font-size: 16px;
    margin-bottom: 8px
}

.captcha-component-component #tianai-captcha .content .tianai-captcha-tips {
    color: var(--captcha-bg);
    font-size: 14px
}

.captcha-component-component #tianai-captcha.tianai-captcha-slider .slider-move .slider-move-btn {
    border-radius: 12px;
    background-image: var(--captcha-move-btn-bg)!important
}

.captcha-component-component #tianai-captcha.tianai-captcha-slider .slider-move .slider-move-btn:after {
    position: absolute;
    top: 50%;
    left: 50%;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-rotate: 0;
    --tw-rotate-x: 0;
    --tw-rotate-y: 0;
    --tw-rotate-z: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
    -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
    transform: translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotate(var(--tw-rotate-z)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M7 19.8333L12.8333 14L7 8.16666" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /><path d="M15.1667 19.8333L21 14L15.1667 8.16666" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    background-size: cover
}

.captcha-component-component #tianai-captcha.tianai-captcha-slider .slider-move {
    height: 36px;
    margin: 12px 0
}

.captcha-component-component #tianai-captcha.tianai-captcha-slider .slider-move-track,.captcha-component-component #tianai-captcha-parent #tianai-captcha-slider-move-track-mask {
    background: var(--captcha-track-mask-bg);
    border-radius: 8px;
    border: none;
    height: 36px
}

.captcha-component-component #tianai-captcha-parent #tianai-captcha-slider-move-track-mask {
    background: var(--captcha-move-track-mask-bg);
    border-radius: 0
}

.captcha-component-component #tianai-captcha-parent .slider-move-shadow {
    background-color: var(--captcha-bg);
    box-shadow: 1px 1px 1px var(--captcha-bg)
}

.app-download-component {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 64px;
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50
}

.app-download-component-bg {
    background: url(../img/CA-YnO44.webp) center / cover no-repeat
}

html[class^=DARK-] .app-download-component-bg {
    background: url(../img/BpnNAogU.webp) center / cover no-repeat
}

.customer-component {
    position: fixed;
    right: 16px;
    bottom: 80px;
    width: 48px;
    height: 48px;
    z-index: 1000
}

.successful-page-component {
    height: 100%;
    overflow: auto;
    padding: 12px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 998;
    background: var(--page-background)
}

.successful-page-component-lottie {
    margin-bottom: 12px
}

.successful-page-component-title {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 12px
}

.successful-page-component-describe {
    margin-bottom: 20px;
    color: var(--normal-400);
    font-size: 12px
}

.successful-page-component-button {
    height: 48px
}

.currency-icon-show-component {
    --img-size: 88px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 157px;
    position: relative;
    width: 100%
}

.currency-icon-show-component-bg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: url(../img/DEBcy-tY.webp) no-repeat center;
    background-size: cover;
    transform-style: preserve-3d;
    transition: transform .2s ease-out;
    transform: translateZ(-25px);
    backface-visibility: hidden;
    -webkit-transform: translateZ(-25px);
    -webkit-backface-visibility: hidden
}

.currency-icon-show-component-icon {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform .1s ease-out;
    transform: translateZ(25px);
    backface-visibility: hidden;
    -webkit-transform: translateZ(25px);
    -webkit-backface-visibility: hidden;
    top: calc(50% - (var(--img-size) / 2));
    left: calc(50% - (var(--img-size) / 2));
    border-radius: 32px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
    box-shadow: 0 4px 8px #00000040
}