:root {    
    /* main attr */
    --body-width: 100%;
    --main-font-size: 12px;
    --sub-font-size: 16px;
    --third-font-size: 14px;
    --content-shadow: 0px 3px 6px #00000029;
    --text-danger: #ff574a;
    --hover-tertiary-background: var(--tertiary-background);
    --alternate-background: linear-gradient(97deg,  #FFD052, #F2902A 100%);
    --alternate-text: #ffffff;
    --alternate-text-shadow: 0px 2px 3px #71380080;

    /* Statuses */
    --status-success: #57df57;
    --status-danger: #ff574a;
    --status-warning: #ff9a23;
    --status-info: #7d5dff;
    --status-warning-background: #242611;
    --status-success-background: #183519;
    --status-danger-background: #242214;
    --status-info-background: #2f2347;

    /* Toast */
    --toast-background: var(--secondary-background);
    --toast-text-color: var(--text-light);
    --toast-border-color: var(--line);
    --toast-icon-success-color: var(--status-success);
    --toast-icon-fail-color: var(--status-danger);    

    /* Inputs */
    --input-padding-x: 14px;
    --input-padding-y: 10px;
    --input-small-padding-x: 10px;
    --input-small-padding-y: 6px;
    --input-border-color: var(--line);
    --input-border-radius: 8px;
    --input-background: var(--content);
    --input-text-color: var(--text-light);
    --input-placeholder-color: #b7b6c6;
    --input-box-shadow: none;
    --input-focus-shadow: var(--primary);
    --input-disabled-color: var(--text);
    --input-disabled-background: var(--disabled-background);
    --button-icon-padding-y: var(--input-small-padding-x);
    --button-icon-padding-x: var(--input-small-padding-x);

    /* Select */
    --select-option-text: var(--secondary-text);
    --select-option-selected-background: var(--secondary-background);
    --select-overlay: var(--input-background);

    /* button */
    --button-border-radius: 8px;
    --button-padding-x: 14px;
    --button-padding-y: 7px;
    --button-small-padding-x: 10px;
    --button-small-padding-y: 3px;
    --button-icon-width: 18px;
    --button-icon-height: 18px;
    --sub-button-padding-y: 11px;
    --sub-button-small-padding-y: 6px;
    --preset-button-padding-y: 10px;
    --nav-button-padding-x: 12px;
    --nav-button-padding-y: 10px;

    /* icon */
    --icon-width: 1.333rem;
    --icon-height: 1.333rem;
    --icon-invert: 0;

    /* dialog */
    --dialog-text: var(--text-light);
    --dialog-input-title-text: var(--text);

    /* nav item */
    --nav-item-border-radius: 8px;
    --nav-item-text: var(--text);
    --nav-item-text-hover: var(--text-light);
    --nav-item-icon-hover: var(--primary-background);
    --bottom-nav-background: var(--secondary-background);
    --bottom-nav-border-color: var(--primary);

    /* Table */
    --table-head-background: var(--secondary-background);
    --table-head-text: var(--text);
    --table-row-text: var(--text);
    --table-row-hover-background: var(--content);
    --table-row-odd-background: var(--tertiary-background);
    --table-row-even-background: var(--tertiary-background);
    --table-border-width: 0;
    --table-border-color: unset;
    --table-wrapper-border-radius: 10px 10px 0px 0px;
    --table-wrapper-border-width: 1px;
    --table-wrapper-border-color: var(--line);
    
    /* Main */
    --container-width: 1536px;

    /* Footer */
    --footer-nav-text: var(--text-light);
    --footer-nav-item-text: var(--text);
    --reserve-line: var(--line);

    /* vip */
    --vip-primary: #FFD052;
    --vip-banner-background: linear-gradient(157deg, rgba(91,80,49,1) 0%, rgba(44,42,38,1) 35%, rgba(27,29,32,1) 55%, rgba(27,29,32,1) 70%, rgba(44,42,38,1) 90%, rgba(91,80,49,1) 100%);
    --vip-banner-background-mobile: linear-gradient(180deg, #504835 0%, #20222A 100%);
    --vip-banner-border-color: linear-gradient(to bottom, #FFD052, #282B37);

    /* KYC */
    --kyc-verify: var(--primary);

    /* Swiper */
    --swiper-pagination-color: var(--text-light);
    --swiper-pagination-bullet-inactive-color: var(--text);
    --swiper-pagination-bottom: 16px;

    /* Toggle switch */
    --p-toggleswitch-width: 40px;
    --p-toggleswitch-height: 20px;

    /* Skeleton background */
    --skeleton-background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255 255 255 / 10%), rgba(255, 255, 255, 0));

    /* wallet right panel background */
    --backdrop-filter: blur(20px) brightness(0.9);

    /* Annoucement pop up icon background */
    --announcement-popup-background: var(--line);

    /* footer image */
    --license-grayscale: grayscale(1);
    --license-age: url('/img/license/18+.png');
    --license-curacao: url('/img/license/gaming-curacao.png');
    --license-mga: url('/img/license/MGA.png');
    --license-aware: url('/img/license/gamble-aware.png');
    --license-commission: url('/img/license/gambling-commission.png');

    /* qr frame image */
    --qr-frame-image: '/img/ref-frame-dark.png';
    --qr-frame-width: 230;
    --qr-frame-height: 230;

    /* Editable */
    --primary: #7FEB6B;
    --primary-linear-gradient: linear-gradient(to bottom, #7CEA68 0%, #38CA22 100%);
    --primary-background: linear-gradient(to bottom, #7CEA68 0%, #38CA22 100%);
    --hover-primary-background: #7FEB6B;
    
    --body: #20222A;
    --content: #1C1F26;
    --content-linear-gradient: linear-gradient(180deg, #22252E, #1C1F26 100%);
    --secondary-background: #22252E;
    --hover-secondary-background: #272D3C;
    --secondary-linear-gradient:  linear-gradient(97deg, #22252E, #1C1F26 100%);
    --tertiary-background: #1C1F26;
    --disabled-background: #22252E;

    --text: #C1C1C4;
    --text-light: #fff;   
    --primary-text: #282B37;
    --secondary-text: #C1C1C4;
    --tertiary-text: #C1C1C4;
    --disabled-text: #656f6d;

    --icon-color: #C1C1C4;
    --line: #282B37;

    --sidebar-background: var(--secondary-background);
    --dialog-background: var(--content);
    --nav-item-hover-background: var(--secondary-background);

    --primary-icon-color: var(--icon-color);
    --step-background: var(--primary);
    --counter-background: var(--primary-text);
    --primary-border-color: var(--primary-text);
    --step-text: var(--primary-text);

    /* 2 primary color */
    --primary-2: var(--primary);
    --primary-2-background: var(--primary-background);
    --hover-primary-2-background: var(--hover-primary-background);
    --primary-2-secondary-background: var(--secondary-background);
    --hover-primary-2-secondary-background: var(--hover-secondary-background);
    --primary-2-tertiary-background: var(--tertiary-background);
    --hover-primary-2-tertiary-background: var(--hover-tertiary-background);
    
    --primary-2-text: var(--primary-text);
    --primary-2-secondary-text: var(--secondary-text);
    --primary-2-tertiary-text: var(--tertiary-text);
    /* End Editable */

    /* Auto bind color */
    --wallet-right-panel-background: var(--content);
    --game-card-background: var(--secondary-background);
    --balance-cont-background: var(--content);
    --icon-background: var(--secondary-background);
    --text-vip-table: var(--text);
    --promo-valid-background: var(--p-mask-background);
    /* End Auto bind color */
}

@media screen and (max-width: 767px) { 
    :root {  
        --sub-font-size: 14px;
        --third-font-size: 12px;
        --button-padding-y: 8.5px;
        --button-small-padding-y: 3.5px;
    }
}

@media screen and (max-width: 376px) {
    :root {  
        --main-font-size: 9px;
        --sub-font-size: 11px;
        --third-font-size: 9px;
        --button-padding-y: 8px;
        --button-padding-x: 10px;
    }
}

@media screen and (max-width: 250px) {
    :root {  
        --qr-frame-width: 180;
        --qr-frame-height: 180;
    }
}