*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* tachyons */
.sh--22 { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); }
.w--521 { width: 32.5625rem; }
.max--w--172 { max-width: 10.75rem; }
.mh--538 { min-height: 33.625rem; }
.col--grey-800 { color: var(--Gray-800, #182230); }
.col--white--brand--25 { color: #FCFAFF; }
.br--col--ebony--variation-2 { border-color: var(--color-ebony-2, #0C111D); }
.pad--top--12 { padding-top: 0.75rem; }

/* popup-container */
.elm_qJBugX[data-token-popup-container]{
    overflow: visible;
}

/* Loader */
[data-tip-sending-loader]{
    background: rgba(0, 0, 0, 0.30);
    z-index: 9;
}
[data-tip-sending-loader] [data-loader]{
    height: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-tip-sending-loader] [data-loader] div.w-100{
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(10px);
    padding: 1.25rem !important;
    width: auto !important;
}
[data-tip-sending-loader] [data-loader] svg{
    width: 7.5rem;
    height: 7.5rem;
}

/* popup-close-icon */
[data-token-popup-close-icon]{
    top: -1.5rem;
    right: -1.5rem;
}

[data-token-popup-close-icon] svg path{
    filter: drop-shadow(0px 0px 8px #00000080);
}

/* popup - left-column */
[data-token-popup-left-column]{
    background-image: url("./images/popup-bg.png");
    background-position: -195px 0;
}

[data-token-popup-left-column] [data-tip-creator-tip-message]{
    word-break: break-all;
}

textarea[token-add-message-input] {
    width: 100%;
    height: 40px;
  }

[data-left-column-overlay-container]{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); 
}

/* popup - right-column */
[data-token-popup-right-column]{
    /* max-height: 42.1875rem; */
    /* height: 35.75rem !important; */
    max-height: 35.75rem !important;
    overflow: auto;
    padding-bottom: 3rem;
}

/* popup - right bottom fixed button */
[data-tip-buttons]{
    position: fixed;
    right: 0;
    bottom: 0;
}

/* payout-biling-form elements */
[data-checkout-payment-card]{
    min-height: 277px;
    background: url("./images/card-bg.png"), #1D1D1D;
    background-size: cover;
    border: 1px solid rgba(251, 251, 251, 0.37);
}

/* checkbox-styles copied from dashboard page */
[data-form-input-type=checkbox] input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin-right: 4px;
}

[data-form-input-type=checkbox][data-form-accent-color=green] input[type=checkbox] {
    background: transparent;
    border: solid 1px var(--color-Mischka, #d0d5dd);
    border-radius: 4px;
}

[data-form-input-type=checkbox][data-form-accent-color=green] input[type=checkbox]:checked {
    accent-color: var(--color-brand-green, #07f468);
    background-color: var(--color-brand-green, #07f468);
    border-color: var(--color-brand-green, #07f468);
}

[data-active-tip-type="token"] [data-tab-button="token"] [data-tab-button-text],
[data-active-tip-type="cash"] [data-tab-button="cash"] [data-tab-button-text]{
    color: var(--color-led-pink, #FF0066);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    margin-inline: auto;
    width: 0.27rem;
    height: 0.55rem;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

[data-checkout-payment-card] input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]),
[data-checkout-payment-card] input[type="text"]{
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5rem;
    color: #F9FAFB;
}

[data-billing-address-container] input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]),
[data-billing-address-container] input[type="text"]{
    font-size: 1rem;
    line-height: 1.5rem;
    color: #0C111D;
    background-color: #FFFFFF59;
    box-shadow: 0px 1px 2px 0px #1018280D;
    border-radius: 0 !important;
}
[data-billing-address-container] input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"])::placeholder,
[data-billing-address-container] input[type="text"]::placeholder{
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5rem;
    color: #667085;
}

[data-token-popup-close-icon]{
    z-index: 99;
    overflow: hidden;
    backdrop-filter: none;
    background: transparent;
}
[data-token-popup-close-icon]:after{
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.30);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* nice-select style override */
[token-topup-select-dropdown] .nice-select.v1{
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #0C111D;
    background-color: #FFFFFF59;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: 0px 1px 2px 0px #1018280D;
}

[token-topup-select-dropdown] .nice-select.v1 .multiple-options{
    flex: 1 0 0;
    height: 100%;
}

[token-topup-select-dropdown] .nice-select.v1 .current{
    height: 100%;
    padding: 0 .75rem;
}

/* topup amount table section */
[data-topup-amount-table-section]{
    margin-top: auto;
    position: relative;
}
[data-topup-amount-table-section]:after{
    content: '';
    width: 100%;
    height: 33%;
    background: hsla(0, 0%, 100%, .5);
    position: absolute;
    left: 0;
    top: 100%;
}
.token--popup-billing--email .checkout-guest-as-logged-in-wrapper .white{
    color: var(--Gray-700, #344054);
}
.token--popup-billing--email .checkout-guest-as-logged-in-wrapper .white + div,
.token--popup-billing--email .checkout-guest-as-logged-in-wrapper .guest-logout-button [data-logout-text]{
    color: #fff !important;
    color: var(--Gray-700, #344054)!important;
}
.token--popup-billing--email [data-logout-text] svg{
    filter: brightness(0);
}
.token--popup-billing--email .checkout-guest-as-logged-in-wrapper .guest-logout-button [data-logout-text] svg path{
    stroke: #fff !important;
}

/* discount (% off) tag */
[data-token-tip-discount-tag]{
    background: linear-gradient(90deg, #37FFD7 0%, #07F468 100%);
}

/* footer topup-button */
[data-token-topup-button-container]{
    height: 3.5rem;
    box-shadow: 0px 0px 16px 0px #FFFFFF80;
}

[data-token-topup-button]::before{
    position: absolute;
    top: 0;
    left: -0.75rem;
    content: '';
    display: block;
    width: 2rem;
    height: 100%;
    background-color: #FF0066;
    z-index: -1;
    -webkit-transform: skew(163deg, 0) translateX(3px);
    transform: skew(163deg, 0) translateX(3px);
    -webkit-backdrop-filter: blur(100px); 
    backdrop-filter: blur(100px);
    -webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
    box-shadow: -12px 0px 16px 0px #ffffff40;
}

button[data-token-topup-button]:hover{
    background-color: white;
}

button[data-token-topup-button]:hover::before{
    background-color: white;
}

button[data-token-topup-button]:not(:disabled):hover svg path{
    stroke: #FF0066;
}

button[data-token-topup-button]:not(:disabled):hover span{
    color: #FF0066;
}

button[data-token-tip-button]:not(:disabled).insufficient-balance,
button[data-token-tip-button]:not(:disabled).insufficient-balance:before{
    background: #F06;
}
button[data-token-tip-button]:not(:disabled).insufficient-balance [data-tip-button-main-text],
button[data-token-tip-button]:not(:disabled).insufficient-balance [data-tip-button-extra-text]{
    color: var(--Base-White, #FFF);
}
button[data-token-tip-button]:not(:disabled).insufficient-balance svg path{
    stroke: var(--Base-White, #FFF);
}
[data-enter-topup-amount-section] input[data-tip-amount-input].error{
    color: var(--brand-pink-2, #F06) !important;
}

/* button-disabled */
[data-token-tip-button]:disabled,
[data-token-topup-button]:disabled{
    background-color: #98A2B3;
    pointer-events: none;
}

button[data-token-tip-button].insufficient-balance[data-tip-disabled="true"],
button[data-token-tip-button].insufficient-balance[data-tip-disabled="true"]:before,
button[data-token-tip-button].insufficient-balance[data-tip-disabled="true"]:hover{
    background-color: #98A2B3 !important;
    pointer-events: none !important;
}

[data-token-tip-button]:disabled::before,
[data-token-topup-button]:disabled::before{
    background-color: #98A2B3;
}

button[data-token-tip-button]:disabled:hover svg path,
button[data-token-tip-button]:disabled:hover span,
button[data-token-topup-button]:disabled:hover svg path,
button[data-token-topup-button]:disabled:hover span{
    stroke: #98A2B3;
    color: #98A2B3;
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: center;
    }

    [data-token-popup] [data-token-popup-container] [data-token-popup-left-column]{
        width: 31.688rem;
        max-width: 31.688rem;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    [data-token-popup-right-column] {
        max-height: unset;
        overflow: unset;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    [data-token-popup] [data-token-popup-container] [data-token-popup-left-column]{
        width: 100%;
    }
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }
    [data-token-popup] .elm_yNwqwJ{
        border-radius: 0 !important;
    }
    [data-token-popup] .elm_yNwqwJ{
        padding: 0;
    }
    [data-token-popup] .elm_yNwqwJ [data-token-popup-container]{
        width: 100%;
    }
    [data-token-popup] .elm_yNwqwJ [data-token-popup-container] [data-token-popup-left-column],
    [data-token-popup] .elm_yNwqwJ [data-token-popup-container] [data-token-popup-right-column]{
        max-width: none;
    }
    [data-token-popup],
    [data-token-popup] .elm_yNwqwJ,
    [data-token-popup] [data-token-popup-container],
    [data-token-popup] [data-left-right-col-wrapper]{
        max-height: 100dvh;
        overflow: hidden;
    }
    [data-token-popup] [data-left-right-col-wrapper]{
        overflow-y: auto;
    }
    [data-token-popup-right-column]{
        overflow: visible !important;
    }
    [data-token-popup-left-column]{
        background-position: 0 !important;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    [data-token-popup-back-icon]{
        top: .5rem;
        left: .5rem;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    [data-checkout-payment-card]{
        width: 100%;
        max-width: 29.6875rem;
        margin: 0 auto;
    }

    /* tip button */
    [data-token-topup-button-container]{
        height: 2.75rem;
    }

    [data-token-topup-button]{
        height: 2.75rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 480px){
    [data-token-popup] [data-tip-sending-loader]{
        width: 100% !important;
    }
    [data-token-popup] [data-portrait-mobile-responsive-navbar]{
        display: none;
    }
    [data-token-popup] .wpwl-group-cardNumber, [data-token-popup] .wpwl-group-cardHolder{
        width: 60% !important;
    }
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        /* background-size: 250%;
        background-position-x: -95px; */
    }

    [data-token-popup-right-column]{
        min-height: unset;
    }

    [data-checkout-payment-card] {
        width: 100%;
        min-height: 13.0625rem;
    }

    [data-checkout-payment-card-inner-wrapper]{
        padding: 1.25rem 1rem;
    }

    [data-checkout-payment-card] [data-input-wrapper]{
        height: 2.25rem;
    }

    [data-topup-amount-table-section]{
        padding-bottom: 0;
        /* padding-bottom: 3.25rem; */
    }

    [data-token-topup-button-wrapper-desktop]{
        display: none;
    }

    [data-token-topup-button-wrapper-mobile]{
        position: fixed !important;
        display: flex;
        z-index: 100000;
    }

    [data-portrait-mobile-responsive-navbar]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    [data-portrait-mobile-responsive-navbar][data-page-scrolling]{
        backdrop-filter: blur(400px);
        background: linear-gradient(180deg, rgba(240, 240, 240, 0.5) 0%, rgba(240, 240, 240, 0.375) 100%);
        transition: all .3s linear;
    }

    [data-token-popup-container] {
        overflow-y: auto !important;
        max-height: 100vh;
    }
}
/* popup - right-column */
[data-token-popup-right-column]{
    min-height: 35.75rem;
}

/* tip-alert-wrapper */
[data-tip-alert-wrapper]{
    background-color: #242424;
    border-bottom: 0.5px solid #344054;
}

[data-tip-alert-container]{
    border-left: 3px solid #FF4405;
    background: linear-gradient(0deg, rgba(255, 68, 5, 0.3), rgba(255, 68, 5, 0.3)), linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

[data-tip-alert-container]::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

[data-payment-information-wrapper]{
    background: #FFFFFF59;
    border: 1px solid #EAECF080;
}
[data-payment-information-wrapper] [data-payment-method-edit-container]{
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: 2.5rem !important;
}

[data-payment-information-wrapper] [data-payment-method-edit-container] [data-payment-last4]{
    background: transparent;
    -webkit-text-fill-color: var(--color-oxford-blue, #344054);
}
[data-payment-information-wrapper] [data-delete-card] svg path{
    stroke: #667085;
}
[data-tip-payment-card] [data-bs-trigger-label]{
    color: var(--color-oxford-blue, #344054) !important;
}
[data-tip-payment-card] [data-bs-trigger-label] + img
{
    filter: brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(425%) hue-rotate(183deg) brightness(90%) contrast(85%);
}

[data-token-topup-button]::before{
    position: absolute;
    top: 0;
    left: -0.75rem;
    content: '';
    display: block;
    width: 2rem;
    height: 100%;
    background-color: #07F468;
    z-index: -1;
    -webkit-transform: skew(163deg, 0) translateX(3px);
    transform: skew(163deg, 0) translateX(3px);
    -webkit-backdrop-filter: blur(100px); 
    backdrop-filter: blur(100px);
    -webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
    box-shadow: -12px 0px 16px 0px #ffffff40;
}

button[data-token-topup-button]:hover{
    background-color: black;
}

button[data-token-topup-button]:hover::before{
    background-color: black;
}

button[data-token-topup-button]:not(:disabled):hover svg path{
    stroke: #07F468;
}

button[data-token-topup-button]:not(:disabled):hover span{
    color: #07F468;
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    [data-tip-alert-wrapper]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    [data-token-popup-back-icon]{
        top: .5rem;
        left: .5rem;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    /* alert-container-mobile */
    [data-tip-alert-wrapper-mobile]{
        width: calc(100% - 1rem);
        top: .5rem;
        left: .5rem;
    }

    /* tip button */
    [data-token-topup-button-container]{
        height: 2.75rem;
    }

    [data-token-topup-button]{
        height: 2.75rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 480px){
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        background-size: 250%;
        background-position-x: -95px;
    }

    [data-token-popup-right-column]{
        min-height: unset;
    }

    [data-topup-amount-table-section]{
        padding-bottom: 3.25rem;
    }

    [data-token-topup-button-wrapper-desktop]{
        display: none;
    }

    [data-token-topup-button-wrapper-mobile]{
        position: fixed !important;
        display: flex;
        z-index: 100000;
    }

    [data-portrait-mobile-responsive-navbar]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    [data-portrait-mobile-responsive-navbar][data-page-scrolling]{
        backdrop-filter: blur(400px);
        background: linear-gradient(180deg, rgba(240, 240, 240, 0.5) 0%, rgba(240, 240, 240, 0.375) 100%);
        transition: all .3s linear;
    }

    [data-token-popup-container] {
        overflow-y: auto !important;
        max-height: 100vh;
    }
}
.token-tip-step-2c-payment-1-5 { background: #44444480; }
.token-cash-step-2b-payment-2-41 { background: #44444480; }
.token-tip-step-2b-top-up-amount-3-52 { background: #8E8E8E; }
.token-cash-step-3-tip-success-cash-31 { background-image: url('./images/popup-bg.png'); }
.token-tip-step-3-tip-success-final-48 { background-image: url('./images/popup-bg.png'); }
.token-cash-step-1-22 { background-color: #44444480; }
.token-tip-step-2b-top-up-amount-1-7 { background-color: #44444480 }
.token-cash-step-3-tip-success-cash-29 { background-color: #949494; }
.token-cash-step-3-tip-success-final-24 { background-color: #949494; }
/* popup - right-column */

/* tip-alert-wrapper */
[data-tip-alert-wrapper]{
    background-color: #242424;
    border-bottom: 0.5px solid #344054;
}

/* token-amount-input */
input[type="number"][data-tip-amount-input],
input[type="text"][data-tip-amount-input]{
    color: black !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    line-height: 3.75rem !important;
    -moz-appearance: textfield;
}

input[type="number"][data-tip-amount-input-alert],
input[type="text"][data-tip-amount-input-alert]{
    color: var(--color-led-pink, #FF0066) !important;
}

input[type="number"][data-tip-amount-input]::-webkit-outer-spin-button,
input[type="number"][data-tip-amount-input]::-webkit-inner-spin-button,
input[type="text"][data-tip-amount-input]::-webkit-outer-spin-button,
input[type="text"][data-tip-amount-input]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* tooltip */
[data-token-popup-tooltip] {
    position: relative;
    display: inline-block;
}
[data-token-popup-tooltip] svg{
    filter: brightness(2);
}

/* Tooltip text */
[data-token-popup-tooltip] [data-token-popup-tooltip-text] {
    top: -1.6875rem;
    left: 1.5rem;
    background-color: #2C313D;
    border-radius: .5rem;
    padding: .5rem .75rem;
    min-width: 14.8125rem;
    visibility: hidden;
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
[data-token-popup-tooltip]:hover [data-token-popup-tooltip-text] {
    visibility: visible;
}

[data-token-popup-tooltip] [data-token-popup-tooltip-text]::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #2C313D transparent transparent;
}

/* add-message-input */
/* [token-add-message-input]::-webkit-input-placeholder{
    line-height: 1.25rem !important;
} */

/* range-slider */
[data-tip-range-slider] {
    -webkit-appearance: none;
    width: 100%;
    height: 13px;
    border-radius: 100px;
    background: transparent;
    position: relative;
    outline: none;
    border: none;
    z-index: 2;
}

[data-tip-range-slider]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    background: url("./images/slider-icon.png");
    background-position: center;
    background-size: 120%;
    cursor: pointer;
    border: none;
    margin-top: -4px;
    position: relative;
    z-index: 3;
    overflow: visible;
}

[data-slider-track-base]:not(.db):empty {
    position: absolute;
    top: 0;
    left: 0;
    height: 13px;
    width: 100%;
    background: #34405480;
    display: unset;
    border-radius: 100px;
    z-index: 1;
}

[data-tip-range-slider-track-fill] {
    position: absolute;
    top: 0;
    left: 0;
    height: 13px;
    background: linear-gradient(90deg, #9198FF 0%, #FF8DDF 122.28%, #FF0066 244.56%);
    border-radius: 100px;
    z-index: 2;
}
[data-tip-range-slider-track-fill]:not(.db):empty {
    display: unset;
}

@media (max-width: 1010px){
    /* responsive */
    .display-none--responsive-tablet-landscape{
        display: none;
    }

    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    /* enter topup amount section */
    [data-enter-topup-amount-section]{
        padding-top: 16px;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    [data-token-popup-back-icon]{
        top: .5rem;
        left: .5rem;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    /* topup amount table section */
    [data-topup-amount-table-section]{
        margin-top: auto;
    }

    /* tip button */
    [data-token-topup-button-container]{
        height: 2.75rem;
    }

    [data-token-topup-button]{
        height: 2.75rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 480px){
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        background-size: 250%;
        background-position-x: -95px;
    }

    [data-token-popup-right-column]{
        min-height: unset;
    }

    [data-token-popup-tooltip] [data-token-popup-tooltip-text]{
        min-width: 10.8125rem;
        top: -2.75rem;
        left: 1.75rem;
    }

    [data-topup-amount-table-section]{
        padding-bottom: 3.25rem;
    }

    [data-token-topup-button-wrapper-desktop]{
        display: none;
    }

    [data-token-topup-button-wrapper-mobile]{
        position: fixed !important;
        display: flex;
        z-index: 100000;
    }

    [data-portrait-mobile-responsive-navbar]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    [data-portrait-mobile-responsive-navbar][data-page-scrolling]{
        backdrop-filter: blur(400px);
        background: linear-gradient(180deg, rgba(240, 240, 240, 0.5) 0%, rgba(240, 240, 240, 0.375) 100%);
        transition: all .3s linear;
    }

    [data-token-popup-container] {
        overflow-y: auto !important;
        max-height: 100vh;
    }
}
@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    [data-token-popup-back-icon]{
        top: .5rem;
        left: .5rem;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    /* tip button */
    [data-token-topup-button-container]{
        height: 2.75rem;
    }

    [data-token-topup-button]{
        height: 2.75rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

.token-cash-step-2-44 { background-color: #44444480; }
.token-tip-step-3-tip-success-final-47 { background-color: #44444480; }
.token-tip-step-3-tip-success-final-46 { background-color: #949494; }
.token-tip-step-3-tip-success-final-49 { background-image: url('./images/popup-bg.png'); }
.token-cash-step-2c-payment-unsuccessful-15 { background-color: #949494 }
.token-cash-step-3-tip-success-final-25 { background-color: #44444480; }
/* popup - right-column */

/* token-amount-input */
input[type="number"][data-tip-amount-input]{
    color: black !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    line-height: 3.75rem !important;
    -moz-appearance: textfield;
}

input[type="number"][data-tip-amount-input]::-webkit-outer-spin-button,
input[type="number"][data-tip-amount-input]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[data-tip-range-slider]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    background: url("./images/slider-icon.png");
    background-position: center;
    background-size: 120%;
    cursor: pointer;
    border: none;
    margin-top: -4px;
    position: relative;
    z-index: 3;
    overflow: visible;
}
[data-tip-range-slider]::-webkit-slider-thumb:active{
    width: 48px;
    background: url("./images/slider-icon-active.png");
}

[data-tip-range-slider-amount-container] {
    position: absolute;
    top: -64px;
    left: 0;
    pointer-events: none;
}

[data-tip-range-slider-amount]{
    background: black;
    box-shadow: 0px 0px 8px 0px #FFFFFF8C, 0px 4px 12px 0px #FC2C9C80;
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    /* enter topup amount section */
    [data-enter-topup-amount-section]{
        padding-top: 16px;
    }
}

.token-cash-step-2b-payment-1-18 { background-color: #949494 }
/* popup - right-column */
/* tab */
[data-tab-button]{
    border-bottom: 1.5px solid var(--color-athens-gray3, #F2F4F7);;
}
[data-tab-button-active]{
    border-bottom: 1.5px solid #FF0066;
}

[data-tab-button-active] [data-tab-button-text-container]{
    filter: drop-shadow(0px 0px 12px #FFFFFF80);
}

[data-tab-button-active] [data-tab-button-text]{
    font-weight: 600;
}

/* token-amount-input */
input[type="number"][data-tip-amount-input]{
    color: black !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    line-height: 3.75rem !important;
    -moz-appearance: textfield;
}

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

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: inline !important;
    background-color: #98A2B380;
    border-radius: 12px;
    padding: 2px;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0px 1px 2px 0px #1018280F, 
    0px 1px 3px 0px #1018281A;
}

input:checked + .slider {
    background-color: #0C111D !important;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* status: pending */
[data-status-pending]{
    background: linear-gradient(90deg, #37FFD7 0%, #07F468 100%);
    box-shadow: -1px 1px 8px 0px #35FFD340, 1px -1px 8px 0px #1CF89940;
}

[data-status-pending-inner-container]{
    background: #000000D9;
}

[data-status-pending-text]{
    background: linear-gradient(90deg, #37FFD7 0%, #07F468 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    color: transparent;
    background-clip: text;
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    [data-tab-buttons-container],
    [data-token-input-container]{
        padding-top: 1rem;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }
}

@media (max-width: 480px){
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        background-size: 250%;
        background-position-x: -95px;
    }
    
    [data-token-popup-right-column]{
        min-height: unset;
    }

    [data-token-popup-tooltip] [data-token-popup-tooltip-text]{
        min-width: 10.8125rem;
        top: -2.75rem;
        left: 1.75rem;
    }
}
.token-cash-step-3-tip-success-final-27 { background-image: url('./images/popup-bg.png'); }
.token-tip-step-3-tip-success-token-10 { background-color: #949494; }
.token-tip-step-3-tip-success-token-11 { background-color: #44444480; }
.token-cash-step-1-21 { background-color: #949494; }
.token-tip-step-2-1 { background-color: #949494; }
.token-cash-step-2-43 { background-color: #949494; }
.token-tip-step-2-2 { background-color: #44444480; }
/* popup - right-column */
[data-token-popup-right-column]{
    max-height: 35.75rem;
    overflow: auto;
}

/* popup - right-column */
[data-token-popup-right-column]{
    max-height: 35.5rem;
    overflow: auto;
}

.token-tip-step-2c-payment-2-60 { background-color: #949494 }
.token-cash-step-3-tip-success-final-26 { background-image: url('./images/popup-bg.png'); }
.token-tip-step-2c-payment-2-61 { background: #44444480; }
.token-tip-step-2c-payment-unsuccessful-37 { background-color: #949494 }
.token-tip-step-2c-payment-unsuccessful-38 { background: #44444480; }
.token-cash-step-2b-payment-2-40 { background-color: #949494 }
[data-alert-user-container]{
    background-size: 400%;
    /* background-position: -2rem 0; */
}

[data-alert-user-token-icon]{
    bottom: -0.5rem;
    right: -0.5rem;
}

/* popup - right-column */
/* alert-section */
[data-token-alert-wrapper]{
    min-height: 4rem;
    border-left: 3px solid #07F468;
    border-bottom: 0.5px solid #EAECF0;
}

[data-token-alert-container]{
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255));
}

[data-token-alert-container]::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(46, 211, 183, 0.15), rgba(255, 255, 255, 0.9));
    z-index: 0;
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    [data-token-alert-wrapper]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    [data-token-input-container]{
        padding-top: 1rem;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    [data-token-alert-wrapper-mobile]{
        width: calc(100% - 1rem);
        top: .5rem;
        left: .5rem;
        border-left: none;
    }

    [data-alert-user-token-icon] {
        width: 1rem;
        height: 1rem;
        bottom: -0.25rem;
        right: -0.25rem;
    }
}

/* popup - right-column */
[data-token-popup-right-column]{
    min-height: 33.875rem;
}

/* alert-section */
[data-token-alert-wrapper]{
    min-height: 4rem;
    border-left: 3px solid #07F468;
    border-bottom: 0.5px solid #EAECF0;
}

[data-token-alert-container]::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(46, 211, 183, 0.15), rgba(255, 255, 255, 0.9));
    z-index: 0;
}

.token-cash-step-2c-payment-unsuccessful-16 { background: #44444480; }
.token-tip-step-2-not-enough-balance-34 { background-color: #949494; }
.mw--0 { min-width: 0; }
/* popup - right-column */
[data-token-popup-right-column]{
    min-height: 34.375rem;
}

/* tab */
[data-tab-button]{
    border-bottom: 1.5px solid var(--color-athens-gray3, #F2F4F7);;
}
/* cash amount tag (inside from container) */
[data-cash-amount-tag]{
    background: linear-gradient(90deg, #FF58B2 0%, #4C57FF 100%);
    box-shadow: -1px 1px 8px 0px #4C57FF40, 1px -1px 8px 0px #FF58B240;
}

/* status inside from container */
[data-cash-amount-tag] [data-status-pending]{
    background: transparent;
    box-shadow: none;
}

[data-cash-amount-tag] [data-status-pending-text] {
    background: linear-gradient(90deg, rgba(255, 88, 178, 0.7) 0%, rgba(76, 87, 255, 0.7) 100%),
linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    color: transparent;
    background-clip: text;
}

/* footer tip-button */
[data-token-tip-button-wrapper-desktop]{
    margin-top: auto;
}

[data-token-tip-button-container]{
    height: 3.5rem;
    box-shadow: 0px 0px 16px 0px #FFFFFF80;
}

[data-token-tip-button]::before{
    position: absolute;
    top: 0;
    left: -0.75rem;
    content: '';
    display: block;
    width: 2rem;
    height: 100%;
    background-color: #07F468;
    z-index: -1;
    -webkit-transform: skew(163deg, 0) translateX(3px);
    transform: skew(163deg, 0) translateX(3px);
    -webkit-backdrop-filter: blur(100px); 
    backdrop-filter: blur(100px);
    -webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
    box-shadow: -12px 0px 16px 0px #ffffff40;
}

button[data-token-tip-button]:hover{
    background-color: black;
}

button[data-token-tip-button]:hover::before{
    background-color: black;
}

button[data-token-tip-button]:not(:disabled):hover svg path{
    /* stroke: #07F468; */
}

button[data-token-tip-button]:not(:disabled):hover span{
    color: #07F468;
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        width: 100%;
    }

    [data-tab-buttons-container],
    [data-token-input-container]{
        padding-top: 1rem;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    /* tip button */
    [data-token-tip-button-container]{
        height: 2.75rem;
    }

    [data-token-tip-button]{
        height: 2.75rem;
    }
}

@media (max-width: 480px){
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        background-size: 250%;
        background-position-x: -95px;
    }
    
    [data-token-popup-right-column]{
        min-height: unset;
        /* padding-bottom: 4.25rem; */
    }

    [data-token-popup-tooltip] [data-token-popup-tooltip-text]{
        min-width: 10.8125rem;
        top: -2.75rem;
        left: 1.75rem;
    }

    [data-token-tip-button-wrapper-desktop]{
        display: none;
    }

    [data-token-tip-button-wrapper-mobile]{
        position: fixed !important;
        display: flex;
        z-index: 100000;
    }
}
/* tip amount tag (inside from container) */
[data-tip-amount-tag]{
    background: linear-gradient(90deg, #FF58B2 0%, #4C57FF 100%);
}

@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 31.6875rem;
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        min-height: 32.375rem;
    }

    [data-token-alert-wrapper]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    [data-token-tip-button-wrapper-desktop]{
        position: absolute;
        bottom: 0;
        right: 0;
    }

    [data-token-input-container]{
        padding-top: 1rem;
    }
}

@media (max-width: 480px){
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        background-size: 250%;
        background-position-x: -95px;
    }
    
    [data-token-popup-right-column]{
        min-height: unset;
        /* padding-bottom: 4.75rem; */
    }

    [data-token-popup-tooltip] [data-token-popup-tooltip-text]{
        min-width: 10.8125rem;
        top: -2.75rem;
        left: 1.75rem;
    }

    [data-token-tip-button-wrapper-desktop]{
        display: none;
    }

    [data-token-tip-button-wrapper-mobile]{
        position: fixed !important;
        display: flex;
        z-index: 100000;
    }
}
.token-tip-step-2b-top-up-amount-2-54 { background-color: #44444480 }
.token-cash-step-2b-payment-1-19 { background: #44444480; }
.token-tip-step-1-58 { background-color: #44444480; }
.token-tip-step-2b-top-up-amount-2-55 { background: #8E8E8E; }
.token-tip-step-2c-payment-1-4 { background-color: #949494 }
.token-tip-step-2b-top-up-amount-3-51 { background-color: #44444480 }
@media (max-width: 1010px){
    /* responsive */
    .flex--column-responsive-tablet-landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pad--x--16-responsive-tablet-landscape{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* popup */
    [data-token-popup] .elm_yNwqwJ{
        align-items: start;
    }

    /* popup-columns */
    [data-token-popup-left-column]{
        width: 100%;
    }

    [data-token-popup-left-column]{
        background-size: 140%;
        background-repeat: no-repeat;
        background-position: left top;
        height: 20rem;
        min-height: 20rem;
    }

    [data-left-column-overlay-container]{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
    }

    [data-token-popup-right-column]{
        width: 100%;
    }

    [data-token-alert-wrapper]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    [data-token-input-container]{
        padding-top: 1rem;
    }
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    [data-token-alert-wrapper-mobile]{
        width: calc(100% - 1rem);
        top: .5rem;
        left: .5rem;
        border-left: none;
    }

    [data-alert-user-token-icon] {
        width: 1rem;
        height: 1rem;
        bottom: -0.25rem;
        right: -0.25rem;
    }

    /* tip button */
    [data-token-tip-button-container]{
        height: 2.75rem;
    }

    [data-token-tip-button]{
        height: 2.75rem;
    }
}

/* footer tip-button */
[data-token-tip-button-container]{
    height: 3.5rem;
    box-shadow: 0px 0px 16px 0px #FFFFFF80;
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    /* tip button */
    [data-token-tip-button-container]{
        height: 2.75rem;
    }

    [data-token-tip-button]{
        height: 2.75rem;
        /* position: absolute; */
        bottom: 0;
        right: 0;
    }
}

.token-cash-step-3-tip-success-cash-30 { background-color: #44444480; }
/* not-enought-balance-error-container */
[data-not-enought-balance-error-container]{
    background: #FB5BA240;
}

/* footer tip-button */
[data-token-topup-button-container]{
    height: 3.5rem;
    box-shadow: 0px 0px 16px 0px #FFFFFF80;
}

@media (max-width: 767px){
    /* responsive */
    .lh--20--responsive-mobile{
        line-height: 1.25rem;
    }

    /* popup */
    .elm_UoRWYY[data-token-popup]:not([data-popup-noui]) .elm_yNwqwJ:not(.no-height){
        height: 100vh;
        margin-top: 0;
    }

    /* close-icon */
    [data-token-popup-close-icon]{
        width: 2.5rem;
        height: 2.5rem;
        top: .5rem;
        right: .5rem;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        filter: drop-shadow(0px 0px 20px #FFFFFF);
    }

    [data-token-popup-close-icon] svg path{
        backdrop-filter: unset;
    }

    /* popup-columns */
    [data-token-popup-left-column],
    [data-token-popup-right-column]{
        max-width: 100%;
    }

    [data-token-popup-right-column]{
        min-height: 36.875rem;
    }

    /* tip button */
    [data-token-topup-button-container]{
        height: 2.75rem;
    }

    [data-token-topup-button]{
        height: 2.75rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 480px){
    [data-token-popup-left-column] {
        min-height: 23.4375rem;
        background-size: 250%;
        background-position-x: -95px;
    }
    
    [data-token-popup-right-column]{
        min-height: unset;
        /* padding-bottom: 4.25rem; */
    }

    [data-token-popup-tooltip] [data-token-popup-tooltip-text]{
        min-width: 10.8125rem;
        top: -2.75rem;
        left: 1.75rem;
    }

    [data-token-topup-button-wrapper-desktop]{
        display: none;
    }

    [data-token-topup-button-wrapper-mobile]{
        position: fixed !important;
        display: flex;
        z-index: 100000;
    }
}
.token-tip-step-2-not-enough-balance-35 { background-color: #44444480; }
.token-tip-step-1-57 { background-color: #949494; }
.token-tip-step-2b-top-up-amount-1-8 { background: #8E8E8E; }
.token-tip-step-3-tip-success-token-13 { background-image: url('./images/popup-bg.png'); }
.token-cash-step-3-tip-success-cash-32 { background-image: url('./images/popup-bg.png'); }
.token-tip-step-3-tip-success-token-12 { background-image: url('./images/popup-bg.png'); }