.section--login {
    padding-top: 40px;
}
/*.modal-body #loginForm input{*/
/*    padding: 16px 30px;*/
/*}*/

.section--login-form {
    display: flex;
    padding-top: 50px;
}

.section--login h3 {
    text-align: center;
    display: flex;
    align-items: center;
    padding-bottom: 50px;
}

.input-wrapper input {
    font-size: 14px;
    max-width: 600px;
    padding: 15px 30px;
}

.login--form,
.form--right {
    flex: 1;
}

.forget-password-form label {
    margin-bottom: 8px;
}

.form--right {
    border-left: 1px solid var(--color-black);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 26px;
}


.login--title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    text-align: center;

}

.form-des {
    padding-left: 65px;
    font-size: 15px;
    line-height: 28px;
    text-align: center;
}

.section--login-form h3 {
    display: none;
}

.form--right h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
}

.left-content,
.right-content {
    display: flex;
    /* Display the content inside flex containers */
    flex-direction: column;
    /* Stack the content vertically */
    align-items: center;
    /* Center the content horizontally */
}


.center-label {
    text-wrap: nowrap;
    font-size: 34px ;
    font-family: var(--font-primary);
    font-weight: 700 !important;
}

.login--form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 26px;
    /* padding-top: 50px; */
    padding-bottom: 150px;
    /* border-right: 1px solid var(--color-tertiary); */

}

#loginForm .input-wrapper {
    max-width: 412px;
}

#loginForm input[type="checkbox"] {
    width: 22px;
    height: 22px;
}

.save-pwd {
    font-weight: 15px;
    color: var(--color-font);
}

.button--login {
    text-transform: uppercase;
    width: 412px;
    font-size: 13px;
    font-weight: 600;
}

.login--auth {
    display: flex;
    justify-content: flex-start;
    gap: 55px;

}

.login--checkbox {
    display: flex;
    gap: 15px;
}

.login--auth label {
    color: var(--color-black);
    font-size: 15px;
}

.login--auth a {
    color: var(--color-black);
    font-size: 15px;
}

.reset-pwd {
    max-width: 412px;
}

.forget-password-form {
    padding-right: 70px;
    margin: 0 auto;

}

.title-mobile {
    display: none;
}

.singup-button {
    padding-left: 65px;
}

.form--flex {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1024px) {
    .form--flex{
        margin: auto;
        max-width: 900px;
    }
}

.col-6-1023px {
    grid-column: span 6;
}

@media screen and (max-width: 1000px) {
    .form--flex {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section--login h3,.center-label {
        display: none;
        padding-bottom: 30px;
    }

    .singup-button {
        padding: 0;
    }

    .form-des {
        padding: 0;
    }

    .form--right {
        max-width: 413px;
        margin: 0 auto;
        border-left: unset;
        padding-left: 0;
        align-items: flex-start;
    }

    .title-mobile {
        display: block;
    }
    .form-des {
        text-align: left;
    }
    .login--form{
        padding-bottom: 0px;
    }

}

@media screen and (max-width: 900px) {
    .section--login {
        padding: 40px 30px 30px;
    }

    .section--login-form {
        display: flex;
        flex-direction: column;
        gap: 65px;
    }

    .section--login-form h3 {
        display: block;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-black);

    }

    .login--title .left-content,
    .login--title .right-content {
        display: none;
    }

    .forget-password-form {
        padding-right: 0;
        margin: 0 auto;
        padding-top: 35px;
    }

    .login--form {
        border-right: unset;
        padding: 0px 0 65px 0;
        align-items: center;
    }

    .form-des {
        text-align: left;
        padding-left: 0;

    }

    .singup-button {
        padding-left: 0;
    }

}

@media screen and (max-width: 600px) {
    #loginForm .input-wrapper {
        max-width: 324px;
    }

    .login--form {

        align-items: unset;
    }

    .button--login {
        max-width: 324px;
        max-height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login--auth {
        gap: 10px;
    }

    .login--checkbox {}

    .login--auth label {
        font-size: 14px;
        text-wrap: nowrap;
    }

    .login--auth a {
        font-size: 14px;
        text-wrap: nowrap;
    }
    .login--checkbox{
        gap: 5px;
    }
    .form--right {
        max-width: 324px;
    }
}