/* ------------------------------------- MAIN COMPONENTS */
#loginBody {
    /* Width of the right-hand white band that holds the login / password forms */
    --login-panel-width: 500px;
    background-color: white;
    background-image: url(../images/bottom-background.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Body has Bootstrap .align-items-center; as a flex parent that shrinks children to content width (breaks full-width nav) */
    align-items: stretch !important;
}
/* Login-family pages drop the 3px blue rule main.css puts under the navbar (its
   blue-tinted box-shadow stays). Scoped on #loginBody rather than .core-navbar alone:
   login.jsp loads main.css *before* login.css, but loginMfaTotp / loginForgetPassword /
   loginExpiredPassword load it *after*, so a bare .core-navbar rule loses there on
   source order. The id keeps the reset off the authenticated portal pages. */
#loginBody .core-navbar {
    border-bottom: 0 solid transparent;
    background-color: white;
}

.navbar-nav{
    margin-right:15px;
}

/* Language dropdown: outline (regular) globe in black (theme.js inserts .login-nav-lang-icon) */
#navbarDropdownMenuLink > .login-nav-lang-icon {
    color: #000 !important;
    /* ~33% tighter than former mr-2 (0.5rem) gap to the language text */
    margin-right: calc(0.5rem * 2 / 3);
}

/* Hide Font Awesome sign-in glyph on primary login (JSP unchanged; SSO rows keep their icons) */
#loginForm_button .far.fa-sign-in,
#loginForm_button .fa-sign-in {
    display: none !important;
}

#loginBoxContainer #loginForm_button{
    margin-top:25px;
}

/* Sign-in button spans the full width of its row (parent is .d-flex.justify-content-end;
   flex-grow fills the row, and the label is centered over .text-right from the JSP).
   When the switch-domain Cancel button is present it keeps its natural width and
   sign-in takes the remaining space. */
#loginForm_button {
    flex: 1 1 auto;
    width: 100%;
    text-align: center !important;
}

/* Sign-in card heading ("Sign in" + "Using your Customer credentials").
   Markup lives in the theme's per-language loginbottomcontent.jsp; theme.js moves it
   to the top of the card body and reveals it. The stock .card-header (label.authenticate)
   is suppressed so the heading is not duplicated. */
#loginBox div h5 {
    display:inline;
}
#loginBody form[name="Login"] #loginBox .card-header {

}

#loginHeading.login-heading {
    margin-bottom: 1.5rem;
}

#loginHeading .login-heading-title {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}

#loginHeading .login-heading-subtitle {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
}

/* Username and password stack full-width instead of sharing a 2-column row.
   Scoped to .user-password-login-body (unique to login.jsp) so Bootstrap's
   .row / .col-md-6 keep their normal behaviour everywhere else. */
#loginBody .user-password-login-body > .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

#loginBody .user-password-login-body > .row > [class*="col-"] {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#forgetPasswordMain .passwordFormConfirmTitle {
    padding: 0 20px 20px 0px;
}

/* Login page: main column to the far right (overrides Bootstrap justify-content-center / align-items-center) */
#loginBody form[name="Login"] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

#loginBody form[name="Login"].justify-content-center {
    justify-content: flex-start;
}

/* Full-height white band on the right; the sign-in block is centered in it */
#loginBody form[name="Login"] > .container {
    box-sizing: border-box;
    background-color: #fff;
    width: var(--login-panel-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    padding: 2rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* "safe" keeps the top of the form reachable when the viewport is shorter than the form */
    justify-content: safe center;
}

/* The label.authenticate override is "<title><div>subtitle</div>"; the <div> renders as
   the second line of the card header, in a smaller regular weight than the title. */
#loginBody form[name="Login"] #loginBox .card-header > div {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
}

/* label.sso ("Using your Amadeus employee credentials") and label.authWith
   ("Authenticate with...") are descriptive lines, not headings: drop the h5.card-header
   sizing on both so they match the sign-in subtitle. */
#loginBody form[name="Login"] #ssoBox .card > .card-header {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Trailing <br/> in login.jsp would offset the vertical centering */
#loginBody form[name="Login"] > .container > br {
    display: none;
}

/* Single full-width column inside the band (theme.js already strips #loginBox col-* classes) */
#loginBody form[name="Login"] > .container > .row:not(.logo) {
    display: block !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#loginBody form[name="Login"] #loginBox,
#loginBody form[name="Login"] #ssoBox {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* The band itself is the white surface: cards inside it stay flat */
#loginBody form[name="Login"] #loginBox .card,
#loginBody form[name="Login"] #ssoBox .card {
    border: none;
    background-color: transparent;
    box-shadow: none !important;
}

#loginBody form[name="Login"] #loginBox .card-header,
#loginBody form[name="Login"] #loginBox .card-body,
#loginBody form[name="Login"] #ssoBox .card-header,
#loginBody form[name="Login"] #ssoBox .list-group-item {
    background-color: transparent;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}

/* SSO domain rows ("Login to <domain>") render as outline buttons matching the primary
   sign-in button's metrics, not as inline links. The SSO card is the one WITHOUT
   .sso-login-body, so the federated "Authenticate with..." rows keep their own style. */
#loginBody form[name="Login"] #ssoBox .card:not(:has(> .sso-login-body)) .list-group-item > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    border: 1px solid #0c66e1;
    border-radius: 0.25rem;
    color: #0c66e1;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

#loginBody form[name="Login"] #ssoBox .card:not(:has(> .sso-login-body)) .list-group-item > a:hover,
#loginBody form[name="Login"] #ssoBox .card:not(:has(> .sso-login-body)) .list-group-item > a:focus {
    background-color: #f5f9ff;
    border-color: #0a58c4;
    color: #0a58c4;
    text-decoration: none;
    outline: none;
}

#loginBody form[name="Login"] #ssoBox .card:not(:has(> .sso-login-body)) .list-group-item > a:focus {
    box-shadow: 0 0 0 0.2rem rgba(12, 102, 225, 0.35);
}

/* The stock sign-in glyph is dropped, like on the primary sign-in button */
#loginBody form[name="Login"] #ssoBox .card:not(:has(> .sso-login-body)) .list-group-item > a .fa-sign-in {
    display: none !important;
}

/* "Or" separator between the customer credentials form and the Amadeus SSO block
   (markup lives in message/<lang>/loginbottomcontent.jsp, theme.js moves it before #ssoBox) */
#loginBody form[name="Login"] .login-or-separator {
    display: flex;
    align-items: center;
    margin: 0.75rem 0 1rem;
}

#loginBody form[name="Login"] .login-or-separator::before,
#loginBody form[name="Login"] .login-or-separator::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: #d4d4d4;
}

#loginBody form[name="Login"] .login-or-separator-text {
    flex: 0 0 auto;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1;
    color: #1a1a1a;
}

/* Login errors sit above the form, inside the band */
#loginBody > .error-block {
    box-sizing: border-box;
    width: var(--login-panel-width);
    max-width: 100%;
    margin-top: 0;
    margin-left: auto;
    margin-right: 0;
    /* core.css .error-block uses margin-top, which would leave a gap in the white band */
    padding: 1.5rem 2rem 0;
    background-color: #fff;
}

#loginBody > .error-block > .row.justify-content-md-center {
    justify-content: flex-start !important;
    margin-left: 0;
    margin-right: 0;
}

#loginBody > .error-block [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#loginBody > .error-block .alert {
    margin-bottom: 0;
    box-shadow: none !important;
}

#loginBody #topSection.row {
    justify-content: flex-end !important;
}

#loginBody #topSection .container-logo.d-flex {
    justify-content: flex-end;
}

#loginBody #loginFormContainer > .row.d-flex,
#loginBody #loginFormContainer > .row.d-flex.pt-3 {
    justify-content: flex-end;
}

#loginBody form[name="Login"] .row.justify-content-center {
    justify-content: flex-end !important;
}

#loginBoxContainer {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: var(--login-panel-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Vertically center the sign-in block within the right white bar */
#loginBody form[name="Login"] #loginBoxContainer {
    justify-content: center;
}

/* Undo Bootstrap .row / .d-flex / alignment utilities on the login row inside #loginBoxContainer */
#loginBoxContainer > .row {
    display: block !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#loginBoxContainer > .error-block {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
}

#loginBoxContainer > .error-block > .row.justify-content-md-center {
    margin-top: 20px;
    margin-left: 25px;
    margin-right: 25px;
}

#loginBoxContainer > .error-block [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#loginBoxContainer > .error-block .alert {
    margin-bottom: 0;
    box-shadow: none !important;
}

/* Force message column to full row width (Bootstrap .col-md-5 → .col-12 behaviour) */
#messageBoxContainer .col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100%;
}

/* Labels tied to login inputs (JSP + theme.js .login-label) */
#loginBody form[name="Login"] label[for],
#loginBody form[name="Login"] .login-label {
    font-size: 14px;
    padding-bottom: 5px;
}

#loginBox .shadow-md {
    box-shadow: none;
}

#loginBox .card {
    border: none;
}

@media (min-width: 768px) {
    #loginBody form[name="Login"] .row.justify-content-md-center {
        justify-content: flex-end !important;
    }
}

#loginBody #loginTable {
    height: 100%;
    width: 100%;
    text-align: center;
}

#loginForm {
    background: none no-repeat;
    width: 310px;
    height: 248px;
    margin: 160px 15px 0 auto;
    background-color: white;
}

#loginFormContainer {
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

.loginFormHeaderTopPadding {
    height: 24px;
}

.bottomSectionAck {
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: solid #E8ECEF 0;
}

/* ------------------------------------- Form fields */
.passwordFormHeader {
    color: #2C537D;
    font-family: Verdana, sans-serif;
    text-align: left;
    font-size: 11px;
    vertical-align: top;
    padding: 10px 20px 0 20px;
    margin-bottom: 0;
    height: 40px;
    border-bottom: none;
}

.largeFormHeader {
    color: #2C537D;
    font-family: Verdana, sans-serif;
    text-align: left;
    font-size: 11px;
    vertical-align: top;
    padding: 20px 20px 00px 20px;
    margin-bottom: 0;
    height: 30px;
    border-bottom: none;
}

.passwordLostFormFooter {
    border-top: none;
    height: 60px;
    padding: 8px 0 0 8px;
}

.loginFormMaintenance {
    color: #2C537D;
    font-family: Verdana, sans-serif;
    text-align: center;
    font-size: 11px;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    height: 15px;
}

.loginFormLabel {
    color: #005EB8;
    font-family: Verdana, sans-serif;
    text-align: left;
    font-size: 14px;
    vertical-align: bottom;
    padding: 10px 0 5px 20px;
    height: auto;
}

.loginChangePassword {
    color: #2C537D;
    font-family: Verdana, sans-serif;
    text-align: right;
    font-size: 10px;
    vertical-align: top;
    padding-right: 27px;
    height: 10px;
}

#loginChangePassword {
    justify-content: center;
    text-align: center;
}

#loginChangePassword a{
    margin-top:15px;
    font-weight:600;
}

/* ----------------------------------- Login error section */
.loginErrorBox {
    text-align: left;
    width: 365px;
    margin: 0 auto;
}

/* ----------------------------------- Form error message  */
.formErrorTitle {
    float: left;
    clear: both;
    color: white;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: normal;
    width: 365px;
    height: 17px;
    padding: 8px 0 0 15px;
}

.formErrorStretch {
    width: 365px;
    margin: 0;
}

.formErrorBottom div {
    padding: 10px 0 10px 15px;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 10px;
    color: #E8798A;
    line-height: 160%;
}

/* ----------------------------------- Login links */
.loginLink {
    color: #2C537D;
    font-family: Verdana, sans-serif;
    font-size: 9px;
    font-weight: bold;
    margin-top: 5px;
    text-align: right;
    text-decoration: underline;
}

/* ----------------------------------- Login input fields */
.loginFormInput {
    text-align: left;
    padding-left: 20px;
    height: 20px;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}

.inputSmall input {
    border-width: 1px;
    border-color: #7C7C7C;
    vertical-align: middle;
    height: 21px;
    width: 100px;
}

.loginFormInput input {
    vertical-align: middle;
    height: 28px;
    width: 260px;
    color: #616161;
}

.loginFormInput select {
    vertical-align: middle;
    color: #616161;
    height: 28px;
    width: 260px;
    padding: 3px;
    font-size: 14px;
}

/* ----------------------------------- login blocks */
.loginChangePasswordForm {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    width: 310px;
    height: 424px;
    margin: 40px auto 0;
    background: none no-repeat;
    background-color: white;
}

.passwordChangeFormFooter {
    border-top: none;
    height: 60px;
    padding: 0 0 0 20px;
    text-align: center;
}

.loginPasswordForm {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    width: 310px;
    height: 501px;
    margin: 40px auto 0;
    background: none no-repeat;
    background-color: white;
}

.loginLargeForm {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    width: 310px;
    height: 565px;
    margin: 40px auto 0;
    background: none no-repeat;
    background-color: white;
}

/* --------------------- Bottom section classes */
.bottomCopyrightLogin {
    color: #2C537D;
    font: 10px Verdana;
    text-align: left;
    margin: 30px 0 0 0;
    left: 65px;
    padding: 0;
    height: 28px;
    float: right;
}

#ssoBox .login-sso-button-box {
    text-decoration: none;
    color: inherit;
}

/* Federated login (e.g. Sign-in with Microsoft) — outline style like Amadeus SSO */
#federatedBox .login-sso-button-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    background-color: #fff;
    border: 1px solid #0c66e1;
    border-radius: 0.25rem;
    color: #0c66e1;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

#federatedBox .login-sso-button-box:hover,
#federatedBox .login-sso-button-box:focus{
    background-color: #f5f9ff;
    border-color: #0a58c4;
    color: #0a58c4;
    outline: none;
}

#federatedBox .login-sso-button-box img {
    display: none !important;
}

/* --------------------------------- Top options */
.loginTopOptions {
    color: #2C537D;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin-right: 25px;
    margin-top: 5px;
    text-align: right;
    text-decoration: none;
}

/* ------------------------- NEW FOR LICENSE AGREEMENT */
#licenseAgreementForm {
    background-image: none;
    background-color: white;
    width: 778px;
    height: 476px;
    margin-top: 5%;
    border: 0;
}

#licenseAgreementForm table tr td {
    width: 778px;
    height: 476px;
    margin-top: 5%;
    border: 0;
}

#licenseAgreement {
    margin: 10px 10px 10px 10px;
    overflow: auto;
    width: 748px;
    height: 380px;
    background: white;
}

#licenseAgreement h2 {
    font-family: Verdana, sans-serif;
    font-size: 20px;
}

#licenseAgreement p {
    font-family: Verdana, sans-serif;
    font-size: xx-small;
}

#buttons .question {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    color: #2D557F;
    margin: 0 0 0 5px;
}

/* ------------------------- NEW FOR ACKNOWLEDGMENT */
#acknowledge h2 {
    font-family: Verdana, sans-serif;
    font-size: 20px;
}

#acknowledge p {
    font-family: Verdana, sans-serif;
    font-size: xx-small;
}

#buttonsAck {
    height: 50px;
    width: 300px;
    padding: 10px 40px 0 0;
    float: right;
}

#buttonsAck .question {
    float: right;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    color: #2D557F;
    margin: 0 10px 0 5px;
}

/* ------------------------ Custom message section */
#customMessage {
    display: inline;
    float: left;
    margin-left: 230px;
    width: 330px;
    height: 100px;
    color: black;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    text-align: left;
    clear: both;
}

#customMessage a {
    color: #1862A9;
    text-decoration: none
}

#customMessage a:hover {
    text-decoration: underline
}

/* AMADEUS SPECIFIC CLASSES AND IDS */
.mainWrapper {
    margin: 0 auto;
    width: 800px;
    height: 600px;
    padding: 130px 0 0 0;
}

.mainWrapperSso {
    margin: 0 auto;
    width: 1000px;
    height: 515px;
    padding: 0;
}

.mainWrapperNonSso {
    margin: 0 auto;
    width: 800px;
    height: 515px;
    padding: 0;
}

.mainWrapperPasswordExpired {
    margin: 0 auto;
    width: 800px;
    height: 600px;
    padding: 120px 0 0 0;
}

.mainWrapperLicense {
    margin: 0 auto;
    width: 1282px;
    height: 600px;
    padding: 120px 0 0 0;
}

.loginBoxAlign {
    width: 370px;
    position: relative;
    margin-left: 200px;
    float: left;
    margin-bottom: 30px;
    display: inline
}

.loginErrorTitle {
    float: left;
    clear: both;
    color: white;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    width: 365px;
    height: 20px;
    padding: 8px 0 0 15px;
}

.loginErrorStretch {
    width: 365px;
    margin: 0;
}

.loginErrorContent {
    padding: 10px 5px 10px 15px;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffb8b8;
    line-height: 160%;
}

.loginBottomSection {
    z-index: -1;
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent;
    float: left;
}

.loginBottomSection p {
    z-index: 1;
}

.bottomDefaultContent {
    float: left;
    position: absolute;
    bottom: 10px;
    left: 300px;
}

/* ------------------------------- SSO Block */
.ssoBlock {
    width: 398px;
    position: relative;
    float: left;
    margin: 205px 0 20px 0;
    text-align: left;
}

.ssoBlock h2 {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    color: orange;
}

.ssoBlock ul {
    padding: 0;
    margin: 0;
}

.ssoBlock ul li {
    margin-left: 18px;
}

.ssoBlock ul li A:link {
    font-family: Verdana, sans-serif;
    font-size: 13px;
    color: #2C537D;
    text-decoration: none;
}

.ssoBlock ul li A:active {
    font-family: Verdana, sans-serif;
    font-size: 13px;
    color: #2C537D;
    text-decoration: none;
}

.ssoBlock ul li A:visited {
    font-family: Verdana, sans-serif;
    font-size: 13px;
    color: #2C537D;
    text-decoration: none;
}

.ssoBlock ul li A:hover {
    color: #900028;
    text-decoration: underline;
}


/* BOOTSTRAP-MIGRATION */
.logo-login img {
    margin: 0 0 20px -235px;
}

.logo {
    display:none;
}

.card-footer {
    background-color: white;
}

.card-header {
    background-color: white;
}

.nav-link, .nav-link:hover, .nav-link:visited, .nav-link:active{
    color: black!important;
}

/* ----------------------------------- Maintenance banner */
.maintenance-banner {
    --maintenance-banner-title-size: 14px;
    --maintenance-banner-icon-gap: 6px;
    background-color: #e8f0fe;
    border-bottom: 3px solid #0c66e1;
    width: 100%;
    padding: 12px 20px 14px;
    box-sizing: border-box;
    font-family: Verdana, sans-serif;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

.maintenance-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.maintenance-banner-title {
    font-weight: 600;
    font-size: var(--maintenance-banner-title-size);
    color: #1a1a1a;
}

.maintenance-banner-icon {
    display: inline-block;
    width: 1em;
    color: #1a73e8!important;
    margin-right: var(--maintenance-banner-icon-gap);
    text-align: center;
}

.maintenance-banner-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 0 4px;
}

.maintenance-banner-close:hover {
    color: #000;
}

.maintenance-banner-divider {
    border: none;
    border-top: 1px solid #c4d3e8;
    margin: 12px 0 12px 25px;
}

.maintenance-banner-body {
    font-size: 13px;
    color: #333;
    /* Align with title text (e.g. "S" in Scheduled), not the info icon */
    padding-left: 25px;
}

/* --------------------------------------------------------------------------
   Right-panel login pages: forgot password + password expired
   (mirrors login #loginBoxContainer right white bar)
   -------------------------------------------------------------------------- */

/* Full-height white panel behind the right column */
#loginBody:has(> form[name="ForgetPassword"])::after,
#loginBody:has(> form[name="LoginMfaTotp"])::after,
#loginBody:has(> form[name="LoginMfaTotpConfiguration"])::after,
#loginBody:has(> form[name="LoginAutoEnrollment"])::after,
#loginBody:has(> form[name="LoginPasswordExpired"])::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: var(--login-panel-width);
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #fff;
    z-index: 0;
    pointer-events: none;
}

#loginBody:has(> form[name="ForgetPassword"]) > nav,
#loginBody:has(> form[name="LoginMfaTotp"]) > nav,
#loginBody:has(> form[name="LoginMfaTotpConfiguration"]) > nav,
#loginBody:has(> form[name="LoginAutoEnrollment"]) > nav,
#loginBody:has(> form[name="LoginPasswordExpired"]) > nav {
    position: relative;
    z-index: 2;
}


/* Maintenance banner: login.jsp only (#loginBody > form[name="Login"]); theme.js moves it under the navbar */
#loginBody:not(:has(> form[name="Login"])) #maintenanceBanner,
#loginBody:not(:has(> form[name="Login"])) .maintenance-banner {
    display: none !important;
}

/* Shared 500px right column */
#forgetPasswordMain,
#passwordExpiredMain,
#mfaTotpMain,
#mfaTotpConfigMain,
#loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"] + .container {
    width: var(--login-panel-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

#loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"],
#loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"] + .container,
#loginBody form[name="LoginMfaTotp"],
#loginBody form[name="LoginMfaTotpConfiguration"],
#loginBody form[name="LoginAutoEnrollment"],
#loginBody form[name="LoginPasswordExpired"] {
    position: relative;
    z-index: 1;
}

#loginBody form[name="ForgetPassword"],
#loginBody form[name="LoginMfaTotp"],
#loginBody form[name="LoginMfaTotpConfiguration"],
#loginBody form[name="LoginAutoEnrollment"],
#loginBody form[name="LoginPasswordExpired"] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

#forgetPasswordMain,
#mfaTotpMain,
#mfaTotpConfigMain,
#passwordExpiredMain {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    justify-content: center;
}

#forgetPasswordMain > .row,
#mfaTotpMain > .row,
#mfaTotpConfigMain > .row,
#passwordExpiredMain > .row {
    display: block !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#forgetPasswordMain > .row > [class*="col-"],
#mfaTotpMain > .row > [class*="col-"],
#mfaTotpConfigMain > .row > [class*="col-"],
#passwordExpiredMain > .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#forgetPasswordMain .card,
#mfaTotpMain .card,
#mfaTotpConfigMain .card,
#loginBody form[name="LoginAutoEnrollment"] .card,
#passwordExpiredMain .card {
    border: none;
    background-color: transparent;
    box-shadow: none !important;
}

#forgetPasswordMain .card-header,
#mfaTotpMain .card-header,
#mfaTotpConfigMain .card-header,
#loginBody form[name="LoginAutoEnrollment"] .card-header,
#passwordExpiredMain .card-header {
    border-bottom: none;
    background-color: transparent;
    padding: 0 0 0.5rem;
    font-size: 1.8em;
    font-weight: 600;
}

#forgetPasswordMain .card-subtitle {
    font-size: 0.9em;
    font-weight: 400;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

#forgetPasswordMain .card-body,
#mfaTotpMain .card-body,
#mfaTotpConfigMain .card-body,
#loginBody form[name="LoginAutoEnrollment"] .card-body,
#passwordExpiredMain .card-body {
    padding: 0;
}

#forgetPasswordMain .card-body > .row,
#mfaTotpMain .card-body > .row,
#mfaTotpConfigMain .card-body > .row,
#loginBody form[name="LoginAutoEnrollment"] .card-body > .row,
#passwordExpiredMain .card-body > .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

#forgetPasswordMain .card-body > .row > [class*="col-"],
#mfaTotpMain .card-body > .row > [class*="col-"],
#mfaTotpConfigMain .card-body > .row > [class*="col-"],
#loginBody form[name="LoginAutoEnrollment"] .card-body > .row > [class*="col-"],
#passwordExpiredMain .card-body > .row > [class*="col-"] {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#forgetPasswordMain .card-footer,
#mfaTotpMain .card-footer,
#mfaTotpConfigMain .card-footer,
#loginBody form[name="LoginAutoEnrollment"] .card-footer,
#passwordExpiredMain .card-footer {
    border-top: none;
    background-color: transparent;
    padding: 1.5rem 0 0;
}

#forgetPasswordMain .lost-pasword-footer,
#mfaTotpMain .lost-pasword-footer,
#mfaTotpConfigMain .lost-pasword-footer,
#passwordExpiredMain .lost-pasword-footer {
    justify-content: center !important;
}

#forgetPasswordMain .form-group,
#mfaTotpMain .form-group,
#mfaTotpConfigMain .form-group,
#loginBody form[name="LoginAutoEnrollment"] .form-group,
#passwordExpiredMain .form-group {
    margin-bottom: 1.25rem;
}

#forgetPasswordMain .form-group label,
#mfaTotpMain .form-group label,
#mfaTotpConfigMain .form-group label,
#loginBody form[name="LoginAutoEnrollment"] .form-group label,
#passwordExpiredMain .form-group label {
    font-weight: 600;
    font-size: 13px;
    color: #515151;
    padding-bottom: 5px;
}

#forgetPasswordMain .error-block {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
}

#forgetPasswordMain .error-block > .row.justify-content-md-center {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

#forgetPasswordMain .error-block [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#forgetPasswordMain .error-block .alert {
    margin-bottom: 0;
    box-shadow: none !important;
}

/* loginExpiredPassword.jsp keeps its error block inside the form, as a sibling of
   #passwordExpiredMain, so it needs the panel width of its own. */
#loginBody form[name="LoginMfaTotp"] > .error-block,
#loginBody form[name="LoginMfaTotpConfiguration"] > .error-block,
#loginBody form[name="LoginPasswordExpired"] > .error-block {
    box-sizing: border-box;
    width: var(--login-panel-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 2rem;
    padding-right: 2rem;
}

#loginBody form[name="LoginMfaTotp"] > .error-block > .row,
#loginBody form[name="LoginMfaTotpConfiguration"] > .error-block > .row,
#loginBody form[name="LoginPasswordExpired"] > .error-block > .row {
    margin-left: 0;
    margin-right: 0;
}

#loginBody form[name="LoginMfaTotp"] > .error-block [class*="col-"],
#loginBody form[name="LoginMfaTotpConfiguration"] > .error-block [class*="col-"],
#loginBody form[name="LoginPasswordExpired"] > .error-block [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#loginBody form[name="LoginMfaTotp"] > .error-block .alert,
#loginBody form[name="LoginMfaTotpConfiguration"] > .error-block .alert,
#loginBody form[name="LoginPasswordExpired"] > .error-block .alert {
    margin-bottom: 0;
    box-shadow: none !important;
}

#captcha-image-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#forgetPasswordMain .forget-password-br {
    display: none;
}

/* Captcha column is centred as a block: the "Validation image" label (a bare <label> in
   the JSP, outside any .form-group) rides along with the image below it. */
#forgetPasswordMain .card-body [class*="col-"]:has(> #captcha-image) {
    text-align: center;
}

#forgetPasswordMain #captcha-image {
    display: flex;
    justify-content: center;
}

/* loginbottomcontent.jsp — bottom of the right white column */
#loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"] + .container {
    flex-shrink: 0;
}

#loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"] + .container .row.justify-content-md-center {
    justify-content: flex-start !important;
    margin: 0;
}

#loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"] + .container [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* --------------------------------------------------------------------------
   Right-panel download pages (mirrors the login #loginBoxContainer white bar)

   Two pages share the same markup and load this stylesheet:
     - passwordRequestForDownload.jsp  ("Password Protected File" + password form)
     - DownloadProcessorServlet        ("file not available" error card)
   Both render <body id="loginBody"> > .container > .col-8.offset-2 > .card, so
   the :has() scope below keeps these rules off every other page.
   -------------------------------------------------------------------------- */

/* The .container is the full-height white band on the right; its content is
   vertically centered in it, exactly like form[name="Login"] > .container.
   Also cancels .container{margin-top:40px} from commons/passwordRequestForDownload.css. */
#loginBody:has(> .container > .col-8.offset-2 > .card) > .container {
    box-sizing: border-box;
    background-color: #fff;
    width: var(--login-panel-width);
    max-width: 100%;
    margin: 0 0 0 auto;
    padding: 2rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* "safe" keeps the top of the form reachable when the viewport is shorter than the form */
    justify-content: safe center;
}

/* Single full-width column inside the band (drops the Bootstrap col-8/offset-2 grid) */
#loginBody:has(> .container > .col-8.offset-2 > .card) > .container > .col-8.offset-2 {
    /* "none", not "0 0 100%": the band is a column flex container, so a 100% basis
       would size this item to the full band height and defeat the vertical centering */
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

/* The band itself is the white surface: the card inside it stays flat */
#loginBody:has(> .container > .col-8.offset-2 > .card) .card {
    border: none;
    background-color: transparent;
    box-shadow: none !important;
}

/* Card header is the page heading ("Password Protected File"), same treatment as
   the forgot-password / password-expired headings */
#loginBody:has(> .container > .col-8.offset-2 > .card) .card-header {
    border-bottom: none;
    background-color: transparent;
    padding: 0 0 1rem;
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
}

#loginBody:has(> .container > .col-8.offset-2 > .card) .card-body,
#loginBody:has(> .container > .col-8.offset-2 > .card) .card-body.px-3 {
    padding: 0 !important;
}

/* Undo the Bootstrap rows/columns of the form so every field is full width */
#loginBody:has(> .container > .col-8.offset-2 > .card) .card-body .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

#loginBody:has(> .container > .col-8.offset-2 > .card) .card-body .row > [class*="col-"] {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#loginBody:has(> .container > .col-8.offset-2 > .card) .form-group {
    margin-bottom: 1.25rem;
}

#loginBody:has(> .container > .col-8.offset-2 > .card) .form-group label {
    font-weight: 600;
    font-size: 13px;
    color: #515151;
    padding-bottom: 5px;
}

/* "If you have any problems with the password..." — helper line under the field,
   same muted treatment as the login "Business Partners" hint */
#loginBody:has(> .container > .col-8.offset-2 > .card) .form-group small {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #6c757d;
}

/* Download / submit button spans the band, like the sign-in button */
#loginBody:has(> .container > .col-8.offset-2 > .card) #downloadButton {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    text-align: center;
}

/* Transfer progress / error blocks keep the panel width and stay flat */
#loginBody:has(> .container > .col-8.offset-2 > .card) .alert {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    box-shadow: none !important;
}

#loginBody:has(> .container > .col-8.offset-2 > .card) .alert .row {
    margin-left: 0;
    margin-right: 0;
}

/* --------------------------------------------------------------------------
   MFA TOTP page (loginMfaTotp.jsp) — extras on top of the shared right-panel
   rules above, which it joins through #mfaTotpMain (tagged by theme.js) and
   form[name="LoginMfaTotp"].
   -------------------------------------------------------------------------- */

/* "Enter the code from your authenticator app" callout: flat inside the white band,
   accent rule in the theme blue instead of the commons core.css #305ba0 */
#mfaTotpConfigMain .information-header,
#mfaTotpMain .information-header {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border-color: #e3ecfa;
    border-left-color: #0c66e1;
    background-color: #f5f9ff;
    box-shadow: none !important;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Spacer row in the JSP (<div class="row"><div class="col-12"><br/></div></div>);
   the callout already carries the gap, so the stray line-break only adds slack */
#mfaTotpConfigMain .card-body > .row > [class*="col-"] > br,
#mfaTotpMain .card-body > .row > [class*="col-"] > br {
    display: none;
}

/* "Remember this device" checkbox row */
#mfaTotpMain .form-check {
    margin-bottom: 0.25rem;
    padding-left: 1.25rem;
}

#mfaTotpMain .form-check-label {
    font-size: 0.875rem;
    color: #515151;
}

/* Footer actions stack full width like the sign-in button, submit first.
   The JSP emits cancel then submit, so the last child is ordered ahead of it. */
#mfaTotpConfigMain .lost-pasword-footer,
#mfaTotpMain .lost-pasword-footer {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start !important;
}

#mfaTotpConfigMain .lost-pasword-footer > .btn,
#mfaTotpMain .lost-pasword-footer > .btn {
    width: 100%;
    margin: 0;
    text-align: center;
}

#mfaTotpConfigMain .lost-pasword-footer > .btn:last-child,
#mfaTotpMain .lost-pasword-footer > .btn:last-child {
    order: -1;
}

/* Cancel reads as the secondary action (the JSP gives both buttons .btn-primary).
   :not(:last-child) matters on the enrollment page: when createTotpForUser fails the
   JSP drops the confirm button, leaving cancel as the only way forward — it has to
   stay a real primary button then, not a faint link. */
#mfaTotpConfigMain .lost-pasword-footer > .btn:first-child:not(:last-child),
#mfaTotpMain .lost-pasword-footer > .btn:first-child:not(:last-child) {
    margin-top: 0.75rem;
    background-color: transparent;
    border-color: transparent;
    color: #0c66e1;
    font-weight: 600;
}

#mfaTotpMain .lost-pasword-footer > .btn:first-child:not(:last-child):hover,
#mfaTotpConfigMain .lost-pasword-footer > .btn:first-child:not(:last-child):hover,
#mfaTotpConfigMain .lost-pasword-footer > .btn:first-child:not(:last-child):focus,
#mfaTotpMain .lost-pasword-footer > .btn:first-child:not(:last-child):focus {
    background-color: transparent;
    border-color: transparent;
    color: #0a58c4;
    text-decoration: underline;
}

/* Submit button matches the primary login action: no sign-in glyph */
#mfaTotpMain .lost-pasword-footer > .btn .far.fa-sign-in,
#mfaTotpConfigMain .lost-pasword-footer > .btn .far.fa-sign-in,
#mfaTotpConfigMain .lost-pasword-footer > .btn .fa-sign-in,
#mfaTotpMain .lost-pasword-footer > .btn .fa-sign-in {
    display: none !important;
}

/* The error banner is a sibling of #mfaTotpMain inside the form, so by default it pins
   to the top of the band while the card centres in the space left over. Centre the two
   as one group instead, the way theme.js groups the error block with the sign-in card
   on login.jsp. Scoped to LoginMfaTotp: the forgot-password / password-expired pages
   keep their current top-aligned banner. */
#loginBody form[name="LoginMfaTotpConfiguration"],
#loginBody form[name="LoginMfaTotp"] {
    justify-content: center;
    justify-content: safe center;
}

#loginBody form[name="LoginMfaTotpConfiguration"] > .error-block,
#loginBody form[name="LoginMfaTotp"] > .error-block {
    flex: 0 0 auto;
}

#mfaTotpConfigMain,
#mfaTotpMain {
    flex: 0 1 auto;
}

/* --------------------------------------------------------------------------
   Auto-enrollment page (loginAutoEnrollment.jsp)

   Unlike the other right-panel pages this one has no .container.lost-password-form
   wrapper: the form's direct children are the Bootstrap rows themselves (error row,
   card row, then a bare column holding the hidden validation inputs). So the rows
   take the band width directly and there is nothing for theme.js to tag.
   -------------------------------------------------------------------------- */

/* Each direct child of the form is the 500px band column */
#loginBody form[name="LoginAutoEnrollment"] > .row,
#loginBody form[name="LoginAutoEnrollment"] > [class*="col-"] {
    box-sizing: border-box;
    display: block !important;
    width: var(--login-panel-width);
    max-width: 100%;
    margin: 0 0 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    flex: 0 0 auto;
}

/* Drop the Bootstrap offset and column widths on the single column each row carries */
#loginBody form[name="LoginAutoEnrollment"] > .row > [class*="col-"] {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Empty theme hooks, same as login.jsp — but this JSP adds .pb-5, which would
   push the block off centre by 3rem */
#loginBody form[name="LoginAutoEnrollment"] > .customTop {
    padding: 0 !important;
}

/* Action error banner sits above the heading, flat like the rest of the band */
#loginBody form[name="LoginAutoEnrollment"] .alert-danger {
    margin-bottom: 1rem;
    box-shadow: none !important;
}

#loginBody form[name="LoginAutoEnrollment"] .alert-danger .alert-heading {
    font-size: 1rem;
    font-weight: 600;
}

/* Intro callout: matches the MFA .information-header treatment rather than the
   commons .light-blue palette */
#loginBody form[name="LoginAutoEnrollment"] .alert.light-blue {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e3ecfa;
    border-left: 0.25rem solid #0c66e1;
    border-radius: 0.25rem;
    background-color: #f5f9ff;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Field hints under each input */
#loginBody form[name="LoginAutoEnrollment"] .form-text {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Footer actions stack full width, enrol first (the JSP already emits that order,
   with cancel last as .btn-outline-secondary) */
#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start !important;
}

#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex > .btn {
    width: 100%;
    margin: 0 0 0.5rem !important;
    text-align: center;
}

#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex > .btn:last-child {
    margin-bottom: 0 !important;
}

/* Cancel reads as the quiet action, like "I forgot my password" on login */
#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex > .btn-outline-secondary:not(:only-child) {
    margin-top: 0.25rem !important;
    border-color: transparent;
    color: #0c66e1;
    font-weight: 600;
}

#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex > .btn-outline-secondary:not(:only-child):hover,
#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex > .btn-outline-secondary:not(:only-child):focus {
    background-color: transparent;
    border-color: transparent;
    color: #0a58c4;
    text-decoration: underline;
}

/* The "back to link user account" row keeps its chevron; the enrol check mark is
   dropped so the primary action matches the login sign-in button */
#loginBody form[name="LoginAutoEnrollment"] .card-footer > .d-flex > .btn > .nobr > .fa-check {
    display: none !important;
}

/* Error banner + card centre as one group in the band */
#loginBody form[name="LoginAutoEnrollment"] {
    justify-content: center;
    justify-content: safe center;
}

/* --------------------------------------------------------------------------
   MFA TOTP enrollment page (loginMfaTotpConfiguration.jsp)

   Shares loginMfaTotp.jsp's shell, so it rides the #mfaTotpConfigMain clones of
   the shared right-panel rules above. What differs is the body: a warning alert,
   the QR code beside the shared secret (.col-3 / .col-9 in the JSP), and the
   enrollment code field. In a 436px column the two columns stack — the QR keeps
   its commons 180px so it stays scannable.
   -------------------------------------------------------------------------- */

/* Standing warning ("you will not be able to sign in without your authenticator") */
#mfaTotpConfigMain .alert-warning {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid #f5e2b8;
    border-left: 0.25rem solid #d98c00;
    border-radius: 0.25rem;
    background-color: #fdf8ec;
    color: inherit;
    box-shadow: none !important;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Validation errors (server-side, and the empty-code one the JSP injects into #error) */
#mfaTotpConfigMain #error .error-block {
    margin-bottom: 1.25rem;
}

#mfaTotpConfigMain #error .alert {
    margin-bottom: 0;
    box-shadow: none !important;
}

/* QR tile sits above the secret once the columns stack (.qr-code is 180px in core.css) */
#mfaTotpConfigMain .qr-code {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 1.25rem;
    padding: 0.5rem;
    border: 1px solid #e3ecfa;
    border-radius: 0.25rem;
    background-color: #fff;
}

/* The secret and code labels sit outside any .form-group here, so they need the
   .form-group label treatment spelled out */
#mfaTotpConfigMain .card-body label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 13px;
    color: #515151;
}

/* Shared secret: a monospace chip the user copies into their authenticator */
#mfaTotpConfigMain #qrCodeSecretTooltip {
    display: block !important;
    margin-bottom: 1.25rem;
}

#mfaTotpConfigMain #qrCodeSecretTooltip .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #f8f9fb;
}

#mfaTotpConfigMain #qrCodeSecretOutput {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    word-break: break-all;
}

#mfaTotpConfigMain #qrCodeSecretCopyButton {
    flex: 0 0 auto;
}

#mfaTotpConfigMain #qrCodeSecretCopyButton #copyIcon {
    margin-top: 0 !important;
    color: #0c66e1;
}

/* The enrollment code field is .form-control-sm in the JSP; bring it back to the
   metrics the username / password / MFA fields use */
#mfaTotpConfigMain #mfaCode {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

#mfaTotpConfigMain #mfaCode + .text-muted {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}
@media (max-width: 800px){
    #topSection{display:none}
    #loginBody form[name="Login"] #loginBoxContainer .card {
        margin-top: 0;
    }
    #loginBody:has(> form[name="ForgetPassword"])::after,
    #loginBody:has(> form[name="LoginPasswordExpired"])::after,
    #loginBody:has(> form[name="LoginMfaTotp"])::after,
    #loginBody:has(> form[name="LoginMfaTotpConfiguration"])::after,
    #forgetPasswordMain,
    #passwordExpiredMain,
    #mfaTotpMain,
    #mfaTotpConfigMain,
    #loginBody form[name="LoginPasswordExpired"] > .error-block,
    #loginBody form[name="LoginMfaTotp"] > .error-block,
    #loginBody form[name="LoginMfaTotpConfiguration"] > .error-block,
    #loginBody > .error-block,
    #loginBody form[name="Login"] > .container,
    #loginBody:has(> form[name="ForgetPassword"]) > form[name="ForgetPassword"] + .container,
    #loginBody:has(> form[name="LoginAutoEnrollment"])::after,
    #loginBody form[name="LoginAutoEnrollment"] > .row,
    #loginBody form[name="LoginAutoEnrollment"] > [class*="col-"],
    #loginBody:has(> .container > .col-8.offset-2 > .card) > .container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #loginBody {
        background: none;
        background-color: white;
    }
}