/*=================== Auth=========*/
.auth main {
    display: block;
    background-color: hsl(var(--base));
    display: block;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding:20px 0;
    background: -webkit-linear-gradient(to bottom, hsl(var(--base)), #79c3ff);
    background: linear-gradient(to bottom, hsl(var(--base)), #79c3ff);
}
.mfc-header {
    position: relative;
    margin-bottom:30px
}
.mfc-header .logo {
    text-align: center;
}
.mfc-header .logo img {
    border-radius: 0;
    max-width: 130px;
    filter: brightness(0) invert(1);
}
.account-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
   z-index: 9;
   min-height: calc(100vh - 40px);
}

.captcha {
    background-color: hsl(var(--dark-4));
    border-radius: 10px;
    overflow:hidden;
    border:1px solid hsl(var(--light) / .35);
    height: 74px;
}
.captcha .g-recaptcha {
    height: 74px;
    width: 300px;
    margin:0 auto;
    overflow: hidden;
}
.captcha .g-recaptcha > div {
    margin-top:-1px;
    margin-left:-1px
}
.captcha #g-recaptcha-error{
    font-size:.75rem;
    background-color:hsl(var(--white));
}

.account-circle {
    left: -40px;
    position: absolute;
    max-width: 300px;
    z-index: 0;
    top: -40px;
}
.account-content {
    max-width: 400px;
    background-color: hsl(var(--dark-3));
    padding:30px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    z-index: 9;
}
.account-content.-md {
    max-width: 100%;
    width: 440px;
}
@media screen and (max-width:767px) {
    .account-content {
        width: 100%;
        max-width: 100%;
    }
}
.account-header {
    display: flex;
    align-items: center;
    margin-bottom:30px;
    position: relative;
}
.account-header h1{
    line-height: 1;
    font-size: 1rem;
    flex-grow: 1;
    margin-bottom:0;
    margin-right:1rem
}
.account-header img {
    border-radius: 0;
    width: 100%;
    max-width: 60px;
}
.account-link {
    font-size:.825rem;
    font-weight: 600;
    color:hsl(var(--white))
}
.account-link svg {
    width: 22px;
    height: 22px;
    transform: rotate(180deg);
    fill:hsl(var(--white)/.8)
}
.account-link:hover svg {
    fill:hsl(var(--gold-5))
}
.account-form {
    position: relative;
}
.account-form__content {
    position: relative;
    margin-bottom:1.5rem
}
.account-form__title {
    font-size :1.75rem;
    font-weight:700;
    letter-spacing: -.05rem;
    color:hsl(var(--base-d-100))
}
.account-form__desc {
    font-size:.875rem;
    line-height: 1.5;
}
.account-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.have-account__text > *,
.form-check-label > * {
    font-size:.825rem
}

@media (min-width: 1199px) {
    .account-thumb {
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 47%;
    }

    .account-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
/*=================== OTP=========*/
.td-otp-input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:.5rem;
    margin: 1.75rem 0 1.25rem;
}
.td-otp-input input {
    text-align: center;
    padding: .5rem .725rem;
    border: 1px solid transparent;
    background-color: hsl(var(--base)/.1);
    border-radius: .5rem;
    outline: none;
    height: 50px;
    width: 50px;
    font-size: 26px;
    font-weight: 600;
    outline: none;
    box-shadow: none
}
.td-otp-input input.is-invalid, .was-validated .td-otp-input input:invalid {
    border-color: #dc3545;
}

.td-otp-input input:focus {
    background-color: hsl(var(--white));
    border-color: hsl(var(--base));
}

.td-otp-input input:focus::placeholder,
.td-otp-input input::placeholder,
.td-otp-input input::-webkit-placeholder {
    color: transparent
}

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

.td-otp-input input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield
}

/* .td-otp-input input:not(:first-child) {
    margin-left: .5rem
} */

.td-counter {
    font-size: .825rem;
    color: #596882;
    margin-top: 1rem;
    text-align: center
}

.td-counter span {
    color: var(--td-theme-color);
    font-weight: 500
}