/* @ Design System */
:root {
    --vz-body-font-family: 'Noto Serif Thai';
    --vz-btn-font-family: 'Noto Sans Thai';
    /*--vz-body-font-family: 'Noto Serif Thai';
    --vz-btn-font-family: 'Noto Sans Thai';*/
    --vz-body-font-size: 14px;
    --vz-body-color: #474747;
    --vz-btn-font-size: 14px;
    --vz-body-font-weight: 500;
    --vz-success-rgb: 0,193,124;
    --vz-danger-rgb: 246,70,70;
    --vz-vertical-menu-bg-dark: #151515;
    --vz-vertical-menu-item-color-dark: #f6f6f6;
    --vz-vertical-menu-sub-item-color-dark: #f6f6f6;
    --vz-vertical-menu-title-color-dark: #50A198;
    --color-bg-hover: linear-gradient(90deg, #0D2A27 0%, #1A534D 50%, #9BCCC7 100%);
    --color-bg-sub-item: #1f7e7b;
    --color-bg-customer: 53, 119, 241;
    --color-bg-deposit: 0, 193, 124;
    --color-bg-withdraw: 240, 101, 72;
    --color-bg-hover-customer: 8, 64, 166;
    --color-bg-hover-deposit: 10, 145, 97;
    --color-bg-hover-withdraw: 171, 37, 9;
}

.modal {
    --vz-modal-zindex: 1350;
}

body {
    font-size: var(--vz-body-font-size);
    /*background-image: linear-gradient(to right, #191d1c, #193d3a,#191d1c);*/
    background-image: url('../assets/images/bg-minigame-oper.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flatpickr-calendar.open {
    z-index: 1350;
}

.ck.ck-toolbar {
    background-color: #F4F0FF !important;
    background-image: linear-gradient(90deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%) !important;
}

.ck .ck-placeholder:before {
    color: #545454 !important;
}

.ck.ck-tooltip {
    background: transparent !important;
    padding: 0 !important;
}

.ck.ck-tooltip .ck-tooltip__text {
    background: #1f7e7b !important;
    padding: .25rem .5rem;
    box-sizing: content-box;
    color: #FFF !important;
    border-radius: .25rem;
    box-shadow: 1px 1px 2px 0px #00000066;
}

.content-title-box {
    font-size: 14px !important;
    font-weight: 700 !important
}

.form-control, .form-select, .choices__inner, .input-font-custom {
    font-size: 14px
}

.choices__list--dropdown .choices__item {
    font-size: 14px !important
}

.badge {
    --vz-badge-font-size: 12px;
    font-size: var(--vz-badge-font-size);
}

.btn-font-custom {
    font-family: var(--vz-btn-font-family);
    font-size: 14px !important;
    font-weight: 700 !important
}

.table-recover-font-custom {
    font-size: 14px !important;
    font-weight: 500
}

.table-recover-font-custom th {
    font-weight: 700 !important
}

:is(.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6) {
    font-weight: 700;
    font-family: 'Noto Sans Thai' !important
}

.table-custom-theme-green thead tr {
    background: linear-gradient(0deg, #1A534D 0%, #76B6B0 100%);
}

    .table-custom-theme-green thead tr th {
        font-size: 16px;
        color: #E9E9E9;
    }

.table-custom-theme-green tbody tr td {
    font-size: 13px;
    font-weight: 400;
    color: #E9E9E9;
}

.table-custom-theme-green tbody {
    border: none;
}

.header-delete-sms-template-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2A2A2A;
    padding: 13px 0 !important;
    color: #EB3333;
    font-size: 19px;
    font-weight: 700;
    line-height: 31.35px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border: 1px solid #72DCD9;
}

.header-looking-sending-sms-template-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2A2A2A;
    padding: 13px 0 !important;
    color: #3B9D9A;
    font-size: 19px;
    font-weight: 700;
    line-height: 31.35px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border: 1px solid #72DCD9;
}

.session-detail-data-wait-sending {
    display: flex;
    gap: 50px;
}

    .session-detail-data-wait-sending .detail-data-wait-sending-1, .session-detail-data-wait-sending .detail-data-wait-sending-2 {
        width: 50%;
    }

        .session-detail-data-wait-sending .detail-data-wait-sending-1 .main-detail, .session-detail-data-wait-sending .detail-data-wait-sending-2 .main-detail {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

            .session-detail-data-wait-sending .detail-data-wait-sending-1 .main-detail .title, .session-detail-data-wait-sending .detail-data-wait-sending-2 .main-detail .title {
                width: 50%;
            }

            .session-detail-data-wait-sending .detail-data-wait-sending-1 .main-detail .detail, .session-detail-data-wait-sending .detail-data-wait-sending-2 .main-detail .detail {
                width: 50%;
            }

            .session-detail-data-wait-sending .detail-data-wait-sending-1 .main-detail .title h4, .session-detail-data-wait-sending .detail-data-wait-sending-2 .main-detail .title h4 {
                font-size: 13px;
                font-weight: 700;
                line-height: 21.45px;
                color: #E9E9E9;
            }

            .session-detail-data-wait-sending .detail-data-wait-sending-1 .main-detail .detail h4, .session-detail-data-wait-sending .detail-data-wait-sending-2 .main-detail .detail h4 {
                font-size: 13px;
                font-weight: 400;
                line-height: 21.45px;
                color: #E9E9E9;
            }


            .session-detail-data-wait-sending .detail-data-wait-sending-1 .main-detail .detail .text-color-green-wight, .session-detail-data-wait-sending .detail-data-wait-sending-2 .main-detail .detail .text-color-green-wight {
                font-size: 13px;
                font-weight: 700;
                line-height: 21.45px;
                color: #72DCD9;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 170px;
            }

            .modal-body-custom-delete-template {
                padding: 24px;
                background-color: #151515;
                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;
                border-left: 1px solid #72DCD9;
                border-right: 1px solid #72DCD9;
                border-bottom: 1px solid #72DCD9;
            }

.session-header-filter-agent {
    display: flex;
    margin-bottom: 24px;
}

    .session-header-filter-agent .zone-filter-agent {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .session-header-filter-agent .zone-filter-agent .box-agent {
            background-color: #2A2A2A;
            padding: 1.5px 8px;
            border-radius: 25px;
            border: 1px solid #545454;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            line-height: 21.45px;
            color: #E9E9E9;
        }

            .session-header-filter-agent .zone-filter-agent .box-agent.active {
                background-color: #2B8B81;
                border: 1px solid #2B8B81;
            }

.session-input-filter-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.btn-search-filter-customer-list {
    width: 96px;
    background-color: #2B8B81;
    border: none;
    border-radius: 8px;
    color: #E9E9E9;
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
}

    .btn-search-filter-customer-list:disabled {
        background-color: #1E1E1E;
        color: #3F3F3F;
    }

    .text-counting-filter-customer-list {
        width: 130px;
        text-align: right;
    }

.btn-sending-message-in-table {
    background-color: transparent;
    border: 1px solid #2B8B81;
    border-radius: 8px;
    padding: 4px 16px;
    color: #2B8B81;
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
}

    .btn-sending-message-in-table:disabled {
        background-color: #151515;
        border: 1px solid #3F3F3F;
        color: #3F3F3F;
    }

.box-noti-error-message {
    cursor: pointer;
    position: relative;
}

    .box-noti-error-message .box-error-message {
        background: #3F3F3F;
        box-shadow: 6px 6px 10px 0px #00000033;
        align-self: flex-end;
        position: absolute;
        bottom: -30px;
        left: -5px;
    }

        .box-noti-error-message .box-error-message::after {
            content: '';
            position: absolute;
            top: -10px;
            right: 3px;
            width: 0;
            height: 0;
            border-bottom: 10px solid #3F3F3F;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }

    .btn-sending-message-th-table {
        background-color: #1A534D;
        color: #C1E1DF;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        border: 1px solid #C1E1DF;
        padding: 4px 26px;
        border-radius: 8px;
    }

    .btn-sending-message-th-table:disabled {
        background-color: transparent;
        color: #E9E9E9;
        border: none;
    }

.text-counting-filter-customer-list span {
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    color: #3B9D9A;
}

.session-detail-sending-date-and-status .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 26.4px;
    color: #E1E1E1;
}

.session-detail-sending-date-and-status .detail {
    background-color: #202020;
    border-radius: 100px;
    padding: 4px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .session-detail-sending-date-and-status .detail .detail-1 {
        display: flex;
    }

        .session-detail-sending-date-and-status .detail .detail-1 .title-date {
            font-size: 13px;
            font-weight: 700;
            line-height: 21.45px;
            color: #E9E9E9;
            margin-right: 17px;
        }

        .session-detail-sending-date-and-status .detail .detail-1 .detail-date {
            font-size: 13px;
            font-weight: 400;
            line-height: 21.45px;
            color: #E9E9E9;
        }

    .session-detail-sending-date-and-status .detail .detail-2 .text-status-detail-wait-sending-success {
        font-size: 13px;
        font-weight: 700;
        line-height: 21.45px;
        color: #72DCD9;
    }

    .session-detail-sending-date-and-status .detail .detail-2 .text-status-detail-wait-sending-danger {
        font-size: 13px;
        font-weight: 700;
        line-height: 21.45px;
        color: #D70936;
    }

.session-counting-detail-wait-sending-massage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px;
}

    .session-counting-detail-wait-sending-massage .title {
        font-size: 13px;
        font-weight: 400;
        line-height: 21.45px;
        color: #B5B5B5;
        margin-bottom: 3px;
    }

    .session-counting-detail-wait-sending-massage .detail {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #E9E9E9;
    }

.session-sum-condition-wait-sending-massaage {
    display: flex;
    justify-content: space-around;
    gap: 24px;
}

    .session-sum-condition-wait-sending-massaage .box {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        background-color: #1E1E1E;
        border-radius: 8px;
        height: 67px;
    }

        .session-sum-condition-wait-sending-massaage .box .title {
            font-size: 13px;
            font-weight: 400;
            line-height: 21.45px;
            color: #CFCFCF;
        }

        .session-sum-condition-wait-sending-massaage .box .text-is-done-wait-sending-success {
            font-size: 19px;
            font-weight: 700;
            line-height: 31.35px;
            color: #72DCD9;
        }

        .session-sum-condition-wait-sending-massaage .box .text-is-done-wait-sending-danger {
            font-size: 19px;
            font-weight: 700;
            line-height: 31.35px;
            color: #D70936;
        }

        .session-sum-condition-wait-sending-massaage .box .credit-used {
            font-size: 19px;
            font-weight: 700;
            line-height: 31.35px;
            color: #72DCD9;
        }

.text-table-username-receiver {
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    color: #3B9D9A;
}

.text-status-counting-receiver-success {
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    color: #15996A;
}

.text-status-counting-receiver-waiting {
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    color: #B4881C;
}

.text-status-counting-receiver-unknown {
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    color: #8A8F98;
}

.text-status-counting-receiver-danger {
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    color: #EB3333;
}


.session-detail-delete-sms-template {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.icon-delete-template {
    margin-right: 20px;
}

.text-detail-delete-sms-template {
    font-size: 16px;
    font-weight: 400;
    color: #E9E9E9;
}

#headerDeleteTempale {
    color: #EB3333;
}

#headerDeleteWaitingSendMessage {
    color: #EB3333;
}

#textWeightColorLookingSending {
    color: #EB3333;
}

.layout-menu {
    width: 266px;
    background: unset;
    border: unset;
    box-shadow: none;
}

.text-detail-mini-game-custom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-btn-open-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40px;
    right: -24px;
}

/*.layout-btn-open-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: -24px;
}*/

.btn-buy-credit-sms {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    border-radius: 4px;
    background-color: #2B8B81;
    border: none;
    color: #E9E9E9;
    font-size: 11px;
    font-weight: 700;
    line-height: 18.15px;
}


.btn-buy-credit-sms:disabled {
    background-color: #1E1E1E;
    color: #3F3F3F;
}

.title-text-post-paid {
    font-size: 16px;
    font-weight: 700;
    line-height: 26.45px;
    color: #E9E9E9;
}

.session-mini-game-privilege {
    position: relative;
}

.btn-remove-chance-privilege {
    position: absolute;
    right: 0;
    width: 24px;
    height: 24px;
    top: 39px;
    cursor: pointer;
}

.body-setting-quantity-mini-game {
    display: flex;
    align-items: center;
    padding: 0 24px;
}

.title-setting-quantity-mini-game {
    width: 40%;
    text-align: left;
}

    .title-setting-quantity-mini-game h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        margin-bottom: 8px;
        color: #72DCD9;
    }

    .title-setting-quantity-mini-game h5 {
        font-size: 13px;
        font-weight: 700;
        line-height: 21.45px;
        margin-bottom: 0;
        color: #E9E9E9;
    }

.session-box-setting-quantity-mini-game {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

    .session-box-setting-quantity-mini-game .box-select-quantity {
        width: 106px;
        height: 107px;
        border-radius: 8px;
        cursor: pointer;
    }

        .session-box-setting-quantity-mini-game .box-select-quantity.active {
            border: 2px solid #76B6B0;
        }

        .session-box-setting-quantity-mini-game .box-select-quantity img {
            width: 100%;
        }

.body-setting-img-select-mini-game-step-1, .body-setting-img-select-mini-game-step-2, .body-setting-img-select-mini-game-step-3 {
    padding: 0 24px;
    margin-bottom: 30px;
}

.title-setting-img-select-mini-game-step-1 {
    text-align: left;
}

    .title-setting-img-select-mini-game-step-1 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #72DCD9;
        margin-bottom: 16px;
    }

        .title-setting-img-select-mini-game-step-1 h4 strong {
            color: red;
        }

.title-setting-img-select-mini-game-step-3 {
    text-align: left;
}

    .title-setting-img-select-mini-game-step-3 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #72DCD9;
        margin-bottom: 16px;
    }

.box-drop-custom-mini-game {
    margin-bottom: 16px;
}

    .box-drop-custom-mini-game .header-drop {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #1A534D;
        cursor: pointer;
        border-radius: 16px 16px 16px 16px;
    }

        .box-drop-custom-mini-game .header-drop.drop {
            border-radius: 16px 16px 0px 0px;
        }

            .box-drop-custom-mini-game .header-drop.drop .btn-drop-and-up {
                transform: rotate(180deg);
            }

    .box-drop-custom-mini-game .header-drop h4 {
        font-size: 13px;
        font-weight: 700;
        line-height: 21.45px;
        color: #E9E9E9;
    }

    .box-drop-custom-mini-game .header-drop .btn-drop-and-up {
        width: 15px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #769894;
        border-radius: 3px;
        cursor: pointer;
    }

        .box-drop-custom-mini-game .header-drop .btn-drop-and-up i {
            font-size: 9px;
            color: #fff;
        }

    .box-drop-custom-mini-game .body-drop-custom-mini-game {
        overflow: auto;
        height: 0px;
        padding: 0px;
        background: #2A2A2A;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .box-drop-custom-mini-game .header-drop.drop + .body-drop-custom-mini-game {
        overflow: auto;
        height: auto;
        padding: 16px;
    }

.session-select-radio-type-mini-game {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .session-select-radio-type-mini-game .box-select-radio-type-mini-game {
        width: 50%;
    }

        .session-select-radio-type-mini-game .box-select-radio-type-mini-game .img-select-type-radio-mini-game {
            width: 108px;
            height: 32px;
            margin: 7px 0px 0px 32px;
        }

            .session-select-radio-type-mini-game .box-select-radio-type-mini-game .img-select-type-radio-mini-game img {
                width: 100%;
            }

        .session-select-radio-type-mini-game .box-select-radio-type-mini-game .img-select-type-radio-mini-game-after-select {
            width: 242px;
            height: 141px;
            margin: 7px 0px 0px 32px;
        }

            .session-select-radio-type-mini-game .box-select-radio-type-mini-game .img-select-type-radio-mini-game-after-select img {
                width: 100%;
            }


.txt-title-form-check-radio-type-mini-game {
    font-size: 16px;
    font-weight: 400;
    color: #E9E9E9;
}

.session-upload-img-step-1 .title-upload-img-step-1 {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
}

    .session-upload-img-step-1 .title-upload-img-step-1 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #72DCD9;
        margin-right: 8px;
    }

    .session-upload-img-step-1 .title-upload-img-step-1 .txt-upload-img-step-1-grey-header {
        font-size: 9px;
        font-weight: 700;
        line-height: 13.65px;
        color: #ADADAD;
        margin-right: 3px;
    }

    .session-upload-img-step-1 .title-upload-img-step-1 .txt-upload-img-step-1-grey {
        font-size: 9px;
        font-weight: 400;
        line-height: 13.65px;
        color: #ADADAD;
        margin-right: 3px;
    }

    .session-upload-img-step-1 .title-upload-img-step-1 .txt-upload-img-step-1-yellow {
        font-size: 9px;
        font-weight: 400;
        line-height: 13.65px;
        color: #FFD500;
        margin-right: 3px;
    }

.session-upload-img-step-2 .title-upload-img-step-2 {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
}

    .session-upload-img-step-2 .title-upload-img-step-2 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #72DCD9;
        margin-right: 8px;
    }

    .session-upload-img-step-2 .title-upload-img-step-2 .txt-upload-img-step-2-grey-header {
        font-size: 9px;
        font-weight: 700;
        line-height: 13.65px;
        color: #ADADAD;
        margin-right: 3px;
    }

    .session-upload-img-step-2 .title-upload-img-step-2 .txt-upload-img-step-2-grey {
        font-size: 9px;
        font-weight: 400;
        line-height: 13.65px;
        color: #ADADAD;
        margin-right: 3px;
    }

    .session-upload-img-step-2 .title-upload-img-step-2 .txt-upload-img-step-2-yellow {
        font-size: 9px;
        font-weight: 400;
        line-height: 13.65px;
        color: #FFD500;
        margin-right: 3px;
    }

.session-upload-img-step-3 .title-upload-img-step-3 {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
}

    .session-upload-img-step-3 .title-upload-img-step-3 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #72DCD9;
        margin-right: 8px;
    }

    .session-upload-img-step-3 .title-upload-img-step-3 .txt-upload-img-step-3-grey-header {
        font-size: 9px;
        font-weight: 700;
        line-height: 13.65px;
        color: #ADADAD;
        margin-right: 3px;
    }

    .session-upload-img-step-3 .title-upload-img-step-3 .txt-upload-img-step-3-grey {
        font-size: 9px;
        font-weight: 400;
        line-height: 13.65px;
        color: #ADADAD;
        margin-right: 3px;
    }

    .session-upload-img-step-3 .title-upload-img-step-3 .txt-upload-img-step-3-yellow {
        font-size: 9px;
        font-weight: 400;
        line-height: 13.65px;
        color: #FFD500;
        margin-right: 3px;
    }

.session-box-upload-img {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-box-upload-img .box-upload-img {
    width: 72px;
    height: auto;
}

    .session-box-upload-img .box-upload-img .title-box-upload-img {
        text-align: center;
    }

        .session-box-upload-img .box-upload-img .title-box-upload-img h4 {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 4px;
            line-height: 18.15px;
        }

            .session-box-upload-img .box-upload-img .title-box-upload-img h4 strong {
                color: red;
            }

    .session-box-upload-img .box-upload-img .body-box-upload {
        width: 72px;
        height: 72px;
        box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 7px;
        position: relative;
        z-index: 0;
    }

        .session-box-upload-img .box-upload-img .body-box-upload::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1px;
            border-radius: inherit;
            background: linear-gradient(180deg, #50A198 0%, #FEDB6B 100%);
            -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
            mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .session-box-upload-img .box-upload-img .body-box-upload .img-default-box-upload-mini-game {
            width: 31px;
            height: 30px;
        }

    .session-box-upload-img .box-upload-img .btn-box-upload {
        padding: 3px 6.5px;
        font-size: 11px;
        font-weight: 700;
        line-height: 18.15px;
        color: #72DCD9;
        border: 1px solid #72DCD9;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .session-box-upload-img .box-upload-img .btn-box-upload img {
            width: 13px;
            height: 13px;
        }

.img-show-in-box-upload {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
}

.btn-close-img-mini-game {
    width: 12px;
    height: 12px;
    cursor: pointer;
    position: absolute;
    top: 1px;
    right: 5px;
}

.session-set-bg-screen-main {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

    .session-set-bg-screen-main .title {
        text-align: left;
    }

        .session-set-bg-screen-main .title h4 {
            font-size: 16px;
            font-weight: 700;
            line-height: 26.4px;
            color: #E9E9E9;
            margin-bottom: 25px;
        }

    .session-set-bg-screen-main .box-session-upload-img-bg-mini-game {
        margin-bottom: 25px;
    }

    .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 8px;
    }

        .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set {
            width: 64px;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 0;
            border-radius: 8px;
        }

        .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1px;
            border-radius: inherit;
            background: linear-gradient(180deg, #50A198 0%, #FEDB6B 100%);
            -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
            mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-default-bg-mb-mini-game {
                width: 28px;
                height: 28px;
            }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-bg-mb-show-in-box-upload {
                width: calc(100% - 12px);
                height: calc(100% - 12px);
            }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-default-bg-pc-mini-game {
                width: 28px;
                height: 28px;
            }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-bg-pc-show-in-box-upload {
                width: calc(100% - 12px);
                height: calc(100% - 12px);
            }


            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-default-bg-mb-display-mini-game {
                width: 28px;
                height: 28px;
            }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-bg-mb-display-show-in-box-upload {
                width: calc(100% - 12px);
                height: calc(100% - 12px);
            }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-default-bg-pc-display-mini-game {
                width: 28px;
                height: 28px;
            }

            .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .set-bg-img .box-set .img-bg-pc-display-show-in-box-upload {
                width: calc(100% - 12px);
                height: calc(100% - 12px);
            }

    .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .session-btn-upload-bg .title-btn-upload-bg {
        font-size: 13px;
        font-weight: 700;
        line-height: 21.45px;
        color: #E9E9E9;
        margin-bottom: 6px;
        text-align: left;
    }

    .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .session-btn-upload-bg .btn-upload-bg {
        width: 175px;
        font-size: 11px;
        font-weight: 700;
        line-height: 18.15px;
        color: #72DCD9;
        padding: 4px 0;
        border: 1px solid #72DCD9;
        border-radius: 4px;
        cursor: pointer;
    }

        .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .session-btn-upload-bg .btn-upload-bg img {
            width: 13px;
            height: 13px;
        }

    .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .footer-set-bg-direction {
        display: flex;
        gap: 4px;
    }

        .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .footer-set-bg-direction .txt-footer-set-bg-direction-header {
            font-size: 11px;
            font-weight: 700;
            line-height: 18.15px;
            color: #ADADAD;
        }

        .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .footer-set-bg-direction .txt-footer-set-bg-direction {
            font-size: 11px;
            font-weight: 400;
            line-height: 18.15px;
            color: #ADADAD;
        }

        .session-set-bg-screen-main .box-session-upload-img-bg-mini-game .footer-set-bg-direction .txt-footer-set-bg-direction-yellow {
            font-size: 11px;
            font-weight: 400;
            line-height: 18.15px;
            color: #FFD500;
        }

#btnLookingDataListUpload {
    color: #72DCD9;
    text-decoration: underline;
    font-size: 11px;
    font-weight: 700;
    line-height: 18.15px;
    cursor: pointer;
}

.btn-looking-data-list-upload.disabled {
    color: #3F3F3F !important;
    pointer-events: none;
}

#countingDataUploadDone {
    font-size: 16px;
    font-weight: 700;
    line-height: 26.4px;
    color: #3B9D9A;
}

.box-done-list, .box-fail-list {
    width: 50%;
}

    .box-done-list h4 {
        color: #3B9D9A;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
    }

    .box-done-list p {
        color: #3B9D9A;
        font-size: 13px;
        font-weight: 400;
        line-height: 21.45px;
    }

    .box-fail-list h4 {
        color: #EB3333;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
    }

    .box-fail-list p {
        color: #EB3333;
        font-size: 13px;
        font-weight: 400;
        line-height: 21.45px;
    }

.box-list-data-upload-all {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.session-set-color-and-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .session-set-color-and-title h4 {
        font-size: 16px;
        font-weight: 400;
        line-height: 26.4px;
        color: #E9E9E9;
    }

.btn-close-img-bg-mobile-mini-game, .btn-close-img-bg-pc-mini-game, .btn-close-img-bg-mb-display-mini-game, .btn-close-img-bg-pc-display-mini-game {
    width: 12px;
    height: 12px;
    cursor: pointer;
    position: absolute;
    top: 1px;
    right: 5px;
}

.color-main-operator h4 {
    color: #68C5C2 !important;
}

.title-setting-img-select-mini-game-step-2 {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

    .title-setting-img-select-mini-game-step-2 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #72DCD9;
        margin-bottom: 0;
        margin-right: 25px;
    }

    .title-setting-img-select-mini-game-step-2 .session-checkbox-step-2 {
        display: flex;
        align-items: center;
    }

        .title-setting-img-select-mini-game-step-2 .session-checkbox-step-2 h4 {
            font-size: 16px;
            font-weight: 400;
            line-height: 26.4px;
            color: #E9E9E9;
        }

        .title-setting-img-select-mini-game-step-2 .session-checkbox-step-2 p {
            font-size: 11px;
            font-weight: 400;
            line-height: 18.15px;
            color: #9C9C9C;
        }

.session-error-img-require {
    text-align: left;
}

    .session-error-img-require .txt-error-img-require {
        font-size: 10px;
        color: red;
    }


.btn-open-menu {
    border: none;
    padding: unset;
    width: 24px;
    height: 48px;
    border-radius: 0 10px 10px 0;
    background: #50A198;
}

.slide-menu-icon {
    color: #fff;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
}

.ff-secondary {
    font-family: 'Noto Sans Thai' !important;
}

.ft-natosansthai {
    font-family: 'Noto Sans Thai' !important;
}

.ft-natoserifthai {
    font-family: 'Noto Serif Thai' !important;
}

h1, .h1 {
    font-size: 32px; /* 2rem */
    line-height: 48px; /* 150% */
    letter-spacing: -.3px;
}

h2, .h2 {
    font-size: 29px; /* 1.8125rem */
    line-height: 44px; /* 151.724% */
    letter-spacing: -.3px;
}

h3, .h3 {
    font-size: 24px; /* 1.5rem */
    line-height: 40px; /* 151.724% */
    letter-spacing: -.1px;
}

h4, .h4 {
    font-size: 20px; /* 1.25rem */
    line-height: 32px; /* 160% */
}

h5, .h5 {
    font-size: 16px; /* 1rem */
    line-height: 28px; /* 175% */
    letter-spacing: .05px;
}

h6, .h6 {
    font-size: .75rem; /* 12px */
}

p, .p, p1, .p2, p3, p4 {
    font-family: "Noto Serif Thai";
    font-weight: 500;
}

.p1 {
    font-size: 16px;
    line-height: 28px; /* 175% */
    letter-spacing: -.05px;
}

.p2 {
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    letter-spacing: -.03px;
}

.p3 { /* Paragraph Small */
    font-size: 12px;
    line-height: 18px; /* 166.667% */
    letter-spacing: -.08px;
}

.p4 { /* Paragraph XS */
    font-size: 10px;
    line-height: 16px; /* 160% */
}

button, .btn, .btn1, .btn2, .btn3 {
    font-family: "Noto Sans Thai";
    font-weight: 700;
}

.btn, .btn1 {
    font-size: 14px;
    line-height: 20px; /* 142.857% */
}

.btn2 {
    font-size: 12px;
    line-height: 18px; /* 150% */
}

.btn3 {
    font-size: 10px;
    line-height: 16px; /* 160% */
}

.init-system {
    --vz-heading-color: #000;
}

/* @ Table System */

.system-table {
    --table-offset-x: 12px;
    --table-padding-x: 12px;
    --table-padding-y: .5rem;
    --table-row-height: 42px;
    --table-pagination-divide: 1.5rem;
    --table-pagination-padding-x: 1.5rem;
    width: calc(100% + (var(--card-padding, 0) * 2));
    position: relative;
    height: auto;
    margin-left: calc(var(--card-padding, 0) * -1);
    margin-right: calc(var(--card-padding, 0) * -1);
}

    .system-table.table-full {
        display: flex;
        flex-direction: column;
        max-height: 100%;
        flex: 1 0;
        overflow: auto;
    }

    .system-table > .table-body {
        overflow: auto;
    }

    .system-table .table-scrollable {
        width: 100%;
        max-width: 100%;
        overflow: auto;
        flex: 1 0;
    }

    .system-table .flex-none {
        flex: none;
    }

    .system-table .system-pagination {
        padding-top: var(--table-pagination-divide, 1.5rem);
    }

    .system-table .table-loading,
    .system-table .table-jumbotron {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
        .system-table .table-loading > lord-icon,
        .system-table .table-jumbotron > lord-icon {
            width: 75px;
            height: 75px;
        }

    .system-table table {
        width: 100%;
        border-collapse: collapse;
        white-space: nowrap;
    }

        .system-table table thead {
            position: sticky;
            top: 0;
            z-index: 1;
            background: linear-gradient(90deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
            /*border-bottom: 2px solid #3C2D8F;*/
        }
            .system-table table thead th {
                background: transparent;
            }

        .system-table table .system-table-row-last-in-sum {
            position: sticky;
            bottom: 0;
            box-shadow: 0px -3px 8px rgba(240, 240, 240, 1);
            background: linear-gradient(90deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%) !important;
            border-top: 2px solid #3C2D8F;
            border-bottom: 2px solid #3C2D8F;
        }

        .system-table table .system-table-row-last-in-sum td{
            font-weight: 700 !important;
        }

        .system-table table tbody tr {
            border-bottom: 1px solid #545454;
        }

.system-table-th-custom-red {
    color: #F64646;
    background-color: #FFF3F3;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #F64646;
}

.system-table-th-custom-purple {
    color: #50A198;
    background-color: #F3F1FF;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #50A198;
}

.system-table-th-custom-orange {
    color: #FF9500;
    background-color: #FFF4E6;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #FF9500;
}

.system-table-th-custom-blue {
    color: #3A61F1;
    background-color: #EBEFFE;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #3A61F1;
}

.system-table-th-custom-grey {
    color: #919191;
    background-color: #F6F6F6;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #919191;
}

.system-table-bg-deposit-custom {
    background-color: #EAFFF7 !important;
    border-radius: 15px !important;
    padding: 5px 10px !important;
}

.system-table-bg-withdraw-custom {
    background-color: #FFF3F3 !important;
    border-radius: 15px !important;
    padding: 5px 10px !important;
}
        .system-table table th {
            position: relative;
            /*padding: var(--table-padding-y) var(--table-padding-x);*/
            padding-top: var(--table-padding-y);
            padding-left: var(--table-padding-x);
            padding-right: var(--table-padding-x);
            padding-bottom: calc(var(--table-padding-y) + 2px);
            font-size: 14px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: -0.03px;
            background: transparent;
        }
            .system-table table th:not(.th-0)::after {
                content: ' ';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                border-bottom: 2px solid #50A198;
            }

        .system-table table .system-table-border-bottom-none::after {
            content: ' ';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-bottom: 0px solid !important;
        }

    .system-table table td {
        padding: var(--table-padding-y) var(--table-padding-x);
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.03px;
    }
        .system-table table tr td.tdx-0,
        .system-table table tr td.tdx-0:first-child,
        .system-table table tr td.tdx-0:last-child {
            padding-left: 0;
            padding-right: 0;
        }

        .system-table table tr td.tdy-0 {
            padding-top: 0;
            padding-bottom: 0;
        }

    .system-table table tr th:first-child,
    .system-table table tr td:first-child {
        padding-left: calc(var(--table-padding-x) + var(--table-offset-x));
    }

    .minigame-td tr td, .minigame-td tr th {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .system-table table tr th:last-child,
    .system-table table tr td:last-child {
        padding-right: calc(var(--table-padding-x) + var(--table-offset-x));
    }

    .system-table.table-height table tbody tr,
    .system-table table tbody tr.tr-height {
        height: var(--table-row-height);
    }
        .system-table table tbody tr.tr-height > td {
            padding-top: 0;
            padding-bottom: 0;
        }

    .system-table.table-hover table tbody tr:not(.tr-disabled):not(.no-hover):hover {
        background-color: #EBEFFE;
    }

    .system-table table tbody tr.tr-disabled {
        background-color: #FFF3F3;
    }

    .system-table table tbody .td-disabled {
        mix-blend-mode: luminosity;
        opacity: .4;
    }

/* @ Button System */

.system-btn {
    --btn-color: #FFF;
    --btn-bg-color: #50A198;
    --btn-bg-hover-color: #50A198;
    --btn-bg-passing-color: #1f7e7b;
    border-radius: 6px;
    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    height: 40px;
    padding: 0 18px;
    outline: none;
    border: none;
    box-shadow: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

    .system-btn > span {
        margin-left: .5rem;
        vertical-align: middle;
    }

    .system-btn:not(.btn-outline):not(.btn-a):hover {
        color: var(--btn-color);
        background-color: var(--btn-bg-hover-color);
    }

    .system-btn:not(.btn-outline):not(.btn-a):active {
        color: var(--btn-color) !important;
        background-color: var(--btn-bg-passing-color) !important;
    }

    .system-btn:not(.btn-outline):not(.btn-a):disabled {
        color: #C8C8C8;
        background-color: #F6F6F6;
    }

.system-btn.btn-outline {
    color: var(--btn-bg-color);
    border: 2px solid var(--btn-bg-color);
    background-color: transparent;
}
    .system-btn.btn-outline:hover {
        color: var(--btn-bg-hover-color);
        border: 2px solid var(--btn-bg-hover-color);
    }

    .system-btn.btn-outline:active {
        color: var(--btn-bg-passing-color) !important;
        background-color: transparent !important;
        border: 2px solid var(--btn-bg-passing-color);
    }

    .system-btn.btn-outline:disabled {
        color: #C8C8C8;
        border-color: #C8C8C8;
    }

.system-btn.btn-a {
    --btn-text-hover-color: #50A198;
    --btn-text-hover-bg-color: #F3F1FF;
    --btn-text-passing-color: #3C2D8F;
    --btn-text-passing-bg-color: #C9C3E8;
    color: var(--btn-bg-color);
    border-radius: 20px;
    background-color: transparent;
    background-clip: padding-box;
    height: 40px;
    padding-left: 9px;
    padding-right: 9px;
    border-width: 6.5px 9px;
    border-style: solid;
    border-color: transparent;
}
    .system-btn.btn-a:hover {
        color: var(--btn-text-hover-color);
        background-color: var(--btn-text-hover-bg-color);
    }

    .system-btn.btn-a:active {
        color: var(--btn-text-passing-color);
        background-color: var(--btn-text-passing-bg-color) !important;
    }

    .system-btn.btn-a:disabled {
        color: #C8C8C8;
    }

.system-btn.btn-field {
    height: 32px;
    padding-left: .75rem;
    padding-right: .75rem;
}
    .system-btn.btn-field > span {
        line-height: normal;
        margin-left: .25rem;
    }

.system-btn.btn-info {
    --btn-bg-color: #89A0F7;
}

.system-btn.btn-contained {
    width: 100%;
}

.system-btn.btn-icon {
    padding: .25rem;
}

    .system-btn.btn-icon.btn-32 {
        width: 32px; height: 32px;
    }

.system-btn-group {
    display: flex;
    align-items: center;
}
    .system-btn-group > button:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .system-btn-group > button:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.system-btn-a {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

.system-btn.btn-danger {
    --btn-color: #FFF3F3;
    --btn-bg-color: #F64646;
    --btn-bg-hover-color: #F86B6B;
    --btn-bg-passing-color: #9B2A2A;
}

.system-btn.btn-cyan {
    --btn-color: #EAF9FA;
    --btn-bg-color: #2799A5;
    --btn-bg-hover-color: #31BFCE;
    --btn-bg-passing-color: #144C52;
}

.system-btn.btn-blue {
    --btn-color: #EBEFFE;
    --btn-bg-color: #3A61F1;
    --btn-bg-hover-color: #6181F4;
    --btn-bg-passing-color: #233B92;
}

.system-btn.btn-orange {
    --btn-color: #FFF4E6;
    --btn-bg-color: #FF9500;
    --btn-bg-hover-color: #FFAA33;
    --btn-bg-passing-color: #995900;
}

.system-btn.btn-warning {
    --btn-color: #FFFBE6;
    --btn-bg-color: #FFD600;
    --btn-bg-hover-color: #FFDE33;
    --btn-bg-passing-color: #998000;
}

.system-btn.btn-success {
    --btn-color: #D3F9EB;
    --btn-bg-color: #00C17C;
    --btn-bg-hover-color: #2FCD95;
    --btn-bg-passing-color: #00744A;
}

.system-btn.btn-purple {
    --btn-color: #D3F9EB;
    --btn-bg-color: #00C17C;
    --btn-bg-hover-color: #2FCD95;
    --btn-bg-passing-color: #00744A;
}

.session-file-to-upload-done .box-file-to-upload-done {
    padding: 4px 20px 4px 8px;
    border: 1px solid #72DCD9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    position: relative;
}

    .session-file-to-upload-done .box-file-to-upload-done .icon-file-to-upload-done {
        margin-right: 8px;
    }

        .session-file-to-upload-done .box-file-to-upload-done .icon-file-to-upload-done svg path {
            fill: #72DCD9;
        }

.session-file-to-upload-done .box-file-to-upload-done .detail-file-to-upload-done h4 {
    color: #72DCD9;
    font-size: 13px;
    font-weight: 700;
    line-height: 14.45px;
}

    .session-file-to-upload-done .box-file-to-upload-done .detail-file-to-upload-done h5 {
        font-size: 9px;
        font-weight: 400;
        color: #72DCD9;
        line-height: 14.86px;
    }

    .session-file-to-upload-done .box-file-to-upload-done .btn-close-file-to-upload {
        width: 12px;
        height: 12px;
        font-size: 12px;
        color: #406A69;
        position: absolute;
        right: 2px;
        top: 0px;
        cursor: pointer;
    }

    .session-file-to-upload-done .box-file-to-upload-done.disabled {
        border: 1px solid #545454;
    }

        .session-file-to-upload-done .box-file-to-upload-done.disabled .icon-file-to-upload-done svg path {
            fill: #545454;
        }

        .session-file-to-upload-done .box-file-to-upload-done.disabled .detail-file-to-upload-done h4 {
            color: #3F3F3F;
        }

        .session-file-to-upload-done .box-file-to-upload-done.disabled .detail-file-to-upload-done h5 {
            color: #3F3F3F;
        }

        .session-file-to-upload-done .box-file-to-upload-done.disabled .btn-close-file-to-upload {
            color: #545454;
            pointer-events: none;
        }

.session-file-to-upload-done .text-upload-done-and-fail.disabled .text-upload-done-and-fail .text-upload-done, .session-file-to-upload-done .text-upload-done-and-fail.disabled .text-upload-done-and-fail .text-upload-fail {
    color: #3F3F3F;
}

.session-file-to-upload-done .text-upload-done-and-fail {
    font-size: 9px;
    margin-top: 4px;
    font-weight: 400;
    text-align: center;
}

    .session-file-to-upload-done .text-upload-done-and-fail .text-upload-done {
        color: #15996A;
    }

    .session-file-to-upload-done .text-upload-done-and-fail .text-upload-fail {
        color: #EB3333;
    }

/* Button Additations */
.custom-btn-refresh > .refresh-btn {
    --btn-color: #E9E9E9;
    --btn-bg-color: #2A2A2A;
    --btn-bg-hover-color: #2A2A2A;
    --btn-bg-passing-color: #2A2A2A;
    height: 32px;
    font-family: Noto Serif Thai;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.08px;
    padding-left: 6px;
    padding-right: 6px;
    border: 1px solid #2A2A2A;
}
    .custom-btn-refresh > .refresh-btn:hover,
    .custom-btn-refresh > .refresh-setting:hover {
        border-color: #B0C0F9;
    }

    .custom-btn-refresh > .refresh-btn:active,
    .custom-btn-refresh > .refresh-setting:active {
        border-color: #3A61F1;
    }

    .custom-btn-refresh > .refresh-setting.active {
        color: #FFF !important;
        background-color: #3A61F1 !important;
    }

.custom-btn-refresh > .refresh-btn > svg,
.custom-btn-refresh > .refresh-btn > .refresh-value {
    margin-left: 0;
    color: #50A198;
}

    .custom-btn-refresh > .refresh-btn > .refresh-text {
        margin-left: 0;
    }

.custom-btn-refresh > .refresh-setting {
    --btn-color: #50A198;
    --btn-bg-color: #202020;
    --btn-bg-hover-color: #202020;
    --btn-bg-passing-color: #202020;
    height: 32px;
    width: 32px;
    padding: 0;
    border: 1px solid #2A2A2A;
}

.system-action {
    --badge-color: #FFF;
    --badge-bg-color: #00C17C;
    --badge-light-color: #D3F9EB;
    --badge-border-color: #8CE6C6;
    --badge-pressing-color: #00C17C;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
    color: var(--badge-color);
    background-color: var(--badge-bg-color);
    border-radius: 4px;
    border: 1px solid var(--badge-bg-color);
    outline: none;
    appearance: none;
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

    .system-action:not(:disabled):hover,
    .system-action.action-outline:not(:disabled):hover {
        border-color: var(--badge-border-color);
    }

    .system-action:not(:disabled):active,
    .system-action.action-outline:not(:disabled):active {
        border-color: var(--badge-pressing-color);
    }

    .system-action.action-square {
        width: 24px;
        padding: 0;
    }

    .system-action.action-outline {
        color: var(--badge-bg-color);
        background-color: #9bccc7;
        border-color: var(--badge-light-color);
    }

    .system-action:disabled {
        color: #C8C8C8;
        background-color: #F6F6F6;
        border-color: #F6F6F6;
    }

    .action-success {
        --badge-color: #FFF;
        --badge-bg-color: #00C17C;
        --badge-light-color: #D3F9EB;
        --badge-border-color: #8CE6C6;
        --badge-pressing-color: #00C17C;
    }

    .action-danger {
        --badge-color: #FFF;
        --badge-bg-color: #F64646;
        --badge-light-color: #FDDADA;
        --badge-border-color: #FA9090;
        --badge-pressing-color: #F64646;
    }

    .action-warning {
        --badge-color: #998000;
        --badge-bg-color: #998000;
        --badge-light-color: #FFF3B3;
        --badge-border-color: #FFD600;
        --badge-pressing-color: #998000;
    }

    .action-orange {
        --badge-color: #FF9500;
        --badge-bg-color: #FF9500;
        --badge-light-color: #FFEACC;
        --badge-border-color: #FFBF66;
        --badge-pressing-color: #FF9500;
    }

    .action-info {
        --badge-color: #FFF;
        --badge-bg-color: #3A61F1;
        --badge-light-color: #D8DFFC;
        --badge-border-color: #89A0F7;
        --badge-pressing-color: #3A61F1;
    }

    .action-purple {
        --badge-color: #FFF;
        --badge-bg-color: #3A61F1;
        --badge-light-color: #D8DFFC;
        --badge-border-color: #89A0F7;
        --badge-pressing-color: #3A61F1;
    }

.system-action.action-turn-off {
    --badge-color: #FFF;
    --badge-bg-color: #F64646;
    --badge-hover-color: #FA9090;
    --badge-pressing-color: #FA9090;
}

.system-action.action-turn-on {
    --badge-color: #FFF;
    --badge-bg-color: #00C17C;
    --badge-hover-color: #8CE6C6;
    --badge-pressing-color: #8CE6C6;
}
    .system-action.action-turn-off:hover,
    .system-action.action-turn-on:hover {
        background-color: var(--badge-hover-color);
        border-color: var(--badge-hover-color);
    }

    .system-action.action-turn-off:active,
    .system-action.action-turn-on:active {
        border-color: var(--badge-bg-color);
    }

.session-dot-status-tampate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 21px;
    gap: 16px;
}

    .session-dot-status-tampate .box-dot {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .session-dot-status-tampate .box-dot .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

    .session-dot-status-tampate .box-dot .dot.warning {
        background-color: #FFD500;
    }

        .session-dot-status-tampate .box-dot .dot.danger {
            background-color: #EB3333;
        }

        .session-dot-status-tampate .box-dot .dot.success {
            background-color: #72DCD9;
        }

        .session-dot-status-tampate .box-dot p {
            color: #E9E9E9;
            font-size: 13px;
            font-weight: 400;
            line-height: 21.45px;
        }

    .box-dot-header-table {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .box-dot-header-table .dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
        }

.box-dot-header-table .dot.warning {
    background-color: #FFD500;
}

            .box-dot-header-table .dot.danger {
                background-color: #EB3333;
            }

.box-dot-header-table .dot.success {
    background-color: #72DCD9;
}

        .box-dot-header-table p {
            color: #E9E9E9;
            font-size: 13px;
            font-weight: 400;
            line-height: 21.45px;
        }

.table-custom-theme-dark thead tr {
    background-color: #2A2A2A;
    border-top: 1px solid #545454;
    border-bottom: 1px solid #545454;
}

    .table-custom-theme-dark thead tr th {
        font-size: 13px;
        font-weight: 700;
        line-height: 21.45px;
        color: #E9E9E9;
    }

.table-custom-theme-dark tbody tr {
    border-bottom: 1px solid #545454;
}

.table-custom-theme-dark tbody tr td p {
    font-size: 13px;
    font-weight: 400;
    line-height: 21.45px;
    color: #E9E9E9;
}

.session-table-history-tamplate {
    margin-bottom: 32px;
}

.header-sms-confirm-custom {
    text-align: center;
    background-color: #113834;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 8px !important;
    color: #E9E9E9;
    font-size: 19px;
    font-weight: 700;
    line-height: 31.35px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    position: relative;
    z-index: 0;
}

.bg-color-sms-confirm-custom {
    background-color: #151515;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.box-data-sum-all-sms-custom {
    background-color: #2A2A2A;
    border-radius: 8px;
    margin-bottom: 24px;
}

.session-title-data-sms-all-custom {
    padding: 18px 16px;
}

    .session-title-data-sms-all-custom .box-session-w-h {
        display: flex;
    }

        .session-title-data-sms-all-custom .box-session-w-h h4 {
            color: #E9E9E9;
            font-size: 13px;
            font-weight: 700;
            line-height: 21.45px;
            width: 120px;
            margin-right: 24px;
        }

        .session-title-data-sms-all-custom .box-session-w-h span {
            color: #E9E9E9;
            font-size: 13px;
            font-weight: 400;
            line-height: 21.45px;
        }

        .session-title-data-sms-all-custom .box-session-w-h .box-show-massage-sms-custom {
            color: #E9E9E9;
            font-size: 13px;
            font-weight: 400;
            width: 300px;
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
        }

        .session-title-data-sms-all-custom .box-session-w-h .box-agent-sms-custom {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #E9E9E9;
        }

        .session-title-data-sms-all-custom .box-session-w-h .box-agent-sms-custom .box {
            background-color: #50A198;
            padding: 2px 8px;
            color: #E9E9E9;
            font-size: 13px;
            font-weight: 400;
            border-radius: 17px;
        }

#InputMessageSending {
    color: #E9E9E9;
}

.session-btn-modal-sms-confirm-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

    .session-btn-modal-sms-confirm-custom .btn-close-modal-sms-confirm-custom {
        background-color: transparent;
        border: 1px solid #72DCD9;
        border-radius: 8px;
        color: #72DCD9;
        font-size: 13px;
        font-weight: 700;
        width: 140px;
        height: 40px;
    }

    .session-btn-modal-sms-confirm-custom .btn-confirm-modal-sms-confirm-custom {
        background-color: #2B8B81;
        border: 1px solid #2B8B81;
        border-radius: 8px;
        color: #E9E9E9;
        font-size: 13px;
        font-weight: 700;
        width: 140px;
        height: 40px;
    }

.session-btn-modal-sms-template-custom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

    .session-btn-modal-sms-template-custom .btn-close-modal-sms-template-custom {
        background-color: transparent;
        border: 1px solid #72DCD9;
        border-radius: 8px;
        color: #72DCD9;
        font-size: 13px;
        font-weight: 700;
        width: 140px;
        height: 40px;
    }

    .session-btn-modal-sms-template-custom .btn-confirm-modal-sms-template-custom {
        background-color: #2B8B81;
        border: 1px solid #2B8B81;
        border-radius: 8px;
        color: #E9E9E9;
        font-size: 13px;
        font-weight: 700;
        width: 140px;
        height: 40px;
    }

/* @ System Label */
.system-label {
    --badge-color: #3A61F1;
    --badge-bg-color: #EBEFFE;
    --badge-border-color: #3A61F1;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-family: 'Noto Sans Thai';
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    padding: 0 .5rem;
    border-radius: 4px;
    color: var(--badge-color);
    background-color: var(--badge-bg-color);
    border: 1px solid var(--badge-border-color);
    box-shadow: 2px 2px 4px 0px #0000004D;
}
    .system-label.label-primary {
        --badge-color: #3A61F1;
        --badge-bg-color: #EBEFFE;
        --badge-border-color: #3A61F1;
    }

    .system-label.label-success {
        --badge-color: #2FCD95;
        --badge-bg-color: #EAFFF7;
        --badge-border-color: #2FCD95;
    }

    .system-label.label-success-2 {
        --badge-color: #2799a5;
        --badge-bg-color: #eaf9fa;
        --badge-border-color: #2FCD95;
    }

    .system-label.label-warning {
        --badge-color: #CCAB00;
        --badge-bg-color: #FFFBE6;
        --badge-border-color: #CCAB00;
        --badge-hover-bg-color: #FFF3B3;
        --badge-hover-icon-bg-color: #CCAB0033;
        --badge-focus-color: #998000;
    }

    .system-label.label-orange {
        --badge-color: #FF9500;
        --badge-bg-color: #FFF4E6;
        --badge-border-color: #FF9500;
    }

    .system-label.label-danger {
        --badge-color: #F64646;
        --badge-bg-color: #FFF3F3;
        --badge-border-color: #F64646;
    }

    .system-label.label-cyan {
        --badge-color: #2799A5;
        --badge-bg-color: #EAF9FA;
        --badge-border-color: #2799A5;
    }

    .system-label.label-gray {
        --badge-color: #ADADAD;
        --badge-bg-color: #F6F6F6;
        --badge-border-color: #ADADAD;
    }

    .system-label.label-pink {
        --badge-color: #D10090;
        --badge-bg-color: #FFD6F3;
        --badge-border-color: #FFD6F3;
    }

.system-label.label-inline {
    border-width: 0;
}
    .system-label.label-inline.label-danger {
        --badge-color: #C93838;
        --badge-bg-color: #FCC8C8;
    }

    .system-label.label-inline.label-orange {
        --badge-color: #CC7700;
        --badge-bg-color: #FFDFB3;
    }

    .system-label.label-inline.label-blue {
        --badge-color: #1A63D1;
        --badge-bg-color: #B8D5FF;
    }

    .system-label.label-inline.label-purple {
        --badge-color: #50A198;
        --badge-bg-color: #C9C3E8;
    }

    .system-label.label-inline.label-white {
        --badge-color: #474747;
        --badge-bg-color: #E9E9E9;
    }

    .system-label.label-inline.label-gray {
        --badge-color: #5E5E5E;
        --badge-bg-color: #DBDBDB;
    }

    .system-label.label-xs {
        height: 20px;
        line-height: 20px;
        padding-left: 6px;
        padding-right: 6px;
    }

.system-label > .label-icon {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--badge-color);
    background-color: var(--badge-hover-icon-bg-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
    .system-label.label-hover {
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }
        .system-label.label-hover:hover {
            background-color: var(--badge-hover-bg-color);
        }

.system-label.label-dropdown {
    cursor: pointer;
}
    .system-label.label-dropdown > .label-icon > svg {
        transition: transform .15s ease-in-out;
    }

    .system-label.label-dropdown.dropdown-fill {
        color: var(--badge-focus-color);
        border-color: var(--badge-focus-color);
    }
    .system-label.label-dropdown.dropdown-fill > .label-icon {
        color: var(--badge-focus-color);
    }

    .system-label.label-dropdown.dropdown-show > .label-icon > svg {
        transform: rotate(.5turn);
    }

/* @ System Badge */

.system-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    padding: 0 32px;
    border-radius: 0px 12px;
    color: #000;
    background-image: linear-gradient(90deg, #4C7400 0%, #E0F3BC 51.28%, #324E00 100%);
    border: none;
    position: relative;
    z-index: 0;
}
    .system-badge:before {
        content: ' ';
        position: absolute;
        width: 100%;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #4C7400 0%, #E0F3BC 51.28%, #324E00 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

     .system-badge.badge-primary {
        color: #6F60C2;
        background-color: #B0C0F9;
        background-image: linear-gradient(90deg, #B0C0F9 0%, #EBEFFE 51.28%, #9388D1 100%);
    }
        .system-badge.badge-primary:before {
            background: linear-gradient(180deg, #B0C0F9 0%, #EBEFFE 51.28%, #9388D1 100%);
        }

    .system-badge.badge-warning {
        color: #CC7700;
        background-color: #FBB5B5;
        background-image: linear-gradient(90deg, #FBB5B5 0%, #FFF7CC 50.25%, #FFD599 97.99%);
    }
        .system-badge.badge-warning:before {
            background: linear-gradient(180deg, #FBB5B6 0%, #FFF7CC 51.28%, #FFD599 100%);
        }

    .system-badge.badge-secondary {
        color: #000;
        background-image: linear-gradient(270deg, #37475C 0%, #B5BECA 51.28%, #2C394A 100%);
    }
        .system-badge.badge-secondary:before {
            background: linear-gradient(180deg, #37475C 0%, #B5BECA 51.28%, #2C394A 100%);
        }

    .system-badge.badge-success {
        color: #2799A5;
        border: #8CE6C6;
        background-color: #8CE6C6;
        background-image: linear-gradient(90deg, #8CE6C6 0.33%, #EAF9FA 51.28%, #83D9E2 99.69%);
    }
        .system-badge.badge-success:before {
            background: linear-gradient(180deg, #8CE6C6 0%, #EAF9FA 51.28%, #83D9E2 100%);
        }

    .system-badge.badge-success-mission {
        color: #151515;
        border: #8CE6C6;
        background-color: #8CE6C6;
        background: linear-gradient(90deg, #4C7400 0%, #E0F3BC 51.28%, #324E00 100%);
    }

        .system-badge.badge-success-mission:before {
            background: linear-gradient(90deg, #0A4F76 0%, #51BEB8 51.28%, #0A4F76 100%),
        }

.session-show-count-customer-search-and-btn {
    display: flex;
    align-items: center;
}

.custom-badge {
    --badge-border-radius: 20px;
    --badge-divider-color: #1A534D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 22px;
    border-radius: var(--badge-border-radius);
    padding-left: 10px;
    padding-right: 10px;
    background-color: #C4D0FB;
    box-shadow: 2px 2px 2px 0px #0000001A;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.custom-badge.badge-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-badge.badge-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .custom-badge.badge-divider::before {
        content: ' ';
        height: 16px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border: 1px solid var(--badge-divider-color);
    }

.custom-badge-detail {
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #CDDDE2;
    width: auto;
    height: 20px;
    color: #0D69D4;
    border: 0px;
    border-radius: 8px;
    font-family: Noto Sans Thai;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    padding-left: 6px;
    padding-right: 6px;
    vertical-align: middle;
}

.custom-badge-status {
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2799A5;
    background-color: #EAF9FA;
    width: auto;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: .25rem;
    box-shadow: 2px 2px 4px 0px #0000004D;
    font-family: Noto Sans Thai;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    vertical-align: middle;
}
    .custom-badge-status > svg,
    .custom-badge-status > img {
        margin-right: .25rem;
    }

.custom-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 32px;
    background-color: #EAF9FA;
    border-radius: 20px;
    padding-left: .5rem;
    padding-right: .5rem;
}

.session-upload-template {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

    .session-upload-template .btn-download-template {
        background: transparent;
        border: 1px solid #72DCD9;
        border-radius: 4px;
        color: #72DCD9;
        font-size: 9px;
        font-weight: 700;
        line-height: 14.85px;
        padding: 2px 4px;
    }

        .session-upload-template .btn-download-template.disabled {
            border: 1px solid #545454;
            color: #545454;
            pointer-events: none;
        }

    .session-upload-template .session-btn-upload-template {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .session-upload-template .session-btn-upload-template .btn-upload-template {
            padding: 9.5px 12.5px;
            background: transparent;
            font-size: 13px;
            font-weight: 700;
            line-height: 21.45px;
            color: #72DCD9;
            border: 1px solid #72DCD9;
            border-radius: 8px;
            margin-bottom: 4px;
        }

        .session-upload-template .session-btn-upload-template .txt-direct-upload-template {
            font-size: 9px;
            font-weight: 400;
            line-height: 14.85px;
            color: #828282;
        }

        .session-upload-template .session-btn-upload-template .btn-upload-template:disabled {
            color: #545454;
            border: 1px solid #545454;
        }

    .session-upload-template .btn-download-template:disabled {
        border: 1px solid #545454;
        color: #545454;
    }

.session-search-customer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

    .session-search-customer .btn-search-customer {
        background: #2B8B81;
        width: 140px;
        height: 37px;
        color: #E9E9E9;
        border: 0px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
    }

        .session-search-customer .btn-search-customer.btn-loading-search-custom-customer {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: progress;
        }

        .session-search-customer .btn-search-customer:disabled {
            background: #1E1E1E;
            color: #3F3F3F;
        }

    .session-search-customer .session-show-count-customer-search-and-btn .title-count {
        font-size: 13px;
        font-weight: 400;
    }

    .session-search-customer .session-show-count-customer-search-and-btn .count-customer {
        color: #3B9D9A;
        text-decoration: underline;
        text-align: center;
    }

    .session-search-customer .session-show-count-customer-search-and-btn .btn-drop-table-customer-search-sms {
        background: #366665;
        border: none;
        border-radius: 6px;
        width: 30px;
        height: 30px;
    }

        .session-search-customer .session-show-count-customer-search-and-btn .btn-drop-table-customer-search-sms svg path {
            fill: #72DCD9;
        }

        .session-search-customer .session-show-count-customer-search-and-btn .btn-drop-table-customer-search-sms:disabled {
            background: #1E1E1E;
        }

        .session-search-customer .session-show-count-customer-search-and-btn .btn-drop-table-customer-search-sms:disabled svg path {
            fill: #3F3F3F;
        }

        .session-search-customer .session-show-count-customer-search-and-btn .btn-drop-table-customer-search-sms.drop {
            transform: rotate(180deg);
        }

    .session-search-customer .session-show-count-customer-search-and-btn .is-disabled {
        color: #6B6B6B !important;
    }

/* @ System Pagination */
.system-pagination {
    display: flex;
    align-items: center;
    padding-left: var(--table-pagination-padding-x, 1.5rem);
    padding-right: var(--table-pagination-padding-x, 1.5rem);
}

    .system-pagination > .pagination-display {
        margin-left: 14px;
    }

    /*.system-pagination > .pagination-display > span {
        color: #50A198;
    }*/

    .system-pagination > .pagination-list {
        user-select: none;
        display: flex;
        gap: .25rem;
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .system-pagination > .pagination-list > li {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: -0.03px;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }

        .system-pagination > .pagination-list > .paginate-page {
            color: #E9E9E9;
        }

        .system-pagination > .pagination-list > .paginate-nav {
            color: #50A198;
        }

        .system-pagination > .pagination-list > .paginate-nav:hover,
        .system-pagination > .pagination-list > .paginate-page:hover {
            background-color: transparent;
        }

        .system-pagination > .pagination-list > .paginate-nav:active {
            background-color: transparent;
        }

        .system-pagination > .pagination-list > .paginate-page.active {
            color: #2A2A2A;
            background-color: #50A198;
        }

        .system-pagination > .pagination-list > .paginate-nav.disabled {
            pointer-events: none;
            color: #828282;
            background-color: transparent;
        }

    .system-pagination > .pagination-list > .paginate-page.disabled {
        pointer-events: none;
        color: #C8C8C8;
        background-color: #F6F6F6;
    }

/* @ Custom Tooltip */

.custom-tooltip {
    --vz-tooltip-zindex: 1080;
    --vz-tooltip-max-width: 200px;
    --vz-tooltip-padding-x: 0.5rem;
    --vz-tooltip-padding-y: 0.25rem;
    --vz-tooltip-margin: 0.25rem;
    --vz-tooltip-color: #FFF;
    --vz-tooltip-bg: #1f7e7b;
    --vz-tooltip-border-radius: 0.25rem;
    --vz-tooltip-opacity: 1;
    --vz-tooltip-arrow-width: 0.8rem;
    --vz-tooltip-arrow-height: 0.4rem;
    z-index: 99999;
}

.custom-tooltip .tooltip-inner {
    font-family: Noto Serif Thai;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    box-shadow: 1px 1px 2px 0px #00000066;
}

.custom-tooltip.hide-arrow .tooltip-arrow {
    display: none !important;
}

.tooltip-animate {
    transition-duration: .5s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

/* System Collape Panel */

.system-collape-panel {
    display: block;
    border: 1px solid #C8C8C8;
    border-radius: .5rem;
}

.system-collape-panel > .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -.03px;
    padding: .5rem 1.5rem;
    color: #474747;
    background-color: #F4F0FF;
    background-image: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: inherit;
}

.system-collape-panel > .panel-body {
    padding: 1rem 1.5rem 1.5rem;
}

.system-collape-panel .panel-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 40px;
    border-radius: 0 .5rem .5rem 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: -1.5rem;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.03px;
    user-select: none;
    color: #474747;
    background-color: #F4F0FF;
    background-image: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
}

/* @ System Swal & Modal */
.system-swal,
.system-modal, 
.system-swal-check-gen-device {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1085;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
}
    .system-swal.show,
    .system-modal.show,
    .system-swal-check-gen-device.show {
        display: block;
    }

    .swal-wrapper,
    .modal-wrapper {
        display: flex;
        align-items: center;
        width: auto;
        max-width: 600px;
        margin: 1.75rem auto;
        min-height: calc(100% - 3.5rem);
        position: relative;
        pointer-events: none;
    }

    .swal-content,
    .modal-container {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-clip: padding-box;
        border-radius: 1rem;
        background-color: #FFF;
        outline: 0;
        border: 0;
        box-shadow: 5px 5px 5px 0px #00000026;
    }

@media only screen and (max-width: 767px) {
    .modal-wrapper-custom-width {
        max-width: 600px !important;
        margin: 24px;
    }
}

@media only screen and (min-width: 960px) {
    .modal-wrapper-custom-width {
        max-width: 768px !important;
    }
}

@media only screen and (min-width: 1024px) {
    .modal-wrapper-custom-width {
        max-width: 960px !important;
    }
}

@media only screen and (min-width: 1200px) {
    .modal-wrapper-custom-width {
        max-width: 1024px !important;
    }
}

        .swal-banner,
        .modal-banner {
            user-select: none;
            width: 100%;
            height: 60px;
            object-fit: cover;
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
        }

        .swal-avatar,
        .modal-avatar {
            user-select: none;
            position: absolute;
            top: -88px;
            right: 2rem;
            width: 220px;
            height: 196px;
            object-fit: contain;
        }

        .modal-inner,
        .swal-inner {
            padding: 1.5rem 2rem;
        }

        .swal-title {
            color: #474747;
        }

        .swal-text {
            font-weight: 400;
            color: #ADADAD;
        }

        .swal-btns {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }
            .swal-btns > button {
                flex: 0 0 168px;
            }

        .swal-close,
        .modal-close {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -1rem; right: -1rem;
            width: 48px;
            height: 48px;
            border-radius: 6px;
            color: #FFF;
            background-color: #F64646;
        }

.swal-loading {
    width: 72px;
    height: 72px;
    margin-bottom: 6px;
}

.swal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1080;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, rgba(23, 17, 54, 0.20) 0%, rgba(60, 45, 143, 0.20) 51.28%, rgba(49, 191, 206, 0.20) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity .25s ease;
}
    .swal-backdrop.show {
        opacity: 1;
    }

.offcanvas-backdrop {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: linear-gradient(180deg, rgba(23, 17, 54, 0.20) 0%, rgba(60, 45, 143, 0.20) 51.28%, rgba(49, 191, 206, 0.20) 100%);
}

.offcanvas-backdrop.show {
    opacity: 1;
}

/* @ Used Animate.css */

.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes bounceIn {

    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.animate__bounceIn {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

.animate__bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.animate__flipOutX {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration)*0.75);
    animation-duration: calc(var(--animate-duration)*0.75);
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%, 60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%, 80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.animate__hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration)*2);
    animation-duration: calc(var(--animate-duration)*2);
    -webkit-animation-name: hinge;
    animation-name: hinge;
    -webkit-transform-origin: top left;
    transform-origin: top left
}

/* @ Snack Bar */

.system-snackbar {
    --snackbar-color: #6181F4;
    --snackbar-bg-color: #FFFBE6;
    --snackbar-hover-bg-color: #FFF7CC;
    --snackbar-divider-color: var(--snackbar-color);
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 4px;
    background-color: var(--snackbar-bg-color);
    border-radius: 6px;
    box-shadow: 2px 2px 4px 0px #00000026;
    animation-duration: .75s;
    animation-fill-mode: both;
}
    .system-snackbar.unseen {
        display: none;
    }

    .snackbar-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .25rem 0 .25rem .25rem;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
        .snackbar-icon > img {
            height: 100%;
            object-fit: contain;
        }

        .snackbar-icon + .snackbar-title {
            margin-left: .5rem;
            padding-left: 0;
        }

    .snackbar-title {
        color: var(--snackbar-color);
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -.08px;
        padding: .25rem;
    }

    .snackbar-close {
        color: #F64646;
        background-color: var(--snackbar-bg-color);
        cursor: pointer;
        user-select: none;
        font-weight: 500;
        display: flex;
        height: calc(100% - 4px);
        padding: .25rem .5rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
        border-radius: .5rem;
        margin-bottom: 2px;
        white-space: nowrap;
        outline: none;
        border: none;
        transition: color .15s ease-in-out, background-color .15s ease-in-out;
    }
        .snackbar-close:hover {
            background-color: var(--snackbar-hover-bg-color);
        }

    .snackbar-divider {
        border-left: 1px solid var(--snackbar-divider-color);
        margin: 0 0.5rem;
        align-self: stretch;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .snackbar-collapes-group {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
        .snackbar-collapes {
            --snackbar-bg-color: #FFFBE6;
            --snackbar-hover-bg-color: #FFF7CC;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: .25rem;
            background-color: var(--snackbar-bg-color);
            box-shadow: 2px 2px 4px 0px #00000026;
            animation-duration: .75s;
            animation-fill-mode: both;
        }
            .snackbar-collapes.unseen {
                display: none;
            }

            .snackbar-collapes > .snackbar-icon {
                width: 24px;
                height: 24px;
                padding: 0;
                flex: none;
                border-radius: inherit;
                transition: background-color .15s ease-in-out;
            }
                .snackbar-collapes > .snackbar-icon:hover {
                    background-color: var(--snackbar-hover-bg-color);
                }

.system-snackbar.snackbar-orange,
.snackbar-collapes.snackbar-orange {
    --snackbar-color: #CC7700;
    --snackbar-bg-color: #FFF4E6;
    --snackbar-hover-bg-color: #FFEACC;
}

.system-snackbar.snackbar-blue,
.snackbar-collapes.snackbar-blue {
    --snackbar-color: #2E4EC1;
    --snackbar-bg-color: #EBEFFE;
    --snackbar-hover-bg-color: #D8DFFC;
}

.system-snackbar-bg-2-custom {
    background-color: #EBEFFE !important;
}

.system-snackbar.snackbar-info,
.snackbar-collapes.snackbar-info {
    --snackbar-color: #508EEE;
    --snackbar-bg-color: #E5F0FF;
    --snackbar-hover-bg-color: #D4E6FF;
}
/* @ Custom Breadcrumb */
.custom-breadcrumb {
    --breadcrumb-max-width: none;
    display: flex;
    align-items: center;
    width: fit-content;
    user-select: none;
    height: 36px;
    padding: 0 1.5rem;
    border-radius: .5rem;
    background-color: #2A2A2A;
}

    .custom-breadcrumb > .bread-item {
        color: #474747;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.08px;
        transition: color .2s ease;
        max-width: var(--breadcrumb-max-width);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .custom-breadcrumb > .bread-item:not(.active):hover {
            color: #50A198;
            text-decoration: underline !important;
        }

        .custom-breadcrumb > .bread-item.active {
            color: #50A198;
            font-weight: 700;
        }

        .custom-breadcrumb > .bread-item:not(:first-of-type)::before {
            display: inline-block;
            width: 12px;
            text-align: center;
            content: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='%23DBDBDB' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.98956 5.50739C4.0565 5.44099 4.10964 5.362 4.1459 5.27496C4.18216 5.18792 4.20083 5.09457 4.20083 5.00028C4.20083 4.90599 4.18216 4.81263 4.1459 4.72559C4.10964 4.63856 4.0565 4.55956 3.98956 4.49316L0.711175 1.22192C0.64423 1.15553 0.591094 1.07653 0.554832 0.989492C0.518571 0.902455 0.499903 0.809099 0.499903 0.71481C0.499903 0.620522 0.518571 0.527166 0.554832 0.440129C0.591094 0.353091 0.64423 0.274095 0.711175 0.207697C0.844997 0.0746682 1.02602 0 1.21472 0C1.40341 0 1.58444 0.0746682 1.71826 0.207697L4.99664 3.48608C5.39791 3.88784 5.62329 4.43245 5.62329 5.00028C5.62329 5.5681 5.39791 6.11271 4.99664 6.51448L1.71826 9.79286C1.58522 9.92481 1.40566 9.9992 1.21829 9.99999C1.12429 10.0005 1.03111 9.98252 0.944085 9.94697C0.857063 9.91143 0.777914 9.85905 0.711175 9.79286C0.64423 9.72646 0.591094 9.64746 0.554832 9.56043C0.518571 9.47339 0.499903 9.38003 0.499903 9.28574C0.499903 9.19145 0.518571 9.0981 0.554832 9.01106C0.591094 8.92402 0.64423 8.84503 0.711175 8.77863L3.98956 5.50739Z' /%3E%3C/svg%3E");
            margin: 0 .5rem;
        }

/* @ Custom Menu */

.custom-menu {
    list-style: none;
    padding-inline-start: 0;
    padding-left: 0;
    border: 2px solid transparent;
}
    .custom-menu > .menu-item {
        display: block;
        cursor: pointer;
        user-select: none;
        position: relative;
        transition: transform .25s ease;
        border: 2px solid transparent;
        border-radius: 10px;
    }
        .custom-menu > .menu-item + .menu-item {
            margin-top: .25rem;
        }

        .custom-menu:not(.dragging) > .menu-item:hover {
            background: #F3F1FF;
            border: 2px solid #50A198;
            border-radius: 8px;
        }

        .custom-menu:not(.dragging) > .menu-item:hover .box-detail-promotion-main {
            background: #F3F1FF;
        }

        .custom-menu:not(.dragging) > .menu-item:active {
            background-color: #FFF;
            border: 2px solid #50A198;
            border-radius: 10px;
        }

        .custom-menu .menu-inner {
            position: relative;
            display: flex;
            align-items: center;
            height: 40px;
            padding: 0 1rem;
            transition: color .2s ease, background-color .2s ease;
            overflow: hidden;
            z-index: 1;
        }

        .custom-menu .menu-inner::after,
        .custom-menu .menu-inner::before {
            content: ' ';
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
            transition: opacity .2s ease;
        }

        .custom-menu .menu-inner::after {
            right: 0;
            border-radius: 10px 0 0 10px;
        }

        .custom-menu .menu-inner::before {
            left: 0;
            border-radius: 0 10px 10px 0;
            /*transition: left .3s ease;*/
        }

        .custom-menu:not(.dragging) .menu-inner:hover::after,
        .custom-menu:not(.dragging) .menu-inner:hover::before {
            opacity: 1;
        }

        .custom-menu:not(.dragging) > .menu-item:active > .menu-inner::after,
        .custom-menu:not(.dragging) > .menu-item:active > .menu-inner::before,
        .custom-menu:not(.dragging) > .menu-item:active .menu-icon::before {
            opacity: .3;
        }

        .custom-menu > .menu-item.active::before,
        .custom-menu > .menu-item.active > .menu-inner::after,
        .custom-menu > .menu-item.active .menu-icon::before {
            opacity: 1;
        }
            .custom-menu > .menu-item.active > .menu-inner::before {
                opacity: 0;
            }

        .custom-menu .menu-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin-right: .5rem;
            border-radius: 50%;
            position: relative;
        }
            .custom-menu .menu-icon::before {
                content: ' ';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
                transition: opacity .2s ease;
                opacity: 0;
            }

            .custom-menu .menu-item::before {
                content: ' ';
                position: absolute;
                left: 0; top: 0;
                width: 100%;
                height: 100%;
                background-color: #F4F0FF;
                background-image: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 100%);
                transition: opacity .2s ease;
                opacity: 0;
            }

            .custom-menu .menu-icon > img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                position: relative;
            }

        .custom-menu .menu-head {
            color: #474747;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.03px;
        }

        .custom-menu .menu-text {
            font-size: 12px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: -0.08px;
        }

    .custom-menu .menu-fill {
        flex: 1 0;
    }

    .custom-menu .menu-dragger {
        color: #ADADAD;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        margin-right: .5rem;
    }
    .custom-menu > .menu-item.dragging {
        opacity: 0;
    }

/* @ Bank Collapes */

.bank-collapes {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    color: #FFF;
    background-color: #6F60C2;
    border-bottom: 2px solid #3C2D8F;
    transition: background-color .15s ease-in, color .15s ease-in, box-shadow .15s ease-in;
    box-shadow: none;
}

    .bank-collapes > .bank-icon {
        width: 48px;
        height: 48px;
        user-select: none;
        border-radius: 2px;
        object-fit: contain;
        margin-right: .5rem;
    }

    .bank-collapes > .bank-body {
        flex: 1 0;
        margin-right: .5rem;
    }

    .bank-collapes .bank-collaper {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: 32px;
        height: 32px;
        margin-right: .5rem;
        border-radius: 50%;
        background-color: transparent;
        transition: background-color .15s ease-in, color .15s ease-in;
    }
        .bank-collapes:not(.collape) .bank-collaper > .expand,
        .bank-collapes.collape .bank-collaper > .collape {
            display: none;
        }

        .bank-collapes .bank-collaper:hover {
            color: #50A198;
            background-color: #F3F1FF;
        }

        .bank-collapes .bank-collaper:active {
            color: #50A198;
            background-color: #C9C3E8;
        }

    .bank-collapes > .bank-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .bank-collapes:not(.collape):hover {
        background-color: #50A198;
        box-shadow: 0px 4px 4px 0px #00000040;
    }

.bank-collapes.collape {
    width: fit-content;
    overflow: hidden;
}
    .bank-collapes.collape > .bank-icon {
        margin-right: 0;
    }

    .bank-collapes.collape > .bank-actions {
        position: absolute;
        inset: 0;
        transform: scale(0);
        transition: transform .2s ease;
    }

    .bank-collapes.collape > .bank-body {
        display: none;
    }

    .bank-collapes.collape:hover > .bank-actions {
        transform: scale(1);
        background-color: #0C0C0C4D;
        backdrop-filter: blur(2px);
    }

/*#layout-wrapper {
    background-color: #EDEBF7;
    background-image: linear-gradient(180deg, #EDEBF7 0%, #D8DFFC 51.28%, #D6F2F5 100%);
}*/

html {
    background-color: #EDEBF7;
    background-image: linear-gradient(180deg, #EDEBF7 0%, #D8DFFC 51.28%, #D6F2F5 100%);
}

.main-content {
    overflow: auto;
    /*height: 100vh;*/
    min-height: 100vh;
}

#layout-wrapper{
    padding:24px;
    min-height: 100vh;
}

.page-content {
    color: #474747;
    height: calc(100% - 72px);
    padding: 24px;
    overflow: auto;
}

.page-title-box {
    height: 48px;
    margin: 0 -1.5rem 1.5rem -1.5rem;
    padding: 10px 46px;
}

.title-header-custom-mini-game {
    margin-bottom: 10px;
}

    .title-header-custom-mini-game h4 {
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

.full-container,
.full-container-xs,
.full-container-sm,
.full-container-md,
.full-container-lg {
    height: 100%;
    min-height: 100%;
}

.inner-container {
    height: calc(100% - 72px);
}
    .inner-container.full-flex {
        display: flex;
        flex-direction: column;
    }


/* @ Sidebar */

.navbar-menu {
    top: 25px;
    width: 260px;
    height: calc(100% - 72px);
    background: var(--vz-vertical-menu-bg-dark);
    border-right: 1px solid var(--vz-vertical-menu-bg-dark);
    border-top-right-radius: 40px;
    border-top: 2px solid #50A198;
    border-right: 2px solid #50A198;
    border-bottom-right-radius: 40px;
    border-bottom: 2px solid #50A198;
    left: 0;
}

/*.navbar-nav .nav-item.customer {
    --vz-bg-opacity: 1;
    background: rgba(var(--color-bg-customer),var(--vz-bg-opacity)) !important;
}

.navbar-nav .nav-item.deposit {
    --vz-bg-opacity: 1;
    background: rgba(var(--color-bg-deposit),var(--vz-bg-opacity)) !important;
}

.navbar-nav .nav-item.withdraw {
    --vz-bg-opacity: 1;
    background: rgba(var(--color-bg-withdraw),var(--vz-bg-opacity)) !important;
}*/

/*.navbar-nav .nav-item.customer:hover, .navbar-nav .nav-item.deposit:hover,
.navbar-nav .nav-item.withdraw:hover{
    --vz-bg-opacity: 0.5;
}*/

.simplebar-wrapper {
    font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai';
}

.simplebar-offset {
    display: flex;
    flex-direction: column;
    right: 0;
    bottom: 0;
}

.simplebar-content-wrapper {
    height: auto;
    overflow: hidden scroll;
    flex: 1 0;
}

.simplebar-content {
    padding: 0 1rem;
}

.simplebar-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
    .simplebar-lang-title {
        color: #FFF;
        font-size: 16px;
        font-weight: 400;
        line-height: 26.4px;
        letter-spacing: normal;
        margin-bottom: 0;
    }

    .simplebar-lang-wrapper,
    .custom-dropdown-item.simplebar-lang-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 92px;
        height: 48px;
        border-radius: 1rem;
        padding: 0;
        background-color: #1C1C20;
    }
        .simplebar-lang-text {
            color: #FBFBFB;
            text-transform: uppercase;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            margin-right: .5rem;
        }

.custom-dropdown.simplebar-lang-dropdown {
    max-width: 100px;
    min-width: 100px;
    border-radius: 12px;
    background-color: #1C1C20;
    padding: .25rem .25rem 12px;
    border: none;
}
    .custom-dropdown-item.simplebar-lang-wrapper:hover::before,
    .custom-dropdown-item.simplebar-lang-wrapper:hover::after {
        content: none;
    }

    .custom-dropdown-item.simplebar-lang-wrapper.selected {
        background-image: none;
        background-color: #4A4B56;
    }

.navbar-menu .navbar-nav .nav-link {
    padding: .25rem 0;
    font-family: inherit;
    min-height: 40px;
    padding-left: .5rem;
    padding-right: .5rem;
    color: #E1E1E1 !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 26.4px;
    letter-spacing: normal;
}
    .navbar-menu .navbar-nav .nav-link > img,
    .navbar-menu .navbar-nav .nav-link > svg {
        width: auto;
        margin-right: .5rem;
    }

.close-menu-js .navbar-menu .navbar-nav .nav-link > img,
.close-menu-js .navbar-menu .navbar-nav .nav-link > svg {
    margin-right: 0;
}

.close-menu-js .simplebar-lang {
    padding-left: 0;
    padding-right: 0;
}
    .close-menu-js .simplebar-lang > .simplebar-lang-wrapper {
        width: 48px;
        min-width: 48px;
        margin-left: auto;
        margin-right: auto;
    }
    .close-menu-js .simplebar-lang > .simplebar-lang-title,
    .close-menu-js .simplebar-lang .simplebar-lang-text {
        display: none;
    }

.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 10px 1.5rem 8px 1.5rem !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link:before {
    top: 18.5px;
    color: var(--vz-vertical-menu-sub-item-color-dark);
}

.navbar-menu .navbar-nav .menu-dropdown .nav-sm .nav-item {
    padding-left: 1.75rem;
}

.close-menu .navbar-menu .navbar-nav .menu-dropdown .nav-sm .nav-item, .close-menu-js .navbar-menu .navbar-nav .menu-dropdown .nav-sm .nav-item {
    padding-left: 0;
}

.navbar-menu .navbar-nav .menu-dropdown .nav-sm .nav-item:hover {
    background: var(--color-bg-hover);
}

.navbar-nav > .nav-item > .nav-link:hover, .navbar-menu .navbar-nav .menu-dropdown .nav-sm .nav-item:hover,
.navbar-nav > .nav-item > .nav-link.active, .navbar-menu .navbar-nav .menu-dropdown .nav-sm .nav-item.active,
.close-menu .navbar-menu .navbar-nav > .nav-item.child-active, .close-menu-js .navbar-menu .navbar-nav > .nav-item.child-active {
    background: var(--color-bg-hover);
    border-radius: 8px;
}

.navbar-nav > .nav-item.customer > .nav-link:hover, .navbar-nav > .nav-item.deposit > .nav-link:hover,
.navbar-nav > .nav-item.withdraw > .nav-link:hover {
    background: unset !important;
}

.close-menu .navbar-nav > .nav-item.customer > .nav-link:hover, .close-menu-js .navbar-nav > .nav-item.customer > .nav-link:hover {
    --vz-bg-opacity: 1;
    background: rgba(var(--vz-secondary-rgb),var(--vz-bg-opacity)) !important;
}

.close-menu .navbar-nav > .nav-item.withdraw > .nav-link:hover, .close-menu-js .navbar-nav > .nav-item.withdraw > .nav-link:hover {
    --vz-bg-opacity: 1;
    background: rgba(var(--vz-danger-rgb),var(--vz-bg-opacity)) !important;
}

.close-menu .navbar-nav > .nav-item.deposit > .nav-link:hover, .close-menu-js .navbar-nav > .nav-item.deposit > .nav-link:hover {
    --vz-bg-opacity: 1;
    background: rgba(var(--vz-success-rgb),var(--vz-bg-opacity)) !important;
}

.navbar-nav > .nav-item.customer > .nav-link.active {
    background: rgba(var(--color-bg-hover-customer)) !important;
}
.navbar-nav > .nav-item.deposit > .nav-link.active {
    background: rgba(var(--color-bg-hover-deposit)) !important;
}
.navbar-nav > .nav-item.withdraw > .nav-link.active {
    background: rgba(var(--color-bg-hover-withdraw)) !important;
}

/* @ Navbar */
#page-topbar {
    display: none;
    left: 0;
    z-index: 1080;
}

.navbar-header {
    font-family: 'Noto Serif Thai';
    height: 72px;
    background-color: #171136;
    background-image: linear-gradient(90deg, #171136 0%, #3C2D8F 51.28%, #31BFCE 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 0 24px;
}

    .navbar-header .navbar-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 208px;
        height: 48px;
        margin-right: 24px;
    }
        .navbar-header .navbar-logo > img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

    .navbar-header .app-search {
        margin-left: 24px;
    }

    .navbar-header .header-item {
        height: 72px;
    }

    .navbar-header .topbar-user {
        padding: 10px 16px;
        background-color: #1f7e7b;
    }

    .navbar-header .header-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        padding-left: 12px;
        border-radius: 8px;
        color: #FFF;
        background-color: #1f7e7b;
    }
        .navbar-header .header-badge > img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            margin-right: .5rem;
        }

        .navbar-header .header-badge > .badge-text {
            padding-right: 12px;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.03px;
        }

        .navbar-header .header-badge > .badge-prepend {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding-right: 12px;
            padding-left: 12px;
            font-size: 14px;
            font-weight: 700;
            line-height: 24px;
            color: #31BFCE;
            background-color: #1E1648;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .navbar-header #page-header-user-dropdown {
            --vz-btn-padding-x: 1rem;
            --vz-btn-padding-y: 10px;
            outline: none;
            border: none;
            height: 100%;
            width: 100%;
        }

        .navbar-header .header-profile-user {
            width: 40px;
            height: 40px;
        }

        .navbar-header .user-name-text {
            overflow: hidden;
            width: 90px;
            color: #31BFCE;
            text-overflow: ellipsis;
            font-size: 14px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: -0.03px;
            margin-bottom: .25rem;
            float: left;
        }

        .navbar-header .user-name-edit {
            color: #FFF;
            float: right;
            margin-left: 8px;
            vertical-align: top;
        }

        .navbar-header .user-name-sub-text {
            float: left;
            clear: both;
            overflow: hidden;
            color: #FFF;
            text-overflow: ellipsis;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: -0.08px;
        }

    .navbar-header .header-logout-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        padding: .5rem;
        color: #FFF;
        background-color: #3C2D8F;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
    }

    .amount-status-header {
        font-size: 12px;
        font-weight: 400;
        margin: 0 5px;
    }

.navbar-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-sm .nav-link {
    font-size: 16px;
}

    .navbar-menu .navbar-nav .nav-link i {
        font-size: 16px;
    }

.nav-item.border-top {
    border-top-color: #666 !important;
}

.header-username {
    margin-left: 8px;
}

.navbar-language {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1f7e7b;
    border: 1px solid #50A198;
    border-radius: 24px;
    width: 112px;
    height: 40px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: .5rem;
    margin-right: .5rem;
    transition: all 300ms ease-out;
}
    .navbar-language:hover {
        background-color: #1E1648;
        box-shadow: 4px 6px 10px 0px #00000099;
        border-color: transparent;
    }

    .navbar-language:active {
        background-color: #1f7e7b;
        box-shadow: none;
    }

    .navbar-language > .lang-text {
        color: #FFF;
        font-size: 16px;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: -0.05px;
        text-transform: uppercase;
        margin-left: .5rem;
        margin-right: .5rem;
        margin-top: 2px;
    }

    .navbar-language > .lang-start,
    .navbar-language > .lang-end {
        mix-blend-mode: luminosity;
    }

    .navbar-language > .lang-start.active,
    .navbar-language > .lang-end.active {
        mix-blend-mode: normal;
    }

.footer {
    left: 70px
}
.scroll-bar{
    height:100%;
}
.main-content {
    padding-left: 236px;
    box-shadow: 2px 2px 10px 6px rgba(0, 0, 0, 0.20);
    border-radius: 16px;
    position: relative;
}

.icon-logo-custom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;
    height: 47px;
    max-width: 228px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
    .icon-logo-custom > .logo {
        width: 100%;
        height: 100%;
        line-height: normal;
    }

    .icon-logo-custom .logo-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.close-menu-js {
    min-height: 1400px;
}

.close-menu-js .navbar-brand-box {
    background-color: transparent !important;
    position: relative;
    width: auto;
    text-align: left
}

.close-menu-js .navbar-brand-box .logo-sm {
    display: none
}

.close-menu-js .navbar-brand-box .logo-lg {
    display: block
}

.close-menu-js #page-topbar {
    left: 0px
}

.close-menu-js .footer {
    left: 0
}

    .close-menu-js .main-content {
        margin-left: 70px;
        padding-left: 0px;
    }

    .close-menu-js .icon-logo-custom {
        display: none;
    }

    .close-menu-js .simplebar-content {
        padding: 35px 8px 0px 5px;
    }

    .close-menu-js .navbar-menu .navbar-nav .nav-link {
        padding: 10px 5px 10px 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.close-menu-js .navbar-menu .simplebar-content-wrapper, .close-menu-js .navbar-menu .simplebar-mask {
    overflow: visible !important
}

.close-menu-js .navbar-menu .simplebar-scrollbar, .close-menu-js .navbar-menu .vertical-menu-btn {
    display: none !important
}

.close-menu-js .navbar-menu .simplebar-offset {
    bottom: 0 !important
}

.close-menu-js .navbar-menu .navbar-nav .badge {
    display: none !important
}

.close-menu-js .navbar-menu .navbar-nav .menu-title span {
    display: none
}

.close-menu-js .navbar-menu .navbar-nav .menu-title i {
    display: block;
    line-height: 36px
}

.close-menu-js .navbar-menu .navbar-nav .nav-link span {
    display: none
}

.close-menu-js .navbar-menu .navbar-nav .nav-link i {
    font-size: 22px
}

.close-menu-js .navbar-menu .navbar-nav .nav-link svg {
    margin-right: 0
}

.close-menu-js .navbar-menu .navbar-nav .nav-link:after, .close-menu-js .navbar-menu .navbar-nav .nav-link:before {
    display: none
}

.close-menu-js .navbar-menu .navbar-nav .menu-dropdown {
    display: none;
    height: auto !important
}

.close-menu-js .navbar-menu .navbar-nav .nav-item {
    position: relative
}

.close-menu-js .navbar-menu .navbar-nav .nav-item:hover > a.menu-link {
    position: relative;
    width: calc(200px + 70px);
    color: #fff;
    background: var(--color-bg-hover);
    -webkit-transition: none;
    transition: none
}

.close-menu-js .navbar-menu .navbar-nav .nav-item:hover > a.menu-link .icon-dual {
    color: var(--vz-vertical-menu-item-hover-color-dark);
    fill: rgba(255,255,255,.16)
}

.close-menu-js .navbar-menu .navbar-nav .nav-item:hover > a.menu-link span {
    display: inline-block;
    padding-left: 25px
}

.close-menu-js .navbar-menu .navbar-nav .nav-item:hover > a.menu-link:after {
    display: block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #fff
}

/*.close-menu-js .navbar-menu .navbar-nav .nav-item:hover .nav-link span {
    display: inline-block
}*/

.close-menu-js .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown {
    display: block;
    left: 70px;
    position: absolute;
    width: 200px;
    background: var(--color-bg-sub-item);
    height: auto !important;
    padding: .5rem 0;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 2px 4px rgba(15,34,58,.12);
    box-shadow: 0 2px 4px rgba(15,34,58,.12)
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm {
    padding: 0
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .nav-item:hover > .nav-link {
    color: var(--vz-vertical-menu-item-hover-color)
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .nav-item:hover > .nav-link:after {
    color: inherit
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .nav-link:after {
    display: block !important;
    -webkit-transform: rotate(0) !important;
    transform: rotate(0) !important
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .menu-dropdown {
    left: 100% !important;
    top: 0;
    border-radius: 3px !important
}

.close-menu-js .navbar-menu {
    width: 70px !important;
    padding-top: 0px;
    height: calc(100% - 72px);
}

.close-menu-js .navbar-brand-box {
    background: var(--vz-vertical-menu-bg-dark)
}

.close-menu-js .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown {
    background: var(--color-bg-sub-item)
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm {
    padding: 0
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .nav-link:after {
    display: block !important;
    -webkit-transform: rotate(0) !important;
    transform: rotate(0) !important
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .nav-item:hover > .nav-link {
    color: var(--vz-vertical-menu-item-active-color-dark)
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .nav-item:hover > .nav-link:after {
    color: inherit
}

.close-menu-js .navbar-menu .navbar-nav .nav-sm .menu-dropdown {
    left: 100% !important;
    top: 0;
    border-radius: 3px !important
}

.custom-title-class-sms {
    color:#000000 !important;
}

.box-icon-header-dash-borard-custom {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(244, 246, 251, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    border-radius: 4px;
}

.box-icon-header-dark-mode-dash-borard-custom {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(75, 56, 179, 1);
    border: 1px solid rgba(128, 106, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(38, 28, 94, 0.8),-4px -4px 8px 0px rgba(101, 90, 230, 1);
    border-radius: 4px;
}

    .box-icon-header-dark-mode-dash-borard-custom img {
        width: 24px;
        height: 24px;
    }

.box-icon-header-dash-borard-custom img {
    width: 24px;
    height: 24px;
}

.custom-dropdown-item-dash-board {
    font-size: 12px !important;
    font-weight: 700 !important;
    min-height: 24px !important;
    background: rgba(244, 246, 251, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2), -4px -4px 6px 1px rgba(255, 255, 255, 0.9) !important;
    padding: 0px 12px !important;
    color: rgb(155, 161, 182) !important;
    margin-bottom: 8px;
}

    .custom-dropdown-item-dash-board:hover {
        background: linear-gradient(89.92deg, #DED2FF 0.08%, #C1DAFF 51.28%, #BAF8FF 99.93%) !important;
    }

    .custom-dropdown-item-dash-board.selected {
        color: #50A198  !important;
        background: linear-gradient(89.92deg, #DED2FF 0.08%, #C1DAFF 51.28%, #BAF8FF 99.93%) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 3px 3px 3px 0px rgba(174, 184, 192, 0.5) inset, -3px -3px 4px 0px rgba(255, 255, 255, 1) inset !important;
    }

.custom-dropdown-item-dash-board-dark-mode {
    font-size: 12px !important;
    font-weight: 700 !important;
    min-height: 24px !important;
    background: rgba(75, 56, 179, 1) !important;
    box-shadow: 4px 4px 6px 0px rgba(38, 28, 94, 0.8),-4px -4px 8px 0px rgba(101, 90, 230, 1) !important;
    border: 1px solid rgba(84, 66, 183, 1) !important;
    border-radius: 16px !important;
    padding: 0px 12px !important;
    color: rgba(155, 161, 182, 1) !important;
    margin-bottom: 8px;
}

    .custom-dropdown-item-dash-board-dark-mode:hover {
        background: linear-gradient(253.87deg, #7612F6 9.35%, #57CAEE 90.92%) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
    }

    .custom-dropdown-item-dash-board-dark-mode.selected:hover {
        color: rgba(244, 246, 251, 1) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        background: linear-gradient(253.87deg, #7612F6 9.35%, #57CAEE 90.92%) !important;
        box-shadow: 3px 3px 3px 2px rgba(38, 28, 94, 0.7) inset,-3px -3px 4px 0px rgba(101, 90, 230, 1) inset !important;
    }

    .custom-dropdown-item-dash-board-dark-mode.selected {
        color: rgba(244, 246, 251, 1) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        background: linear-gradient(253.87deg, #7612F6 9.35%, #57CAEE 90.92%) !important;
        box-shadow: 3px 3px 3px 2px rgba(38, 28, 94, 0.7) inset,-3px -3px 4px 0px rgba(101, 90, 230, 1) inset !important;
    }

.input-fake-custom-dash-board {
    height: 24px !important;
    font-size: 12px !important;
    color: rgb(75, 56, 179) !important;
    font-weight: 700 !important;
    border-color: #e9edf5 !important;
    background: linear-gradient(89.92deg, #DED2FF 0.08%, #C1DAFF 51.28%, #BAF8FF 99.93%) !important;
    border-radius: 12px !important;
    padding-top: 3px !important;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2), -4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    transition: unset !important;
}

.input-fake-custom-dark-mode-dash-board {
    height: 24px !important;
    font-size: 12px !important;
    color: rgba(244, 246, 251, 1) !important;
    font-weight: 700 !important;
    border-color: #e9edf5 !important;
    background: linear-gradient(253.87deg, #7612F6 9.35%, #57CAEE 90.92%) !important;
    border-radius: 12px !important;
    padding-top: 3px !important;
    box-shadow: 4px 4px 6px 0px rgba(38, 28, 94, 0.8),-4px -4px 8px 0px rgb(101, 90, 230);
    border: 1px solid rgba(84, 66, 183, 1) !important;
    transition: unset !important;
}

.icon-drop-down-custom-dash-board {
    width: 24px !important;
    height: 24px !important;
    background: rgba(244, 246, 251, 1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2), -4px -4px 6px 1px rgba(255, 255, 255, 0.9) !important;
}

.icon-drop-down-custom-dark-mode-dash-board {
    width: 24px !important;
    height: 24px !important;
    background: rgba(75, 56, 179, 1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid rgba(84, 66, 183, 1) !important;
    border-radius: 50% !important;
}

.drop-down-icon-select-dash-board {
    transition: 0.5s;
}

.dropdown-toggler.toggled .drop-down-icon-select-dash-board {
    transform: rotate(180deg) !important;
}

.menu-title {
    font-size: 19px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: normal;
    margin-bottom: .25rem;
}

.nav-item.sideMenu {
    margin-bottom: .5rem;
}

/*.dropdown-toggler.toggled .icon-drop-down-custom-dash-board {
    position: relative;
    z-index: 0;
}

    .dropdown-toggler.toggled .icon-drop-down-custom-dash-board::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(31.5deg, rgba(255, 255, 255, 0.4) 38.43%, rgba(0, 0, 0, 0.4) 97.79%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

.bg-disabled-class-reset-time {
    background-color: #eff2f7 !important;
}

@media only screen and (max-width: 1300px) {
    .header-username {
        display: none !important
    }

    .sms-preview .preview-message {
        left: 35px;
    }
}

@media only screen and (max-width: 1204px) {
    .close-menu .app-menu {
        margin-left: -256px;
        padding: 10px 0 20px 0
    }

    .main-content {
        padding-left: 0;
    }

    .close-menu .main-content {
        margin-left: 0;
        padding-left: 0px;
    }

    .close-menu .navbar-menu {
        top: 72px;
        width: 256px !important;
        height: calc(100% - 72px);
    }

    .divExpiryDateWrapper {
        display: none !important
    }

    .div-icon-expiry-date-wrapper {
        display: block !important;
    }

    .app-search {
        margin-left: 8px !important;
    }
}

@media only screen and (max-width: 885px) {
    .header-badge .badge-prepend, .header-badge .badge-text {
        display: none !important;
    }

    .navbar-header .header-badge {
        padding: 12px;
    }

    .navbar-header .header-badge img {
        margin-right: 0;
    }

    .navbar-header .navbar-logo {
        max-width: 208px;
        width: unset;
    }
        
}

    .scrollbar-height {
        height: calc(100% - 72px);
    }

.form-label {
    font-weight: 600;
    color: #E9E9E9;
}

    .color-black {
        color: #000 !important;
    }

    thead th {
        vertical-align: middle;
    }

    td .badge {
        font-size: 12px;
        padding-top: 0.35rem;
    }

    .badge-label:before {
        top: 1px;
        left: -15px;
    }

    /*CSS ALL WEB*/

    .checkbox-custom-create-partner {
        font-size: 25px;
        text-align: center;
        margin-left: 0 !important;
    }

    .img-upload-form {
        border: 1px dashed black;
    }

    .img-upload-after-img-form {
        border: 1px dashed black;
    }

    #back-to-top {
        bottom: 30px;
    }

    .bank-icon {
        width: 16px;
    }

    .fs-20 {
        font-size: 20px;
    }
    /* Custom */
    .pointer {
        cursor: pointer;
    }

    .form-copy {
        cursor: pointer;
    }

        .form-copy .form-control:disabled {
            background-color: #eee;
        }

    .loading-modal-withdraw-detail {
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Select2 */
    .select2-container--default .select2-selection--single .select2-selection__clear span {
        margin-right: 10px;
        line-height: 1.6em;
        font-size: 1.6em;
        color: #999;
    }
    /* End of Select2 */

    .badge-soft-warning {
        color: #bb8800;
        border: 1px solid #bb880066;
        background-color: rgb(255 190 11 / 30%);
    }

    .badge-soft-primary {
        border: 1px solid #50A198 66;
    }

    .badge-soft-gray {
        color: #979393;
        border: 1px solid #979393;
        background-color: #EBEBEB;
    }

    .badge-soft-info {
        border: 1px solid #299cdb66;
    }

    .badge-soft-success {
        color: #339966;
        border: 1px solid #33996666;
    }

    .badge-soft-secondary {
        border: 1px solid #3577f166;
    }

    .btn-primary-custom {
        background-color: #50A198  !important;
        color: #fff !important;
        border-radius: 6px;
    }
    .btn-primary-custom li {
        font-size: 14px;
    }

    .page-error ul {
        margin-bottom: 0;
    }

    .zoom {
        cursor: zoom-in;
    }

    .title-name{
        color: #fff;
    }

    .session-title-header-store-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

        .session-title-header-store-list a {
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            color: #6795EA;
            text-decoration: underline !important;
        }

    .box-package {
        width: 310px;
        flex-shrink: 0;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
        padding-bottom: 15px;
    }

    .ribbon-package {
        position: absolute;
        width: 300px;
        padding: 0.3rem 90px;
        box-sizing: border-box;
        transform: rotateZ(-45deg);
        top: 0;
        left: 0;
        transform-origin: 130px 160px;
        text-align: center;
        height: 35px;
        font-size: 16px;
    }

    .tab-status-package {
        width: 129px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 10px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.24);
    }

        .tab-status-package span {
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            color: #FFF;
            text-align: center;
        }

    .selling {
        background-color: #2AD798;
    }

    .selling-coming-soon {
        background: #FFA048;
    }

    .img-package {
        max-width: 268px;
        margin: 33px auto;
    }

        .img-package img {
            width: 268px;
            height: 170px;
        }

    .title-header-detail-package {
        text-align: center;
        margin-bottom: 16px;
    }

        .title-header-detail-package span {
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

    .detail-package {
        text-align: center;
        background: #F3F7FF;
        margin: 0 21px;
        margin-bottom: 0px;
        padding: 19px;
        margin-bottom: 15px;
        overflow-y: scroll;
        height: 100px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .detail-package span {
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
        }

    .session-btn-action-package {
        display: flex;
        margin: 0 21px;
    }

    .btnSelectBuyPackage {
        width: 100%;
        height: 40px;
        color: #FFF;
        flex-shrink: 0;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        flex-shrink: 0;
        border-radius: 4px;
        border: 1px solid #6795EA;
        background: #6795EA;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btnComingSoonPackage {
        width: 100%;
        height: 40px;
        color: #B1B1B1;
        flex-shrink: 0;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        flex-shrink: 0;
        border-radius: 4px;
        border: 1px solid #F7F7F7;
        background: #F7F7F7;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .session-select-package {
        background: linear-gradient(180deg, #668CEB 0%, #65C9DC 100%);
        height: 216px;
        border-radius: 20px;
    }

    .txt-title-header-select-package h2 {
        color: #fff !important;
    }

    .txt-title-header-select-package {
        color: #fff !important;
    }

    .session-box-package-secondary {
        text-align: center;
    }

    .box-package-secondary {
        text-align: center;
        width: 140px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .box-package-secondary-1 {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 10px 10px;
    }

        .box-package-secondary-1 p {
            color: #FFF;
            text-align: center;
            font-size: 10px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

    .border-bottom-package-secondary {
        border-bottom: 1px solid #fff;
        margin: 10px 0;
    }

    .amount-package-calculate {
        color: #FFF;
        text-align: center;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .box-package-secondary-2 {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #fff;
    }

    .txt-edit-suneditor {
        font-size: 10px;
        padding: 10px;
        overflow-y: scroll;
        height: 55px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-bottom: 8px;
    }

    .btn-form-secondary-package {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        cursor: pointer;
        border-radius: 8px;
    }


    .ribbon-package-in-box-preview {
        position: absolute;
        width: 300px;
        padding: 0.3rem 90px;
        box-sizing: border-box;
        transform: rotateZ(-45deg);
        top: 0;
        left: 0;
        transform-origin: 100px 170px;
        text-align: center;
        height: 20px;
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .session-btn-modal-confirm-buy-package div {
        width: 45%;
    }

    .session-summarize-package {
        padding: 105px 0px 0px 0px;
        position: relative;
    }

    .session-summarize-package-custom-box-bg {
        width: 100%;
        height: 323px;
        background: linear-gradient(180deg, #668CEB 0%, #65C9DC 100%);
        position: absolute;
        top: 0;
        border-radius: 20px;
    }

    .box-summarize-package-1 {
        padding: 94px 40px 0px 40px;
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
        position: relative;
        margin-bottom: 25px;
    }

    .box-summarize-package-2 {
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
        position: relative;
        padding: 28px 20px;
        margin-bottom: 25px;
    }

    .icon-header-trolley-store-shop {
        width: 326.161px;
        height: 181.285px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 90px;
        right: 0;
        text-align: center;
        top: -90px;
    }

    .box-bank-company {
        height: 112px;
        border-radius: 15px;
        background: #F3F7FF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 28px;
    }

    .box-bank-company-1 {
        display: flex;
        align-items: center;
    }

    .box-bank-company-2 {
        border-radius: 15px;
        background: #C7D1E5;
        width: 189px;
        height: 74px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .session-img-slip-upload {
        width: 210px;
        padding: 20px 0;
        flex-shrink: 0;
        border-radius: 8px;
        border: 1px dashed #E0E0E0;
        background: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 auto;
    }

    .icon-upload {
        text-align: center;
    }

        .icon-upload img {
            width: 45px;
            height: 45px;
        }

    .btn-upload {
        width: 113.333px;
        height: 22.667px;
        flex-shrink: 0;
        border-radius: 10px;
        background: #E0E0E0;
        color: #8E8E8E;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .nav-dark .nav-link {
        background-color: #ddd;
    }

    .nav-justified .nav-item, .nav-justified > .nav-link {
        padding: 0 2px;
    }

    .session-tab-deposit {
        display: flex;
        overflow-x: hidden;
    }

    .deposit-match-statement-nav > .nav-item {
        width: 190px;
        text-align: center;
    }

    .deposit-detail-slip .slip-img {
        width: auto;
        height: 180px;
        object-fit: cover;
    }

    .tab-deposit {
        opacity: 0.5;
        cursor: pointer;
        width: 211px;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20px;
        background-color: #FFF;
        border-radius: 4px;
        flex-shrink: 0;
        margin: 0 3px;
        position: relative;
    }

    .tab-deposit-active {
        opacity: unset !important;
    }

    .btn-close-tab-deposit {
        display: none;
        font-size: 20px;
        color: red;
        position: absolute;
        right: 7px;
        cursor: pointer;
    }

    .btn-close-tab-deposit-create-page {
        display: none;
        font-size: 20px;
        color: red;
        position: absolute;
        right: 7px;
        cursor: pointer;
    }

    .btn-close-tab-deposit-active {
        display: block !important;
    }

    .img-banner-tab {
        height: 345px;
        flex-shrink: 0;
        border-radius: 8px;
        border: 1px dashed #E0E0E0;
        background: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .btn-clear-img-fixed-deposit {
        position: absolute;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }

        .btn-clear-img-fixed-deposit i {
            font-size: 30px;
            color: red;
        }

    .session-condition-fixed-deposit {
        border-radius: 8px;
        border: 1px solid #E0E0E0;
    }

    .btn-add-condition-fixed-deposit {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        height: 68px;
        cursor: pointer;
    }

        .btn-add-condition-fixed-deposit i {
            font-size: 46px;
            color: #3D24A6;
        }

        .btn-add-condition-fixed-deposit h4 {
            color: #3D24A6;
        }

    #btnScrollTabRight {
        font-size: 26px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #btnScrollTabRightDisable {
        font-size: 26px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F5F5F5;
        color: #AFAFAF;
        cursor: unset;
    }

    #btnScrollTabLeftDisable {
        font-size: 26px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F5F5F5;
        color: #AFAFAF;
        cursor: unset;
    }

    #btnScrollTabLeft {
        font-size: 26px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-delete-condition-template {
        cursor: pointer;
    }

    .btn-delete-condition {
        cursor: pointer;
    }

    /* @ Table Affiliate Summary */

    .table-affiliate-summary {
        font-size: 12px;
    }

        .table-affiliate-summary .th-1 {
            border-bottom: none;
        }

        .table-affiliate-summary .th-summary:not(.th-odd) {
            border-bottom-color: #635A94;
        }

        .table-affiliate-summary .th-summary.th-odd {
            border-bottom-color: #9B95BE;
        }

        .table-affiliate-summary > :not(caption) > tr > th {
            font-weight: 700;
            height: 38px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .table-affiliate-summary .td-summary {
            color: #FFF;
            font-weight: 700;
            border-bottom: none;
        }

    .btn-unlock-custom {
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 125px;
        height: 30px;
        cursor: pointer;
    }

    .btn-confim-block-ip {
        width: 100%;
        background-color: #FF3232;
        border-radius: 35px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
    }

    .color-text-in-box-select-block-ip {
        color: #AAAAAA;
    }

    /* @ Block Ip Address */

    .block-ip-search-wrapper {
        width: 28%;
        height: 70vh;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }

    .show-searched-customer {
        display: flex;
        flex-direction: column;
        overflow: auto;
        flex: 1;
    }

    .block-ip-scrollable {
        overflow: auto;
        flex: 1;
    }

    .block-ip-scrollable-bottom {
        width: 10px;
        height: 10px;
    }

    .txt-before-after-amount-package-calculate {
        color: #F2F2F7;
        text-align: center;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
    }

    .txt-decoration-line {
        margin-left: 7px;
        text-decoration-line: line-through;
    }

    .box-package-payment-done {
        padding: 94px 40px 0px 40px;
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
        position: relative;
        margin-bottom: 25px;
        width: 600px;
    }

    .icon-header-order-done-store-shop {
        width: 177px;
        height: 177px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0px;
        right: 0;
        text-align: center;
        top: -90px;
    }

    .box-detail-payment-done {
        background-color: #F3F7FF;
        width: 100%;
        border-radius: 15px;
    }

    .box-pop-up-package-expired {
        width: 60%;
        height: 240px;
        border-radius: 15px;
        border: 2px solid #0004ff;
        background-color: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .showImagePreview {
        height: 345px;
    }

    .btn-add-deposit-fixed-mb {
        display: none;
    }


    @media only screen and (max-width: 676px) {
        .showImagePreview {
            height: 250px;
        }
    }


    @media only screen and (max-width: 576px) {
        .btn-add-deposit-fixed-pc {
            display: none;
        }

        .btn-add-deposit-fixed-mb {
            display: block;
        }
    }

    .txt-before-after-amount-package-calculate {
        color: #F2F2F7;
        text-align: center;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
    }

    .txt-decoration-line {
        margin-left: 7px;
        text-decoration-line: line-through;
    }

    .box-package-payment-done {
        padding: 94px 40px 0px 40px;
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
        position: relative;
        margin-bottom: 25px;
        width: 600px;
    }

    .icon-header-order-done-store-shop {
        width: 177px;
        height: 177px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0px;
        right: 0;
        text-align: center;
        top: -90px;
    }

    .box-detail-payment-done {
        background-color: #F3F7FF;
        width: 100%;
        border-radius: 15px;
    }

    .box-pop-up-package-expired {
        width: 60%;
        height: 240px;
        border-radius: 15px;
        border: 2px solid #0004ff;
        background-color: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* @ Custom Suneditor */

    .custom-suneditor.suneditor-sm + .sun-editor {
        border-radius: 6px;
    }

        .custom-suneditor.suneditor-sm + .sun-editor .se-toolbar {
            outline: none;
            background-color: transparent;
            border-bottom: 1px solid #dadada;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }

        .custom-suneditor.suneditor-sm + .sun-editor .se-btn-tray {
            background-color: transparent;
        }

        .custom-suneditor.suneditor-sm + .sun-editor .se-wrapper {
            border-radius: 6px;
        }

        .custom-suneditor.suneditor-sm + .sun-editor .se-btn {
            width: 20px;
            height: 20px;
            line-height: normal;
            font-size: 10px;
        }

        .custom-suneditor.suneditor-sm + .sun-editor .se-svg,
        .custom-suneditor.suneditor-sm + .sun-editor button > svg {
            width: 14px;
            height: 14px;
        }

        .custom-suneditor.suneditor-sm + .sun-editor .se-btn-select.se-btn-tool-size {
            width: 78px;
        }

    /* @ Custom Radio */

    /*.custom-radio > input {
    width: 24px;
    height: 24px;
}*/

    /* @ Custom Checkbox & Radio */
    .custom-checkbox,
    .custom-radio {
        padding-left: 0;
        margin-bottom: 0;
    }

        .custom-checkbox > label,
        .custom-radio > label {
            margin-left: .5rem;
            margin-bottom: 0;
            vertical-align: middle;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.03px;
        }

        .custom-radio > .form-check-input,
        .custom-checkbox > .form-check-input {
            border-color: #545454;
            background-color: #2A2A2A;
            width: 20px;
            height: 20px;
            margin-left: 0;
            margin-top: 0;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

            .custom-switch > .form-check-input:hover,
            .custom-radio > .form-check-input:hover,
            .custom-checkbox > .form-check-input:hover {
                box-shadow: 0 0 0 .25rem #2A2A2A;
            }

            .custom-switch > .form-check-input:active,
            .custom-radio > .form-check-input:active,
            .custom-checkbox > .form-check-input:active {
                filter: none;
                border-color: #D8DFFC;
                box-shadow: 0 0 0 .25rem #EBEFFE;
            }

            .custom-switch > .form-check-input:disabled,
            .custom-radio > .form-check-input:disabled,
            .custom-checkbox > .form-check-input:disabled {
                background-color: #F6F6F6;
                border-color: #E9E9E9;
            }

            .custom-radio > .form-check-input:checked {
                border-color: #50A198;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 4 4'%3E%3Ccircle r='2' fill='%2350A198 '/%3E%3C/svg%3E");
                background-position: center;
                background-origin: border-box;
                background-size: 60%;
            }

            .custom-checkbox > .form-check-input:checked {
                background-color: transparent !important;
                border-color: #50A198 !important;
            }

                .custom-switch > .form-check-input:checked:hover,
                .custom-radio > .form-check-input:checked:hover,
                .custom-checkbox > .form-check-input:checked:hover {
                    box-shadow: 0 0 0 .25rem #DBD7F0;
                }

                .custom-switch > .form-check-input:checked:active,
                .custom-radio > .form-check-input:checked:active,
                .custom-checkbox > .form-check-input:checked:active {
                    box-shadow: 0 0 0 .25rem #F6F6F6;
                }

    /* @ Custom Switch */

    .custom-switch {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .custom-switch.switch-alone {
            padding-left: 0;
            min-height: none;
            margin-bottom: 0;
        }

        .custom-switch > .form-check-input {
            width: 47px;
            height: 23px;
            margin-left: 0;
            margin-top: 0;
            border-color: #C8C8C8;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23C8C8C8'/%3E%3C/svg%3E");
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-position .15s ease-in-out;
        }

            .custom-switch > .form-check-input:disabled {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23E9E9E9'/%3E%3C/svg%3E");
            }

    /* @ Custom Card */
.custom-card {
    background-color: transparent;
    border-radius: 16px;
    padding: 24px;
    border-color: #545454;
}

.color-tr-status-emerald-success {
    background: #2A2A2A;
}

.color-tr-status-emerald-danger {
    background: #450000;
}

.color-tr-status-emerald-warning {
    background: #3F3F3F;
}


/* @ Custom tr detail minigame */
.color-tr-status-emerald-detail-mini-game-success {
    background: #2A2A2A;
}

.color-tr-status-emerald-detail-mini-game-dark {
    background: #450000;
}

.color-tr-status-emerald-detail-mini-game-warning {
    background: #2A2A2A;
}

.color-tr-status-emerald-detail-mini-game-danger {
    background: #450000;
}

.color-tr-status-emerald-detail-mini-game-expired {
    background: #3F3F3F;
}

.color-text-tbody-theme-emerald {
    color: #696969;
}

.custom-card-report-minigame {
    border-radius: 16px;
}

.btn-logout-custom-mini-game {
    position: absolute;
    display: flex;
    align-items: center;
    cursor: pointer;
    right: 40px;
    top: 20px;
}

    .btn-logout-custom-mini-game h4 {
        font-size: 16px;
    }

.td-last-summary-thmem-emerald td {
    border-bottom: 1px solid transparent !important;
}

.padding-header-report-minigame {
    padding: 28px 24px;
}

.color-th-report-theme-emerald tr th {
    background: #0D2A27 !important;
    color: #E9E9E9;
}
.custom-card.active {
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
}

        .custom-card.full-card {
            height: 100%;
        }

        .custom-card.full-flex {
            display: flex;
            flex-direction: column;
        }

        .custom-card-shadow {
            box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
        }

    /* @ Custom Offcanvas */

    .custom-offcanvas {
        --vz-offcanvas-width: 800px;
        margin-top: 72px;
        border: none !important;
    }

        .custom-offcanvas .offcanvas-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            cursor: pointer;
            color: #000;
        }

        .custom-offcanvas .offcanvas-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem;
            border-bottom: 2px solid #E9E9E9;
        }

        .custom-offcanvas .offcanvas-body {
            padding: 1.5rem;
        }

    .custom-offcanvas .offcanvas-section {
        display: flex;
        align-items: center;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .offcanvas-badge {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 40px;
        border-radius: 0 .5rem .5rem 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-family: 'Noto Sans Thai';
        font-size: 16px;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: .05px;
        user-select: none;
        color: #474747;
        background-color: #F4F0FF;
        background-image: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    }

    /* @ Custom Row */
    .custom--row,
    .custom-row {
        --column-width: 80px;
    }

    .col--h,
    .col-h {
        display: inline-block;
        /*color: #747474;*/
        max-width: 100%;
        width: var(--column-width);
        flex: 0 0 var(--column-width);
        margin-bottom: 0;
    }

    .col--d,
    .col-d {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 0;
    }

    .col--h + .col--d,
    .col-h + .col-d {
        width: calc(100% - var(--column-width));
        flex: 0 0 calc(100% - var(--column-width));
    }

    .col--f,
    .col-f {
        margin-left: auto;
        width: calc(100% - var(--column-width));
        flex: 0 0 calc(100% - var(--column-width));
    }

    .col--w,
    .col-w {
        width: auto;
        flex: 1 0 auto;
    }

        .col--w + .col--d,
        .col-w + .col-d {
            width: auto;
            flex: 0 0 auto;
        }

    /* @ Custom Swal */

    .swal2-container .custom-swal-action-full {
        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }

    .swal2-container .custom-swal-swap-button {
        flex-direction: row-reverse;
    }

    /* @ Progress Circular */
    .progress-circle {
        --progress: 0deg;
        --color: #50A198;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background-image: conic-gradient(var(--color) var(--progress), #EEE 0deg);
        background-color: #11101F;
    }

        .progress-circle::before {
            content: ' ';
            position: absolute;
            width: calc(100% - 1.25rem);
            height: calc(100% - 1.25rem);
            background-color: inherit;
            border-radius: 50%;
        }

    .progress-value {
        color: var(--color);
        position: relative;
        font-weight: 700;
        font-size: 18px;
        user-select: none;
    }

    /* @ Custom Button */

.custom-btn-a {
    color: #72DCD9;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
}

    /* @ Custom Input */
    .custom-input {
        --input-height: 40px;
        --input-padding-end: 0px;
        position: relative;
    }

.ck-editor {
    color: #E9E9E9;
}

.custom-input .form-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.03px;
    margin-bottom: .5rem;
    color: #E9E9E9;
}

.custom-input:not(:has(.custom-checkbox)) input {
    background-color: #202020;
    border-color: #545454;
    color: #E9E9E9;
    border-width: 1px;
    border-radius: 8px;
    padding-left: 1rem;
    padding-right: calc(var(--input-padding-end, 0px) + 1rem);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.03px;
    height: var(--input-height);
    position: relative;
}
.custom-input textarea {
    border-width: 1px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.03px;
    position: relative;
    background: #2A2A2A;
    height: 130px;
}

                .custom-input input::placeholder,
                .custom-input textarea::placeholder {
                    color: #545454;
                    opacity: 1;
                }

            .custom-input input:not(:placeholder-shown),
            .custom-input textarea:not(:placeholder-shown),
            .custom-input input:not(:placeholder-shown) ~ .text-append,
            .custom-input input:not(:placeholder-shown) ~ .text-prepend,
            .custom-input:has(input:not(:placeholder-shown)) > .text-append,
            .custom-input:has(input:not(:placeholder-shown)) > .text-prepend,
            .custom-input-middle:has(input:not(:disabled):not(:placeholder-shown)) input,
            .custom-input-middle:has(input:not(:disabled):not(:placeholder-shown)) > .text-append,
            .custom-input-middle:has(input:not(:disabled):not(:placeholder-shown)) > .text-prepend
            /*.custom-input-middle:not(.disabled):has(input:not(:placeholder-shown)) > .text-append,
            .custom-input-middle:not(.disabled):has(input:not(:placeholder-shown)) > .text-prepend,
            .custom-input-middle:not(.disabled):has(input:not(:placeholder-shown)) input*/ {
                border-color: #5E5E5E;
            }

                .custom-input input:not(:placeholder-shown)::placeholder,
                .custom-input textarea:not(:placeholder-shown)::placeholder,
                .custom-input-middle:not(.disabled):has(input:not(:placeholder-shown)) input::placeholder {
                    color: #474747;
                }

                .custom-input input:not(:placeholder-shown) + .float-prepend > .navigate-close {
                    display: block;
                }

                .custom-input input:not(:placeholder-shown) + .float-prepend > *:not(.navigate-close):not(.navigate-invalid):not(.navigate-valid) {
                    display: none;
                }

            .custom-input input:hover,
            .custom-input input:hover ~ .text-append,
            .custom-input input:hover ~ .text-prepend,
            .custom-input textarea:hover,
            .custom-input > .input-wrapper:hover ~ .text-append,
            .custom-input > .input-wrapper:hover ~ .text-prepend,
            .custom-input-middle:has(input:not(:disabled):hover) input,
            .custom-input-middle:has(input:not(:disabled):hover) > .text-append,
            .custom-input-middle:has(input:not(:disabled):hover) > .text-prepend
            /*.custom-input-middle:not(.disabled):has(input:hover) input,
            .custom-input-middle:not(.disabled):has(input:hover) > .text-append,
            .custom-input-middle:not(.disabled):has(input:hover) > .text-prepend*/ {
                border-color: #50A198;
                box-shadow: 0 0 0 1px #50A198;
            }

                .custom-input input:focus,
                .custom-input input:focus ~ .text-append,
                .custom-input input:focus ~ .text-prepend,
                .custom-input textarea:focus,
                .custom-input > .input-wrapper:focus-within ~ .text-append,
                .custom-input > .input-wrapper:focus-within ~ .text-prepend,
                .custom-input-middle:not(.disabled):has(input:focus) input,
                .custom-input-middle:not(.disabled):has(input:focus) > .text-append,
                .custom-input-middle:not(.disabled):has(input:focus) > .text-prepend {
                    border-color: #50A198;
                    box-shadow: 0 0 0 1px #50A198;
                }

    .custom-input textarea:focus {
        background-color: #2A2A2A !important;
    }

                    .custom-input input:disabled,
                    .custom-input input:disabled ~ .text-append,
                    .custom-input input:disabled ~ .text-prepend,
                    .custom-input textarea:disabled,
                    .custom-input-middle.disabled > .text-append,
                    .custom-input-middle.disabled > .text-prepend,
                    .custom-input-middle.disabled > .input-right::after {
                        color: #545454;
                        background-color: #F6F6F6;
                        border-color: #545454;
                        box-shadow: none;
                    }
        .custom-input input:disabled::placeholder,
        .custom-input-middle.disabled input::placeholder {
            color: #C8C8C8;
        }

            .custom-input input:not(:placeholder-shown):disabled,
            .custom-input input:not(:placeholder-shown):disabled ~ .text-append,
            .custom-input input:not(:placeholder-shown):disabled ~ .text-prepend,
            .custom-input textarea:not(:placeholder-shown):disabled,
            .custom-input-middle.disabled:has(input:not(:placeholder-shown)) > .text-append,
            .custom-input-middle.disabled:has(input:not(:placeholder-shown)) > .text-prepend,
            .custom-input-middle.disabled:has(input:not(:placeholder-shown)) > .input-right::after {
                color: #474747;
            }

.custom-input > input.flatpickr-input[readonly] {
    background-color: #2A2A2A;
    color: #ADADAD;
}

#boxMinigameSelectAllDay-1 {
    color: #fff;
    border: 1px solid #50A198;
    background: #50A198;
}

.custom-input > input.flatpickr-input:disabled {
    background-color: #2A2A2A;
}

.custom-input > input.flatpickr-input::placeholder {
    color: #545454;
}

        .custom-input .text-append,
        .custom-input .text-prepend,
        .custom-input-middle .text-append,
        .custom-input-middle .text-prepend {
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
            height: var(--input-height);
            padding: 0 1rem;
            border-width: 0;
            border-style: solid;
            color: #E9E9E9;
            background-color: #202020;
            border-color: #545454;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
        }

        .custom-input.custom-input-group > input,
        .custom-input.custom-input-group > .input-wrapper,
        .custom-input.custom-input-group > .custom-input-middle {
            order: 2;
            flex: 1 0;
        }

        .custom-input.custom-input-group .text-prepend,
        .custom-input-middle > .text-prepend {
            order: 3;
            border-radius: 0 8px 8px 0;
            border-width: 1px 1px 1px 0;
        }

        .custom-input.custom-input-group .text-append,
        .custom-input-middle > .text-append {
            order: 1;
            border-radius: 8px 0 0 8px;
            border-width: 1px 0 1px 1px;
        }

        .custom-input.custom-input-group.has-prepend > input,
        .custom-input.custom-input-group.has-prepend > .input-wrapper > input,
        .custom-input-middle.has-prepend > .input-right > input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .custom-input.custom-input-group.has-append > input,
        .custom-input.custom-input-group.has-append > .input-wrapper > input,
        .custom-input-middle.has-append > .input-left > input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .custom-input .float-prepend {
            color: #DBDBDB;
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            width: auto;
            height: var(--input-height, 40px);
            gap: .5rem;
            padding-right: 1rem;
            transition: color .15s ease-in-out;
        }

            .custom-input .float-prepend > .navigate-close {
                display: none;
                cursor: pointer;
                color: #5E5E5E;
            }

            .custom-input .float-prepend > .navigate-invalid,
            .custom-input .float-prepend > .navigate-valid {
                display: none;
            }

            .custom-input .float-prepend + input {
                padding-right: 40px;
            }

        .custom-input:focus-within .float-prepend {
            color: #50A198;
        }

        .custom-input-middle.custom-invalid > .custom-input:not(.custom-float) > input,
        .custom-input-middle.custom-invalid > .custom-input:not(.custom-float) > .input-fake,
        .custom-input.custom-invalid:not(.custom-float) > .input-fake,
        .custom-input.custom-invalid:not(.custom-float) > input {
            padding-right: calc(var(--input-padding-end, 0px) + 2.75rem);
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23F64646' /%3E%3Cpath d='M12.1329 18.346C11.8214 18.346 11.5547 18.2351 11.3328 18.0132C11.1109 17.7914 11 17.5247 11 17.2131C11 16.9016 11.1109 16.6349 11.3328 16.413C11.5547 16.1911 11.8214 16.0802 12.1329 16.0802C12.4445 16.0802 12.7112 16.1911 12.933 16.413C13.1549 16.6349 13.2658 16.9016 13.2658 17.2131C13.2658 17.5247 13.1549 17.7914 12.933 18.0132C12.7112 18.2351 12.4445 18.346 12.1329 18.346ZM11.1017 14.6422V6H13.1642V14.6422H11.1017Z' fill='%23FFF' /%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right calc(var(--input-padding-end, 0px) + 1rem) center;
            background-size: 24px 24px;
        }

        .custom-input.custom-invalid:not(.custom-float) > .dropdown-toggler + .input-fake {
            padding-right: 4rem;
            background-position: right 2rem center;
        }

    /* @ Custom Input Float */

    .custom-float > .input-wrapper {
        position: relative;
    }

    /* @ Custom Input Group */

    .custom-input-group {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

        .custom-input-group > .invalid-feedback,
        .custom-input-group > .valid-feedback,
        .custom-input-middle > .invalid-feedback,
        .custom-input-middle > .valid-feedback {
            order: 4;
            flex: 1 0 100%;
        }

        .custom-input-group > .group-end {
            display: flex;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
        }

            .custom-input-group > .group-end > .system-btn {
                height: calc(40px - .5rem);
                margin: .25rem .25rem .25rem 0;
                font-size: 10px;
                font-weight: 700;
                line-height: 16px;
                letter-spacing: 0;
                padding: 0 1rem;
            }

    /* @ Custom Input Middle */

    .custom-input-middle {
        --input-height: 40px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }

        .custom-input-middle > .custom-input {
            order: 2;
            flex: 1 0;
        }

        .custom-input-middle > .input-left > input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .custom-input-middle > .input-right > input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .custom-input-middle > .input-right::after {
            content: attr(data-middle-text);
            position: absolute;
            top: calc(var(--input-height) / 2);
            left: 0;
            transform: translate(-50%, -50%);
            color: #474747;
            background-color: #FFF;
            font-weight: 700;
            font-size: 10px;
            line-height: 16px;
        }

        .custom-input-middle > .middle-text {
            user-select: none;
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            font-weight: 700;
            font-size: 10px;
            line-height: 16px;
            color: #474747;
            top: calc(var(--input-height, 40px) / 2);
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            background-color: #FFF;
        }

.custom-input.custom-input-disabled.disabled .input-group .custom-color {
    color: #3F3F3F;
    background-color: #2A2A2A;
    border-color: #2A2A2A;
    box-shadow: none;
}

.custom-input.custom-input-disabled.disabled .input-group.custom-color {
    color: #3F3F3F;
    background-color: #2A2A2A;
    border-color: #2A2A2A;
    box-shadow: none;
}

/* @ Custom Filter */
.custom-filter {
    background-color: #202020;
    color: #E9E9E9;
    font-family: 'Noto Serif Thai';
    cursor: pointer;
    user-select: none;
    border: 1px solid #3F3F3F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 20px;
    height: 32px;
    width: auto;
    border-radius: .25rem;
    padding: 0 .5rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .custom-filter.fill,
    .custom-filter.active,
    .custom-filter:focus {
        color: #E9E9E9;
        background-color: #202020;
    }

    .custom-filter:hover {
        color: #50A198;
    }

            .custom-filter:hover > .filter-icon > svg,
            .custom-filter:focus > .filter-icon > svg,
            .custom-filter.active > .filter-icon > svg,
            .custom-filter.fill > .filter-icon > svg {
                fill: url(#filter-gradient);
            }

            .custom-filter.fill > .filter-toggler {
                display: none;
            }

        .custom-filter.disabled {
            color: #C8C8C8;
            border-color: #C8C8C8;
            background-color: #F6F6F6;
        }

            .custom-filter.disabled > .filter-icon > svg {
                fill: #C8C8C8;
            }

            .custom-filter.disabled > .filter-close {
                color: #C8C8C8;
            }

    .custom-filter:focus,
    .custom-filter.active {
        border-color: #E9E9E9;
        box-shadow: 2px 2px 4px 0px #3C2D8F66, -2px -2px 4px 0px #50A198 33;
    }

        .custom-filter > .filter-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .custom-filter > .filter-icon > svg {
                fill: #E9E9E9;
                transition: fill .15s ease-in-out;
            }

        .custom-filter > .filter-title {
            font-weight: 500;
            letter-spacing: -.08px;
            font-size: 12px;
            line-height: 18px;
            padding-left: .25rem;
            padding-right: .25rem;
        }

        .custom-filter > .filter-value {
            font-weight: 700;
        }

        .custom-filter > .filter-badge {
            display: none;
            user-select: none;
            margin-left: .25rem;
            margin-right: .25rem;
            height: 20px;
            color: #50A198;
            background-color: #B7AFE1;
            padding-left: 6px;
            padding-right: 6px;
            font-family: Noto Sans Thai;
            font-size: 12px;
            font-weight: 700;
            line-height: 20px;
            border-radius: 28px;
        }
            .custom-filter > .filter-badge.show {
                display: inline-block;
            }

        .custom-filter > .filter-toggler {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: .25rem;
            transform-origin: center;
            transition: transform .25s ease;
        }

            .custom-filter.toggled > .filter-toggler,
            .custom-filter > .filter-toggler.toggled {
                transform: rotate(.5turn);
            }

    .custom-filter > .filter-close {
        display: none;
        color: #50A198;
        cursor: pointer;
        margin-left: .5rem;
        transition: fill .15s ease-in-out;
    }

    .custom-filter.fill {
        border-color: #50A198;
    }

        .custom-filter.fill > .filter-close {
            display: block;
        }

    .filter-divider {
        flex: 0 0;
        border-right: 1px solid #E9E9E9;
        margin-right: 1rem;
        margin-left: 1rem;
        padding: 0;
        align-self: stretch;
    }

    .filter-fill {
        flex: 1 0;
    }

    .filter-alone {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        color: #474747;
        border: 1px solid #F6F6F6;
        background-color: #F6F6F6;
        height: 32px;
        width: 32px;
        border-radius: .25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    }

        .filter-alone:hover {
            border-color: #F3F1FF;
            background-color: #F3F1FF;
        }

        .filter-alone:focus {
            border-color: #6F60C2;
            background-color: #F3F1FF;
        }

            .filter-alone.active > svg,
            .filter-alone:focus > svg {
                fill: url(#filter-gradient);
            }

        .filter-alone.active {
            background-color: #50A198;
            border-color: #50A198;
        }

    .filter-flatpicker {
        visibility: hidden;
        height: 100%;
        width: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }

    /* @ Custom Tabs */

    .system-tabs {
        user-select: none;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        gap: 0;
        border-radius: 12px;
        padding-left: 4px;
        padding-right: 4px;
        background-color: #FFF;
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
    }

        .system-tabs > .tabs-item {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex: 1 0;
            height: 40px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 700;
            line-height: 28px;
            padding: 8px 0 4px 0;
            letter-spacing: -.05px;
        }

            .system-tabs > .tabs-item > span {
                display: block;
                color: #C8C8C8;
                height: 100%;
                cursor: pointer;
                transition: color .15s ease-in-out, background-color .15s ease-in-out;
            }

                .system-tabs > .tabs-item.active > span,
                .system-tabs > .tabs-item > span:hover {
                    color: #6F60C2;
                }

        .system-tabs > .tabs-navigate {
            position: absolute;
            height: 40px;
            border-radius: 6px;
            color: #1f7e7b;
            transition: transform .5s ease-in-out;
            background: linear-gradient(90deg, #B0C0F9 0%, #EBEFFE 51.28%, #50A198 100%);
        }

    /* @ Custom Input Inline */
    .custom-input-inline > input {
        text-align: right;
        font-size: 12px;
        padding-right: 35px;
        height: 30px;
        border-radius: 4px;
        border: 1px solid #BDBDBD;
    }

    .custom-input-inline .inline-float-icon {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
    }

    /* @ Custom Group */

    .custom-group-inputs {
        position: relative;
        flex: 1 0;
    }

        .custom-group-inputs > input {
            border-top-right-radius: inherit;
            border-bottom-right-radius: inherit;
        }

        .custom-group-inputs > .group-input-close {
            cursor: pointer;
            user-select: none;
            position: absolute;
            right: .75rem;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 700;
        }

    /* Custom date flatpickr */
    .custom-date-flatpickr:focus + .clear-date-time, .custom-date-flatpickr:focus + .clear-date-time-true-wallet {
        color: var(--vz-body-color);
        background-color: var(--vz-input-bg);
        border-color: var(--vz-input-focus-border);
        outline: 0;
        -webkit-box-shadow: 0 0 0 0 rgba(75,56,179,.25);
        box-shadow: 0 0 0 0 rgba(75,56,179,.25);
    }

    /* @ Custom Flatpicker */

    .custom-flatpicker:not(:disabled)::placeholder,
    .custom-flatpicker:not(:disabled)::-webkit-input-placeholder {
        color: #000;
    }

    /* @ Custom Dropdown */
.dropdown-wrapper {
    --border-color: #CFCFCF;
    position: relative;
}
    /*.dropdown-wrapper.multiple {
        overflow: hidden;
    }*/



.custom-dropdown {
    display: none;
    flex-direction: column;
    position: fixed;
    color: #B5B5B5;
    cursor: auto;
    background-color: #2A2A2A;
    border-radius: 8px;
    width: auto;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    font-weight: 400;
    line-height: 1.5;
    padding: .5rem 0;
    min-width: 180px;
    z-index: 1070;
    user-select: none;
    white-space: nowrap;
    text-align: left;
    border: 1px solid #3B9D9A;
    box-shadow: 2px 2px 4px 0px #0000001A, -2px 0px 4px 0px #0000001A;
}

        .custom-dropdown.show {
            display: flex;
        }

        .custom-dropdown::-webkit-scrollbar,
        .custom-dropdown-body::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .custom-dropdown::-webkit-scrollbar-track,
        .custom-dropdown-body::-webkit-scrollbar-track {
            background: #F4F4F4;
        }

        .custom-dropdown::-webkit-scrollbar-thumb,
        .custom-dropdown-body::-webkit-scrollbar-thumb {
            background-color: #D1D1D1;
            border-radius: 5px;
            border: 2px solid #F4F4F4;
        }

.custom-dropdown-dark-mode {
    background: rgba(75, 56, 179, 1) !important;
    border: 1px solid rgba(84, 66, 183, 1) !important;
    box-shadow: 8px 8px 10px 0px rgba(15, 7, 61, 0.75),-4px -4px 10px 0px rgba(101, 90, 230, 1);
}

.dropdown-toggler {
    color: #D9D9D9;
    cursor: pointer;
    user-select: none;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 40px;
    border-radius: inherit;
    padding-right: 12.5px;
}

        .dropdown-toggler > svg {
            transition: transform .2s ease;
            transform-origin: center;
        }

        .dropdown-toggler.toggled > svg {
            transform: rotate(.5turn);
        }

    .dropdown-wrapper > .dropdown-toggler + .input-fake {
        padding-right: 2rem;
    }

    .dropdown-wrapper > .input-fake {
        display: flex;
        align-items: center;
        color: #000;
        background-clip: padding-box;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*overflow: hidden;*/
        border: 1px solid #C8C8C8;
        cursor: pointer;
        user-select: none;
        border-radius: 8px;
        height: 40px;
        background-color: #FFF;
        width: 100%;
        padding: 0 1rem;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.03px;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    }

.dropdown-wrapper > .dropdown-toggler:hover + .input-fake {
    border-color: #50A198;
    /*box-shadow: 0 0 0 1px #50A198;*/
}

.dropdown-wrapper > .dropdown-toggler.toggled {
    color: #545454 !important;
}

    .dropdown-wrapper > .dropdown-toggler.toggled + .input-fake {
        border-color: #50A198;
        /*box-shadow: 0 0 0 1px #50A198;*/
    }

.dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom:hover + .input-fake-custom-dash-board {
    border-color: rgba(177, 165, 240, 1) !important;
}

.dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom:hover > .icon-drop-down-custom-dash-board {
    border-color: rgba(177, 165, 240, 1) !important;
}

.dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.toggled {
    color: #50A198  !important;
}

    .dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.toggled + .input-fake-custom-dash-board {
        border-color: rgba(177, 165, 240, 1) !important;
        box-shadow: 0 0 0 0 #50A198  !important;
    }

    .dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.toggled > .icon-drop-down-custom-dash-board {
        border-color: rgba(177, 165, 240, 1) !important;
    }


.dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.dark-mode:hover + .input-fake {
    border-color: rgba(137, 239, 220, 1) !important;
}

.dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.dark-mode:hover > .icon-drop-down-custom-dark-mode-dash-board {
    border-color: rgba(137, 239, 220, 1) !important;
}

.dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.dark-mode.toggled {
    color: #50A198  !important;
}

    .dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.dark-mode.toggled + .input-fake {
        border-color: rgba(137, 239, 220, 1) !important;
    }

    .dropdown-wrapper > .dropdown-toggler.dropdown-toggler-custom.dark-mode.toggled > .icon-drop-down-custom-dark-mode-dash-board {
        border-color: rgba(137, 239, 220, 1) !important;
    }

.dropdown-wrapper.empty > .input-fake {
    color: #E9E9E9;
    border-color: #E9E9E9;
    background: #2A2A2A;
}

    .dropdown-wrapper.multiple.empty > .input-fake {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dropdown-wrapper.multiple > .input-fake {
        display: flex;
        gap: 2px;
        align-items: center;
        flex-flow: row nowrap;
        padding: 5px;
    }

        .dropdown-wrapper.multiple > .input-fake > .multiple-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 24px;
            white-space: nowrap;
            border-radius: 13px;
            padding: 0 10px;
            color: #FFF;
            background-color: #50A198;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: -0.08px;
            position: relative;
            z-index: 10;
            animation-duration: .75s;
            animation-fill-mode: both;
            transition: background-color .2s ease;
        }

            .dropdown-wrapper.multiple > .input-fake > .multiple-item:hover {
                background-color: #6F60C2;
            }

        .dropdown-wrapper.multiple > .input-fake .multiple-close {
            cursor: pointer;
            color: #FFF;
            user-select: none;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #FFF;
            padding-right: 12px;
            margin-right: 12px;
        }

.dropdown-wrapper.disabled > .input-fake,
.dropdown-wrapper[disabled] > .input-fake {
    color: #3F3F3F;
    border-color: #2A2A2A !important;
    box-shadow: none !important;
    background-color: #2A2A2A;
}

    .dropdown-wrapper.disabled .dropdown-toggler,
    .dropdown-wrapper[disabled] .dropdown-toggler {
        color: #C8C8C8;
    }

    .dropdown-wrapper.fill.disabled .dropdown-toggler,
    .dropdown-wrapper.fill[disabled] .dropdown-toggler {
        color: #474747 !important;
    }

    .dropdown-wrapper.multiple.disabled > .input-fake > .multiple-item,
    .dropdown-wrapper.multiple[disabled] > .input-fake > .multiple-item {
        color: #FFF;
        background-color: #C8C8C8;
    }

    .dropdown-wrapper.multiple.disabled:not(.empty) > .input-fake,
    .dropdown-wrapper.multiple[disabled]:not(.empty) > .input-fake {
        background-color: #F6F6F6;
    }

.dropdown-wrapper.fill > .input-fake {
    color: #50A198;
    border-color: #545454;
    background: #2A2A2A;
}

.dropdown-wrapper.fill .dropdown-toggler {
    color: #545454;
}

    .custom-dropdown-title {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-bottom: 2px;
    }

    .custom-dropdown-body {
        overflow: auto;
        flex-grow: 1;
    }

#customSelectSenderNameSms.disabled > .input-fake, #customSelectSenderNameSms[disabled] > .input-fake {
    color: #3F3F3F;
    border-color: #2A2A2A !important;
    box-shadow: none !important;
    background-color: #2A2A2A;
}


.custom-dropdown-item {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    display: block;
    min-height: 40px;
    width: 100%;
    padding: .5rem 44px .5rem 1rem;
    color: #B5B5B5;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.03px;
    transition: color .2s ease, background-color .2s ease;
}

.custom-dropdown-item.disabled {
    background-color: #00000080 !important;
    pointer-events: none;
}

    .custom-dropdown-item::after,
    .custom-dropdown-item::before {
        content: ' ';
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #50A198 0%, #FEDB6B 100%);
        transition: opacity .2s ease;
    }

.dropdown-item-custom-mini-game::after,
.dropdown-item-custom-mini-game::before {
    content: ' ';
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #50A198 0%, #FEDB6B 100%);
    transition: opacity .2s ease;
}

.dropdown-item-custom-mini-game:hover::before,
.dropdown-item-custom-mini-game:hover::after {
    opacity: 1;
}

.dropdown-item-custom-mini-game::after {
    right: 0;
    border-radius: 10px 0 0 10px;
}

.dropdown-item-custom-mini-game::before {
    left: 0;
    border-radius: 0 10px 10px 0;
}

        .custom-dropdown-item::after {
            right: 0;
            border-radius: 10px 0 0 10px;
        }

        .custom-dropdown-item::before {
            left: 0;
            border-radius: 0 10px 10px 0;
        }

    .custom-dropdown-item:hover {
        color: #E9E9E9;
        background-color: #226F67;
    }

            .custom-dropdown-item:hover::before,
            .custom-dropdown-item:hover::after {
                opacity: 1;
            }

    .custom-dropdown-item:active {
        color: #50A198;
        background-color: transparent;
    }

            .custom-dropdown-item:active::before,
            .custom-dropdown-item:active::after {
                opacity: .3;
                /*background: linear-gradient(180deg, #EDEBF7 0%, #D8DFFC 51.28%, #D6F2F5 100%);*/
            }

    .custom-dropdown-item.selected {
        color: #50A198;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.44476 16.5746L4.95525 11.8222C4.74042 11.5948 4.44909 11.4671 4.14533 11.4671C3.84156 11.4671 3.55024 11.5948 3.33541 11.8222C3.12065 12.0496 3 12.358 3 12.6795C3 13.0011 3.12065 13.3095 3.33541 13.5369L7.82491 18.2893C8.03768 18.5146 8.29029 18.6933 8.56833 18.8153C8.84637 18.9372 9.14437 19 9.44533 19C9.74628 19 10.0443 18.9372 10.3223 18.8153C10.6004 18.6933 10.853 18.5146 11.0657 18.2893L21.6646 7.06975C21.8794 6.84235 22 6.53396 22 6.2124C22 5.89085 21.8794 5.58246 21.6646 5.35505C21.4498 5.12771 21.1584 5 20.8547 5C20.5509 5 20.2596 5.12771 20.0448 5.35505L9.44476 16.5746Z' fill='%2300C17C' /%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: calc(100% - 1rem) center;
    }

        .custom-dropdown-item.disabled {
            color: #C8C8C8;
            background-color: transparent;
        }
            .custom-dropdown-item.disabled:hover::before,
            .custom-dropdown-item.disabled:hover::after {
                opacity: 0;
            }

    .dropdown-wrap .custom-dropdown-item {
        white-space: normal;
        text-overflow: clip;
    }

    .custom-dropdown-search {
        margin: 0 .25rem;
        width: calc(100% - .5rem);
    }

        .custom-dropdown-search .btn-search {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            width: 40px;
            height: 40px;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .custom-dropdown-search .search-icon {
            background-color: transparent;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            padding-right: 0;
        }

        .custom-dropdown-search .input-search {
            border-left: none;
        }

        .custom-dropdown-search:focus-within .search-icon {
            border-color: var(--vz-input-focus-border);
        }

        .custom-dropdown-filter-year + .custom-dropdown-body,
        .custom-dropdown-search + .custom-dropdown-body {
            margin-top: 5px;
        }

.icon-menu-custom {
    width: 32px;
    height: 32px;
}

.dropdown-wrapper.dropdown-xs .custom-dropdown {
    min-width: 160px;
}

.dropdown-wrapper.dropdown-xs .custom-dropdown-item {
    min-height: auto;
    height: 24px;
    line-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.08px;
}
    .dropdown-wrapper.dropdown-xs .custom-dropdown-item + .custom-dropdown-item {
        margin-top: 2px;
    }

.dropdown-wrapper.dropdown-xs .custom-dropdown {
    min-width: 160px;
}

.dropdown-wrapper.dropdown-xs .custom-dropdown-item {
    min-height: auto;
    height: 24px;
    line-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.08px;
}
    .dropdown-wrapper.dropdown-xs .custom-dropdown-item + .custom-dropdown-item {
        margin-top: 2px;
    }

    /* @ Additional for Customer Dropdown */

    .dropdown-wrapper .dropdown-input-wrapper {
        position: relative;
    }

    .custom-dropdown-body .dropdown-body-caption {
        padding: 0 .5rem;
    }

    .dropdown-wrapper.dropdown-google.disabled .navigate-reset {
        pointer-events: none;
    }

    .dropdown-navigate {
        color: #ced4da;
        position: absolute;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: end;
        width: auto;
        height: 36px;
        padding-right: 12.5px;
        right: 0;
        z-index: 10;
    }

    .navigate-reset {
        transition: color .2s ease, background-color .2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .navigate-reset:hover {
            color: #000;
        }

    .dropdown-wrapper.empty .navigate-reset {
        display: none;
    }

    .dropdown-wrapper.input-40 .dropdown-toggler,
    .dropdown-wrapper.input-40 > .input-fake {
        height: 40px;
    }

    /* @ Custom Floating Box (Evo) */

    .floating-box {
        position: fixed;
        background-color: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 25%);
        z-index: 2000;
        animation-duration: .25s !important;
        overflow: auto;
    }

        .floating-box.unseen {
            display: none !important;
        }

    .custom-floating {
        padding: 10px 1rem 20px;
        border-radius: 10px;
    }

    /* @ Custom Datepicker (Evo) */

    .custom-datepicker {
        display: flex;
        position: relative;
        height: auto;
        width: inherit;
    }

    .datepicker-menu {
        list-style: none;
        padding-left: 0;
        padding-right: 20px;
        border-right: 1px solid #DFDFDF;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .datepicker-item {
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        width: 110px;
        height: 36px;
        line-height: 36px;
        padding-left: 14px;
        border-radius: 8px;
        transition: .2s ease;
    }

        .datepicker-item.item-selected {
            color: #014787;
        }

        .datepicker-item:hover {
            color: #5EB6F5;
        }

    .datepicker-content {
        flex: 1 0 auto;
        width: auto;
    }

    .datepicker-panel {
        display: inline-block;
        vertical-align: top;
    }

        .datepicker-panel + .datepicker-panel {
            margin-left: 15px;
        }

    .datepicker-input {
        display: flex;
        align-items: center;
        border: 1px solid #B5B5B5;
        border-radius: 8px;
        /* width: 195px; */
        height: 36px;
        padding-left: 10px;
        padding-right: 10px;
    }

        .datepicker-input input {
            display: inline-block;
            vertical-align: middle;
            color: #3C3C3C;
            background-color: transparent;
            border: none;
            width: min-content;
            font-size: 12px;
            padding-top: 0;
            padding-bottom: 0;
            padding-right: 0;
            padding-left: 10px;
            border-radius: 0;
        }

            .datepicker-input input::-webkit-calendar-picker-indicator {
                display: none;
            }

            .datepicker-input input:focus {
                color: #3C3C3C;
                border: none;
                background-color: transparent;
                box-shadow: none;
            }

        .datepicker-input > .input-date,
        .datepicker-input > .input-time {
            display: inline-flex;
            align-items: center;
        }

        .datepicker-input .input-append {
            display: inline-block;
            vertical-align: middle;
            line-height: 0;
        }

        .datepicker-input > .input-date {
            flex: 1 0;
            padding-right: 10px;
        }

            .datepicker-input > .input-date > input {
                width: 76px;
            }

        .datepicker-input > .input-time {
            flex: 0 0 auto;
            padding-left: 10px;
            border-left: 1px solid #B5B5B5;
        }

        .datepicker-input > label {
            color: #B5B5B5;
            background-image: none;
            background-color: #33393E;
        }

    .datepicker.custom-invalid .datepicker-input {
        border-color: #EB4B45;
    }

    .datepicker-nav {
        display: flex;
        align-items: center;
        padding: 1rem;
        user-select: none;
    }

        .datepicker-nav.nav-prev {
            justify-content: flex-start;
        }

        .datepicker-nav.nav-next {
            justify-content: flex-end;
        }

        .datepicker-nav.nav-prev > .datepicker-v {
            padding-right: 20px;
        }

        .datepicker-nav.nav-next > .datepicker-v {
            padding-left: 20px;
        }

    .datepicker-table {
        width: 100%;
        font-size: 10px;
    }

    .datepicker-v {
        flex-grow: 1;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
    }

    .datepicker-prev,
    .datepicker-next {
        color: #5EB6F5;
        cursor: pointer;
        display: flex;
        width: 20px;
    }

    .datepicker .selected-date {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #313131;
        font-size: 28px;
    }

    .datepicker .dates {
        width: 100%;
        user-select: none;
    }

    .datepicker-table th,
    .datepicker-table td {
        text-align: center;
        width: 26px;
        height: 26px;
        line-height: 26px;
    }

    .datepicker-table th {
        color: #3C3C3C;
    }

    .datepicker-table td:not(:empty) {
        cursor: pointer;
        color: #B5B5B5;
        transition: .2s ease;
    }

        .datepicker-table td:not(:empty):hover {
            color: #3C3C3C;
            background-color: #5EB6F5;
        }

    .datepicker-table td.current {
        color: #5EB6F5;
    }

    .datepicker-table td.alone,
    .datepicker-table td.start,
    .datepicker-table td.end {
        color: #3C3C3C;
        background-color: #5EB6F5;
    }

    .datepicker-table td.selected {
        color: #3C3C3C;
        opacity: .6;
        background-color: #5EB6F5;
    }

    .datepicker-table td.alone {
        border-radius: 6px;
    }

    .datepicker-table td.start {
        border-radius: 6px 0px 0px 6px;
    }

    .datepicker-table td.end {
        border-radius: 0px 6px 6px 0px;
    }

    .datepicker-table td.outdate {
        color: #747474;
    }

    .datepicker-footer {
        text-align: end;
    }

    .datepicker-button {
        cursor: pointer;
        user-select: none;
        display: inline-block;
        text-align: center;
        color: #5EB6F5;
        font-weight: 700;
        font-size: 14px;
        width: 100px;
        height: 42px;
        line-height: 42px;
        border-radius: 10px;
        transition: .2s ease;
    }

        .datepicker-button:hover {
            color: #5EB6F5;
            background-color: #232526;
        }

    /* @ Custom Select2 */
    .custom-select2 .select2-search__field {
        height: 40px;
    }

    .custom-dropdown-filter-year {
        display: flex;
        align-items: center;
        height: 22px;
        color: #000;
        background-color: #F5F5F5;
        border-radius: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

        .custom-dropdown-filter-year > .navigate-filter-year {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 10px;
            width: 10px;
            padding: 0;
            border: none;
            outline: none;
        }

            .custom-dropdown-filter-year > .navigate-filter-year:disabled {
                color: #D9D9D9;
            }

        .custom-dropdown-filter-year > .filter-year-label {
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            flex: 1;
        }

    /* @ Custom Select2 */
    .select2-dropdown{
        z-index: 1360;
    }

    .custom-select2 .select2-search__field {
        height: 40px;
    }

    .custom-select2 + .select2-container .select2-selection__choice {
        border-radius: 13px;
    }

    .custom-select2 + .select2-container.select2-container--disabled .select2-selection__choice {
        color: #C1C1C1;
        background-color: #F4F4F4;
    }

    .custom-select2 + .select2-container.select2-container--disabled .select2-selection {
        background-color: #FFF;
        border-color: #E0E0E0;
    }

    .custom-select2 + .select2-container.select2-container--disabled .select2-selection__choice__display {
        padding-left: 5px;
    }

    .custom-select2-dropdown .select2-search__field {
        height: 40px;
    }

    .custom-select2-dropdown .select2-results {
        padding: 10px;
    }

    .custom-select2-dropdown li.select2-results__option {
        display: flex;
        align-items: center;
        height: 36px;
        border-radius: 10px;
        line-height: 1;
        transition: .15s ease-in-out;
        position: relative;
    }

    .custom-select2-dropdown li.select2-results__option--selected {
    }

    .custom-select2-dropdown li.select2-results__option:not(:first-child) {
        margin-top: 5px;
    }

    .invalid-feedback {
        color: #F64646;
    }

        .invalid-feedback + .invalid-feedback {
            margin-top: 0;
        }

        .invalid-feedback.feedback-bullet {
            padding-left: .25rem;
        }

            .invalid-feedback.feedback-bullet::before {
                font-size: 2rem;
                line-height: 0;
                display: inline-block;
                content: '\00B7';
                vertical-align: middle;
                margin-right: .25ch;
            }

    .custom-input.custom-invalid > input,
    .custom-input.custom-invalid > .input-wrapper > input,
    .custom-input.custom-invalid > .text-append,
    .custom-input.custom-invalid > .text-prepend,
    .custom-input.custom-invalid > .input-group > input,
    .custom-input.custom-invalid > .input-fake,
    .custom-input.custom-invalid > textarea,
    .custom-input.custom-invalid .authentication-otp-wrapper input,
    .custom-input-middle.custom-invalid > .custom-input > input,
    .custom-input-middle.custom-invalid > .text-append,
    .custom-input-middle.custom-invalid > .text-prepend,
    .custom-select2:not(:disabled).custom-invalid + .select2 .select2-selection {
        border-color: #F64646 !important;
    }

        /*.custom-input.custom-invalid input::placeholder,
        .custom-input.custom-invalid > .input-fake,
        .custom-input.custom-invalid > textarea::placeholder,
        .custom-input-middle.custom-invalid input::placeholder {
            color: #474747;
        }*/

    .custom-input.custom-invalid > input,
    .custom-input.custom-invalid > .input-wrapper > input,
    .custom-input.custom-invalid > .input-fake,
    .custom-input.custom-invalid > .text-append,
    .custom-input.custom-invalid > .text-prepend,
    .custom-input.custom-invalid .authentication-otp-wrapper input,
    .custom-input-middle.custom-invalid > .custom-input > input,
    .custom-input-middle.custom-invalid > .text-append,
    .custom-input-middle.custom-invalid > .text-prepend {
        box-shadow: 0 0 0 1px #F64646 !important;
    }

    .custom-input.custom-valid > input,
    .custom-input.custom-valid > .input-wrapper > input,
    .custom-input.custom-valid > .text-append,
    .custom-input.custom-valid > .text-prepend,
    .custom-input.custom-valid > .input-group > input,
    .custom-input.custom-valid > .input-fake,
    .custom-input.custom-valid > textarea,
    .custom-select2:not(:disabled).custom-valid + .select2 .select2-selection,
    .authentication-otp-wrapper.custom-valid input {
        border-color: #28A745 !important;
    }

    .authentication-otp-wrapper.custom-valid input {
        box-shadow: 0 0 0 1px #28A745 !important;
    }

    .custom-input.custom-invalid .float-prepend > .navigate-invalid,
    .custom-input.custom-invalid .float-prepend > .navigate-feedback {
        color: #F64646;
    }

    .custom-input.custom-valid .float-prepend > .navigate-valid,
    .custom-input.custom-valid .float-prepend > .navigate-feedback {
        color: #28A745;
    }

    .custom-input.custom-invalid .invalid-feedback,
    .custom-input.custom-valid .valid-feedback,
    .custom-input-middle.custom-invalid .invalid-feedback,
    .custom-input-middle.custom-valid .valid-feedback,
    .custom-input.custom-invalid .float-prepend > .navigate-invalid,
    .custom-input.custom-valid .float-prepend > .navigate-valid,
    .custom-select2:not(:disabled).custom-invalid ~ .invalid-feedback,
    .custom-select2:not(:disabled).custom-valid ~ .valid-feedback {
        display: block;
    }

    /* @ Custom Lightbox */

    .custom-lightbox .lightbox-container {
        background-color: transparent;
        box-shadow: none;
        align-items: center;
    }

    .custom-lightbox .lightbox-image {
        max-width: 400px; 
        object-fit: contain;
    }

    .custom-lightbox .lightbox-close {
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 28px;
        width: 85px;
        height: 85px;
        border-radius: 10px;
        background-color: #F64646;
        border: none;
        outline: none;
    }

    /* @ Custom Button */
    .sms-btn {
        --vz-btn-color: #FFF;
        --vz-btn-bg: #50A198;
        --vz-btn-hover-border-color: #113834;
        --vz-btn-disabled-bg: #2A2A2A;
        --vz-btn-disabled-color: #CCC;
        font-weight: 700;
        font-size: 14px;
    }

        .sms-btn.sms-btn-outline:hover,
        .sms-btn:hover {
            color: var(--vz-btn-color);
            background-color: var(--vz-btn-hover-border-color);
        }

        .sms-btn:focus-visible,
        .sms-btn:not(.btn-check):active {
            color: var(--vz-btn-color);
            background-color: var(--vz-btn-hover-border-color);
        }

        .sms-btn:disabled {
            color: var(--vz-btn-disabled-color);
            background-color: var(--vz-btn-disabled-bg);
            border-color: var(--vz-btn-disabled-bg);
        }

    .sms-btn-info {
        --vz-btn-bg: #6795EA;
        --vz-btn-hover-border-color: #4B81E6;
        font-size: 16px;
    }

    .sms-btn-danger {
        --vz-btn-bg: #dc3545;
        --vz-btn-hover-border-color: #dc3545;
        font-size: 16px;
    }

    .sms-btn-gray {
        --vz-btn-color: #000;
        --vz-btn-bg: #ECECEC;
        --vz-btn-hover-border-color: #ECECEC;
        font-size: 16px;
    }

    .sms-btn.sms-btn-outline,
    .sms-btn.btn-outline {
        background-color: transparent;
        color: var(--vz-btn-bg);
        border-color: var(--vz-btn-bg);
    }

        .sms-btn.btn-outline:hover {
            color: var(--vz-btn-color);
            background-color: var(--vz-btn-bg);
        }

    .sms-btn.btn-rounded {
        border-radius: 4px;
    }

    /* @ Custom Modal */
    .custom-modal {
        --vz-modal-spacing: 2rem;
    }

        .custom-modal:not(.modal-auto) .modal-dialog {
            padding-left: var(--vz-modal-spacing, 0);
            padding-right: var(--vz-modal-spacing, 0);
            max-width: calc(var(--vz-modal-width) + (var(--vz-modal-spacing, 0) * 2));
        }

        .custom-modal.modal-auto .modal-dialog {
            width: fit-content;
            max-width: none;
        }

/* @ Custom Wheel (Evo) */

.wheel-wrapper {
    --wheel-width: 320px;
    --wheel-height: 320px;
    user-select: none;
    width: var(--wheel-width);
    height: var(--wheel-height);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.custom-wheel {
    --item-offset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    padding-top: 5px;
}

.wheel-6 {
    --max-item: 6;
}
    /*.wheel-6 > .wheel-item {
        background-image: url('/images/promotion/dash-6-wheel.svg');
    }
        .wheel-6 > .wheel-item.custom-invalid {
            background-image: url('/images/promotion/dash-6-error.svg');
        }*/

.wheel-8 {
    --max-item: 8;
}
    /*.wheel-8 > .wheel-item {
        background-image: url('/images/promotion/dash-8-wheel.svg');
    }
        .wheel-8 > .wheel-item.custom-invalid {
            background-image: url('/images/promotion/dash-8-error.svg');
        }*/

.wheel-10 {
    --max-item: 10;
}
    /*.wheel-10 > .wheel-item {
        background-image: url('/images/promotion/dash-10-wheel.svg');
    }
        .wheel-10 > .wheel-item.custom-invalid {
            background-image: url('/images/promotion/dash-10-error.svg');
        }*/

.wheel-10 .wheel-content {
    top: 7.5%;
}

.wheel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: calc((2 * (22 / 7) * (var(--wheel-width) / 2)) / var(--max-item));
    transform: rotate(calc(-360deg / var(--max-item) * var(--item)));
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 100% 10%, 50% 100%, 0 10%);
    transform-origin: bottom;
    user-select: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    object-position: center;
}
    .wheel-item > svg {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

.wheel-overlap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 50%;
    transform: rotate(calc(-360deg / var(--max-item) * var(--item)));
    position: absolute;
    transform-origin: bottom;
    user-select: none;
    background-color: transparent;
}

.wheel-item.has-image {
    cursor: pointer;
    user-select: none;
}

.wheel-image {
    position: absolute;
    width: 99%;
    height: 101%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    .wheel-spin > img,
    .wheel-frame > img,
    .wheel-image > img {
        width: inherit;
        height: inherit;
    }

.wheel-content {
    position: absolute;
    text-align: center;
    top: 15%;
    transform-origin: center;
    transform: rotate(calc(360deg / var(--max-item) * var(--item)));
    z-index: 1;
}

.wheel-spin {
    position: absolute;
    height: 140px;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wheel-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    /* @ Send Sms */
    .send-sms-wrapper {
        display: grid;
        gap: 20px;
        grid-gap: 20px;
        grid-template-columns: minmax(195px, 235px) minmax(518px,1fr);
        grid-template-rows: auto auto 1fr;
        padding-bottom: 1rem;
    }

    .send-sms-profile {
        grid-column: span 1;
        grid-row: span 1;
        color: #FFF;
        background-color: #11101F;
        padding: 15px 15px 20px;
        border-radius: 10px;
        width: 100%;
        margin-bottom: 0;
    }

        .send-sms-profile .profile-title {
            color: #F2F2F7;
            font-weight: 700;
            font-size: 14px;
            line-height: 16px;
        }

        .send-sms-profile .profile-text {
            color: #F2F2F7;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
        }

        .send-sms-profile > .profile-error {
            color: #F00;
            font-weight: 400;
            font-size: 10px;
            line-height: 14px;
            text-align: center;
            margin-top: -12px;
            white-space: nowrap;
            margin-bottom: 1rem;
            display: none;
        }

            .send-sms-profile > .profile-error.show {
                display: block;
            }

.sms-history-panel {
    background: #151515;
}

.sms-agent-panel {
    background: #151515;
    padding: 16px 24px;
    box-shadow: 6px 6px 10px 0px #00000033;
}

    .sms-agent-panel .sms-agent-header h4 {
        color: #E9E9E9;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
    }

.session-box-agent-history-credit {
    display: flex;
    gap: 24px;
}

.session-box-agent-history-credit .box {
    background-color: #0D2A27;
    text-align: center;
    padding: 14px;
    border-radius: 16px;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100px;
}

    .session-box-agent-history-credit .box::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(180deg, #012625 0%, #035F5C 24.5%, #72DCD9 52%, #035F5C 77%, #012625 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .session-box-agent-history-credit .box h4 {
        color: #E9E9E9;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
    }

    .session-box-agent-history-credit .box h5 {
        font-size: 23px;
        font-weight: 700;
        line-height: 37.95px;
    }

    .session-box-agent-history-credit .box.agent-history-warning h5 {
        color: #FFE666;
    }

    .session-box-agent-history-credit .box.agent-history-useing h5 {
        color: #15996A;
    }

    .session-box-agent-history-credit .box.agent-history-success h5 {
        color: #72DCD9;
    }

    .session-box-agent-history-credit .box.agent-history-danger h5 {
        color: #EB3333;
    }

.text-header-in-card-sms {
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    color: #E9E9E9;
}

.send-sms-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    color: #fff;
    grid-column: span 1;
    grid-row: span 3;
    gap: 20px;
    grid-gap: 20px;
    padding: 80px 20px 20px 20px;
    border-radius: 10px;
    margin-bottom: 0;
    background: #151515;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

        .send-sms-panel .panel-left {
            grid-column: span 1;
            grid-row: span 2;
        }

        .send-sms-panel .panel-preview,
        .send-sms-panel .panel-summary {
            grid-column: span 1;
        }

.card-header-send-sms {
    width: 100%;
    grid-column: span 2;
    position: absolute;
}

    .card-header-send-sms .box-header-sms {
        padding: 15px 24px;
        background-color: #113834;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #E9E9E9;
        position: relative;
        z-index: 0;
    }

        .card-header-send-sms .box-header-sms:before {
            content: ' ';
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            inset: 0;
            padding: 2px 2px 0px 2px;
            border-radius: inherit;
            background: conic-gradient(from -9.44deg at 50% 50%, #3F3F3F -26.57deg, #50A198 40.29deg, #151515 79.51deg, #202020 142.68deg, #50A198 218.3deg, #3F3F3F 333.43deg, #50A198 400.29deg);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

.send-sms-panel-custom {
    display: grid;
    grid-template-columns: 1fr;
    color: #fff;
    grid-column: span 1;
    grid-row: span 3;
    gap: 20px;
    border-radius: 10px;
    margin-bottom: 0;
    background-color: transparent;
}

    .send-sms-panel-custom .panel-left {
        grid-column: span 1;
        grid-row: span 2;
    }

    .send-sms-panel-custom .panel-preview,
    .send-sms-panel-custom .panel-summary {
        grid-column: span 1;
    }

    /*.send-sms-panel .panel-right {
        flex: 0 0 46.33%;
        max-width: 335px;
        margin-left: 20px;
        min-width: 280px;
    }*/

.send-sms-menu {
    grid-column: span 1;
    grid-row: span 1;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 0;
    background: #023937;
    box-shadow: 6px 6px 10px 0px #00000033;
    position: relative;
    z-index: 0;
}

    .send-sms-menu::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #012625 0%, #035F5C 24.5%, #72DCD9 52%, #035F5C 77%, #012625 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .send-sms-menu .menu-item {
        cursor: pointer;
        user-select: none;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        height: 38px;
        font-size: 14px;
        font-weight: 400;
        border-radius: 6px;
        padding: 0 15px;
        transition: .15s ease-in-out;
    }

            .send-sms-menu .menu-item + .menu-item {
                margin-top: 10px;
            }

        .send-sms-menu .menu-item-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }

        .send-sms-menu .menu-item-text {
            display: inline-block;
        }

    .send-sms-menu .menu-item:hover,
    .send-sms-menu .menu-item.selected {
        background: linear-gradient(90deg, #1A534D 0%, #2B8B81 100%);
    }

    .sms-add-template {
        text-decoration: underline;
    }

        .sms-add-template > .add-template-icon {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            vertical-align: middle;
            color: #FFF;
            background-color: #50A198;
            border-radius: 4px;
        }

.sms-summary-card {
    padding: 1rem;
    border-radius: 10px;
    color: #FFF;
    background-color: #023937;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    width: 100%;
    margin-bottom: 0;
    position: relative;
    z-index: 0;
    height: fit-content;
}

    .sms-summary-card::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #012625 0%, #035F5C 24.5%, #72DCD9 52%, #035F5C 77%, #012625 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.text-counting-recipient {
    color: #3B9D9A;
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
    cursor: pointer;
}

.text-color-agent-sender-table {
    color: #72DCD9;
    font-size: 13px;
    font-weight: 400;
    line-height: 21.45px;
}

.text-status-history-sender-success {
    color: #15996A;
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
}

.text-status-history-sender-danger {
    color: #EB3333;
    font-size: 13px;
    font-weight: 700;
    line-height: 21.45px;
}

.text-is-done-history-sender-success {
    color: #15996A;
    font-size: 13px;
    font-weight: 400;
    line-height: 21.45px;
}

.text-is-done-history-sender-waiting {
    color: #B4881C;
    font-size: 13px;
    font-weight: 400;
    line-height: 21.45px;
}

.text-is-done-history-sender-danger {
    color: #EB3333;
    font-size: 13px;
    font-weight: 400;
    line-height: 21.45px;
}

.box-waiting-sendder-sms-in-table .box-waiting {
    padding: 2px 4px;
    background-color: #FFF7CC;
    width: fit-content;
    border: 1px solid #AB8B4D;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    line-height: 18.15px;
    color: #AB8B4D;
    margin: auto auto 2px auto;
}

.box-waiting-sendder-sms-in-table .detail-process-sender-sms {
    font-size: 9px;
    font-weight: 400;
    color: #828282;
    line-height: 14.85px;
}

.btn-looking-detail-history-sender {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0D2A27;
    padding: 0;
}

.box-fox-w-massage-history-sender {
    width: 230px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.btn-primary-custom-green {
    background-color: #2B8B81;
    color: #ffffff;
}

.btn-primary-custom-green:hover {
    background-color: #2B8B81;
}

.box-fix-sms-massage-show {
    width: 305px;
    top: 150px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    word-wrap: break-word;
    white-space: normal;
}

.sms-send-progress {
    --color: #1CCC78;
}

    .sms-preview {
        display: flex;
        justify-content: center;
        position: relative;
    }

        .sms-preview .preview-header {
            top: 120px;
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
        }

    .sms-preview-placeholder {
        width: 100%;
        max-width: 100%;
        max-height: 418px;
    }

.sms-preview .preview-message {
    /*position: absolute;*/
    user-select: none;
    /*top: 160px;
        left: 100px;*/
    color: #F2F2F7;
    background-color: #262628;
    padding: 10px 10px 10px 15px;
    line-height: 16px;
    font-size: 12px;
    font-weight: 400;
    max-width: 100%;
    /*max-height: 200px;*/
    overflow: auto;
    border-radius: 10px;
    width: fit-content;
    white-space: pre;
}

        .sms-preview .preview-message::after {
            content: '';
            bottom: 2px;
            left: -25px;
            position: absolute;
            border: 0px solid;
            display: block;
            width: 25px;
            height: 22px;
            background-color: transparent;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            box-shadow: 10px 0px 0px 0px #262628;
            transform: scaleY(-1);
        }

    .custom-modal .modal-content,
    .sms-modal-confirm .modal-content {
        color: #000;
        border-radius: 0;
        padding: 30px 30px 1rem;
        width: auto;
    }

    .custom-modal .modal-title,
    .sms-modal-confirm .confirm-title {
        font-weight: 700;
        font-size: 24px;
        line-height: 31.2px;
        margin-bottom: 18px;
        text-align: center;
    }

    .sms-modal-selection-template {
        --vz-modal-width: 1020px;
    }

.box-table-select-custom-send-sms {
    width: 100%;
    grid-column: span 2;
}

.sms-modal-selection-template .modal-content {
    color: #000;
    width: 1020px;
    max-width: calc(100% - 30px);
    border-radius: 0;
    padding: 30px 20px 22px;
}

        .sms-modal-confirm .confirm-title,
        .sms-modal-template .template-title,
        .sms-modal-selection-template .template-title,
        .sms-modal-select-template .template-title {
            font-weight: 700;
            font-size: 24px;
            line-height: 31.2px;
            margin-bottom: 18px;
            text-align: center;
        }

    .custom-modal .modal-body,
    .sms-modal-confirm .confirm-body,
    .sms-modal-template .template-body {
        padding: 20px;
        border-radius: 10px;
        background-color: #F2F2F2;
        margin-bottom: 1rem;
    }

    .sms-modal-template .modal-content,
    .sms-modal-select-template .modal-content {
        color: #000;
        border-radius: 0;
        padding: 30px 20px 20px;
        width: auto;
    }

    .sms-modal-buy-credit > .modal-dialog {
        max-width: 540px;
    }

    .sms-modal-buy-credit .modal-content {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* @ Sms History */
    .sms-history-panel {
        padding: 0;
        display: flex;
        gap: 0;
        flex-direction: column;
    }

    .sms-history-header {
        padding: 20px 20px 1rem;
    }

    .sms-history-table th {
        font-size: 14px;
        font-weight: 700;
    }

    .sms-history-table td {
        font-size: 14px;
        font-weight: 500;
    }

        .sms-history-table th:first-child,
        .sms-history-table td:first-child {
            padding-left: 20px;
        }

        .sms-history-table th:last-child,
        .sms-history-table td:last-child {
            padding-right: 20px;
        }

    .sms-history-table .sms-message {
        max-width: 380px;
        white-space: pre-wrap;
    }

    .sms-history-table.table-hover table {
        border-collapse: separate;
        border-spacing: 0;
    }

        .sms-history-table.table-hover table tbody tr {
            cursor: pointer;
            transition: .2s ease;
        }

            .sms-history-table.table-hover table tbody tr:hover {
                background-color: #F3F3F9;
            }

            .sms-history-table.table-hover table tbody tr:hover td{
                color: #000;
            }

    .sms-history-pagination {
        padding-left: 20px;
        padding-right: 15px;
        padding-bottom: 24px;
    }

    .sms-template-selection .item-selected {
        color: #FFF;
        background-color: #50A198;
    }

    .sms-template-selection.table-hover table tbody tr.item-selected:hover {
        color: #FFF;
        background-color: #50A198;
    }

    .sms-history-view-detail {
        cursor: pointer;
        user-select: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        color: #0463BA;
        background-color: #DFF0FF;
    }

        .sms-history-view-detail.detail-warning {
            color: #FF9500;
            background-color: #FFEED6;
        }

        .sms-history-view-detail.detail-danger {
            color: #FF0000;
            background-color: #FFE4E4;
        }

    /* @ Sms Customer List */
    .sms-customer-list-table {
    }

    .sms-text-hint {
        color: #C1C1C1;
    }

    /* @ Setting Banks */

    .setting-bank-table {
        --table-padding-y: 6px;
    }
        .setting-bank-table .td-divider {
            position: relative;
        }
            .setting-bank-table .td-divider::after,
            .setting-bank-table .td-divider::before {
                content: ' ';
                position: absolute;
                height: 40px;
                top: calc(50% - 20px);
                border-left: 1px solid #E9E9E9;
            }

            .setting-bank-table .td-divider::before {
                right: 0;
            }

            .setting-bank-table .td-divider::after {
                left: 0;
            }

    .setting-bank-bot-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
        padding: 1rem 1.5rem;
        background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
        border-radius: .75rem;
    }

    .setting-bank-option-wrapper {
        display: flex;
        align-items: center;
        min-height: 60px;
        padding: .5rem 1.5rem;
        border-radius: .75rem;
        border: 2px solid transparent;
        background-color: #F6F6F6;
        transition: border-color .15s ease-in-out;
    }

        .setting-bank-option-wrapper > .option-icon {
            width: 40px;
            height: 40px;
            object-fit: contain;
            margin-right: 1.5rem;
        }

        .setting-bank-option-wrapper.active {
            border-color: #50A198;
        }

    .setting-bank-download-link,
    .setting-bank-download-link:hover {
        color: #5ACCD8;
    }

.setting-bank-download-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.setting-bank-download-btn > .btn-left {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #F6F6F6;
    border-radius: 4px 0 0 4px;
}

.setting-bank-download-btn > .btn-left::before {
    content: ' ';
    position: absolute;
    width: 26px;
    height: 26px;
}

.setting-bank-download-btn > .btn-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    background-color: #31BFCE;
    border-radius: 4px 0 0 4px;
}

.setting-bank-empty-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
}

.setting-bank-manual {
    width: auto;
    height: 32px;
    object-fit: contain;
}

.setting-true-wallet-qr-code {
    cursor: pointer;
    user-select: none;
    color: #C8C8C8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    z-index: 0;
}
    .setting-true-wallet-qr-code::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .setting-true-wallet-qr-code > img {
        width: 100%;
        height: 100%;
        padding: .5rem;
        object-fit: contain;
    }

.setting-true-wallet-qr-code-button {
    content: ' ';
    position: absolute;
    color: #FFF;
    width: 24px;
    height: 24px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: -0.5rem;
    bottom: -0.5rem;
    border-radius: 50%;
    background-color: #EE9AE5;
    background-image: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
}

.setting-true-wallet-qr-code.summary-qr-code {
    width: 160px;
    height: 160px;
}

/* @ Setting Customer Group */
.customer-group-badge {
    flex: 1 0;
    padding: 8px 12px;
    background-color: #F3F1FF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 8px;
}

.customer-group-wrapper {
    user-select: none;
    display: flex;
    gap: 1rem;
    overflow: auto;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .customer-group-wrapper::-webkit-scrollbar {
        display: none;
    }

    .customer-group-wrapper.active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

    .customer-group-wrapper > .group-item {
        position: relative;
        flex: 0 0 calc(20% - 13px);
        min-width: 204px;
        margin-top: 20px;
        box-shadow: 2px 4px 10px 0px #00000026;
        border-radius: 12px;
    }

        .customer-group-wrapper > .group-item.group-default::before {
            content: 'กลุ่มเริ่มต้น';
            position: absolute;
            width: auto;
            height: 20px;
            top: -20px;
            left: 12px;
            right: 12px;
            color: #FFF;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            background-color: #50A198;
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: -0.08px;
            padding-top: 3px;
            text-align: center;
        }

    .customer-group-wrapper .group-title {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding: 12px;
        background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    }

    .customer-group-wrapper .group-quantity {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 15px;
    }

    .customer-group-wrapper .quantity-item {
        flex: 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        background-color: #F6F6F6;
        border: 1px solid #ADADAD;
        border-radius: 12px;
    }

    .customer-group-wrapper .group-channel {
        padding-top: 8px;
        padding-bottom: 8px;
        border-top: 4px solid #50A198;
        border-bottom: 4px solid #50A198;
    }

    .customer-group-wrapper .group-withdraw {
        margin-bottom: 1.5rem;
    }

    .customer-group-wrapper .channel-divide {
        display: flex;
        align-items: center;
        height: 32px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .customer-group-wrapper .channel-item {
        display: flex;
        padding-left: 15px;
        padding-right: 15px;
    }

        .customer-group-wrapper .channel-item.channel-disabled {
            mix-blend-mode: luminosity;
        }

        .customer-group-wrapper .channel-item + .channel-item {
            margin-top: 18px;
        }

    .customer-group-wrapper .channel-id {
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: -0.03px;
    }

    .customer-group-wrapper .channel-percent {
        color: #50A198;
        font-weight: 700;
        background-color: #F3F1FF;
        border: 1px solid #4E46B4;
        min-width: 100px;
        min-height: 16px;
        border-radius: 4px;
        text-align: center;
        margin-top: 4px;
    }

    .customer-group-wrapper .channel-adding {
        flex: 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        color: #ADADAD;
        background-color: #F6F6F6;
    }

.add-more-item{
    cursor: pointer;
}

.setting-bank-customer-group-wrapper > .group-item + .group-item {
    margin-top: 1.5rem;
}

.setting-bank-customer-group-info {
    display: flex;
    align-items: center;
    padding: .75rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
}

    .setting-bank-customer-group-info > .info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin-right: 28px;
    }

    .setting-bank-customer-group-info .info-bank {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .75rem;
        padding: .75rem 3rem;
        border-radius: .75rem;
        background-color: #C1ECF0;
        white-space: nowrap;
    }

    .setting-bank-customer-group-info .info-bank-image {
        object-fit: contain;
        margin-right: .75rem;
    }

.table-select-custom-sms-send {
    width: 100%;
}

    .table-select-custom-sms-send thead th {
        padding: 16px 24px;
    }

    .table-select-custom-sms-send tbody tr {
        border-bottom: 1px solid #545454;
        background-color: #202020;
    }

    .table-select-custom-sms-send tbody td {
        padding: 4px 24px;
    }

    .table-select-custom-sms-send thead tr {
        background: linear-gradient(0deg, #1A534D 0%, #76B6B0 100%);
    }

    .table-select-custom-sms-send thead th {
        color: #E9E9E9;
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
    }

.tfooter-table-custom-select-sms tr {
    border-bottom: 1px solid #545454;
}

.box-group-customer-custom-sms {
    font-size: 11px;
    font-weight: 700;
    color: #608D9D;
    line-height: 18.15px;
    padding: 0 8px;
    width: fit-content;
    border: 1px solid #608D9D;
    border-radius: 26px;
}

.arrow-back-first-page svg, .arrow-back svg, .arrow-next-last-page svg, .arrow-next svg {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.arrow-back-first-page svg path {
    fill: #2B8B81;
}

.arrow-back svg path {
    fill: #2B8B81;
}

.arrow-next-last-page svg path {
    fill: #2B8B81;
}

.arrow-next svg path {
    fill: #2B8B81;
}

.arrow-back-first-page.disabled, .arrow-back.disabled, .arrow-next-last-page.disabled, .arrow-next.disabled {
    pointer-events: none;
}

.arrow-back-first-page.disabled svg path {
    fill: #696969;
}

.arrow-back.disabled svg path {
    fill: #696969;
}

.arrow-next-last-page.disabled svg path {
    fill: #696969;
}

.arrow-next.disabled svg path {
    fill: #696969;
}

.session-box-group-customer-custom-sms {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.session-number-page .box-number-page {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 21.45px;
    cursor: pointer;
    color: #E9E9E9;
}

    .session-number-page .box-number-page.active {
        background-color: #2B8B81;
        pointer-events: none;
        border-radius: 8px;
    }

    .session-number-page .box-number-page.disabled-dot {
        pointer-events: none;
    }

.session-pageing-table-select-custom {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 8px;
}

.session-arrow-back-main {
    display: flex;
    align-items: center;
}

.session-number-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.session-arrow-next-main {
    display: flex;
    align-items: center;
}

.username-all-in-table-custom-select h4 {
    font-size: 13px;
    font-weight: 700;
    color: #72DCD9;
    line-height: 21.45px;
    margin-bottom: 0px;
}

.username-all-in-table-custom-select h5 {
    font-size: 9px;
    font-weight: 400;
    color: #828282;
    line-height: 14.85px;
}

.tfooter-table-custom-select-sms tr td {
    padding: 10.5px 24px;
}

    .tfooter-table-custom-select-sms .txt-tfoot-color-1 {
        color: #E9E9E9;
        font-size: 13px;
        font-weight: 400;
        line-height: 21.45px;
    }

    .tfooter-table-custom-select-sms .txt-tfoot-color-2 {
        color: #3B9D9A;
        font-size: 13px;
        font-weight: 400;
        line-height: 21.45px;
    }

.setting-bank-auto-status {
    user-select: none;
    height: 22px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    color: #00744A;
    background-color: #BBF3DE;
    border: 1px solid #2FCD95;
    padding-right: 10px;
    padding-left: 0;
    outline: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

.setting-bank-auto-status > .switcher {
    width: 24px;
    height: 24px;
    position: relative;
    left: -1px;
}

.setting-bank-auto-status > .switch-outer {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 2px;
}

.setting-bank-auto-status .switch-title {
    font-family: 'Noto Sans Thai';
    font-size: 5.63px;
    font-weight: 700;
    line-height: 9px;
    margin-left: 1px;
}

.setting-bank-auto-status .switch-text {
    font-family: 'Noto Sans Thai';
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    margin-top: -4px;
}

.setting-bank-auto-status:hover {
    box-shadow: 0 0 0 4px #D3F9EB;
}
    .setting-bank-auto-status:hover .svg-stroke-1,
    .setting-bank-auto-status:hover .svg-fill-1 {
        transition: fill .15s ease-in-out, stroke .15s ease-in-out;
    }

    .setting-bank-auto-status:hover .svg-stroke-1 {
        stroke: #8CE6C6;
    }

    .setting-bank-auto-status:hover .svg-fill-1 {
        fill: #8CE6C6;
    }

    .setting-bank-auto-status.off {
        color: #474747;
        background-color: #E9E9E9;
        border-color: #C8C8C8;
    }

.setting-bank-auto-status.off .circle-r9 {
    filter: url(#circle-off-r9);
}
    .setting-bank-auto-status.off .svg-stroke-1 {
        stroke: #767676;
    }

    .setting-bank-auto-status.off .svg-fill-1 {
        fill: #767676;
    }

    .setting-bank-auto-status.off:hover {
        box-shadow: 0 0 0 4px #F6F6F6;
    }

    .setting-bank-auto-status.off:hover .svg-stroke-1 {
        stroke: #FFF;
    }

    .setting-bank-auto-status.off:hover .svg-fill-1 {
        fill: #FFF;
    }

.setting-bank-auto-status:disabled {
    color: #C8C8C8;
    background-color: #E9E9E9;
    border-color: #C8C8C8;
}

.setting-bank-bot-status {
    user-select: none;
    height: 24px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #474747;
    background-color: #EAFFF7;
    padding-right: 0;
    padding-left: 0;
    border: none;
    outline: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

    .setting-bank-bot-status.off {
        background-color: #FFF3F3;
    }

    .setting-bank-bot-status > .switcher {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        width: 24px;
        color: #C8C8C8;
        background-color: #FFF;
        border-radius: 4px;
        box-shadow: 1px 1px 2px 0px #00000040;
        border: 1px solid #C8C8C8;
        text-transform: uppercase;
        font-family: 'Noto Sans Thai';
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        transition: inherit;
    }

.setting-bank-bot-status.on > .switcher-on {
    color: #FFF;
    background-color: #2FCD95;
    border-color: #2FCD95;
}

.setting-bank-bot-status.on:hover > .switcher-on {
    background-color: #8CE6C6;
    border-color: #8CE6C6;
}

.setting-bank-bot-status.on:hover > .switcher-off {
    color: #FBB5B5;
    border-color: #FBB5B5;
}
    .setting-bank-bot-status.off:hover .switch-text > span {
        color: #FBB5B5;
    }

.setting-bank-bot-status.off > .switcher-off {
    color: #FFF;
    background-color: #F64646;
    border-color: #F64646;
}

.setting-bank-bot-status.off:hover > .switcher-on {
    color: #8CE6C6;
    border-color: #A4ECD2;
}

.setting-bank-bot-status.off:hover > .switcher-off {
    background-color: #FBB5B5;
    border-color: #FBB5B5;
}

.setting-bank-bot-status > .switch-middle {
    margin-left: 4px;
    margin-right: 4px;
}

.setting-bank-bot-status .switch-title {
    font-family: 'Noto Sans Thai';
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}

.setting-bank-bot-status .switch-text {
    font-family: 'Noto Sans Thai';
    font-size: 6px;
    font-weight: 700;
    line-height: 10.5px;
    margin-top: -3px;
}
    .setting-bank-bot-status .switch-text > span {
        color: #2FCD95;
        font-family: 'Noto Sans Thai';
        font-size: 8px;
        font-weight: 700;
        line-height: 10.5px;
        transition: color .15s ease-in-out;
    }
        .setting-bank-bot-status.off .switch-text > span {
            color: #F64646;
        }

.setting-bank-bot-status:disabled {
    color: #C8C8C8;
    background-color: #F6F6F6;
}

.setting-bank-bot-status:disabled > .switcher {
    color: #C8C8C8;
    background-color: #F6F6F6;
    border-color: #C8C8C8;
}

.seesion-box-upload-bank-logo {
    display: flex;
    height: 72px;
    align-items: end;
}

.box-upload-bank-logo {
    position: relative;
    z-index: 0;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .box-upload-bank-logo:before {
        content: ' ';
        position: absolute;
        width: 100%;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.txt-box-upload-bank-logo {
    padding-left: 16px;
    width: 275px;
}


.txt-box-upload-bank-logo-1{
    font-size:14px;
    font-weight:700;
    line-height:24px;
}

.txt-box-upload-bank-logo-2 {
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    color: #ADADAD;
}

.icon-upload-bank-logo {
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: -4px;
    right: -11px;
}

.img-upload-bank-logo-show {
    width: 54px;
    height: 54px;
}
/* @ Setting True Wallet */
.setting-true-wallet-preview {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    height: 61px;
    color: #E0E0E0;
    border: 1px dashed #DFE3E8;
    margin-right: 1rem;
}

        .setting-true-wallet-preview > img {
            display: none;
            width: 100%;
            object-fit: cover;
        }

        .setting-true-wallet-preview.active > svg {
            display: none;
        }

        .setting-true-wallet-preview.active > img {
            display: block;
        }

    /* @ Wallet */

    .wallet-model {
        --vz-modal-width: 540px;
    }

    /* @ Resolve Statement */

    .btn-resolve-statement {
        line-height: 1.4;
    }

        .btn-resolve-statement:disabled {
            color: #CCC;
            background-color: #F3F6F9;
            border-color: #F3F6F9;
        }

            .btn-resolve-statement:disabled > svg {
                mix-blend-mode: luminosity;
            }

    .resolve-statement-modal {
        --vz-modal-width: 990px;
    }

        .resolve-statement-modal .modal-content {
            padding: 30px;
        }

/* @ Report Promotion Minigame */

.promotion-minigame-maincard {
    width: 352px;
}

.promotion-minigame-wheel-wrapper {
    border-radius: 14px;
    padding: 1rem;
    background-color: #2A2A2A;
    background-blend-mode: soft-light;
    width: 176px;
    height: 176px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.20);
}
    .promotion-minigame-wheel-wrapper > img {
        object-fit: contain;
        object-position: center;
        width: 100%;
        height: 100%;
    }

.promotion-minigame-wheel {
    --wheel-width: 144px;
    --wheel-height: 144px;
}
    .promotion-minigame-wheel .wheel-spin {
        width: 65%;
        height: 65%;
    }

    .promotion-minigame-maincard .maincard-badge {
        margin-left: -1rem;
        width: calc(100% + 1rem);
        margin-right: 0;
    }

/* @ Report Promotion Deposit */

.promotion-deposit-tooltip {
    --vz-tooltip-max-width: 175px;
    --vz-tooltip-padding-y: 10px;
    --vz-tooltip-padding-x: .5rem;
}

.promotion-deposit-card {
    background-blend-mode: soft-light;
    background-color: #151515;
    box-shadow: 2px 2px 10px 6px rgba(0, 0, 0, 0.20);
}

.promotion-deposit-maincard,
.promotion-deposit-subcard {
    height: 100%;
    border-radius: .5rem;
    background-color: transparent;
    box-shadow: 2px 2px 10px 6px rgba(0, 0, 0, 0.20);
}

.promotion-deposit-maincard {
    background-color: #2020204D;
    padding: 1rem;
}
    .promotion-deposit-maincard > .maincard-head {
        display: flex;
        align-items: center;
        margin-left: -1rem;
        margin-top: .75rem;
        width: calc(100% + 1rem);
    }
    .promotion-deposit-maincard .maincard-badge {
        flex: 1 0;
        user-select: none;
        display: flex;
        align-items: center;
        padding-left: 1rem;
        margin-right: .75rem;
        height: 24px;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        padding-top: 5px;
        color: #FFF;
        background: linear-gradient(90deg, #50A198 0%, #50A198 50%, rgba(80, 161, 152, 0.00) 100%);
    }

    .promotion-deposit-maincard .promotion-time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: .5rem;
        padding-right: .5rem;
        border-radius: .5rem;
        height: 32px;
        background-color: #2A2A2A;
    }


        .promotion-deposit-maincard .promotion-time .p4 {
            color: #828282;
        }

    .promotion-deposit-maincard #promotionTime {
        color: #1F7E7B;
    }


.promotion-deposit-subcard > .subcard-header {
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-weight: 700;
    background: linear-gradient(90deg, #3C7386 7.77%, #3C7386 44.27%, rgba(60, 115, 134, 0.00) 100%);
    color: #E9E9E9;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    box-shadow: 0px 4px 4px 0px #00000021;
}
.promotion-deposit-subcard.orange > .subcard-header {
    background: linear-gradient(90deg, #3C7386 7.77%, #3C7386 44.27%, rgba(60, 115, 134, 0.00) 100%);
}
.promotion-deposit-subcard.green > .subcard-header {
    background: linear-gradient(90deg, #50A198 7.77%, #50A198 44.27%, rgba(80, 161, 152, 0.00) 100%);
    color: #E9E9E9;
}

.promotion-deposit-subcard > .subcard-body {
    height: calc(100% - 32px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #2020204D;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

    .promotion-deposit-subcard .subcard-col {
        flex: 1 0;
        text-align: center;
        position: relative;
    }

.promotion-deposit-subcard .subcard-title {
    margin-top: -4px;
    color: #E9E9E9;
}

#promotionCustomerCount {
    color: #E9E9E9;
}

#promotionCount {
    color: #E9E9E9;
}

#miniGameCount {
    color: #E9E9E9;
}

#lottoCount {
    color: #E9E9E9;
}

#pointCount {
    color: #E9E9E9;
}

#rewardCount {
    color: #E9E9E9;
}

.promotion-deposit-subcard .subcard-col:not(:first-child)::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background-color: #C4C9DC;
    background-image: linear-gradient(317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18%);
    background-blend-mode: soft-light;
    border: 1px solid #FFFFFF66;
    box-shadow: 1px 1px 2px 0px #A6ABBD inset, -1px -1px 2px 0px #FEFEFE inset;
}

    .promotion-deposit-subcard .subcard-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.promotion-deposit-table {
    --table-offset-x: .5rem;
    --table-padding-x: 1rem;
    --table-row-height: calc(40px + 1rem);
}

    .promotion-deposit-table .tr-summary > td {
        position: relative;
        /*padding-top: 1rem !important;*/
        /*border-bottom: 2px solid #50A198;*/
    }
        .promotion-deposit-table .tr-summary > td:before {
            content: ' ';
            position: absolute;
            top: 1rem;
            left: 0;
            right: 0;
            /*border-top: 2px solid #50A198;*/
        }

    .promotion-deposit-table .tr-summary .td-summary {
        display: flex;
        align-items: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        color: #E9E9E9;
    }

/*.color-bg-last-row {
    background: #0D2A27;
}*/

.session-custom-last-row {
    height: 40px;
    border-bottom: 2px solid #50A198;
    border-top: 2px solid #50A198;
}

    .session-custom-last-row.color {
        background: #0D2A27;
        display:flex;
        justify-content:center;
        align-items: center;
    }
/* @ Authentication Otps */
.authentication-otp-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1rem;
}
    .authentication-otp-wrapper > input {
        height: 54px;
        width: 40px;
        margin-left: 1rem;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        padding: 0;
    }

    /* @ Utils */

    .ft-sarabun {
        font-family: Sarabun !important;
    }

    .ft-sukhumvit {
        font-family: Sukhumvit Set !important;
    }

    .outline-none {
        outline: none !important;
    }

    .w-0 {
        width: 0;
    }

    .flex-auto {
        flex: 0 0 auto;
    }

    .bg-neumorphism-10 {
        background-image: linear-gradient(317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18%);
        background-blend-mode: soft-light;
    }

    .text-red-danger {
        color: #EB3333;
        cursor: pointer
    }

    .text-red {
        color: #FE0000;
    }

    .text-hint {
        color: #858585;
    }

    .text-color-primary {
        color: #50A198;
    }

    .text-red-50 {
        color: #F64646;
    }

    .text-red-60 {
        color: #C93838;
    }

    .bg-red-5 {
        background-color: #FFF3F3;
    }

    .bg-red-10 {
        background-color: #FDDADA;
    }

    .bg-red-60 {
        background-color: #C93838;
    }

    .text-cyan-60 {
        color: #2799A5;
    }

    .text-cyan-50 {
        color: #31BFCE;
    }

    .text-cyan-40 {
        color: #5ACCD8;
    }

    .bg-cyan-10 {
        background-color: #D6F2F5;
    }

.text-green-5 {
    color: #2B8B81;
}

.bg-green-5 {
    background-color: #C1E1DF;
    border-color: #2B8B81;
    border: 1px;
}

.text-orange-50 {
    color: #CCAA00;
}

.bg-orange-5 {
    background-color: #E0F3BC;
    color: #696969;
}

    .bg-orange-10 {
        background-color: #FFEACC;
    }

.bg-orange-15 {
    background-color: #AFDA5E;
    color: #696969 !important;
}

.bg-orange-50 {
    background-color: #659B00;
    color: #FFF !important;
}

.text-blue-50 {
    color: #50A198;
}

.bg-blue-50 {
    background-color: #3C7386;
    color: #FFF !important;
}

.bg-blue-10 {
    background-color: #CDDDE2;
    color: #696969;
}

.bg-blue-15 {
    background-color: #608D9D;
    color: #E9E9E9 !important;
}

.text-green-50 {
    color: #50A198 !important;
}

.bg-green-0 {
    background-color: #2B8B81;
    color: #E9E9E9;
}

.bg-green-10 {
    background-color: #50A198;
    color: #E9E9E9;
}

.bg-green-20 {
    background-color: #226F67;
    color: #E9E9E9;
}

.bg-green-60 {
    background-color: #3C7386;
    color: #E9E9E9 !important;
}

    .text-yellow-50 {
        color: #FFD600;
    }

    .text-yellow-60 {
        color: #CCAB00;
    }

    .bg-yellow-10 {
        background-color: #FFF7CC;
    }

    .text-purple-30 {
        color: #50A198;
    }

    .text-neumorphism-magenta-70 {
        color: #D50099;
    }

    .bg-neumorphism-magenta-10 {
        background-color: #FFD8F4;
    }

    .text-neumorphism-violet-50 {
        color: #9756F4;
    }

    .bg-neumorphism-violet-10 {
        background-color: #EFE6FC;
    }

    .text-neumorphism-green-70 {
        color: #11CB67;
    }

    .bg-neumorphism-green-10 {
        background-color: #DBF4E7;
    }
    
    .bg-neumorphism-yellow-10 {
        background-color: #FFF1B3;
    }

    .text-purple-50 {
        color: #50A198;
    }

    .text-gray1 {
        color: #BABABA;
    }

    .text-gray2 {
        color: #B0B0B0;
    }

.text-gray-20 {
    color: #828282;
}

    .text-gray30,
    .text-gray-30 {
        color: #ADADAD;
    }

    .text-gray-60 {
        color: #5E5E5E;
    }

    .text-gray-70 {
        color: #474747;
    }

    .bg-purple-15 {
        background-color: #FFDFB3;
    }

    .bg-purple-50 {
        background-color: #50A198;
    }

    .bg-purple-10 {
        background-color: #E3DEFF;
    }

    .bg-gray-5 {
        background-color: #F6F6F6;
    }

    .bg-gray-10 {
        background-color: #E9E9E9;
    }

    .gy-10 {
        --vz-gutter-y: 10px;
    }

    .gx-20 {
        --vz-gutter-x: 20px;
    }

    .fs-8 {
        font-size: 8px;
    }

    .fs-10 {
        font-size: 10px;
    }

    .fs-11 {
        font-size: 11px;
    }

    .fs-12 {
        font-size: 12px;
    }

    .fs-13 {
        font-size: 13px;
    }

    .fs-14 {
        font-size: 14px;
    }

    .fs-15 {
        font-size: 15px;
    }

    .fw-400 {
        font-weight: 400;
    }

    .fw-500 {
        font-weight: 500;
    }

    .fw-700 {
        font-weight: 700;
    }

    .fw-800 {
        font-weight: 800;
    }

    .fs-24 {
        font-size: 24px;
    }

    .gap-1 {
        gap: .25rem;
    }

    .gap-2 {
        gap: .5rem;
    }

    .gap-3 {
        gap: 1rem;
    }

    .gap-4 {
        gap: 1.5rem;
    }

    .ps-5px {
        padding-left: 2px;
    }

    .pt-10 {
        padding-top: 10px;
    }

    .pb-10 {
        padding-bottom: 10px;
    }

    .mb-5px {
        margin-bottom: 5px;
    }

    .mt-10 {
        margin-top: 10px !important;
    }

    .mb-10 {
        margin-bottom: 10px !important;
    }

    .ms-10 {
        margin-left: 10px;
    }

    .me-10 {
        margin-right: 10px;
    }

    .mt-20 {
        margin-top: 20px;
    }

    .ms-20 {
        margin-left: 20px;
    }

    .me-20 {
        margin-right: 20px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .lh-16 {
        line-height: 16px;
    }

    .lh-18 {
        line-height: 18px;
    }

    .lh-20 {
        line-height: 20px;
    }

    .lh-22 {
        line-height: 22px;
    }

    .lh-24 {
        line-height: 24px;
    }

    .lh-28 {
        line-height: 28px;
    }

    .lh-32 {
        line-height: 32px;
    }

    .lh-40 {
        line-height: 40px;
    }

    .br-2 {
        border-radius: 2px;
    }

    .btn-38 {
        height: 38px;
    }

    .btn-40 {
        height: 40px;
    }

    .btn-28 {
        --vz-btn-padding-y: 0;
        height: 28px;
    }

    .white-space-normal {
        white-space: normal !important;
    }

    .pre-wrap {
        white-space: pre-wrap !important;
    }

    .nowrap {
        white-space: nowrap !important;
    }

    .white-space-normal {
        white-space: normal !important;
    }

    .word-break-word {
        word-break: break-word !important;
    }

    .z-index-0 {
        z-index: 0 !important;
    }

.txt-switch-member-broker-status {
    font-size: 14px;
    font-weight: 700;
    color: #474747;
}

.img-transfer-member {
    width: 42px;
    height: 20px;
    margin: 0 7px;
}

.txt-th-transfer span {
    font-size: 10px;
}

.img-tranfer-table {
    width: 42px;
    height: 20px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    top: 20px;
}

.session-box-user-tranfer {
    display: flex;
    position: relative;
}

.session-box-user-tranfer-owner {
    background: #EAF9FA;
    border-radius: 8px;
    padding: 5px 14px;
    border: 1px solid #1D737C;
    display: flex;
    align-items: center;
    width: 100%;
}

.session-box-user-tranfer-owner-1, .session-box-user-tranfer-owner-2 {
    width: 50%;
}

.session-box-user-tranfer-owner-2 {
    padding: 0 8px;
    border-left: 1px solid #1D737C;
}
.session-box-user-tranfer-owner-1 h3 {
    color: #1D737C;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
}

.session-box-user-tranfer-owner-2 span {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #474747;
}

.session-box-user-tranfer-member {
    background: #F3F1FF;
    border-radius: 8px;
    padding: 5px 14px;
    border: 1px solid #50A198;
    display: flex;
    align-items: center;
    width: 100%;
}

.session-box-user-tranfer-member-1, .session-box-user-tranfer-member-2 {
    width: 50%;
}

.session-box-user-tranfer-member-2 {
    padding: 0 8px;
    border-left: 1px solid #6F60C2;
}

.session-box-user-tranfer-member-1 h3 {
    color: #50A198;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
}

.session-box-user-tranfer-member-1 span {
    color: #50A198;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.session-box-user-tranfer-member-2 span {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #474747;
}

.box-tranfer-right {
    margin-right: 15px;
}

.box-tranfer-left {
    margin-left: 15px;
}
/* Bootstrap 5 Breakpoints */
/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .full-container-xs {
        height: auto;
        min-height: unset;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .full-container-sm {
        height: auto;
        min-height: unset;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .full-container-md {
        height: auto;
        min-height: unset;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .full-container-lg {
        height: auto;
        min-height: unset;
    }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    .full-container-xl {
        height: auto;
        min-height: unset;
    }
}

    .bank-user-table tr.table-1 {
        text-align: center;
    }

    .card-body-R tr.table-1 {
        text-align: center;
    }

    .bnt-back {
        background-image: url("https://p88.blob.core.windows.net/images/default/icon-next-bank.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

        .bnt-back.active {
            background-image: url("https://p88.blob.core.windows.net/images/default/icon-forword-bank.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            width: 50px;
            height: 50px;
        }

    .back-op-1 p,
    .back-op-2 p {
        margin: 0px !important;
        font-weight: normal;
    }

    .word-break-all {
        word-break: break-all !important;
    }

    .btn-down-setting-edit {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        border-radius: 8px;
        cursor:pointer;
    }

    .btn-up-setting-edit {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        border-radius: 8px;
    }

    .btn-css-setting-condition-custom {
        font-size: 15px;
        border-radius: 10px;
    }

    .session-type-nature-square {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box-type-nature-square {
        width: 40px;
        height: 40px;
        background-color: #F7F7F7;
        border: 1px solid #EDEBEB;
        border-radius: 6px;
        cursor: pointer;
    }

    .session-type-nature-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 16px;
    }

    .box-type-nature-circle {
        width: 40px;
        height: 40px;
        background-color: #F7F7F7;
        border: 1px solid #EDEBEB;
        border-radius: 50%;
        cursor: pointer;
    }


    .box-type-nature-active {
        border: 2px solid #50A198  !important;
    }

    .box-color-btn {
        border-radius: 4px;
        border: 1px solid #DCDCDC;
        width: 105px;
        height: 40px;
        padding: 4px 7px;
    }

    .session-box-color-status {
        display: inline-block;
    }

    .session-box-icon-hot-header {
        display: inline-block;
        width: 55px;
        text-align: center;
        cursor: pointer;
    }

        .session-box-icon-hot-header p {
            font-size: 8px;
        }

        .session-box-icon-hot-header img {
            width: 22px;
            height: 22px;
        }

    .session-box-icon-hot {
        width: 38px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #D9D9D9;
    }

    .active-box-icon-hot {
        border: 2px solid #50A198  !important;
    }

    .box-example-lottery-select {
        border: 1px solid #EDEBEB;
        background: #F7F7F7;
        height: 86px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .session-box-example-lottery-select {
        width: 80px;
        text-align: center;
    }

        .session-box-example-lottery-select .box {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            position: relative;
        }

        .session-box-example-lottery-select p {
            font-size: 8px;
        }

    .box-color-bet-normal-custom {
        background-color: #404040;
    }

        .box-color-bet-normal-custom h4 {
            color: #FFFFFF;
        }

    .box-color-bet-almost-full-custom {
        background-color: #FF4343;
    }

        .box-color-bet-almost-full-custom h4 {
            color: #FFFFFF;
        }

    .box-color-bet-fully-custom {
        background-color: #202020;
    }

        .box-color-bet-fully-custom h4 {
            color: #404040;
        }

    .box-color-bet-selecting-custom {
        background-color: #75D00F;
    }

        .box-color-bet-selecting-custom h4 {
            color: #FFFFFF;
        }

    .box-color-bet-done-custom {
        background-color: #75D00F;
    }

        .box-color-bet-done-custom h4 {
            color: #FFFFFF;
        }

    .img-icon-hot-custom {
        width: 34px;
        height: 26px;
        position: absolute;
        top: -14px;
    }

    .box-lottery-round {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
    }

    .btn-add-lottery-round {
        font-family: Sukhumvit;
        font-size: 14px;
        font-weight: bold;
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px;
        cursor: pointer;
        color: #3D24A6;
    }

    .btn-add-lottery-round-custom {
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        margin-top: 16px;
        cursor: pointer;
        font-weight: bold;
        color: #3D24A6;
    }

    .btn-add-lottery-round-all-day {
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        margin-top: 16px;
        cursor: pointer;
        font-weight: bold;
        color: #3D24A6;
    }

    .btn-add-lottery-round-all-week {
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        margin-top: 16px;
        cursor: pointer;
        font-weight: bold;
        color: #3D24A6;
    }

    .btn-add-lottery-round-all-month {
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        margin-top: 16px;
        cursor: pointer;
        font-weight: bold;
        color: #3D24A6;
    }

    .btn-delete-lottery-round {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #FFE4E4;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
        cursor: pointer;
        margin-left: 14px;
        font-size: 12px;
    }

    .detailLotteryRoundHours {
        color: #A3A3A3;
        font-size: 10px;
        line-height: 16px;
    }

    .btnLockNumberLotteryBet {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 9px;
        margin: 0 5px;
        border-radius: 8px;
        border: 1px solid #50A198;
        cursor: pointer;
    }

        .btnLockNumberLotteryBet span {
            font-size: 14px;
        }

        .btnLockNumberLotteryBet img {
            width: 18px;
            height: 18px;
        }

    .btnControlResultLotteryBet {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 9px;
        margin: 0 5px;
        border-radius: 8px;
        border: 1px solid #50A198;
        cursor: pointer;
    }

        .btnControlResultLotteryBet span {
            font-size: 14px;
            font-weight: 500;
        }

        .btnControlResultLotteryBet img {
            width: 18px;
            height: 18px;
        }

    .btnEditControlResultLotteryBet {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 9px;
        margin: 0 5px;
        border-radius: 8px;
        border: 1px solid #FF0000;
        cursor: pointer;
    }

        .btnEditControlResultLotteryBet span {
            font-size: 14px;
            color: #FF0000;
        }

        .btnEditControlResultLotteryBet img {
            width: 18px;
            height: 18px;
        }

    .modal-lg-custom {
        width: 100% !important;
        max-width: 616px !important;
    }

    .box-lock {
        width: 40px;
        height: 40px;
        background: #404040;
        border-radius: 6px;
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        position: relative;
    }

        .box-lock .box-number {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box-lock span {
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            padding-top: 5px;
        }

    .boxNumberInLock {
        background: transparent !important;
    }

    .icon-pad-lock {
        width: 20px;
        height: 20px;
    }

    .box-number.lock {
        border: 2px solid #404040 !important;
        border-radius: 6px !important;
    }

    #numberLockSettingLoading {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sessionArraySetNumberLock {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 220px;
        color: #6795EA;
    }

    .box-show-detail {
        background-color: #F7F7F7;
        border: 1px solid #EDEBEB;
        border-radius: 6px;
    }

    .sessionArraySetNumberLock span {
        color: #6795EA;
    }

    .main-box-reposit-detail {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tab-box-reposit-detail {
        width: 50%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

        .tab-box-reposit-detail span {
            color: #9b9b9b;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tab-box-reposit-detail.active {
            border-radius: 4px !important;
            border-top: 2px solid #50A198  !important;
            background: #F2F2F7 !important;
        }

            .tab-box-reposit-detail.active span {
                color: #000 !important;
            }


    .session-main-customize-landing-page {
        width: 100%;
        max-width: 1140px;
    }

    .session-main-customize-member-page {
        width: 100%;
        max-width: 1140px;
    }

    .tab-menu-landing-page {
        display: inline-flex;
        padding: 9px 18px;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        opacity: 0.4;
        background: #FFF;
        cursor: pointer;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
    }

        .tab-menu-landing-page.tab-active {
            opacity: unset !important;
        }


    .tab-menu-member-page {
        display: inline-flex;
        padding: 9px 18px;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        opacity: 0.4;
        background: #FFF;
        cursor: pointer;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
    }

        .tab-menu-member-page.tab-active {
            opacity: unset !important;
        }

    .title-preview-landing-page {
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .title-preview-member-page {
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 10px;
    }



    .box-color-theme-custom {
        padding: 20px;
        margin-bottom: 20px;
        background: #FFF;
    }

        .box-color-theme-custom h5 {
            font-style: normal;
            font-weight: 700;
        }

    .box-color-theme-custom-2-floor {
        padding: 20px;
        background: #FFF;
    }

        .box-color-theme-custom-2-floor h4 {
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
        }

    .color-input-web-theme {
        display: inline-block;
        width: 115px;
        margin-bottom: 7px;
    }

        .color-input-web-theme span {
            font-size: 14px;
        }

    .border-box-color-theme-custom-2-floor {
        border-bottom: 2px solid #E7E7E7;
        border-style: dashed;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
    }

    .box-service {
        margin-bottom: 40px;
    }

    .box-img-icon {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px dashed #DFE3E8;
        cursor: pointer;
    }

        .box-img-icon img {
            width: 40px;
            height: 40px;
        }

        .box-img-icon p {
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 14px;
        }

    .box-main-menu {
        height: 74px;
        margin-bottom: 15px;
    }

    .box-icon-main-menu {
        height: 74px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px dashed #DFE3E8;
        cursor: pointer;
    }

        .box-icon-main-menu img {
            width: 24px;
            height: 24px;
        }

    .page-preview-web-theme {
        display: flex;
        justify-content: center;
    }

    .main-page-preview {
        overflow: scroll;
        height: 846px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 392px;
        padding-right: 20px !important;
        padding-left: 20px !important;
        padding-top: 40px !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .main-page-preview h1,
        .main-page-preview h2,
        .main-page-preview h3,
        .main-page-preview h4,
        .main-page-preview h5,
        .main-page-preview h6,
        .main-page-preview span,
        .main-page-preview ul li,
        .main-page-preview p {
            font-family: 'Kanit', sans-serif !important;
        }

    .main-member-page-preview {
        width: 392px;
    }

        .main-member-page-preview h1,
        .main-member-page-preview h2,
        .main-member-page-preview h3,
        .main-member-page-preview h4,
        .main-member-page-preview h5,
        .main-member-page-preview h6,
        .main-member-page-preview span,
        .main-member-page-preview ul li,
        .main-member-page-preview p {
            font-family: 'Kanit', sans-serif !important;
        }

    .box-txt-title-preview-landing {
        margin-bottom: 50px;
    }

    /*.box-txt-title-preview-landing h3 {
    font-size: 22px;
    line-height: 32px;
    background: linear-gradient(360deg, #FCCB00 20.93%, #FFFAD2 33.88%, #FAF1C1 36.25%, #EDD894 40.98%, #D8B14C 47.55%, #C9961A 51.83%, #E9CD76 63.28%, #F2DC8E 66.25%, #FFFAD2 73.02%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0px 0px 31px #000000, 0px 0px 69px #000000;
}*/

    /*.box-txt-title-preview-landing p {
    font-size: 14px;
    line-height: 22px;
    color:white;
}*/

    .section-btn-login-register-preview {
        margin-bottom: 50px;
    }

    .hero-btn-main {
        --color-border-hero-btn-main: var(--color-border-btn-main);
        --color-text-hero-btn-main: var(--color-text-btn-main);
        --color-bg-hero-btn-main: var(--color-bg-btn-main);
        width: 170px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        cursor: pointer;
        margin: auto;
        margin-bottom: 20px;
        background: var(--color-bg-hero-btn-main);
        position: relative;
        z-index: 0;
    }

        .hero-btn-main h5 {
            font-size: 16px;
            background: var(--color-text-hero-btn-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-btn-main:before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border-hero-btn-main);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }


    .hero-btn-secondary {
        --color-border-hero-btn-secondary: var(--color-border-btn-secondary);
        --color-text-hero-btn-secondary: var(--color-text-btn-secondary);
        --color-bg-hero-btn-secondary: var(--color-bg-btn-secondary);
        width: 170px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        cursor: pointer;
        margin: auto;
        margin-bottom: 20px;
        background: var(--color-bg-hero-btn-secondary);
        position: relative;
        z-index: 0;
    }

        .hero-btn-secondary h5 {
            font-size: 16px;
            background: var(--color-text-hero-btn-secondary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-btn-secondary:before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border-hero-btn-secondary);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    /*.section-btn-login-register-preview .btn-register {
    width: 170px;
    height: 50px;
    background: linear-gradient(#e4e5e6 0%, #b7b9bb 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 2px solid #b99438;
    cursor: pointer;
    margin: auto;
}*/
    /*.section-btn-login-register-preview .btn-register h5 {
        font-size: 16px;
        color: #603813;
    }*/
    .border-glow {
        --color-border-border-glow: var(--color-border);
        height: 3px;
        /*background: linear-gradient(90deg, transparent, #ecbd7b 30%, #ecbd7b 70%, transparent);*/
        /*border-top: 4px solid var(--color-border-border-glow);*/
        width: 100%;
        transition: all .6s;
        position: relative;
        z-index: 0;
    }

        .border-glow:before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border-border-glow);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .box-home-service {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0;
        margin: 0 0;
        background: var(--color-border-bg);
    }

        .box-home-service img {
            width: 90px;
            height: 90px;
        }

    .txt-box-home-service h3 {
        font-size: 20px;
        font-weight: 600;
        background: var(--color-text-header-main);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .txt-box-home-service p {
        font-size: 16px;
        font-weight: 300;
        background: var(--color-text-main);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .box-tab-home-service {
        /*background: linear-gradient(180deg, #3E3E3E 0%, #1B1B1B 100%);*/
        background: var(--color-border-bg);
        border-radius: 20px;
        padding: 10px;
        position: relative;
        z-index: 0;
        text-align: center;
        height: 210px;
    }

        .box-tab-home-service::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .tab-home-service {
        --bg-main-menu: var(--color-bg-tab-not-active);
        --text-main-menu: var(--color-text-tab-not-active);
        --border-main-menu: var(--color-border-tab-not-active);
        width: 100%;
        display: inline-block;
        height: 88px;
        text-align: center;
        cursor: pointer;
        background: var(--bg-main-menu);
        border-radius: 20px;
        position: relative;
        z-index: 0;
    }

        .tab-home-service p {
            font-size: 16px;
            background: var(--text-main-menu);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tab-home-service::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--border-main-menu);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .tab-home-service img {
            width: 51px;
            height: 51px;
        }

    .main-tab-home-service {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tab-home-service.active {
        --bg-main-menu: var(--color-bg-tab-active);
        background: var(--bg-main-menu);
        border-radius: 20px;
    }

        .tab-home-service.active p {
            --text-main-menu: var(--color-text-tab-active);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tab-home-service.active::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border-tab-active);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }


    .box-show-game-page-preview-theme {
        --border-bg: var(--color-border-bg);
        --boeder-color: var(--color-border);
        position: relative;
        border-radius: 35px;
        /*border-top: 2px solid var(--boeder-color);*/
        background: var(--border-bg);
        /*border-bottom: 2px solid var(--boeder-color);*/
        margin-bottom: 55px;
        padding: 50px 15px;
        text-align: center;
        position: relative;
        z-index: 0;
    }

        .box-show-game-page-preview-theme::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--boeder-color);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .box-show-game-page-preview-theme .title-header {
            max-width: 259px;
            height: 41px;
            top: -20px;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            text-align: center;
        }

    .box-img-game-provider {
        display: inline-block;
        width: 100px;
        height: auto;
    }

    .section-detail-tab-3 p {
        font-size: 14px;
    }

    .section-box-how-to-service {
        --color-section-box-how-to-service-bg: var(--color-border-bg);
        --color-section-box-how-to-service-border: var(--color-border);
        padding: 18px 8px;
        background: var(--color-section-box-how-to-service-bg);
        backdrop-filter: blur(10px);
        border-radius: 30px;
        position: relative;
        z-index: 0;
    }

        .section-box-how-to-service::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-section-box-how-to-service-border);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .box-tab-how-to-srevice-all {
        display: flex;
        justify-content: space-evenly;
    }
    /*.tab-link-service {
    --bg-tab-not-active: var(--color-bg-tab-not-active);
    background: var(--bg-tab-not-active);
}*/

    /*.tab-link-how-to-service-not-active {
    --bg-tab-boder-not-active: var(--color-border-tab-not-active);
    --bg-tab-not-active: var(--color-bg-tab-not-active);
    background: var(--bg-tab-not-active);
    width: 30%;
    height: 25px;
    font-weight: 400;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

    .tab-link-how-to-service-not-active p {
        font-size: 12px;
        color: #FFFFFF;
    }

    .tab-link-how-to-service-not-active:before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 1.75px;
        border-radius: inherit;
        background: var(--bg-tab-boder-not-active);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

    /*.tab-link-how-to-service-active {
    --bg-border-tab-active: var(--color-border-tab-active);
    --bg-tab-active: var(--color-bg-tab-active);
    width: 30%;
    height: 25px;
    font-weight: 400;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: var(--bg-tab-active);
    border-radius: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

    .tab-link-how-to-service-active p {
        font-size: 12px;
        color: #000000;
    }

    .tab-link-how-to-service-active:before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 1.75px;
        border-radius: inherit;
        background: var(--bg-border-tab-active);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

    .tab-link-service {
        --bg-tab: var(--color-bg-tab-not-active);
        --bg-border-tab: var(--color-border-tab-not-active);
        --text-tab: var(--color-text-tab-not-active);
        /*--bg-border-tab-active: var(--color-border-tab-active);
    --bg-tab-active: var(--color-bg-tab-active);
    --bg-tab-not-active: var(--color-bg-tab-not-active);
    --bg-tab-boder-not-active: var(--color-border-tab-not-active);*/
        width: 30%;
        height: 25px;
        font-weight: 400;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        background: var(--bg-tab);
        border-radius: 25px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        z-index: 0;
    }

        .tab-link-service:before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--bg-border-tab);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .tab-link-service p {
            font-size: 12px;
            background: var(--text-tab);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tab-link-service.tab-link-how-to-service-active {
            --bg-tab: var(--color-bg-tab-active);
            --bg-border-tab: var(--color-border-tab-active);
        }

            .tab-link-service.tab-link-how-to-service-active p {
                --text-tab: var(--color-text-tab-active);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

    .box-detail-how-to-srevice-all {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px 0;
        /*background: var(--color-border-bg);*/
    }

        .box-detail-how-to-srevice-all img {
            height: 80px;
        }

    .img-in-box-detail-how-to-srevice-all {
        width: 40%;
    }

    .txt-in-box-detail-how-to-srevice-all {
        text-align: start;
        width: 60%;
    }

        .txt-in-box-detail-how-to-srevice-all h3 {
            --color-how-to-srevice-all-h3: var(--color-text-header-main);
            background: var(--color-how-to-srevice-all-h3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 20px;
            font-weight: 600;
        }

        .txt-in-box-detail-how-to-srevice-all p {
            --color-how-to-srevice-all-p: var(--color-text-main);
            background: var(--color-how-to-srevice-all-p);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 12px;
            line-height: 20px;
        }

    /*.reason-detail h2 {
    color: #e5b82f;
}

.reason-detail ul {
    line-height: 30px;
}*/

    .reason-detail ul li {
        font-size: 14px;
        font-weight: 400;
    }

    .reason-detail.footer-end {
        font-size: 14px;
        font-weight: 400;
    }

    .tab-header-title-show-game {
        --bg-color-header-title-show-game: var(--color-border-bg-header);
        --text-color-header-title-show-game: var(--color-border-text-header);
        height: 40px;
        width: 200px;
        background: var(--bg-color-header-title-show-game);
        position: absolute;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
        top: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }

        .tab-header-title-show-game h4 {
            font-size: 18px;
            background: var(--text-color-header-title-show-game);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .hexagon-title {
        --bg-color-hexagon-title: var(--color-border-bg-header);
        --text-color-hexagon-title: var(--color-border-text-header);
        height: 40px;
        width: 200px;
        background: var(--bg-color-hexagon-title);
        position: absolute;
        left: 50%;
        box-sizing: border-box;
        right: 50%;
        transform: translate(-50%, -50%);
        top: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .hexagon-title h4 {
            font-size: 18px;
            background: var(--text-color-hexagon-title);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hexagon-title::before, .hexagon-title::after {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            top: 0;
            /* half height */
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }

        .hexagon-title::before {
            left: -25px;
            border-right: 25px solid var(--bg-color-hexagon-title);
        }

        .hexagon-title::after {
            right: -25px;
            border-left: 25px solid var(--bg-color-hexagon-title);
        }

    .show-game-provider-all {
        --color-bg-show-game-provider-all: var(--color-border-bg);
        --color-border-show-game-provider-all: var(--color-border);
        padding: 20px;
        position: relative;
        background: var(--color-bg-show-game-provider-all);
        border-radius: 17px;
        z-index: 0;
    }

        .show-game-provider-all::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border-show-game-provider-all);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .session-pageing-preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 34px;
    }

        .session-pageing-preview button {
            width: 97px;
            height: 40px;
        }

    .border-promotion-preview {
        --color-border-promotion: var(--color-border);
        position: relative;
        z-index: 0;
        padding: 2.0px 2.0px 2.0px 1.5px;
    }

        .border-promotion-preview::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: var(--color-border-promotion);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .session-page-preview-fix {
        height: 100%;
        position: fixed;
    }

    .header-member-page {
        position: relative;
        text-align: center;
    }

        .header-member-page .logo-header {
            width: 225px;
        }

    .session-icon-noti {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 10px;
    }

        .session-icon-noti .noti-dot {
            position: relative;
        }

    .session-count-noti-member {
        width: 18px;
        height: 18px;
        position: absolute;
        top: -5px;
        right: -5px;
        background: #F44336;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
        font-size: 12px;
    }

        .session-count-noti-member p {
            color: #FFFFFF;
        }

    .box-credit-user {
        width: 100%;
        height: 170px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
        background: rgba(0, 0, 0, 0.73);
        position: relative;
        z-index: 0;
    }

        .box-credit-user::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 1.75px;
            border-radius: inherit;
            background: #eadc75;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .title-box-credit-user img {
        width: 20px;
        margin-right: 7px;
    }

    .title-box-credit-user h4 {
        color: #fac402;
        font-size: 20px;
    }

    .txt-amount-box-credit-user h4 {
        font-size: 24px;
        font-weight: 700;
        color: #fff;
    }

    .div-ranking {
        animation: MoveUpDown 2s linear infinite;
        text-align: center;
    }

        .div-ranking .txt-username {
            font-size: 10px;
        }

        .div-ranking .txt-detail-user {
            font-size: 12px;
            font-weight: 200;
        }

        .div-ranking img {
            width: 100%;
            max-width: 48px;
        }

        .div-ranking p {
            color: #ffffff;
        }

    .img-icon-contect img {
        width: 50px;
    }

    .txt-small-time-credit {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .txt-small-time-credit i {
            font-size: 11px;
        }

    .session-btn-in-games {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-in-games {
        width: 160px;
        height: 49px;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .btn-in-games i {
            font-size: 25px;
        }

        .btn-in-games p {
            font-size: 16px;
        }

    .session-menu {
        text-align: center;
    }

    .box-menu {
        cursor: pointer;
        display: inline-block;
        margin: 0px 15px 15px 15px;
    }

        .box-menu img {
            width: 70px;
        }

        .box-menu p {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
        }

    .title-conditions-pro {
        width: 204px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E5F2FF;
        margin-left: -20px;
    }

        .title-conditions-pro h6 {
            font-size: 12px;
            color: #000;
            font-style: normal;
            font-weight: 700;
        }

    .title-calculate-change-pro {
        width: 290px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E5F2FF;
        margin-left: -20px;
    }

        .title-calculate-change-pro h6 {
            font-size: 12px;
            color: #000;
            font-style: normal;
            font-weight: 700;
        }

    .table-custom-width-calculate-change-pro {
        margin-left: -20px;
        width: calc(100% + 40px);
    }

    #spanRewardType {
        color: #0463BA !important;
    }

    .session-footer-member-page {
        position: absolute;
        bottom: 0;
        width: 392px;
        height: 85px;
        display: flex;
        align-items: center;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: black;
        z-index: 0;
        cursor: pointer;
    }

        .session-footer-member-page::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 2px 2px 0;
            border-radius: inherit;
            background: #FCCB00;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .btn-deposit, .btn-withdraw {
        font-size: 16px;
    }

        .btn-deposit p, .btn-withdraw p {
            color: #fff;
        }

        .btn-deposit i, .btn-withdraw i {
            color: #FCCB00;
        }

    .border-custom-btn-deposit, .border-custom-btn-withdraw {
        height: 85px;
    }

    .border-custom-btn-deposit {
        position: relative;
        z-index: 0;
    }

        .border-custom-btn-deposit::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 0 2px 0 0;
            border-radius: inherit;
            background: #FCCB00;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .viewLoadingShowPreview {
        width: 392px;
        height: 846px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid black;
        border-radius: 8px;
    }

    .box-preview-setting-varsion {
        padding: 15px;
        height: 70px;
        background-color: #ffffff;
    }

        .box-preview-setting-varsion h4 {
            color: #000000;
        }

        .box-preview-setting-varsion small {
            color: #B0B0B0;
        }

    .title-header-modal-warning-setting-themes {
        color: #000000;
        text-align: center;
        font-family: Noto Sans Thai;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
    }

    .modal-show-slip-bank-custom {
        width: 345px;
        max-width: 345px;
    }

    .modal-show-add-manual-custom {
        width: 345px;
        max-width: 345px;
    }

    .width-modal-add-slip-bank-custom {
        width: 600px;
        max-width: 600px;
    }

    .showSlipPreview1 {
        width: 80px;
        height: 80px;
    }

    .showSlipPreview2 {
        width: 80px;
        height: 80px;
    }

    .small-modal-warning-setting-themes {
        color: #B0B0B0;
        text-align: center;
        font-family: Noto Sans Thai;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
    }

    .title-header-content-3 {
        --bg-color-title-header-content: var(--color-border-bg-header);
        --text-color-title-header-content: var(--color-border-text-header);
        height: 40px;
        width: 100%;
        background: var(--bg-color-title-header-content);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }

        .title-header-content-3 p {
            background: var(--text-color-title-header-content);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 14px;
        }

    #setDefaultThemesClick {
        display: flex;
        align-items: center;
    }

    .box-card-custom-lottoey {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 500px;
    }

    .tab-statement {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        background: #FFFFFF;
        opacity: 0.4;
        cursor: pointer;
    }

        .tab-statement.tab-active {
            opacity: unset !important
        }

    .session-upload-slip-bank-custom {
        height: 80px;
    }

    .session-upload-slip-bank-custom-1 {
        width: 14.5%;
        height: 80px;
        margin-right: 15px;
    }

    .session-upload-slip-bank-custom-2 {
        width: 83%;
    }

    .box-slip-in-not-show, .box-slip-in-not-show-add-manual {
        border: 1px dashed #DFE3E8;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .box-slip-in-show, .box-slip-in-show-add-manual {
        border: 1px dashed #DFE3E8;
        height: 80px;
        cursor: pointer;
        position: relative;
    }

    .box-click-view-slip, .box-click-view-slip-add-manual {
        position: absolute;
        z-index: 1;
        width: 80px;
        height: 80px;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .btn-click-close-modal-show-slip-bank {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
    }

        .btn-click-close-modal-show-slip-bank i {
            font-size: 32px;
        }

        .btn-click-close-modal-show-slip-bank span {
            font-size: 16px;
        }

    .btn-click-close-modal-show-slip-add-manual {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
    }

        .btn-click-close-modal-show-slip-add-manual i {
            font-size: 32px;
        }

        .btn-click-close-modal-show-slip-add-manual span {
            font-size: 16px;
        }

    .offcanvas-add-manual-custom {
        width: 600px !important;
    }

.offcanvas-withdraw-detail-custom {
    width: 800px !important;
    top: 72px !important;
    border-top-left-radius: 28px;
    border: 0px solid !important;
}

.offcanvas-header-withdraw-detail-custom {
    background-color: rgb(110, 29, 29);
    border-top-left-radius: 28px;
    height: 80px;
    min-height: 80px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid white !important;
}

    .offcanvas-header-withdraw-detail-custom h4 {
        color: rgba(255, 255, 255, 1);
    }

.icon-close-offcanvas-withdraw-detail-custom {
    width: 32px;
    height: 32px;
    font-size: 35px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}

.session-title-withdraw-detail {
    height: 200px;
    background-color: rgb(110, 29, 29);
}

.in-detail {
    padding: 24px 72px;
    height: 110px;
}

.box-table-in-detail-body {
    box-shadow: -10px -10px 30px 0px rgba(0, 0, 0, 0.2),4px 4px 10px 0px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
    border-radius: 20px;
    position: relative;
    width: 752px;
    top: -90px;
    z-index: 10000;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: calc(-90px + 1.5rem);
}

.header-in-detail-body {
    height: 56px;
    background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .header-in-detail-body .detail-actions {
        display: flex;
        align-items: center;
        gap: .5rem;
        height: 41px;
        padding-left: 1rem;
        border-left: 2px solid #00000033;
    }
        .header-in-detail-body .detail-actions.detail-divider-end {
            padding-right: 1rem;
            border-right: 2px solid #00000033;
        }

        .main-in-detail-body .detail-bank,
        .main-in-detail-body .detail-qrcode,
        .approve-detail-bank {
            display: flex;
            border-radius: 12px;
            background-color: #F6F6F6;
            padding: 1.5rem;
        }
            .main-in-detail-body .detail-bank-start,
            .main-in-detail-body .detail-bank-end,
            .approve-detail-bank > .detail-bank-start,
            .approve-detail-bank > .detail-bank-end {
                flex: 1 0;
            }

    .main-in-detail-body .detail-qrcode {
        justify-content: space-between;
        padding-right: 60px;
        margin-left: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 50px;
    }

    .main-in-detail-body .detail-qrcode-start {
        display: flex;
        flex-direction: column;
        margin-right: 1rem;
    }

    .main-in-detail-body .detail-qrcode-bank {
        border-width: 1px;
        border-style: solid;
        padding: .5rem 1.5rem 1rem;
        border-radius: .5rem;
    }
        .main-in-detail-body .detail-qrcode-bank.company-bank {
            background-color: #F3F1FF;
            border-color: #50A198;
        }
        .main-in-detail-body .detail-qrcode-bank.customer-bank {
            background-color: #EAFFF7;
            border-color: #00C17C;
        }

    .main-in-detail-body .detail-qrcode .qrcode {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 192px;
        min-height: 192px;
        height: auto;
        border-radius: .5rem;
        border: 4px solid #50A198 
    }

.main-in-detail-body {
    padding: 24px 48px;
}

.box-shadow-badge-custom {
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.3) !important;
}

.color-title-header-in-detail {
    color: rgb(173, 173, 173);
}

.color-white-grey-black-custom {
    color: rgb(173, 173, 173);
}

.btn-custom-withdraw-detail {
    font-size: 10px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    border: unset;
}

.btn-danger-custom {
    background: rgb(246, 70, 70);
    color: rgba(234, 249, 250, 1);
}

.btn-success-custom {
    background: rgba(49, 191, 206, 1);
    color: rgba(234, 249, 250, 1);
}

    .border-bottom-withdraw-detail-custom {
        border-bottom: 1px solid rgb(219, 219, 219);
    }

.h-30px-custom {
    min-height: 30px;
}

.w-60{
    width:60%;
}

.w-40 {
    width: 40%;
}

/*.btn-match-statment-custom {
    width: 20px !important;
    height: 20px !important;
    padding: 0;
    background: rgb(4, 77, 188);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}*/

.canvas-custom {
    position: absolute;
    z-index: -1;
    filter: blur(70px) saturate(1.9);
    pointer-events: none;
    background-image: linear-gradient(135deg, #A377C2 10%, #FC743C 100%);
    cursor: pointer;
    background: url(https://grainy-gradients.vercel.app/noise.svg);
    width: 100%;
    height: 96px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.icon-img-card-6 {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    border-radius: 4px;
}

.session-card-dash-board-sub {
    display: flex;
    justify-content: space-between;
}

    .session-card-dash-board-sub .card-dash-board-sub {
        width: 31.5%;
    }

.w-65{
    width:65%;
}

.w-35{
    width:35%;
}

.tr-tranfer-fix {
    background-color: #f6f6f6;
}

    .tr-tranfer-fix.last-tranfer-fix > td {
        position: relative;
    }

        .tr-tranfer-fix.last-tranfer-fix > td::after {
            width: 100%;
            background-color: #f64646;
            height: 1px;
            content: ' ';
            position: absolute;
            bottom: 0;
            right: 0;
        }

    .td-tranfer-fix-short {
        position: relative;
        padding: 8px 12px 8px 39px !important;
    }

    .td-tranfer-fix-short::before {
        width: 20px;
        background-color: #ffffff;
        height: 100%;
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        border-right: 5px solid #f64646;
    }

.tr-tranfer-fix.last-tranfer-fix > .td-tranfer-fix-short::after {
    width: calc(100% - 20px);
}


/*.border-last-item-tranfer-fix {
    border-bottom: 1px solid #f64646;
}*/

    /*.border-last-item-tranfer-fix::after {
        width: 100%;
        height: auto;
        content: ' ';
        position: absolute;
        margin-left: 20px;
        left: 0;
        top: 0;
        border-bottom: 1px solid #f64646;
    }*/


.box-label-setting-lottoey-custom {
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(75, 56, 179);
    color: #fff;
    border-radius: 20px;
    padding: 4px 16px 4px 16px;
}

#settingConditionLotteryBet {
    padding: 16px;
    background-color: rgb(244, 249, 255);
    border-radius: 16px;
}

@keyframes MoveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
}

.card-dash-board {
    margin-bottom: 16px;
    padding: 0px;
    max-height: 368px;
    height: 100%;
}

.main-dash-board {
    border-radius: 16px;
    height: 368px;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
}

    .main-dash-board.dark-mode {
        position: relative;
        z-index: 0;
        height: auto;
    }

        .main-dash-board.dark-mode::before {
            width: 100%;
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 2px;
            border-radius: inherit;
            background: linear-gradient(0deg, #5442B7, #5442B7);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

    .title-card-dash-board {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.13);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        height: 48px;
        background: linear-gradient(89.96deg, rgba(208, 224, 255, 0.8) 1.66%, rgba(197, 212, 244, 0.184199) 59.81%, rgba(195, 211, 242, 0.0907085) 79.96%, rgba(193, 209, 240, 0) 99.96%);
    }

.title-card-dash-board-1 {
    display: flex;
    align-items: center;
}

.title-card-dash-board-2 {
    display: flex;
    align-items: center;
}

.title-card-dash-board h4 {
    font-weight: 700;
    font-size: 14px;
}

.btn-icon-dash-board {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(244, 246, 251, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
}

.session-main-pie {
    position: relative;
    width: 232px;
    height: 232px;
}

#chart {
    width: 300px;
    height: 300px;
    z-index: 100000;
    position: absolute;
    right: -33px;
    top: 3.2px;
}

.pie-layer-0 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    background: rgb(244, 246, 251);
}

.pie-layer-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 217px;
    height: 217px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(138.32deg, rgba(0, 0, 0, 0.6) 8.26%, rgba(255, 255, 255, 0.6) 91.02%);
}

.pie-layer-2 {
    position: absolute;
    top: 50%;
    left: 50.2%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pie-layer-2::before {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 155px;
        height: 155px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #dbdde0;
        border: 1px solid #c1c7cc;
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.12),-4px -4px 6px 0px rgb(255, 255, 255);
    }

    .pie-layer-2::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(244, 246, 251, 0.6);
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.12),-4px -4px 6px 0px rgb(255, 255, 255);
    }

.title-card-dash-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.13);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    height: 48px;
    background: linear-gradient(89.96deg, rgba(208, 224, 255, 0.8) 1.66%, rgba(197, 212, 244, 0.184199) 59.81%, rgba(195, 211, 242, 0.0907085) 79.96%, rgba(193, 209, 240, 0) 99.96%);
}

.title-card-dash-board.card-report-withdraw-wallet-margin-custom {
   margin-bottom: 15px;
}

.title-card-dash-board.card-report-promotion-margin-custom {
   margin-bottom: 17px;
}

.title-card-dash-board.card-report-deposit-withdraw-margin-custom {
   margin-bottom: 16px;
}

.title-card-dash-board.card-report-customer-margin-custom {
   margin-bottom: 22px;
}

.body-card-all-padding-custom {
    padding: 0 16px 16px 16px;
}

.title-card-dash-board-1 {
    display: flex;
    align-items: center;
}

.title-card-dash-board-2 {
    display: flex;
    align-items: center;
}

.title-card-dash-board h4 {
    font-weight: 700;
    font-size: 14px;
}

.btn-icon-dash-board {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(244, 246, 251, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
}

.session-main-pie {
    position: relative;
    width: 232px;
    height: 232px;
}

#chart {
    width: 300px;
    height: 300px;
    z-index: 100000;
    position: absolute;
    right: -33px;
    top: 3.2px;
}

.pie-layer-0 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    background: rgb(244, 246, 251);
}

.pie-layer-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 217px;
    height: 217px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(138.32deg, rgba(0, 0, 0, 0.6) 8.26%, rgba(255, 255, 255, 0.6) 91.02%);
}

.pie-layer-2 {
    position: absolute;
    top: 50%;
    left: 50.2%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pie-layer-2::before {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 155px;
        height: 155px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #dbdde0;
        border: 1px solid #c1c7cc;
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.12),-4px -4px 6px 0px rgb(255, 255, 255);
    }

    .pie-layer-2::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(244, 246, 251, 0.6);
        box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.12),-4px -4px 6px 0px rgb(255, 255, 255);
    }

.text-title-pie {
    text-align: center;
    font-size: 12px;
    margin-bottom: 21px;
    font-weight: 700;
    line-height: 18px;
}

.box-detail-in-pie {
    width: 150px;
    height: 150px;
    position: relative;
    z-index: 99999;
}

.icon-people-pie {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(244, 246, 251, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    margin: 16px auto 6px auto;
}

.box-detail-in-pie h2 {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2px;
    line-height: 18px;
}

.box-detail-in-pie h1 {
    font-size: 29px;
    font-weight: 700;
    text-align: center;
    color: rgba(75, 56, 179, 1);
}

.box-count-customer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    background: rgba(244, 246, 251, 1);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    margin-bottom: 16px;
    padding: 0 8px 0 13px;
}

.box-count-customer p{
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.box-orange {
    border-right: 2px solid #ffa507;
    border-left: 2px solid #ffa507;
}

 /*   .box-orange::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #FFE3BD 0%, #FF9100 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

.box-orange-text-shadow {
    -webkit-text-stroke: 0.7px #f1d1a1;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
}

.box-blue {
    border-right: 2px solid #0060ff;
    border-left: 2px solid #0060ff;
}

    /*.box-blue::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #370767 0%, #2BE0BE 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

.box-blue-text-shadow {
    -webkit-text-stroke: 0.7px #89b8c9;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
}

.box-sky {
    border-right: 2px solid #8debdc;
    border-left: 2px solid #8debdc;
}

    /*.box-sky::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180.54deg, #7DFFD8 0.46%, #004DFF 99.55%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

.box-sky-text-shadow {
    -webkit-text-stroke: 0.7px #94d4f6;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
}

.box-purple {
    border-right: 2px solid #e457bc;
    border-left: 2px solid #e457bc;
}

    /*.box-purple::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #FB48FF 0%, #4936B2 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }*/

.box-purple-text-shadow {
    -webkit-text-stroke: 0.7px #df92f2;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
}


.box-num-customer-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2), -4px -4px 6px 1px rgba(255, 255, 255, 0.9);
}

    .box-num-customer-custom.box-count-orange {
        background-color: #ffa507;
        /*border: 1px solid rgba(255, 255, 255, 0.4);*/
    }

        .box-num-customer-custom.box-count-orange h3 {
            font-size: 16px;
            font-weight: 700;
            color: rgb(71, 71, 71);
        }

    .box-num-customer-custom.box-count-blue {
        background-color: #0060ff;
        /*border: 1px solid rgba(255, 255, 255, 0.4);*/
    }

        .box-num-customer-custom.box-count-blue h3 {
            font-size: 16px;
            font-weight: 700;
            color: rgba(255, 255, 255, 1);
        }

    .box-num-customer-custom.box-count-sky {
        background-color: #86ead9;
        /*border: 1px solid rgba(255, 255, 255, 0.4);*/
    }

    .box-num-customer-custom.box-count-sky h3 {
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
    }

    .box-num-customer-custom.box-count-purple {
        background-color: #e459bd;
        /*border: 1px solid rgba(255, 255, 255, 0.4);*/
    }

    .box-num-customer-custom.box-count-purple h3 {
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
    }

    .w-60{
        width:60% !important;
    }

    .w-40{
        width:40% !important;
    }

.main-header-session-dash-board {
    height: 96px;
    padding: 20px 28px;
    margin-bottom: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.title-header-txt-all {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 9px;
    line-height: 18px;
}

.box-detail-report-promotion {
    display:flex;
    background: rgba(233, 237, 245, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
    height: 40px;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 4px 8px;
}

.color-custom-categories {
    color: #000000 !important;
}

.title-header-txt-all-custom-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

    .title-header-txt-all-custom-chart h3 {
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
    }

.text-start-custom-promotion h4 {
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
}

.text-start-custom-promotion p {
    color: #919191;
    font-size: 10px;
}

.text-end-custom-promotion h4 {
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
}

.text-end-custom-promotion p {
    color: #919191;
    font-size: 10px;
}

.box-center-detail-report-promotion {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    border-radius: 6px;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2),-4px -4px 6px 1px rgba(255, 255, 255, 0.9);
}

.box-css-bonus-credit {
    position: relative;
    z-index: 0;
    background: rgba(226, 221, 252, 1);
}

    .box-css-bonus-credit::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #57CAEE 0%, #7612F6 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.box-css-mini-game {
    position: relative;
    z-index: 0;
    background: rgba(214, 235, 245, 1);
}

    .box-css-mini-game::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180.54deg, #7DFFD8 0.46%, #004DFF 99.55%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.box-css-lotto {
    position: relative;
    z-index: 0;
    background: rgba(219, 244, 231, 1);
}

    .box-css-lotto::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #D0FF6D 0%, #2BE0BE 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.box-css-point-reward {
    position: relative;
    z-index: 0;
    background: rgba(255, 222, 172, 1);
}

    .box-css-point-reward::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #FFCF53 0%, #D50098 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.box-css-bonus-other {
    position: relative;
    z-index: 0;
    background: rgba(255, 224, 224, 1);
}

    .box-css-bonus-other::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 0px 2px 0px 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #2E0C59 0%, #D92121 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.box-center-detail-report-promotion h4 {
    font-size: 14px;
    font-weight: 500;
}

.icon-title-header-dash-board {
    width: 64px;
    height: 64px;
    background: rgba(233, 237, 245, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.2),-8px -8px 13px 0px rgb(255, 255, 255);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-title-header-dash-board {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    background: rgba(233, 237, 245, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.2),-8px -8px 13px 0px rgb(255, 255, 255);
    border-radius: 12px;
    padding: 10px 16px;
}

    .text-title-header-dash-board h1 {
        font-size: 29px;
        font-weight: 700;
    }

.text-purple-custom {
    color: #50A198;
}

.box-report-customer-custom-tooltip {
    background: rgba(233, 237, 245, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15),-4px -4px 6px 0px rgb(255, 255, 255);
    border-radius: 4px;
    padding: 4px 8px;
    width: fit-content;
    height: 51px;
    position:relative;
}

.title-report-customer-custom-tooltip {
    font-size: 10px;
    line-height: 21px;
}

.result-total-report-customer-custom-tooltip {
    font-size: 10px;
    line-height: 21px;
    color: rgb(0, 87, 255);
}

.result-percent-report-customer-custom-tooltip {
    font-size: 10px;
    line-height: 21px;
    color: rgb(0, 87, 255);
}

#chartContainer .apexcharts-tooltip {
    color: #000000;
}

    #chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
        background: #ffffff !important;
    }


.apexcharts-tooltip {
    background: #f3f3f3;
    color: orange;
}

.btn-legend-action {
    cursor: pointer;
}

.line-legend-deposit {
    width: 38px;
    border: 2px solid rgb(49, 191, 206);
    border-radius: 10px;
    margin-right: 4px;
}

.line-legend-withdraw {
    width: 38px;
    border: 2px solid rgba(246, 70, 70, 1);
    border-radius: 10px;
    margin-right: 4px;
}

.box-color-legend-withdraw-credit {
    width: 10px;
    border-radius: 2px;
    margin-right: 4px;
    height: 10px;
    background: linear-gradient(180deg, #FFCF53 0%, #D50098 100%);
}

.box-color-legend-withdraw-tranfer {
    width: 10px;
    border-radius: 2px;
    margin-right: 4px;
    height: 10px;
    background: linear-gradient(180deg, #57CAEE 0%, #7612F6 100%);
}

.box-color-legend-promotion-type-bonus {
    width: 10px;
    border-radius: 2px;
    margin-right: 4px;
    height: 10px;
    background: linear-gradient(180.54deg, #7DFFD8 0.46%, #004DFF 99.55%);
}

.line-color-legend-promotion-type-bonus {
    width: 38px;
    border: 2px solid rgba(213, 0, 153, 1);
    border-radius: 10px;
    margin-right: 4px;
}

.box-color-legend-promotion-type-mini-game {
    width: 10px;
    border-radius: 2px;
    margin-right: 4px;
    height: 10px;
    background: linear-gradient(180deg, #FFCF53 0%, #D50098 100%);
}

.line-color-legend-promotion-type-mini-game {
    width: 38px;
    border: 2px solid rgba(49, 225, 193, 1);
    border-radius: 10px;
    margin-right: 4px;
}

.box-color-legend-promotion-type-lotto {
    width: 10px;
    border-radius: 2px;
    margin-right: 4px;
    height: 10px;
    background: linear-gradient(180deg, #2E0C59 0%, #D92121 100%);
}

.line-color-legend-promotion-type-lotto {
    width: 38px;
    border: 2px solid rgba(255, 204, 0, 1);
    border-radius: 10px;
    margin-right: 4px;
}

.box-color-legend-promotion-type-point-reward {
    width: 10px;
    border-radius: 2px;
    margin-right: 4px;
    height: 10px;
    background: linear-gradient(180deg, #D0FF6D 0%, #2BE0BE 100%);
}

.line-color-legend-promotion-type-point-reward {
    width: 38px;
    border: 2px solid rgba(75, 56, 179, 1);
    border-radius: 10px;
    margin-right: 4px;
}

.color-minus {
    color: rgba(71, 71, 71, 1);
}

.session-short-overview-dash-board-1 {
    display: flex;
    justify-content: space-between;
}

.session-short-overview-dash-board-2 {
    display: flex;
    justify-content: space-between;
}

.short-overview-dash-board {
    width: 31.5%;
}

.btn-drop-tranfer-fix-list {
    width: 96px;
    height: 32px;
    position: absolute;
    top: -2px;
    left: -1px;
    cursor: pointer;
}

.btn-drop-tranfer-fix-list img{
    width: 100%;
}

@keyframes MoveUpDown {
    0%, 100% {
        transform: translateY(0);
    }

        50% {
            transform: translateY(-5px);
        }
    }

    .tab-box-reposit-detail.active span {
        color: #000 !important;
    }
    /* Medium devices (tablets, less than 992px) */
    @media (max-width: 991.98px) {
        .send-sms-wrapper {
            grid-template-columns: 1fr;
        }
    }



    .rounded-8px {
        border-radius: 8px;
    }

    .box-img-feature-main {
        border-radius: 8px;
        width: 100%;
        /*height: 200px;*/
    }

        /*.box-img-feature-main.list {
        height: 80px;
    }*/

        /*@media (max-width: 1199.98px) {
    .box-img-feature-main.list {
        height: 200px;
    }
}*/

        .box-img-feature-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .box-badge-status {
        position: absolute;
        top: 0;
        right: 0;
    }

    .badge-status {
        border-radius: 0px 8px 0px 8px;
        width: 60px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .badge-status.list {
            border-radius: 0px 4px 0px 4px;
            width: 35px;
            height: 15px;
        }

    .nav-link-white {
        background-color: #ffffff !important;
        opacity: 0.4;
    }

    .nav-custom-white .nav-item .nav-link.active {
        color: #000000;
        opacity: 1;
        background-color: #ffffff;
    }

    .card-box-custom {
        color: #000000;
        border: 1px solid #E2E2E2;
        border-radius: 8px;
        position: relative;
        width: 100%;
        height: 100%;
        padding: 1rem 1rem 1rem 1.5rem;
    }

        .card-box-custom.bg-new {
            background: #ffffff;
        }

        .card-box-custom.bg-old {
            background: #F7F7F7;
        }

    .tab-type-color {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50px 0px 0px 50px;
        width: 7px;
        height: 100%;
    }

    .text-wrap-1row {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 26px;
    }

    .text-wrap-2row {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        height: 42px;
        line-height: 22px;
    }

    /* Medium devices (tablets, less than 992px) */
    @media (max-width: 991.98px) {
        .send-sms-wrapper {
            grid-template-columns: 1fr;
        }

        .send-sms-profile {
            grid-column: span 2;
            width: auto;
        }

        .send-sms-panel-custom {
            grid-column: span 2;
            grid-row: 3;
            grid-template-columns: 1fr;
        }

            .send-sms-panel-custom .panel-summary {
                grid-row: 1;
            }

        .send-sms-menu {
            grid-column: span 2;
            grid-row: 2;
            flex-direction: row;
            justify-content: space-around;
        }

            .send-sms-menu .menu-item-icon {
                margin-right: 0;
            }

            .send-sms-menu .menu-item-text {
                display: none;
            }

            .send-sms-menu .menu-item + .menu-item {
                margin-top: 0;
            }

        .sms-preview {
            max-width: 326px;
            margin-left: auto;
            margin-right: auto;
        }

        .sms-preview-placeholder {
            width: auto;
        }

        .box-fix-sms-massage-show {
            width: 280px;
        }
    }

    .showImagePreview {
        height: 345px;
    }

    .btn-add-deposit-fixed-mb {
        display: none;
    }


    @media only screen and (max-width: 960px) {
        .session-page-preview-fix {
            height: 100%;
            position: unset;
        }
    }


    @media only screen and (max-width: 676px) {
        .showImagePreview {
            height: 250px;
        }
    }


    @media only screen and (max-width: 576px) {
        .btn-add-deposit-fixed-pc {
            display: none;
        }

        .btn-add-deposit-fixed-mb {
            display: block;
        }

        .main-dash-board {
            height: auto;
        }

        .session-short-overview-dash-board-1, .session-short-overview-dash-board-2 {
            display: unset;
        }

        .short-overview-dash-board {
            width: 100%;
            margin-bottom: 16px;
        }

        .card-dash-board {
            max-height: 100%;
        }
    }

    /* @ Table Affiliate Summary */

    .table-affiliate-summary {
        font-size: 12px;
    }

        .table-affiliate-summary .th-1 {
            border-bottom: none;
        }

        .table-affiliate-summary .th-summary:not(.th-odd) {
            border-bottom-color: #635A94;
        }

        .table-affiliate-summary .th-summary.th-odd {
            border-bottom-color: #9B95BE;
        }

        .table-affiliate-summary > :not(caption) > tr > th {
            font-weight: 700;
            height: 38px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .table-affiliate-summary .td-summary {
            color: #FFF;
            font-weight: 700;
            border-bottom: none;
        }

    .box-bg {
        clip-path: polygon( 11% 0, 100% 0%, 100% 100%, 11% 100%, 0 50%);
        width: 88px;
        height: 20px;
        margin: auto;
        padding-top: 2.4px;
        font-size: 12px;
        font-weight: 700;
        font-style: normal;
        font-family: Noto Sans Thai;
        padding-left: 5px;
        line-height: 16px;
    }

    .text-danger-a {
        clip-path: polygon( 11% 0, 100% 0%, 100% 100%, 11% 100%, 0 50%);
        width: 88px;
        height: 20px;
        background-color: #EB6D6D;
        color: #FFF !important;
        font-family: Noto Sans Thai;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        padding-left: 30px;
        padding-top: 3px;
    }

    .text-success-a {
        clip-path: polygon( 11% 0, 100% 0%, 100% 100%, 11% 100%, 0 50%);
        width: 88px;
        height: 20px;
        background-color: #2AD870;
        color: #FFF !important;
        font-family: Noto Sans Thai;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        padding-left: 30px;
        padding-top: 3px;
    }

    .text-warning-a {
        clip-path: polygon( 11% 0, 100% 0%, 100% 100%, 11% 100%, 0 50%);
        width: 88px;
        height: 20px;
        background-color: #FCCB00;
        color: #000 !important;
        font-family: Noto Sans Thai;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        padding-left: 20px;
        padding-top: 3px;
    }

    .rankbox-left-right {
        display: flex;
        grid-gap: 1rem;
        justify-content: center;
    }

    .rankbox-section {
        user-select: none;
        width: 241px;
        height: 288px;
        background: #FFF;
        display: grid;
        padding: 1rem;
    }

    .text-menu-rank {
        display: grid;
        cursor: pointer;
        grid-template-columns: 1fr 5fr;
        align-items: center;
        margin: auto;
        width: 211px;
        height: 38px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
    }

        .text-menu-rank img {
            width: 20px;
            height: 17.921px;
            margin: auto;
        }

    .rankbox-right {
        width: 100%;
        margin-bottom: 10rem;
    }

    .set-rank-icon-and-background {
        background: #fff;
        padding: 1rem;
    }

    .set-rank-icon-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
    }

    .header-rankbox-right {
        display: flex;
        justify-content: space-between;
        padding-bottom: 1rem;
        align-items: center;
    }

    .bnt-section {
        display: flex;
        column-gap: 0.5rem;
    }

    .header-rankbox-right h4 {
        color: #000;
        /*font-size: 15px;*/
        /*font-weight: 700;*/
    }

    span.bnt-Restore {
        cursor: pointer;
        width: 92px;
        height: 36px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #50A198;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #50A198;
        font-size: 12px;
        font-weight: 500;
    }

    span.bnt-use-icon {
        cursor: pointer;
        width: 189px;
        height: 36px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #0182FC;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #0182FC;
        font-size: 12px;
        font-weight: 500;
    }

    .text-menu-rank.active {
        border-radius: 10px;
        background: #F2F2F7;
        color: #50A198;
    }

    .set-rank-icon {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 10fr;
        grid-gap: 0.5rem;
    }

    .img-box-rank img {
        width: 80px;
        height: 60px;
        margin: auto;
        object-fit: contain;
    }

    .img-box-rank- img {
        width: 66px;
        height: 36px;
        margin: auto;
    }

    input.custom-file-input {
        display: none;
    }

        input.custom-file-input + label {
            cursor: pointer;
            background-color: #F5F5F5;
            margin-bottom: 0rem;
            background-size: 100% 100%;
            width: 89px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            text-align: center;
            font-size: 12px;
            font-weight: 700;
        }

        input.custom-file-input ~ .file-name {
            padding: 0 1rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    .upload-img {
        user-select: none;
        width: 240px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid #E0E0E0;
        background: #FFF;
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
    }

    span#file-name {
        display: flex;
        justify-content: center;
        color: #C4C4C4;
        font-size: 12px;
        font-weight: 400;
    }

    .t-box-rank h4 {
        color: #000;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
    }

    .t-box-rank h5 {
        font-weight: 700;
    }

    .img-box-rank {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        border: 1px dashed #E0E0E0;
        background: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-box-header {
        border-radius: 8px;
        border: 1px dashed #E0E0E0;
        background: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .upload-img.custom-width {
        display: flex !important;
    }

    .img-box-rank- {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        border: 1px dashed rgb(224, 224, 224);
        background: rgb(255, 255, 255);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-box-rank-bottom img {
        width: 182px;
        height: 264px;
    }

    .set-rank-background {
        width: 213px;
    }

    .set-rank-bottom .upload-img {
        width: 212px;
    }

    .img-box-rank-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 211px;
        height: 288px;
        border-radius: 8px;
        border: 1px dashed #E0E0E0;
        background: #FFF;
    }

    .set-group-background {
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1.5rem;
    }

    .set-rank-bottom {
        margin-top: 2.5rem;
    }

    .save-rank-background {
        display: flex;
        justify-content: end;
        margin-top: 2rem;
    }

    .ranking-display-text {
        user-select: none;
        width: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
        align-content: center;
        padding: 5px 5px 5px 0;
    }

        .ranking-display-text span {
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
        }

    .box-r {
        cursor: pointer;
        user-select: none;
        width: 73px;
        height: 38px;
        background: #FBFBFB;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 700;
        margin: auto;
    }

    .ranking-display-section {
        user-select: none;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        margin-top: 0.5rem;
    }

    .ranking-display {
        margin-top: 0.5rem;
    }

        .ranking-display h2, .ranking-display h3, .ranking-display h4 {
            font-family: Kanit !important;
            line-height: 1 !important
        }

    .box-r.active {
        border: 1px solid #50A198;
        background: #50A198;
        color: #FFF;
    }

    .display-background1 {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        width: 220px;
        height: 320px;
        text-align: center;
        margin: auto;
        padding: 2rem 0rem;
    }

        .display-background1 img {
            width: 80px;
            height: 60px;
            margin: auto;
            object-fit: contain;
        }

        .display-background1 h2 {
            color: #FFF;
            font-size: 20px;
            font-weight: 600;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .display-background1 h3 {
            color: #FFF;
            font-size: 16px;
            margin-bottom: 0px;
        }

        .display-background1 h4 {
            color: #FFF;
            font-size: 16px;
            margin-bottom: 0px;
            margin-top: 1rem;
        }

        .display-background1 span {
            color: var(--fccb-00, #FCCB00);
            font-size: 20px;
        }

    .ranking-display-group1,
    .ranking-display-group2,
    .ranking-display-group3 {
        margin-top: 1rem;
    }

    .noresult-box {
        height: 330px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
    }

    .text-title {
        display: flex;
        column-gap: 0.5rem;
        padding: 1rem 0rem;
        align-items: center;
    }

        .text-title h3 {
            text-align: center;
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            line-height: normal;
        }

        .text-title h4 {
            margin: 0;
            color: #B0B0B0;
            font-size: 10px;
            font-weight: 700;
            line-height: 16px;
        }


    .top-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .Create-account {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #0182FC;
        color: #0182FC;
    }

    .top-title-dummy-user {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .noresult-box span {
        color: #50A198;
        font-family: Noto Sans Thai;
        font-size: 12px;
        line-height: 21px;
        text-decoration-line: underline;
    }

    .top-dummy-ss1 {
        padding: 0rem 1rem;
        background: #fff;
    }

    .top-dummy-ss2 {
        padding: 0rem 1rem;
    }

    button.t-btn-sty {
        border-radius: 8px;
        background: #ECECEC;
        width: 210px;
        height: 40px;
        font-size: 16px;
        font-weight: 700;
        border-color: #ff000000;
        font-family: 'Sukhumvit' !important;
    }

    button.f-btn-sty {
        width: 210px;
        height: 40px;
        border-radius: 8px;
        background: #6795EA;
        font-size: 16px;
        font-weight: 700;
        border-color: #ff000000;
        font-family: 'Sukhumvit' !important;
    }

    .bg-moda-use {
        width: 500px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    }

    .modal-text-title {
        display: grid;
        justify-content: center;
    }

        .modal-text-title h5.modal-title {
            color: #000;
            text-align: center;
            font-size: 24px;
            font-weight: 700;
        }

    .modal-text-titl h6 {
        color: #B0B0B0 !important;
        text-align: center;
        font-size: 10px;
        line-height: 18px;
    }

    .btn-addtab {
        display: flex;
        justify-content: center;
        width: 413px;
        height: 40px;
        margin: 20px auto auto;
        border-radius: 8px;
        background: rgba(61, 36, 166, 0.10);
        align-items: center;
        column-gap: 0.5rem;
    }

    .box-addtab {
        flex: 1 0;
    }

    .box-addtab-wrapper > .dummy-nickname {
        height: 38px;
    }

    .img-num-addtab {
        color: #FFF;
        font-size: 14px;
        font-weight: 700;
        width: 38px;
        height: 38px;
        background-color: #693bdf;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
    }

    .img-num-addtab-placeholder {
        width: 38px;
        flex: 0 0 38px;
    }

    .box-addtab-label {
        display: flex;
        align-items: center;
        padding: 0 2.5rem;
        column-gap: 0.5rem;
        margin-bottom: 5px;
    }

    .box-addtab-wrapper {
        display: flex;
        padding: 0 2.5rem;
        column-gap: 10px;
    }

        .box-addtab-wrapper + .box-addtab-wrapper {
            margin-top: 10px;
        }

    .text-title-modal {
        display: flex;
        align-items: end;
        column-gap: 0.5rem;
        padding: 1rem 2.5rem;
        text-align: center;
        justify-content: center;
    }

        .text-title-modal h5 {
            font-size: 12px;
            font-weight: 700;
        }

        .text-title-modal h6 {
            font-size: 12px;
            font-weight: 400;
            color: #b0b0b0;
        }

    .btn-addtab {
        cursor: pointer;
        user-select: none;
    }

        .btn-addtab span {
            color: #3D24A6;
            font-family: 'Sukhumvit' !important;
            font-size: 14px;
            font-weight: 700;
        }

    .modal-select-icon-number {
        --vz-modal-width: 570px;
    }

    .modal-select-icon-wrapper {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
    }

    .modal-select-icon-selection {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 10px;
        border: 1px solid #E0E0E0;
        border-radius: 10px;
        transition: .25s ease;
    }

        .modal-select-icon-selection:hover,
        .modal-select-icon-selection.selected {
            border-color: #50A198;
        }

    .modal-select-icon-label {
        font-weight: 500;
        font-size: 12px;
        line-height: 1rem;
        margin-top: 5px;
        text-align: center;
    }

    .modal-select-icon-selection img {
        width: 60px;
        height: 45px;
        object-fit: contain;
    }

    .clone-icon-preview {
        user-select: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        padding: 26px 36px 24px;
        border: 1px solid #E0E0E0;
        background-color: #F7F7F7;
    }

        .clone-icon-preview > .preview-background {
            padding-left: 0;
            list-style: none;
            display: flex;
            gap: 33px;
            margin-bottom: 20px;
        }

            .clone-icon-preview > .preview-background img {
                width: 182px;
                height: 264px;
            }

            .clone-icon-preview > .preview-background .preview-icon-text {
                text-align: center;
                margin-top: 10px;
            }

    .preview-icon-high {
        padding-left: 0;
        list-style: none;
        display: flex;
        gap: 50px;
        margin-bottom: 20px;
    }

    .preview-icon-low {
        padding-left: 0;
        list-style: none;
        display: flex;
        gap: 20px;
        margin-bottom: 12px;
    }

    .preview-icon-high .preview-icon-img {
        width: 80px;
        height: 60px;
        object-fit: contain;
    }

    .preview-icon-high .preview-icon-text {
        text-align: center;
        margin-top: 10px;
    }

    .preview-icon-low .preview-icon-img {
        width: 66px;
        height: 36px;
        object-fit: contain;
    }

    .preview-icon-high .preview-icon-text,
    .preview-icon-low + .preview-icon-text {
        font-size: 12px;
        font-weight: 500;
        line-height: 1rem;
    }

    .clone-icon-preview > .preview-header {
        padding-left: 0;
        list-style: none;
        display: flex;
        gap: 33px;
        margin-bottom: 20px;
    }

        .clone-icon-preview > .preview-header img {
            width: 970px;
            height: 194px;
        }

    .clone-icon-selection-wrapper {
        list-style: none;
        padding-left: 0;
        margin-bottom: 30px;
    }

        .clone-icon-selection-wrapper.custom-invalid > .clone-icon-item {
            border-color: #DC3545;
        }

    .clone-icon-item {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        height: 38px;
        font-size: 12px;
        font-weight: 400;
        border: 1px solid #E0E0E0;
        border-radius: 8px;
        padding-left: 1rem;
        padding-right: 1rem;
        transition: all .25s ease;
    }

        .clone-icon-item + .clone-icon-item {
            margin-top: 10px;
        }

        .clone-icon-item.selected,
        .clone-icon-item:hover {
            border: 1px solid #50A198;
        }

    .preview-background-rank {
        user-select: none;
    }

    .bnt-edit {
        cursor: pointer;
    }

    .bnt-del {
        cursor: pointer;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #FFE4E4;
    }

    .bnt-warning {
        cursor: pointer;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #FFEED6;
    }

    .img-del-cen {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    .dummy-user-account-table {
        padding-bottom: 1rem;
    }

    .bg-time-left {
        min-width: 181px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 8px 0px 0px 8px;
    }

    .bg-time-right {
        width: 181px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 0px 8px 8px 0px;
    }

    .text-title- h3 {
        text-align: start;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: normal;
    }

    .text-title- h4 {
        text-align: start;
        margin: 0;
        color: #B0B0B0;
        font-size: 10px;
    }

    .text-title- {
        display: grid;
        padding: 1rem 0rem;
    }

    .ranking-time-Week {
        display: flex;
    }

        .ranking-time-Week .bg-time-left .choices__inner {
            border-radius: 8px 0px 0px 8px !important;
        }

        .ranking-time-Week .bg-time-right .choices__inner {
            border-radius: 0 8px 8px 0 !important;
        }

    .top-bnt-rating {
        display: flex;
        column-gap: 0.5rem;
        padding-bottom: 0.3rem;
    }

    .t-box-ranking {
        cursor: pointer;
        display: flex;
        width: 225px;
        padding: 9px 18px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
    }

    .box-weekly-monthly-ranking.active {
        background: #FFF;
        color: #000;
        font-size: 14px;
        font-weight: 700;
    }

    .box-weekly-monthly-ranking {
        border-radius: 4px;
        background: #ffffff47;
        color: #0000004d;
        font-size: 13px;
        font-weight: 700;
    }

    .box-dow-ser {
        display: flex;
        justify-content: space-between;
    }

    .box-Search-t {
        display: flex;
        column-gap: 1rem;
    }

    .select-group- {
        width: 180px;
        height: 40px;
        flex-shrink: 0;
    }

    .time-day-t span {
        text-align: start;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: normal;
        color: var(--vz-heading-color);
    }

    input.bg-time- {
        background-color: #b9090900 !important;
    }

        input.bg-time-.flatpickr-input.active {
            border-radius: 0px 8px 8px 0px;
            border: 0px solid #E0E0E0;
            background: #FFF;
            text-align: center;
        }

        input.bg-time-.form-control.input.active {
            border-radius: 8px 0px 0px 8px;
            border: 0px solid #E0E0E0;
            background: #FFF;
            text-align: center;
        }

        input.bg-time-.flatpickr-input.flatpickr-mobile {
            border-radius: 0px 8px 8px 0px;
            border: 0px solid #E0E0E0;
            background: #FFF;
            width: 181px;
            height: 38px;
            text-align: center;
        }

        input.bg-time-.form-control.input {
            border-radius: 8px 0px 0px 8px;
            border: 0px solid #E0E0E0;
            background: #FFF;
            width: 181px;
            height: 38px;
            text-align: center;
        }

        input.bg-time-.flatpickr-input {
            border-radius: 0px 8px 8px 0px;
            border: 0px solid #E0E0E0;
            background: #FFF;
            text-align: center;
        }

    .group-monthly-weekly- {
        display: flex;
        justify-content: space-between;
    }

    .box-monthly-weekly {
        padding: 1rem 2.5rem;
    }

    .group-monthly-weekly {
        border-radius: 6px;
        background: #F7F7F7;
        height: 78px;
        display: grid;
        align-items: center;
        padding: 0 1rem;
    }

    .bg-moda-use- {
        width: 430px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    }

    input.amount-num {
        width: 119px;
    }

    .box-addtab-wrapper- {
        display: grid;
        padding: 0 2.5rem;
        column-gap: 10px;
        grid-template-columns: 5fr 1fr;
    }

    button.t-btn-sty- {
        border-radius: 8px;
        background: #ECECEC;
        font-size: 16px;
        font-weight: 700;
        border-color: #ff000000;
        width: 168.431px;
        height: 40px;
        font-family: 'Sukhumvit' !important;
    }

    button.f-btn-sty- {
        border-radius: 8px;
        background: #6795EA;
        font-size: 16px;
        font-weight: 700;
        border-color: #ff000000;
        width: 168.431px;
        height: 40px;
        font-family: 'Sukhumvit' !important;
    }

    .text-title span {
        text-align: start;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: normal;
        color: var(--vz-heading-color);
    }

    .form-select-- {
        display: block;
        width: 100%;
        padding: 0.5rem 0.5rem;
        font-size: .8125rem;
        font-weight: 400;
        border: 0px solid var(--vz-input-border);
        appearance: none;
        text-align: center;
    }

    .bg-moda-edit {
        width: 314px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    }

    .box-addtab-wrapper-- {
        display: grid;
        padding: 1.5rem;
        grid-gap: 1rem;
    }

    button.f-btn-sty- {
        height: 40px;
        border-radius: 8px;
        background: #6795EA;
        font-size: 16px;
        font-weight: 700;
        border-color: #ff000000;
        width: 123.614px;
        font-family: 'Sukhumvit' !important;
    }

    button.t-btn-sty- {
        border-radius: 8px;
        background: #ECECEC;
        height: 40px;
        font-size: 16px;
        font-weight: 700;
        border-color: #ff000000;
        width: 123.614px;
        font-family: 'Sukhumvit' !important;
    }

    input#Range-rank {
        color: #50A198;
        background-color: transparent;
        border-color: #676666;
    }

    input#single-rank {
        color: #50A198;
        background-color: transparent;
        border-color: #676666;
    }

    .single-Range-rank {
        display: flex;
        justify-content: space-around;
    }

    .money-none-- {
        width: 80px;
        height: 38px;
        border-radius: 0px 8px 8px 0px;
        border: 1px solid #E0E0E0;
        background: #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #E0E0E0;
        font-size: 12px;
        line-height: normal;
    }

    .money-none- {
        width: 80px;
        height: 38px;
        border-radius: 0px 8px 8px 0px;
        border: 1px solid #E0E0E0;
        background: #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        line-height: normal;
        color: #000;
    }

    .bg-none-- {
        width: 181px;
        height: 38px;
        border-radius: 8px 0px 0px 8px;
        border: 1px solid #E0E0E0;
        background: #F5F5F5;
    }

    .none-group-bg-- {
        display: flex;
    }

    input.bg-none- {
        border-radius: 8px 0px 0px 8px;
        border: 1px solid #E0E0E0;
        width: 181px;
    }

    input.form-g-month {
        border: 0px solid var(--vz-input-border);
    }

    .g-month-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 260px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid #E0E0E0;
        background: #FFF;
    }

    .g-month.custom-invalid > .g-month-wrapper {
        border-color: #dc3545 !important;
    }

    .g-month.custom-valid > .g-month-wrapper {
        border-color: #28a745 !important;
    }

    .box-dow-ser- {
        display: flex;
        column-gap: 1rem;
    }

    .btn-upload-customer {
        display: flex;
        border-radius: 8px;
        border: 1px solid #50A198;
        background: #50A198;
        width: 167px;
        height: 38px;
        justify-content: center;
        align-items: center;
        column-gap: 0.5rem;
        cursor: pointer;
        font-family: var(--vz-btn-font-family)
    }

        .btn-upload-customer span {
            color: #FFF;
        }

    .box-uploadCustomer {
        --vz-modal-width: 850px;
    }

    .group-uploadCustomer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
    }

    h5.modal-title {
        display: flex;
        justify-content: center;
        padding: 1rem;
    }

    .modal-header-uploadCustomer h5.modal-title {
        color: #000;
        text-align: center;
        font-family: Noto Sans Thai;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .modal-body-center {
        display: flex;
        border-radius: 8px;
        border: 1px solid #6795EA;
        width: 293px;
        height: 40px;
        align-items: center;
        justify-content: center;
        column-gap: 0.5rem;
    }

        .modal-body-center span {
            color: #6795EA;
            font-size: 16px;
        }

    .modal-body-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 380px;
        height: 205px;
        border-radius: 21px;
        border: 1px dashed #C9C9C9;
        background: #FFF;
        margin-top: 1rem;
    }

    .img-load-ex {
        display: flex;
        justify-content: center;
        column-gap: 0.5rem;
    }

    button.wit-box {
        width: 170px;
        height: 40px;
        border-radius: 8px;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
    }

    .modal-body-center-loadding {
        display: flex;
        justify-content: center;
        padding: 10rem 0rem;
    }

        .modal-body-center-loadding span {
            color: #D0D0D0;
            font-family: Noto Sans Thai;
            font-size: 14px;
        }

    .modal-body-top h4 {
        color: #000;
        font-family: Noto Sans Thai;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .modal-body-top h6 {
        color: #000;
        font-family: Noto Sans Thai;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }



    .lds-spinner {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

        .lds-spinner div {
            transform-origin: 40px 30px;
            animation: lds-spinner 1.2s linear infinite;
        }

            .lds-spinner div:after {
                content: " ";
                display: block;
                position: absolute;
                top: 3px;
                left: 37px;
                width: 6px;
                height: 18px;
                border-radius: 20%;
                background: #2D50A7;
            }

            .lds-spinner div:nth-child(1) {
                transform: rotate(0deg);
                animation-delay: -1.1s;
            }

            .lds-spinner div:nth-child(2) {
                transform: rotate(44deg);
                animation-delay: -1s;
            }

            .lds-spinner div:nth-child(3) {
                transform: rotate(93deg);
                animation-delay: -0.9s;
            }

            .lds-spinner div:nth-child(4) {
                transform: rotate(133deg);
                animation-delay: -0.8s;
            }

            .lds-spinner div:nth-child(5) {
                transform: rotate(179deg);
                animation-delay: -0.7s;
            }

            .lds-spinner div:nth-child(6) {
                transform: rotate(226deg);
                animation-delay: -0.6s;
            }

            .lds-spinner div:nth-child(7) {
                transform: rotate(270deg);
                animation-delay: -0.5s;
            }

            .lds-spinner div:nth-child(8) {
                transform: rotate(322deg);
                animation-delay: -0.4s;
            }

    @keyframes lds-spinner {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    .g-box-text {
        display: flex;
        column-gap: 1rem;
    }

    .t-active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    button.bnt-confirm-none {
        background-color: #F5F5F5;
        border: 0rem;
        color: #A5A5A5;
        opacity: 0.4;
    }

    .modal-body-top ol {
        padding-left: 1rem;
    }

    button.Preview-Success {
        display: flex;
        column-gap: 1rem;
        width: 210px;
        height: 40px;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #6795EA;
        background: #FFF;
        align-items: center;
        color: #6795EA;
        font-size: 16px;
        font-weight: 700;
    }

    button.btn-reset-point {
        display: flex;
        column-gap: 1rem;
        width: 210px;
        height: 40px;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #dc3545;
        background: #FFF;
        align-items: center;
        color: #dc3545;
        font-size: 16px;
        font-weight: 700;
    }

    button.confirm-exit {
        width: 210px;
        height: 40px;
        border-radius: 8px;
        background: #6795EA;
        border: 1rem;
        color: #FFF;
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
    }

    .u-box-Notify {
        --vz-modal-width: 850px;
    }

    .Error-g {
        width: 542px;
        border-radius: 6px;
        background: #FFF1F1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .Error-g span {
            font-size: 12px;
            line-height: 20px;
        }

    .box-gro {
        --vz-modal-width: 1176px;
    }

    .sun-editor {
        width: 100% !important;
    }

    .wrapper {
        display: inline-flex;
        list-style: none;
    }

        .wrapper .icon {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
        }

        .wrapper .tooltip {
            width: 220px;
            position: absolute;
            top: 0;
            font-size: 14px;
            background: #ffffff;
            color: #ffffff;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

            .wrapper .tooltip::before {
                position: absolute;
                content: "";
                height: 8px;
                width: 8px;
                background: #ffffff;
                bottom: -3px;
                left: 50%;
                transform: translate(-50%) rotate(45deg);
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            .wrapper .tooltip.top::before {
                position: absolute;
                content: "";
                height: 8px;
                width: 8px;
                background: #ffffff;
                top: -3px;
                left: 50%;
                transform: translate(-50%) rotate(45deg);
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

        .wrapper .icon:hover .tooltip {
            top: -80px;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .wrapper .icon.top:hover .tooltip {
            top: 30px;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .wrapper .icon:hover span,
        .wrapper .icon:hover .tooltip {
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
        }

        .wrapper .add-point-manual:hover .tooltip,
        .wrapper .add-point-manual:hover .tooltip::before {
            background: #0B1650;
            color: #ffffff;
        }

    .lotto-bet-point:hover {
        cursor: pointer;
    }

    .clear-date-time:hover {
        cursor: pointer;
        color: #50A198;
    }

    .box-bet-lotto {
        padding: 1rem 2.5rem;
    }

        .box-bet-lotto .group-bet-lotto {
            border-radius: 6px;
            background: #f7f7f7;
            align-items: center;
            padding: 1rem 1rem;
            align-content: stretch;
            justify-content: space-around;
        }

    .resolve-bank-statement-table {
        max-height: 690px;
        overflow: auto;
    }

    .resolve-deposit-manual-save {
        z-index: 1060;
    }

    .create-rank-setting {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #50A198;
        background: #50A198;
        color: #fff;
        font-family: 'Noto Sans Thai' !important
    }

    .create-rank-setting-disabled {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #F2F2F2;
        background: #F2F2F2;
        color: #CECECE;
        font-family: 'Noto Sans Thai' !important
    }

    .edit-history-rank {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #FF9500;
        background: #fff;
        color: #FF9500;
        font-family: 'Noto Sans Thai' !important
    }

    .edit-history-rank-disabled {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #CECECE;
        background: #fff;
        color: #CECECE;
    }

    .click-send-reward {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        border: 1px solid #0182FC;
        background: #fff;
        color: #0182FC;
    }

    .click-send-reward-disabled {
        cursor: pointer;
        width: 106px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        border: 1px solid #CCCCCC;
        background: #F2F2F2;
        color: #CCCCCC;
    }

    .accordion-button.custom-accordion:not(.collapsed) {
        color: #000;
        background-color: #fff;
        -webkit-box-shadow: inset 0 calc(-1 * var(--vz-accordion-border-width)) 0 var(--vz-accordion-border-color);
        box-shadow: inset 0 calc(-1 * var(--vz-accordion-border-width)) 0 var(--vz-accordion-border-color);
    }

    .bg-disabled {
        background-color: #F5F5F5 !important;
        border: 1px solid #E0E0E0 !important;
        color: #E0E0E0 !important;
    }


    .hall-of-fame-wrapper {
        display: inline-flex;
        list-style: none;
    }

        .hall-of-fame-wrapper .icon {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
        }

        .hall-of-fame-wrapper .tooltip {
            width: 220px;
            position: absolute;
            top: 0;
            font-size: 14px;
            background: #ffffff;
            color: #ffffff;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

            .hall-of-fame-wrapper .tooltip::before {
                position: absolute;
                content: "";
                height: 8px;
                width: 8px;
                background: #ffffff;
                bottom: -3px;
                left: 50%;
                transform: translate(-50%) rotate(45deg);
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            .hall-of-fame-wrapper .tooltip.top::before {
                position: absolute;
                content: "";
                height: 8px;
                width: 8px;
                background: #ffffff;
                top: -3px;
                left: 50%;
                transform: translate(-50%) rotate(45deg);
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

        .hall-of-fame-wrapper .icon:hover .tooltip {
            top: -70px;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .hall-of-fame-wrapper .icon.top:hover .tooltip {
            top: 30px;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .hall-of-fame-wrapper .icon:hover span,
        .hall-of-fame-wrapper .icon:hover .tooltip {
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
        }

        .hall-of-fame-wrapper .add-point-manual:hover .tooltip,
        .hall-of-fame-wrapper .add-point-manual:hover .tooltip::before {
            background: #0B1650;
            color: #ffffff;
        }

    .container-table-fixed {
        height: 60vh;
        min-height: 560px;
        overflow: auto;
    }

    .container-table-fixed-max-width {
        height: max-content;
        max-height: 60vh;
        overflow: auto;
    }

    .header-table-fixed {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .footer-table-fixed {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background-color: var(--vz-card-bg);
    }

    .header-table-fixed-dropdown {
        z-index: 2;
    }

    .header-status {
        background-color: #F0F0F7;
        -webkit-box-shadow: var(--vz-box-shadow);
        box-shadow: var(--vz-box-shadow);
    }

    .smsCredit, .agentCredit {
        color: #fff;
    }

    .divExpiryDateWrapper {
        font-size: 14px;
        color: #DBDBDB;
        font-weight: 500;
    }

    .div-icon-expiry-date-wrapper {
        display: none
    }

.btn-match-statment {
    width: 20px !important;
    height: 20px !important;
    padding: 0;
    background: rgb(4, 77, 188);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}

    @media only screen and (max-width: 676px) {
        .width-modal-add-slip-bank-custom {
            width: 90%;
            max-width: 90%;
            margin-right: auto;
            margin-left: auto;
        }
    }

    @media only screen and (max-width: 576px) {
        .modal-show-slip-bank-custom {
            margin-right: auto !important;
            margin-left: auto !important;
        }

        .modal-show-add-manual-custom {
            margin-right: auto !important;
            margin-left: auto !important;
        }

        .showSlipPreview1 {
            width: 100%;
        }

        .showSlipPreview2 {
            width: 100%;
        }

        .box-click-view-slip, .box-click-view-slip-add-manual {
            width: 100%;
        }

        .session-upload-slip-bank-custom-1 {
            margin-right: 8px;
        }

        .session-card-dash-board-sub {
            display: unset;
        }

            .session-card-dash-board-sub .card-dash-board-sub {
                width: 100%;
                margin-bottom: 14px;
            }

    }

    @media only screen and (max-width: 500px) {
        .app-search {
            display: none !important;
        }
    }

@media only screen and (max-width: 476px) {
    .sms-preview .preview-message {
        left: 20px;
    }
}


.boxRank {
    height: 38px;
    width: 38px;
    font-size: 14px;
    font-family: 'Sukhumvit' !important;
}

.box-game-category-menu {
    display: flex;
    justify-content:space-between;
    align-items: center;
    background: unset;
    position: absolute;
    width: 100%;
    padding: 6px 24px;
    left: 0;
    cursor: pointer;
}

    .box-game-category-menu:hover,
    .box-game-category-menu.active {
        background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    }

.img-game-category-menu {
    background: unset;
    padding: 6px;
    border-radius: 20px;
}

    .box-game-category-menu.active .img-game-category-menu {
        background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
    }

.box-game-category-menu::after,
.box-game-category-menu::before {
    content: ' ';
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
    transition: opacity .2s ease;
}

.box-game-category-menu::after {
    right: 0;
    border-radius: 10px 0 0 10px;
}

.box-game-category-menu::before {
    left: 0;
    border-radius: 0 10px 10px 0;
}

.box-game-category-menu:hover::before,
.box-game-category-menu:hover::after,
.box-game-category-menu.active::before,
.box-game-category-menu.active::after {
    opacity: 1;
}

.badge-new {
    width: 65px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #C93838;
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px 4px 8px;
}

.box-new-game-list {
    background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 8px 18px 8px 8px !important;
    cursor: pointer;
}

    .box-new-game-list:hover {
        background: #EBEFFE;
        border: 2px solid #2799A5;
    }

    .box-new-game-list.active {
        background: linear-gradient(90deg, #B0C0F9 0%, #EBEFFE 51.28%, #50A198 100%), linear-gradient(0deg, #50A198 , #50A198 );
        border: 2px solid #50A198;
    }

.box-game-list {
    background: transparent;
    border-bottom: 1px solid #C8C8C8;
    cursor: pointer;
}

    .box-game-list:hover {
        background: #F3F1FF;
    }

.box-choose-game-list {
    background: #fff;
    color: #474747;
    border-radius: 8px;
    border: 1px solid #C8C8C8;
    padding: 4px 4px 0px 4px !important;
    cursor: pointer;
}

    .box-choose-game-list:hover {
        background: #FFFFFF;
        color: #474747;
        border: 2px solid #50A198;
    }

    .box-choose-game-list:active,
    .box-choose-game-list.active {
        background: #1f7e7b;
        color: #FFFFFF;
        border: 2px solid #50A198;
    }

.badge-noti {
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #C93838;
    color: #fff;
    border-radius: 20px;
}

.btn-box-add {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #31bfce;
    cursor: pointer;
    box-shadow: 2px 2px 2px 0px #0000001A;
    border: 1px solid transparent;
}

    .btn-box-add:hover {
        color: #D6F2F5;
        background: #2799A5;
    }

    .btn-box-add:active {
        color: #D6F2F5;
        background: #1D737C;
    }

    .btn-box-add.active {
        color: #C8C8C8;
        background: #F6F6F6;
        /*pointer-events: none;*/
    }

.box-image-mock-left {
    width: 64px;
    height: 64px;
    background-size: cover;
    border-radius: 6px;
}

.box-image-mock-right {
    width: 48px;
    height: 48px;
    background-size: cover;
    border-radius: 6px;
}

.box-image-mock-list {
    width: 52px;
    height: 32px;
    background-size: cover;
    border-radius: 4px;
}

.box-image-mock-detail-list {
    width: 100%;
    min-height: 65px;
    background-size: cover;
    border-radius: 4px;
}

.system-btn.btn-add-cate-game {
    color: #50A198;
    background-color: #F3F1FF;
    border: 2px solid unset;
}

    .system-btn.btn-add-cate-game:hover {
        color: #fff;
        border: 2px solid #50A198;
    }

    .system-btn.btn-add-cate-game:active {
        color: #fff;
        background-color: #50A198;
        border: 2px solid #50A198;
    }

.img-upload-game-setting {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    background-clip: padding-box;
    border: solid 4px transparent;
    border-radius: 26px;
}

    .img-upload-game-setting:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -4px;
        border-radius: inherit;
        background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
    }

.img-upload-game-setting.in-table {
    border-radius: 16px;
}

.box-img-upload-game-setting {
    z-index: 1;
    border-radius: 22px;
    background: #fff;
    padding: 8px;
    width: 100%;
}

    .box-img-upload-game-setting.in-table {
        border-radius: 12px;
    }

.box-img1 {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-clip: padding-box;
    border: solid 4px transparent;
    border-radius: 26px;
    position: relative;
    z-index: 0;
}

    .box-img1:before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 4px;
        border-radius: inherit;
        background: linear-gradient(180deg, #50A198 0%, #FEDB6B 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.box-img2 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    border-radius: 22px;
    padding: 8px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    height: 100%;
}
    .box-img2.in-table {
        border-radius: 16px;
    }

.box-img3 {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
    .box-img3.in-table {
        border-radius: 12px;
    }

.box-icon-upload-img {
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 20px;
    background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -15px;
    right: -15px;
}

/* Scroll bar Custom */
/* Width */
.box-left-new-game-scroll::-webkit-scrollbar,
.box-right-new-game-scroll::-webkit-scrollbar {
    width: 5px;
    position: absolute;
    left: -20px;
}

/* Track */
.box-left-new-game-scroll::-webkit-scrollbar-track {
    background: #1e1648;
    border-radius: 2.5px;
}

.box-right-new-game-scroll::-webkit-scrollbar-track {
    background: #e9e9e9;
    border-radius: 2.5px;
}

/* Handle */
.box-left-new-game-scroll::-webkit-scrollbar-thumb {
    background: #6f60c2;
    border-radius: 2.5px;
}

    /* Handle on hover */
    .box-left-new-game-scroll::-webkit-scrollbar-thumb:hover {
        background: #8f7bff;
    }

.box-right-new-game-scroll::-webkit-scrollbar-thumb {
    background: #c9c3e8;
    border-radius: 2.5px;
}

    /* Handle on hover */
    .box-right-new-game-scroll::-webkit-scrollbar-thumb:hover {
        background: #8f7bff;
    }

.box-header-custom-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -24px;
    background: linear-gradient(89.92deg, #F4F0FF 0.08%, #E8F1FF 51.28%, #DFFCFF 99.93%);
    padding: 16px;
    height: 56px;
    border-radius: 20px 20px 0px 0px;
}

.box-header-custom-card.tab-header {
    width: 344px;
}

.system-btn.btn-reset-default {
    --btn-color: #fff;
    --btn-bg-color: #ff9500;
    --btn-bg-hover-color: #ffaa33;
    --btn-bg-passing-color: #995900;
}

.pointer-events-none {
    pointer-events: none;
}

.system-btn.btn-delete {
    --btn-color: #fff;
    --btn-bg-color: #F64646;
    --btn-bg-hover-color: #F86B6B;
    --btn-bg-passing-color: #9B2A2A;
}

.main-dash-board.dark-mode {
    background: rgba(75, 56, 179, 1);
}

.main-dash-board.light-mode {
    background: #ffffff;
}

.dash-board-height-responsive {
    max-height: 368px;
    height: 100%;
}

.card-dash-board-height-responsive {
    max-height: 144px;
    height: 100%;
}

@media only screen and (max-width: 992px) {
    .dash-board-height-responsive {
        max-height: 100%;
    }

    .card-dash-board-height-responsive {
        max-height: 100%;
    }
}

.card-dash-board-main {
    padding: 24px 24px;
    color: #ffffff;
}

.card-dash-board-sub {
    /*position: relative;
    z-index: 0;*/
    border: 2px solid rgb(84, 66, 183);
    height: 160px !important;
    background: linear-gradient(180deg, #50A198  0%, #250658 100%);
    border-radius: 16px;
    box-shadow: 8px 8px 10px 0px rgba(15, 7, 61, 0.75),-4px -4px 10px 0px rgba(101, 90, 230, 1);
    padding: 8px;
}

    .card-dash-board-sub::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(0deg, #5442B7, #5442B7);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.card-dash-board-sub-in-detail {
    position: relative;
    z-index: 0;
    height: 56px;
    background: linear-gradient(180deg, #50A198  0%, #250658 100%);
    border-radius: 8px;
    box-shadow: 3px 3px 3px 2px rgba(38, 28, 94, 0.7) inset,-3px -3px 4px 0px rgba(101, 90, 230, 1) inset;
}

    .card-dash-board-sub-in-detail::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(0deg, #5442B7, #5442B7);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.card-dash-board-sub-new-bg {
    height: 144px !important;
    background-image: url('https://p88.blob.core.windows.net/images/default/dash-board-title-v3.webp') !important;
    background-size: 100% 100%;
}

.box-img-graph-sum {
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 992px) {
    .box-img-graph-sum {
        max-height: 86px;
        max-width: 508px;
    }
}

.box-img-item-sum {
    max-width: 80px;
    max-height: 38px;
    width: 100%;
    height: auto;
}

.btn-icon-dash-board.dark-mode {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(267.76deg, #50A198  1.88%, #250658 96.75%);
    border: 1px solid #5442B7;
    box-shadow: 8px 8px 10px 0px #0F073DBF, -4px -4px 10px 0px #655AE6;
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
}

.card-dash-board-sub-height-responsive {
    max-height: 176px;
    height: 100%;
}

@media only screen and (max-width: 992px) {
    .card-dash-board-sub-height-responsive {
        max-height: 100%;
    }
}

.box-action-account-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
}

.body-card-dash-board.card-dash-board-padding-custom {
    padding: 0px 8px;
}

.box-header-card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
}
.box-header-card-title {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    justify-content: center;
}

.box-header-card-img {
    height: 20px;
    width: 112px;
    object-fit: contain;
}

@media only screen and (min-width: 992px) and (max-width: 1219px) {
    .box-action-account-info {
        padding-top: 24px;
    }
}

.card-dash-board-sub-account-info {
    width: 100%;
    border: 1px solid #FFFFFF66;
    border-radius: 8px;
    box-shadow: 3px 3px 3px 0px #AEB8C080 inset, -3px -3px 4px 0px #FFFFFF inset;
}

    .card-dash-board-sub-account-info.deposit {
        background: #DBF4E7;
    }

    .card-dash-board-sub-account-info.withdraw {
        background: #FFE0E0;
    }

    .card-dash-board-sub-account-info.deposit-withdraw {
        background: #D6EBF5;
    }

    .card-dash-board-sub-account-info.affiliate {
        background: #FFDEAC;
    }

    .card-dash-board-sub-account-info.win-lose {
        background: #EFE6FC;
    }

    .card-dash-board-sub-account-info.bonus-credit {
        background: #FFD8F4;
    }

.box-withdraw-sub-detail {
    border: 1px solid #FFFFFF66;
    border-radius: 8px;
    box-shadow: 4px 4px 6px 0px #00000033, -4px -4px 6px 1px #FFFFFFE5;
}

    .box-withdraw-sub-detail.credit {
        background: linear-gradient(180deg, rgba(255, 207, 83, 0.4) 0%, rgba(213, 0, 152, 0.4) 100%);
        padding: 8px;
    }
    .box-withdraw-sub-detail.cash {
        background: linear-gradient(180deg, rgba(87, 202, 238, 0.4) 0%, rgba(118, 18, 246, 0.4) 100%);
        padding: 8px;
    }

.color-success {
    color: #11CB67;
}

.color-danger {
    color: #E10000;
}

.custom-col-remark {
    display: -webkit-box;
    width: 250px;
    white-space:normal;
    word-break:break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-text-box-withdraw{
    height:288px;
}

.upload-slip-withdraw-box1 {
    cursor: pointer;
    user-select: none;
    color: #C8C8C8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 288px;
    border-radius: 1rem;
    z-index: 0;
}
    .upload-slip-withdraw-box1::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
.title-upload-slip {
    font-family: var(--vz-body-font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.029999999329447746px;
    text-align: left;
    color: #50A198;
}
.title-body-upload-slip {
    font-family: var(--vz-body-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.07999999821186066px;
    text-align: center;
    color: #C8C8C8;
}
.upload-slip-withdraw-box2 {
    content: ' ';
    position: absolute;
    color: #FFF;
    width: 38px;
    height: 38px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: -0.5rem;
    bottom: -0.5rem;
    border-radius: 50%;
    background-color: #EE9AE5;
    background-image: linear-gradient(180deg, #EE9AE5 0%, #5961F9 100%);
}
.upLoad-Slip-Image-Src {
    padding: 8px;
    width:100%;
    height:100%;
}

.system-swal-check-gen-device .swal-btns > * {
    flex: 0 0 50%;
}

.swal-btn-register-bankbot {
    display: flex;
    justify-content: space-between;
    gap: 22px;
}
    .swal-btn-register-bankbot *, .system-swal-check-gen-device .swal-btns * {
        width: 100%;
        align-content: center;
    }


.box-image-promotion {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    border-radius: 10px 0px 0px 0px;
}

.cover-promotion {
    width: 100%;
    max-height: 106px;
    object-fit: contain;
}

.box-detail-promotion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0px 0px 0px 6px;
}

@media screen and (max-width: 992px) {
    .box-detail-promotion {
        border-radius: 0px;
    }
}
    .box-detail-promotion.turn-on {
        background: #1f7e7b;
    }

    .box-detail-promotion.turn-off {
        background: #571616;
    }

    .box-detail-promotion.turn-expired {
        background: #474747;
    }

.box-status-promotion {
    border-radius: 6px;
    box-shadow: 2px 2px 4px 0px #0000004D;
    padding: 1px 6px 1px 6px;
    display: flex;
    align-items: center;
    width: 82px;
    height: 20px;
}

    .box-status-promotion.turn-on {
        background: #EAF9FA;
        color: #2799A5;
    }

    .box-status-promotion.turn-off {
        background: #FFF3F3;
        color: #F64646;
    }

    .box-status-promotion.turn-expired {
        background: #F6F6F6;
        color: #ADADAD;
    }

.box-detail-promotion-main {
    box-shadow: 4px 4px 6px 0px #00000033;
}

.box-detail-promotion-main-custom {
    box-shadow: 4px 4px 6px 0px #00000033;
}

@media screen and (max-width: 992px) {
    .box-detail-promotion-main {
        border-radius: 0px 0px 0px 10px;
    }
}

    .box-detail-promotion-main.turn-on {
        background: #FFFFFF;
    }

    .box-detail-promotion-main.turn-off {
        background: #FFF3F3;
    }

    .box-detail-promotion-main.turn-expired {
        background: #F6F6F6;
    }

.box-promotion-name {
    color: #FFFFFF;
    height: 24px;
    max-width: 400px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0px -16px;
}

    .box-promotion-name.turn-on {
        background: linear-gradient(90deg, #50A198  7.77%, rgba(119, 105, 198, 0.756038) 44.27%, rgba(255, 255, 255, 0) 100%);
    }

    .box-promotion-name.turn-off {
        background: linear-gradient(90deg, #B33838 7.77%, rgba(198, 105, 105, 0.756038) 44.27%, rgba(255, 255, 255, 0) 100%);
    }

    .box-promotion-name.turn-expired {
        background: linear-gradient(90deg, #C8C8C8 0%, rgba(220, 220, 220, 0.634932) 50.51%, rgba(255, 255, 255, 0) 100%);
    }

.box-promotion-description {
    color: #474747;
}

    .text-2-row-wrap {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.box-icon-dragger {
    width: 16px;
    background: #50A198;
    border-radius: 0px 6px 6px 0px;
}

.box-time-promotion-main {
    border-radius: 4px;
}

.box-time-promotion {
    margin: 0px;
    padding: 0px 6px;
    border-radius: 4px;
    width: 24px;
}

.box-time-promotion-main.style-1 {
    color: #5E5E5E;
    background: #F4F6FB;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-1 {
    color: #5E5E5E;
    background: #F4F6FB;
    box-shadow: 2px 2px 4px 0px #00000033,-2px -2px 4px 1px #FFFFFFE5;
}

.box-time-promotion-main.style-2 {
    color: #FFFFFF;
    background: #474747;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-2 {
    color: #FFFFFF;
    background: #474747;
    box-shadow: 2px 2px 4px 0px #00000099,-2px -2px 4px 1px #696969E5;
}

.box-time-promotion-main.style-3 {
    color: #044DBC;
    background: #D4E6FF;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-3 {
    color: #044DBC;
    background: #D4E6FF;
    box-shadow: 2px 2px 4px 0px #00000033,-2px -2px 4px 1px #FFFFFFE5;
}

.box-time-promotion-main.style-4 {
    color: #FFFFFF;
    background: #032D6B;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-4 {
    color: #FFFFFF;
    background: #032D6B;
    box-shadow: 2px 2px 4px 0px #00000099,-2px -2px 4px 1px #696969E5;
}

.box-time-promotion-main.style-5 {
    color: #50A198;
    background: #FFFFFF;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-5 {
    color: #50A198;
    background: #FFFFFF;
    box-shadow: 2px 2px 4px 0px #00000033,-2px -2px 4px 1px #FFFFFFE5;
}

.box-time-promotion-main.style-6 {
    color: #FFFFFF;
    background: #50A198;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-6 {
    color: #FFFFFF;
    background: #50A198;
    box-shadow: 2px 2px 4px 0px #00000099,-2px -2px 4px 1px #696969E5;
}

.box-time-promotion-main.style-7 {
    color: #C93838;
    background: #FFFFFF;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-7 {
    color: #C93838;
    background: #FFFFFF;
    box-shadow: 2px 2px 4px 0px #00000033,-2px -2px 4px 1px #FFFFFFE5;
}

.box-time-promotion-main.style-8 {
    background: #474747;
    box-shadow: 4px 4px 4px 0px #0000001A;
}

.box-time-promotion.style-8 {
    background: #474747;
    box-shadow: 2px 2px 4px 0px #00000099,-2px -2px 4px 1px #696969E5;
}

.text-style-8 {
    background: -webkit-linear-gradient(180deg, #B08A42 0%, #FFE8BC 33.33%, #C1A265 66.67%, #C1A265 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box-grayscale {
    filter: grayscale(1);
}

.cursor-grab {
    cursor: grab !important;
}

.offcanvas-border-radius-custom {
    border-radius: 28px 0px 0px 0px;
}

.offcanvas-head-custom {
    background: #50A198;
    border-radius: 28px 0px 0px 0px;
}

.box-header-step {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2B8B81;
    margin: -24px;
}

.bg-primary-promotion {
    background: #5ACCD8;
}

.progress-primary-promotion {
    background: #1f7e7b;
}

@media screen and (min-width: 992px) {
    .progress-primary-promotion {
        min-width: 550px;
    }
}

.box-list-date-promotion {
    width: 8px;
    height: 8px;
    border-radius: 20px;
}

.box-header-custom-card.inactive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -24px;
    background: linear-gradient(89.92deg, rgba(244, 240, 255, 0.5) 0.08%, rgba(232, 241, 255, 0.5) 51.28%, rgba(223, 252, 255, 0.5) 99.93%);
    padding: 16px;
    height: 40px;
    width: 204px;
    border-radius: 20px 20px 0px 0px;
}

.box-promotion-click-select {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

    .box-promotion-click-select:hover {
        background: #F3F1FF;
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
    }

    .box-promotion-click-select.active {
        border: 1px solid #50A198;
        background: #F3F1FF;
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
    }

    .box-promotion-click-select.active.disabled {
        box-shadow: unset;
    }

    .box-promotion-click-select.disabled {
        border: 1px solid #E9E9E9;
        background: #F6F6F6;
        pointer-events: none;
        filter: grayscale(1);
    }

        .box-promotion-click-select.disabled input,
        .box-promotion-click-select.disabled .input-group-text,
        .box-promotion-click-select.disabled .text-prepend {
            background: #F6F6F6 !important;
            border: 1px solid #E9E9E9 !important;
        }

.box-color-promotion-a {
    position: relative;
    top: 6px;
}

.box-color-promotion-b {
    width: 140px;
    height: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.box-color-promotion-a.style-1 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-1-1 {
    background: #838485;
}

.box-color-promotion-b.style-1-2 {
    background: #F4F6FB;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-2 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-2-1 {
    background: #FFFFFF;
}

.box-color-promotion-b.style-2-2 {
    background: #474747;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-3 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-3-1 {
    background: #044DBC;
}

.box-color-promotion-b.style-3-2 {
    background: #D4E6FF;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-4 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-4-1 {
    background: #FFFFFF;
}

.box-color-promotion-b.style-4-2 {
    background: #032D6B;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-5 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-5-1 {
    background: #50A198;
}

.box-color-promotion-b.style-5-2 {
    background: #FFFFFF;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-6 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-6-1 {
    background: #FFFFFF;
}

.box-color-promotion-b.style-6-2 {
    background: #50A198;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-7 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-7-1 {
    background: #C93838;
}

.box-color-promotion-b.style-7-2 {
    background: #FFFFFF;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-color-promotion-a.style-8 {
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
}

.box-color-promotion-b.style-8-1 {
    background: linear-gradient(180deg, #B08A42 0%, #FFE8BC 33.33%, #C1A265 66.67%, #C1A265 100%);
}

.box-color-promotion-b.style-8-2 {
    background: #474747;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.box-promotion-item-checkbox-radio.disabled {
    pointer-events: none;
}

    .box-promotion-item-checkbox-radio.disabled input,
    .box-promotion-item-checkbox-radio.disabled .input-group-text,
    .box-promotion-item-checkbox-radio.disabled .text-prepend {
        background: #2A2A2A !important;
        border: 1px solid #2A2A2A !important;
        color: #3F3F3F !important;
    }

.box-promotion-select-day {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    border: 1px solid;
    padding: 0px;
}

    .box-promotion-select-day.no-select {
        color: #ADADAD;
        border: 1px solid #C8C8C8;
        background: #FFFFFF;
        box-sizing: border-box;
    }

.custom-col-remark {
    display: -webkit-box;
    width: 250px;
    white-space:normal;
    word-break:break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*Minigame*/
.minigame-tips .snackbar-close {
    color: #F64646;
    background-color: var(--snackbar-bg-color);
}

.minigame-tips .snackbar-title svg {
    color: #000;
    height: 20px;
    width: 20px;
    padding: 2px 2px 4px 2px;
}

.minigame-tips .snackbar-close:hover {
    background-color: var(--snackbar-hover-bg-color);
}

.minigame-tips {
    --snackbar-color: #6181F4;
    --snackbar-bg-color: #F4F9FF;
    --snackbar-hover-bg-color: #D4E6FF;
    --snackbar-divider-color: rgba(4, 77, 188, .2);
}

.system-snackbar.minigame-tips {
    width: 470px;
}

    .system-snackbar.minigame-tips .snackbar-icon {
        margin: 4px 0 4px 4px;
        padding: 0;
    }

.content-minigame {
}

    .content-minigame .table-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

        .content-minigame .table-loading > lord-icon, .content-minigame .table-jumbotron > lord-icon {
            width: 75px;
            height: 75px;
        }

.card-minigame {
    display: flex;
    min-height: 208px;
    background: #151515;
    box-shadow: 4px 4px 6px 0px #00000033;
    border-radius: 0 8px 8px 0;
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
    position: relative;
    transition: 0.5s;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

    .card-minigame.expiry {
        background: #450000;
    }

    .card-minigame:hover {
        background: #113834;
    }

    .card-minigame .minigame-menu-dragger {
        position: absolute;
        width: 16px;
        height: 100%;
        top: 0;
        right: 0;
        border-radius: 0px 8px 8px 0px;
        background: #50A198;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .card-minigame .minigame-menu-dragger img {
            width: 12px;
            height: 12px;
            padding: 2px;
        }

.header-minigame {
    display: flex;
    grid-column-start: 1;
    grid-column-end: 3;
    align-items: center;
    column-gap: 6px;
    background: linear-gradient(90deg, #50A198 7.77%, #50A198 44.27%, rgba(80, 161, 152, 0.00) 100%);
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: #FFFFFF;
    height: 24px;
    margin-top: -3px;
}

    .header-minigame div, .status-minigame {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .header-minigame span, .status-minigame span {
            padding-top: 2px;
        }

.type-minigame {
    background: #508EEE;
    color: #FFF4E6;
    border-radius: 4px;
    box-shadow: 2px 2px 4px 0px #0000004D;
    height: 20px;
    padding: 1px 6px 1px 6px;
    width: max-content;
    font-family: var(--vz-btn-font-family);
    margin: 2px 0px 2px 16px;
}

    .type-minigame.type-luckywheel {
        background: #FFAA33;
    }

.header-minigame .status-minigame {
    margin-top: -1px;
    margin-bottom: 5px;
}

.status-minigame {
    border-radius: 4px;
    box-shadow: 2px 2px 4px 0px #0000004D;
    height: 20px;
    padding: 1px 6px 1px 6px;
    width: max-content;
    font-family: var(--vz-btn-font-family);
    font-weight: 700;
    grid-column-end: none;
    font-size: 12px;
}

    .status-minigame.minigame-on {
        background: #EAF9FA;
        color: #2799A5;
    }

    .status-minigame.minigame-off {
        background: #FFF3F3;
        color: #F64646;
    }

.card-minigame.minigame-expired .status-minigame {
    background: #F6F6F6;
    color: #ADADAD;
}

.card-minigame.minigame-expired .minigame-col-1 {
    filter: grayscale(1);
}

.minigame-col-1 {
    display: grid;
    grid-template-columns: 176px 1fr;
    column-gap: 16px;
    width: 50%;
}

.card-minigame .label, .card-minigame .date-2 {
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    color: #ADADAD;
}

.card-minigame .title-minigame {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
}

.card-minigame .date-1 {
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
}

.card-minigame .date-2 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.card-minigame .data-minigame {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.card-minigame .date-update {
    display: flex;
    flex-direction: column;
}

.card-minigame .header-minigame-bonus {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    align-self: flex-start;
    margin-bottom: 6px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-minigame .data-value-bonus {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    width: 100%;
    min-width: 152px;
    height: 24px;
    border-radius: 16px;
    background-color: #2A2A2A;
}

.card-minigame .data-index {
    font-weight: 700;
    width: 24px;
    height: 24px;
    line-height: 26px;
    text-align: center;
    border-radius: 16px;
    background-color: #303030;
    color: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card-minigame .data-value-bonus span {
    padding-top: 2px;
}

.card-minigame .minigame-col-2 {
    color: #fff;
}

.card-minigame .value-given-out {
    color: #fff;
    margin-left: 8px;
}

.card-minigame .minigame-col-2 {
    display: flex;
    min-width: max-content;
    width: 45%;
    flex-direction: column;
    align-items: center;
}

.card-minigame .minigame-col-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 20%;
    min-width: max-content;
    margin-right: 32px;
}

.card-minigame .minigame-bonus-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    column-gap: 16px;
    margin-top: 6px;
    width: 100%;
    min-width: max-content;
}

.card-minigame .date-update {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}

.card-minigame .thumbnail-minigame {
    margin: 13px 16px 0 16px;
    width: 144px;
    height: 144px;
}

.card-minigame .bonus-run-out, .card-minigame .bonus-run-out .data-index {
    border: 1px solid #E10000;
}

.card-minigame .minigame-col-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 20%;
    margin-right: 32px;
}

    .card-minigame .minigame-col-3 .header {
        display: flex;
        gap: 8px;
    }

.card-minigame .minigame-time {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-family: Noto Sans Thai;
    gap: 4px;
}

    .card-minigame .minigame-time .time {
        display: grid;
        grid-template-columns: 52px 6px 52px 6px 52px;
        justify-items: center;
        padding: 4px;
        border-radius: 4px;
        font-size: 20px;
        line-height: 32px;
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        gap: 4px;
    }

    .card-minigame .minigame-time .text {
        display: grid;
        grid-template-columns: 52px 6px 52px 6px 52px;
        justify-items: center;
        padding-top: 2px;
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-size: 10px;
        line-height: 16px;
        gap: 4px;
    }

    .card-minigame .minigame-time .card-unit {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }

    .card-minigame .minigame-time .time .card-unit div {
        padding: 0 6px;
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }

.main-minigame {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/*canvas main-minigame*/


.offcanvas-header-minigame {
    border-top-left-radius: 28px;
    height: 80px;
    min-height: 80px;
    padding: 0 24px;
    display: flex;
    align-items: center;
}

    .offcanvas-header-minigame h4 {
        color: #FFF;
    }

.session-title-minigame {
    display: flex;
    color: #FFF;
    padding: 24px 80px 0px 80px;
    height: 200px;
}

.canvas-box-body {
    /* box-shadow: -10px -10px 30px 0px rgba(0, 0, 0, 0.2), 4px 4px 10px 0px rgba(0, 0, 0, 0.15); */
    border-radius: 20px;
    position: relative;
    width: 752px;
    top: -64px;
    z-index: 10000;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: calc(-90px + 1.5rem);
}

.canvas-box-body-custom-mini-game {
    border-radius: 20px;
    position: relative;
    width: 752px;
    top: -64px;
    z-index: 10000;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: 50px;
    border: 2px solid #50A198;
}

    .canvas-box-step {
        margin-left: 24px;
    }

    .canvas-box-step .top-title-minigame {
        display: grid;
        grid-template-columns: fit-content(70px) 1fr;
        gap: 24px;
    }

        .canvas-box-step .top-title-minigame > div {
            display: flex;
            flex-direction: column;
        }

        .canvas-box-step .top-title-minigame > span {
            font-size: 16px;
            font-weight: 700;
            line-height: 28px;
            color: #5ACCD8;
            margin-top: 2px;
        }

    .canvas-box-step .title-minigame-detail {
        font-size: 16px;
        font-weight: 700;
        line-height: 28px;
        color: #fff;
    }

    .canvas-box-step .description-minigame-detail {
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        color: #ADADAD;
    }

    .canvas-box-step .progress-setting-minigame {
        width: 100%;
        margin-top: 16px;
    }

.offcanvas-minigame-custom {
    width: 800px !important;
    top: 72px !important;
    border-top-left-radius: 28px;
    border: 0px solid !important;
    background: #151515;
}

.icon-close-offcanvas-minigame-custom {
    width: 32px;
    height: 32px;
    font-size: 35px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.header-in-body {
    position: relative;
    height: 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
    width: 100%;
}

    .header-in-body span {
        z-index: 1;
    }

    .header-in-body:before {
        content: "";
        position: absolute;
        height: 56px;
        left: 0;
        top: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        width: 100%;
        opacity: .5;
        background: #113834;
        border-top: 2px solid #50A198;
        border-right: 2px solid #50A198;
        border-left: 2px solid #50A198;
    }

.offcanvas-minigame-custom .header-in-body > span {
    font-family: Noto Serif Thai;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.offcanvas-minigame-custom .header-in-body.active > span {
    color: #E9E9E9;
}
.offcanvas-minigame-custom .tab-group > div {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.offcanvas-minigame-custom .header-in-body > div span {
    padding-top: 2px;
    color: #fff;
}

.offcanvas-minigame-custom .header-in-body .custom-switch {
    margin-bottom: auto;
}

.offcanvas-minigame-custom .main-in-detail-body {
    display: grid;
    gap: 22px;
    padding: 24px 0;
    background: #202020;
    /*box-shadow: -10px -10px 30px 0px rgba(0, 0, 0, 0.2), 4px 4px 10px 0px rgba(0, 0, 0, 0.15);*/
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    border-left: 2px solid #50A198;
    border-right: 2px solid #50A198;
    border-bottom: 2px solid #50A198;
}

    .offcanvas-minigame-custom .main-in-detail-body-custom.content-col-1 {
        grid-template-columns: 1fr;
    }

.offcanvas-minigame-custom .main-in-detail-body-custom.content-col-2 {
    grid-template-columns: 1fr 1fr;
}

.offcanvas-minigame-custom .main-in-detail-body-custom {
    display: grid;
    gap: 22px;
    padding: 24px 0;
    background: #202020;
    /*box-shadow: -10px -10px 30px 0px rgba(0, 0, 0, 0.2), 4px 4px 10px 0px rgba(0, 0, 0, 0.15);*/
    border-radius: 20px;
    overflow: hidden;
}

    .offcanvas-minigame-custom .main-in-detail-body.content-col-1 {
        grid-template-columns: 1fr;
    }

    .offcanvas-minigame-custom .main-in-detail-body.content-col-2 {
        grid-template-columns: 1fr 1fr;
    }

.multi-language-body {
    display: grid;
    gap: 22px;
    padding: 24px;
    background: #202020;
    overflow: hidden;
    border-left: 2px solid #50A198;
    border-right: 2px solid #50A198;
    text-align: left;
}

.multi-language-body-mission {
    display: grid;
    gap: 22px;
    padding: 10px 0;
    overflow: hidden;
}

.multi-lang-button-div {
    display: flex;
    justify-content: space-evenly;
}

.multi-lang-button {
    border-radius: 30px;
    border: 2px #545454 solid;
    color: #545454;
    max-width: 150px;
    height: 55px;
}

.multi-lang-selected {
    color: #50A198 !important;
    border: 2px #50A198 solid !important;
    background-color: rgba(1, 38, 37, 1) !important;
}

.multi-lang-button:hover {
    border: 2px #39726C solid;
    color: #39726C;
}

.text-white {
    color: #E9E9E9;
}

.multi-lang-status-t {
    color: #50A198 !important;
}

.multi-lang-status-f {
    color: #f64646 !important;
}

.display-none {
    display: none !important;
}

.display-show {
    display: block !important;
}

.max-w-368{
    max-width: 368px;
}

.offcanvas-minigame-custom .body-content-left {
    padding-left: 24px;
}

.offcanvas-minigame-custom .body-content-right {
    padding-right: 24px;
}
.offcanvas-minigame-custom .body-content-right > ck {
    max-width: 385px;
}

.offcanvas-minigame-custom .tab-header {
    display: flex;
    align-items: flex-end;
}

.offcanvas-minigame-custom .tab-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.multi-language-body {
    display: grid;
    gap: 22px;
    padding: 24px;
    background: #202020;
    overflow: hidden;
    border-left: 2px solid #50A198;
    border-right: 2px solid #50A198;
}

.multi-language-body-mission {
    display: grid;
    gap: 22px;
    padding: 10px 0;
    overflow: hidden;
}

.multi-lang-button-div {
    display: flex;
    justify-content: space-evenly;
}

.multi-lang-button {
    border-radius: 30px;
    border: 2px #545454 solid;
    color: #545454;
    max-width: 150px;
    height: 55px;
}

.multi-lang-selected {
    color: #50A198 !important;
    border: 2px #50A198 solid !important;
    background-color: rgba(1, 38, 37, 1) !important;
}

    .multi-lang-button:hover {
        border: 2px #39726C solid;
        color: #39726C;
    }

.text-white {
    color: #E9E9E9;
}

.multi-lang-status-t {
    color: #50A198 !important;
}

.multi-lang-status-f {
    color: #f64646 !important;
}

.display-none{
    display: none !important;
}

.display-show {
    display: block !important;
}

.offcanvas-minigame-custom .tab-header .tabs {
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offcanvas-minigame-custom .tab-header .active:before {
    opacity: 1;
}

.offcanvas-minigame-custom .tab-header .active {
    min-width: max-content;
    height: 56px;
    color: #474747;
}

.offcanvas-minigame-custom .main-in-detail-body .custom-switch-minigame {
    gap: 8px
}

    .offcanvas-minigame-custom .main-in-detail-body .custom-switch-minigame span {
        padding-top: 2px;
        color: #E9E9E9;
    }

.offcanvas-minigame-custom .ck.ck-tooltip .ck-tooltip__text {
    border-radius: 8px;
}

.progress-moved-setting-minigame .progress-bar {
    width: 25%;
    background-color: #50A198;
    animation: progressAnimation 6s;
}

@@keyframes progressAnimationStrike {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.progress-bar {
    height: 8px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 0.4s linear;
    transition-property: width, background-color;
}

.progress-setting-minigame {
    border-radius: 30px;
    background: #545454;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
}

    .progress-setting-minigame .progress-step {
        position: absolute;
        right: 0;
        top: -20px;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
    }

.group-btn-minigame-setting {
/*    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 24px 48px;*/
    margin: 24px 0px;
}

    .group-btn-minigame-setting .system-btn.btn-outline {
        border: unset;
    }

        .group-btn-minigame-setting .system-btn.btn-outline:hover {
            background-color: var(--btn-bg-hover-color);
            /* border: 2px solid var(--btn-bg-hover-color); */
            color: var(--btn-color);
        }

.ck.ck-toolbar__items .ck.ck-button {
    margin: 0;
}

.ck.ck-toolbar__items > .ck {
    font-size: 11px;
}

.ck.ck-toolbar__items .ck.ck-dropdown .ck.ck-button__label {
    width: 3em;
}

.offcanvas-minigame-custom .main-in-detail-body .label-minigame {
    position: relative;
    width: 100%;
    color: #FFFFFF;
    /*height: 32px;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    z-index: 1;
    padding: 2px 24px 0 24px;
}

.label-minigame-custom {
    position: relative;
    width: 100%;
    color: #FFFFFF;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    z-index: 1;
    padding: 2px 24px 0 24px;
}

    .label-minigame-custom:before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: linear-gradient(90deg, #50A198 0%, #50A198 50%, rgba(80, 161, 152, 0.00) 100%);
        width: 553px;
        height: 100%;
        z-index: -1;
    }

.label-minigame{
    text-align: left;
}

.txt-small-radio {
    font-size: 11px;
    color: #828282;
    line-height: 18.15px;
}

.label-minigame-custom-v2 {
    width: 100%;
    color: #FFFFFF;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    line-height: 26.4px;
    padding: 4px 24px;
    background: #50A198;
    border-radius: 30px;
}

    .offcanvas-minigame-custom .main-in-detail-body .label-minigame .switch {
        display: flex;
        gap: 8px;
        color: #474747;
        font-size: 14px;
        font-weight: 500;
        align-items: center;
    }

    .offcanvas-minigame-custom .main-in-detail-body .label-minigame:before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: linear-gradient(90deg, #50A198 0%, #50A198 50%, rgba(80, 161, 152, 0.00) 100%);
        width: 553px;
        height: 100%;
        z-index: -1;
    }

    .offcanvas-minigame-custom .main-in-detail-body .label-minigame .select-date {
        font-size: 14px;
        font-weight: 700;
        line-height: 24px;
    }

        .offcanvas-minigame-custom .main-in-detail-body .label-minigame .select-date label {
            color: #ADADAD;
            margin-right: 8px;
        }

        .offcanvas-minigame-custom .main-in-detail-body .label-minigame .select-date span {
            color: #50A198;
        }

.title-set-color-mini-game {
    padding: 0 24px;
    text-align: left;
    margin-bottom: 21px;
}

    .title-set-color-mini-game h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 26.4px;
        color: #68C5C2;
        margin-bottom: 2px;
    }

    .title-set-color-mini-game p {
        font-size: 11px;
        font-weight: 400;
        line-height: 18.15px;
        color: #E9E9E9;
    }

.box-main-set-color-mini-game {
    padding: 0 24px;
}

    .box-main-set-color-mini-game .title-main-set-color-mini-game {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        background: #113834;
        margin-bottom: 29px;
    }

        .box-main-set-color-mini-game .title-main-set-color-mini-game h4 {
            font-size: 16px;
            font-weight: 700;
            line-height: 26.4px;
            color: #68C5C2;
        }

        .box-main-set-color-mini-game .title-main-set-color-mini-game h5 {
            font-size: 13px;
            font-weight: 700;
            line-height: 21.45px;
            color: #FFD500;
            text-decoration: underline;
            cursor: pointer;
        }

.offcanvas-minigame-custom .main-in-detail-body .input-col-1-p {
    padding: 0 24px;
}

.offcanvas-minigame-custom .main-in-detail-body .input-col-2 {
    display: grid;
    gap: 22px;
    padding: 0 24px;
    grid-template-columns: 1fr 1fr;
}

.offcanvas-minigame-custom .main-in-detail-body .input-col-2-70-100 {
    display: grid;
    gap: 22px;
    padding: 0 24px;
    grid-template-columns: 70% 1fr;
}

.offcanvas-minigame-custom .main-in-detail-body .input-col-2-60-100 {
    display: grid;
    gap: 22px;
    padding: 0 24px;
    grid-template-columns: 60% 1fr;
}

.offcanvas-minigame-custom .custom-input input:placeholder-shown + .float-prepend {
    pointer-events: none;
}

.offcanvas-minigame-custom .box-everyday-minigame-working {
    /* height: 245px;
        width: calc(100% - 48px); */
    margin: 16px 24px 24px 24px;
    background-color: #F3F1FF;
    border-radius: 20px;
    overflow: hidden;
}

    .offcanvas-minigame-custom .box-everyday-minigame-working .header {
        display: flex;
        background-color: #113834;
        color: #FFFFFF;
        height: 40px;
        align-items: center;
        padding: 9px 24px 7px 24px;
        gap: 29px;
        border-top: 2px solid #50A198;
        border-right: 2px solid #50A198;
        border-left: 2px solid #50A198;
    }

    .offcanvas-minigame-custom .box-everyday-minigame-working .content {
        display: grid;
        gap: 19px;
        grid-template-columns: 1fr 1fr;
        padding: 16px 24px 24px 24px;
        background: #202020;
        border-left: 2px solid #50A198;
        border-right: 2px solid #50A198;
        border-bottom: 2px solid #50A198;
    }

        .offcanvas-minigame-custom .box-everyday-minigame-working .content .date {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }


        .offcanvas-minigame-custom .box-everyday-minigame-working .content .days {
            display: flex;
            gap: 8px;
            flex-direction: row;
        }

            .offcanvas-minigame-custom .box-everyday-minigame-working .content .days button {
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 2px;
                width: 40px;
                height: 40px;
                background-color: #50A198;
                border-radius: 8px;
                color: #FFFFFF;
                font-size: 14px;
                font-weight: 500;
                border-color: #50A198;
            }
                .offcanvas-minigame-custom .box-everyday-minigame-working .content .days button.no-select {
                    color: #545454;
                    border: 1px solid #545454;
                    background: #2A2A2A;
                    box-sizing: border-box;
                }
        .offcanvas-minigame-custom .box-everyday-minigame-working .content button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 2px;
            height: 40px;
            background-color: #50A198;
            border-radius: 8px;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: 500;
        }
            .offcanvas-minigame-custom .box-everyday-minigame-working .content button.no-select {
                color: #545454;
                border: 1px solid #545454;
                background: #2A2A2A;
                box-sizing: border-box;
            }

        .offcanvas-minigame-custom .box-everyday-minigame-working .content .input-days {
            display: grid;
            gap: 8px;
            grid-template-columns: 40% 1fr;
        }

        .offcanvas-minigame-custom .box-everyday-minigame-working .content button.everyday {
            width: 100%;
            grid-column: span 2;
        }

        .offcanvas-minigame-custom .box-everyday-minigame-working .content .time {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 28px;
        }

            .offcanvas-minigame-custom .box-everyday-minigame-working .content .time .time-set {
                display: grid;
                column-gap: 10px;
                grid-template-columns: 50px 1fr 24px;
                row-gap: 8px;
                align-items: center;
            }

            .offcanvas-minigame-custom .box-everyday-minigame-working .content .time .time-set-new {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .offcanvas-minigame-custom .box-everyday-minigame-working .content .time .time-set-add {
                display: grid;
                column-gap: 10px;
                grid-template-columns: 50px 1fr 24px;
                row-gap: 8px;
                align-items: center;
            }

            .offcanvas-minigame-custom .box-everyday-minigame-working .content .time .btn-allday {
                margin-left: 60px;
                margin-right: 34px;
            }

            .offcanvas-minigame-custom .box-everyday-minigame-working .content .time .add-set {
                cursor: pointer;
                color: #50A198;
                margin-left: 22px;
            }

            .offcanvas-minigame-custom .box-everyday-minigame-working .content .time .add-set.disabled {
                color: #C8C8C8;
                pointer-events:none;
            }

        .offcanvas-minigame-custom .box-everyday-minigame-working .content .input-time-from-to {
            display: grid;
            gap: 8px;
            grid-template-columns: 1fr 5px 1fr;
            align-items: center;
            height: 40px;
        }

.offcanvas-minigame-custom .main-in-detail-body.content-col-1 .group-btn-minigame-setting {
    margin: 0 24px;
}

.offcanvas-minigame-custom .invalid-feedback {
    margin-top: 7px;
    text-align:start;
    margin-bottom:-7px;
}
.offcanvas-minigame-custom .invalid-feedback.show {
    display:block;
}

.disabled {
    filter: grayscale(1);
}

.countdown-minigame {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-family: Noto Sans Thai;
    gap: 4px;
}

    .countdown-minigame .time {
        display: grid;
        grid-template-columns: 52px 6px 52px 6px 52px;
        justify-items: center;
        padding: 4px;
        border-radius: 4px;
        font-size: 20px;
        line-height: 32px;
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        gap: 4px;
    }

    .countdown-minigame .text {
        display: grid;
        grid-template-columns: 52px 6px 52px 6px 52px;
        justify-items: center;
        padding-top: 2px;
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-size: 10px;
        line-height: 16px;
        gap: 4px;
    }

    .countdown-minigame .card-unit {
        display: flex;
        flex-direction: row;
        gap: 4px;
    }

    .countdown-minigame .time .card-unit div {
        padding: 0 6px;
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }

    .countdown-minigame.style-1 .time, .countdown-minigame.style-1 .card-unit div, .countdown-minigame.style-1 .text {
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        color: #5E5E5E;
    }


.box-color-minigame-b {
    width: 140px;
    height: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

    .box-color-minigame-b.style-1-1 {
        background: #5E5E5E;
    }

    .box-color-minigame-b.style-1-2 {
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.5) 0%, rgba(244, 246, 251, 0.5) 100%), #F4F6FB;
        position: absolute;
        z-index: 1;
        top: 12px;
    }

.box-minigame-ex-color {
    height: 35px;
}


.box-color-minigame-b.style-1-1 {
    background: #838485;
}

.box-color-minigame-b.style-1-2 {
    background: #F4F6FB;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-2 .time, .countdown-minigame.style-2 .card-unit div, .countdown-minigame.style-2 .text {
    background: linear-gradient(180deg, rgba(71, 71, 71, 0.5) 0%, rgba(71, 71, 71, 0.5) 100%), rgba(71, 71, 71, 0.8);
    color: #FFF;
}

.box-color-minigame-b.style-2-1 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), #FFF;
}

.box-color-minigame-b.style-2-2 {
    background: linear-gradient(180deg, rgba(71, 71, 71, 0.5) 0%, rgba(71, 71, 71, 0.5) 100%), rgba(71, 71, 71, 0.8);
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-3 .time, .countdown-minigame.style-3 .card-unit div, .countdown-minigame.style-3 .text {
    background: linear-gradient(180deg, rgba(212, 230, 255, 0.5) 0%, rgba(212, 230, 255, 0.5) 100%), rgba(212, 230, 255, 0.8);
    color: rgba(4, 77, 188, 1);
}

.box-color-minigame-b.style-3-1 {
    background: linear-gradient(180deg, rgba(4, 77, 188, 0.5) 0%, rgba(4, 77, 188, 0.5) 100%), rgba(4, 77, 188, 0.8);
}

.box-color-minigame-b.style-3-2 {
    background: linear-gradient(180deg, rgba(212, 230, 255, 0.5) 0%, rgba(212, 230, 255, 0.5) 100%), rgba(212, 230, 255, 0.8);
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-4 .time, .countdown-minigame.style-4 .card-unit div, .countdown-minigame.style-4 .text {
    background: linear-gradient(180deg, rgba(3, 45, 107, 0.5) 0%, rgba(3, 45, 107, 0.5) 100%), rgba(3, 45, 107, 0.8);
    color: rgba(255, 255, 255, 1);
}

.box-color-minigame-b.style-4-1 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), rgba(255, 255, 255, 0.8);
}

.box-color-minigame-b.style-4-2 {
    background: linear-gradient(180deg, rgba(3, 45, 107, 0.5) 0%, rgba(3, 45, 107, 0.5) 100%), rgba(3, 45, 107, 0.8);
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-5 .time, .countdown-minigame.style-5 .card-unit div, .countdown-minigame.style-5 .text {
    background: rgba(255, 255, 255, 1);
    color: rgba(75, 56, 179, 1);
}

.box-color-minigame-b.style-5-1 {
    background: rgba(75, 56, 179, 1);
}

.box-color-minigame-b.style-5-2 {
    background: rgba(255, 255, 255, 1);
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-6 .time, .countdown-minigame.style-6 .card-unit div, .countdown-minigame.style-6 .text {
    background: rgba(75, 56, 179, 1);
    color: rgba(255, 255, 255, 1);
}

.box-color-minigame-b.style-6-1 {
    background: rgba(255, 255, 255, 1);
}

.box-color-minigame-b.style-6-2 {
    background: rgba(75, 56, 179, 1);
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-7 .time, .countdown-minigame.style-7 .card-unit div, .countdown-minigame.style-7 .text {
    background: #FFF;
    color: #C93838;
}

.box-color-minigame-b.style-7-1 {
    background: #C93838;
}

.box-color-minigame-b.style-7-2 {
    background: #FFF;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.countdown-minigame.style-8 .time, .countdown-minigame.style-8 .card-unit div, .countdown-minigame.style-8 .text {
    background: #474747;
}

    .countdown-minigame.style-8 .card-unit div span, .countdown-minigame.style-8 .text span {
        background: -webkit-linear-gradient(90deg, #C1A265 0%, #C1A265 33.33%, #FFE8BC 66.67%, #B08A42 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.box-color-minigame-b.style-8-1 {
    background: linear-gradient(180deg, #B08A42 0%, #FFE8BC 33.33%, #C1A265 66.67%, #C1A265 100%);
}

.box-color-minigame-b.style-8-2 {
    background: #474747;
    position: absolute;
    z-index: 1;
    top: 12px;
}

.offcanvas-minigame-custom .highlight {
    color: #50A198;
    font-weight: 700;
}

.offcanvas-minigame-custom .btn-add-minigame {
    background-color: #244550;
    border-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #E9E9E9;
}
.offcanvas-minigame-custom .setting-minigame-upload-img {
    cursor: pointer;
    user-select: none;
    color: #C8C8C8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    z-index: 0;
}

    .offcanvas-minigame-custom .setting-minigame-upload-img::before {
        width: 100%;
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(90deg, #0D2A27 0%, #1A534D 50%, #9BCCC7 100%);
        -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.offcanvas-minigame-custom .setting-minigame-upload-img > img {
    width: 100%;
    height: 100%;
    padding: .5rem;
    object-fit: contain;
}

.offcanvas-minigame-custom .setting-minigame-upload-img-button {
    content: ' ';
    position: absolute;
    color: #FFF;
    width: 24px;
    height: 24px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: -0.5rem;
    bottom: -0.5rem;
    border-radius: 50%;
    background-color: #EE9AE5;
    background-image: linear-gradient(90deg, #0D2A27 0%, #1A534D 50%, #9BCCC7 100%);
}

.color-emerald-title-1 {
    color: #E9E9E9;
}

.color-emerald-title-2 {
    color: #828282;
}

.color-emerald-title-3 {
    color: #50A198;
}

.txt-download-template {
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    cursor:pointer;
    
}

.offcanvas-minigame-custom .setting-minigame-upload-img.summary-qr-code {
    width: 160px;
    height: 160px;
}

.offcanvas-minigame-custom .box-list-date-minigame {
    width: 8px;
    height: 8px;
    border-radius: 20px;
}

.dropdown-wheel-detail svg {
    transition: transform .2s ease;
}
.dropdown-wheel-detail svg {
    transform: rotate(.5turn);
}
.dropdown-wheel-detail.collapsed svg {
    transform: rotate(1turn);
}

.offcanvas-minigame-custom .minigame-reset.disabled input, .offcanvas-minigame-custom .minigame-box-reset.disabled input, .offcanvas-minigame-custom .minigame-checkbox-reset.disabled input {
    background: #2A2A2A;
    border: 1px solid #303030;
}

.offcanvas-minigame-custom .minigame-reset.disabled input, .offcanvas-minigame-custom .minigame-box-reset.disabled input, .offcanvas-minigame-custom .minigame-checkbox-reset.disabled input::placeholder {
   color: #3F3F3F;
}

.offcanvas-minigame-custom .minigame-reset.disabled, .offcanvas-minigame-custom .minigame-checkbox-reset.disabled, .offcanvas-minigame-custom .minigame-box-reset.disabled {
    pointer-events: none;
}

.offcanvas-minigame-custom .box-promotion-click-select {
    border: 1px solid #545454;
    background: #2A2A2A;
}

.offcanvas-minigame-custom .box-minigame-click-select:hover,
.offcanvas-minigame-custom .box-minigame-click-select.active {
    border: 1px solid #50A198;
    background: #2A2A2A;
    color: #E9E9E9;
}

#minigameCountdownRemainingDay {
    border-color: #545454;
    background: #2A2A2A;
}

.input-group-text.custom-color {
    border-color: #545454;
    background: #3F3F3F;
    color: #E9E9E9;
}

.offcanvas-minigame-custom .box-minigame-click-select.disabled {
    border: 1px solid #545454;
    background: #2A2A2A;
    pointer-events: none;
    filter: grayscale(1);
    padding: 24px;
}

    .offcanvas-minigame-custom .box-minigame-click-select.disabled input,
    .offcanvas-minigame-custom .box-minigame-click-select.disabled .input-group-text {
        background: #2A2A2A;
        border: 1px solid #545454;
    }
.offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled {
    pointer-events: auto;
}
    .offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled input,
    .offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled .input-group-text {
        pointer-events: auto;
    }

    .offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled input {
        border: 1px solid var(--vz-input-border) !important;
        background-color: var(--vz-input-bg) !important;
        color: #000 !important;
    }
.offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled {
    filter: unset;
}

    .offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled input:hover {
        border-color: #50A198;
        box-shadow: 0 0 0 1px #50A198;
    }
    .offcanvas-minigame-custom .box-minigame-click-select.active .minigame-box-reset.disabled .input-group-text {
/*        border: 1px solid var(--vz-input-border);
        background-color: var(--vz-input-group-addon-bg);*/

    }

.offcanvas-minigame-custom .wheel-main, .offcanvas-minigame-custom .minigame-main {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.offcanvas-minigame-custom .wheel-wrapper-out {
    --wheel-width: 320px;
    --wheel-height: 320px;
    user-select: none;
    width: var(--wheel-width);
    height: var(--wheel-height);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}
.offcanvas-minigame-custom .custom-wheel-out {
    --item-offset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}
.offcanvas-minigame-custom .wheel-item-out {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: calc((2 * (22 / 7) * (var(--wheel-width) / 2)) / var(--max-item));
    transform: rotate(calc(-360deg / var(--max-item) * var(--item)));
    position: absolute;
    transform-origin: bottom;
    user-select: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    object-position: center;
}
.offcanvas-minigame-custom .btn-text {
    position: absolute;
    top: -36px;
    left: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(calc(360deg / var(--max-item)* var(--item)));
    width: max-content;
}

    .offcanvas-minigame-custom .btn-text.top-bottom {
        top: -18px;
    }

    .offcanvas-minigame-custom .btn-text span {
        font-size: 10px;
        font-weight: 700;
        color: #50A198;
    }

    .offcanvas-minigame-custom .btn-text img {
        margin-right:5px;
    }

.offcanvas-minigame-custom .wheel-item-all {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.offcanvas-minigame-custom .wheel-spin {
    z-index: 1;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.offcanvas-minigame-custom .minigame-test-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 40px);
    height: 100%;
    border-radius: 37px;
    background: #212121DB;
    margin: 0 20px;
    z-index: 2;
    color: #fff;
    visibility: hidden;
    z-index: 1041;
    transition: opacity .3s ease-in-out;
    display: flex;
    opacity: 0;
}
.wheel-display-reward-main.show, .minigame-test-layout.show {
    visibility: visible !important;
    /*display: flex !important;*/
    opacity: 1 !important;
}
.offcanvas-minigame-custom .wheel-display-reward-main {
    position: absolute;
    margin-top: 40px;
    visibility: hidden;
    z-index: 1042;
    transition: opacity .3s ease-in-out;
    display: flex;
    opacity: 0;
    width:342px;
}
    .offcanvas-minigame-custom .wheel-display-reward-main > div {
        width: 100%;
        width: 342px;
    }
    .offcanvas-minigame-custom .wheel-display-reward-main img {
        width: 100%;
        object-fit: contain;
    }
.offcanvas-minigame-custom .offcanvas-backdrop, .offcanvas-minigame-custom .wheel-display-reward-main .offcanvas-backdrop {
    backdrop-filter: unset;
    background: unset;
}
.offcanvas-minigame-custom .custom-minigame-wheel-section {
    display: flex;
    gap: 22px;
    flex-direction: column;
}
.border-custom-left8px {
    border-radius: 8px 0px 0px 8px !important;
}

div[data-v="type"] {
    all: unset;
}

.offcanvas-minigame-custom .minigame-item-all {
    display: flex;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}
    .offcanvas-minigame-custom .minigame-item-all img {
        width: 111px;
        height: 111px;
        object-fit: contain;
    }

.offcanvas-minigame-custom .minigame-item-all .card-item {
    cursor: pointer;
}

.offcanvas-minigame-custom .preview-minigame {
    width: 222px;
    height: 222px;
}

.card-minigame .wheel-item-all {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.card-minigame .wheel-wrapper {
    --wheel-width: 144px;
    --wheel-height: 144px;
}

.card-minigame .wheel-spin {
    position: absolute;
    height: 60px;
    width: 60px;
}

.cover-minigame {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-minigame .custom-wheel {
    background-color: transparent;
}

.disabled input {
    color: #ADADAD
}

.offcanvas-minigame-custom .btn-default:hover {
    color: #FFF;
    background-color: var(--btn-bg-color);
}
.offcanvas-minigame-custom .btn-default.disabled {
    --btn-color: #F6F6F6;
    --btn-bg-color: #F6F6F6;
}
.offcanvas-minigame-custom .show-condition-html {
    max-width: 100%;
    width: 100%;
}
@media only screen and (max-width: 1051px) {
    .card-minigame {
        flex-direction: column;
    }
        .card-minigame .minigame-col-1, .card-minigame .minigame-col-2, .card-minigame .minigame-col-3 {
            padding-right: 30px;
            width: 100%;
        }
}
@media only screen and (max-width: 620px) {
    .card-minigame .thumbnail-minigame {
        grid-column: span 2;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        width: 100%;
    }
    .minigame-col-1 {
        grid-template-columns: 100% 1fr;
    }
    .header-minigame {
        padding-right: 15px;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.p5{
    padding: 5px;
}

.p10{
    padding: 10px;
}

.bg-lightgray {
    background-color: #eae8f2;
    border: solid 1px #ffffff;
}

.bg-lightblue {
    background-color: #CEC6EB;
    border-radius: 10px;
    margin-bottom: 15px;
}

.content-center{
    justify-content: center;
}

.flex-content-center {
    display: flex;
    justify-content: center;
}

.box-pg-click-select.active {
    border: 1px solid #50A198;
    background: #F3F1FF;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
}

.customer-pay-fee, .web-pay-fee {
    border: 1px solid #000000;
}

.custom-text-shadow-style {
    text-shadow: -.2rem -.2rem 1rem #fff,.2rem .2rem 1rem #fff,0 0 .2rem #999,0 0 .4rem #888,0 0 .6rem #777,0 0 .8rem #666,0 0 1rem #555;
}

/* @ Custom Card Language */
.custom-card-language {
    --card-padding: 24px;
    background-color: #FFF;
    padding: var(--card-padding);
    border-radius: 16px;
}

    .custom-card-language.full-card {
        height: 100%;
    }

    .custom-card-language.full-flex {
        display: flex;
        flex-direction: column;
    }

.custom-card-boder {
    --card-padding: 24px;
    background-color: #FFF;
    padding: var(--card-padding);
    border-radius: 16px;
    border: 1px solid #B9B9B9;
}

.box-card-language {
    background: #F6F6F6;
    border-radius: 8px;
    border: 2px solid #F6F6F6;
    padding: 8px 18px 8px 8px !important;
    cursor: pointer;
}

    .box-card-language.active {
        background: #F3F1FF;
        border: 2px solid #50A198;
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
    }

/* @ Custom Card Recommend*/
.custom-card-recommend {
    --card-padding: 24px;
    background-color: #FFF;
    padding-top: var(--card-padding);
    padding-bottom: var(--card-padding);
    border-radius: 16px;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .10);
}

    .custom-card-recommend.full-card {
        height: 100%;
    }

    .custom-card-recommend.full-flex {
        display: flex;
        flex-direction: column;
    }


.accordion-recommend-text {
    color: #50A198;
}

.btn-language-setting, .btn-language-setting-d, .btn-language-setting-w {
    border-radius: 10px;
}

.btn-lang-active, .btn-lang-active-d, .btn-lang-active-w {
    border-style: solid;
    border-width: 3px;
    border-bottom-color: #50A198;
}

.box-icon-upload-bg {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/assets/images/icon-upload-bg.png');
    background-size: cover;
    position: relative;
    cursor: pointer;
}

.box-icon-upload-default {
    width: auto;
    height: 65px;
    border-radius: 10px;
}

.box-icon-upload-small {
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: -6px;
    right: -6px;
}

.agent-dropdown-disabled {
    background: #00000080;
    pointer-events: none;
}

/*Provider Game Table*/
.table-round-g-header {
    padding: 10px 0;
    border-radius: 15px 15px 0 0;
    background-color: rgba(2, 57, 55, 1);
    color: #fff;
}

.table-round-g-footer {
    padding: 10px 0;
    border-radius: 0 0 15px 15px;
    background-color: rgba(2, 57, 55, 1);
    color: #fff;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.m-0 {
    margin: 0 !important;
}

.pl-5 {
    padding-left: 5px;
}

.game-provider-count-text {
    color: rgba(114, 220, 217, 1);
}

.display-none, .game-provider-input-hide {
    display: none;
}

.inactive-game-button-1, .inactive-game-button-2, .inactive-game-button-3, .inactive-game-button-4 {
    width: 156px;
    height: 32px;
    padding: 5px 16px 9px 16px;
    gap: 8px;
    border-radius: 8px;
    opacity: 0.7;
    background: rgba(21, 21, 21, 1);
    border: 1px solid rgba(84, 84, 84, 1);
    color: rgba(84, 84, 84, 1);
    cursor: pointer;
}

.active-game-button-1, .active-game-button-2, .active-game-button-3, .active-game-button-4 {
    width: 156px;
    height: 32px;
    padding: 5px 16px 9px 16px;
    gap: 8px;
    border-radius: 8px;
    opacity: 0.7;
    background: rgba(21, 21, 21, 1);
    border: 1px solid rgba(114, 220, 217, 1);
    color: rgba(114, 220, 217, 1);
    cursor: pointer;
}

.disabled-game-button-1, .disabled-game-button-2, .disabled-game-button-3, .disabled-game-button-4 {
    width: 156px;
    height: 32px;
    padding: 5px 16px 9px 16px;
    gap: 8px;
    border-radius: 8px;
    opacity: 0.7;
    background: rgba(21, 21, 21, 1);
    border: 1px solid rgba(213, 211, 220, 1);
    color: rgba(213, 211, 220, 1);
}

.all-provider-count {
    color: rgba(114, 220, 217, 1);
}

.div-button-sport, .div-button-games, .div-button-casino, .div-button-lotto {
    display: inline-flex;
}

.w-select-provider{
    width: 180px;
}

.pr-10px{
    padding-right: 10px;
}

.p-relative{
    position: relative;
}

.p-absolute{
    position: absolute;
}

.tb-top-content{
    width: 560px;
    top: 0;
}

.pr20px{
    padding-right: 20px;
}

.navbar-language-2 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1f7e7b;
    border: 1px solid #50A198;
    border-radius: 24px;
    width: 80px;
    height: 40px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: .5rem;
    margin-right: .5rem;
    transition: all 300ms ease-out;
}

.language-div-wrapper {
    position: relative;
    display: flex;
}

.btn-change-lang {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 80px;
    text-align: center;
    margin: auto;
}

#minigameWithdrawConditionMinTurnoverMinCredit:disabled {
    border: 1px solid #303030 !important;
    background-color: #2A2A2A !important;
    color: #ADADAD !important;
}