/* START MAX-height */
/*      720 px      */
@media screen and (max-height: 860px) {
    .header--fixed_white {
        height: 83px;
    }
    .header-brand {
        height: 72px;
    }
    .page-groove {
        margin-top: 95px;
        height: 600px;
    }
    .content-box {
        height: 600px;
    }
    .form-container {
        height: 590px;
        width: 380px;
        padding-top: 10px;
    }
    .login-forms-container, .okta-login-forms-container {
        height: 595px;
    }
    .form-section {
        width: 340px;
    }
    .form-section.register-section {
        height: 580px;
        width: 355px;
        overflow-y: scroll;
        padding-right: 15px;
    }
    #register-form-heading {
        margin-top: 5px;
    }
    .vertical-banner {
        width: 560px;
    }
    .container-right {
        width: 380px;
    }
    #login-greeting {
        margin-top: 10px;
        margin-bottom: 5px;
        line-height: 1;
    }
    .login-welcome-sub {
        font-size: 14px;
        line-height: 1.4 !important;
        padding-right: 10px;
    }
    .container--image-space-filler {
        height: 270px;
    }
}
/*    END  QUERY    */


/* START MAX-width */
/*      970px      */
@media (max-width: 970px) {
    .container--image-space-filler {
        display: none;
    }
    .vertical-banner {
        width: 310px;
    }
    .content-box {
        width: 690px;
    }
}
/*    END query    */




/* START MIN-width */
/*      675px      */
@media (min-width: 701px) {
    .footer--login-mobile {
        display: none;
    }
}
/*    END query    */




/* START MAX-width */
/*      700px      */
@media (max-width: 700px) {
    html {
        height: 100%;
    }

    .header-brand {
        margin: 0 auto;
    }

    .page-container{
        position: relative;
    }

    .vertical-banner {
        display: none;
    }

    .page-groove.groove-edges {
        position: relative;
        transform: translate(0%, 0%);
        left: 0;
        top: 0;
        height: initial;
    }

    .content-box {
        height: inherit;
        width: 100%;
        background-color: #F2F2F2;
    }
        .container-right {
            width: inherit;
            background-color: #F2F2F2;
        }

    .brand-bar {
        background-color: #8C7A9F;
        text-align: center;
    }
    .login-brand {
        float: none;
    }

    .login-forms-container, .okta-login-forms-container {
        height: initial;
        width: 300px;
        background-color: #FFFFFF;
        box-shadow: 0px 4px 6px hsla(0,0%,29%,0.2);
        margin: 0 auto;
        padding-top: 10px;
        margin-top: 10px;
    }
        .login-prompt {
            display: none;
            margin-top: 0px;
        }
        .instructions-container {
            padding: 0px 10px;
        }

    .form-container {
        width: 100%;
        height: 290px;
        padding: 0px 10px;
        overflow: visible;
    }
        .form-section {
            width: 280px;
            height: 325px;
        }
        .form-style {
            width: 280px;
        }
    .login-heading {
        margin-top: 0px;
        margin-bottom: 5px;
    }
    #register-prompt {
        display: none;
    }

    .footer--login-mobile {
        position: relative;
        width: 100%;
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
    }
        .mobile-footer--legal-notice {
            display: block;
            font-style: italic;
            text-decoration: underline;
        }
        .mobile-footer-copy {
            margin-bottom: 0;
        }
        
    #btn-login,
    #btn-lostPassword {
        float: right;
    }
    
    #legal-notice-mobile {
        color: hsla(0, 0%, 0%, 0.3);
        font-style: italic;
        font-size: 10px;
        text-align: justify;
        padding: 0 10px;
        width: 300px;
        margin: 0 auto;
        margin-bottom: 5px;
    }
        #full-legal-terms-mobile {
            color: #49176D;
            text-decoration: underline;
            font-size: 10px;
        }

    form#register {
        height: 0px;
        display: none;
    }
    .login-forms-container {
        height: 365px;
    }
    .okta-login-forms-container {
        height: 465px;
    }
}
/*    END query    */

@media screen and
(max-height: 860px) and
(max-width: 970px) {
    .container-right {
        width: 320px;
    }
    .form-container {
        padding-left: 10px;
    }
}

@media screen and
(max-height: 860px) and
(max-width: 700px) {
    .content-box {
        width: 320px;
    }
    .page-groove {
        margin-top: 5px;
    }
    .header-brand {
        height: 90px;
    }
    .header--fixed_white {
        height: 100px;
    }
    .login-forms-container, .okta-login-forms-container {
        height: 500px;
    }
}