@font-face {



    font-family: 'Krasar-regular';



    font-style: normal;



    font-weight: 400;



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



}



html,body{



    background-color: #08293d !important;



    font-family: 'Krasar-regular';



    color: white;



}



.logo-show{

    width: 55px;
    height: 55px;

}





.px-content{



    padding-left: 1rem;

}

.px-content-70{

    margin-top: -70px;

}

.bg-content-banner{



    background-color: #154a68;



}

.section{



    background-color: #154a68;

    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 #154a68 ;



    text-align: center;



    border-radius: 5px;



    color: #b4b7bd;



    cursor: pointer;



}



.btn-button:hover{
    background: radial-gradient(100% 100% at 50% 0, #08293d 0, #095884 44%, #08293d 100%) !important;
    border: 1px solid #095884;
}



.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, #154a68 0, #154a68 44%, #08293d 100%);
    box-shadow: 0 5px 10px #154a68;



    border-radius: 20px;



    margin-bottom: 10px;



    cursor: pointer;



    transition: all .3s;



    font-size: 14px;



    position: relative;



    width: 200px;

    color: #154a68;



}



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



    background: radial-gradient(100% 100% at 50% 0, #08293d  0, #095884 44%, #08293d  100%) !important;



    border: 1px solid #095884;



}



.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: #08293d;



        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: #154a68;



        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 #095884;

        border: 1px solid #095884;

    }



    .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, #08293d  0, #154a68 44%, #08293d  100%) !important;

        border: 1px solid #095884 !important;

        width: 100% !important; 

    } 

    .submit-button:hover {

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



    }



    .bg-input {

        background-color: #21516c !important;

        color: white !important; 



        border-color: transparent;

        border : 1px solid transparent;

    }

    .bg-input:focus ,    .bg-input:focus-visible{

        border-color: #095884 !important;

        border : 1px solid #095884 !important;

    }

    .form-control:focus {



        color: #ffffff !important; 



        outline: 0 !important; 



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

    }



    .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: #095884;

        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: #08293d;
    box-shadow: 0px 0px 15px #095681;

    }





    .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 #103c56;
        box-shadow: 0px 0px 7px #154a68;



        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 #154a68;
    box-shadow: 0px 0px 15px #154a68;



    }







    /* 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, #08293d), center center; */



        background: #08293d;



        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 #095884;



        border: solid 1px #095884;



    }



    .-selected img:hover {



        box-shadow: 0 0 10px #095884;



        border: solid 1px #095884;



    }







    #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: #08293d;



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



        border-top: 3px solid #095884;



        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: #095884;



    }

/* 

    .-item-wrapper.active a img{

        box-shadow: 0 0 15px #095884;

        border: solid 1px #095884;

    } */

    .-item-wrapper.active .-ic-img{

        padding-left: 0.1px;

    box-shadow: 0 0 10px #095884;

    border: solid 1px #095884;

    border-radius: 50%;

    }

    .-ic-img{

        margin-bottom: 6px;

    }

    .-ic-img img {



        width: 40px;

        height: 40px;

 

        border-radius: 50%;



    }

    .x-button-actions .active a{

        color: #095884;

    }



    /* 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: #154a68;

    }

    .section{

        padding: 20px;

    }



    .Banner {



        width: 100%;



        height: auto;



        position: relative;



        margin: 0 auto;





        overflow: hidden;

        background-color: #08293d !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: #095884;



        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: #095884;



        padding: 5px;



    }



    /* coin  animation*/

    .game-show.last-4{

        display: none;

    }

    .card-page-block{

        background-color: #08293d !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 */