@font-face {

    font-family: 'Krasar-regular';

    font-style: normal;

    font-weight: 400;

    src: url("../assets/fonts/Krasar-regular.TTF") format('woff');

}


.logo-show {
    width: 60px;
    height: 60px;

    /* 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;

}

.list-dropdown {
    margin-top: 20px !important;
}



.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; */
    /* max-width: 1776px; */
    max-width: 92vw;

    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%;

    height: 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: 40px;
        /* margin-left: 75px; */
    }
}

@media (max-width: 1310px) {
    .logo-margin {
        margin-left: 40px;
        /* 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;
    }

    .yuki12-games-filter-0 {
        padding-bottom: 0px !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 */



.dropdown-wrapper {

    color: #fff;

    width: auto;

    font-size: 15px;

    border-radius: 20px;

}

.dropdown-nav {

    display: inline;

}



.dropdown-nav ul {

    margin: 0;

    padding: 0;

    list-style: none;

    position: relative;

    display: inline-block;

}



.dropdown-nav li {

    cursor: pointer;

}

.dropdown-nav li ul {

    display: none;

}

.dropdown:hover .dropdown-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);

}

.dropdown-nav .list {

    padding: .25rem;

}

.dropdown-nav .list li:hover {

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

    border-radius: .375rem;

}



.dropdown-nav li ul li {

    position: relative;

    text-align: left;

    background: transparent;

    padding: 8px;

    z-index: 2;

    font-size: 14px;

    color: #ffffff;

}



.dropdown-nav li ul li span {

    padding: 0 5px 0 0;

}



.dropdown-nav li ul li span:hover,

.dropdown-nav li ul li span.active {

    color: #fff;

}



.dropdown-nav a span {

    color: #fff !important;

}

.text-soon {
    font-size: 20px !important;
    font-weight: bold !important;
    left: 35% !important;
    top: 45% !important;
}


div.pg>span.text-soon {
    font-size: calc(100% - 0px) !important;
    font-weight: bold !important;
    left: calc(32% - 10px);
}


@media (max-width: 1978px) {
    .text-soon {
        left: 30% !important;
        top: 45% !important;
    }
}

@media (max-width: 1770px) {
    div.pg>span.text-soon {
        font-size: calc(80%) !important;
        font-weight: bold !important;
        left: calc(28% - 10px) !important;
    }
}

@media (max-width: 1590px) {
    .text-soon {
        font-size: 16px !important;
        left: 25% !important;
        top: 40% !important;
    }

    div.m-game>a>div>span.text-soon {
        left: 35% !important;
    }
}

@media (max-width: 1370px) {
    .text-soon {
        font-size: calc(100% - 2px) !important;
        left: 25% !important;
        top: 45% !important;
    }
}


@media (max-width: 1330px) {
    div.pg>span.text-soon {
        font-size: calc(60%) !important;
        font-weight: bold !important;
        left: calc(28% - 10px) !important;
    }

    div.pg>div {
        border-radius: 30% !important;
    }
}

@media (max-width: 1150px) {
    .text-soon {
        font-size: calc(100% - 4px) !important;
        left: 25% !important;
        top: 45% !important;
    }
}

@media (max-width: 1000px) {

    div.dt>a>div>span.text-soon {
        font-size: calc(100% - 1px) !important;
    }

    .text-soon {
        font-size: 24px !important;
        left: calc(36% - 10px) !important;
        top: 45% !important;
    }

    div.m-game>a>div>span.text-soon {
        font-size: 22px;
        left: calc(36% - 10px);
    }

    div.pg>span.text-soon {
        font-size: calc(70%) !important;
        font-weight: bold !important;
        left: calc(28% - 10px) !important;
    }

    div.pg>div {
        border-radius: 17% !important;
    }
}

@media (max-width: 578px) {
    .text-soon {
        left: calc(30% - 8px) !important;
        top: 45% !important;
    }
}

@media (max-width: 540px) {
    .text-soon {
        font-size: 20px !important;
        left: calc(30% - 8px) !important;
        top: 45% !important;
    }

    div.dt>a>div>span.text-soon {
        font-size: calc(100% - 4px) !important;
    }

    div.m-game>a>div>span.text-soon {
        font-size: 20px !important;
        left: calc(34% - 10px) !important;
    }

    div.pg>span {
        font-size: 50% !important;
    }
}


@media (max-width: 400px) {
    .text-soon {
        font-size: 16px !important;
        left: calc(30% - 2px) !important;
        top: 45% !important;
    }

    div.dt>a>div>span.text-soon {
        font-size: calc(100% - 8px) !important;
    }

    div.m-game>a>div>span.text-soon {
        font-size: 14px !important;
        left: calc(34% - 10px) !important;
    }

    div.pg>span {
        font-size: 50% !important;
    }
}

@media (max-width: 312px) {
    .text-soon {
        font-size: 14px !important;
        left: calc(25%) !important;
    }

    div.m-game>a>div>span.text-soon {
        font-size: 12px !important;
        left: calc(34% - 10px) !important;
    }
}


@media (max-width: 769px) {
    .m-card {
        width: 90% !important;
        left: 5% !important;
    }
}


.btn-user {
    display: flex !important;
    flex-direction: column !important;
    align-items: start !important;
}