@import url("https://fonts.googleapis.com/css2?family=Battambang:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
* {
    margin: 0;
    padding: 0
}

@font-face {
    font-family: "icomoon";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: "icomoon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    letter-spacing: 0.5px;
    font-family: "Inter", "Battambang";
    color: #3785d8;
    user-select: none;
    background-color: transparent !important
}
#btnLogin , #btnRegister{
    color: white;
}
body .error {
    border: 1px solid #ce0b0b !important
}

body #bg-loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}

body #bg-loading .icon-spinner-2:before {
    content: "\e001"
}

@keyframes anim-rotate {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

body #bg-loading .spinner {
    position: absolute;
    font-size: 4em;
    height: 1em;
    line-height: 1;
    margin: 0.5em;
    animation: anim-rotate 2s infinite linear;
    color: #3785d8;
    text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.3)
}

body #bg-loading .spinner--steps {
    animation: anim-rotate 1s infinite steps(8)
}

body #bg-loading .spinner--steps2 {
    animation: anim-rotate 1s infinite steps(12)
}

body .container {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column
}

body .container .box-logo {
    width: 100%;
    height: 110px;
    /* background: url("../image/top.png") no-repeat center center; */
    background-size: cover;
    display: flex
}

body .container .box-logo .logo {
    width: 300px
}

body .container .box-logo .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

body .container .box-contain {
    width: 100%;
    /* height: 600px; */
    /* background: url("../image/bg2022.png") no-repeat center center; */
    background-size: cover
}

body .container .box-contain .contain-login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}


body .container .box-contain .contain-login .login {
    width: 100%
}

body .container .box-contain .contain-login .login .box-form {
    width: 100%;
    /* background: linear-gradient(151deg, #303030ba, #000000c2);
    border: 2px solid #E3CD94;
    box-shadow: 0px 0px 15px #DCAA35; */
    border: 2px solid #a065ca;
    box-shadow: 0px 0px 15px #a065ca;
    color: white;
    /* background-color: #fff; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 20px;
    padding: 15px 0 30px 0;
    box-sizing: border-box
}

body .container .box-contain .contain-login .login .box-form .box-title {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center
}

body .container .box-contain .contain-login .login .box-form .box-title .mtitle {
    width: 100%;
    font-size: 2rem;
    font-weight: 900;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

body .container .box-contain .contain-login .login .box-form .box-title .mtitle img {
    width: 50px;
    filter: brightness(0) invert(1);
}

body .container .box-contain .contain-login .login .box-form form {
    width: 90%;
    height: 80%;
    margin: auto
}

body .container .box-contain .contain-login .login .box-form form .box-input {
    width: 100%;
    height: 40px;
    border-radius: 15px;
    border: 2px solid #a065ca;
    box-shadow: 0px 0px 15px #a065ca;
    overflow: hidden;
    display: flex;
    flex-direction: row
}

body .container .box-contain .contain-login .login .box-form form .box-input .icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center
}

body .container .box-contain .contain-login .login .box-form form .box-input .icon svg {
    width: 40px;
    height: 22px;
    fill: #b2afa8
}

body .container .box-contain .contain-login .login .box-form form .box-input .icon img {
    object-fit: contain
}

body .container .box-contain .contain-login .login .box-form form .box-input input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 20px;
    padding-left: 10px;
    font-family: "Inter", "Battambang"
}

body .container .box-contain .contain-login .login .box-form form .box-input input::placeholder {
    color: #b2afa8;
    font-size: 1rem;
    text-transform: capitalize;
    line-height: 2rem
}

body .container .box-contain .contain-login .login .box-form form .check-box {
    margin-top: 10px;
    display: flex;
    align-items: center
}

body .container .box-contain .contain-login .login .box-form form .check-box label {
    font-size: 1rem;
    line-height: 1rem;
    margin-left: 10px
}

body .container .box-contain .contain-login .login .box-form form .box-btn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

body .container .box-contain .contain-login .login .box-form form .box-btn .btn {
    font-family: "Inter", "Battambang";
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, rgba(255, 255, 255, 0.19) 48.96%, rgba(0, 0, 0, 0.19) 53.65%), linear-gradient(90deg, #261934 0%, #a065ca 50.94%, #261934 100%);
    border: 2px solid #a065ca;
    box-shadow: 0px 0px 15px #a065ca;
    outline: none;
    border-radius: 20px;
    font-size: 1.4em;
    font-weight: 900;
    line-height: 1.4em;
    letter-spacing: 1px;
    padding: 5px;
    margin:20px 0;
    cursor: pointer;
    transition: ease-in-out 0.2s;
    text-transform: uppercase;
    width: 90%;
}

body .container .box-contain .contain-login .login .box-form form .box-btn .btn:hover {
    transform: scale(1.07)
}

body .container .box-contain .contain-login .login .box-form form .box-btn .language {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px
}

body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon {
    width: 50px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    transition: ease-in-out 0.2s;
    position: relative
}

body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    transition: width 0.15s linear
}

body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon img:hover {
    width: 110%
}

body .container .contain-game {
    width: 100%;
    /* background: url("../image/bottom.png") no-repeat center; */
    background-size: cover
}

body .container .contain-game .box-game {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5em
}

body .container .contain-game .box-game .game {
    width: 180px;
    height: 200px;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 4px 3px rgba(54, 122, 225, 0.3);
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

body .container .footer {
    width: 100%;
    margin-top: auto;
    align-self: flex-end
}

body .container .footer #bg-bottom {
    width: 100%;
    height: 300px;
    display: none
}

body .container .footer #bg-bottom div {
    width: 100%;
    height: 100%;
    margin: auto;
    background: url("../image/mpeople.png") no-repeat center bottom;
    background-size: contain
}

body .container .footer h3 {
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.386);
    border-top: 1px solid #0b3d87;
    font-size: 1.4em;
    padding: 10px 0;
    user-select: none
}

@media (min-width: 1200px) {
    body .container .box-logo .logo {
        margin-left: 10%
    }
    body .container .box-contain .contain-game .box-game .game {
        width: 140px
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body .container .box-logo .logo {
        margin-left: 10%
    }
    body .container .contain-game .box-game {
        width: 95%;
        margin: auto;
        align-items: flex-start
    }
    body .container .contain-game .box-game .game {
        font-size: 1rem
    }
    body .container .contain-game .box-game .game span {
        bottom: 45px
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body .container .box-logo .logo {
        margin-left: 10%
    }
    body .container .contain-game {
        height: 200px
    }
    body .container .contain-game .box-game {
        width: 100%;
        gap: 1em
    }
    body .container .contain-game .box-game .game {
        width: 120px;
        font-size: 1rem
    }
    body .container .contain-game .box-game .game span {
        bottom: 50px
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body {
        background: url("../image/bg-mobile.png") no-repeat center center;
        background-size: cover;
    }
    body .container .box-logo {
        background: none;
        justify-content: center
    }
    body .container .box-logo .logo {
        margin: 0
    }
    body .container .box-contain {
        background: none;
        margin-bottom: 10px
    }
    body .container .box-contain .contain-login .login .box-form form .box-btn .btn {
        margin: 15px 0
    }
    body .container .contain-game {
        display: none
    }
    body .container #bg-bottom {
        display: block
    }
    .dis-none{
        display: none;
    }
    .grid-2{
        display: grid;
        grid-template-columns: 1fr !important;
        padding: 10px;
        grid-gap: 0 !important;
    }
    body .container .box-contain {
        width: unset;
    }
}
#btnLogin{
    color: white;
}
@media (max-width: 575.98px) {
    .dis-none{
        display: none;
    }
    .grid-2{
        display: grid;
        grid-template-columns: 1fr !important;
        padding: 10px;
        grid-gap: 0 !important;
    }
    body .container .box-contain {
        width: unset;
    }
    body {
        background: url("../image/bg-mobile.png") no-repeat center center;
        background-size: cover;
    }
    body .container .box-logo {
        background: none;
        justify-content: center
    }
    body .container .box-logo .logo {
        width: 250px
    }
    body .container .box-contain {
        background: none;
        height: 400px
    }
    body .container .box-contain .contain-login {
        align-items: flex-start
    }

    body .container .box-contain .contain-login .login .box-form {
        width: 100%;
        margin: auto
    }
    body .container .box-contain .contain-login .login .box-form form .box-btn .btn {
        margin: 15px 0
    }
    body .container .box-contain .contain-login .login .box-form form .box-btn .language {
        gap: 10px
    }
    body .container .box-contain .contain-login .login .box-form .box-title {
        height: 70px
    }
    body .container .box-contain .contain-login .login .box-form .box-title .mtitle {
        font-size: 1.5rem
    }
    body .container .box-contain .contain-login .login .box-form .box-title .mtitle img {
        width: 45px
    }
    body .container .contain-game {
        display: none
    }
    body .container .footer #bg-bottom {
        display: block
    }
    body .container .footer h3 {
        font-size: 1em
    }
}

@-webkit-keyframes coinAnimate {
    from {
        background-position: 0 0%
    }
    to {
        background-position: 100% 0
    }
}

@-moz-keyframes coinAnimate {
    from {
        background-position: 0 0%
    }
    to {
        background-position: 100% 0
    }
}

@-ms-keyframes coinAnimate {
    from {
        background-position: 0 0%
    }
    to {
        background-position: 100% 0
    }
}

@keyframes coinAnimate {
    from {
        background-position: 0 0%
    }
    to {
        background-position: 100% 0
    }
}

.index-game-select {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

@media (max-width: 1400px) {
    .index-game-select {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 1150px) {
    .index-game-select {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 1000px) {
    .index-game-select {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.game-container .index-game-select {
    margin: 0 auto;
    user-select: none;
    padding-bottom: 8px;
    text-align: center;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    /* min-height: 800px */
}

.game-container .index-game-select .index-game-box {
    display: none;
    float: left;
    width: 220px;
    height: 245px;
    margin: 0 4px
}

.game-container .index-game-select .index-game-box.active-category {
    display: block !important
}

.game-container .index-game-select .index-game-box.active-category.in-screen .showing-jackpot .jackpot-coin {
    animation: coinAnimate .5s steps(14) infinite
}

body.stop-all-animate .game-container .index-game-select .index-game-box.active-category.in-screen .showing-jackpot .jackpot-coin {
    animation-play-state: paused
}

.game-container .index-game-select .index-game-box:hover .index-title {
    color: #c26cff  !important
}

.game-container .index-game-select .index-game-box .index-icon-container {
    height: 205px;
    position: relative
}

.game-container .index-game-select .index-game-box .index-icon-container .index-img-container {
    position: absolute
}

.game-container .index-game-select .index-game-box .index-icon-container .index-img-container .index-img-wrapper img {
    width: 220px;
    height: 195px;
    z-index: 3;
    position: relative
}

.game-container .index-game-select .index-game-box .index-icon-container .index-background-p {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 220px;
    height: 195px;
    z-index: 3;
    top: 0
}

.game-container .index-game-select .index-game-box .index-icon-container .index-background-p .index-play-text {
    cursor: pointer;
    display: none;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    margin-bottom: 35px
}

.game-container .index-game-select .index-game-box .index-icon-container .index-background-p .index-play-text .img-play-now {
    font-size: 13px;
    box-shadow: none;
    font-weight: 600
}

.game-container .index-game-select .index-game-box .index-icon-container .index-background-p .index-play-text .img-play-now.play-demo {
    border: solid 1px #ffcf11;
    background: rgba(0, 0, 0, .7);
    color: #febc0c
}

.game-container .index-game-select .index-game-box .index-icon-container .index-background-p .index-play-text .img-play-now.play-demo .text:before {
    display: none
}

.game-container .index-game-select .index-game-box .index-icon-container .index-background-p .index-play-text .img-play-now+.img-play-now {
    margin-top: 8px
}

.game-container .index-game-select .index-game-box .index-icon-container:before {
    content: "";
    width: 201px;
    height: 143px;
    top: 43px;
    left: 9px;
    position: absolute;
    background: linear-gradient(45deg, #e7e7e7 9%, #757575 56%, #fff 100%);
    border-radius: 6px
}

.game-container .index-game-select .index-game-box .index-icon-container:after {
    content: "";
    position: absolute;
    bottom: 21px;
    left: 11px;
    right: 12px;
    background-color: #000;
    height: 139px;
    z-index: 2;
    border-radius: 6px
}

.game-container .index-game-select .index-game-box .index-icon-container:hover .index-play-text {
    display: inline-flex
}

.game-container .index-game-select .index-game-box .index-icon-container:hover:before {
    background: linear-gradient(90deg, rgb(160 101 202) 6%, rgb(160 101 202) 81%);
    box-shadow: 0px 0px 15px #a065ca;
}

.game-container .index-game-select .index-game-box .index-icon-container:hover .index-background-p:after {
    content: "";
    position: absolute;
    height: 110px;
    width: 198px;
    bottom: 11px;
    border-radius: 4px;
    background-image: linear-gradient(to bottom, transparent, #000);
    z-index: -1
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag {
    position: absolute;
    z-index: 3
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag.index-flag-new {
    right: 7px;
    top: 42px
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag.index-flag-new .pre-img {
    background: url("/Themes/Joker/Images/games/flag-new.png?v=7") no-repeat;
    background-size: 100% 100%;
    width: 47px;
    height: 48px;
    display: inline-block
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag.index-flag-hot {
    left: 7px;
    top: 41px
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag.index-flag-hot .pre-img {
    background: url("/Themes/Joker/Images/games/flag-hot.png?v=7") no-repeat;
    background-size: 100% 100%;
    width: 47px;
    height: 48px;
    display: inline-block
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag.index-flag-soon {
    top: 129px;
    margin-top: 41px;
    left: 20px
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag.index-flag-soon .pre-img {
    background-image: url("/Themes/Joker/Images/games/comingsoon.png?v=7");
    width: 182px;
    height: 35px;
    display: inline-block
}

.game-container .index-game-select .index-game-box .index-icon-container .index-flag .coming-soon {
    position: absolute;
    width: 100%;
    top: 6px;
    font-weight: 500;
    color: #191717 !important;
    font-family: "Prompt";
    font-size: 15px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center
}

.game-container .index-game-select .index-game-box .index-icon-container .img-cash-drop {
    background-image: url("/Themes/Joker/Images/games/icon-prizedrop.png?v=7");
    display: inline-block;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 0;
    bottom: 2px;
    z-index: 5
}

.game-container .index-game-select .index-game-box .index-jackpot {
    position: relative;
    text-align: center
}

.game-container .index-game-select .index-game-box .index-jackpot .jackpot-background {
    top: -33px;
    left: 21px;
    position: absolute;
    width: 180px;
    height: 32px;
    z-index: 3
}

.game-container .index-game-select .index-game-box .index-jackpot .jackpot-coin {
    width: 34px;
    height: 33px;
    background-image: url("/Themes/Joker/Images/games/Coin.png?v=7");
    background-repeat: no-repeat;
    position: absolute;
    top: -43px;
    left: 35px;
    z-index: 4
}

.game-container .index-game-select .index-game-box .index-jackpot .jackpot-value-container {
    position: absolute;
    display: inline-block;
    width: 100%;
    left: 0;
    top: -29px;
    z-index: 4
}

.jackpot-value {
    color: white;
}

.btn-bg-gradient,
.manual .third-party .guide .item .download-install .install-guide,
.img-play-now {
    color: #ffffff !important;
    border-radius: 10px;
    height: 28px;
    line-height: 28px;
    display: inline-flex;
    justify-content: center;
    /* background: #ffd82f;
    background: linear-gradient(to bottom, #fff 3%, #ffe87a 10%, #e7aa19 100%); */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, rgba(255, 255, 255, 0.19) 48.96%, rgba(0, 0, 0, 0.19) 53.65%), linear-gradient(90deg, #261934 0%, #a065ca 50.94%, #261934 100%);
    border: 2px solid #a065ca;
    box-shadow: 0px 0px 15px #a065ca;
}

.img-play-now {
    width: 133px;
    height: 28px;
    display: inline-block;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 1px #000;
    box-shadow: 1px 4px 8px 1px #2b2b2b;
    font-size: 14px;
}

.game-container .index-game-select .index-game-box .index-title {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: #959595;
    font-weight: 500;
    text-align: center;
    padding-left: 8px
}

.game-container .index-game-select .index-game-box .game-bet-limits {
    position: absolute;
    width: 90px;
    bottom: 36px;
    right: 15px;
    text-align: center
}

.game-container .index-game-select .index-game-box .game-bet-limits span {
    font-size: 13px;
    letter-spacing: .8px;
    font-weight: 500
}

.game-jackpot-container {
    width: 942px;
    display: inline-block;
    margin-top: 20px;
    position: relative
}

.game-jackpot-container .jackpot-light-circle {
    width: 272px;
    height: 66px;
    display: inline-block;
    background: url("/Themes/Joker/Images/GameJackpot/gif_animation.png?v=7") no-repeat
}

.game-jackpot-container .center-container {
    position: absolute;
    top: 9px;
    width: 100%;
    left: 216px
}

.game-jackpot-container .jackpot {
    width: 100%;
    position: absolute;
    left: 217px;
    top: 33px;
    font-size: 24px;
    font-weight: 500
}

.game-jackpot-container .star {
    position: absolute;
    background: url("/Themes/Joker/Images/jackpot/start_jackpot.png?v=7") no-repeat;
    background-size: contain;
    overflow: hidden;
    opacity: 0;
    animation-name: starAnimate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 1.65s
}

.game-jackpot-container .star.star-1 {
    width: 42px;
    height: 33px;
    top: 36px;
    left: -3px;
    animation-delay: 1s
}

.game-jackpot-container .star.star-2 {
    width: 31px;
    height: 34px;
    top: 14px;
    left: 56px;
    animation-delay: 1.5s
}

.game-jackpot-container .star.star-3 {
    width: 29px;
    height: 39px;
    top: 40px;
    left: 176px;
    animation-delay: 2s
}

.game-jackpot-container .star.star-4 {
    width: 31px;
    height: 42px;
    top: 11px;
    left: 269px;
    animation-delay: 2.5s
}

.game-jackpot-container .star.star-5 {
    width: 34px;
    height: 47px;
    top: 37px;
    left: 373px;
    animation-delay: 3s
}

.game-jackpot-container .star.paused {
    animation-play-state: paused
}