.login-page,
.register-page {
    padding: 0px;
}

.login-page {
    display: flex;
    justify-content: space-between;
    max-width: 100vw;
    min-height: calc(100vh - 96px);
}

.login-page .image-container {
        width: 50vw;
        height: 100%;
    }

.login-page .image-container .login-img {
            width: 100%;
            height: calc(100vh - 96px);
            -o-object-fit: cover;
               object-fit: cover;
        }

.login-page .form-div {
        width: min(100%, 420px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
    }

.login-page .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
    }

.login-page .form-elements {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

.login-page .form-field-group {
        display: flex;
        align-items: center;
        gap: 16px;
    }

.login-page input[type="email"],
    .login-page input[type="password"],
    .login-page input[type="text"],
    .login-page button {
        width: 100%;
    }

.login-page .form-title,
    .login-page .reseteaza-text,
    .login-page .change-password-success-text {
        color: #101828;

        font-family: Inter, sans-serif;

        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 38px;
    }

.login-page .form-title {
        text-align: center;
    }

.login-page .input-label-text {
        color: var(--text-gray-500);
        font-family: Inter;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

.login-page .login-button,
    .login-page .reset-button,
    .login-page .reset-password-button {
        width: 100%;
        display: flex;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        align-self: stretch;
        border-radius: 8px;
        background: var(--blue-500);
        cursor: pointer;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    }

.login-page .login-forward-btn {
        -webkit-text-decoration: none;
        text-decoration: none;
        display: flex;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        align-self: stretch;
        border-radius: 8px;
        border: 1px solid #001c5e;
        background: #001c5e;
        cursor: pointer;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    }

.login-page .login-button-text,
    .login-page .reset-button-text,
    .login-page .reset-password-button-text,
    .login-page .login-forward-btn-text {
        color: #fff;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }

.login-page .login-button-text {
        font-weight: 400;
    }

.login-page .create-account-btn {
        margin-top: 16px;
    }

.login-page .field-input {
        display: flex;
        padding: 12px 14px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: 8px;
        border: 1px solid #d0d5dd;
        background: #fff;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    }

.login-page .field-div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        width: 100%;
    }

.login-page .eye-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

.login-page .password-input-container {
        position: relative;
        width: 100%;
    }

.login-page .toggle-password {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

.login-page .forgot-password-div {
        display: flex;
        align-items: center;
    }

.login-page .forgot-password-link {
        margin-left: auto;
        padding: 24px 0px 16px 0px;
    }

.login-page .forgot-password-link a {
            color: var(--blue-500);
            font-weight: 600;
            padding: 8px 12px;
        }

.login-page .signup-prompt {
        margin-top: 24px;
        margin-bottom: 56px;
        text-align: center;
    }

.login-page .signup-prompt .signup-link {
            color: var(--blue-500);
            font-weight: 600;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

.login-page .form-divider {
        position: relative;
        text-align: center;
        padding: 10px 0px;
    }

.login-page .form-divider::after {
            content: "";
            position: absolute;
            width: 100%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 1px;
            background-color: var(--border-gray-50);
        }

.login-page .form-divider span {
            position: relative;
            padding: 10px;
            background-color: var(--white);
            z-index: 10;
        }

.login-page .social-media-login-buttons-container {
        color: var(--white);
    }

.login-page .social-media-login-buttons-container .facebook-btn,
        .login-page .social-media-login-buttons-container .google-btn {
            color: inherit;
        }

.login-page .social-media-login-buttons-container .facebook-btn {
            margin: 8px 0px;
            background: #1f57b7;
        }

.login-page .social-media-login-buttons-container .google-btn {
            background: #e2483a;
        }


@media (max-width: 1056px) {


    .login-page {
        padding: 0px 24px;
    }

        .login-page .image-container,
        .login-page .form-divider,
        .login-page .facebook-btn span,
        .login-page .google-btn span {
            display: none;
        }

        .login-page .social-media-login-buttons-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            margin-top: 56px;
        }

            .login-page .social-media-login-buttons-container .facebook-btn {
                margin: 0px;
            }

            .login-page .social-media-login-buttons-container .facebook-btn,
            .login-page .social-media-login-buttons-container .google-btn {
                width: auto;
                height: auto;
                padding: 15px;
            }

                .login-page .social-media-login-buttons-container .facebook-btn img, .login-page .social-media-login-buttons-container .google-btn img {
                    width: 24px;
                    height: 24px;
                }
}

@media (max-width: 450px) {
    .login-page .social-media-login-buttons-container {
        margin-top: 35px;
    }

    .login-page .signup-prompt {
        margin-bottom: 0px;
    }
}