/*
 *
 * Open Blend sign in page CSS
 *
*/
html, body, .container {
    height: 100%;
}

.login-container {
    margin-top: 40px;
    width: 100%;
}

/* Hide the login notices */
.login-notices {
    display: none;
}

/* Loading spinner */
.loading-container {
    position: relative;
    margin: 100px auto 300px;
    width: 75px;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 75px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Maintenance banner */
.login-container .site-maintenance-banner {
    background-color: white;
    color: black;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 20px;
    margin-top: 25px;
}

.login-container .site-maintenance-banner svg {
    height: 35px;
    width: 70px;
    margin-top: -6px;
}

/* Anchors */
.login-container a:focus,
.login-container a:active,
.login-container a:link,
.login-container a:visited {
    color: #00abf2 !important;
}

/* OKTA CONFIGURATION */
/* Set the background colour */
#okta-sign-in.auth-container.main-container {
    background-color: #f5f6fa;
    border-width: 0;
    box-shadow: none;
}

/* Padding above the main collection of login/username/sign in elements */
#okta-sign-in .auth-content {
    padding-top: 40px !important;
}

/* Error message text */
.okta-form-infobox-error.infobox.infobox-error {
    color: #777;
}

/* OKTA error message border */
.okta-form-infobox-error.infobox.infobox-error {
    border: 0 !important;
}

/* OKTA error message radius */
#okta-sign-in .infobox,
#okta-sign-in .infobox-compact:before,
#okta-sign-in .infobox-md:before,
#okta-sign-in .infobox:before {
    border-radius: 2px !important;
}

/* Fixes for the image positioning */
.okta-sign-in-header.auth-header {
    padding-left: 40px !important;
    border-bottom: 0 !important;
}

.okta-sign-in-header.auth-header img {
    max-width: 315px !important;
    max-height: 86px !important;
}

/* Mobile >= iPhone 6/7/8/X */
@media only screen and (max-width: 376px) {
    .okta-sign-in-header.auth-header img {
        width: 265px !important;
        height: 52px !important;
    }
}

/* Mobile >= iPhone 5/SE */
@media only screen and (max-width: 321px) {
    .okta-sign-in-header.auth-header img {
        width: 225px !important;
        height: 44px !important;
    }
}

/* Remove OKTA sign in header text */
h2.okta-form-title.o-form-head {
    display: none !important;
}

/* Set the font for the sign-in widgets elements */
#okta-sign-in,
#okta-sign-in .o-form-head,
#okta-sign-in .o-form label,
#okta-sign-in .o-form a,
#okta-sign-in .o-form .button {
    font-size: 14px !important;
    color: #212121 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Border radius of buttons and inputs */
.login-container input,
.login-container select,
.login-container button,
#okta-sign-in .o-form .input-fix {
    border-radius: 2px !important;
}

/* Inputs */
#okta-sign-in .o-form-fieldset {
    margin-bottom: 8px !important;
}

#okta-sign-in .o-form input {
    color: #777 !important;
    font-size: 14px !important;
}

/* Placeholder text */
#okta-sign-in input::placeholder {
    color: #777 !important;
    font-size: 14px !important;
}

/* Set background colour for inputs */
#okta-sign-in .o-form .o-form-input .o-form-control {
    background-color: #fff;
}

/* Labels */
#okta-sign-in .custom-checkbox label,
#okta-sign-in .custom-radio label {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

#okta-sign-in .custom-checkbox label,
#okta-sign-in .custom-radio label {
     background-position: -16px -20px !important;
}

#okta-sign-in .custom-checkbox label.checked,
#okta-sign-in .custom-radio label.checked {
    background-position: -16px -220px !important;
}

/* Remove padding between sign in and remember me */
.o-form-content.o-form-theme.clearfix {
    padding-bottom: 0 !important;
}

/* Spacing above sign in */
.o-form-button-bar {
    margin-top: 24px !important;
}

/* CTA */
#okta-sign-in .o-form-button-bar .button,
a.button.button-primary.button-wide.email-button.link-button,
a.button.button-primary.button-wide.link-button {
    color: #fff !important;
    background-color: #00abf2 !important;
    border-color: #00abf2 !important;
    height: 38px !important;
}

/* Reset password CTA */
a.button.button-primary.button-wide.email-button.link-button,
a.button.button-primary.button-wide.link-button {
    border-radius: 2px !important;
    line-height: 40px !important;
}

/* Anchors */
#okta-sign-in a:focus,
#okta-sign-in a:active,
#okta-sign-in a:link,
#okta-sign-in a:visited {
    text-decoration: none !important;
    font-size: 14px !important;
}

#okta-sign-in a:hover {
    text-decoration: underline !important;
    font-size: 14px !important;
}

/* OKTA reset email link */
a.button.button-primary.button-wide.email-button.link-button {
    margin-bottom: 25px !important;
}

/* Hide the OKTA help link */
a.link.js-help-link {
    display: none !important;
}

/* Hide the OKTA help toggle */
a.link.js-help {
    display: none !important;
}

/* Show the OKTA help links */
.help-links.js-help-links {
    display: block !important;
}

div#password-confirm-form {
    position: relative;
    display: inline-block;
}

div#forgotten-password-form {
    position: relative;
    display: inline-block;
}

.slider {
    opacity: 0;
    transition: all .75s ease;
}

.slider.show {
    display: block;
    opacity: 1;
}

/* Messaging */
.experience-messaging {
    height: auto;
    width: 406px;
}

.experience-messaging .alert-messages {
    margin-top: 20px;
}