/* Brand colors defined here until this gets extracted to scss
 * $light-gray-500: #EAEAEA
 * $light-gray-600: #DCDCDC
 * $medium-gray-100: #B8B8B8
 * $dark-gray-900: #101010
 * $blue-500: #3361BB
 * $blue-700: #26498C
 * $red-500: #F24653
 */

* {
    box-sizing: border-box;
}


html {
    height: 100%;
}


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.6rem;
    background: #fff;
}

a { text-decoration: none; color: #1460aa; }
a:link {text-decoration: none; color: #1460aa; }
a:visited { color: #1460aa; }
a:hover {text-decoration: underline; color: #1460aa; }
a:focus-visible {
    outline: 2px solid #0497c4 !important;
    outline-offset: 1px;
    border-color: transparent;
    -moz-box-shadow:    0 0 2px 0 #0497c4;
    -webkit-box-shadow: 0 0 2px 0 #0497c4;
    box-shadow:         0 0 2px 0 #0497c4;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

h1 {
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 100%;
    margin-bottom: 0.8125rem;
    margin-top: 0.75rem;
    color: #3c3c3c;
}

input {
    font-family: inherit;
}

main {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

main>header {
    text-align: center;
    line-height: 100%;
    margin-bottom: 13px;
    width: 100%;
}
.login-container {
    width: 520px;
}
.login-form {
    width: 75%;
}
.login-container,
.login-form {
    display: flex;
    margin:0 auto 1rem auto;
    flex-direction: column;
    justify-content: center;
    padding: 1.875rem 0;
}

.login-form {
    border-bottom: 1px solid #DCDCDC;
}

.background-image-container {
    background-image: url("connect-background.jpg");
    background-size: cover;
    background-position: center;
    flex: 2 1 auto;
}

#j-homescreen-logo {
    height: 75px;
    display: block;
    padding-left: 1.375rem;
    margin: 0;
}

main form,
.message-container {
    width: 100%;
    padding: 0 1.375rem;
}

.form-heading {
    color: #B8B8B8;
    font-weight: bold;
    size: 1rem;
    margin-bottom: 0.8125rem;
    margin-top: 1.25rem;
}

.help-text {
    color: #101010;
    font-size: 0.75rem;
    margin-bottom: 1.375rem;
    line-height: 1.25rem;
}

.mini>#j-homescreen-header {
    margin-bottom: 1.25rem;
}

main form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 0.8125rem 0;
}

main form label {
    display: block;
    margin: 0 0 .35rem 0;
    font-size: 0.75rem;
    line-height: 100%;
    color: #767676;
}

fieldset>input {
    display: block;
    width: 100%;
    font-size: 1.125rem;
    padding: 0.5rem;
}

.form-help-links {
    font-size: 0.8125rem;
    text-align: center;
    line-height: 100%;
}

.form-help-links a {
    padding: 4px 2px;
}

.form-help-links:focus {
    outline: 1px solid #5E9ED6 !important;
    outline-offset: -1px;
    border-color: transparent;
    -moz-box-shadow:    0 0 2px 0 #5E9ED6;
    -webkit-box-shadow: 0 0 2px 0 #5E9ED6;
    box-shadow:         0 0 2px 0 #5E9ED6;
}

#j_forgot_token {
    font-size: 1.125rem;
}

.link-button {
    border: 0;
    background: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    text-align: center;
    margin: 0 auto 0 1rem;
    color: #3361BB;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
    flex-grow: 2;
}

.cancel-link {
    flex-grow: unset;
    padding: 0 2px;
}

.link-back-button{
    border: 0;
    background: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    text-align: center;
    margin: 0;
    color: #3361BB;
    cursor: pointer;
    padding-left: 0;
}

.link-button:hover,
.link-back-button:hover {
    text-decoration: underline;
}


.error-text,
.j-login-error {
    color: #F24653;
    margin-bottom: 0.8125rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    width: 100%;
}

.mini>.j-login-error {
    padding-left: 1.375rem;
}

.forgot-password .j-login-error {
    margin-bottom: 1.0625rem;
}

.j-login-btn-ct{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    align-content: center;
}

.j-back-to-login-btn-ct{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    align-content: center;
}

.j-login-btn{
    padding: 4px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
    background: #3361bb;
    color: #ffffff;
    width: 33%;
    margin-bottom: 1rem;
    margin-left: 0;
    border: thin solid #3361bb;
    border-radius: 2px;
    cursor: pointer;
    height: 40px;
    line-height: 20px;
    min-width: 72px;
}

.j-login-btn:hover, .j-login-btn:active {
    background: #26498c;
    border-color: #26498c;
}

.j-login-btn:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.85)!important;
}

.j-login-btn:disabled {
    cursor: not-allowed!important;
    background: #5c81c9;
    border-color: #5c81c9;
    color: #9db3de;
}

.j-login-btn:focus-visible {
    outline-offset: -2px;
    border-color: transparent;
    outline: 2px solid #0497c4 !important;
    -moz-box-shadow: inset 0 0 0 3px #fff, 0 0 2px 0 #0497c4;
    -webkit-box-shadow: inset 0 0 0 3px #fff, 0 0 2px 0 #0497c4;
    box-shadow: inset 0 0 0 3px #fff, 0 0 2px 0 #0497c4;
}

.j-login-sso-btn {
    width: 100% !important;
}

.j-login-site-info {
font-size: 0.6875rem;
text-align: center;
color: #101010;
}

.j-login-site-info p {
margin: 0;
line-height: 1rem;
}

.j-homescreen-alert {
background:#fafaf5;
border:solid 1px #CCC;
padding:10px 20px;
margin:1rem auto;
width: 75%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
position:relative;
left:-10px;
max-height: 7rem;
overflow-y: scroll;
overflow-wrap: break-word;
}
.j-homescreen-alert p span{color:#F93;margin:0;font-size:1.2em}
.j-homescreen-alert p{margin:0;font-size:9pt;color:#767676;line-height:1.5em}
.j-homescreen-alert .close {position:absolute;top:5px;right:5px;}

.j-auth-mode-notification{margin:1em 20px; text-align: right; color: #999; display: none;}

/* Sticky Footer */

#j-sticky-footer {
    background:#EAEAEA;
    color:#101010;
    text-align:center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.6875rem;
}

.minilogin {
    margin-top: 1rem;
}

.minilogin .j-login-btn {
    margin-bottom: 0;
}


@media only screen
and (min-device-width: 320px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {

    body {
        margin: 1rem 0.25rem;

    }

    main {
        box-shadow: none;
        width: 90%;
        max-width: 450px;
    }

    input[type="text"],
    input[type="password"],
    #j_forgot_token {
        border: 1px solid #a7a7a7;
    }

    #j_forgot_token {
        font-size: 0.9375rem;
    }


    h1 {
        line-height: 120%;
        font-size: 1.5rem;
    }


    #j-homescreen-logo {
        height: 75px;
    }

    #j-sticky-footer,
    .j-login-site-info {
        display: none;
    }
}

.panel-or-sso-login {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    color: #ababab;
    margin-top: 24px;
    margin-bottom: 24px;
}

.unfocused-btn {
    background: #eeeeee;
    border-color: #bbbbbb;
    color: #1b1b1b;
}

.unfocused-btn:hover {
    background: #aaaaaa;
    border-color: #bbbbbb;
}