@font-face {

    font-family: 'Krasar-regular';

    font-style: normal;

    font-weight: 400;

    src: url(/file/Krasar-regular.TTF) format('woff');

}

html,body{

    background-color: rgb(40 48 70 / 1) !important;

    font-family: 'Krasar-regular';

    color: white;

}

.logo-show{
    width: 70px;
    height: 70px;
}


.px-content{

    padding-left: 1rem;
}
.px-content-70{
    margin-top: -70px;
}
.bg-content-banner{

    background-color: rgb(22 29 49 / 1);

}
.section{

    background-color: rgb(22 29 49 / 1);
    min-height: 100vh !important;

}

.sidebar {

    height: 70px;

    position: relative;

}



.sidebar img {

    width: 200px;

    height: 70px;

}



.sidebar-text {

    position: absolute;

    top: 55%;

    left: 64%;

    transform: translate(-50%, -50%);

    color: white;

}



.btn-button {

    font-size: .875rem;

    line-height: 1.25rem;

    border: 1px solid #374151 ;

    text-align: center;

    border-radius: 5px;

    color: #b4b7bd;

    cursor: pointer;

}

.btn-button:hover{

    background: radial-gradient(100% 100% at 50% 0, #20283d 0, #b53f3f 44%, #283046 100%) !important;

    border: 1px solid #F44336;

}

.btn-sidebar {

    cursor: pointer;

}

.btn-sidebar .image-sidebar{

    border-radius: 0.5rem;

}

.btn-sidebar .sidebar-text{

    font-weight: bold;

}

/* sidebar */

.sidebar a {

    list-style: none;

    margin: 0;

    padding: 5px 10px;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    /* background: radial-gradient(100% 100% at 50% 0, #5a5a5a 0, #353535 44%, #2a2a2a 100%); */

    background: radial-gradient(100% 100% at 50% 0, #283046 0, #283046 44%, #161d31 100%);

    position: relative;

    box-shadow: 0 5px 10px #000000b0;

    border-radius: 20px;

    margin-bottom: 10px;

    cursor: pointer;

    transition: all .3s;

    font-size: 14px;

    position: relative;

    width: 200px;
    color: #b53f3f;

}

.sidebar a.active,.sidebar a:hover {

    background: radial-gradient(100% 100% at 50% 0, #20283d 0, #b53f3f 44%, #283046 100%) !important;

    border: 1px solid #F44336;

}

.sidebar a img {

    width: 50px;

    margin-right: 5px;

    padding: 0 !important;

    height: auto;
    border-radius: 50%;
}

.sidebar a.active img ,.sidebar a:hover img {

    animation: x-floating-tab 1.5s infinite alternate;

}

.sidebar a span {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: center;

    padding-left: 10px;

    font-family: 'Krasar-regular';

    font-weight: bold;

    color: white;



}



@keyframes x-floating-tab {

    0% {

     -webkit-transform: translateY(0) rotate(0);

     transform: translateY(0) rotate(0);

 }

 50% {

     -webkit-transform: translateY(-5px) rotate(

 -1deg);

     transform: translateY(-5px) rotate(

 -1deg);

 }

 100% {

     -webkit-transform: translateY(0) rotate(0);

     transform: translateY(0) rotate(0);

 }

 }

/* sidebar */

/* lang */

    a{

        text-decoration: none;

    }

    .lang-wrapper {

        color: #fff;

        width: auto;

        font-size: 15px;

        border-radius: 20px;

    }

    .lang-nav {

        display: inline;

    }

    

    .lang-nav ul {

        margin: 0;

        padding: 0;

        list-style: none;

        position: relative;

        display: inline-block;

    }

    

    .lang-nav li {

        cursor: pointer;

    }

    .lang-nav li ul {

        display: none;

    }

    .language:hover .lang-nav li ul {

        position: absolute;

        top: 38px;

        right: 0px;

        display: block;

        background-color: rgb(40 48 70 / 1);

        width: 14rem;

        padding-top: 0px;

        z-index: 2;

        border-radius: 5px;

        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

    }

    .lang-nav .list{

        padding: .25rem;

    }

    .lang-nav .list li:hover {

        background-color: rgb(156 163 175 / 1);

        border-radius: .375rem;

    }

    

    .lang-nav li ul li {

        position: relative;

        text-align: left;

        background: transparent;

        padding: 8px;

        z-index: 2;

        font-size: 14px;

        color: #999;

    }

    

    .lang-nav li ul li span {

        padding: 0 5px 0 0;

    }

    

    .lang-nav li ul li span:hover,

    .lang-nav li ul li span.active {

        color: #fff;

    }

    

    .lang-nav a span {

        color: #fff !important;

    }

    

    .sl-flag {

        display: inline-block;

    }

    .btn-login {

        width: 100px;

    }

    .btn-lang {

        width: 50px;

        

    }

    .h-5 {

        height: 1.25rem;

    }

/* end lang */

/* modal */

    .modol-logo{

        width: 25%;

    }

    .modal-content {

        background-color: #000000c2 !important; 
        box-shadow: 0 5px 10px #fb5151b0;
        border: 1px solid #F44336;
    }

    .modal-header {

        border-bottom: unset !important; 

    }

    .modal-footer {

        border-top: unset !important; 

    }
    .submit-button {

        /* background-color: rgb(115 103 240 / 1) !important;  */
        background: radial-gradient(100% 100% at 50% 0, #20283d 0, #b53f3f 44%, #333333 100%) !important;
        border: 1px solid #F44336 !important;
        width: 100% !important; 
    } 
    .submit-button:hover {
        box-shadow: 0px 0px 15px #F44336;

    }

    .bg-input {
        background-color: #d9555575 !important;
        color: white !important; 

        border-color: transparent;
        border : 1px solid transparent;
    }
    .bg-input:focus ,    .bg-input:focus-visible{
        border-color: #f44336 !important;
        border : 1px solid #f44336 !important;
    }
    .form-control:focus {

        color: #ffffff !important; 

        outline: 0 !important; 

        box-shadow: 0px 0px 15px #F44336;
    }

    .col-form-label{

        color: white !important; 

        font-weight: bold !important; 

    }

    .modal-backdrop.show {

        opacity: 0.7 !important; 

    }
    .dots {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        gap: 5px;
    }
    
    .dots span {
        width: 15px;
        height: 15px;
        background-color: #F44336;
        border-radius: 50%;
        display: inline-block;
        animation: blink 0.3s infinite ease-in-out;
    }
    .dots span:nth-child(1) {
        animation-delay: 0.3s;
    }
    .dots span:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .dots span:nth-child(3) {
        animation-delay: 0s;
    }
    
    @keyframes blink {
        100%{
            opacity: 0.3;
        }
        0% {
            opacity: 1;
        }
    }
/* end modal */



/* header */

  .header-block.sticky{
        position: fixed;
        z-index: 99;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        height: 60px;
        left: 0;
        right: 0;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        transition: all .3s;
        background: rgb(40 48 70 / 1);
        box-shadow: 0px 0px 15px #F44336;
    }


    .navbarstk {

        position: fixed;

        z-index: 99;

        width: 100%;

        max-width: 1300px;

        margin: 0 auto;

        /* height: 60px; */
        height: 70px;

        left: 0;

        right: 0;

        border-bottom-right-radius: 15px;

        border-bottom-left-radius: 15px;

        transition: all .3s;

    }

/* header */

    .content{

        padding-top: 70px;

    }

    section{

        padding-left: 200px;

    }



    html[lang|="kh"] .game-title {
        font-size: 24px;
        z-index: 10;
    }
    html[lang|="en"] .game-title {
        font-size: 24px;
        font-weight: bold !important;
        z-index: 10;

    }

    .game-title img{

        width: 40px;

        margin-right: 5px;
        border-radius: 50%;

    }

    .yuki12-games a img,    .yuki12-games-filter a img{

        border-radius: 1rem !important;

    }

    .yuki12-games{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-gap: 10px;

    }
    .yuki12-games-filter{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        grid-gap: 10px;

    }



    .pg-grid-wrapper{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

        grid-gap: 10px;

    }

    .pg-grid-wrapper img ,.yuki12-games img,.yuki12-games-filter img{

        width: 100%;

        border: 2px solid #161d31;

        box-shadow: 0px 0px 7px #161d31;

        border-radius: 2rem;

        overflow: hidden;

        cursor: pointer;

    }

    .pg-grid-wrapper .game-show:hover img , .yuki12-games .game-show:hover img, .yuki12-games-filter .game-show:hover img{

        border: 2px solid #F44336;

        box-shadow: 0px 0px 15px #F44336;

    }



    /* model footer */

    #account-actions-mobile {

        position: fixed;

        left: 0;

        bottom: 0;

        z-index: 11;

        width: 100%;

        display: none;

    }



    #account-actions-mobile .-outer-wrapper {

        display: flex;

        align-items: flex-end;

    }



    #account-actions-mobile .-left-wrapper {

        border-top-left-radius: 10px;

        border-top-right-radius: 22px;

    }



    #account-actions-mobile .-center-wrapper {

        position: relative;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        align-items: center;

        z-index: 2;

        width: 74px;

        height: 74px;

        margin: 0 8px 16px;

        padding-bottom: 8px;

        color: #fff;

        /* background: linear-gradient(182deg, #161d31, #3a4460), center center; */

        background: #3a4460;

        border-radius: 50%;

    }



    #account-actions-mobile .-center-wrapper .-selected {

        transition: all .4s;

        background-size: 450px;

        background-repeat: no-repeat;

        height: 100%;

        width: 100%;

        background-position: 0 0;

        border-radius: 50%;

    }



    #account-actions-mobile .-center-wrapper .-selected,

    #account-actions-mobile .-center-wrapper .-selecting {

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        align-items: center;

        text-align: center;

    }



    .-selected h2 {

        position: absolute;

        font-size: 13px;

        bottom: -4px;

        font-weight: 300;

    }





    .-selected img {

        width: 74px !important;

        max-width: 74px !important;

        height: auto;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        border-radius: 50%;

        box-shadow: 0 0 10px #F44336;

        border: solid 1px #F44336;

    }

    .-selected img:hover {

        box-shadow: 0 0 10px #F44336;

        border: solid 1px #F44336;

    }



    #account-actions-mobile .-fake-center-bg-wrapper {

        position: absolute;

        left: 0;

        bottom: 0;

        z-index: 1;

        width: 100%;

        height: 50px;

        overflow: hidden;

    }



    #account-actions-mobile .-fake-center-bg-wrapper svg {

        position: absolute;

        left: 50%;

        bottom: 0;

        height: 108px;

        transform: translateX(-50%);

    }



    #account-actions-mobile .-fake-center-bg-wrapper svg path {

        fill: url(#rectangleGradient);

    }



    #account-actions-mobile .-right-wrapper {

        border-top-right-radius: 10px;

        border-top-left-radius: 22px;

    }



    #account-actions-mobile .-left-wrapper,

    #account-actions-mobile .-right-wrapper {

        /* display: inline-grid; */
        display: flex;

        align-items: end;

        flex: 1;

        z-index: 2;

        height: 70px;

        padding-bottom: 6px;

        background: #3a4460;

        /* background: linear-gradient(182deg, #3a4460, #161d31), center center; */

        border-top: 3px solid #F44336;

        cursor: pointer;

    }

    #account-actions-mobile .-item-wrapper {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-end;

        color: #fff;

        position: relative;

    }

    #account-actions-mobile .-item-wrapper .-textfooter {

        font-size: .875rem;

        color: #ffffff;

        transition: color .2s;

        position: absolute;

        bottom: 0;

        left: 50%;

        transform: translateX(-50%);

        white-space: nowrap;

        margin: 0 auto;

        margin-top: .25rem;

    }



    html[lang|="en"] .-textfooter a{
        color: white;
        font-family: 'Krasar-regular';
        font-weight: bold !important;
    }
    html[lang|="kh"] .-textfooter a{
        color: white;
        font-family: 'Krasar-regular';
    }

    #account-actions-mobile .-left-wrapper:hover .-textfooter a,

    #account-actions-mobile .-right-wrapper:hover .-textfooter a{

        color: #F44336;

    }
/* 
    .-item-wrapper.active a img{
        box-shadow: 0 0 15px #F44336;
        border: solid 1px #F44336;
    } */
    .-item-wrapper.active .-ic-img{
        padding-left: 0.1px;
    box-shadow: 0 0 10px #F44336;
    border: solid 1px #F44336;
    border-radius: 50%;
    }
    .-ic-img{
        margin-bottom: 6px;
    }
    .-ic-img img {

        width: 40px;
        height: 40px;
 
        border-radius: 50%;

    }
    .x-button-actions .active a{
        color: #F44336;
    }

    /* end mobile footer */

    .elementor img {

        height: auto;

        max-width: 100%;

        border: none;

        border-radius: 0;

        box-shadow: none;

    }

    .container-lg{

        max-width: 100%;

    }
    .block-banner{
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        background-color: rgb(22 29 49 / 1);
    }
    .section{
        padding: 20px;
    }

    .Banner {

        width: 100%;

        height: auto;

        position: relative;

        margin: 0 auto;


        overflow: hidden;
        background-color: rgb(40 48 70 / 1) !important;
        padding: 10px;
        border-radius: 10px;
    }
    .Banner .swiper-wrapper{
        height: auto;
    }

    .Banner .swiper-slide {

        width: 100%;

        max-width: 650px;

        height: auto !important;

        box-shadow: 0 0 0;

        background-size: 100%;

        margin-top: 0 !important;

        cursor: pointer;

    }

    .Banner .swiper-button-next, .swiper-button-prev {

        transform: scale(.6);

        font-weight: bold;

        color: #F44336;

        text-shadow: 0 0 10px black, 0 0 15px black;

    }
    .pt-click{
        margin-top: 20px ;
    }

    .Banner .swiper-button-next:hover, .swiper-button-prev:hover {


        color: #dabf3c;
    }

    .swiper-pagination-bullet {

        background-color: #F44336;

        padding: 5px;

    }

    /* coin  animation*/
    .game-show.last-4{
        display: none;
    }
    .card-page-block{
        background-color: rgb(40 48 70 / 1) !important;
        padding: 10px;
        border-radius: 10px;
    }
    @media (max-width: 1310px) {
        .logo-margin{
            margin-left: 75px;
        }
    }
    @media (max-width: 1000px) {

        .yuki12-games{

            grid-template-columns: 1fr 1fr;

            grid-gap: 10px;

        }

        .pg-grid-wrapper{

            grid-template-columns: 1fr 1fr 1fr 1fr ;

            grid-gap: 10px;

        }

        .pg-grid-wrapper img ,.yuki12-games img{

            border-radius: 1.5rem;

        }
        .game-show.last-one{
            display: none;
        }
        .yuki12-games-filter{

            display: grid;
    
            grid-template-columns: 1fr ;
    
            grid-gap: 5px;
    
        }
        html[lang|="kh"] .game-title {
            font-size: 20px;
            z-index: 10;
        }
        html[lang|="en"] .game-title {
            font-size: 20px;
            z-index: 10;
            font-weight: bold !important;
        }

    }

    @media (max-width: 768px) {
        .mobile-hide{
            display: none;
        }
        .yuki12-games a img,    .yuki12-games-filter a img{

            border-radius: 0.5rem !important;
    
        }
        .section ,.block-banner{
            padding-top: 10px;
        } 
         .pt-click {
            margin-top: 10px;
         }
        .px-content-70 {
            margin-top: 0;
        }
        .game-show.last-4{
            display: unset;
        }
        .yuki12-games-filter img {
            width: 90% !important; 
            margin: 0 auto;
            display: block;
        }
        .yuki12-games{
            grid-gap: 5px;
        }
        .yuki12-games-filter{
            padding-bottom: 110px !important;
        }
        .pg-grid-wrapper {
            padding-bottom: 110px !important;
        }
        .logo-show{
            display: none;
        }
    

        .pg-grid-wrapper{

            grid-template-columns: 1fr 1fr 1fr 1fr ;

            grid-gap: 5px;

            padding-bottom: 110px !important;

        }

        .pg-grid-wrapper img ,.yuki12-games img{

            border-radius: 1rem;

        }

        .sidebar {

            display: none !important;

        }

        section{

            padding-left: 0 !important;

        }

        .section{

            padding-bottom: 110px;

        }

        .px-content {

            padding-left: 0;

        }

        #account-actions-mobile {

            display: unset;

        }

        .container-lg{

            padding-left: 0px !important;

            padding-right: 0px !important;

        }

        .game-title {

            font-size: 18px;

            text-align: center;

        }
        .Banner .swiper-button-next, .swiper-button-prev {
             display: none;
        }

    }

    @media (max-width: 400px) {

        

    }


        /* loadingspin */
        .loadingspin {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: #000000b5;
            z-index: 9999;
            display: none;
        }
        .inloadingct {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .inloadingct img {
            width: 150px;
            height: auto;
            -webkit-animation: fa-spin 2s linear infinite ;
            animation: fa-spin 2s linear infinite ;
        }
        @-webkit-keyframes fa-spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
        
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
        
        @keyframes fa-spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
        
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
    /* loadingspin */