:root {

    --st-color-1: #cc00cc;
    --st-color-2: #b300b3;
    --st-color-3: #800080; /* main theme */
    --st-color-4: #4d004d;
    --st-color-5: #330033;
    --st-color-6: #1a001a; /* 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(0deg, #8350e6, #6b0899);
}

    .x-header .-menu-wrapper .nav-link 
    {
        background: linear-gradient(180deg, #6627a3, #290948);
    }
    .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:#FFF;
    }

@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);
        }
    }
    @media (max-width: 991.98px) {
        .x-index-top-container .-games-provider-wrapper .-menu-index-page 
        {
            background: linear-gradient(178deg, #6b0899, #6b0899);
        }
    }

    .x-menu-provider .nav-link {
        /* background: linear-gradient(180deg, #24416b, #16325b); */
        background: linear-gradient(180deg, #6627a3, #290948);
        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);

      
    .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);
        }
    }