body {
    line-height: 1 !important;
}

a {
    cursor: pointer;
    text-decoration: underline;
}

#TopBar, #BulletPoints, #TextBox1, #TextBox2, .marketing-link, .login-title, #form1, #BackgroundImage, #Footer {
    display: none;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.text-danger {
    color: red;
}

.field-validation-valid {
    visibility: hidden;
}

.field-validation-error {
    visibility: visible;
}

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

#BackgroundImg--mobile {
    height: auto !important;
    width: 100vw !important;
}

.titles {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title__top {
    margin: 0;
    font-size: 36px;
}

.title__sub {
    margin: 0;
    margin-top: 4rem;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
}

.title__extra {
    margin: 5px 0 0 0;
    font-family: Arial, sans-serif;
    font-weight: normal;
    opacity: 0.9;
    font-size: 14px;
}

#form--mobile {
    margin-top: 6rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.change-username--mobile {
    margin-bottom: 1.5rem;
    margin-top: 5px;
}

#LoginBox {
    position: absolute;
}

#Footer--mobile {
    position: absolute;
    bottom: 1rem;
    left: 0;
    display: none;
}

.terms-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
}

.copyright__before {
    display: none;
}

#OuterWrapperDiv {
    width: 100vw;
}

#mobile-form {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn {
    height: 50px;
    width: 100%;
}

.form-control {
    margin-bottom: 1rem;
    height: 40px;
}

.sign-in-buttons-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 14rem;
}

.div__reset-password_guest-login {
    display: flex;
    align-items: center;
}

#mobile-form {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn {
    height: 40px;
}

.sign-in-buttons-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
}

.div__reset-password_guest-login {
    display: flex;
    align-items: center;
}

.new-window {
    color: [OutsideForeColor]
}

/* Display Footer in devices that fit */
@media (min-height: 668px) {
    #Footer--mobile {
        display: unset;
    }
}

/* Styles for non-mobile devices */
@media (min-width: 431px) {
    /* basic */
    html {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        font-family: Calibri, "Myriad Pro", "Gill Sans MT", arial, verdana, helvetica, sans-serif;
        color: #ffffff;
        background-color: #ffffff;
        position: relative;
        z-index: 0;
        font-size: 12px;
        background-image: url();
        background-position: 50% 0%;
        background-repeat: repeat-x;
        line-height: unset !important;
    }

    a,
    a:link,
    a:active,
    a:visited,
    a:hover {
        color: #ffffff;
    }

    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;
    }

    /* Sections*/
    .titles, #form--mobile, #BackgroundImg--mobile, .username--mobile, #Footer--mobile {
        display: none;
    }

    #TopBar, #BulletPoints, #TextBox1, #TextBox2, .login-title, #ctl00_Login1, #form1, #BackgroundImage, #Footer {
        display: block;
    }

    .marketing-link {
        display: inline;
    }

    #TopBar, #Footer--mobile, #Footer {
        color: #3f3f3f;
    }

    #TopBar a,
    #Footer a,
    #TopBar a:link,
    #Footer a:link,
    #TopBar a:active,
    #Footer a:active,
    #TopBar a:visited,
    #Footer a:visited,
    #TopBar a:hover,
    #Footer a:hover {
        color: #3f3f3f;
    }

    /* sections */
    #OuterWrapperTable {
        height: 100%;
        width: 100%;
        table-layout: fixed;
    }

    #BackgroundImage {
        width: 901px;
        height: 568px;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    #LoginBox {
        color: #000000;
        position: absolute;
        left: 583px;
        top: 321px;
        width: 310px;
        z-index: 999;
    }

    #LoginBox a,
    #LoginBox a,
    #LoginBox a:link,
    #BiometricBox a:link,
    #LoginBox a:visited,
    #BiometricBox a:visited,
    #LoginBox a:active,
    #BiometricBox a:active,
    #LoginBox a:hover,
    #BiometricBox a:hover {
        color: #000000;
    }

    #LoginBox h2 {
        padding: 0px;
        margin: 0px;
    }

    #LoginBox button.login-button {
        font-family: Calibri, "Myriad Pro", "Gill Sans MT", arial, verdana, helvetica, sans-serif;
        font-size: 16px;
        color: #024a1e;
        text-decoration: none;
    }

    .login-button {
        display: inline-block;
        height: 30px;
        width: 100px;
        text-align: center;
        line-height: 30px;
        background: none;
        background-image: url(/account/login-templates/9558d00b-80cd-497d-9d33-d8b34b7b2d8a/LoginButton.png);
        border: none;
        padding: 0 !important;
        cursor: pointer;
    }

    #LoginBoxInner {
    }

    #LoginBoxInner .TextInputBox {
        width: 95%;
        color: black;
    }

    #LoginBoxInner .Label {
        font-size: 16px;
    }

    #BiometricHelpLinkDiv {
        text-align: center;
    }

    #BulletPoints {
        position: absolute;
        left: 622px;
        top: 136px;
        z-index: 2;
    }

    #BulletPoints * {
        font-size: 16px;
    }

    #BulletPoints ul {
        margin: 0px;
        padding-left: 20px;
    }

    #TextBox1 {
        position: absolute;
        left: 687px;
        top: 534px;
        z-index: 2;
    }

    #TextBox1 * {
        font-size: 16px;
    }

    #TextBox2 {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 2;
    }

    #TextBox2 * {
        font-size: 16px;
    }

    /* nine-patch panel (login box) */
    .nP {
        width: 100%;
    }

    .nP-t1,
    .nP-b1,
    .nP-t2,
    .nP-b2,
    .nP-t3,
    .nP-b3 {
        background-image: url('/account/login-templates/shared/loginNP-clear-sprite.png');
    }

    .nP-t1,
    .nP-b1 {
        background-position: 0% 0%;
        background-repeat: no-repeat;
        padding-left: 20px;
        height: 10px;
        overflow: hidden;
    }

    .nP-t2,
    .nP-b2 {
        background-position: 100% -40px;
        padding-right: 20px;
        background-repeat: no-repeat;
        height: 10px;
        overflow: hidden;
    }

    .nP-t3,
    .nP-b3 {
        background-position: 0% -20px;
        background-repeat: repeat-x;
        height: 10px;
        overflow: hidden;
    }

    .nP-b1 {
        background-position: 0% -70px;
    }

    .nP-b2 {
        background-position: 100% -110px;
    }

    .nP-b3 {
        background-position: 0% -90px;
    }

    .nP-c1 {
        padding-left: 20px;
        background-image: url('/account/login-templates/shared/loginNP-clear-left.png');
        background-repeat: repeat-y;
    }

    .nP-c2 {
        padding-right: 20px;
        background-image: url('/account/login-templates/shared/loginNP-clear-right.png');
        background-repeat: repeat-y;
        background-position: 100% 0%;
    }

    .nP-c3 {
        background-image: url('/account/login-templates/shared/loginNP-clear-bg.png');
    }

    /* clearfix */
    .Div:after,
    .div:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .Div,
    .div {
        display: inline-block;
    }

    /* clearfix: hides from IE-mac \*/
    * html .Div,
    * html .div {
        height: 1%;
    }

    .Div,
    .div {
        display: block;
    }

    /* Guest Login Link */
    #GuestLoginLink {
        background-color: #451d1d;
        padding: 4px 15px 4px 15px;
        border-radius: 4px;
        float: right;
    }

        #GuestLoginLink a:link,
        #GuestLoginLink a:visited,
        #GuestLoginLink a:hover,
        #GuestLoginLink a:active {
            color: White;
        }

}