/* LOGIN PAGE CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
    --page-header-bgColor: #79a763;
    --page-header-bgColor-hover: #526c2f;
    --page-header-txtColor: #dde9f8;
    --page-header-headingColor: #2D3F25;
    --page-header-width: 220px;
    --page-content-bgColor: #f0f1f6;
    --page-content-txtColor: #171616;
    --page-content-blockColor: #fff;
    --white: #fff;
    --black: #333;
    --hovgreen: #d1e0bc;
    --red: #ec1848;
    --border-radius: 4px;
    --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
    --switch-bgLightModeColor: #87cefa;
    --switch-sunColor: gold;
    --switch-moonColor: #f4f4f4;
    --switch-bgDarkModeColor: #1f1f27;
  }

#loginForm {
    background-color: var(--page-header-bgColor);
    padding: 30px 30px 30px 30px;
    border-radius: 15px;
    width: 50%;
    box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loginForm > input {
    display: block;
    font-size: 16px;
    background: white;
    width: 100%;
    border-bottom: 1px solid #474847;
    margin: 15px;
    padding: 10px 10px;
}

#loginForm > button {
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    width: 80px;
    border: 0;
    padding: 10px 0;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    background-color: #79a763;
}

#loginForm > button#resetPasswordBtn {
    cursor: pointer;
    color: #474847;
    text-transform: capitalize;
    font-size: 14px;
    width: auto;
    border: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    background-color: white;
}

button#newPasswordBtn.newpasswordbtn {
    width: auto;
    padding: 10px;
    margin-bottom: 25px;
    background-color: #79a763;
}

#loginNotify {
    color: white;
    display: none;
    border: 0;
    margin: 15px -10px;
    padding: 10px 10px;
}

.logoLogin {
    width: 5em; 
    height: 5em; 
    margin: 1em;
}

.logoPasswordReset {
width: 5em; 
height: 5em; 
}

@media screen and (max-width: 400px) {
    .loginForm {
        margin-left: 20%;
    }

    .logoLogin {
        margin-left: 20%;
    }
}

#forgotPasswordForm {
    background-color: var(--page-header-bgColor);
    padding: 30px 30px 30px 30px;
    border-radius: 15px;
    width: 40%;
    box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#forgotPasswordForm > input {
    display: block;
    font-size: 16px;
    background: white;
    width: 100%;
    border-bottom: 1px solid #474847;
    margin: 15px -10px;
    padding: 10px 10px;
}

#forgotPasswordForm > button {
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    width: 80px;
    border: 0;
    padding: 10px 0;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    background-color: rgba(244, 91, 105, 1);
}

#resetPasswordForm {
    background-color: white;
    padding: 30px 30px 30px 30px;
    border-radius: 15px;
    width: 40%;
    box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#resetPasswordForm > input {
    border-radius: 5px;
    font-size: 16px;
    background: white;
    border-bottom: 1px solid #474847;
    margin: 10px 0px 10px 0px;
    padding: 10px;
}

#resetPasswordForm > button#resetPasswordBtn {
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    width: 80px;
    border: 0;
    padding: 10px 0;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    background-color: rgba(244, 91, 105, 1);
}

@media screen and (max-width: 458px) {
    #loginForm {
        width: 75%;
    }

    #forgotPasswordForm {
        width: 75%;
    }

    #resetPasswordForm {
        margin: 30px;
        overflow-y: scroll;
        width: 85%;
    }

    #resetPasswordFormButtons{
        flex-direction: column;
    }

    #resetPasswordBtn {
        margin: 10px;
    }
}