section.login-register {
    padding: 2vw;
    width: 100%;
    height: 100vh;
    gap: 2vw;
    background-image: url("/assets/img/login-page-bg.jpg") !important;
    background-size: cover;
    position: relative;
    z-index: 2;
    color: var(--light-font);
}

.login-box-container {
    padding: 5.5vw 1vw 1vw 1vw;
    width: 34vw;
    height: 26vw;
    border-radius: 0.5vw;
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.45);
    background-color: rgba(24, 24, 24, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    justify-content: start!important;
    align-items: start!important;
    font-weight: normal;
}

.login-box-container .btn {
    background-color: var(--orange);
    border-radius: 0.5vw;
}

.login-box-container .btn:hover {
    color: var(--dark-font) !important;
}

.login-box-container h2 {
    font-size: 1.1vw;
    padding: 1vw;
    font-weight: 500;
}

.login-box-container h5 {
    font-size: 1vw;
    padding: 1vw;
    font-weight: normal;
}

.login-box-container h2 i {
    transform: scale(1.75);
    margin-left: 0.7vw;
    color: var(--orange);
}

.login-box-container p {
    padding: 0 1vw;
    font-size: 0.8vw;
    font-weight: normal;
    color: var(--light-font) !important;
}

.login-box-container p a {
    color: var(--orange);
}

.login-box-container .digits {
    font-family: "Vazir Medium FD", sans-serif;
}

.login-box-container form {
    padding: 2vw 1vw;
    position: relative;
    width: 100%;
    justify-content: start!important;
    align-items: end!important;
    gap: 1vw;
}

.login-box-container form .input-group {
    align-items: start!important;
    width: 75%;
    gap: 1vw;
}

.login-box-container form .input-group label {
    font-size: 0.9vw;
}

.login-box-container form .input-group input {
    width: 100%;
    height: 3.1vw;
    border-radius: 0.65vw;
}

.login-box-container form .input-group i {
    position: absolute;
    left: 91%;
    bottom: 0.85vw;
    font-size: 1.4vw;
}

.login-box-container form button[type='submit'] {
    width: 25%;
    height: 3.1vw;
    border-radius: 0.65vw;
    font-size: 1vw;
}

a#logo-2 {
    width: 10vw;
    position: relative;
}

a#logo-2 img {
    width: 100%;
}

a.return.btn {
    padding: 0.4vw 0.7vw;
    position: absolute;
    top: 1vw;
    left: 1vw;
    border: 1px solid silver;
    border-radius: 0.5vw;
    gap: 0.5vw;
    font-size: 0.9vw;
    font-weight: normal!important;
    background: none;
}

a.return.btn:hover {
    color: var(--orange) !important;
    border-color: var(--orange);
}

section.login-register .loader {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    animation: animate-preloader-login 0.8s linear forwards !important;
    visibility: visible;
    display: block;
}

section.login-register .loader .d-table-cell {
    width: 100%;
}

@keyframes animate-preloader-login {
    0%{display: block; visibility: visible}
    100%{display: none; visibility: hidden}
}

.register-message {
    width: 100%;
    padding: 1vw 1vw 3vw 1vw;
    gap: 1vw;
    font-size: 0.95vw;
    border-bottom: 1px solid rgba(192, 192, 192, 0.6);
    justify-content: space-between;!important;
}

span#eye-icon {
    position: absolute;
    left: 1vw;
    bottom: 0;
    z-index: 0;
    cursor: pointer;
    color: var(--dark-font);
}

span#eye-icon:hover {
    color: #a62700;
}

a.ask-forget-pass {
    position: absolute;
    bottom: -1.5vw;
    right: 0.5vw;
    color: var(--light-font) !important;
    font-size: 0.8vw;
    opacity: 0.75;
    transition: all 0.2s;
}

a.ask-forget-pass:hover {
    color: var(--orange) !important;
    opacity: 1;
}

a.login-with-sms {
    margin-top: 1vw;
    padding: 1vw 0;
    width: 100%;
    border-top: 1px solid rgba(192, 192, 192, 0.5);
    color: var(--light-font) !important;
    justify-content: start!important;
}

a.login-with-sms h2 {
    font-weight: normal!important;
    font-size: 1vw;
    gap: 0.3vw;
}


    /*otp*/

.login-box-container.otp-page {
    padding-top: 4vw;
    height: 30vw;
}

form.otp-form {
    padding: 1vw!important;
    justify-content: start!important;
    align-items: center!important;
    gap: 2vw;
}

form.otp-form .btn:disabled {
    color: var(--light-font) !important;
}

.numbers-input-group {
    margin-top: 1vw;
    width: 90%;
    gap: 2vw;
    direction: ltr;
}

.numbers-input-group input {
    text-align: center;
    width: 4vw;
    height: 3vw;
    outline: none;
    border: none;
    border-radius: 0.5vw;
    background: #717579;
    font-size: 1.8vw;
}

.numbers-input-group input:hover {
    background: var(--lighter-blue-font);
}

.numbers-input-group input:focus {
    background: #d0c3c3;
    box-shadow: 0 0 0.5vw var(--orange);
}

.waiting-msg-container {
    width: 100%;
    position: relative;
    gap: 1vw;
}

.waiting-msg {
    /*width: 50%;*/
    text-align: center;
    font-weight: normal;
    font-size: 0.8vw;
    direction: rtl;
    gap: 0.5vw;
}

.waiting-msg-container .btn {
    padding: 0 0.5vw!important;
    height: 2vw;
    /*background: none;*/
}

.waiting-msg div {
    direction: ltr;
}

form.otp-form button[type='submit'] {
    margin-top: 1vw;
    width: 40%;
}

form.forget-password,
form.replace-password {
    justify-content: center!important;
    align-items: center!important;
    gap: 2vw;
}

form.forget-password .input-group,
form.replace-password .input-group {
    width: 80%;
}

/*form.forget-password .input-group input {*/
/*    width: 100%;*/
/*}*/

form.forget-password button[type='submit'],
form.replace-password button[type='submit'] {
    width: 60%;
}

@media screen and (max-width: 450px) {
    section.login-register {
        gap: 12vw;
        justify-content: start!important;
        padding-top: 21vw;
    }

    a#logo-2 {
        width: 40vw;
    }

    .login-box-container {
        padding: 20vw 1vw 1vw 1vw;
        width: 90vw;
        height: 100vw;
        border-radius: 7px;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
        background-color: rgba(24, 24, 24, 0.5);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .login-box-container .btn {
        border-radius: 6px;
        font-size: 3vw;
    }

    a.return.btn {
        padding: 1.6vw 3vw;
        top: 4vw;
        left: 4vw;
        border-radius: 6px;
        gap: 1.5vw;
        font-size: 3.3vw;
    }

    .register-message {
        flex-direction: column!important;
        width: 100%;
        padding: 1vw 3vw 7vw 3vw;
        gap: 5vw;
        font-size: 3.4vw;
        justify-content: space-between;!important;
    }

    .register-message .btn {
        padding: 2vw;
        width: 100%;
        height: 10vw;
        font-size: 3.4vw;
    }

    .login-box-container h2 {
        width: 100%;
        text-align: center;
        font-size: 3.8vw;
        padding: 3vw 4vw;
        font-weight: 500;
    }

    .login-box-container h5 {
        font-size: 3.6vw;
        padding: 3vw 4vw;
    }

    .login-box-container h2 i {
        transform: scale(1.75);
        margin-left: 2.7vw;
        color: var(--orange);
    }

    .login-box-container p {
        padding: 0 3vw;
        font-size: 3.2vw;
        font-weight: normal;
    }

    .login-box-container p a {
        color: var(--orange);
    }

    .login-box-container form {
        padding: 6vw 3vw;
        justify-content: center!important;
        align-items: center!important;
        gap: 3vw;
        flex-direction: column!important;
    }

    section.login-register form {
        gap: 7vw;
    }

    .login-box-container form .input-group {
        align-items: start!important;
        width: 100%;
        gap: 1vw;
    }

    .login-box-container form .input-group label {
        font-size: 3.2vw;
        margin-right: 1vw;
    }

    .login-box-container form .input-group input {
        padding: 2vw 11vw 2vw 2vw;
        height: 11vw;
        border-radius: 6px;
        font-size: 3.7vw;
    }

    .login-box-container form .input-group i {
        left: 90.5%;
        bottom: 2.5vw;
        font-size: 5.5vw;
    }

    .login-box-container form button[type='submit'] {
        padding: 2vw;
        width: 100%;
        height: 10vw;
        border-radius: 6px;
        font-size: 3.8vw;
    }

    span#eye-icon {
        left: 3vw;
    }

    a.ask-forget-pass {
        bottom: -5vw;
        right: 1vw;
        font-size: 2.8vw;
    }

    a.login-with-sms {
        margin-top: 1vw;
        padding: 1vw 0;
        width: 100%;
        border-top: 1px solid rgba(192, 192, 192, 0.5);
        color: var(--light-font) !important;
        justify-content: start!important;
    }

    a.login-with-sms h2 {
        padding: 5vw;
        font-weight: normal!important;
        font-size: 3.5vw;
        gap: 1.3vw;
    }

    a.login-with-sms h2 i {
        transform: scale(2);
    }


        /*otp*/

    .login-box-container.otp-page {
        padding-top: 15vw;
        height: 110vw;
    }

    form.otp-form {
        padding: 2vw!important;
        justify-content: start!important;
        align-items: center!important;
        gap: 10vw!important;
    }

    .numbers-input-group {
        margin-top: 4vw;
        width: 90%;
        gap: 3vw;
    }

    .numbers-input-group input {
        width: 14vw;
        height: 11vw;
        border-radius: 6px;
        font-size: 5.8vw;
    }

    .numbers-input-group input:focus {
        box-shadow: 0 0 7px var(--orange);
    }

    .waiting-msg-container {
        width: 100%;
        gap: 4vw;
    }

    .waiting-msg {
        /*width: 50%;*/
        font-size: 3.3vw;
        gap: 1vw;
    }

    .waiting-msg-container .btn {
        padding: 0 2.5vw!important;
        height: 7vw;
        font-size: 3.5vw;
    }

    form.otp-form button[type='submit'] {
        margin-top: 2vw;
        width: 40%;
        border-radius: 6px;
    }

    form.forget-password,
    form.replace-password {
        justify-content: center!important;
        align-items: center!important;
        gap: 2vw;
    }

    section.login-register .loader {
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        animation: animate-preloader-login 0.8s linear forwards !important;
        visibility: visible;
        display: block;
    }

    section.login-register .loader .d-table-cell {
        width: 100%;
    }

    @keyframes animate-preloader-login {
        0%{display: block; visibility: visible}
        100%{display: none; visibility: hidden}
    }
}