/*****************************************************************************
 * ADDIKKO ONLINE BANKING
 * FINAL PRODUCTION POLISH
 *****************************************************************************/

body.cap-final-login-active,
body.page-id-11 {
    background: #f4f6f8;
}

.cap-final-login-shell {
    width: min(100% - 32px, 480px);
    margin: 48px auto;
    padding: 38px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.cap-final-login-logo {
    display: block;
    width: auto;
    max-width: 170px;
    max-height: 58px;
    margin: 0 auto 30px;
}

.cap-final-login-shell h1 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
}

.cap-final-login-intro {
    margin: 0 auto 30px;
    max-width: 390px;
    color: #64748b;
    line-height: 1.6;
    text-align: center;
}

.cap-final-password-wrap {
    position: relative;
}

.cap-final-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    font-weight: 600;
    cursor: pointer;
}

.cap-final-remember-copy {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.cap-final-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: #94a3b8;
}

.cap-final-divider::before,
.cap-final-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e8f0;
}

.cap-final-passkey {
    display: block;
    width: 100%;
    padding: 13px 18px;
    text-align: center;
    text-decoration: none;
    font-weight: 650;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}

.cap-final-login-links {
    margin-top: 26px;
    text-align: center;
}

.cap-final-login-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
}

.cap-final-login-footer a {
    text-decoration: none;
}

.cap-final-account-number {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 18px;
    padding: 13px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.cap-final-account-number span {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cap-final-account-number strong {
    font-size: 18px;
    letter-spacing: 0.035em;
}

.cap-final-settings textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 1024px) {

    .cap-final-login-shell {
        margin-top: 34px;
    }
}

@media (max-width: 768px) {

    .cap-final-login-shell {
        width: min(100% - 28px, 480px);
        padding: 30px 24px;
        margin: 28px auto;
    }
}

@media (max-width: 480px) {

    .cap-final-login-shell {
        width: calc(100% - 20px);
        padding: 26px 18px;
        margin: 16px auto;
        border-radius: 12px;
    }

    .cap-final-login-shell h1 {
        font-size: 24px;
    }

    .cap-final-login-footer {
        gap: 12px;
    }
}

/*****************************************************************************
 * SCRIPT 06A4A
 * FORCE REMOVE CUSTOM CAP PASSWORD TOGGLE
 *****************************************************************************/

.cap-final-password-toggle,
body.cap-final-login-active .cap-final-password-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.cap-final-login-active .cap-final-password-wrap {
    display: block !important;
    width: 100% !important;
}

body.cap-final-login-active .cap-final-password-wrap > input {
    width: 100% !important;
}

/*****************************************************************************
 * SCRIPT 06A4B
 * FINAL LOGIN PASSWORD + EYE ALIGNMENT
 *****************************************************************************/

/*
 * Password control owns a single horizontal row.
 */
body.cap-final-login-active .uwp-login-form .form-group,
body.cap-final-login-active .uwp-login-form .uwp-field-password,
body.cap-final-login-active .uwp-login-form .uwp-password-field,
body.cap-final-login-active .cap-final-password-wrap {
    position: relative !important;
}

/*
 * Password input occupies the full field.
 */
body.cap-final-login-active input[type="password"],
body.cap-final-login-active input[data-password-input],
body.cap-final-login-active .cap-final-password-wrap input {
    width: 100% !important;
    min-height: 54px !important;
    padding-right: 54px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/*
 * Keep our removed custom red Show button dead.
 */
body.cap-final-login-active .cap-final-password-toggle,
.cap-final-password-toggle {
    display: none !important;
}

/*
 * UsersWP / native password visibility controls.
 *
 * Move them into the password box on the far right.
 */
body.cap-final-login-active .uwp-password-toggle,
body.cap-final-login-active .uwp-password-icon,
body.cap-final-login-active .password-toggle,
body.cap-final-login-active .show-password,
body.cap-final-login-active button[aria-label*="password" i],
body.cap-final-login-active button[title*="password" i] {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 5 !important;
}

/*
 * Fix common UsersWP password wrapper layouts that force the eye
 * onto a second row.
 */
body.cap-final-login-active .input-group,
body.cap-final-login-active .uwp-input-group,
body.cap-final-login-active .password-input-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

body.cap-final-login-active .input-group > input,
body.cap-final-login-active .uwp-input-group > input,
body.cap-final-login-active .password-input-wrapper > input {
    width: 100% !important;
}

/*
 * Suppress empty space left by removed legacy login intro/logo areas.
 */
body.cap-final-login-active .cap-login-branding:empty,
body.cap-final-login-active .cap-login-intro-block:empty,
body.cap-final-login-active .cap-final-login-logo[src=""],
body.cap-final-login-active img[src=""] {
    display: none !important;
}

/*
 * Tighten banking login card after removing obsolete heading/logo content.
 */
body.cap-final-login-active .cap-final-login-shell {
    min-height: 0 !important;
}

body.cap-final-login-active .cap-final-login-shell > :first-child {
    margin-top: 0 !important;
}

@media (max-width: 480px) {

    body.cap-final-login-active input[type="password"] {
        padding-right: 52px !important;
    }
}

/*****************************************************************************
 * SCRIPT 06A4D1
 * FINAL BANKING LOGIN COMPOSITION
 *****************************************************************************/

/*
 * Login application should begin near the top of the viewport instead of
 * vertically centering the form with large empty gaps.
 */
body.cap-final-login-active {
    min-height: 100vh !important;
}

body.cap-final-login-active .cap-final-login-page,
body.cap-final-login-active .cap-final-login-shell,
body.cap-final-login-active .cap-login-shell {
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    gap: 12px !important;
}

/*
 * Remove exaggerated spacing between:
 *
 * Addikko Account Portal
 * Secure Client Portal
 *
 * and the login form card.
 */
body.cap-final-login-active .cap-final-login-card,
body.cap-final-login-active .cap-login-card,
body.cap-final-login-active .cap-login-form-card {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

body.cap-final-login-active .cap-final-login-brand,
body.cap-final-login-active .cap-login-brand,
body.cap-final-login-active .cap-login-branding,
body.cap-final-login-active .cap-portal-brand {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
 * Heading and introductory copy.
 */
body.cap-final-login-active h1,
body.cap-final-login-active h2 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

body.cap-final-login-active h1 + p,
body.cap-final-login-active h2 + p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

/*
 * Tight form rhythm.
 */
body.cap-final-login-active form {
    margin-top: 0 !important;
}

body.cap-final-login-active form .form-group,
body.cap-final-login-active form .uwp-field,
body.cap-final-login-active form .uwp-form-group {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/*
 * Standard field size.
 */
body.cap-final-login-active input[type="text"],
body.cap-final-login-active input[type="email"],
body.cap-final-login-active input[type="password"] {
    width: 100% !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
}

/*
 * Password receives space for eye icon.
 */
body.cap-final-login-active input[type="password"] {
    padding-right: 54px !important;
}

/*
 * Password row must never create a second line for the eye.
 */
body.cap-final-login-active .cap-password-inline-row {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.cap-final-login-active .cap-password-inline-row > input {
    width: 100% !important;
    margin: 0 !important;
}

/*
 * Existing/native eye control.
 */
body.cap-final-login-active .cap-password-inline-eye {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    z-index: 50 !important;
}

/*
 * Old CAP custom Show button stays dead.
 */
body.cap-final-login-active .cap-final-password-toggle,
.cap-final-password-toggle {
    display: none !important;
}

/*
 * Remember me.
 */
body.cap-final-login-active .form-check,
body.cap-final-login-active .uwp-remember-me {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

/*
 * Submit button.
 */
body.cap-final-login-active button[type="submit"],
body.cap-final-login-active input[type="submit"] {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

/*
 * Footer links.
 */
body.cap-final-login-active .cap-login-links,
body.cap-final-login-active .cap-final-login-links {
    margin-top: 12px !important;
    padding-top: 14px !important;
}

body.cap-final-login-active .cap-login-forgot,
body.cap-final-login-active .cap-final-forgot {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

/*
 * Avoid phantom empty spacing.
 */
body.cap-final-login-active .cap-login-spacer,
body.cap-final-login-active .cap-final-login-spacer {
    display: none !important;
}

/*
 * Mobile.
 */
@media (max-width: 600px) {

    body.cap-final-login-active .cap-final-login-page,
    body.cap-final-login-active .cap-final-login-shell,
    body.cap-final-login-active .cap-login-shell {
        padding:
            14px
            12px !important;
    }

    body.cap-final-login-active input[type="password"] {
        padding-right: 50px !important;
    }
}

/*****************************************************************************
 * CAP_RESPONSIVE_APPLICATION_FINAL_V1
 *
 * FINAL LOGIN + HOLDER PORTAL RESPONSIVE LAYER
 *****************************************************************************/

/*****************************************************************************
 * GLOBAL APPLICATION SAFETY
 *****************************************************************************/

html {
    max-width: 100%;
}

body.cap-final-login-active {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/*
 * Prevent border-box calculations from causing accidental overflow.
 */
body.cap-final-login-active *,
body.cap-final-login-active *::before,
body.cap-final-login-active *::after,
.cap10-shell *,
.cap10-shell *::before,
.cap10-shell *::after,
.capx-shell *,
.capx-shell *::before,
.capx-shell *::after,
.cap-portal-shell *,
.cap-portal-shell *::before,
.cap-portal-shell *::after {
    box-sizing: border-box !important;
}


/*****************************************************************************
 * LOGIN PAGE
 *****************************************************************************/

/*
 * Center the complete login application.
 *
 * 100svh is used as fallback.
 * 100dvh tracks mobile browser chrome correctly.
 */
body.cap-final-login-active .cap-final-login-page,
body.cap-final-login-active .cap-final-login-shell,
body.cap-final-login-active .cap-login-shell {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 100svh !important;
    min-height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 0 auto !important;

    padding:
        clamp(12px, 2vh, 24px)
        clamp(12px, 3vw, 24px)
        !important;

    gap: clamp(8px, 1.2vh, 14px) !important;

    overflow-x: hidden !important;
}

/*
 * Main login application surface.
 */
body.cap-final-login-active .cap-final-login-card,
body.cap-final-login-active .cap-login-card,
body.cap-final-login-active .cap-login-form-card {
    width: min(100%, 420px) !important;
    max-width: 420px !important;

    margin: 0 auto !important;

    padding:
        clamp(18px, 2.4vh, 28px)
        clamp(18px, 2.2vw, 28px)
        !important;

    border-radius: 18px !important;
}

/*
 * Branding should sit directly above the login form.
 */
body.cap-final-login-active .cap-final-login-brand,
body.cap-final-login-active .cap-login-brand,
body.cap-final-login-active .cap-login-branding,
body.cap-final-login-active .cap-portal-brand {
    width: min(100%, 420px) !important;
    max-width: 420px !important;

    margin:
        0
        auto
        clamp(4px, 0.7vh, 10px)
        !important;

    padding: 0 !important;
}

/*
 * Compact title and introduction.
 */
body.cap-final-login-active h1,
body.cap-final-login-active h2,
body.cap-final-login-active h3 {
    margin-top: 0 !important;
}

body.cap-final-login-active h1,
body.cap-final-login-active h2 {
    margin-bottom: clamp(5px, 0.7vh, 9px) !important;
}

body.cap-final-login-active h1 + p,
body.cap-final-login-active h2 + p {
    margin:
        0
        0
        clamp(12px, 1.7vh, 18px)
        !important;
}

/*
 * Form rhythm.
 */
body.cap-final-login-active form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.cap-final-login-active form .form-group,
body.cap-final-login-active form .uwp-field,
body.cap-final-login-active form .uwp-form-group {
    width: 100% !important;

    margin:
        0
        0
        clamp(9px, 1.2vh, 13px)
        !important;
}

/*
 * Input geometry.
 */
body.cap-final-login-active input[type="text"],
body.cap-final-login-active input[type="email"],
body.cap-final-login-active input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;

    min-height: clamp(46px, 6vh, 54px) !important;

    margin: 0 !important;

    font-size: clamp(15px, 1.6vw, 17px) !important;
}

/*
 * Password input reserves room for eye control.
 */
body.cap-final-login-active input[type="password"] {
    padding-right: 52px !important;
}

/*
 * Final password row.
 */
body.cap-final-login-active .cap-password-inline-row {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

/*
 * The eye lives inside the password input on the right.
 */
body.cap-final-login-active .cap-password-inline-eye {
    position: absolute !important;

    top: 50% !important;
    right: 9px !important;
    left: auto !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    box-shadow: none !important;

    z-index: 100 !important;
}

/*
 * Hide any wrapper line/background that originally held the eye below input.
 */
body.cap-final-login-active .cap-password-inline-row::before,
body.cap-final-login-active .cap-password-inline-row::after {
    display: none !important;
}

/*
 * Old custom Show control stays removed.
 */
body.cap-final-login-active .cap-final-password-toggle,
.cap-final-password-toggle {
    display: none !important;
}

/*
 * Remember Me.
 */
body.cap-final-login-active .form-check,
body.cap-final-login-active .uwp-remember-me {
    margin:
        clamp(3px, 0.5vh, 6px)
        0
        clamp(10px, 1.3vh, 14px)
        !important;
}

/*
 * Sign in.
 */
body.cap-final-login-active button[type="submit"],
body.cap-final-login-active input[type="submit"] {
    width: 100% !important;

    min-height: clamp(46px, 6vh, 54px) !important;

    margin:
        0
        0
        clamp(10px, 1.4vh, 15px)
        !important;
}

/*
 * Login utility links.
 */
body.cap-final-login-active .cap-login-links,
body.cap-final-login-active .cap-final-login-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;

    gap:
        8px
        18px
        !important;

    margin-top: clamp(8px, 1vh, 12px) !important;
    padding-top: clamp(10px, 1.3vh, 14px) !important;
}

body.cap-final-login-active .cap-login-forgot,
body.cap-final-login-active .cap-final-forgot {
    margin:
        clamp(8px, 1.2vh, 14px)
        auto
        0
        !important;

    text-align: center !important;
}

/*
 * Remove empty spacer components left by older layouts.
 */
body.cap-final-login-active .cap-login-spacer,
body.cap-final-login-active .cap-final-login-spacer {
    display: none !important;
}


/*****************************************************************************
 * HOLDER PORTAL APPLICATION
 *****************************************************************************/

/*
 * Main shell is centered and cannot exceed viewport.
 */
.cap10-shell,
.capx-shell,
.cap-portal-shell {
    width: min(
        calc(100% - 32px),
        1320px
    ) !important;

    max-width: 1320px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow-x: hidden !important;
}

/*
 * Prevent large children from forcing horizontal overflow.
 */
.cap10-shell img,
.cap10-shell video,
.cap10-shell iframe,
.capx-shell img,
.capx-shell video,
.capx-shell iframe,
.cap-portal-shell img,
.cap-portal-shell video,
.cap-portal-shell iframe {
    max-width: 100% !important;
    height: auto !important;
}

/*
 * Portal navigation.
 *
 * Desktop stays horizontal.
 * Smaller widths wrap instead of horizontal scrolling.
 */
.cap10-shell nav,
.cap10-shell .cap10-nav,
.capx-shell nav,
.capx-shell .capx-nav,
.cap-portal-shell nav,
.cap-portal-shell .cap-portal-nav {
    max-width: 100% !important;
}

.cap10-nav,
.capx-nav,
.cap-portal-nav {
    display: flex !important;
    flex-wrap: wrap !important;

    width: 100% !important;

    overflow: visible !important;
}

.cap10-nav a,
.capx-nav a,
.cap-portal-nav a {
    min-width: 0 !important;
    white-space: normal !important;

    text-align: center !important;
}

/*
 * Any portal grid must permit children to shrink.
 */
.cap10-shell [class*="grid"],
.capx-shell [class*="grid"],
.cap-portal-shell [class*="grid"] {
    min-width: 0 !important;
}

.cap10-shell [class*="card"],
.capx-shell [class*="card"],
.cap-portal-shell [class*="card"] {
    min-width: 0 !important;
    max-width: 100% !important;
}

/*
 * Forms.
 */
.cap10-shell input,
.cap10-shell select,
.cap10-shell textarea,
.cap10-shell button,
.capx-shell input,
.capx-shell select,
.capx-shell textarea,
.capx-shell button,
.cap-portal-shell input,
.cap-portal-shell select,
.cap-portal-shell textarea,
.cap-portal-shell button {
    max-width: 100% !important;
}

/*
 * Long references, recipient values, or labels must wrap.
 */
.cap10-shell td,
.cap10-shell th,
.cap10-shell strong,
.cap10-shell p,
.capx-shell td,
.capx-shell th,
.capx-shell strong,
.capx-shell p,
.cap-portal-shell td,
.cap-portal-shell th,
.cap-portal-shell strong,
.cap-portal-shell p {
    overflow-wrap: anywhere;
    word-break: normal;
}


/*****************************************************************************
 * TABLET
 *****************************************************************************/

@media (max-width: 1024px) {

    .cap10-shell,
    .capx-shell,
    .cap-portal-shell {
        width: min(
            calc(100% - 24px),
            100%
        ) !important;
    }

    .cap10-nav a,
    .capx-nav a,
    .cap-portal-nav a {
        flex:
            1
            1
            calc(25% - 4px)
            !important;
    }
}


/*****************************************************************************
 * SMALL TABLET / LARGE MOBILE
 *****************************************************************************/

@media (max-width: 768px) {

    body.cap-final-login-active .cap-final-login-page,
    body.cap-final-login-active .cap-final-login-shell,
    body.cap-final-login-active .cap-login-shell {
        justify-content: center !important;

        padding:
            12px
            14px
            !important;
    }

    body.cap-final-login-active .cap-final-login-card,
    body.cap-final-login-active .cap-login-card,
    body.cap-final-login-active .cap-login-form-card {
        width: min(100%, 410px) !important;

        padding:
            18px
            18px
            !important;
    }

    .cap10-shell,
    .capx-shell,
    .cap-portal-shell {
        width: calc(100% - 20px) !important;
    }

    .cap10-nav a,
    .capx-nav a,
    .cap-portal-nav a {
        flex:
            1
            1
            calc(50% - 4px)
            !important;
    }

    /*
     * Collapse common two-column layouts.
     */
    .cap10-shell [class*="columns"],
    .cap10-shell [class*="content-grid"],
    .capx-shell [class*="columns"],
    .capx-shell [class*="content-grid"],
    .cap-portal-shell [class*="columns"],
    .cap-portal-shell [class*="content-grid"] {
        grid-template-columns: 1fr !important;
    }
}


/*****************************************************************************
 * MOBILE
 *****************************************************************************/

@media (max-width: 480px) {

    body.cap-final-login-active .cap-final-login-page,
    body.cap-final-login-active .cap-final-login-shell,
    body.cap-final-login-active .cap-login-shell {
        padding:
            8px
            10px
            !important;

        gap: 7px !important;
    }

    body.cap-final-login-active .cap-final-login-brand,
    body.cap-final-login-active .cap-login-brand,
    body.cap-final-login-active .cap-login-branding,
    body.cap-final-login-active .cap-portal-brand {
        width: 100% !important;
    }

    body.cap-final-login-active .cap-final-login-card,
    body.cap-final-login-active .cap-login-card,
    body.cap-final-login-active .cap-login-form-card {
        width: 100% !important;

        padding:
            15px
            14px
            !important;

        border-radius: 14px !important;
    }

    body.cap-final-login-active h1,
    body.cap-final-login-active h2 {
        font-size:
            clamp(
                27px,
                8vw,
                36px
            )
            !important;
    }

    body.cap-final-login-active h1 + p,
    body.cap-final-login-active h2 + p {
        font-size: 15px !important;
    }

    body.cap-final-login-active input[type="text"],
    body.cap-final-login-active input[type="email"],
    body.cap-final-login-active input[type="password"] {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    body.cap-final-login-active input[type="password"] {
        padding-right: 48px !important;
    }

    body.cap-final-login-active .cap-password-inline-eye {
        right: 7px !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    .cap10-shell,
    .capx-shell,
    .cap-portal-shell {
        width: calc(100% - 12px) !important;
    }

    /*
     * Mobile navigation becomes a clean two-column grid.
     */
    .cap10-nav,
    .capx-nav,
    .cap-portal-nav {
        display: grid !important;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            )
            !important;
    }

    .cap10-nav a,
    .capx-nav a,
    .cap-portal-nav a {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/*****************************************************************************
 * VERY SMALL MOBILE
 *****************************************************************************/

@media (max-width: 360px) {

    body.cap-final-login-active .cap-final-login-page,
    body.cap-final-login-active .cap-final-login-shell,
    body.cap-final-login-active .cap-login-shell {
        padding:
            6px
            8px
            !important;
    }

    body.cap-final-login-active .cap-final-login-card,
    body.cap-final-login-active .cap-login-card,
    body.cap-final-login-active .cap-login-form-card {
        padding:
            12px
            11px
            !important;
    }

    .cap10-nav,
    .capx-nav,
    .cap-portal-nav {
        grid-template-columns: 1fr !important;
    }
}


/*****************************************************************************
 * SHORT DESKTOP / LANDSCAPE VIEWPORTS
 *****************************************************************************/

@media (max-height: 760px) and (min-width: 601px) {

    body.cap-final-login-active .cap-final-login-page,
    body.cap-final-login-active .cap-final-login-shell,
    body.cap-final-login-active .cap-login-shell {
        justify-content: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        gap: 5px !important;
    }

    body.cap-final-login-active .cap-final-login-card,
    body.cap-final-login-active .cap-login-card,
    body.cap-final-login-active .cap-login-form-card {
        padding:
            14px
            20px
            !important;
    }

    body.cap-final-login-active h1,
    body.cap-final-login-active h2 {
        margin-bottom: 4px !important;
    }

    body.cap-final-login-active h1 + p,
    body.cap-final-login-active h2 + p {
        margin-bottom: 8px !important;
    }

    body.cap-final-login-active form .form-group,
    body.cap-final-login-active form .uwp-field,
    body.cap-final-login-active form .uwp-form-group {
        margin-bottom: 7px !important;
    }

    body.cap-final-login-active input[type="text"],
    body.cap-final-login-active input[type="email"],
    body.cap-final-login-active input[type="password"] {
        min-height: 44px !important;
    }

    body.cap-final-login-active button[type="submit"],
    body.cap-final-login-active input[type="submit"] {
        min-height: 44px !important;
    }
}


/*****************************************************************************
 * CAP_FINAL_SINGLE_CARD_LOGIN_V1
 *****************************************************************************/

/*
 * The login page is its own centered application.
 */
body.cap-final-login-active {
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;

    overflow-x: hidden !important;

    background: #f3f7fb !important;
}

/*
 * Final normalized wrapper created by JS.
 */
body.cap-final-login-active .cap-login-final-stage {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        clamp(12px, 2vh, 24px)
        clamp(12px, 3vw, 24px)
        !important;

    margin: 0 !important;
}

/*
 * ONE card only.
 */
body.cap-final-login-active .cap-login-final-card {
    width: min(100%, 430px) !important;
    max-width: 430px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding:
        clamp(22px, 3vh, 32px)
        clamp(20px, 3vw, 32px)
        !important;

    background: #ffffff !important;

    border: 1px solid #dce5ef !important;
    border-radius: 20px !important;

    box-shadow:
        0 18px 50px
        rgba(20, 48, 84, 0.10)
        !important;

    overflow: visible !important;
}

/*
 * Branding.
 */
body.cap-final-login-active .cap-login-final-brand {
    margin:
        0
        0
        22px
        !important;
}

body.cap-final-login-active .cap-login-final-brand-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 !important;

    color: #08275b !important;

    font-size: clamp(20px, 3vw, 24px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

body.cap-final-login-active .cap-login-final-brand-mark {
    width: 44px !important;
    height: 44px !important;

    flex: 0 0 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 11px !important;

    background: #df1837 !important;
    color: #fff !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}

body.cap-final-login-active .cap-login-final-kicker {
    margin:
        9px
        0
        0
        56px
        !important;

    color: #5d6f89 !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;

    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

/*
 * Main title.
 */
body.cap-final-login-active .cap-login-final-heading {
    margin:
        0
        0
        8px
        !important;

    color: #08275b !important;

    font-size: clamp(29px, 4vw, 38px) !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;

    text-align: center !important;
}

body.cap-final-login-active .cap-login-final-description {
    margin:
        0
        auto
        20px
        !important;

    max-width: 330px !important;

    color: #60718b !important;

    font-size: 16px !important;
    line-height: 1.55 !important;

    text-align: center !important;
}

/*
 * Actual UsersWP form remains the real form.
 */
body.cap-final-login-active .cap-login-final-form {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Prevent old nested cards/wrappers from recreating boxes.
 */
body.cap-final-login-active .cap-login-final-form .card,
body.cap-final-login-active .cap-login-final-form .container,
body.cap-final-login-active .cap-login-final-form .uwp-login,
body.cap-final-login-active .cap-login-final-form .uwp-form,
body.cap-final-login-active .cap-login-final-form .uwp-form-container {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Fields.
 */
body.cap-final-login-active .cap-login-final-form input[type="text"],
body.cap-final-login-active .cap-login-final-form input[type="email"],
body.cap-final-login-active .cap-login-final-form input[type="password"] {
    width: 100% !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    padding:
        0
        15px
        !important;

    border: 1px solid #cdd9e7 !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    font-size: 16px !important;

    box-shadow: none !important;
}

body.cap-final-login-active .cap-login-final-form input[type="password"] {
    padding-right: 50px !important;
}

/*
 * Field spacing.
 */
body.cap-final-login-active .cap-login-final-form .form-group,
body.cap-final-login-active .cap-login-final-form .uwp-field,
body.cap-final-login-active .cap-login-final-form .uwp-form-group {
    margin:
        0
        0
        12px
        !important;

    padding: 0 !important;
}

/*
 * Password wrapper.
 */
body.cap-final-login-active .cap-login-password-row {
    position: relative !important;

    width: 100% !important;

    margin:
        0
        0
        12px
        !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}

/*
 * Password eye, now actually inside field.
 */
body.cap-final-login-active .cap-login-password-eye {
    position: absolute !important;

    top: 50% !important;
    right: 9px !important;
    bottom: auto !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;

    box-shadow: none !important;

    z-index: 50 !important;
}

/*
 * Remove old eye row geometry.
 */
body.cap-final-login-active .cap-login-eye-orphan {
    display: none !important;
}

/*
 * Remember device row.
 */
body.cap-final-login-active .cap-login-final-form .form-check,
body.cap-final-login-active .cap-login-final-form .uwp-remember-me {
    margin:
        3px
        0
        14px
        !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
 * Sign in.
 */
body.cap-final-login-active .cap-login-final-form button[type="submit"],
body.cap-final-login-active .cap-login-final-form input[type="submit"] {
    width: 100% !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: #e81736 !important;
    color: #fff !important;

    font-size: 17px !important;
    font-weight: 800 !important;
}

/*
 * Forgot password.
 */
body.cap-final-login-active .cap-login-final-forgot {
    display: block !important;

    margin:
        15px
        0
        0
        !important;

    text-align: center !important;
}

/*
 * One footer only.
 */
body.cap-final-login-active .cap-login-final-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap:
        10px
        20px
        !important;

    margin:
        18px
        0
        0
        !important;

    padding:
        17px
        0
        0
        !important;

    border-top: 1px solid #e3eaf2 !important;
}

/*
 * Old outer/footer presentation is suppressed only after JS has
 * constructed the final normalized login.
 */
body.cap-final-login-active.cap-login-finalized
.cap-login-original-hidden {
    display: none !important;
}


/*****************************************************************************
 * SHORT DESKTOP
 *****************************************************************************/

@media (max-height: 760px) and (min-width: 601px) {

    body.cap-final-login-active .cap-login-final-stage {
        padding:
            8px
            16px
            !important;
    }

    body.cap-final-login-active .cap-login-final-card {
        padding:
            16px
            24px
            !important;
    }

    body.cap-final-login-active .cap-login-final-brand {
        margin-bottom: 12px !important;
    }

    body.cap-final-login-active .cap-login-final-heading {
        font-size: 28px !important;
        margin-bottom: 4px !important;
    }

    body.cap-final-login-active .cap-login-final-description {
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }

    body.cap-final-login-active .cap-login-final-form input[type="text"],
    body.cap-final-login-active .cap-login-final-form input[type="email"],
    body.cap-final-login-active .cap-login-final-form input[type="password"] {
        height: 46px !important;
        min-height: 46px !important;
    }

    body.cap-final-login-active .cap-login-final-form button[type="submit"],
    body.cap-final-login-active .cap-login-final-form input[type="submit"] {
        height: 46px !important;
        min-height: 46px !important;
    }

    body.cap-final-login-active .cap-login-final-links {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
}


/*****************************************************************************
 * MOBILE
 *****************************************************************************/

@media (max-width: 600px) {

    body.cap-final-login-active .cap-login-final-stage {
        align-items: center !important;

        padding:
            10px
            12px
            !important;
    }

    body.cap-final-login-active .cap-login-final-card {
        width: 100% !important;

        padding:
            20px
            17px
            !important;

        border-radius: 16px !important;
    }

    body.cap-final-login-active .cap-login-final-brand-title {
        font-size: 20px !important;
    }

    body.cap-final-login-active .cap-login-final-brand-mark {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    body.cap-final-login-active .cap-login-final-kicker {
        margin-left: 52px !important;
    }

    body.cap-final-login-active .cap-login-final-heading {
        font-size: clamp(28px, 8vw, 34px) !important;
    }

    body.cap-final-login-active .cap-login-final-description {
        font-size: 15px !important;
    }
}


/*****************************************************************************
 * VERY SMALL MOBILE
 *****************************************************************************/

@media (max-width: 360px) {

    body.cap-final-login-active .cap-login-final-card {
        padding:
            15px
            13px
            !important;
    }

    body.cap-final-login-active .cap-login-final-links {
        gap:
            8px
            14px
            !important;
    }
}

/*****************************************************************************
 * CAP_FINAL_BRAND_AND_EYE_V1
 *****************************************************************************/

/*
 * Brand remains one horizontal line.
 */
body.cap-final-login-active .cap-login-final-brand-title {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    gap: 12px !important;

    margin: 0 !important;

    white-space: nowrap !important;
}

/*
 * Homepage-linked brand text.
 */
body.cap-final-login-active .cap-login-final-brand-link {
    display: inline-flex !important;
    align-items: center !important;

    min-width: 0 !important;

    color: #08275b !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    font-size: clamp(18px, 2vw, 23px) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

body.cap-final-login-active .cap-login-final-brand-link:hover,
body.cap-final-login-active .cap-login-final-brand-link:focus {
    color: #08275b !important;
    text-decoration: none !important;
}

/*
 * Kicker aligns beneath text, not beneath logo.
 */
body.cap-final-login-active .cap-login-final-kicker {
    margin:
        8px
        0
        0
        56px
        !important;
}

/*
 * Final password wrapper.
 */
body.cap-final-login-active .cap-login-password-row {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        12px
        !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

/*
 * Password input reserves space for final eye button.
 */
body.cap-final-login-active .cap-login-password-row input {
    width: 100% !important;

    padding-right: 52px !important;

    margin: 0 !important;
}

/*
 * Final dedicated eye button.
 */
body.cap-final-login-active .cap-login-final-eye {
    position: absolute !important;

    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #5f6f86 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 100 !important;
}

body.cap-final-login-active .cap-login-final-eye:hover,
body.cap-final-login-active .cap-login-final-eye:focus {
    background: #f2f5f9 !important;
    color: #08275b !important;
}

/*
 * Retire ALL older password-eye presentation.
 */
body.cap-final-login-active .cap-password-inline-eye,
body.cap-final-login-active .cap-final-password-toggle,
body.cap-final-login-active .uwp-password-toggle,
body.cap-final-login-active .uwp-password-icon,
body.cap-final-login-active .uwp-show-password,
body.cap-final-login-active .uwp-password-show,
body.cap-final-login-active .password-toggle,
body.cap-final-login-active .show-password {
    display: none !important;
}

/*
 * Remove the empty line/row under the password if one survives.
 */
body.cap-final-login-active .cap-login-eye-orphan,
body.cap-final-login-active .cap-password-eye-retired {
    display: none !important;
}


/*****************************************************************************
 * MOBILE BRAND FIT
 *****************************************************************************/

@media (max-width: 480px) {

    body.cap-final-login-active .cap-login-final-brand-title {
        gap: 9px !important;
    }

    body.cap-final-login-active .cap-login-final-brand-mark {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    body.cap-final-login-active .cap-login-final-brand-link {
        font-size: clamp(16px, 5vw, 20px) !important;
    }

    body.cap-final-login-active .cap-login-final-kicker {
        margin-left: 47px !important;
        font-size: 11px !important;
    }
}


/*****************************************************************************
 * CAP_REMOVE_DUPLICATE_PASSWORD_EYE_V1
 *****************************************************************************/

/*
 * Keep only our final eye inside the password field.
 */
body.cap-final-login-active
.cap-login-final-form
.cap-login-final-eye {
    display: inline-flex !important;
}

/*
 * Retire all known legacy UsersWP/password controls.
 */
body.cap-final-login-active
.cap-login-final-form
.uwp-password-toggle,

body.cap-final-login-active
.cap-login-final-form
.uwp-password-icon,

body.cap-final-login-active
.cap-login-final-form
.uwp-show-password,

body.cap-final-login-active
.cap-login-final-form
.uwp-password-show,

body.cap-final-login-active
.cap-login-final-form
.password-toggle,

body.cap-final-login-active
.cap-login-final-form
.show-password,

body.cap-final-login-active
.cap-login-final-form
.cap-password-inline-eye,

body.cap-final-login-active
.cap-login-final-form
.cap-password-eye-retired,

body.cap-final-login-active
.cap-login-final-form
.cap-login-eye-orphan {
    display: none !important;
}

/*
 * Hide a leftover empty password-control row after the actual password field.
 */
body.cap-final-login-active
.cap-login-final-form
.cap-legacy-eye-row-removed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/*****************************************************************************
 * CAP_AUTHORITATIVE_PASSWORD_EYE_CSS_V1
 *****************************************************************************/

body.cap-final-login-active
.cap-authoritative-password-row {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

body.cap-final-login-active
.cap-authoritative-password-row
input {
    width: 100% !important;

    margin: 0 !important;

    padding-right: 52px !important;
}

body.cap-final-login-active
.cap-password-eye-final {
    position: absolute !important;

    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #5e6e85 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 500 !important;
}

body.cap-final-login-active
.cap-password-eye-final:hover,
body.cap-final-login-active
.cap-password-eye-final:focus-visible {
    background: #f1f5f9 !important;
    color: #08275b !important;
}

/*
 * Explicitly retire older CAP eye implementations.
 */
body.cap-final-login-active
.cap-password-inline-eye,

body.cap-final-login-active
.cap-final-password-toggle,

body.cap-final-login-active
.cap-login-password-eye,

body.cap-final-login-active
.uwp-password-toggle,

body.cap-final-login-active
.uwp-password-icon,

body.cap-final-login-active
.uwp-show-password,

body.cap-final-login-active
.uwp-password-show,

body.cap-final-login-active
.password-toggle,

body.cap-final-login-active
.show-password {
    display: none !important;
}


/*****************************************************************************
 * CAP_USE_NATIVE_USERSWP_EYE_V1
 *
 * UsersWP owns password visibility.
 *****************************************************************************/

/*
 * CAP-created password eyes are permanently retired.
 */
body.cap-final-login-active
.cap-password-eye-final,

body.cap-final-login-active
.cap-login-final-eye,

body.cap-final-login-active
.cap-login-password-eye,

body.cap-final-login-active
.cap-password-inline-eye,

body.cap-final-login-active
.cap-final-password-toggle {
    display: none !important;
}

/*
 * UsersWP password field wrapper.
 */
body.cap-final-login-active
.cap-login-final-form
.uwp-password-wrap
.input-group {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

/*
 * Native UsersWP password input.
 */
body.cap-final-login-active
.cap-login-final-form
.uwp-password-wrap
.input-group
input#password {
    width: 100% !important;

    padding-right: 52px !important;

    margin: 0 !important;

    border-radius: 11px !important;
}

/*
 * Native UsersWP password eye.
 */
body.cap-final-login-active
.cap-login-final-form
.uwp-password-wrap
.input-group
> .input-group-text {
    position: absolute !important;

    top: 50% !important;
    right: 9px !important;
    bottom: auto !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #60718a !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 100 !important;
}

body.cap-final-login-active
.cap-login-final-form
.uwp-password-wrap
.input-group
> .input-group-text:hover {
    background: #f2f5f9 !important;
    color: #08275b !important;
}

/*
 * Only one clean visible label per field.
 */
body.cap-final-login-active
.cap-login-final-form
.cap-login-field-label {
    display: block !important;

    margin:
        0
        0
        6px
        !important;

    color: #0b2856 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

/*
 * Hide UsersWP's original accessibility label after CAP installs
 * the replacement accessible label.
 */
body.cap-final-login-active
.cap-login-final-form
label.cap-userswp-original-label {
    display: none !important;
}


/*****************************************************************************
 * CAP_LOGIN_RELEASE_FINISH_V2
 *****************************************************************************/

/*****************************************************************************
 * REMEMBER THIS DEVICE
 *****************************************************************************/

body.cap-final-login-active
.cap-remember-device-row {
    margin:
        10px
        0
        15px
        !important;

    padding: 0 !important;
}

body.cap-final-login-active
.cap-remember-device-row
input[type="checkbox"] {
    vertical-align: middle !important;

    margin:
        0
        7px
        0
        0
        !important;
}

body.cap-final-login-active
.cap-remember-device-label {
    display: inline !important;

    margin: 0 !important;

    color: #0b2856 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    cursor: pointer !important;
}

body.cap-final-login-active
.cap-remember-device-helper {
    margin:
        5px
        0
        0
        24px
        !important;

    color: #6b7890 !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
}


/*****************************************************************************
 * FINAL CARD GEOMETRY
 *****************************************************************************/

body.cap-final-login-active
.cap-login-final-stage {
    width: 100% !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    padding:
        14px
        !important;
}

body.cap-final-login-active
.cap-login-final-card {
    width: min(100%, 430px) !important;
    max-width: 430px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: auto !important;

    padding:
        22px
        24px
        !important;
}

body.cap-final-login-active
.cap-login-final-brand-link {
    white-space: nowrap !important;

    color: #08275b !important;
    text-decoration: none !important;
}

body.cap-final-login-active
.cap-login-final-brand-link:hover,
body.cap-final-login-active
.cap-login-final-brand-link:focus {
    color: #08275b !important;
    text-decoration: none !important;
}


/*****************************************************************************
 * TABLET
 *****************************************************************************/

@media (max-width: 1024px) {

    body.cap-final-login-active
    .cap-login-final-stage {
        padding: 14px !important;
    }
}


@media (max-width: 768px) {

    body.cap-final-login-active
    .cap-login-final-card {
        width: min(100%, 420px) !important;

        padding:
            20px
            19px
            !important;
    }
}


/*****************************************************************************
 * 430PX
 *****************************************************************************/

@media (max-width: 430px) {

    body.cap-final-login-active
    .cap-login-final-stage {
        padding:
            8px
            10px
            !important;
    }

    body.cap-final-login-active
    .cap-login-final-card {
        width: 100% !important;

        padding:
            18px
            16px
            !important;

        border-radius: 15px !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-link {
        font-size: 18px !important;
    }

    body.cap-final-login-active
    .cap-login-final-heading {
        font-size: 31px !important;
    }
}


/*****************************************************************************
 * 390PX
 *****************************************************************************/

@media (max-width: 390px) {

    body.cap-final-login-active
    .cap-login-final-card {
        padding:
            16px
            14px
            !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-title {
        gap: 8px !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-mark {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-link {
        font-size: 17px !important;
    }

    body.cap-final-login-active
    .cap-login-final-kicker {
        margin-left: 44px !important;

        font-size: 10px !important;
    }
}


/*****************************************************************************
 * 375PX
 *****************************************************************************/

@media (max-width: 375px) {

    body.cap-final-login-active
    .cap-login-final-heading {
        font-size: 29px !important;
    }

    body.cap-final-login-active
    .cap-login-final-description {
        font-size: 14px !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-link {
        font-size: 16px !important;
    }
}


/*****************************************************************************
 * 320PX
 *****************************************************************************/

@media (max-width: 320px) {

    body.cap-final-login-active
    .cap-login-final-stage {
        padding: 6px !important;
    }

    body.cap-final-login-active
    .cap-login-final-card {
        padding:
            13px
            10px
            !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-title {
        gap: 6px !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-mark {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand-link {
        font-size: 14px !important;
    }

    body.cap-final-login-active
    .cap-login-final-heading {
        font-size: 26px !important;
    }

    body.cap-final-login-active
    .cap-remember-device-helper {
        margin-left: 20px !important;

        font-size: 11px !important;
    }
}


/*****************************************************************************
 * SHORT DESKTOP VIEWPORTS
 *****************************************************************************/

@media (max-height: 720px) and (min-width: 601px) {

    body.cap-final-login-active
    .cap-login-final-stage {
        align-items: flex-start !important;

        padding:
            7px
            14px
            !important;
    }

    body.cap-final-login-active
    .cap-login-final-card {
        margin:
            0
            auto
            !important;

        padding:
            13px
            22px
            !important;
    }

    body.cap-final-login-active
    .cap-login-final-brand {
        margin-bottom: 9px !important;
    }

    body.cap-final-login-active
    .cap-login-final-description {
        margin-bottom: 8px !important;
    }

    body.cap-final-login-active
    .cap-remember-device-row {
        margin:
            7px
            0
            9px
            !important;
    }

    body.cap-final-login-active
    .cap-remember-device-helper {
        font-size: 11px !important;
    }
}


/*****************************************************************************
 * CAP_PRODUCTION_OPERATIONS_UI_V1
 *****************************************************************************/

/*****************************************************************************
 * UNIFIED HOLDER HEADER
 *****************************************************************************/

.cap10-header,
.capx-header {
    background: #ffffff;
}

.cap10-header-inner,
.capx-header-inner {
    width: 100% !important;
    max-width: 1320px !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 24px !important;

    min-height: 72px !important;

    padding:
        12px
        24px
        !important;
}

.cap10-brand,
.capx-brand {
    display: inline-flex !important;
    align-items: center !important;

    gap: 12px !important;

    flex: 0 1 auto !important;

    white-space: nowrap !important;
}

.cap10-user,
.capx-user {
    margin-left: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 20px !important;

    white-space: nowrap !important;
}

.cap10-user-name,
.capx-user-name {
    margin: 0 !important;

    line-height: 1.2 !important;
}

.cap10-user a,
.capx-user a {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    line-height: 1.2 !important;
}


/*****************************************************************************
 * NAVIGATION
 *****************************************************************************/

.cap10-nav,
.capx-nav {
    width: 100% !important;
}

.cap10-nav-inner,
.capx-nav-inner {
    max-width: 1320px !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;

    gap: 0 !important;

    padding:
        0
        24px
        !important;
}

.cap10-nav a,
.capx-nav a {
    min-height: 56px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        0
        22px
        !important;

    white-space: nowrap !important;
}


/*****************************************************************************
 * TRANSFER ACTIVITY
 *****************************************************************************/

.cap-ops-activity-divider {
    height: 1px;

    margin:
        18px
        0
        16px;

    background:
        #e4eaf2;
}

.cap-ops-transfer-activity h4 {
    margin:
        0
        0
        10px;

    color:
        #08285c;

    font-size:
        15px;
}

.cap-ops-transfer-activity-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    padding:
        12px
        0
        !important;

    border-top:
        1px solid #edf1f6;

    color:
        inherit !important;

    text-decoration:
        none !important;
}

.cap-ops-transfer-activity-row:first-of-type {
    border-top: 0;
}

.cap-ops-transfer-activity-row > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.cap-ops-transfer-activity-row strong {
    color:
        #08285c;
}

.cap-ops-transfer-activity-row span,
.cap-ops-transfer-activity-row small {
    color:
        #66758e;
}

.cap-ops-transfer-meta {
    text-align: right;
}

.cap-ops-full-transfer-activity {
    margin-top:
        24px !important;
}


/*****************************************************************************
 * REQUEST INFORMATION
 *****************************************************************************/

.cap-ops-request-info {
    margin: 0;
}

.cap-ops-request-info > div {
    display: grid;

    grid-template-columns:
        minmax(110px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 14px;

    padding:
        11px
        0;

    border-bottom:
        1px solid #edf1f6;
}

.cap-ops-request-info > div:last-child {
    border-bottom: 0;
}

.cap-ops-request-info dt {
    color:
        #65748c;

    font-size:
        13px;

    font-weight:
        600;
}

.cap-ops-request-info dd {
    margin: 0;

    color:
        #08285c;

    font-weight:
        700;

    overflow-wrap:
        anywhere;
}


/*****************************************************************************
 * TABLET
 *****************************************************************************/

@media (max-width: 900px) {

    .cap10-header-inner,
    .capx-header-inner {
        gap: 14px !important;

        padding:
            12px
            16px
            !important;
    }

    .cap10-user,
    .capx-user {
        gap: 12px !important;
    }

    .cap10-nav-inner,
    .capx-nav-inner {
        overflow-x: auto !important;

        justify-content: flex-start !important;

        padding:
            0
            12px
            !important;
    }

    .cap10-nav a,
    .capx-nav a {
        flex:
            0
            0
            auto;

        padding:
            0
            16px
            !important;
    }
}


/*****************************************************************************
 * MOBILE
 *****************************************************************************/

@media (max-width: 600px) {

    .cap10-header-inner,
    .capx-header-inner {
        flex-wrap: wrap !important;

        min-height: 0 !important;

        padding:
            12px
            14px
            !important;
    }

    .cap10-brand,
    .capx-brand {
        max-width:
            calc(100% - 10px);
    }

    .cap10-user,
    .capx-user {
        width: 100% !important;

        margin-left: 0 !important;

        justify-content: space-between !important;
    }

    .cap10-nav a,
    .capx-nav a {
        min-height:
            48px !important;

        padding:
            0
            14px
            !important;

        font-size:
            13px !important;
    }

    .cap-ops-transfer-activity-row {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            7px !important;
    }

    .cap-ops-transfer-meta {
        text-align:
            left;
    }

    .cap-ops-request-info > div {
        grid-template-columns:
            1fr;
        gap:
            4px;
    }
}