*
{
    box-sizing:border-box;
}
:root
{
    --primary: #4285f4;
    --primary-alt: #516D9E;
    --secondary: #0F171F;
    --tertiary: #323232;
}
html, body
{
    margin:0;
    padding:0;
    height:100%;
}
body
{
    line-height: 1.4;
    color: var(--primary-alt);
    font-size: 16px;
    font-family: proxima-nova, Sans-Serif;
    background:url(../images/login_bg.jpg) #11519a;
    background-size:cover;
    background-position:center center;
}

.text_red
{
    color:#e83e8c !important;
}

.login_error
{
    color:#e83e8c;
    text-align:center;
    display:block;
    margin:15px 0 0;
}

.login_form
{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}
.login_container
{
    width: 100%;
    max-width:750px;
}
.login_header
{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight: 800;
    font-size: 1.5em;
    margin:50px 0;
    padding:0;
    line-height:1;
}
.ov_logo
{
    display:block;
    margin-right:10px;
    width:150px;
}
.login_body
{
    background: #F7F9FA;
    border-radius: 8px;
    padding: 75px;
}
.school_title
{
    font-weight: bold;
    font-size: 1.375em;
    color: #1F407D;
    text-align: center;
    margin:0 0 60px;
    padding:0;
    line-height:1.2;
    display:block;
}

/* LOGIN FOOTER */
.login_footer
{
    text-align: center;
    padding:40px 30px;
}
.login_esv,
.login_ownership
{
    text-decoration:none;
    color:#fff;
    opacity: 0.7;
}
.login_ownership
{
    display:block;
}
.login_esv:hover
{
    text-decoration:underline;
}
/* END LOGIN FOOTER */

/* LOGIN TYPES */
.login_types
{
    margin:0 -10px 30px;
    display: flex;
    justify-content: space-between;
}
.login_type_button
{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    margin:0 10px;
    background: #D8E1ED;
    color: var(--primary-alt);
    padding: 35px 15px 15px;
    border-radius: 3px;
    transition: background 0.3s, box-shadow 0.3s, color 0.3s;
    cursor: pointer;
    user-select:none;
    -webkit-user-select:none;
}
.login_type_icon
{
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--primary-alt);
    color: #fff;
    font-size: 1.5em;
    margin:0 0 25px;
    transition: all 0.3s;
    display:flex;
    align-items:center;
    justify-content:center;
}
.login_type_text
{
    font-weight: bold;
    text-align:center;
    max-width:100%; /* IE Fix */
    line-height:1.2;
}
.parent_guardian .login_type_icon /* Parent/Guardian Icon gets less margin bottom */
{
    margin-bottom:15px;
}
.login_type_button[data-select="true"]
{
    border-radius: 4px;
    color: var(--primary);
    background: white;
    box-shadow: 0 0 73px #C3C9DB;
}
.login_type_button[data-select="true"] .login_type_icon
{
    background: var(--primary);
}
/* END LOGIN TYPES */

/* LOGIN CREDENTIALS */
.login_credentials
{
    margin:0;
}
.login_credential_group
{
    margin-bottom:20px;
}
.login_input
{
    display:flex;
    flex-direction:row;
    height:40px;
    align-items:center;
    width:100%;
    -webkit-appearance:none;
    -webkit-border-radius:0;
    border: 1px solid #BFD8F6;
    border-radius: 3px;
    padding:0 15px;
    line-height:1;
    font-weight: 600;
    font-size: 0.875em;
    color: #0E192E;
    background: #fff;
}
.login_input_label
{
    display:block;
    margin-top: 10px;
    line-height: 18px;
    color: var(--primary-alt);
    font-weight: bold;
    font-size: 0.875em;
}
/* END LOGIN CREDENTIALS */

/* ACCOUNT BUTTONS */
.login_options
{
    width:100%;
    display:flex;
    align-items:stretch;
    flex-direction:column;
    justify-content:flex-start;
    position:relative;
}
.login_checkbox
{
    user-select:none;
    -webkit-user-select:none;
}
.account_buttons
{
    margin:0 -10px;
    display: flex;
    flex-direction:row;
}
.account_button
{
    -webkit-appearance:none;
    cursor:pointer;
    -webkit-border-radius:0;
    border:0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    margin:0 10px;
    background: #D8E1ED;
    color: var(--primary-alt);
    font-weight: bold;
    height:40px;
    padding:0 15px;
    text-decoration: none;
    transition: all .2s ease;
    text-align: center;
    border-radius:3px;
    user-select:none;
    -webkit-user-select:none;
}
.account_button:hover
{
    background-color: var(--primary);
    text-decoration:none;
    color: #fff;
}
.login_button
{
    background-color: var(--primary);
    color: #fff;
}
.login_button:hover
{
    background:#165fb2;
}
/* END ACCOUNT BUTTONS */


@media(max-width:991.9px)
{
    .login_header
    {
        margin-bottom:30px;
        margin-top:30px;
    }
    .login_container
    {
        max-width:100%;
    }
    .login_body
    {
        border-radius:0;
    }
    .school_title
    {
        margin:0 0 40px;
    }
    .login_types
    {
        flex-wrap:wrap;
        margin-left:-7.5px;
        margin-right:-7.5px;
    }
    .login_type_button
    {
        flex:1 0 auto;
        width:calc(50% - 15px);
        flex-direction:row;
        padding:15px;
        margin:7.5px;
    }
    .login_type_icon,
    .parent_guardian .login_type_icon
    {
        margin:0 15px 0 0;
        width:50px;
        min-width:50px;
        height:50px;
        font-size:1em;
    }
    .login_type_text
    {
        flex:1;
        text-align:left;
    }
    .login_credentials
    {
        margin:0;
    }
    .login_credential_group
    {
        margin-bottom:-2px;
    }
    .login_input_label
    {
        display:none;
    }
    .login_credential_group:first-child .login_input
    {
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
    }
    .login_credential_group:last-child .login_input
    {
        border-radius:0;
    }
    .login_input
    {
        height:50px;
    }
    .login_options
    {
        flex-direction:column-reverse;
    }
    .login_checkbox
    {
        position:absolute;
        top:52px;
        right:0;
        margin:0;
        width:auto;
    }
    .account_buttons
    {
        flex-direction:column;
        margin:0;
    }
    .account_button
    {
        margin:5px 0;
        flex:none;
    }
    .login_button
    {
        margin:0;
        border-top-left-radius:0;
        border-top-right-radius:0;
    }
    .login_button + .account_button
    {
        margin-top:50px;
    }
}
@media (max-width:499.9px)
{
    .login_header
    {
        display:none;
    }
    .login_form
    {
        justify-content:flex-start;
    }
    .login_body
    {
        padding:45px 30px 30px;
    }
    .school_title
    {
        margin-bottom:30px;
        font-size:1.25em;
    }
    .login_types
    {
        flex-wrap:wrap;
        margin-left:-5px;
        margin-right:-5px;
    }
    .login_type_button
    {
        flex:1 0 auto;
        width:calc(50% - 10px);
        flex-direction:row;
        padding:10px 15px;
        margin:5px;
    }
    .login_type_icon,
    .parent_guardian .login_type_icon
    {
        margin: 0 10px 0 0;
        width:40px;
        min-width:40px;
        height:40px;
        font-size:.8em;
    }
    .login_footer
    {
        padding:30px;
        font-size:.875em;
    }
}
@media(max-width:320.99px) /* iPhone SE */
{
    .login_type_button
    {
        padding:10px;
    }
    .login_type_text
    {
        font-size:.875em;
    }
}

/* OTHER LOGIN PAGES */
.loginforms_outer
{
    padding:30px;
    border-radius:4px;
    background:#fff;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
@media (max-width:1199.9px)
{
    .loginforms_outer
    {
        max-width:100;
        border-radius:0;
    }
}
/* END OTHER LOGIN PAGES*/