html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    padding-top: 15px;
    font-weight: 300;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    /* Vertically center the text there */
}

a:focus-visible {
    outline: 1px dotted #b00122;
}

#auth-box {
    max-width: 500px;
    border-radius: 1.0rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: 7px solid #b00122;
    border-bottom: 7px solid #b00122;
}

    #auth-box .logo {
        max-width: 220px;
        height: auto;
    }

    #auth-box .title::after {
        content: "";
        position: absolute;
        display: block;
        width: 70%;
        height: 4px;
        background-color: #b00122;
        bottom: -8px;
        left: 15%;
        border: none;
        border-radius: 2px;
    }

    #auth-box .subtitle svg {
        margin: -3px 3px 0 0;
        color: #b00122;
    }

    #auth-box input[type=text],
    #auth-box input[type=password] {
        height: 50px;
    }

.line-heading {
    overflow: hidden;
    text-align: center;
}

    .line-heading::before, .line-heading::after {
        background-color: rgba(0, 0, 0, 0.2);
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 50%;
    }

    .line-heading::before {
        right: 0.5em;
        margin-left: -50%;
    }

    .line-heading::after {
        left: 0.5em;
        margin-right: -50%;
    }

a.external-provider::before {
    display: inline-block;
    content: "";
    background-repeat: no-repeat;
    background-size: 1.9rem 1.9rem;
    background-position: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 2rem;
    border-radius: 2rem;
    border: 1px solid transparent;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

a.external-provider:hover::before {
    border: 1px solid #d88091;
    box-shadow: 0 0 0 0.25rem rgba(176, 1, 34, 0.25);
}

a.external-provider.facebook::before {
    background-image: url("../images/facebook.svg");
}

a.external-provider.google::before {
    background-image: url("../images/google.svg");
}

a.external-provider.microsoft::before {
    background-image: url("../images/microsoft.svg");
}
a.external-provider.admin::before {
    background-image: url("../images/tront-logo.png");
}

.field-validation-error {
    display: inline-block;
    margin: 10px 5px 0 5px;
    font-size: 0.9rem;
}

    .field-validation-error::before {
        display: inline-block;
        content: '\276F';
        margin-right: 5px;
    }

.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    text-align: center;
    font-weight: 700;
}

    .validation-summary-errors ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        .validation-summary-errors ul li {
            margin: 0 5px 5px 5px;
            font-size: 1.0rem;
        }

            .validation-summary-errors ul li::before {
                display: inline-block;
                content: '\2715';
                font-size: 0.7rem;
                vertical-align: middle;
                margin-right: 8px;
            }

#error-page svg {
    margin: -3px 3px 0 0;
    color: #b00122;
}

#welcome-page svg {
    margin-right: 3px;
    color: #b00122;
}

#lockout-page .countdown {
    font-size: 3.0rem;
}

    #lockout-page .countdown span {
        display: inline-block;
        width: 60px;
    }

        #lockout-page .countdown span:first-child {
            text-align: right;
            margin-right: 3px;
        }

        #lockout-page .countdown span:last-child {
            text-align: left;
            margin-left: 3px;
        }

#forgot-password-confirmation-page .masked-email {
    letter-spacing: 0.3rem;
}

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

.password-rules svg {
    margin-right: 3px;
    color: #b00122;
}

.password-rules .rule, .password-rules .rule * {
    transition: color .15s ease-in-out;
}

    .password-rules .rule strong {
        color: #b00122;
    }

    .password-rules .rule svg ~ svg {
        display: none;
    }

.rule2.complies {
    color: #ced4da;
}
.rule2.complies svg {
    display: inline-block;
    color: #198754;
}
.rule2 svg ~ svg {
    display: none;
}

    .password-rules .rule.complies, .password-rules .rule.complies strong {
        color: #ced4da;
    }

        .password-rules .rule.complies svg {
            display: none;
            color: #198754;
        }

            .password-rules .rule.complies svg ~ svg {
                display: inline-block;
            }

#associate-login-page .provider, #associate-login-confirmation-page .provider {
    font-size: 1.2rem;
}

    #associate-login-page .provider img, #associate-login-confirmation-page .provider img {
        width: 1.6rem;
        height: 1.6rem;
        margin: -4px 10px 0 0;
    }

        #associate-login-page .provider img.facebook, #associate-login-confirmation-page .provider img.facebook {
            margin: -6px 5px 0 0;
        }

        #associate-login-page .provider img.google, #associate-login-confirmation-page .provider img.google {
            margin: -4px 8px 0 0;
        }

#associate-login-page .user-display-name {
    font-size: 1.2rem;
}

    #associate-login-page .user-display-name svg {
        margin: -3px 5px 0 0;
        color: #b00122;
    }

#associate-login-page .attention svg {
    margin: -3px 3px 0 0;
    color: #b00122;
}

#diagnostics-page .category {
    color: #b00122;
}

    #diagnostics-page .category svg {
        margin-right: 3px;
    }

        #diagnostics-page .category svg.claims {
            margin-top: -5px;
        }

        #diagnostics-page .category svg.properties {
            margin-top: -2px;
        }

    #diagnostics-page .category strong {
        font-weight: 700;
    }

#diagnostics-page dl:last-child {
    margin-bottom: 0;
}

#diagnostics-page dl dt {
    font-weight: 400;
}

#diagnostics-page dl dd:last-child {
    margin-bottom: 0;
}