:root {

    --st-color-1: #cc00cc;
    /* --st-color-2: #b300b3; */
    --st-color-2: #b90505;
    --st-color-3: #800080;
    /* main theme */
    --st-color-4: #4d004d;
    --st-color-5: #330033;
    /* --st-color-6: #1a001a; */
    --st-color-6: #720000;
    /* 15% */
    --st-color-7: #000000;
    /* 10%  4d4d4d*/



    --st-color-8: #699A07;
    --st-color-9: #4D7400;
    --st-color-10: var(--st-color-6);
    /* disable color */



    --st-color-11: #0a0e0b;
    --st-color-12: #2b455b;

    --st-color-15: #0a0e0b;


    /*     --hsl-val:154, 11%;
    --st-color-1: hsl(var(--hsl-val), 70%);
    --st-color-2: hsl(var(--hsl-val), 60%);
    --st-color-3: hsl(var(--hsl-val), 37%);
    --st-color-4: hsl(var(--hsl-val), 27%);
    --st-color-5: hsl(var(--hsl-val), 15%); */


    --invert-text-color-1: #000;
    --invert-text-color-2: rgb(255, 255, 255);

    /* --brand: hsl(200 100% 50%); */

    --white: 255, 255, 255;
    /* --white-50 : rgba(255,255,255,0.5); */
    --nav-link-active: 255, 255, 255;
}

/* ใค้ปุ่มสิทธิพิเศษ */
#rectangleGradient {
    --color-stop: var(--st-color-2);
    --color-bot: var(--st-color-6);
}

body,
html {
    /* background-color:var(--st-color-6);

    background-image: linear-gradient(60deg, #360063 60%, #3c2760 60%); */
    /* background-image: linear-gradient(0deg, var(--st-color-5),var(--st-color-end)); */
    background-position: 0 100%;
    background-attachment: fixed;
    background-image: url(../images/bg.png);
}

@media only screen and (max-width: 600px) {

    body,
    html {
        background-position: 0 100%;
        background-attachment: fixed;
        background-image: url(../images/bg-moblie.png);
    }
}



::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: var(--st-color-6);
}

::-webkit-scrollbar-track {
    background: var(--st-color-7);
}

.x-header {
    background: linear-gradient(rgb(180 1 35), rgb(86 9 9)) !important;
}

.x-header .-menu-wrapper .nav-link {
    /* background-image: linear-gradient(90deg, #720303, #ae0303, #6a0000); */
    background-image: linear-gradient(180deg, #b90505, #b2000d, #720000) !important;
    border: solid 2px;
    border-right-color: #b80505;
    border-bottom-color: #eeff00;
    border-left-color: #8e0303;
}

.x-header .-menu-wrapper .nav-link:hover {
    background: linear-gradient(180deg, var(--st-color-2), var(--st-color-5));
}

.x-header .-menu-wrapper .nav-link.-active {
    background: linear-gradient(180deg, var(--st-color-11), var(--st-color-12));
    text-shadow: 2px 2px 1px #222;
}

.x-header .-menu-wrapper .nav-link.-inactive {
    background: var(--st-color-10) !important;
}


.x-logged .-balance-container .-user-balance {
    background: var(--st-color-6);
}


.x-feed-news-header .-feed-news-inner-wrapper {
    background-color: var(--st-color-12);
    border-radius: 0 0 0px 0px;
}

.x-feed-news-header .-feed-news-inner-wrapper .-track .-track-item {
    color: #000 !important;
}

@media (max-width: 991.98px) {
    .x-logged .-profile-container .-inner-wrapper {
        background: var(--st-color-6);
    }

    .x-index-top-container .-heading-title {

        background: var(--st-color-15);
    }
}


/*.x-menu-provider ( menu left ) --------------------  
*/
@media (min-width: 992px) {
    .x-menu-provider {
        /* background: #091943; */
        /* background: linear-gradient(178deg, #6b0899, #6b0899); */
        background: linear-gradient(360deg, #510000, #6a0000) !important;
    }
}

@media (max-width: 991.98px) {
    .x-index-top-container .-games-provider-wrapper .-menu-index-page {
        /* background: linear-gradient(178deg, #6b0899, #6b0899); */
        background: linear-gradient(360deg, #510000, #6a0000) !important;
    }
}

.x-menu-provider .nav-link {
    /* background: linear-gradient(180deg, #24416b, #16325b); */
    /* background: linear-gradient(180deg, #6627a3, #290948); */
    background-image: linear-gradient(90deg, #860303, #ae0303, #7e0202) !important;
    box-shadow: 0 4px 4px rgb(0 0 0 / 35%);
    /* color: var(--invert-text-color-1); */

}

@media (min-width: 992px) {
    .x-menu-provider .nav-link:hover {
        /* background: linear-gradient(180deg, #3073d8, #1a4687);
            box-shadow: 0 4px 4px rgb(0 0 0 / 25%); */
        background: linear-gradient(180deg, var(--st-color-2), var(--st-color-5));

    }

    .x-menu-provider .nav-link:hover::before {
        background: hsla(0, 0%, 100%, 1);
    }

    .x-menu-provider .nav-link:hover .-text-nav-menu.-title {
        text-shadow: 2px 2px 1px #222;
    }

    .x-menu-provider .nav-link:hover .-text-nav-menu.-title-trans {
        color: rgba(var(--nav-link-active), 0.8) !important;

    }

}


.x-menu-provider .nav-link.active:before {

    background: hsla(0, 0%, 100%, 1);

}


/* .x-menu-provider .nav-link .-text-nav-menu.-title {
    color: var(--invert-text-color-1);
}
.x-menu-provider .nav-link .-text-nav-menu.-title-trans {
    color: var(--invert-text-color-2);
}
.x-menu-provider .nav-link .-text-nav-menu.-title-mobile {
    color: var(--invert-text-color-1);
} */

/* .nav-link.active */
.x-menu-provider .nav-link.active {
    background: linear-gradient(180deg, var(--st-color-2), var(--st-color-4));
}

.x-menu-provider .nav-link.active .-text-nav-menu.-title {
    color: rgba(var(--nav-link-active), 1) !important;
    text-shadow: 2px 2px 1px #222;
}

.x-menu-provider .nav-link.active .-text-nav-menu.-title-trans {
    color: rgba(var(--nav-link-active), 0.7) !important;
}


.x-logged .-profile-container .-btn-wrapper .-profile-name {
    /* margin-right: 2px;
        color: #c4c4c4; */
    color: var(--invert-text-color-1);
}

.btn.-btn-withdraw,
.btn.-btn-deposit {
    box-shadow: 0 2px 4px rgb(0 0 0 / 50%), 0 1px 2px hsl(0deg 7% 92% / 24%);
}




/*.x-modal-account-menu-mobile (Slide Menu right  MObile view) --------------------  
*/

.x-modal-account-menu-mobile {
    background: linear-gradient(137deg, var(--st-color-3), var(--st-color-4) 95%);
}

.x-modal-account-menu-mobile .navbar-nav .nav-item {
    background: var(--st-color-6);
}

.x-modal-account-menu-mobile .-modal-profile-mobile .-balance-container .-user-balance {
    background: var(--st-color-7);
}

/*.x-modal --------------------  
*/

.x-modal.-v2 .-modal-content {

    background: var(--st-color-4) !important;
}

.x-modal.-v2 .-modal-main-account .-modal-content {
    background: var(--st-color-5) !important;
}

.x-modal.-v2 .-modal-main-account .-modal-content .-modal-body .-layout-account {
    background-color: var(--st-color-7) !important;
}

.x-modal.-v2 .close {
    color: var(--st-color-1);
}

.x-modal-account-security-tabs.-v2 .-btn {
    background: linear-gradient(180deg, var(--st-color-7), var(--st-color-7));
}

.x-modal-account-security-tabs.-v2 .-btn.-active {
    background: var(--st-color-4) !important;

    /*ต้องเหมือนกัน .x-modal.-v2 .-modal-main-account .-modal-content  */
}


.x-modal-account-security-tabs.-v2 .-btn:not(.-active):hover {
    background: linear-gradient(180deg, var(--st-color-6), var(--st-color-7));
}

.x-modal.-v2 .close.-in-tab {
    color: var(--st-color-1);
    background: var(--st-color-5);
}


@media (max-width: 991.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-bottom-wrapper {
        background: unset;
    }
}

.x-modal.-v2 .form-control,
.x-modal.-v2 .x-form-control {
    background-color: var(--st-color-7);
}

.x-modal-account-menu .navbar-nav .nav-item {
    background: linear-gradient(180deg, var(--st-color-3), var(--st-color-5));
    /*  background: var(--st-color-3); */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.x-modal-account-menu .navbar-nav .nav-item.active,
.x-modal-account-menu .navbar-nav .nav-item:hover {
    /* background: linear-gradient(180deg,var(--st-color-3),var(--st-color-5)); */
    background: var(--st-color-5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}




/*  popup Confirm box  --------------------  
*/
.vex.vex-theme-plain .vex-content {
    background: var(--st-color-6);
}


/* Account footer (mobile view) 
*/
#account-actions-mobile .-left-wrapper,
#account-actions-mobile .-right-wrapper {
    /* background: linear-gradient(0deg, #8350e6, #6b0899); */
    background-image: linear-gradient(180deg, #b90505, #b2000d, #720000) !important;
    border: solid 2px;
    border-right-color: #b80505;
    border-top-color: #eeff00;
    border-left-color: #8e0303;


    .gradient__under {
        stop-color: var(--st-color-2);
    }

    .gradient__under-secondary {
        stop-color: var(--st-color-6);
    }


    /* สีตัวหนงสือใต้ thumbnail*/
    /* .x-game-list-item-macro .-title { color:var(--invert-text-color-1); }  */


    /* สีจำนวนเงิน */
    .x-logged .-balance-container .-amount {
        color: var(--st-color-2);
    }


    /* สีรอบ thumbnail เกม */
    .x-game-list-item-macro .-inner-wrapper .-cover-img {

        border: 1px solid;
        border-color: var(--st-color-5);
    }

    @media (max-width: 767.98px) {
        .x-game-list-item-macro .-inner-wrapper .-cover-img {
            border: 1px solid;
            border-color: var(--st-color-5);
        }
    }
}