* {
    box-sizing: border-box;
}


html {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    font-size: 43px;
}
span.login {
  border-radius: .07rem;
  padding : .052rem .14222rem;
  color : #1e1e1e;
  border: 1px solid var(--skin__btn_color_2);
  background: var(--skin__btn_color_1)
}

li._item_vuwsd_39 {
    width: 100%;
} 

ul.register-quickentry {
    width: 100%;
}
span._inner_vuwsd_50 { 
    font-size: .25rem;
    display: flex;
    margin: .21rem 0 0rem;
    align-items: center;
    text-align: center; 
    justify-content: center; 
    width: 100%; 
}

.register{
  border-radius: .07rem;
  padding : .052rem .14222rem;
  border: 1px solid var(--skin__btn_color_2)
}
.modal_content {
    background: var(--skin__bg_2);
    overflow: visible;
    border: var(--lobby__px) solid var(--skin__border);
    width: 100%;
    background: var(--skin__bg_2);
    border-radius: .2rem;
    backface-visibility: hidden;
    overflow: auto;
    min-height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal_overlay {
    --ui-overlay-z-index: 1;
    --ui-overlay-background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--ui-overlay-z-index);
    width: 100%;
    height: 100%;
    background-color: var(--ui-overlay-background);
    overflow: hidden;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    z-index: 999;
}

span._inner_vuwsd_50>div {
    color: var(--skin__primary);
    margin-left: .113rem;
}

.modal_wrapper {    
    --other-space: 2rem;
    --left-right-space: .3rem;
    --form-right-space: calc((var(--left-right-space) - .06rem) / 2);
    --container-space: .3rem;
    width: 6.9rem;
    min-height: unset;
    width: 6rem;
    font-size: .16rem;
    transform-origin: center center;
    background-color: transparent;
    overflow-y: visible;
    max-height: 100vh;
    --other-space: 2rem;
    --left-right-space: .3rem;
    --form-right-space: calc((var(--left-right-space) - .06rem) / 2);
    --container-space: .3rem;
    width: 6.9rem;
    min-height: unset;
    position: relative;
    left: 0;
    right: 0;
    width: fit-content;
    max-width: calc(100vw - .32rem);
    margin: 0 auto;
    position: absolute;
    max-height: 100%;
    box-sizing: border-box;
    transform-origin: center center;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.modal_body {
    display: flex;
    flex-flow: column;
    flex: 1;
}
.modal_footer {
    display: flex;
    flex-grow: 0;
}

.ui-input__star-sign {
    display: block;
    color: var(--skin__accent_2);
    width: .12rem;
    height: 100%;
    text-align: center;
    align-items: center;
    top: 2px;
    position: relative;
    left: -2px;
}
._list_vuwsd_33 {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: .26rem;
    padding-top: .2rem;
}
._list_vuwsd_33 ._item_vuwsd_39 ._inner_vuwsd_50 {
    height: unset;
    min-height: .32rem;
    color: var(--skin__primary);
    font-size: .22rem;
    white-space: break-spaces;
    text-wrap: wrap;
    cursor: pointer;
}
._list_vuwsd_33 ._item_vuwsd_39 {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin-right: .2rem;
}
.input_wrapper {
    width: 100%;
    height: 100%;
    line-height: .7rem;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    border: var(--lobby__px) solid var(--skin__border);
    height: .7rem;
    width: 100%;
    border-radius: .1rem;
    position: relative;  
    background-color: var(--skin__bg_2);
    color: var(--skin__neutral_2);
    font-size: .22rem;
    padding: 0 .2rem;
}
.wrapper {
    display: flex;
    flex-flow: column;
    width: 100%;
    line-height: .7rem;
}

input.custom_input {
    color: var(--skin__lead);
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: transparent;
    border: 0;
    flex: 1;
    display: flex;
}
.modal_header {
    flex: 0;
    font-size: .4rem;
    display: flex;
    justify-content: flex-end;
    padding-inline: .25rem;
}
.modal_wrapper {
    display: flex;
    flex-direction: column;
    border-radius: .2rem;
    font-size: .16rem;
    max-height: calc(var(--inner-height, 100vh) - var(--other-space));
    backface-visibility: hidden;
    padding: 0 0 var(--container-space) 0;
    box-sizing: border-box;
    max-width: 10rem;
    min-width: 8rem;
    width: 80%;
}
:root {
        --skin__ID: 2 -3;
    --skin__accent_1: #04BE02;
    --skin__accent_1__toRgbString: 4, 190, 2;
    --skin__accent_2: #EA4E3D;
    --skin__accent_2__toRgbString: 234, 78, 61;
    --skin__accent_3: #FFAA09;
    --skin__accent_3__toRgbString: 255, 170, 9;
    --skin__alt_border: #C7C7C7;
    --skin__alt_border__toRgbString: 199, 199, 199;
    --skin__alt_lead: #E3E3E3;
    --skin__alt_lead__toRgbString: 227, 227, 227;
    --skin__alt_neutral_1: #C7C7C7;
    --skin__alt_neutral_1__toRgbString: 199, 199, 199;
    --skin__alt_neutral_2: #777777;
    --skin__alt_neutral_2__toRgbString: 119, 119, 119;
    --skin__alt_primary: #FEB705;
    --skin__alt_primary__toRgbString: 254, 183, 5;
    --skin__alt_text_primary: #000000;
    --skin__alt_text_primary__toRgbString: 0, 0, 0;
    --skin__bg_1: #303030;
    --skin__bg_1__toRgbString: 48, 48, 48;
    --skin__bg_2: #1C1C1C;
    --skin__bg_2__toRgbString: 28, 28, 28;
    --skin__border: #505050;
    --skin__border__toRgbString: 80, 80, 80;
    --skin__bs_topnav_bg: #1C1C1C;
    --skin__bs_topnav_bg__toRgbString: 28, 28, 28;
    --skin__bs_zc_an1: #303030;
    --skin__bs_zc_an1__toRgbString: 48, 48, 48;
    --skin__bs_zc_bg: #242424;
    --skin__bs_zc_bg__toRgbString: 36, 36, 36;
    --skin__btmnav_active: #FEB705;
    --skin__btmnav_active__toRgbString: 254, 183, 5;
    --skin__btmnav_def: #777777;
    --skin__btmnav_def__toRgbString: 119, 119, 119;
    --skin__btn_color_1: #FEB705;
    --skin__btn_color_1__toRgbString: 254, 183, 5;
    --skin__btn_color_2: #FEB705;
    --skin__btn_color_2__toRgbString: 254, 183, 5;
    --skin__cards_text: #C7C7C7;
    --skin__cards_text__toRgbString: 199, 199, 199;
    --skin__ddt_bg: #2B2B2B;
    --skin__ddt_bg__toRgbString: 43, 43, 43;
    --skin__ddt_icon: #3A3A3A;
    --skin__ddt_icon__toRgbString: 58, 58, 58;
    --skin__filter_active: #FEB705;
    --skin__filter_active__toRgbString: 254, 183, 5;
    --skin__filter_bg: #303030;
    --skin__filter_bg__toRgbString: 48, 48, 48;
    --skin__home_bg: #1C1C1C;
    --skin__home_bg__toRgbString: 28, 28, 28;
    --skin__icon_1: #FEB705;
    --skin__icon_1__toRgbString: 254, 183, 5;
    --skin__icon_tg_q: #C7C7C7;
    --skin__icon_tg_q__toRgbString: 199, 199, 199;
    --skin__icon_tg_z: #C7C7C7;
    --skin__icon_tg_z__toRgbString: 199, 199, 199;
    --skin__jackpot_text: #FFFFFF;
    --skin__jackpot_text__toRgbString: 255, 255, 255;
    --skin__jdd_vip_bjc: #FFAA09;
    --skin__jdd_vip_bjc__toRgbString: 255, 170, 9;
    --skin__kb_bg: #303030;
    --skin__kb_bg__toRgbString: 48, 48, 48;
    --skin__label_accent3: #FFAA09;
    --skin__label_accent3__toRgbString: 255, 170, 9;
    --skin__labeltext_accent3: #FFFFFF;
    --skin__labeltext_accent3__toRgbString: 255, 255, 255;
    --skin__lead: #E3E3E3;
    --skin__lead__toRgbString: 227, 227, 227;
    --skin__leftnav_active: #000000;
    --skin__leftnav_active__toRgbString: 0, 0, 0;
    --skin__leftnav_def: #C7C7C7;
    --skin__leftnav_def__toRgbString: 199, 199, 199;
    --skin__neutral_1: #C7C7C7;
    --skin__neutral_1__toRgbString: 199, 199, 199;
    --skin__neutral_2: #777777;
    --skin__neutral_2__toRgbString: 119, 119, 119;
    --skin__neutral_3: #777777;
    --skin__neutral_3__toRgbString: 119, 119, 119;
    --skin__primary: #FEB705;
    --skin__primary__toRgbString: 254, 183, 5;
    --skin__profile_icon_1: #FEB705;
    --skin__profile_icon_1__toRgbString: 254, 183, 5;
    --skin__profile_icon_2: #FEB705;
    --skin__profile_icon_2__toRgbString: 254, 183, 5;
    --skin__profile_icon_3: #FEB705;
    --skin__profile_icon_3__toRgbString: 254, 183, 5;
    --skin__profile_icon_4: #FEB705;
    --skin__profile_icon_4__toRgbString: 254, 183, 5;
    --skin__profile_toptext: #FFFFFF;
    --skin__profile_toptext__toRgbString: 255, 255, 255;
    --skin__search_icon: #C7C7C7;
    --skin__search_icon__toRgbString: 199, 199, 199;
    --skin__table_bg: #303030;
    --skin__table_bg__toRgbString: 48, 48, 48;
    --skin__text_accent3: #FFFFFF;
    --skin__text_accent3__toRgbString: 255, 255, 255;
    --skin__text_primary: #000000;
    --skin__text_primary__toRgbString: 0, 0, 0;
    --skin__tg_accent_1: #BBDFC1;
    --skin__tg_accent_1__toRgbString: 187, 223, 193;
    --skin__tg_accent_3: #FFE7B8;
    --skin__tg_accent_3__toRgbString: 255, 231, 184;
    --skin__tg_primary: #FDF0D1;
    --skin__tg_primary__toRgbString: 253, 240, 209;
    --skin__web_bs_yj_bg: #1C1C1C;
    --skin__web_bs_yj_bg__toRgbString: 28, 28, 28;
    --skin__web_bs_zc_an2: #3A3A3A;
    --skin__web_bs_zc_an2__toRgbString: 58, 58, 58;
    --skin__web_btmnav_db: #242424;
    --skin__web_btmnav_db__toRgbString: 36, 36, 36;
    --skin__web_filter_gou: #000000;
    --skin__web_filter_gou__toRgbString: 0, 0, 0;
    --skin__web_left_bg_q: #363636;
    --skin__web_left_bg_q__toRgbString: 54, 54, 54;
    --skin__web_left_bg_shadow: #0000001F;
    --skin__web_left_bg_shadow_active: #0000001F;
    --skin__web_left_bg_z: #1D1D1D;
    --skin__web_left_bg_z__toRgbString: 29, 29, 29;
    --skin__web_load_zz: #50505066;
    --skin__web_plat_line: #303030;
    --skin__web_plat_line__toRgbString: 48, 48, 48;
    --skin__web_topbg_1: #F6BE30;
    --skin__web_topbg_1__toRgbString: 246, 190, 48;
    --skin__web_topbg_3: #EE9F03;
    --skin__web_topbg_3__toRgbString: 238, 159, 3;
    --lobby__max-width: 100%;
    --lobby__vh: 9.32px;
    --lobby__px: 1px;
}

html {
    font-size: calc(100vw / (750 / 100));
}
body {
    width: 100%;
    height: 100%;
}
html body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    color: var(--skin__neutral_1);
    background-color: var(--skin__bg_1);
    font-size: .24rem;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
#app {
    width: 100%;
    height: -webkit-fit-content;
    height: 100%;
    margin: 0 auto;
    max-width: 480px;
}
 
html, body, #app, section {
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important;  
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
section::-webkit-scrollbar {
    display: none !important; 
}
div#gamesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .1333rem;
}
@media screen and (max-width: 500px) {
    html, body, #app, section {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    #app::-webkit-scrollbar,
    section::-webkit-scrollbar {
        display: none !important;
    }
}

.weblist.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
section.weblist_section.active {
    height: 100%;
    overflow: auto;
}
.weblist.main {
    width: 100%;
    display: flex;
    flex-flow: column; 
}
.weblist.body {
    width: 100%;
    margin-bottom: 1.422667rem;
    height: calc(100dvh - 1.422667rem - 1.422667rem);
    margin-top: 1.422667rem;
    flex: 1; 
    padding: .1666rem;
    padding-bottom:0;
}
.weblist.header {
    height: 1.422667rem;
    z-index: 100;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    position: fixed !important;
    max-width: 11.15rem;
    width:100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--skin__bs_topnav_bg);
    border-bottom: .01rem solid var(--skin__border);
}
.weblist.footer {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: fixed !important;
    max-width: 11.15rem;
    left: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 100%;
    -webkit-transform: translateX(-50%);
    bottom: 0;
    transform: translateX(0, -50%);
    background: #08081C;
    z-index: 100;
    position: relative;
    font-size: .318rem;
}
.weblist.footer>.item {
    background: var(--main_gradient-color2);
    width: 1.6rem;
    height: 1.01333rem;
    border-radius: .50667rem;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.item.active > .top > svg path, .item.active > .top > .home__svg {
    stroke: var(--skin__primary); 
}

.wrapper__footer {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.102333rem;
    box-sizing: content-box;
    width: 100%;
    background-color: var(--skin__web_btmnav_db);
    width: 100%;
    height: 1.124rem;
    box-shadow: .02rem 0 .06rem rgba(0, 0, 0, .1);
    z-index: 2;
    position: relative;
    --cutOneImageWidth: 1.24rem;
    --cutOneImageHeight: 1.24rem;
    gap:.222rem;
    --expand_tabbar_festival_height: 1.24rem;
}
.weblist.footer>.wrapper__footer>.item {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-flow: column;
    cursor: pointer
}

.weblist.footer>.wrapper__footer>.item>.top>svg {
    width: .6rem;
    height: .6rem;
}

.weblist.footer>.wrapper__footer>.item>.top>svg.home, 
.weblist.footer>.wrapper__footer>.item>.top>svg.login {
    width: .6rem;
    height: .6rem;
}
svg path {
  stroke: currentColor;
  stroke-width: .65;
}
svg.home__svg {
  stroke: currentColor;
  stroke-width: 2;
}

.weblist.footer>.wrapper__footer>.item>.top>svg.home, .weblist.footer>.wrapper__footer>.item>.top>svg.login {
    width: .5rem;
}

.auth_btn {
    display: flex;
    gap: .2rem;
}
.btn {
    display: flex;
    align-items: center;
    --btn-login-background: var(--skin__primary);
    --btn-login-color: var(--skin__text_primary);
    --btn-login-margin: 0 .15rem 0 0;
    --btn-register-background: transparent;
    --btn-register-color: var(--skin__primary);
    --btn-width: 1.36rem;
    --btn-height: .52rem;
    --btn-font-size: .252rem!important;
    text-align: center;
    justify-content: center;
    --btn-border-color: var(--skin__primary);
    cursor: pointer;
}
.wrapper__footer>div.item>div.bottom {
    font-size: .2463rem;
    line-height: 1.65;
}
.btn_primary {
width: var(--btn-width);
    height: var(--btn-height);
    padding: 0 .1rem;
    font-size: var(--btn-font-size);
    white-space: pre-wrap;
    background-color: var(--skin__primary);
    border: thin solid var(--btn-border-color);
    color: var(--skin__text_primary);
    border-radius: .1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    word-wrap: break-word;
}

.btn_secondary {
    background-color: transparent;
    color: var(--skin__primary)!important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1;
    --btn-font-size: .252rem;
    font-size: var(--btn-font-size);
    color: var(--skin__text_primary);
    border-radius: .1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    word-wrap: break-word;
}
a.logo {
    max-width: .8rem;
}
.weblist.header>.logo {
    display: flex; 
    align-items: center;
    justify-content: center;
    height: .9827rem;
    max-width: 3.63rem;
    width:80
}
._icon-wrap_18b1j_39 { 
    height: 100%;
    display: flex;
    align-items: center;
    width: .5rem;
}
.sideBar__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: .35rem;
}

.sideBar__wrapper {
    position: relative;
    height: 100%;
    width: 5rem;
    background-color: var(--skin__bs_zc_bg);
}
.sideBar__header__wrapper {
    display: flex;
    justify-content: space-between;
    padding: .1333rem;
}
.main__sideBar {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    max-width: 11.2rem;
    bottom: 0;
    right: 0;
    background: #00000073;
    z-index: 9999;
}

.logo__wrapper {
    display: flex;
    align-items: center;
    gap: .1333rem;
}
.game-card {  
    min-width: 2.85rem;
    min-height: 2.85rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}
.game-name>span {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--chakra-line-clamp);
    --chakra-line-clamp: 1;
    width: 70px;
    text-align: center;
    overflow: hidden;
    white-space: normal;
}
.game-info {
    width: 100%;
}

.gameImage { 
    overflow: hidden; 
    width: 100%;
    height: 100%;
    border-radius: .2rem;
}
.weblist.header>.logo > img.logo_img {
    object-fit: contain;
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
} 
.btn.close_btn {
    width: .5rem;
    height: .5rem;
    border: 2px solid #999;
    border-radius: 50%;
    align-items: center;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative;
    top: .15rem;
}
span.close_txt {
    width: 100%;
    height: 100%;
    position: relative;
    top: -3px;
}

form#login_form, form#register_form {
    padding: .35rem;
    display: flex;
    flex-flow: column;
    gap: .3rem;
    padding-bottom: 0;
}
.modal_footer {
    display: flex;
    flex-grow: 0;
    padding: 0 .5rem .5rem;
}

.zoomIn {
    animation: zoomIn 0.1s ease;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        transform: scale(0.5);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
 
.sideBar__wrapper .slideIn { 
    animation: slideIn 0.3s forwards;
}
.slideIn { 
    animation: slideIn 0.3s ease;
}

span.username, .balance {
    line-height: 1.5;
}
.user_data {
    display: flex;
    flex-flow: column;
    text-align: end;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0.5;
    } 
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
.hidden {
    animation: slideOut 0.3s ease!important;
}

@keyframes slideOut {
    0% {
        transform: translateX(0%);
        opacity: 1;
    } 
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}