button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

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

body {
    background: var(--main-bg);
    background-attachment: fixed;
    color: var(--main-txt);
    font-family: var(--fontFamily);
    overflow-y: auto;
    position: relative;
}

.container {
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 600px) {
    .container {
        height: 100%;
    }
}

.container-background {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.skeleton {
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-name: skeleton-wave;
    animation-timing-function: linear;
    background-image: -webkit-linear-gradient( left, hsla(180, 2%, 88%, 0.1), hsla(0, 11%, 98%, 0.25) 25%, hsla(180, 2%, 88%, 0.45) 50%, hsla(0, 11%, 98%, 0.25) 75%, hsla(180, 2%, 88%, 0.1));
    background-size: 200% 100%;
}

@keyframes skeleton-wave {
    0% {
        background-position: 150% 0;
    }
    to {
        background-position: -50% 0;
    }
}

@media screen and (max-width: 700px) {
    .container-padding {
        padding-left: 19px;
        padding-right: 19px;
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 280px) {
    .container {
        height: 100%;
        width: 100%;
    }
}

@media screen and (min-height: 264px) and (min-width: 600px) {
    .container {
        margin: 0 auto;
    }
}

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

.flex-1 {
    flex: 1 1;
}

.common-page-container {
    justify-content: center;
    position: relative;
}

.common-page-container,
.common-page-inner-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 468px;
    width: 100%;
}

.common-page-inner-style {
    justify-content: flex-start;
    min-height: auto;
}

.common-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.deposit-sticky-header-doc-img {
    cursor: pointer;
    height: 42px;
    margin: 4px 0 0;
    width: 42px;
}

.deposit-support-button-container {
    display: flex;
    justify-content: flex-end;
    padding: 32px 0;
    width: 100%;
}

.img-31px {
    height: 31px;
    object-fit: contain;
    width: 31px;
}

.ellipsis-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dimmed-container {
    -webkit-backdrop-filter: var(--plane-blur);
    backdrop-filter: var(--plane-blur);
    background: var(--plane-bg);
    bottom: var(--footer-height);
    left: 0;
    position: fixed;
    right: 0;
    top: var(--top-header-height);
    z-index: 5;
}

.dimmed-container-hidden {
    display: none;
}

.btn-container {
    align-items: center;
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    display: flex;
    flex-direction: row;
    height: var(--btn-height);
    justify-content: center;
    position: relative;
    width: 100%;
}

@media (max-width: 600px) {
    .btn-container {
        height: var(--btn-mobile-height);
    }
}

.btn-mainPrefab {
    background: var(--btn-main);
}

.btn-subPrefab {
    background: var(--btn-sub);
}

.btn-disabled {
    background: var(--btn-disabled);
    border: var(--btn-disabled-border);
}

.btn-icon {
    height: 45px;
    margin: 0 10px 0 0;
    width: 45px;
}

@media (max-width: 600px) {
    .btn-icon {
        height: 30px;
        width: 30px;
    }
}

.btn-rightIcon {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
}

.btn-deco {
    background: var(--btn-deco);
    height: 3px;
    position: absolute;
    transform: rotate(-2deg);
    width: 90%;
}

.btn-textStyle {
    color: var(--btn-txt);
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
}

@media (max-width: 600px) {
    .btn-textStyle {
        font-size: 16px;
    }
}

.btn-disabled-textStyle {
    color: var(--btn-disabled-txt);
}

.toast {
    animation: fadein 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--taost-bg);
    border-radius: 10px;
    color: var(--taost-txt);
    font-size: 17px;
    height: 50px;
    left: 0;
    margin: auto;
    max-width: 80vw;
    position: fixed;
    right: 0;
    text-align: center;
    top: 20px;
    visibility: visible;
    white-space: nowrap;
    z-index: 100000;
}

.toast .desc {
    color: var(--toast-desc);
    overflow: hidden;
    padding: 16px;
    white-space: nowrap;
}

@keyframes fadein {
    0% {
        opacity: 0;
        top: 0;
    }
    to {
        opacity: 1;
        top: 20px;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
        top: 20px;
    }
    to {
        opacity: 0;
        top: 20px;
    }
}

.enterPin-modal-main-container {
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.enterPin-modal-container,
.enterPin-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 600px;
    width: 100%;
}

.enterPin-modal-container {
    background: var(--enterPin-modal-bg);
    border: var(--enterPin-modal-border);
    border-radius: 16px;
    box-shadow: var(--enterPin-modal-shadow);
    justify-content: center;
    padding: 32px 50px;
}

.enterPin-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.enterPin-modal-title {
    color: var(--pin-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    margin: 36px 0 24px;
}

.enterPin-modal-forgot-pin {
    color: var(--forgot-pin-txt);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    margin: 29px 0 20px;
}

.CPPin-container {
    margin: 0 auto;
    width: 240px;
}

.CPPin-field-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 0 24px;
}

.CPPin-field {
    aspect-ratio: 1;
    background: transparent;
    border: var(--cppin-field-border);
    border-radius: 100%;
    height: 24px;
    width: 24px;
}

.CPPin-field.active {
    background: var(--cppin-active-field);
    border: var(--cppin-field-active-border);
}

.CPPin-button-container {
    grid-gap: 30px;
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
}

.CPPin-button {
    aspect-ratio: 1;
    background: var(--cppin-btn-bg);
    border: 0;
    border-radius: 100%;
    box-shadow: var(--cppin-shadow);
    color: var(--cppin-btn-txt);
    font-size: 24px;
    font-weight: 700;
    height: 60px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 60px;
}

.CPPin-button.custom {
    align-items: center;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
}

.CPPin-backspace {
    height: 31px;
    width: 48px;
}

.CPPin-backspace:active {
    opacity: 0.3;
}

.CPPin-button:disabled {
    cursor: not-allowed;
}

.CPPin-button:enabled:active:not(.custom) {
    background: var(--cppin-btn-cursor);
    color: var(--pin-btn-hover-txt);
}

.CPPin-button.hidden {
    cursor: auto;
    opacity: 0;
}

.incorrect {
    animation: incorrect 0.8s ease-out 1;
}

@keyframes incorrect {
    0% {
        transform: translate(0);
    }
    10% {
        transform: translate(-25px);
    }
    20% {
        transform: translate(25px);
    }
    30% {
        transform: translate(-20px);
    }
    40% {
        transform: translate(20px);
    }
    50% {
        transform: translate(-10px);
    }
    60% {
        transform: translate(10px);
    }
    70% {
        transform: translate(-5px);
    }
    80% {
        transform: translate(5px);
    }
    to {
        transform: translate(0);
    }
}

.resetPin-modal-main-container {
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.resetPin-modal-container,
.resetPin-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.resetPin-modal-container {
    background: var(--resetPin-modal-bg);
    border: var(--resetPin-modal-border);
    border-radius: 16px;
    box-shadow: var(--resetPin-modal-shadow);
    justify-content: center;
    min-height: 600px;
    padding: 32px 50px;
}

.resetPin-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.resetPin-modal-title {
    color: var(--reset-pin-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    text-align: center;
}

.reset-pin-modal-icon {
    height: 75px;
    margin: 51.43px 0 39.78px;
    width: 75px;
}

.reset-pin-modal-desc {
    color: var(--reset-pin-desc);
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 58px;
    padding: 0 23.5px;
    text-align: center;
}

.reset-pin-modal-mobile-container {
    border-bottom: 1px solid var(--signIn-underline);
    margin-bottom: 104px;
    width: 100%;
}

.reset-pin-modal-mobile {
    color: var(--reset-pin-mobile);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 10.5px;
}

.reset-pin-modal-btn {
    background: var(--reset-pin-btn);
    border: var(--reset-pin-btn-border);
    box-shadow: var(--reset-pin-btn-shadow);
    height: 42px;
    margin-bottom: 20px;
}

.reset-pin-modal-signIn-txt {
    color: var(--reset-pin-btn-txt);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
}

.signUp-modal-main-container {
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.signUp-modal-container,
.signUp-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.signUp-modal-container {
    background: var(--signUp-modal-bg);
    border: var(--signUp-modal-border);
    border-radius: 16px;
    box-shadow: var(--signUp-modal-shadow);
    justify-content: center;
    min-height: 600px;
    padding: 32px 50px;
}

.signUp-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.signUp-modal-step-icon {
    height: 45px;
    max-height: 10%;
    max-width: 100%;
    object-fit: contain;
    width: 160px;
}

.signUp-modal-title {
    color: var(--signUp-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    overflow-wrap: anywhere;
}

.signUp-modal-verify-mobile-logo {
    height: 55.56px;
    margin: 48.01px 0 42.98px;
    width: 62.01;
}

.signUp-modal-tips {
    color: var(--signUp-tips);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}

.signUp-modal-mobile {
    color: var(--signUp-mobile);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding: 14px 0 52px;
}

.signUp-modal-otp-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.signUp-modal-otp-container::-webkit-scrollbar {
    display: none;
}

.signUp-modal-prefix {
    color: var(--signUp-prefix);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-right: 6.3px;
}

.signUp-modal-otp-input {
    background: transparent;
    border-color: transparent;
    border-bottom: 1px solid var(--signIn-otp-underline);
    color: var(--signIn-otp-underline);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    width: 25px !important;
}

.signUp-modal-otp-group {
    display: flex;
    justify-content: space-between;
    max-width: 360px;
    width: 100%;
}

.signUp-modal-timer {
    display: flex;
    flex-direction: row;
    padding: 35px 0;
}

.signUp-modal-countdown {
    color: var(--signUp-timer);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
}

.signUp-modal-verify-btn-bg {
    background: var(--signUp-verify-btn-bg);
    border: var(--signUp-verify-btn-border);
    box-shadow: var(--signUp-verify-btn-shadow);
}

.signUp-modal-verify-btn {
    margin: 0 0 20px;
}

.signUp-modal-disabled-btn {
    background: var(--signUp-disabled-verify-btn-bg);
    border: var(--signUp-disabled-verify-btn-border);
    color: #fff;
}

.signUp-modal-disabled-resend-btn {
    background: var(--signIn-disabled-resend-btn);
    border: var(--signIn-disabled-resend-border);
}

.signUp-modal-txt {
    color: var(--signUp-verify-btn-txt);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
    margin: 11px;
}

.signUp-modal-verify-disabled-txt {
    color: var(--signUp-disabled-verify-btn-txt);
}

.signUp-modal-resend-txt {
    color: var(--signUp-resend-txt);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
    margin: 11px;
}

.signUp-modal-disabled-txt {
    color: var(--signIn-disabled-resend-txt);
}

.signUp-modal-resend-btn {
    background: var(--signUp-resend-btn);
    border: var(--signUp-resend-border);
}

.signUp-modal-timer-btn {
    box-shadow: var(--signUp-resend-btn-shadow);
}

.signUp-title {
    color: var(--signUp-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
}

.signUp-verify-mobile-logo {
    height: 55.56px;
    margin: 48.01px 0 42.98px;
    width: 62.01;
}

.signUp-tips {
    color: var(--signUp-tips);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    margin-bottom: 14px;
}

.signUp-mobile {
    color: var(--signUp-mobile);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 52px;
}

.signUp-otp-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 23.5px;
    width: 100%;
}

.signUp-prefix {
    color: var(--signUp-prefix);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-right: 6.3px;
}

.signUp-otp-group {
    display: flex;
    justify-content: space-between;
    max-width: 360px;
    width: 100%;
}

.signUp-otp-input {
    background: transparent;
    border-color: transparent;
    border-bottom: 1px solid var(--signIn-underline);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    width: 25px !important;
}

.signUp-timer {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.signUp-countdown {
    color: var(--signUp-timer);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
}

.signUp-verify-btn {
    height: 35px;
    margin: 0 0 20px;
}

.signUp-verify-btn-bg {
    background: var(--signUp-verify-btn-bg);
    box-shadow: var(--signUp-verify-btn-shadow);
}

.signUp-timer-btn {
    box-shadow: var(--signUp-resend-btn-shadow);
    height: 35px;
    margin: 0 0 53px;
}

.signUp-resend-btn {
    background: var(--signUp-resend-btn);
}

.signUp-step-icon {
    height: 45px;
    margin: 20px 0;
    width: 160px;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .signUp-title {
        margin-top: 30px;
    }
}

.signIn-container {
    height: 100%;
    justify-content: center;
    position: relative;
}

.signIn-container,
.signIn-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.signIn-style {
    background: var(--signIn-bg);
    border-radius: 30px;
    box-shadow: var(--signIn-shadow);
    justify-content: flex-start;
    margin: 16px 0 20px;
    max-width: 327px;
    padding: 0 20px;
}

.signIn-title-container {
    align-items: center;
    color: var(--signIn-title);
    display: flex;
    font-size: 24px;
    font-weight: 700;
    justify-content: center;
    line-height: 29px;
    margin: 49px 0 82px;
    text-align: center;
}

.signIn-logo {
    height: 146px;
    width: 146px;
}

.signIn-title {
    font-size: 16px;
}

.signIn-num-style {
    border-bottom: 1px solid var(--signIn-underline);
    color: var(--signIn-input);
    font-weight: 700;
    justify-content: flex-start;
    padding-bottom: 10.5px;
    width: 100%;
}

.signIn-dropdown-mobile,
.signIn-num-style {
    align-items: center;
    display: flex;
    font-size: 16px;
}

.signIn-dropdown-mobile {
    color: var(--signIn-mobile);
    justify-content: center;
}

.signIn-dropdown-icon {
    height: 7px;
    margin-left: 5px;
    width: 11px;
}

.lang-dropdown-icon {
    height: 22px;
    margin-right: 4px;
    width: 22px;
}

.signIn-ver {
    background: var(--signIn-ver);
    bottom: 15px !important;
    bottom: 0;
    font-size: 16px;
    left: 0;
    padding-bottom: 10px;
    position: fixed;
    right: 0;
    text-align: center;
    width: 100vw;
}

.signIn-input-icon {
    margin-left: 8px;
}

.signIn-input:disabled {
    -webkit-text-fill-color: var(--signIn-input);
    opacity: 1;
}

.signIn-input:focus {
    outline: none;
}

.signIn-input {
    background: var(--signIn-input-bg);
    border: none;
    color: var(--signIn-input);
    font-size: 16px;
    margin-left: 9px;
    text-align: left;
    width: 65% !important;
}

.signIn-btn-style {
    box-shadow: var(--signIn-btn-shadow);
    font-size: 16px;
    height: 35px;
    line-height: 20px;
    margin: 51.5px 0 20px;
    width: 100%;
}

.signIn-txt {
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
}

.signIn-disabled-btn {
    background: var(--signIn-disabled-btn);
    border: var(--signIn-disabled-border);
}

.signIn-btn {
    background: var(--signIn-btn);
}

.signIn-help {
    font-size: 14px;
    font-weight: 500;
}

.signIn-help,
.signIn-help-btn {
    align-self: flex-start;
    color: var(--signIn-help);
}

.signIn-help-btn {
    align-items: center;
    background: var(--signIn-line-bg);
    border-radius: 6px;
    box-shadow: var(--signIn-line-shadow);
    color: var(--signIn-line-label);
    display: flex;
    font-size: 8px;
    font-weight: 700;
    height: 26px;
    justify-content: center;
    line-height: 10px;
    width: 92px;
}

.signIn-modal-title {
    color: var(--signIn-modal-title);
    font-size: 14px;
    line-height: 17px;
    margin: 76.79px 0 11.21px;
}

.signIn-modal-select-container {
    height: 200px;
    justify-content: center;
    padding: 0 0 30px;
}

.signIn-modal-select-container,
.signIn-modal-select-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.signIn-modal-select-style {
    height: 100%;
    justify-content: flex-start;
}

.signIn-selected-container {
    align-items: center;
    border-radius: var(--btn-border-radius);
    color: var(--signIn-selected-txt);
    display: flex;
    flex-direction: row;
    font-size: 14px;
    height: 35px;
    justify-content: center;
    line-height: 17px;
    width: 320px;
}

.signIn-selected-bg {
    background: var(--signIn-selected-bg);
    font-weight: 700;
}

.signIn-unselect-bg {
    background: transparent;
    box-shadow: none;
}

.signIn-country-icon {
    height: 18px;
    margin-right: 10px;
    width: 18px;
}

.signIn-help-container {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 37px;
    width: 100%;
}

.signIn-change-lang {
    align-items: center;
    color: var(--signIn-lang-txt);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.signIn-line-icon {
    height: 18px;
    margin-right: 4px;
    width: 18px;
}

.signIn-lang-txt {
    color: var(--signIn-lang-txt);
}

.signIn-or-container {
    align-items: center;
    display: flex;
    height: 40px;
    max-width: 327px;
    width: 100%;
}

.signIn-or-container .signIn-or-underline {
    border: var(--signIn-or-border);
    flex-grow: 2;
    height: 1px;
}

.signIn-or-container .signIn-or-text {
    color: var(--signIn-or);
    flex-basis: auto;
    flex-grow: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin: 0 13px;
    text-align: center;
}

.signIn-line {
    background: var(--signIn-login-line-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    flex-direction: row;
    height: var(--btn-mobile-height);
    margin: 5px 0 30px;
    max-width: 287px;
    padding: 0;
    position: relative;
    width: 100%;
}

.signIn-line,
.signIn-line .signIn-line-icon-container {
    align-items: center;
    display: flex;
    justify-content: center;
}

.signIn-line .signIn-line-icon-container {
    background: var(--signIn-line-icon-bg);
    border-bottom-left-radius: var(--btn-radius);
    border-top-left-radius: var(--btn-radius);
    height: 100%;
    padding: 9px;
    width: auto;
}

.signIn-line .signIn-line-icon-container .signIn-login-line-icon {
    height: 20px;
    width: 20px;
}

.signIn-line .signIn-line-label {
    align-items: center;
    color: var(--signIn-line-label);
    display: flex;
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 19px;
    width: 100%;
}

.signIn-seo {
    border: 1px solid #707070;
    border-radius: 10px;
    bottom: 0;
    height: 0.5px;
    max-width: 361px;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    position: fixed;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .signIn-style {
        padding: 0 20px;
        width: 100%;
    }
    .signIn-container {
        height: 100vh;
        justify-content: flex-start;
        width: 100%;
    }
    .signIn-logo {
        height: 72px;
        margin-top: 30px;
        width: 72px;
    }
    .signIn-line {
        max-width: 210px;
        width: 100%;
    }
}

@media screen and (max-height: 500px) {
    .signIn-style {
        max-width: 327px;
        width: 100%;
    }
    .signIn-ver {
        font-size: 16px;
        position: relative;
    }
    .signIn-container {
        margin-bottom: 30px;
    }
}

@keyframes slideIn {
    0% {
        bottom: -300px;
        opacity: 0;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.timer-txt {
    color: var(--timer-txt);
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
}

.timer-txt-s16-w700-cMain {
    color: var(--timer-txt-main);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.setPin-modal-main-container {
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.setPin-modal-container,
.setPin-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.setPin-modal-container {
    background: var(--setPin-modal-bg);
    border: var(--setPin-modal-border);
    border-radius: 16px;
    box-shadow: var(--setPin-modal-shadow);
    justify-content: center;
    min-height: 600px;
    padding: 32px 50px;
}

.setPin-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.setPin-modal-step-icon {
    height: 45px;
    max-height: 10%;
    max-width: 100%;
    object-fit: contain;
    width: 160px;
}

.setPin-modal-title {
    color: var(--pin-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    padding-bottom: 39px;
}

.signIn-modal-main-container {
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.signIn-modal-container,
.signIn-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.signIn-modal-container {
    background: var(--signIn-modal-bg);
    border: var(--signIn-modal-border);
    border-radius: 16px;
    box-shadow: var(--signIn-modal-shadow);
    justify-content: center;
    min-height: 600px;
    padding: 32px 50px;
}

.signIn-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.signIn-modal-step-icon {
    height: 45px;
    max-height: 10%;
    max-width: 100%;
    object-fit: contain;
    width: 160px;
}

.signIn-bottom-modal-title {
    color: var(--signIn-modal-title);
    font-size: 14px;
    line-height: 17px;
    margin: 76.79px 0 11.21px;
}

.signIn-bottom-modal-select-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: center;
    padding: 0 0 30px;
    width: 100%;
}

.signIn-bottom-modal-select-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    width: 100%;
}

.signIn-bottom-modal-selected-container {
    align-items: center;
    border-radius: var(--btn-border-radius);
    color: var(--signIn-selected-txt);
    display: flex;
    flex-direction: row;
    font-size: 14px;
    height: 35px;
    justify-content: center;
    line-height: 17px;
    width: 320px;
}

.signIn-bottom-modal-selected-bg {
    background: var(--signIn-selected-bg);
    font-weight: 700;
}

.signIn-bottom-modal-unselect-bg {
    background: transparent;
    box-shadow: none;
}

.signIn-bottom-modal-country-icon {
    height: 18px;
    margin-right: 10px;
    width: 18px;
}

.signIn-modal-title-container {
    color: var(--signIn-title);
    font-size: 24px;
    justify-content: center;
    line-height: 29px;
    margin: 0 0 82px;
    overflow-wrap: anywhere;
    text-align: center;
}

.signIn-modal-num-style,
.signIn-modal-title-container {
    align-items: center;
    display: flex;
    font-weight: 700;
    width: 100%;
}

.signIn-modal-num-style {
    border-bottom: 1px solid var(--signIn-underline);
    color: var(--signIn-input);
    font-size: 16px;
    justify-content: flex-start;
    padding-bottom: 10.5px;
}

.signIn-modal-dropdown-mobile {
    align-items: center;
    color: var(--signIn-mobile);
    display: flex;
    font-size: 16px;
    gap: 14px;
    justify-content: center;
}

.signIn-modal-input:disabled {
    -webkit-text-fill-color: var(--signIn-input);
    opacity: 1;
}

.signIn-modal-input:focus {
    outline: none;
}

.signIn-modal-mobile-separator {
    background: var(--signIn-mobile-separator);
    height: 20px;
    width: 1px;
}

.signIn-modal-input {
    background: var(--signIn-input-bg);
    border: none;
    color: var(--signIn-input);
    font-size: 16px;
    margin-left: 9px;
    text-align: left;
    width: 65% !important;
}

.signIn-modal-input:-ms-input-placeholder {
    color: var(--signIn-input-placeholder);
}

.signIn-modal-input::placeholder {
    color: var(--signIn-input-placeholder);
}

.signIn-modal-btn {
    background: var(--signIn-btn);
    border: var(--signIn-btn-border);
}

.signIn-modal-btn-style {
    box-shadow: var(--signIn-btn-shadow);
    font-size: 16px;
    height: 42px;
    line-height: 20px;
    margin-top: 32px;
    min-height: 42px;
    width: 100%;
}

.signIn-modal-txt {
    color: var(--signIn-btn-txt);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
}

.signIn-modal-disabled-txt {
    color: var(--signIn-disabled-btn-txt);
}

.signIn-modal-disabled-btn {
    background: var(--signIn-disabled-btn);
    border: var(--signIn-disabled-border);
    color: #fff;
}

.signIn-modal-or-container {
    align-items: center;
    display: flex;
    margin: 25px 0;
    width: 90%;
}

.signIn-modal-or-container .signIn-modal-or-underline {
    border: var(--signIn-or-border);
    flex-grow: 2;
    height: 1px;
}

.signIn-modal-or-container .signIn-modal-or-text {
    color: var(--signIn-or);
    flex-basis: auto;
    flex-grow: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin: 0 13px;
    text-align: center;
}

.signIn-modal-line {
    align-items: center;
    background: var(--signIn-login-line-bg);
    border: none;
    border-radius: var(--btn-radius);
    display: flex;
    flex-direction: row;
    height: 42px;
    justify-content: center;
    min-height: 42px;
    padding: 0;
    position: relative;
    width: 100%;
}

.signIn-modal-line .signIn-modal-line-icon-container {
    align-items: center;
    background: var(--signIn-line-icon-bg);
    border-bottom-left-radius: var(--btn-radius);
    border-top-left-radius: var(--btn-radius);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 9px;
    width: auto;
}

.signIn-modal-line .signIn-modal-line-icon-container .signIn-modal-login-line-icon {
    height: 20px;
    width: 20px;
}

.signIn-modal-line .signIn-modal-line-label {
    align-items: center;
    color: var(--signIn-line-label);
    display: flex;
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 19px;
    width: 100%;
}

.signIn-modal-seo {
    border: 1px solid #707070;
    border-radius: 10px;
    bottom: 0;
    height: 0.5px;
    max-width: 361px;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    position: fixed;
}

.bottomModal-container {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    background: var(--bottomModal-container-bg);
    display: none;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 4;
}

.bottomModal-container,
.bottomModal-content {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    position: fixed;
    width: 100%;
}

.bottomModal-content {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    bottom: 0;
    display: flex;
    height: 310px;
    justify-content: center;
}

.bottomModal-close-modal {
    align-items: center;
    display: flex;
    height: 50px;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 24px;
    width: 50px;
}

.bottomModal-close-icon {
    height: 35px;
    width: 35px;
}

.bottomModal-black {
    background: var(--bottomModal-black-bg);
}

.bottomModal-white {
    background: var(--bottom-modal-bg);
}

.bottomModal-style {
    max-width: 430px;
    position: relative;
    width: 100%;
}

.changePass-modal-main-container {
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.changePass-modal-container,
.changePass-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.changePass-modal-container {
    background: var(--signIn-modal-bg);
    border: var(--signIn-modal-border);
    border-radius: 16px;
    box-shadow: var(--signIn-modal-shadow);
    justify-content: center;
    min-height: 450px;
    padding: 32px 50px;
}

.changePass-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.changePass-modal-step-icon {
    height: 45px;
    max-height: 10%;
    max-width: 100%;
    object-fit: contain;
    width: 160px;
}

.changePass-bottom-modal-title {
    color: var(--signIn-modal-title);
    font-size: 14px;
    line-height: 17px;
    margin: 76.79px 0 11.21px;
}

.changePass-bottom-modal-select-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: center;
    padding: 0 0 30px;
    width: 100%;
}

.changePass-bottom-modal-select-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    width: 100%;
}

.changePass-bottom-modal-selected-container {
    align-items: center;
    border-radius: var(--btn-border-radius);
    color: var(--signIn-selected-txt);
    display: flex;
    flex-direction: row;
    font-size: 14px;
    height: 35px;
    justify-content: center;
    line-height: 17px;
    width: 320px;
}

.changePass-bottom-modal-selected-bg {
    background: var(--signIn-selected-bg);
    font-weight: 700;
}

.changePass-bottom-modal-unselect-bg {
    background: transparent;
    box-shadow: none;
}

.changePass-bottom-modal-country-icon {
    height: 18px;
    margin-right: 10px;
    width: 18px;
}

.changePass-modal-title-container {
    align-items: center;
    color: var(--signIn-title);
    display: flex;
    font-size: 24px;
    font-weight: 700;
    justify-content: center;
    line-height: 29px;
    margin: 0 0 82px;
    overflow-wrap: anywhere;
    text-align: center;
    width: 100%;
}

.changePass-form-container {
    width: 90%;
}

.changePass-modal-title {
    align-items: center;
    color: var(--signIn-mobile);
    display: flex;
    font-size: 16px;
    font-weight: 700;
}

.changePass-modal-input-container {
    border-bottom: 1px solid var(--signIn-underline);
    padding-top: 15px;
}

.changePass-modal-mobile-separator {
    background: var(--signIn-mobile-separator);
    height: 20px;
    width: 1px;
}

.changePass-modal-input {
    background: var(--signIn-input-bg);
    border: none;
    color: var(--signIn-input);
    display: flex;
    flex-direction: horizontal;
    font-size: 16px;
    margin-bottom: 5px;
    text-align: left;
    width: 65% !important;
}

.changePass-modal-input:-ms-input-placeholder {
    color: var(--signIn-input-placeholder);
}

.changePass-modal-input::placeholder {
    color: var(--signIn-input-placeholder);
}

.changePass-modal-btn-container {
    display: flex;
    flex-direction: row;
    width: 90%;
}

.changePass-modal-cancel-btn {
    background: var(--changePass-cancel-btn-background);
    border: var(--changePass-cancel-btn-border);
}

.changePass-modal-cancel-txt {
    color: #000;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
}

.changePass-modal-btn-cancel-style {
    box-shadow: var(--signIn-btn-shadow);
    font-size: 16px;
    height: 42px;
    line-height: 20px;
    margin-left: 5px;
    margin-top: 32px;
    min-height: 42px;
    width: 100%;
}

.changePass-modal-btn {
    background: var(--signIn-btn);
    border: var(--signIn-btn-border);
}

.changePass-modal-btn-style {
    box-shadow: var(--signIn-btn-shadow);
    font-size: 16px;
    height: 42px;
    line-height: 20px;
    margin-right: 5px;
    margin-top: 32px;
    min-height: 42px;
    width: 100%;
}

.changePass-modal-txt {
    color: var(--signIn-btn-txt);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
}

.changePass-modal-disabled-txt {
    color: var(--signIn-disabled-btn-txt);
}

.changePass-modal-disabled-btn {
    background: var(--signIn-disabled-btn);
    border: var(--signIn-disabled-border);
    color: #fff;
}

.changePass-modal-or-container {
    display: flex;
    margin: 25px 0;
    width: 90%;
}

.changePass-modal-or-underline {
    border: var(--signIn-or-border);
    flex-grow: 2;
    height: 1px;
}

.changePass-modal-or-text {
    color: var(--signIn-or);
    flex-basis: auto;
    flex-grow: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin: 0 13px;
    text-align: center;
}

.changePass-modal-line {
    align-items: center;
    background: var(--signIn-login-line-bg);
    border: none;
    border-radius: var(--btn-radius);
    display: flex;
    flex-direction: row;
    height: 42px;
    justify-content: center;
    min-height: 42px;
    padding: 0;
    position: relative;
    width: 100%;
}

.changePass-modal-line .changePass-modal-line-icon-container {
    align-items: center;
    background: var(--signIn-line-icon-bg);
    border-bottom-left-radius: var(--btn-radius);
    border-top-left-radius: var(--btn-radius);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 9px;
    width: auto;
}

.changePass-modal-line .changePass-modal-line-icon-container .changePass-modal-login-line-icon {
    height: 20px;
    width: 20px;
}

.changePass-modal-line .changePass-modal-line-label {
    align-items: center;
    color: var(--signIn-line-label);
    display: flex;
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 19px;
    width: 100%;
}

.changePass-modal-seo {
    border: 1px solid #707070;
    border-radius: 10px;
    bottom: 0;
    height: 0.5px;
    max-width: 361px;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    position: fixed;
}

.textField-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.textField-title {
    color: var(--textField-title);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.textField-modal-title {
    color: var(--textField-modal-title);
}

.textField-error-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.textField-error-msg {
    color: var(--textField-err-msg);
    font-size: var(--fontSize10);
}

.textField-separator {
    background: var(--textField-separator);
    height: 1px;
    width: 100%;
}

.textField-modal-separator {
    background: var(--textField-modal-separator);
}

.textField-input-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.textField-error-img,
.textField-loading-img {
    height: 24px;
    width: 24px;
}

.baseTextField-container {
    position: relative;
}

.baseTextField-input {
    background: transparent;
    border: none;
    color: var(--baseTextField-input);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.baseTextField-modal-input {
    color: var(--baseTextField-modal-input);
}

.loginCommonTf-input,
.passwordTextField-input {
    color: var(--loginCommonTf-txt);
    font-size: var(--fontSize20);
}

.loginCommonTf-input {
    line-height: normal;
}

.amountSelectorTextField-input {
    color: var(--amountSelectorTf-input-text);
    font-size: var(--fontSize20);
    font-size: var(--fontSize24);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.twalletEditTf-input {
    color: var(--tWalletEditTf-txt);
    font-size: var(--fontSize14);
    line-height: normal;
}

.prohibitionDropDown-input {
    color: var(--prohibitionDropDown-input-color);
}

.baseTextField-placeholder-container {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

.baseTextField-placeholder {
    color: var(--baseTextField-input-placeholder);
}

.baseTextField-modal-placeholder {
    color: var(--baseTextField-modal-input-placeholder);
}

.loginCommonTf-placeholder,
.passwordTextField-placeholder {
    color: var(--loginCommonTf-placeholder-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight400);
}

.loginCommonTf-placeholder {
    line-height: normal;
}

.twalletEditTf-placeholder {
    color: var(--tWalletEditTf-placeholder-txt);
}

.prohibitionDropDown-placeholder,
.twalletEditTf-placeholder {
    font-family: var(--fontFamily);
    font-size: var(--fontSize14);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.prohibitionDropDown-placeholder {
    color: var(--prohibitionDropDown-input-placeholder);
}

.baseTextField-input-suffix-wrapper {
    display: flex;
    width: 100%;
}

.baseTextField-suffix {
    color: var(--baseTextField-suffix-txt);
    font-size: var(--fontSize24);
    line-height: normal;
    text-shadow: none;
    width: 35%;
}

.baseTextField-suffix,
.btnV2-container {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
}

.btnV2-container {
    cursor: pointer;
    display: flex;
    line-height: var(--fontStyleNormal);
}

.btnV2-container-row-center-p17-r10-mainshadow {
    background: var(--buttonComponent_v2-main-bg);
    border: var(--buttonComponent_v2-main-border);
    border-radius: 10px;
    box-shadow: var(--buttonComponent_v2-main-shadow);
}

.btnV2-container-row-center-p17-r10-mainshadow,
.btnV2-container-verify-mobile-resend {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 52px;
    justify-content: center;
    padding: 0 17px;
}

.btnV2-container-verify-mobile-resend {
    background: var(--verifyMobile-resend-bg);
    border: var(--verifyMobile-resend-border);
    border-radius: 10px;
    box-shadow: var(---verifyMobile-resend-shadow);
}

.btnV2-container-add-trueAcc {
    align-items: center;
    background: var(--trueAccountDdTf-add-acc-bg);
    border: var(--trueAccountDdTf-add-acc-border);
    border-radius: 5px;
    box-shadow: var(--trueAccountDdTf-add-acc-shadow);
    height: 42px;
    padding: 8px;
}

.btnV2-container-edit-trueAcc {
    background: var(--trueAccountDdTf-edit-acc-bg);
    border: var(--trueAccountDdTf-edit-acc-border);
    border-radius: 5px;
    box-shadow: var(--trueAccountDdTf-edit-acc-shadow);
    height: 42px;
}

.btnV2-container-cancel-trueAcc,
.btnV2-container-edit-trueAcc {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 4px;
}

.btnV2-container-cancel-trueAcc {
    background: var(--trueAccountDdTf-cancel-acc-bg);
    border: var(--trueAccountDdTf-cancel-acc-border);
    border-radius: 5px;
    box-shadow: var(--trueAccountDdTf-cancel-acc-shadow);
    height: 28px;
}

.btnV2-container-cfm-trueAcc {
    align-items: center;
    background: var(--trueAccountDdTf-cfm-acc-bg);
    border: var(--trueAccountDdTf-cfm-acc-border);
    border-radius: 5px;
    box-shadow: var(--trueAccountDdTf-cfm-acc-shadow);
    display: flex;
    flex-direction: row;
    height: 28px;
    justify-content: center;
    padding: 4px;
}

.btnV2-container-disabled {
    cursor: not-allowed;
}

.btnV2-container-disabled-opacity {
    opacity: 0.5;
}

.btnV2-container-row-center-p17-r10-mainshadow-disabled {
    background: var(--buttonComponent_v2-main-disabled-bg);
    box-shadow: var(--buttonComponent_v2-main-disabled-shadow);
}

.btnV2-container-verify-mobile-resend-disabled {
    background: var(--verifyMobile-resend-disabled-bg);
    box-shadow: var(--verifyMobile-resend-disabled-shadow);
}

.btnV2-btn-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btnV2-btn-txt-s20-w700-cMain {
    color: var(--buttonComponent_v2-main-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.btnV2-btn-txt-s20-w700-cMain-disabled {
    color: var(--buttonComponent_v2-main-disabled-txt);
}

.btnV2-btn-txt-add-trueAcc {
    color: var(--trueAccountDdTf-add-acc-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    text-align: center;
}

.btnV2-container-verify-mobile-resend-cMain {
    color: var(--verifyMobile-resend-main-txt);
    font-size: var(--fontSize20);
}

.btnV2-btn-txt-edit-trueAcc,
.btnV2-container-verify-mobile-resend-cMain {
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.btnV2-btn-txt-edit-trueAcc {
    color: var(--trueAccountDdTf-edit-acc-txt);
    font-size: var(--fontSize16);
}

.btnV2-btn-txt-cancel-trueAcc {
    color: var(--trueAccountDdTf-cancel-acc-txt);
}

.btnV2-btn-txt-cancel-trueAcc,
.btnV2-btn-txt-cfm-trueAcc {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.btnV2-btn-txt-cfm-trueAcc {
    color: var(--trueAccountDdTf-cfm-acc-txt);
}

.btnV2-container-verify-mobile-resend-cMain-disabled {
    color: var(--verifyMobile-resend-disabled-txt);
}

.sitemap-content-item {
    color: var(--siteMap-desc-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    padding: 11.25px 0 11.25px 25px;
}

.changePasswordTextField-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

.changePasswordTextField-input-container {
    border-bottom: 1px solid var(--signIn-underline);
    height: 35px;
    padding-top: 10px;
}

.changePasswordTextField-input {
    color: #000;
}

.changePasswordTextField-placeholder {
    color: gray;
    font-weight: 350;
}

.changePasswordTextField-icon {
    height: 24px;
    object-fit: contain;
    width: 21px;
}

.changePasswordTextField-error-input-container {
    border: var(--loginCommonTf-err-border);
}

.changePasswordTextField-hide-show-img-container {
    display: flex;
}

.changePasswordTextField-hide-show-img {
    height: 24px;
    object-fit: contain;
    width: 32px;
}

.changePasswordTextField-error-msg {
    color: var(--loginCommonTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.content-modal {
    animation: contentModalAnim 0.5s ease-out;
    -webkit-backdrop-filter: var(--plane-blur);
    backdrop-filter: var(--plane-blur);
    background: var(--plane-bg);
    bottom: var(--footer-height);
    display: flex;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: var(--top-header-height);
    z-index: 5;
}

.content-modal-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    padding: 24px 18px;
    width: 100%;
}

@keyframes contentModalAnim {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.errMsgModal-main-container {
    align-items: center;
    gap: 16px;
    height: 100%;
    max-width: 686px;
    position: relative;
    width: 100%;
}

.errMsgModal-container,
.errMsgModal-main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.errMsgModal-container {
    background: var(--dialog-bg);
    border: var(--dialog-border);
    border-radius: 16px;
    gap: 11px;
    max-width: 100%;
    padding: 32px 50px;
    width: 468px;
}

.errMsgModal-content-container {
    display: flex;
    flex-direction: column;
    max-height: 30vh;
    overflow: auto;
}

.errMsgModal-title {
    word-wrap: break-word;
    color: var(--dialog-title-txt);
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    margin-bottom: 8px;
    text-align: center;
    white-space: wrap;
}

.errMsgModal-content {
    color: var(--dialog-content-txt);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 32px;
    text-align: center;
}

.errMsgModal-btn-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
}

.errMsgModal-btn {
    cursor: pointer;
    height: 48px;
}

.errMsgModal-btn-txt {
    color: var(--dialog-btn-txt);
}

.errMsgModal-error-bg-btn {
    background: var(--dialog-err);
}

@font-face {
    font-family: swiper-icons;
    font-style: normal;
    font-weight: 400;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
}

:root {
    --swiper-theme-color: #007aff;
}

.swiper {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1;
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column;
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0);
}

.swiper-pointer-events {
    touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x;
}

.swiper-slide {
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
}

.swiper-slide-invisible-blank {
    visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto;
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}

.swiper-css-mode>.swiper-wrapper {
    -ms-overflow-style: none;
    overflow: auto;
    scrollbar-width: none;
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999;
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    height: var(--swiper-centered-offset-after);
    width: 100%;
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
}

.news-container {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: var(--root-bank-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    width: 100vw;
    z-index: 99998;
}

.swiper-container {
    margin-bottom: min(5.3601vh, 64px);
    margin-top: min(19.0117vh, 227px);
    min-height: min(52.5963vh, 628px);
    width: 100%;
}

@media (max-width: 600px) {
    .swiper-container {
        margin-bottom: min(3.4632vh, 32px);
        margin-top: min(21.4286vh, 198px);
        min-height: min(48.7013vh, 450px);
    }
}

.swiper-slide {
    background: var(--news-bg);
    border: var(--news-border);
    border-radius: min(2.9976vw, 25px);
    box-shadow: var(--news-shadow);
    height: min(52.5963vh, 628px);
    margin: 0 min(7.6739vw, 64px);
    transform: scale(0.9) !important;
    transition: all 0.2s linear;
    width: min(51.3189vw, 428px);
}

@media (max-width: 600px) {
    .swiper-slide {
        border-radius: min(5.8548vw, 25px);
        margin: 0 min(3.7471vw, 16px);
        width: min(69.555vw, 297px);
    }
}

.swiper-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 min(3.8369vw, 32px);
}

@media (max-width: 600px) {
    .swiper-content {
        padding: 0 min(3.7471vw, 16px);
    }
}

.swiper-slide-active {
    transform: scale(1) !important;
}

.news-img-container {
    height: min(22.6131vh, 270px);
    margin-bottom: min(2.7638vh, 33px);
    margin-top: min(1.34vh, 16px);
}

@media (max-width: 600px) {
    .news-img-container {
        height: min(23.3766vh, 216px);
        margin-bottom: min(1.9481vh, 18px);
        margin-top: min(2.0563vh, 19px);
    }
}

.news-img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.news-content-container {
    font-size: min(1.9185vw, 16px);
    font-weight: 400;
    height: min(11.139vh, 133px);
    line-height: 19px;
    margin-bottom: min(5.3601vh, 64px);
    overflow: auto;
    text-align: left;
}

@media (max-width: 600px) {
    .news-content-container {
        font-size: min(2.8103vw, 12px);
        height: min(10.6061vh, 98px);
        line-height: 14px;
        margin-bottom: min(3.4632vh, 32px);
    }
}

.news-content-container::-webkit-scrollbar-track {
    background: var(--news-content-scrollbar-track);
    border-radius: 10px;
}

.news-content-container::-webkit-scrollbar-thumb {
    background: var(--news-content-scrollbar-thumb);
    border-radius: 10px;
}

.news-content-container::-webkit-scrollbar-thumb:hover {
    background: var(--news-content-scrollbar-thumb-hover);
}

.news-title {
    color: var(--news-title-txt);
}

.news-desc {
    color: var(--news-desc-txt);
}

.news-btn {
    background: var(--news-ok-btn-bg);
    border: var(--news-ok-btn-border);
    box-shadow: var(--news-ok-btn-shadow);
    cursor: pointer;
    height: 48px;
    padding: unset;
    width: min(43.6451vw, 364px);
}

@media (max-width: 600px) {
    .news-btn {
        border-radius: min(2.3419vw, 10px);
        height: 35px;
        width: min(62.0609vw, 265px);
    }
}

.news-txt {
    color: var(--news-ok-btn-txt);
}

.news-close {
    border-radius: min(1.199vw, 10px);
    cursor: pointer;
    height: 48px;
    width: min(48.4412vw, 404px);
}

@media (max-width: 600px) {
    .news-close {
        border-radius: min(2.3419vw, 10px);
        height: 35px;
        width: min(69.555vw, 297px);
    }
}

.news-close-bg {
    background: var(--news-close-bg);
    border: var(--news-close-border);
    box-shadow: var(--news-close-shadow);
}

.news-close-txt {
    color: var(--news-close-txt);
}

.news-pagination-container {
    bottom: min(3.3501vh, 40px);
    display: flex;
    gap: 7px;
    justify-content: center;
    position: absolute;
    width: auto;
}

.news-pagination {
    background: var(--news-pagination);
    border-radius: 100%;
    height: 6px;
    width: 6px;
}

.news-pagination.active {
    background: var(--news-pagination-active);
}

.game-container {
    height: 100%;
    width: 100%;
}

@media (max-width: 1281px) {
    .game-container {
        max-width: 686px;
    }
}

.game-style {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 0 0 33.7px;
    width: 100%;
}

.game-arrow-icon {
    height: 20px;
    width: 12px;
}

.game-search-icon {
    height: 24px;
    width: 24px;
}

.game-search-textfield {
    align-items: center;
    background: var(--search-text-field-bg);
    border: var(--search-text-inset-border);
    border-radius: 8px;
    box-shadow: var(--search-text-inset-shadow);
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 8px;
    padding: 11px;
}

.search-input {
    background: transparent;
    border: none;
    color: var(--game-search-input-txt);
    font-size: 16px;
    font-weight: 400;
    width: 100%;
}

.search-input:-ms-input-placeholder {
    color: var(--search-input-placeholder);
}

.search-input::placeholder {
    color: var(--search-input-placeholder);
}

.gameIdOptionView-container {
    align-items: center;
    background: var(--gameIdOptionView-bg);
    border: var(--gameIdOptionView-bg-border);
    border-radius: 10px;
    box-shadow: var(--gameIdOptionView-bg-shadow);
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    overflow: auto;
    padding: 15px 16px;
}

.gameIdOptionView-info-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gameIdOptionView-title {
    color: var(--gameIdOptionView-id-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.gameIdOptionView-subcontainer-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.gameIdOptionView-subcontainer {
    background: var(--gameIdOptionView-subcontainer-bg);
    border: var(--gameIdOptionView-subcontainer-border);
    border-radius: 6px;
    box-shadow: var(--gameIdOptionView-subcontainer-shadow);
    color: var(--gameIdOptionView-subcontainer-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: normal;
    padding: 3px 7px;
}

.gameIdOptionView-change-btn-container {
    align-items: center;
    background: var(--gameIdOptionView-change-btn-bg);
    border: var(--gameIdOptionView-change-btn-border);
    border-radius: 10px;
    box-shadow: var(--gameIdOptionView-change-btn-shadow);
    display: flex;
    flex-direction: row;
    height: 42px;
    justify-content: center;
    padding: 0 9px;
}

.gameIdOptionView-change-btn-txt {
    color: var(--gameIdOptionView-change-btn-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.gameIdOptionView-popup-dd-img {
    box-sizing: content-box;
    object-fit: contain;
    padding: 0 36px;
    width: 20px;
}

.gameIdOptionView-popup-subcontainer {
    background: var(--gameIdOptionView-popup-subcontainer-bg);
    border: var(--gameIdOptionView-popup-subcontainer-border);
    border-radius: 6px;
    box-shadow: var(--gameIdOptionView-popup-subcontainer-shadow);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
    padding: 3px 8px;
}

.gameIdOptionView-popup-subcontainer-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.gameIdOptionView-popup-container {
    background: var(--gameIdOptionView-popup-bg);
    border: var(--gameIdOptionView-popup-border);
    border-radius: 10px;
    box-shadow: var(--gameIdOptionView-popup-shadow);
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 90%;
    overflow-y: auto;
    padding: 15px 16px;
    width: 100%;
}

.gameIdOptionView-popup-info-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gameIdOptionView-popup-title-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.gameIdOptionView-popup-title {
    color: var(--gameIdOptionView-popup-id-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.gameIdOptionView-popup-item-separator {
    background: var(--gameIdOptionView-popup-separator);
    min-height: 1px;
    width: 100%;
}

.gameIdOptionView-popup-item-below-container {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
}

.gameIdOptionView-max-remark {
    color: var(--gameIdOptionView-popup-item-max-remark-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.gameIdOptionView-popup-listing-add-new-button {
    align-items: center;
    background: var(--gameIdOptionView-popup-add-btn-bg);
    border: var(--gameIdOptionView-popup-add-btn-border);
    border-radius: 10px;
    box-shadow: var(--gameIdOptionView-popup-add-btn-shadow);
    height: 42px;
    padding: 0 13px;
}

.gameIdOptionView-popup-listing-add-new-button-disabled {
    background: var(--gameIdOptionView-popup-add-btn-bg-disabled);
    border: var(--gameIdOptionView-popup-add-btn-border-disabled);
    box-shadow: var(--gameIdOptionView-popup-add-btn-shadow-disabled);
}

.gameIdOptionView-popup-listing-add-new-button-text {
    color: var(--gameIdOptionView-popup-add-btn-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.gameIdOptionView-popup-listing-add-new-button-text-disabled {
    color: var(--gameIdOptionView-popup-add-btn-txt-disabled);
}

.gameIdOptionView-popup-options-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.game-category-width-container,
.game-category-width-container-logout {
    padding-top: 12px;
    width: 100%;
}

.game-category-container {
    background: var(--game-category-bg);
    border-radius: 12px;
    padding: 0 12px;
}

.game-category-container-flex {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.game-category-scroll-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 18px;
    overflow-x: scroll;
    padding: 12px 4px;
}

.game-category-scroll-container::-webkit-scrollbar {
    display: none;
}

.game-search-background-container {
    background: var(--game-top-header-bg);
    top: var(--top-header-height);
    z-index: 1;
}

.game-search-filter-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 12px 0;
}

.game-filter-btn-container {
    align-items: center;
    background: var(--game-filter-btn-bg);
    border: var(--game-filter-btn-container);
    border-radius: 10px;
    box-shadow: var(--game-filter-shadow);
    display: flex;
    flex-direction: column;
    height: 57px;
    justify-content: space-evenly;
    min-width: 57px;
    padding-top: 3px;
    position: relative;
    width: 57px;
}

.game-filter-btn-container-selected {
    background: var(--game-filter-selected);
    border: var(--game-filter-selected-border);
    box-shadow: var(--game-filter-selected-shadow);
}

.game-filter-icon {
    height: 25px;
    width: 25px;
}

.game-filter-txt {
    color: var(--game-filter-selected-txt);
    font-size: 11px;
    font-weight: 700;
}

.game-filter-unselect-txt {
    color: var(--game-filter-unselect-txt);
    font-size: 10px;
    font-weight: 700;
}

.appGame-listing-container,
.game-listing-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-provider-list-container {
    grid-gap: 16px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
}

.game-provider-item-container {
    border: var(--game-provider-btn-border);
    border-radius: 10px;
    box-shadow: var(--game-provider-btn-shadow);
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.game-provider-item-image {
    height: 100%;
    pointer-events: none;
    width: 100%;
}

.game-provider-item-image-modifier {
    pointer-events: auto;
}

.game-provider-icon {
    height: 100%;
}

.category-loading {
    align-items: center;
    height: 81px;
}

.category-loading,
.game-nodata {
    display: flex;
    justify-content: center;
}

.game-nodata {
    align-items: flex-start;
    height: auto;
    width: 100%;
}

.inner-game-search-background-container {
    background: var(--game-top-header-bg);
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 0;
    position: sticky;
    top: var(--top-header-height);
    z-index: 1;
}

.inner-game-search-filter-container {
    display: flex;
    flex-direction: row;
    gap: 26px;
    justify-content: space-between;
}

.inner-game-back-container,
.inner-game-search-filter-search-setting-container {
    display: flex;
    flex-direction: row;
}

.inner-game-back-container {
    align-items: center;
    background: var(--inner-game-back-bg);
    border: var(--inner-game-back-border);
    border-radius: 8px;
    box-shadow: var(--inner-game-back-shadow);
    gap: 15px;
    height: 42px;
    padding: 0 16px;
}

.inner-game-back-text {
    color: var(--inner-game-back-txt);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

.provider-banner-container {
    display: flex;
    gap: 26px;
    max-height: 46;
    max-width: 362px;
    padding: 6px 17px;
}

.provider-banner-container,
.provider-banner-container-below {
    align-items: center;
    background: var(--provider-banner-bg);
    border-radius: 12px;
    box-shadow: var(--provider-banner-shadow);
    flex-direction: row;
}

.provider-banner-container-below {
    display: none;
    gap: 11px;
    margin-bottom: 16px;
    padding: 23px 18px;
}

.provider-banner-text {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--provider-banner-txt);
    display: -webkit-box;
    font-size: 12px;
    font-weight: 700;
    line-height: 95%;
    overflow: hidden;
    padding-bottom: 1px;
    text-overflow: ellipsis;
}

.inner-game-search-icon {
    height: 24px;
    width: 24px;
}

.inner-game-search-textfield {
    align-items: center;
    background: var(--search-text-field-bg);
    border-radius: 8px;
    box-shadow: var(--search-text-inset-shadow);
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 8px;
    padding: 11px;
}

.inner-game-hide-css {
    display: none;
}

.inner-search-input {
    background: transparent;
    border: none;
    color: var(--game-search-input-txt);
    font-size: 16px;
    font-weight: 400;
    width: 100%;
}

.inner-search-input:-ms-input-placeholder {
    color: var(--search-input-placeholder);
}

.inner-search-input::placeholder {
    color: var(--search-input-placeholder);
}

.app-game-in-progress-alert-main-container {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.app-game-in-progress-top-view {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 55px;
    width: 100%;
}

.app-game-in-progress-img {
    width: 100%;
}

.app-game-in-progress-title {
    color: var(--sub-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.app-game-in-progress-middle-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.app-game-in-progress-bottom-view {
    display: flex;
    flex-direction: row;
    gap: 18px;
    width: 100%;
}

.app-game-alert-exit-button,
.app-game-alert-play-button {
    width: calc(50% - 9px);
}

.app-game-not-found-alert-main-container,
.app-game-not-found-top-view {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.app-game-not-found-top-view {
    align-items: center;
    width: 100%;
}

.app-game-not-found-img {
    width: 100%;
}

.app-game-not-found-top-sub-view {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.app-game-not-found-title {
    color: var(--app-game-warning-color);
    font-size: var(--fontSize24);
}

.app-game-not-found-desc,
.app-game-not-found-title {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.app-game-not-found-desc {
    color: var(--sub-txt);
    font-size: var(--fontSize16);
}

.app-game-not-found-middle-view {
    width: 100%;
}

.app-game-not-found-bottom-view {
    display: flex;
    flex-direction: row;
    gap: 18px;
    width: 100%;
}

.gameIdOptionView-popup-subcontainer2 {
    background: var(--gameIdOptionView-popup-subcontainer2-bg);
    border: var(--gameIdOptionView-popup-subcontainer2-border);
    border-radius: 6px;
    box-shadow: var(--gameIdOptionView-popup-subcontainer2-shadow);
    color: var(--gameIdOptionView-popup-subcontainer2-color);
    display: flex;
    font-weight: var(--fontWeight400);
    padding: 3px 8px;
}

.gameIdOptionView-info-title,
.gameIdOptionView-popup-subcontainer2 {
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    line-height: normal;
}

.gameIdOptionView-info-title {
    color: var(--gameIdOptionView-info-title-txt);
    font-weight: var(--fontWeight700);
    white-space: pre;
}

.gameIdOptionView-info-desc-txt {
    color: var(--gameIdOptionView-info-desc-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.gameIdOptionView-image {
    height: 42px;
    width: 42px;
}

.gameIdOptionView-imgInfo-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

@media screen and (max-width: 1500px) {
    .game-provider-list-container {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 890px) {
    .game-style {
        padding: 0 0 33.7px;
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 686px) {
    .inner-game-search-filter-container {
        gap: 16px;
    }
    .game-style {
        padding: 0 0 33.7px;
    }
    .game-provider-list-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .provider-banner-container {
        display: none;
    }
    .provider-banner-container-below {
        display: flex;
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 600px) {
    .game-provider-list-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .game-icon-style {
        height: auto;
        margin-bottom: 16px;
        position: relative;
        width: 100%;
    }
    .game-icon-style .game-icon-container {
        height: auto;
        min-height: 80px;
        width: 100%;
    }
    .game-icon-style .game-name {
        left: 0;
        margin: 5px 0 0;
        position: absolute;
        width: 100%;
    }
    .game-style {
        padding: 0 0 33.7px;
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .game-style {
        padding: 0 0 33.7px;
    }
    .game-provider-list-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 280px) {
    .game-style {
        padding: 0 0 33.7px;
    }
}

.marquee-container {
    display: flex;
    flex-direction: row;
}

.marquee-icon {
    height: 16px;
    width: 20.623px;
}

.marquee-txt {
    color: var(--marquee-txt);
    font-size: 11px;
    margin: 0 0 0 20px;
}

.marquee-txt-dark {
    color: var(--marquee-txt-dark);
}

.speaker-icon {
    height: 22px;
    width: 27px;
}

.custom-alert-container {
    background: var(--dialog-bg);
    border: var(--dialog-border);
    border-radius: 25px;
    max-height: 80vh;
    min-height: min(22vh, 295px);
    overflow: auto;
    padding: min(4.7619vh, 72px) min(3.4632vh, 40.5px) min(4.9784vh, 72px);
    width: min(85vw, 468px);
}

.suspense-spinner-container {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}

.suspense-spinner-style {
    background: transparent;
    display: flex;
    position: relative;
}

.suspense-loading-spinner-gif {
    height: 100px;
    width: 100px;
}

@media screen and (max-width: 400px) {
    .suspense-loading-spinner-gif {
        height: 50px;
        width: 50px;
    }
}

.appGameChangePassword-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 686px;
    position: relative;
    width: 100%;
}

.appGameChangePassword-modal-container {
    align-items: center;
    background: var(--content-modal-bg);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;
    padding: 32px 50px;
    width: 100%;
}

.appGameChangePassword-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.appGameChangePassword-modal-title {
    color: var(--pin-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    padding-bottom: 39px;
}

:root {
    --game-card-height: 150px;
}

.game-card-perspective-container {
    perspective: 500px;
}

.flipped-game-container {
    transform: rotateY(180deg);
}

.game-card-main-container {
    height: 150px;
    height: var(--game-card-height);
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.game-info-icon-container {
    height: 30px;
    object-fit: fill;
    position: absolute;
    right: 4px;
    top: 4px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 30px;
}

.game-info-img {
    box-shadow: var(--game-info-shadow);
    pointer-events: none;
}

.game-info-img-modifier {
    pointer-events: auto;
}

.game-item-container {
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: var(--game-provider-btn-shadow);
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 0;
}

.game-item-image {
    height: 100%;
    pointer-events: none;
    width: 100%;
}

.game-item-image-modifier {
    pointer-events: auto;
}

.game-info-close-img,
.game-info-img {
    border-radius: 50%;
    height: inherit;
    object-fit: fill;
    transform: translateZ(0);
    width: inherit;
}

.game-info-close-img {
    box-shadow: var(--game-flipped-close-shadow);
    pointer-events: none;
}

.game-info-container {
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: var(--game-provider-btn-shadow);
    overflow: hidden;
    padding: 7px;
    position: absolute;
    transform: rotateY(180deg);
    z-index: 0;
}

.game-info-container,
.game-info-scrollable-container {
    background: var(--game-flipped-bg);
    height: 100%;
    width: 100%;
}

.game-info-scrollable-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-info-scrollable-container::-webkit-scrollbar {
    display: none;
}

.game-info-scrollable-property {
    overflow: scroll;
}

.game-info-small-logo {
    border-radius: 6px;
    box-shadow: var(--game-flipped-small-logo-shadow);
    height: 48px;
    min-height: 48px;
    object-fit: contain;
    overflow: hidden;
    width: 41px;
}

.game-info-display-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-item-padding-layer {
    height: 100%;
    position: absolute;
    width: 100%;
}

.game-info-item-container {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.game-info-item-title {
    color: var(--game-flipped-title-txt);
    flex: 0 0 40%;
    font-family: var(--fontFamily);
    font-size: 9px;
    font-weight: var(--fontWeight700);
    line-height: 95%;
    word-break: break-word;
}

.game-info-item-separator {
    background: var(--game-flipped-separator-bg);
    flex: 0 0 1px;
    width: 1px;
}

.game-info-item-value {
    color: var(--game-flipped-value-txt);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: 9px;
    font-weight: 500;
    line-height: 95%;
    word-break: break-word;
}

.paginatedList-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.paginatedList-loading-img {
    align-self: center;
    height: 50px;
    width: 50px;
}

.paginatedList-hasMore,
.paginatedList-retry {
    align-self: center;
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
}

.focus-component-container {
    bottom: var(--footer-height);
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 5;
}

.focus-component-empty-container {
    flex: 1 1;
}

.game-id-listing-outer-container {
    background: #141723;
    border-radius: 10px;
    width: 468px;
}

.game-id-listing-top-title {
    align-items: center;
    background: var(--back-nav-bg);
    display: flex;
    flex-direction: row;
    font-size: 32px;
    font-weight: 700;
    gap: 15px;
    justify-content: space-between;
    max-width: 468px;
    padding: 32px 10px;
    width: 100%;
}

.game-id-listing-container {
    background: #141723;
    border-radius: 10px;
}

.game-id-listing-subheader-row {
    align-items: center;
    background: #000;
    display: flex;
    height: 70px;
    padding: 0 11.5px 0 0;
}

.game-id-listing-subheader-title {
    color: var(--siteMap-title-txt);
    flex-grow: 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: 100%;
    opacity: 0.75;
    padding-left: 15px;
}

.game-id-listing-bordertop-line {
    align-items: center;
    border-top: 1px solid #fff;
    justify-content: space-between;
    margin: 0 10px 10px;
    width: 95%;
}

.game-id-listing-item-container {
    display: flex;
    flex-direction: row;
    gap: 29px;
    justify-content: space-between;
}

.game-id-listing-item-container-description {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.game-id-listing-icon-image {
    height: 30px;
    object-fit: fill;
    width: 30px;
}

.game-id-listing-item-container-description-title {
    color: var(--gameIdOptionView-popup-item-id-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.game-id-listing-item-container-description-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.game-id-listing-item-container-description-details {
    background: var(--gameIdOptionView-popup-item-subcontainer-bg);
    border: var(--gameIdOptionView-popup-item-subcontainer-border);
    border-radius: 6px;
    box-shadow: var(--gameIdOptionView-popup-item-subcontainer-shadow);
    color: var(--gameIdOptionView-popup-item-subcontainer-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: normal;
    padding: 3px 8px;
}

.game-id-listing-item-delete {
    box-sizing: content-box;
    cursor: pointer;
    object-fit: contain;
    padding: 0 36px;
    width: 21px;
}

.game-id-listing-item-delete.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.game-id-listing-item-button {
    align-items: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--introDownloadApp-btn-shadow);
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    padding: 11px 8px;
}

.game-id-listing-item-button-text {
    color: #000;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.game-id-listing-tick-img {
    height: 30px;
    width: 30px;
}

.game-id-listing-item-container-left {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.confirmDelete-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 686px;
    position: relative;
    width: 100%;
}

.confirmDelete-modal-container {
    background: #fff;
    border: var(--signIn-modal-border);
    border-radius: 16px;
    box-shadow: var(--signIn-modal-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 450px;
    padding: 32px 50px;
    width: 100%;
}

.confirmDelete-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.confirmDelete-modal-title-container {
    align-items: center;
    color: var(--gameIdDelete-title);
    display: flex;
    font-family: var(--fontFamily);
    font-size: 24px;
    font-size: var(--fontSize24);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    justify-content: center;
    line-height: normal;
    margin: 0 0 50px;
    overflow-wrap: anywhere;
    text-align: center;
    width: 100%;
}

.confirmDelete-form-container {
    width: 90%;
}

.confirmDelete-modal-input-container {
    border-bottom: 1px solid var(--signIn-underline);
    padding-top: 15px;
}

.confirmDelete-modal-info-container {
    align-items: left;
    display: flex;
    flex-direction: column;
}

.confirmDelete-modal-info-title {
    color: var(--gameIdDelete-desc);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.confirmDelete-modal-info {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.confirmDelete-modal-info-option {
    color: var(--gameIdDelete-info-title);
    font-weight: var(--fontWeight700);
}

.confirmDelete-modal-info-option,
.confirmDelete-modal-info-option-value {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    line-height: normal;
}

.confirmDelete-modal-info-option-value {
    color: var(--gameIdDelete-info-value);
    font-weight: var(--fontWeight400);
}

.confirmDelete-modal-mobile-separator {
    background: var(--signIn-mobile-separator);
    height: 20px;
    width: 1px;
}

.confirmDelete-modal-btn-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    width: 100%;
}

.confirmDelete-modal-cancel-btn {
    background: var(--gameIdDelete-cancel-btn-bg);
    border: var(--gameIdDelete-cancel-btn-border);
}

.confirmDelete-modal-cancel-txt {
    color: var(--gameIdDelete-cancel-btn-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.confirmDelete-modal-btn-cancel-style {
    border: 1px solid;
    box-shadow: var(--gameIdDelete-cancel-btn-shadow);
    font-size: 16px;
    height: 42px;
    line-height: 20px;
    min-height: 42px;
    width: 100%;
}

.confirmDelete-modal-btn {
    background: var(--gameIdDelete-delete-btn-bg);
    border: var(--gameIdDelete-delete-btn-border);
}

.confirmDelete-modal-btn-style {
    box-shadow: var(--gameIdDelete-delete-btn-shadow);
    font-size: 16px;
    height: 42px;
    line-height: 20px;
    min-height: 42px;
    width: 100%;
}

.confirmDelete-modal-txt {
    color: var(--gameIdDelete-delete-btn-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.confirmDelete-modal-disabled-txt {
    color: var(--signIn-disabled-btn-txt);
}

.confirmDelete-modal-disabled-btn {
    background: var(--signIn-disabled-btn);
    border: var(--signIn-disabled-border);
    color: #fff;
}

.confirmDelete-modal-or-container {
    display: flex;
    margin: 25px 0;
    width: 90%;
}

.confirmDelete-modal-or-underline {
    border: var(--signIn-or-border);
    flex-grow: 2;
    height: 1px;
}

.confirmDelete-modal-or-text {
    color: var(--signIn-or);
    flex-basis: auto;
    flex-grow: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin: 0 13px;
    text-align: center;
}

.confirmDelete-modal-line {
    align-items: center;
    background: var(--signIn-login-line-bg);
    border: none;
    border-radius: var(--btn-radius);
    display: flex;
    flex-direction: row;
    height: 42px;
    justify-content: center;
    min-height: 42px;
    padding: 0;
    position: relative;
    width: 100%;
}

.confirmDelete-modal-line .confirmDelete-modal-line-icon-container {
    align-items: center;
    background: var(--signIn-line-icon-bg);
    border-bottom-left-radius: var(--btn-radius);
    border-top-left-radius: var(--btn-radius);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 9px;
    width: auto;
}

.confirmDelete-modal-line .confirmDelete-modal-line-icon-container .confirmDelete-modal-login-line-icon {
    height: 20px;
    width: 20px;
}

.confirmDelete-modal-line .confirmDelete-modal-line-label {
    align-items: center;
    color: var(--signIn-line-label);
    display: flex;
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 19px;
    width: 100%;
}

.confirmDelete-modal-remark {
    color: var(--gameIdDelete-info-value);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: italic;
    font-weight: var(--fontWeight400);
    line-height: normal;
    margin-top: 10px;
}

.confirmDelete-modal-seo {
    border: 1px solid #707070;
    border-radius: 10px;
    bottom: 0;
    height: 0.5px;
    max-width: 361px;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    position: fixed;
}

.invite-container {
    align-items: center;
    background: var(--invite-bg);
    background-image: url(/static/media/effect.1c8ba7778db69e02d581.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 100vh;
    justify-content: center;
    position: absolute;
    width: 100vw;
    z-index: 99999;
}

.invite-angpao-container {
    animation: angpao 1.2s;
    display: flex;
    height: 300px;
    transform: scale(1);
    width: 300px;
}

.invite-angpao-container .invite-angpaoWCloud {
    height: 300px;
    width: 300px;
}

.invite-angpao-container .invite-close {
    height: 40px;
    position: absolute;
    right: 60px;
    top: 50px;
    width: 40px;
}

.invite-choishen-container {
    align-items: center;
    animation: angpao 1.2s;
    background-image: url(/static/media/sunray.39d978e99816c11898f5.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 700px 700px;
    display: none;
    height: 100%;
    justify-content: center;
    transform: scale(1);
    width: 100%;
}

.invite-choishen {
    align-items: center;
    background-image: url(/static/media/choishen.0cf85df17aaa75251b91.png);
    background-size: 100% 100%;
    display: flex;
    height: 300px;
    justify-content: center;
    position: absolute;
    width: 250px;
}

.invite-choishen .invite-numbering {
    color: var(--invite-numbering);
    font-size: 40px;
    font-weight: 700;
    margin-top: 50px;
}

.invite-choishen .invite-receive {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO8AAABSCAMAAACL+nMgAAACWFBMVEUAAADWxLb/5ZvswlkhFgNJMQYxHwdmRQcsGwgCAAAQBwBePwdAKgVSOAgYDwA4JQYRDwB9VQjty47mlyD925CfawaFWwfjyIjqyZXxsVPdtV1zTQfnnzHYsWHMsnPUu33JrGvllibSrmHLq2aTYwbjjhHhiQXijQn925HqojfqqD7NrGPijQX92o/21ZXqy5P4yXX60oTvtmD6z3/ijAbxuFzbxLTqojb4ynbfhQDijQb92o/twHvtrUvaxbT0vWPpoDLaxrjpni3bupf0xnDvsVD/x07/xkv/z1r/w0b/0V7/y1X/yVL/v0H/uTj/vT7/rir/tjT/xEr/szL/0mL/qyP/wUT/1WX/sC7/ujv/sTDdgADfhADdiyHmkQDaxrj2pDP+3pb+3pj/xEj/5bz+4pn+1Hb/1Jz/5Z3qlQP+0nP/zU//zm//3qv/yWLhiAH/05X/2qj3ohb+zIv/2KP/4rftqUL/3q/qoTb/4LP/3KP82Iv8w3r2w2zwr03+x3z8vWf3yXX/w1rqni7/7aX/15n/y4T+13n4sEz3qDv/6qH/zWzvrEjspjz/2Z7704XxtFf8uUr6pyD+yIH6z33pmybxnQ7/0JP+zpD9wXL3vW//ymj6uWP3q0T9v2z/zGr1uWf0tV77uF34slPnlhb/0o7+x1j9vU35sUPlkw7/3qfzvmPyuFz6tFn8tkX4rDzumQr/z4j4wXb/0lX9w1P7yYb/4oH9vlX6qy7rnBz/3Xz6xoDzpy79xXTxqTr2ulT7tED7sDfwoSfauJP+023cn1Xzszrbq3OpWniyAAAARnRSTlMAOFcEGjQjSh8IDEMuOxQpEFkO/v1yX2Ic/rBSIqp5boUKoI9pN/Xl5FcUmIeLRijevzfxxbOmnXNtUrGpcGhB5tvMx4vOpNeOjgAACVlJREFUeNrtm4d/0kAUx6O49xb33nvvvSpuBXHvhQvFhQsHLlQUUHBvRVBUVLRWca9/y/fe5S6BGOvWRL+0/bThEvv1d3d5SS/Sn8RisZQvX74CUK1alSqlGOWQMnnQRrlBlSpVqlWrVqEC7AoHkIwBqapEmWLVqlUrIaW10HZ4n8kzbbQ2gDS5clUyBU1yrIxURMrmUJHAN8mceVPesnP5v9aZy3JXUiVTZtkAqE7U4bAfYbusLmuTM0iznP9OZbKFZEmWciVXbkqSLZHaueAmZk7WsjMGzZV/jrGlhtXapeTPpC6jCdKYaIq0ADoAzYFGSH0VtKE5Ai1aILQP7d2EqEt0sVprWH7AtVPbRb+KpXmsUDjM2KfANqiaLM1nkcKAzt/lbG278FeylKFvvE9Fsbr5R+9U4xuj7VSL77r9+EGFZd/IymJRtz6IPGU8VkNb6F1+zNXIEeAScU7mJP+1a7Xt/PW2NQbUIrYvs9ttjAIt4wTjx+MnMRo/NYzJZ2ruj6zV+FWChznIG7Hl4rFjp0+fMGHCJGDmzJkTgSnItGmzkBkzpk27e257LaRt36/Ntu125B25Cl8bvL7SF17F+U4l48Uqb94WxLSMptYkO10tS7rMdxr5IpNnTNuLAl+XcWeyPejktr8mXwJ8AfCYuhi+cG945e+1GFWZK9kKXWGb4wvMuHsSNboVO447ybb2PF96/cR8icVj2dexU9FosYaxCIkyVR4tyRLMVuOL3D0OJsVEXKPbceCdHfj1+ZKpPqRJpkJVK6vnSxSiTCeLvm6XrtBgGYYrfON7CwsLrwK7iYs7L148c+Y5sos4cQC4T9wg1hH7OccY21TcAth39BY1w31odzwQHPHECTz4c+DMmZ07dwPnz8Mvkbrz8tq1a4cOHboAvECy2ewboKioKJ2OxWIeB/gKpu0BnwG6fXpIj+PHT0K43Hdc4SEA/oE7d+5cPQ+AL+ruAFAVXDcAp0+fPnUKft/lxEZgPbJmzZotwFZkE7BEA2zcuhWaQEtoD/vRAdatOwVHhOM+evTo2bNnO3Y8ePDgLHAZuHLlSihUr57P5zt6dPPmzcGg1+v3+6PRoqLr15Mu1zzAlfZMVtgLwnqDuHuPkydPvnNy30wC/g8V36uK7xnuy4X1fIXwJj3hrSQsfJnwqVO6vkJY+HrRNyp8iViE+zrC4PR5YSvqOp1O2TYQCJDvy8K9jLU6nAMuCY6oWV0M2IYXC2sFe1UUIjeJMHIXecV4zXgiE4lEPLG07JyOyL6Ouyhs0erWIF3Zd9y9BQvA99Degt86X4n5STBJYSYyUcWUz85XjhhTjjmYr+PVnpMnB2p9u+7Zs8cp+95cAATCBd9fb/xq3yn40pufI2wgR8gXEgYzTa01knSZbwJ1E0zUcPmCL2iSsQd9gTC4dckbvKRL2O6hbgGejwyaL+KhPg2+SOGePV1zhrAFdI/IugGwvaepN9DYOPkCDkrYwdi5Z0/OEO67c+dOJwPTDWvqK9I1Ur6ASvg1+KlOSu0V3QTX1fRng+WbKxzeubOrarISvjeFrvZ6gVny11+crzDGWStCvpPB0ComK6FbgBMzymrzNdr45WPY5SBeqQLue/u27ItlBsnqXA+OM8T4VYwjSo++fft2M4loBt8y3QzEG9fxNdT5lwEVVhqEmW/i9u1eEjFE+MKp6K5T+GonLKONX1Z4xETA7BzcK5VaK+K1aXy5riHzdXhEwC9TqYbUnVOplBi9YafTTOMX6isXH8GvUynq0N25rw3LSD1fCNiQ+TpiYooGT+zQg0KhveQbhnORU+srAjbk+HU4xDk4FAq1x+EbCtn5bJVhviapryhfZcZKhELdwbdevZCTwO6sny/qGnH8YodOk++TevX6QO3s84XE8HXq54sfhsw3IgawzzcKpivuexNOvrq+pGu4+hl9aQBzXx9UGz7fS/K9u2DBTTPmS2ck7tteanf06Et+9s18OV9jjl/F9+jRo8KXpue4KfNNq3wbSoM2b1Z8TTl+0/yEBHfotb4mq581vu2EL41f09XPvD8L32DQR74Jmp9NVz+r5qtgMNheahUMHuXn37DThPUz+jq4r0Vq6PVuJt843HY2Zb6i3vB6h0qSxesNivrZ9qV8DTp+PbyejHi9UD9Lw71e4Rs34fWRmJ6zXm878O3j9xfyCSusn68R7z+Tr5iuYCUA3tBp5/e/4AN4gd109RXdwOK+eEe2od+vdOiM6epncbkf8fuHSsjwaNTGr5ACdpPlq9xxfxONtiPfdtEo69B2DNhk9bNLXO3DqpZm5NuwZs2okwe8wG6q+tkj4o3UrFlTYvSpWTMsAr5rqvrZhTevCNBtJTFawffKn0MzJqqvXDQ5i3g5ba5fDyt/7i4wTf0co95MXL9+vaPwbQU/2eWblIDNJPl65one7Ll+vY0ksPRMJl84iTgKFxi7flbpuhyMZDLZX1JoCD/HVcJxE9TPsXmArFuUTFK8go7z5iVtKuGwketnIq1KF5Ju3VBSY2kzb14RG8J2Er4XN3R9FXFRoUHXv1RjdZRyaQ/bsuRLq0WBxDij1s+TI0W4OjgG3uQLaj2lfPrD1g/M124LLyDjTIEB832SfUOroT2q+zlt2ksaOsrCdiQOEZPyzcw4Icw02cff6fsEZNlyd4/6+rc1VlZaYbfbnRXXRxkw5gTu3bt3IZE4BLDF7sD53QCtdwee44J3WuGP8IcZTq1D1M8xbBRPMBBrVMhPNWzcCM2WsycaTp26cQMXuuPzDPhAAy11PwNL3Xfvvgyr7Wmx+7VrbHX/0c0vXijL3d8wW7o+crtbi1ORVrjIJurneCKwQOUc+PLy/hPa5f3Edy/vB75vef+b7GQB19UXTo7nvsC48L0A10VfElZ8c57fyPE99X2+m7gvoPEF0HcH9wXyfEE4+2Syqn72gBB0Zl36tYYGH1jERl7vzZcTgk2bhtIXaIXC8zKf9f2b1gPj6ajYetIN9GwmfZFmPecA8woMX0965iD9pGJpRQ3dNw2db5ok2kC4xWPpN4dw3TTo+I25mUBd6Stp1m82McedzN4sMJDvZI/L7Z5NuAfWkL6eZq3azBbMMQqzBe9HdJG+ke6NvLMNSev3b3uD7bdjHTzi7cf33rnGwfv+49u3vTvXkL6XGiUG9x423zAM6z24BMj+KFZrCQNgtUr/+df5BA77kYgVqWFfAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    bottom: 20%;
    color: var(--invite-receive);
    font-size: 14px;
    height: 30px;
    left: 33%;
    line-height: 28px;
    position: absolute;
    text-align: center;
    width: 80px;
}

.invite-choishen .invite-dialog-container {
    animation: dialog 1.2s;
    background: var(--invite-dialog-bg);
    border: var(--invite-dialog-border);
    border-radius: var(--main-radius);
    bottom: -90px;
    box-shadow: var(--main-shadow);
    display: none;
    flex-direction: column;
    height: auto;
    padding: 20px 5px;
    position: absolute;
    transform: scale(1);
    width: auto;
}

.invite-choishen .invite-dialog-container .invite-dialog-title {
    color: var(--invite-dialog-title);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.invite-choishen .invite-dialog-container .invite-dialog-desc {
    color: var(--invite-dialog-desc);
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}

.invite-choishen .invite-dialog-container .invite-dialog-btn {
    bottom: -15px;
    position: absolute;
}

.invite-choishen .invite-dialog-container .invite-dialog-checkTime {
    color: var(--invite-dialog-checkTime);
    font-size: 13px;
    text-align: center;
}

.invite-choishen .invite-dialog-container .invite-dialog-time {
    color: var(--invite-dialog-time);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center;
}

.invite-choishen .invite-dialog-container .invite-dialog-close {
    height: 40px;
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
}

.invite-choishen .invite-dialog-share {
    bottom: -40px;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .invite-choishen .invite-dialog-container {
        bottom: -80px;
    }
    .invite-choishen .invite-dialog-container .invite-dialog-title {
        font-size: 16px;
    }
    .invite-choishen .invite-dialog-container .invite-dialog-desc {
        font-size: 10px;
    }
    .invite-choishen .invite-dialog-container .invite-dialog-checkTime {
        font-size: 12px;
    }
    .invite-choishen .invite-dialog-container .invite-dialog-time {
        font-size: 14px;
    }
    .invite-choishen .invite-dialog-container .invite-dialog-close {
        height: 30px;
        right: -10px;
        top: -10px;
        width: 30px;
    }
    .invite-choishen .invite-dialog-share {
        bottom: -40px;
    }
}

@keyframes angpao {
    0% {
        transform: scale(1.8);
    }
    20% {
        transform: scale(0.8);
    }
    40% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(0.8);
    }
    70% {
        transform: scale(0.98);
    }
    to {
        transform: scale(1);
    }
}

@keyframes dialog {
    0% {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.permanent-container {
    align-items: center;
    background: var(--permanent-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: flex-end;
    padding-bottom: 300px;
    width: 100vw;
}

.permanent-stage-container {
    align-items: center;
    animation: permanentStage 0.5s;
    background-image: url(/static/media/stage.28cde82cbe5bf84c4112.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    height: 150px;
    justify-content: center;
    position: relative;
    transform: scale(1);
    width: 250px;
}

.permanent-label-icon {
    animation: permanentLabel 0.5s linear 1s forwards;
    height: 50px;
    opacity: 0;
    width: 200px;
}

.permanent-stageFront-icon {
    bottom: 20px;
    height: 100px;
    position: absolute;
    width: 100%;
}

.permanent-angpao-icon {
    animation: permanentAngpao 0.5s linear 0.5s forwards;
    bottom: 30px;
    opacity: 0;
    position: absolute;
    width: 250px;
}

.permanent-smallAngpao-icon {
    animation: permanentSmallAngpaoZoom 0.5s linear 1s forwards;
    height: 180px;
    opacity: 0;
    width: 250px;
}

.permanent-light {
    animation: permanentSmallAngpaoZoom 0.5s linear 0.1s forwards, permanentLight 100s linear infinite;
    display: none;
    height: 400px;
    margin-bottom: 100px;
    opacity: 0;
    position: absolute;
    width: 400px;
}

.permanent-amt {
    color: var(--permanent-amt);
    display: none;
    font-size: 30px;
    font-weight: 700;
    position: absolute;
    top: 15px;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .permanent-container {
        justify-content: center;
        padding-bottom: 0;
    }
}

@keyframes permanentSmallAngpaoZoom {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes permanentSmallAngpaoHeartbeat {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(0.9);
    }
    35% {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes permanentAngpao {
    0% {
        height: 0;
        opacity: 1;
    }
    to {
        height: 280px;
        opacity: 1;
    }
}

@keyframes permanentLabel {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes permanentStage {
    0% {
        opacity: 0;
        transform: scale(10);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes permanentShakeAngpao {
    0% {
        opacity: 1;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes permanentChoiShen {
    0% {
        height: 380px;
        opacity: 1;
        width: 350px;
    }
    to {
        height: 280px;
        opacity: 1;
        width: 250px;
    }
}

@keyframes permanentLight {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}

.wheel-container,
.wheel-fortune-wheel {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wheel-fortune-wheel {
    height: 35vmin;
    position: relative;
}

.wheel-wheel {
    height: 35vmin;
    position: absolute;
}

.wheel-spotlight {
    height: 100vh;
    position: absolute;
    width: 100vw;
}

.wheel-backlight,
.wheel-coin {
    height: 50vmin;
    position: absolute;
}

.wheel-pointer {
    height: 4vmin;
    top: 0;
}

.wheel-flashlight,
.wheel-pointer {
    position: absolute;
}

.wheel-spin-btn {
    height: 73px;
}

.wheel-cancel-btn {
    align-self: center;
    color: var(--wheel-cancel-txt);
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    margin-top: 25px;
    text-decoration: underline;
}

.wheel-dialog {
    align-items: center;
    background: var(--wheel-dialog-bg);
    border: var(--wheel-dialog-border);
    border-radius: var(--main-radius);
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-evenly;
    max-width: 350px;
    padding: 10px;
    position: absolute;
    top: 50%;
    width: auto;
}

.wheel-title {
    color: var(--wheel-dialog-title);
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    margin: 10px 0 0;
    text-align: center;
}

.wheel-desc {
    color: var(--wheel-dialog-desc);
    font-size: 18px;
    margin: 8px 0;
}

.wheel-total {
    color: var(--wheel-dialog-total);
    font-size: 36px;
    font-weight: 700;
}

.wheel-ok-icon {
    height: 45px;
    margin: 20px 0 0;
    width: 101px;
}

.wheel-spin-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 75%;
}

.wheel-info-icon {
    display: flex;
    height: 50px;
    position: absolute;
    right: 5%;
    top: 10%;
    width: 50px;
}

.wheel-info-title {
    color: var(--wheel-info);
    color: var(--wheel-dialog-title);
    font-size: 22px;
    padding-top: 10px;
    text-align: center;
}

.wheel-info {
    color: var(--wheel-info);
    font-size: 16px;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
}

.wheel-info-check {
    align-items: center;
    color: var(--wheel-info-check);
    display: flex;
    flex-direction: row;
    font-size: 14px;
    justify-content: center;
    margin: 10px 0;
}

.wheel-close {
    height: 32px;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 32px;
}

.wheel-check-icon {
    height: 25px;
    margin-right: 10px;
    width: 25px;
}

.wheel-info-dialog {
    margin-bottom: 10px;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .wheel-fortune-wheel,
    .wheel-wheel {
        height: 60vmin;
    }
    .wheel-coin {
        height: 85vmin;
        position: absolute;
    }
    .wheel-dialog {
        max-width: 300px;
        top: 50%;
    }
    .wheel-pointer {
        height: 5vmin;
        position: absolute;
        top: 0;
    }
    .wheel-total {
        margin: 5px 0;
    }
    .wheel-spin-btn {
        height: 53px;
    }
    .wheel-info-icon {
        height: 30px;
        right: 5%;
        top: 10%;
        width: 30px;
    }
    .wheel-info {
        font-size: 14px;
        padding: 10px;
    }
    .wheel-info-check {
        font-size: 13px;
        margin-bottom: 10px;
        margin-top: 5px;
    }
    .wheel-close {
        position: absolute;
        right: -15px;
        top: -15px;
    }
    .wheel-check-icon {
        height: 20px;
        width: 20px;
    }
    .wheel-info {
        padding: 5px;
        top: 40%;
    }
    .wheel-backlight {
        height: 90vmin;
    }
}

@media only screen and (min-device-width: 280px) and (max-device-width: 1000px) and (orientation: landscape) {
    .wheel-spin-container {
        bottom: -20px;
        position: absolute;
        top: unset;
    }
}

.info-container {
    align-items: center;
    background: var(--info-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: absolute;
    width: 100vw;
    z-index: 199999;
}

@media (max-width: 600px) {
    .info-container {
        overflow: auto;
    }
}

.info-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    max-width: 686px;
    position: relative;
    width: 100%;
}

@media (max-width: 600px) {
    .info-item {
        justify-content: flex-start;
    }
}

.info-close-container {
    height: 60px;
    width: 100%;
}

.info-close-btn {
    align-items: center;
    background: transparent;
    border: none;
    display: flex;
    height: 100%;
    justify-content: flex-end;
    object-fit: contain;
    padding: unset;
    width: 100%;
}

.info-close-icon {
    height: 60px;
    object-fit: contain;
    width: 60px;
}

@media (max-width: 600px) {
    .info-close-icon {
        height: 30px;
        width: 30px;
    }
}

.info-content-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-img {
    height: 150px;
    margin: 0 0 32px;
    min-width: 150px;
}

@media (max-width: 600px) {
    .info-img {
        height: 113px;
        min-width: 113px;
    }
}

.info-img.topup {
    height: min(48.7013vh, 450px);
    width: min(74.0047vw, 316px);
}

@media (max-width: 600px) {
    .info-img.topup {
        height: 327px;
        margin-top: min(6.0606vh, 56px);
        width: 178px;
    }
}

.info-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
}

@media (max-width: 600px) {
    .info-content {
        height: min(42.6439vh, 394.03px);
    }
}

.info-title-txt {
    color: var(--info-title);
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    margin-bottom: 32px;
    text-align: center;
}

@media (max-width: 600px) {
    .info-title-txt {
        font-size: 24px;
        line-height: 29px;
        margin-bottom: 38px;
    }
}

.info-desc {
    color: var(--info-desc);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 64px;
    overflow: auto;
    text-align: center;
    width: 522px;
}

@media (max-width: 600px) {
    .info-desc {
        font-size: 14px;
        line-height: 17px;
        margin-bottom: 0;
        max-width: 351px;
        width: 100%;
    }
}

.info-desc-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin: 0 auto;
}

.info-desc-content.comm {
    text-align: left;
}

.info-desc-grid {
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    column-gap: 10px;
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 16px;
    row-gap: 5px;
    width: 474px;
}

@media (max-width: 600px) {
    .info-desc-grid {
        max-width: 332px;
        width: 100%;
    }
}

.info-desc-grid.topup {
    column-gap: unset;
    margin: unset;
    row-gap: 20px;
}

.info-desc-step {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 24px;
    text-align: left;
}

@media (max-width: 600px) {
    .info-desc-step {
        font-size: 14px;
        line-height: 17px;
    }
}

.info-desc-step-desc {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    text-align: left;
}

@media (max-width: 600px) {
    .info-desc-step-desc {
        font-size: 14px;
        line-height: 17px;
    }
}

.info-desc-remark {
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 17px;
    text-align: left;
    width: 470px;
}

@media (max-width: 600px) {
    .info-desc-remark {
        font-size: 10px;
        line-height: 12px;
        max-width: 336px;
        width: 100%;
    }
}

.info-cta-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 15px;
    width: 100%;
}

@media (max-width: 600px) {
    .info-cta-container {
        padding-bottom: 100px;
    }
}

.info-cta-bg {
    background: var(--info-btn-bg);
    border: var(--info-btn-border);
    box-shadow: var(--info-btn-shadow);
}

.info-cta {
    height: 48px;
    margin-bottom: 19px;
    width: 364px;
}

@media (max-width: 600px) {
    .info-cta {
        height: 35px;
        max-width: 280px;
        width: 100%;
    }
}

.info-cta-txt {
    color: var(--info-btn-txt);
}

.info-show-container {
    align-items: center;
    color: var(--dontShow);
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-weight: 400;
    justify-content: center;
    line-height: 19px;
}

.info-show-icon {
    height: 20px;
    margin-right: 8px;
    width: 20px;
}

.intro-main-container,
.intro-main-container-desktop {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0 auto;
    padding-top: 16px;
    width: 100%;
}

.intro-slider-container {
    display: flex;
    position: relative;
}

@media (max-width: 1281px) {
    .intro-slider-container {
        display: flex;
        position: relative;
    }
}

.intro-marquee-container {
    height: auto;
    margin-bottom: 12px;
    padding: 0 2px;
    width: 100%;
}

@media (max-width: 1281px) {
    .intro-marquee-container {
        margin-bottom: 4px;
    }
}

.intro-width-container {
    max-width: 1100px;
    width: 100%;
}

@media (max-width: 1281px) {
    .intro-width-container {
        max-width: 686px;
    }
}

.intro-content-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.intro-play-container {
    background: var(--game-container-bg);
    border-radius: 12px;
    display: flex;
    justify-content: right;
    padding: 21px 16px;
}

.intro-separator {
    background: var(--intro-separator-bg);
    height: 1px;
    width: 100%;
}

.intro-fund-container,
.intro-login-container {
    margin-top: 21px;
    position: relative;
}

@media (max-width: 1281px) {
    .intro-fund-container,
    .intro-login-container {
        margin-top: 16px;
    }
}

.intro-game-listing-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.intro-game-item-container {
    min-width: 120px;
}

.intro-section-container {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.allGames-list-btn {
    min-width: 92px;
}

.all-games-list-btn,
.allGames-list-btn {
    background: #141723;
    border-radius: 6px;
    color: #fff;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    height: 42px;
    justify-content: center;
    line-height: var(--fontStyleNormal);
    padding: 11px;
}

.all-games-list-btn {
    width: 92px;
}

.intro-grid-container {
    grid-row-gap: 54px;
    grid-column-gap: 15px;
    column-gap: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 54px;
}

.intro-gamelist-container {
    padding-top: 20px;
}

.intro-bottom-container-bg {
    align-items: center;
    background: var(--intro-bottom-info-bg);
    display: flex;
    flex-direction: column;
    margin-top: 96px;
    width: 100%;
}

.intro-bottom-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    padding-bottom: 15px;
    width: 100%;
}

@media (max-width: 1281px) {
    .intro-bottom-container {
        max-width: 686px;
    }
}

.brand-about-container {
    border-bottom: 1px solid var(--brandAbout-separator);
}

.brand-about-logo {
    align-items: center;
    color: var(--brandAbout-brand-txt);
    display: flex;
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    justify-content: center;
    line-height: var(--fontStyleNormal);
}

.brand-about-logo-icon {
    height: 58px;
    object-fit: contain;
}

.brand-about-info {
    color: var(--brandAbout-info-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: var(--fontStyleNormal);
    opacity: 0.5;
    text-align: center;
}

.intro-bottom-iconinfo-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sitemap-container {
    border-bottom: 1px solid var(--siteMap-bottom-separator);
    border-top: 1px solid var(--siteMap-top-separator);
    padding: 16px 0;
}

.sitemap-subheader-row {
    align-items: center;
    display: flex;
    height: 42px;
    padding: 0 11.5px 0 0;
}

.sitemap-subheader-title {
    color: var(--siteMap-title-txt);
    flex-grow: 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: 100%;
    opacity: 0.75;
}

.sitemap-subheader-collapse-icon,
.sitemap-subheader-expand-icon {
    flex-shrink: 0;
    height: 12px;
    width: 18.542px;
}

.sitemap-aboutUs-description {
    color: var(--siteMap-aboutUs-desc);
    opacity: 0.5;
    overflow-x: auto;
    padding: 0 11.5px 0 25px;
    text-align: justify;
}

.sitemap-aboutUs-description-pre {
    font-size: var(--fontSize12);
    font-weight: 400;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
}

.copyright,
.sitemap-aboutUs-description-pre {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    line-height: var(--fontStyleNormal);
}

.copyright {
    color: var(--copyright-txt);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    opacity: 0.75;
}

.depWit-info-container {
    background: var(--depWit-info-bg);
    border: var(--depWit-info-border);
    box-shadow: var(--depWit-info-shadow);
    column-gap: 5px;
    display: flex;
    height: 42px;
    margin-top: -16px;
    padding: 0 19px;
    width: 100%;
}

@media (max-width: 1281px) {
    .depWit-info-container {
        max-width: 686px;
    }
}

.depWit-info-container-desktop {
    background: var(--depWit-info-desktop-bg);
    border: var(--depWit-info-desktop-border);
    border-radius: 10px;
    box-shadow: var(--depWit-info-desktop-shadow);
    column-gap: 5px;
    display: flex;
    height: 52px;
    padding: 10px 19px;
    width: 100%;
}

.depWit-info-label-color {
    color: var(--depWit-info-label-txt);
}

.depWit-info-value-color {
    color: var(--depWit-info-value-txt);
}

.depWit-infoDes-label-color {
    color: var(--depWit-infoDes-label-txt);
}

.depWit-infoDes-value-color {
    color: var(--depWit-infoDes-value-txt);
}

.brand-info-login-container {
    align-items: center;
    column-gap: 9px;
    display: flex;
    margin-bottom: -10px;
    margin-top: -25px;
    max-width: 1100px;
    width: 100%;
}

.siteMap-aboutUs-container {
    background: var(--siteMap-aboutUs-container-bg);
    border: var(--siteMap-aboutUs-container-border);
    border-radius: 10px;
    box-shadow: var(--siteMap-aboutUs-container-shadow);
    padding: 0 16px;
}

@media screen and (max-width: 686px) {
    .intro-grid-container {
        gap: 54px;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 345px) {
    .license-certification-gc-icon {
        height: 32px;
        object-fit: contain;
    }
}

:root {
    --slider-width: 100%;
    --slider-height: auto;
    --slider-frame-border-width: 0px;
}

.slider-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.image-slider {
    height: auto;
    height: var(--slider-height);
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    width: 100%;
    width: var(--slider-width);
}

.image-slider,
.image-slider-desktop {
    border-radius: 10px;
}

.slide img {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.slides {
    transition: transform 0.3s ease-in-out;
    word-break: break-all;
}

.slide,
.slides {
    display: flex;
    height: 100%;
    width: 100%;
}

.slide {
    flex-shrink: 0;
    width: calc(var(--slider-width) + var(--slider-frame-border-width));
}

.slide img {
    height: 100%;
    width: 100%;
}

.slide-indicators-container {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.slide-indicator {
    background: var(--slideIndicator-bg);
    border-radius: 3px;
    height: 6px;
    width: 6px;
}

.selected-slide-indicator {
    background: var(--slideIndicator-active-bg);
    border-radius: 3px;
    height: 6px;
    width: 6px;
}

.slider-faded-container {
    background: linear-gradient(to bottom, transparent, var(--main-bg) 80%);
    bottom: 0;
    height: 50px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.button-container-component {
    align-items: center;
    border-radius: 10px;
    box-shadow: var(--game-provider-btn-shadow);
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 17px 33px;
}

.button-text-component {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subheader-col1 {
    align-items: center;
    display: flex;
}

.subheader-icon {
    height: 24px;
    margin: 0;
    object-fit: contain;
    width: 24px;
}

.subheader-title {
    color: var(--subheader-title-txt);
    flex-grow: 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    padding: 0 0 0 17px;
}

.member-fund-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.member-fund-card-background {
    background: var(--intro-fund-card-bg);
    border: var(--intro-fund-card-border);
    border-radius: 12px;
    box-shadow: var(--intro-fund-card-shadow);
    padding: 16px 16px 16px 32px;
    position: relative;
}

.member-fund-card-background-hide {
    display: none;
}

.fundCard-money-image {
    bottom: 37px;
    object-fit: contain;
    position: absolute;
    right: 60px;
    width: 38px;
}

.member-fund-card-content {
    display: flex;
    flex-direction: column;
    gap: 66px;
    position: relative;
}

.member-fund-row1 {
    align-items: center;
    display: flex;
}

.member-fund-name {
    color: var(--intro-fund-card-name);
    flex-grow: 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
}

.member-fund-rebate-btn {
    background: var(--fundcard-rebate-btn-background);
    border-radius: 10px;
    box-shadow: var(--fundcard-rebate-btn-box-shadow);
    color: var(--fundcard-rebate-btn-txt-color);
    cursor: pointer;
    font-size: var(--fontSize16);
    height: 42px;
    justify-content: center;
    padding: 11px;
    text-align: center;
    white-space: nowrap;
    width: 142px;
}

.member-fund-bal-title {
    color: var(--intro-fund-card-bal-title);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
}

.member-fund-bal-amount,
.member-fund-bal-title {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    line-height: var(--fontStyleNormal);
}

.member-fund-bal-amount {
    color: var(--intro-fund-card-bal-value);
    font-size: var(--fontSize30);
    font-weight: var(--fontWeight700);
}

.member-fund-withdrawable-bal {
    color: var(--intro-fund-card-withdraw-bal-value);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: var(--fontStyleNormal);
}

.member-fund-row3 {
    display: flex;
    gap: 7px;
    justify-content: space-between;
}

.member-withdraw-btn {
    align-items: center;
    background: var(--fundcard-withdraw-btn-background);
    border: var(--fundcard-withdraw-btn-box-border);
    border-radius: 10px;
    box-shadow: var(--fundcard-withdraw-btn-box-shadow);
    display: flex;
    flex: 1 1;
    height: 52px;
    justify-content: center;
    padding: 0 15px;
}

.member-withdraw-btn-txt {
    align-content: center;
    color: var(--fundcard-withdraw-btn-txt-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    height: 28px;
}

.member-withdraw-btn-disabled {
    opacity: 0.5;
}

.member-topup-btn {
    align-items: center;
    background: var(--fundcard-topup-btn-background);
    border: var(--fundcard-topup-btn-box-border);
    border-radius: 10px;
    box-shadow: var(--fundcard-topup-btn-box-shadow);
    display: flex;
    flex: 1 1;
    height: 52px;
    justify-content: center;
    padding: 0 15px;
}

.member-topup-btn-txt {
    align-content: center;
    color: var(--fundcard-topup-btn-txt-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    height: 28px;
}

.member-topup-btn-disabled {
    opacity: 0.5;
}

.fundCard-brandInfo-container {
    padding: 16px 0;
}

.fundCard-brandInfo-horizontal-padding {
    padding: 0 !important;
}

.CPProgressbar-container {
    background: var(--progress-bar-container);
    border: var(--progress-bar-border);
    border-radius: 20px;
    box-shadow: var(--progress-bar-shadow);
    display: flex;
    height: 12px;
}

.CPProgressbar-container,
.CPProgressbar-style {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.CPProgressbar-style {
    background: var(--progress-bar-default);
    border-radius: 20px;
    height: 8px;
    margin: 1px;
    max-width: 100%;
}

.topNav-container {
    align-items: center;
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    left: 0;
    min-height: 48px;
    position: sticky;
    position: fixed;
    top: 0;
    width: 100vw !important;
    z-index: 1000;
}

.topNav-left-btn {
    justify-content: flex-end;
}

.topNav-left-btn,
.topNav-right-btn {
    align-items: center;
    display: flex;
    height: 100%;
    width: auto;
}

.topNav-right-btn {
    justify-content: flex-start;
}

.topNav-title-container {
    align-items: center;
    color: var(--header-txt);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    line-height: 29px;
    width: 100%;
}

.topNav-icon {
    height: 28px;
    margin-left: 34px;
    margin-right: 10px;
    width: 28px;
}

.topNav-icon-2 {
    height: 34px;
    margin-right: 34px;
    width: 34px;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .topNav-container {
        min-height: 48px;
    }
    .topNav-icon {
        height: 18px;
        margin-left: 33.7px;
        width: 20px;
    }
    .topNav-icon-2 {
        height: 20px;
        margin-right: 33.7px;
        width: 20px;
    }
    .topNav-title-container {
        font-size: 14px;
    }
}

@media screen and (max-height: 500px),
screen and (max-width: 280px) {
    .topNav-icon {
        height: 20px;
        margin-left: 15px;
        width: 20px;
    }
    .topNav-icon-2 {
        height: 24px;
        margin-right: 15px;
        width: 24px;
    }
}

.brandInfo-inner-container {
    display: flex;
    flex: 1 1;
    height: 100%;
}

.brandInfo-vertical-separator {
    background: var(--depWit-vertical-separator);
    height: 100%;
    width: 2px;
}

.brandInfo-item {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    row-gap: 3px;
}

.brandInfo-item-label {
    font-family: var(--fontFamily);
    font-size: var(--fontSize10);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: var(--fontStyleNormal);
}

.brandInfo-item-label-color {
    color: var(--depWit-item-lbl-txt);
}

.brandInfo-item-value {
    font-family: var(--fontFamily);
    font-size: var(--fontSize14);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
}

.brandInfo-item-value-color {
    color: var(--depWit-item-value-txt);
}

.brandInfo-ellipsis-text {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.license-certification-title {
    color: var(--licenseCert-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    opacity: 0.5;
    padding: 0 0 0 5px;
}

.license-certification-icons {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}

.license-certification-gc-icon {
    flex-shrink: 0;
    height: 64px;
    object-fit: contain;
}

.license-certification-col {
    text-align: center;
}

.license-certification-authentic-games-subtitle {
    color: var(--licenseCertAuth-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    opacity: 0.5;
    padding-bottom: 7px;
}

@media screen and (max-width: 575.98px) {
    .license-certification-gc-icon {
        height: 48px;
        object-fit: contain;
    }
}

@media screen and (max-width: 364px) {
    .license-certification-gc-icon {
        height: 42px;
        object-fit: contain;
    }
}

.joinourcommunity-title {
    color: var(--joinCommunity-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    opacity: 0.5;
    padding: 0 0 8px 5px;
}

.joinourcommunity-icons {
    align-items: center;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.joinourcommunity-icons img {
    max-width: 42px;
    object-fit: contain;
    opacity: 0.75;
    width: 42px;
}

.contactus-title {
    color: #fff;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    margin: 0 0 8px 17px;
    opacity: 0.5;
}

.contactus-icons-container {
    align-items: center;
    background: var(--game-container-bg);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(5, minmax(42px, 84px));
    justify-content: space-evenly;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .contactus-icons-container {
        grid-template-columns: repeat(3, minmax(42px, 84px));
    }
}

.contactus-icons-container img {
    padding: 15px 22px;
}

.howtoplay-title {
    color: #fff;
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    margin: 0 0 8px;
}

.howtoplay-row {
    display: flex;
    justify-content: space-around;
}

.howtoplay-card {
    align-items: flex-end;
    background: var(--new-sub-bg);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 112px;
    justify-content: flex-end;
    margin-right: 12px;
    padding: 10px;
    text-align: right;
    width: 112px;
}

.howtoplay-step-title {
    color: var(--gold-txt);
    font-size: var(--fontSize14);
    font-weight: var(--fontWeight700);
}

.howtoplay-step-description,
.howtoplay-step-title {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    line-height: var(--fontStyleNormal);
}

.howtoplay-step-description {
    color: var(--main-txt);
    font-size: var(--fontSize10);
    font-weight: var(--fontWeight400);
    margin-top: 2.5px;
}

.paymentSupported-title {
    color: var(--paymentSupported-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontStyleNormal);
    opacity: 0.5;
    padding: 0 0 8px 5px;
}

.paymentSupported-icons {
    align-items: center;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.paymentSupported-icons img {
    max-width: 32px;
    object-fit: contain;
    opacity: 0.5;
    width: 32px;
}

.login-component-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.login-component-main-container .login-component-login-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

.login-component-main-container .login-component-login-container .login-component-register-btn {
    align-items: center;
    background: var(--login-component-register-btn);
    border: var(--login-component-register-border);
    border-radius: 10px;
    box-shadow: var(--login-component-register-shadow);
    display: flex;
    flex: 1 1;
    height: 52px;
    justify-content: center;
    padding: 0 11px;
}

.login-component-main-container .login-component-login-container .login-component-register-txt {
    align-content: center;
    color: var(--login-component-register-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    height: 28px;
    line-height: normal;
}

.login-component-main-container .login-component-login-container .login-component-login-btn {
    align-items: center;
    background: var(--login-component-login-btn);
    border: var(--login-component-login-border);
    border-radius: 10px;
    box-shadow: var(--login-component-login-shadow);
    display: flex;
    flex: 1 1;
    height: 52px;
    justify-content: center;
    padding: 0 11px;
}

.login-component-main-container .login-component-login-container .login-component-login-txt {
    align-content: center;
    color: var(--login-component-login-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    height: 28px;
    line-height: normal;
}

.login-component-main-container .login-component-separator-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.login-component-main-container .login-component-separator-container .login-component-separator {
    background: var(--login-component-separator);
    height: 1px;
    width: 108px;
}

.login-component-main-container .login-component-separator-container .login-component-separator-txt {
    color: var(--login-component-separator-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
}

.login-component-main-container .login-component-third-login-container {
    width: 100%;
}

.login-component-main-container .login-component-third-login-container .login-component-line-container {
    background: var(--login-component-line-img-bg);
    display: flex;
    padding: 11px;
}

.login-component-main-container .login-component-third-login-container .login-component-line-btn-img {
    height: 20px;
    width: 20px;
}

.login-component-main-container .login-component-third-login-container .login-component-line-btn {
    align-items: center;
    background: var(--login-component-line-btn);
    border: var(--login-component-line-border);
    border-radius: 10px;
    box-shadow: var(--login-component-line-shadow);
    display: flex;
    flex: 1 1;
    flex-direction: row;
    gap: 10px;
    overflow: hidden;
}

.login-component-main-container .login-component-third-login-container .login-component-line-btn-txt {
    color: var(--login-component-line-txt);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.custom-scrollbars__container {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.custom-scrollbars-horizontal__container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.custom-scrollbars__content {
    -ms-overflow-style: none;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}

.custom-scrollbars__content::-webkit-scrollbar {
    display: none;
}

.custom-scrollbars__scrollbar {
    display: flex;
}

.custom-scrollbars__track-and-thumb {
    display: block;
    height: 100%;
    position: relative;
    width: 12px;
}

.custom-scrollbars__track {
    background: var(--scrollbar-track);
    border-radius: 32px;
    bottom: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 12px;
}

.custom-scrollbars__thumb {
    padding: 2px;
    position: absolute;
    width: 12px;
}

.custom-scrollbars__thumb-color {
    background: var(--scrollbar-thumb);
    border-radius: 32px;
    height: 100%;
    width: 100%;
}

.custom-scrollbars-horizontal__scrollbar {
    display: flex;
}

.custom-scrollbars-horizontal__track-and-thumb {
    display: block;
    height: 12px;
    position: relative;
    width: 100%;
}

.custom-scrollbars-horizontal__track {
    background: var(--scrollbar-track);
    border-radius: 32px;
    cursor: pointer;
    height: 12px;
    left: 0;
    position: absolute;
    right: 0;
}

.custom-scrollbars-horizontal__thumb {
    height: 12px;
    padding: 2px;
    position: absolute;
}

.custom-scrollbars-horizontal__thumb-color {
    background: var(--scrollbar-thumb);
    border-radius: 32px;
    height: 100%;
    width: 100%;
}

.expand-collapse-container {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.introDownloadApp-container {
    align-items: flex-end;
    display: flex;
    gap: 44px;
    max-width: 686px;
    position: relative;
    width: 100%;
}

.introDownloadApp-background-container {
    background: var(--introDownloadApp-background);
    border-radius: 10px;
    bottom: 0;
    height: 80%;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: -1;
}

.introDownloadApp-image-container {
    width: 40%;
}

.introDownloadApp-image {
    object-fit: contain;
    width: 100%;
}

.introDownloadApp-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px 18px 0;
    word-break: break-all;
}

.introDownloadApp-description {
    color: var(--introDownloadApp-description-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
}

.introDownloadApp-btn {
    align-items: center;
    background: var(--introDownloadApp-btn);
    border-radius: 10px;
    box-shadow: var(--introDownloadApp-btn-shadow);
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 11px 8px;
}

.introDownloadApp-btn-leftImg {
    height: 16px;
    width: 49px;
}

.introDownloadApp-btn-txt {
    color: var(--introDownloadApp-btn-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.introAllGames-container {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    width: 100%;
}

.introAllGames-play-btn {
    background: var(--introAllGames-play-btn);
    border: var(--introAllGames-play-btn-border);
    border-radius: 6px;
    box-shadow: var(--introAllGames-play-btn-shadow);
    color: var(--introAllGames-play-btn-txt);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    justify-content: center;
    padding: 11px;
    width: 92px;
}

.introAllGames-content-img {
    width: 100%;
}

.introPromotionHighlight-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-width: 100%;
    width: 100%;
}

.introPromotionHighlight-view-btn {
    background: var(--introPromotion-view-btn);
    border: var(--introPromotion-view-btn-border);
    border-radius: 6px;
    box-shadow: var(--introPromotion-view-btn-shadow);
    color: var(--introPromotion-view-btn-txt);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    justify-content: center;
    padding: 11px;
    width: 92px;
}

.test-component {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
}

.introPromotionItem-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.introPromotionItem-image-container {
    display: flex;
    position: relative;
    width: 100%;
}

.introPromotionItem-title-container {
    left: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 65%;
}

.introPromotionItem-title-txt {
    color: var(--introPromotion-content-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.introPromotionItem-subtitle-txt {
    color: var(--introPromotion-content-subTitle);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight400);
}

.introPromotionItem-description-txt {
    color: var(--introPromotion-content-description);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
}

.introPromotionItem-info-container {
    align-items: flex-end;
    background: var(--introPromotion-info-bg);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 10px 16px 16px;
}

.introPromotionItem-info-txt {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--introPromotion-content-info);
    display: -webkit-box;
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    overflow: hidden;
    text-overflow: ellipsis;
}

.introPromotionItem-info-btn {
    align-items: center;
    background: var(--introPromotion-more-btn);
    border: var(--introPromotion-more-btn-border);
    border-radius: 6px;
    box-shadow: var(--introPromotion-more-btn-shadow);
    color: var(--introPromotion-more-btn-txt);
    display: flex;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    height: 42px;
    justify-content: center;
    padding: 0 10px;
}

.introAffiliate-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.introAffiliate-btn {
    background: var(--introAffiliate-more-btn);
    border: var(--introAffiliate-more-btn-border);
    border-radius: 6px;
    box-shadow: var(--introAffiliate-more-btn-shadow);
    color: var(--introAffiliate-more-btn-txt);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    justify-content: center;
    line-height: var(--fontStyleNormal);
    padding: 11px;
    width: 92px;
}

.introAffiliate-img {
    object-fit: contain;
    width: 100%;
}

.introAffiliate-items-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
}

.introAffiliateItem-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.introAffiliateItem-content-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
}

.introAffiliateItem-separator {
    background: var(--introAffiliateItem-separator);
    height: 1px;
    width: 100%;
}

.introAffiliateItem-info-container {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.introAffiliateItem-info-title {
    color: var(--introAffiliateItem-title-txt);
    text-shadow: var(--introAffiliateItem-title-shadow);
}

.introAffiliateItem-info-desc,
.introAffiliateItem-info-title {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
}

.introAffiliateItem-info-desc {
    color: var(--introAffiliateItem-desc-txt);
}

.introAffiliateItem-btn {
    align-items: center;
    background: var(--introAffiliateItem-btn);
    border: var(--introAffiliateItem-btn-border);
    border-radius: 6px;
    box-shadow: var(--introAffiliateItem-btn-shadow);
    color: var(--introAffiliateItem-btn-txt);
    height: 42px;
    justify-content: center;
    width: 92px;
}

.introClub-container {
    min-width: 100%;
    width: 100%;
}

.introClub-container,
.introClub-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.introClub-more-btn {
    background: var(--introClub-more-btn);
    border: var(--introClub-more-btn-border);
    border-radius: 6px;
    box-shadow: var(--introClub-more-btn-shadow);
    color: var(--introClub-more-btn-txt);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    justify-content: center;
    padding: 11px;
    width: 92px;
}

.introClub-content-img {
    width: 100%;
}

.introClubItem-container {
    display: flex;
    position: relative;
}

.introClubItem-background-img {
    width: 100%;
}

.introClubItem-info-container {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 16px;
    top: 0;
    white-space: nowrap;
}

.introClubItem-info-title {
    -webkit-text-fill-color: transparent;
    background: var(--introClubItem-title-txt);
    background-clip: text;
    -webkit-background-clip: text;
    font-family: var(--fontFamily);
    font-size: 52px;
    font-weight: var(--fontWeight700);
    line-height: 100%;
}

.introClubItem-info-description {
    color: var(--introClubItem-desc-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    text-align: right;
    text-shadow: var(--introClubItem-desc-shadow);
    white-space: pre-wrap;
}

.introClubItem-btn {
    align-items: center;
    align-self: flex-end;
    background: var(--introClubItem-join-btn);
    border-radius: 6px;
    box-shadow: var(--introClubItem-join-btn-shadow);
    color: var(--introClubItem-join-btn-txt);
    height: 42px;
    justify-content: center;
    width: 92px;
}

.IntroClubSubItem-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.IntroClubSubItem-content-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
}

.IntroClubSubItem-separator {
    background: var(--introClubSubItem-separator);
    height: 1px;
    width: 100%;
}

.IntroClubSubItem-info-container {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.IntroClubSubItem-info-title {
    color: var(--introClubSubItem-title-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-shadow: var(--introClubSubItem-title-shadow);
}

.IntroClubSubItem-btn {
    align-items: center;
    background: var(--introClubSubItem-btn);
    border: var(--introClubSubItem-btn-border);
    border-radius: 6px;
    box-shadow: var(--introClubSubItem-btn-shadow);
    color: var(--introClubSubItem-btn-txt);
    height: 42px;
    justify-content: center;
    width: 92px;
}

.footerDescription-txt {
    color: var(--intro-rga-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: var(--fontStyleNormal);
}

.rgaBoldText-txt {
    color: var(--intro-rga-special-txt);
    cursor: pointer;
    font-weight: var(--fontWeight700);
}

.home-floating-container {
    animation: float 2s ease-in-out infinite;
    overflow: hidden;
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    z-index: 1;
}

.home-floating-img {
    height: 120px;
    width: 100px;
}

@keyframes float {
    0% {
        transform: translateY(-50%);
    }
    50% {
        transform: translateY(calc(-50% - 20px));
    }
    to {
        transform: translateY(-50%);
    }
}

.club-style {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    margin-bottom: 30px;
    max-width: 468px;
    padding-top: 48px;
    width: 100%;
}

.club-banner-container {
    margin: 32px 0 42px;
    position: relative;
}

.club-banner {
    height: 257px;
    width: 100%;
}

@media (max-width: 600px) {
    .club-banner {
        height: 187px;
    }
}

.club-title {
    bottom: 18px;
    color: var(--club-title);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.club-list-container {
    grid-row-gap: 26px;
    grid-column-gap: 16px;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.club-list-container .club-btn-style {
    position: relative;
    width: 100%;
}

.club-list-container .club-btn-style .club-btn-container {
    border-radius: 15px;
    box-shadow: var(--main-shadow);
    -moz-box-shadow: var(--main-shadow);
    -webkit-box-shadow: var(--main-shadow);
    -khtml-box-shadow: var(--main-shadow);
    height: 100.26px;
    position: relative;
    width: 100.26px;
}

.club-list-container .club-btn-style .club-btn-container .club-hotLabel-icon {
    height: 30px;
    left: -12px;
    margin-top: 10px;
    position: absolute;
    width: 25px;
}

.club-list-container .club-btn-style .club-btn-container .club-icon {
    height: 100%;
    object-fit: fill;
    width: 100%;
}

.club-list-container .club-btn-style .club-name {
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: 11px;
    padding-top: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.verifyMobile-container {
    align-items: center;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
}

.verifyMobile-container,
.verifyMobile-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.verifyMobile-style {
    justify-content: flex-start;
    max-width: 468px;
}

.verifyMobile-title-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-bottom: 21px;
}

.verifyMobile-title {
    color: var(--verifyMobile-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.verifyMobile-step-img {
    height: 32px;
    object-fit: contain;
}

.verifyMobile-content-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 32px;
}

.verifyMobile-sendOTP-section {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
}

.verifyMobile-countdown-section {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.verifyMobile-desc-section {
    display: flex;
    flex-direction: column;
}

.verifyMobile-otp-desc {
    color: var(--verifyMobile-otp-des);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.verifyMobile-otp-container {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.verifyMobile-otp-code {
    align-items: center;
    background: var(--verifyMobile-otp-code-bg);
    border: var(--verifyMobile-otp-code-border);
    border-radius: 10px;
    box-shadow: var(--verifyMobile-otp-code-shadow);
    color: var(--verifyMobile-otp-code);
    display: flex;
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    height: 52px;
    line-height: normal;
    padding: 0 13px;
    text-align: center;
}

.loginCommonTf-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.loginCommonTf-input-container {
    align-items: center;
    background: var(--loginCommonTf-bg);
    border: var(--loginCommonTf-border);
    border-radius: 10px;
    box-shadow: var(--loginCommonTf-shadow);
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    min-height: 52px;
    padding: 3px 8px;
}

.loginCommonTf-error-input-container {
    border: var(--loginCommonTf-err-border);
}

.loginCommonTf-focus-input-container {
    border: var(--loginCommonTf-focus-border);
}

.loginCommonTf-icon-container {
    display: flex;
    height: 42px;
    width: 42px;
}

.loginCommonTf-icon-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.loginCommonTf-error-img,
.loginCommonTf-loading-img {
    height: 42px;
    width: 42px;
}

.loginCommonTf-error-msg {
    color: var(--loginCommonTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.pinTextField-container {
    display: flex;
    flex-direction: column;
}

.pinTextField-input-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.pinTextField-err-msg {
    color: var(--pinTextField-err-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.pinItem-container {
    background: var(--pinItem-bg);
    border: var(--pinItem-normal-border);
    border-radius: 10px;
    display: flex;
    height: 52px;
}

.pinItem-googleAuth-container {
    background: var(--pinItem-googleAuth-bg);
    border: var(--pinItem-googleAuth-border);
    box-shadow: var(--pinItem-googleAuth-shadow);
}

.pinItem-error-container {
    border: var(--pinItem-err-border);
}

.pinItem-focus-container {
    border: var(--pinItem-focus-border);
}

.pinItem-focus-googleAuth-container {
    border: var(--pinItem-focus-googleAuth-border);
}

.pinItem-input {
    background: transparent;
    border: none;
    color: var(--pinItem-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

.pinItem-googleAuth-input {
    color: var(--pinItem-googleAuth-input-txt);
}

.loginMobileTf-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.loginMobileTf-input-container {
    align-items: center;
    background: var(--loginCommonTf-bg);
    border: var(--loginCommonTf-border);
    border-radius: 10px;
    box-shadow: var(--loginCommonTf-shadow);
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    min-height: 52px;
    padding: 3px 8px;
}

.loginMobileTf-prefix-input-container {
    display: flex;
    flex-direction: row;
    gap: 9px;
}

.loginMobileTf-prefix-txt {
    color: var(--loginCommonTf-txt);
    font-size: var(--fontSize20);
    line-height: normal;
}

.loginMobileTf-prefix-separator {
    background: var(--loginMobileTf-prefix-separator);
    width: 1px;
}

.loginMobileTf-error-input-container {
    border: var(--loginCommonTf-err-border);
}

.loginMobileTf-focus-input-container {
    border: var(--loginCommonTf-focus-border);
}

.loginMobileTf-icon-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.loginMobileTf-error-msg {
    color: var(--loginCommonTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.mobileCodeBottomModal-title {
    color: var(--signIn-modal-title);
    font-size: 14px;
    line-height: 17px;
    margin: 76.79px 0 11.21px;
}

.mobileCodeBottomModal-select-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: center;
    padding: 0 0 30px;
    width: 100%;
}

.mobileCodeBottomModal-select-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    width: 100%;
}

.mobileCodeBottomModal-selected-container {
    align-items: center;
    border-radius: var(--btn-border-radius);
    color: var(--signIn-selected-txt);
    display: flex;
    flex-direction: row;
    font-size: 14px;
    height: 35px;
    justify-content: center;
    line-height: 17px;
    width: 320px;
}

.mobileCodeBottomModal-selected-bg {
    background: var(--signIn-selected-bg);
    font-weight: 700;
}

.mobileCodeBottomModal-unselect-bg {
    background: transparent;
    box-shadow: none;
}

.mobileCodeBottomModal-country-icon {
    height: 18px;
    margin-right: 10px;
    width: 18px;
}

.registerStepImg-container {
    display: flex;
}

.registerStepImg-img {
    height: 32px;
    object-fit: contain;
}

.backNav-main-container {
    background: var(--back-nav-bg);
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 468px;
    padding: 32px 0;
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.back-nav-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
    width: 100%;
}

.back-nav-title-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.back-nav-title-container {
    align-items: center;
    background: var(--backNav-title-bg);
    border: var(--backNav-title-border);
    border-radius: 10px;
    box-shadow: var(--backNav-title-shadow);
    display: flex;
    height: 48px;
    height: 42px;
    padding: 0 14px;
}

.back-nav-title {
    color: var(--backNav-title);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.back-nav-back-btn-container {
    align-items: center;
    background: var(--back-nav-back-bg);
    border: var(--back-nav-back-border);
    border-radius: 10px;
    box-shadow: var(--back-nav-back-shadow);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: 42px;
    padding: 0 16px;
}

.back-nav-back-btn-txt {
    color: var(--back-nav-back-txt);
    font-size: 16px;
    font-weight: var(--fontWeight700);
}

.chat-container {
    justify-content: center;
    position: relative;
}

.chat-container,
.chat-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat-style {
    height: 100%;
    justify-content: flex-start;
    max-width: 468px;
}

.chat-listing-style {
    background: var(--chat-listing-bg) !important;
    border: var(--chat-listing-border) !important;
    box-shadow: var(--chat-listing-shadow) !important;
    height: auto !important;
}

.chat-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.chat-tab-container {
    align-items: flex-end;
    background: var(--listTab);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 468px;
    padding: 32px 0;
    width: 100%;
}

.chat-render {
    margin-top: 20px !important;
}

@media (max-width: 600px) {
    .chat-render {
        margin-top: 40px !important;
    }
}

.chat-tab-btn {
    align-items: center;
    background: var(--chat-tab-bg);
    border: var(--chat-tab-btn);
    border-radius: 10px;
    box-shadow: var(--chat-tab-shadow);
    display: flex;
    flex-direction: column;
    height: 60px;
    justify-content: center;
    margin: 0 16px 0 0;
    width: 60px;
}

.chat-tab-selected-bg {
    background: var(--chat-tab-selected-bg);
    border: none;
    border: var(--chat-tab-selected-border);
    box-shadow: var(--chat-tab-selected-shadow);
}

.chat-icon {
    height: 25px;
    margin-bottom: 5px;
    width: 25px;
}

.chat-name {
    color: var(--chat-name);
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
}

.chat-name-selected {
    color: var(--chat-name-selected);
}

.info-title {
    color: var(--chat-info-title-txt);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 0 10px;
}

@media (max-width: 600px) {
    .info-title {
        font-size: 14px;
        line-height: 20px;
    }
}

.info-date {
    color: var(--info-date);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

@media (max-width: 600px) {
    .info-date {
        font-size: 12px;
        line-height: 14px;
    }
}

.info-msg {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    margin: 0 0 0 10px;
}

@media (max-width: 600px) {
    .info-msg {
        font-size: 12px;
        line-height: 14px;
        margin: 0 0 16px 10px;
    }
}

.line-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.line-btn {
    background: var(--line-btn);
    border: var(--line-btn-border);
    box-shadow: var(--line-btn-shadow);
    margin-bottom: 50px;
    width: 96%;
}

.line-btn-txt {
    color: var(--line-btn-txt);
}

.line-title {
    color: var(--line-txt);
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    margin-bottom: 32px;
}

@media (max-width: 600px) {
    .line-title {
        line-height: 24px;
        margin-bottom: 16px;
    }
}

.info-bottom-container {
    margin-bottom: 25px;
    width: 0;
}

.line-icon {
    height: 30px;
    width: 30px;
}

@media (max-width: 600px) {
    .line-icon {
        height: 25px;
        width: 25px;
    }
}

.chat-content {
    width: 100%;
}

.chat-contactUs-imgCon {
    background: var(--chat-contactUs-imgCon-bg);
    border: var(--chat-contactUs-imgCon-border);
    border-radius: 10px;
    box-shadow: var(--chat-contactUs-imgCon-shadow);
    height: 153px;
    overflow: hidden;
    width: 100%;
}

.chat-contactUs-container {
    align-items: center;
    row-gap: 16px;
}

.chat-card,
.chat-contactUs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat-card {
    background: var(--chat-card-bg);
    border: var(--chat-card-border);
    border-radius: 10px;
    box-shadow: var(--chat-card-shadow);
    padding: 16px;
    position: relative;
}

.chat-card-disable {
    background: var(--chat-card-disable-bg);
    border-radius: 10px;
    inset: 0;
    position: absolute;
}

.chat-card-title {
    color: var(--chat-card-title-txt);
    font-size: 32px;
    font-weight: var(--fontWeight700);
}

.chat-card-desc,
.chat-card-title {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    line-height: normal;
    text-shadow: none;
}

.chat-card-desc {
    color: var(--chat-card-desc-txt);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
}

.chat-card-chatNow {
    background: var(--chat-card-chatNow-bg);
    border: var(--chat-card-chatNow-border);
    border-radius: 10px;
    box-shadow: var(--chat-card-chatNow-shadow);
    display: flex;
    height: 42px;
    margin-top: 22px;
    overflow: hidden;
    width: 100%;
}

.chat-card-chatNow-imgCon {
    background: var(--chat-card-chatNow-imgCon-bg);
    border: var(--chat-card-chatNow-imgCon-border);
    box-shadow: var(--chat-card-chatNow-imgCon-shadow);
    padding: 11px;
}

.chat-card-chatNow-img {
    height: 20px;
    width: 20px;
}

.chat-card-chatNow-txt {
    color: var(--chat-card-chatNow-txt);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    padding: 11px;
    text-shadow: none;
}

.chat-card-desc-container {
    display: flex;
}

.chat-card-desc-dot-container {
    justify-content: flex-start;
    padding: 5px 10px;
}

.chat-card-desc-dot {
    background: var(--chat-card-desc-dot-bg);
    border: var(--chat-card-desc-dot-border);
    border-radius: 50%;
    box-shadow: var(--chat-card-desc-dot-shadow);
    height: 5px;
    width: 5px;
}

.flatList-container {
    flex-direction: column;
    height: auto;
    padding-bottom: 70px;
    width: 100%;
}

.flatList-horizontal-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    margin: 105px 0 0;
    padding-right: 50px;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    overflow: auto;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.noData {
    align-items: flex-start;
    display: flex;
    font-size: 18px;
    height: 100%;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
}

.play-container::-webkit-scrollbar {
    background: transparent;
    display: none;
    width: 0;
}

.play-container {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.playGame-nav-container {
    align-items: center;
    background: var(--playGame-nav-bg);
    border: var(--playGame-nav-border);
    box-shadow: var(--playGame-nav-shadow);
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 17px;
}

.playGame-nav-left-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 14px;
}

.playGame-nav-back-img {
    object-fit: contain;
    width: 30px;
}

.playGame-nav-title {
    color: var(--playGame-nav-title-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.playGame-nav-right-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.playGame-id-container {
    background: var(--playGame-id-bg);
    border: var(--playGame-id-border);
    border-radius: 10px;
    box-shadow: var(--playGame-id-shadow);
    padding: 14px 10px;
}

.playGame-popUpElement-container {
    background: var(--playGame-popUp-id-bg);
    border: var(--playGame-popUp-id-border);
    border-radius: 10px;
    box-shadow: var(--playGame-popUp-id-shadow);
    display: flex;
    flex-direction: column;
    max-height: 90%;
    overflow-y: auto;
}

.playGame-popUpElement-item {
    color: var(--playGame-popUp-id-txt);
    flex-shrink: 0;
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    overflow: hidden;
    padding: 14px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playGame-popUpElement-separator {
    background: var(--playGame-popUp-separator);
    margin: 0 10px;
    min-height: 1px;
}

.playGame-id-txt {
    color: var(--playGame-id-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.play-style {
    flex: 1 1;
}

.play-iframe {
    height: 100%;
    overflow: scroll;
    width: 100%;
}

.playGame-popUp-dimmed-container {
    -webkit-backdrop-filter: initial;
    backdrop-filter: none;
    background: transparent;
}

.listing-container {
    background: var(--listing-bg);
    border: var(--listing-border);
    border-radius: var(--main-radius);
    box-shadow: var(--listing-shadow);
    display: flex;
    flex-direction: row;
    height: 80px;
    margin: 0 0 16px;
    min-width: 80px;
    width: 99%;
}

.listing-left-container {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 16px 0 32px;
}

@media (max-width: 600px) {
    .listing-left-container {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        padding: 0 16px 0 25px;
    }
}

.listing-right-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 10px 16px;
    width: 100%;
}

@media (max-width: 600px) {
    .listing-right-container {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        padding: 0 16px 0 25px;
    }
}

.listing-top {
    height: 50%;
}

.listing-top,
.listing-top-left {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}

.listing-top-left {
    color: var(--listing-item);
    font-size: 20px;
    font-weight: 500;
    height: 100%;
    line-height: 24px;
    white-space: wrap !important;
    word-break: break-word;
}

@media (max-width: 600px) {
    .listing-top-left {
        padding: 5px;
    }
}

.listing-top-right {
    align-items: center;
    color: var(--listing-item);
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-weight: 700;
    height: 100%;
    justify-content: flex-end;
    text-align: right;
    width: 100%;
}

@media (max-width: 600px) {
    .listing-top-right {
        font-weight: 500;
        line-height: 20px;
    }
}

.listing-bottom {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 50%;
    justify-content: flex-start;
    margin-top: 5px;
    width: 100%;
}

.listing-bottom-left {
    justify-content: flex-start;
}

.listing-bottom-left,
.listing-bottom-right {
    align-items: center;
    color: var(--listing-item);
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.listing-bottom-right {
    justify-content: flex-end;
    text-align: right;
}

@media screen and (max-width: 384px) {
    .listing-left-container {
        padding: 0 16px !important;
    }
}

.tab-list-container {
    align-items: flex-end;
    background: var(--listTab);
    display: flex;
    flex-direction: row;
    height: 70px;
    justify-content: flex-start;
    margin: 0 0 32px;
    max-width: 468px;
    width: 100%;
}

@media (max-width: 600px) {
    .tab-list-container {
        height: 60px;
        margin: 0 0 22px;
    }
}

.tab-rest-container::-webkit-scrollbar {
    display: none;
}

.tab-rest-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow-x: scroll;
    padding-left: 30px;
    width: 80%;
}

@media (max-width: 600px) {
    .tab-rest-container {
        width: 60%;
    }
}

.tab-all {
    padding: 0 20px 0 0 !important;
}

.tab-list-btn {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-right: 40px;
    position: relative;
    text-align: center;
}

.tab-list-txt-selected {
    color: var(--list-txt);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .tab-list-txt-selected {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }
}

.tab-list-txt-unSelect {
    color: var(--list-unSelect-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .tab-list-txt-unSelect {
        font-size: 14px;
        line-height: 17px;
    }
}

.tab-list-underline-selected {
    background: var(--list-underline);
    border-radius: 10px;
    bottom: 5px;
    height: 6px;
    position: absolute;
    width: 50px;
}

.tab-list-style {
    display: flex;
    flex-direction: row;
    height: 60px;
    position: relative;
    width: 100%;
}

.tab-date-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    max-height: 60px;
    position: absolute;
    right: 0;
}

.datePicker-container {
    align-items: center;
    background: transparent;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: flex-start;
    max-width: 766px;
    padding: 0 0 30px;
    position: relative;
    width: 100%;
}

@media (max-width: 600px) {
    .datePicker-container {
        max-width: none;
    }
}

.datePicker-style {
    height: 310px;
}

@media (max-width: 600px) {
    .datePicker-style {
        height: 229px;
    }
}

.datePicker-title {
    color: var(--datePickerTitleTxt);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin: 41px 0 46px;
    width: 100%;
}

@media (max-width: 600px) {
    .datePicker-title {
        font-size: 13px;
        line-height: 17px;
        margin: 41px 0 20px;
        padding-left: 24px;
    }
}

.datePicker-top-container {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 36px;
    max-width: 766px;
    width: 100%;
}

@media (max-width: 600px) {
    .datePicker-top-container {
        margin-bottom: 16px;
        padding: 0 24px;
    }
}

.datePicker-btn {
    align-items: center;
    background: var(--datePickerBg);
    border: var(--datePickerBorder);
    border-radius: var(--btn-radius);
    box-shadow: var(--dateShadow);
    color: var(--datePickerTxt);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 52px;
    justify-content: center;
    line-height: 24px;
    width: 30%;
}

@media (max-width: 600px) {
    .datePicker-btn {
        font-size: 13px;
        height: 42px;
        line-height: 17px;
    }
}

.datePicker-selected {
    background: var(--datePickerSelected);
    border: var(--datePickerSelected-border);
    box-shadow: var(--datePickerSelected-shadow);
    color: var(--datePickSelectedTxt);
}

.datePicker-icon {
    height: 35px;
    width: 35px;
}

@media (max-width: 600px) {
    .datePicker-icon {
        height: 25px;
        width: 25px;
    }
}

.tab-rest-container-with-calendar {
    width: calc(100% - 90px);
}

@media (max-width: 600px) {
    .tab-rest-container-with-calendar {
        width: calc(100% - 70px);
    }
}

.modal {
    animation: modalAnim 0.5s ease-out;
    -webkit-backdrop-filter: var(--plane-blur);
    backdrop-filter: var(--plane-blur);
    background: var(--plane-bg);
    display: flex;
    height: 100vh;
    inset: 0;
    overflow: hidden;
    position: fixed;
    z-index: 9999;
}

.modal-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    overflow-x: auto;
    padding: 40px 20px 20px;
    width: 100%;
}

@media (max-width: 600px) {
    .modal-content {
        justify-content: flex-start;
    }
}

@keyframes modalAnim {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.popUpItem-container {
    background: var(--pop-up-bg);
    border: var(--pop-up-border);
    border-radius: 10px;
    box-shadow: var(--pop-up-shadow);
    max-height: 90%;
    overflow-y: auto;
    padding: 11px 16px;
}

.popUpItem-container,
.popUpItem-item-container {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.popUpItem-item-txt {
    color: var(--pop-up-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.popUpItem-item-separator {
    background: var(--pop-up-separator-bg);
    height: 1px;
}

.mission-backNav-container {
    padding: 32px 0 0;
}

.mission-mainContainer {
    justify-content: center;
    position: relative;
}

.mission-mainContainer,
.mission-style {
    align-items: center;
    background: var(--mission-bg);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mission-style {
    height: 100%;
    justify-content: flex-start;
    max-width: 468px;
    padding-bottom: 32px;
}

.mission-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.mission-tab {
    position: relative;
}

.mission-status-container {
    align-items: flex-end;
    background: var(--mission-bg);
    display: flex;
    height: 92px;
    justify-content: space-between;
    max-width: 468px;
    width: 100%;
}

.mission-status-status-style {
    align-items: center;
    background: var(--mission-bg);
    display: flex;
    flex-direction: row;
    height: 60px;
    justify-content: center;
}

.mission-status-txt {
    background: var(--mission-bg);
    color: var(--mission-status);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 10px 0 0;
}

.mission-status {
    align-items: center;
    background: var(--mission-badge-bg);
    border-radius: 60px;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.mission-status-num {
    color: var(--mission-status-num);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.mission-amt-container {
    align-items: center;
    background: var(--mission-amt-bg);
    border: var(--mission-amt-border);
    border-radius: 10px;
    box-shadow: var(--mission-amt-shadow);
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 8px;
    margin-right: 5px;
    min-height: 60px;
    padding: 11px 18px;
    width: 50%;
}

.mission-amt-style {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 75%;
}

.mission-amt-txt {
    color: var(--mission-amt-title-txt);
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
}

.mission-amt-amt-txt {
    color: var(--mission-amt-amt);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
}

.mission-amt-reload-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 25%;
}

.mission-amt-reload-icon {
    height: 25px;
    width: 25px;
}

.mission-listing-container {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: flex-start;
    padding: 33px 0 0;
    width: 100%;
}

.mission-listing-style {
    align-items: center;
    background: var(--mission-list-bg);
    border: var(--mission-listing-border);
    border-radius: 10px;
    box-shadow: var(--mission-list-shadow);
    display: flex;
    justify-content: center;
    margin: 0 0 32px;
    position: relative;
    width: 100%;
}

.mission-flatlist {
    padding: 0 0 100px !important;
}

.mission-cover-container {
    min-height: 216px;
}

.mission-list-container {
    min-height: 107px;
}

.mission-line {
    background: var(--mission-listing-middle-line);
    height: 1px;
    position: absolute;
    width: 100%;
}

.mission-cover {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 50%;
    position: absolute;
    top: 0;
    width: 100%;
}

.mission-listing-content-container {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px;
    position: absolute;
    width: 100%;
}

.mission-content-style {
    align-items: flex-start;
    width: 62%;
}

.mission-content-style,
.mission-reward-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
}

.mission-reward-container {
    align-items: flex-end;
    width: 38%;
}

.mission-reward-style {
    align-items: center;
    color: var(--mission-reward);
    display: flex;
    flex-direction: row;
    font-size: 20px;
    font-weight: 700;
    height: 50%;
    justify-content: flex-end;
    line-height: 24px;
    padding: 5px;
    width: 100%;
}

.mission-btn {
    align-items: center;
    background: var(--mission-btn);
    border: var(--mission-btn-border);
    border-radius: 8px;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 146px;
}

.mission-btn-txt {
    color: var(--mission-btn-txt);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.mission-label {
    animation: missionLabel 5s infinite both;
}

.mission-no-progress {
    background: var(--mission-noProgress-bg);
    border: var(--mission-noProgress-border);
    box-shadow: var(--mission-noProgress-shadow);
    color: var(--mission-noProgress-txt);
}

.mission-in-progress {
    background: var(--mission-inProgress-bg);
    border: var(--mission-inProgress-border);
    box-shadow: var(--mission-inProgress-shadow);
    color: var(--mission-inProgress-txt);
}

.mission-claimed {
    background: var(--mission-claimed-bg);
    border: var(--mission-claimed-border);
    box-shadow: var(--mission-claimed-shadow);
    color: var(--mission-claimed-txt);
}

.mission-content-title-container {
    color: var(--mission-content-title-txt);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 8px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90%;
}

.mission-content-desc-container {
    color: var(--mission-content-desc-txt);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-align: left;
    width: 98%;
}

.mission-popup-style {
    align-items: center;
    background: var(--mission-popup-bg);
    border: var(--mission-popup-border);
    border-radius: 30px;
    box-shadow: var(--mission-popup-shadow);
    display: flex;
    flex-direction: column;
    height: 600px;
    justify-content: flex-start;
    max-width: 428px;
    position: relative;
    width: 100%;
}

.mission-cancel-btn {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 17px;
    margin-top: 16px;
    text-align: center;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-shadow: var(--mission-popup-txt-cancel-shadow);
}

.mission-top-bg {
    height: 132px !important;
    position: relative;
    width: 100%;
}

.mission-popup-cover {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 100%;
    width: 100%;
}

.mission-record-container {
    height: auto !important;
}

.mission-record-item-left {
    color: var(--mission-record-date);
}

.mission-record-status-container {
    align-items: center;
    background: var(--mission-record-status-bg);
    border-radius: 10px;
    color: var(--mission-record-txt);
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-weight: 400;
    justify-content: flex-end;
    line-height: 19px;
    padding: 0 5px;
}

.mission-record-status-icon {
    background: var(--mission-record-txt);
    border-radius: 60px;
    height: 8px;
    margin-right: 8px !important;
    margin: 0 5px 0 0;
    width: 8px;
}

.mission-coin {
    height: 30px;
    margin-right: 5px;
    width: 30px;
}

.mission-progress {
    bottom: -5px;
    padding: 0 20px;
    position: absolute;
    width: 100%;
}

.mission-progress-style {
    width: 100%;
}

.mission-popup-title {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: var(--mission-cover-gradient);
    border-bottom: var(--mission-popup-activity-container-border);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    color: var(--mission-popup-title);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 100%;
    line-height: 24px;
    padding: 20px 32px;
    position: absolute;
    text-shadow: var(--mission-popup-txt-shadow);
    top: 0;
    width: 100%;
}

.mission-popup-label {
    color: var(--mission-popup-label);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.mission-popup-label-item {
    color: var(--mission-popup-label-item);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.mission-popup-label-style {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.mission-popup-progress {
    margin: 10px 0;
}

.missionReward-btn-container {
    align-items: center;
    bottom: -20px;
    display: flex;
    justify-content: center;
    margin-left: unset;
    position: absolute;
    width: 100%;
}

.missionReward-btn {
    background: var(--mission-popup-reward-bg);
    width: 85%;
}

.missionReward-icon {
    height: 40px;
    width: 35px;
}

.missionReward-txt {
    color: var(--mission-popup-reward);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.mission-popup-content {
    height: 280px;
    margin: 25px 0 0;
    overflow-y: scroll;
    padding: 0 0 30px;
    position: relative;
    width: 100%;
}

.mission-popup-content::-webkit-scrollbar-track {
    background: var(--mission-popup-scrollbar-track);
    border-radius: 10px;
}

.mission-popup-content::-webkit-scrollbar-thumb {
    background: var(--mission-popup-scrollbar-thumb);
    border-radius: 10px;
}

.mission-popup-content::-webkit-scrollbar-thumb:hover {
    background: var(--mission-popup-scrollbar-thumb-hover);
}

.mission-popup-gradient {
    background: var(--mission-gradient);
    bottom: 20px;
    padding-top: 40px;
    position: relative;
    width: 100%;
}

.mission-popup-info {
    color: var(--mission-popup-info);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    margin-top: 25px;
    text-align: left;
    white-space: pre-line !important;
    width: 100%;
    word-break: break-word;
}

.mission-popup-txt {
    color: var(--mission-popup-txt);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.mission-popup-no-progress-txt {
    color: var(--mission-noProgress-txt);
}

.mission-popup-in-progress-txt {
    color: var(--mission-inProgress-txt);
}

.mission-popup-claimed-txt {
    color: var(--mission-claimed-txt);
}

.mission-popup-claimNow-txt {
    color: var(--mission-label-default);
}

.mission-more {
    color: var(--mission-more);
}

.mission-record-icon {
    height: 45px;
    width: 43px;
}

.mission-reward-dialog {
    color: var(--mission-reward-txt);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 39px;
}

.mission-popup-bottom-container {
    border-top: var(--mission-popup-bottom-container-top-border);
    padding: 20px 32px 0;
    width: 100%;
}

.mission-activity-container {
    background: var(--mission-popup-activity-container-bg);
    border: var(--mission-popup-activity-container-border);
    border-radius: 10px;
    box-shadow: var(--mission-popup-activity-container-shadow);
    height: auto;
    padding: 14px;
    width: 100%;
}

.mission-close-container {
    cursor: pointer;
    height: 32px;
    position: absolute;
    right: -10px;
    top: -10px;
    width: 32px;
}

.mission-popup-btn {
    background: var(--mission-popup-btn-bg);
    border: var(--mission-popup-btn-border);
    box-shadow: var(--mission-popup-btn-shadow);
}

.mission-popup-btn,
.mission-popup-btn-txt {
    color: var(--mission-popup-btn-txt);
}

.mission-item-container {
    background: var(--missionItem-bg);
    border: var(--missionItem-border);
    border-radius: 10px;
    box-shadow: var(--missionItem-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
    width: 100%;
}

.mission-item-container.claimable {
    background: var(--missionItem-claimable-bg);
    border: var(--missionItem-claimable-border);
    box-shadow: var(--missionItem-claimable-shadow);
}

.mission-item-banner-container {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 128px;
    justify-content: space-between;
    overflow: hidden;
    padding: 8px 12px 0;
    position: relative;
    width: 100%;
}

.mission-item-banner-container>* {
    z-index: 0;
}

.mission-item-banner-img-container {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.mission-item-banner-img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.mission-item-banner-type-container {
    align-self: flex-end;
    -webkit-backdrop-filter: var(--missionItem-type-blur);
    backdrop-filter: var(--missionItem-type-blur);
    background: var(--missionItem-type-bg);
    border: var(--missionItem-type-border);
    border-radius: 10px;
    box-shadow: var(--missionItem-type-shadow);
    filter: var(--missionItem-type-filter);
    padding: 8px 18px;
    width: 100px;
}

.mission-item-banner-type-txt {
    color: var(--missionItem-type-txt);
    font-size: var(--fontSize12);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mission-item-banner-title,
.mission-item-banner-type-txt {
    font-family: var(--fontFamily);
    font-style: normal;
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.mission-item-banner-title {
    color: var(--missionItem-banner-title);
    font-size: var(--fontSize30);
    text-shadow: var(--missionItem-banner-title-txtShadow);
}

.mission-item-desc-container {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    padding: 0 16px 12px;
}

.mission-item-desc {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--missionItem-desc);
    display: -webkit-box;
    font-family: var(--fontFamily);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mission-item-btn {
    background: var(--missionItem-btn-bg);
    border: var(--missionItem-btn-border);
    border-radius: 5px;
    box-shadow: var(--missionItem-btn-shadow);
    padding: 9px 18px;
}

.mission-item-btn.inProgress {
    background: var(--mission-inProgress-bg);
    border: var(--mission-inProgress-border);
    box-shadow: var(--mission-inProgress-shadow);
}

.mission-item-btn.claimed {
    background: var(--missionItem-btn-bg-claimable);
    border: var(--missionItem-btn-border-claimable);
    box-shadow: var(--missionItem-btn-shadow-claimable);
}

.mission-item-btn-txt {
    color: var(--missionItem-btn-txt);
    font-family: var(--fontFamily);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.mission-item-btn-txt.inProgress {
    color: var(--mission-inProgress-txt);
}

.mission-item-btn-txt.claimed {
    color: var(--missionItem-btn-txt-claimable);
}

.mission-item-btn-claimable {
    background: var(--missionItem-btn-bg-claimable);
    border: var(--missionItem-btn-border-claimable);
    border-radius: 5px;
    box-shadow: var(--missionItem-btn-shadow-claimable);
    padding: 9px 18px;
}

.mission-item-btn-txt-claimable {
    color: var(--missionItem-btn-txt-claimable);
    font-family: var(--fontFamily);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.mission-nav-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mission-nav-filter-section {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

.mission-nav-filter-main-container {
    flex: 1 1;
    overflow: hidden;
}

.mission-nav-filter-container {
    align-items: center;
    background: var(--mission-filter-bg);
    border: var(--mission-filter-border);
    border-radius: 10px;
    box-shadow: var(--mission-filter-shadow);
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 52px;
    justify-content: space-between;
    padding: 15px 13px;
}

.mission-nav-filter-txt {
    color: var(--mission-filter-txt);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mission-nav-filter-img {
    object-fit: contain;
    width: 18.5px;
}

.mission-nav-active-main-container {
    background: var(--mission-active-bg);
    border: var(--mission-active-border);
    border-radius: 10px;
    box-shadow: var(--mission-active-shadow);
    display: flex;
    flex: 1 1;
    flex-direction: row;
    height: 52px;
    overflow: hidden;
}

.mission-nav-active-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: space-between;
    margin: 7px 16px;
    width: 100%;
}

.mission-nav-active-txt {
    color: var(--mission-active-txt);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mission-nav-active-count-container {
    align-items: center;
    background: var(--mission-active-count-bg);
    border: var(--mission-active-count-border);
    border-radius: 50%;
    box-shadow: var(--mission-active-count-shadow);
    display: flex;
    flex-direction: row;
    height: 28px;
    justify-content: center;
    min-width: 28px;
}

.mission-nav-active-count-txt {
    color: var(--mission-active-count-txt);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.mission-nav-separator {
    background: var(--mission-separator);
    height: 1px;
    width: 100%;
}

.mission-nav-active-parent-container {
    flex: 1 1;
    overflow: hidden;
}

.mission-nav-active-upper-container {
    display: flex;
    height: 100%;
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .mission-status-txt {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }
    .mission-status {
        height: 28px;
        width: 28px;
    }
    .mission-amt-container {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 5px 5px 5px 8px;
    }
    .mission-amt-reload-icon {
        height: 22px;
        width: 22px;
    }
    .mission-amt-amt-txt {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        width: 90px;
    }
    .mission-amt-txt {
        font-size: 9px;
        font-weight: 400;
        line-height: 12px;
    }
    .mission-cover-container {
        min-height: 188px;
    }
    .mission-list-container {
        min-height: 90px;
    }
    .mission-content-title-container {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
    .mission-content-desc-container {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
    }
    .mission-btn {
        border-radius: 5px;
        height: 30px;
        width: 100%;
    }
    .mission-btn,
    .mission-btn-txt {
        font-size: 12px;
        font-weight: 700;
        line-height: 15px;
    }
    .mission-coin {
        height: 18px;
        width: 18px;
    }
    .mission-reward-style {
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        padding: 0;
    }
    .mission-listing-content-container {
        padding: 10px;
    }
    .mission-popup-style {
        border-radius: 25px;
        max-width: unset;
    }
    .mission-top-bg {
        background-size: 361px 244px;
        position: relative;
        width: 100%;
    }
    .missionReward-btn-container {
        bottom: -17.5px;
    }
    .mission-popup-label {
        white-space: nowrap;
    }
    .mission-popup-label,
    .mission-popup-label-item {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }
    .mission-popup-label-item {
        white-space: wrap !important;
        word-break: break-word;
    }
    .mission-popup-info {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
    }
    .missionReward-icon {
        height: 30px;
        width: 25px;
    }
    .missionReward-txt {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }
    .mission-record-icon {
        height: 32px;
        width: 28px;
    }
    .mission-reward-dialog {
        font-size: 27px;
        font-weight: 700;
        line-height: 33px;
    }
}

@keyframes missionLabel {
    0% {
        opacity: 0;
    }
    5%,
    80% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.amlPolicy-container {
    align-items: center;
    justify-content: center;
    position: relative;
}

.amlPolicy-container,
.amlPolicy-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.amlPolicy-style {
    justify-content: flex-start;
    max-width: 468px;
    padding-bottom: 32px;
}

.amlPolicy-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.amlPolicy-content,
.amlPolicyContent-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.policyTitle-container {
    color: var(--policyTitle-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.policySubSection-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.policySubSection-title {
    color: var(--policySubSection-title);
    font-weight: var(--fontWeight700);
}

.policySubSection-content,
.policySubSection-title {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
}

.policySubSection-content {
    color: var(--policySubSection-content);
    font-weight: var(--fontWeight400);
    white-space: pre-line;
}

.kycPolicy-container {
    align-items: center;
    justify-content: center;
    position: relative;
}

.kycPolicy-container,
.kycPolicy-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.kycPolicy-style {
    justify-content: flex-start;
    max-width: 468px;
    padding: 32px 0;
}

.kycPolicy-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.kycPolicy-content,
.kycPolicyContent-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.rgaNGtc-container {
    align-items: center;
    justify-content: center;
    position: relative;
}

.rgaNGtc-container,
.rgaNGtc-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.rgaNGtc-style {
    justify-content: flex-start;
    max-width: 468px;
    padding-bottom: 32px;
}

.rgaNGtc-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.rgaNGtc-nav-action {
    display: flex;
    flex-direction: row;
    gap: 21px;
    height: 52px;
}

.rgaNGtc-nav-action-img {
    cursor: pointer;
    height: 25px;
    object-fit: fill;
    width: 25px;
}

.rgaNGtc-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media print {
    .rgaNGtc-sticky-header {
        display: none;
    }
}

.rgaNGtcContent-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.multi-tab-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow: auto;
    width: 100%;
}

.loginMain-multi-tab-container {
    background: var(--loginMain-multiTab-bg);
    border: var(--loginMain-multiTab-border);
    border-radius: 10px;
    box-shadow: var(--loginMain-multiTab-shadow);
    gap: 0;
}

.multi-tab-container::-webkit-scrollbar {
    display: none;
}

.multi-tab-item-container {
    flex: 1 1;
}

.tab-item-container {
    align-items: center;
    background: var(--tab-item-bg);
    border: var(--tab-item-border);
    border-radius: 10px;
    box-shadow: var(--tab-item-shadow);
    cursor: pointer;
    display: flex;
    height: 42px;
    justify-content: center;
    padding: 0 11px;
}

.loginMain-tab-item-container {
    background: transparent;
    height: 52px;
    padding: 17px 13px;
}

.tab-item-container-selected {
    background: var(--tab-item-selected-bg);
    border: var(--tab-item-selected-border);
    box-shadow: var(--tab-item-selected-shadow);
}

.loginMain-tab-item-container-selected {
    border: var(--loginMain-tab-item-selected-border);
    box-shadow: none;
}

.tab-item-txt {
    color: var(--tab-item-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight700);
    text-align: center;
    white-space: nowrap;
}

.loginMain-tab-item-txt {
    color: var(--loginMain-tab-item-txt);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.tab-item-txt-selected {
    color: var(--tab-item-selected-txt);
}

.affiliateMain-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
}

.affiliateMain-style {
    max-width: 468px;
    padding-bottom: 32px;
}

.affiliateMain-style,
.affiliateShare-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.affiliateShare-container {
    position: relative;
}

.affiliateShare-style {
    max-width: 468px;
    min-height: auto;
}

.affiliateShare-style,
.affiliateShare-top {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.affiliateShare-top {
    gap: 32px;
    padding-top: 16px;
}

.affiliateShare-btn-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

.affiliateShare-shared-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.affiliateShare-share {
    background: var(--affiliate-share);
    border: var(--affiliate-share-border);
    border-radius: 10px;
    box-shadow: var(--affiliate-share-shadow);
    height: 42px;
}

.affiliateShare-share-txt {
    color: var(--affiliate-share-txt);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-weight: 700;
}

.affiliateShare-line {
    background: var(--affiliate-line);
    border: var(--affiliate-line-border);
    border-radius: 10px;
    box-shadow: var(--affiliate-line-shadow);
    height: 42px;
}

.affiliateShare-line-txt {
    color: var(--affiliate-line-txt);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-weight: 700;
}

.affiliateShare-icon {
    margin-right: 17px;
    object-fit: contain;
    width: 26px;
}

.affiliateShare-url-container {
    background: var(--affiliateShare-url-bg);
    border: var(--affiliateShare-url-border);
    border-radius: 10px;
    box-shadow: var(--affiliateShare-url-shadow);
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 16px;
    width: 100%;
}

.affiliateShare-url-left-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.affiliateShare-url-title {
    color: var(--affiliateShare-url-title);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}

.affiliateShare-url-value {
    color: var(--affiliateShare-url-value);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

.affiliateShare-copy-img {
    object-fit: contain;
    width: 26px;
}

.affiliateShare-topup-btn-style {
    align-items: center;
    border-radius: 10px;
    box-shadow: var(--affiliate-topup-btn-shadow);
    display: flex;
    flex: 1 1;
    font-size: 20px;
    font-weight: 700;
    height: 52px;
    justify-content: center;
}

.affiliateShare-topup-btn-bg {
    background: var(--affiliate-topup-btn-bg);
    border: var(--affiliate-topup-btn-border);
}

.affiliateShare-topup-btn-txt {
    color: var(--affiliate-topup-btn-txt);
    font-size: var(--fontSize20);
    font-weight: 700;
}

.affiliateShare-withdraw-btn-style {
    align-items: center;
    border-radius: 10px;
    box-shadow: var(--affiliate-withdraw-btn-shadow);
    display: flex;
    flex: 1 1;
    font-size: 20px;
    font-weight: 700;
    height: 52px;
    justify-content: center;
}

.affiliateShare-withdraw-btn-bg {
    background: var(--affiliate-withdraw-btn-bg);
    border: var(--affiliate-withdraw-btn-border);
}

.affiliateShare-withdraw-btn-txt {
    color: var(--affiliate-withdraw-btn-txt);
    font-size: var(--fontSize20);
    font-weight: 700;
}

.commCard-main-container {
    gap: 16px;
}

.commCard-container,
.commCard-main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.commCard-container {
    align-items: flex-start;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
    box-shadow: var(--comm-card-shadow);
    height: 229px;
    justify-content: space-between;
    max-width: 468px;
    padding: 32px 16px;
    position: relative;
}

@media (max-width: 600px) {
    .commCard-container {
        border-radius: 20px;
        height: auto;
        margin-bottom: 15px;
        margin-top: 0;
        min-height: 180px;
        padding: 19px 13px;
    }
}

.commCard-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.commCard-title {
    color: var(--comm-card-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 600px) {
    .commCard-title {
        line-height: 20px;
    }
}

.commCard-lifetime-container {
    background: var(--comm-lifetime-bg);
    border: var(--comm-lifetime-border);
    border-radius: 8px;
    box-shadow: var(--comm-lifetime-shadow);
    color: var(--comm-lifetime-txt);
    font-size: 10px;
    font-weight: 700;
    padding: 14px 15px 16px 12px;
    white-space: wrap;
}

@media (max-width: 600px) {
    .commCard-lifetime-container {
        font-size: 8px;
        padding: 5px;
    }
}

.commCard-bal-title {
    color: var(--commCard-bal-title);
    font-family: var(--fontFamily);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 600px) {
    .commCard-bal-title {
        line-height: 14px;
    }
}

.commCard-bal-txt {
    color: var(--comm-card-txt);
    font-family: var(--fontFamily);
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 600px) {
    .commCard-bal-txt {
        font-size: 28px;
        line-height: 37px;
    }
}

.commCard-unsettled-container {
    background: var(--affiliate-unsettled-bg);
    border: var(--affiliate-unsettled-border);
    border-radius: var(--main-radius);
    box-shadow: var(--affiliate-unsettled-shadow);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 12px 16px;
    width: 100%;
}

@media (max-width: 600px) {
    .commCard-unsettled-container {
        padding: 8px 2px 8px 8px;
    }
}

.commCard-unsettled-title {
    color: var(--affiliate-unsettled-title);
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 600px) {
    .commCard-unsettled-title {
        font-size: 16px;
        line-height: 22px;
    }
}

.commCard-unsettled-date {
    color: var(--affiliate-unsettled-date);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    margin-top: 3px;
}

.commCard-unsettled-date .important {
    font-weight: 700;
}

@media (max-width: 600px) {
    .commCard-unsettled-date {
        font-size: 10px;
    }
}

.nav-item-container {
    align-items: center;
    background: var(--nav-item-bg);
    border: var(--nav-item-border);
    border-radius: 8px;
    box-shadow: var(--nav-item-shadow);
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.nav-item-img {
    height: 30px;
    object-fit: fill;
    width: 30px;
}

.affiliateReport-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 16px;
    position: relative;
    width: 100%;
}

.affiliateReport-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.affiliateReport-top {
    align-items: center;
    display: flex;
    flex-direction: column;
    left: 0;
    padding-bottom: 10px;
    width: 100%;
}

.affiliateReport-card-container {
    align-items: flex-start;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 468px 270px;
    border-radius: 25px;
    box-shadow: var(--comm-card-shadow);
    display: flex;
    flex-direction: column;
    height: 270px;
    justify-content: space-between;
    margin-bottom: 31px;
    margin-top: 15px;
    max-width: 468px;
    padding: 17px 20px;
    position: relative;
    width: 100%;
}

@media (max-width: 600px) {
    .affiliateReport-card-container {
        background-size: 100% 98%;
        border-radius: 20px;
        height: auto;
        margin-bottom: 15px;
        margin-top: 0;
        min-height: 180px;
        padding: 19px 13px;
    }
}

.affiliateReport-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.affiliateReport-card-title {
    color: var(--comm-card-title);
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    margin-right: 5px;
}

@media (max-width: 600px) {
    .affiliateReport-card-title {
        font-size: 16px;
        line-height: 20px;
    }
}

.affiliateReport-lifetime-container {
    background: var(--comm-lifetime-bg);
    border: var(--comm-lifetime-border);
    border-radius: 8px;
    box-shadow: var(--comm-lifetime-shadow);
    color: var(--comm-lifetime-txt);
    font-size: 12px;
    font-weight: 700;
    padding: 10px 6px;
    white-space: wrap;
}

@media (max-width: 600px) {
    .affiliateReport-lifetime-container {
        font-size: 8px;
        padding: 5px;
    }
}

.affiliateReport-card-bal-title {
    color: var(--comm-card-txt);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

@media (max-width: 600px) {
    .affiliateReport-card-bal-title {
        font-size: 12px;
        line-height: 14px;
    }
}

.affiliateReport-bal-txt {
    color: var(--comm-card-txt);
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
}

@media (max-width: 600px) {
    .affiliateReport-bal-txt {
        font-size: 28px;
        line-height: 37px;
    }
}

.affiliateReport-tips {
    padding: 20px 25px;
}

@media (max-width: 600px) {
    .affiliateReport-tips {
        padding: 16px;
    }
}

.affiliateReport-tips2-txt {
    color: var(--comm-tips2-txt);
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    margin: 20px 0 0;
}

@media (max-width: 600px) {
    .affiliateReport-tips2-txt {
        font-size: 14px;
        line-height: 17px;
        margin: 10px 0 0;
    }
}

.affiliateReport-act-icon {
    display: var(--comm-act-icon);
    height: 20px;
    margin: 0 10px 0 0;
    object-fit: contain;
    width: 20px;
}

.affiliateReport-btn-container {
    margin-top: 20px !important;
}

.affiliateReport-summ-btn-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    max-width: 468px;
    width: 100%;
}

.affiliateReport-summ-btn-style {
    border-radius: 6px;
    box-shadow: var(--comm-btn-shadow);
    height: 31px;
    width: 107.47px;
}

@media (max-width: 600px) {
    .affiliateReport-summ-btn-style {
        height: 28px;
        width: 100.47px;
    }
}

.affiliateReport-summ-btn-txt {
    color: var(--comm-btn-txt);
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
}

.affiliateReport-summ-btn-bg {
    background: var(--comm-btn-bg);
    border: var(--comm-btn-border);
    box-shadow: var(--comm-btn-shadow);
}

.affiliateReport-bot,
.affiliateReport-summ-listing-container {
    width: 100%;
}

.affiliateReport-summ-list {
    align-items: flex-start;
    background: var(--listing-bg);
    border: var(--listing-border);
    border-radius: var(--main-radius);
    box-shadow: var(--comm-list-shadow);
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    margin: 0 0 16px;
    min-width: 80px;
    padding: 10px 16px;
    width: 100%;
}

.affiliateReport-summ-title-container {
    margin-bottom: 10px;
    width: 100%;
}

.affiliateReport-summ-title {
    color: var(--comm-summ-title);
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
}

.affiliateReport-summ-desc-container,
.affiliateReport-summ-desc-title {
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.affiliateReport-summ-desc-title {
    color: var(--listing-item);
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    height: 100%;
    line-height: 15px;
}

@media (max-width: 600px) {
    .affiliateReport-summ-desc-title {
        font-size: 11px;
    }
}

.affiliateReport-summ-desc-data {
    align-items: flex-end;
    color: var(--listing-item);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    height: 100%;
    justify-content: flex-end;
    line-height: 15px;
    text-align: right;
    width: 50%;
}

@media (max-width: 600px) {
    .affiliateReport-summ-desc-data {
        font-size: 11px;
    }
}

.affiliateReport-summ-desc-inner {
    margin-top: 4px;
}

.affiliateReport-summ-desc-green {
    color: var(--comm-summ-green);
}

.affiliateReport-summ-desc-orange {
    color: var(--comm-summ-orange);
    margin: 14px 0;
}

.affiliateReport-summ-desc-grey {
    color: var(--bottom-modal-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
}

@media (max-width: 600px) {
    .affiliateReport-summ-desc-grey {
        font-size: 8px;
        line-height: 10px;
    }
}

.affiliateReport-summ-desc-empty {
    opacity: 0;
}

@media (max-width: 600px) {
    .affiliateReport-summ-desc-empty {
        padding-bottom: 5px;
    }
}

.affiliateReport-datePicker-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 766px;
    width: 100%;
}

.affiliateReport-datePicker-style {
    height: 268px;
}

.affiliateReport-datePicker-title {
    color: var(--comm-datePicker-title);
    font-weight: 400;
    margin: 55px 0 12px;
    width: 100%;
}

.affiliateReport-datePicker-btn,
.affiliateReport-datePicker-title {
    display: flex;
    font-size: 14px;
    justify-content: center;
    line-height: 17px;
}

.affiliateReport-datePicker-btn {
    align-items: center;
    background: transparent;
    border-radius: var(--comm-datePicker-btn-radius);
    color: var(--comm-datePicker-btn);
    font-weight: 700;
    height: 34.9px;
    width: 79%;
}

.affiliateReport-datePicker-selected {
    background: var(--comm-datePicker-selected);
    color: var(--comm-datePicker-selected-btn);
}

.affiliateReport-filter-main-container {
    align-self: self-end;
    width: 50%;
}

.affiliateReport-filter-container {
    background: var(--affiliateReport-filter-bg);
    border: var(--affiliateReport-filter-border);
    border-radius: 10px;
    box-shadow: var(--affiliateReport-filter-shadow);
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    padding: 11px 16px;
}

.affiliateReport-filter-txt {
    color: var(--affiliateReport-filter-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: normal;
    font-weight: var(--fontWeight700);
}

.affiliateReport-filterDd-img {
    object-fit: contain;
    width: 18.5px;
}

@media (max-width: 600px) {
    .affiliateReport-summ-flatlist {
        height: auto !important;
    }
}

.affiliateDownline-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    position: relative;
    width: 100%;
}

.affiliateDownline-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.affiliateDownline-filter-container {
    align-items: center;
    background: var(--affiliateDownline-filter-bg);
    border: var(--affiliateDownline-filter-border);
    border-radius: 10px;
    box-shadow: var(--affiliateDownline-filter-shadow);
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 52px;
    justify-content: space-between;
    padding: 0 16px;
}

.affiliateDownline-filter-txt {
    color: var(--affiliateDownline-filter-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: normal;
    font-weight: var(--fontWeight700);
}

.affiliateDownline-filterDd-img {
    object-fit: contain;
    width: 18.5px;
}

.button-pagination-listing-container {
    display: flex;
    flex-direction: column;
}

.button-pagination-container {
    background: var(--button-pagination-bg);
    bottom: var(--footer-height);
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    left: var(--side-menu-width);
    padding: 32px 30px;
    position: fixed;
    right: 0;
}

@media (max-width: 1281px) {
    .button-pagination-container {
        left: 0;
    }
}

.button-pagination-button {
    background: var(--button-pagination-button-bg);
    border: var(--button-pagination-button-border);
    border-radius: 10px;
    box-shadow: var(--button-pagination-button-shadow);
    height: 42px;
    padding: 14px 17px;
}

.button-pagination-button-img {
    height: 100%;
    object-fit: contain;
}

.button-pagination-page-indicator {
    background: var(--button-pagination-page-indicator-bg);
    border: var(--button-pagination-page-indicator-border);
    border-radius: 10px;
    box-shadow: var(--button-pagination-page-indicator-shadow);
    height: 42px;
    padding: 11px 23px;
}

.button-pagination-page-indicator-txt {
    color: var(--button-pagination-page-indicator-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
}

.button-pagination-flatList-container {
    padding-bottom: 0;
}

.affiliateDownlineItem-container {
    background: var(--affiliateDownline-item-bg);
    border: var(--affiliateDownline-item-border);
    border-radius: 10px;
    box-shadow: var(--affiliateDownline-item-shadow);
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    padding: 16px 16px 10px;
    width: 100%;
}

.affiliateDownlineItem-info-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    padding: 0 16px;
}

.affiliateDownlineItem-info-left-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.affiliateDownlineItem-profile-img {
    object-fit: contain;
    width: 32px;
}

.affiliateDownlineItem-user-container {
    display: flex;
    flex-direction: column;
}

.affiliateDownlineItem-username-txt {
    color: var(--affiliateDownline-item-username-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.affiliateDownlineItem-mobile-txt {
    color: var(--affiliateDownline-item-mobile-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.affiliateDownlineItem-info-right-container {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.affiliateDownlineItem-status-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 17px;
}

.affiliateDownlineItem-status-dot {
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.affiliateDownlineItem-status-dot.new {
    background: var(--affiliateDownline-item-status-new);
}

.affiliateDownlineItem-status-dot.active {
    background: var(--affiliateDownline-item-status-active);
}

.affiliateDownlineItem-status-dot.inactive {
    background: var(--affiliateDownline-item-status-inactive);
}

.affiliateDownlineItem-status-txt {
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.affiliateDownlineItem-status-txt.new {
    color: var(--affiliateDownline-item-status-new);
}

.affiliateDownlineItem-status-txt.active {
    color: var(--affiliateDownline-item-status-active);
}

.affiliateDownlineItem-status-txt.inactive {
    color: var(--affiliateDownline-item-status-inactive);
}

.affiliateDownlineItem-date-txt {
    color: var(--affiliateDownline-item-date-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: end;
}

.affiliateDownlineItem-separtor {
    background: var(--affiliateDownline-item-separator);
    height: 1px;
    margin: 13px 0 7px;
}

.affiliateAbout-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.affiliateAbout-scenario-container {
    align-items: center;
    background: var(--affiliateAbout-scenario-bg);
    border: var(--affiliateAbout-scenario-border);
    border-radius: 10px;
    box-shadow: var(--affiliateAbout-scenario-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 32px;
}

.affiliateAbout-scenario-img {
    object-fit: contain;
    width: 100%;
}

.affiliateAbout-howToEarn-container {
    background: var(--affiliateAbout-howToEarn-bg);
    border: var(--affiliateAbout-howToEarn-border);
    border-radius: 10px;
    box-shadow: var(--affiliateAbout-howToEarn-shadow);
    display: flex;
    flex-direction: column;
    padding: 30px 8px 8px;
}

.affiliateAbout-howToEarn-title {
    -webkit-text-fill-color: transparent;
    align-self: center;
    background: var(--affiliateAbout-howToEarn-title) text;
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-style: normal;
    font-weight: var(--fontWeight700);
    line-height: normal;
    margin-bottom: 16px;
    max-width: 100%;
    text-align: center;
    width: max-content;
    word-break: break-all;
}

.affiliateAbout-howToEarn-step-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.affiliateAbout-howToEarn-remark-container {
    background: var(--affiliateAbout-howToEarn-remark-bg);
    border: var(--affiliateAbout-howToEarn-remark-border);
    border-radius: 12px;
    box-shadow: var(--affiliateAbout-howToEarn-remark-shadow);
    padding: 16px 45px;
}

.affiliateAbout-howToEarn-remark-title {
    color: var(--affiliateAbout-howToEarn-remark-title);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight700);
}

.affiliateAbout-howToEarn-remark-desc,
.affiliateAbout-howToEarn-remark-title {
    font-family: var(--fontFamily);
    line-height: normal;
    margin-bottom: 16px;
    margin-top: 18px;
    text-align: center;
}

.affiliateAbout-howToEarn-remark-desc {
    color: var(--affiliateAbout-howToEarn-remark);
    font-size: var(--fontSize10);
    font-weight: var(--fontWeight400);
}

.affiliateAbout-earnStep-container {
    align-items: center;
    display: flex;
    flex-direction: row;
}

.affiliateAbout-earnStep-img {
    object-fit: contain;
    width: 82px;
}

.affiliateAbout-earnStep-desc {
    color: var(--affiliateAbout-earnStep-desc);
    font-family: var(--fontFamily);
    font-size: var(--fontSize14);
    font-style: normal;
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.missionDetail-mainContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-x: clip;
    padding-bottom: 32px;
    position: relative;
    width: 100%;
}

.missionDetail-style {
    display: flex;
    flex-direction: column;
    max-width: 468px;
    width: 100%;
}

.missionDetail-info-container {
    align-items: center;
    background: var(--mission-popup-bg);
    border: var(--mission-popup-border);
    border-radius: 10px;
    box-shadow: var(--mission-popup-shadow);
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: flex-start;
    overflow: hidden;
    padding: 4px;
    position: relative;
    width: 100%;
}

.missionDetail-info-container.nextAnimate {
    animation: nextEffect 0.3s forwards;
}

.missionDetail-info-container.prevAnimate {
    animation: prevEffect 0.3s forwards;
}

@keyframes nextEffect {
    0% {
        left: 100%;
    }
    to {
        left: 0;
    }
}

@keyframes prevEffect {
    0% {
        left: -100%;
    }
    to {
        left: 0;
    }
}

.missionDetail-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.missionDetail-header-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.missionDetail-header-img {
    cursor: pointer;
    object-fit: contain;
    width: 18.5px;
}

.missionDetail-header-title {
    color: var(--missionDetail-header-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-style: normal;
    font-weight: var(--fontWeight700);
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.missionDetail-header-claim-btn {
    align-items: center;
    background: var(--missionDetail-nav-claim-bg);
    border: var(--missionDetail-nav-claim-border);
    border-radius: 10px;
    box-shadow: var(--missionDetail-nav-claim-shadow);
    display: flex;
    height: 42px;
    justify-content: center;
    min-width: 92px;
    padding: 0 8px;
    width: 92px;
}

.missionDetail-header-claim-txt {
    color: var(--missionDetail-nav-claim-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: normal;
    font-weight: var(--fontWeight700);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.missionDetail-info-banner-container {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 128px;
    justify-content: space-between;
    overflow: hidden;
    padding: 8px 12px 0;
    position: relative;
    width: 100%;
}

.missionDetail-info-banner-container>* {
    z-index: 0;
}

.missionDetail-info-banner-img-container {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.missionDetail-info-banner-img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.missionDetail-info-banner-type-container {
    align-self: flex-end;
    -webkit-backdrop-filter: var(--missionDetail-banner-type-blur);
    backdrop-filter: var(--missionDetail-banner-type-blur);
    background: var(--missionDetail-banner-type-bg);
    border: var(--missionDetail-banner-type-border);
    border-radius: 10px;
    box-shadow: var(--missionDetail-banner-type-shadow);
    filter: var(--missionDetail-banner-type-filter);
    padding: 8px 18px;
    width: 100px;
}

.missionDetail-info-banner-type-txt {
    color: var(--missionDetail-banner-type-txt);
    font-size: var(--fontSize12);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.missionDetail-info-banner-title,
.missionDetail-info-banner-type-txt {
    font-family: var(--fontFamily);
    font-style: normal;
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.missionDetail-info-banner-title {
    color: var(--missionDetail-banner-txt);
    font-size: var(--fontSize30);
}

.missionDetail-btn-container {
    align-items: center;
    background: var(--missionDetail-btn-bg);
    border: var(--missionDetail-btn-border);
    border-radius: 10px;
    box-shadow: var(--missionDetail-btn-shadow);
    display: flex;
    height: 42px;
    justify-content: center;
    padding: 0 11px;
    width: 100%;
}

.missionDetail-btn-txt {
    color: var(--missionDetail-btn-txt);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.missionDetail-activity-container,
.missionDetail-btn-txt {
    font-family: var(--fontFamily);
    font-style: normal;
    line-height: normal;
}

.missionDetail-activity-container {
    background: var(--missionDetail-info-bg);
    border: var(--missionDetail-info-border);
    box-shadow: var(--missionDetail-info-shadow);
    color: var(--missionDetail-info-txt);
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    white-space: pre-line;
    width: 100%;
    word-break: break-word;
}

.missionDetail-activity-info-container {
    display: flex;
    flex-direction: row;
    white-space: pre;
}

.missionDetail-desc-container {
    background: var(--missionDetail-desc-bg);
    border: var(--missionDetail-desc-border);
    box-shadow: var(--missionDetail-desc-shadow);
    color: var(--missionDetail-desc-txt);
    font-family: var(--fontFamily);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    white-space: pre-line;
    width: 100%;
    word-break: break-word;
}

.missionInfoSection-container {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

.missionInfoSection-item-container {
    background: var(--missionInfoSection-even-bg);
    border: var(--missionInfoSection-even-border);
    box-shadow: var(--missionInfoSection-even-shadow);
    padding: 16px;
}

.missionInfoSection-item-container.odd {
    background: var(--missionInfoSection-odd-bg);
    border: var(--missionInfoSection-odd-border);
    box-shadow: var(--missionInfoSection-odd-shadow);
}

.passwordTextField-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.passwordTextField-input-container {
    align-items: center;
    background: var(--loginCommonTf-bg);
    border: var(--loginCommonTf-border);
    border-radius: 10px;
    box-shadow: var(--loginCommonTf-shadow);
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    min-height: 52px;
    padding: 3px 8px;
}

.passwordTextField-icon {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.passwordTextField-error-input-container {
    border: var(--loginCommonTf-err-border);
}

.passwordTextField-focus-input-container {
    border: var(--loginCommonTf-focus-border);
}

.passwordTextField-hide-show-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.passwordTextField-error-msg {
    color: var(--loginCommonTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.bankDropDownBorderTextField-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.bankDropDownBorderTextField-input-container {
    align-items: center;
    background: var(--loginCommonTf-bg);
    border: var(--bankDropdownBorderTf-border);
    border-radius: 10px;
    box-shadow: var(--bankDropdownBorderTf-shadow);
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    justify-content: space-between;
    min-height: 52px;
    padding: 3px 8px;
}

.bankDropDownBorderTextField-error-input-container {
    border: var(--loginCommonTf-err-border);
}

.bankDropDownBorderTextField-value-section {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 33.5px;
}

.bankDropDownBorderTextField-value-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.bankDropDownBorderTextField-value-txt {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--bankDropdownBorderTf-value-txt);
    display: -webkit-box;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    line-height: normal;
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.bankDropDownBorderTextField-placeholder-txt {
    color: var(--bankDropdownBorderTf-placeholder-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.bankDropDownBorderTextField-dropdown-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.bankDropDownBorderTextField-error-msg {
    color: var(--loginCommonTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.bankDropDownBorderTextField-popup-bank-container {
    background: var(--bankDropdownBorderTf-popup-bg);
    border: var(--bankDropdownBorderTf-popup-border);
    border-radius: 15px;
    box-shadow: var(--bankDropdownBorderTf-popup-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 8px;
}

.bankDropDownBorderTextField-popup-title-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 42px;
}

.bankDropDownBorderTextField-popup-title {
    color: var(--bankDropdownBorderTf-popup-title-txt);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.bankDropDownBorderTextField-popup-title-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.bankDropDownBorderTextField-popup-bank-options-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 252px;
    overflow: scroll;
    padding-top: 5px;
}

.bankDropDownBorderTextField-popup-bank-options-container::-webkit-scrollbar {
    display: none;
}

.bankDropDownBorderTextField-item-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bankDropDownBorderTextField-item-content-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 35px;
    padding: 0 38px;
}

.bankDropDownBorderTextField-item-bank-img {
    height: 31px;
    object-fit: fill;
    width: 31px;
}

.bankDropDownBorderTextField-item-bank-name {
    color: var(--bankListingItem-bank-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight700);
    line-height: normal;
    word-break: break-all;
}

.bankDropDownBorderTextField-item-separator {
    background: var(--bankDropdownBorderTf-popup-separator);
    height: 1px;
    width: 100%;
}

.registerBank-container {
    align-items: center;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
}

.registerBank-container,
.registerBank-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.registerBank-style {
    justify-content: flex-start;
    max-width: 468px;
}

.registerBank-title-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-bottom: 21px;
}

.registerBank-title {
    color: var(--verifyMobile-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.registerBank-step-img {
    height: 32px;
    object-fit: contain;
}

.registerBank-form-container {
    padding-bottom: 32px;
}

.registerBank-form-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.registerBank-separator-container {
    display: flex;
    flex-direction: row;
    padding: 8px 50px;
}

.registerBank-separator {
    background: var(--registerBank-separator);
    height: 1px;
    width: 100%;
}

.registerBank-bankMsg-txt {
    color: var(--registerBank-bankMsg-txt);
    font-size: var(--fontSize12);
}

.registerBank-bankMsg-txt,
.registerBank-pendingVerify-msg-txt {
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.registerBank-pendingVerify-msg-txt {
    color: var(--registerBank-pendingVerify-msg-txt);
    font-size: var(--fontSize16);
}

.registerBank-verifying-container {
    border: var(--registerBank-verifying-border);
}

.lineVerMobile-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 686px;
    position: relative;
    width: 100%;
}

.lineVerMobile-modal-container {
    align-items: center;
    background: var(--lineVerifiedMobile-modal-bg);
    border: var(--lineVerifiedMobile-modal-border);
    border-radius: 16px;
    box-shadow: var(--lineVerifiedMobile-modal-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;
    padding: 32px 50px;
    width: 100%;
}

.lineVerMobile-modal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.lineVerMobile-bottom-modal-title {
    color: var(--signIn-modal-title);
    font-size: 14px;
    line-height: 17px;
    margin: 76.79px 0 11.21px;
}

.lineVerMobile-bottom-modal-select-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: center;
    padding: 0 0 30px;
    width: 100%;
}

.lineVerMobile-bottom-modal-select-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    width: 100%;
}

.lineVerMobile-modal-title-container {
    align-items: center;
    color: var(--signIn-title);
    display: flex;
    font-size: 24px;
    font-weight: 700;
    justify-content: center;
    line-height: 29px;
    margin: 0 0 82px;
    overflow-wrap: anywhere;
    text-align: center;
    width: 100%;
}

.lineVerMobile-modal-num-style {
    align-items: center;
    border-bottom: 1px solid var(--signIn-underline);
    color: var(--signIn-input);
    display: flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: flex-start;
    padding-bottom: 10.5px;
    width: 100%;
}

.lineVerMobile-modal-dropdown-mobile {
    gap: 14px;
}

.lineVerMobile-dropdown-mobile,
.lineVerMobile-modal-dropdown-mobile {
    align-items: center;
    color: var(--signIn-mobile);
    display: flex;
    font-size: 16px;
    justify-content: center;
}

.lineVerMobile-dropdown-icon {
    height: 7px;
    margin-left: 5px;
    width: 11px;
}

.lineVerMobile-input-icon {
    margin-left: 8px;
}

.lineVerMobile-modal-input:disabled {
    -webkit-text-fill-color: var(--signIn-input);
    opacity: 1;
}

.lineVerMobile-modal-input:focus {
    outline: none;
}

.lineVerMobile-modal-input {
    background: var(--signIn-input-bg);
    border: none;
    color: var(--signIn-input);
    font-size: 16px;
    margin-left: 9px;
    text-align: left;
    width: 65% !important;
}

.lineVerMobile-modal-btn {
    background: var(--signIn-btn);
}

.lineVerMobile-modal-btn-style {
    box-shadow: var(--signIn-btn-shadow);
    font-size: 16px;
    height: 42px;
    line-height: 20px;
    margin-top: 32px;
    min-height: 42px;
    width: 100%;
}

.lineVerMobile-modal-disabled-btn {
    background: var(--signIn-disabled-btn);
    border: var(--signIn-disabled-border);
    color: #fff;
}

.lineVerMobile-modal-txt {
    font-size: 16px !important;
    font-weight: 700;
    line-height: 20px;
}

.loginMain-container {
    justify-content: center;
    position: relative;
}

.loginMain-container,
.loginMain-style {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.loginMain-style {
    justify-content: flex-start;
    max-width: 468px;
}

.loginMain-sticky-header {
    background: var(--loginMain-sticky-header-bg);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 21px;
    padding-top: 32px;
    width: 100%;
}

.loginMain-page-title {
    color: var(--loginMain-page-title-txt);
    font-family: var(--fontFamily);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.loginMain-step-img-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.loginMain-step-img {
    height: 32px;
    object-fit: contain;
}

.loginMain-empty-img {
    height: 32px;
}

.login-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
    width: 100%;
}

.login-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 53px;
}

.login-forgot-section-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    padding-top: 21px;
}

.login-forgot-txt {
    color: var(--login-forgot-pw-txt);
    cursor: pointer;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    line-height: normal;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
}

.login-btn-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 45px;
}

.captcha-show {
    height: 125px;
    overflow: hidden;
    transition: height 0.8s ease;
}

.captcha-hide {
    height: 0;
    overflow: hidden;
}

.mock-show {
    height: 125px;
    overflow: hidden;
    transition: height 0.8s ease;
}

.mock-hide {
    height: 0;
    overflow: hidden;
}

.remember-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 13px;
}

.remember-tick-img {
    cursor: pointer;
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.remember-txt {
    color: var(--remember-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.thirdPartyLogin-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.thirdPartyLogin-item {
    flex: 1 1;
}

.thirdPartyLoginItem-container {
    align-items: center;
    background: var(--thirdPartyLogin-bg);
    border: var(--thirdPartyLogin-border);
    border-radius: 6px;
    box-shadow: var(--thirdPartyLogin-shadow);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 8px;
}

.thirdPartyLoginItem-img {
    height: 26px;
    object-fit: contain;
    width: 24px;
}

.loginOrSeparator-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
}

.loginOrSeparator-separator {
    background: var(--login-separator);
    height: 1px;
    width: 108px;
}

.loginOrSeparator-separator-txt {
    color: var(--login-separator);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.captchaWrapper {
    background: var(--signIn-captcha-bg);
    border: var(--signIn-captcha-border);
    border-radius: 10px;
    box-shadow: var(--signIn-captcha-shadow);
    height: 100px;
    justify-content: space-between;
    line-height: 0;
    margin-bottom: 4px;
    padding: 10px 24px;
}

.captchaContainer,
.captchaWrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    position: relative;
}

.captchaContainer {
    gap: 40px;
    padding: 15px 0;
}

.error {
    border: var(--signIn-captcha-error-border);
}

.captchaBox {
    background-color: var(--signIn-captcha-bg);
    border: var(--signIn-captcha-box-border);
    border-radius: 12px;
    height: 44px;
    transition: all 0.3s ease;
    width: 44px;
}

.scaleDown {
    transform: scale(0);
    transition: transform 0.4s ease;
}

.continuousRotation {
    animation: spin 1.2s linear infinite;
    border: var(--signIn-captcha-loading-border);
    border-left-color: transparent;
    border-radius: 50%;
    border-right-color: transparent;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}

.fadeOut {
    animation: spin 1.2s linear infinite;
    background-color: transparent;
    border: var(--signIn-captcha-loading-border);
    border-color: transparent;
    border-radius: 50%;
    transition: border-color 0.6s ease;
}

.fadeOut.boxHover:hover {
    border: none;
    cursor: default;
}

.boxHide {
    visibility: hidden;
}

.tick-icon {
    left: 32px;
    position: absolute;
    top: 36px;
}

.show {
    display: block;
    opacity: 1;
    transition: opacity 2.8s ease;
}

.hide {
    display: none;
    opacity: 0;
}

#hiddenCaptcha {
    left: 1;
    position: absolute;
    top: 1;
    visibility: hidden;
}

.captcha-text {
    color: var(--signIn-captcha-txt);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.captcha-icon {
    height: 50px;
    width: 50px;
}

.register-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
    width: 100%;
}

.register-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.register-btn-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.baseCheckBox-container {
    height: 20px;
    object-fit: fill;
    width: 20px;
}

.policyAgreement-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.policyAgreement-input-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.policyAgreement-input-text {
    color: var(--policyAgreement-text);
    font-size: var(--fontSize14);
    word-break: break-all;
}

.policyAgreement-error-msg,
.policyAgreement-input-text {
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.policyAgreement-error-msg {
    color: var(--loginCommonTf-err-color);
    font-size: var(--fontSize12);
}

.policyAgreement-special-key {
    color: var(--policyAgreement-special-txt);
    cursor: pointer;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
}

.datePickerTextField-main-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.datePickerTextField-container {
    background: transparent;
    border: none;
    color: var(--baseTextField-input);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: 500;
    line-height: normal;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.loginDatePickerTf-container {
    color: var(--loginCommonTf-txt);
    font-size: var(--fontSize20);
    line-height: normal;
}

.datePickerTextField-container:-ms-input-placeholder {
    color: var(--baseTextField-input-placeholder);
}

.datePickerTextField-container::placeholder {
    color: var(--baseTextField-input-placeholder);
}

.datePickerInput-placeholder {
    color: var(--baseTextField-input-placeholder);
}

.datePickerTextField-clear-img {
    cursor: pointer;
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__navigation-icon:before,
.react-datepicker__year-read-view--down-arrow {
    border-color: #ccc;
    border-style: solid;
    border-width: 3px 3px 0 0;
    content: "";
    display: block;
    height: 9px;
    position: absolute;
    top: 6px;
    width: 9px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
    margin-left: -4px;
    position: absolute;
    width: 0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
    border: 8px solid transparent;
    box-sizing: content-box;
    content: "";
    height: 0;
    left: -8px;
    position: absolute;
    width: 1px;
    z-index: -1;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
    border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
    margin-top: -8px;
    top: 0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before {
    border-bottom-color: #f0f0f0;
    border-top: none;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:after {
    top: 0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before {
    border-bottom-color: #aeaeae;
    top: -1px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
    bottom: 0;
    margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
    border-bottom: none;
    border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:after {
    bottom: 0;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
    border-top-color: #aeaeae;
    bottom: -1px;
}

.react-datepicker-wrapper {
    border: 0;
    display: inline-block;
    padding: 0;
}

.react-datepicker {
    background-color: #fff;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    color: #000;
    display: inline-block;
    font-family: Helvetica Neue, helvetica, arial, sans-serif;
    font-size: 0.8rem;
    position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
    left: 35px;
}

.react-datepicker--time-only .react-datepicker__time-container {
    border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.react-datepicker__triangle {
    left: 50px;
    position: absolute;
}

.react-datepicker-popper {
    z-index: 1;
}

.react-datepicker-popper[data-placement^="bottom"] {
    padding-top: 10px;
}

.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
    left: auto;
    right: 50px;
}

.react-datepicker-popper[data-placement^="top"] {
    padding-bottom: 10px;
}

.react-datepicker-popper[data-placement^="right"] {
    padding-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
    left: auto;
    right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
    padding-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
    left: 42px;
    right: auto;
}

.react-datepicker__header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #aeaeae;
    border-top-left-radius: 0.3rem;
    padding: 8px 0;
    position: relative;
    text-align: center;
}

.react-datepicker__header--time {
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px;
}

.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
    border-top-left-radius: 0;
}

.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: 0.3rem;
}

.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__year-dropdown-container--select {
    display: inline-block;
    margin: 0 15px;
}

.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__current-month {
    color: #000;
    font-size: 0.944rem;
    font-weight: 700;
    margin-top: 0;
}

.react-datepicker-time__header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.react-datepicker__navigation {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    text-indent: -999em;
    top: 2px;
    width: 32px;
    z-index: 1;
}

.react-datepicker__navigation--previous {
    left: 2px;
}

.react-datepicker__navigation--next {
    right: 2px;
}

.react-datepicker__navigation--next--with-time:not( .react-datepicker__navigation--next--with-today-button) {
    right: 85px;
}

.react-datepicker__navigation--years {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0;
}

.react-datepicker__navigation--years-previous {
    top: 4px;
}

.react-datepicker__navigation--years-upcoming {
    top: -4px;
}

.react-datepicker__navigation:hover :before {
    border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
    font-size: 20px;
    position: relative;
    top: -1px;
    width: 0;
}

.react-datepicker__navigation-icon--next {
    left: -2px;
}

.react-datepicker__navigation-icon--next:before {
    left: -7px;
    transform: rotate(45deg);
}

.react-datepicker__navigation-icon--previous {
    right: -2px;
}

.react-datepicker__navigation-icon--previous:before {
    right: -7px;
    transform: rotate(225deg);
}

.react-datepicker__month-container {
    float: left;
}

.react-datepicker__year {
    margin: 0.4rem;
    text-align: center;
}

.react-datepicker__year-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 180px;
}

.react-datepicker__year .react-datepicker__year-text {
    display: inline-block;
    margin: 2px;
    width: 4rem;
}

.react-datepicker__month {
    margin: 0.4rem;
    text-align: center;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
    display: inline-block;
    margin: 2px;
    width: 4rem;
}

.react-datepicker__input-time-container {
    clear: both;
    float: left;
    margin: 5px 0 10px 15px;
    text-align: left;
    width: 100%;
}

.react-datepicker__input-time-container .react-datepicker-time__caption,
.react-datepicker__input-time-container .react-datepicker-time__input-container {
    display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
    display: inline-block;
    margin-left: 10px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
    width: auto;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
    -moz-appearance: textfield;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
    display: inline-block;
    margin-left: 5px;
}

.react-datepicker__time-container {
    border-left: 1px solid #aeaeae;
    float: right;
    width: 85px;
}

.react-datepicker__time-container--with-today-button {
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    display: inline;
    position: absolute;
    right: -87px;
    top: 0;
}

.react-datepicker__time-container .react-datepicker__time {
    background: #fff;
    border-bottom-right-radius: 0.3rem;
    position: relative;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    border-bottom-right-radius: 0.3rem;
    margin: 0 auto;
    overflow-x: hidden;
    text-align: center;
    width: 85px;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    box-sizing: content-box;
    height: calc(195px + 0.85rem);
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    height: 30px;
    padding: 5px 10px;
    white-space: nowrap;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    background-color: #216ba5;
    color: #fff;
    font-weight: 700;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
    background-color: #216ba5;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
    color: #ccc;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
    background-color: transparent;
    cursor: default;
}

.react-datepicker__week-number {
    color: #ccc;
    display: inline-block;
    line-height: 1.7rem;
    margin: 0.166rem;
    text-align: center;
    width: 1.7rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
    cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
    background-color: #f0f0f0;
    border-radius: 0.3rem;
}

.react-datepicker__day-names,
.react-datepicker__week {
    white-space: nowrap;
}

.react-datepicker__day-names {
    margin-bottom: -8px;
}

.react-datepicker__day,
.react-datepicker__day-name,
.react-datepicker__time-name {
    color: #000;
    display: inline-block;
    line-height: 1.7rem;
    margin: 0.166rem;
    text-align: center;
    width: 1.7rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
    cursor: pointer;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
    background-color: #f0f0f0;
    border-radius: 0.3rem;
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
    font-weight: 700;
}

.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
    background-color: #3dcc4a;
    border-radius: 0.3rem;
    color: #fff;
}

.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
    background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
    color: #f0f;
}

.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
    color: green;
}

.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
    background-color: #ff6803;
    border-radius: 0.3rem;
    color: #fff;
    position: relative;
}

.react-datepicker__day--holidays .holiday-overlay,
.react-datepicker__month-text--holidays .holiday-overlay,
.react-datepicker__quarter-text--holidays .holiday-overlay,
.react-datepicker__year-text--holidays .holiday-overlay {
    background-color: #333;
    border-radius: 4px;
    bottom: 100%;
    color: #fff;
    left: 50%;
    opacity: 0;
    padding: 4px;
    position: absolute;
    transform: translateX(-50%);
    transition: visibility 0s, opacity 0.3s ease-in-out;
    visibility: hidden;
    white-space: nowrap;
}

.react-datepicker__day--holidays:hover,
.react-datepicker__month-text--holidays:hover,
.react-datepicker__quarter-text--holidays:hover,
.react-datepicker__year-text--holidays:hover {
    background-color: #cf5300;
}

.react-datepicker__day--holidays:hover .holiday-overlay,
.react-datepicker__month-text--holidays:hover .holiday-overlay,
.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
.react-datepicker__year-text--holidays:hover .holiday-overlay {
    opacity: 1;
    visibility: visible;
}

.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--selected,
.react-datepicker__month-text--in-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--selected,
.react-datepicker__quarter-text--in-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__year-text--in-range,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--selected {
    background-color: #216ba5;
    border-radius: 0.3rem;
    color: #fff;
}

.react-datepicker__day--in-range:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--selected:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__year-text--in-range:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--selected:hover {
    background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
    background-color: #bad9f1;
    border-radius: 0.3rem;
    color: #000;
}

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
    background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not( .react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not( .react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not( .react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not( .react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
    background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not( .react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
    background-color: #f0f0f0;
    color: #000;
}

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
    color: #ccc;
    cursor: default;
}

.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
    background-color: transparent;
}

.react-datepicker__input-container {
    display: inline-block;
    position: relative;
    width: 100%;
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
    box-sizing: content-box;
    padding: 0.5rem;
    position: absolute;
}

.react-datepicker__view-calendar-icon input {
    padding: 6px 10px 5px 25px;
}

.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view,
.react-datepicker__year-read-view {
    border: 1px solid transparent;
    border-radius: 0.3rem;
    position: relative;
}

.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover,
.react-datepicker__year-read-view:hover {
    cursor: pointer;
}

.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
    border-top-color: #b3b3b3;
}

.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__year-read-view--down-arrow {
    right: -16px;
    top: 0;
    transform: rotate(135deg);
}

.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown,
.react-datepicker__year-dropdown {
    background-color: #f0f0f0;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    left: 25%;
    position: absolute;
    text-align: center;
    top: 30px;
    width: 50%;
    z-index: 1;
}

.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover,
.react-datepicker__year-dropdown:hover {
    cursor: pointer;
}

.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable,
.react-datepicker__year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
}

.react-datepicker__month-option,
.react-datepicker__month-year-option,
.react-datepicker__year-option {
    display: block;
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type,
.react-datepicker__year-option:first-of-type {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type,
.react-datepicker__year-option:last-of-type {
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover,
.react-datepicker__year-option:hover {
    background-color: #ccc;
}

.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
    border-bottom-color: #b3b3b3;
}

.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
    border-top-color: #b3b3b3;
}

.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected,
.react-datepicker__year-option--selected {
    left: 15px;
    position: absolute;
}

.react-datepicker__close-icon {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: table-cell;
    height: 100%;
    outline: 0;
    padding: 0 6px 0 0;
    position: absolute;
    right: 0;
    top: 0;
    vertical-align: middle;
}

.react-datepicker__close-icon:after {
    background-color: #216ba5;
    border-radius: 50%;
    color: #fff;
    content: "×";
    cursor: pointer;
    display: table-cell;
    font-size: 12px;
    height: 16px;
    line-height: 1;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    width: 16px;
}

.react-datepicker__today-button {
    background: #f0f0f0;
    border-top: 1px solid #aeaeae;
    clear: left;
    cursor: pointer;
    font-weight: 700;
    padding: 5px 0;
    text-align: center;
}

.react-datepicker__portal {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__time-name {
    line-height: 3rem;
    width: 3rem;
}

@media (max-height: 550px),
(max-width: 400px) {
    .react-datepicker__portal .react-datepicker__day,
    .react-datepicker__portal .react-datepicker__day-name,
    .react-datepicker__portal .react-datepicker__time-name {
        line-height: 2rem;
        width: 2rem;
    }
}

.react-datepicker__portal .react-datepicker-time__header,
.react-datepicker__portal .react-datepicker__current-month {
    font-size: 1.44rem;
}

.react-datepicker__children-container {
    height: auto;
    margin: 0.4rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    width: 13.8rem;
}

.react-datepicker__aria-live {
    border: 0;
    clip-path: circle(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.react-datepicker__calendar-icon {
    height: 1em;
    vertical-align: -0.125em;
    width: 1em;
}

.loginDatePickerTf-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.loginDatePickerTf-input-container {
    align-items: center;
    background: var(--loginCommonTf-bg);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    padding: 3px 8px;
}

.loginDatePickerTf-error-input-container {
    border: var(--loginCommonTf-err-border);
}

.loginDatePickerTf-focus-input-container {
    border: var(--loginCommonTf-focus-border);
}

.loginDatePickerTf-icon-container {
    display: flex;
}

.loginDatePickerTf-icon-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.loginDatePickerTf-error-msg {
    color: var(--loginCommonTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.setPassword-container {
    align-items: center;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
}

.setPassword-container,
.setPassword-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.setPassword-style {
    justify-content: flex-start;
    max-width: 468px;
}

.setPassword-title-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-bottom: 21px;
    padding-top: 49px;
}

.setPassword-title {
    color: var(--verifyMobile-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.setPassword-step-img {
    height: 32px;
    object-fit: contain;
}

.setPassword-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setPassword-btn-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.enterPassword-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
    width: 100%;
}

.enterPassword-style {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 468px;
    width: 100%;
}

.enterPassword-title-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-bottom: 39px;
    padding-top: 49px;
}

.enterPassword-title {
    color: var(--verifyMobile-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.enterPassword-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enterPassword-btn-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.forgotPassword-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
    width: 100%;
}

.forgotPassword-style {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 468px;
    width: 100%;
}

.forgotPassword-title-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-bottom: 39px;
    padding-top: 49px;
}

.forgotPassword-title {
    color: var(--verifyMobile-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.forgotPassword-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forgotPassword-btn-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.verifyGoogleAuthModal-main-container {
    align-items: center;
    gap: 16px;
    height: 100%;
    max-width: 686px;
    width: 100%;
}

.verifyGoogleAuthModal-container,
.verifyGoogleAuthModal-main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.verifyGoogleAuthModal-container {
    background: var(--verifyGoogleAuthModal-bg);
    border: var(--verifyGoogleAuthModal-border);
    border-radius: 16px;
    box-shadow: var(--verifyGoogleAuthModal-shadow);
    gap: 20px;
    max-width: 100%;
    padding: 32px 50px;
    width: 468px;
}

.verifyGoogleAuthModal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.verifyGoogleAuthModal-title {
    word-wrap: break-word;
    color: var(--verifyGoogleAuthModal-title);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
    text-align: center;
    white-space: wrap;
}

.verifyGoogleAuthModal-content-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.verifyGoogleAuthModal-sub-title {
    word-wrap: break-word;
    color: var(--verifyGoogleAuthModal-sub-title);
    font-size: var(--fontSize20);
    font-weight: var(--fontWeight400);
    text-align: center;
    white-space: wrap;
}

.dropdown-label-container {
    background: var(--dropdown-bg);
    border: var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
    height: auto;
    margin: 16px 0 32px;
    padding: 8px;
    position: relative;
    width: 99%;
    z-index: 1002;
}

.dropdown-inner-label-container,
.dropdown-label-container {
    align-items: center;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.dropdown-inner-label-container {
    background: var(--dropdown-inner-bg);
    border: var(--dropdown-inner-border);
    box-shadow: var(--dropdown-inner-shadow);
    flex-direction: row;
    height: 100%;
    padding: 5px 10px 5px 32px;
    width: 100%;
}

.dropdown-label-left-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: auto;
}

.dropdown-label-right-container {
    color: var(--dropdown-right-label);
    display: flex;
    flex-direction: column;
    font-size: 18px;
    height: 100%;
    justify-content: center;
    width: 80%;
}

.dropdown-list-style {
    align-items: center;
    bottom: -305px;
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: flex-start;
    overflow-y: scroll;
    padding: 10px 0 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.dropdown-list-hide {
    display: none;
    height: 0 !important;
    opacity: 0;
    width: 0 !important;
}

.dropdown-list-container {
    align-items: center;
    background: var(--dropdown-list-item-bg);
    border-radius: 10px;
    box-shadow: var(--dropdown-list-item-shadow);
    color: var(--dropdown-list-item-txt);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 95%;
}

.dropdown-bank-icon {
    height: 40px;
    margin-right: 16px;
    width: 40px;
}

.dropdown-onSelect-txt {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-item {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.dropdown-placeholder {
    align-items: center;
    color: var(--dropdown-placeholder);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    justify-content: center;
    line-height: 24px;
    text-align: center;
    width: 100%;
}

.dropdown-list-empty-icon {
    border-radius: 10px;
    height: 40px;
    margin: 0 10px;
    width: 40px;
}

@media screen and (max-width: 400px) {
    .dropdown-label-container {
        margin: 16px 0 30px;
    }
    .dropdown-label-right-container {
        font-size: 14px;
        width: 60%;
    }
    .dropdown-bank-icon {
        height: 30px;
        margin: 0 10px;
        width: 30px;
    }
    .dropdown-inner-label-container {
        padding: 5px;
    }
    .dropdown-onSelect-txt {
        font-size: 12px;
        font-weight: 700;
        line-height: 15px;
    }
    .dropdown-item {
        font-size: 12px;
        font-weight: 500;
        line-height: 15px;
    }
    .dropdown-placeholder {
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
    }
}

.plane-container {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: var(--plane-blur);
    backdrop-filter: var(--plane-blur);
    background: var(--plane-bg);
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 1001;
}

.bank-container,
.plane-container {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.bank-container {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: var(--root-bank-bg);
    flex-direction: column;
    position: absolute;
    z-index: 99998;
}

@media (max-width: 600px) {
    .bank-container {
        justify-content: unset;
        overflow: auto;
    }
}

.bank-popup {
    background: var(--root-bank-dialog-bg);
    border: var(--root-bank-border);
    border-radius: 25px;
    height: 628px;
    padding: 62px 32px 0;
    position: relative;
    width: 428px;
}

@media (max-width: 600px) {
    .bank-popup {
        border-radius: min(5.8548vw, 25px);
        height: auto;
        margin-top: min(21.645vh, 200px);
        min-height: 473px;
        padding: min(6.71vh, 62px) min(7.4941vw, 32px) 0;
        width: min(84.5433vw, 361px);
    }
}

.bank-close-container {
    height: 30px;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 30px;
}

@media (max-width: 600px) {
    .bank-close-container {
        right: min(3.7471vw, 16px);
        top: min(1.7316vh, 16px);
    }
}

.bank-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: unset;
}

.bank-close-btn,
.bank-close-icon {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.bank-title {
    color: var(--root-bank-title);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 16px;
    text-align: left;
}

@media (max-width: 600px) {
    .bank-title {
        font-size: min(3.2787vw, 14px);
        line-height: 17px;
    }
}

.bank-tips {
    color: var(--root-bank-tips);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 32px;
    text-align: left;
}

@media (max-width: 600px) {
    .bank-tips {
        font-size: min(3.2787vw, 14px);
        line-height: 17px;
        margin-bottom: 16px;
    }
}

.bank-label {
    color: var(--root-bank-label);
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    margin-bottom: 16px;
    text-align: left;
}

@media (max-width: 600px) {
    .bank-label {
        font-size: min(3.7471vw, 16px);
        line-height: min(2.1645vh, 20px);
        margin-bottom: 16.5px;
    }
}

.bank-dropdown {
    height: 60px;
    margin: 0 0 32px;
    width: 364px;
}

@media (max-width: 600px) {
    .bank-dropdown {
        margin-bottom: 16.5px;
        width: min(69.555vw, 297px);
    }
}

.bank-input-container {
    align-items: center;
    background: var(--root-bank-input-bg);
    border: var(--root-bank-input-border);
    border-radius: 10px;
    box-shadow: var(--root-bank-input-shadow);
    display: flex;
    height: 48px;
    justify-content: center;
    margin-bottom: 64px;
    padding: 12px 16px;
    width: 362px;
}

@media (max-width: 600px) {
    .bank-input-container {
        border-radius: min(2.3419vw, 10px);
        height: 35px;
        margin-bottom: 41px;
        width: min(69.555vw, 297px);
    }
}

.bank-input {
    background: transparent;
    border: none;
    color: var(--root-bank-input-txt);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    width: 100%;
}

@media (max-width: 600px) {
    .bank-input {
        font-size: min(3.2787vw, 14px);
        line-height: min(1.8398vh, 17px);
        padding: min(1.2987vh, 12px) min(4.6838vw, 20px);
    }
}

.bank-input:-ms-input-placeholder {
    color: var(--root-bank-input-placeholder);
}

.bank-input::placeholder {
    color: var(--root-bank-input-placeholder);
}

.bank-btn-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
}

.bank-btn-bg {
    background: var(--root-bank-btn-bg);
    border: var(--root-bank-btn-border);
    box-shadow: var(--root-bank-btn-shadow);
}

.bank-btn {
    cursor: pointer;
    height: 48px;
    width: 364px;
}

@media (max-width: 600px) {
    .bank-btn {
        height: 35px;
        width: min(69.555vw, 297px);
    }
}

.root-style {
    background: transparent;
    display: flex;
    height: 100%;
    overflow: visible;
    position: absolute;
    width: 100vw;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}

.spinner-container {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: var(--loading-bg);
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 99999;
}

.spinner-container,
.spinner-style {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.spinner-style {
    background: transparent;
    position: relative;
}

.loading-spinner-gif {
    height: 100px;
    width: 100px;
}

@media screen and (max-width: 400px) {
    .loading-spinner-gif {
        height: 50px;
        width: 50px;
    }
}

.dialog-container {
    background: var(--dialog-bg);
    border: var(--dialog-border);
    border-radius: 25px;
    min-height: 295px;
    padding: 72px 40.5px;
    width: 468px;
}

@media (max-width: 600px) {
    .dialog-container {
        min-height: min(22vh, 201px);
        padding: min(4.7619vh, 44px) min(3.4632vh, 32px) min(4.9784vh, 46px);
        width: min(85vw, 361px);
    }
}

.dialog-content-container {
    max-height: 50vh;
    overflow: auto;
}

.dialog-title {
    word-wrap: break-word;
    color: var(--dialog-title-txt);
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    margin-bottom: 8px;
    text-align: center;
    white-space: wrap;
}

@media (max-width: 600px) {
    .dialog-title {
        font-size: min(4.6838vw, 20px);
        line-height: 24px;
    }
}

.dialog-content {
    color: var(--dialog-content-txt);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 32px;
    text-align: center;
}

@media (max-width: 600px) {
    .dialog-content {
        font-size: min(3.2787vw, 14px);
        line-height: 17px;
    }
}

.dialog-btn-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
}

.dialog-btn {
    cursor: pointer;
    height: 48px;
    width: 404px;
}

@media (max-width: 600px) {
    .dialog-btn {
        border-radius: 10px;
        height: 35px;
        width: min(65.5738vw, 280px);
    }
}

.dialog-btn-txt {
    color: var(--dialog-btn-txt);
}

.dialog-cancel {
    border-bottom: var(--dialog-option-bottom);
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin-top: 15px;
}

@media (max-width: 600px) {
    .dialog-cancel {
        font-size: min(3.2787vw, 14px);
        margin-top: min(1.0823vh, 10px);
    }
}

.dialog-error-bg {
    background: var(--dialog-err);
}

.dialog-success-bg {
    background: var(--dialog-success);
}

.dialog-option-bg {
    background: var(--dialog-option);
}

.notification-container {
    position: absolute;
}

.notif-style {
    background: transparent;
    height: auto;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(100vh - 70px);
    overflow: auto;
    padding: 0 10px 20px 0;
    position: fixed;
    right: 0;
    width: 361px;
    z-index: 999990;
}

.notif-container {
    background: var(--notif-bg);
    border-radius: 16px;
    box-shadow: var(--notif-shadow);
    flex-direction: row;
    margin-top: 16px;
    min-height: 63px;
    padding: 11px 16px;
    width: 100%;
}

.notif-container,
.notif-content-container,
.notif-content-style {
    align-items: center;
    display: flex;
    justify-content: center;
}

.notif-content-container {
    flex-direction: column;
    height: auto;
    width: 70%;
}

.notif-content-container div {
    align-items: center;
    color: var(--notif-msg);
    display: flex;
    font-size: 12px;
    line-height: 14px;
    padding-right: 16px;
    text-align: left;
    white-space: wrap;
    width: 100%;
    word-break: break-word;
}

.notif-btn-container {
    background: var(--notif-btn-bg);
    border-radius: 6px;
    box-shadow: var(--notif-btn-shadow);
    color: var(--notif-btn-txt);
    font-size: 11px;
    font-weight: 700;
    height: 27.27px;
    line-height: 13px;
    width: 86px;
}

.feedback-container,
.notif-btn-container {
    align-items: center;
    display: flex;
    justify-content: center;
}

.feedback-container {
    background: var(--feedback-container-bg);
    flex-direction: column;
    height: 100vh;
    position: absolute;
    width: 100vw;
    z-index: 4;
}

@media (max-width: 600px) {
    .feedback-container {
        justify-content: unset;
        overflow: auto;
        padding-top: min(22.8355vh, 211px);
    }
}

.feedback {
    background: var(--feedback-bg);
    border: var(--feedback-border);
    border-radius: 25px;
    box-shadow: var(--feedback-shadow);
    height: 701px;
    padding: 32px;
    position: relative;
    width: 468px;
}

@media (max-width: 600px) {
    .feedback {
        height: auto;
        margin-bottom: 100px;
        padding: 20px min(9.3677vw, 40px);
        width: min(84.5433vw, 361px);
    }
}

.feedback-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    margin-bottom: 32px;
    text-align: left;
}

@media (max-width: 600px) {
    .feedback-title {
        font-size: min(5.6206vw, 24px);
        line-height: min(3.1385vh, 29px);
        margin-bottom: 16px;
    }
}

.feedback-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    margin-bottom: 14px;
    text-align: left;
}

@media (max-width: 600px) {
    .feedback-desc {
        font-size: min(3.2787vw, 14px);
        line-height: min(1.8398vh, 17px);
        margin-bottom: 16px;
    }
}

.stars-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    width: 100%;
}

@media (max-width: 600px) {
    .stars-container {
        margin-bottom: 16px;
    }
}

.star-img {
    height: 60px;
    width: 60px;
}

@media (max-width: 600px) {
    .star-img {
        height: min(10.0703vw, 43px);
        width: min(10.0703vw, 43px);
    }
}

.star {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.feedback-comment {
    background: var(--feedback-comment-bg);
    border: var(--feedback-comment-border);
    border-radius: 16px;
    color: var(--feedback-comment-txt);
    font-size: 16px;
    font-weight: 400;
    height: 369px;
    line-height: 19px;
    margin-bottom: 28px;
    padding: 16px;
    resize: none;
    width: 100%;
}

@media (max-width: 600px) {
    .feedback-comment {
        font-size: min(3.2787vw, 14px);
        height: 255px;
        line-height: min(1.8398vh, 17px);
        margin-bottom: 16px;
    }
}

.feedback-submit {
    background: var(--feedback-submit-bg);
    border: var(--feedback-submit-border);
    box-shadow: var(--feedback-submit-shadow);
    cursor: pointer;
    height: 52px;
}

.feedback-submit-disabled {
    background: var(--feedback-submit-disabled-bg);
    border: var(--feedback-submit-disabled-border);
    box-shadow: var(--feedback-submit-disabled-shadow);
    cursor: not-allowed;
}

.feedback-submit-txt {
    color: var(--feedback-submit-txt);
}

.feedback-submit-txt-disabled {
    color: var(--feedback-submit-txt-disabled);
}

.feedback-close-container {
    cursor: pointer;
    height: 48px;
    position: absolute;
    right: -25px;
    top: -25px;
    width: 48px;
}

@media (max-width: 600px) {
    .feedback-close-container {
        height: 32px;
        right: -15px;
        top: -15px;
        width: 32px;
    }
}

.feedback-close {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.global-bottomModal-container {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    background: var(--bottomModal-container-bg);
    display: none;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 5;
}

.global-bottomModal-container,
.global-bottomModal-content {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    position: fixed;
    width: 100%;
}

.global-bottomModal-content {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    bottom: 0;
    display: flex;
    height: 310px;
    justify-content: center;
}

.global-bottomModal-close-modal {
    align-items: center;
    display: flex;
    height: 50px;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 24px;
    width: 50px;
}

.global-bottomModal-close-icon {
    height: 35px;
    width: 35px;
}

.global-bottomModal-black {
    background: var(--bottomModal-black-bg);
}

.global-bottomModal-white {
    background: var(--bottom-modal-bg);
}

.global-bottomModal-style {
    max-width: 430px;
    position: relative;
    width: 100%;
}

@keyframes excludeFooterslideIn {
    0% {
        bottom: -300px;
        opacity: 0;
    }
    to {
        bottom: var(--footer-height);
        opacity: 1;
    }
}

.gamesLog-back-nav {
    padding: 0 !important;
}

.gamesLog-container {
    align-items: center;
    position: relative;
}

.gamesLog-container,
.gamesLog-style {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.gamesLog-style {
    max-width: 468px;
    min-height: auto;
}

.gamesLog-sticky-header {
    background: var(--main-bg);
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 0;
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.gamesLog-filter-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gamesLog-separator {
    background: var(--gamesLog-separator-bg);
    height: 1px;
    width: 100%;
}

.gamesLog-day-filter-container {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.gamesLog-day-button {
    align-items: center;
    background: var(--gamesLog-day-button-bg);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding: 13px;
}

.gamesLog-day-button-txt {
    color: var(--gamesLog-day-button-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.gamesLog-day-filter-container-item {
    flex: 1 1;
}

.gamesLog-provider-filter-container {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.gamesLog-provider-button {
    align-items: center;
    background: var(--gamesLog-day-button-bg);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding: 13px;
}

.gamesLog-provider-button-txt {
    color: var(--gamesLog-day-button-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    text-align: center;
}

.gamesLog-provider-filter-container-item {
    flex: 1 1;
}

.page-title-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.title-loading-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.title-loading-txt {
    color: var(--title-loading-txt);
    font-family: var(--fontFamily);
    font-size: 32px;
    font-weight: var(--fontWeight700);
    line-height: 95%;
}

.title-loading-spinner {
    height: 24px;
    object-fit: contain;
    width: 24px;
}

.gamesLog-item-container {
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    padding: 15px 16px;
    width: 100%;
    word-break: break-all;
}

.gamesLog-item-container-odd-theme {
    background: var(--gamesLog-item-odd-bg);
}

.gamesLog-item-container-even-theme {
    background: var(--gamesLog-item-even-bg);
}

.gamesLog-item-left-container,
.gamesLog-item-right-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gamesLog-item-title {
    color: var(--gamesLog-title-txt);
    font-weight: var(--fontWeight700);
}

.gamesLog-item-date,
.gamesLog-item-title {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
}

.gamesLog-item-date {
    color: var(--gamesLog-date-txt);
    font-weight: 400;
}

.gamesLog-item-turnover-container {
    display: flex;
    flex-direction: row;
    gap: 9px;
}

.gamesLog-item-turnover-title {
    color: var(--gamesLog-turnover-title);
}

.gamesLog-item-turnover-title,
.gamesLog-item-turnover-value {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: 400;
}

.gamesLog-item-turnover-value {
    color: var(--gamesLog-turnover-txt);
}

.gamesLog-item-winlost-container {
    display: flex;
    flex-direction: row;
    gap: 9px;
}

.gamesLog-item-winlost-title {
    color: var(--gamesLog-winlost-title);
}

.gamesLog-item-winlost-title,
.gamesLog-item-winlost-value {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: 400;
}

.gamesLog-item-winlost-value {
    color: var(--gamesLog-winlost-txt);
}

.gamesLog-item-status {
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: 400;
    text-align: right;
}

.gamesLog-item-status-success {
    color: var(--gamesLog-status-success-txt);
}

.gamesLog-item-status-progress {
    color: var(--gamesLog-status-progress-txt);
}

.gamesLog-item-status-fail {
    color: var(--gamesLog-status-fail-txt);
}

.changePassword-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
    width: 100%;
}

.changePassword-style {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 468px;
    width: 100%;
}

.changePassword-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.changePassword-title {
    color: var(--verifyMobile-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.changePassword-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.changePassword-btn-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.loginProhibitionConfig-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32px;
    position: relative;
    width: 100%;
}

.loginProhibitionConfig-style {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 468px;
    width: 100%;
}

.loginProhibitionConfig-sticky-header {
    top: var(--top-header-height);
    width: 100%;
    z-index: 1;
}

.loginProhibitionConfig-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.loginProhibitionConfig-title {
    color: var(--loginProhibitionConfig-title);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.loginProhibitionConfig-desc {
    color: var(--loginProhibitionConfig-desc);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
}

.prohibitionDropDown-container {
    display: flex;
    flex-direction: column;
}

.prohibitionDropDown-input-container {
    align-items: center;
    background: var(--prohibitionDropDown-bg);
    border: var(--prohibitionDropDown-border);
    border-radius: 10px;
    box-shadow: var(--prohibitionDropDown-shadow);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    padding: 3px 8px;
}

.prohibitionDropDown-dropdown-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.prohibitionDropDown-error-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.prohibitionDropDown-error-msg {
    color: var(--textField-err-msg);
    font-size: var(--fontSize10);
}

.prohibitionDropDownItem-popUp-item-hidden-icon {
    visibility: hidden;
}

.prohibitionDropDown-popUp-container {
    background: var(--prohibitionDropDown-bg);
    border: var(--prohibitionDropDown-border);
    border-radius: 10px;
    box-shadow: var(--prohibitionDropDown-shadow);
    display: flex;
    flex-direction: column;
    max-height: 30vh;
    overflow-y: auto;
}

.prohibitionDropDownItem-container {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 33.5px;
    padding: 3px 8px;
}

.prohibitionDropDownItem-txt {
    color: var(--prohibitionDropDown-input-color);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: 500;
    line-height: normal;
}

.trueWalletRegister-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.trueWalletRegister-title-container {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.trueWalletRegister-title {
    color: var(--trueWalletRegister-title);
    font-size: var(--fontSize24);
    font-weight: var(--fontWeight700);
}

.trueWalletRegister-description,
.trueWalletRegister-title {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    line-height: 95%;
}

.trueWalletRegister-description {
    color: var(--trueWalletRegister-desc);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight400);
}

.trueWalletRegister-form-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trueWalletDeposit-form-container {
    width: 100%;
}

.trueWalletDeposit-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 32px;
    width: 100%;
}

.trueWalletDeposit-account-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trueWalletDeposit-transfer-container {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.trueWalletDeposit-transfer-lbl {
    color: var(--trueWalletDeposit-transfer-text);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.trueWalletDeposit-amt-container {
    gap: 16px;
}

.trueWalletDeposit-amt-container,
.trueWalletDeposit-amt-container-layer1 {
    display: flex;
    flex-direction: column;
}

.trueWalletDeposit-enter-amt-lbl {
    color: var(--trueWalletDeposit-enter-amt-text);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.trueWalletDeposit-min-amt-lbl {
    color: var(--trueWalletDeposit-min-amt-text);
    font-weight: var(--fontWeight400);
}

.trueWalletDeposit-min-amt-bold-lbl,
.trueWalletDeposit-min-amt-lbl {
    font-family: var(--fontFamily);
    font-size: var(--fontSize10);
    font-style: var(--fontStyleNormal);
    line-height: normal;
}

.trueWalletDeposit-min-amt-bold-lbl {
    color: var(--trueWalletDeposit-min-amt-bold-text);
    font-weight: var(--fontWeight700);
    white-space: pre;
}

.report-button-container {
    align-items: center;
    background: var(--report-button-bg);
    border: var(--report-button-border);
    border-radius: 10px;
    box-shadow: var(--report-button-shadow);
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 42px;
    padding: 10px;
}

.report-button-icon {
    height: 25px;
    object-fit: contain;
    width: 26px;
}

.report-button-txt {
    color: var(--report-button-txt);
    flex-grow: 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: 400;
    text-align: center;
}

.amountSelectorTextField-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.amountSelectorTextField-input-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amountSelectorTextField-input-container-1 {
    display: flex;
    flex-direction: column;
}

.amountSelectorTextField-input-container-1-1 {
    align-items: center;
    background: var(--amountSelectorTf-input-bg);
    display: flex;
    justify-content: center;
    min-height: 52px;
    padding: 3px 8px;
    position: relative;
}

.amountSelectorTextField-input-underlined {
    background: var(--amountSelectorTf-input-border);
    height: 0.5px;
}

.amountSelectorTextField-input-underlined-error {
    background: var(--amountSelectorTf-input-border-err);
}

.amountSelectorTextField-err-msg {
    color: var(--amountSelectorTf-err-msg);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.amountSelectorTextField-selection-container {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    column-gap: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 10px;
}

.amountSelectorTextField-selection-item {
    background: var(--amountSelectorTf-opt-bg);
    border: var(--amountSelectorTf-opt-border);
    border-radius: 10px;
    box-shadow: var(--amountSelectorTf-opt-shadow);
    cursor: pointer;
    height: 42px;
    padding: 9px;
}

.amountSelectorTextField-selection-item-selected {
    background: var(--amountSelectorTf-selected-bg);
    border: var(--amountSelectorTf-selected-border);
    box-shadow: var(--amountSelectorTf-selected-shadow);
}

.amountSelectorTextField-selection-item-txt {
    color: var(--amountSelectorTf-opt-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize20);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.amountSelectorTextField-selection-item-txt-selected {
    color: var(--amountSelectorTf-selected-txt);
}

@media screen and (max-width: 350px) {
    .amountSelectorTextField-selection-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 280px) {
    .amountSelectorTextField-selection-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.amountSelectorTextField-decimal-amt-lbl {
    color: var(--amountSelectorTf-decimal-amt-lbl);
    font-weight: var(--fontWeight400);
    margin-top: 13px;
}

.amountSelectorTextField-decimal-amt-lbl,
.amountSelectorTextField-decimal-amt-txt {
    font-family: var(--fontFamily);
    font-size: var(--fontSize14);
    font-style: var(--fontStyleNormal);
    line-height: normal;
    text-shadow: none;
}

.amountSelectorTextField-decimal-amt-txt {
    color: var(--amountSelectorTf-decimal-amt-txt);
    font-weight: var(--fontWeight700);
}

.amountSelectorTextField-suffix {
    color: var(--baseTextField-suffix-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize24);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    padding-left: 10px;
    text-shadow: none;
}

.trueAccountDdTf-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trueAccountDdTf-value-container {
    align-items: center;
    background: var(--trueAccountDdTf-bg);
    border: var(--trueAccountDdTf-border);
    border-radius: 10px;
    box-shadow: var(--trueAccountDdTf-shadow);
    display: flex;
    flex-direction: row;
    gap: 33px;
    height: 52px;
    padding: 0 8px;
}

.bankDropDownBorderTextField-value-container-err,
.trueAccountDdTf-value-container-err {
    border: var(--trueAccountDdTf-border-err);
}

.trueAccountDdTf-value-container-1 {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: row;
    gap: 33px;
}

.trueAccountDdTf-value-container-1-1 {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.trueAccountDdTf-edit-action-container,
.trueAccountDdTf-edit-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trueAccountDdTf-placeholder-txt {
    color: var(--trueAccountDdTf-placeholder);
    flex: 1 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-align: center;
}

.trueAccountDdTf-value-img {
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.trueAccountDdTf-value-name {
    color: var(--trueAccountDdTf-name);
    font-size: var(--fontSize12);
}

.trueAccountDdTf-value-accNum,
.trueAccountDdTf-value-name {
    font-family: var(--fontFamily);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    line-height: normal;
    word-break: break-all;
}

.trueAccountDdTf-value-accNum {
    color: var(--trueAccountDdTf-accNum);
    font-size: var(--fontSize16);
}

.trueAccountDdTf-dropdown-img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.trueAccountDdTf-error-msg {
    color: var(--trueAccountDdTf-err-msg);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.trueAccountDdTf-popup-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
}

.trueAccountDdTf-popup-container {
    background: var(--trueAccountDdTf-bg);
    border: var(--trueAccountDdTf-border);
    border-radius: 10px;
    box-shadow: var(--trueAccountDdTf-shadow);
    display: flex;
    flex-direction: column;
    min-height: 58px;
    overflow-y: auto;
    width: 100%;
}

.trueAccountDdTf-popup-container-loading {
    align-items: center;
    justify-content: center;
}

.trueAccountDdTf-item-loading {
    height: 32px;
    width: 32px;
}

.trueAccountDdTf-popup-container::-webkit-scrollbar {
    display: none;
}

.trueAccountDdTf-item-separator {
    background: var(--trueAccountDdTf-item-separator);
    margin: 0 33px;
    min-height: 1px;
}

.trueAccountDdTf-item-container {
    display: flex;
    flex-direction: column;
    padding: 13px 33px;
}

.trueAccountDdTf-item-container-1 {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 33px;
}

.trueAccountDdTf-item-container-1-1 {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.trueAccountDdTf-popUp-item-hidden-icon {
    visibility: hidden;
}

.trueAccountDdTf-popUp-item-loading {
    height: 28px;
    object-fit: contain;
    width: 28px;
}

@media screen and (max-height: 775px) {
    .trueAccountDdTf-popup-main-container {
        max-height: 200px;
    }
}

.twalletEditTf-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.twalletEditTf-input-container {
    align-items: center;
    background: var(--tWalletEditTf-bg);
    border: var(--tWalletEditTf-border);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    padding: 5px;
}

.twalletEditTf-error-input-container {
    border: var(--tWalletEditTf-err-border);
}

.twalletEditTf-error-msg {
    color: var(--tWalletEditTf-err-color);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight400);
    line-height: normal;
}

.webViewModal-main-container {
    flex-direction: column;
    gap: 16px;
    max-width: 686px;
    position: relative;
}

.webViewModal-container,
.webViewModal-main-container {
    align-items: center;
    display: flex;
    height: 100%;
    width: 100%;
}

.webViewModal-container {
    justify-content: center;
}

.webViewModal-iframe {
    display: none;
    height: 100%;
    width: 100%;
}

.webViewModal-iframe-visible {
    display: block;
}

.webViewModal-close-icon {
    height: 42px;
    object-fit: contain;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
}

.webViewModal-loading-img {
    height: 50px;
    width: 50px;
}

.loadingComponent-container {
    align-items: center;
    display: flex;
    justify-content: center;
}

.loadingComponent-gif {
    height: 100px;
    width: 100px;
}

@media screen and (max-width: 400px) {
    .loadingComponent-gif {
        height: 50px;
        width: 50px;
    }
}

.depositSupportButton-container {
    background: var(--autoDeposit-support-container-bg);
    border: var(--autoDeposit-support-container-border);
    border-radius: 10px;
    box-shadow: var(--autoDeposit-support-container-shadow);
    color: var(--depositSupportButton-txt);
    column-gap: 13px;
    display: flex;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight400);
    height: 42px;
    line-height: normal;
    padding: 9px 12px;
    text-shadow: none;
}

.deposit-support-img,
.depositSupportButton-img {
    height: 24px;
    width: 24px;
}

.nav-title-container {
    background: var(--nav-title-container-bg);
    border: var(--nav-title-container-border);
    border-radius: 10px;
    box-shadow: var(--nav-title-container-shadow);
    color: var(--nav-title-container-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    padding: 14px 16px;
    text-shadow: none;
}

.luckyPayDeposit-form-container {
    width: 100%;
}

.luckyPayDeposit-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 32px;
    width: 100%;
}

.luckyPayDeposit-account-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.luckyPayDeposit-transfer-container {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.luckyPayDeposit-transfer-lbl {
    color: var(--luckyPayDeposit-transfer-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
}

.luckyPayDeposit-amt-container {
    gap: 16px;
}

.luckyPayDeposit-amt-container,
.luckyPayDeposit-amt-container-layer1 {
    display: flex;
    flex-direction: column;
}

.luckyPayDeposit-enter-amt-lbl {
    color: var(--luckyPayDeposit-enter-amt-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: normal;
    text-shadow: none;
}

.luckyPayDeposit-min-amt-lbl {
    color: var(--luckyPayDeposit-min-amt-txt);
    font-weight: var(--fontWeight400);
}

.luckyPayDeposit-min-amt-bold-lbl,
.luckyPayDeposit-min-amt-lbl {
    font-family: var(--fontFamily);
    font-size: var(--fontSize10);
    font-style: var(--fontStyleNormal);
    line-height: normal;
    text-shadow: none;
}

.luckyPayDeposit-min-amt-bold-lbl {
    color: var(--luckyPayDeposit-min-amt-bold-txt);
    font-weight: var(--fontWeight700);
}

.container {
    display: flex;
    justify-content: center;
}

.iframe-container {
    height: 100%;
    width: 100%;
}

.wallet-balance-container {
    align-items: center;
    background: var(--wallet-bg);
    border: var(--wallet-border);
    border-radius: 6px;
    box-shadow: var(--wallet-shadow);
    display: flex;
    flex-direction: row;
    flex-shrink: 1;
    gap: 6px;
    justify-content: space-between;
    min-width: 58px;
    overflow: hidden;
    padding: 11px 6px;
    text-align: center;
    width: 144px;
}

.wallet-balance-img {
    height: 19.7px;
    object-fit: contain;
    width: 20px;
}

.wallet-balance-text {
    flex-shrink: 1;
}

.wallet-balance-text,
.wallet-signin-text {
    color: var(--theme-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-login-container {
    background: var(--wallet-login-bg);
    border: var(--wallet-login-border);
    border-radius: 6px;
    box-shadow: var(--wallet-login-shadow);
    margin: 0 5px 5px 8px;
}

.wallet-login-container,
.wallet-register-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 6px;
    height: 42px;
    justify-content: space-between;
    overflow: hidden;
    padding: 11px 6px;
    text-align: center;
    width: 93px;
}

.wallet-register-container {
    background: var(--wallet-register-bg);
    border: var(--wallet-register-border);
    border-radius: 6px;
    box-shadow: var(--wallet-register-shadow);
    margin-left: 8px;
}

.wallet-login-text {
    color: var(--wallet-login-txt);
}

.wallet-login-text,
.wallet-register-text {
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-register-text {
    color: var(--wallet-register-txt);
}

.wallet-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.wallet-signup-login-container {
    align-items: center;
    background: var(--wallet-signup-login-bg);
    border: var(--wallet-signup-login-border);
    border-radius: 6px;
    box-shadow: var(--wallet-signup-login-shadow);
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    overflow: hidden;
    padding: 11px 6px;
    text-align: center;
    width: 144px;
}

.wallet-signup-login-txt {
    color: var(--wallet-signup-login-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-balance-outer-container {
    display: flex;
    min-width: 58px;
    overflow: hidden;
}

.footer-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

@media (max-width: 1281px) {
    .footer-container {
        align-items: flex-start;
        background: var(--footer-container);
        bottom: 0;
        display: flex;
        flex-wrap: nowrap;
        gap: 32px;
        grid-template: repeat(4, 1fr) / repeat(4, 1fr);
        height: 81.41px;
        justify-content: center;
        left: 0;
        padding-top: 10px;
        position: fixed;
        right: 0;
        width: 100%;
        z-index: 4;
    }
}

@media (max-width: 600px) {
    .footer-container {
        gap: unset;
        justify-content: space-evenly;
        max-width: unset;
    }
    .invite-angpao-time {
        font-size: 7px;
        left: 25%;
        padding: 0 3px;
    }
}

@media print {
    .footer-container {
        display: none;
    }
}

.more-slider-container {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(100%);
    transition: 0.5s;
    width: 100%;
}

.more {
    height: 100%;
    width: auto;
}

.more-slider-content {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-name: slideRight;
    animation-name: slideRight;
    background: var(--more-bg);
    height: 100%;
    max-width: 404px;
    position: fixed;
    right: 0;
    top: 0;
    width: 60%;
}

.more-title-container {
    align-items: flex-start;
    background: var(--more-title-bg);
    display: flex;
    flex-direction: column;
    height: 20%;
    justify-content: center;
    min-height: 246px;
    padding: 20px 10px 20px 32px !important;
    width: 100%;
}

.more-close-btn {
    background: none;
    border: none;
    margin-bottom: 32px;
}

.more-close-icon {
    height: 30px;
    width: 30px;
}

.more-title-txt {
    color: var(--more-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    white-space: wrap !important;
    word-break: break-word;
}

.more-item-container {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    overflow-x: scroll;
    padding: 0 10px 0 32px;
    width: 100%;
}

.more-item-style {
    align-items: center;
    color: var(--more-item);
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    line-height: 20px;
    margin: 51px 0 0;
    white-space: wrap !important;
    word-break: break-word;
}

.more-icon {
    height: 28px;
    margin: 0 21px 0 0;
    width: 28px;
}

.more-lang-txt {
    color: var(--more-lang-title-txt);
}

@media screen and (max-height: 500px),
screen and (max-width: 575.98px) {
    .more-slider-content {
        max-width: 204px;
        width: 60%;
    }
    .more-title-container {
        min-height: 150px;
        padding: 20px 10px 20px 20px !important;
    }
    .more-item-container {
        padding: 0 10px 150px 32px;
    }
    .more-close-btn {
        background: none;
        border: none;
        margin-bottom: 15px;
    }
    .more-close-icon {
        height: 20px;
        width: 20px;
    }
    .more-title-txt {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }
    .more-icon {
        height: 22px;
        margin: 0 14px 0 0;
        width: 22px;
    }
    .more-item-style {
        font-size: 11px;
        font-weight: 700;
        line-height: 13px;
        margin: 29px 0 0;
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        right: -300px;
    }
    to {
        opacity: 1;
        right: 0;
    }
}

.change-lang-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    width: 100%;
}

.change-lang-title {
    color: var(--signIn-modal-title);
    font-size: 14px;
    line-height: 17px;
    margin: 76.79px 0 11.21px;
}

.change-lang-select-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    width: 100%;
}

.change-lang-label {
    align-items: center;
    background: var(--cplang-bg);
    border-radius: var(--btn-border-radius);
    display: flex;
    height: 35px;
    justify-content: center;
    width: 320px;
}

.change-lang-icon {
    height: 18px;
    margin: 0 10px 0 0;
    width: 18px;
}

.change-lang-item-txt {
    font-size: 14px;
    line-height: 17px;
}

.change-lang-item-txt-selected {
    font-weight: 700;
}

.footer-style {
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end;
    padding: 6px;
}

@media (max-width: 1281px) {
    .footer-style {
        flex-direction: column;
        gap: 0;
        height: 52px;
        width: 52px;
    }
}

.footer-selected-style {
    background: var(--footer-selected-item-bg);
    border: var(--footer-selected-item-border);
    box-shadow: var(--footer-selected-item-shadow);
}

.footer-txt {
    color: var(--footer-item-txt);
    font-size: 16px;
    font-weight: 700;
    margin-top: 3px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 1281px) {
    .footer-txt {
        font-size: 11px;
        line-height: 13px;
    }
}

.footer-selected-txt {
    color: var(--footer-item-selected-txt);
}

.footer-icon {
    object-fit: contain;
    width: 18px;
}

@media (max-width: 1281px) {
    .footer-icon {
        width: 27.4px;
    }
}

.invite-angpao {
    background-image: url(/static/media/angpao.61277633192d492e5a92.png);
    background-size: 100% 100%;
    display: flex;
    height: 120px;
    position: absolute;
    top: -30px;
    width: 100px;
}

@media (max-width: 600px) {
    .invite-angpao {
        height: 90px;
        top: -10px;
        width: 80px;
    }
}

.invite-angpao-time {
    background: #000;
    border: 1px solid #fff;
    border-radius: 10px;
    bottom: 25px;
    display: none;
    font-size: 8px;
    left: 27%;
    padding: 0 3px;
    position: absolute;
}

@media (max-width: 600px) {
    .invite-angpao-time {
        font-size: 7px;
        left: 25%;
    }
}

:root {
    --side-menu-width: 300px;
}

@media (max-width: 1281px) {
     :root {
        --side-menu-width: 429px;
    }
}

.side-menu-dimmed-container {
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 0 0 var(--footer-height) 0;
    pointer-events: none;
    position: fixed;
    top: var(--top-header-height);
    transition: opacity 0.5s ease-in-out;
    z-index: 5;
}

@media (max-width: 1281px) {
    .side-menu-dimmed-container {
        padding: 0;
        top: 0;
        width: 100%;
        z-index: 6;
    }
}

.side-menu-dimmed-container-open {
    opacity: 1;
    pointer-events: unset;
}

.side-menu-main-container {
    height: 100%;
    padding: 11px 8px 8px;
    width: 300px;
    width: var(--side-menu-width);
}

@media (max-width: 1281px) {
    .side-menu-main-container {
        padding: 0;
    }
}

.side-menu-container {
    background: var(--side-menu-bg);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    left: -100%;
    opacity: 0;
    position: relative;
    transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    width: 100%;
}

@media (max-width: 1281px) {
    .side-menu-container {
        border-radius: 0;
        border-radius: initial;
    }
}

.side-menu-container-open {
    left: 0;
    opacity: 1;
}

.side-menu-nav-container {
    background: var(--side-menu-nav-bg);
    border: var(--side-menu-nav-border);
    box-shadow: var(--side-menu-nav-shadow);
    display: flex;
    display: none;
    flex-direction: column;
    gap: 21px;
    min-height: var(--top-header-height);
    padding: 24px 23px 24px 26px;
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 1281px) {
    .side-menu-nav-container {
        display: inline;
        display: initial;
    }
}

.side-menu-nav-horizontal-container {
    justify-content: space-between;
}

.side-menu-left-section-container,
.side-menu-nav-horizontal-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.side-menu-money-image {
    bottom: 28px;
    object-fit: contain;
    position: absolute;
    right: 38px;
    width: 37px;
}

@media (max-width: 1281px) {
    .side-menu-money-image {
        bottom: 37px;
        right: 60px;
        width: 38px;
    }
}

.side-menu-brand-txt {
    color: var(--side-menu-brand-txt) !important;
}

.side-menu-close {
    display: none;
}

@media (max-width: 1281px) {
    .side-menu-close {
        display: block;
        height: 26px;
        object-fit: contain;
        width: 26px;
    }
}

.side-menu-right-section-container {
    display: none;
}

@media (max-width: 1281px) {
    .side-menu-right-section-container {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 14px;
    }
}

.side-menu-language-container {
    border: var(--language-flag-dark-border) !important;
    box-shadow: var(--language-flag-dark-shadow) !important;
}

.side-menu-content-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;
    padding: 32px 19px;
}

@media (max-width: 1281px) {
    .side-menu-content-container {
        padding: 0 19px 32px;
    }
}

.side-menu-content-container:hover {
    overflow: auto;
}

.side-menu-content-container>* {
    flex-shrink: 0;
}

.side-menu-wallet-container {
    background: var(--side-menu-wallet-bg);
    border: var(--side-menu-wallet-border);
    box-shadow: var(--side-menu-wallet-shadow);
    display: inline;
    display: initial;
    padding: 16px 16px 16px 20px;
}

.side-menu-fund-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

@media (max-width: 1281px) {
    .side-menu-fund-container {
        gap: 66px;
    }
}

.side-menu-wallet-name {
    color: var(--sideMenu-fund-card-name);
    font-size: 14px;
}

@media (max-width: 1281px) {
    .side-menu-wallet-name {
        font-size: var(--fontSize16);
    }
}

.side-menu-wallet-bal-title {
    color: var(--sideMenu-fund-card-bal-title);
    font-size: 14px;
}

@media (max-width: 1281px) {
    .side-menu-wallet-bal-title {
        font-size: var(--fontSize16);
    }
}

.side-menu-wallet-bal-amount {
    color: var(--sideMenu-fund-card-bal-value);
    font-size: 20px;
}

@media (max-width: 1281px) {
    .side-menu-wallet-bal-amount {
        font-size: var(--fontSize30);
    }
}

.side-menu-wallet-withdraw-bal {
    color: var(--sideMenu-fund-card-withdraw-bal-value);
    font-size: 14px;
}

@media (max-width: 1281px) {
    .side-menu-wallet-withdraw-bal {
        font-size: var(--fontSize12);
    }
}

.side-menu-topup-btn {
    background: var(--side-menu-topup-bg);
    border: var(--side-menu-topup-border);
    box-shadow: var(--side-menu-topup-shadow);
    padding: 11px;
}

@media (max-width: 1281px) {
    .side-menu-topup-btn {
        padding: 0 15px;
    }
}

.side-menu-topup-btn-txt {
    color: var(--side-menu-topup-text);
    font-size: var(--fontSize16);
    height: auto;
}

@media (max-width: 1281px) {
    .side-menu-topup-btn-txt {
        font-size: var(--fontSize20);
        height: 28px;
    }
}

.side-menu-withdraw-btn {
    background: var(--side-menu-withdraw-bg);
    border: var(--side-menu-withdraw-border);
    box-shadow: var(--side-menu-withdraw-shadow);
    height: 52px;
    padding: 0 11px;
}

@media (max-width: 1281px) {
    .side-menu-withdraw-btn {
        padding: 0 15px;
    }
}

.side-menu-withdraw-btn-txt {
    color: var(--side-menu-withdraw-text);
    font-size: var(--fontSize16);
    height: auto;
}

@media (max-width: 1281px) {
    .side-menu-withdraw-btn-txt {
        font-size: var(--fontSize20);
        height: 28px;
    }
}

.side-menu-item-group {
    background: var(--side-menu-group-bg);
    border: var(--side-menu-group-border);
    border-radius: 10px;
    box-shadow: var(--side-menu-group-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 16px;
}

@media (max-width: 1281px) {
    .side-menu-item-group {
        padding: 0 50px;
    }
}

.side-menu-separator {
    background-color: var(--side-menu-separator);
    min-height: 1px;
    width: 100%;
}

.side-menu-wallet-action-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

@media screen and (max-width: 576px) {
     :root {
        --side-menu-width: 100%;
    }
}

@media print {
    .side-menu-dimmed-container {
        display: none;
    }
}

.nav-brand-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.nav-brand-icon {
    height: 38px;
    object-fit: contain;
}

.nav-brand-name {
    color: var(--navBrandLogo-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontHeight20);
}

.side-menu-item-container {
    background: var(--sideMenuItem-bg);
    border: var(--sideMenuItem-border);
    box-shadow: var(--sideMenuItem-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 17px 10px;
}

.side-menu-item-horizontal-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
}

.side-menu-item-left-section {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

@media (max-width: 1281px) {
    .side-menu-item-left-section {
        gap: 30px;
    }
}

.side-menu-item-icon {
    height: 18px;
    object-fit: contain;
    width: 18px;
}

@media (max-width: 1281px) {
    .side-menu-item-icon {
        height: 24px;
        width: 24px;
    }
}

.side-menu-item-title {
    color: var(--side-menu-item-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
}

.side-menu-verified-icon {
    height: 18px;
    object-fit: contain;
    width: 18px;
}

@media (max-width: 1281px) {
    .side-menu-verified-icon {
        height: 24px;
        width: 24px;
    }
}

.side-menu-go-icon {
    height: 18px;
    object-fit: contain;
    width: 12px;
}

.side-menu-expand-collapse-container {
    background: var(--sideMenuItem-bg);
    border: var(--sideMenuItem-border);
    border-radius: 10px;
    box-shadow: var(--sideMenuItem-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-menu-item-expand-collapse-section {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
}

.side-menu-item-expand-collapse-item-container {
    width: 100%;
}

.side-menu-expand-collapse-item-line {
    border-color: var(--side-menu-separator);
    border-top: 0.5px solid;
    border-top-color: var(--side-menu-separator);
}

.side-menu-expand-collapse-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 15px 18px;
}

.language-item-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.language-item-icon-container {
    border: var(--language-flag-light-border);
    border-radius: 50%;
    box-shadow: var(--language-flag-shadow);
    height: 18px;
    overflow: hidden;
    width: 18px;
}

@media (max-width: 1281px) {
    .language-item-icon-container {
        height: 24px;
        width: 24px;
    }
}

.language-item-icon {
    height: 18px;
    object-fit: contain;
    width: 18px;
}

@media (max-width: 1281px) {
    .language-item-icon {
        height: 24px;
        width: 24px;
    }
}

.language-item-btn {
    background: var(--language-btn-bg);
    border: var(--language-btn-border);
    border-radius: 10px;
    box-shadow: var(--language-btn-shadow);
    padding: 7px;
    width: 80px;
}

@media (max-width: 1281px) {
    .language-item-btn {
        padding: 11px;
        width: 92px;
    }
}

.language-item-btn-selected {
    background: var(--language-btn-bg-selected);
    border: var(--language-btn-bg-selected-border);
    box-shadow: var(--language-btn-bg-selected-shadow);
}

.language-item-btn-txt {
    color: var(--language-btn-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-weight: var(--fontWeight700);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.language-item-btn-txt-selected {
    color: var(--language-btn-txt-selected);
}

.side-menu-expand-collapse-component-subheader-row {
    align-items: center;
    display: flex;
    padding: 17px 10px;
}

.side-menu-expand-collapse-language-container {
    border: var(--language-flag-light-border);
    border-radius: 50%;
    box-shadow: var(--language-flag-shadow);
    height: 18px;
    overflow: hidden;
    width: 18px;
}

@media (max-width: 1281px) {
    .side-menu-expand-collapse-language-container {
        height: 24px;
        width: 24px;
    }
}

.side-menu-expand-collapse-language-icon {
    height: 18px;
    object-fit: contain;
    width: 18px;
}

@media (max-width: 1281px) {
    .side-menu-expand-collapse-language-icon {
        height: 24px;
        width: 24px;
    }
}

.side-menu-expand-collapse-component-subheader-title {
    color: var(--sideMenu-expand-collapse-title-txt);
    flex-grow: 1;
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    padding-left: 10px;
}

@media (max-width: 1281px) {
    .side-menu-expand-collapse-component-subheader-title {
        padding-left: 30px;
    }
}

.side-menu-expand-collapse-component-subheader-collapse-icon,
.side-menu-expand-collapse-component-subheader-expand-icon {
    height: 12px;
    width: 18px;
}

.language-modal-main-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 686px;
    position: relative;
    width: 100%;
}

.language-modal-container {
    background: var(--language-modal-bg);
    border: var(--language-modal-border);
    border-radius: 16px;
    box-shadow: var(--language-modal-shadow);
    display: flex;
    flex-direction: column;
    gap: 11px;
    justify-content: center;
    padding: 32px 50px;
    width: 100%;
}

.language-modal-title {
    color: var(--language-modal-title);
    font-family: var(--fontFamily);
    font-size: 24px;
    font-weight: 400;
    width: 100%;
}

.language-modal-line {
    background: var(--language-modal-line);
    height: 1px;
    width: 100%;
}

.language-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 18px;
}

.language-container {
    border: var(--language-flag-light-border);
    border-radius: 50%;
    box-shadow: var(--language-flag-light-shadow);
    height: 32px;
    overflow: hidden;
    width: 32px;
}

.language-icon {
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.fund-button-container {
    background: var(--fund-small-button-bg);
    border: var(--fund-small-button-border);
    border-radius: 6px;
    box-shadow: var(--language-flag-light-shadow);
    display: flex;
    overflow: hidden;
    padding: 5px;
}

.fund-icon {
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.headerFooter-background {
    background: var(--theme-bg);
}

.home-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.layout-main-container {
    bottom: 0;
    left: var(--side-menu-width);
    position: absolute;
    right: 0;
    top: 0;
    transition: left 0.5s ease-in-out;
}

@media (max-width: 1281px) {
    .layout-main-container {
        position: static;
        width: 100%;
    }
}

.dummy-sideMenu-space {
    min-width: var(--side-menu-width);
}

@media (max-width: 1281px) {
    .dummy-sideMenu-space {
        display: none;
    }
}

.game-top-logo-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-width: var(--side-menu-width);
    padding-left: 22px;
}

@media (max-width: 1281px) {
    .game-top-logo-container {
        display: none;
    }
}

.game-top-logo {
    height: 70px;
    max-width: 100%;
    object-fit: contain;
}

.game-top-logo-txt {
    color: var(--navBrandLogo-txt);
    font-family: var(--fontFamily);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.game-top-main-container {
    background: var(--game-top-bg);
    box-shadow: var(--game-top-shadow);
    display: flex;
    flex-direction: row;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: left 0.5s ease-in-out;
    z-index: 4;
}

.game-top {
    display: flex;
    flex-direction: column;
    padding: 24px 23px 10px 26px;
    width: 100%;
}

@media (max-width: 1281px) {
    .game-top {
        left: 0;
        padding: 0;
        right: 0;
    }
}

.game-top-1 {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 1281px) {
    .game-top-1 {
        padding: 24px 23px 8px 26px;
    }
}

.game-top-container {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    max-width: 1100px;
    width: 100%;
}

@media (max-width: 1281px) {
    .game-top-container {
        justify-content: space-between;
        max-width: 686px;
    }
}

.game-top-search-icon {
    height: 22px;
    width: 24px;
}

.game-top-search-textfield {
    align-items: center;
    background: var(--gameTop-search-bg);
    border: var(--gameTop-search-border);
    border-radius: 12px;
    box-shadow: var(--gameTop-search-shadow);
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 8px;
    padding: 10px 16px;
}

.game-top-search-input {
    background: transparent;
    border: none;
    color: var(--gameTop-search-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize12);
    font-weight: var(--fontWeight700);
    width: 100%;
}

.game-top-search-input:-ms-input-placeholder {
    color: var(--gameTop-search-placeholder);
}

.game-top-search-input::placeholder {
    color: var(--gameTop-search-placeholder);
}

.game-top-left-section-container {
    align-items: center;
    display: flex;
    display: none;
    gap: 16px;
}

@media (max-width: 1281px) {
    .game-top-left-section-container {
        display: flex;
    }
}

.game-brand-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.game-top-avatar-icon {
    height: 38px;
    object-fit: contain;
    width: 38px;
}

.game-top-brand-name {
    color: var(--main-txt);
    font-family: var(--fontFamily);
    font-size: var(--fontSize16);
    font-style: var(--fontStyleNormal);
    font-weight: var(--fontWeight700);
    line-height: var(--fontHeight20);
}

.game-top-right-section-container {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-shrink: 1;
    gap: 8px;
    overflow: hidden;
}

.game-top-menu-img {
    height: 22px;
    object-fit: contain;
    width: 26px;
}

.game-top-close-icon {
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.headerFooterLayout-topNav {
    max-width: 1100px;
    padding-top: 10px;
    width: 100%;
}

@media (max-width: 1281px) {
    .headerFooterLayout-topNav {
        display: none;
    }
}

.layout-page-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: var(--top-header-height) 0 var(--footer-height) 0;
    position: relative;
    width: 100%;
}

@media (max-width: 1281px) {
    .layout-page-content {
        align-items: normal;
    }
}

.iframe-layout-page-content {
    height: 100%;
    width: 100%;
}

.layout-page-content-1 {
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.headerFooterLayout-footer {
    display: none;
}

@media (max-width: 1281px) {
    .headerFooterLayout-footer {
        display: inline;
        display: initial;
    }
}

@media screen and (max-width: 415px) {
    .game-top-right-section-container {
        gap: 10px;
    }
}

@media print {
    .game-top {
        display: none;
    }
    .layout-page-content {
        padding: 0;
    }
    .layout-main-container {
        left: 0;
    }
}