.hot-games-page {
    background: #fff url(https://img.alltocon.com/img/static/ae888/egame-bg.jpg) bottom/100% auto no-repeat fixed;
    position: relative
}

.hot-games-page * {
    box-sizing: border-box
}

.hot-games-page .hot-games-main {
    margin: auto;
    min-height: 570px;
    padding: 50px 0;
    position: relative;
    width: 1200px
}

@media screen and (max-width: 1024px) {
    .hot-games-page .hot-games-main {
        width:95%
    }
}

.hot-games-page .hot-games-main .hot-games {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    padding: 20px 0;
    width: 100%
}

@media screen and (max-width: 1024px) {
    .hot-games-page .hot-games-main .hot-games {
        margin:auto;
        width: 95%
    }
}

.hot-games-page .hot-games-main .hot-games .game-item {
    border-radius: 10px;
    display: block;
    height: 210px;
    margin: 15px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 16%
}

.hot-games-page .hot-games-main .hot-games .game-item>.img {
    align-items: center;
    display: flex;
    height: 170px;
    justify-content: center
}

.hot-games-page .hot-games-main .hot-games .game-item>.img img {
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    min-height: 150px
}

.hot-games-page .hot-games-main .hot-games .game-item>.title {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0;
    width: 100%
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover {
    align-items: center;
    background-color: #000c;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: .2s;
    width: 100%;
    z-index: 2
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover .nrc-button {
    display: none;
    font-size: 15px;
    left: 10%;
    padding: 0;
    position: absolute;
    width: 80%
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover .nrc-button.add-fav {
    background-color: #ea4747
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover .nrc-button.add-fav:hover {
    background-color: #db4444
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover .nrc-button.remove-fav {
    background-color: #999
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover .nrc-button.remove-fav:hover {
    background-color: #777
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover .nrc-button:last-of-type {
    top: auto
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover:hover {
    height: 100%;
    opacity: 1
}

.hot-games-page .hot-games-main .hot-games .game-item .link-cover:hover+.rating {
    opacity: 0
}

.hot-games-page .hot-games-main .hot-games .game-item.disabled .link-cover button {
    display: none!important
}

.hot-games-page .hot-games-main .hot-games .game-item.disabled .link-cover .maintenance-block {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 10px 15px;
    width: 100%
}

.hot-games-page .hot-games-main .hot-games .game-item.disabled .link-cover .maintenance-block>* {
    font-weight: 400
}

.hot-games-page .hot-games-main .hot-games .game-item:hover .link-cover {
    filter: blur(0)!important;
    opacity: 1!important;
    transform: rotate3d(0,0,0,0deg)!important
}

.hot-games-page .hot-games-main .hot-games .game-item:hover .link-cover .nrc-button {
    display: block
}

.fifa-count-down {
    background-color: #8a1538;
    color: #fff;
    font-family: Microsoft YaHei,Microsoft JhengHei,PingFangTC,Helvetica;
    font-size: 14px;
    height: 50px;
    margin: 0 auto;
    padding: 2px 10px
}

.fifa-count-down,.fifa-count-down .fifa-cont {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative
}

.fifa-count-down .fifa-cont {
    height: 46px;
    margin: auto;
    max-width: 1100px;
    width: 95%
}

.fifa-count-down .fifa-logo {
    display: block;
    height: 42px
}

.fifa-count-down .box-countdown {
    align-items: center;
    display: flex;
    font-size: 16px;
    justify-content: flex-start;
    padding-left: 10px;
    -webkit-user-select: none;
    user-select: none;
    width: 100%
}

.fifa-count-down .box-countdown .box-countdown-title {
    margin-right: 10px;
    text-align: left
}

.fifa-count-down .box-countdown .count-down-timer {
    display: flex;
    gap: 5px
}

.fifa-count-down .box-countdown .count-down-timer>* {
    align-items: flex-end;
    display: flex;
    font-weight: 400;
    justify-content: center;
    text-align: center
}

.fifa-count-down .box-countdown .count-down-timer .timer-number {
    font-size: 28px;
    font-weight: 700
}

.fifa-count-down .box-countdown .count-down-timer .timer-text {
    margin-right: 2px;
    text-transform: lowercase
}

.fifa-count-down .count-down-btn {
    align-items: center;
    background-color: #3cc0e9;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    height: 35px;
    justify-content: center;
    margin-right: 0;
    text-decoration: none;
    white-space: nowrap;
    width: 180px
}

.generic-maintenance {
    align-items: center;
    background: #000c;
    cursor: not-allowed;
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.generic-maintenance>.content {
    border: 2px solid gold;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    margin-top: -60px;
    max-width: 80%;
    padding: 20px 10px 10px
}

.generic-maintenance>.content>.message {
    color: #ccc;
    font-size: 12px;
    margin-top: 10px
}

.generic-maintenance:before {
    color: gold;
    content: "";
    display: block;
    font-family: iconmps!important;
    font-size: 60px;
    line-height: 50px;
    text-align: center;
    transform: translateY(-10px);
    width: 100%
}

.games-animal .generic-maintenance,.live-girls .generic-maintenance {
    background: radial-gradient(ellipse at center,#000c 0,#0000 80%)
}

.games-animal .generic-maintenance:before,.live-girls .generic-maintenance:before {
    font-size: 120px;
    margin-top: 10%;
    text-shadow: 0 0 100px #000000e6
}

.games-animal .generic-maintenance .content,.live-girls .generic-maintenance .content {
    background-color: #000c;
    box-shadow: 0 0 50px #000000e6;
    margin-top: -120px;
    padding: 20px
}

.esports .app-body {
    background: #0b131c url(https://img.alltocon.com/img/static/esports/esports-bg.jpg) 50%/cover no-repeat;
    height: 100%;
    margin-bottom: -10px;
    width: 100%
}

.esports .app-body main {
    height: auto!important
}

.esports .games-wrap {
    background: url(https://img.alltocon.com/img/static/esports/ctr-l.png) 0 100%/auto 80% no-repeat,url(https://img.alltocon.com/img/static/esports/ctr-r.png) 100% 100%/auto 80% no-repeat;
    height: calc(100vh - 366px);
    min-height: 700px;
    position: relative;
    text-align: center;
    width: 100%
}

.esports .games-wrap .games {
    align-items: flex-end;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 1000px;
    width: 100%
}

.esports .gl {
    height: 62%;
    left: 50%;
    position: absolute;
    top: 50px;
    transform: translateX(-50%)
}

.esports .play {
    margin: 0 auto 20px;
    position: relative;
    width: 350px
}

.esports .play img {
    display: block;
    height: 90px;
    margin: 0 auto;
    width: auto
}

.esports .play-btn {
    background: url(https://img.alltocon.com/img/static/esports/btn-go.png) no-repeat;
    cursor: pointer;
    height: 90px;
    margin: 10px auto 20px;
    position: relative;
    top: 0;
    transition: .2s ease;
    width: 320px
}

.esports .play-btn:hover {
    top: 2px
}

.esports .bottom-block {
    background: #09111b url(https://img.alltocon.com/img/static/esports/footer-border.jpg) top repeat-x;
    padding: 50px 0 20px;
    text-align: center
}

.esports .footer-curve {
    display: none
}

.games-logo {
    background: #09111b url(https://img.alltocon.com/img/static/esports/esports_bg.jpg) 50% no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}

.games-logo .game-title {
    margin-bottom: 50px;
    width: 460px
}

.games-logo .logos {
    min-width: 712px;
    width: 50%
}

.gamelobby.animal footer {
    margin-top: 0
}

.gamelobby.animal footer .footer-curve {
    display: none
}

.games-animal {
    align-items: center;
    background: url(https://img.alltocon.com/img/static/vn/desktop/ani-bg.jpg) 50%/cover no-repeat;
    height: calc(100vh - 345px);
    min-height: 500px;
    overflow: hidden;
    width: 100%
}

.games-animal,.games-animal .game-type {
    display: flex;
    justify-content: center;
    position: relative
}

.games-animal .game-type {
    align-items: flex-end;
    height: 100%;
    width: 55%
}

.games-animal .game-type:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: .9;
    position: absolute;
    top: 0;
    transition: .3s;
    width: 100%
}

.games-animal .game-type+.generic-maintenance {
    background-color: #0009;
    width: 50%
}

.games-animal .game-type.ani-horse,.games-animal .game-type.horsebook {
    margin-left: -5%
}

.games-animal .game-type.ani-horse:after,.games-animal .game-type.horsebook:after {
    background: url(https://img.alltocon.com/img/static/vn/desktop/ani-horse.png) 50%/cover no-repeat
}

.games-animal .game-type.ani-cock,.games-animal .game-type.cockfight {
    margin-right: -5%
}

.games-animal .game-type.ani-cock:after,.games-animal .game-type.cockfight:after {
    background: url(https://img.alltocon.com/img/static/vn/desktop/ani-cock.png) 50%/cover no-repeat
}

.games-animal .game-type.ani-cock+.generic-maintenance,.games-animal .game-type.cockfight+.generic-maintenance {
    left: auto;
    right: 0
}

.games-animal .game-type .game-list {
    cursor: pointer;
    display: flex;
    height: 220px;
    margin: 0 10px 40px;
    position: relative;
    transition: .3s ease;
    width: 220px;
    z-index: 1
}

.games-animal .game-type .game-list img {
    transition: .3s ease;
    width: 100%
}

.games-animal .game-type .game-list:hover .gameicon img {
    transform: scale(1.05)
}

.games-animal .game-type .game-list .generic-maintenance {
    left: 10px;
    margin: auto;
    top: 60px;
    width: 200px
}

.games-animal .game-type .game-list .generic-maintenance:before {
    display: none
}

.games-animal .game-type:hover:after {
    opacity: 1;
    transform: scale(1.03)
}

.games-animal.single .game-type {
    margin: 0!important;
    width: 75%
}

.games-animal.single .game-type .game-icon {
    position: relative;
    transition: .3s ease;
    z-index: 1
}

.games-animal.single .game-type .game-icon:hover {
    transform: scale(1.05)
}

.favorite-icon-wrapper .add-fav,.favorite-icon-wrapper .remove-fav {
    background: #0000;
    font-size: 0;
    height: auto;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3
}

.favorite-icon-wrapper .add-fav:after,.favorite-icon-wrapper .remove-fav:after {
    speak: none;
    content: "";
    font-family: iconmps!important;
    font-size: 22px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    transition: .3s ease
}

.favorite-icon-wrapper .add-fav:after {
    -webkit-text-stroke: 2px #ccc9;
    text-stroke: 2px #ccc9;
    color: #3333331a
}

.favorite-icon-wrapper .add-fav:hover:after {
    -webkit-text-stroke: 2px #fffc;
    text-stroke: 2px #fffc
}

.favorite-icon-wrapper .remove-fav:after {
    -webkit-text-stroke: 2px #e01a1a;
    text-stroke: 2px #e01a1a;
    color: #e01a1a
}

.section-games.lottery-games {
    background: #110e2b url(https://img.alltocon.com/img/static/e8bet/pbg-lottery.jpg) top/100% auto no-repeat;
    min-height: calc(100vh - 345px);
    padding-top: 250px
}

.section-games.lottery-games .gametype-tag {
    margin: 0 auto;
    max-width: 1100px;
    text-align: center
}

.section-games.lottery-games .gametype-tag .gametype-inner {
    align-items: center;
    background-color: #00000080;
    border-radius: 50px;
    display: flex;
    gap: 10px;
    padding: 6px 0
}

.section-games.lottery-games .gametype-tag .gametype-item {
    align-items: center;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    line-height: 45px;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap
}

.section-games.lottery-games .gametype-tag .gametype-item.active {
    background-color: #c72828;
    border-radius: 50px;
    box-shadow: inset 0 -3px 0 #ffffff4d;
    position: relative
}

.section-games.lottery-games .gametype-tag .gametype-item.active:before {
    background: linear-gradient(180deg,#ffffff4d 0,#fff0);
    content: "";
    height: 80%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.section-games.lottery-games .lottery-game-list li[data-gameprovider=AE_LOTTO] {
    position: relative
}

.section-games.lottery-games .lottery-game-list li[data-gameprovider=AE_LOTTO]:after {
    animation: new-ani 1s linear infinite;
    background-color: #f60;
    border-radius: 15px;
    box-shadow: inset 0 0 0 2px #fff,inset 0 -5px 8px #f30,0 2px 8px #000c;
    color: #fff;
    content: "NEW";
    font-size: 15px;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    position: absolute;
    right: -10px;
    top: -3px
}

@keyframes new-ani {
    0% {
        filter: brightness(1);
        transform: translateY(0) scale(1)
    }

    70% {
        filter: brightness(1.2);
        transform: translateY(-5px) scale(1)
    }

    to {
        filter: brightness(1);
        transform: translateY(0) scale(1)
    }
}

.sport-page {
    background-color: #000;
    bottom: 0;
    height: calc(100vh - 105px);
    left: 0;
    overflow-y: auto;
    position: fixed;
    width: 100vw;
    z-index: 999
}

.sport-page .page-loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center
}

.sport-page .sport-widgets {
    background-color: #000;
    width: 100%
}

.sport-page .sport-widgets .left-sidebar {
    height: calc(100vh - 105px)
}

.sport-page .cricket-maintenance-page {
    background-color: #000000b3;
    display: flex;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.sport-page .cricket-maintenance-page>div {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center
}

.sport-page .cricket-maintenance-page>div>span {
    color: #fff;
    font-size: 24px
}

@keyframes sports-title_img {
    0%,to {
        transform: rotateX(-10deg) rotateY(-5deg) translateZ(0)
    }

    25% {
        transform: rotateX(5deg) rotateY(-10deg) translateZ(0)
    }

    50% {
        transform: rotateX(5deg) rotateY(10deg) translateZ(0)
    }

    75% {
        transform: rotateX(-5deg) rotateY(10deg) translateZ(0)
    }
}

.games-sports {
    background: #3b4c3b url(https://img.alltocon.com/img/static/desktop/pbg-sport.jpg) no-repeat 50% 0/100% auto;
    overflow: hidden;
    padding: 20px 0
}

.games-sports .sports-title {
    perspective: 2400px;
    position: relative
}

.games-sports .sports-title>img {
    animation: sports-title_img 3s linear infinite alternate;
    display: block;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 2px 8px rgba(0,0,0,.75));
    width: 100%
}

.games-sports .game-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: -180px
}

.games-sports .game-list>li {
    aspect-ratio: 37/15;
    border-radius: 15px;
    box-shadow: 0 1px 0 1px #00000059,0 1px 3px #000000bf,0 2px 6px #000000bf,0 3px 9px #000000bf;
    display: flex;
    margin: 0 0 30px;
    position: relative;
    transition: box-shadow .8s,transform .8s;
    width: 32%
}

.games-sports .game-list>li:hover {
    box-shadow: 0 2px 0 2px #0000004d,0 4px 0 5px #0000004d,0 7px 0 9px #0000004d,0 11px 0 14px #0000004d;
    transform: perspective(740px) rotateX(20deg) translate3d(0,-8px,0)
}

.games-sports .game-list>li:hover>.cover:after {
    box-shadow: inset 0 0 0 4px #c7282873,inset 0 0 0 8px #c7282873,inset 0 0 0 12px #c7282873
}

.games-sports .game-list>li:hover>.cover>img {
    transform: scale3d(1.1,1.1,1)
}

.games-sports .game-list>li:hover>.cont {
    background-position: 100% 0
}

.games-sports .game-list>li:hover>.generic-maintenance {
    background-color: #000
}

.game-list .cover {
    align-items: center;
    border-radius: 15px 0 0 15px;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 40%
}

.game-list .cover>img {
    display: block;
    height: 100%;
    transition: transform 1s linear;
    width: auto
}

.game-list .cover:after {
    border-radius: 15px 0 0 15px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: box-shadow .8s;
    width: 100%
}

.game-list .cont {
    background-image: linear-gradient(135deg,#fff9 35%,#ffffffbf 0,#ffffffbf 64%,#ffffffe6 0);
    background-size: 400% 100%;
    border-radius: 0 15px 15px 0;
    transition: background-position .8s;
    width: 60%
}

.game-list .cont>p,.game-list .corp>.logo {
    display: none
}

.game-list .corp h2 {
    font-size: 21px;
    font-weight: 500;
    padding: 20px;
    transform: skew(-6deg)
}

.game-list .btn-main {
    background-image: linear-gradient(135deg,#c72828 50%,#f2c94c 0);
    background-size: 300% 100%;
    bottom: 20px;
    padding: 0;
    position: absolute;
    right: 20px;
    transition: background-position .4s linear,box-shadow .4s;
    width: 130px
}

.game-list .btn-main:hover {
    background-position: 100% 0;
    box-shadow: 0 12px 10px -10px #00000080
}

.game-list .generic-maintenance {
    border-radius: 14px;
    box-shadow: 0 0 1px 1px #0000004d,inset 0 0 1px 1px #0000004d;
    transition: background-color .3s
}

.game-list .generic-maintenance>.content {
    margin-top: -25px
}

.wallet-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 14px
}

.wallet-container .icon-bet {
    font-size: 12px;
    margin-right: 4px
}

.wallet-container .wallet-content {
    font-weight: 500;
    line-height: 14px
}

.app.mini_games .app-body {
    padding-top: 40px
}

.app.mini_games div.chess-container {
    padding-top: 0
}

.app.mini_games .egame-container {
    background: #fff url(https://img.alltocon.com/img/static/ae888/egame-bg.jpg) bottom/100% auto no-repeat fixed;
    position: relative
}

.app.mini_games .egame-container * {
    box-sizing: border-box
}

.app.mini_games .egame-container .egame-banner {
    display: none
}

.app.mini_games .egame-container .egame-main {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    min-height: 570px;
    position: relative;
    width: 1200px
}

.app.mini_games .egame-container .egame-main .egame-tab {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    position: absolute;
    width: 100%;
    z-index: 2
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-providers {
    display: flex
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div {
    color: #5a5656;
    cursor: pointer;
    flex: 1;
    height: 95px;
    position: relative;
    text-align: center;
    transition: .2s
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div .pd-logo {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(50%) grayscale(100%);
    height: 60px;
    margin: 0 auto;
    transition: filter .2s;
    width: 60px
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div.active,.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div:hover {
    background-color: #c72828;
    color: #fff
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div.active .pd-logo,.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div:hover .pd-logo {
    filter: brightness(500%) grayscale(100%)
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div.active:after,.app.mini_games .egame-container .egame-main .egame-tab .egame-providers>div:hover:after {
    background: linear-gradient(#0000,#0003);
    bottom: 0;
    content: "";
    height: 50%;
    left: 0;
    position: absolute;
    width: 100%
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags {
    position: absolute;
    top: 170px;
    width: 155px
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div {
    background-color: #ffffffb3;
    box-shadow: inset 0 0 0 1px #aaa;
    color: #0e0e0e;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin: 5px 0;
    overflow: hidden;
    padding: 15px 0 15px 35px;
    position: relative;
    text-align: left;
    transition: .2s
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.active,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div:hover {
    background-color: #ffffffe6;
    box-shadow: inset 0 0 0 2px #c72828;
    color: #c72828
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.all:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.favorite:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.new:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.pop:before {
    background-color: #fff;
    border-radius: 50%;
    color: #c72828;
    content: "★";
    display: block;
    font-size: 12px;
    height: 20px;
    left: 10px;
    line-height: 20px;
    position: absolute;
    text-align: center;
    text-indent: 0;
    top: 17.5px;
    width: 20px
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.all.active:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.all:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.favorite.active:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.favorite:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.new.active:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.new:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.pop.active:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.pop:before {
    background-color: #0000;
    color: #c72828;
    font-family: iconmps!important;
    font-size: 19px;
    top: 17px
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.all:before {
    content: ""
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.new:before {
    content: ""
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.pop:before {
    content: ""
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div.favorite:before {
    content: "❤"
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div:hover:before {
    background-color: #f5f5f5;
    color: #c72828
}

.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div:hover.all:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div:hover.favorite:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div:hover.new:before,.app.mini_games .egame-container .egame-main .egame-tab .egame-tags>div:hover.pop:before {
    background-color: #0000;
    color: #c72828
}

.app.mini_games .egame-container .egame-main .egame-content {
    margin-left: 180px;
    margin-top: 100px;
    position: relative;
    width: calc(100% - 180px)
}

.app.mini_games .egame-container .egame-main .egame-content.maintenance .game-item {
    filter: grayscale(90%);
    opacity: .2
}

.app.mini_games .egame-container .egame-main .egame-content.maintenance .maintenance-block {
    left: calc(50% - 200px);
    padding: 20px;
    text-align: center;
    top: 300px;
    width: 400px
}

.app.mini_games .egame-container .egame-main .egame-content.maintenance:after {
    background-position: center 130px;
    background-repeat: no-repeat;
    background-size: auto
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 70px;
    justify-content: space-between
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools>* {
    width: 50%
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools .egame-tools-sort {
    display: none
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools .egame-tools-search {
    flex: 1;
    text-align: right
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools .search-input {
    display: inline-block;
    margin-right: 5px;
    position: relative;
    width: 250px
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools .search-input input[type=text] {
    background-color: #fff;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 100%
}

.app.mini_games .egame-container .egame-main .egame-content .egame-tools .search-button {
    border-radius: 2px;
    display: inline-block;
    font-family: iconmps;
    font-size: 24px;
    height: 36px;
    padding: 0;
    vertical-align: middle;
    width: 40px
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games {
    background-color: #fff3;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item {
    display: inline-block;
    height: 210px;
    margin: 15px 5px 0;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: calc(16.66667% - 10px)
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .comingsoon {
    background-color: #c72828;
    border-radius: 3px;
    box-shadow: 0 1px 1px #00000080;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    line-height: 26px;
    opacity: .9;
    position: relative;
    text-align: center;
    top: -5px;
    width: 60%;
    z-index: 1
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item>.img img {
    display: block;
    margin: 0;
    max-height: 185px;
    min-height: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item>.title {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0;
    padding: 7px 0;
    position: absolute;
    top: calc(100% - 38px);
    width: 100%
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover {
    background-color: #000c;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: .2s;
    width: 100%;
    z-index: 2
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button {
    display: none;
    font-size: 15px;
    left: 10%;
    padding: 0;
    position: absolute;
    width: 80%
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button:first-of-type {
    top: calc(33% - 25px)
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button.add-fav {
    background-color: #ea4747
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button.add-fav:hover {
    background-color: #db4444
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button.remove-fav {
    background-color: #999
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button.remove-fav:hover {
    background-color: #777
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover .nrc-button:last-of-type {
    top: calc(66% - 35px)
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover:hover {
    height: 100%;
    opacity: 1
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover:hover .nrc-button {
    display: block
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item .link-cover:hover+.rating {
    opacity: 0
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item.disabled .launch-game {
    background-color: #999
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item.disabled .launch-game:hover {
    background-color: #777
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item[data-new=new]:before,.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item[data-pop=pop]:before {
    border-style: solid;
    border-width: 0 35px 35px;
    color: #fff;
    font-size: 11px;
    height: 0;
    left: 0;
    line-height: 47px;
    position: absolute;
    text-indent: -14px;
    text-shadow: 0 2px 2px #0000004d;
    top: 0;
    transform: rotate(-45deg) translateX(-12px) translateY(-24px) scale(.8);
    width: 0;
    z-index: 3
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item[data-new=new]:before {
    border-color: #0000 #0000 #d01919;
    content: "NEW"
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item[data-pop=pop]:before {
    border-color: #0000 #0000 #ff8a00;
    content: "HOT"
}

.app.mini_games .egame-container .egame-main .egame-content .egame-games .game-item[data-fav=fav-game]:after {
    background-color: #0000;
    border-color: #0000 #ea4747 #0000 #0000;
    border-style: solid;
    border-width: 0 45px 45px 0;
    color: #8d1717;
    content: "❤";
    font-size: 16px;
    height: 0;
    left: auto;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-indent: 22px;
    top: 0;
    width: 0;
    z-index: 3
}

.app.mini_games .egame-container .egame-main .egame-content .egame-pagination {
    margin-bottom: 40px;
    text-align: center
}

.app.mini_games .egame-container .egame-main .egame-content .egame-pagination .rc-pagination-next,.app.mini_games .egame-container .egame-main .egame-content .egame-pagination .rc-pagination-prev {
    background-color: #fff
}

.app.mini_games .egame-container .empty-list {
    font-size: 35px;
    text-align: center
}

.app.mini_games .egame-container .empty-list:before {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgab(50,50,50,.5);
    color: #e86262;
    content: "❤";
    display: block;
    font-size: 60px;
    height: 100px;
    line-height: 110px;
    margin: 60px auto 15px;
    width: 100px
}

.app.mini_games .egame-container:after {
    background-color: #b2b2b2;
    content: "";
    height: 95px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div:before {
    background-image: url(https://img.alltocon.com/img/static/yh/icon-gp.png)
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.all:before {
    background-position: -1560px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.KY:before {
    background-position: -1380px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.LG:before {
    background-position: -600px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.LC:before {
    background-position: -1440px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.CARD365:before {
    background-position: -1260px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.AE_C:before {
    background-position: -1200px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.JDB:before {
    background-position: -900px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.VG:before {
    background-position: -1500px 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.SKM:before {
    background-image: url(https://img.alltocon.com/img/static/desktop/sub-menu/sub-chess-skm.png);
    background-position: 0 0
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.active,.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div:hover {
    background-color: #c72828;
    color: #fff
}

.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div.active:before,.app.mini_games .egame-container.chess-container .egame-main .egame-tab .egame-providers>div:hover:before {
    filter: brightness(100%) grayscale(0)
}

.app.mini_games .egame-container.chess-container .egame-main .egame-content {
    margin-left: 0;
    margin-top: 120px;
    width: 100%
}

.games-fishing {
    background: #007fd6 url(https://img.alltocon.com/img/static/desktop/mpg/fishing1_bg.jpg) bottom/100% auto no-repeat fixed;
    min-height: calc(100vh - 349px);
    padding-top: 40px
}

.games-fishing .mpg-tab {
    position: relative
}

.games-fishing .mpg-tab .mpg-providers {
    background-color: #0006;
    margin-bottom: 20px
}

.games-fishing .mpg-tab .mpg-providers .mpg-provider-inner {
    display: flex;
    justify-content: center
}

@media screen and (max-width: 1024px) {
    .games-fishing .mpg-tab .mpg-providers .mpg-provider-inner {
        justify-content:flex-start;
        margin: auto;
        overflow: scroll;
        width: 100%
    }
}

.games-fishing .mpg-tab .mpg-providers .mpg-gplogo {
    align-items: center;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: 0 0 65px;
    flex-direction: column;
    font-size: .7vw;
    height: 95px;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
    transition: .2s;
    -webkit-user-select: none;
    user-select: none
}

.games-fishing .mpg-tab .mpg-providers .mpg-gplogo .pd-logo {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 60px;
    width: 40px
}

.games-fishing .mpg-tab .mpg-providers .mpg-gplogo:hover {
    background: #fff3
}

.games-fishing .mpg-tab .mpg-providers .mpg-gplogo.active {
    background: linear-gradient(180deg,#c72828,#721717)
}

.games-fishing .mpg-tab .mpg-tags {
    margin-bottom: 20px
}

@media screen and (max-width: 1024px) {
    .games-fishing .mpg-tab .mpg-tags {
        margin:0 auto 20px;
        width: 95%
    }
}

.games-fishing .mpg-tab .mpg-tags .mpg-tags-inner {
    display: flex
}

.games-fishing .mpg-tab .mpg-tags .mpg-tags-inner>div {
    background-color: #ffffff4d;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    line-height: 45px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0 15px;
    -webkit-user-select: none;
    user-select: none
}

.games-fishing .mpg-tab .mpg-tags .mpg-tags-inner>div.active {
    background: linear-gradient(180deg,#c72828,#721717)
}

.games-fishing .mpg-tab .mpg-tools .mpg-tools-search {
    align-items: center;
    display: flex;
    position: absolute;
    right: 0;
    top: -75px
}

.games-fishing .mpg-tab .mpg-tools .mpg-tools-search .search-input {
    margin: 0;
    width: 250px
}

.games-fishing .mpg-tab .mpg-tools .mpg-tools-search .search-input input {
    border-radius: 10px 0 0 10px;
    height: 45px;
    width: 100%
}

.games-fishing .mpg-tab .mpg-tools .mpg-tools-search .search-button {
    border-radius: 0 10px 10px 0;
    height: 45px;
    padding: 0;
    width: 45px
}

.games-fishing .mpg-tab .mpg-tools .mpg-tools-search .search-button i {
    font-size: 30px
}

.games-fishing .section-games {
    position: relative
}

.games-fishing .section-games .main-wrap .fishing-game-list {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    justify-content: flex-start;
    margin-bottom: 40px;
    padding: 0;
    text-align: center
}

.games-fishing .section-games .main-wrap .fishing-game-list li {
    display: inline-block;
    margin: 10px 20px 10px 0;
    position: relative;
    vertical-align: top;
    width: calc(16.666% - 16.666px)
}

.games-fishing .section-games .main-wrap .fishing-game-list li:nth-child(6n) {
    margin-right: 0
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img {
    background-color: #0003;
    border-radius: 20px;
    box-shadow: 0 2px 5px #0000004d;
    display: block;
    overflow: hidden;
    position: relative;
    transition: .2s;
    width: 100%
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img img {
    display: block;
    width: 100%
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.launch-game {
    background: #000000b3;
    border-radius: 0;
    font-size: 18px;
    height: 100%;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    transition: .3s ease;
    width: 100%;
    z-index: 1
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.add-fav,.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.remove-fav {
    background: #0000;
    font-size: 0;
    height: auto;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.add-fav:after,.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.remove-fav:after {
    speak: none;
    content: "";
    font-family: iconmps!important;
    font-size: 26px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    transition: .3s ease
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.add-fav:after {
    -webkit-text-stroke: 2px #999;
    text-stroke: 2px #999;
    color: #00000080
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.add-fav:hover:after {
    -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff
}

.games-fishing .section-games .main-wrap .fishing-game-list li .img .link-cover .nrc-button.remove-fav:after {
    -webkit-text-stroke: 2px #e01a1a;
    text-stroke: 2px #e01a1a;
    color: #e01a1a
}

.games-fishing .section-games .main-wrap .fishing-game-list li .title {
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.2;
    margin: 8px 0
}

.games-fishing .section-games .main-wrap .fishing-game-list li[data-new=new] .img:before,.games-fishing .section-games .main-wrap .fishing-game-list li[data-pop=pop] .img:before {
    border-style: solid;
    border-width: 0 35px 35px;
    color: #fff;
    font-size: 12px;
    height: 0;
    left: 0;
    line-height: 47px;
    position: absolute;
    text-indent: -13px;
    text-shadow: 0 1px 2px #0000004d;
    top: 0;
    transform: translate3d(-26px,-8px,0) scale3d(.8,.8,1) rotate(-45deg);
    width: 0;
    z-index: 2
}

.games-fishing .section-games .main-wrap .fishing-game-list li[data-new=new] .img:before {
    border-color: #0000 #0000 #d01919;
    content: "NEW"
}

.games-fishing .section-games .main-wrap .fishing-game-list li[data-pop=pop] .img:before {
    border-color: #0000 #0000 #ff8a00;
    content: "HOT"
}

.games-fishing .section-games .main-wrap .fishing-game-list li:hover .img {
    box-shadow: 0 0 15px #d0edff
}

.games-fishing .section-games .main-wrap .fishing-game-list li:hover .img .link-cover .nrc-button.launch-game {
    opacity: 1
}

.games-fishing .section-games .main-wrap .fishing-game-list li:hover .title {
    text-shadow: 0 0 3px #d0edff
}

.games-fishing .section-games .main-wrap .fishing-game-list li.disabled {
    cursor: not-allowed
}

.games-fishing .section-games .main-wrap .fishing-game-list li.disabled .img {
    filter: none!important;
    opacity: 1!important
}

.games-fishing .section-games .main-wrap .fishing-game-list li.disabled .img img,.games-fishing .section-games .main-wrap .fishing-game-list li.disabled .img:before {
    filter: brightness(.5) grayscale(100%)
}

.games-fishing .section-games .main-wrap .fishing-game-list li.disabled .img .link-cover .nrc-button.launch-game {
    background: #00000080!important;
    font-size: 0;
    opacity: 1;
    position: relative
}

.games-fishing .section-games .main-wrap .fishing-game-list li.disabled .img .link-cover .nrc-button.launch-game:before {
    left: unset;
    position: relative;
    top: unset;
    transform: unset;
    z-index: 4
}

.games-fishing .section-games .main-wrap>.maintenance-block {
    align-items: center;
    -webkit-backdrop-filter: grayscale(50%);
    backdrop-filter: grayscale(50%);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    min-height: 100px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 5
}

.games-fishing .section-games .main-wrap>.maintenance-block>* {
    font-size: 18px;
    font-weight: 400
}

.games-fishing .section-games .main-wrap .empty-list {
    align-items: center;
    background: #0000001a;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 18px;
    justify-content: center;
    min-height: 100px;
    text-align: center
}

@media screen and (max-width: 1024px) {
    .games-fishing .section-games {
        margin:auto;
        width: 95%
    }

    .games-fishing .section-games .main-wrap .fishing-game-list li {
        margin: 10px 10px 10px 0
    }
}

.games-fishing .mpg-pagination {
    padding-bottom: 40px;
    text-align: center
}

.games-fishing .mpg-pagination .rc-pagination-next,.games-fishing .mpg-pagination .rc-pagination-prev {
    background: #fff
}

@keyframes ae_bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,1)
    }

    20% {
        transform: scale3d(1.1,1.1,1)
    }

    40% {
        transform: scale3d(.9,.9,1)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1)
    }

    80% {
        transform: scale3d(.97,.97,1)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes fav-game {
    0% {
        opacity: 0;
        transform: scale3d(.5,.5,1)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.chess .app-body {
    padding-top: 40px
}

.chess .app-body * {
    box-sizing: border-box
}

.chess .app-body .egame-container {
    background: #fff url(https://img.alltocon.com/img/static/ae888/egame-bg.jpg) no-repeat fixed 50% 100%/100% auto;
    position: relative
}

.chess .app-body .egame-banner {
    display: none
}

.chess .app-body .egame-tab {
    position: relative
}

.chess .app-body .egame-providers {
    background-color: #b2b2b2;
    display: flex;
    margin: 0 auto;
    overflow: auto;
    padding-right: 60px;
    width: 1200px
}

.chess .app-body .egame-providers>div {
    color: #5a5656;
    cursor: pointer;
    flex: 1;
    flex-shrink: 0;
    font-size: 14px;
    height: 96px;
    padding: 3px 10px;
    position: relative;
    text-align: center;
    transition: color .4s;
    z-index: 1
}

.chess .app-body .egame-providers>div:first-child {
    margin-left: auto
}

.chess .app-body .egame-providers>div:last-child {
    margin-right: auto
}

.chess .app-body .egame-providers>div .pd-logo {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(50%) grayscale(100%);
    height: 60px;
    margin: 0 auto;
    transition: filter .4s;
    width: 60px
}

.chess .app-body .egame-providers>div:after {
    background-color: #c72828;
    background-image: linear-gradient(180deg,#0000 50%,#00000040);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transition: transform .4s;
    width: 100%;
    z-index: -1
}

.chess .app-body .egame-providers>div.active,.chess .app-body .egame-providers>div:hover {
    color: #fff
}

.chess .app-body .egame-providers>div.active .pd-logo,.chess .app-body .egame-providers>div:hover .pd-logo {
    filter: brightness(500%) grayscale(100%)
}

.chess .app-body .egame-providers>div.active:after,.chess .app-body .egame-providers>div:hover:after {
    transform: scaleX(1)
}

@media screen and (max-width: 1024px) {
    .chess .app-body .egame-providers {
        margin:auto;
        width: 95%
    }
}

.chess .app-body .egame-tags {
    left: 50%;
    margin-left: -600px;
    position: absolute;
    top: 166px;
    width: 155px
}

.chess .app-body .egame-tags>div {
    background-color: #ffffff4d;
    box-shadow: inset 0 0 0 1px #aaa;
    color: #0e0e0e;
    cursor: pointer;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    padding: 15px 0 15px 35px;
    position: relative;
    text-overflow: ellipsis;
    transition: color .4s,box-shadow .4s;
    z-index: 1
}

.chess .app-body .egame-tags>div+div {
    margin-top: 5px
}

.chess .app-body .egame-tags>div:before {
    color: #c72828;
    content: "★";
    display: block;
    font-family: iconmps;
    font-size: 20px;
    left: 10px;
    line-height: 20px;
    position: absolute;
    text-align: center;
    top: 16px;
    transition: filter .4s;
    width: 20px
}

.chess .app-body .egame-tags>div:after {
    background-color: #c72828;
    content: "";
    height: 100%;
    position: absolute;
    right: -10%;
    top: 0;
    transform: skew(-30deg);
    transition: width .4s linear;
    width: 0;
    z-index: -1
}

.chess .app-body .egame-tags>div.active,.chess .app-body .egame-tags>div:hover {
    box-shadow: inset 0 0 0 2px #c72828;
    color: #fff
}

.chess .app-body .egame-tags>div.active:before,.chess .app-body .egame-tags>div:hover:before {
    filter: brightness(6)
}

.chess .app-body .egame-tags>div.active:after,.chess .app-body .egame-tags>div:hover:after {
    left: -10%;
    width: 120%
}

.chess .app-body .egame-tags>.all:before {
    content: ""
}

.chess .app-body .egame-tags>.new:before {
    content: ""
}

.chess .app-body .egame-tags>.pop:before {
    content: ""
}

.chess .app-body .egame-tags>.favorite:before {
    content: "❤"
}

@media screen and (max-width: 1024px) {
    .chess .app-body .egame-tags {
        display:flex;
        left: auto;
        margin: 10px auto;
        padding: 0;
        position: relative;
        top: auto;
        width: 95%
    }

    .chess .app-body .egame-tags>div {
        margin: 0;
        padding: 15px 15px 15px 35px
    }
}

.chess .app-body .egame-content {
    margin: 0 auto;
    max-width: 1200px;
    padding-left: 180px;
    position: relative
}

@media screen and (max-width: 1024px) {
    .chess .app-body .egame-content {
        margin:auto;
        padding: 10px 0 0;
        width: 95%
    }
}

.chess .app-body .egame-tools {
    height: 70px
}

@media screen and (max-width: 1024px) {
    .chess .app-body .egame-tools {
        position:absolute;
        right: 0;
        top: -70px;
        width: 45%
    }
}

.chess .app-body .egame-tools-search {
    text-align: right
}

.chess .app-body .egame-games {
    background-color: #ffffff40;
    margin-bottom: 20px;
    min-height: 360px;
    padding: 15px
}

.chess .app-body .game-item {
    animation: ae_bounceIn .6s cubic-bezier(.215,.61,.355,1) both;
    aspect-ratio: 155/205;
    display: inline-block;
    margin: 15px 5px 0;
    perspective: 430px;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: calc(20% - 10px)
}

.chess .app-body .game-item:hover>.link-cover {
    filter: blur(0);
    transform: rotate3d(0,0,0,0deg)
}

.chess .app-body .game-item:hover>.link-cover:after,.chess .app-body .game-item:hover>.link-cover:before {
    opacity: 1;
    transform: scaleX(1)
}

.chess .app-body .game-item:hover>.link-cover+.rating {
    opacity: 0
}

.chess .app-body .game-item .comingsoon {
    background-color: #c72828;
    border-radius: 3px;
    box-shadow: 0 1px 1px #00000080;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    line-height: 26px;
    opacity: .9;
    position: relative;
    top: -5px;
    width: 60%;
    z-index: 1
}

.chess .app-body .game-item[data-fav=fav-game]:after,.chess .app-body .game-item[data-new=new]:before,.chess .app-body .game-item[data-pop=pop]:before {
    border-style: solid;
    height: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 2
}

.chess .app-body .game-item[data-new=new]:before,.chess .app-body .game-item[data-pop=pop]:before {
    border-width: 0 35px 35px;
    color: #fff;
    font-size: 12px;
    left: 0;
    line-height: 47px;
    text-indent: -13px;
    text-shadow: 0 1px 2px #0000004d;
    transform: translate3d(-26px,-8px,0) scale3d(.8,.8,1) rotate(-45deg)
}

.chess .app-body .game-item[data-new=new]:before {
    border-color: #0000 #0000 #d01919;
    content: "NEW"
}

.chess .app-body .game-item[data-pop=pop]:before {
    border-color: #0000 #0000 #ff8a00;
    content: "HOT"
}

.chess .app-body .game-item[data-fav=fav-game]:after {
    animation: fav-game .4s;
    border-color: #0000 #ea4747 #0000 #0000;
    border-width: 0 40px 40px 0;
    color: #8d1717;
    content: "❤";
    font-size: 16px;
    line-height: 28px;
    right: 0;
    text-indent: 21px;
    transform-origin: 100% 0
}

.chess .app-body .egame-content.maintenance .game-item {
    animation-name: none;
    filter: grayscale(90%);
    opacity: .5
}

.chess .app-body .egame-content.maintenance>.maintenance-block {
    left: 50%;
    margin-left: -110px;
    padding: 20px;
    text-align: center;
    top: 290px;
    width: 400px
}

.chess .app-body .egame-pagination {
    padding-bottom: 40px;
    text-align: center
}

.chess .app-body .egame-pagination .rc-pagination-next,.chess .app-body .egame-pagination .rc-pagination-prev {
    background-color: #fff
}

.chess .app-body .game-item>.link-cover,.chess .app-body .game-item>.link-cover:after,.chess .app-body .game-item>.link-cover:before {
    background-color: #0006;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.chess .app-body .egame-tools-search>.search-input {
    display: inline-block;
    margin: 17px 5px 0 0;
    position: relative;
    width: 250px
}

.chess .app-body .egame-tools-search>.search-input>input {
    background-color: #fff;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 100%
}

.chess .app-body .egame-tools-search>.search-button {
    border-radius: 2px;
    display: inline-block;
    font-family: iconmps;
    font-size: 24px;
    height: 36px;
    line-height: 36px;
    padding: 0;
    transition: font-size .4s,background-color .4s;
    vertical-align: middle;
    width: 40px
}

.chess .app-body .egame-tools-search>.search-button:hover {
    font-size: 26px
}

.chess .app-body .game-item img {
    display: block;
    min-height: 150px;
    width: 100%
}

.chess .app-body .game-item>.title {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin: 3px 0 7px;
    padding: 8px 0
}

.chess .app-body .game-item>.link-cover {
    align-items: center;
    aspect-ratio: 1/1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    filter: blur(3px);
    flex-direction: column;
    justify-content: center;
    transform: rotateX(-105deg);
    transform-origin: 50% 0;
    transition: transform .6s,filter .4s;
    width: 100%;
    z-index: 1
}

.chess .app-body .game-item>.link-cover:after,.chess .app-body .game-item>.link-cover:before {
    content: "";
    height: 100%;
    opacity: 0;
    transform: scale3d(.25,.25,1);
    z-index: -1
}

.chess .app-body .game-item>.link-cover:before {
    transition: transform .6s .6s,opacity .4s .4s
}

.chess .app-body .game-item>.link-cover:after {
    transition: transform .6s .2s,opacity .4s
}

.chess .app-body .game-item .nrc-button {
    font-size: 14px;
    padding: 0;
    transition: background-color .4s,transform .4s;
    width: 80%
}

.chess .app-body .game-item .nrc-button:hover {
    transform: scale3d(1.06,1.06,1)
}

.chess .app-body .game-item .nrc-button+.nrc-button {
    margin-top: 18px
}

.chess .app-body .game-item .nrc-button.add-fav {
    background-color: #ea4747
}

.chess .app-body .game-item .nrc-button.add-fav:hover {
    background-color: #db4444
}

.chess .app-body .game-item .nrc-button.remove-fav {
    background-color: #999
}

.chess .app-body .game-item .nrc-button.remove-fav:hover {
    background-color: #777
}

.chess .app-body .game-item.disabled>.link-cover {
    filter: none;
    transform: rotate3d(0,0,0,0deg)
}

.chess .app-body .game-item.disabled .launch-game {
    margin-top: 52px;
    position: relative
}

.chess .app-body .egame-container .empty-list {
    color: #e86262;
    font-size: 36px;
    left: 0;
    padding-left: 180px;
    position: absolute;
    text-align: center;
    top: 70px;
    width: 100%
}

.chess .app-body .egame-container .empty-list:before {
    background-color: #fff;
    border-radius: 50%;
    content: "❤";
    display: block;
    font-size: 60px;
    height: 100px;
    line-height: 102px;
    margin: 60px auto 15px;
    width: 100px
}

@keyframes ae_bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,1)
    }

    20% {
        transform: scale3d(1.1,1.1,1)
    }

    40% {
        transform: scale3d(.9,.9,1)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1)
    }

    80% {
        transform: scale3d(.97,.97,1)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes fav-game {
    0% {
        opacity: 0;
        transform: scale3d(.5,.5,1)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.egame .app-body {
    padding-top: 40px
}

.egame .app-body * {
    box-sizing: border-box
}

.egame .app-body .egame-container {
    background: #fff url(https://img.alltocon.com/img/static/ae888/egame-bg.jpg) no-repeat fixed 50% 100%/100% auto;
    position: relative
}

.egame .app-body .egame-banner {
    display: none
}

.egame .app-body .egame-tab {
    position: relative
}

.egame .app-body .egame-providers {
    background-color: #b2b2b2;
    display: flex;
    margin: 0 auto;
    overflow: auto;
    padding-right: 60px;
    width: 1200px
}

@media screen and (max-width: 1024px) {
    .egame .app-body .egame-providers {
        margin:auto;
        width: 95%
    }
}

.egame .app-body .egame-gplogo {
    color: #5a5656;
    cursor: pointer;
    flex: 1;
    flex-shrink: 0;
    font-size: 14px;
    height: 96px;
    padding: 3px 10px;
    position: relative;
    text-align: center;
    transition: color .4s;
    z-index: 1
}

.egame .app-body .egame-gplogo:first-child {
    margin-left: auto
}

.egame .app-body .egame-gplogo:last-child {
    margin-right: auto
}

.egame .app-body .egame-gplogo .pd-logo {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(50%) grayscale(100%);
    height: 60px;
    margin: 0 auto;
    transition: filter .4s;
    width: 60px
}

.egame .app-body .egame-gplogo:after {
    background-color: #c72828;
    background-image: linear-gradient(180deg,#0000 50%,#00000040);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transition: transform .4s;
    width: 100%;
    z-index: -1
}

.egame .app-body .egame-gplogo.active,.egame .app-body .egame-gplogo:hover {
    color: #fff
}

.egame .app-body .egame-gplogo.active .pd-logo,.egame .app-body .egame-gplogo:hover .pd-logo {
    filter: brightness(500%) grayscale(100%)
}

.egame .app-body .egame-gplogo.active:after,.egame .app-body .egame-gplogo:hover:after {
    transform: scaleX(1)
}

.egame .app-body .egame-tags {
    left: 50%;
    margin-left: -600px;
    position: absolute;
    top: 166px;
    width: 155px
}

.egame .app-body .egame-tags>div {
    background-color: #ffffff4d;
    box-shadow: inset 0 0 0 1px #aaa;
    color: #0e0e0e;
    cursor: pointer;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    padding: 15px 0 15px 35px;
    position: relative;
    text-overflow: ellipsis;
    transition: color .4s,box-shadow .4s;
    z-index: 1
}

.egame .app-body .egame-tags>div+div {
    margin-top: 5px
}

.egame .app-body .egame-tags>div:before {
    color: #c72828;
    content: "★";
    display: block;
    font-family: iconmps;
    font-size: 20px;
    left: 10px;
    line-height: 20px;
    position: absolute;
    text-align: center;
    top: 16px;
    transition: filter .4s;
    width: 20px
}

.egame .app-body .egame-tags>div:after {
    background-color: #c72828;
    content: "";
    height: 100%;
    position: absolute;
    right: -10%;
    top: 0;
    transform: skew(-30deg);
    transition: width .4s linear;
    width: 0;
    z-index: -1
}

.egame .app-body .egame-tags>div.active,.egame .app-body .egame-tags>div:hover {
    box-shadow: inset 0 0 0 2px #c72828;
    color: #fff
}

.egame .app-body .egame-tags>div.active:before,.egame .app-body .egame-tags>div:hover:before {
    filter: brightness(6)
}

.egame .app-body .egame-tags>div.active:after,.egame .app-body .egame-tags>div:hover:after {
    left: -10%;
    width: 120%
}

.egame .app-body .egame-tags>.all:before {
    content: ""
}

.egame .app-body .egame-tags>.new:before {
    content: ""
}

.egame .app-body .egame-tags>.pop:before {
    content: ""
}

.egame .app-body .egame-tags>.favorite:before {
    content: "❤"
}

@media screen and (max-width: 1024px) {
    .egame .app-body .egame-tags {
        display:flex;
        left: auto;
        margin: 10px auto;
        padding: 0;
        position: relative;
        top: auto;
        width: 95%
    }

    .egame .app-body .egame-tags>div {
        margin: 0;
        padding: 15px 15px 15px 35px
    }
}

.egame .app-body .egame-content {
    margin: 0 auto;
    max-width: 1200px;
    padding-left: 180px;
    position: relative
}

@media screen and (max-width: 1024px) {
    .egame .app-body .egame-content {
        padding:10px 0 0;
        width: 95%
    }
}

.egame .app-body .egame-tools {
    height: 70px
}

@media screen and (max-width: 1024px) {
    .egame .app-body .egame-tools {
        position:absolute;
        right: 0;
        top: -70px;
        width: 45%
    }
}

.egame .app-body .egame-tools-search {
    text-align: right
}

.egame .app-body .egame-games {
    background-color: #ffffff40;
    margin-bottom: 20px;
    min-height: 360px;
    padding: 15px
}

.egame .app-body .game-item {
    animation: ae_bounceIn .6s cubic-bezier(.215,.61,.355,1) both;
    aspect-ratio: 155/205;
    display: inline-block;
    margin: 15px 5px 0;
    perspective: 430px;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: calc(20% - 10px)
}

.egame .app-body .game-item:hover>.link-cover {
    filter: blur(0);
    transform: rotate3d(0,0,0,0deg)
}

.egame .app-body .game-item:hover>.link-cover:after,.egame .app-body .game-item:hover>.link-cover:before {
    opacity: 1;
    transform: scaleX(1)
}

.egame .app-body .game-item:hover>.link-cover+.rating {
    opacity: 0
}

.egame .app-body .game-item .comingsoon {
    background-color: #c72828;
    border-radius: 3px;
    box-shadow: 0 1px 1px #00000080;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    line-height: 26px;
    opacity: .9;
    position: relative;
    top: -5px;
    width: 60%;
    z-index: 1
}

.egame .app-body .game-item[data-fav=fav-game]:after,.egame .app-body .game-item[data-new=new]:before,.egame .app-body .game-item[data-pop=pop]:before {
    border-style: solid;
    height: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 2
}

.egame .app-body .game-item[data-new=new]:before,.egame .app-body .game-item[data-pop=pop]:before {
    border-width: 0 35px 35px;
    color: #fff;
    font-size: 12px;
    left: 0;
    line-height: 47px;
    text-indent: -13px;
    text-shadow: 0 1px 2px #0000004d;
    transform: translate3d(-26px,-8px,0) scale3d(.8,.8,1) rotate(-45deg)
}

.egame .app-body .game-item[data-new=new]:before {
    border-color: #0000 #0000 #d01919;
    content: "NEW"
}

.egame .app-body .game-item[data-pop=pop]:before {
    border-color: #0000 #0000 #ff8a00;
    content: "HOT"
}

.egame .app-body .game-item[data-fav=fav-game]:after {
    animation: fav-game .4s;
    border-color: #0000 #ea4747 #0000 #0000;
    border-width: 0 40px 40px 0;
    color: #8d1717;
    content: "❤";
    font-size: 16px;
    line-height: 28px;
    right: 0;
    text-indent: 21px;
    transform-origin: 100% 0
}

.egame .app-body .egame-content.maintenance .game-item {
    animation-name: none;
    filter: grayscale(90%);
    opacity: .5
}

.egame .app-body .egame-content.maintenance>.maintenance-block {
    left: 50%;
    margin-left: -110px;
    padding: 20px;
    text-align: center;
    top: 290px;
    width: 400px
}

.egame .app-body .egame-pagination {
    padding-bottom: 40px;
    text-align: center
}

.egame .app-body .egame-pagination .rc-pagination-next,.egame .app-body .egame-pagination .rc-pagination-prev {
    background-color: #fff
}

.egame .app-body .game-item>.link-cover,.egame .app-body .game-item>.link-cover:after,.egame .app-body .game-item>.link-cover:before {
    background-color: #0006;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.egame .app-body .egame-tools-search>.search-input {
    display: inline-block;
    margin: 17px 5px 0 0;
    position: relative;
    width: 250px
}

.egame .app-body .egame-tools-search>.search-input>input {
    background-color: #fff;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 100%
}

.egame .app-body .egame-tools-search>.search-button {
    border-radius: 2px;
    display: inline-block;
    font-family: iconmps;
    font-size: 24px;
    height: 36px;
    line-height: 36px;
    padding: 0;
    transition: font-size .4s,background-color .4s;
    vertical-align: middle;
    width: 40px
}

.egame .app-body .egame-tools-search>.search-button:hover {
    font-size: 26px
}

.egame .app-body .game-item img {
    display: block;
    min-height: 150px;
    width: 100%
}

.egame .app-body .game-item>.title {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin: 3px 0 7px;
    padding: 8px 0
}

.egame .app-body .game-item>.link-cover {
    align-items: center;
    aspect-ratio: 1/1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    filter: blur(3px);
    flex-direction: column;
    justify-content: center;
    transform: rotateX(-105deg);
    transform-origin: 50% 0;
    transition: transform .6s,filter .4s;
    width: 100%;
    z-index: 1
}

.egame .app-body .game-item>.link-cover:after,.egame .app-body .game-item>.link-cover:before {
    content: "";
    height: 100%;
    opacity: 0;
    transform: scale3d(.25,.25,1);
    z-index: -1
}

.egame .app-body .game-item>.link-cover:before {
    transition: transform .6s .6s,opacity .4s .4s
}

.egame .app-body .game-item>.link-cover:after {
    transition: transform .6s .2s,opacity .4s
}

.egame .app-body .game-item .nrc-button {
    font-size: 14px;
    padding: 0;
    transition: background-color .4s,transform .4s;
    width: 80%
}

.egame .app-body .game-item .nrc-button:hover {
    transform: scale3d(1.06,1.06,1)
}

.egame .app-body .game-item .nrc-button+.nrc-button {
    margin-top: 18px
}

.egame .app-body .game-item .nrc-button.add-fav {
    background-color: #ea4747
}

.egame .app-body .game-item .nrc-button.add-fav:hover {
    background-color: #db4444
}

.egame .app-body .game-item .nrc-button.remove-fav {
    background-color: #999
}

.egame .app-body .game-item .nrc-button.remove-fav:hover {
    background-color: #777
}

.egame .app-body .game-item.disabled>.link-cover {
    filter: none;
    transform: rotate3d(0,0,0,0deg)
}

.egame .app-body .game-item.disabled .launch-game {
    margin-top: 52px;
    position: relative
}

.egame .app-body .egame-container .empty-list {
    color: #e86262;
    font-size: 36px;
    left: 0;
    padding-left: 180px;
    position: absolute;
    text-align: center;
    top: 70px;
    width: 100%
}

.egame .app-body .egame-container .empty-list:before {
    background-color: #fff;
    border-radius: 50%;
    content: "❤";
    display: block;
    font-size: 60px;
    height: 100px;
    line-height: 102px;
    margin: 60px auto 15px;
    width: 100px
}

.egame .app-body .egame-container.chess-container .egame-gplogo.active:before,.egame .app-body .egame-container.chess-container .egame-gplogo:hover:before {
    filter: brightness(100%) grayscale(0)
}

.egame .app-body .egame-container.chess-container .egame-content {
    padding-left: 0
}

.desktop .live-mode {
    margin: 15px 35px 0 42px
}

.live-mode {
    align-items: center;
    background: #e0e7ec;
    border: 1px solid #fff;
    border-radius: 30px;
    box-sizing: border-box;
    display: flex;
    height: 36px;
    justify-content: center;
    margin: 15px 35px 20px 42px;
    padding: 1px
}

.live-mode.dark {
    background: var(--live-mode-dark-bg);
    border: var(--live-mode-dark-border)
}

.live-mode.dark li {
    color: var(--live-mode-dark-li-color)
}

.live-mode li {
    border-radius: 30px;
    color: #545454;
    display: flex;
    flex: 0 0 50%;
    font-size: 1.3rem;
    height: 100%;
    text-align: center
}

.live-mode li .link {
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center
}

.live-mode li.selected {
    background: var(--live-mode-li-bg);
    border: var(--live-mode-li-border);
    color: var(--live-mode-li-color);
    font-size: 1.5rem;
    text-shadow: var(--live-mode-li-text-shadow)
}

.live-mode li.disable {
    color: #757575
}

.default-logo-component {
    background-image: url(/static/media/default-logo.d57afb54..png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.room-bet-limit-component {
    background: var(--bet-limit-bg);
    border-radius: 10px;
    color: var(--bet-limit-color);
    line-height: 14px;
    padding: .2rem .6rem
}

.room-detail-component {
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
    font-size: 1.2rem;
    justify-content: space-between;
    line-height: 1.4rem;
    padding: 0 .4rem
}

.room-detail-component .panel {
    align-items: center;
    -moz-column-gap: .4rem;
    column-gap: .4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.icon-flag {
    background-repeat: no-repeat;
    background-size: 100%;
    height: 14px;
    width: 14px
}

.icon-flag.am {
    background-image: url(/static/media/am.5bd2ad50..svg)
}

.icon-flag.br {
    background-image: url(/static/media/br.ccd03ff5..svg)
}

.icon-flag.by {
    background-image: url(/static/media/by.2929b767..svg)
}

.icon-flag.cn {
    background-image: url(/static/media/cn.b048aa1e..svg)
}

.icon-flag.es {
    background-image: url(/static/media/es.099ab56f..svg)
}

.icon-flag.gb {
    background-image: url(/static/media/gb.323a5a42..svg)
}

.icon-flag.ge {
    background-image: url(/static/media/ge.89dccb3a..svg)
}

.icon-flag.hk {
    background-image: url(/static/media/hk.3593993e..svg)
}

.icon-flag.id {
    background-image: url(/static/media/id.a48ff8fc..svg)
}

.icon-flag.in {
    background-image: url(/static/media/in.9c4b76f1..svg)
}

.icon-flag.it {
    background-image: url(/static/media/it.c7704c2a..svg)
}

.icon-flag.jp {
    background-image: url(/static/media/jp.814b7883..svg)
}

.icon-flag.kg {
    background-image: url(/static/media/kg.5362ebce..svg)
}

.icon-flag.kh {
    background-image: url(/static/media/kh.dceae834..svg)
}

.icon-flag.kr {
    background-image: url(/static/media/kr.ce55f334..svg)
}

.icon-flag.kz {
    background-image: url(/static/media/kz.42edb6ab..svg)
}

.icon-flag.md {
    background-image: url(/static/media/md.d1c2691a..svg)
}

.icon-flag.mm {
    background-image: url(/static/media/mm.6a44c0ad..svg)
}

.icon-flag.mx {
    background-image: url(/static/media/mx.3fe913ee..svg)
}

.icon-flag.my {
    background-image: url(/static/media/my.69270814..svg)
}

.icon-flag.ph {
    background-image: url(/static/media/ph.4d302f97..svg)
}

.icon-flag.pl {
    background-image: url(/static/media/pl.2305132f..svg)
}

.icon-flag.pt {
    background-image: url(/static/media/pt.552cfdb5..svg)
}

.icon-flag.sg {
    background-image: url(/static/media/sg.61d3bf93..svg)
}

.icon-flag.th {
    background-image: url(/static/media/th.f2f1bb27..svg)
}

.icon-flag.tj {
    background-image: url(/static/media/tj.e375c341..svg)
}

.icon-flag.tm {
    background-image: url(/static/media/tm.ead4500d..svg)
}

.icon-flag.tw {
    background-image: url(/static/media/tw.c8f74627..svg)
}

.icon-flag.ua {
    background-image: url(/static/media/ua.0c99eac6..svg)
}

.icon-flag.uk {
    background-image: url(/static/media/uk.6b41bce0..svg)
}

.icon-flag.us {
    background-image: url(/static/media/us.d6bf598d..svg)
}

.icon-flag.uz {
    background-image: url(/static/media/uz.a158b829..svg)
}

.icon-flag.vn {
    background-image: url(/static/media/vn.39d6358e..svg)
}

.table-chip-component {
    align-items: center;
    display: flex;
    height: 100%;
    padding-left: 6px;
    padding-right: 6px
}

.table-chip-component:active {
    background: #dadada33;
    box-shadow: inset 0 2px 5px #99999980
}

.table-chip-component:active>div {
    transform: translateY(1px)
}

@media(hover: hover) {
    .table-chip-component:hover {
        background:var(--dealer-profile-enter-play-bg-hover);
        cursor: pointer
    }
}

.table-chip-component .chip {
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    height: 22px;
    justify-content: center;
    width: 22px
}

.table-chip-component .table-chip-text {
    color: #000;
    font-size: 10px;
    letter-spacing: -.06em;
    line-height: 22px;
    text-shadow: 0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff
}

.table-chip-component .chip-level-0 {
    background-image: url(/static/media/bet1.6b47eb44..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-0:hover {
        background-image:url(/static/media/bet1.6b47eb44..svg)
    }
}

.table-chip-component .chip-level-1 {
    background-image: url(/static/media/bet2.f81629b4..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-1:hover {
        background-image:url(/static/media/bet2.f81629b4..svg)
    }
}

.table-chip-component .chip-level-2 {
    background-image: url(/static/media/bet3.e26296cf..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-2:hover {
        background-image:url(/static/media/bet3.e26296cf..svg)
    }
}

.table-chip-component .chip-level-3 {
    background-image: url(/static/media/bet4.3778ddc9..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-3:hover {
        background-image:url(/static/media/bet4.3778ddc9..svg)
    }
}

.table-chip-component .chip-level-4 {
    background-image: url(/static/media/bet5.064f66aa..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-4:hover {
        background-image:url(/static/media/bet5.064f66aa..svg)
    }
}

.table-chip-component .chip-level-5 {
    background-image: url(/static/media/bet6.f51a7e7b..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-5:hover {
        background-image:url(/static/media/bet6.f51a7e7b..svg)
    }
}

.table-chip-component .chip-level-6 {
    background-image: url(/static/media/bet7.0fff8c80..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-6:hover {
        background-image:url(/static/media/bet7.0fff8c80..svg)
    }
}

.table-chip-component .chip-level-7 {
    background-image: url(/static/media/bet8.2216a8d9..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-7:hover {
        background-image:url(/static/media/bet8.2216a8d9..svg)
    }
}

.table-chip-component .chip-level-8 {
    background-image: url(/static/media/bet9.63c49532..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-8:hover {
        background-image:url(/static/media/bet9.63c49532..svg)
    }
}

.table-chip-component .chip-level-9 {
    background-image: url(/static/media/bet10.b7ee5b6f..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-9:hover {
        background-image:url(/static/media/bet10.b7ee5b6f..svg)
    }
}

.table-chip-component .chip-level-10 {
    background-image: url(/static/media/bet11.628b954f..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-10:hover {
        background-image:url(/static/media/bet11.628b954f..svg)
    }
}

.table-chip-component .chip-level-11 {
    background-image: url(/static/media/bet12.556b7abe..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-11:hover {
        background-image:url(/static/media/bet12.556b7abe..svg)
    }
}

.table-chip-component .chip-level-12 {
    background-image: url(/static/media/bet13.e3c519fc..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-12:hover {
        background-image:url(/static/media/bet13.e3c519fc..svg)
    }
}

.table-chip-component .chip-level-13 {
    background-image: url(/static/media/bet14.58e18b71..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-13:hover {
        background-image:url(/static/media/bet14.58e18b71..svg)
    }
}

.table-chip-component .chip-level-14 {
    background-image: url(/static/media/bet15.06d41cc5..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-14:hover {
        background-image:url(/static/media/bet15.06d41cc5..svg)
    }
}

.table-chip-component .chip-level-15.selected {
    background-image: url(/static/media/bet-self.ba92d756..svg)
}

@media(hover: hover) {
    .table-chip-component .chip-level-15:hover {
        background-image:url(/static/media/bet-self.ba92d756..svg)
    }
}

.dealer-detail .dealer-profile {
    background: url(https://img.gashinzo.com/img/static/er/casino/host-bg.png) 50%/102% 102% no-repeat
}

.dealer-detail {
    display: flex;
    flex-direction: column;
    height: 85%;
    width: 75px
}

@media(hover: hover) {
    .dealer-detail:hover {
        cursor:pointer
    }
}

.dealer-detail .dealer-profile {
    border-radius: .4rem .4rem 0 0;
    flex: 1;
    overflow: hidden;
    padding-bottom: 86.8%;
    position: relative;
    transform: translateZ(0)
}

.dealer-detail .dealer-profile .category {
    align-items: center;
    bottom: 0;
    color: #fff;
    display: flex;
    font-size: 1.2rem;
    justify-content: center;
    min-height: 2.2rem;
    opacity: 0;
    padding: 2px;
    position: absolute;
    text-align: center;
    width: 100%
}

.dealer-detail .dealer-profile .category>div {
    word-wrap: break-word;
    letter-spacing: -.4px;
    line-height: 10px;
    width: 80%
}

@media(max-width: 375px) {
    .dealer-detail .dealer-profile .category>div {
        width:70%
    }
}

.dealer-detail .dealer-profile .category.interactive {
    background: var(--dealer-category-interactive-bg)
}

.dealer-detail .dealer-profile .category.live {
    background: var(--dealer-category-live-bg)
}

.dealer-detail .dealer-profile .default-logo {
    height: 6rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 6rem
}

.dealer-detail .dealer-profile .dealer-avatar {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    bottom: 4px;
    left: 50%;
    margin: 0 auto;
    min-height: 90%;
    object-fit: cover;
    position: absolute;
    top: auto;
    transform: translateX(-50%);
    width: auto;
    width: 95%
}

.dealer-detail .dealer-profile .subscribe-star {
    bottom: 20px;
    cursor: pointer;
    left: 5px;
    position: absolute
}

.dealer-detail .dealer-profile .subscribe-star .star {
    background-image: url(/static/media/star-hollow.39f9bf2f..svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 10px;
    width: 10px
}

.dealer-detail .dealer-profile .subscribe-star .star.has-subscribe {
    background-image: url(/static/media/star.74687052..svg)
}

.dealer-detail .dealer-profile .right-topWrapper {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0
}

.dealer-detail .dealer-profile .rebate-percentage {
    background: #00000080;
    box-sizing: border-box;
    color: #ffee96;
    display: inline-flex;
    font-size: 1.2rem;
    line-height: 1.6rem;
    padding: .1rem
}

.dealer-detail .dealer-profile .ai {
    background: var(--dealer-category-ai-bg);
    border-radius: 8px 0 0 8px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.6rem;
    padding: .1rem .1rem .1rem .4rem;
    text-align: center;
    width: 18px
}

.dealer-detail .dealer-profile .icon-flag {
    bottom: 5px;
    left: 5px;
    position: absolute;
    z-index: 1
}

.dealer-detail .dealer-profile .good-road {
    background-image: var(--dealer-good-road-icon);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 4px;
    height: 10px;
    position: absolute;
    right: 2px;
    width: 10px;
    z-index: 1
}

.dealer-detail .dealer-label {
    bottom: 2px;
    display: flex;
    font-size: 1rem;
    justify-content: space-between;
    left: 2px;
    line-height: 1.5rem;
    padding: .05rem 0;
    position: absolute;
    width: calc(100% - 4px)
}

.dealer-detail .dealer-label>div {
    position: relative;
    z-index: 1
}

.dealer-detail .dealer-label>div.dealer-name {
    text-indent: 15px
}

.dealer-detail .dealer-label:before {
    background-image: linear-gradient(180deg,#e6e6e600,#e5e5e5 85%);
    border-radius: 0 0 10px 10px;
    bottom: 0;
    content: "";
    display: block;
    height: 200%;
    position: absolute;
    width: 100%
}

.dealer-detail .dealer-label .game-round {
    font-size: .9rem;
    padding-right: 3px
}

@media(hover: hover) {
    .dealer-detail .dealer-label:hover {
        cursor:pointer
    }
}

.dealer-detail .enter-play {
    align-items: center;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #ccc,0 1px 0 #ffffffe6;
    display: flex;
    height: 3rem;
    justify-content: center;
    overflow: hidden
}

.dealer-detail .enter-play .play-button {
    align-items: center;
    color: #be9145;
    display: flex;
    flex: 1;
    font-size: 1.4rem;
    height: 100%;
    justify-content: center;
    line-height: 1.8rem
}

.dealer-detail .enter-play .play-button:active {
    background: #dadada33;
    box-shadow: inset 0 2px 5px #99999980
}

.dealer-detail .enter-play .play-button:active>span {
    transform: translateY(1px)
}

@media(hover: hover) {
    .dealer-detail .enter-play .play-button:hover {
        background:var(--dealer-profile-enter-play-bg-hover);
        cursor: pointer
    }
}

.dealer-detail .enter-play .icon-in {
    color: var(--dealer-play-icon-color);
    display: none;
    margin-left: .6rem
}

.dealer-detail .enter-play .divider {
    border-left: 1px solid #ccc;
    height: 100%
}

.baccarat-roadmap-component .road-map-content {
    align-content: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    left: 0;
    padding: .4% 0 0 1.5%;
    position: absolute;
    top: 0;
    width: 100%
}

.baccarat-roadmap-component .road-map-item-container {
    height: 0;
    position: relative
}

.baccarat-roadmap-component .road-map-item .banker,.baccarat-roadmap-component .road-map-item .player {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 100;
    height: 100%;
    left: 0;
    position: absolute;
    right: 100;
    top: 0;
    width: 100%
}

.baccarat-roadmap-component .road-map-item .player {
    background-image: var(--road-map-player)
}

.baccarat-roadmap-component .road-map-item .player.goodRoad {
    background-image: var(--good-road-map-player)
}

.baccarat-roadmap-component .road-map-item .banker {
    background-image: var(--road-map-banker)
}

.baccarat-roadmap-component .road-map-item .banker.goodRoad {
    background-image: var(--good-road-map-banker)
}

.baccarat-roadmap-component .road-map-item .banker-pair,.baccarat-roadmap-component .road-map-item .player-pair,.baccarat-roadmap-component .road-map-item .tie {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 100;
    height: 100%;
    left: 0;
    position: absolute;
    right: 100;
    top: 0;
    width: 100%
}

.baccarat-roadmap-component .road-map-item .player-pair {
    background-image: var(--road-map-player-pair)
}

.baccarat-roadmap-component .road-map-item .player-pair.goodRoad {
    background-image: var(--good-road-map-player-pair)
}

.baccarat-roadmap-component .road-map-item .banker-pair {
    background-image: var(--road-map-banker-pair)
}

.baccarat-roadmap-component .road-map-item .banker-pair.goodRoad {
    background-image: var(--good-road-map-banker-pair)
}

.baccarat-roadmap-component .road-map-item .tie {
    background-image: var(--road-map-tie)
}

.baccarat-roadmap-component .road-map-item .tie.goodRoad {
    background-image: var(--good-road-map-tie)
}

.dragon-tiger-roadmap-component .road-map-content {
    align-content: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    left: 0;
    padding: .4% 0 0 1.5%;
    position: absolute;
    top: 0;
    width: 100%
}

.dragon-tiger-roadmap-component .road-map-item-container {
    height: 0;
    position: relative
}

.dragon-tiger-roadmap-component .road-map-item {
    height: 100%;
    width: 100%
}

.dragon-tiger-roadmap-component .road-map-item .dragon,.dragon-tiger-roadmap-component .road-map-item .tiger {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 100;
    height: 100%;
    left: 0;
    position: absolute;
    right: 100;
    top: 0;
    width: 100%
}

.dragon-tiger-roadmap-component .road-map-item .tiger {
    background-image: var(--road-map-tiger)
}

.dragon-tiger-roadmap-component .road-map-item .tiger.goodRoad {
    background-image: var(--good-road-map-tiger)
}

.dragon-tiger-roadmap-component .road-map-item .dragon {
    background-image: var(--road-map-dragon)
}

.dragon-tiger-roadmap-component .road-map-item .dragon.goodRoad {
    background-image: var(--good-road-map-dragon)
}

.dragon-tiger-roadmap-component .road-map-item .tie {
    background-image: var(--road-map-tg-tie);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 100;
    height: 100%;
    left: 0;
    position: absolute;
    right: 100;
    top: 0;
    width: 100%
}

.dragon-tiger-roadmap-component .road-map-item .tie.goodRoad {
    background-image: var(--good-road-map-tg-tie)
}

.dice-component {
    background-size: contain;
    height: 3rem;
    width: 3rem
}

.dice-component.point-1 {
    background-image: url(/static/media/01.3b10c7bc..svg)
}

.dice-component.point-2 {
    background-image: url(/static/media/02.0a55ad26..svg)
}

.dice-component.point-3 {
    background-image: url(/static/media/03.afe8cf7a..svg)
}

.dice-component.point-4 {
    background-image: url(/static/media/04.27766270..svg)
}

.dice-component.point-5 {
    background-image: url(/static/media/05.37b3efd6..svg)
}

.dice-component.point-6 {
    background-image: url(/static/media/06.95f9b6a9..svg)
}

.sic-bo-roadmap-component .road-map-content {
    display: flex
}

.sic-bo-roadmap-component .road-map-item-container {
    padding: .2rem;
    width: 1.8rem
}

.sic-bo-roadmap-component .road-map-item-container.is-last {
    background: #c0bdad59;
    border-radius: .2rem
}

.sic-bo-roadmap-component .road-map-item-container.is-last.is-streamer {
    background: linear-gradient(1turn,#ffabab -.8%,#ffcce8 46.98%,#ff629b);
    border: 1px solid #ff419c
}

.sic-bo-roadmap-component .road-map-item {
    align-items: center;
    display: flex;
    flex-direction: column
}

.sic-bo-roadmap-component .dice {
    height: 1.2rem;
    margin-bottom: .2rem;
    width: 1.2rem
}

.sic-bo-roadmap-component .result,.sic-bo-roadmap-component .result-value {
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin-bottom: .1rem
}

.sic-bo-roadmap-component .result-value.is-big,.sic-bo-roadmap-component .result.is-big {
    color: var(--road-map-big)
}

.sic-bo-roadmap-component .result-value.is-small,.sic-bo-roadmap-component .result.is-small {
    color: var(--road-map-small)
}

.sic-bo-roadmap-component .result-value.is-triple,.sic-bo-roadmap-component .result.is-triple {
    color: var(--road-map-any-triple)
}

.tai-sic-roadmap-component .road-map-content {
    display: flex
}

.tai-sic-roadmap-component .road-map-item-container {
    padding: 0 .2rem;
    width: 1.8rem
}

.tai-sic-roadmap-component .road-map-item-container.is-last {
    background: #c0bdad59;
    border-radius: .2rem
}

.tai-sic-roadmap-component .road-map-item-container.is-last.is-streamer {
    background: linear-gradient(1turn,#ffabab -.8%,#ffcce8 46.98%,#ff629b);
    border: 1px solid #ff419c
}

.tai-sic-roadmap-component .road-map-item {
    align-items: center;
    display: flex;
    flex-direction: column
}

.tai-sic-roadmap-component .dice {
    height: 1.2rem;
    margin-bottom: .2rem;
    width: 1.2rem
}

.tai-sic-roadmap-component .result {
    border-radius: 100%;
    color: #fff;
    font-size: 1.1rem;
    height: 1.6rem;
    line-height: 1.6rem;
    margin-bottom: .2rem;
    text-align: center;
    width: 1.6rem
}

.tai-sic-roadmap-component .result.is-hi {
    background: #000
}

.tai-sic-roadmap-component .result.is-lo {
    background: #8f2e2e
}

.tai-sic-roadmap-component .result.is-sum {
    background: #f23e3e
}

.tf-icon-component {
    background-color: #fff;
    height: 3rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 3rem
}

.tf-icon-component.calabash {
    background-color: var(--tf-dice-icon-blue);
    -webkit-mask-image: url(/static/media/calabash.e8a2631c..svg);
    mask-image: url(/static/media/calabash.e8a2631c..svg)
}

.tf-icon-component.crab {
    background-color: var(--tf-dice-icon-green);
    -webkit-mask-image: url(/static/media/crab.dd3a81ea..svg);
    mask-image: url(/static/media/crab.dd3a81ea..svg)
}

.tf-icon-component.fish {
    background-color: var(--tf-dice-icon-red);
    -webkit-mask-image: url(/static/media/fish.be198d9c..svg);
    mask-image: url(/static/media/fish.be198d9c..svg)
}

.tf-icon-component.prawn {
    background-color: var(--tf-dice-icon-green);
    -webkit-mask-image: url(/static/media/prawn.c18144f5..svg);
    mask-image: url(/static/media/prawn.c18144f5..svg)
}

.tf-icon-component.rooster {
    background-color: var(--tf-dice-icon-red);
    -webkit-mask-image: url(/static/media/rooster.6ef0e6fe..svg);
    mask-image: url(/static/media/rooster.6ef0e6fe..svg)
}

.tf-icon-component.tiger {
    background-color: var(--tf-dice-icon-blue);
    -webkit-mask-image: url(/static/media/tiger.fd949310..svg);
    mask-image: url(/static/media/tiger.fd949310..svg)
}

.tf-icon-component.deer {
    -webkit-mask-image: url(/static/media/deer.2788f0b0..svg);
    mask-image: url(/static/media/deer.2788f0b0..svg)
}

.tf-icon-component.red {
    background-color: var(--tf-dice-icon-red)
}

.tf-icon-component.green {
    background-color: var(--tf-dice-icon-green)
}

.tf-icon-component.blue {
    background-color: var(--tf-dice-icon-blue)
}

.tf-dice-component {
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 3px #999999b3;
    display: flex;
    height: 5rem;
    justify-content: center;
    width: 5rem
}

.tf-dice-component .tf-dice-icon {
    height: 4.5rem;
    width: 4.5rem
}

.tf-dice-component .tf-dice-icon.red {
    background-color: var(--tf-dice-icon-red)
}

.tf-dice-component .tf-dice-icon.green {
    background-color: var(--tf-dice-icon-green)
}

.tf-dice-component .tf-dice-icon.blue {
    background-color: var(--tf-dice-icon-blue)
}

.tf-roadmap-component .road-map-content {
    display: flex
}

.tf-roadmap-component .road-map-item-container {
    padding: .5rem .1rem .2rem;
    width: 1.6rem
}

.tf-roadmap-component .road-map-item-container.is-last {
    background: #c0bdad59;
    border-radius: .2rem
}

.tf-roadmap-component .road-map-item-container.is-last.is-streamer {
    background: linear-gradient(1turn,#ffabab -.8%,#ffcce8 46.98%,#ff629b);
    border: 1px solid #ff419c
}

.tf-roadmap-component .road-map-item {
    align-items: center;
    display: flex;
    flex-direction: column
}

.tf-roadmap-component .tf-dice {
    height: 1.4rem;
    margin-bottom: .4rem;
    width: 1.4rem
}

.tf-roadmap-component .tf-dice .tf-dice-icon {
    height: 1.25rem;
    width: 1.25rem
}

.tx-roadmap-component .road-map-content {
    display: flex
}

.tx-roadmap-component .road-map-item-container {
    padding: .4rem .2rem .3rem;
    width: 1.8rem
}

.tx-roadmap-component .road-map-item-container.is-last {
    background: #c0bdad59;
    border-radius: .2rem
}

.tx-roadmap-component .road-map-item-container.is-last.is-streamer {
    background: linear-gradient(1turn,#ffabab -.8%,#ffcce8 46.98%,#ff629b);
    border: 1px solid #ff419c
}

.tx-roadmap-component .road-map-item {
    align-items: center;
    display: flex;
    flex-direction: column
}

.tx-roadmap-component .dice {
    height: 1.2rem;
    margin-bottom: .1rem;
    width: 1.2rem
}

.tx-roadmap-component .result {
    border-radius: .6rem;
    height: 1.2rem;
    width: 1.2rem
}

.tx-roadmap-component .result.is-tai {
    background: #082022;
    border: 1px solid #aeaeae
}

.tx-roadmap-component .result.is-xui {
    background: #fff;
    border: 1px solid #aeaeae
}

.cg-roadmap-component .road-map-content {
    display: flex
}

.cg-roadmap-component .road-map-item-container {
    padding: .7rem .2rem .6rem;
    width: 1.6rem
}

.cg-roadmap-component .road-map-item-container.is-last {
    background: #c0bdad59;
    border-radius: .2rem
}

.cg-roadmap-component .road-map-item-container.is-last.is-streamer {
    background: linear-gradient(1turn,#ffabab -.8%,#ffcce8 46.98%,#ff629b);
    border: 1px solid #ff419c
}

.cg-roadmap-component .road-map-item-container.is-streamer {
    width: 34px
}

.cg-roadmap-component .road-map-item-container-end-padding.is-streamer {
    width: 20px
}

.cg-roadmap-component .road-map-item {
    align-items: center;
    display: flex;
    flex-direction: column
}

.cg-roadmap-component .color-dice {
    border: .1rem solid #aeaeae;
    border-radius: 100%;
    height: 1.2rem;
    margin-bottom: .4rem;
    width: 1.2rem
}

.xd-roadmap-component .road-map-content {
    align-content: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    left: 0;
    padding: .4% 0 0 1.5%;
    position: absolute;
    top: 0;
    width: 100%
}

.xd-roadmap-component .road-map-item-container {
    height: 0;
    position: relative
}

.xd-roadmap-component .road-map-item {
    height: 100%;
    width: 100%
}

.xd-roadmap-component .road-map-item .dot,.xd-roadmap-component .road-map-item .dot-0,.xd-roadmap-component .road-map-item .dot-1,.xd-roadmap-component .road-map-item .dot-2,.xd-roadmap-component .road-map-item .dot-3,.xd-roadmap-component .road-map-item .dot-4,.xd-roadmap-component .road-map-item .good-dot-0,.xd-roadmap-component .road-map-item .good-dot-1,.xd-roadmap-component .road-map-item .good-dot-2,.xd-roadmap-component .road-map-item .good-dot-3,.xd-roadmap-component .road-map-item .good-dot-4 {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    position: absolute;
    width: 100%
}

.xd-roadmap-component .road-map-item .dot-0 {
    background-image: var(--road-map-xd-0)
}

.xd-roadmap-component .road-map-item .good-dot-0 {
    background-image: var(--road-map-xd-0-good)
}

.xd-roadmap-component .road-map-item .dot-1 {
    background-image: var(--road-map-xd-1)
}

.xd-roadmap-component .road-map-item .good-dot-1 {
    background-image: var(--road-map-xd-1-good)
}

.xd-roadmap-component .road-map-item .dot-2 {
    background-image: var(--road-map-xd-2)
}

.xd-roadmap-component .road-map-item .good-dot-2 {
    background-image: var(--road-map-xd-2-good)
}

.xd-roadmap-component .road-map-item .dot-3 {
    background-image: var(--road-map-xd-3)
}

.xd-roadmap-component .road-map-item .good-dot-3 {
    background-image: var(--road-map-xd-3-good)
}

.xd-roadmap-component .road-map-item .dot-4 {
    background-image: var(--road-map-xd-4)
}

.xd-roadmap-component .road-map-item .good-dot-4 {
    background-image: var(--road-map-xd-4-good)
}

.HL-baccarat-roadmap-component .road-map-content {
    display: flex
}

.HL-baccarat-roadmap-component .road-map-item-container {
    padding: .2rem;
    width: 1.8rem
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item {
    align-items: center;
    display: flex;
    flex-direction: column
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item {
    text-align: center;
    width: 100%
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.player {
    background: var(--bet-HLplayer-color);
    font-size: 1.2rem;
    height: 100%;
    line-height: 1.4rem;
    text-align: center;
    width: 100%
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.player .result {
    border-radius: 100%;
    color: #fff;
    margin-bottom: .1rem
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.player .result.TIE {
    background-color: var(--bet-HLtie-color)
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.player .result-value {
    background-color: #d8d8d8;
    border-radius: 100%;
    color: var(--bet-HLplayer-color);
    height: 100%;
    margin-bottom: .1rem;
    width: 100%
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.player .result-value.value0_9 {
    color: #000
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.banker {
    background: var(--bet-HLbanker-color);
    font-size: 1.2rem;
    height: 100%;
    line-height: 1.4rem;
    text-align: center;
    width: 100%
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.banker .result {
    border-radius: 100%;
    color: #fff;
    margin-bottom: .1rem
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.banker .result.TIE {
    background-color: var(--bet-HLtie-color)
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.banker .result-value {
    background-color: #d8d8d8;
    border-radius: 100%;
    color: var(--bet-HLbanker-color);
    height: 100%;
    margin-bottom: .1rem;
    width: 100%
}

.HL-baccarat-roadmap-component .road-map-item-container .road-map-item .item.banker .result-value.value0_9 {
    color: #000
}

.HL-baccarat-roadmap-component .road-map-item-container.is-last {
    background: #ffd744;
    border-radius: .2rem
}

.HL-baccarat-roadmap-component .road-map-item-container.is-last.is-streamer {
    background: linear-gradient(1turn,#ffabab -.8%,#ffcce8 46.98%,#ff629b);
    border: 1px solid #ff419c
}

.bet-percentage-component {
    display: flex;
    flex-direction: column
}

.bet-percentage-component .result-group {
    display: flex;
    font-size: 1.3rem;
    font-weight: 500;
    justify-content: space-between;
    line-height: 14px;
    padding: 4% 6%
}

.bet-percentage-component .result-left.BACCARAT30S,.bet-percentage-component .result-left.BACCARAT60S,.bet-percentage-component .result-left.PAIRBCRT60S,.bet-percentage-component .result-left.SUPERSIX60S,.bet-percentage-component .result-left.TPBCRT60S {
    color: var(--bet-percentage-Baccarat-left-color)
}

.bet-percentage-component .result-left.DT60S {
    color: var(--bet-percentage-dt-left-color)
}

.bet-percentage-component .result-left.SB60S {
    color: var(--bet-percentage-sb-left-color)
}

.bet-percentage-component .result-left.HL60S {
    color: var(--bet-percentage-hl-left-color)
}

.bet-percentage-component .result-left.TX60S {
    color: var(--bet-percentage-tx-left-color)
}

.bet-percentage-component .result-bar-left.BACCARAT30S,.bet-percentage-component .result-bar-left.BACCARAT60S,.bet-percentage-component .result-bar-left.PAIRBCRT60S,.bet-percentage-component .result-bar-left.SUPERSIX60S,.bet-percentage-component .result-bar-left.TPBCRT60S {
    background-color: var(--bet-percentage-Baccarat-left-color)
}

.bet-percentage-component .result-bar-left.DT60S {
    background-color: var(--bet-percentage-dt-left-color)
}

.bet-percentage-component .result-bar-left.SB60S {
    background-color: var(--bet-percentage-sb-left-color)
}

.bet-percentage-component .result-bar-left.HL60S {
    background-color: var(--bet-percentage-hl-left-color)
}

.bet-percentage-component .result-bar-left.TX60S {
    background-color: var(--bet-percentage-tx-left-color)
}

.bet-percentage-component .result-right.BACCARAT30S,.bet-percentage-component .result-right.BACCARAT60S,.bet-percentage-component .result-right.PAIRBCRT60S,.bet-percentage-component .result-right.SUPERSIX60S,.bet-percentage-component .result-right.TPBCRT60S {
    color: var(--bet-percentage-Baccarat-right-color)
}

.bet-percentage-component .result-right.DT60S {
    color: var(--bet-percentage-dt-right-color)
}

.bet-percentage-component .result-right.SB60S {
    color: var(--bet-percentage-sb-right-color)
}

.bet-percentage-component .result-right.HL60S {
    color: var(--bet-percentage-hl-right-color)
}

.bet-percentage-component .result-right.TX60S {
    color: var(--bet-percentage-tx-right-color)
}

.bet-percentage-component .result-bar.BACCARAT30S,.bet-percentage-component .result-bar.BACCARAT60S,.bet-percentage-component .result-bar.PAIRBCRT60S,.bet-percentage-component .result-bar.SUPERSIX60S,.bet-percentage-component .result-bar.TPBCRT60S {
    background-color: var(--bet-percentage-Baccarat-right-color)
}

.bet-percentage-component .result-bar.DT60S {
    background-color: var(--bet-percentage-dt-right-color)
}

.bet-percentage-component .result-bar.SB60S {
    background-color: var(--bet-percentage-sb-right-color)
}

.bet-percentage-component .result-bar.HL60S {
    background-color: var(--bet-percentage-hl-right-color)
}

.bet-percentage-component .result-bar.TX60S {
    background-color: var(--bet-percentage-tx-right-color)
}

.bet-percentage-component .result-bar {
    height: 3px;
    width: 100%
}

.bet-percentage-component .result-bar .result-bar-left {
    border-radius: 0 10px 10px 0;
    height: 100%
}

.room-stats-component {
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    margin-left: 2px;
    position: relative;
    width: 75px
}

.room-stats-component .room-result {
    background: #9999991a;
    border-radius: 5px;
    box-shadow: inset 0 0 2px #6666664d,inset 0 1px 5px #9999994d;
    display: flex;
    flex: 3;
    flex-direction: column;
    justify-content: space-between
}

.room-stats-component .room-result .road-map {
    height: 0;
    padding-bottom: 80%;
    position: relative;
    width: 100%
}

.room-stats-component .room-result .road-map .road-map-content {
    padding: 5%
}

.room-stats-component .bet-stats {
    background: #9999991a;
    border-radius: 5px;
    box-shadow: inset 0 0 2px #6666664d,inset 0 1px 5px #9999994d;
    flex: 1;
    margin-top: 2px
}

.room-stats-component .bet-stats .bet-stats-content {
    color: #c4c4c4;
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    height: 100%;
    justify-content: space-evenly;
    padding: 5% 7.5%
}

.room-stats-component .bet-stats .bet-stats-content .bet-stats-row {
    align-items: center;
    display: flex;
    min-height: 15px
}

.room-stats-component .bet-stats .bet-stats-content .icon {
    margin-right: 3%
}

.game-state {
    bottom: 0;
    display: flex;
    font-size: 2.4rem;
    font-weight: 600;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1
}

.game-state.stop-bet {
    align-items: center;
    height: 100%;
    justify-content: center;
    pointer-events: none;
    top: auto
}

.game-state.stop-bet span {
    align-items: center;
    -webkit-backdrop-filter: blur(1px) grayscale(.7) brightness(1.1);
    backdrop-filter: blur(1px) grayscale(.7) brightness(1.1);
    background: #ffffffbf;
    border-radius: 4px;
    color: #be9145;
    display: block;
    display: flex;
    height: calc(100% - 4.9rem);
    justify-content: center;
    left: calc(75px + 2rem);
    position: absolute;
    top: 2.9rem;
    width: calc(100% - 75px - 4rem);
    z-index: 1
}

.game-state {
    bottom: 0;
    color: #be9145;
    display: flex;
    font-size: 1.8rem;
    left: 0;
    line-height: 2.5rem;
    position: absolute;
    right: 0;
    top: 0
}

.game-state.shuffle {
    align-items: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #ffffffb3;
    border-radius: 4px;
    flex-direction: column;
    height: calc(100% - 1.8rem);
    justify-content: center;
    top: 0
}

.game-state.shuffle .shuffle-item {
    margin-bottom: 10px;
    padding-bottom: 20%;
    position: relative;
    width: 100%
}

.game-state.shuffle .shuffle-item div {
    background-image: url(/static/media/shuffle-img.5da4ef95..svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

@keyframes shuffle-mode {
    0% {
        transform: translate(1px,1px) rotate(0deg)
    }

    10% {
        transform: translate(-1px,-2px) rotate(-1deg)
    }

    20% {
        transform: translate(-3px) rotate(1deg)
    }

    30% {
        transform: translate(3px,2px) rotate(0deg)
    }

    40% {
        transform: translate(1px,-1px) rotate(1deg)
    }

    50% {
        transform: translate(-1px,2px) rotate(-1deg)
    }

    60% {
        transform: translate(-3px,1px) rotate(0deg)
    }

    70% {
        transform: translate(3px,1px) rotate(-1deg)
    }

    80% {
        transform: translate(-1px,-1px) rotate(1deg)
    }

    90% {
        transform: translate(1px,2px) rotate(0deg)
    }

    to {
        transform: translate(1px,-2px) rotate(-1deg)
    }
}

.timer-container {
    background: #77777780;
    border-radius: 5px;
    box-shadow: inset 0 1px 1px #1113,0 1px 0 #fffc;
    height: 4px;
    position: relative
}

.timer-container .light-bar {
    background: #dadada;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #8888884d;
    display: block;
    height: 6px;
    opacity: .95;
    position: relative;
    top: -1px;
    transition: width .05s linear;
    visibility: hidden;
    width: 0
}

.timer-container .light-bar .light-circle {
    animation: flicker-anim 1.5s linear infinite;
    background: #fff;
    background-clip: padding-box;
    border: 2px solid #ffd744cc;
    border-radius: 50%;
    display: none;
    height: 12px;
    position: absolute;
    right: -6px;
    top: -5px;
    width: 12px
}

.timer-container .light-bar.red {
    background: #f66767;
    box-shadow: inset 0 0 3px #ed5151cc;
    transition: width .05s linear
}

.timer-container .light-bar.red .light-circle {
    border: 2px solid #d30000cc
}

@keyframes flicker-anim {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }
}

.table-tag-component {
    border-radius: 100px;
    height: 1rem;
    margin: 0 2px;
    overflow: hidden;
    transform: translateZ(0);
    width: 3rem
}

.table-tag-component .table-tag-wrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.table-tag-component .table-tag-wrapper .table-tag-bg,.table-tag-component .table-tag-wrapper .table-tag-bg-dark {
    background-repeat: no-repeat;
    background-size: cover;
    height: 200%;
    position: absolute;
    width: 200%
}

.table-tag-component .table-tag-wrapper .table-tag-bg,.table-tag-component .table-tag-wrapper .table-tag-bg-dark {
    right: 0
}

.table-tag-component .table-tag-wrapper .table-tag {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 70% auto;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.table-tag-component .table-tag-wrapper .flash-lights-wrapper {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: relative;
    transform: skewX(-36deg);
    width: 100%
}

.table-tag-component .table-tag-wrapper .flash-lights {
    animation: flashlights 1.5s ease-in 1s infinite;
    background: linear-gradient(90deg,#ffffff05 0,#ffffff94 50%,#ffffff05);
    height: 100%;
    left: -60%;
    position: absolute;
    width: 60%
}

.table-tag-component.is-hot-table {
    bottom: -.1rem
}

.table-tag-component.is-hot-table .table-tag {
    background-image: url(/static/media/table-tag-hot.14289504..svg)
}

.table-tag-component.is-hot-table .table-tag-bg {
    background-image: url(/static/media/table-tag-hot-bg.8b2cd85a..svg)
}

.table-tag-component.is-hot-table .table-tag-bg-dark {
    background-image: url(/static/media/table-tag-hot-bg-dark.4ae0d564..svg)
}

.table-tag-component.is-new-table {
    bottom: 0
}

.table-tag-component.is-new-table .table-tag {
    background-image: url(/static/media/table-tag-new.c7b071a3..svg)
}

.table-tag-component.is-new-table .table-tag-bg {
    background-image: url(/static/media/table-tag-new-bg.935d1e4b..svg)
}

.table-tag-component.is-new-table .table-tag-bg-dark {
    background-image: url(/static/media/table-tag-new-bg-dark.7b1a502f..svg)
}

@keyframes flashlights {
    0% {
        left: -60%
    }

    to {
        left: 160%
    }
}

.table-name-component .table-name-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.table-name-component .subscribe-star {
    cursor: pointer;
    position: relative
}

.table-name-component .subscribe-star .star {
    background-image: url(/static/media/star-hollow.39f9bf2f..svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px
}

.table-name-component .subscribe-star .star.has-subscribe {
    background-image: url(/static/media/star.74687052..svg)
}

.table-name-component .good-road {
    background-image: var(--dealer-good-road-icon);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    filter: hue-rotate(90deg);
    height: 12px;
    position: relative;
    width: 15px;
    z-index: 1
}

.table-name-component .table-name-decoration {
    background-image: var(--dealer-room-name-decoration-icon);
    background-repeat: no-repeat;
    display: none;
    height: 1rem;
    width: 1rem
}

.table-name-component .table-name-decoration.left {
    transform: rotateY(180deg)
}

.table-name-component span {
    color: #be9145;
    max-width: 26.1rem;
    padding: 0 5px 0 1rem
}

.mobile .dealer-panel-component.is-hot-table,.mobile .dealer-panel-component.is-new-table {
    margin-top: .5rem
}

.dealer-panel-component {
    color: #898989;
    position: relative
}

.dealer-panel-component.hidden {
    display: none
}

.dealer-panel-component .dealer-panel-header {
    align-items: center;
    display: flex;
    font-size: 1.2rem;
    height: 2rem;
    justify-content: space-between;
    line-height: 1.4rem;
    padding: 0 2rem;
    position: relative;
    top: 1rem
}

.dealer-panel-component .dealer-panel-header>div {
    align-items: center;
    display: flex
}

.dealer-panel-component .dealer-panel-wrapper {
    background-size: contain;
    border-radius: 4px;
    box-sizing: border-box;
    padding-bottom: 46.8%;
    position: relative
}

.dealer-panel-component .item-wrapper {
    bottom: 0;
    -moz-column-gap: .2rem;
    column-gap: .2rem;
    display: flex;
    flex-direction: row;
    left: 0;
    padding: 0 2rem;
    position: absolute;
    right: 0;
    top: 1rem
}

.dealer-panel-component .item-wrapper .room-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
    row-gap: .1rem
}

.dealer-panel-component .item-wrapper .room-container .room-wrapper {
    display: flex;
    flex: .85;
    flex-direction: row
}

.dealer-panel-component .item-timer {
    bottom: 15px;
    left: 25px;
    padding: 0 4px;
    position: absolute;
    width: calc(100% - 50px)
}

.dealer-panel-component .maintain {
    align-items: center;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px);
    justify-content: center;
    left: 15px;
    position: absolute;
    top: 10px;
    width: calc(100% - 30px)
}

.dealer-panel-component .maintain .logo {
    height: 9.8rem;
    width: 9.8rem
}

.dealer-panel-component .maintain .maintain-text {
    color: #be9145;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 2.5rem
}

.room-detail-baccarat-component {
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
    font-size: 1.2rem;
    justify-content: space-between;
    line-height: 1.4rem;
    padding: 0 .4rem
}

.room-detail-baccarat-component .panel {
    align-items: center;
    -moz-column-gap: .4rem;
    column-gap: .4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.room-detail-baccarat-component .panel .commission-button {
    background: var(--no-commission-bg);
    border-radius: 10px;
    color: #898989;
    cursor: pointer;
    line-height: 14px;
    padding: 2px 6px
}

@media(hover: hover) {
    .room-detail-baccarat-component .panel .commission-button:hover {
        background:var(--no-commission-bg-hover)
    }
}

.room-detail-baccarat-component .panel .commission-button.classical {
    background: var(--classic-bg)
}

@media(hover: hover) {
    .room-detail-baccarat-component .panel .commission-button.classical:hover {
        background:var(--classic-bg-hover)
    }
}

.room-detail-baccarat-component .panel .commission-button.lock {
    background: #000;
    color: #c4c4c4;
    cursor: not-allowed
}

.room-detail-baccarat-component .panel .icon-in {
    -webkit-text-stroke: 1px #fff;
    color: #f6599c;
    cursor: pointer;
    font-size: 1.8rem
}

.room-detail-super-six-component {
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
    font-size: 1.2rem;
    justify-content: space-between;
    line-height: 1.4rem;
    padding: 0 .4rem
}

.room-detail-super-six-component .panel {
    align-items: center;
    -moz-column-gap: .4rem;
    column-gap: .4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.room-detail-super-six-component .panel .no-commission {
    border-radius: 10px;
    color: #f66767;
    line-height: 14px;
    padding: 1px 5px
}

.bet-selection-component .deal-bet {
    background: #fff9;
    border-radius: 3px 3px 0 0;
    color: #353b45;
    display: flex;
    font-size: 1.2rem;
    gap: 1px;
    justify-content: center;
    left: 0;
    line-height: 1.2rem;
    padding: 1px;
    position: absolute;
    right: 0;
    top: 0
}

.bet-selection-component .ready-to-bet {
    align-items: flex-start;
    bottom: .1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    left: .2rem;
    line-height: 1.2rem;
    position: absolute
}

.bet-selection-component .ready-to-bet .icon-bet {
    align-items: center;
    background-image: url(https://img.gashinzo.com/img/static/er/nav-icon-casino.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    filter: drop-shadow(0 1px 2px rgba(137,137,137,.5));
    font-size: 1.2rem;
    height: 22px;
    justify-content: center;
    width: 22px
}

.bet-selection-component .ready-to-bet span {
    background: #0009;
    border-radius: .4rem;
    padding: .2rem .4rem
}

.bet-selection-component .ready-to-bet .arrow {
    border: .3rem solid #0000;
    border-top: .4rem solid #0009;
    height: 0;
    margin-left: .6rem;
    width: 0
}

.bet-selection-component:active {
    filter: grayscale(.9) brightness(.9)
}

.bet-selection-component:active>span {
    transform: translateY(1px)
}

.button-group {
    -moz-column-gap: .2rem;
    column-gap: .2rem;
    display: flex;
    flex-direction: row;
    font-size: 1.4rem;
    height: 2.8rem
}

.button-group.auto-bet-mode .cancel-button,.button-group.auto-bet-mode .confirm-button {
    display: none
}

.button-group .confirm-button,.button-group.auto-bet-mode .auto-bet-button {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center
}

.button-group .confirm-button {
    background: #0000;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #ccc,0 1px 0 #ffffffe6;
    color: var(--confirm-button-color);
    cursor: pointer;
    padding: .4rem 0
}

.button-group .confirm-button:active {
    background: #dadada33;
    box-shadow: inset 0 2px 5px #99999980
}

.button-group .confirm-button:active>span {
    transform: translateY(1px)
}

.button-group .confirm-button .icon-check {
    align-items: center;
    display: flex;
    font-size: 2.2rem;
    justify-content: center
}

.button-group .confirm-button.disabled {
    color: var(--confirm-button-color-disabled)
}

@media(hover: hover) {
    .button-group .confirm-button:hover {
        background:var(--confirm-button-bg-hover)
    }
}

.button-group .cancel-button {
    align-items: center;
    background: #0000;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #ccc,0 1px 0 #ffffffe6;
    color: var(--cancel-button-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: .4rem 0
}

.button-group .cancel-button .icon-cancel {
    align-items: center;
    display: flex;
    font-size: 2.2rem;
    justify-content: center
}

.button-group .cancel-button.disabled {
    color: var(--cancel-button-color-disabled)
}

@media(hover: hover) {
    .button-group .cancel-button:hover {
        background:var(--cancel-button-bg-hover)
    }

    .button-group .cancel-button:hover .icon-cancel {
        color: #fff
    }
}

.button-group .auto-bet-button {
    background: var(--auto-bet-button-bg);
    border: var(--auto-bet-button-border);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--auto-bet-button-color);
    display: none;
    font-size: 1.2rem;
    padding: .4rem 0
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-baccarat-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-baccarat-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-baccarat-component .option {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1rem;
    row-gap: .1rem;
    text-align: center
}

.bet-option-baccarat-component .option .odds {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2rem
}

.bet-option-baccarat-component .option .bet-bottom {
    align-items: center;
    align-items: stretch;
    -moz-column-gap: 1px;
    column-gap: 1px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%
}

.bet-option-baccarat-component .option .bet-bottom .bet-player {
    background: var(--bet-player-bg);
    border: var(--bet-player-border);
    border-radius: 4px;
    color: var(--bet-player-color);
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-baccarat-component .option .bet-bottom .bet-player.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-baccarat-component .option .bet-bottom .bet-player:hover {
        background:var(--bet-player-bg-hover)
    }
}

.bet-option-baccarat-component .option .bet-bottom .bet-group {
    display: flex;
    flex: 5;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap
}

.bet-option-baccarat-component .option .bet-bottom .bet-group.commission-mode .bet-tie {
    flex: 0 0 59%;
    margin-bottom: 1.97%
}

.bet-option-baccarat-component .option .bet-bottom .bet-group.commission-mode .bet-super-six {
    border-width: 1px;
    flex: 1;
    height: unset;
    letter-spacing: -.05em;
    visibility: visible
}

.bet-option-baccarat-component .option .bet-bottom .bet-group.commission-mode .bet-super-six.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

.bet-option-baccarat-component .option .bet-bottom .bet-group .bet-tie {
    align-items: center;
    background: var(--bet-tie-bg);
    border: var(--bet-tie-border);
    border-radius: 4px;
    color: var(--bet-tie-color);
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out
}

.bet-option-baccarat-component .option .bet-bottom .bet-group .bet-tie.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-baccarat-component .option .bet-bottom .bet-group .bet-tie:hover {
        background:var(--bet-tie-bg-hover)
    }
}

.bet-option-baccarat-component .option .bet-bottom .bet-group .bet-super-six {
    align-items: center;
    background: #ffcf3f1a;
    border: 0 solid #ffcf3f;
    border-radius: 4px;
    box-sizing: border-box;
    color: #ffcf3f;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    height: 0;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out;
    visibility: hidden
}

.bet-option-baccarat-component .option .bet-bottom .bet-group .bet-super-six.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-baccarat-component .option .bet-bottom .bet-group .bet-super-six:hover {
        background:#ffcf3f59
    }
}

.bet-option-baccarat-component .option .bet-bottom .bet-banker {
    background: var(--bet-banker-bg);
    border: var(--bet-banker-border);
    border-radius: 4px;
    color: var(--bet-banker-color);
    cursor: pointer;
    display: flex;
    flex: 0 0 35%;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-baccarat-component .option .bet-bottom .bet-banker.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-baccarat-component .option .bet-bottom .bet-banker:hover {
        background:var(--bet-banker-bg-hover)
    }
}

.bet-option-baccarat-component .option .bet-top {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 0 0 27.44%;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 1.2rem;
    line-height: 1.7rem;
    width: 100%
}

.bet-option-baccarat-component .option .bet-top .bet-any-pair,.bet-option-baccarat-component .option .bet-top .bet-player-pair,.bet-option-baccarat-component .option .bet-top .bet-player-tp {
    background: var(--bet-player-bg);
    border: var(--bet-player-border);
    border-radius: 4px;
    color: var(--bet-player-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative
}

.bet-option-baccarat-component .option .bet-top .bet-any-pair.unable,.bet-option-baccarat-component .option .bet-top .bet-player-pair.unable,.bet-option-baccarat-component .option .bet-top .bet-player-tp.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-baccarat-component .option .bet-top .bet-any-pair:hover,.bet-option-baccarat-component .option .bet-top .bet-player-pair:hover,.bet-option-baccarat-component .option .bet-top .bet-player-tp:hover {
        background:var(--bet-player-bg-hover)
    }
}

.bet-option-baccarat-component .option .bet-top .bet-banker-pair,.bet-option-baccarat-component .option .bet-top .bet-banker-tp,.bet-option-baccarat-component .option .bet-top .bet-perfect-pair {
    background: var(--bet-banker-bg);
    border: var(--bet-banker-border);
    border-radius: 4px;
    color: var(--bet-banker-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative
}

.bet-option-baccarat-component .option .bet-top .bet-banker-pair.unable,.bet-option-baccarat-component .option .bet-top .bet-banker-tp.unable,.bet-option-baccarat-component .option .bet-top .bet-perfect-pair.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-baccarat-component .option .bet-top .bet-banker-pair:hover,.bet-option-baccarat-component .option .bet-top .bet-banker-tp:hover,.bet-option-baccarat-component .option .bet-top .bet-perfect-pair:hover {
        background:var(--bet-banker-bg-hover)
    }
}

.bet-option-baccarat-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-super-six-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-super-six-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-super-six-component .option {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    row-gap: .1rem;
    text-align: center
}

.bet-option-super-six-component .option .odds {
    font-size: 1.2rem;
    line-height: 1.2rem
}

.bet-option-super-six-component .option .bet-bottom {
    align-items: center;
    align-items: stretch;
    -moz-column-gap: 1px;
    column-gap: 1px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%
}

.bet-option-super-six-component .option .bet-bottom .bet-player {
    background: var(--bet-player-bg);
    border: var(--bet-player-border);
    border-radius: 4px;
    color: var(--bet-player-color);
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-super-six-component .option .bet-bottom .bet-player.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-super-six-component .option .bet-bottom .bet-player:hover {
        background:var(--bet-player-bg-hover)
    }
}

.bet-option-super-six-component .option .bet-bottom .bet-group {
    display: flex;
    flex: 5;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap
}

.bet-option-super-six-component .option .bet-bottom .bet-group.commission-mode .bet-tie {
    flex: 0 0 59%;
    margin-bottom: 1.97%
}

.bet-option-super-six-component .option .bet-bottom .bet-group.commission-mode .bet-super-six {
    border-width: 1px;
    flex: 1;
    height: unset;
    letter-spacing: -.05em;
    visibility: visible
}

.bet-option-super-six-component .option .bet-bottom .bet-group.commission-mode .bet-super-six.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

.bet-option-super-six-component .option .bet-bottom .bet-group .bet-tie {
    align-items: center;
    background: var(--bet-tie-bg);
    border: var(--bet-tie-border);
    border-radius: 4px;
    color: var(--bet-tie-color);
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out
}

.bet-option-super-six-component .option .bet-bottom .bet-group .bet-tie.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-super-six-component .option .bet-bottom .bet-group .bet-tie:hover {
        background:var(--bet-tie-bg-hover)
    }
}

.bet-option-super-six-component .option .bet-bottom .bet-group .bet-super-six {
    align-items: center;
    background: #ffcf3f1a;
    border: 0 solid #ffcf3f;
    border-radius: 4px;
    box-sizing: border-box;
    color: #ffcf3f;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    height: 0;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out;
    visibility: hidden
}

.bet-option-super-six-component .option .bet-bottom .bet-group .bet-super-six.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-super-six-component .option .bet-bottom .bet-group .bet-super-six:hover {
        background:#ffcf3f59
    }
}

.bet-option-super-six-component .option .bet-bottom .bet-banker {
    background: var(--bet-banker-bg);
    border: var(--bet-banker-border);
    border-radius: 4px;
    color: var(--bet-banker-color);
    cursor: pointer;
    display: flex;
    flex: 0 0 35%;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-super-six-component .option .bet-bottom .bet-banker.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-super-six-component .option .bet-bottom .bet-banker:hover {
        background:var(--bet-banker-bg-hover)
    }
}

.bet-option-super-six-component .option .bet-top {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 0 0 27.44%;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 1.2rem;
    line-height: 1.7rem;
    width: 100%
}

.bet-option-super-six-component .option .bet-top .bet-player-pair {
    background: var(--bet-player-bg);
    border: var(--bet-player-border);
    border-radius: 4px;
    color: var(--bet-player-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative
}

.bet-option-super-six-component .option .bet-top .bet-player-pair.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-super-six-component .option .bet-top .bet-player-pair:hover {
        background:var(--bet-player-bg-hover)
    }
}

.bet-option-super-six-component .option .bet-top .bet-banker-pair {
    background: var(--bet-banker-bg);
    border: var(--bet-banker-border);
    border-radius: 4px;
    color: var(--bet-banker-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative
}

.bet-option-super-six-component .option .bet-top .bet-banker-pair.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-super-six-component .option .bet-top .bet-banker-pair:hover {
        background:var(--bet-banker-bg-hover)
    }
}

.bet-option-super-six-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-HL-baccarat-component {
    display: flex;
    flex: 0 0 67.4%;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-HL-baccarat-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-HL-baccarat-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-HL-baccarat-component .option .bet-section {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item {
    align-items: center;
    border: 1px solid;
    border-radius: 4px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin: 1px;
    position: relative
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI {
    background: linear-gradient(180deg,#ff8bbc00 0,var(--bet-HLplayer-color) 100%);
    border: var(--bet-HLplayer-border);
    transition: .25s ease-in-out
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI:hover {
    box-shadow: 0 0 12px 8px var(--bet-HLplayer-color) inset
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI.unable {
    background: #353b45;
    border-color: #1d2137;
    color: #1d2137;
    pointer-events: none
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI.unable .betSelection-bg {
    background-image: url(/static/media/HI-unable.24b0ac35..png)
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI .betSelection-bg {
    align-items: center;
    background-image: url(/static/media/PHI.77d5d5b7..png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 70%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    transition: .25s ease-in-out;
    width: 100%
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI .betSelection-bg .name {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 1px 1px 0 #000
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI .betSelection-bg .odds {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PHI .betSelection-bg .probabilities {
    background-color: #1d2137;
    border-radius: 50px;
    color: #ffbf00;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO {
    background: linear-gradient(180deg,#ff8bbc00 0,var(--bet-HLplayer-color) 100%);
    border: var(--bet-HLplayer-border);
    transition: .25s ease-in-out
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO:hover {
    box-shadow: 0 0 12px 8px var(--bet-HLplayer-color) inset
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO.unable {
    background: #353b45;
    border-color: #1d2137;
    color: #1d2137;
    pointer-events: none
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO.unable .betSelection-bg {
    background-image: url(/static/media/LO-unable.4bb7d002..png)
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO .betSelection-bg {
    align-items: center;
    background-image: url(/static/media/PLO.ecc6c82b..png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 70%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    transition: .25s ease-in-out;
    width: 100%
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO .betSelection-bg .name {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 1px 1px 0 #000
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO .betSelection-bg .odds {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-PLO .betSelection-bg .probabilities {
    background-color: #1d2137;
    border-radius: 50px;
    color: #ffbf00;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI {
    background: linear-gradient(180deg,#ff8bbc00 0,var(--bet-HLbanker-color) 100%);
    border: var(--bet-HLbanker-border);
    transition: .25s ease-in-out
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI:hover {
    box-shadow: 0 0 12px 8px var(--bet-HLbanker-color) inset
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI.unable {
    background: #353b45;
    border-color: #1d2137;
    color: #1d2137;
    pointer-events: none
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI.unable .betSelection-bg {
    background-image: url(/static/media/HI-unable.24b0ac35..png)
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI .betSelection-bg {
    align-items: center;
    background-image: url(/static/media/BHI.305d9271..png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 70%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    transition: .25s ease-in-out;
    width: 100%
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI .betSelection-bg .name {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 1px 1px 0 #000
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI .betSelection-bg .odds {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BHI .betSelection-bg .probabilities {
    background-color: #1d2137;
    border-radius: 50px;
    color: #ffbf00;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO {
    background: linear-gradient(180deg,#ff8bbc00 0,var(--bet-HLbanker-color) 100%);
    border: var(--bet-HLbanker-border);
    transition: .25s ease-in-out
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO:hover {
    box-shadow: 0 0 12px 8px var(--bet-HLbanker-color) inset
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO.unable {
    background: #353b45;
    border-color: #1d2137;
    color: #1d2137;
    pointer-events: none
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO.unable .betSelection-bg {
    background-image: url(/static/media/LO-unable.4bb7d002..png)
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO .betSelection-bg {
    align-items: center;
    background-image: url(/static/media/BLO.d0d2929f..png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 70%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    transition: .25s ease-in-out;
    width: 100%
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO .betSelection-bg .name {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 1px 1px 0 #000
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO .betSelection-bg .odds {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: .5rem
}

.bet-option-HL-baccarat-component .option .bet-section .bet-item.bet-BLO .betSelection-bg .probabilities {
    background-color: #1d2137;
    border-radius: 50px;
    color: #ffbf00;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 .5rem
}

@media(hover: hover) {
    .bet-option-HL-baccarat-component .option .bet-section .bet-item {
        cursor:pointer
    }
}

.bet-option-HL-baccarat-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.card-container {
    box-sizing: border-box;
    flex: 0 0 28%;
    margin: 0 1.5%;
    opacity: 0;
    padding-bottom: 38%;
    position: relative
}

.card-container.horizontal {
    margin: 0 6%;
    transform: rotate(90deg) translateX(17%)
}

.card-container.deal {
    animation: deal-anim .5s cubic-bezier(.22,.61,.36,1);
    animation-fill-mode: both
}

.card-container.flip .card {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-name: flip-open-anim;
    animation-timing-function: cubic-bezier(.22,.61,.36,1)
}

.card-container.flip .card.back {
    animation-name: flip-close-anim
}

.card-container .card {
    background: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 2px;
    height: 100%;
    position: absolute;
    transform: scaleX(0);
    width: 100%
}

.card-container .card.back {
    background-image: url(/static/media/card-back.9a17d6f9..svg);
    transform: scaleX(1)
}

.card-container .card-suit {
    background-size: 100% 100%;
    bottom: 0;
    height: 39%;
    left: 0;
    margin: 56% auto auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 44%
}

.card-container .card-suit.spade {
    background-image: url(/static/media/spade.e56c1ad1..svg)
}

.card-container .card-suit.club {
    background-image: url(/static/media/club.4cdc6551..svg)
}

.card-container .card-suit.heart {
    background-image: url(/static/media/heart.1f17575a..svg)
}

.card-container .card-suit.diamond {
    background-image: url(/static/media/diamond.df6269a8..svg)
}

.card-container .card-rank {
    color: #000;
    font-size: 1rem;
    left: 5%;
    letter-spacing: -.2rem;
    line-height: 12px;
    position: absolute;
    top: 5%
}

.card-container .card-rank.red {
    color: #cc1920
}

@keyframes deal-anim {
    0% {
        opacity: 0;
        transform: translateX(-300%) translateY(100%) rotate(-1turn)
    }

    to {
        opacity: 1
    }
}

@keyframes flip-open-anim {
    0% {
        transform: scaleX(0)
    }

    50% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes flip-close-anim {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(0)
    }
}

.deal-baccarat-component {
    background: #ffffff80;
    display: flex;
    flex: 1;
    gap: .1rem
}

.deal-baccarat-component .hand-value {
    color: #fff;
    font-size: 4.6rem;
    font-weight: 400;
    line-height: 5rem;
    margin-bottom: 10%;
    text-align: center
}

.deal-baccarat-component .position {
    font-size: 1.6rem;
    font-weight: bolder;
    line-height: 1;
    margin-bottom: .5rem;
    text-align: center
}

.deal-baccarat-component .banker,.deal-baccarat-component .player {
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border-radius: 4px;
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    justify-content: center;
    padding: 2rem .8rem
}

.deal-baccarat-component .player {
    background-image: linear-gradient(180deg,#4da9ff99,#4da9ff00 85%);
    border: var(--game-result-player-border)
}

.deal-baccarat-component .player .position {
    color: #fff
}

.deal-baccarat-component .banker {
    background-image: linear-gradient(180deg,#f6676799,#f6676700 85%);
    border: var(--game-result-banker-border);
    margin-left: .22%
}

.deal-baccarat-component .banker .position {
    color: #fff
}

.deal-baccarat-component .card-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%
}

.winner-result-baccarat-component {
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.winner-result-baccarat-component .banker,.winner-result-baccarat-component .player {
    flex: 1;
    height: 100%;
    position: relative
}

.winner-result-baccarat-component .player .win {
    left: 3%
}

.winner-result-baccarat-component .banker .win {
    right: 3%
}

.winner-result-baccarat-component .tie,.winner-result-baccarat-component .win {
    animation: win-anim 1s linear 4;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 8%
}

.winner-result-baccarat-component .win {
    background-image: url(/static/media/win.d584efb4..svg);
    padding-bottom: 30%;
    width: 30%
}

.winner-result-baccarat-component .tie {
    background-image: url(/static/media/tie.8bf863ce..svg);
    padding-bottom: 15%;
    width: 100%
}

@keyframes win-anim {
    25% {
        transform: scale(1.1)
    }

    75% {
        transform: scale(.9)
    }
}

.winner-result-HLbaccarat-component .result {
    animation: win-anim 1s linear 4
}

.bet-result-component {
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #000000bf;
    border-radius: 4px;
    bottom: 0;
    display: flex;
    flex: 1;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.bet-result-component .gold-coins {
    animation: coins-anim 2.8s linear;
    background-image: url(/static/media/coins.78e3a664..png);
    background-size: cover;
    height: 78%;
    position: absolute;
    width: 75%;
    z-index: -1
}

.bet-result-component .win-amount {
    animation: win-amount-anim 1s linear infinite;
    background: #000c;
    border-radius: 22px;
    color: #ffcb4b;
    font-size: 2.2rem;
    letter-spacing: 1px;
    line-height: 2.5rem;
    padding: 6px 20px
}

@keyframes coins-anim {
    0% {
        transform: scale(0)
    }

    20% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1.1)
    }
}

@keyframes win-amount-anim {
    25% {
        transform: scale(1.1)
    }

    75% {
        transform: scale(.9)
    }
}

.game-result-baccarat-component {
    color: #fff;
    display: none;
    font-size: 1.8rem;
    height: 85%;
    left: 0;
    line-height: 2.5rem;
    position: absolute;
    width: calc(100% - 75px - .2rem)
}

.game-result-baccarat-component.active {
    display: flex;
    pointer-events: none
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-dt-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-dt-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-dt-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-dt-component .option .odds {
    font-size: 1.2rem;
    line-height: 1.2rem
}

.bet-option-dt-component .option .bet-bottom {
    align-items: center;
    align-items: stretch;
    -moz-column-gap: 1px;
    column-gap: 1px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%
}

.bet-option-dt-component .option .bet-bottom .bet-dragon {
    background: var(--bet-dragon-bg);
    border: var(--bet-dragon-border);
    border-radius: 4px;
    color: var(--bet-dragon-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-dt-component .option .bet-bottom .bet-dragon.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-dt-component .option .bet-bottom .bet-dragon:hover {
        background:var(--bet-dragon-bg-hover)
    }
}

.bet-option-dt-component .option .bet-bottom .bet-tie {
    align-items: center;
    background: #6affb81a;
    border: 1px solid #2dcca6;
    border-radius: 4px;
    color: #2dcca6;
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out
}

.bet-option-dt-component .option .bet-bottom .bet-tie.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-dt-component .option .bet-bottom .bet-tie:hover {
        background:#6affb859
    }
}

.bet-option-dt-component .option .bet-bottom .bet-tiger {
    background: var(--bet-tiger-bg);
    border: var(--bet-tiger-border);
    border-radius: 4px;
    color: var(--bet-tiger-color);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-dt-component .option .bet-bottom .bet-tiger.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-dt-component .option .bet-bottom .bet-tiger:hover {
        background:var(--bet-tiger-bg-hover)
    }
}

.bet-option-dt-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.deal-dt-component {
    display: flex;
    flex: 1
}

.deal-dt-component .hand-value {
    color: #fff;
    font-size: 4.6rem;
    font-weight: 400;
    line-height: 5rem;
    margin-bottom: 10%;
    text-align: center;
    text-shadow: 0 0 5px #fff
}

.deal-dt-component .position {
    font-size: 2.4rem;
    font-weight: bolder;
    line-height: 3.4rem;
    margin-top: 4%;
    text-align: center
}

.deal-dt-component .dragon,.deal-dt-component .tiger {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 4px;
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    justify-content: center;
    padding: 20px 16px
}

.deal-dt-component .dragon {
    background: var(--game-result-dragon-bg);
    border: var(--game-result-dragon-border);
    margin-left: .22%
}

.deal-dt-component .dragon .position {
    color: var(--game-result-dragon-color)
}

.deal-dt-component .tiger {
    background: var(--game-result-tiger-bg);
    border: var(--game-result-tiger-border)
}

.deal-dt-component .tiger .position {
    color: var(--game-result-tiger-color)
}

.deal-dt-component .card-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%
}

.winner-dt-result-component {
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.winner-dt-result-component .banker,.winner-dt-result-component .player {
    flex: 1;
    height: 100%;
    position: relative
}

.winner-dt-result-component .player .win {
    left: 3%
}

.winner-dt-result-component .banker .win {
    right: 3%
}

.winner-dt-result-component .tie,.winner-dt-result-component .win {
    animation: win-anim 1s linear 4;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 8%
}

.winner-dt-result-component .win {
    background-image: url(/static/media/win.d584efb4..svg);
    padding-bottom: 30%;
    width: 30%
}

.winner-dt-result-component .tie {
    background-image: url(/static/media/tie.8bf863ce..svg);
    padding-bottom: 15%;
    width: 100%
}

@keyframes win-anim {
    25% {
        transform: scale(1.1)
    }

    75% {
        transform: scale(.9)
    }
}

.game-result-dt-component {
    bottom: 0;
    color: #fff;
    display: none;
    font-size: 1.8rem;
    left: 0;
    line-height: 2.5rem;
    position: absolute;
    right: 0;
    top: 0
}

.game-result-dt-component.active {
    display: flex;
    height: calc(100% - 1.8rem);
    pointer-events: none
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-sic-bo-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-sic-bo-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-sic-bo-component .option {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    row-gap: .1rem;
    text-align: center
}

.bet-option-sic-bo-component .option .odds {
    font-size: 1.2rem;
    line-height: 1.2rem
}

.bet-option-sic-bo-component .option .bet-bottom {
    align-items: center;
    align-items: stretch;
    -moz-column-gap: 1px;
    column-gap: 1px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%
}

.bet-option-sic-bo-component .option .bet-bottom .bet-small {
    background: var(--bet-small-bg);
    border: var(--bet-small-border);
    border-radius: 4px;
    color: var(--bet-small-color);
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-sic-bo-component .option .bet-bottom .bet-small.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-sic-bo-component .option .bet-bottom .bet-small:hover {
        background:var(--bet-small-bg-hover)
    }
}

.bet-option-sic-bo-component .option .bet-bottom .bet-any-triple {
    align-items: center;
    background: var(--bet-any-triple-bg);
    border: var(--bet-any-triple-border);
    border-radius: 4px;
    color: var(--bet-any-triple-color);
    cursor: pointer;
    display: flex;
    flex: 5;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out
}

.bet-option-sic-bo-component .option .bet-bottom .bet-any-triple.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-sic-bo-component .option .bet-bottom .bet-any-triple:hover {
        background:var(--bet-any-triple-bg-hover)
    }
}

.bet-option-sic-bo-component .option .bet-bottom .bet-big {
    background: var(--bet-big-bg);
    border: var(--bet-big-border);
    border-radius: 4px;
    color: var(--bet-big-color);
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-sic-bo-component .option .bet-bottom .bet-big.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-sic-bo-component .option .bet-bottom .bet-big:hover {
        background:var(--bet-big-bg-hover)
    }
}

.bet-option-sic-bo-component .option .bet-top {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 0 0 36%;
    flex-direction: row;
    flex-wrap: nowrap;
    line-height: 1.7rem;
    width: 100%
}

.bet-option-sic-bo-component .option .bet-top .bet-odd {
    background: var(--bet-small-bg);
    border: var(--bet-small-border);
    border-radius: 4px;
    color: var(--bet-small-color);
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative
}

.bet-option-sic-bo-component .option .bet-top .bet-odd.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-sic-bo-component .option .bet-top .bet-odd:hover {
        background:var(--bet-small-bg-hover);
        cursor: pointer
    }
}

.bet-option-sic-bo-component .option .bet-top .bet-even {
    background: var(--bet-big-bg);
    border: var(--bet-big-border);
    border-radius: 4px;
    color: var(--bet-big-color);
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative
}

.bet-option-sic-bo-component .option .bet-top .bet-even.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-sic-bo-component .option .bet-top .bet-even:hover {
        background:var(--bet-big-bg-hover);
        cursor: pointer
    }
}

.bet-option-sic-bo-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.deal-sic-bo-component {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #ffffffb3;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1.5rem 0
}

.deal-sic-bo-component .dice-result-bottom,.deal-sic-bo-component .dice-result-mid,.deal-sic-bo-component .dice-result-top {
    align-items: center;
    display: flex;
    justify-content: space-evenly
}

.deal-sic-bo-component .dice-result-mid {
    padding-bottom: 1rem
}

.deal-sic-bo-component .dice-result-mid,.deal-sic-bo-component .dice-result-top {
    opacity: 0
}

.deal-sic-bo-component .is-show-result,.deal-sic-bo-component .is-show-sum {
    animation-delay: .5s;
    animation-duration: .25s;
    animation-fill-mode: forwards;
    animation-name: show-result;
    animation-timing-function: ease-in-out
}

.deal-sic-bo-component .dice-sum {
    color: #898989;
    font-size: 3.6rem;
    line-height: 5rem
}

.deal-sic-bo-component .dice-text {
    font-size: 2.2rem;
    line-height: 2.6rem;
    margin: 0 1.7rem
}

.deal-sic-bo-component .dice-text.big,.deal-sic-bo-component .dice-text.even {
    color: var(--game-result-big-color)
}

.deal-sic-bo-component .dice-text.odd,.deal-sic-bo-component .dice-text.small {
    color: var(--game-result-small-color)
}

.deal-sic-bo-component .dice-text.any-triple {
    color: var(--game-result-any-triple-color)
}

.deal-sic-bo-component .dice {
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-name: dice-rolling-down-right;
    animation-timing-function: linear;
    border-radius: 4px;
    box-shadow: 0 2px 3px #999999b3
}

.deal-sic-bo-component .dice:nth-child(2) {
    animation-name: dice-rolling-down-left
}

.game-result-sic-bo-component {
    color: #fff;
    display: none;
    font-size: 1.8rem;
    height: 85%;
    left: 0;
    line-height: 2.5rem;
    position: absolute;
    right: 0;
    width: calc(100% - 75px)
}

.game-result-sic-bo-component.active {
    display: flex;
    pointer-events: none
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-tai-sic-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-tai-sic-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-tai-sic-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-tai-sic-component .option .odds {
    font-size: 1.2rem;
    line-height: 1.2rem
}

.bet-option-tai-sic-component .option .bet-bottom {
    align-items: center;
    align-items: stretch;
    -moz-column-gap: 1px;
    column-gap: 1px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%
}

.bet-option-tai-sic-component .option .bet-bottom .bet-lo {
    background: #9c33331a;
    border: 1px solid #d8ccae;
    border-radius: 4px;
    color: #be9145;
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-tai-sic-component .option .bet-bottom .bet-lo.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-tai-sic-component .option .bet-bottom .bet-lo:hover {
        background:#9c3333
    }
}

.bet-option-tai-sic-component .option .bet-bottom .bet-sum {
    align-items: center;
    background: #7362371a;
    border: 1px solid #d8ccae;
    border-radius: 4px;
    color: #be9145;
    cursor: pointer;
    display: flex;
    flex: 5;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: .25s ease-in-out
}

.bet-option-tai-sic-component .option .bet-bottom .bet-sum.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-tai-sic-component .option .bet-bottom .bet-sum:hover {
        background:#736237
    }
}

.bet-option-tai-sic-component .option .bet-bottom .bet-sum .sum-11 {
    align-items: center;
    background: #f23e3e;
    border-radius: 100%;
    color: #ffcfd2;
    display: flex;
    height: 2.6rem;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: -2.8rem;
    transform: translateX(-50%);
    width: 2.6rem
}

.bet-option-tai-sic-component .option .bet-bottom .bet-hi {
    background: #3a311a1a;
    border: 1px solid #d8ccae;
    border-radius: 4px;
    color: #be9145;
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-tai-sic-component .option .bet-bottom .bet-hi.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-tai-sic-component .option .bet-bottom .bet-hi:hover {
        background:#3a311a
    }
}

.bet-option-tai-sic-component .name {
    position: relative
}

.bet-option-tai-sic-component .name .sum-11 {
    position: absolute
}

.bet-option-tai-sic-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.deal-tai-sic-component {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #ffffffb3;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    padding: 1.5rem 0
}

.deal-tai-sic-component .dice-result-mid {
    align-items: flex-end;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 1rem
}

.deal-tai-sic-component .dice-result-bottom {
    align-items: center;
    display: flex;
    justify-content: space-evenly
}

.deal-tai-sic-component .dice-result-mid,.deal-tai-sic-component .dice-result-top {
    opacity: 0
}

.deal-tai-sic-component .is-show-result,.deal-tai-sic-component .is-show-sum {
    animation-delay: .5s;
    animation-duration: .25s;
    animation-fill-mode: forwards;
    animation-name: show-result;
    animation-timing-function: ease-in-out
}

.deal-tai-sic-component .dice-sum {
    color: #898989;
    font-size: 4rem;
    line-height: 4rem
}

.deal-tai-sic-component .dice-text {
    font-size: 4rem;
    line-height: 4rem;
    margin: 0 1rem
}

.deal-tai-sic-component .dice-text.lo {
    color: var(--game-result-hl-lo-color)
}

.deal-tai-sic-component .dice-text.hi {
    color: var(--game-result-hl-hi-color)
}

.deal-tai-sic-component .dice-text.sum {
    color: var(--game-result-hl-sum-color)
}

.deal-tai-sic-component .dice {
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-name: dice-rolling-down-right;
    animation-timing-function: linear;
    border-radius: 4px;
    box-shadow: 0 2px 3px #999999b3
}

.deal-tai-sic-component .dice:nth-child(2) {
    animation-name: dice-rolling-down-left
}

.game-result-tai-sic-component {
    color: #fff;
    display: none;
    height: 85%;
    left: 0;
    position: absolute;
    right: 0;
    width: calc(100% - 75px)
}

.game-result-tai-sic-component.active {
    display: flex;
    pointer-events: none
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-tf-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-tf-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-tf-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-tf-component .option .bet-section {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%
}

.bet-option-tf-component .option .bet-section .bet-item {
    align-items: center;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #ccc,0 1px 0 #ffffffe6;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin: 1px;
    position: relative
}

.bet-option-tf-component .option .bet-section .bet-item:active {
    box-shadow: inset 0 0 0 1px #ccc,inset 0 2px 5px #cccccc80,0 0 0 #ffffffe6;
    filter: grayscale(.9) brightness(.9)
}

.bet-option-tf-component .option .bet-section .bet-item:active>div {
    transform: translateY(1px)
}

@media(hover: hover) {
    .bet-option-tf-component .option .bet-section .bet-item {
        cursor:pointer
    }
}

.bet-option-tf-component .option .bet-section .bet-item.green {
    background: var(--bet-crab-bg)
}

@media(hover: hover) {
    .bet-option-tf-component .option .bet-section .bet-item.green:hover {
        background:var(--bet-crab-bg-hover)
    }
}

.bet-option-tf-component .option .bet-section .bet-item.blue {
    background: var(--bet-calabash-bg)
}

@media(hover: hover) {
    .bet-option-tf-component .option .bet-section .bet-item.blue:hover {
        background:var(--bet-calabash-bg-hover)
    }
}

.bet-option-tf-component .option .bet-section .bet-item.red {
    background: var(--bet-fish-bg)
}

@media(hover: hover) {
    .bet-option-tf-component .option .bet-section .bet-item.red:hover {
        background:var(--bet-fish-bg-hover)
    }
}

.bet-option-tf-component .option .bet-section .bet-icon {
    height: 38px;
    width: 38px
}

.bet-option-tf-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.common-cg-bgColor-yellow {
    background-color: #ffd77f
}

.common-cg-bgColor-white {
    background-color: #fff
}

.common-cg-bgColor-pink {
    background-color: #ff8ce0
}

.common-cg-bgColor-blue {
    background-color: #8cc8ff
}

.common-cg-bgColor-red {
    background-color: #ff5050
}

.common-cg-bgColor-green {
    background-color: #4dd2a2
}

.bet-option-cg-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-cg-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-cg-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-cg-component .option .bet-section {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%
}

.bet-option-cg-component .option .bet-section .bet-item {
    align-items: center;
    border: var(--bet-cg-border);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #fff;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin: 1px;
    position: relative
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item {
        cursor:pointer
    }
}

.bet-option-cg-component .option .bet-section .bet-item.yellow {
    background: linear-gradient(180deg,#ffdb8b,#fed17380 51.56%,#fdbe4300)
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item.yellow:hover {
        background:linear-gradient(0,#ffdb8b,#fed17380 51.56%,#fdbe4300)
    }
}

.bet-option-cg-component .option .bet-section .bet-item.white {
    background: linear-gradient(0deg,#fff0 -.02%,#f2f2f280 52.59%,#fff)
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item.white:hover {
        background:linear-gradient(180deg,#fff0 -.02%,#f2f2f280 52.59%,#fff)
    }
}

.bet-option-cg-component .option .bet-section .bet-item.pink {
    background: linear-gradient(180deg,#ff8bdf,#fe73c680 50.52%,#ffd2ea00)
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item.pink:hover {
        background:linear-gradient(0,#ff8bdf,#fe73c680 50.52%,#ffd2ea00)
    }
}

.bet-option-cg-component .option .bet-section .bet-item.blue {
    background: linear-gradient(180deg,#6a94ff,#73abfe80 52.6%,#a9cafc00)
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item.blue:hover {
        background:linear-gradient(0,#6a94ff,#73abfe80 52.6%,#a9cafc00)
    }
}

.bet-option-cg-component .option .bet-section .bet-item.red {
    background: linear-gradient(180deg,#ff4343,#fe737380 53.65%,#ff969600)
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item.red:hover {
        background:linear-gradient(0,#ff4343,#fe737380 53.65%,#ff969600)
    }
}

.bet-option-cg-component .option .bet-section .bet-item.green {
    background: linear-gradient(180deg,#4cd1a1,#52daa980 52.08%,#c2ffe900)
}

@media(hover: hover) {
    .bet-option-cg-component .option .bet-section .bet-item.green:hover {
        background:linear-gradient(0,#4cd1a1,#52daa980 52.08%,#c2ffe900)
    }
}

.bet-option-cg-component .option .bet-section .bet-icon {
    height: 38px;
    width: 38px
}

.bet-option-cg-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.deal-tf-component {
    align-items: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #ffffffb3;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: space-evenly;
    padding: 1.5rem 0
}

.deal-tf-component .dice {
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-name: dice-rolling-down-right;
    animation-timing-function: linear
}

.deal-tf-component .dice:nth-child(2) {
    animation-name: dice-rolling-down-left
}

.deal-tf-component .cg-dice {
    align-items: center;
    background: #fff;
    border-radius: .2rem;
    box-shadow: 0 2px 3px #999999b3;
    display: flex;
    height: 5.2rem;
    justify-content: center;
    width: 5.2rem
}

.deal-tf-component .cg-dice .color {
    border-radius: .2rem;
    height: 4.6rem;
    width: 4.6rem
}

.game-result-tf-component {
    color: #fff;
    display: none;
    height: 85%;
    left: 0;
    position: absolute;
    right: 0;
    width: calc(100% - 75px)
}

.game-result-tf-component.active {
    display: flex;
    pointer-events: none
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-tx-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-tx-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-tx-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-tx-component .option .odds {
    color: #878787;
    font-size: 1.2rem;
    line-height: 1.2rem
}

.bet-option-tx-component .option .bet-bottom {
    align-items: center;
    align-items: stretch;
    -moz-column-gap: 1px;
    column-gap: 1px;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%
}

.bet-option-tx-component .option .bet-bottom .bet-tai {
    background: var(--bet-tx-bg);
    border: var(--bet-tx-border);
    border-radius: 4px;
    color: #be9145;
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-tx-component .option .bet-bottom .bet-tai.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-tx-component .option .bet-bottom .bet-tai:hover {
        background:var(--bet-tx-bg-hover)
    }
}

.bet-option-tx-component .option .bet-bottom .bet-xiu {
    background: var(--bet-tx-bg);
    border: var(--bet-tx-border);
    border-radius: 4px;
    color: #be9145;
    cursor: pointer;
    display: flex;
    flex: 6;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.bet-option-tx-component .option .bet-bottom .bet-xiu.unable {
    background-color: #000;
    border-color: #353b45;
    color: #353b45;
    pointer-events: none
}

@media(hover: hover) {
    .bet-option-tx-component .option .bet-bottom .bet-xiu:hover {
        background:var(--bet-tx-bg-hover)
    }
}

.bet-option-tx-component .option .bet-bottom .tx-tai,.bet-option-tx-component .option .bet-bottom .tx-xiu {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    color: #be9145;
    font-size: 2.4rem;
    font-weight: 600;
    height: 2.8rem;
    width: 100%
}

.bet-option-tx-component .option .bet-bottom .tx-tai:after {
    content: "TÀI"
}

.bet-option-tx-component .option .bet-bottom .tx-xiu:after {
    content: "XỈU"
}

.bet-option-tx-component .name {
    position: relative
}

.bet-option-tx-component .name .sum-11 {
    position: absolute
}

.bet-option-tx-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.deal-tx-component {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #ffffffb3;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-evenly;
    padding: .5rem 0 1.2rem
}

.deal-tx-component .dice-result-bottom,.deal-tx-component .dice-result-mid,.deal-tx-component .dice-result-top {
    align-items: center;
    display: flex;
    justify-content: space-evenly
}

.deal-tx-component .dice-result-top.noWinMode {
    padding-bottom: 1rem
}

.deal-tx-component .dice-result-mid {
    background: linear-gradient(90.12deg,#08e0af00 .1%,#0da683 35.45%,#0da683 71.84%,#08e0af00 99.91%);
    height: 5rem;
    margin-bottom: 1rem
}

.deal-tx-component .big,.deal-tx-component .small {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%
}

.deal-tx-component .big {
    background-image: url(/static/media/tai.3be6cb44..svg)
}

.deal-tx-component .small {
    background-image: url(/static/media/xiu.b6040ee5..svg)
}

.deal-tx-component .dice-result-mid,.deal-tx-component .dice-result-top {
    opacity: 0
}

.deal-tx-component .is-show-result,.deal-tx-component .is-show-sum {
    animation-delay: .5s;
    animation-duration: .25s;
    animation-fill-mode: forwards;
    animation-name: show-result;
    animation-timing-function: ease-in-out
}

.deal-tx-component .dice-sum {
    font-size: 3.6rem;
    line-height: 5rem
}

.deal-tx-component .dice {
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-name: dice-rolling-down-right;
    animation-timing-function: linear;
    border-radius: 4px;
    box-shadow: 0 2px 3px #999999b3
}

.deal-tx-component .dice:nth-child(2) {
    animation-name: dice-rolling-down-left
}

.game-result-tx-component {
    color: #fff;
    display: none;
    height: 85%;
    left: 0;
    position: absolute;
    right: 0;
    width: calc(100% - 75px)
}

.game-result-tx-component.active {
    display: flex;
    pointer-events: none
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    20%,50%,80% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10%)
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes modal-mask-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%)
    }

    to {
        opactransform: translateY(0)
    }
}

@keyframes dice-rolling-down-left {
    0% {
        transform: translateY(-100%) rotate(1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes dice-rolling-down-right {
    0% {
        transform: translateY(-100%) rotate(-1turn)
    }

    12% {
        transform: translateY(-89.11%) rotate(-320.7deg)
    }

    24% {
        transform: translateY(-56.44%) rotate(-201deg)
    }

    36% {
        transform: translateY(-1.99%) rotate(-7.16deg)
    }

    54% {
        transform: translateY(-24.98%) rotate(-89.92deg)
    }

    74% {
        transform: translateY(-1.63%) rotate(-5.868deg)
    }

    82% {
        transform: translateY(-6.25%) rotate(-22.5deg)
    }

    92% {
        transform: translateY(-.66%) rotate(-2.37deg)
    }

    96% {
        transform: translateY(-1.54%) rotate(-5.54deg)
    }

    to {
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes show-result {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.bet-option-xd-component {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    row-gap: .1rem
}

.bet-option-xd-component .mask-no-click {
    bottom: 0;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 1
}

.bet-option-xd-component .option {
    align-items: center;
    -moz-column-gap: .1rem;
    column-gap: .1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 1.5rem;
    text-align: center
}

.bet-option-xd-component .option .bet-section {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%
}

.bet-option-xd-component .option .bet-section .bet-item {
    align-items: center;
    border: 1px solid;
    border-radius: 4px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin: 1px;
    position: relative
}

.bet-option-xd-component .option .bet-section .bet-item.bet-odd {
    background: var(--bet-xd-odd-bg);
    border-color: var(--bet-xd-odd-border);
    color: var(--bet-xd-odd-color)
}

@media(hover: hover) {
    .bet-option-xd-component .option .bet-section .bet-item.bet-odd:hover {
        background:var(--bet-xd-odd-bg-hover)
    }
}

.bet-option-xd-component .option .bet-section .bet-item.bet-even {
    background: var(--bet-xd-even-bg);
    border-color: var(--bet-xd-even-border);
    color: var(--bet-xd-even-color)
}

@media(hover: hover) {
    .bet-option-xd-component .option .bet-section .bet-item.bet-even:hover {
        background:var(--bet-xd-even-bg-hover)
    }

    .bet-option-xd-component .option .bet-section .bet-item {
        cursor: pointer
    }
}

.bet-option-xd-component .option .bet-section .bet-item .dish-wrapper {
    display: flex
}

.bet-option-xd-component .option .bet-section .bet-item .dish-wrapper .dish-red,.bet-option-xd-component .option .bet-section .bet-item .dish-wrapper .dish-white {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.6rem;
    margin: 0 .1rem;
    text-align: center;
    width: 1.6rem
}

.bet-option-xd-component .option .bet-section .bet-item .dish-wrapper .dish-white {
    background-image: url(/static/media/dish-white.11834bd2..svg);
    color: #000
}

.bet-option-xd-component .option .bet-section .bet-item .dish-wrapper .dish-red {
    background-image: url(/static/media/dish-red.e9b10cc4..svg);
    color: #fff
}

.bet-option-xd-component .option .bet-section .bet-item .odds {
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding-top: .4rem
}

.bet-option-xd-component .no-hedge {
    animation: fade-in-out 1s ease-in-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #0000008c;
    border-radius: .4rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
    padding: 1.2rem 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.spin-dish-component {
    height: 3.6rem;
    margin: 0 .5rem;
    width: 3.6rem
}

.spin-dish-component .inner {
    position: relative;
    transform-style: preserve-3d
}

.spin-dish-component .inner .dish-red,.spin-dish-component .inner .dish-white {
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    height: 3.6rem;
    justify-content: center;
    position: absolute;
    width: 3.6rem
}

.spin-dish-component .inner .dish-white {
    background-image: url(/static/media/dish-white.11834bd2..svg);
    color: #000
}

.spin-dish-component .inner .dish-white .dish-value {
    transform: rotateY(180deg)
}

.spin-dish-component .inner .dish-red {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-image: url(/static/media/dish-red.e9b10cc4..svg);
    color: #fff
}

.spin-dish-component .inner .dish-value {
    font-size: 1.6rem
}

.deal-xd-component {
    align-items: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #ffffffb3;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 0
}

.deal-xd-component .dice-result-mid {
    opacity: 0;
    padding-bottom: 3rem
}

.deal-xd-component .is-show-result {
    animation-delay: .5s;
    animation-duration: .25s;
    animation-fill-mode: forwards;
    animation-name: show-result;
    animation-timing-function: ease-in-out
}

.deal-xd-component .result-text {
    font-size: 4.6rem;
    line-height: 5.4rem
}

.deal-xd-component .result-text.odd {
    color: var(--game-result-xd-odd-color)
}

.deal-xd-component .result-text.even {
    color: var(--game-result-xd-even-color)
}

.deal-xd-component .dice-result-bottom {
    display: flex
}

.game-result-xd-component {
    color: #fff;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.game-result-xd-component.active {
    display: flex;
    height: calc(100% - 1.8rem);
    pointer-events: none
}

.category-content .loading-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 362.5px;
    padding-top: 100px
}

.category-content .dealer-list {
    background: url(https://img.alltocon.com/img/static/er/m-bg.jpg) top/100% auto repeat-y;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

.category-content .dealer-list .dealer-wrapper {
    background: url(https://img.alltocon.com/img/static/er/casino/casino-bg.png) 50%/contain no-repeat;
    filter: drop-shadow(2px 2px 2px rgba(120,120,120,.4));
    margin: 10px
}

.mobile .bet-interval-component .bet-interval-button {
    top: 234px
}

@media(min-width: 640px) {
    .mobile .bet-interval-component .bet-interval-button {
        border-radius:32px 0 0 32px;
        height: 64px;
        right: calc(50vw - 320px);
        top: 289px;
        width: 64px
    }
}

.bet-interval-component .bet-interval-button {
    align-items: center;
    background: #fff;
    border-radius: 25px 0 0 25px;
    box-shadow: inset 0 0 0 1px #ccc,0 0 30px #78787866;
    color: var(--bet-interval-color);
    display: flex;
    flex-direction: column;
    height: 44px;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 285px;
    width: 44px;
    z-index: 20
}

.bet-interval-component .bet-interval-button .icon-bet {
    background: url(https://img.alltocon.com/img/static/er/nav-icon-casino.png) 50%/contain no-repeat;
    height: 25px;
    width: 25px
}

.bet-interval-component .bet-interval-button .number {
    font-size: .9rem;
    padding-top: 4px
}

.bet-interval-component .bet-interval-mask {
    background: #0000003d;
    bottom: 0;
    height: 100vh;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw
}

.bet-interval-component .wrapper {
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    left: 0;
    margin: 0 auto;
    max-width: 640px;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 20
}

.bet-interval-component .wrapper.active {
    visibility: visible
}

.bet-interval-component .wrapper.active .bet-interval {
    transform: translateX(0)
}

.bet-interval-component .wrapper .bet-interval {
    background: #fff;
    border-radius: 20px 0 0 20px;
    box-shadow: inset 0 0 0 1px #d3bb83,0 0 30px #78787866;
    display: flex;
    display: block;
    flex-direction: column;
    max-height: 410px;
    overflow: hidden;
    padding: 0 0 10px 15px;
    position: absolute;
    top: 234px;
    transform: translateX(100%);
    transition: .25s ease-in-out;
    transition-property: transform,visibility;
    width: 350px
}

.bet-interval-component .wrapper .bet-interval .bet-interval-header {
    align-items: center;
    border-bottom: 1px solid #ccc;
    color: #d3bb83;
    display: flex;
    padding: 10px 0
}

.bet-interval-component .wrapper .bet-interval .bet-interval-header .icon-bet {
    font-size: 20px;
    margin-right: 1rem
}

.bet-interval-component .wrapper .bet-interval .bet-interval-header .bet-interval-header-text {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    margin-left: 0
}

.bet-interval-component .wrapper .bet-interval .bet-interval-header .bet-interval-header-text:before {
    background: url(https://img.alltocon.com/img/static/er/nav-icon-casino.png) 50%/contain no-repeat;
    content: "";
    display: block;
    height: 25px;
    margin-right: 5px;
    width: 25px
}

.bet-interval-component .wrapper .bet-interval .bet-interval-header .icon-Close {
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 10px
}

.bet-interval-component .wrapper .bet-interval .bet-interval-item-container {
    flex: 1;
    height: 360px;
    overflow-y: auto
}

.bet-interval-component .wrapper .bet-interval .chips {
    align-content: center;
    align-items: center;
    color: #353b45;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 16px;
    height: 100%;
    justify-content: space-between;
    line-height: 20px;
    margin-left: auto;
    padding: 0 0 5px
}

.bet-interval-component .wrapper .bet-interval .chips li {
    align-items: center;
    background-image: url(/static/media/bet-disable.1e6e4831..svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 42px 42px;
    border: 1px solid #0000;
    border-radius: 100%;
    display: flex;
    height: 54px;
    justify-content: center;
    line-height: 1;
    position: relative;
    width: 54px
}

.bet-interval-component .wrapper .bet-interval .chips li.selected {
    background-color: #fff3;
    background-image: url(/static/media/bet1.6b47eb44..svg);
    background-position: 50%;
    border-color: #ffcf3f;
    box-sizing: border-box
}

.bet-interval-component .wrapper .bet-interval .chips li.selected .icon-success {
    display: flex
}

.bet-interval-component .wrapper .bet-interval .chips li .icon-success {
    align-items: center;
    background: #d3bb83;
    border-radius: 50%;
    color: #fff;
    display: none;
    font-size: 6px;
    height: 12px;
    justify-content: center;
    padding: 3px;
    position: absolute;
    right: 0;
    top: 0;
    width: 12px
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-0.selected {
    background-image: url(/static/media/bet1.6b47eb44..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-0:hover {
        background-image:url(/static/media/bet1.6b47eb44..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-1.selected {
    background-image: url(/static/media/bet2.f81629b4..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-1:hover {
        background-image:url(/static/media/bet2.f81629b4..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-2.selected {
    background-image: url(/static/media/bet3.e26296cf..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-2:hover {
        background-image:url(/static/media/bet3.e26296cf..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-3.selected {
    background-image: url(/static/media/bet4.3778ddc9..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-3:hover {
        background-image:url(/static/media/bet4.3778ddc9..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-4.selected {
    background-image: url(/static/media/bet5.064f66aa..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-4:hover {
        background-image:url(/static/media/bet5.064f66aa..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-5.selected {
    background-image: url(/static/media/bet6.f51a7e7b..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-5:hover {
        background-image:url(/static/media/bet6.f51a7e7b..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-6.selected {
    background-image: url(/static/media/bet7.0fff8c80..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-6:hover {
        background-image:url(/static/media/bet7.0fff8c80..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-7.selected {
    background-image: url(/static/media/bet8.2216a8d9..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-7:hover {
        background-image:url(/static/media/bet8.2216a8d9..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-8.selected {
    background-image: url(/static/media/bet9.63c49532..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-8:hover {
        background-image:url(/static/media/bet9.63c49532..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-9.selected {
    background-image: url(/static/media/bet10.b7ee5b6f..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-9:hover {
        background-image:url(/static/media/bet10.b7ee5b6f..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-10.selected {
    background-image: url(/static/media/bet11.628b954f..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-10:hover {
        background-image:url(/static/media/bet11.628b954f..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-11.selected {
    background-image: url(/static/media/bet12.556b7abe..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-11:hover {
        background-image:url(/static/media/bet12.556b7abe..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-12.selected {
    background-image: url(/static/media/bet13.e3c519fc..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-12:hover {
        background-image:url(/static/media/bet13.e3c519fc..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-13.selected {
    background-image: url(/static/media/bet14.58e18b71..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-13:hover {
        background-image:url(/static/media/bet14.58e18b71..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-14.selected {
    background-image: url(/static/media/bet15.06d41cc5..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-14:hover {
        background-image:url(/static/media/bet15.06d41cc5..svg)
    }
}

.bet-interval-component .wrapper .bet-interval .chips .chip-level-15.selected {
    background-image: url(/static/media/bet-self.ba92d756..svg)
}

@media(hover: hover) {
    .bet-interval-component .wrapper .bet-interval .chips .chip-level-15:hover {
        background-image:url(/static/media/bet-self.ba92d756..svg)
    }
}

.bet-interval-component .bet-interval-section-component .bet-interval-section-title {
    color: #d9b983;
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding: 1rem 0
}

.dealer {
    min-height: 100%
}

.dealer .main-content {
    margin: 0 auto;
    position: relative
}

.dealer .tab-wrapper {
    margin: 0 auto
}

.desktop .bet-interval-component .bet-interval-button {
    border-radius: 28px 0 0 28px;
    height: 60px;
    top: 346px;
    width: 60px
}

@media(min-width: 1280px) {
    .desktop .bet-interval-component .bet-interval-button {
        right:calc(50vw - 640px)
    }
}

.desktop .bet-interval-component .bet-interval-button .icon-bet {
    font-size: 3.2rem
}

.desktop .bet-interval-component .wrapper {
    max-width: 1280px
}

.desktop .bet-interval-component .wrapper .bet-interval {
    height: 60%;
    top: 33%
}

.welcome {
    --welcome-color: #fff;
    --welcome-bg: #f6599c80
}

.dealer,.transaction {
    --live-mode-dark-bg: #000;
    --live-mode-dark-border: 1px solid #f6599c;
    --live-mode-dark-li-color: #e0e7ec;
    --live-mode-li-color: #fff;
    --live-mode-li-text-shadow: unset;
    --live-mode-li-bg: linear-gradient(0deg,#ff007a,#ff007a),linear-gradient(90deg,#de2b8c,#5d31dc);
    --live-mode-li-border: none;
    --bet-interval-bg: #701a48;
    --bet-interval-color: #ffaccf;
    --category-item-bg: #353b45;
    --category-item-color: #e0e7ec;
    --category-item-border: none;
    --category-item-active-color: #fff;
    --category-item-active-bg: #f66767;
    --category-icon-angle-down-color: none;
    --dealer-panel-wrapper-bg: linear-gradient(287.56deg,#290c1a99,#521f3e99 50%,#3e243499);
    --dealer-panel-wrapper-new-tag-bg: linear-gradient(287.56deg,#290c1a99,#521f3e99 50%,#3e243499);
    --dealer-panel-wrapper-hot-tag-bg: linear-gradient(287.56deg,#290c1a99,#521f3e99 50%,#3e243499),no-repeat url(/static/media/table-tag-hot-border.8b97d52d..svg);
    --dealer-panel-wrapper-hot-tag-bg-size: contain;
    --dealer-panel-wrapper-border: 1px solid #545454;
    --dealer-profile-bg: linear-gradient(180deg,#b5208bb3,#9b1b774d);
    --dealer-profile-enter-play-bg: #353b45;
    --dealer-profile-enter-play-bg-hover: #de2b8c;
    --dealer-profile-game-round-color: #f9a8d4;
    --dealer-room-name-decoration-icon: url(/static/media/room-name-decoration.bd65031b..svg);
    --dealer-good-road-icon: url(/static/media/good-road.d0f5d578..svg);
    --dealer-play-icon-color: #ffcf3f;
    --dealer-category-interactive-bg: linear-gradient(180deg,#22a2fe00,#25a4ff 105%);
    --dealer-category-live-bg: linear-gradient(180deg,#ff005c00,#ff134c 105%);
    --dealer-category-ai-bg: #f6599c;
    --bet-limit-bg: #0000;
    --bet-limit-color: #898989;
    --classic-bg: #0000;
    --classic-bg-hover: #de2b8c;
    --no-commission-bg: #ffc237;
    --no-commission-bg-hover: #de2b8c;
    --bet-player-color: #555;
    --bet-player-border: 1px solid #4da9ff;
    --bet-player-bg: #4ba9ff00;
    --bet-player-bg-hover: #4ba9ff59;
    --bet-banker-color: #555;
    --bet-banker-border: 1px solid #f66767;
    --bet-banker-bg: #ee609c00;
    --bet-banker-bg-hover: #ee609c59;
    --bet-tie-color: #555;
    --bet-tie-border: 1px solid #64ca62;
    --bet-tie-bg: #6affb800;
    --bet-tie-bg-hover: #6affb859;
    --bet-tiger-color: #4da9ff;
    --bet-tiger-border: 1px solid #4da9ff;
    --bet-tiger-bg: #4ba9ff1a;
    --bet-tiger-bg-hover: #4ba9ff59;
    --bet-dragon-color: #f66767;
    --bet-dragon-border: 1px solid #f66767;
    --bet-dragon-bg: #ee609c1a;
    --bet-dragon-bg-hover: #ee609c59;
    --bet-small-color: #4da9ff;
    --bet-small-border: 1px solid #4da9ff;
    --bet-small-bg: #4ba9ff1a;
    --bet-small-bg-hover: #4ba9ff59;
    --bet-big-color: #f66767;
    --bet-big-border: 1px solid #f66767;
    --bet-big-bg: #ee609c1a;
    --bet-big-bg-hover: #ee609c59;
    --bet-any-triple-color: #64ca62;
    --bet-any-triple-border: 1px solid #64ca62;
    --bet-any-triple-bg: #6affb81a;
    --bet-any-triple-bg-hover: #6affb859;
    --bet-crab-bg: #22ff9526;
    --bet-crab-bg-hover: #22ff95;
    --bet-fish-bg: #ff80cc26;
    --bet-fish-bg-hover: #ff80cc;
    --bet-calabash-bg: #4ba9ff26;
    --bet-calabash-bg-hover: #4ba9ff;
    --bet-selection-border: 1px solid #bd5b8a;
    --bet-cg-border: 1px solid #be9145;
    --bet-tx-bg: #be91451a;
    --bet-tx-bg-hover: linear-gradient(180deg,#fff0,#00cbaa);
    --bet-tx-border: 1px solid #be9145;
    --bet-xd-odd-color: #f66767;
    --bet-xd-odd-border: #f66767;
    --bet-xd-odd-bg: none;
    --bet-xd-odd-bg-hover: #ee609c59;
    --bet-xd-even-color: #4da9ff;
    --bet-xd-even-border: #4da9ff;
    --bet-xd-even-bg: none;
    --bet-xd-even-bg-hover: #4ba9ff59;
    --auto-bet-button-color: #ffcf3f;
    --auto-bet-button-border: 1px solid #ffcf3f;
    --auto-bet-button-bg: 1px solid #ffcf3f;
    --auto-bet-button-bg: none;
    --confirm-button-color: #999;
    --confirm-button-color-disabled: #ccc;
    --confirm-button-bg: #de2b8c;
    --confirm-button-bg-hover: #871d56;
    --confirm-button-bg-disabled: #353b45;
    --confirm-button-border-disabled: 1px solid #757575;
    --cancel-button-color: #999;
    --cancel-button-color-disabled: #ccc;
    --cancel-button-bg: none;
    --cancel-button-bg-hover: #f9a8d4;
    --cancel-button-border: 0.8px solid #f9a8d4;
    --game-result-player-bg: #4ba9ff40;
    --game-result-player-border: 1px solid #4da9ff;
    --game-result-player-color: #4da9ff;
    --game-result-banker-bg: #ee609c40;
    --game-result-banker-border: 1px solid #f66767;
    --game-result-banker-color: #f66767;
    --game-result-tiger-bg: #4ba9ff40;
    --game-result-tiger-border: 1px solid #4da9ff;
    --game-result-tiger-color: #4da9ff;
    --game-result-dragon-bg: #ee609c40;
    --game-result-dragon-border: 1px solid #f66767;
    --game-result-dragon-color: #f66767;
    --game-result-small-color: #55c2ff;
    --game-result-big-color: #f66767;
    --game-result-any-triple-color: #64ca62;
    --game-result-xd-odd-color: #f66767;
    --game-result-xd-even-color: #4da9ff;
    --game-result-hl-lo-color: #f66767;
    --game-result-hl-hi-color: #55c2ff;
    --game-result-hl-sum-color: #ffcfd2;
    --road-map-player: url(/static/media/player.0ada0cb9..svg);
    --road-map-player-pair: url(/static/media/player-pair.e353ac67..svg);
    --road-map-banker: url(/static/media/banker.acfcc9aa..svg);
    --road-map-banker-pair: url(/static/media/banker-pair.0eebf046..svg);
    --road-map-tie: url(/static/media/tie.e135e79f..svg);
    --good-road-map-player: url(/static/media/good-road-player.20ed754f..svg);
    --good-road-map-player-pair: url(/static/media/good-road-player-pair.7abc139c..svg);
    --good-road-map-banker: url(/static/media/good-road-banker.d2d521d3..svg);
    --good-road-map-banker-pair: url(/static/media/good-road-banker-pair.0e61eec1..svg);
    --good-road-tie: url(/static/media/good-road-tie.a4eb15c5..svg);
    --road-map-tiger: url(/static/media/banker.0ada0cb9..svg);
    --road-map-dragon: url(/static/media/player.acfcc9aa..svg);
    --good-road-map-tiger: url(/static/media/good-road-banker.20ed754f..svg);
    --good-road-map-dragon: url(/static/media/good-road-player.d2d521d3..svg);
    --road-map-tg-tie: url(/static/media/tie.e135e79f..svg);
    --good-road-map-tg-tie: url(/static/media/good-road-tie.a4eb15c5..svg);
    --road-map-small: #4da9ff;
    --road-map-big: #f66767;
    --road-map-any-triple: #64ca62;
    --tf-dice-icon-red: #e9678e;
    --tf-dice-icon-green: #4ec99d;
    --tf-dice-icon-blue: #40b8ec;
    --road-map-xd-even: #4da9ff;
    --road-map-xd-odd: #f6599c;
    --bet-percentage-Baccarat-left-color: #4da9ff;
    --bet-percentage-Baccarat-right-color: #f6599c;
    --bet-percentage-dt-left-color: #f6599c;
    --bet-percentage-dt-right-color: #4da9ff;
    --bet-percentage-sb-left-color: #4da9ff;
    --bet-percentage-sb-right-color: #f6599c;
    --bet-percentage-hl-left-color: #d23c3c;
    --bet-percentage-hl-right-color: #d8ccae;
    --bet-percentage-tx-left-color: #000;
    --bet-percentage-tx-right-color: #fff
}

.loading-section-wrapper {
    position: absolute;
    width: 100%
}

.loading-section-wrapper .loading-item {
    background: url(https://img.alltocon.com/img/static/er/casino/casino-bg.png) 50%/contain no-repeat;
    filter: drop-shadow(2px 2px 2px rgba(120,120,120,.4));
    height: calc(52.2456vw - 10.44912px);
    margin: 10px auto;
    width: calc(100vw - 20px)
}

.loading-section-wrapper {
    opacity: 0;
    transform: translateY(15px);
    transition: .5s ease-out
}

.loading-section-wrapper.loaded {
    opacity: 1;
    transform: translateY(0)
}

.loading-section-wrapper .chaotic-orbit,.loading-section-wrapper .loading-item {
    align-items: center;
    display: flex;
    justify-content: center
}

.loading-section-wrapper .chaotic-orbit {
    --uib-size: 35px;
    --uib-speed: 1.5s;
    --uib-color: #e5cd9a;
    animation: rotate calc(var(--uib-speed)*1.667) infinite linear;
    height: var(--uib-size);
    position: relative;
    width: var(--uib-size)
}

.loading-section-wrapper .chaotic-orbit:after,.loading-section-wrapper .chaotic-orbit:before {
    background-color: var(--uib-color);
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 60%;
    position: absolute;
    width: 60%;
    will-change: transform
}

.loading-section-wrapper .chaotic-orbit:before {
    animation: orbit var(--uib-speed) linear infinite
}

.loading-section-wrapper .chaotic-orbit:after {
    animation: orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes orbit {
    0% {
        opacity: .65;
        transform: translate(calc(var(--uib-size)*.5)) scale(.73684)
    }

    5% {
        opacity: .58;
        transform: translate(calc(var(--uib-size)*.4)) scale(.684208)
    }

    10% {
        opacity: .51;
        transform: translate(calc(var(--uib-size)*.3)) scale(.631576)
    }

    15% {
        opacity: .44;
        transform: translate(calc(var(--uib-size)*.2)) scale(.578944)
    }

    20% {
        opacity: .37;
        transform: translate(calc(var(--uib-size)*.1)) scale(.526312)
    }

    25% {
        opacity: .3;
        transform: translate(0) scale(.47368)
    }

    30% {
        opacity: .37;
        transform: translate(calc(var(--uib-size)*-.1)) scale(.526312)
    }

    35% {
        opacity: .44;
        transform: translate(calc(var(--uib-size)*-.2)) scale(.578944)
    }

    40% {
        opacity: .51;
        transform: translate(calc(var(--uib-size)*-.3)) scale(.631576)
    }

    45% {
        opacity: .58;
        transform: translate(calc(var(--uib-size)*-.4)) scale(.684208)
    }

    50% {
        opacity: .65;
        transform: translate(calc(var(--uib-size)*-.5)) scale(.73684)
    }

    55% {
        opacity: .72;
        transform: translate(calc(var(--uib-size)*-.4)) scale(.789472)
    }

    60% {
        opacity: .79;
        transform: translate(calc(var(--uib-size)*-.3)) scale(.842104)
    }

    65% {
        opacity: .86;
        transform: translate(calc(var(--uib-size)*-.2)) scale(.894736)
    }

    70% {
        opacity: .93;
        transform: translate(calc(var(--uib-size)*-.1)) scale(.947368)
    }

    75% {
        opacity: 1;
        transform: translate(0) scale(1)
    }

    80% {
        opacity: .93;
        transform: translate(calc(var(--uib-size)*.1)) scale(.947368)
    }

    85% {
        opacity: .86;
        transform: translate(calc(var(--uib-size)*.2)) scale(.894736)
    }

    90% {
        opacity: .79;
        transform: translate(calc(var(--uib-size)*.3)) scale(.842104)
    }

    95% {
        opacity: .72;
        transform: translate(calc(var(--uib-size)*.4)) scale(.789472)
    }

    to {
        opacity: .65;
        transform: translate(calc(var(--uib-size)*.5)) scale(.73684)
    }
}

.loading-section-wrapper .loading-item {
    height: 200px
}

.app.casino-page.logined .side-menu {
    display: none
}

.live-container.casino-page {
    height: auto;
    min-height: 50vh;
    padding-bottom: 0!important
}

.live-container.casino-page .live-wrapper {
    display: none
}

.live-container.casino-page .dealer-list {
    flex-direction: row;
    flex-wrap: wrap
}

.live-container.casino-page .dealer-list>.dealer-wrapper {
    max-width: 410px;
    width: 32%
}

.live-container.casino-page .desktop-casino-page-wrapper {
    position: relative;
    width: 100%;
    z-index: 15
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo {
    padding: 20px 0
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo .casino-game-wallet {
    display: none
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo .bet-interval-component .wrapper {
    max-width: 100vw
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo .bet-interval-component .wrapper .bet-interval {
    max-height: 70vh
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo .bet-interval-component .wrapper .bet-interval .bet-interval-item-container {
    height: auto;
    max-height: 65vh
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo .bet-interval-component .bet-interval-button {
    right: 0
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo .dealer .main-content {
    margin: auto;
    max-width: 1290px
}

.live-container.casino-page .desktop-casino-page-wrapper .live-demo #dealers-loading-spinner .loading-item,.live-container.casino-page .desktop-casino-page-wrapper .live-demo .dealer .main-content .dealer-list {
    background: none
}

.live-container.casino-page .desktop-casino-page-wrapper .game-category-wrapper {
    align-items: center;
    box-shadow: inset 0 -1px 0 #7878784d,0 1px 0 #ffffffe6;
    display: flex;
    font-size: 18px;
    min-height: 30px
}

.live-container.casino-page .desktop-casino-page-wrapper .game-category-wrapper .game-category-list {
    display: flex;
    flex: 1;
    margin: auto;
    max-width: 1280px;
    position: relative
}

.live-container.casino-page .desktop-casino-page-wrapper .game-category-wrapper .game-category-list>div {
    color: #787878;
    cursor: pointer;
    margin: 20px
}

.live-container.casino-page .desktop-casino-page-wrapper .game-category-wrapper .game-category-list>div.is-active {
    color: #c72828
}

.app.gamelobby.casino-page .header-account .wallet,.app.gamelobby.casino-page .right .wallet {
    display: none!important
}

#casino-wallet-wrapper {
    color: #c72828;
    position: absolute;
    right: 0
}

.live-container {
    background: #3c3b3b;
    overflow: hidden;
    position: relative
}

.live-nav-items {
    display: flex;
    justify-content: center;
    padding-bottom: 1.8%;
    z-index: 2
}

.live-nav-items,.live-nav-items:after {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%
}

.live-nav-items:after {
    background-color: #00000080;
    box-shadow: inset 0 -6px 12px #00000080,inset 0 -9px 18px #00000080;
    content: "";
    height: 60%;
    z-index: -1
}

.live-nav-items>li {
    cursor: pointer;
    margin: 0 5px;
    perspective: 300px;
    transform: scale3d(.9,.9,1);
    transform-origin: 50% 90%;
    transition: transform .4s;
    width: 123px
}

.live-nav-items>li .menu-img {
    background-size: cover;
    display: block;
    filter: grayscale(1) contrast(80%) drop-shadow(0 2px 4px rgba(0,0,0,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.75));
    height: 0;
    padding-bottom: 95.1219512195%;
    transition: filter .4s;
    width: 100%
}

.live-nav-items>li:hover .menu-img {
    filter: grayscale(.5) contrast(90%) drop-shadow(0 2px 4px rgba(0,0,0,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.75))
}

.live-nav-items>li.active {
    transform: scaleX(1)
}

.live-nav-items>li.active .menu-img {
    animation: live-nav-items_li .8s linear both
}

.live-main {
    background-color: #3c3b3b;
    height: calc(100vh - 300px);
    min-height: 570px;
    position: relative;
    width: 100%;
    z-index: 1
}

@media screen and (max-width: 1024px) {
    .live-main {
        max-height:45vw;
        min-height: unset
    }
}

@media screen and (max-width: 850px) {
    .live-main {
        max-height:70vw
    }
}

.live-main .live-main-wrap>div {
    align-items: flex-end;
    background-position: 50%;
    background-size: cover;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale3d(1.2,1.2,1);
    transition: opacity .5s ease-in-out,transform .5s ease-in-out;
    width: 100%;
    z-index: -1
}

.live-main .live-main-wrap>div.active {
    opacity: 1;
    transform: scaleX(1);
    z-index: 4
}

.live-main .live-main-wrap>div.active .main-image {
    transform: scaleX(1) translateZ(0)
}

.live-main .live-main-wrap>div.active .gp-logo {
    transform: scaleX(1) translate3d(0,-15%,0)
}

.live-main .live-main-wrap>div .main-image {
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)) drop-shadow(0 6px 8px rgba(0,0,0,.3));
    height: 88%;
    margin: 0 20px;
    max-width: 70%;
    transform: scale3d(1.5,1.5,1) translate3d(50%,0,0);
    transition: transform .5s ease-in-out
}

.live-main .live-main-wrap>div .main-image img {
    display: block;
    height: 100%
}

.live-main .live-main-wrap>div .gp-logo {
    align-items: center;
    animation: gp-logo .5s ease-in-out infinite alternate;
    cursor: pointer;
    display: flex;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 4px 6px rgba(0,0,0,.25));
    height: 55%;
    justify-content: center;
    margin: auto 0;
    min-width: 30%;
    position: relative;
    transform: scale3d(1.2,1.2,1) translate3d(0,-50%,0);
    transition: transform .5s ease-in-out;
    z-index: 2
}

.live-main .live-main-wrap>div .gp-logo img {
    display: block;
    max-width: 95%
}

.live-main .live-main-wrap>div .gp-logo:hover {
    animation-name: gp-logo-hover
}

.live-main .live-main-wrap>div:nth-child(2n) .main-image {
    order: 1
}

.live-main .live-main-wrap>div:nth-child(2n) .gp-logo {
    order: 2
}

.live-main .live-main-wrap .dg .main-image {
    height: 95%
}

.live-main .live-main-wrap .wm .gp-logo {
    height: 70%
}

.live-main .live-main-wrap .pt .gp-logo {
    height: 60%
}

.live-main .live-main-wrap .pt .main-image {
    margin: 0 -13%
}

.live-main .live-main-wrap .bbin .gp-logo {
    height: 65%
}

.live-main .maintenance-block {
    box-sizing: border-box;
    left: 50%;
    padding: 20px;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 10
}

.live-main .generic-maintenance {
    z-index: 5
}

.live-main .generic-maintenance:before {
    font-size: 100px;
    line-height: 120px;
    margin-top: -100px
}

.live-main .generic-maintenance>.content {
    position: absolute;
    text-align: center;
    top: calc(50% + 70px)
}

@keyframes gp-logo {
    0% {
        filter: brightness(1) saturate(1) drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 4px 6px rgba(0,0,0,.25))
    }

    to {
        filter: brightness(1.2) saturate(1.2) drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 4px 6px rgba(0,0,0,.25))
    }
}

@keyframes gp-logo-hover {
    0% {
        filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 4px 6px rgba(0,0,0,.25));
        transform: scaleX(1) translate3d(0,-15%,0)
    }

    to {
        filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)) drop-shadow(0 6px 9px rgba(0,0,0,.45));
        transform: scale3d(1.05,1.05,1) translate3d(0,-15%,0)
    }
}

@keyframes live-nav-items_li {
    0%,50% {
        filter: grayscale(.5) contrast(90%) drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0))
    }

    0% {
        transform: rotateY(0deg)
    }

    50% {
        transform: rotateY(180deg)
    }

    to {
        filter: grayscale(0) contrast(100%) drop-shadow(0 2px 4px rgba(0,0,0,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.75));
        transform: rotateY(1turn)
    }
}