body {
    background-color: #E7EEF6;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    margin: 0;
    font-family: Open Sans,Roboto,sans-serif;
}

.navbar {
    display: none;
    background-color: #f0f0f1;
    border: none;
}

.navbar-header {
    position: relative;
    top: -4px;
    background-color: #f0f0f1;
}

.navbar-brand > .icon-banner {
    position: relative;
    top: 2px;
    left: 10px;
    display: inline;
    height: 24px;
}

.alert-container {
    width: 100%;
    max-width: 1260px;
    background-color: #f4d6d6;
    border-radius: 4px;
    margin: 0 0 20px 0;
}

.alert-text {
    color: #ED5F59;
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
}

.success-container {
    height: 43px;
    border: 1px solid #39CC85;
    border-radius: 3px;
    position: absolute;
    top: 30px;
    right: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon {
    width: 16px;
    height: 15px;
    background-image: url('../send.svg');
    background-size: contain;
    background-position: center center;
    margin: 0 8px;
}

.success-text {
    color: #39CC85;
    font-size: 11px;
    font-weight: 700;
}

.error-container {
    height: 43px;
    border: 1px solid #ED5F59;
    border-radius: 3px;
    position: absolute;
    top: 30px;
    right: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.error-icon {
    width: 15px;
    height: 15px;
    background-image: url('../error.svg');
    background-size: contain;
    background-position: center center;
    margin: 0 8px;
}

.error-text {
    color: #ED5F59;
    font-size: 11px;
    font-weight: 700;
}

    .error-text ul {
        padding: 0;
    }

    .error-text li {
        list-style: none;
    }

.page {
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    color: #4f9ce8;
    font-size: 25pt;
    font-weight: 600;
    text-align: center;
}

.logo {
    width: 193px;
    height: 40px;
}

.leader-text {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    margin: 40px 0;
    color: #01224F;
}

.page form {
    width: 100%;
}

fieldset {
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    margin: 0;
}

.form-input-container {
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    position: relative;
    background-color: #FFF;
    height: 32px;
    border-radius: 4px;
    font-size: 12px;
    user-select: none;
}

.notched-outline__container {
    pointer-events: none;
    position: absolute;
    display: flex;
    width: 100%;
}

.notched-outline__leading,
.notched-outline__notch,
.notched-outline__trailing {
    border: 1px solid #E0E0E0;
    height: 31px;
    pointer-events: none;
    cursor: text;
}

.notched-outline__leading {
    border-right: none;
    width: 12px;
    border-radius: 4px 0 0 4px;
}

.notched-outline__notch {
    border-left: none;
    border-right: none;
    padding: 0 4px;
    width: auto;
    display: flex;
    align-items: center;
}

.notched-outline__trailing {
    border-left: none;
    flex: 1 0 auto;
    border-radius: 0 4px 4px 0;
}

.floating-label {
    color: #536175;
    font-weight: 600;
    transition: .2s ease-out;
    pointer-events: none;
    user-select: none;
}

.form-input {
    width: 100%;
    height: 30px;
    margin: 0;
    border-radius: 4px;
    border: none;
    outline: none;
    padding: 2px 0 0 20px;
    font-weight: 600;
    color: #536175;
    transition: 0.1s ease-out;
}

    .form-input:hover:not(:focus):not(.form-input-disabled) + .notched-outline__container > .notched-outline {
        border-color: #536175;
    }

    .form-input:focus + .notched-outline__container > .notched-outline {
        border-color: #4596EC;
    }

    .form-input:-webkit-autofill + .notched-outline__container .notched-outline__notch,
    .form-input:not(:placeholder-shown) + .notched-outline__container .notched-outline__notch,
    .form-input:focus + .notched-outline__container .notched-outline__notch {
        border-top: 1px solid transparent !important;
        padding: 0 4px 17px 4px;
        margin: -17px 0 0 0;
        font-size: 10px;
    }

.input-validation-error + .notched-outline__container .notched-outline {
    border-color: #ED5F59 !important;
}

.login-button {
    order: 2
}

.password-reset-button {
    order: 1
}

.third-party-login-message {
    font-size: 0.67rem;
    width: 260px;
    margin-top: -15px;
    text-align: center;
    margin-bottom: 15px;
}

.third-party-login-button {
    order: 4
}

input::-ms-clear,
input::-ms-reveal {
    display: none;
}

.validation-error-text {
    width: 100%;
    margin: 2px 0 0 0;
    color: #ED5F59;
    font-size: 11px;
    text-align: center;
    white-space: pre-line;
}

    .validation-error-text li {
        list-style: none;
    }

.password-container {
    position: relative;
    display: flex;
}

    .password-container .form-input {
        padding: 2px 30px 0 20px;
    }

.password-icon {
    position: absolute;
    width: 15px;
    height: 11px;
    background-image: url('../eye.svg');
    background-size: contain;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    outline: none;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.password-icon-crossed {
    background-image: url('../eye-crossed.svg');
}

.remember-input {
    margin: 0 0 20px 0;
    cursor: pointer;
}

    .remember-input label {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .remember-input span {
        margin: 0 5px;
        font-weight: 500;
        color: #888A8E;
        font-size: 11px;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

input:focus, textarea:focus, select:focus {
    outline: none;
}

.form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 20px 0;
    cursor: pointer;
}

a, a:hover, a:active, a:focus {
    text-decoration: none;
}

.button-blue {
    background-color: #1B5BFF; 
}

.button-blue:hover {
    background-color: #5383FF;
 }

.button-green {
    background-color: #3bad42;
}

.button-green:hover {
    background-color: #5AC462;
}

.form-button:disabled {
    background-color: #BDBDBD;
    cursor: default;
}

.link-button {
    width: 100%;
    height: 20px;
    background-color: transparent;
    border: none;
    outline: none;
    color: #1B5BFF;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

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

.forgot-password-button {
    margin: 0 0 30px 0
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F2F5F9;
    border-radius: 8px;
    min-height: 645px;
    max-width: 648px;
    width: 100vw;
}

.icon {
    position: relative;
    top: -10px;
}

.logged-out iframe {
    display: none;
    width: 0;
    height: 0;
}

.page-consent .client-logo {
    float: left;
}

    .page-consent .client-logo img {
        width: 80px;
        height: 80px;
    }

.page-consent .consent-buttons {
    margin-top: 25px;
}

.page-consent .consent-form .consent-scopecheck {
    display: inline-block;
    margin-right: 5px;
}

.page-consent .consent-form .consent-description {
    margin-left: 25px;
}

    .page-consent .consent-form .consent-description label {
        font-weight: normal;
    }

.page-consent .consent-form .consent-remember {
    padding-left: 16px;
}

.grants .page-header {
    margin-bottom: 10px;
}

.grants .grant {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid lightgray;
}

    .grants .grant img {
        width: 100px;
        height: 100px;
    }

    .grants .grant .clientname {
        font-size: 140%;
        font-weight: bold;
    }

    .grants .grant .granttype {
        font-size: 120%;
        font-weight: bold;
    }

    .grants .grant .created {
        font-size: 120%;
        font-weight: bold;
    }

    .grants .grant .expires {
        font-size: 120%;
        font-weight: bold;
    }

    .grants .grant li {
        list-style-type: none;
        display: inline;
    }

        .grants .grant li:after {
            content: ', ';
        }

        .grants .grant li:last-child:after {
            content: '';
        }

.btn-primary {
    background-color: #4F9CE8;
    border-color: #4F9CE8;
    text-transform: uppercase;
}

.btn-default {
    text-transform: uppercase;
}

.field-icon {
    float: right;
    margin-left: -25px;
    margin-right: 5px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
}

.panel {
    box-shadow: 1px 3px 5px 3px rgba(200, 200, 200, 0.5) !important;
    -webkit-box-shadow: 1px 3px 5px 3px rgba(200, 200, 200, 0.5) !important;
}

.panel-heading {
    background-color: white !important;
    border-color: white !important;
}

.hidden {
    display: none;
}

.browser-not-supported {
    color: #ED5F59;
    text-align: center;
    max-width: 250px;
}

.password-rule {
    position: relative;
    color: #01224F;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    margin: 0 0 8px 16px;
}

    .password-rule:before {
        content: '';
        background-image: url('../check.svg');
        width: 14px;
        height: 14px;
        position: absolute;
        left: -18px;
        top: 3px;
    }

.password-rule-complete:before {
    background-image: url('../check-green.svg');
}

.submit-button {
    margin-top: 28px
}

.policies {
    font-size: 12px;
    line-height: 20px;
    padding-top: 4px;
    color: #01224F;
    display: inline-block;
    text-align: center;
}

    .policies a {
        color: #4596EC;
    }

.password-reset-image {
    background-image: url('../passwordResetImg.svg');
    background-repeat: no-repeat;
    width: 183px;
    height: 183px;
    padding: 0 0 24px 0;
}

.error-header {
    font-size: 2em;
    color: #1e4070;
}

.account-cancelled-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.account-cancelled-image {
    margin: 32px auto 16px auto;
}

.account-cancelled-title {
    font-size: 14px;
    font-weight: 600;
    color: #515459;
    text-align: center;
}

.account-cancelled-text {
    font-size: 12px;
    color: #515459;
    text-align: center;
    max-width: 288px;
    margin: 0
}