.wallet-tabs {
    gap: 5px;
    margin: 14px 8px 0;
    padding: 8px;
    overflow-x: visible;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    overflow: auto;
}

.wallet-tabs .is-active {
    border-color: #f02222;
    color: #f5bd22;
    background: radial-gradient(circle at 50% 0%, #fa3131, #730000);
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.45);
}

.wallet-tabs button {
    min-height: 66px;
    padding: 4px 18px;
    gap: 3px;
    border-radius: 10px;
    font-size: 7px;
    justify-items: center;
    border: 2px solid rgba(255, 202, 44, 0.75);
    color: #160900;
    background: linear-gradient(110deg, #855600, #ffe36a 48%, #b46d00);
    min-height: 66px;
    line-height: 1;
    white-space: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.wallet-tabs button::before {
    display: block;
    width: 34px;
    height: 32px;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.wallet-tabs button.wallet-tab-balance::before {
    background-image: url("../images/revamp/weclub-balance.webp");
}

.wallet-tabs button.wallet-tab-balance:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon_balance-hover.webp");
}

.wallet-tabs button.wallet-tab-deposit::before {
    background-image: url("../images/revamp/weclub-deposit.webp");
}

.wallet-tabs button.wallet-tab-deposit:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon_deposit-hover.webp");
}

.wallet-tabs button.wallet-tab-withdrawal::before {
    background-image: url("../images/revamp/weclub-withdraw.webp");
}

.wallet-tabs button.wallet-tab-withdrawal:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon_withdraw-hover.webp");
}

.wallet-tabs button.wallet-tab-transfer::before {
    background-image: url("../images/revamp/weclub-transfer.webp");
}

.wallet-tabs button.wallet-tab-transfer:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon_transfer-hover.webp");
}

.wallet-tabs button.wallet-tab-voucher::before {
    background-image: url("../images/revamp/weclub-voucher.webp");
}

.wallet-tabs button.wallet-tab-voucher:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon_voucher-hover.webp");
}

.wallet-tabs button.wallet-tab-history::before {
    background-image: url("../images/revamp/icon_history.webp");
}

.wallet-tabs button.wallet-tab-history:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon_history-hover.webp");
}

.wallet-tabs button.wallet-tab-message::before {
    background-image: url("../images/revamp/icon-email.webp");
    filter: brightness(0);
}

.wallet-tabs button.wallet-tab-message:is(:hover, .is-active)::before {
    background-image: url("../images/revamp/icon-email.webp");
    filter: brightness(1);
}

section.screen {
    background: radial-gradient(circle at 70% 11%, rgba(255, 190, 41, 0.16), transparent 18rem), linear-gradient(180deg, #050606, #020302);
    margin: 70px 0 130px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 2px;
}

/* mydeposit */
.ui-dialog {
    z-index: 9999;
}

.deposit-panel {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    .deposit-panel-head {
        display: block;
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .account-page-heading__icon {
        display: grid;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
    }

    .account-page-heading__icon img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .account-page-heading__title {
        min-width: 0;
        line-height: 1;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 17px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
        text-transform: capitalize;
    }

    h2 {
        margin: 0 0 12px;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-transform: capitalize;
        line-height: 1.2;
        margin-bottom: 10px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .section-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .new-member-promo-section {
        margin: 16px 0 0;
        padding-bottom: 16px;
    }

    .err_msg {
        color: red;

        label {
            color: red;
        }
    }

    .deposit-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 12px;
    }

    .bonus-grid {
        display: grid;
        align-items: stretch;
        justify-content: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 12px;
    }

    .bonus-grid.hidden {
        display: none;
    }

    .bonus-card {
        display: none;
        min-height: 0;
        aspect-ratio: 1;
        padding: 0;
        border-radius: 14px;
        text-align: center;
        box-shadow: inset 0 0 26px rgba(245, 189, 34, 0.08), 0 0 10px rgba(245, 189, 34, 0.18);
        overflow: hidden;
        align-items: stretch;
        aspect-ratio: 1;
        justify-items: stretch;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
        border: 1px solid rgba(255, 255, 255, 0.12);
        position: relative;
    }

    .bonus-card.selected {
        border-color: #f5bd22;
    }

    .first-bonus .tag {
        position: absolute;
        top: 10px;
        left: 10px;
        max-width: calc(100% - 54px);
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 10px;
        white-space: nowrap;
        z-index: 4;
        color: #fff;
        background: linear-gradient(180deg, #62f17a 0%, #19b842 52%, #087b25 100%);
    }

    .first-bonus .bonus-card .bonus-banner {
        aspect-ratio: 1;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        border-radius: inherit;
        object-fit: cover;
        max-width: 100%;
        display: block;
        filter: drop-shadow(0 0 16px rgba(255, 192, 32, 0.28));
    }

    .first-bonus .bonus-card .check-dot {
        z-index: 4;
        display: grid;
        place-items: center;
        border-color: rgba(255, 255, 255, 0.68);
        background: url("../images/revamp/icon-checklist.webp") center / 72% 72% no-repeat,
            rgba(0, 0, 0, 0.72);
        opacity: 1;
        filter: grayscale(1);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.08);
        top: 11px;
        right: 11px;
        width: 30px;
        height: 30px;
        border: 2px solid #ffe46d;
        position: absolute;
        border-radius: 50%;
    }

    .first-bonus .bonus-card.selected .check-dot {
        filter: grayscale(0);
        background: url("..//images/revamp/icon-checklist.webp") center / 72% 72% no-repeat, linear-gradient(180deg, rgba(255, 224, 82, 0.98), rgba(232, 149, 16, 0.98));
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.62), 0 0 10px rgba(255, 199, 48, 0.42);
    }

    .continue-copy {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 0 0;
        gap: 4px;
        margin: 0;
        color: #f4f4f4;
        text-align: center;
        font-size: 11px;
    }

    .continue-copy .bonus-toggle-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #ffd94f;
        font-weight: 900;
        white-space: nowrap;
        border: 1px solid transparent;
        border-radius: 4px;
        box-shadow: inset 0 0 12px rgba(245, 189, 34, 0.12), 0 0 10px rgba(245, 189, 34, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45);
        cursor: pointer;
        line-height: 1.2;
        min-height: 32px;
        padding: 5px 10px;
        border-color: rgba(255, 191, 45, 0.72);
        min-width: 0;
        width: min(100%, 320px);
        font-size: 11px;
        background: rgba(27, 21, 8, 0.82);
    }

    .continue-copy .bonus-toggle-button.is-claiming::after {
        background-image: url("../images/revamp/icon-drop-down-icon.webp");
    }

    .continue-copy .bonus-toggle-button::after {
        display: inline-block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        color: #ffd94f;
        content: "";
        font-size: 11px;
        background: url("../images/revamp/weclub-no-promo-thanks.webp") center / contain no-repeat;
    }

    .manual-amount-row {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 0;
        margin: 0 0 18px;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: none;
        margin-bottom: 22px;
    }

    .manual-amount-row input {
        box-sizing: border-box;
        min-height: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        line-height: 48px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
            rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        width: 100%;
        padding: 0 16px
    }

    .manual-amount-row input::-webkit-outer-spin-button,
    .manual-amount-row input::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    .manual-amount-row input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .amount-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 6px
    }

    .bonus-card,
    .bonus-row,
    .amount-grid button,
    .payment-grid button {
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
    }

    .amount-grid button {
        display: grid;
        min-height: 40px;
        place-items: center;
        border-radius: 9px;
        overflow: visible;
    }

    .amount-grid strong {
        font-size: 13px;
        font-weight: 500;
    }

    .bonus-card.selected,
    .bonus-row.selected,
    .amount-grid button.selected,
    .payment-grid button.selected {
        border-color: #f5bd22;
        box-shadow: inset 0 0 26px rgba(245, 189, 34, 0.08), 0 0 10px rgba(245, 189, 34, 0.18);
    }

    .amount-grid .best-value-badge,
    .amount-grid .min-value-badge {
        line-height: 1;
        white-space: nowrap;
        top: -15px;
        right: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 2px 5px;
        border: 1px solid #f5bd22;
        border-radius: 7px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        color: #1a0800;
        text-align: center;
        background: linear-gradient(100deg, #ffe26e, #f1a60f);
        box-shadow: 0 0 13px rgba(255, 197, 43, 0.45);
        transform: none;
        position: absolute;
        font-size: 9px;
        font-weight: 700;
    }

    .deposit-amount-section {
        padding: 20px 0;
        border-top: 1px solid rgba(255, 191, 45, 0.58);
    }

    .payment-method-section {
        grid-column: 1 / -1;
        min-width: 0;
        padding: 5px 0 0;
        border-left: 0;
        padding-left: 0;
    }

    .payment-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .first-payment-grid button {
        grid-column: span 3;
        min-height: 64px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 38px 8px 12px;
        border-radius: 8px;
        display: none;
    }

    .first-payment-grid button:nth-child(n+5) {
        grid-column: span 6;
    }

    .first-payment-grid .pay-icon {
        align-self: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        position: static;
        place-items: center;
        border-radius: 11px;
        color: #fff;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: grid;
    }

    .pay-icon::before {
        content: "";
    }

    .fpx {
        background-image: url("../images/revamp/icon-fpx-e-wallet-qr.webp");
    }

    .fpx-bank {
        background-image: url("../images/revamp/icon-fpx-online-banking.webp");
    }

    .manual {
        background-image: url("../images/revamp/weclub-manual-bank-transfer.webp");
    }

    .usdt {
        background-image: url("../images/revamp/weclub-usdt.webp");
    }

    .others {
        background-image: url("../images/revamp/weclub-others.webp");
    }

    .payment-grid b {
        position: static;
        top: 64px;
        color: #fff;
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
    }

    .first-payment-grid button::after {
        content: "";
        position: absolute;
        right: 10px;
        width: 22px;
        height: 22px;
        border: 2px solid rgba(255, 255, 255, 0.68);
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background: url("../images/revamp/icon-checklist.webp") center / 72% 72% no-repeat,
            rgba(0, 0, 0, 0.72);
        filter: grayscale(1);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.08);
    }

    .first-payment-grid button.selected::after {
        border-color: #ffe46d;
        background: url("../images/revamp/icon-checklist.webp") center / 72% 72% no-repeat,
            linear-gradient(180deg, rgba(255, 224, 82, 0.98), rgba(232, 149, 16, 0.98));
        filter: none;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.62), 0 0 18px rgba(255, 199, 48, 0.72);
    }

    .payment-method-remark {
        margin: 14px 0 0;
        color: #f7d6a4;
        font-size: 10px;
        line-height: 1.35;
    }

    .payment-detail-panel {
        margin-top: 18px;
        padding: 20px 26px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.78));
        box-shadow: none;
        display: grid;
        gap: 12px;
        width: 100%;
        max-width: none;
        position: relative;
        z-index: 1;
        overflow: visible;

        .pgBankIdOptions {
            width: 100%;
            padding-bottom: 12px;
            margin-bottom: 12px;
            border-bottom: 1px solid #f5bd22;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;

            .pgBankCard {
                display: block;
                width: 96px;
                min-height: 48px;
                padding: 8px 12px;
                border: 1px solid rgba(255, 255, 255, 0.28);
                border-radius: 6px;
                box-sizing: border-box;
                color: transparent;
                font-size: 0;
            }

            .pgBankCard.selected {
                border: 1px solid #f5bd22;
            }

            .pgBankCard img {
                height: 60px;
                width: 100%;
                object-fit: contain;
            }
        }

        label {
            display: grid;
            gap: 8px;
            color: #fff;
            font-weight: 700;
            position: relative;
        }

        .payment-detail-panel button {
            min-height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            color: #fff;
            font-weight: normal;
        }

        .deposit-channel-select {
            min-height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            color: #fff;
            font-weight: normal;
            line-height: 48px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
            box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
            font-size: 11px;
            position: relative;
            text-align: left;
            display: block;
            max-width: 100%;
            padding: 0 48px 0 16px;
            -webkit-appearance: none;
            width: 100%;
        }

        .deposit-channel-menu {
            position: absolute;
            z-index: 100;
            right: 0;
            left: 0;
            top: calc(100% + 2px);
            display: grid;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.42);
            border-radius: 0;
            background: #151515;
        }

        .deposit-channel-menu.hidden {
            display: none;
        }

        .deposit-channel-menu button {
            padding: 0 16px;
            min-height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            color: #fff;
            font-weight: normal;
            text-align: left;
            background: #151515;
        }

        .deposit-channel-menu button.selected,
        .deposit-channel-menu button:hover {
            background: #1f6fd4;
        }

        .chain-tabs {
            display: flex;
            gap: 14px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .chain-tabs button {
            min-width: 114px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            color: #fff;
            background: rgba(255, 255, 255, 0.14);
            font-size: 11px;
            min-height: 48px;
            border-radius: 6px;
        }

        .chain-tabs button.selected {
            border-color: #f5bd22;
            box-shadow: inset 0 0 18px rgba(255, 214, 52, 0.22), 0 0 8px rgba(255, 214, 52, 0.25);
        }

        .usdt-detail-grid {
            display: none;
            grid-template-columns: 1fr;
            gap: 40px;
            align-items: center;
        }

        .qr-box {
            width: min(250px, 100%);
            aspect-ratio: 1;
            border: 3px solid #f5bd22;
            border-radius: 7px;
            box-shadow: 0 0 14px rgba(255, 214, 52, 0.2);
        }

        .crypto-fields {
            display: grid;
            gap: 12px;
        }

        .crypto-fields input {
            box-sizing: border-box;
            min-height: 48px;
            height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 6px;
            color: #fff;
            font-size: 11px;
            font-weight: 500;
            line-height: 48px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
            box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
            padding: 0 16px;
            width: 100%;
        }

        .copy-field-wrapper {
            position: relative;
        }

        .copy-field {
            display: flex;
            min-height: 52px;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 0 60px 0 16px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            color: #fff;
            overflow-wrap: anywhere;
            background: rgba(255, 255, 255, 0.04);
            font-weight: 700;
        }

        .copy-field-wrapper button {
            min-height: 32px;
            flex: 0 0 auto;
            border-color: #18aa41;
            color: #fff;
            font-size: 11px;
            background: #18aa41;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            position: absolute;
            right: 8px;
            top: 10px;
        }

        .detail-panel-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            color: #ffff2a;
            font-size: 11px;
            text-transform: uppercase;
        }

        .bank-option-field {
            position: relative;
        }

        .bank-option-field,
        .deposit-channel-field,
        .pg-bank-option-field {
            overflow: visible;
            z-index: 2;
        }

        .bank-info-box {
            display: flex;
            margin-top: 14px;
            border: 1px solid #ffff2a;
            border-radius: 6px;
            padding: 17px 14px;
            width: 100%;
            justify-content: space-between;
            gap: 10px;
        }

        .bank-info-labels,
        .bank-info-values {
            display: grid;
            gap: 14px;
        }

        .bank-info-labels {
            color: #ffff2a;
            padding-top: 8px;
            padding-right: 15px;
            border-right: 1px solid #96959563;
            font-size: 11px;
        }

        .bank-info-values {
            border-top: 1px solid transparent;
            font-size: 11px;
            color: #fff;
        }

        .bank-info-values div {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .bank-info-values button {
            min-height: 25px;
            padding: 0 13px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
        }

        .bank-info-values .bank-copy-button {
            border-color: #18aa41;
            color: #fff;
            background: #18aa41;
        }

        .bank-info-values em {
            width: max-content;
            padding: 5px 14px;
            border-radius: 6px;
            color: #fff;
            font-style: normal;
            background: #18aa41;
        }

        .bank-form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px 46px;
            margin-top: 16px;
        }

        input {
            box-sizing: border-box;
            min-height: 48px;
            height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 6px;
            color: #fff;
            font-size: 11px;
            font-weight: 500;
            line-height: 48px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
                rgba(20, 21, 22, 0.86);
            box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
            width: 100%;
            padding: 0 16px;
        }

        .upload-field {
            grid-column: 1 / -1;
        }

        .upload-field span {
            display: flex;
            min-height: 44px;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            color: #d8c2a6;
            background: rgba(255, 255, 255, 0.04);
        }

        #depoDateTime::-webkit-calendar-picker-indicator {
            display: block;
            width: 25px;
            height: 26px;
            margin-left: 6px;
            cursor: pointer;
            opacity: 1;
            filter: none;
            background: url("../images/revamp/icon-calendar.webp") center / 18px 18px no-repeat;
        }
    }

    .promotion-section {
        display: grid;
    }

    .promotion-select,
    .promotion-menu button {
        display: grid;
        grid-template-columns: 1fr 36px;
        align-items: center;
        gap: 20px;
        width: 100%;
        min-height: 116px;
        padding: 16px 22px;
        border: 1px solid #f5bd22;
        border-radius: 15px;
        color: #fff;
        text-align: left;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.82));
        box-shadow: inset 0 0 28px rgba(245, 189, 34, 0.04), 0 0 15px rgba(245, 189, 34, 0.15);
    }

    .promotion-select {
        min-height: 40px;
        line-height: normal;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
    }

    .promotion-select .promotion-copy {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }

    .promotion-select strong,
    .promotion-menu strong {
        display: block;
        color: #f5bd22;
        font-size: 13px;
        line-height: 1.12;
        text-transform: none;
    }

    .promotion-default-label {
        display: inline-grid;
        min-height: 24px;
        place-items: center;
        padding: 2px 10px;
        border-radius: 999px;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        vertical-align: middle;
        background: linear-gradient(180deg, #62f17a 0%, #19b842 52%, #087b25 100%);
    }

    .promotion-select small,
    .promotion-menu small {
        display: block;
        width: 100%;
        margin-top: 4px;
        color: #f7f7f7;
        font-size: 11px;
        line-height: 1.16;
    }

    .promotion-arrow {
        position: relative;
        display: grid;
        min-height: 30px;
        place-items: center;
        border-left: 0;
        font-size: 34px;
    }

    .promotion-arrow::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        content: "";
        background: url("../images/revamp/icon-gold-divider.webp") center / 100% 100% no-repeat;
    }

    .promotion-arrow::after {
        display: block;
        width: 22px;
        height: 22px;
        content: "";
        background: url("../images/revamp/icon-drop-down-promotion.webp") center / contain no-repeat;
        transition: transform 0.2s ease;
    }

    .promotion-select.active .promotion-arrow::after {
        background-image: url("../images/revamp/icon-hide-icon-promotion.webp");
        transform: none;
    }

    .promotion-menu {
        display: grid;
        gap: 10px;
    }

    .promotion-menu.hidden {
        display: none;
    }

    .promotion-menu button {
        grid-template-columns: 1fr 28px;
        min-height: 92px;
        padding: 10px 16px;
        border: 0;
        border-radius: 9px;
        box-shadow: none;
    }

    .promotion-menu button i {
        display: block;
        width: 24px;
        height: 24px;
        border: 2px solid #f5bd22;
        border-radius: 50%;
    }

    .promotion-menu button.selected i {
        background: #f5bd22;
    }

    .promotion-select:disabled {
        cursor: not-allowed;
        opacity: 0.48;
    }
}

.deposit-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 7px 4px;
    gap: 0;
    margin: 14px 20px 0;
    border: 0;
    border-radius: 15px;
    background: rgba(48, 48, 48, 0.94);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    position: sticky;
    z-index: 5;
    visibility: visible;
    opacity: 1;
    bottom: 0;
    margin-bottom: 80px;
}

.deposit-summary div {
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    gap: 4px;
    min-height: 50px;
    align-content: center;
}

.deposit-summary div:nth-child(3) {
    border-right: 0;
}

.deposit-summary span {
    font-size: 9px;
    line-height: 1.05;
    color: #f7f7f7;
}

.deposit-summary strong {
    font-size: 18px;
}

.deposit-summary .green {
    color: #38e84f;
}

.deposit-summary .gold-button {
    align-items: center;
    justify-content: center;
    font-weight: 900;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    font-size: 16px;
    justify-self: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    line-height: 1.05;
    background: linear-gradient(180deg, #35e35d 0%, #13a534 48%, #06721f 100%);
    box-shadow: 0 0 20px rgba(36, 214, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.deposit-summary small {
    display: block;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
}

/* end of mydeposit */

/* mybalance */
.balance-panel {
    margin-top: 10px;
    font-size: 11px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    h2 {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        min-height: 42px;
        margin: 0 0 12px;
        border-bottom: 0;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        text-transform: capitalize;
    }

    h2::before {
        display: block;
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        background-size: 42px 42px;
        flex: 0 0 42px;
        content: "";
        background: url("../images/revamp/icon_balance-gold.webp") center / contain no-repeat;
    }

    .balance-row,
    .balance-total {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(112px, auto) 34px 34px;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        padding: 0 10px;
        font-size: 11px;
    }

    .balance-total {
        min-height: 50px;
        margin-top: 26px;
        border: 1px solid rgba(255, 191, 45, 0.52);
        border-radius: 8px;
        background: transparent;
        grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
    }

    .balance-row strong,
    .balance-total strong,
    .balance-panel span {
        font-size: 11px;
    }

    .balance-row strong,
    .balance-total strong {
        color: #e9e9e9;
        font-weight: 500;
        line-height: 1.2;
    }

    .balance-total strong {
        justify-self: start;
    }

    .balance-total span {
        color: #f6bd42;
        font-size: 16px;
        font-weight: 800;
    }

    .balance-list {
        display: grid;
        gap: 0;
    }

    .balance-row {
        grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
        min-height: 48px;
        gap: 7px;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: #e9e9e9;
        background: transparent;
    }

    .amount-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
    }

    .amount-wrapper::before {
        content: "MYR";
        font-size: 14px;
        margin-right: -4px;
        font-weight: 400;
    }

    .balance-in,
    .balance-out {
        min-height: 26px;
        font-size: 11px;
        border-radius: 4px;
        font-weight: 500;
        background: transparent;
        width: 34px;
        text-transform: uppercase;
    }

    .balance-in {
        color: #00e66c;
        border: 1px solid #00c95b;
    }

    .balance-out {
        border: 1px solid #ffc322;
        color: #ffc322;
    }

    .transfer-all-button {
        display: block;
        width: 100%;
        min-height: 46px;
        margin: 14px auto 0;
        border-radius: 7px;
        font-weight: 700;
        font-size: 13px;
        border: 0;
        color: #fff;
        background: linear-gradient(180deg, #35e35d 0%, #13a534 48%, #06721f 100%);
        box-shadow: 0 0 20px rgba(36, 214, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .expend-internal-content ul {
        padding: 10px 0 10px;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
        display: grid;
        gap: 6px;
    }
}

/* end of mybalance */

/* mywithdrawal */
.withdraw-panel {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    .withdraw-panel-head {
        display: block;
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .account-page-heading__icon {
        display: grid;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
    }

    .account-page-heading__icon img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .account-page-heading__title {
        min-width: 0;
        line-height: 1;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 17px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
    }

    .withdraw-method-card {
        position: relative;
        display: grid;
        width: 136px;
        min-height: 76px;
        place-items: center;
        padding: 8px 26px 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 7px;
        background: rgba(42, 42, 42, 0.88);
        box-shadow: inset 0 0 16px rgba(255, 213, 48, 0.08);
    }

    .withdraw-method-card.selected {
        border: 1px solid #d9ad38;
    }

    .withdraw-method-icon {
        width: 54px;
        height: 38px;
        background: url("../images/revamp/weclub-manual-bank-transfer.webp") center / contain no-repeat;
    }

    .withdraw-method-card strong {
        font-size: 12px;
        text-align: center;
    }

    .withdraw-check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border: 2px solid rgb(78, 78, 78);
        border-radius: 50%;
    }

    .withdraw-method-card.selected .withdraw-check {
        border: 2px solid #ffe46d;
        background: url("../images/revamp/icon-checklist.webp") center / 72% 72% no-repeat,
            linear-gradient(180deg, rgba(255, 224, 82, 0.98), rgba(232, 149, 16, 0.98));
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.62), 0 0 12px rgba(255, 199, 48, 0.62);
    }

    hr {
        margin: 20px 0 22px;
        border: 0;
        border-top: 1px solid #d9ad38;
    }

    .withdraw-form {
        position: relative;
        display: grid;
        gap: 18px;
    }

    .withdraw-form label.form-label {
        display: grid;
        gap: 6px;
        color: #f4f4f4;
        font-size: 13px;
        font-weight: 700;
        position: relative;
        text-transform: capitalize;
    }

    .withdraw-select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 0 16px;
        text-align: left;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 48px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        min-height: 48px;
        height: 48px;
    }

    .withdraw-select i {
        width: 46px;
        height: 34px;
        background-position: right 8px center;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        background: url("..//images/revamp/icon-drop-down-promotion.webp") right 6px center / 16px 16px no-repeat;
    }

    .withdraw-bank-type-dropdown,
    .withdraw-bank-dropdown,
    .withdraw-bank-account-dropdown {
        position: absolute;
        right: 0;
        left: 0;
        top: calc(100% - 5px);
        z-index: 45;
        display: grid;
        max-height: 320px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.32);
        background: #151515;
    }

    .withdraw-bank-dropdown.hidden,
    .withdraw-bank-type-dropdown.hidden,
    .withdraw-bank-account-dropdown.hidden {
        display: none;
    }

    .withdraw-bank-dropdown button,
    .withdraw-bank-type-dropdown button,
    .withdraw-bank-account-dropdown button {
        min-height: 28px;
        padding: 0px 10px;
        border: 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        background: #151515;
    }

    .withdraw-bank-dropdown button:hover,
    .withdraw-bank-type-dropdown button:hover,
    .withdraw-bank-account-dropdown button:hover,
    .withdraw-bank-dropdown button.selected,
    .withdraw-bank-type-dropdown button.selected,
    .withdraw-bank-account-dropdown button.selected {
        background: rgba(255, 255, 255, 0.2);
    }

    .withdraw-form input {
        width: 100%;
        font-weight: 500;
        line-height: 48px;
        padding: 0 22px;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        min-height: 48px;
        height: 48px;
    }

    .withdraw-form small {
        margin-top: 2px;
        padding-left: 12px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 11px;
        font-weight: 500;
    }

    .withdraw-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 140px;
        min-width: 140px;
        max-width: 100%;
        height: 35px;
        min-height: 35px;
        padding: 0 18px;
        border-radius: 7px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto;
        border: 0;
        color: #fff;
        background: linear-gradient(180deg, #35e35d 0%, #13a534 48%, #06721f 100%);
        box-shadow: 0 0 20px rgba(36, 214, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
        justify-self: center;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .withdraw-reminder {
        display: block;
        margin: 12px 0 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .withdraw-reminder p {
        margin: 0;
        color: #ffd21f;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.45;
        text-align: center;
        text-transform: capitalize;
    }

    .form-error {
        position: absolute;
        bottom: -22px;
    }
}

/* end of mywithdrawal */

/* mytransfer */
.transfer-panel {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    .transfer-panel-head {
        display: block;
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .account-page-heading__icon {
        display: grid;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
    }

    .account-page-heading__icon img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .account-page-heading__title {
        min-width: 0;
        line-height: 1;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 17px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
    }

    .transfer-form {
        position: relative;
        display: grid;
        gap: 18px;
    }

    .transfer-form .form-label {
        display: grid;
        gap: 14px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-transform: capitalize;
        position: relative;
    }

    .transfer-select {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px 0 22px;
        text-align: left;
        font-weight: 500;
        line-height: 48px;
        font-size: 11px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        min-height: 48px;
        height: 48px;
    }

    .transfer-select i {
        width: 46px;
        height: 34px;
        background-position: right 8px center;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        background: url("..//images/revamp/icon-drop-down-promotion.webp") right 6px center / 16px 16px no-repeat;
    }

    .transfer-select span {
        flex: 1;
        width: 250px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .transfer-from-dropdown,
    .transfer-to-dropdown {
        position: absolute;
        right: 0;
        left: 0;
        top: calc(100% - 10px);
        z-index: 45;
        display: grid;
        max-height: 320px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.32);
        background: #151515;
    }

    .transfer-from-dropdown.hidden,
    .transfer-to-dropdown.hidden {
        display: none;
    }

    .transfer-from-dropdown button,
    .transfer-to-dropdown button {
        min-height: 28px;
        padding: 10px 20px;
        border: 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        background: #151515;
    }

    .transfer-from-dropdown button:hover,
    .transfer-to-dropdown button:hover,
    .transfer-from-dropdown button.selected,
    .transfer-to-dropdown button.selected {
        background: rgba(255, 255, 255, 0.2);
    }

    .transfer-from-dropdown button.hidden,
    .transfer-to-dropdown button.hidden {
        display: none;
    }

    .transfer-form input {
        width: 100%;
        font-weight: 500;
        line-height: 48px;
        padding: 0 22px;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        min-height: 48px;
        height: 48px;
    }

    .transfer-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 140px;
        min-width: 140px;
        max-width: 100%;
        height: 35px;
        min-height: 35px;
        padding: 0 18px;
        border-radius: 7px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto;
        border: 0;
        color: #fff;
        background: linear-gradient(180deg, #35e35d 0%, #13a534 48%, #06721f 100%);
        box-shadow: 0 0 20px rgba(36, 214, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
        justify-self: center;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }
}

/* end of mytransfer */

/* myvoucher */
.voucher-panel {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    .voucher-panel-head {
        display: block;
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .account-page-heading__icon {
        display: grid;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
    }

    .account-page-heading__icon img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .account-page-heading__title {
        min-width: 0;
        line-height: 1;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 17px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
    }

    .voucher-hero-image {
        width: min(240px, 62vw);
        height: min(145px, 38vw);
        margin: 0 auto 12px;
        background: url("../images/revamp/redeem-your-voucher-here.jpg") center / contain no-repeat;
        filter: drop-shadow(0 16px 32px rgba(255, 191, 45, 0.22));
    }

    .voucher-content-title {
        position: relative;
        width: max-content;
        max-width: 100%;
        margin: 0 auto 30px;
        padding-bottom: 28px;
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.12;
        text-transform: capitalize;
        letter-spacing: 0;
        text-align: center;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: Arial, Helvetica, sans-serif;
    }

    .voucher-content-title::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: min(320px, 74vw);
        height: 1px;
        content: "";
        background: linear-gradient(90deg, rgba(255, 196, 46, 0), #ffc42e 38%, #ffc42e 62%, rgba(255, 196, 46, 0));
        transform: translateX(-50%);
    }

    p {
        margin-bottom: 24px;
        width: min(100%, 620px);
        margin: 0 auto 42px;
        color: rgba(255, 255, 255, 0.76);
        font-size: 11px;
        font-weight: 400;
        line-height: 1.32;
        text-transform: capitalize;
        text-align: center;
    }

    input {
        box-sizing: border-box;
        min-height: 48px;
        height: 48px;
        margin: 0 auto 42px;
        padding: 0 18px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 48px;
        text-align: left;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
            rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        display: block;
        min-width: 0;
        width: min(100%, 300px);
    }

    .voucher-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 140px;
        width: 180px;
        min-width: 180px;
        height: 35px;
        min-height: 35px;
        padding: 0 18px;
        border-radius: 7px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto;
        border: 0;
        color: #fff;
        background: linear-gradient(180deg, #35e35d 0%, #13a534 48%, #06721f 100%);
        box-shadow: 0 0 20px rgba(36, 214, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
        justify-self: center;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }
}

/* end of myvoucher */

/* myhistory */

.history-panel {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    .history-panel-head {
        display: block;
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .account-page-heading__icon {
        display: grid;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
    }

    .account-page-heading__icon img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .account-page-heading__title {
        min-width: 0;
        line-height: 1;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 17px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
    }

    .history-filter {
        display: grid;
        width: 100%;
        gap: 16px;
    }

    .history-transaction-field,
    .history-date-title {
        position: relative;
        width: 100%;
        gap: 6px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: grid;
    }

    .history-filter label {
        gap: 6px;
        color: #fff;
        font-weight: 700;
        margin-bottom: 0;
        width: 100%;
    }

    .history-select {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px 0 22px;
        text-align: left;
        font-weight: 500;
        line-height: 48px;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        min-height: 48px;
        height: 48px;
    }

    .history-select i {
        width: 46px;
        height: 34px;
        background-position: right 8px center;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        background: url("..//images/revamp/icon-drop-down-promotion.webp") right 6px center / 16px 16px no-repeat;
    }

    .history-select span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .history-menu-dropdown {
        position: absolute;
        right: 0;
        left: 0;
        top: calc(100% + 2px);
        z-index: 45;
        display: grid;
        max-height: 320px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.32);
        background: #151515;
    }

    .history-menu-dropdown.hidden {
        display: none;
    }

    .history-menu-dropdown button {
        min-height: 28px;
        padding: 0px 20px;
        border: 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        background: #151515;
    }

    .history-menu-dropdown button:hover,
    .history-menu-dropdown button.selected {
        background: rgba(255, 255, 255, 0.2);
    }

    .history-form-group {
        display: grid;
        width: 100%;
        gap: 6px;
    }

    .history-date-range {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        gap: 8px;
        align-items: center;
        box-sizing: border-box;
        display: grid;
    }

    .history-date-field {
        min-height: 48px;
    }

    .history-date {
        min-height: 48px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), rgba(20, 21, 22, 0.86);
        box-shadow: inset 0 0 15px rgba(255, 196, 48, 0.03);
        padding: 0 16px 0 18px;
        width: 100%;
        max-width: 100%;
        display: block;
        color-scheme: dark;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        align-self: center;
        align-content: center;
    }

    .history-date::-webkit-calendar-picker-indicator {
        display: block;
        width: 25px;
        height: 26px;
        margin-left: 6px;
        cursor: pointer;
        opacity: 1;
        filter: none;
        background: url("..//images/revamp/icon-calendar.webp") center / 18px 18px no-repeat;
    }

    .history-date-separator {
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
    }

    .history-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 140px;
        min-width: 140px;
        max-width: 100%;
        height: 35px;
        min-height: 35px;
        padding: 0 18px;
        border-radius: 7px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto;
        border: 0;
        color: #fff;
        background: linear-gradient(180deg, #35e35d 0%, #13a534 48%, #06721f 100%);
        box-shadow: 0 0 20px rgba(36, 214, 78, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
        justify-self: center;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    tr.odd {
        background-color: transparent;
    }

    tr.even {
        background-color: transparent;
    }

    tr.odd td.sorting_1 {
        background-color: transparent;
    }

    tr.even td.sorting_1 {
        background-color: transparent;
    }

    table.dataTable td,
    table.dataTable>thead>tr>td {
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 0 !important;
    }

    table.dataTable>thead:first-child>tr:first-child>td {
        border-top: 0;
    }

    table.dataTable td.tab-top {
        font-weight: bold;
        line-height: 25px;
        height: 23px;
        text-align: center;
    }

    .table>tbody>tr {
        height: 50px;
        color: white;
    }

    .table td {
        border: 0;
        vertical-align: inherit !important;
        text-align: center;
        font-size: 11px;
    }

    td.tdL {
        text-align: left;
    }

    td.tdC {
        text-align: center;
    }

    td.tdR {
        text-align: right;
    }

    td.tdF {
        text-align: justify;
    }

    td.tdH {
        display: none;
    }

    .table-hover>tbody>tr:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    td.sorting_1 a {
        color: #f6bc30 !important
    }

    #betHistoryTable_3_wrapper .table-cell {
        display: table-cell;
        padding: 8px 4px;
    }

    table.dataTable td.tab-top {
        line-height: 1.5;
    }

    #depositTable,
    #walletHistoryTable,
    #promoHistoryTable,
    #betHistoryTable,
    #betHistoryTable_2,
    #betHistoryTable_3 {
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 6px;
        margin-bottom: 0;
    }

    .table-row-header {
        font-weight: 800;
        line-height: 25px;
        height: 23px;
        font-size: 15px;

        th {
            height: 46px;
            border-right: 1px solid rgba(255, 255, 255, 0.18);
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
            border-top: none;
            color: #fff;
            text-align: center;
            vertical-align: inherit;
            background: linear-gradient(180deg, #1d8c6c 0%, #15674f 100%);
            font-size: 11px;
            padding-right: 2px;
            padding-left: 2px;
        }
    }

    .dataTables_empty {
        text-align: center;
        height: 140px;
        font-size: 11px;
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    .dataTables_info {
        width: 100%;
        text-align: center;
        font-size: 11px;
        color: #f0d086;
        padding: 20px 0;
        border: 1px solid rgba(255, 190, 48, 0.28);
        border-top: 0;
        border-bottom: 0;
    }

    .dataTables_paginate {
        text-align: center;
        gap: 6px;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        border: 1px solid rgba(255, 190, 48, 0.28);
        border-top: 0;
        padding-bottom: 56px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        .paginate_button {
            align-content: center;
            min-width: 0px;
            min-height: 30px;
            border-radius: 7px;
            font-size: 11px;
            padding: 0 10px;
            border: 1px solid rgba(255, 190, 48, 0.28);
            color: #f0c95f !important;
            cursor: pointer;
            background: radial-gradient(circle at 50% 0, rgba(255, 211, 94, 0.18), transparent 32%), linear-gradient(180deg, #161719 0%, #0b0b0c 100%);
            box-shadow: inset 0 0 12px rgba(255, 190, 48, 0.08);
        }

        span {
            display: flex;

            .paginate_button {
                min-width: 20px;
                font-size: 11px;
            }

            .paginate_button.current {
                display: block;
                border-color: rgba(255, 191, 45, 0.95);
                box-shadow: 0 0 16px rgba(255, 191, 45, 0.18), inset 0 0 16px rgba(255, 191, 45, 0.09);
                font-weight: 800;
                color: rgba(255, 191, 45, 0.95) !important;
            }
        }
    }

    .rollover-status {
        margin-top: 48px;
        padding: 18px 16px 22px;
        border: 1px solid rgba(255, 190, 48, 0.28);
        border-radius: 7px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 44%), linear-gradient(180deg, #0c0c0d 0%, #050505 100%);
    }

    .rollover-status h3 {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 14px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
    }

    .rollover-status p {
        position: relative;
        margin: 0 0 18px;
        padding: 0 0 14px 22px;
        border-bottom: 1px dashed rgba(255, 199, 30, 0.92);
        color: #ffd21f;
        font-size: 11px;
        line-height: 1.45;
        font-style: italic;
    }

    .rollover-status p::before {
        position: absolute;
        left: 0;
        top: 1px;
        width: 14px;
        height: 14px;
        border: 1px solid #ffd21f;
        border-radius: 50%;
        content: "i";
        color: #ffd21f;
        font-size: 10px;
        font-style: normal;
        font-weight: 900;
        line-height: 13px;
        text-align: center;
    }

    .rollover-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        display: grid;
    }

    .rollover-card {
        position: relative;
        display: grid;
        min-height: 84px;
        padding: 16px 14px 16px 80px;
        align-content: center;
        overflow: hidden;
        border: 1px solid rgba(255, 199, 30, 0.62);
        border-radius: 7px;
        background: linear-gradient(90deg, rgba(255, 199, 30, 0.14), rgba(255, 199, 30, 0.03) 48%, rgba(255, 199, 30, 0.1)),
            #10130f;
        box-shadow: 0 0 16px rgba(255, 199, 30, 0.22), inset 0 0 22px rgba(255, 199, 30, 0.08);
    }

    .rollover-card::before {
        left: 18px;
        width: 44px;
        height: 44px;
        border-width: 4px;
        content: "";
        transform: translateY(-50%);
        background: url("../images/revamp/icon_rollover-requirement.webp") center / contain no-repeat;
        box-shadow: none;
        position: absolute;
        top: 50%;
    }

    .rollover-card strong,
    .rollover-card span {
        display: block;
        min-height: 0;
        place-items: normal;
        text-align: left;
        background: transparent;
    }

    .rollover-card strong {
        color: #ffd21f;
        line-height: 1.2;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .rollover-card span {
        margin-top: 6px;
        color: #fff;
        font-size: 28px;
        font-weight: 400;
        line-height: 1;
    }

    .rollover-card-green {
        border-color: rgba(40, 227, 87, 0.62);
        background: linear-gradient(90deg, rgba(40, 227, 87, 0.16), rgba(40, 227, 87, 0.03) 48%, rgba(40, 227, 87, 0.12)),
            #07150d;
        box-shadow: 0 0 16px rgba(40, 227, 87, 0.22), inset 0 0 22px rgba(40, 227, 87, 0.08);
    }

    .rollover-card-green::before {
        border: 0;
        background: url("../images/revamp/icon_accumulated-rollover.webp") center / contain no-repeat;
        box-shadow: none;
    }

    .rollover-card-green strong {
        color: #49e43c;
    }

    .rollover-status small {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 20px;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
    }

    .rollover-status small::before {
        width: 15px;
        height: 15px;
        content: "";
        background: url("../images/revamp/icon-last-update.webp") center / contain no-repeat;
    }

    .rollover-status small b,
    .rollover-status small time {
        color: #ffc400;
    }
}

/* end of myhistory */

/* myinbox */
.message-panel {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 13px;
    box-sizing: border-box;
    width: calc(100% - (13px * 2));
    max-width: none;
    margin-right: auto;
    margin-left: auto;

    .message-panel-head {
        display: block;
        margin-top: 6px;
        margin-bottom: 22px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .account-page-heading__icon {
        display: grid;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        place-items: center;
    }

    .account-page-heading__icon img {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .account-page-heading__title {
        min-width: 0;
        line-height: 1;
        color: transparent;
        background: linear-gradient(45deg, #ae8625 0%, #f7ef8a 25%, #d2ac47 50%, #edc967 75%, #ae8625 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        padding: 0;
        font-size: 17px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
        text-transform: capitalize;
    }

    .message-table-wrap {
        margin-top: 15px;
        border-radius: 7px;
    }

    .message-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(14, 15, 17, 0.92);
    }

    .message-table th {
        height: 40px;
        padding: 0 18px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        background: linear-gradient(180deg, #1d8a68 0%, #14684f 100%);
    }

    .message-table th,
    .message-table td {
        border-right: 1px solid rgba(255, 255, 255, 0.18);
    }

    .message-table th:nth-child(3),
    .message-table td:nth-child(3) {
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        vertical-align: middle;
    }

    .message-table th:last-child,
    .message-table td:last-child {
        border-right: 0;
    }

    .message-table td {
        min-height: 78px;
        padding: 10px;
        color: #fff;
        font-size: 11px;
        line-height: 1.45;
        background: rgba(12, 13, 15, 0.92);
    }

    .message-table td:first-child,
    .message-table td:last-child {
        text-align: center;
    }

    .message-table td:nth-child(2) {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: 0;
        text-align: center;
    }

    .message-table tr {
        background-color: unset;
    }


    .message-table tr .tdH {
        display: none;
    }

    .message-table tr.pm_bold {
        font-weight: bold;
    }

    .message-table td:nth-child(3) .message-delete {
        margin-right: auto;
        margin-left: auto;
    }

    .message-delete {
        position: relative;
        display: inline-grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 0;
        color: rgba(255, 255, 255, 0.86);
        background: transparent;
    }

    .message-delete span {
        position: relative;
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 0;
        background: url("../images/revamp/icon-delete.webp") center / contain no-repeat;
        font-size: 11px;
    }

    .message-table td span {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.75;
    }

    .dataTables_info {
        font-size: 11px;
        padding: 5px 5px 5px 0px;
        width: 100%;
        text-align: center;
        margin-top: 16px;
        color: rgba(255, 255, 255, 0.72);
        float: none;
    }

    .dataTables_paginate {
        float: none;
        margin: 10px 0;
        display: flex;
        justify-content: center;
        gap: 8px;
        width: 100%;

        span {
            display: flex;
            gap: 8px;
        }

        .paginate_button {
            display: block;
            min-width: 42px;
            min-height: 32px;
            padding: 0 4px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.72) !important;
            font-size: 9px;
            align-content: center;
            text-align: center;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
        }

        .paginate_button.current {
            min-width: 48px;
            border-color: rgba(255, 191, 45, 0.95);
            color: #ffc42e !important;
            font-weight: 800;
            box-shadow: 0 0 16px rgba(255, 191, 45, 0.18), inset 0 0 16px rgba(255, 191, 45, 0.09);
        }
    }
}

/* endo of myinbox */