@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 100;
    src: url(/_nuxt/fonts/NotoSansThai-Thin.784b151.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 200;
    src: url(/_nuxt/fonts/NotoSansThai-ExtraLight.9be389d.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 300;
    src: url(/_nuxt/fonts/NotoSansThai-Light.540e4cd.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400;
    src: url(/_nuxt/fonts/NotoSansThai-Regular.cbc159a.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 500;
    src: url(/_nuxt/fonts/NotoSansThai-Medium.fcb354a.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 600;
    src: url(/_nuxt/fonts/NotoSansThai-SemiBold.743c8f7.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 700;
    src: url(/_nuxt/fonts/NotoSansThai-Bold.0192a35.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 800;
    src: url(/_nuxt/fonts/NotoSansThai-ExtraBold.a48297a.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Thai;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 900;
    src: url(/_nuxt/fonts/NotoSansThai-Black.1191a98.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 100;
    src: url(/_nuxt/fonts/Roboto-Thin.c38fab2.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 200;
    src: url(/_nuxt/fonts/Roboto-ExtraLight.0cea398.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 300;
    src: url(/_nuxt/fonts/Roboto-Light.0cea398.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400;
    src: url(/_nuxt/fonts/Roboto-Regular.03523cf.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 500;
    src: url(/_nuxt/fonts/Roboto-Medium.13a2922.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 600;
    src: url(/_nuxt/fonts/Roboto-SemiBold.4f39c57.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 700;
    src: url(/_nuxt/fonts/Roboto-Bold.4f39c57.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 800;
    src: url(/_nuxt/fonts/Roboto-ExtraBold.4f39c57.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 900;
    src: url(/_nuxt/fonts/Roboto-Black.1224b64.ttf) format("truetype");
    unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc, u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

.v-application,
body {
    font-family: Noto Sans Thai, Roboto !important;
    font-size: 14px !important;
    touch-action: pan-y
}

.v-application p {
    margin-bottom: 0 !important
}

.theme-color-1 {
    color: var(--theme-color-1) !important
}

.ql-align-right {
    text-align: right
}

.ql-align-center {
    text-align: center
}

.ql-align-left {
    text-align: left
}

.nodec {
    -webkit-text-decoration: none !important;
    text-decoration: none !important
}

.hide-livechat-main {
    display: none !important
}

.white-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
    color: #000;
    padding: 16px !important;
    text-align: center
}

@media screen and (max-width:600px) {
    .white-box {
        padding: 8px !important
    }
}

.btn-pri {
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%) !important;
    border-radius: 12px !important;
    color: var(--primary-font-color) !important;
    font-weight: 600 !important
}

.btn-pri:disabled {
    opacity: .7
}

.btn-sec {
    background: linear-gradient(180deg, var(--secondary-color-1) 0, var(--secondary-color-2) 100%) !important;
    border-radius: 12px !important;
    color: var(--secondary-font-color) !important;
    font-weight: 600 !important
}

.btn-sec:disabled {
    opacity: .7
}

.title-text-bonus {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--theme-font-color-1) 0, var(--theme-font-color-2) 100%);
    -webkit-background-clip: text;
    background-clip: text
}

.theme--dark.v-application {
    background: #121212 !important
}

.v-main__wrap {
    padding-top: 90px !important
}

.text-number {
    font-family: Roboto, sans-serif
}

.default_transition-enter-active {
    animation: coming 1.5s;
    opacity: 0
}

@keyframes coming {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.bg-secondary-color-2 {
    background-color: var(--secondary-color-2) !important
}

.height-overflow {
    height: 20rem;
    overflow-y: auto;
    padding-bottom: 3rem
}

.height-overflow-ranking {
    height: 25rem;
    overflow-y: auto;
    padding-bottom: 3rem
}

.v-input__prepend-inner {
    margin: auto 0 !important
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

#wrap-otp-input {
    display: flex;
    justify-content: center;
    margin-top: .5rem
}

#wrap-otp-input span {
    color: hsla(0, 0%, 100%, .08)
}

.otp-input {
    background-color: hsla(0, 0%, 100%, .08);
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    margin: 0 5px;
    outline: none;
    padding: 5px;
    text-align: center;
    width: 50px
}

.otp-input.error {
    border: 2px solid red !important
}

.Vue-Toastification__toast-body {
    font-family: Noto Sans Thai, Roboto !important;
    font-size: 14px !important
}

@media only screen and (max-width:600px) {

    .Vue-Toastification__container.top-center,
    .Vue-Toastification__container.top-left,
    .Vue-Toastification__container.top-right {
        padding: 1rem
    }

    .Vue-Toastification__container .Vue-Toastification__toast {
        border-radius: 8px
    }
}

.x-page-main {
    margin: auto;
    max-width: 1200px !important;
    padding-top: 70px;
    width: 100%
}

.v-expansion-panel {
    background-color: transparent !important;
    border: 1px solid hsla(0, 0%, 100%, .12)
}

.wrap-container {
    display: flex;
    /* height: 100%; */
    padding-bottom: 100px;
    z-index: 1
}

.wrap-container .item-side-bar {
    width: 200px
}

.wrap-container .item-content {
    margin: auto;
    padding: 0 .5rem;
    width: 100%
}

@media(max-width:960px) {
    .wrap-container {
        padding-bottom: 0
    }

    .wrap-container .item-side-bar {
        display: none
    }

    .wrap-container .item-content {
        width: 100%
    }
}

.navbar-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    margin-bottom: .5rem;
    width: 100%
}

.navbar-header .wrap-header {
    display: flex;
    height: 70px;
    justify-content: space-between;
    overflow: hidden;
    padding: 5px .5rem;
    position: relative;
    width: 100%;
    z-index: 10;
    z-index: 6
}

.navbar-header .wrap-header.fix-position {
    left: 0;
    position: fixed;
    top: 0;
    transition: all 1s linear
}

.navbar-header .wrap-header .wrap-logo {
    display: flex;
    margin: auto 0
}

.navbar-header .wrap-header .wrap-logo #logo-image {
    cursor: pointer;
    display: block;
    height: auto;
    max-height: 60px;
    max-width: 110px;
    -o-object-fit: contain;
    object-fit: contain
}

.navbar-header .wrap-header .wrap-content {
    align-items: center;
    display: flex;
    margin: auto 0;
    width: auto
}

.navbar-header .wrap-header .menu-button {
    display: flex;
    flex-wrap: nowrap;
    margin: auto 0;
    padding-right: .5rem
}

.navbar-header .wrap-header .menu-button button {
    margin-right: .5rem
}

.navbar-header .wrap-header .menu-button.banker {
    display: block
}

.navbar-header .wrap-header .profile-content {
    display: flex;
    flex-wrap: nowrap;
    padding-right: .5rem
}

.navbar-header .wrap-header .profile-content .item-container {
    display: flex
}

.navbar-header .wrap-header .profile-content .item-container:first-child .item,
.navbar-header .wrap-header .profile-content .item-container:nth-child(2) .item {
    align-items: center;
    background-color: #fff;
    border-radius: 30px;
    color: #000;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 8px;
    justify-content: space-around;
    margin: 2px;
    padding: .275rem
}

.navbar-header .wrap-header .profile-content .item-container:first-child .item img,
.navbar-header .wrap-header .profile-content .item-container:nth-child(2) .item img {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .658));
    height: 25px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 25px
}

.navbar-header .wrap-header .profile-content .item-container:first-child .item button,
.navbar-header .wrap-header .profile-content .item-container:nth-child(2) .item button {
    background: none !important;
    box-shadow: none !important;
    height: 20px;
    width: 20px
}

.navbar-header .wrap-header .profile-content .item-container:first-child .item button .v-btn__loader,
.navbar-header .wrap-header .profile-content .item-container:first-child .item button i,
.navbar-header .wrap-header .profile-content .item-container:nth-child(2) .item button .v-btn__loader,
.navbar-header .wrap-header .profile-content .item-container:nth-child(2) .item button i {
    color: #7a7a7a !important;
    font-size: 18px
}

.navbar-header .wrap-header .profile-content .item-container:first-child .item:first-child,
.navbar-header .wrap-header .profile-content .item-container:nth-child(2) .item:first-child {
    margin-right: .5rem
}

.navbar-header .wrap-header .profile-content .x-itemprofile {
    background: linear-gradient(180deg, #d3d3d3, #ebedf0 51.04%, #fff);
    border-radius: 20px;
    color: #212121;
    font-weight: 700;
    margin: 2px;
    padding: 5px .5rem;
    position: relative
}

.navbar-header .wrap-header .profile-content .x-itemprofile .x-item {
    display: flex
}

.navbar-header .wrap-header .profile-content .x-itemprofile .x-item img {
    height: 25px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 25px
}

.navbar-header .wrap-header .profile-content .x-itemprofile .x-item button {
    background: none !important;
    box-shadow: none !important;
    height: 20px;
    width: 20px
}

.navbar-header .wrap-header .profile-content .x-itemprofile .x-item button .v-btn__loader,
.navbar-header .wrap-header .profile-content .x-itemprofile .x-item button i {
    color: #212121;
    font-size: 18px
}

.navbar-header .wrap-header .menu-content {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: auto 0;
    padding: 0 1.5rem;
    position: relative;
    top: -5px
}

.navbar-header .wrap-header .menu-content li {
    margin: 0 5px;
    padding-left: 0 !important
}

.navbar-header .wrap-header .menu-content li .nav-link {
    align-items: center;
    background: transparent;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    height: calc(100% + 15px);
    justify-content: center;
    min-width: 80px;
    padding: 5px 0;
    position: relative;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    top: -5px;
    transition: .3s
}

.navbar-header .wrap-header .menu-content li .nav-link.active,
.navbar-header .wrap-header .menu-content li .nav-link:hover {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    color: #4b4b4b;
    font-weight: 700
}

.navbar-header .wrap-header .menu-content li img {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .823));
    height: 35px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 35px
}

.navbar-header .wrap-header .menu-content li img.animate {
    animation: rubberBand 1s ease-in-out infinite alternate both
}

.navbar-header .wrap-header .menu-content li .text-wrap {
    text-align: center
}

.navbar-header .wrap-banner {
    height: 100%;
    position: relative;
    width: 100%
}

.navbar-header .wrap-banner.add-padd-top {
    padding-top: 70px
}

@media(max-width:960px) {
    .navbar-header .wrap-header .menu-content {
        display: none
    }

    .navbar-header .wrap-header .menu-button {
        padding-right: 0
    }

    .navbar-header .wrap-header .menu-button.banker {
        display: none
    }

    .navbar-header .wrap-banner {
        width: 100%
    }
}

@media screen and (max-width:425px) {
    .navbar-header .wrap-header {
        height: 65px
    }

    .navbar-header .wrap-header .menu-content {
        display: none
    }

    .navbar-header .wrap-header .menu-button {
        padding-right: 0
    }

    .navbar-header .wrap-header .menu-button button {
        font-size: 12px !important;
        padding: 0 !important;
        width: 80px !important
    }

    .navbar-header .wrap-header .menu-button.banker {
        display: none
    }

    .navbar-header .wrap-header .wrap-logo img {
        width: 50px
    }

    .navbar-header .wrap-banner {
        width: 100%
    }

    .navbar-header .wrap-banner.add-padd-top {
        padding-top: 65px
    }
}

#header-line-contact {
    cursor: pointer;
    padding-right: .5rem
}

@media screen and (max-width:425px) {
    #header-line-contact {
        padding-right: 0
    }
}

#header-line-contact img {
    height: 50px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 50px
}

#header-sidebar-burger img {
    max-width: 35px;
    width: 100%
}

@media(max-width:600px)and (max-width:425px) {
    #header-sidebar-burger img {
        width: 25px
    }
}

@media(max-width:600px) {
    #header-line-contact {
        display: none
    }

    #header-line-contact img {
        height: 55px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 55px
    }
}

@media(max-width:600px)and (max-width:425px) {
    #header-line-contact img {
        height: 35px;
        width: 35px
    }
}

.sidebar-menu-contain {
    margin: 1rem
}

.sidebar-menu-contain .close-icon {
    align-items: center;
    color: #fff !important;
    cursor: pointer;
    display: flex;
    justify-content: flex-end
}

.sidebar-menu-contain .close-icon i {
    color: #fff !important
}

.sidebar-menu-contain .profile-content {
    display: flex;
    flex-direction: column
}

.sidebar-menu-contain .profile-content .item-container:first-child .item {
    border-radius: 60px 8px 8px 60px;
    color: #212121;
    display: flex;
    font-weight: 700;
    gap: 4px;
    margin: .5rem auto;
    padding: 1rem;
    position: relative;
    text-align: right
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .icon-profile {
    margin: 0;
    -o-object-fit: contain;
    object-fit: contain;
    width: 60px
}

.sidebar-menu-contain .profile-content .item-container:first-child .item img {
    -o-object-fit: contain;
    object-fit: contain
}

.sidebar-menu-contain .profile-content .item-container:first-child .item button {
    background: none !important;
    box-shadow: none !important;
    height: 20px;
    width: 20px
}

.sidebar-menu-contain .profile-content .item-container:first-child .item button .v-btn__loader,
.sidebar-menu-contain .profile-content .item-container:first-child .item button i {
    color: #212121;
    font-size: 18px
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .show-username-container {
    width: 70%
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .show-username-container .profile-id {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 16px
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .show-username-container .profile-info-head {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .show-username-container .profile-info-head p {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .show-username-container .profile-info-head span {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
    -webkit-background-clip: text;
    background-clip: text
}

.sidebar-menu-contain .profile-content .item-container:first-child .item .show-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px
}

.sidebar-menu-contain .profile-content .item-container:first-child .bg-profile-white {
    background-color: #fff !important
}

.sidebar-menu-contain .profile-content .item-container:first-child .line-header {
    background: linear-gradient(180deg, #d3d3d3, #ebedf0 51.04%, #fff);
    height: 1px;
    margin-top: 1rem;
    width: 100%
}

.sidebar-menu-contain .menu-content .item-menu {
    background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
    border-radius: 8px;
    color: #fff;
    display: flex;
    margin: 1rem 0;
    padding: 5px 0
}

.sidebar-menu-contain .menu-content .item-menu img {
    height: 28px;
    margin: 0 1rem;
    width: 28px
}

.sidebar-menu-contain .menu-content .item-menu span {
    margin: auto 0
}

.sidebar-menu-contain .menu-content .dowload_app img {
    height: auto;
    margin: auto 0;
    padding: 5px 5px 0;
    width: 100%
}

.sidebar-menu-contain .menu-content .dowload_app a img {
    height: auto;
    margin-top: 5px;
    width: 100%
}

.t-sidebar-footer {
    font-size: 13px;
    padding: 1rem;
    position: sticky;
    text-align: center
}

.menu-side-bar {
    left: 0;
    padding: 0 1rem 1rem;
    width: 250px
}

.menu-side-bar .nav-menu-side-bar .nav-side-bar-menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0
}

.menu-side-bar .nav-item {
    margin-top: 1rem;
    width: 100%
}

.menu-side-bar .nav-item .nav-link {
    align-items: center;
    background: linear-gradient(180deg, #38d851, #0f6a00);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .75);
    color: hsla(0, 0%, 100%, .8);
    display: flex;
    justify-content: flex-start;
    padding: .75rem .5rem;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .4s;
    width: 100%
}

.menu-side-bar .nav-item .nav-link:before {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    border-radius: 8px;
    bottom: 0;
    content: " ";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    inset: 0 0 0 0;
    transform: scaleX(0);
    transform-origin: top right;
    transition: transform .3s ease;
    z-index: 0
}

.menu-side-bar .nav-item .nav-link.active,
.menu-side-bar .nav-item .nav-link:hover {
    color: #f2f2f2
}

.menu-side-bar .nav-item .nav-link.active img,
.menu-side-bar .nav-item .nav-link:hover img {
    mix-blend-mode: normal;
    transform: scale(1.4)
}

.menu-side-bar .nav-item .nav-link.active:before,
.menu-side-bar .nav-item .nav-link:hover:before {
    transform: scaleX(1);
    transform-origin: top right
}

.menu-side-bar .nav-item .nav-link.active .text-wrap,
.menu-side-bar .nav-item .nav-link:hover .text-wrap {
    color: #212121;
    font-weight: 700
}

.menu-side-bar .nav-item .nav-link.active .v-icon,
.menu-side-bar .nav-item .nav-link:hover .v-icon {
    color: #212121
}

.menu-side-bar .nav-item .nav-link:after {
    background: hsla(0, 0%, 100%, .3);
    border-radius: 0 20px 20px 0;
    content: "";
    height: 55%;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    width: 3px
}

.menu-side-bar .nav-item .nav-link img {
    filter: drop-shadow(0 0 5px #000);
    height: 50px;
    -o-object-fit: contain;
    object-fit: contain;
    transition: all .2s ease-in-out;
    width: 50px;
    z-index: 2
}

.menu-side-bar .nav-item .nav-link .text-wrap {
    display: flex;
    flex-direction: column;
    margin-left: .75rem;
    z-index: 2
}

.menu-side-bar .nav-item .nav-link .text-wrap span:first-child {
    font-size: 15px;
    font-weight: 700
}

.menu-side-bar .sub-side-bar {
    background: rgba(0, 0, 0, .7);
    border-radius: 10px;
    opacity: 0;
    padding: 0 !important;
    transition: visibility .2s linear, opacity .2s linear;
    visibility: hidden;
    z-index: 5
}

.menu-side-bar .sub-side-bar.show {
    opacity: 1;
    visibility: visible
}

.menu-side-bar .sub-side-bar li {
    list-style: none;
    padding-left: 0 !important
}

.menu-side-bar .sub-side-bar .nav-sub-item {
    border-radius: 10px;
    cursor: pointer;
    height: 60px;
    width: 100%
}

.menu-side-bar .sub-side-bar .nav-sub-item.active,
.menu-side-bar .sub-side-bar .nav-sub-item:hover {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09)
}

.menu-side-bar .sub-side-bar .nav-sub-item.active img,
.menu-side-bar .sub-side-bar .nav-sub-item:hover img {
    filter: drop-shadow(0 0 2px #212121)
}

.menu-side-bar .sub-side-bar img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 5px;
    width: 100%
}

@media(max-width:960px) {
    .menu-side-bar {
        padding: 0;
        width: 100%
    }

    .menu-side-bar .nav-side-bar-menu {
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 100%;
        white-space: nowrap;
        width: 100%
    }

    .menu-side-bar .nav-item {
        margin-bottom: .5rem;
        margin-top: 0;
        padding: 0 3px;
        width: 25%
    }

    .menu-side-bar .nav-item .nav-link {
        display: flex;
        flex-direction: column;
        padding: 0
    }

    .menu-side-bar .nav-item .nav-link .v-icon {
        display: none
    }

    .menu-side-bar .nav-item .nav-link.active img,
    .menu-side-bar .nav-item .nav-link:hover img {
        transform: scale(1.1)
    }

    .menu-side-bar .nav-item .nav-link img {
        filter: drop-shadow(0 0 5px #000);
        height: 50px;
        -o-object-fit: contain;
        object-fit: contain;
        transition: all .2s ease-in-out;
        width: 50px;
        z-index: 2
    }

    .menu-side-bar .nav-item .nav-link .text-wrap {
        display: flex;
        flex-direction: column;
        margin-left: 0
    }

    .menu-side-bar .nav-item .nav-link .text-wrap span:first-child {
        display: none;
        font-size: 14px
    }

    .menu-side-bar .nav-item .nav-link .text-wrap span:nth-child(2) {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%
    }

    .menu-side-bar .sub-side-bar {
        height: 100vh;
        left: .5rem;
        margin-top: 80px;
        overflow-y: scroll;
        position: absolute;
        width: 60px
    }

    .menu-side-bar .sub-side-bar::-webkit-scrollbar {
        display: none
    }

    .menu-side-bar .sub-side-bar.pokdeng {
        margin-top: 80px
    }

    .menu-side-bar .sub-side-bar .nav-sub-item {
        height: 50px
    }

    .menu-side-bar .sub-side-bar img {
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        padding: 0;
        width: 100%
    }
}

.text-card-title {
    -webkit-text-fill-color: transparent !important;
    text-fill-color: transparent !important;
    background: linear-gradient(180deg, #7690ff, #4767f0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important
}

.border-radius-1 {
    border-radius: 1.2rem !important
}

.v-data-table__wrapper {
    background: #fff;
    border-radius: 8px
}

.v-application--is-ltr .v-data-table>.v-data-table__wrapper>table>thead>tr>th {
    text-align: center
}

.v-application--is-ltr .v-text-field .v-label {
    color: #000
}

.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
    border-radius: 8px
}

.v-dialog__content .v-dialog .theme--dark.v-card .v-image .v-image__image {
    border-radius: 1rem !important
}

.btn-primary {
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%);
    color: var(--primary-font-color) !important
}

.d-flex {
    display: inline-flex !important
}

.w-100 {
    width: 100% !important
}

.h-100 {
    height: 100% !important
}

.v-list-item__content>:not(:last-child) {
    margin-bottom: 0
}

.all-btn {
    border-radius: 8px !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    transition: all .2s cubic-bezier(.02, .54, .58, 1)
}

.all-btn.color-sec {
    background: linear-gradient(180deg, var(--secondary-color-1) 0, var(--secondary-color-2) 100%) !important;
    color: var(--secondary-font-color) !important
}

.all-btn.color-pri {
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%) !important;
    color: var(--primary-font-color) !important;
    font-weight: 600 !important
}

.all-btn.color-login {

    background: linear-gradient(180deg, var(--secondary-color-1) 0, var(--secondary-color-2) 100%);
    color: var(--secondary-font-color);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    font-weight: 700
}

.all-btn.sq {
    border-radius: 5px !important
}

.all-btn.color1 {
    background: linear-gradient(180deg, #8be0ff, #009dd8)
}

.all-btn.color1,
.all-btn.color2 {
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    color: #212121 !important;
    font-weight: 700
}

.all-btn.color2 {
    background: linear-gradient(180deg, #ffe45e, #e0710a)
}

.all-btn.color3 {
    background: linear-gradient(180deg, #e49b8e, #ff7057);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    font-weight: 700
}

.all-btn.color3.active {
    background: linear-gradient(180deg, #8be0ff, #0582e6)
}

.all-btn.color-line {
    background: linear-gradient(180deg, #00ca14, #02720d) !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    color: #fff !important
}

.all-btn:disabled {
    opacity: .5 !important;
    text-shadow: 0 0 #000
}

.all-btn.animate {
    animation: pulse 1s ease-in infinite alternate
}

.all-btn.animate1 {
    animation: rubberBand 3s ease-in-out infinite alternate both
}

.all-btn.animate2 {
    animation: shadow-drop-center 1s ease-in-out infinite alternate both
}

.all-btn:hover {
    box-shadow: 0 1px 10px 1px rgba(0, 0, 0, .7) !important;
    transform: translate3d(0, -5px, 0)
}

.color-orange {
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%) !important
}

@media screen and (max-width:425px) {
    .v-btn__content {
        font-size: 12px
    }
}

.btn-game-box {
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center
}

.btn-game-box .game-btn {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    z-index: 4 !important
}

@media screen and (max-width:425px) {
    .btn-game-box .game-btn {
        font-size: 12px;
        height: 28px !important;
        margin-right: 6px !important;
        width: 70px !important
    }
}

@media screen and (max-width:600px) {
    .btn-game-box .game-btn {
        margin-right: 16px
    }
}

@media screen and (max-width:425px) {
    .v-card__text {
        padding: 8px
    }
}

.v-navigation-drawer {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px
}

.dialog-container {
    height: 100% !important;
    overflow: hidden;
    position: relative;
    width: 100% !important
}

.v-dialog {
    background: var(--theme-color-1);
    border-radius: 15px !important;
    box-shadow: none !important;
    overflow-y: hidden;
    position: relative !important
}

.v-dialog__content {
    padding: 0 10px !important
}

@media screen and (max-width:600px) {
    .v-dialog__content {
        padding: 0 10px
    }
}

.v-overlay--active .v-overlay__scrim {
    background-color: #000 !important;
    border-color: #000 !important;
    opacity: .8 !important
}

@media(max-width:960px) {
    .v-dialog {
        border: none;
        margin: 0 6px;
        position: absolute
    }

    .v-dialog.x-middle {
        border-radius: 24px !important;
        bottom: auto !important;
        position: static !important
    }

    .v-dialog__content {
        padding: 0 10px
    }
}

::-webkit-scrollbar {
    height: 6px;
    width: 6px
}

.mobile-brand ::-webkit-scrollbar {
    height: 0;
    width: 0
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 100%, .3);
    border-radius: 12px;
    outline: 1px solid #708090;
    outline: none
}

.card-game-xl {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem
}

.card-game-xl .item-card {
    padding: .5rem;
    position: relative;
    width: 10%
}

.card-game-xl .card {
    height: auto;
    position: relative;
    width: 100%;
    z-index: 2
}

.card-game-xl .card img {
    border-radius: 10px;
    filter: drop-shadow(3px 3px 3px #000);
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.card-game-xl .card .card-overlay {
    align-items: center;
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    height: 100%;
    justify-content: space-between;
    left: 0;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 0;
    white-space: pre;
    width: 100%;
    z-index: 3
}

.card-game-xl .card .card-overlay .highlight {
    font-size: 20px;
    font-weight: 700
}

.card-game-xl .card .card-overlay.color1 {
    background: linear-gradient(90.89deg, #ff603d 1.44%, rgba(255, 184, 0, .58) 47.22%, hsla(0, 0%, 100%, .15) 90.22%)
}

.card-game-xl .card .card-overlay.color2 {
    background: linear-gradient(90.63deg, rgba(56, 216, 81, .9) .96%, rgba(15, 106, 0, .522) 45.89%, hsla(0, 0%, 100%, .18) 90.82%)
}

.card-game-xl .card .card-overlay.color3 {
    background: linear-gradient(90.64deg, rgba(233, 37, 37, .9) 1.1%, rgba(106, 0, 96, .522) 47.15%, hsla(0, 0%, 100%, .18) 90.41%)
}

.card-game-xl .card .card-overlay.color-green {
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%)
}

.card-game-xl .card .card-hover {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: .5rem 0;
    position: absolute;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: visibility .2s, opacity .2s linear;
    visibility: hidden;
    width: 70%;
    z-index: 2
}

.card-game-xl .card .card-hover,
.card-game-xl .card .card-hover:hover {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    color: #212121
}

.card-game-xl .card:hover:after {
    background: rgba(0, 0, 0, .1);
    border-radius: 18px;
    bottom: 0;
    color: #212121;
    content: "";
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1
}

.card-game-xl .card:hover img {
    filter: grayscale(.5) contrast(1.1);
    mix-blend-mode: soft-light;
    transform: rotateY(180deg);
    transition: all .7s
}

.card-game-xl .card:hover .card-hover {
    display: block;
    opacity: 1;
    visibility: visible
}

@media(max-width:1264px) {
    .card-game-xl .item-card {
        width: 12.5%
    }
}

@media(max-width:960px) {
    .card-game-xl .item-card {
        padding: .5rem 5px;
        width: 16.66%
    }

    .card-game-xl .card img {
        border-radius: 8px
    }

    .card-game-xl .card .card-overlay {
        border-radius: 8px;
        font-size: 13px
    }

    .card-game-xl .card .card-overlay .highlight {
        font-size: 14px;
        font-weight: 700
    }

    .card-game-xl .card .card-hover {
        font-size: 14px;
        font-weight: 400;
        padding: .5rem 0;
        white-space: nowrap;
        width: 85%
    }

    .card-game-xl .card:hover:after {
        border-radius: 8px
    }
}

@media(max-width:600px) {
    .card-game-xl .item-card {
        width: 25%
    }
}

.card-game-xl-slide {
    display: flex;
    flex-wrap: wrap;
    margin-top: .5rem;
    overflow: auto;
    overflow-y: hidden;
    width: 100%
}

.card-game-xl-slide .item-card {
    padding: .5rem 5px;
    position: relative;
    width: 9%
}

.card-game-xl-slide .card {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 2
}

.card-game-xl-slide .card img {
    border-radius: 10px;
    filter: drop-shadow(3px 3px 3px #000);
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill;
    width: 100%
}

.card-game-xl-slide .card .card-overlay {
    align-items: center;
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    height: 100%;
    justify-content: space-between;
    left: 0;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 0;
    white-space: pre;
    width: 100%;
    z-index: 3
}

.card-game-xl-slide .card .card-overlay .highlight {
    font-size: 20px;
    font-weight: 700
}

.card-game-xl-slide .card .card-overlay.color1 {
    background: linear-gradient(180deg, rgba(224, 136, 255, .9), rgba(145, 4, 211, .9))
}

.card-game-xl-slide .card .card-overlay.color2,
.card-game-xl-slide .card .card-overlay.color3 {
    background: linear-gradient(90.89deg, #ff603d 1.44%, rgba(255, 184, 0, .58) 47.22%, hsla(0, 0%, 100%, .15) 90.22%)
}

.card-game-xl-slide .card .card-overlay.color4 {
    background: linear-gradient(90.63deg, rgba(56, 216, 81, .9) .96%, rgba(15, 106, 0, .522) 45.89%, hsla(0, 0%, 100%, .18) 90.82%)
}

.card-game-xl-slide .card .card-overlay.color5 {
    background: linear-gradient(90.64deg, rgba(233, 37, 37, .9) 1.1%, rgba(106, 0, 96, .522) 47.15%, hsla(0, 0%, 100%, .18) 90.41%)
}

.card-game-xl-slide .card .card-hover {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700 !important;
    left: 50%;
    opacity: 0;
    padding: .5rem 0;
    position: absolute;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: visibility .2s, opacity .2s linear;
    visibility: hidden;
    width: 70%;
    z-index: 2
}

.card-game-xl-slide .card .card-hover,
.card-game-xl-slide .card .card-hover:hover {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    color: #212121
}

.card-game-xl-slide .card:hover:after {
    background: rgba(0, 0, 0, .1);
    border-radius: 18px;
    bottom: 0;
    color: #212121;
    content: "";
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1
}

.card-game-xl-slide .card:hover img {
    filter: grayscale(.5) contrast(1.1);
    mix-blend-mode: soft-light;
    transform: rotateY(180deg);
    transition: all .7s
}

.card-game-xl-slide .card:hover .card-hover {
    display: block;
    opacity: 1;
    visibility: visible
}

.card-game-xl-slide::-webkit-scrollbar {
    display: none
}

@media(max-width:960px) {
    .card-game-xl-slide {
        flex-wrap: nowrap
    }

    .card-game-xl-slide .item-card {
        min-width: 100px;
        padding: .5rem 5px;
        position: relative
    }

    .card-game-xl-slide .card {
        height: 100%;
        width: 100%
    }

    .card-game-xl-slide .card .card-overlay {
        border-radius: 8px;
        font-size: 13px
    }

    .card-game-xl-slide .card .card-overlay .highlight {
        font-size: 14px;
        font-weight: 700
    }

    .card-game-xl-slide .card .card-hover {
        font-size: 14px;
        font-weight: 400;
        padding: .5rem 0;
        white-space: nowrap;
        width: 85%
    }
}

.dailog-header {
    margin: auto;
    position: relative;
    text-align: center
}

.dailog-header h1 {
    font-size: 18px !important
}

.dailog-header .close {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%)
}

.dailog-header .theme--dark.v-input input {
    color: red !important
}

.v-text-field--outlined fieldset {
    border-color: #cdcdcd !important
}

.v-application--is-ltr .v-input--selection-controls__input {
    margin-right: 4px
}

.v-input--has-state.error--text .v-label,
.v-text-field--outlined.v-input--dense .v-label {
    color: #c1c1c1 !important
}

.v-menu__content {
    left: 371px
}

.theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: #000;
    gap: 10px
}

.v-list {
    background: #fff !important;
    padding: 8px !important
}

.v-list .v-list-item {
    height: 46px !important;
    padding: 0 10px !important
}

.v-list .v-list-item:hover {
    background: #c2daff !important
}

.v-list-item__content {
    color: #000 !important
}

.v-text-field--filled.v-input--dense.v-text-field--single-line .v-label {
    top: 12px
}

@media screen and (max-width:600px) {
    .v-text-field--filled.v-input--dense.v-text-field--single-line .v-label {
        font-size: 14px
    }
}

.theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    background: #fff !important
}

.theme--dark.v-list-item:hover,
.theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled):hover {
    background: #c2daff !important;
    border-radius: 8px !important
}

.theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled):hover:before {
    background: #fff !important
}

.v-text-field--outlined,
.v-text-field--solo {
    border-radius: 8px
}

.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
    color: #c1c1c1 !important
}

.v-icon.v-icon,
.v-text-field.v-text-field--solo .v-input__append-inner {
    color: #c1c1c1
}

.form-input-formcontrol.v-input__icon,
.v-input__icon--append {
    color: #c1c1c1 !important;
    top: 0 !important
}

.theme--dark.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot fieldset {
    color: #c7c7c7
}

.v-text-field.v-text-field--solo .v-input__control {
    min-height: 45px !important
}

.theme--dark.v-input input {
    color: #000 !important
}

.theme--dark.v-select .v-select__selections {
    gap: 10px
}

.alert-show.theme--dark.v-select .v-select__selections,
.theme--dark.v-select .v-select__selections {
    color: #000 !important
}

.v-select:not(.v-select--is-multi).v-text-field--single-line .v-select__selections img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 30px !important
}

.v-text-field.v-text-field--enclosed .v-text-field__details {
    margin-bottom: 0 !important;
    padding-top: 0 !important
}

.form-input-password {
    margin-top: 0;
    position: relative
}

@media screen and (max-width:425px) {
    .form-input-password {
        padding: 0
    }
}

.form-input-password .forgot-pass-action {
    bottom: 0;
    color: #fff;
    position: absolute;
    right: 1.5rem;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.login-checkbox {
    margin-top: 0 !important;
    padding-top: 0 !important
}

@media screen and (max-width:600px) {
    .login-checkbox {
        font-size: 14px;
        padding: 0 12px
    }
}

@media screen and (max-width:425px) {
    .login-checkbox {
        padding: 0
    }
}

.login-checkbox .v-input__slot {
    background: none !important;
    margin-bottom: 0 !important
}

.login-checkbox .theme--dark.v-label,
.login-checkbox .v-icon.v-icon {
    color: var(--primary-font-color) !important
}

.login-checkbox .theme--dark.v-label {
    font-weight: 600
}

@media screen and (max-width:600px) {
    .login-checkbox .theme--dark.v-label {
        font-size: 14px
    }
}

.forgot-pass-action-form {
    color: #fff;
    font-size: 16px;
    padding-right: 16px;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

@media screen and (max-width:425px) {
    .forgot-pass-action-form {
        font-size: 14px;
        padding-right: 0 !important
    }
}

.overflow-x-auto {
    overflow-x: auto
}

.input-seven {
    border-radius: 12px;
    padding: 0 !important
}

.box-history-btn {
    align-items: center;
    display: flex;
    transition: .25s
}

.box-history-btn:hover {
    box-shadow: 0 5px 10px 1px rgba(0, 0, 0, .5);
    transform: translateY(-5px)
}

.dailog-submit-btn {
    background: linear-gradient(180deg, #3ad83a, #539100);
    border-radius: 12px;
    width: 100% !important
}

.dailog-submit-btn:hover {
    box-shadow: 0 5px 10px 1px rgba(0, 0, 0, .5);
    transform: translateY(-5px)
}

.dailog-notuser-register {
    color: #fff !important;
    margin-bottom: 1rem;
    text-align: center
}

.dailog-notuser-register a {
    color: #fff !important;
    font-size: 17px;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.dailog-call-center {
    color: #fff !important;
    display: flex;
    margin-bottom: 1rem;
    text-align: center
}

.dailog-call-center a {
    display: flex;
    font-size: 14px;
    -webkit-text-decoration: none;
    text-decoration: none
}

.dailog-call-center a img {
    height: 25px;
    width: 25px
}

.dailog-call-center a div {
    color: #ffd600;
    margin: 0 10px
}

.dailog-footer {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    padding-bottom: 1rem;
    padding-right: 15px;
    text-align: center
}

.dailog-footer,
.dailog-footer a {
    color: #fff !important;
    font-size: 16px
}

.dailog-footer a {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.dailog-footer p {
    color: #fff !important
}

.v-dialog .dialog_img_dialog {
    display: flex;
    justify-content: center
}

.v-dialog .dialog_img_dialog .img_dialog {
    height: auto;
    max-width: 500px;
    width: 100%
}

.v-dialog .dialog_button {
    margin: auto
}

.col-12 {
    justify-content: center;
    padding-bottom: 0 !important;
    padding-top: 0 !important
}

.alert-show {
    background: #d14a55;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    margin: auto;
    padding: .5rem;
    text-align: center;
    width: 100%
}

#title-page {
    align-items: center;
    background: #fff;
    background: linear-gradient(180deg, var(--theme-color-1) 0, var(--theme-color-2) 100%);
    border-radius: 20px 6px 6px 20px;
    display: flex;
    justify-content: flex-start;
    margin: 1rem .5rem .5rem;
    width: 200px
}

#title-page,
#title-page .v-icon.v-icon,
#title-page label {
    color: #fff !important
}

#title-page label {
    align-items: center;
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    height: 100%;
    justify-content: flex-start;
    width: 100%
}

@media screen and (max-width:768px) {
    #title-page label {
        font-size: 1rem;
        margin-top: 6px
    }
}

#wrap-bonus {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 360px
}

#wrap-bonus .wrap-bonus-box {
    display: flex;
    height: 100%;
    justify-content: flex-end;
    width: 100%
}

#wrap-bonus .wrap-bonus-box .wrap-bonus-inner {
    align-items: center;
    background: #fff !important;
    border-radius: 60px 10px 10px 60px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    display: flex;
    padding: 4px;
    width: 30%
}

#wrap-bonus .wrap-bonus-box .wrap-bonus-inner p {
    color: #000;
    flex: 1 1 50%;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    text-align: center
}

#wrap-bonus .wrap-bonus-box .wrap-bonus-inner img {
    flex: 1 1 30%;
    height: 30px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 30px
}

#wrap-bonus .item-coupon {
    gap: 10px;
    padding: 0 1rem
}

#wrap-bonus .item-coupon,
#wrap-bonus .item-spin {
    background: #fff !important;
    border-radius: 12px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: .5rem auto;
    max-width: 360px;
    width: 100%
}

#wrap-bonus .item-spin {
    flex-direction: column;
    padding: 1rem
}

#wrap-bonus .item-spin .wrap-detail .show-spin-point-box {
    align-items: center;
    background: #ececec;
    border-radius: 10px;
    display: flex;
    height: 38px;
    justify-content: center;
    margin: 0 auto;
    width: 65%
}

#wrap-bonus .item-spin .wrap-detail .show-spin-point-box .amount-point {
    color: var(--theme-color-2);
    font-size: 19px;
    font-weight: 700;
    margin-top: 6px
}

#wrap-bonus .item-spin .amount {
    color: var(--theme-color-2);
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap
}

@media screen and (max-width:600px) {
    #wrap-bonus .item-spin .amount {
        font-size: 16px
    }
}

#wrap-bonus .item-spin .amount.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-spin .amount .point-count-box h3 {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%);
    -webkit-background-clip: text;
    background-clip: text
}

#wrap-bonus .item-spin .box-btn-wheel {
    align-items: center;
    display: flex;
    gap: 10px
}

#wrap-bonus .item-spin .box-btn-wheel button {
    border: none;
    cursor: pointer;
    display: inline-block;
    flex: 1 1 50%;
    height: 40px;
    overflow: hidden;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap
}

@media screen and (max-width:376px) {
    #wrap-bonus .item-spin .box-btn-wheel button {
        flex: 1 1 auto
    }
}

#wrap-bonus .item-bonus {
    background: #fff !important;
    border-radius: 60px 8px 8px 60px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin: .5rem auto;
    max-width: 360px;
    padding: .5rem;
    width: 100%
}

#wrap-bonus .item-bonus img {
    height: 100px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100px
}

@media screen and (max-width:425px) {
    #wrap-bonus .item-bonus img {
        height: 80px;
        width: 80px
    }
}

#wrap-bonus .item-bonus img.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-bonus .wrap-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%
}

@media screen and (max-width:425px) {
    #wrap-bonus .item-bonus .wrap-detail {
        width: 70%
    }
}

#wrap-bonus .item-bonus .wrap-detail.right span {
    text-align: right !important
}

#wrap-bonus .item-bonus .wrap-detail .amount {
    color: var(--theme-color-2);
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap
}

@media screen and (max-width:600px) {
    #wrap-bonus .item-bonus .wrap-detail .amount {
        font-size: 16px
    }
}

#wrap-bonus .item-bonus .wrap-detail .amount.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-bonus .wrap-detail .amount .point-count-box h3 {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%);
    -webkit-background-clip: text;
    background-clip: text
}

#wrap-bonus .item-bonus .wrap-detail .amount-sub {
    color: #c1c1c1
}

#wrap-bonus .item-bonus .wrap-detail span:nth-child(2) {
    font-size: 12px
}

#wrap-bonus .item-bonus .wrap-detail .amount-btn {
    justify-content: flex-end;
    text-align: right
}

#wrap-bonus .item-bonus .amount {
    color: #ffe66f;
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap
}

#wrap-bonus .item-bonus .amount.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-credit {
    background: #fff !important;
    border-radius: 60px 8px 8px 60px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    display: flex;
    justify-content: flex-start;
    margin: .5rem auto;
    max-width: 360px;
    padding: .5rem;
    width: 100%
}

#wrap-bonus .item-credit img {
    height: 100px;
    margin-left: 6px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100px
}

#wrap-bonus .item-credit img.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-credit .wrap-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 65%
}

#wrap-bonus .item-credit .wrap-detail.right span {
    text-align: right !important
}

#wrap-bonus .item-credit .wrap-detail .amount {
    color: var(--theme-color-2);
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap
}

@media screen and (max-width:600px) {
    #wrap-bonus .item-credit .wrap-detail .amount {
        font-size: 16px
    }
}

#wrap-bonus .item-credit .wrap-detail .amount.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-credit .wrap-detail .amount .point-count-box h3 {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--primary-color-1) 0, var(--primary-color-2) 100%);
    -webkit-background-clip: text;
    background-clip: text
}

#wrap-bonus .item-credit .wrap-detail .sub-amount {
    color: #c1c1c1
}

#wrap-bonus .item-credit .wrap-detail span:nth-child(2) {
    font-size: 12px
}

#wrap-bonus .item-credit .wrap-detail .amount-btn {
    justify-content: flex-end;
    text-align: right
}

#wrap-bonus .item-credit .amount {
    color: #ffe66f;
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap
}

#wrap-bonus .item-credit .amount.hide {
    mix-blend-mode: luminosity
}

#wrap-bonus .item-credit-noInfo {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: .5rem auto;
    max-width: 360px;
    padding: .5rem;
    width: 100%
}

#wrap-bonus .item-credit-noInfo img {
    height: 100px;
    margin-left: 6px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100px
}

#wrap-bonus .item-credit-noInfo img.hide {
    filter: grayscale(.9)
}

#wrap-bonus .alert-font {
    align-items: center;
    display: flex;
    gap: 10px
}

#wrap-bonus .alert-font small {
    flex: 1 1 50%
}

@media screen and (max-width:376px) {
    #wrap-bonus .alert-font small {
        flex: 1 1 auto
    }
}

@media screen and (max-width:425px) {
    #wrap-bonus .alert-font {
        font-size: 12px
    }
}

.theme--dark.v-label {
    color: #000 !important
}

.flex-between {
    align-items: center;
    display: flex;
    justify-content: space-between
}

#page-affiliate ul li {
    padding-left: 0 !important
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1)
    }

    30% {
        transform: scale3d(1.25, .75, 1)
    }

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

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .95, 1)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes shadow-drop-center {
    0% {
        filter: drop-shadow(0 0 0 #f0e7bc);
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.02, 1.02, 1.02)
    }

    to {
        filter: drop-shadow(0 0 .3rem #ffe66f);
        transform: scaleX(1)
    }
}

#tabs-active {
    background: linear-gradient(180deg, #38d851, #0f6a00) !important
}

.v-slide-group__next,
.v-slide-group__prev {
    display: none !important
}

@keyframes pulsepulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes bouncebounce {

    0%,
    20%,
    53%,
    80%,
    to {
        transform: translateZ(0);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    40%,
    43% {
        transform: translate3d(0, -30px, 0);
        transition-timing-function: cubic-bezier(.755, .05, .855, .06)
    }

    70% {
        transform: translate3d(0, -15px, 0);
        transition-timing-function: cubic-bezier(.755, .05, .855, .06)
    }

    90% {
        transform: translate3d(0, -4px, 0)
    }
}

#flip-bonus-select .flip-switch {
    background: #182029;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    height: 38px;
    margin: 0 auto;
    padding: 3px 0 0;
    perspective: 50px;
    -webkit-perspective: 50px;
    -moz-perspective: 50px;
    width: 83px
}

#flip-bonus-select .flip-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    right: 100%;
    top: 0;
    width: 1px
}

#flip-bonus-select .flip-switch label {
    animation: uncheck .6s ease-out;
    -webkit-animation: uncheck .6s ease-out;
    -moz-animation: uncheck .6s ease-out;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-radius: inherit;
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    cursor: pointer;
    display: block;
    height: 32px;
    margin: 0 auto;
    outline: none;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    width: 75px
}

#flip-bonus-select .flip-switch label:after,
#flip-bonus-select .flip-switch label:before {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    border-radius: inherit;
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    content: "";
    height: inherit;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: inherit
}

#flip-bonus-select .flip-switch label:before {
    background: #e53935;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    z-index: 2
}

#flip-bonus-select .flip-switch label:after {
    background: #fbc316;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg)
}

#flip-bonus-select .flip-switch.flip-switch-text label:after,
#flip-bonus-select .flip-switch.flip-switch-text label:before {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 32px
}

#flip-bonus-select .flip-switch.flip-switch-text label:before {
    content: "ไม่รับโบนัส"
}

#flip-bonus-select .flip-switch.flip-switch-text label:after {
    content: "รับโบนัส"
}

@keyframes check {
    0% {
        transform: rotateY(0deg)
    }

    50% {
        transform: rotateY(195deg)
    }

    75% {
        transform: rotateY(165deg)
    }

    to {
        transform: rotateY(180deg)
    }
}

@keyframes uncheck {
    0% {
        transform: rotateY(180deg)
    }

    50% {
        transform: rotateY(-15deg)
    }

    75% {
        transform: rotateY(15deg)
    }

    to {
        transform: rotateY(0deg)
    }
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scaleX(1)
    }
}

#wallet-deposit {
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-weight: 500;
    margin: 2px;
    padding: 5px 1rem 5px 1.7rem;
    position: relative
}

#wallet-deposit img {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .658));
    height: 30px;
    left: 5px;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px
}

#wallet-deposit button {
    background: none !important;
    box-shadow: none !important;
    height: 20px;
    width: 20px
}

#wallet-deposit button .v-btn__loader,
#wallet-deposit button i {
    color: #fff;
    font-size: 18px
}

#chat-widget-container {
    border-radius: 8px !important;
    bottom: 0 !important;
    max-height: 652px !important;
    max-width: 352px !important;
    z-index: 6 !important
}

@media(max-width:960px) {
    #chat-widget-container {
        bottom: 50px !important;
        max-height: calc(100% - 50px) !important
    }
}

.otp-bg-main .v-input .v-input__control .v-input__slot {
    background: #fff !important
}

.v-input--switch__thumb,
.v-input--switch__track {
    background-color: var(--theme-color-1) !important
}

.bonus-pro {
    margin-top: 0;
    padding: 0
}

.bonus-pro .v-input--switch__thumb,
.bonus-pro .v-input--switch__track {
    background-color: #00e676 !important
}

.no-bonus-pro {
    margin-top: 0;
    padding: 0
}

.no-bonus-pro .v-input--switch__thumb,
.no-bonus-pro .v-input--switch__track {
    background-color: silver !important
}

.no-bonus-pro .v-input--switch__track {
    height: 14px
}

.no-bonus-pro .v-input--switch__thumb {
    height: 18px;
    width: 18px
}

.flex-row-column {
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: space-between
}

.text-theme-color {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: var(--theme-color-2);
    -webkit-background-clip: text;
    background-clip: text
}

.fix-menu-content .item-menu {
    background: #fff !important;
    color: #000 !important;
    font-weight: 600
}

.nav-login-mode {
    width: 400px !important
}

@media only screen and (max-width:600px) {
    .nav-login-mode {
        width: 95% !important
    }
}

.nav-nonelogin-mode {
    width: 300px !important
}

@media only screen and (max-width:320px) {
    .nav-nonelogin-mode {
        width: 95% !important
    }
}

.menu-content {
    display: flex;
    flex-wrap: wrap;
    margin: .5rem 0 0;
    width: 100%
}

.menu-content .menu-login-nav {
    padding: 5px;
    width: 50%
}

@media only screen and (max-width:280px) {
    .menu-content .menu-login-nav {
        padding: 3px
    }
}

.menu-content .menu-login-nav .item-menu {
    background: #fff;
    color: #000;
    font-weight: 600;
    margin: 0;
    padding: 6px 3px
}

@media only screen and (max-width:600px) {
    .menu-content .menu-login-nav .item-menu img {
        height: 28px;
        margin: 0 .5rem;
        width: 28px
    }
}

@media only screen and (max-width:320px) {
    .menu-content .menu-login-nav .item-menu span {
        font-size: .8rem
    }

    .menu-content .menu-login-nav .item-menu img {
        height: 22px;
        margin: 0 .5rem;
        width: 22px
    }
}

@media only screen and (max-width:280px) {
    .menu-content .menu-login-nav .item-menu span {
        font-size: .7rem
    }

    .menu-content .menu-login-nav .item-menu img {
        height: 18px;
        margin: 0 .5rem;
        width: 18px
    }
}

.menu-content .menu-login-nav:nth-child(n+1):nth-child(-n+12) {
    width: 33.33%
}

.menu-content .menu-login-nav:nth-child(n+1):nth-child(-n+12) .item-menu {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center
}

.menu-content .menu-login-nav:nth-child(n+1):nth-child(-n+12) .item-menu img {
    margin: 0 0 5px
}

.menu-content .menu-login-nav:nth-child(n+1):nth-child(-n+12) .item-menu span {
    display: block;
    line-height: 1;
    width: 100%
}

.menu-content .menu-login-nav:last-child {
    width: 100%
}

.menu-content .menu-login-nav:last-child .item-menu {
    justify-content: center
}

@media only screen and (max-width:320px) {
    .sidebar-menu-contain {
        margin: 1rem .5rem
    }
}

.profile-blog-nav {
    background: #fff;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    color: #000;
    margin: 15px auto;
    padding: .5rem 1rem;
    position: relative;
    width: calc(100% - 10px)
}

.flex-profile-crop .pic-profile {
    position: relative;
    width: 20%;
    z-index: 1
}

.flex-profile-crop .pic-profile .icon-rank {
    position: absolute;
    right: -15px;
    top: -10px
}

.flex-profile-crop .pic-profile .icon-rank img {
    height: auto;
    width: 30px
}

.flex-profile-crop .pic-profile img {
    height: auto;
    width: 100%
}

.flex-profile-crop .desc-profile {
    padding-left: 30px;
    width: 80%
}

.flex-profile-crop .desc-profile h2 {
    font-size: 1rem
}

.flex-profile-crop .desc-profile p {
    font-weight: 600;
    margin: 0
}

@media only screen and (max-width:600px) {
    .flex-profile-crop .desc-profile p {
        font-size: .8rem
    }
}

.flex-profile-crop .flex-desc p:first-child {
    margin-right: 10px;
    width: 45%
}

.gd-text-main {
    font-weight: 600
}

.gd-text-main,
.gd-text-main .icon-gd-text-main {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
    -webkit-background-clip: text;
    background-clip: text
}

.gd-text-main .icon-gd-text-main {
    font-size: 18px !important;
    margin-bottom: 4px
}

.flex-desc p:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50%
}

.nav-nonelogin-mode .fix-menu-content div {
    width: 100%
}

.nav-nonelogin-mode .fix-menu-content .item-menu {
    margin: 0 0 1rem
}

.nav-nonelogin-mode .fix-menu-content .v-btn__content {
    font-size: .9rem
}

@media only screen and (max-width:600px) {
    .nav-nonelogin-mode .fix-menu-content .v-btn__content {
        font-size: .85rem
    }
}

.main-nav {
    left: 0;
    padding: 6px 15%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3
}

.flex-nav-header {
    align-items: center;
    height: 60px
}

.flex-nav-header .inner-flex {
    width: 20%
}

.flex-nav-header .inner-center {
    width: 60%
}

.flex-nav-header .inner-center.-main {
    align-items: center;
    display: flex;
    justify-content: center
}

.flex-nav-header .inner-center #logo-image {
    height: auto;
    width: 100px
}

.flex-nav-header.-login .inner-flex {
    width: 40%
}

.flex-nav-header.-login .inner-flex .rank-header-flex {
    background: #fff;
    border-radius: 30px;
    color: #000;
    display: inline-block;
    font-weight: 600;
    padding: 3px 10px;
    position: relative;
    text-align: center;
    width: 200px;
    z-index: 1
}

.flex-nav-header.-login .inner-flex .rank-header-flex .icon-rank {
    left: -15px;
    position: absolute;
    top: -10px
}

.flex-nav-header.-login .inner-flex .rank-header-flex .icon-rank img {
    height: auto;
    width: 50px
}

.flex-nav-header.-login .inner-flex .rank-header-flex p {
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 140px
}

.flex-nav-header .header-btn {
    width: 160px !important
}

.flex-nav-header .mobile-box-icon-header {
    display: none !important
}

.flex-nav-header .pc-box-icon-header {
    display: inherit !important
}

.main-header-box {
    display: flex !important;
    justify-content: space-between
}

.main-header-box .box-left {
    display: flex;
    gap: 1.5rem;
    width: 33.33%
}

@media screen and (max-width:600px) {
    .main-header-box .box-left img {
        width: 18px
    }
}

.box-right-header {
    gap: .5rem;
    justify-content: space-between;
    width: 33.33% !important
}

.navbar-header {
    display: none
}

.blog-head-icon {
    background: #fff;
    border-radius: 30px;
    color: #000;
    cursor: pointer;
    font-weight: 600;
    height: 36px;
    padding: 3px 10px 3px 5px;
    position: relative;
    width: 120px;
    z-index: 1
}

.blog-head-icon img {
    height: auto;
    margin-right: 5px;
    width: 24px
}

.blog-head-icon:disabled {
    cursor: default !important;
    filter: brightness(.5) grayscale(.7) !important
}

.blog-head-icon .show-header-amount {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 0px;
    justify-content: space-around
}

@media screen and (max-width:600px) {
    .blog-head-icon .show-header-amount p span {
        line-height: 1.8
    }
}

.flex-nav-header .inner-center.-main {
    width: 20%
}

.flex-nav-header.-login .inner-flex .rank-header-flex p {
    transform: translateX(12px)
}

.item-progress-bar-level .v-progress-linear__content strong {
    margin-right: 0 !important
}

.item-progress-bar-level .v-progress-linear {
    border-radius: 16px !important
}

.item-center-footer {
    align-items: center;
    background-color: #fff;
    display: flex;
    justify-content: center;
    z-index: 3
}

.item-center-footer .logo-footer img {
    height: auto;
    transform: translateY(5px);
    width: 85px
}

.item-center-footer:before {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    -webkit-clip-path: polygon(8% 7%, 93% 7%, 100% 18%, 100% 86%, 85% 99%, 13% 99%, 0 85%, 0 18%);
    clip-path: polygon(8% 7%, 93% 7%, 100% 18%, 100% 86%, 85% 99%, 13% 99%, 0 85%, 0 18%);
    content: "";
    display: block;
    height: calc(100% - 4px);
    left: 2px;
    position: absolute;
    top: 2px;
    width: calc(100% - 4px)
}

.item-center-footer .blog-amount-footer {
    transform: translateY(5px);
    width: 85%
}

.item-center-footer .blog-amount-footer .wrapper-shadow {
    background: linear-gradient(180deg, #ffd600, #ffe577);
    border-radius: 6px;
    box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, .25);
    margin-bottom: 4px;
    padding: 2px 4px
}

.item-center-footer .blog-amount-footer .wrapper-shadow .blog-foot-icon {
    background: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .25), inset 0 -1px 3px 0 rgba(0, 0, 0, .25);
    color: #000;
    font-weight: 600;
    margin: 2px 0;
    padding: 1px 6px 1px 3px
}

.item-center-footer .blog-amount-footer .wrapper-shadow .blog-foot-icon img {
    width: 20px
}

.item-center-footer .blog-amount-footer .wrapper-shadow .blog-foot-icon p {
    font-size: .75rem
}

.popup-fix-footer {
    background: #fff;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    bottom: 70px;
    color: #000;
    font-weight: 600;
    opacity: 0;
    padding: 6px .5rem;
    position: fixed;
    right: 0;
    transform: translateX(100%);
    transition: all .2s ease;
    width: 180px;
    z-index: 9
}

.popup-fix-footer .flex-item-fixed {
    padding: 2px 15px
}

.popup-fix-footer .flex-item-fixed img {
    height: auto;
    margin-right: 10px;
    width: 35px
}

.popup-fix-footer .flex-item-fixed:hover {
    background: linear-gradient(180deg, #ffe45e, #e0710a);
    border-radius: 6px
}

.popup-fix-footer.show-popup {
    opacity: 1;
    transform: translateX(0);
    transition: all .2s ease
}

.overlay-bg {
    background: rgba(0, 0, 0, .4);
    content: "";
    display: block;
    height: 100vh;
    left: 0;
    opacity: 0 !important;
    position: fixed;
    top: 0;
    visibility: hidden !important;
    width: 0;
    z-index: 2
}

.item-input-stake .v-input input {
    color: #fff !important
}

.pc-response {
    margin: auto
}

@media only screen and (max-width:1300px) {
    .flex-nav-header.-login .inner-flex .rank-header-flex p {
        width: 120px
    }

    .main-nav {
        padding: 6px 5%
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex .icon-rank {
        left: -5px
    }
}

@media only screen and (max-width:991px) {
    .item-center-footer .blog-amount-footer {
        width: 68%
    }

    .main-nav {
        padding: 6px 15px
    }
}

@media screen and (max-width:916px) {
    .inner-flex .blog-head-icon {
        display: none !important
    }

    .inner-flex .mobile-box-icon-header {
        display: inherit !important
    }

    .inner-flex .pc-box-icon-header {
        display: none !important
    }

    .flex-nav-header .mobile-box-icon-header {
        display: inherit !important
    }

    .flex-nav-header .pc-box-icon-header {
        display: none !important
    }
}

@media only screen and (max-width:800px) {
    .flex-nav-header .inner-flex {
        width: 50px
    }

    .flex-nav-header .inner-center {
        width: calc(100% - 100px)
    }

    .flex-nav-header .inner-center.-main {
        width: 20%
    }
}

@media only screen and (max-width:600px) {
    .flex-nav-header .box-right-header {
        gap: .2rem;
        width: 40% !important
    }

    .main-header-box .box-left {
        align-items: center;
        gap: .2rem;
        width: 40%
    }

    .main-header-box .box-left .blog-head-icon {
        height: 30px;
        width: 95px
    }

    .main-header-box .box-left .blog-head-icon p {
        font-size: 10px !important
    }

    .inner-flex .mobile-box-icon-header {
        display: inherit !important;
        width: 95px
    }

    .mobile-box-icon-header {
        height: 30px
    }

    .mobile-box-icon-header img {
        width: 18px
    }

    .mobile-box-icon-header p {
        font-size: 10px
    }

    .item-center-footer .logo-footer img {
        height: 65px;
        transform: translateY(5px);
        width: 65px
    }

    .box-game-show .header-box-game .select-brand-game {
        font-weight: 600
    }

    .card-withdraw-input .v-text-field.v-text-field--solo .v-input__control,
    .card-withdraw-input .v-text-field.v-text-field--solo .v-input__control input {
        height: 50px !important
    }

    .card-withdraw-input .v-input input {
        max-height: 50px !important
    }

    .card-withdraw-input .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
        height: 50px !important
    }

    .item-center-footer .blog-amount-footer {
        width: 85%
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex {
        max-width: 105px;
        width: auto
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex p {
        width: 80px
    }

    .main-nav {
        padding: 3px .5rem
    }

    .v-btn__content {
        font-size: .8rem
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex .icon-rank {
        left: -10px;
        position: absolute;
        top: -5px
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex p {
        transform: translateX(1px)
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex .icon-rank img {
        height: auto;
        width: 30px
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex {
        font-size: .65rem;
        padding: 3px 20px
    }

    .flex-nav-header.-login .inner-flex {
        display: flex !important
    }

    .flex-nav-header .inner-flex {
        display: none
    }

    .flex-nav-header .inner-center #logo-image {
        height: auto;
        transform: translateY(-5px);
        width: 80px
    }

    .flex-nav-header .header-btn {
        height: 34px !important;
        width: 100px !important
    }

    .flex-nav-header .inner-center {
        width: 100%
    }

    .sidebar-menu-contain .menu-content .item-menu span {
        font-size: .85rem
    }
}

@media only screen and (max-width:375px) {
    .item-center-footer .blog-amount-footer .blog-foot-icon p {
        font-size: .7rem;
        line-height: 1
    }

    .item-center-footer .blog-amount-footer .blog-foot-icon img {
        width: 18px
    }
}

@media only screen and (max-width:320px) {
    .popup-fix-footer .flex-item-fixed img {
        height: auto;
        width: 30px
    }

    .popup-fix-footer .flex-item-fixed {
        padding: 2px 12px
    }

    .item-center-footer .blog-amount-footer .blog-foot-icon p {
        font-size: .65rem;
        line-height: 1
    }

    .item-center-footer .blog-amount-footer .blog-foot-icon img {
        width: 16px
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex {
        max-width: 90px;
        width: auto
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex p {
        width: 60px
    }

    .flex-nav-header .header-btn {
        height: 32px !important;
        width: 90px !important
    }

    .flex-nav-header .inner-center #logo-image {
        height: auto;
        width: 45
    }

    .flex-profile-crop .pic-profile {
        width: 15%
    }

    .flex-profile-crop .desc-profile p {
        font-size: .75rem
    }

    .flex-profile-crop .pic-profile .icon-rank img {
        height: auto;
        width: 24px
    }

    .flex-profile-crop .desc-profile {
        padding-left: 25px;
        width: 85%
    }

    .profile-blog-nav {
        padding-right: .5rem
    }

    .sidebar-menu-contain .menu-content .item-menu span {
        font-size: .75rem
    }
}

.blog-head-icon {
    align-items: center !important
}

.caption-event-blog p {
    text-shadow: 0 2px 8px #000
}

@media only screen and (max-width:280px) {
    .item-center-footer .blog-amount-footer .blog-foot-icon p {
        font-size: .6rem;
        line-height: 1
    }

    .item-center-footer .blog-amount-footer .blog-foot-icon img {
        width: 14px
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex {
        max-width: 80px;
        width: auto
    }

    .flex-nav-header.-login .inner-flex .rank-header-flex p {
        width: 50px
    }

    .flex-nav-header .header-btn {
        height: 32px !important;
        width: 80px !important
    }

    .flex-nav-header .inner-center #logo-image {
        height: auto;
        width: 40px
    }

    .flex-profile-crop .desc-profile h2 {
        font-size: .9rem
    }

    .flex-profile-crop .desc-profile p,
    .sidebar-menu-contain .menu-content .item-menu span {
        font-size: .65rem
    }
}

.card-withdraw-input {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .25);
    color: #000;
    padding: 1rem
}

.card-withdraw-input .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
    border: none !important;
    border-bottom: 1px solid var(--theme-color-1) !important;
    border-radius: 0 !important;
    padding: 0 !important
}

.card-withdraw-input .v-text-field.v-text-field--enclosed .v-text-field__details {
    margin: 0 !important;
    padding-left: 0 !important
}

.card-withdraw-input .v-input--dense>.v-input__control>.v-input__slot {
    margin-bottom: 0 !important
}

.card-withdraw-input .v-text-field.v-text-field--solo .v-input__control {
    min-height: auto !important
}

.card-withdraw-input .v-text-field.v-text-field--solo .v-input__control input {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2rem;
    font-weight: 600;
    padding-right: 20px !important;
    position: relative;
    text-align: right !important;
    z-index: 1
}

.card-withdraw-input .flex-input-amount {
    align-items: flex-end !important
}

.card-withdraw-input .flex-input-amount h2 {
    border-bottom: 1px solid var(--theme-color-1) !important
}

.card-input-primary {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .25);
    color: #000;
    padding: 1rem
}

.card-withdraw-input .v-text-field.v-text-field--enclosed .v-text-field__details {
    display: none !important
}

.title-amount-decimal {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 700
}

@media only screen and (max-width:600px) {
    .card-input-primary h4 {
        font-size: .8rem;
        letter-spacing: 0
    }

    .card-input-primary,
    .card-withdraw-input {
        padding: 1rem .7rem
    }

    .card-withdraw-input .v-text-field.v-text-field--solo .v-input__control input {
        font-size: 1.8rem
    }
}

.effect-up {
    animation: effect-up 1s ease infinite
}

.effect-flip {
    animation: effect-flip 1s linear infinite
}

.effect-puff {
    animation: effect-opa .5s ease infinite
}

.wheelitem {
    animation: effect-spin 2s ease infinite
}

.checkinitem {
    animation: effect-puff 1s ease infinite
}

.randomboxitem {
    animation: effect-bling .5s linear infinite
}

.minieventitem {
    animation: effect-down .5s linear infinite
}

.effect-bling2,
.rankingitem {
    animation: effect-bling2 .5s linear infinite
}

@keyframes effect-down {

    0%,
    to {
        transform: translateY(-3px)
    }

    75% {
        transform: translateY(3px)
    }
}

@keyframes effect-bling {
    0% {
        transform: translate(0) rotate(0deg)
    }

    50% {
        transform: translateY(-5%) rotate(10deg)
    }

    75% {
        transform: translateY(-5%) rotate(-10deg)
    }

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

@keyframes effect-bling2 {
    0% {
        transform: translate(0) rotate(0deg)
    }

    50% {
        transform: translateY(-5%) rotate(5deg)
    }

    75% {
        transform: translateY(-5%) rotate(-5deg)
    }

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

@keyframes effect-puff {

    0%,
    to {
        transform: scale(1)
    }

    25% {
        transform: scale(.9, 1.1)
    }

    50% {
        transform: scale(1.1, .9)
    }

    75% {
        transform: scale(.95, 1.05)
    }
}

@keyframes effect-up {

    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-6px)
    }

    60% {
        transform: translateY(-3px)
    }
}

@keyframes effect-flip {
    0% {
        transform: rotateY(45deg)
    }

    to {
        transform: rotateY(225deg)
    }
}

@keyframes effect-opa {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes effect-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.slick-list {
    width: 100% !important
}

.card-menu-item .effect-puff {
    position: absolute;
    right: 0;
    top: 0
}

.card-menu-item .effect-puff span.v-badge__badge {
    align-items: center !important;
    border-radius: 50% !important;
    display: flex !important;
    font-size: 14px !important;
    height: 25px !important;
    justify-content: center !important;
    width: 25px !important
}

@media screen and (max-width:600px) {
    .card-menu-item .effect-puff span.v-badge__badge {
        font-size: 12px !important;
        height: 20px !important;
        width: 20px !important
    }
}

.custom-radio .v-input__control:before {
    background-color: #1976d2;
    border: 2px solid #1976d2;
    border-radius: 50%
}

.custom-radio .v-input__control:after {
    background-color: #1976d2
}

.custom-radio .v-input__label {
    color: #1976d2
}

#popup-title {
    max-height: 80vh !important
}

@media only screen and (max-height:1200px) {
    #popup-title {
        max-height: 90vh !important
    }
}

.v-navigation-drawer--temporary {
    z-index: 300 !important
}

.theme--dark.v-list-item--active:before,
.theme--dark.v-list-item--active:hover:before,
.theme--dark.v-list-item.v-list-item--highlighted:before {
    opacity: 0 !important
}

@media only screen and (max-height:1200px) {
    .box-game-show .grid-game-show {
        margin: 10px 0 0
    }
}

.spin-load {
    display: flex !important;
    justify-content: center !important
}

.spin-load .spin-load-center {
    height: 200px !important;
    margin-bottom: 50px !important;
    width: 200px !important
}

.bonus-pro .v-input--switch__thumb,
.no-bonus-pro .v-input--switch__thumb {
    height: 14px;
    width: 14px
}

.bonus-pro .v-input--switch__track,
.no-bonus-pro .v-input--switch__track {
    height: 10px
}

.v-input--switch__thumb {
    right: -4px
}

@media only screen and (min-width:100px) {
    #logo-image {
        padding-top: 10px !important;
        width: 70px !important
    }
}

@media only screen and (min-width:600px) {
    #logo-image {
        padding-top: 3px !important;
        width: 75px !important
    }
}

@media only screen and (min-width:100px) {
    #banner-main .v-item-group .v-carousel__controls {
        bottom: -20px !important
    }
}

@media only screen and (min-width:600px) {
    #banner-main .v-item-group .v-carousel__controls {
        bottom: -20px !important
    }
}

@media only screen and (min-width:100px) {
    .logo-image-login {
        transform: translateY(-15px)
    }

    .logo-image-login #logo-image {
        padding: 0;
        width: 55px !important
    }
}

@media only screen and (min-width:600px) {
    .logo-image-login {
        transform: translateY(-16px)
    }

    .logo-image-login #logo-image {
        padding: 0;
        width: 75px !important
    }
}

#logo-image {
    cursor: pointer !important;
    transition: .15s
}

#logo-image:hover {
    filter: brightness(.7)
}

.text--large-responsive {
    font-size: 1.25rem
}

@media screen and (max-width:600px) {
    .text--large-responsive {
        font-size: 1.125rem !important
    }
}

.text--default-responsive {
    font-size: 1rem
}

@media screen and (max-width:600px) {
    .text--default-responsive {
        font-size: .875rem !important
    }
}

.text--small-responsive {
    font-size: .875rem
}

@media screen and (max-width:600px) {
    .text--small-responsive {
        font-size: .688rem !important
    }
}

.padding-bottom-responsive {
    padding-bottom: .5rem
}

@media screen and (max-width:600px) {
    .padding-bottom-responsive {
        padding-bottom: 1rem
    }
}

.light-vip {
    animation: goLeftAnimate 2.5s linear infinite;
    animation-delay: 2s;
    right: 0;
    transform: translateY(-50%) skew(25deg, 10deg)
}

.light-vip,
.light-vip-right {
    background-color: rgba(247, 141, 70, .393);
    height: 116%;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 20px;
    z-index: 200
}

.light-vip-right {
    animation: goRightAnimate 2.5s linear infinite;
    animation-delay: 2s;
    left: 0;
    transform: translateY(-50%) skew(-25deg, -10deg)
}

.vip-border {
    background: linear-gradient(0deg, #c67c00, #f9c65c);
    border-radius: 30px 0 0 30px;
    cursor: pointer;
    height: 42px;
    overflow: hidden;
    padding: .4rem;
    position: relative;
    transform: translateX(11px);
    transition: all .2s ease;
    width: 113px
}

.vip-border:hover {
    filter: brightness(1.4);
    transform: scale(1.04) translateX(11px)
}

.vip-border .vip-member-container {
    animation: gradientAnimate 2.5s linear infinite;
    background: linear-gradient(0deg, #f9c65c, #c67c00);
    border-radius: 30px 0 0 30px;
    height: 36px;
    padding: .2rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 109px
}

.vip-border .vip-member-container .vip-member-warp {
    align-items: center;
    background-color: #e78001;
    border-radius: 30px 0 0 30px;
    display: flex;
    gap: 8px;
    left: 50%;
    padding: .2rem 1.4rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.vip-border .vip-member-container .vip-member-warp img {
    transform: translateY(-1px)
}

.vip-border .vip-member-container .vip-member-warp span {
    color: #fff;
    font-size: 16px;
    font-weight: 700
}

@keyframes goRightAnimate {
    0% {
        filter: brightness(.8);
        left: 0;
        opacity: 0;
        width: 30px
    }

    25% {
        filter: brightness(1.5);
        left: 10%;
        opacity: 1;
        width: 50px
    }

    50% {
        filter: brightness(1.5);
        left: 50%;
        width: 50px
    }

    75% {
        filter: brightness(1.2);
        left: 60%
    }

    to {
        filter: brightness(.8);
        left: 350%;
        opacity: 0
    }
}

@keyframes goLeftAnimate {
    0% {
        filter: brightness(.8);
        opacity: 0;
        right: 0;
        width: 30px
    }

    25% {
        filter: brightness(1.5);
        opacity: 1;
        right: 10%;
        width: 50px
    }

    50% {
        filter: brightness(1.5);
        right: 50%;
        width: 50px
    }

    75% {
        filter: brightness(1.2);
        right: 60%
    }

    to {
        filter: brightness(.8);
        opacity: 0;
        right: 350%
    }
}

@keyframes gradientAnimate {
    0% {
        filter: brightness(.8)
    }

    50% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.3)
    }

    75% {
        filter: brightness(1)
    }

    to {
        filter: brightness(.8)
    }
}

@keyframes blinker {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media only screen and (max-width:600px) {
    #marquee.down {
        margin-top: 7.425rem !important
    }

    .vip-border {
        height: 36px;
        width: 72px
    }

    .vip-border .vip-member-container {
        height: 30px;
        width: 68px
    }

    .vip-border .vip-member-container .vip-member-warp {
        padding: .1rem .4rem
    }

    .vip-border .vip-member-container .vip-member-warp img {
        height: 20px;
        width: 20px
    }

    .vip-border .vip-member-container .vip-member-warp span {
        font-size: 14px
    }
}

.mx-datepicker-btn-confirm {
    font-family: Noto Sans Thai !important
}

.btn-copy {
    align-items: center;
    background: linear-gradient(180deg, #3ad83a, #539100);
    border-radius: 12px;
    color: #fff;
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 2px 16px
}

@media screen and (max-width:425px) {
    .btn-copy {
        padding: 2px 12px
    }
}

.btn-copy p {
    color: #fff !important
}

@media screen and (max-width:425px) {
    .btn-copy p {
        font-size: 12px !important
    }
}

.t-1 {
    font-size: 10px
}

.t-2 {
    font-size: 12px
}

.t-3 {
    font-size: 14px
}

.t-4 {
    font-size: 16px
}

.t-5 {
    font-size: 18px
}

.t-6 {
    font-size: 20px
}

.t-7 {
    font-size: 22px
}

.t-8 {
    font-size: 24px
}

.t-9 {
    font-size: 26px
}

.t-10 {
    font-size: 28px
}

.tt-1 {
    font-size: 10px
}

.tt-1,
.tt-2 {
    font-weight: 600
}

.tt-2 {
    font-size: 12px
}

.tt-3 {
    font-size: 14px
}

.tt-3,
.tt-4 {
    font-weight: 600
}

.tt-4 {
    font-size: 16px
}

.tt-5 {
    font-size: 18px
}

.tt-5,
.tt-6 {
    font-weight: 600
}

.tt-6 {
    font-size: 20px
}

.tt-7 {
    font-size: 22px
}

.tt-7,
.tt-8 {
    font-weight: 600
}

.tt-8 {
    font-size: 24px
}

.tt-9 {
    font-size: 26px
}

.tt-10,
.tt-9 {
    font-weight: 600
}

.tt-10 {
    font-size: 28px
}

@media only screen and (min-width:600px) {
    .t-1 {
        font-size: 12px
    }

    .t-2 {
        font-size: 14px
    }

    .t-3 {
        font-size: 16px
    }

    .t-4 {
        font-size: 18px
    }

    .t-5 {
        font-size: 20px
    }

    .t-6 {
        font-size: 22px
    }

    .t-7 {
        font-size: 24px
    }

    .t-8 {
        font-size: 26px
    }

    .t-9 {
        font-size: 28px
    }

    .t-10 {
        font-size: 30px
    }

    .tt-1 {
        font-size: 12px
    }

    .tt-1,
    .tt-2 {
        font-weight: 600
    }

    .tt-2 {
        font-size: 14px
    }

    .tt-3 {
        font-size: 16px
    }

    .tt-3,
    .tt-4 {
        font-weight: 600
    }

    .tt-4 {
        font-size: 18px
    }

    .tt-5 {
        font-size: 20px
    }

    .tt-5,
    .tt-6 {
        font-weight: 600
    }

    .tt-6 {
        font-size: 22px
    }

    .tt-7 {
        font-size: 24px
    }

    .tt-7,
    .tt-8 {
        font-weight: 600
    }

    .tt-8 {
        font-size: 26px
    }

    .tt-9 {
        font-size: 28px
    }

    .tt-10,
    .tt-9 {
        font-weight: 600
    }

    .tt-10 {
        font-size: 30px
    }
}

#container-otp-input {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: .5rem
}

#container-otp-input span {
    display: none
}

#container-otp-input input.otp-input {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border: none;
    border-radius: 12px !important;
    color: #495057 !important;
    font-size: 18px;
    height: 60px;
    margin: 0 3px;
    outline: none;
    padding: 5px;
    text-align: center;
    width: 60px
}

@media screen and (max-width:600px) {
    #container-otp-input input.otp-input {
        height: 40px;
        width: 40px
    }
}

.no-animation .btn-control-animation,
.no-animation .home-page {
    animation: none !important
}

.no-animation .btn-control-animation:hover,
.no-animation .home-page:hover {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important
}

.no-animation .all-btn,
.no-animation .blinker,
.no-animation .checkinitem,
.no-animation .effect-bling2,
.no-animation .effect-flip,
.no-animation .effect-puff,
.no-animation .effect-up,
.no-animation .minieventitem,
.no-animation .randomboxitem,
.no-animation .rankingitem,
.no-animation .wheelitem {
    animation: none !important
}

.no-animation .back-to-top-btn,
.no-animation .contact-head-mobile,
.no-animation .contact-head-mobile .showlist-item,
.no-animation .v-dialog,
.no-animation .v-dialog__content,
.no-animation .v-icon.v-icon {
    transition: none 0s ease 0s !important;
    transition: initial !important
}

.no-animation .dropdown-with-animation i,
.no-animation .light-vip,
.no-animation .light-vip-right,
.no-animation .vip-member-container {
    animation: none !important
}

.Mobile-Style .All-Ranking-Level {
    color: #fff;
    font-size: 5vw;
    margin-bottom: 3px
}

.Mobile-Style .underline {
    height: auto;
    width: 100%
}

.Mobile-Style .rankInfo-banner-mobile {
    height: auto;
    max-width: 300px;
    width: 100%
}

.Mobile-Style .rank-info-box-margin {
    margin-bottom: 25px
}

.Mobile-Style .Rank-0-box {
    align-content: center;
    background: linear-gradient(180deg, #bbb, #5c5c5c);
    border-radius: 10px;
    color: #3f3f3f;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-0-box:focus {
    box-shadow: 0 1px 13px hsla(200, 1%, 55%, .75)
}

.Mobile-Style .Rank-A-box {
    align-content: center;
    background: linear-gradient(180deg, #bde4ed, #5b9cd3);
    border-radius: 10px;
    color: #28447f;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-A-box:focus {
    box-shadow: 0 1px 13px rgba(159, 209, 255, .75)
}

.Mobile-Style .Rank-B-box {
    background: linear-gradient(180deg, #f2deec, #8860a9);
    border-radius: 10px;
    color: #4e2f91;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-B-box:focus {
    box-shadow: 0 1px 13px rgba(213, 159, 255, .75)
}

.Mobile-Style .Rank-C-box {
    background: linear-gradient(180deg, #d38bdf, #7455a4);
    border-radius: 10px;
    color: #412b7e;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-C-box:focus {
    box-shadow: 0 1px 13px rgba(212, 141, 255, .75)
}

.Mobile-Style .Rank-D-box {
    background: linear-gradient(180deg, #f38284, #f04e54);
    border-radius: 10px;
    color: #7b1315;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-D-box:focus {
    box-shadow: 0 1px 13px rgba(255, 0, 0, .75)
}

.Mobile-Style .Rank-VIP-box {
    background: linear-gradient(180deg, #fae690, #f48030);
    border-radius: 10px;
    color: #973a20;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-VIP-box:focus {
    box-shadow: 0 1px 13px rgba(255, 230, 141, .75)
}

.Mobile-Style .Rank-VVIP-box {
    background: linear-gradient(180deg, #fae690, #f48030);
    border-radius: 10px;
    color: #973a20;
    display: flex;
    height: 90px;
    width: 100%
}

.Mobile-Style .Rank-VVIP-box:focus {
    box-shadow: 0 1px 13px rgba(255, 230, 141, .75)
}

.Mobile-Style .ranking-info-box-0 {
    background: #3f3f3f;
    border: 10px;
    border: 2px solid hsla(200, 1%, 55%, .75);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 13px hsla(200, 1%, 55%, .75)
}

.Mobile-Style .ranking-info-box-0,
.Mobile-Style .ranking-info-box-A {
    animation: showInfoAnimate .3s ease-in-out 0s, fade .5s ease-in-out 0s !important;
    height: auto;
    margin-top: -5vh !important;
    width: 99%
}

.Mobile-Style .ranking-info-box-A {
    background: #28447f;
    border: 10px;
    border: 2px solid rgba(159, 209, 255, .75);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 13px rgba(159, 209, 255, .75)
}

.Mobile-Style .ranking-info-box-B {
    background: #4e2f91;
    border: 10px;
    border: 2px solid rgba(213, 159, 255, .75);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 13px rgba(213, 159, 255, .75)
}

.Mobile-Style .ranking-info-box-B,
.Mobile-Style .ranking-info-box-C {
    animation: showInfoAnimate .3s ease-in-out 0s, fade .5s ease-in-out 0s !important;
    height: auto;
    margin-top: -5vh !important;
    width: 99%
}

.Mobile-Style .ranking-info-box-C {
    background: #412b7e;
    border: 10px;
    border: 2px solid rgba(212, 141, 255, .75);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 13px rgba(212, 141, 255, .75)
}

.Mobile-Style .ranking-info-box-D {
    background: #7b1315;
    border: 10px;
    border: 2px solid rgba(255, 0, 0, .75);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 13px rgba(255, 0, 0, .75)
}

.Mobile-Style .ranking-info-box-D,
.Mobile-Style .ranking-info-box-VIP {
    animation: showInfoAnimate .3s ease-in-out 0s, fade .5s ease-in-out 0s !important;
    height: auto;
    margin-top: -5vh !important;
    width: 99%
}

.Mobile-Style .ranking-info-box-VIP,
.Mobile-Style .ranking-info-box-VVIP {
    background: #973a20;
    border: 10px;
    border: 2px solid rgba(255, 230, 141, .75);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 13px rgba(255, 230, 141, .75)
}

.Mobile-Style .ranking-info-box-VVIP {
    animation: showInfoAnimate .3s ease-in-out 0s, fade .5s ease-in-out 0s !important;
    height: auto;
    margin-top: -5vh !important;
    width: 99%
}

.Mobile-Style .ranking-info-text-1 {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 2
}

.Mobile-Style .ranking-info-text-1,
.Mobile-Style .ranking-info-text-2 {
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(.1rem .18rem .01rem #501414);
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 1000
}

.Mobile-Style .ranking-info-text-2 {
    background: linear-gradient(180deg, #f2fcff, #009dd8);
    -webkit-background-clip: text;
    background-clip: text
}

.Mobile-Style .img-shadow,
.Mobile-Style .ranking-img {
    filter: drop-shadow(.1rem .18rem .01rem rgba(0, 0, 0, .8))
}

@keyframes nextRankReward {
    0% {
        transform: translateX(300px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes rotation {
    to {
        transform: rotatey(1turn)
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#none-scrollbar::-webkit-scrollbar {
    display: none
}

@keyframes animatedgradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@keyframes upLevelAnimation {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 300% 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes showRewardAnimateCom {
    0% {
        transform: translateY(120px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes showInfoAnimate {
    0% {
        transform: translateY(-70px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes showInfoAnimateCom {
    0% {
        transform: translateY(-120px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.Com-Style .flipX {
    animation: anim-flipX 1.5s ease infinite
}

@keyframes anim-flipX {
    0% {
        opacity: 0;
        transform: rotateX(90def)
    }

    50% {
        opacity: 1;
        transform: rotateX(2turn)
    }

    to {
        opacity: 1;
        transform: rotateX(2turn)
    }
}

@keyframes float {
    0% {
        filter: drop-shadow(0 5px 15px 0 rgba(0, 0, 0, .6));
        transform: translatey(0)
    }

    50% {
        filter: drop-shadow(0 25px 15px 0 rgba(0, 0, 0, .2));
        transform: translatey(-10px)
    }

    to {
        filter: drop-shadow(0 5px 15px 0 rgba(0, 0, 0, .6));
        transform: translatey(0)
    }
}

@keyframes wiggle {

    0%,
    7% {
        transform: rotate(0)
    }

    15% {
        transform: rotate(-15deg)
    }

    20% {
        transform: rotate(10deg)
    }

    25% {
        transform: rotate(-10deg)
    }

    30% {
        transform: rotate(6deg)
    }

    35% {
        transform: rotate(-4deg)
    }

    40%,
    to {
        transform: rotate(0)
    }
}

@media(min-width:851px)and (max-width:1070px) {
    .Mobile-Style .next-rank-reward-box {
        padding: 8px 5px 8px 2px !important
    }

    .Mobile-Style .next-rank-relative {
        left: 5px !important;
        top: 20px !important
    }

    .Mobile-Style .next-rank-reward-box:after {
        height: calc(100% + 10px) !important;
        left: -4.2px !important;
        top: -5px !important;
        width: calc(100% + 10px) !important
    }

    .Mobile-Style .current-ranking-box-mobile-A:after,
    .Mobile-Style .current-ranking-box-mobile-B:after,
    .Mobile-Style .current-ranking-box-mobile-C:after,
    .Mobile-Style .current-ranking-box-mobile-D:after,
    .Mobile-Style .current-ranking-box-mobile-VIP:after {
        height: calc(100% + 12px) !important;
        left: -6px !important;
        top: -5px !important;
        width: calc(100% + 12px) !important
    }

    .Mobile-Style .load-level-box {
        margin-bottom: 19px !important;
        margin-top: 0 !important
    }

    .Mobile-Style #next-reward-mobile,
    .Mobile-Style .rank-reward-height {
        border-radius: 13px !important;
        max-width: 14vw !important;
        min-height: 3.4vh !important
    }

    .Mobile-Style .rank-reward-box-img {
        margin-right: 8px !important;
        max-width: 40px !important;
        width: 100% !important
    }

    .Mobile-Style #rank-info-reward-mobile {
        border-radius: 10px !important;
        font-size: 3vw !important;
        min-height: 43px !important;
        min-width: 110px !important;
        padding: 5px 0 !important
    }

    .Mobile-Style .box-reward-position {
        margin-bottom: 1.5vh !important;
        margin-left: .5rem !important;
        margin-top: 4vh !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2,
    .Mobile-Style .stat-main-current-number-mobile {
        line-height: 1 !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 20px !important
    }

    .Mobile-Style .rank-info-box-bottom-margin {
        margin-bottom: 25px !important
    }

    .Mobile-Style .lock-img-mobile {
        height: auto !important;
        margin-top: 24px !important;
        max-width: 100px !important;
        width: 100% !important
    }

    .Mobile-Style .rank-info-bottom-responsive {
        margin-bottom: 2rem !important
    }

    .Mobile-Style .rankInfo-banner-mobile {
        height: auto !important;
        margin-bottom: 10px !important;
        margin-top: 15px !important;
        max-width: 800px !important;
        width: 100% !important
    }

    .Mobile-Style .main-box-margin {
        margin-bottom: 5px !important;
        margin-top: 12px !important
    }

    .Mobile-Style #up-level-box-mobile {
        border-radius: 20px !important;
        font-size: 3.8vw !important;
        height: 70px !important;
        width: 200px !important
    }

    .Mobile-Style .up-level-box-mobile-border:after {
        border-radius: 25px !important;
        content: "" !important;
        height: calc(100% + var(--borderWidth)*2 + 2px) !important;
        left: -6px !important;
        position: absolute !important;
        top: -5.5px !important;
        width: calc(100% + var(--borderWidth)*2 + 3px) !important
    }

    .Mobile-Style .banner-img-margin {
        margin-top: 10px !important
    }

    .Mobile-Style .banner-img {
        height: auto !important;
        margin-right: 20px !important;
        width: 60px !important
    }

    .Mobile-Style .max-level-img {
        height: auto !important;
        width: 200px !important
    }

    .Mobile-Style .margin-up-level-box {
        margin-bottom: 30px !important
    }

    .Mobile-Style .max-level-margin {
        margin: 30px 0 !important
    }

    .Mobile-Style #max-level-box-mobile {
        border-radius: 15px !important;
        font-size: 3.3vw !important;
        height: 60px !important;
        width: 200px !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        border-radius: 20px !important;
        content: "" !important;
        height: calc(100% + var(--borderWidth)*2 + 2px) !important;
        left: -6px !important;
        position: absolute !important;
        top: -4.5px !important;
        width: calc(100% + var(--borderWidth)*2 + 3px) !important
    }

    .Mobile-Style .ranking-info-reponsive {
        margin-bottom: 3vh !important;
        margin-top: 2vh !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 8px !important;
        margin-top: 30px !important
    }

    .Mobile-Style .coin-money-require-margin {
        margin-top: 20px !important
    }

    .Mobile-Style .level-box-height {
        margin-top: 0 !important
    }

    .Mobile-Style .next-level-text-box {
        height: auto !important;
        margin-top: 18px !important
    }

    .Mobile-Style .img-margin {
        margin: 28px 0 !important
    }

    .Mobile-Style .stat-box-margin {
        margin-top: 2rem !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2 {
        font-size: 3.5vw !important;
        margin-left: .7rem !important
    }

    .Mobile-Style .underline {
        height: 5px !important;
        margin-bottom: 15px !important;
        margin-top: 20px !important
    }

    .Mobile-Style .Rank-0-box,
    .Mobile-Style .Rank-A-box,
    .Mobile-Style .Rank-B-box,
    .Mobile-Style .Rank-C-box,
    .Mobile-Style .Rank-D-box,
    .Mobile-Style .Rank-VIP-box,
    .Mobile-Style .Rank-VVIP-box {
        font-size: 3.5vw !important;
        font-weight: 1000 !important;
        height: 163px !important;
        margin-top: 10px !important
    }

    .Mobile-Style .ranking-info-box-A,
    .Mobile-Style .ranking-info-box-B,
    .Mobile-Style .ranking-info-box-C,
    .Mobile-Style .ranking-info-box-D,
    .Mobile-Style .ranking-info-box-VIP,
    .Mobile-Style .ranking-info-box-VVIP {
        border-radius: 0 0 40px 40px !important;
        height: auto !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.3vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .stat-current-mobile,
    .Mobile-Style .stat-full-bg-mobile {
        height: 73px !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        width: 40px !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: 60px !important;
        margin-right: 10px !important;
        width: 70px !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        filter: drop-shadow(.1rem .18rem .01rem rgba(0, 0, 0, .8)) !important;
        font-size: 3.3vw !important
    }

    .Mobile-Style .ranking-text-box-mobile {
        font-size: 4.5vw !important;
        padding: 10px 20px !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 11px 0 0 11px !important;
        height: 62px !important;
        margin: 0 5px !important
    }

    .Mobile-Style .stat-bg-margin {
        margin: 15px 0 !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 6px !important;
        --margin: 8px !important;
        border-radius: 20px !important;
        height: 60px !important;
        width: 217px !important;
        width: calc((var(--width) + var(--margin))*15.5) !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 100px !important;
        height: 46px !important;
        margin: 0 4px !important;
        width: 6px !important
    }

    .Mobile-Style .All-Ranking-Level {
        font-size: 4.5vw !important;
        margin-bottom: 2.5rem !important;
        margin-top: 3.2rem !important
    }

    .Mobile-Style .up-level-btn {
        border-radius: 15px !important;
        box-shadow: 0 1px 25px rgba(255, 240, 72, .75) !important;
        display: flex !important;
        font-size: 5vw !important;
        height: auto !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        max-width: 250px !important;
        min-height: 50px !important;
        padding: 20px 0 !important;
        text-align: center !important;
        width: 100% !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3.8vw !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 13px !important;
        font-size: 4vw !important;
        max-width: 200px !important;
        min-width: 200px !important;
        padding: 15px 20px !important
    }

    .Mobile-Style .box-info-position {
        margin-top: 10px !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 10px !important
    }

    .Mobile-Style .box-info-position {
        margin-top: 3vh !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 33px 0 !important;
        max-width: 190px !important
    }

    .Mobile-Style .rank-info-box-bottom-margin {
        margin-bottom: 2rem !important
    }
}

@media(min-width:601px)and (max-width:850px) {
    .Mobile-Style .Reward-Button {
        margin-top: 7px !important
    }

    .Mobile-Style .next-rank-reward-box {
        min-width: 200px !important;
        width: auto !important
    }

    .Mobile-Style .next-rank-relative {
        left: 0 !important;
        top: 15px !important
    }

    .Mobile-Style .next-rank-reward-box:after {
        height: calc(100% + 8px) !important;
        left: -4.2px !important;
        top: -3.8px !important;
        width: calc(100% + 8.5px) !important
    }

    .Mobile-Style .current-ranking-box-mobile-A:after,
    .Mobile-Style .current-ranking-box-mobile-B:after,
    .Mobile-Style .current-ranking-box-mobile-C:after,
    .Mobile-Style .current-ranking-box-mobile-D:after,
    .Mobile-Style .current-ranking-box-mobile-VIP:after {
        height: calc(100% + 12px) !important;
        left: -6px !important;
        top: -5px !important;
        width: calc(100% + 12px) !important
    }

    .Mobile-Style #next-reward-mobile,
    .Mobile-Style .rank-reward-height {
        border-radius: 13px !important;
        max-width: 14vw !important;
        min-height: 3.7vh !important
    }

    .Mobile-Style #rank-info-reward-mobile {
        border-radius: 10px !important;
        font-size: 3vw !important;
        min-height: 35px !important;
        min-width: 100px !important;
        padding: 5px 0 !important
    }

    .Mobile-Style .box-reward-position {
        margin-bottom: .8vh !important;
        margin-left: .3rem !important;
        margin-top: 1.5vh !important
    }

    .Mobile-Style .rank-reward-box-img {
        margin-right: 8px;
        max-width: 40px !important;
        width: 100% !important
    }

    .Mobile-Style .main-box-margin {
        margin: 5px 0 !important
    }

    .Mobile-Style .reward-box-margin {
        margin-bottom: 5px !important;
        margin-top: 0 !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 37px !important
    }

    .Mobile-Style .lock-img-mobile {
        height: auto !important;
        margin-top: 15px !important;
        max-width: 70px !important;
        width: 100% !important
    }

    .Mobile-Style .rankInfo-banner-mobile {
        height: auto !important;
        margin-bottom: 30px !important;
        max-width: 600px !important;
        width: 100% !important
    }

    .Mobile-Style .rank-info-bottom-responsive {
        margin-bottom: 1rem !important
    }

    .Mobile-Style .rank-info-box-bottom-margin {
        margin-bottom: 1.2rem !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2,
    .Mobile-Style .stat-main-current-number-mobile {
        line-height: 1 !important
    }

    .Mobile-Style #up-level-box-mobile {
        border-radius: 15px !important;
        font-size: 3.5vw !important;
        height: 50px !important;
        width: 160px !important
    }

    .Mobile-Style .banner-img-margin {
        margin-top: 10px !important
    }

    .Mobile-Style .banner-img {
        width: 50px !important
    }

    .Mobile-Style .banner-img-margin {
        margin-top: 20px !important
    }

    .Mobile-Style .banner-img {
        height: auto !important;
        margin-right: 15px !important;
        width: 40px !important
    }

    .Mobile-Style .max-level-margin {
        margin: 20px 0 !important
    }

    .Mobile-Style .max-level-img {
        height: auto !important;
        width: 135px !important
    }

    .Mobile-Style #max-level-box-mobile {
        border-radius: 15px !important;
        font-size: 3.2vw !important;
        font-weight: 1000 !important;
        height: 40px !important;
        width: 150px !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        border-radius: 20px !important;
        content: "" !important;
        height: calc(100% + var(--borderWidth)*2) !important;
        left: -5.5px !important;
        position: absolute !important;
        top: -5px !important;
        width: calc(100% + var(--borderWidth)*2 + 1px) !important
    }

    .Mobile-Style .box-info-position {
        margin-top: 15px !important
    }

    .Mobile-Style .up-level-box-mobile-border:after {
        border-radius: 20px !important;
        content: "" !important;
        height: calc(100% + var(--borderWidth)*2) !important;
        left: -5.5px !important;
        position: absolute !important;
        top: -5px !important;
        width: calc(100% + var(--borderWidth)*2 + 1px) !important
    }

    .Mobile-Style .margin-up-level-box {
        margin-bottom: 20px !important
    }

    .Mobile-Style .img-unrank {
        height: 120px !important;
        margin: 20px 0 !important;
        width: 148px !important
    }

    .Mobile-Style .coin-money-require-margin {
        margin-top: 8px !important
    }

    .Mobile-Style .ranking-img {
        height: auto !important;
        width: 20vw !important
    }

    .Mobile-Style .stat-bg-margin {
        margin: 15px 0 !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 30px !important
    }

    .Mobile-Style .next-level-text-box {
        height: 50px !important
    }

    .Mobile-Style .info-margin {
        margin-top: 10px !important
    }

    .Mobile-Style .stat-box-margin {
        margin-bottom: 2.3rem !important;
        margin-top: 3rem !important
    }

    .Mobile-Style .up-level-btn {
        border-radius: 15px !important;
        box-shadow: 0 1px 15px rgba(255, 240, 72, .75) !important;
        display: flex !important;
        font-size: 4vw !important;
        height: auto !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
        max-width: 160px !important;
        min-height: 50px !important;
        padding: 8px 3px !important;
        text-align: center !important;
        width: 100% !important
    }

    .Mobile-Style .ranking-info-reponsive {
        margin-bottom: 4vh !important
    }

    .Mobile-Style .underline {
        height: 5px !important;
        margin-bottom: 30px !important;
        margin-top: 20px !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2 {
        font-size: 3.5vw !important;
        margin-left: .5rem !important
    }

    .Mobile-Style .Rank-0-box,
    .Mobile-Style .Rank-A-box,
    .Mobile-Style .Rank-B-box,
    .Mobile-Style .Rank-C-box,
    .Mobile-Style .Rank-D-box,
    .Mobile-Style .Rank-VIP-box,
    .Mobile-Style .Rank-VVIP-box {
        font-size: 3.5vw !important;
        font-weight: 1000 !important;
        height: 120px !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 10px !important;
        font-size: 4vw !important;
        height: 50px !important;
        max-width: 140px !important;
        min-width: 140px !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.3vw !important;
        line-height: 1 !important;
        margin-left: 8px !important
    }

    .Mobile-Style .stat-current-mobile,
    .Mobile-Style .stat-full-bg-mobile {
        height: 55px !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        width: 40px !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: 50px !important;
        margin-right: 10px !important;
        width: 60px !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 2.8vw !important
    }

    .Mobile-Style .ranking-text-box-mobile {
        font-size: 3.4vw !important;
        padding: 4px 10px !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 8px !important
    }

    .Mobile-Style .load-level-box {
        margin-bottom: 15px !important;
        margin-top: 0 !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 12px !important;
        height: 40px !important;
        margin: 0 3px !important;
        width: 5px !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 5px !important;
        --margin: 6px !important;
        border-radius: 15px !important;
        height: 50px !important;
        width: 170.5px !important;
        width: calc((var(--width) + var(--margin))*15.5) !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3.8vw !important
    }

    .Mobile-Style .ranking-img {
        height: 70px !important;
        width: 80px !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 15px 0 !important;
        max-width: 148px !important
    }

    .Mobile-Style .All-Ranking-Level {
        margin-bottom: 2.5rem !important;
        margin-top: 1.7rem !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 11px !important;
        font-size: 3.7vw !important;
        padding-bottom: 4px !important;
        padding-top: 4px !important
    }

    .Mobile-Style .ranking-info-box-A,
    .Mobile-Style .ranking-info-box-B,
    .Mobile-Style .ranking-info-box-C,
    .Mobile-Style .ranking-info-box-D,
    .Mobile-Style .ranking-info-box-VIP,
    .Mobile-Style .ranking-info-box-VVIP {
        border-radius: 0 0 30px 30px !important;
        height: auto !important
    }

    .Mobile-Style .level-box-height {
        height: auto !important
    }
}

@media(min-width:851px)and (max-width:950px) {
    .Mobile-Style #rank-info-reward-mobile {
        font-size: 3vw !important;
        min-height: 35px !important;
        min-width: 100px !important;
        padding: 5px 0 !important
    }

    .Mobile-Style .box-reward-position {
        margin-bottom: 1.1vh !important;
        margin-top: 3.3vh !important
    }

    .Mobile-Style .rank-reward-box-img {
        margin-right: 8px;
        max-width: 40px !important;
        width: 100% !important
    }

    .Mobile-Style .img-unrank {
        height: auto !important;
        margin: 20px 0 !important;
        width: 168px !important
    }

    .Mobile-Style .box-info-position {
        margin-top: 1.4vh !important
    }

    .Mobile-Style .rank-info-bottom-responsive {
        margin-bottom: 1.4rem !important
    }

    .Mobile-Style .next-level-text-box {
        height: 50px !important
    }

    .Mobile-Style .info-margin {
        margin-top: 10px !important
    }

    .Mobile-Style .stat-box-margin {
        margin-top: 2.3rem !important
    }

    .Mobile-Style .up-level-btn {
        border-radius: 15px !important;
        box-shadow: 0 1px 15px rgba(255, 240, 72, .75) !important;
        display: flex !important;
        font-size: 4vw !important;
        height: auto !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
        max-width: 160px !important;
        min-height: 50px !important;
        padding: 8px 3px !important;
        text-align: center !important;
        width: 100% !important
    }

    .Mobile-Style .ranking-info-reponsive {
        margin-bottom: 1.5vh !important
    }

    .Mobile-Style .underline {
        height: 5px !important;
        margin: 10px 0 !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2 {
        font-size: 3.5vw !important;
        margin-left: .5rem !important
    }

    .Mobile-Style .Rank-0-box,
    .Mobile-Style .Rank-A-box,
    .Mobile-Style .Rank-B-box,
    .Mobile-Style .Rank-C-box,
    .Mobile-Style .Rank-D-box,
    .Mobile-Style .Rank-VIP-box,
    .Mobile-Style .Rank-VVIP-box {
        font-size: 3.5vw !important;
        font-weight: 1000 !important;
        height: 120px !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 10px !important;
        font-size: 4vw !important;
        height: 50px !important;
        max-width: 140px !important;
        min-width: 140px !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .stat-main-current-number-mobile {
        font-size: 3.1vw !important
    }

    .Mobile-Style .stat-current-mobile,
    .Mobile-Style .stat-full-bg-mobile {
        height: 65px !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        width: 37px !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: 50px !important;
        width: 60px !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 3vw !important
    }

    .Mobile-Style .ranking-text-box-mobile {
        font-size: 3.4vw !important;
        padding: 4px 10px !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        border-radius: 15px !important;
        height: 50px !important;
        max-width: 300px !important
    }

    .Mobile-Style .load-level-box {
        margin-bottom: 18px !important;
        margin-top: 0 !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        border-radius: 15px !important;
        max-width: 304px !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3.3vw !important
    }

    .Mobile-Style .ranking-img {
        height: 70px !important;
        width: 80px !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 20px 0 !important;
        width: 168px !important
    }

    .Mobile-Style .All-Ranking-Level {
        margin-bottom: 1.7rem !important;
        margin-top: 1.7rem !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 11px !important;
        font-size: 3.4vw !important;
        max-width: 155px !important;
        min-width: 155px !important;
        padding-bottom: 4px !important;
        padding-top: 4px !important
    }

    .Mobile-Style .ranking-info-box-A,
    .Mobile-Style .ranking-info-box-B,
    .Mobile-Style .ranking-info-box-C,
    .Mobile-Style .ranking-info-box-D,
    .Mobile-Style .ranking-info-box-VIP,
    .Mobile-Style .ranking-info-box-VVIP {
        border-radius: 30px !important;
        height: auto !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 100px !important;
        height: 43.5px !important;
        margin: 0 3px !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 5px !important
    }
}

@media(min-width:480px)and (max-width:572px) {
    .Mobile-Style .box-info-position {
        margin-top: 7.5px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 10px !important
    }

    .Mobile-Style .stat-bg-margin {
        margin: 25px 0 !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 8px !important;
        font-size: 4.2vw !important;
        max-width: 110px !important;
        min-width: 110px !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3.6vw !important
    }

    .Mobile-Style .max-level-margin {
        margin: 20px 0 !important
    }

    .Mobile-Style .max-level-img {
        height: auto !important;
        width: 100px !important
    }

    .Mobile-Style #max-level-box-mobile {
        font-size: 2.5vw !important;
        font-weight: 1000 !important;
        height: 50px !important;
        padding: 15px 0 !important;
        width: 100px !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        content: "" !important;
        height: calc(97% + var(--borderWidth)*2) !important;
        position: absolute !important;
        right: -1px !important;
        top: -3.5px !important;
        width: calc(102% + var(--borderWidth)*2) !important
    }

    .Mobile-Style .ranking-info-reponsive {
        margin-bottom: .5vh !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2 {
        font-size: 4.3vw !important
    }

    .Mobile-Style .Rank-0-box,
    .Mobile-Style .Rank-A-box,
    .Mobile-Style .Rank-B-box,
    .Mobile-Style .Rank-C-box,
    .Mobile-Style .Rank-D-box,
    .Mobile-Style .Rank-VIP-box,
    .Mobile-Style .Rank-VVIP-box {
        font-size: 4.8vw !important;
        font-weight: 1000 !important;
        height: 90px !important
    }

    .Mobile-Style .stat-current-mobile,
    .Mobile-Style .stat-full-bg-mobile {
        height: 35px !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.6vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 15px 0 !important;
        width: 110px !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        margin-bottom: 1px !important;
        width: 20px !important
    }

    .Mobile-Style .ranking-text-box-mobile {
        font-size: 4vw !important;
        padding: 0 12px !important
    }

    .Mobile-Style .load-level-box {
        margin-top: 15px !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 3px !important;
        --margin: 5px !important;
        height: 35px !important;
        width: 128px !important;
        width: calc((var(--width) + var(--margin))*16) !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        --width: 3px !important;
        --margin: 5px !important;
        border-radius: 10px !important;
        left: -3px !important;
        width: 134.4px !important;
        width: calc((var(--width) + var(--margin))*16.8) !important
    }

    .Mobile-Style .next-level-text-box {
        margin-top: 5px !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 100px !important;
        height: 25px !important;
        margin: 0 2.5px !important;
        width: 3px !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 3.3vw !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: auto !important;
        width: 35px !important
    }

    .Mobile-Style .ranking-img {
        height: auto !important;
        width: 13.5vw !important
    }

    .Mobile-Style .All-Ranking-Level {
        font-size: 6vw !important;
        margin: .8rem 0 !important
    }

    .Mobile-Style .stat-box-margin {
        margin-bottom: 1.2rem !important;
        margin-top: 2rem !important
    }

    .Mobile-Style .ranking-info-box-A,
    .Mobile-Style .ranking-info-box-B,
    .Mobile-Style .ranking-info-box-C,
    .Mobile-Style .ranking-info-box-D,
    .Mobile-Style .ranking-info-box-VIP,
    .Mobile-Style .ranking-info-box-VVIP {
        height: auto !important
    }

    .Mobile-Style .underline {
        height: 3.4px !important;
        margin-bottom: 10px !important
    }

    .Mobile-Style .next-level-text-box {
        margin-top: 15px !important
    }
}

@media(min-width:400px)and (max-width:420px) {
    .Mobile-Style .box-reward-position {
        margin-top: 1.4vh !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        --width: 2px !important;
        --margin: 3px !important;
        border-radius: 10px !important;
        left: 4px !important;
        width: 84.1px !important;
        width: calc((var(--width) + var(--margin))*17 - .9px) !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 15px 0 !important;
        max-width: 80px !important
    }
}

@media only screen and (max-width:600px) {
    .Mobile-Style #next-reward-mobile {
        max-height: 19px !important;
        max-width: 50px !important
    }

    .Mobile-Style .box-reward-position {
        margin-bottom: 4px !important;
        margin-left: .6rem !important;
        margin-top: 15px !important
    }

    .Mobile-Style .main-box-margin {
        margin: 2px 0 !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 15px !important
    }

    .Mobile-Style .lock-img-mobile {
        height: auto !important;
        margin-top: 2px !important;
        max-width: 35px !important;
        width: 100% !important
    }

    .Mobile-Style .stat-bg-margin {
        margin: 3px 0 !important
    }

    .Mobile-Style .banner-img-margin {
        margin-top: 3px !important
    }

    .Mobile-Style .banner-img {
        height: 20px !important;
        margin-right: 10px !important;
        width: 20px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin: 10px 0 !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 2.5px !important
    }

    .Mobile-Style .margin-up-level-box {
        margin-bottom: 20px !important
    }

    .Mobile-Style #up-level-box-mobile {
        border-radius: 9px !important;
        width: 90px !important
    }

    .Mobile-Style #max-level-box-mobile {
        font-size: 3.3vw !important;
        font-weight: 1000 !important;
        height: 25px !important;
        padding: 10px !important;
        width: 60 !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        content: "" !important;
        height: calc(86% + var(--borderWidth)*2) !important;
        left: -2.8px !important;
        position: absolute !important;
        top: -3.3px !important;
        width: calc(95% + var(--borderWidth)*2) !important
    }

    .Mobile-Style .up-level-box-mobile-border:after {
        border-radius: 11px !important;
        content: "" !important;
        height: calc(100% + 6px) !important;
        left: -3px !important;
        position: absolute !important;
        top: -2.7px !important;
        width: calc(100% + 6px) !important
    }

    .Mobile-Style .box-info-position {
        margin-top: 7.5px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 10px !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 8px !important;
        font-size: 3.5vw !important;
        max-height: 25px !important;
        max-width: 70px !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 4.3vw !important
    }

    .Mobile-Style .ranking-info-reponsive {
        margin-bottom: .5vh !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2 {
        font-size: 4.3vw !important
    }

    .Mobile-Style .Rank-0-box,
    .Mobile-Style .Rank-A-box,
    .Mobile-Style .Rank-B-box,
    .Mobile-Style .Rank-C-box,
    .Mobile-Style .Rank-D-box,
    .Mobile-Style .Rank-VIP-box,
    .Mobile-Style .Rank-VVIP-box {
        font-size: 4.8vw !important;
        font-weight: 1000 !important;
        height: 70px !important
    }

    .Mobile-Style .stat-current-mobile,
    .Mobile-Style .stat-full-bg-mobile {
        height: 35px !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.6vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 15px 0 !important;
        max-width: 80px !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        margin-bottom: 1px !important;
        width: 20px !important
    }

    .Mobile-Style .ranking-text-box-mobile {
        font-size: 4vw !important;
        padding: 0 12px !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 12px !important;
        height: 16px !important;
        margin: 0 1.5px !important;
        width: 2px !important
    }

    .Mobile-Style .load-level-box {
        margin-bottom: 9px !important;
        margin-top: 0 !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 2px !important;
        --margin: 3px !important;
        height: 26px !important;
        width: 100px !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        --width: 2px !important;
        --margin: 3px !important;
        border-radius: 10px !important;
        left: -2px !important;
        width: 78px !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 2.8vw !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: 30px !important;
        margin-right: 10px !important;
        width: 40px !important
    }

    .Mobile-Style .ranking-img {
        height: auto !important;
        width: 13.5vw !important
    }

    .Mobile-Style .All-Ranking-Level {
        font-size: 6vw !important;
        margin: .8rem 0 !important
    }

    .Mobile-Style .stat-box-margin {
        margin-bottom: 1.2rem !important;
        margin-top: 1.5rem !important
    }

    .Mobile-Style .ranking-info-box-A,
    .Mobile-Style .ranking-info-box-B,
    .Mobile-Style .ranking-info-box-C,
    .Mobile-Style .ranking-info-box-D,
    .Mobile-Style .ranking-info-box-VIP,
    .Mobile-Style .ranking-info-box-VVIP {
        height: auto !important
    }

    .Mobile-Style .underline {
        height: 3.4px !important;
        margin-bottom: 4px !important
    }

    .Mobile-Style .next-level-text-box {
        height: auto !important;
        margin-top: 1px !important
    }

    .Mobile-Style .rankInfo-banner-mobile {
        height: auto !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        max-width: 250px !important;
        width: 100% !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3vw !important
    }

    .Mobile-Style .ranking-info-text-1,
    .Mobile-Style .ranking-info-text-2 {
        font-size: 2.3vw !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 !important
    }
}

@media(min-width:390px)and (max-width:420px) {
    .Mobile-Style .next-rank-relative {
        right: 25px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 20px !important
    }

    .Mobile-Style #next-reward-mobile {
        max-height: 18px !important;
        max-width: 50px !important
    }

    .Mobile-Style .rankInfo-banner-mobile {
        height: auto !important;
        margin-bottom: 10px !important;
        margin-top: 5px !important;
        max-width: 280px !important;
        width: 100% !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 2px !important;
        --margin: 3px !important;
        border-radius: 8px !important;
        height: 26px !important;
        width: 80px !important;
        width: calc((var(--width) + var(--margin))*16) !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        --width: 2px !important;
        --margin: 3px !important;
        left: -3.5px !important;
        width: 85px !important;
        width: calc((var(--width) + var(--margin))*17) !important
    }

    .Mobile-Style .underline {
        margin-bottom: 0 !important
    }
}

@media only screen and (max-width:375px) {
    .Mobile-Style #next-reward-mobile {
        max-height: 18px !important;
        max-width: 50px !important
    }

    .Mobile-Style .box-info-position {
        margin-top: 0 !important
    }

    .Mobile-Style .box-reward-position {
        margin-bottom: .5vh !important;
        margin-top: 1vh !important
    }

    .Mobile-Style .lock-img-mobile {
        height: auto !important;
        margin-top: 6px !important;
        max-width: 30px !important;
        width: 100% !important
    }

    .Mobile-Style .level-box-height {
        height: auto !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        margin-right: 8px !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        border-radius: 5px !important;
        height: 30px !important;
        height: 27px !important;
        max-width: 77px !important
    }

    .Mobile-Style .rankInfo-banner-mobile {
        height: auto !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        max-width: 250px !important;
        width: 100% !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 20px !important;
        height: 16px !important;
        margin: 0 1.5px !important;
        width: 2px !important
    }

    .Mobile-Style #max-level-box-mobile {
        font-size: 2.3vw !important;
        font-weight: 1000 !important;
        height: 20px !important;
        padding: 1px 0 !important;
        width: 60px !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        content: "" !important;
        height: calc(78% + var(--borderWidth)*2) !important;
        left: -2.5px !important;
        position: absolute !important;
        top: -3px !important;
        width: calc(93% + var(--borderWidth)*2) !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 2px !important;
        --margin: 3px !important;
        border-radius: 8px !important;
        height: 26px !important;
        width: 80px !important;
        width: calc((var(--width) + var(--margin))*16) !important
    }

    .Mobile-Style .stat-box-margin {
        margin-bottom: 1.1rem !important;
        margin-top: 1.3rem !important
    }

    .Mobile-Style #up-level-box-mobile {
        font-size: 4vw !important;
        height: 30px !important;
        width: 80px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin: 10px 0 !important
    }

    .Mobile-Style .up-level-box-mobile-border:after {
        content: "" !important;
        left: -3.5px !important;
        position: absolute !important;
        top: -3.4px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin: 11px 0 !important
    }

    .Mobile-Style .level-box-height {
        height: 50px !important
    }

    .Mobile-Style .next-level-text-box {
        height: auto !important;
        margin-top: 0 !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.8vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3.5vw !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 2.5vw !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        margin-bottom: 2px !important;
        width: 15px !important
    }

    .Mobile-Style .stat-main-current-number-mobile {
        font-size: 4vw !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 7px !important;
        font-size: 4vw !important;
        height: 28px !important;
        max-width: 70px !important;
        min-width: 70px !important
    }

    .Mobile-Style .underline {
        height: 3px !important;
        margin-bottom: 0 !important
    }

    .Mobile-Style .All-Ranking-Level {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }

    .Mobile-Style .load-level-box {
        margin-bottom: 7.5px !important;
        margin-top: 0 !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: 25px !important;
        margin-right: 10px !important;
        width: 35px !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 .5px !important
    }

    .Mobile-Style .stat-bg-margin {
        margin: 4px 0 !important
    }

    .Mobile-Style .ranking-info-text-1,
    .Mobile-Style .ranking-info-text-2 {
        font-size: 2.2vw !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .ranking-img-mobile {
        height: auto !important;
        margin: 15px 0 !important;
        max-width: 60px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 15px !important
    }
}

@media(min-width:380px)and (max-width:395px) {
    .Mobile-Style .box-reward-position {
        margin-left: .6em !important;
        margin-top: 1.2rem !important
    }

    .Mobile-Style .main-box-margin {
        margin: 2px 0 !important
    }

    .Mobile-Style .next-rank-relative {
        right: 34px !important
    }

    .Mobile-Style .banner-img-margin {
        margin-top: 3px !important
    }

    .Mobile-Style .banner-img {
        height: 20px !important;
        margin-right: 10px !important;
        width: 20px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin: 10px 0 !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 2.5px !important
    }

    .Mobile-Style .margin-up-level-box {
        margin-bottom: 20px !important
    }

    .Mobile-Style #up-level-box-mobile {
        font-size: 3.5vw !important;
        width: 70px !important
    }

    .Mobile-Style #max-level-box-mobile {
        font-size: 3.3vw !important;
        font-weight: 1000 !important;
        padding: 5px 10px !important;
        width: 60 !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        content: "" !important;
        height: calc(88% + var(--borderWidth)*2) !important;
        left: -3.5px !important;
        position: absolute !important;
        top: -3.5px !important;
        width: calc(97% + var(--borderWidth)*2) !important
    }

    .Mobile-Style .up-level-box-mobile-border:after {
        content: "" !important;
        height: calc(100% + 5px) !important;
        left: -.16rem !important;
        position: absolute !important;
        top: -.185rem !important;
        width: calc(100% + 5.5px) !important
    }

    .Mobile-Style .box-info-position {
        margin-top: .8rem !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin-bottom: 10px !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 8px !important;
        font-size: 4.2vw !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 4.3vw !important
    }

    .Mobile-Style .ranking-info-reponsive {
        margin-bottom: .5vh !important
    }

    .Mobile-Style .deposite-stat-text-1,
    .Mobile-Style .deposite-stat-text-2 {
        font-size: 4.3vw !important
    }

    .Mobile-Style .Rank-0-box,
    .Mobile-Style .Rank-A-box,
    .Mobile-Style .Rank-B-box,
    .Mobile-Style .Rank-C-box,
    .Mobile-Style .Rank-D-box,
    .Mobile-Style .Rank-VIP-box,
    .Mobile-Style .Rank-VVIP-box {
        font-size: 4.8vw !important;
        font-weight: 1000 !important;
        height: 70px !important
    }

    .Mobile-Style .stat-current-mobile,
    .Mobile-Style .stat-full-bg-mobile {
        height: 35px !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.6vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        margin-bottom: 1px !important;
        width: 20px !important
    }

    .Mobile-Style .ranking-text-box-mobile {
        font-size: 4vw !important;
        padding: 0 12px !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 12px !important;
        height: 16px !important;
        margin: 0 1.5px !important;
        width: 2px !important
    }

    .Mobile-Style .load-level-box {
        margin-bottom: 8px !important;
        margin-top: 0 !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        --width: 2px !important;
        --margin: 3px !important;
        height: 26px !important;
        width: 100px !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        --width: 2px !important;
        --margin: 3px !important;
        border-radius: 10px !important;
        left: -6.8px !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 2.5vw !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: auto !important;
        width: 35px !important
    }

    .Mobile-Style .ranking-img {
        height: auto !important;
        width: 13.5vw !important
    }

    .Mobile-Style .All-Ranking-Level {
        font-size: 6vw !important;
        margin: .8rem 0 !important
    }

    .Mobile-Style .stat-box-margin {
        margin-bottom: 1.2rem !important;
        margin-top: 2rem !important
    }

    .Mobile-Style .ranking-info-box-A,
    .Mobile-Style .ranking-info-box-B,
    .Mobile-Style .ranking-info-box-C,
    .Mobile-Style .ranking-info-box-D,
    .Mobile-Style .ranking-info-box-VIP,
    .Mobile-Style .ranking-info-box-VVIP {
        height: auto !important
    }

    .Mobile-Style .underline {
        height: 3.4px !important;
        margin-bottom: 15px !important
    }

    .Mobile-Style .next-level-text-box {
        margin-top: -5px !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3vw !important
    }

    .Mobile-Style .ranking-info-text-1,
    .Mobile-Style .ranking-info-text-2 {
        font-size: 2.2vw !important
    }

    .Mobile-Style .img-unrank,
    .Mobile-Style .next-ranking-img-grayscale-mobile {
        height: auto !important;
        width: 100% !important
    }
}

@media only screen and (max-width:360px) {
    .Mobile-Style .next-rank-relative {
        right: 34px !important
    }

    .Mobile-Style .box-reward-position {
        margin-bottom: 1px !important;
        margin-top: 8px !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        border-radius: 5px !important;
        height: 30px !important;
        height: 27px !important;
        max-width: 77px !important
    }

    .Mobile-Style .load-to-next-rank-mobile {
        border-radius: 20px !important;
        height: 16px !important;
        margin: 0 1.5px !important;
        width: 2px !important
    }

    .Mobile-Style .max-level-margin {
        margin: 8px 0 !important
    }

    .Mobile-Style .max-level-img {
        height: auto !important;
        width: 100px !important
    }

    .Mobile-Style #max-level-box-mobile {
        font-size: 3vw !important;
        font-weight: 1000 !important;
        height: 30px !important;
        padding: 15px 0 !important;
        width: 80px !important
    }

    .Mobile-Style .max-level-box-mobile-border:after {
        content: "" !important;
        height: calc(90% + var(--borderWidth)*2) !important;
        position: absolute !important;
        right: -2px !important;
        top: -3px !important;
        width: calc(95% + var(--borderWidth)*2) !important
    }

    .Mobile-Style .next-ranking-box-border-mobile {
        border-radius: 8px !important;
        height: 26px !important
    }

    .Mobile-Style .next-ranking-box-border-mobile,
    .Mobile-Style .next-ranking-box-mobile:after {
        --width: 2px !important;
        --margin: 3px !important;
        width: 80px !important;
        width: calc((var(--width) + var(--margin))*16) !important
    }

    .Mobile-Style .next-ranking-box-mobile:after {
        left: -10px !important
    }

    .Mobile-Style .stat-box-margin {
        margin-bottom: 1.1rem !important;
        margin-top: 1.5rem !important
    }

    .Mobile-Style #up-level-box-mobile {
        font-size: 4vw !important;
        height: 30px !important;
        width: 80px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin: 10px 0 !important
    }

    .Mobile-Style .up-level-box-mobile-border:after {
        content: "" !important;
        left: -3.5px !important;
        position: absolute !important;
        top: -3.4px !important
    }

    .Mobile-Style .rank-info-box-margin {
        margin: 11px 0 !important
    }

    .Mobile-Style .level-box-height {
        height: 50px !important
    }

    .Mobile-Style .next-level-text-box {
        margin-top: 8px !important
    }

    .Mobile-Style .stat-current-number-mobile {
        font-size: 3.8vw !important;
        line-height: 1 !important;
        margin-left: 5px !important
    }

    .Mobile-Style .next-ranking-text-mobile {
        font-size: 3.5vw !important
    }

    .Mobile-Style .current-ranking-title-text-mobile {
        font-size: 2.5vw !important
    }

    .Mobile-Style .coin-img {
        height: auto !important;
        margin-bottom: 2px !important;
        width: 15px !important
    }

    .Mobile-Style .stat-main-current-number-mobile {
        font-size: 4vw !important
    }

    .Mobile-Style .ranking-text-box-mobile-0,
    .Mobile-Style .ranking-text-box-mobile-A,
    .Mobile-Style .ranking-text-box-mobile-B,
    .Mobile-Style .ranking-text-box-mobile-C,
    .Mobile-Style .ranking-text-box-mobile-D,
    .Mobile-Style .ranking-text-box-mobile-VIP {
        border-radius: 7px !important;
        font-size: 4.5vw !important;
        height: 28px !important;
        max-width: 70px !important;
        min-width: 70px !important
    }

    .Mobile-Style .underline {
        height: 3px !important;
        margin-bottom: 10px !important
    }

    .Mobile-Style .load-level-box {
        margin: 15px 0 !important
    }

    .Mobile-Style .stat-current-logo-mobile {
        height: auto !important;
        width: 29px !important
    }

    .Mobile-Style .loading-margin {
        margin: 0 .5px !important
    }

    .Mobile-Style .ranking-info-text-1,
    .Mobile-Style .ranking-info-text-2 {
        font-size: 2.2vw !important
    }
}

.Com-Style .current-ranking-box-border-com-0 {
    align-items: center;
    background: #2c2c2c;
    border-radius: 14px !important;
    box-shadow: 0 0 30px hsla(0, 0%, 69%, .75);
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 287px;
    min-height: 770px;
    width: 100%
}

.Com-Style .current-ranking-box-com-0 {
    position: relative;
    z-index: 0
}

.Com-Style .current-ranking-box-com-0:after,
.Com-Style .current-ranking-box-com-0:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #313131, #464646, #707070, #c4c4c4, #707070, #464646);
    background-size: 500%;
    border-radius: 17px;
    content: "";
    height: calc(100% + 8px);
    left: 7.5px;
    max-width: 93.5%;
    position: absolute;
    top: -3.5px;
    width: 100%;
    z-index: -1
}

.Com-Style .current-ranking-box-border-com-A {
    align-items: center;
    background: #132c40;
    border-radius: 15px !important;
    box-shadow: 0 1px 30px rgba(159, 209, 255, .75);
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 287px;
    min-height: 770px;
    width: 100%
}

.Com-Style .current-ranking-box-com-A {
    position: relative;
    z-index: 0
}

.Com-Style .current-ranking-box-com-A:after,
.Com-Style .current-ranking-box-com-A:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #018dff, #298cdd, #bde4ed, #5b9cd3, #298cdd, #018dff);
    background-size: 500%;
    border-radius: 17px;
    content: "";
    height: calc(100% + 8px);
    left: 7.5px;
    max-width: 93.5%;
    position: absolute;
    top: -3.5px;
    width: 100%;
    z-index: -1
}

.Com-Style .current-ranking-box-border-com-B {
    align-items: center;
    background: #2b243d;
    border-radius: 15px !important;
    box-shadow: 0 1px 30px rgba(213, 159, 255, .75);
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 287px;
    min-height: 770px;
    width: 100%
}

.Com-Style .current-ranking-box-com-B {
    position: relative;
    z-index: 0
}

.Com-Style .current-ranking-box-com-B:after,
.Com-Style .current-ranking-box-com-B:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #8860a9, #8b6da4, #af92c7, #f2deec, #8b6da4, #8860a9);
    background-size: 500%;
    border-radius: 17px;
    content: "";
    height: calc(100% + 8px);
    left: 7.5px;
    max-width: 93.5%;
    position: absolute;
    top: -3.5px;
    width: 100%;
    z-index: -1
}

.Com-Style .current-ranking-box-border-com-C {
    align-items: center;
    background: #2b243d;
    border-radius: 15px !important;
    box-shadow: 0 1px 30px rgba(212, 141, 255, .75);
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 287px;
    min-height: 770px;
    width: 100%
}

.Com-Style .current-ranking-box-com-C {
    position: relative;
    z-index: 0
}

.Com-Style .current-ranking-box-com-C:after,
.Com-Style .current-ranking-box-com-C:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #7455a4, #5f4b7d, #d38bdf, #d4bfe4, #5f4b7d, #7455a4);
    background-size: 500%;
    border-radius: 17px;
    content: "";
    height: calc(100% + 8px);
    left: 7.5px;
    max-width: 93.5%;
    position: absolute;
    top: -3.5px;
    width: 100%;
    z-index: -1
}

.Com-Style .current-ranking-box-border-com-D {
    align-items: center;
    background: #411113;
    border-radius: 15px !important;
    box-shadow: 0 1px 30px rgba(255, 0, 0, .75);
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 287px;
    min-height: 770px;
    width: 100%
}

.Com-Style .current-ranking-box-com-D {
    position: relative;
    z-index: 0
}

.Com-Style .current-ranking-box-com-D:after,
.Com-Style .current-ranking-box-com-D:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #f04e54, #d75459, #fd3f43, #f1a5a6, #d75459, #f04e54);
    background-size: 500%;
    border-radius: 17px;
    content: "";
    height: calc(100% + 8px);
    left: 7.5px;
    max-width: 93.5%;
    position: absolute;
    top: -3.5px;
    width: 100%;
    z-index: -1
}

.Com-Style .current-ranking-box-border-com-VIP {
    align-items: center;
    background: #442610;
    border-radius: 15px !important;
    box-shadow: 0 1px 30px rgba(255, 230, 141, .75);
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 287px;
    min-height: 770px;
    width: 100%
}

.Com-Style .current-ranking-box-com-VIP {
    position: relative;
    z-index: 0
}

.Com-Style .current-ranking-box-com-VIP:after,
.Com-Style .current-ranking-box-com-VIP:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #ff771c, #e77f3a, #ff771c, #fae690, #dd742e, #e77f3a);
    background-size: 500%;
    border-radius: 17px;
    content: "";
    height: calc(100% + 8px);
    left: 7.5px;
    max-width: 93.5%;
    position: absolute;
    top: -3.5px;
    width: 100%;
    z-index: -1
}

.Com-Style .ranking-title-text {
    color: #fff;
    font-size: 1vw;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    text-align: center
}

.Com-Style .ranking-text-box-Com-0 {
    background: linear-gradient(180deg, #9d9d9d, #575757);
    color: #3b3b3b
}

.Com-Style .ranking-text-box-Com-0,
.Com-Style .ranking-text-box-Com-A {
    border-radius: 9px;
    font-size: 1vw;
    font-weight: 1000;
    height: 33px;
    padding: 3px 12px;
    width: 35%
}

.Com-Style .ranking-text-box-Com-A {
    background: linear-gradient(180deg, #bde4ed, #5b9cd3);
    color: #28447f
}

.Com-Style .ranking-text-box-Com-B {
    background: linear-gradient(180deg, #f2deec, #8860a9)
}

.Com-Style .ranking-text-box-Com-B,
.Com-Style .ranking-text-box-Com-C {
    border-radius: 9px;
    color: #4e2f91;
    font-size: 1vw;
    font-weight: 1000;
    height: 33px;
    padding: 3px 12px;
    width: 35%
}

.Com-Style .ranking-text-box-Com-C {
    background: linear-gradient(180deg, #d38bdf, #7455a4)
}

.Com-Style .ranking-text-box-Com-D {
    background: linear-gradient(180deg, #f38284, #f04e54);
    color: #7b1315
}

.Com-Style .ranking-text-box-Com-D,
.Com-Style .ranking-text-box-Com-VIP {
    border-radius: 9px;
    font-size: 1vw;
    font-weight: 1000;
    height: 33px;
    padding: 3px 12px;
    width: 35%
}

.Com-Style .ranking-text-box-Com-VIP {
    background: linear-gradient(180deg, #fae690, #f48030);
    color: #973a20
}

.Com-Style .underlineCom {
    background: #fff;
    border: 1px solid #fff;
    height: auto;
    width: 100%
}

.Com-Style .stat-box {
    background: #413564;
    border-radius: 4px;
    height: 96px;
    max-width: 245px;
    width: 100%
}

.Com-Style .font-stat-style {
    color: #fff;
    font-weight: 500;
    line-height: 1
}

.Com-Style .deposite-stat-text {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
    line-height: 26px;
    text-align: center
}

@media only screen and (min-width:2200px) {

    .Com-Style .deposite-stat-text-1,
    .Com-Style .deposite-stat-text-2 {
        font-size: .9vw !important
    }

    .Com-Style .all-ranking-text {
        font-size: 1.2vw !important
    }

    .Com-Style .ranking-text-box-Com-0,
    .Com-Style .ranking-text-box-Com-A,
    .Com-Style .ranking-text-box-Com-B,
    .Com-Style .ranking-text-box-Com-C,
    .Com-Style .ranking-text-box-Com-D,
    .Com-Style .ranking-text-box-Com-VIP {
        font-size: 1vw !important;
        height: 35px !important;
        width: 35% !important
    }
}

@media only screen and (max-width:1900px) {

    .Com-Style .deposite-stat-text-1,
    .Com-Style .deposite-stat-text-2 {
        font-size: .95vw !important
    }

    .Com-Style .banner-box,
    .Com-Style .banner-img-main {
        max-height: 230px !important
    }

    .Com-Style .all-ranking-text {
        font-size: 1.2vw !important
    }

    .Com-Style .ranking-title-text {
        font-size: 1vw !important
    }
}

@media(min-width:1650px)and (max-width:1902px) {
    .Com-Style .next-ranking-img {
        width: 90% !important
    }

    .Com-Style .ranking-text-box-Com-0,
    .Com-Style .ranking-text-box-Com-A,
    .Com-Style .ranking-text-box-Com-B,
    .Com-Style .ranking-text-box-Com-C,
    .Com-Style .ranking-text-box-Com-D,
    .Com-Style .ranking-text-box-Com-VIP {
        font-size: 1vw !important;
        height: 35px !important;
        width: 35% !important
    }

    .Com-Style .rank-tool-tip-border-0,
    .Com-Style .rank-tool-tip-border-A,
    .Com-Style .rank-tool-tip-border-B,
    .Com-Style .rank-tool-tip-border-C,
    .Com-Style .rank-tool-tip-border-D,
    .Com-Style .rank-tool-tip-border-VIP {
        right: 6.6rem !important;
        top: 9.3rem !important
    }

    .Com-Style .current-ranking-box-border-com-0,
    .Com-Style .current-ranking-box-border-com-A,
    .Com-Style .current-ranking-box-border-com-B,
    .Com-Style .current-ranking-box-border-com-C,
    .Com-Style .current-ranking-box-border-com-D,
    .Com-Style .current-ranking-box-border-com-VIP {
        max-height: 700px !important;
        min-height: 700px !important
    }

    .Com-Style .stat-current,
    .Com-Style .stat-full-bg {
        height: 50px !important
    }

    .Com-Style .banner-box,
    .Com-Style .banner-img-main {
        max-height: 230px !important
    }
}

@media only screen and (max-width:1700px) {
    .Com-Style .next-ranking-img {
        width: 90% !important
    }

    .Com-Style .next-rank-height {
        height: 90% !important
    }

    .Com-Style #up-level-box-com {
        min-width: 110px !important
    }

    .Com-Style .current-ranking-box-border-com-0,
    .Com-Style .current-ranking-box-border-com-A,
    .Com-Style .current-ranking-box-border-com-B,
    .Com-Style .current-ranking-box-border-com-C,
    .Com-Style .current-ranking-box-border-com-D,
    .Com-Style .current-ranking-box-border-com-VIP {
        min-height: 700px !important
    }

    .Com-Style .stat-current,
    .Com-Style .stat-full-bg {
        height: 50px !important
    }

    .Com-Style .banner-box,
    .Com-Style .banner-img-main {
        max-height: 260px !important
    }

    .Com-Style .ranking-text-box-Com-0,
    .Com-Style .ranking-text-box-Com-A,
    .Com-Style .ranking-text-box-Com-B,
    .Com-Style .ranking-text-box-Com-C,
    .Com-Style .ranking-text-box-Com-D,
    .Com-Style .ranking-text-box-Com-VIP {
        font-size: 1.2vw !important;
        height: 35px !important;
        width: 35% !important
    }

    .Com-Style .next-ranking-box-border-A,
    .Com-Style .next-ranking-box-border-B,
    .Com-Style .next-ranking-box-border-C,
    .Com-Style .next-ranking-box-border-D,
    .Com-Style .next-ranking-box-border-VIP {
        height: 80% !important
    }
}

@media only screen and (max-width:1660px) {
    .Com-Style .next-rank-height {
        height: 80% !important
    }

    .Com-Style .rank-tool-tip-border-0,
    .Com-Style .rank-tool-tip-border-A,
    .Com-Style .rank-tool-tip-border-B,
    .Com-Style .rank-tool-tip-border-C,
    .Com-Style .rank-tool-tip-border-D,
    .Com-Style .rank-tool-tip-border-VIP {
        right: 8.5rem !important;
        top: 9rem !important
    }

    .Com-Style #up-level-box-com {
        min-width: 100px !important
    }

    .Com-Style .up-level-btn-com {
        background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09) !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 8px rgba(255, 240, 72, .75) !important;
        color: #662900 !important;
        font-size: 1.3vw !important;
        height: auto !important;
        padding: 0 !important;
        width: 85% !important
    }

    .Com-Style .deposite-stat-text-1,
    .Com-Style .deposite-stat-text-2 {
        font-size: .9vw !important
    }
}

@media only screen and (max-width:1520px) {
    .Com-Style .next-ranking-img {
        width: 80% !important
    }

    .Com-Style .banner-img-main {
        max-height: 230px !important
    }

    .Com-Style .rank-tool-tip-border {
        right: 115px !important;
        top: 165px !important
    }

    .Com-Style #up-level-box-com {
        min-height: 30px !important;
        min-width: 90px !important
    }

    .Com-Style .coin-img-size {
        max-width: 40px !important
    }

    .Com-Style .coin-img-size,
    .Com-Style .rank-info-img {
        height: auto !important;
        max-height: 40px !important;
        width: 100% !important
    }

    .Com-Style .rank-info-img {
        max-width: 50px !important;
        -o-object-fit: contain;
        object-fit: contain
    }

    .Com-Style .Rank-0-box,
    .Com-Style .Rank-A-box,
    .Com-Style .Rank-B-box,
    .Com-Style .Rank-C-box,
    .Com-Style .Rank-D-box,
    .Com-Style .Rank-VIP-box {
        height: 80px !important
    }

    .Com-Style .lock-img {
        height: auto !important;
        max-width: 60px !important;
        width: 100% !important;
        z-index: -1 !important
    }

    .Com-Style .lock-text {
        top: 54px !important
    }
}

@media only screen and (max-width:1450px) {
    .Com-Style .gradient-border:after {
        height: calc(89% + var(--borderWidth)*2) !important;
        left: -3px !important;
        top: -3px !important;
        width: calc(96% + var(--borderWidth)*2) !important
    }

    .Com-Style .deposite-stat-text-1,
    .Com-Style .deposite-stat-text-2 {
        font-size: .85vw !important
    }

    .Com-Style .rank-tool-tip-border {
        right: 120px !important;
        top: 165px !important
    }

    .Com-Style .all-ranking-text {
        font-size: 1.1vw !important
    }
}

@media only screen and (max-width:1350px) {
    .Com-Style #up-level-box-com {
        font-size: 1.3vw !important;
        min-height: 25px !important;
        min-width: 80px !important
    }
}

@media(min-width:1000px)and (max-width:1340px) {
    .Com-Style #up-level-box-com {
        font-size: 1.3vw !important;
        min-height: 25px !important;
        min-width: 70px !important
    }
}

@media only screen and (max-width:1260px) {
    .Com-Style .rank-tool-tip-border {
        right: 130px !important;
        top: 165px !important
    }
}

.Mobile-Style .current-ranking-title-text-mobile {
    color: #fff;
    font-size: 3.5vw;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    text-align: center
}

.Mobile-Style .current-ranking-box-border-mobile-0 {
    align-items: center;
    background: #2c2c2c !important;
    border-radius: 14px !important;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1vw 0;
    width: 100%
}

.Mobile-Style .current-ranking-box-mobile-0 {
    position: relative;
    z-index: 0
}

.Mobile-Style .current-ranking-box-mobile-0:after,
.Mobile-Style .current-ranking-box-mobile-0:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #313131, #464646, #707070, #c4c4c4, #707070, #464646);
    background-size: 500%;
    border-radius: 17px;
    box-shadow: 0 0 15px hsla(0, 0%, 69%, .75);
    content: "";
    height: calc(100% + 6px);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(100% + 6px);
    z-index: -1
}

.Mobile-Style .current-ranking-box-border-mobile-A {
    align-items: center;
    background: #132c40 !important;
    border-radius: 15px !important;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1vw 0;
    width: 100%
}

.Mobile-Style .current-ranking-box-mobile-A {
    position: relative;
    z-index: 0
}

.Mobile-Style .current-ranking-box-mobile-A:after,
.Mobile-Style .current-ranking-box-mobile-A:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #018dff, #298cdd, #bde4ed, #5b9cd3, #298cdd, #018dff);
    background-size: 500%;
    border-radius: 17px;
    box-shadow: 0 0 15px rgba(159, 209, 255, .75);
    content: "";
    height: calc(100% + 6px);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(100% + 6px);
    z-index: -1
}

.Mobile-Style .current-ranking-box-border-mobile-B {
    align-items: center;
    background: #2b243d !important;
    border-radius: 15px !important;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1vw 0;
    width: 100%
}

.Mobile-Style .current-ranking-box-mobile-B {
    position: relative;
    z-index: 0
}

.Mobile-Style .current-ranking-box-mobile-B:after,
.Mobile-Style .current-ranking-box-mobile-B:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #8860a9, #8b6da4, #af92c7, #f2deec, #8b6da4, #8860a9);
    background-size: 500%;
    border-radius: 17px;
    box-shadow: 0 0 15px rgba(213, 159, 255, .75);
    content: "";
    height: calc(100% + 6px);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(100% + 6px);
    z-index: -1
}

.Mobile-Style .current-ranking-box-border-mobile-C {
    align-items: center;
    background: #2b243d !important;
    border-radius: 15px !important;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1vw 0;
    width: 100%
}

.Mobile-Style .current-ranking-box-mobile-C {
    position: relative;
    z-index: 0
}

.Mobile-Style .current-ranking-box-mobile-C:after,
.Mobile-Style .current-ranking-box-mobile-C:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #7455a4, #5f4b7d, #d38bdf, #af92c7, #5f4b7d, #7455a4);
    background-size: 500%;
    border-radius: 17px;
    box-shadow: 0 1px 15px rgba(212, 141, 255, .75);
    content: "";
    height: calc(100% + 6px);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(100% + 6px);
    z-index: -1
}

.Mobile-Style .current-ranking-box-border-mobile-D {
    align-items: center;
    background: #411113 !important;
    border-radius: 15px !important;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1vw 0;
    width: 100%
}

.Mobile-Style .current-ranking-box-mobile-D {
    position: relative;
    z-index: 0
}

.Mobile-Style .current-ranking-box-mobile-D:after,
.Mobile-Style .current-ranking-box-mobile-D:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #f04e54, #d75459, #fd3f43, #f1a5a6, #d75459, #f04e54);
    background-size: 500%;
    border-radius: 17px;
    box-shadow: 0 0 15px rgba(255, 0, 0, .75);
    content: "";
    height: calc(100% + 6px);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(100% + 6px);
    z-index: -1
}

.Mobile-Style .current-ranking-box-border-mobile-VIP {
    align-items: center;
    background: #442610 !important;
    border-radius: 15px !important;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1vw 0;
    width: 100%
}

.Mobile-Style .current-ranking-box-mobile-VIP {
    position: relative;
    z-index: 0
}

.Mobile-Style .current-ranking-box-mobile-VIP:after,
.Mobile-Style .current-ranking-box-mobile-VIP:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff771c, #f48030, #f58e49, #fae690, #f48030, #ff7519);
    background-size: 500%;
    border-radius: 17px;
    box-shadow: 0 0 15px rgba(255, 230, 141, .75);
    content: "";
    height: calc(100% + 6px);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(100% + 6px);
    z-index: -1
}

.Mobile-Style .ranking-img-mobile {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
    height: auto;
    width: 100%
}

.Mobile-Style .next-ranking-img-grayscale-mobile {
    filter: grayscale(100%) brightness(40%) drop-shadow(0 1px 1px rgba(0, 0, 0, .8))
}

.Mobile-Style .img-unrank {
    width: 100%
}

.Mobile-Style .next-ranking-text-mobile {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(.1rem .18rem .01rem rgba(0, 0, 0, .8));
    font-size: 3.5vw;
    font-style: normal;
    font-weight: 1000;
    line-height: 2;
    text-align: center
}

.Mobile-Style .ranking-text-box-mobile-0 {
    background: linear-gradient(180deg, #9d9d9d, #575757);
    border-radius: 4px;
    color: #3b3b3b;
    font-size: 4vw;
    font-weight: 1000;
    padding: 0 12px;
    text-align: center
}

.Mobile-Style .ranking-text-box-mobile-A {
    background: linear-gradient(180deg, #bde4ed, #5b9cd3);
    border-radius: 4px;
    color: #28447f;
    font-size: 4vw;
    font-weight: 1000;
    padding: 0 12px;
    text-align: center
}

.Mobile-Style .ranking-text-box-mobile-B {
    background: linear-gradient(180deg, #f2deec, #8860a9)
}

.Mobile-Style .ranking-text-box-mobile-B,
.Mobile-Style .ranking-text-box-mobile-C {
    border-radius: 4px;
    color: #4e2f91;
    font-size: 4vw;
    font-weight: 1000;
    padding: 0 12px;
    text-align: center
}

.Mobile-Style .ranking-text-box-mobile-C {
    background: linear-gradient(180deg, #d38bdf, #7455a4)
}

.Mobile-Style .ranking-text-box-mobile-D {
    background: linear-gradient(180deg, #f38284, #f04e54);
    border-radius: 4px;
    color: #7b1315;
    font-size: 4vw;
    font-weight: 1000;
    padding: 0 12px;
    text-align: center
}

.Mobile-Style .ranking-text-box-mobile-VIP {
    background: linear-gradient(180deg, #fae690, #f48030);
    border-radius: 4px;
    color: #973a20;
    display: flex;
    font-size: 4vw;
    font-weight: 1000;
    padding: 0 12px;
    text-align: center
}

.Mobile-Style #next-reward-mobile,
.Mobile-Style #up-level-box-mobile {
    align-items: center;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    border-radius: 7px;
    color: #662900;
    display: flex;
    font-weight: 700;
    height: auto;
    justify-content: center;
    padding: 2px 3px;
    text-align: center;
    transition: .3s;
    width: 100%
}

.Mobile-Style #next-reward-mobile {
    font-size: 3vw;
    max-height: 20px;
    max-width: 60px
}

.Mobile-Style #rank-info-reward-mobile {
    align-items: center;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    border-radius: 4px;
    color: #662900;
    display: flex;
    font-size: 3vw;
    font-weight: 700;
    height: auto;
    justify-content: center;
    max-height: 18px;
    min-width: 43px;
    padding: 2px 3px;
    text-align: center;
    transition: .3s;
    width: 100%
}

.Mobile-Style .up-level-box-mobile-border {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    position: relative
}

.Mobile-Style .up-level-box-mobile-border:after {
    animation: upLevelAnimation 6s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff440a, #fa550f, #ff9101, #14f5fd, #0f9cfa, #3858f7);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*2);
    content: "";
    height: calc(90% + var(--borderWidth)*2);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(97% + var(--borderWidth)*2);
    z-index: -1
}

.Mobile-Style .max-level-box-mobile-border {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    position: relative
}

.Mobile-Style .max-level-box-mobile-border:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff440a, #fa550f, #ff9101, #14f5fd, #0f9cfa, #3858f7);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*2);
    box-shadow: 0 1px 13px rgba(255, 240, 72, .75);
    content: "";
    height: calc(90% + var(--borderWidth)*2);
    left: -3px;
    position: absolute;
    top: -3px;
    width: calc(97% + var(--borderWidth)*2);
    z-index: -1
}

.Mobile-Style #max-level-box-mobile {
    align-items: center;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    border-radius: 7px;
    color: #662900;
    display: flex;
    font-weight: 700;
    height: auto;
    justify-content: center;
    padding: 2px 3px;
    text-align: center;
    transition: .3s;
    width: 100%
}

.next-rank-items-margin {
    margin: 0 5px 0 3px
}

.next-rank-relative {
    animation: nextRankReward .4s ease-in-out, fade .5s ease-in;
    position: relative;
    right: 13px;
    top: 10px;
    z-index: 1
}

.next-rank-reward-box {
    --borderWidth: 5px;
    background: #000;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    font-size: 3vw;
    height: auto;
    min-width: 130px;
    padding: 3px 4px 3px 1px;
    position: relative;
    text-align: center;
    width: auto
}

.next-rank-reward-box:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #ff440a, #fa550f, #ff9101, #ffca09, #efc436, #f5d50a);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.2);
    box-shadow: 0 1px 13px rgba(255, 240, 72, .75);
    content: "";
    height: calc(100% + 4px);
    left: -2px;
    position: absolute;
    top: -2px;
    width: calc(100% + 4px);
    z-index: -1
}

.ranking-info-number {
    color: #fff;
    filter: drop-shadow(.1rem .18rem .01rem #000);
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 1000
}

.rank-reward-box-img {
    height: auto;
    margin-right: 3px;
    max-width: 16px;
    width: 100%
}

.next-ranking-box-border-mobile {
    align-items: center;
    border: 2px solid #ffdf46;
    border-radius: 15px !important;
    display: flex;
    height: auto;
    justify-content: center;
    width: 100%
}

.Next-Rank-Img {
    animation: wiggle 2s ease-in-out infinite alternate
}

.load-level-box {
    width: 100%
}

.load-to-next-rank-mobile {
    border-radius: 7px;
    height: 30px;
    z-index: 0
}

.load-to-next-rank-mobile:last-child {
    animation: fadeInFromNone .6s ease-in-out infinite alternate
}

.coin-img {
    animation: rotation 2s ease-in-out infinite alternate;
    height: auto !important;
    width: 100%
}

.Mobile-Style .deposite-stat-text-1 {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    -webkit-background-clip: text;
    background-clip: text
}

.Mobile-Style .deposite-stat-text-1,
.Mobile-Style .deposite-stat-text-2 {
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(.18rem .18rem .01rem #501414);
    font-size: 3vw;
    font-style: normal;
    font-weight: 1000
}

.Mobile-Style .deposite-stat-text-2 {
    background: linear-gradient(180deg, #f2fcff, #009dd8);
    -webkit-background-clip: text;
    background-clip: text
}

.Mobile-Style .stat-full-bg-mobile {
    background: #392f53;
    border: 2px solid;
    border-radius: 30px;
    height: 28px;
    position: relative;
    width: 100%
}

.Mobile-Style .stat-current-mobile {
    background: #604d94;
    border-radius: 30px;
    height: 28px
}

.Mobile-Style .stat-current-number-mobile {
    filter: drop-shadow(.18rem .18rem .01rem #501414);
    line-height: 1;
    width: 100%
}

.Mobile-Style .stat-current-number-mobile,
.Mobile-Style .stat-main-current-number-mobile {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 3.8vw;
    font-style: normal;
    font-weight: 1000;
    text-align: center
}

.Mobile-Style .stat-main-current-number-mobile {
    display: flex;
    filter: drop-shadow(.1rem .18rem .01rem #501414);
    position: absolute
}

.Mobile-Style .stat-current-logo-mobile {
    height: 30px;
    width: 35px
}

.Com-Style .banner-box {
    align-items: center;
    background: #2b243d;
    border-radius: 6px;
    content: "Banner";
    height: 280px;
    width: 100%;
    z-index: 2
}

.Com-Style .banner-img-main {
    border-radius: 15px;
    height: auto;
    max-height: 270px;
    width: 100%
}

.Com-Style .ranking-level-text {
    color: #fff;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    text-align: center
}

.Com-Style .Rank-is-lock {
    align-items: center;
    background: rgba(0, 0, 0, .65);
    border-radius: 10px;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    transition: .3s;
    width: 100%;
    z-index: 1
}

.Com-Style .lock-img {
    height: auto;
    max-width: 70px;
    width: 100%;
    z-index: -1
}

.Com-Style .lock-text {
    font-size: .7vw;
    position: absolute;
    top: 64px;
    z-index: -1
}

.Com-Style .Lock {
    position: relative
}

.Com-Style .rank-info-img {
    height: auto;
    max-height: 50px;
    max-width: 60px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.Com-Style .Rank-text {
    font-family: Roboto;
    font-size: 1.2vw;
    font-style: normal;
    font-weight: 700;
    line-height: 16px
}

.Com-Style .Rank-0-box {
    align-content: center;
    background: linear-gradient(180deg, #bbb, #5c5c5c);
    border-radius: 10px;
    color: #3f3f3f;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-0-box:focus {
    box-shadow: 0 1px 13px hsla(200, 1%, 55%, .75)
}

.Com-Style .Rank-A-box {
    align-content: center;
    background: linear-gradient(180deg, #bde4ed, #5b9cd3);
    border-radius: 10px;
    color: #28447f;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-A-box:focus {
    box-shadow: 0 1px 13px rgba(159, 209, 255, .75)
}

.Com-Style .Rank-B-box {
    background: linear-gradient(180deg, #f2deec, #8860a9);
    border-radius: 10px;
    color: #4e2f91;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-B-box:focus {
    box-shadow: 0 1px 13px rgba(213, 159, 255, .75)
}

.Com-Style .Rank-C-box {
    background: linear-gradient(180deg, #d38bdf, #7455a4);
    border-radius: 10px;
    color: #412b7e;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-C-box:focus {
    box-shadow: 0 1px 13px rgba(212, 141, 255, .75)
}

.Com-Style .Rank-D-box {
    background: linear-gradient(180deg, #f38284, #f04e54);
    border-radius: 10px;
    color: #7b1315;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-D-box:focus {
    box-shadow: 0 1px 13px rgba(255, 0, 0, .75)
}

.Com-Style .Rank-VIP-box {
    background: linear-gradient(180deg, #fae690, #f48030);
    border-radius: 10px;
    color: #973a20;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-VIP-box:focus {
    box-shadow: 0 1px 13px rgba(255, 230, 141, .75)
}

.Com-Style .Rank-VVIP-box {
    background: linear-gradient(180deg, #fae690, #f48030);
    border-radius: 10px;
    color: #973a20;
    display: flex;
    height: 90px;
    width: 100%
}

.Com-Style .Rank-VVIP-box:focus {
    box-shadow: 0 1px 13px rgba(255, 230, 141, .75)
}

.Com-Style #rank-tool-tip-animation {
    position: fixed;
    z-index: 100 !important
}

.Com-Style #rank-tool-tip {
    background: #000;
    border-radius: 9px;
    display: flex;
    height: auto;
    padding: 10px 1px;
    text-align: center;
    transition: .3s;
    width: 400px
}

.Com-Style .Ranking-Level-Container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%
}

.Com-Style .rank-tool-tip-border-0 {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px
}

.Com-Style .rank-tool-tip-border-0:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #313131, #464646, #707070, #c4c4c4, #707070, #464646) 0 0/500%;
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 0 15px hsla(200, 1%, 55%, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-tool-tip-border-A {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px
}

.Com-Style .rank-tool-tip-border-A:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #018dff, #298cdd, #bde4ed, #5b9cd3, #298cdd, #018dff);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 0 15px rgba(159, 209, 255, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-tool-tip-border-B {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px;
    z-index: 10
}

.Com-Style .rank-tool-tip-border-B:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #8860a9, #8b6da4, #af92c7, #f2deec, #8b6da4, #8860a9);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 0 15px rgba(213, 159, 255, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-tool-tip-border-C {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px
}

.Com-Style .rank-tool-tip-border-C:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #7455a4, #5f4b7d, #d38bdf, #af92c7, #5f4b7d, #7455a4);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 1px 15px rgba(212, 141, 255, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-tool-tip-border-D {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px
}

.Com-Style .rank-tool-tip-border-D.rank-tool-tip-border-D:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #f04e54, #d75459, #fd3f43, #f1a5a6, #d75459, #f04e54);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 0 15px rgba(255, 0, 0, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-tool-tip-border-VIP {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px
}

.Com-Style .rank-tool-tip-border-VIP:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff771c, #f48030, #f58e49, #fae690, #f48030, #ff7519);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 0 15px rgba(255, 230, 141, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-tool-tip-border-VVIP {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    left: 50% !important;
    position: fixed;
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px
}

.Com-Style .rank-tool-tip-border-VVIP:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff771c, #f48030, #f58e49, #fae690, #f48030, #ff7519);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1 + 2px);
    box-shadow: 0 0 15px rgba(255, 230, 141, .75);
    content: "";
    height: calc(99.5% + var(--borderWidth)*2);
    left: -4px;
    position: absolute;
    top: -4px;
    width: calc(99.5% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .rank-stat-text-1 {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    -webkit-background-clip: text;
    background-clip: text
}

.Com-Style .rank-stat-text-1,
.Com-Style .rank-stat-text-2 {
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(.1rem .18rem .01rem #501414);
    font-size: .75vw;
    font-style: normal;
    font-weight: 1000
}

.Com-Style .rank-stat-text-2 {
    background: linear-gradient(180deg, #f2fcff, #009dd8);
    -webkit-background-clip: text;
    background-clip: text
}

.Com-Style #ranking-reward-box {
    align-items: center;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    border-radius: 7px;
    color: #662900;
    display: flex;
    font-weight: 700;
    height: auto;
    justify-content: center;
    min-height: 30px;
    min-width: 80px;
    padding: 2px 3px;
    text-align: center;
    transition: .3s;
    width: 100%
}

.Com-Style .Reward-Lock {
    position: relative;
    right: .6rem;
    top: 0
}

.Com-Style #reward-tool-tip-animation {
    animation: fade .4s ease-in-out 0s
}

.Com-Style .reward-number {
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-color: #fff;
    filter: drop-shadow(.1rem .1rem .01rem #501414);
    font-size: .7vw;
    font-style: normal;
    font-weight: 0;
    line-break: 1;
    text-align: center
}

.Com-Style .reward-coin-img {
    height: auto;
    margin-right: 3px;
    max-width: 20px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-0 {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-0:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #313131, #464646, #707070, #c4c4c4, #707070, #464646);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 0 15px hsla(200, 1%, 55%, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.5px;
    position: absolute;
    top: -3px;
    width: calc(96% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .reward-tool-tip-border-A {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-A:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #018dff, #298cdd, #bde4ed, #5b9cd3, #298cdd, #018dff);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 0 15px rgba(159, 209, 255, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.5px;
    position: absolute;
    top: -3px;
    width: calc(96% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .reward-tool-tip-border-B {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-B:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #8860a9, #8b6da4, #af92c7, #f2deec, #8b6da4, #8860a9);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 0 15px rgba(213, 159, 255, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.9px;
    position: absolute;
    top: -3px;
    width: calc(96.4% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .reward-tool-tip-border-C {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-C:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #7455a4, #5f4b7d, #d38bdf, #af92c7, #5f4b7d, #7455a4);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 1px 15px rgba(212, 141, 255, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.9px;
    position: absolute;
    top: -3px;
    width: calc(96.4% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .reward-tool-tip-border-D {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-D:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #f04e54, #d75459, #fd3f43, #f1a5a6, #d75459, #f04e54);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 0 15px rgba(255, 0, 0, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.9px;
    position: absolute;
    top: -3px;
    width: calc(96% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .reward-tool-tip-border-VIP {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-VIP:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #ff771c, #f48030, #f58e49, #fae690, #f48030, #ff7519);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 0 15px rgba(255, 230, 141, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.9px;
    position: absolute;
    top: -3px;
    width: calc(96.3% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .reward-tool-tip-border-VVIP {
    --borderWidth: 8px;
    background: #000;
    border-radius: 8px;
    border-radius: var(--borderWidth);
    font-size: 1vw;
    left: 30px;
    min-width: 210px;
    padding: 8px 5px;
    position: relative;
    text-align: center;
    top: 142px;
    width: 100%
}

.Com-Style .reward-tool-tip-border-VVIP:after {
    animation: animatedgradient 2s ease-in-out infinite alternate;
    background: linear-gradient(90deg, #ff771c, #f48030, #f58e49, #fae690, #f48030, #ff7519);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*1.5);
    box-shadow: 0 0 15px rgba(255, 230, 141, .75);
    content: "";
    height: calc(91.3% + var(--borderWidth)*2);
    left: -3.9px;
    position: absolute;
    top: -3px;
    width: calc(96.3% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .coin-img-size {
    height: auto;
    margin-right: .2rem;
    max-width: 25px;
    width: 100%
}

.Com-Style .credit-rank-text {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(.18rem .18rem .01rem #501414);
    font-size: 1vw;
    font-style: normal;
    font-weight: 1000;
    line-height: 1;
    text-align: center;
    width: 100%
}

.Com-Style .overlay-image {
    height: auto;
    max-width: 1080px;
    width: 100%
}

.Com-Style .next-ranking-box-border-A {
    align-items: center;
    background: #132c40 !important;
    border-radius: 14px !important;
    color: #fff;
    display: flex;
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 290px;
    width: 100%
}

.Com-Style .next-ranking-box-A {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    position: relative;
    z-index: 0
}

.Com-Style .next-ranking-box-A:after,
.Com-Style .next-ranking-box-A:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #018dff, #298cdd, #bde4ed, #5b9cd3, #298cdd, #018dff);
    background-size: 500%;
    border-radius: 16px;
    box-shadow: 0 1px 9px rgba(159, 209, 255, .75);
    content: "";
    height: calc(100% + 7.5px);
    left: -3.5px;
    min-height: 295px;
    position: absolute;
    top: -3px;
    width: calc(100% + 7.5px);
    z-index: -1
}

.Com-Style .next-ranking-box-border-B {
    align-items: center;
    background: #413564 !important;
    border-radius: 14px !important;
    color: #fff;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 290px;
    width: 100%
}

.Com-Style .next-ranking-box-B {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    position: relative;
    z-index: 0
}

.Com-Style .next-ranking-box-B:after,
.Com-Style .next-ranking-box-B:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #8860a9, #8b6da4, #af92c7, #f2deec, #8b6da4, #8860a9);
    background-size: 500%;
    border-radius: 16px;
    box-shadow: 0 1px 9px rgba(213, 159, 255, .75);
    content: "";
    height: calc(100% + 7.5px);
    left: -3.5px;
    min-height: 295px;
    position: absolute;
    top: -3px;
    width: calc(100% + 7.5px);
    z-index: -1
}

.Com-Style .next-ranking-box-border-C {
    align-items: center;
    background: #4f3564 !important;
    border-radius: 14px !important;
    color: #fff;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 290px;
    width: 100%
}

.Com-Style .next-ranking-box-C {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    position: relative;
    z-index: 0
}

.Com-Style .next-ranking-box-C:after,
.Com-Style .next-ranking-box-C:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #7455a4, #5f4b7d, #d38bdf, #af92c7, #5f4b7d, #7455a4);
    background-size: 500%;
    border-radius: 16px;
    box-shadow: 0 1px 9px rgba(212, 141, 255, .75);
    content: "";
    height: calc(100% + 7.5px);
    left: -3.5px;
    min-height: 295px;
    position: absolute;
    top: -3px;
    width: calc(100% + 7.5px);
    z-index: -1
}

.Com-Style .next-ranking-box-border-D {
    align-items: center;
    background: #411113 !important;
    border-radius: 14px !important;
    color: #fff;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 290px;
    width: 100%
}

.Com-Style .next-ranking-box-D {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    position: relative;
    z-index: 0
}

.Com-Style .next-ranking-box-D:after,
.Com-Style .next-ranking-box-D:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #f04e54, #d75459, #fd3f43, #f1a5a6, #d75459, #f04e54);
    background-size: 500%;
    border-radius: 16px;
    box-shadow: 0 1px 9px rgba(255, 0, 0, .75);
    content: "";
    height: calc(100% + 7.5px);
    left: -3.5px;
    min-height: 295px;
    position: absolute;
    top: -3px;
    width: calc(100% + 7.5px);
    z-index: -1
}

.Com-Style .next-ranking-box-border-VIP {
    align-items: center;
    background: #645135 !important;
    border-radius: 14px !important;
    color: #fff;
    display: flex;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 290px;
    width: 100%
}

.Com-Style .next-ranking-box-VIP {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    position: relative;
    z-index: 0
}

.Com-Style .next-ranking-box-VIP:after,
.Com-Style .next-ranking-box-VIP:before {
    animation: animatedgradient 3s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff771c, #f48030, #f58e49, #fae690, #f48030, #ff7519);
    background-size: 500%;
    border-radius: 16px;
    box-shadow: 0 1px 9px rgba(255, 230, 141, .75);
    content: "";
    height: calc(100% + 7.5px);
    left: -3.5px;
    min-height: 295px;
    position: absolute;
    top: -3px;
    width: calc(100% + 7.5px);
    z-index: -1
}

.Com-Style .next-ranking-text {
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    text-align: center
}

.Com-Style .next-ranking-img {
    animation: wiggle 3s ease-in-out infinite alternate;
    width: 100%
}

.Com-Style #up-level-box-com {
    align-items: center;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    border-radius: 7px;
    color: #662900;
    display: flex;
    font-weight: 700;
    height: auto;
    justify-content: center;
    min-height: 40px;
    min-width: 130px;
    padding: 2px 3px;
    text-align: center;
    transition: .3s;
    width: 100%
}

.Com-Style .up-level-hover-animate {
    transition: all .2s cubic-bezier(.02, .54, .58, 1)
}

.Com-Style .up-level-hover-animate:hover {
    transform: translateY(-5px)
}

.Com-Style .up-level-box-border {
    --borderWidth: 5px;
    background: #1d1f20;
    border-radius: 5px;
    border-radius: var(--borderWidth);
    position: relative
}

.Com-Style .up-level-box-border:after {
    animation: upLevelAnimation 5s ease-in-out infinite alternate;
    background: linear-gradient(60deg, #ff440a, #fa550f, #ff9101, #14f5fd, #0f9cfa, #3858f7);
    background-size: 300% 300%;
    border-radius: calc(var(--borderWidth)*2);
    content: "";
    height: calc(89% + var(--borderWidth)*2);
    left: -3px;
    opacity: 0;
    position: absolute;
    top: -2.6px;
    transition: opacity .24s ease-in-out;
    width: calc(97% + var(--borderWidth)*2);
    z-index: -1
}

.Com-Style .up-level-box-border:hover:after {
    opacity: 1
}

.Com-Style .next-rank-height {
    height: 100%
}

ol li:not(.ql-direction-rtl),
ul li:not(.ql-direction-rtl) {
    padding-left: 0 !important
}

.Vue-Toastification__container {
    z-index: 999999999 !important
}

@media screen and (min-width:601px) {
    .Vue-Toastification__toast {
        max-width: 350px
    }
}

label.v-label.theme--dark {
    font-size: 16px
}

@media screen and (max-width:600px) {
    label.v-label.theme--dark {
        font-size: 12px
    }
}

.Com-Style .deposite-stat-text-1 {
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09);
    -webkit-background-clip: text;
    background-clip: text
}

.Com-Style .deposite-stat-text-1,
.Com-Style .deposite-stat-text-2 {
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(.18rem .18rem .01rem #501414);
    font-size: 1.1vw;
    font-style: normal;
    font-weight: 1000
}

.Com-Style .deposite-stat-text-2 {
    background: linear-gradient(180deg, #f2fcff, #009dd8);
    -webkit-background-clip: text;
    background-clip: text
}

.Com-Style .stat-current-number {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(180deg, #ffdf46, #ffdc42 23.96%, #feeb52 49.48%, #fbc316 71.87%, #f69b09) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(.18rem .18rem .01rem #501414);
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 1000;
    line-height: 1;
    position: absolute;
    text-align: center
}

.Com-Style .stat-full-bg {
    background: #392f53;
    border-radius: 30px;
    height: 60px;
    outline: 3px solid;
    outline-color: red;
    position: relative;
    width: 100%;
    z-index: -2
}

.Com-Style .stat-current {
    background: #604d94;
    border-radius: 30px;
    height: 60px;
    z-index: -3
}