﻿.login-body-wrapper, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#forgot-password-form-wrapper {
    position: absolute;
    width: 100%;
    background: url('/images/background/loading_color.jpg');
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.forgot-password-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.forgot-password-title {
    margin: 0;
    position: relative;
    color: #344d87;
    font-size: 30px;
    text-transform: uppercase;
    font-family: "RobotoSlab-Regular";
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.12em;
}

    .forgot-password-title::before {
        content: '';
        position: absolute;
        top: 13px;
        right: -120px;
        border-bottom: 2px solid white;
        width: 100px;
    }

    .forgot-password-title::after {
        content: '';
        position: absolute;
        top: 13px;
        left: -120px;
        border-bottom: 2px solid white;
        width: 100px;
    }

.forgot-password-title-rescrit {
    margin: 0;
    color: #344d87;
    font-size: 60px;
    text-transform: uppercase;
    font-family: "RobotoSlab-Regular";
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.12em;
}


.forgot-password-form {
    margin-top: 65px;
    width: 500px;
}

.forgot-password-email-wrapper {
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .forgot-password-email-wrapper label {
        position: absolute;
    }

.forgot-password-button-wrapper {
    margin-bottom: 15px;
    position: relative;
    display: flex;
    justify-content: center;
}

.forgot-password-button {
    color: #fff;
    background-color: #a4865e;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 15px;
    cursor: pointer;
    letter-spacing: 2px;
    font-family: "RobotoSlab-Regular";
}


    .forgot-password-button:hover {
        background: #282e3e;
        transition: .4s;
    }

.form-group {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

    .form-group span {
        color: red;
    }

/*///Modal*/

#forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-header {
    background-color: #344d87;
    display: flex;
    justify-content: center;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    font-family: "RobotoSlab-Regular";
    font-weight: 600;
    letter-spacing: 2.2px;
}

    #forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-header button {
        position: absolute;
        right: 20px;
    }

#forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-footer {
    display: flex;
    justify-content: center;
}

    #forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-footer button {
        font-size: 16px;
        font-family: "RobotoSlab-Regular";
        text-transform: uppercase;
        border-radius: 13px;
        font-weight: bold;
        letter-spacing: 1.5px;
    }

        #forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-footer button.ok {
            padding: 12px 22px;
            background: #a4865e;
            border: none;
        }

        #forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-footer button.cancel {
            padding: 10px 22px;
            border: 2px solid #a4865e;
            background: transparent;
            color: #a4865e;
        }

#forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-body {
    display: flex;
    justify-content: center;
}

    #forgot-password-form-wrapper #forgot-password-madal-window .modal-content .modal-body #forgot-password-error-label {
        color: red;
    }
