/* Template styles */
/* [data-is-dashboard-topup] .max--w--317 { max-width: 32.563rem; }

[data-is-dashboard-topup] .br--col--warm--gray { border-color: rgba(234, 236, 240, 0.50); }

@media screen and (min-width: 768px) and (max-width: 1009px) and (orientation: portrait){
    [data-is-dashboard-topup][data-call-checkout-style="tablet-mobile"]{
        position: fixed;
        bottom: 0;
        left: 0;
        max-width: none;
        max-height: 24rem;
        overflow-y: auto;
        padding-bottom: 5rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    [data-is-dashboard-topup][data-call-checkout-style="tablet-mobile"]:before{
        content: '';
        width: 100%;
        height: 100%;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    [data-is-dashboard-topup][data-call-checkout-fixed-button-style="tablet-mobile"]{
        position: fixed;
        bottom: 1rem;
        left: 0;
        padding: 0 1rem;
    }
}
@media screen and (min-width: 480px) and (max-width: 932px) and (orientation: landscape){
    [data-is-dashboard-topup][data-call-checkout-style="tablet-mobile"]{
        overflow-y: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-height: 100dvh;
        border-radius: 0;
    }
    [data-is-dashboard-topup][data-call-checkout-style="tablet-mobile"]:before{
        content: '';
        width: 100%;
        height: 100%;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    [data-is-dashboard-topup][data-call-checkout-fixed-button-style="tablet-mobile"]{
        position: sticky;
        bottom: 0;
        left: 0;
        padding: 0 0.5rem;
    }
}
@media screen and (max-width: 479px){
    [data-is-dashboard-topup][data-call-checkout-style="tablet-mobile"]{
        position: fixed;
        bottom: 0;
        left: 0;
        max-width: none;
        max-height: 24rem;
        overflow-y: auto;
        padding-bottom: 5rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    [data-is-dashboard-topup][data-call-checkout-style="tablet-mobile"]:before{
        content: '';
        width: 100%;
        height: 100%;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    [data-is-dashboard-topup][data-call-checkout-fixed-button-style="tablet-mobile"]{
        position: fixed;
        bottom: 1rem;
        left: 0;
        padding: 0 0.5rem;
    }
} */
/* End Tempalte styles */

/* Custom CSS Need to set [data-is-dashboard-topup] seletor */
/* Fan dash checkout topup css */
[data-fan-topup-checkout]{
    right: 0 !important;
}
/* /Fan dash checkout topup css */
[data-fan-topup-checkout] [data-is-dashboard-topup] {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), rgba(234, 236, 240, 0.90) !important;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25)!important;
    /* border-radius: 0.625rem!important; */
    max-width: 32.563rem!important;
}
[data-fan-topup-checkout] [data-delete-card]{
    display: none;
}

[data-is-dashboard-topup] [data-token-popup-close-icon]:after,
[data-is-dashboard-topup] [data-tip-step="enter-topup"] [data-tip-back-button],
[data-is-dashboard-topup] [data-portrait-mobile-responsive-navbar],
/* [data-is-dashboard-topup] [data-token-popup-close-icon], */
[data-is-dashboard-topup] [data-token-popup-left-column] {
    display: none;
}

[data-is-dashboard-topup] [data-token-popup-right-column] {
    /* background-color: rgba(0, 0, 0, 0.5); */
    background-color: transparent;
}

[data-is-dashboard-topup] [data-tip-sending-loader],
[data-is-dashboard-topup] [data-tip-buttons],
[data-is-dashboard-topup] [data-token-tip-button-wrapper-mobile],
/* [data-is-dashboard-topup] [data-tip-buttons] [data-token-tip-button-wrapper-desktop],
[data-is-dashboard-topup] [data-tip-buttons] [data-token-tip-button-container],
[data-is-dashboard-topup] [data-tip-buttons] [data-token-tip-button-container] [data-token-tip-button], */
[data-is-dashboard-topup] [data-payment-method-edit-container-text] .w--280,
[data-is-dashboard-topup] [data-checkout-payment-card], 
[data-is-dashboard-topup] div.wpwl-container.wpwl-container-card,
[data-is-dashboard-topup] .new-payment-method-skeleton .w--360,
[data-is-dashboard-topup] .new-payment-method-skeleton,
[data-is-dashboard-topup] .payment-method-skeleton .w--360,
[data-is-dashboard-topup] .payment-method-skeleton,
[data-is-dashboard-topup] .data-payment-method-edit-container-cls,
[data-is-dashboard-topup] [data-checkout-payment-card] {
    width: 100%!important;
}

[data-is-dashboard-topup] .wpwl-form.wpwl-form-card .wpwl-group.wpwl-group-submit{
    /* order: 6; */
}

[data-is-dashboard-topup] .wpwl-group-cardNumber, 
[data-is-dashboard-topup] .wpwl-group-cardHolder{
    /* width: 100%!important; */
}

[data-is-dashboard-topup] .wpwl-group-expiry, 
[data-is-dashboard-topup] .wpwl-group-cvv{
    /* width: 47%!important; */
}

[data-is-dashboard-topup] .wpwl-group-cardHolder{
    /* order: 1!important; */
}

[data-is-dashboard-topup] .wpwl-group-cardNumber{
    /* order: 2!important; */
}

[data-is-dashboard-topup] [data-bs-dropdown]{
    /* max-width: 17rem; */
}

[data-is-dashboard-topup] [data-checkout-payment-card-wrapper] .payment-method-container-inner span{
    line-height: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

[data-is-dashboard-topup] [data-payment-method-edit-container-text]{
    /* flex-wrap: wrap; */
    /* justify-content: left; */
}

[data-is-dashboard-topup] [data-payment-information-wrapper] [data-payment-method-edit-container]{
    height: 3.5rem !important;
}


[data-is-dashboard-topup] [data-tip-buttons] [data-token-tip-button-wrapper-desktop]{
    /* padding: 1rem 1rem; */
}

[data-is-dashboard-topup] [data-token-tip-button]>svg,
[data-is-dashboard-topup] [data-token-tip-button]::before,
[data-is-dashboard-topup] [data-payment-method-edit-container]:after{
    /* display: none; */
}

[data-is-dashboard-topup] [data-token-tip-button-wrapper-mobile],
[data-is-dashboard-topup] [data-token-tip-button-wrapper-desktop]{
    /* justify-content: center; */
}

[data-is-dashboard-topup] [data-token-tip-button-container]{
    /* box-shadow: none; */
}

[data-is-dashboard-topup] [data-token-tip-button]{
    /* border-radius: 3.125rem; */
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
}

[data-is-dashboard-topup] [data-tip-call-checkout-wrapper] {
    /* padding-bottom: 4.5rem; */
}

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

[data-is-dashboard-topup] input[type="number"][data-tip-amount-input] {
    font-size: 1.875rem !important;
    font-weight: 400 !important;
    line-height: 2.375rem !important;
}
[data-is-dashboard-topup][data-tip-success="true"] [data-tip-token-cash-success-alert]{
    position: fixed;
    z-index: 9;
}

[data-is-dashboard-topup][data-tip-success="true"] [data-tip-token-cash-success-alert].visible ~ [data-tip-call-checkout-wrapper] {
    padding-top: 7rem;
}

/* new style for fan topup */
[data-fan-topup-checkout].slidein-right-popup:not([data-popup-noui]) [data-popup-id] .elm_qJBugX{
    max-width: 32.563rem!important;
}

[data-fan-topup-checkout][data-token-popup] {
    z-index: 2147483647;
}
[data-fan-topup-checkout][data-token-popup].opened {
    background-color:hsla(0,0%,100%,.5)!important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

[data-is-dashboard-topup] .top-up-amout-wrapper,
[data-is-dashboard-topup] [data-tip-step],
[data-is-dashboard-topup] [data-token-popup-right-column],
[data-is-dashboard-topup] [data-left-right-col-wrapper] {
    height: 100%!important;
}

[data-is-dashboard-topup] [data-token-popup-right-column]{
    max-height: 100% !important;
}
[data-is-dashboard-topup] .token--popup-billing--email .checkout-guest-as-logged-in-wrapper .white + div, 
[data-is-dashboard-topup] .token--popup-billing--email .checkout-guest-as-logged-in-wrapper .guest-logout-button [data-logout-text],
[data-is-dashboard-topup] input[type="number"][data-tip-amount-input],
[data-is-dashboard-topup] [data-enter-topup-amount-section] span.white{
    color: var(--color-ebony, #101828) !important;
}

[data-is-dashboard-topup] [data-enter-topup-amount-section] .pad--top--32 {
    padding-top: 80px;
}

[data-is-dashboard-topup] [data-token-popup-close-icon]{
    top: 1rem;
    right: 1rem;
    height: auto;
    width: auto;
    position: relative;
    border-radius: 0;
    justify-content: end;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

[data-is-dashboard-topup] [data-token-popup-close-icon] svg {
    filter: invert(46%) sepia(13%) saturate(631%) hue-rotate(182deg) brightness(1%) contrast(1%);
}

[data-is-dashboard-topup][data-active-tip-step][data-tip-empty-amount="true"] [data-hide-on-tip-amout-empty][data-token-tip-button-wrapper-desktop] {
    display: inline-flex;
    width: 100%;
}

[data-is-dashboard-topup] [data-guest-checkout="loggedin"] {
    padding: 0.5rem 1rem;
}

[data-is-dashboard-topup] [data-guest-checkout="loggedin"],
[data-is-dashboard-topup] [data-payment-information-wrapper] {
    border: 1px solid rgba(234, 236, 240, 0.50);
    background: rgba(255, 255, 255, 0.35);
}

[data-is-dashboard-topup] [data-payment-information-wrapper] [data-payment-method-edit-container] [data-payment-last4]{
    -webkit-text-fill-color: var(--color-oxford-blue, #344054);
}

/* [data-is-dashboard-topup] [data-checkout-payment-card] input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]), 
[data-is-dashboard-topup] [data-checkout-payment-card] input[type="text"], */
[data-is-dashboard-topup] [data-payment-method-edit-container-text] span.col--oxford-blue,
[data-is-dashboard-topup] [data-payment-holder-expiry],
[data-is-dashboard-topup] [data-payment-last4],
[data-is-dashboard-topup] [data-payment-holder-name],
[data-is-dashboard-topup] [data-tip-payment-card] [data-bs-trigger-label] {
    color: var(--color-oxford-blue, #344054) !important;
}

[data-is-dashboard-topup] [data-logout-text] svg,
/* [data-is-dashboard-topup] [data-payment-brand-svg] svg, */
[data-is-dashboard-topup] [data-delete-card] svg,
[data-is-dashboard-topup] [data-tip-payment-card] [data-bs-trigger-label] + img,
[data-is-dashboard-topup] [data-checkout-payment-card-wrapper] .payment-method-container-inner svg{
    filter: brightness(0);
}

[data-is-dashboard-topup] [data-guest-checkout-action="logout"],
[data-is-dashboard-topup][data-tip-empty-amount="true"] [data-tip-range-slider-amount-container],
/* [data-is-dashboard-topup][data-active-tip-step="payment"] [data-token-popup-close-icon], */
[data-is-dashboard-topup] [data-payment-method-edit-container]:after{
    display: none;
}


[data-is-dashboard-topup] [data-checkout-payment-card],
[data-is-dashboard-topup] div.wpwl-container.wpwl-container-card {
    /* padding: 0rem;
    border: 1px solid rgba(234, 236, 240, 0.50);
    background: rgba(255, 255, 255, 0.35);
    background: #344054; */
}

[data-toast-notification].fan-topup-success {
    /* add some */
}

[data-notification-card].fan-topup-success [data-notification-icon-container] [data-small-icon],
[data-notification-type=success].fan-topup-success [data-notification-icon-container] [data-big-icon] {
    -webkit-filter: inherit;
    filter: inherit;
}
.min--w--40{
    min-width: 2.5rem;
}
/* [data-is-dashboard-topup] [data-token-tip-button]::before{
    background-color: #F06 !important;
}
[data-is-dashboard-topup] [data-token-tip-button]{
    background-color: #F06 !important;
}
[data-is-dashboard-topup] [data-tip-button-extra-wrapper], 
[data-is-dashboard-topup] [data-tip-button-extra-text]{
   color: #fff !important;
} */


@media screen and (max-width:480px) {
    [data-is-dashboard-topup] [data-token-tip-button-wrapper-mobile]{
        justify-content: end !important;
    }
    [data-payment-method-edit-container] [data-payment-last4] {
        font-size: 1rem !important;
    }
}
@media screen and (max-width:479px) {
    [data-is-dashboard-topup] [data-tip-step="enter-topup"] [data-tip-back-button].display-none--responsive-mobile-portrait,
    [data-is-dashboard-topup][data-active-tip-step="payment"] [data-tip-back-button].display-none--responsive-mobile-portrait {
        display: block !important;
    }
}