:root {   
    /* Custom CSS for this merchant only */
    /* Can be set from BO */
    --primary: #70daf4;
    --primary-background: linear-gradient(90deg, #1ef1ff 0%, #0090f8 100%);
    --hover-primary-background: linear-gradient(90deg, #1ef1ff 0%, #0090f8 100%);
    --body: linear-gradient(180deg, #121212 0%, #1f1a38 100%);
    --content: #0e0d22;
    --tertiary-background: #1d1734;
    --primary-linear-gradient: #000000;
    --text: #ffffff;
    --primary-text: #000000;
    --secondary-text: #ffffff;
    --icon-color: #ffffff;
    --line: #70daf4;

    --secondary-background: transparent;
    --content-background: linear-gradient(180deg, #1E1B45 0%, #08071A 100%);
    --text-opacity1: 0.5;
    --button-select-background: #000000;
    --button-select-shadow: 0px 0px 6px #70DAF4;

    /* Table */
    --p-datatable-header-cell-background: linear-gradient(90deg, #130A1C 0%, #4C256A 19%, #78267E 52%, #4C256A 79%, #130A1C 100%) !important;
    
    --table-head-background: transparent;
    --table-head-text: var(--text-light);
    --table-row-odd-background: var(--content);
    --table-row-even-background: var(--content);

    /* line type */
    --line1: rgba(255, 255, 255, 0.2);
    --line2: #F84DFF4D;
    --line3: #F84DFF;
    --line4: linear-gradient(90deg, #52FFB6 0%, #70DAF4 23%, #A85DFF 53%, #F84DFF 78%, #FF3B95 100%);
    --line5: #FFFFFF1A;
    --line6: linear-gradient(180deg, #52FFB6 0%, #70DAF4 23%, #A85DFF 53%, #F84DFF 78%, #FF3B95 100%);

    /* box-shadow */
    --box-shadow1: 0 0 8px #70daf4;
    --box-shadow2: 0px 0px 20px #F84DFF80;
    --box-shadow3: 0px 0px 30px #F84DFF80;
    --box-shadow4: 0px 0px 6px #70DAF4;

    /* menu nav */
    --hover-menu-nav: linear-gradient(90deg, #A85DFF80 0%, #F84DFF34 48%, #FF3B9500 100%);
    --menu-background: linear-gradient(180deg, #242057CC 0%, #2420579A 10%, #2420574D 22%, #24205700 100%);

    /* popup bg */
    --popup-background-arrow: #242057;
    --popup-background1: linear-gradient(180deg, var(--popup-background-arrow) 0%, #121212 100%);

    /* count number bg */
    --count-background: #A85DFF4D;

    /* inputs */
    --input-background: var(--primary-text);
    --input-placeholder-color: rgba(255, 255, 255, var(--text-opacity1));
    --input-border-color: #FFFFFF33;

    /* profile */
    --profile-banner-background: linear-gradient(180deg, #F84DFF00 0%, #F84DFF1A 47%, #F84DFF4D 100%);

    /* filled progress */
    --vip-primary: linear-gradient(90deg, #70DAF4 0%, #A85DFF 49%, #FF3B95 100%);

    /* status */
    --status-warning-background: #70DAF41A;
    --status-success-background: #70DAF41A;
    --status-danger-background: #70DAF41A;
    --status-info-background: #70DAF41A;

    /* promotions */
    --promotion-card-background: linear-gradient(180deg, #A85DFF99 0%, #A85DFF66 23%, #A85DFF00 100%);

    /* vip */
    --vip-banner-background: linear-gradient(103deg, #FF3B9580 0%, #A85DFF4D 42%, #A85DFF00 100%);
    --alternate-background: var(--primary-background);
    --alternate-text: var(--primary-text);
    --alternate-text-shadow: unset;

    /* bottom-nav */
    --bottom-nav-background: #121212;
}

/* main */
body {
    font-family: Noto Sans, sans-serif;
}

button.primary {
    border: 1px solid var(--line);
    font-weight: bold;
}

button.primary:hover {
    box-shadow: var(--box-shadow1);
}

button.primary-2 {
    font-weight: bold;
    border: 1px solid var(--line);
    background: var(--primary-background);
    color: var(--primary-text);
}

button.primary-2:hover {
    box-shadow: var(--box-shadow1);
}

button.primary-2-secondary {
    font-weight: bold;
    border: 1px solid var(--line);
    background: var(--secondary-background);
    color: var(--secondary-text);
}

button.primary-2-secondary:hover {
    box-shadow: var(--box-shadow1);
}

button:disabled, button.disabled,
button:disabled:hover, button.disabled:hover {
    background: var(--disabled-background) !important;
    box-shadow: unset !important;
    color: var(--disabled-text) !important;
}

button.secondary {
    font-weight: bold;
    border: 1px solid var(--line);
}

button.secondary:hover {
    box-shadow: var(--box-shadow1);
}

.qr-button button:hover {
    box-shadow: var(--box-shadow1);
    background: var(--primary-background);
}

.step {
    color: var(--text-light);
    background: var(--count-background);
}

.counter {
    background: var(--count-background);
}

.button-select {
    border-color: var(--line1);
    background: var(--button-select-background);
}

.button-select div {
    opacity: var(--text-opacity1);
}

.button-select.active,
.button-select:hover {
    box-shadow: var(--button-select-shadow);
}

.button-select.active div,
.button-select:hover div {
    opacity: 1;
}

.button-select div.bank-content {
    opacity: 1 !important;
}

.button-select.active div.bank-content,
.button-select:hover div.bank-content {
    opacity: var(--text-opacity1) !important;
}

.qr-button button i {
    filter: invert(1);
}

.qr-button button {
    font-weight: bold;
    border: 1px solid var(--line);
    background: var(--primary-background);
    color: var(--primary-text);
}

.p-fileupload-advanced {
    border-color: var(--line1);
}

.send-button {
    background: var(--primary-background) !important;
    color: var(--primary-text) !important;
}

.send-button:hover {
    box-shadow: var(--box-shadow1);
}

button.primary-2-tertiary {
    background: var(--secondary-background);
    color: var(--secondary-text);
    border: 1px solid var(--line);
}

button.primary-2-tertiary:hover {
    box-shadow: var(--box-shadow1);
    border: 1px solid var(--line);
    background: var(--hover-secondary-background);
}

/* table */
.p-datatable-table {
    border-collapse: collapse;
}

.theme-table .p-datatable-column-title { 
    font-weight: bold;
}

.theme-table tbody tr {
    border-bottom: 1px solid var(--line1);
}

.p-datatable-thead {
    background: var(--p-datatable-header-cell-background);
}

.p-datatable-tbody {
    background: var(--popup-background1) !important;
}

.theme-table tbody tr {
    background: transparent !important;
}

/* scrollbar */
.p-datatable-table-container::-webkit-scrollbar-thumb,
.p-dialog-content::-webkit-scrollbar-thumb,
.light-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--line1);
}

/* popover */
.p-popover-content {
    background: var(--popup-background1);
}

.p-popover:before {
    border-bottom-color: var(--line3) !important;
}

.p-popover:after {
    border-bottom-color: #242057;
}

.p-popover {
    border-color: var(--line3) !important;
    box-shadow: var(--box-shadow2);
}

/* modal */
.p-dialog {
    border: 1px solid var(--line3) !important;
    box-shadow: var(--box-shadow3);
    backdrop-filter: unset;
}

.p-dialog ._dog-form i {
    background-color: var(--input-placeholder-color);
}

.p-dialog::before,
.p-dialog .right-panel,
.p-dialog .right-panel::before {
    backdrop-filter: unset !important;
}

.p-dialog .left-panel {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 1px solid transparent;
    border-image: var(--line6) 1;
}

.p-dialog .right-panel {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.p-dialog .right-panel .header .border-line {
    border-bottom: 1px solid var(--line1);
}

.p-dialog-header {
    border-bottom: 1px solid transparent;
    border-image: var(--line4) 1;
}

.p-password-toggle-mask-icon {
    color: var(--dialog-text);
}

/* datepicker */
.p-datepicker-header {
    background: transparent !important;
}

.p-datepicker-panel {
    background: var(--popup-background1) !important;
    border: 1px solid var(--line3) !important;
    box-shadow: var(--box-shadow3) !important;
}

.p-datepicker-panel button.tertiary {
    background: var(--secondary-background) !important;
    color: var(--secondary-text) !important;
    border: 1px solid var(--line) !important;
}

.p-datepicker-panel button {
    font-weight: normal !important;
}

/* paginator */
.p-paginator {
    background: transparent !important;
}

.p-paginator-first:hover,
.p-paginator-prev:hover,
.p-paginator-page:hover,
.p-paginator-next:hover,
.p-paginator-last:hover {
    color: var(--content) !important;
}

/* select & multiselect */
.p-multiselect-overlay,
.p-select-overlay {
    background: var(--popup-background1) !important;
    border: 1px solid var(--line3) !important;
    box-shadow: var(--box-shadow3) !important;
}

/* nav-pill */
.nav-pill .pill.active, .nav-pill .pill:hover {
    color: var(--primary) !important;
}

.nav-pill .pill.active i, .nav-pill .pill:hover i {
    background-color: var(--primary) !important;
}

/* toast */
.p-toast-message-success, .p-toast-message-error {
    background: var(--tertiary-background);
}

/* top notification bar */
.notification-bar {
    color: var(--secondary-text) !important;
}

.notification-bar .button-close i {
    background-color: var(--secondary-text) !important;
}

/* top nav bar */
.topbar {
    border-color: var(--line1) !important;
}

.user-menu-wrapper {
    background: var(--popup-background1) !important;
    border-color: var(--line3) !important;
    box-shadow: var(--box-shadow2);
}

.user-menu-wrapper .content.border-b {
    border-bottom: 1px solid transparent;
    border-image: var(--line4) 1;
}

.user-nav-wrapper:hover {
    box-shadow: var(--box-shadow1);
}

.user-nav-wrapper .nav-item:hover,
.sidebar-active .nav-item:hover {
    color: var(--primary);
}

.user-nav-wrapper .nav-item.router-link-active,
.sidebar-active .nav-item.router-link-active,
.nav-item.panel.router-link-active {
    background: var(--hover-menu-nav);
}

.user-nav-wrapper {
    border-color: var(--line) !important;
}

.user-balance .currency {
    border-color: var(--line) !important;
}

.user-balance .amount {
    border-color: var(--line) !important;
}

.topbar .right-panel button.primary.icon-only {
    box-shadow: var(--box-shadow4);
}

.topbar .right-panel button.primary:hover {
    box-shadow: var(--box-shadow1);
}

.language-wrapper {
    border: 1px solid var(--line) !important;
}

.language-wrapper:hover {
    box-shadow: var(--box-shadow1);
}

.language-options-wrapper {
    background: var(--popup-background1) !important;
    border-color: var(--line3) !important;
    box-shadow: var(--box-shadow2);
}

/* top notification bar nav */
.notification .list {
    border-bottom-color: var(--line1) !important;
}

.notification .list .icon {
    background: var(--count-background) !important;
}

/* side bar */
.sidebar {
    background: var(--menu-background) !important;
    border-color: transparent !important;
}

.sidebar .sidebar-content {
    border-color: var(--line1) !important;
}

/* home */
.home-nav-button button.secondary:last-child {
    background: var(--primary-background);
    color: var(--primary-text);
}

.home-nav-button button.secondary:last-child:hover {
    box-shadow: var(--box-shadow1);
}

.main-content.home-game-content {
    border: 1px solid var(--line2);
    background: var(--content);
}

swiper-container {
    background: var(--content) !important;
}

.announcement {
    background: var(--content) !important;
    border-color: var(--line2) !important;
}

.announcement-speaker-bg {
    background: var(--count-background);
}

.game-card {
    background: var(--popup-background-arrow) !important;
}

.home-external-content {
    background: linear-gradient(180deg, #200D4D 0%, #200D4DB2 23%, #0C051D00 100%) !important;
    border: 1px solid var(--line2) !important;
}

.home-external-desc div:last-child {
    opacity: var(--text-opacity1);
}

.home-external-content button.secondary,
.home-external-content button.primary-2-secondary {
    background: var(--primary-background);
    color: var(--primary-text);
}

.home-external-content button.secondary:hover,
.home-external-content button.primary-2-secondary:hover {
    box-shadow: 0 0 8px #70daf4;
}

/* footer */
.footer-content {
    border-top: 1px solid transparent;
    border-image: var(--line4) 1;
}

/* nav tab */
.nav-tab::after {
    background: var(--line1) !important;
}

.nav-tab .tab.router-link-active,
.nav-tab .tab.active,
.nav-tab .tab:hover {
    color: var(--primary) !important;
}

body > div.p-dialog-mask.p-overlay-mask.p-overlay-mask-enter > div > div.p-dialog-content > form > div.flex.items-center.justify-end.gap-2.border-t.border-line {
    border-color: var(--line1) !important;
}

/* profile */
.profile-banner {
    background: var(--profile-banner-background);
}

.content-skin {
    background: var(--content-background);
    border-color: var(--input-border-color);
}

.content-skin button.secondary {
    background: var(--primary-background);
    color: var(--primary-text);
}

.content-skin button.secondary:hover {
    box-shadow: var(--box-shadow1);
}

.content-skin .wallet-action button.secondary {
    background: inherit;
    color: inherit;
}

.content-skin .wallet-action button.secondary:hover {
    box-shadow: unset;
    background: var(--hover-secondary-background);
}

.progress {
    background: var(--input-border-color);
}

.content-skin .rounded-lg {
    background: var(--content);
    border-color: var(--line5);
}

.account-container {
    color: var(--input-placeholder-color);
}

.account-container hr {
    border-color: var(--input-placeholder-color);
}

body > div.p-dialog-mask.p-overlay-mask.p-overlay-mask-enter > div > div.p-dialog-content > form > div.flex.justify-between.border-t.border-line.pt-6.mt-6 {
    border-top: 1px solid transparent;
    border-image: var(--line4) 1;
}

/* prmotions */
.promotion-card {
    background: var(--promotion-card-background);
}

.promotion-card .content div.text-sm,
.promotion-card .content div span.text-sm.font-semibold:first-child {
    opacity: var(--text-opacity1);
}

/* vip */
.vip-banner-cont button.alternate {
    color: var(--alternate-text);
    border: 1px solid var(--line);
    font-weight: bold;
}

.vip-banner-cont button.alternate:hover {
    box-shadow: var(--box-shadow1);
}

.vip-content-alternate::before {
    background: var(--line3) !important;
}

.vip-content-alternate.vip-banner .text-center div {
    opacity: var(--text-opacity1);
}

.vip-content-alternate .theme-table thead {
    background: var(--p-datatable-header-cell-background);
}

.vip-user .left-panel .content-skin .items-center div .text-sm,
.vip-user .left-panel .content-skin .flex.items-center.gap-3 div,
.vip-user .right-panel .content-skin .relative .pt-2,
.vip-user .right-panel .content-skin .grid .items-center div:last-child {
    opacity: var(--text-opacity1);
}

.vip-user hr {
    border-color: var(--line1);
}

.vip-primary-text {
    color: var(--primary) !important;
}

.vip-rank .rank .icon {
    background: var(--count-background)  !important;
}

/* wallet modal */
.balance-content {
    border: unset !important;
    background: var(--count-background) !important;
}

.balance-content .text-text {
    opacity: var(--text-opacity1);
}

.deposit-content div:nth-child(5) > div.flex.items-center.justify-between.gap-4 > div.text-text {
    opacity: var(--text-opacity1);
}

.deposit-content div:nth-child(5) button {
    font-weight: normal;
    border-color: var(--line1);
}

.deposit-content div:last-child.border-line {
    border-color: var(--line1);
}

.deposit-content div:last-child.border-line,
.withdrawal-content div:last-child.border-line {
    border-color: var(--line1);
}

.bank-account-content .nav-tab .rounded-full {
    background: var(--count-background);
}


/* referral */
.referral-container .page-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 270px;
    border-radius: 20px;
    padding: 40px;
    background: url('/img/referral-banner.png'), var(--vip-banner-background);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    box-shadow: var(--content-shadow);
    border: 1px solid var(--line3);
}

.referral-container .reward-box {
    background: var(--content-background) !important;
}

.referral-container .content-skin .rounded-lg {
    background: var(--count-background);
}

.referral-container .content-skin.top {
    background: var(--vip-banner-background) !important;
    border-color: var(--line3);
}

.referral-container .content-skin.top button.learn-more {
    background: transparent;
    color: var(--text) !important;
}

.referral-container .content-skin.top button:last-child {
    color: var(--primary-text) !important;
}

.referral-box hr {
    border-color: var(--line1) !important;
}

/* general info */
.general-content {
    background: var(--content);
}

/* contact us */
.contact-us .rounded-lg {
    background: var(--count-background);
}

.balance-content {
    /* position: sticky;
    top: 0; */
    padding: 10px 16px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--line);
}

.group-col-table .theme-table .p-datatable-table {
    border-collapse: separate !important;
}

.group-col-table .theme-table th {
    border-color: var(--line) !important;
}

.group-col-table .theme-table td {
    border-bottom: 1px solid var(--line1) !important;
}

@media screen and (max-width: 767px) {
    /* main */
    .p-dialog {
        /* background: var(--menu-background); */
        border-bottom: unset !important;
    }

    /* topbar */
    .topbar {
        border-bottom: unset !important;
    }

    /* bottom nav */
    .bottom-nav {
        background: var(--bottom-nav-background);
    }

    .bottom-nav-item.router-link-active i {
        background-color: var(--primary) !important;
    }

    .bottom-nav-item.router-link-active .bottom-nav-title {
        color: var(--primary) !important;
    }

    /* menu */
    .sub-item.active {
        color: var(--text) !important;
        background: var(--hover-menu-nav);
    }

    .sidebar-content .nav-item.router-link-active {
        background: var(--hover-menu-nav);
    }

    /* profile */
    .mobile-profile-banner swiper-container {
        background: unset !important;
    }

    .mobile-profile-banner {
        background: var(--profile-banner-background);
    }

    /* transactions */
    .transaction-card-cont .content-skin {
        background: transparent;
    }

    /* vip */
    .vip-banner-cont .vip-content-alternate {
        border-radius: 20px !important;
        border: 1px solid var(--line3) !important;
    }

    .vip-content-alternate::before {
        border-radius: 20px !important;
        border: unset !important;
    }

    .vip-banner-cont .vip-content-alternate::before {
        -webkit-mask: unset !important;
        background: linear-gradient(129deg, #FF3B9580 0%, #A85DFF4D 42%, #A85DFF00 100%) !important;
    }

    /* wallet */
    .wallet-balance {
        background: var(--count-background);
        border: 0;
    }

    .wallet-content button {
        background: transparent;
        border-color: var(--line);
        text-align: left;
    }

    /* referral */
    .referral-container .page-banner {
        background: url('/img/referral-banner.png'), var(--vip-banner-background);
    }
}