/* =========================================================
   ThemeWP.vn SSO UI v2
   Keycloak 26.7.3 / keycloak.v2
   ========================================================= */

:root {
    --twp-primary: #0b86a6;
    --twp-primary-dark: #086e8b;
    --twp-teal: #18a2a0;

    --twp-text: #172033;
    --twp-soft: #667085;
    --twp-border: #dce4eb;

    --twp-page: #f2f7fa;
    --twp-white: #fff;

    --twp-radius: 10px;
    --twp-card-radius: 20px;

    --twp-shadow:
        0 26px 70px rgba(35, 68, 88, .14);
}


/* =========================================================
   PAGE
   ========================================================= */

html,
body {
    min-height: 100%;
}

body#keycloak-bg {
    min-height: 100vh;

    margin: 0 !important;

    color: var(--twp-text);

    font-family:
        "Be Vietnam Pro",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(9, 135, 170, .09),
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 84%,
            rgba(22, 163, 158, .08),
            transparent 30%
        ),
        var(--twp-page) !important;
}


/* =========================================================
   KEYCLOAK OUTER
   ========================================================= */

body#keycloak-bg > .pf-v5-c-login {
    width: 100% !important;
    min-height: 100vh !important;

    display: flex !important;

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

    padding: 42px 24px !important;

    box-sizing: border-box !important;

    background: transparent !important;
}


/* =========================================================
   CUSTOM CARD
   ========================================================= */

.twp-auth-shell {
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;

    min-height: 620px !important;

    display: grid !important;

    grid-template-columns:
        41%
        59% !important;

    margin: 0 auto !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius:
        var(--twp-card-radius) !important;

    background:
        var(--twp-white) !important;

    box-shadow:
        var(--twp-shadow) !important;
}


/* =========================================================
   LEFT BRAND
   ========================================================= */

.twp-brand-panel {
    position: relative;

    min-width: 0;

    padding: 46px 42px !important;

    overflow: hidden;

    color: #fff;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 105% -5%,
            rgba(126, 238, 218, .27),
            transparent 36%
        ),
        radial-gradient(
            circle at -15% 110%,
            rgba(0, 73, 130, .30),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #087b9f 0%,
            #0c98a6 52%,
            #15928e 100%
        );
}

.twp-brand-panel::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -185px;
    top: 105px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.09);
}

.twp-brand-panel::after {
    content: "";

    position: absolute;

    width: 245px;
    height: 245px;

    left: -125px;
    bottom: -125px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.045);
}


.twp-brand-inner {
    position: relative;
    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;
}


.twp-brand-logo {
    margin-bottom: 40px;
}

.twp-brand-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 220px;
    max-height: 58px;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);
}


.twp-brand-copy {
    max-width: 320px;
}

.twp-brand-copy h2 {
    margin:
        0
        0
        15px !important;

    color:
        #fff !important;

    font-size:
        29px !important;

    line-height:
        1.29 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.45px;
}

.twp-brand-copy > p {
    margin: 0;

    color:
        rgba(255,255,255,.84);

    font-size:
        13px;

    line-height:
        1.7;
}


.twp-benefit-list {
    margin-top:
        37px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        21px;
}


.twp-benefit-item {
    display:
        grid;

    grid-template-columns:
        36px
        minmax(0, 1fr);

    gap:
        12px;

    align-items:
        start;
}


.twp-check {
    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.14);

    color:
        #fff;

    font-weight:
        700;
}


.twp-benefit-item strong {
    display:
        block;

    margin:
        1px
        0
        3px;

    color:
        #fff;

    font-size:
        13px;

    line-height:
        1.4;

    font-weight:
        600;
}


.twp-benefit-item p {
    margin:
        0;

    color:
        rgba(255,255,255,.73);

    font-size:
        11.5px;

    line-height:
        1.55;
}


.twp-brand-footer {
    margin-top:
        auto;

    padding-top:
        30px;

    color:
        rgba(255,255,255,.59);

    font-size:
        10.5px;
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.twp-auth-main {
    min-width:
        0 !important;

    width:
        100% !important;

    padding:
        50px
        62px
        44px !important;

    box-sizing:
        border-box !important;

    background:
        #fff !important;
}


/* old realm title */
.twp-auth-main > #kc-header {
    display:
        none !important;
}


/* =========================================================
   CRITICAL FIX:
   REMOVE PATTERNFLY LOGIN GRID
   ========================================================= */

.twp-auth-main > .pf-v5-c-login__main {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    grid-template-columns:
        none !important;

    grid-template-rows:
        none !important;

    grid-column:
        auto !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.twp-auth-main .pf-v5-c-login__main-header,
.twp-auth-main .pf-v5-c-login__main-body,
.twp-auth-main .pf-v5-c-login__main-footer,
.twp-auth-main .pf-v5-c-login__main-footer-band,
.twp-auth-main .pf-v5-c-login__main-footer-band-item {
    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    box-sizing:
        border-box !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.twp-auth-main .pf-v5-c-login__main-header {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items:
        start !important;

    gap:
        18px !important;

    margin:
        0
        0
        29px !important;

    padding:
        0 !important;
}


.twp-title-wrap {
    min-width:
        0;

    width:
        100%;
}


#kc-page-title {
    width:
        auto !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--twp-text) !important;

    font-size:
        28px !important;

    line-height:
        1.27 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.45px !important;

    white-space:
        normal !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;
}


.twp-login-subtitle {
    margin:
        7px
        0
        0;

    color:
        var(--twp-soft);

    font-size:
        13px;

    line-height:
        1.55;
}


.twp-auth-main .pf-v5-c-login__main-header-utilities {
    width:
        auto !important;

    min-width:
        105px;

    margin:
        0 !important;

    padding:
        0 !important;

    justify-self:
        end !important;
}


/* THEMEWP UI V13.1: dead rule removed (#login-select-toggle no longer exists in markup). */


/* =========================================================
   BODY / FORM WIDTH RESET
   ========================================================= */

.twp-auth-main .pf-v5-c-login__main-body {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


#kc-form,
#kc-form-wrapper,
#kc-social-providers,
#kc-social-providers ul,
#kc-social-providers li,
#kc-form-login,
#kc-form-options,
#kc-form-buttons {
    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;
}


/* prevent utility PF body class on Google ul shrinking */
#kc-social-providers ul.pf-v5-c-login__main-body {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    width:
        100% !important;

    max-width:
        none !important;
}


/* =========================================================
   GOOGLE
   ========================================================= */

#kc-social-providers {
    margin:
        0 !important;

    padding:
        0 !important;
}


#kc-social-providers li {
    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


#kc-social-providers a {
    width:
        100% !important;

    min-height:
        50px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        9px;

    padding:
        0
        16px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid
        var(--twp-border) !important;

    border-radius:
        var(--twp-radius) !important;

    background:
        #fff !important;

    color:
        var(--twp-text) !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;
}


#kc-social-providers a:hover {
    border-color:
        #b8c7d2 !important;

    background:
        #f9fbfc !important;

    text-decoration:
        none !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.twp-login-divider {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        24px
        0;

    color:
        #98a2b3;

    font-size:
        11.5px;
}


.twp-login-divider::before,
.twp-login-divider::after {
    content:
        "";

    height:
        1px;

    flex:
        1;

    background:
        #e9edf1;
}


.twp-login-divider span {
    white-space:
        nowrap;
}


/* =========================================================
   FORM
   ========================================================= */

.twp-auth-main form {
    width:
        100% !important;

    max-width:
        none !important;
}


.twp-auth-main label {
    color:
        #344054 !important;

    font-size:
        12.5px !important;

    line-height:
        1.4;

    font-weight:
        600 !important;
}


.twp-auth-main input[type="text"],
.twp-auth-main input[type="email"],
.twp-auth-main input[type="password"] {
    width:
        100% !important;

    min-height:
        49px !important;

    padding:
        10px
        13px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid
        var(--twp-border) !important;

    border-radius:
        var(--twp-radius) !important;

    background:
        #fff !important;

    color:
        var(--twp-text) !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    box-shadow:
        none !important;
}


.twp-auth-main input[type="text"]:focus,
.twp-auth-main input[type="email"]:focus,
.twp-auth-main input[type="password"]:focus {
    border-color:
        var(--twp-primary) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        rgba(11,134,166,.10) !important;
}


/* password input group */
.twp-auth-main .pf-v5-c-input-group {
    width:
        100% !important;

    max-width:
        none !important;
}


/* =========================================================
   REMEMBER / FORGOT
   ========================================================= */

#kc-form-options {
    margin-top:
        4px !important;

    color:
        var(--twp-soft);

    font-size:
        12px;
}


.twp-auth-main input[type="checkbox"] {
    accent-color:
        var(--twp-primary);
}


/* =========================================================
   BUTTON
   ========================================================= */

#kc-form-buttons {
    margin-top:
        24px !important;
}


#kc-login,
.twp-auth-main input[type="submit"],
.twp-auth-main button[type="submit"],
.twp-auth-main .pf-v5-c-button.pf-m-primary {
    width:
        100% !important;

    min-height:
        50px !important;

    border:
        0 !important;

    border-radius:
        var(--twp-radius) !important;

    background:
        linear-gradient(
            135deg,
            #0b86a6,
            #0875c5
        ) !important;

    color:
        #fff !important;

    font-family:
        inherit !important;

    font-size:
        13.5px !important;

    font-weight:
        600 !important;

    box-shadow:
        0 8px 19px
        rgba(6,112,167,.17) !important;
}


#kc-login:hover,
.twp-auth-main button[type="submit"]:hover {
    background:
        linear-gradient(
            135deg,
            #087491,
            #0767ad
        ) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

.twp-auth-main a {
    color:
        var(--twp-primary) !important;

    text-decoration:
        none !important;
}


.twp-auth-main a:hover {
    color:
        var(--twp-primary-dark) !important;

    text-decoration:
        underline !important;
}


/* =========================================================
   ALERT
   ========================================================= */

.twp-auth-main .pf-v5-c-alert {
    width:
        100% !important;

    box-sizing:
        border-box;

    border-radius:
        9px !important;

    font-family:
        inherit !important;
}


.kc-feedback-text {
    line-height:
        1.5;
}


/* =========================================================
   INFO
   ========================================================= */

#kc-info {
    width:
        100% !important;

    margin:
        26px
        0
        0 !important;

    padding:
        20px
        0
        0 !important;

    box-sizing:
        border-box;

    border-top:
        1px solid
        #edf0f3 !important;

    background:
        transparent !important;
}


/* =========================================================
   MOBILE LOGO
   ========================================================= */

.twp-mobile-brand {
    display:
        none;

    margin-bottom:
        31px;
}


.twp-mobile-brand img {
    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        205px;

    max-height:
        54px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    body#keycloak-bg > .pf-v5-c-login {
        padding:
            24px
            16px !important;
    }


    .twp-auth-shell {
        width:
            min(560px,100%) !important;

        min-height:
            0 !important;

        display:
            block !important;

        border-radius:
            16px !important;
    }


    .twp-brand-panel {
        display:
            none !important;
    }


    .twp-auth-main {
        padding:
            38px
            34px
            34px !important;
    }


    .twp-mobile-brand {
        display:
            block;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    body#keycloak-bg {
        background:
            #fff !important;
    }


    body#keycloak-bg > .pf-v5-c-login {
        display:
            block !important;

        min-height:
            100vh !important;

        padding:
            0 !important;
    }


    .twp-auth-shell {
        width:
            100% !important;

        min-height:
            100vh !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;
    }


    .twp-auth-main {
        min-height:
            100vh;

        padding:
            28px
            21px
            32px !important;
    }


    .twp-mobile-brand img {
        max-width:
            185px;
    }


    .twp-auth-main .pf-v5-c-login__main-header {
        grid-template-columns:
            minmax(0,1fr)
            auto !important;

        gap:
            10px !important;
    }


    #kc-page-title {
        font-size:
            23px !important;
    }


    .twp-login-subtitle {
        font-size:
            12px;
    }

}
/* ===== THEMEWP UI V3 MOCKUP OVERRIDES ===== */

/* ===== THEMEWP UI V3 MOCKUP OVERRIDES ===== */


/* ---------------------------------------------------------
   PAGE CHROME
--------------------------------------------------------- */

body#keycloak-bg {
    position: relative;
}

.twp-page-brand {
    position: absolute;

    top: 22px;
    left: 42px;

    z-index: 30;
}

.twp-page-brand img {
    display: block;

    width: auto;
    height: auto;

    max-width: 238px;
    max-height: 58px;
}


.twp-page-footer {
    position: absolute;

    left: 42px;
    right: 42px;
    bottom: 22px;

    z-index: 20;

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

    color: #667085;

    font-size: 11px;
    line-height: 1.4;

    pointer-events: none;
}


/* ---------------------------------------------------------
   PAGE / CARD SCALE
--------------------------------------------------------- */

body#keycloak-bg > .pf-v5-c-login {
    padding:
        92px
        24px
        82px !important;
}


.twp-auth-shell {
    width:
        min(1135px, 100%) !important;

    max-width:
        1135px !important;

    min-height:
        705px !important;

    grid-template-columns:
        47%
        53% !important;

    border-radius:
        18px !important;
}


/* ---------------------------------------------------------
   LEFT MOCKUP PANEL
--------------------------------------------------------- */

.twp-brand-panel {
    padding:
        55px
        58px
        38px !important;
}


.twp-brand-logo {
    margin-bottom:
        38px !important;
}


.twp-brand-logo img {
    max-width:
        285px !important;

    max-height:
        72px !important;
}


.twp-brand-copy {
    max-width:
        395px !important;
}


.twp-brand-copy h2 {
    font-size:
        34px !important;

    line-height:
        1.24 !important;

    letter-spacing:
        -.65px !important;
}


.twp-brand-copy > p {
    font-size:
        15px !important;

    line-height:
        1.62 !important;
}


.twp-benefit-list {
    margin-top:
        28px !important;

    gap:
        19px !important;
}


.twp-check {
    width:
        40px !important;

    height:
        40px !important;

    font-size:
        18px !important;
}


.twp-benefit-item {
    grid-template-columns:
        43px
        minmax(0,1fr) !important;

    gap:
        13px !important;
}


.twp-benefit-item strong {
    font-size:
        14px !important;
}


.twp-benefit-item p {
    font-size:
        12px !important;
}


/* ---------------------------------------------------------
   ECOSYSTEM ILLUSTRATION
--------------------------------------------------------- */

.twp-ecosystem-art {
    position: relative;

    height: 155px;

    margin:
        auto
        0
        3px;

    transform:
        translateY(9px);
}


.twp-mini-site {
    position: absolute;

    width:
        138px;

    height:
        82px;

    padding:
        11px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:
        7px;

    background:
        rgba(255,255,255,.90);

    color:
        #157998;

    box-shadow:
        0 11px 25px
        rgba(0,55,80,.14);

    font-size:
        10px;

    font-weight:
        600;
}


.twp-mini-site::before {
    content: "";

    display: block;

    height: 5px;

    margin-bottom:
        12px;

    border-radius:
        3px;

    background:
        #1486a8;

    opacity:
        .78;
}


.twp-mini-left {
    left:
        -17px;

    top:
        29px;

    transform:
        rotate(-3deg);
}


.twp-mini-right {
    right:
        -13px;

    top:
        25px;

    transform:
        rotate(3deg);
}


.twp-laptop {
    position: absolute;

    left: 50%;
    bottom: 7px;

    width:
        220px;

    transform:
        translateX(-50%);
}


.twp-laptop-screen {
    height:
        118px;

    padding:
        24px
        18px;

    box-sizing:
        border-box;

    border:
        7px solid
        #263e52;

    border-radius:
        8px
        8px
        4px
        4px;

    background:
        linear-gradient(
            150deg,
            #eff9fc,
            #fff
        );

    color:
        #0c7e9c;
}


.twp-laptop-logo {
    display:
        block;

    margin-bottom:
        18px;

    font-size:
        14px;

    font-weight:
        700;
}


.twp-laptop-line {
    display:
        block;

    width:
        80%;

    height:
        6px;

    margin-bottom:
        7px;

    border-radius:
        4px;

    background:
        #b9dae4;
}


.twp-laptop-line.twp-short {
    width:
        56%;
}


.twp-laptop-base {
    width:
        250px;

    height:
        9px;

    margin-left:
        -15px;

    border-radius:
        2px
        2px
        9px
        9px;

    background:
        #d4e1e7;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.13);
}


.twp-plant {
    position: absolute;

    right:
        1px;

    bottom:
        0;

    width:
        56px;

    height:
        87px;
}


.twp-plant b {
    position: absolute;

    left:
        12px;

    bottom:
        0;

    width:
        39px;

    height:
        35px;

    border-radius:
        4px
        4px
        12px
        12px;

    background:
        #e8f0ef;
}


.twp-plant i {
    position: absolute;

    left:
        25px;

    bottom:
        28px;

    width:
        13px;

    height:
        46px;

    border-radius:
        100%
        0
        100%
        0;

    background:
        #63bd7d;

    transform-origin:
        bottom;
}


.twp-plant i:nth-child(1) {
    transform:
        rotate(-38deg);
}


.twp-plant i:nth-child(2) {
    transform:
        rotate(3deg);

    height:
        58px;
}


.twp-plant i:nth-child(3) {
    transform:
        rotate(38deg);
}


.twp-brand-footer {
    padding-top:
        5px !important;
}


/* ---------------------------------------------------------
   RIGHT MOCKUP PANEL
--------------------------------------------------------- */

.twp-auth-main {
    padding:
        64px
        64px
        45px !important;
}


/* Remove blue PatternFly top border */

.twp-auth-main > .pf-v5-c-login__main {
    border:
        0 !important;

    border-top:
        0 !important;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.twp-auth-main .pf-v5-c-login__main-header {
    display:
        block !important;

    margin-bottom:
        26px !important;

    border:
        0 !important;
}


.twp-title-wrap::before {
    content:
        "✓";

    width:
        44px;

    height:
        44px;

    margin-bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #0c8aa8,
            #14a3ac
        );

    color:
        #fff;

    font-size:
        20px;

    font-weight:
        700;

    box-shadow:
        0 7px 17px
        rgba(9,133,164,.18);
}


#kc-page-title {
    font-size:
        35px !important;

    line-height:
        1.18 !important;

    letter-spacing:
        -.7px !important;
}


.twp-login-subtitle {
    margin-top:
        8px !important;

    max-width:
        430px;

    font-size:
        14px !important;

    line-height:
        1.55 !important;
}


/* ---------------------------------------------------------
   LANGUAGE - OUTSIDE CARD
--------------------------------------------------------- */

.twp-auth-main .pf-v5-c-login__main-header-utilities {
    position:
        fixed !important;

    top:
        20px;

    right:
        34px;

    z-index:
        100;

    min-width:
        0 !important;
}


/* ---------------------------------------------------------
   HIDE KEYCLOAK'S ORIGINAL SOCIAL HEADING
--------------------------------------------------------- */

#kc-social-providers > h2,
#kc-social-providers > h3,
#kc-social-providers > .pf-v5-c-title,
#kc-social-providers .kc-social-section-title {
    display:
        none !important;
}


/* ---------------------------------------------------------
   GOOGLE
--------------------------------------------------------- */

#kc-social-providers a {
    min-height:
        56px !important;

    font-size:
        14px !important;

    border-color:
        #ccd7df !important;

    border-radius:
        9px !important;
}


/* ---------------------------------------------------------
   DIVIDER
--------------------------------------------------------- */

.twp-login-divider {
    margin:
        27px
        0 !important;

    font-size:
        12px !important;
}


/* ---------------------------------------------------------
   FIELDS
--------------------------------------------------------- */

.twp-auth-main label {
    font-size:
        13px !important;
}


#username {
    padding-left:
        46px !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23798a9a' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        15px
        center !important;
}


#password {
    padding-left:
        46px !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23798a9a' stroke-width='1.8'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        15px
        center !important;
}


.twp-auth-main input[type="text"],
.twp-auth-main input[type="email"],
.twp-auth-main input[type="password"] {
    min-height:
        54px !important;

    border-radius:
        9px !important;

    font-size:
        14px !important;
}


/* ---------------------------------------------------------
   LOGIN BUTTON
--------------------------------------------------------- */

#kc-login,
.twp-auth-main input[type="submit"],
.twp-auth-main button[type="submit"] {
    min-height:
        56px !important;

    font-size:
        15px !important;

    border-radius:
        9px !important;
}


/* ---------------------------------------------------------
   AFTER LOGIN EXTRAS
--------------------------------------------------------- */

.twp-login-extras {
    margin-top:
        27px;
}


.twp-no-account {
    padding:
        18px
        0
        19px;

    text-align:
        center;

    border-top:
        1px solid
        #e9eef2;

    color:
        #5e6c7b;

    font-size:
        12.5px;
}


.twp-no-account strong {
    margin-left:
        4px;

    color:
        #0b82b0;

    font-weight:
        600;
}


.twp-security-box {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        15px
        17px;

    border-radius:
        10px;

    background:
        #f0f7fb;

    color:
        #304559;
}


.twp-security-icon {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        #31536c;

    border-radius:
        9px;

    font-weight:
        700;
}


.twp-security-box strong {
    display:
        block;

    margin-bottom:
        3px;

    font-size:
        12.5px;
}


.twp-security-box div > span {
    display:
        block;

    color:
        #738394;

    font-size:
        11px;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    .twp-page-brand,
    .twp-page-footer {
        display:
            none !important;
    }

    body#keycloak-bg > .pf-v5-c-login {
        padding:
            24px
            16px !important;
    }

    .twp-auth-shell {
        width:
            min(580px,100%) !important;

        min-height:
            0 !important;
    }

    .twp-brand-panel {
        display:
            none !important;
    }

    .twp-auth-main {
        padding:
            38px
            34px
            36px !important;
    }

    .twp-mobile-brand {
        display:
            block !important;
    }

    .twp-auth-main .pf-v5-c-login__main-header-utilities {
        position:
            absolute !important;

        top:
            22px;

        right:
            22px;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {

    .twp-auth-main {
        padding:
            27px
            21px
            32px !important;
    }

    .twp-title-wrap::before {
        width:
            38px;

        height:
            38px;

        margin-bottom:
            14px;
    }

    #kc-page-title {
        font-size:
            26px !important;
    }

    .twp-login-subtitle {
        max-width:
            270px;

        font-size:
            12.5px !important;
    }

}
/* ===== THEMEWP UI V4 FINAL LOGIN REFINEMENT ===== */

/* ===== THEMEWP UI V4 FINAL LOGIN REFINEMENT ===== */


/* ---------------------------------------------------------
   TOP LEFT EXTERNAL BRAND REMOVED
--------------------------------------------------------- */

.twp-page-brand {
    display: none !important;
}


/* ---------------------------------------------------------
   PAGE SCALE
--------------------------------------------------------- */

body#keycloak-bg > .pf-v5-c-login {
    padding:
        68px
        24px
        62px !important;
}


/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.twp-auth-shell {
    width:
        min(1120px, 100%) !important;

    max-width:
        1120px !important;

    min-height:
        650px !important;

    grid-template-columns:
        46%
        54% !important;
}


/* ---------------------------------------------------------
   LEFT PANEL
--------------------------------------------------------- */

.twp-brand-panel {
    padding:
        43px
        48px
        31px !important;
}


.twp-brand-logo {
    margin-bottom:
        31px !important;
}


.twp-brand-logo img {
    max-width:
        250px !important;

    max-height:
        64px !important;
}


.twp-brand-copy {
    max-width:
        370px !important;
}


.twp-brand-copy h2 {
    margin-bottom:
        12px !important;

    font-size:
        31px !important;

    line-height:
        1.22 !important;
}


.twp-brand-copy > p {
    max-width:
        365px;

    font-size:
        13.5px !important;

    line-height:
        1.55 !important;
}


.twp-benefit-list {
    margin-top:
        25px !important;

    gap:
        16px !important;
}


.twp-benefit-item {
    grid-template-columns:
        38px
        minmax(0, 1fr) !important;

    gap:
        11px !important;
}


.twp-check {
    width:
        35px !important;

    height:
        35px !important;

    font-size:
        15px !important;
}


.twp-benefit-item strong {
    margin-bottom:
        2px !important;

    font-size:
        13px !important;
}


.twp-benefit-item p {
    font-size:
        11.3px !important;

    line-height:
        1.45 !important;
}


/* ---------------------------------------------------------
   LOWER ILLUSTRATION - SLIGHTLY COMPACT
--------------------------------------------------------- */

.twp-ecosystem-art {
    height:
        132px !important;

    transform:
        translateY(4px) !important;
}


.twp-laptop {
    width:
        196px !important;
}


.twp-laptop-screen {
    height:
        101px !important;

    padding:
        20px
        16px !important;
}


.twp-laptop-base {
    width:
        224px !important;

    margin-left:
        -14px !important;
}


.twp-mini-site {
    width:
        125px !important;

    height:
        72px !important;
}


.twp-plant {
    transform:
        scale(.88);

    transform-origin:
        bottom right;
}


/* ---------------------------------------------------------
   RIGHT PANEL
--------------------------------------------------------- */

.twp-auth-main {
    padding:
        46px
        56px
        34px !important;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.twp-auth-main .pf-v5-c-login__main-header {
    margin-bottom:
        21px !important;
}


.twp-title-wrap::before {
    width:
        39px !important;

    height:
        39px !important;

    margin-bottom:
        13px !important;

    border-radius:
        10px !important;

    font-size:
        17px !important;
}


#kc-page-title {
    font-size:
        32px !important;

    line-height:
        1.18 !important;
}


.twp-login-subtitle {
    margin-top:
        6px !important;

    max-width:
        450px !important;

    font-size:
        13.5px !important;

    line-height:
        1.5 !important;
}


/* ---------------------------------------------------------
   LANGUAGE
--------------------------------------------------------- */

.twp-auth-main .pf-v5-c-login__main-header-utilities {
    top:
        20px !important;

    right:
        35px !important;
}


/* ---------------------------------------------------------
   REMOVE KEYCLOAK DEFAULT SOCIAL TITLE / HR COMPLETELY
--------------------------------------------------------- */

#kc-social-providers > *:not(ul) {
    display:
        none !important;
}


#kc-social-providers > ul {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ---------------------------------------------------------
   GOOGLE
--------------------------------------------------------- */

#kc-social-providers a {
    min-height:
        52px !important;
}


/* ---------------------------------------------------------
   ONLY CUSTOM "HOẶC" DIVIDER
--------------------------------------------------------- */

.twp-login-divider {
    margin:
        20px
        0 !important;
}


/* ---------------------------------------------------------
   FIELDS
--------------------------------------------------------- */

.twp-auth-main input[type="text"],
.twp-auth-main input[type="email"],
.twp-auth-main input[type="password"] {
    min-height:
        51px !important;
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

#kc-form-buttons {
    margin-top:
        20px !important;
}


#kc-login,
.twp-auth-main input[type="submit"],
.twp-auth-main button[type="submit"] {
    min-height:
        52px !important;
}


/* ---------------------------------------------------------
   LOWER LOGIN AREA
--------------------------------------------------------- */

.twp-login-extras {
    margin-top:
        20px !important;
}


.twp-no-account {
    padding:
        14px
        0
        15px !important;
}


.twp-security-box {
    padding:
        12px
        15px !important;
}


.twp-security-icon {
    width:
        31px !important;

    height:
        31px !important;

    flex-basis:
        31px !important;
}


/* ---------------------------------------------------------
   PAGE FOOTER
--------------------------------------------------------- */

.twp-page-footer {
    bottom:
        16px !important;

    left:
        32px !important;

    right:
        32px !important;

    font-size:
        10.5px !important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    body#keycloak-bg > .pf-v5-c-login {
        padding:
            20px
            15px !important;
    }

    .twp-auth-shell {
        min-height:
            0 !important;
    }

    .twp-auth-main {
        padding:
            34px
            31px
            32px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {

    .twp-auth-main {
        padding:
            25px
            20px
            29px !important;
    }

    #kc-page-title {
        font-size:
            25px !important;
    }

    .twp-login-subtitle {
        max-width:
            285px !important;

        font-size:
            12.5px !important;
    }

}
/* ===== THEMEWP UI V5 COMPACT FINAL ===== */

/* ===== THEMEWP UI V5 COMPACT FINAL ===== */


/* =========================================================
   OVERALL SCALE - KHÔNG QUÁ TO
   ========================================================= */

body#keycloak-bg > .pf-v5-c-login {
    padding:
        55px
        22px
        52px !important;
}


.twp-auth-shell {
    width:
        min(1000px, 100%) !important;

    max-width:
        1000px !important;

    min-height:
        590px !important;

    grid-template-columns:
        45%
        55% !important;

    border-radius:
        17px !important;
}


/* =========================================================
   LEFT
   ========================================================= */

.twp-brand-panel {
    padding:
        37px
        40px
        26px !important;
}


.twp-brand-logo {
    margin-bottom:
        3px !important;
}


.twp-brand-logo img {
    max-width:
        222px !important;

    max-height:
        58px !important;
}


.twp-brand-tagline {
    margin:
        0
        0
        26px;

    color:
        rgba(255,255,255,.83);

    font-size:
        12.5px;

    line-height:
        1.4;

    font-weight:
        400;
}


.twp-brand-copy {
    max-width:
        355px !important;
}


.twp-brand-copy > p {
    margin:
        0 !important;

    max-width:
        350px;

    color:
        rgba(255,255,255,.92) !important;

    font-size:
        14px !important;

    line-height:
        1.55 !important;
}


.twp-benefit-list {
    margin-top:
        25px !important;

    gap:
        16px !important;
}


.twp-benefit-item {
    grid-template-columns:
        35px
        minmax(0,1fr) !important;

    gap:
        10px !important;
}


.twp-check {
    width:
        32px !important;

    height:
        32px !important;

    font-size:
        14px !important;
}


.twp-benefit-item strong {
    margin:
        0
        0
        2px !important;

    font-size:
        12.5px !important;
}


.twp-benefit-item p {
    font-size:
        10.8px !important;

    line-height:
        1.43 !important;
}


/* illustration */

.twp-ecosystem-art {
    height:
        108px !important;

    margin-top:
        auto !important;

    transform:
        translateY(2px) !important;
}


.twp-laptop {
    width:
        171px !important;
}


.twp-laptop-screen {
    height:
        85px !important;

    padding:
        15px
        13px !important;

    border-width:
        5px !important;
}


.twp-laptop-logo {
    margin-bottom:
        11px !important;

    font-size:
        11px !important;
}


.twp-laptop-base {
    width:
        196px !important;

    height:
        7px !important;

    margin-left:
        -12px !important;
}


.twp-mini-site {
    width:
        108px !important;

    height:
        61px !important;

    padding:
        8px !important;

    font-size:
        8px !important;
}


.twp-mini-site::before {
    height:
        4px !important;

    margin-bottom:
        8px !important;
}


.twp-mini-left {
    top:
        23px !important;
}


.twp-mini-right {
    top:
        21px !important;
}


.twp-plant {
    transform:
        scale(.72) !important;

    transform-origin:
        bottom right !important;
}


.twp-brand-footer {
    padding-top:
        4px !important;

    font-size:
        9.5px !important;
}


/* =========================================================
   RIGHT
   ========================================================= */

.twp-auth-main {
    padding:
        38px
        46px
        28px !important;
}


/* title */

.twp-auth-main .pf-v5-c-login__main-header {
    margin-bottom:
        17px !important;
}


.twp-title-wrap::before {
    width:
        35px !important;

    height:
        35px !important;

    margin-bottom:
        10px !important;

    border-radius:
        9px !important;

    font-size:
        15px !important;
}


#kc-page-title {
    font-size:
        29px !important;

    line-height:
        1.16 !important;
}


.twp-login-subtitle {
    margin-top:
        5px !important;

    max-width:
        410px !important;

    font-size:
        12.7px !important;

    line-height:
        1.45 !important;
}


/* =========================================================
   GOOGLE - ONLY BUTTON, NO NATIVE HEADING
   ========================================================= */

#kc-social-providers > *:not(ul),
#kc-social-providers h2,
#kc-social-providers h3,
.kc-social-section-title {
    display:
        none !important;
}


#kc-social-providers ul {
    display:
        block !important;
}


#kc-social-providers a {
    min-height:
        48px !important;

    font-size:
        13px !important;
}


/* =========================================================
   CUSTOM DIVIDER
   ========================================================= */

.twp-login-divider {
    margin:
        17px
        0 !important;

    font-size:
        11px !important;
}


/* =========================================================
   FORM
   ========================================================= */

.twp-auth-main label {
    font-size:
        11.8px !important;
}


.twp-auth-main input[type="text"],
.twp-auth-main input[type="email"],
.twp-auth-main input[type="password"] {
    min-height:
        47px !important;

    font-size:
        12.5px !important;
}


.twp-auth-main input::placeholder {
    color:
        #8b98a6 !important;

    opacity:
        1;
}


/* =========================================================
   BUTTON
   ========================================================= */

#kc-form-buttons {
    margin-top:
        17px !important;
}


#kc-login,
.twp-auth-main input[type="submit"],
.twp-auth-main button[type="submit"] {
    min-height:
        48px !important;

    font-size:
        13.5px !important;
}


/* =========================================================
   LOGIN EXTRAS
   ========================================================= */

.twp-login-extras {
    margin-top:
        15px !important;
}


.twp-no-account {
    padding:
        11px
        0
        12px !important;

    font-size:
        11px !important;
}


.twp-no-account strong {
    font-size:
        11px !important;
}


.twp-security-box {
    padding:
        10px
        13px !important;
}


.twp-security-icon {
    width:
        28px !important;

    height:
        28px !important;

    flex-basis:
        28px !important;

    border-radius:
        7px !important;
}


.twp-security-box strong {
    font-size:
        11px !important;
}


.twp-security-box div > span {
    font-size:
        9.8px !important;
}


/* THEMEWP UI V13.1: dead rule removed (#login-select-toggle no longer exists in markup). */


/* =========================================================
   LEGAL FOOTER
   ========================================================= */

.twp-page-footer {
    left:
        28px !important;

    right:
        28px !important;

    bottom:
        14px !important;

    font-size:
        9.8px !important;
}


.twp-footer-links {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    pointer-events:
        auto;
}


.twp-footer-links a {
    color:
        #667085;

    text-decoration:
        none;
}


.twp-footer-links a:hover {
    color:
        #087fa4;

    text-decoration:
        underline;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .twp-auth-shell {
        width:
            min(535px,100%) !important;

        min-height:
            0 !important;
    }


    .twp-auth-main {
        padding:
            32px
            29px
            30px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .twp-auth-main {
        padding:
            24px
            19px
            28px !important;
    }


    #kc-page-title {
        font-size:
            24px !important;
    }


    .twp-login-subtitle {
        font-size:
            12px !important;
    }

}
/* ===== THEMEWP UI V6 FLOW POLISH ===== */

/* ===== THEMEWP UI V6 FLOW POLISH ===== */


/* =========================================================
   LOGIN:
   GIỮ NGUYÊN TỶ LỆ V5
   ========================================================= */

body[data-page-id="login-login"] .twp-auth-shell {
    width:
        min(1000px,100%) !important;

    max-width:
        1000px !important;

    min-height:
        590px !important;
}


/*
 * Native empty social/footer band.
 * Login không cần khu vực này.
 */

body[data-page-id="login-login"]
.twp-auth-main
.pf-v5-c-login__main-footer-band {
    display:
        none !important;
}


/* =========================================================
   SECONDARY FLOWS:
   FORGOT / RESET / ERROR / OTP / ACTIONS

   THEMEWP UI V13.4: this entire block was historically written to
   DELIBERATELY shrink every page except Login -- smaller shell
   (900px wide, min-height:0 collapsing to content), smaller logo
   (205px vs Login's 300px), smaller tagline/benefit/illustration
   typography. Its own comments say so explicitly ("Không để panel
   trái ép card cao như màn login chính" -- don't let the left panel
   force the card as tall as Login). That was a deliberate design
   choice from an earlier round, but it directly conflicts with this
   round's explicit requirement: the left brand panel must be one
   global, visually-interchangeable component regardless of page, and
   short right-side content must not collapse the whole card.

   Root cause of the reported "Login is tall, Broker/Expired are
   short" defect: `body:not([data-page-id="login-login"]) .twp-auth-
   shell` has specificity (0,2,1) -- strictly higher than the later,
   bare `.twp-auth-shell` canonical-baseline rule (0,1,0) -- so THIS
   block was winning for every page except Login, Register and Reset
   (which have their own even-later same-specificity page-id rules
   that win on source order). Update Password, Update Profile, First
   Broker, Account Already Exists, TOTP, Recovery Codes, Info, Error,
   Session Expired, and every other page were rendering under this
   shrunk system the whole time, independent of the "canonical
   baseline" rule added in earlier rounds, which never actually won
   here.

   Fixed by keeping this same selector (same specificity, so no new
   cascade fight) but replacing every value with Login's own real,
   live-measured canonical value, confirmed via getComputedStyle
   against production: shell 860px/700px, brand-logo 300px, tagline
   14px, benefit-item strong 16.5px, illustration 188px @ scale(.98).
   Secondary pages are now computed-identical to Login for every
   left-panel property. */

body:not([data-page-id="login-login"])
.twp-auth-shell {

    width:
        min(860px,calc(100vw - 48px)) !important;

    max-width:
        860px !important;

    min-height:
        700px !important;

    height:
        auto !important;

    grid-template-columns:
        minmax(380px,.98fr)
        minmax(430px,1.02fr) !important;
}


body:not([data-page-id="login-login"])
.twp-brand-panel {

    min-height:
        700px !important;

    padding:
        34px
        40px
        22px !important;
}


body:not([data-page-id="login-login"])
.twp-brand-logo {

    margin-bottom:
        0 !important;
}


body:not([data-page-id="login-login"])
.twp-brand-logo img {

    max-width:
        300px !important;

    max-height:
        64px !important;
}


body:not([data-page-id="login-login"])
.twp-brand-tagline {

    margin:
        2px 0 0 54px !important;

    font-size:
        14px !important;
}


body:not([data-page-id="login-login"])
.twp-brand-copy > p {

    font-size:
        17px !important;

    line-height:
        1.48 !important;
}


body:not([data-page-id="login-login"])
.twp-benefit-list {

    margin-top:
        0 !important;

    gap:
        20px !important;
}


body:not([data-page-id="login-login"])
.twp-benefit-item strong {

    font-size:
        16.5px !important;
}


body:not([data-page-id="login-login"])
.twp-ecosystem-art {

    height:
        188px !important;

    margin:
        auto -38px -4px !important;

    transform:
        scale(.98) !important;

    transform-origin:
        bottom center;
}


/* =========================================================
   RIGHT PANEL SECONDARY FLOW
   ========================================================= */

body:not([data-page-id="login-login"])
.twp-auth-main {

    min-height:
        0 !important;

    height:
        auto !important;

    padding:
        40px
        48px !important;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


body:not([data-page-id="login-login"])
.twp-auth-main > .pf-v5-c-login__main {

    width:
        100% !important;
}


/* title */

body:not([data-page-id="login-login"])
#kc-page-title {

    font-size:
        27px !important;

    line-height:
        1.2 !important;
}


/* shield */

body:not([data-page-id="login-login"])
.twp-title-wrap::before {

    width:
        34px !important;

    height:
        34px !important;

    margin-bottom:
        11px !important;
}


/* =========================================================
   FORGOT PASSWORD HELPER
   ========================================================= */

.twp-flow-helper {

    margin:
        9px
        0
        0;

    max-width:
        420px;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.55;
}


.twp-info-moved {

    display:
        none !important;
}


/* =========================================================
   SECONDARY FORM
   ========================================================= */

body:not([data-page-id="login-login"])
.twp-auth-main
input[type="text"],

body:not([data-page-id="login-login"])
.twp-auth-main
input[type="email"],

body:not([data-page-id="login-login"])
.twp-auth-main
input[type="password"] {

    min-height:
        47px !important;
}


body:not([data-page-id="login-login"])
#kc-form-buttons {

    margin-top:
        18px !important;
}


body:not([data-page-id="login-login"])
#kc-login,

body:not([data-page-id="login-login"])
.twp-auth-main
input[type="submit"],

body:not([data-page-id="login-login"])
.twp-auth-main
button[type="submit"] {

    min-height:
        48px !important;
}


/* =========================================================
   KEYCLOAK FOOTER / BACK ACTIONS
   ========================================================= */

body:not([data-page-id="login-login"])
.twp-auth-main
.pf-v5-c-login__main-footer {

    margin-top:
        13px !important;

    width:
        100% !important;
}


/* =========================================================
   LOCALE
   ========================================================= */

/* THEMEWP UI V13.1: dead rule removed (#login-select-toggle no longer exists;
   native <select> replaced by the custom .twp-locale component). */


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body:not([data-page-id="login-login"])
    .twp-auth-shell {

        width:
            min(525px,100%) !important;

        display:
            block !important;
    }


    body:not([data-page-id="login-login"])
    .twp-brand-panel {

        display:
            none !important;
    }


    body:not([data-page-id="login-login"])
    .twp-auth-main {

        padding:
            34px
            30px !important;
    }

}


@media (max-width: 520px) {

    body:not([data-page-id="login-login"])
    .twp-auth-main {

        padding:
            25px
            19px
            28px !important;
    }


    body:not([data-page-id="login-login"])
    #kc-page-title {

        font-size:
            24px !important;
    }

}

/* ThemeWP registration link */
.twp-no-account .twp-register-link {
    margin-left: 4px;
    color: #0b82b0;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.twp-no-account .twp-register-link:hover,
.twp-no-account .twp-register-link:focus {
    color: #086e8b;
    text-decoration: underline;
}

/* ===== THEMEWP REGISTER PARITY V9 ===== */

/*
 * Registration uses the same overall desktop card width
 * as the main login page.
 */
body[data-page-id="login-register"] .twp-auth-shell {
    width: min(1000px, 100%) !important;
    max-width: 1000px !important;
    grid-template-columns: 42% 58% !important;
}

/*
 * Restore enough horizontal room for the brand so the
 * logo/tagline align visually with the login page.
 */
body[data-page-id="login-register"] .twp-brand-logo img {
    max-width: 230px !important;
}

/* ===== THEMEWP UI V10 LEFT BALANCE ===== */

/* Register link: text only, no border/background */
.twp-no-account .twp-register-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4;
    white-space: nowrap;
}

/* Shift brand text group slightly inward on Login + Register only */
@media (min-width: 901px) {

    body[data-page-id="login-login"] .twp-brand-logo,
    body[data-page-id="login-login"] .twp-brand-tagline,
    body[data-page-id="login-login"] .twp-brand-copy,
    body[data-page-id="login-login"] .twp-benefit-list,
    body[data-page-id="login-login"] .twp-brand-footer,

    body[data-page-id="login-register"] .twp-brand-logo,
    body[data-page-id="login-register"] .twp-brand-tagline,
    body[data-page-id="login-register"] .twp-brand-copy,
    body[data-page-id="login-register"] .twp-benefit-list,
    body[data-page-id="login-register"] .twp-brand-footer {
        transform: translateX(14px);
    }
}

/* ===== THEMEWP UI V11 MOCKUP PARITY ===== */
/* UI-only overrides for Login / Register / Reset Password. */

/* Shared left-panel content */
.twp-brand-footer{display:none !important}
.twp-benefit-list{display:flex !important;flex-direction:column !important}
.twp-benefit-item{
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) !important;
    align-items:center !important;
    gap:14px !important;
}
.twp-benefit-item > div{display:contents !important}
.twp-benefit-item > p,.twp-benefit-item div > p{display:none !important}
.twp-benefit-icon{
    width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
    background:rgba(43,203,232,.28);border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.twp-benefit-icon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.twp-benefit-item strong{margin:0 !important;color:#fff !important;font-size:16px !important;line-height:1.35 !important;font-weight:700 !important}

/* New shared vector illustration */
.twp-ecosystem-art{
    position:relative !important;display:flex !important;align-items:flex-end !important;justify-content:center !important;
    overflow:hidden !important;margin-top:auto !important;
}
.twp-brand-illustration{display:block;width:100%;height:100%;max-width:none;user-select:none;pointer-events:none}
.twp-brand-illustration .twp-art-glass{fill:rgba(255,255,255,.94);stroke:rgba(210,238,250,.82);stroke-width:1.5}
.twp-brand-illustration .twp-art-soft-line{stroke:rgba(255,255,255,.28);stroke-width:1.5;fill:none}
.twp-brand-illustration .twp-art-ui-line{fill:#b9deee}
.twp-brand-illustration .twp-art-ui-soft{fill:#d5edf6}
.twp-brand-illustration .twp-art-accent{fill:#15b8bd}
.twp-brand-illustration .twp-art-blue{fill:#1889d8}
.twp-brand-illustration .twp-art-shadow{fill:rgba(0,68,110,.16)}

/* Shared security card */
.twp-security-box-shared{margin-top:20px !important}
.twp-security-box-shared .twp-security-icon{background:transparent !important;border:0 !important;box-shadow:none !important}
.twp-security-box-shared .twp-security-icon svg{width:25px;height:25px;fill:none;stroke:#075d9b;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Footer links / social */
.twp-page-footer{pointer-events:auto !important}
.twp-footer-social{display:flex;align-items:center;justify-content:flex-end;gap:9px;white-space:nowrap}
.twp-social-label{margin-right:2px}
.twp-social-link{width:25px;height:25px;display:grid;place-items:center;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.twp-social-link:hover{transform:translateY(-1px);filter:brightness(.96)}
.twp-social-link svg{display:block;width:23px;height:23px}
.twp-facebook{color:#0866ff}.twp-youtube{color:#ff0033}
.twp-tiktok .twp-tt-main{fill:#111827}.twp-tiktok .twp-tt-cyan{fill:#25F4EE}.twp-tiktok .twp-tt-pink{fill:#FE2C55}
.twp-web{width:25px;height:25px;border:1.5px solid #8a9ab7;border-radius:50%;color:#7284a5}
.twp-web svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:901px){
    body#keycloak-bg > .pf-v5-c-login{padding:44px 24px 54px !important}

    body[data-page-id="login-login"] .twp-auth-shell,
    body[data-page-id="login-register"] .twp-auth-shell,
    body[data-page-id="login-login-reset-password"] .twp-auth-shell{
        width:min(930px,calc(100vw - 48px)) !important;max-width:930px !important;
        min-height:620px !important;height:620px !important;
        grid-template-columns:49% 51% !important;border-radius:20px !important;align-items:stretch !important;
    }

    body[data-page-id="login-login"] .twp-brand-panel,
    body[data-page-id="login-register"] .twp-brand-panel,
    body[data-page-id="login-login-reset-password"] .twp-brand-panel{
        display:block !important;min-height:620px !important;height:620px !important;
        padding:42px 46px 26px !important;
    }

    body[data-page-id="login-login"] .twp-brand-logo,
    body[data-page-id="login-register"] .twp-brand-logo,
    body[data-page-id="login-login-reset-password"] .twp-brand-logo{
        margin:0 0 3px !important;transform:none !important;
    }
    body[data-page-id="login-login"] .twp-brand-logo img,
    body[data-page-id="login-register"] .twp-brand-logo img,
    body[data-page-id="login-login-reset-password"] .twp-brand-logo img{
        max-width:285px !important;max-height:70px !important;
    }
    body[data-page-id="login-login"] .twp-brand-tagline,
    body[data-page-id="login-register"] .twp-brand-tagline,
    body[data-page-id="login-login-reset-password"] .twp-brand-tagline{
        margin:0 0 28px !important;font-size:13px !important;line-height:1.4 !important;font-weight:500 !important;transform:none !important;
    }
    body[data-page-id="login-login"] .twp-brand-copy,
    body[data-page-id="login-register"] .twp-brand-copy,
    body[data-page-id="login-login-reset-password"] .twp-brand-copy{
        max-width:370px !important;transform:none !important;
    }
    body[data-page-id="login-login"] .twp-brand-copy > p,
    body[data-page-id="login-register"] .twp-brand-copy > p,
    body[data-page-id="login-login-reset-password"] .twp-brand-copy > p{
        margin:0 !important;max-width:370px !important;color:#fff !important;
        font-size:17px !important;line-height:1.48 !important;font-weight:600 !important;
    }
    body[data-page-id="login-login"] .twp-benefit-list,
    body[data-page-id="login-register"] .twp-benefit-list,
    body[data-page-id="login-login-reset-password"] .twp-benefit-list{
        margin-top:27px !important;gap:14px !important;transform:none !important;
    }
    body[data-page-id="login-login"] .twp-ecosystem-art,
    body[data-page-id="login-register"] .twp-ecosystem-art,
    body[data-page-id="login-login-reset-password"] .twp-ecosystem-art{
        height:190px !important;margin:12px -12px -2px !important;transform:none !important;
    }

    body[data-page-id="login-login"] .twp-auth-main,
    body[data-page-id="login-register"] .twp-auth-main,
    body[data-page-id="login-login-reset-password"] .twp-auth-main{
        min-height:620px !important;height:620px !important;padding:42px 46px 28px !important;
        display:flex !important;flex-direction:column !important;justify-content:flex-start !important;
    }
    body[data-page-id="login-login"] .twp-auth-main > .pf-v5-c-login__main,
    body[data-page-id="login-register"] .twp-auth-main > .pf-v5-c-login__main,
    body[data-page-id="login-login-reset-password"] .twp-auth-main > .pf-v5-c-login__main{
        width:100% !important;min-height:0 !important;flex:1 1 auto !important;display:flex !important;flex-direction:column !important;
    }
    body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-login__main-body,
    body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-login__main-body,
    body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-login__main-body{
        flex:1 1 auto !important;display:flex !important;flex-direction:column !important;
    }
    body[data-page-id="login-login"] .twp-security-box-shared,
    body[data-page-id="login-register"] .twp-security-box-shared,
    body[data-page-id="login-login-reset-password"] .twp-security-box-shared{
        margin-top:auto !important;
    }

    /* Remove older page-specific secondary-flow shrink rules. */
    body[data-page-id="login-register"] .twp-auth-main,
    body[data-page-id="login-login-reset-password"] .twp-auth-main{
        justify-content:flex-start !important;
    }

    /* Form scale from the approved HTML mockups. */
    body[data-page-id="login-login"] #kc-page-title,
    body[data-page-id="login-register"] #kc-page-title,
    body[data-page-id="login-login-reset-password"] #kc-page-title{
        font-size:30px !important;line-height:1.16 !important;letter-spacing:-.5px !important;
    }
    body[data-page-id="login-login"] .twp-title-wrap::before,
    body[data-page-id="login-register"] .twp-title-wrap::before,
    body[data-page-id="login-login-reset-password"] .twp-title-wrap::before{
        width:40px !important;height:40px !important;margin-bottom:12px !important;border-radius:11px !important;
    }
    body[data-page-id="login-login"] .twp-auth-main label,
    body[data-page-id="login-register"] .twp-auth-main label,
    body[data-page-id="login-login-reset-password"] .twp-auth-main label{font-size:12.5px !important}
    body[data-page-id="login-login"] .twp-auth-main input[type="text"],
    body[data-page-id="login-login"] .twp-auth-main input[type="email"],
    body[data-page-id="login-login"] .twp-auth-main input[type="password"],
    body[data-page-id="login-register"] .twp-auth-main input[type="text"],
    body[data-page-id="login-register"] .twp-auth-main input[type="email"],
    body[data-page-id="login-register"] .twp-auth-main input[type="password"],
    body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="text"],
    body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="email"],
    body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="password"]{
        min-height:50px !important;font-size:13.5px !important;
    }
    body[data-page-id="login-login"] #kc-login,
    body[data-page-id="login-login"] .twp-auth-main input[type="submit"],
    body[data-page-id="login-login"] .twp-auth-main button[type="submit"],
    body[data-page-id="login-register"] .twp-auth-main input[type="submit"],
    body[data-page-id="login-register"] .twp-auth-main button[type="submit"],
    body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="submit"],
    body[data-page-id="login-login-reset-password"] .twp-auth-main button[type="submit"]{
        min-height:50px !important;font-size:14px !important;border-radius:9px !important;
    }

    .twp-page-footer{
        left:50% !important;right:auto !important;bottom:14px !important;width:min(930px,calc(100vw - 48px)) !important;
        transform:translateX(-50%) !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
        align-items:center !important;gap:14px !important;font-size:9.5px !important;
    }
    .twp-footer-links{justify-content:center !important;display:flex !important;align-items:center !important;gap:9px !important;white-space:nowrap}
}

@media (max-width:900px){
    body#keycloak-bg > .pf-v5-c-login{padding:14px 14px 16px !important;display:flex !important;flex-direction:column !important}
    body[data-page-id="login-login"] .twp-auth-shell,
    body[data-page-id="login-register"] .twp-auth-shell,
    body[data-page-id="login-login-reset-password"] .twp-auth-shell{
        width:min(620px,100%) !important;max-width:620px !important;min-height:0 !important;height:auto !important;
        display:block !important;border-radius:18px !important;overflow:hidden !important;
    }
    body[data-page-id="login-login"] .twp-brand-panel,
    body[data-page-id="login-register"] .twp-brand-panel,
    body[data-page-id="login-login-reset-password"] .twp-brand-panel{
        display:flex !important;min-height:150px !important;height:auto !important;padding:24px 22px 20px !important;text-align:center !important;
    }
    body[data-page-id="login-login"] .twp-brand-inner,
    body[data-page-id="login-register"] .twp-brand-inner,
    body[data-page-id="login-login-reset-password"] .twp-brand-inner{width:100%;align-items:center;justify-content:center}
    body[data-page-id="login-login"] .twp-brand-logo,
    body[data-page-id="login-register"] .twp-brand-logo,
    body[data-page-id="login-login-reset-password"] .twp-brand-logo{margin:0 !important;transform:none !important}
    body[data-page-id="login-login"] .twp-brand-logo img,
    body[data-page-id="login-register"] .twp-brand-logo img,
    body[data-page-id="login-login-reset-password"] .twp-brand-logo img{max-width:250px !important;max-height:58px !important}
    body[data-page-id="login-login"] .twp-brand-tagline,
    body[data-page-id="login-register"] .twp-brand-tagline,
    body[data-page-id="login-login-reset-password"] .twp-brand-tagline{margin:3px 0 0 !important;font-size:11.5px !important;transform:none !important}
    body[data-page-id="login-login"] .twp-brand-copy,
    body[data-page-id="login-register"] .twp-brand-copy,
    body[data-page-id="login-login-reset-password"] .twp-brand-copy,
    body[data-page-id="login-login"] .twp-benefit-list,
    body[data-page-id="login-register"] .twp-benefit-list,
    body[data-page-id="login-login-reset-password"] .twp-benefit-list,
    body[data-page-id="login-login"] .twp-ecosystem-art,
    body[data-page-id="login-register"] .twp-ecosystem-art,
    body[data-page-id="login-login-reset-password"] .twp-ecosystem-art{display:none !important}
    .twp-mobile-brand{display:none !important}

    body[data-page-id="login-login"] .twp-auth-main,
    body[data-page-id="login-register"] .twp-auth-main,
    body[data-page-id="login-login-reset-password"] .twp-auth-main{
        min-height:0 !important;height:auto !important;padding:28px 26px 24px !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;
    }
    body[data-page-id="login-login"] #kc-page-title,
    body[data-page-id="login-register"] #kc-page-title,
    body[data-page-id="login-login-reset-password"] #kc-page-title{text-align:center !important;font-size:27px !important}
    body[data-page-id="login-login"] .twp-title-wrap::before,
    body[data-page-id="login-register"] .twp-title-wrap::before,
    body[data-page-id="login-login-reset-password"] .twp-title-wrap::before{margin-left:auto !important;margin-right:auto !important}
    body[data-page-id="login-login"] .twp-login-subtitle{text-align:center !important}

    .twp-page-footer{
        position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;
        width:min(620px,100%) !important;margin:10px auto 0 !important;display:grid !important;grid-template-columns:1fr !important;
        justify-items:center !important;text-align:center !important;gap:7px !important;font-size:10.5px !important;
    }
    .twp-footer-links{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;flex-wrap:wrap !important}
    .twp-footer-social{display:none !important}
}

@media (max-width:520px){
    body#keycloak-bg > .pf-v5-c-login{min-height:auto !important;padding:8px 8px 12px !important}
    body[data-page-id="login-login"] .twp-auth-shell,
    body[data-page-id="login-register"] .twp-auth-shell,
    body[data-page-id="login-login-reset-password"] .twp-auth-shell{width:100% !important;min-height:0 !important;border-radius:16px !important;box-shadow:0 14px 36px rgba(27,98,151,.12) !important}
    body[data-page-id="login-login"] .twp-brand-panel,
    body[data-page-id="login-register"] .twp-brand-panel,
    body[data-page-id="login-login-reset-password"] .twp-brand-panel{min-height:126px !important;padding:20px 14px 16px !important}
    body[data-page-id="login-login"] .twp-brand-logo img,
    body[data-page-id="login-register"] .twp-brand-logo img,
    body[data-page-id="login-login-reset-password"] .twp-brand-logo img{max-width:225px !important;max-height:52px !important}
    body[data-page-id="login-login"] .twp-brand-tagline,
    body[data-page-id="login-register"] .twp-brand-tagline,
    body[data-page-id="login-login-reset-password"] .twp-brand-tagline{font-size:10.5px !important}
    body[data-page-id="login-login"] .twp-auth-main,
    body[data-page-id="login-register"] .twp-auth-main,
    body[data-page-id="login-login-reset-password"] .twp-auth-main{min-height:0 !important;padding:24px 18px 20px !important}
    body[data-page-id="login-login"] #kc-page-title,
    body[data-page-id="login-register"] #kc-page-title,
    body[data-page-id="login-login-reset-password"] #kc-page-title{font-size:25px !important}
    .twp-security-box-shared{margin-top:18px !important}
}


/* ===== THEMEWP UI V11.1 MOCKUP GEOMETRY PARITY ===== */
/* Final geometry aligned to the approved standalone HTML mockups. */
@media (min-width:951px){
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{
    width:min(930px,calc(100vw - 48px)) !important;
    max-width:930px !important;
    min-height:620px !important;
    height:620px !important;
    grid-template-columns:minmax(390px,.98fr) minmax(440px,1.02fr) !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel,
  body[data-page-id="login-register"] .twp-brand-panel,
  body[data-page-id="login-login-reset-password"] .twp-brand-panel{
    min-height:620px !important;height:620px !important;
    padding:46px 50px 30px !important;
  }
  body[data-page-id="login-login"] .twp-brand-logo,
  body[data-page-id="login-register"] .twp-brand-logo,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo{
    min-height:74px !important;margin:0 !important;transform:none !important;
  }
  body[data-page-id="login-login"] .twp-brand-logo img,
  body[data-page-id="login-register"] .twp-brand-logo img,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo img{
    width:min(340px,100%) !important;max-width:340px !important;max-height:72px !important;
  }
  body[data-page-id="login-login"] .twp-brand-tagline,
  body[data-page-id="login-register"] .twp-brand-tagline,
  body[data-page-id="login-login-reset-password"] .twp-brand-tagline{
    margin:3px 0 0 !important;font-size:15px !important;line-height:1.4 !important;transform:none !important;
  }
  body[data-page-id="login-login"] .twp-brand-copy,
  body[data-page-id="login-register"] .twp-brand-copy,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy{
    max-width:410px !important;margin:30px 0 26px !important;transform:none !important;
  }
  body[data-page-id="login-login"] .twp-brand-copy > p,
  body[data-page-id="login-register"] .twp-brand-copy > p,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy > p{
    margin:0 !important;max-width:410px !important;font-size:18.5px !important;line-height:1.48 !important;font-weight:600 !important;
  }
  body[data-page-id="login-login"] .twp-benefit-list,
  body[data-page-id="login-register"] .twp-benefit-list,
  body[data-page-id="login-login-reset-password"] .twp-benefit-list{
    margin-top:0 !important;gap:14px !important;transform:none !important;
  }
  .twp-benefit-item{grid-template-columns:52px minmax(0,1fr) !important;gap:14px !important}
  .twp-benefit-icon{width:52px !important;height:52px !important}
  .twp-benefit-icon svg{width:26px !important;height:26px !important}
  .twp-benefit-item strong{font-size:16.5px !important}
  body[data-page-id="login-login"] .twp-ecosystem-art,
  body[data-page-id="login-register"] .twp-ecosystem-art,
  body[data-page-id="login-login-reset-password"] .twp-ecosystem-art{
    height:218px !important;
    margin:auto -46px -6px !important;
    transform:scale(1.02) !important;
    transform-origin:bottom center !important;
    overflow:hidden !important;
  }
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    min-height:620px !important;height:620px !important;
    padding:46px 56px 30px !important;
  }
  body[data-page-id="login-login"] #kc-page-title,
  body[data-page-id="login-register"] #kc-page-title,
  body[data-page-id="login-login-reset-password"] #kc-page-title{
    font-size:36px !important;line-height:1.12 !important;letter-spacing:-1.05px !important;
  }
  body[data-page-id="login-login"] .twp-login-subtitle{font-size:16px !important;line-height:1.55 !important}
  body[data-page-id="login-login"] #kc-social-providers a{min-height:54px !important;font-size:15px !important}
  body[data-page-id="login-login"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login"] .twp-auth-main input[type="password"],
  body[data-page-id="login-register"] .twp-auth-main input[type="text"],
  body[data-page-id="login-register"] .twp-auth-main input[type="email"],
  body[data-page-id="login-register"] .twp-auth-main input[type="password"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="password"]{
    min-height:54px !important;font-size:15px !important;
  }
  body[data-page-id="login-login"] #kc-login,
  body[data-page-id="login-login"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-login"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-register"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-register"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main button[type="submit"]{
    min-height:54px !important;font-size:16px !important;
  }
}

@media (min-width:561px) and (max-width:950px){
  body#keycloak-bg > .pf-v5-c-login{padding:18px !important}
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{
    width:min(760px,100%) !important;max-width:760px !important;
    min-height:0 !important;height:auto !important;display:block !important;border-radius:20px !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel,
  body[data-page-id="login-register"] .twp-brand-panel,
  body[data-page-id="login-login-reset-password"] .twp-brand-panel{
    display:flex !important;min-height:220px !important;height:220px !important;
    padding:34px 36px 26px !important;text-align:center !important;
  }
  body[data-page-id="login-login"] .twp-brand-inner,
  body[data-page-id="login-register"] .twp-brand-inner,
  body[data-page-id="login-login-reset-password"] .twp-brand-inner{
    width:100% !important;align-items:center !important;justify-content:center !important;
  }
  body[data-page-id="login-login"] .twp-brand-logo,
  body[data-page-id="login-register"] .twp-brand-logo,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo{min-height:auto !important;margin:0 !important;transform:none !important}
  body[data-page-id="login-login"] .twp-brand-logo img,
  body[data-page-id="login-register"] .twp-brand-logo img,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo img{
    width:min(320px,88%) !important;max-width:320px !important;max-height:72px !important;
  }
  body[data-page-id="login-login"] .twp-brand-tagline,
  body[data-page-id="login-register"] .twp-brand-tagline,
  body[data-page-id="login-login-reset-password"] .twp-brand-tagline{
    margin:4px 0 0 !important;font-size:13px !important;transform:none !important;
  }
  body[data-page-id="login-login"] .twp-brand-copy,
  body[data-page-id="login-register"] .twp-brand-copy,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy{
    max-width:540px !important;margin:22px auto 0 !important;transform:none !important;
  }
  body[data-page-id="login-login"] .twp-brand-copy > p,
  body[data-page-id="login-register"] .twp-brand-copy > p,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy > p{
    font-size:17px !important;line-height:1.5 !important;text-align:center !important;
  }
  body[data-page-id="login-login"] .twp-benefit-list,
  body[data-page-id="login-register"] .twp-benefit-list,
  body[data-page-id="login-login-reset-password"] .twp-benefit-list,
  body[data-page-id="login-login"] .twp-ecosystem-art,
  body[data-page-id="login-register"] .twp-ecosystem-art,
  body[data-page-id="login-login-reset-password"] .twp-ecosystem-art{display:none !important}
  .twp-mobile-brand{display:none !important}
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    min-height:540px !important;height:auto !important;padding:40px 42px 34px !important;
    justify-content:flex-start !important;
  }
  body[data-page-id="login-login"] .twp-security-box-shared,
  body[data-page-id="login-register"] .twp-security-box-shared,
  body[data-page-id="login-login-reset-password"] .twp-security-box-shared{margin-top:auto !important}
}

@media (max-width:560px){
  body#keycloak-bg > .pf-v5-c-login{padding:10px 10px 16px !important}
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{
    width:100% !important;max-width:none !important;min-height:0 !important;height:auto !important;
    display:block !important;border-radius:20px !important;box-shadow:0 18px 44px rgba(27,98,151,.14) !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel,
  body[data-page-id="login-register"] .twp-brand-panel,
  body[data-page-id="login-login-reset-password"] .twp-brand-panel{
    display:flex !important;min-height:148px !important;height:148px !important;padding:24px 18px 20px !important;text-align:center !important;
  }
  body[data-page-id="login-login"] .twp-brand-inner,
  body[data-page-id="login-register"] .twp-brand-inner,
  body[data-page-id="login-login-reset-password"] .twp-brand-inner{width:100% !important;align-items:center !important;justify-content:center !important}
  body[data-page-id="login-login"] .twp-brand-logo,
  body[data-page-id="login-register"] .twp-brand-logo,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo{min-height:auto !important;margin:0 !important;transform:none !important}
  body[data-page-id="login-login"] .twp-brand-logo img,
  body[data-page-id="login-register"] .twp-brand-logo img,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo img{width:min(250px,86%) !important;max-width:250px !important;max-height:58px !important}
  body[data-page-id="login-login"] .twp-brand-tagline,
  body[data-page-id="login-register"] .twp-brand-tagline,
  body[data-page-id="login-login-reset-password"] .twp-brand-tagline{margin:4px 0 0 !important;font-size:12px !important;transform:none !important}
  body[data-page-id="login-login"] .twp-brand-copy,
  body[data-page-id="login-register"] .twp-brand-copy,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy,
  body[data-page-id="login-login"] .twp-benefit-list,
  body[data-page-id="login-register"] .twp-benefit-list,
  body[data-page-id="login-login-reset-password"] .twp-benefit-list,
  body[data-page-id="login-login"] .twp-ecosystem-art,
  body[data-page-id="login-register"] .twp-ecosystem-art,
  body[data-page-id="login-login-reset-password"] .twp-ecosystem-art{display:none !important}
  .twp-mobile-brand{display:none !important}
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    min-height:0 !important;height:auto !important;padding:26px 18px 22px !important;justify-content:flex-start !important;
  }
  body[data-page-id="login-login"] #kc-page-title,
  body[data-page-id="login-register"] #kc-page-title,
  body[data-page-id="login-login-reset-password"] #kc-page-title{font-size:30px !important;text-align:center !important}
  body[data-page-id="login-login"] .twp-login-subtitle{text-align:center !important;font-size:14px !important}
  body[data-page-id="login-login"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login"] .twp-auth-main input[type="password"],
  body[data-page-id="login-register"] .twp-auth-main input[type="text"],
  body[data-page-id="login-register"] .twp-auth-main input[type="email"],
  body[data-page-id="login-register"] .twp-auth-main input[type="password"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="password"]{min-height:50px !important;font-size:15px !important}
  .twp-security-box-shared{margin-top:18px !important}
}

/* ===== THEMEWP UI V12 TYPOGRAPHY + ACCOUNT CTA PARITY ===== */
/* UI only: font consistency, visible account CTA, footer readability. */
body#keycloak-bg,
body#keycloak-bg input,
body#keycloak-bg button,
body#keycloak-bg select,
body#keycloak-bg textarea,
body#keycloak-bg a{
  font-family:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

@media (min-width:951px){
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{
    min-height:670px !important;
    height:670px !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel,
  body[data-page-id="login-register"] .twp-brand-panel,
  body[data-page-id="login-login-reset-password"] .twp-brand-panel,
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    min-height:670px !important;
    height:670px !important;
  }
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    padding-top:34px !important;
    padding-bottom:24px !important;
  }
  body[data-page-id="login-login"] #kc-page-title,
  body[data-page-id="login-register"] #kc-page-title,
  body[data-page-id="login-login-reset-password"] #kc-page-title{
    font-size:34px !important;
    line-height:1.16 !important;
    letter-spacing:-.75px !important;
    font-weight:800 !important;
  }
  body[data-page-id="login-login"] .twp-login-subtitle,
  body[data-page-id="login-register"] .twp-login-subtitle,
  body[data-page-id="login-login-reset-password"] .twp-login-subtitle,
  body[data-page-id="login-register"] #kc-content-wrapper > p,
  body[data-page-id="login-login-reset-password"] #kc-content-wrapper > p{
    font-size:15px !important;
    line-height:1.58 !important;
  }
  body[data-page-id="login-login"] .twp-title-wrap::before,
  body[data-page-id="login-register"] .twp-title-wrap::before,
  body[data-page-id="login-login-reset-password"] .twp-title-wrap::before{
    margin-bottom:10px !important;
  }
  body[data-page-id="login-login"] #kc-social-providers,
  body[data-page-id="login-login"] .twp-login-subtitle{
    margin-bottom:16px !important;
  }
  body[data-page-id="login-login"] .twp-divider{
    margin-top:14px !important;
    margin-bottom:14px !important;
  }
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-form__group{
    margin-bottom:13px !important;
  }
  body[data-page-id="login-login"] .twp-auth-main label,
  body[data-page-id="login-register"] .twp-auth-main label,
  body[data-page-id="login-login-reset-password"] .twp-auth-main label{
    font-size:13.5px !important;
    line-height:1.4 !important;
    font-weight:700 !important;
  }
  body[data-page-id="login-login"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login"] .twp-auth-main input[type="password"],
  body[data-page-id="login-register"] .twp-auth-main input[type="text"],
  body[data-page-id="login-register"] .twp-auth-main input[type="email"],
  body[data-page-id="login-register"] .twp-auth-main input[type="password"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="password"]{
    font-size:15px !important;
  }
  body[data-page-id="login-login"] #kc-login,
  body[data-page-id="login-login"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-login"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-register"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-register"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-login"] #kc-social-providers a{
    font-size:15px !important;
    font-weight:700 !important;
  }
  body[data-page-id="login-login"] .twp-login-extras,
  body[data-page-id="login-login-reset-password"] .twp-login-extras{
    margin-top:14px !important;
    padding-top:12px !important;
    border-top:1px solid rgba(130,151,177,.22) !important;
  }
  body[data-page-id="login-login"] .twp-no-account,
  body[data-page-id="login-login-reset-password"] .twp-no-account{
    font-size:14.5px !important;
    line-height:1.45 !important;
  }
  body[data-page-id="login-login"] .twp-security-box-shared,
  body[data-page-id="login-register"] .twp-security-box-shared,
  body[data-page-id="login-login-reset-password"] .twp-security-box-shared{
    margin-top:14px !important;
    padding:12px 14px !important;
  }
  .twp-security-box-shared strong{
    font-size:13.5px !important;
    line-height:1.4 !important;
  }
  .twp-security-box-shared span:not(.twp-security-icon){
    font-size:12.5px !important;
    line-height:1.45 !important;
  }
  .twp-page-footer{
    bottom:12px !important;
    font-size:12.5px !important;
    line-height:1.5 !important;
    gap:18px !important;
  }
  .twp-footer-links{
    gap:10px !important;
  }
  .twp-footer-copyright,
  .twp-footer-links a,
  .twp-social-label{
    font-size:12.5px !important;
    font-weight:500 !important;
  }
  .twp-footer-social{gap:10px !important}
  .twp-social-link{width:27px !important;height:27px !important}
  .twp-social-link svg{width:24px !important;height:24px !important}
}

@media (max-width:950px){
  body[data-page-id="login-login"] .twp-login-extras,
  body[data-page-id="login-login-reset-password"] .twp-login-extras{
    margin-top:16px !important;
    padding-top:14px !important;
    border-top:1px solid rgba(130,151,177,.22) !important;
  }
  body[data-page-id="login-login"] .twp-no-account,
  body[data-page-id="login-login-reset-password"] .twp-no-account{
    font-size:14px !important;
  }
  .twp-security-box-shared strong{font-size:13px !important}
  .twp-security-box-shared span:not(.twp-security-icon){font-size:12px !important}
  .twp-page-footer{font-size:12px !important;line-height:1.55 !important}
  .twp-footer-copyright,.twp-footer-links a,.twp-social-label{font-size:12px !important}
}


/* ===== THEMEWP UI V12.1 VISIBILITY + LEFT PARITY + LOCALE FLAG ===== */
/* UI-only hotfix from direct runtime audit. */
@media (min-width:951px){
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{
    min-height:670px !important;
    height:auto !important;
    overflow:hidden !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel,
  body[data-page-id="login-register"] .twp-brand-panel,
  body[data-page-id="login-login-reset-password"] .twp-brand-panel,
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    min-height:670px !important;
    height:auto !important;
  }

  body[data-page-id="login-login"] .twp-brand-logo img,
  body[data-page-id="login-register"] .twp-brand-logo img,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo img{
    width:min(340px,100%) !important;
    max-width:340px !important;
    max-height:72px !important;
  }
  body[data-page-id="login-login"] .twp-brand-tagline,
  body[data-page-id="login-register"] .twp-brand-tagline,
  body[data-page-id="login-login-reset-password"] .twp-brand-tagline{
    font-size:15px !important;
    line-height:1.4 !important;
    margin:3px 0 0 !important;
  }
  body[data-page-id="login-login"] .twp-brand-copy > p,
  body[data-page-id="login-register"] .twp-brand-copy > p,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy > p{
    font-size:18.5px !important;
    line-height:1.48 !important;
    font-weight:600 !important;
  }
  body[data-page-id="login-login"] .twp-benefit-item strong,
  body[data-page-id="login-register"] .twp-benefit-item strong,
  body[data-page-id="login-login-reset-password"] .twp-benefit-item strong{
    font-size:16.5px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
  }
  body[data-page-id="login-login"] .twp-benefit-icon,
  body[data-page-id="login-register"] .twp-benefit-icon,
  body[data-page-id="login-login-reset-password"] .twp-benefit-icon{
    width:52px !important;height:52px !important;
  }

  body[data-page-id="login-login"] .twp-auth-main > .pf-v5-c-login__main,
  body[data-page-id="login-register"] .twp-auth-main > .pf-v5-c-login__main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main > .pf-v5-c-login__main,
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-login__main-body,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-login__main-body,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-login__main-body{
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }
  body[data-page-id="login-login"] .twp-login-extras,
  body[data-page-id="login-login-reset-password"] .twp-login-extras{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body[data-page-id="login-login"] .twp-security-box-shared,
  body[data-page-id="login-register"] .twp-security-box-shared,
  body[data-page-id="login-login-reset-password"] .twp-security-box-shared{
    margin-top:14px !important;
  }

  body[data-page-id="login-register"] .pf-v5-c-login__main-footer-band{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin-top:14px !important;
    padding:0 !important;
  }
  body[data-page-id="login-register"] .pf-v5-c-login__main-footer-band #kc-form-options{
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
  }
  body[data-page-id="login-register"] .pf-v5-c-login__main-footer-band a{
    display:inline-block !important;
    padding:8px 6px !important;
    font-size:14px !important;
    line-height:1.4 !important;
    font-weight:600 !important;
    text-decoration:none !important;
  }
}

/* THEMEWP UI V13.1: dead rule removed (#login-select-toggle no longer exists). */
/* V12.2 candidate */
@media (min-width:951px){
  body#keycloak-bg > .pf-v5-c-login{padding:34px 24px 48px !important;}
  /* ===== THEMEWP UI V12.6 PAGE-AWARE COMPACT SIZING =====
     Evidence-based, not target-number-driven. Real natural content height
     was measured live (offsetHeight audit, 2026-09-28) BEFORE and AFTER
     closing genuinely excess vertical gaps (see spacing rules below this
     block): Login form 727px -> 668px, Register form 640px -> 588px,
     Reset form 577px -> 557px. The shared left panel's own content needs
     593px minimum (illustration is flex-pinned to the bottom via
     margin-top:auto; below 593px it touches the benefit list with zero
     breathing room -- a real floor, not an arbitrary number). Register
     and Reset both land at ~593-600px because they're now bound by that
     shared left-panel floor, not by their own (already short) form --
     they converge because the real constraint is the same, not because
     height was forced equal for uniformity. Login stays taller because
     its own content (Google button, divider, 2 fields, remember/forgot,
     submit, register link, security box) genuinely needs the room. */
  body[data-page-id="login-login"] .twp-auth-shell{
    width:min(860px,calc(100vw - 48px)) !important;
    max-width:860px !important;
    min-height:690px !important;
    height:690px !important;
    grid-template-columns:minmax(380px,.98fr) minmax(430px,1.02fr) !important;
    overflow:hidden !important;
  }
  body[data-page-id="login-register"] .twp-auth-shell{
    width:min(860px,calc(100vw - 48px)) !important;
    max-width:860px !important;
    min-height:605px !important;
    height:605px !important;
    grid-template-columns:minmax(380px,.98fr) minmax(430px,1.02fr) !important;
    overflow:hidden !important;
  }
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{
    width:min(860px,calc(100vw - 48px)) !important;
    max-width:860px !important;
    min-height:600px !important;
    height:600px !important;
    grid-template-columns:minmax(380px,.98fr) minmax(430px,1.02fr) !important;
    overflow:hidden !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel{
    min-height:690px !important;height:690px !important;
    padding:34px 40px 22px !important;
  }
  body[data-page-id="login-register"] .twp-brand-panel{
    min-height:605px !important;height:605px !important;
    padding:34px 40px 22px !important;
  }
  body[data-page-id="login-login-reset-password"] .twp-brand-panel{
    min-height:600px !important;height:600px !important;
    padding:34px 40px 22px !important;
  }
  body[data-page-id="login-login"] .twp-auth-main{
    min-height:690px !important;height:690px !important;
    padding:26px 48px 20px !important;
    overflow:visible !important;
  }
  body[data-page-id="login-register"] .twp-auth-main{
    min-height:605px !important;height:605px !important;
    padding:26px 48px 20px !important;
    overflow:visible !important;
  }
  body[data-page-id="login-login-reset-password"] .twp-auth-main{
    min-height:600px !important;height:600px !important;
    padding:26px 48px 20px !important;
    overflow:visible !important;
  }
  /* Close measured excess whitespace (grid row-gap was the dominant,
     previously-untargeted contributor -- form-group margin-bottom alone
     could not reach it since PatternFly's grid gap is additive on top
     of it). No input/button/font size touched anywhere below. */
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-login__main-body,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-login__main-body,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-login__main-body{
    margin-top:0 !important;
  }
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-login__main-header,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-login__main-header,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-login__main-header{
    margin-bottom:14px !important;
  }
  body[data-page-id="login-login"] #kc-form-login,
  body[data-page-id="login-register"] #kc-register-form,
  body[data-page-id="login-login-reset-password"] #kc-reset-password-form{
    row-gap:12px !important;
    gap:12px !important;
  }
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-form__group{
    margin-bottom:0 !important;
  }
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-form__actions,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-form__actions,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-form__actions{
    padding-top:2px !important;
  }
  body[data-page-id="login-login"] .twp-brand-logo,
  body[data-page-id="login-register"] .twp-brand-logo,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo{min-height:64px !important;margin:0 !important;}
  body[data-page-id="login-login"] .twp-brand-logo img,
  body[data-page-id="login-register"] .twp-brand-logo img,
  body[data-page-id="login-login-reset-password"] .twp-brand-logo img{width:min(300px,100%) !important;max-width:300px !important;max-height:64px !important;}
  body[data-page-id="login-login"] .twp-brand-tagline,
  body[data-page-id="login-register"] .twp-brand-tagline,
  body[data-page-id="login-login-reset-password"] .twp-brand-tagline{font-size:14px !important;line-height:1.4 !important;margin:2px 0 0 !important;}
  body[data-page-id="login-login"] .twp-brand-copy,
  body[data-page-id="login-register"] .twp-brand-copy,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy{margin:20px 0 18px !important;max-width:360px !important;}
  body[data-page-id="login-login"] .twp-brand-copy > p,
  body[data-page-id="login-register"] .twp-brand-copy > p,
  body[data-page-id="login-login-reset-password"] .twp-brand-copy > p{font-size:17px !important;line-height:1.46 !important;max-width:360px !important;}
  body[data-page-id="login-login"] .twp-benefit-list,
  body[data-page-id="login-register"] .twp-benefit-list,
  body[data-page-id="login-login-reset-password"] .twp-benefit-list{gap:12px !important;margin-top:0 !important;}
  .twp-benefit-item{grid-template-columns:48px minmax(0,1fr) !important;gap:12px !important;}
  .twp-benefit-icon{width:48px !important;height:48px !important;}
  .twp-benefit-icon svg{width:24px !important;height:24px !important;}
  .twp-benefit-item strong{font-size:15.5px !important;line-height:1.35 !important;}
  body[data-page-id="login-login"] .twp-ecosystem-art,
  body[data-page-id="login-register"] .twp-ecosystem-art,
  body[data-page-id="login-login-reset-password"] .twp-ecosystem-art{height:188px !important;margin:auto -38px -4px !important;transform:scale(.98) !important;transform-origin:bottom center !important;}
  body[data-page-id="login-login"] #kc-page-title,
  body[data-page-id="login-register"] #kc-page-title,
  body[data-page-id="login-login-reset-password"] #kc-page-title{
    font-family:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
    font-size:32px !important;line-height:1.14 !important;letter-spacing:-.65px !important;font-weight:800 !important;
  }
  body[data-page-id="login-login"] .twp-title-wrap::before,
  body[data-page-id="login-register"] .twp-title-wrap::before,
  body[data-page-id="login-login-reset-password"] .twp-title-wrap::before{width:38px !important;height:38px !important;margin-bottom:8px !important;}
  body[data-page-id="login-login"] .twp-login-subtitle,
  body[data-page-id="login-register"] #kc-content-wrapper > p,
  body[data-page-id="login-login-reset-password"] #kc-content-wrapper > p{font-size:14px !important;line-height:1.5 !important;margin-bottom:14px !important;}
  body[data-page-id="login-login"] #kc-social-providers{margin-bottom:12px !important;}
  body[data-page-id="login-login"] #kc-social-providers a{min-height:48px !important;font-size:14px !important;}
  body[data-page-id="login-login"] .twp-divider{margin:10px 0 10px !important;}
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-form__group{margin-bottom:10px !important;}
  body[data-page-id="login-login"] .twp-auth-main label,
  body[data-page-id="login-register"] .twp-auth-main label,
  body[data-page-id="login-login-reset-password"] .twp-auth-main label{font-size:13px !important;line-height:1.35 !important;}
  body[data-page-id="login-login"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login"] .twp-auth-main input[type="password"],
  body[data-page-id="login-register"] .twp-auth-main input[type="text"],
  body[data-page-id="login-register"] .twp-auth-main input[type="email"],
  body[data-page-id="login-register"] .twp-auth-main input[type="password"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="text"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="email"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="password"]{min-height:48px !important;font-size:14px !important;}
  body[data-page-id="login-login"] #kc-login,
  body[data-page-id="login-login"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-login"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-register"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-register"] .twp-auth-main button[type="submit"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main input[type="submit"],
  body[data-page-id="login-login-reset-password"] .twp-auth-main button[type="submit"]{min-height:50px !important;font-size:15px !important;}
  body[data-page-id="login-login"] .twp-login-extras,
  body[data-page-id="login-login-reset-password"] .twp-login-extras{margin-top:10px !important;padding-top:0 !important;border-top:0 !important;}
  body[data-page-id="login-login"] .twp-no-account,
  body[data-page-id="login-login-reset-password"] .twp-no-account{padding:10px 0 10px !important;font-size:13.5px !important;line-height:1.4 !important;border-top:1px solid rgba(130,151,177,.22) !important;}
  body[data-page-id="login-login"] .twp-security-box-shared,
  body[data-page-id="login-register"] .twp-security-box-shared,
  body[data-page-id="login-login-reset-password"] .twp-security-box-shared{margin-top:10px !important;padding:10px 12px !important;}
  .twp-security-box-shared strong{font-size:12.5px !important;}
  .twp-security-box-shared span:not(.twp-security-icon){font-size:11.5px !important;}
  body[data-page-id="login-register"] .pf-v5-c-login__main-footer-band{margin-top:10px !important;margin-bottom:6px !important;padding:0 !important;}
  body[data-page-id="login-register"] .pf-v5-c-login__main-footer-band a{padding:5px 4px !important;font-size:13px !important;}
  .twp-page-footer{width:min(860px,calc(100vw - 48px)) !important;font-size:12px !important;bottom:10px !important;}
}

/* ===== THEMEWP UI V12.2 COMPACT + SINGLE DIVIDER + RESPONSIVE AUDIT ===== */
html,body{max-width:100%;overflow-x:hidden !important;}
body[data-page-id="login-login"] .twp-login-extras,
body[data-page-id="login-login-reset-password"] .twp-login-extras{border-top:0 !important;padding-top:0 !important;}
body[data-page-id="login-login"] .twp-no-account,
body[data-page-id="login-login-reset-password"] .twp-no-account{border-top:1px solid rgba(130,151,177,.22) !important;}
@media (max-width:950px){
  body#keycloak-bg > .pf-v5-c-login{overflow-x:hidden !important;}
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell{max-width:100% !important;overflow:hidden !important;}
  body[data-page-id="login-login"] .twp-login-extras,
  body[data-page-id="login-login-reset-password"] .twp-login-extras{margin-top:12px !important;padding-top:0 !important;}
  body[data-page-id="login-login"] .twp-no-account,
  body[data-page-id="login-login-reset-password"] .twp-no-account{padding:10px 0 !important;}
  body[data-page-id="login-register"] .pf-v5-c-login__main-footer-band{margin-top:12px !important;padding-top:12px !important;}
}
@media (max-width:560px){
  .twp-page-footer{max-width:100% !important;}
}

/* ===== THEMEWP UI V12.3 REMOVE PATTERNFLY CONTROL UNDERLINES =====
 * THEMEWP UI V13.3: generalized from page-id-scoped to page-agnostic.
 * PatternFly v5 renders form-control borders with ::before / ::after --
 * confirmed live on Update Profile's Email/Full-name fields: the base
 * <input> itself had the correct single ThemeWP border (border-radius
 * 9px, border:1px solid #dce4eb, from the already-generic sizing rule),
 * but the WRAPPING .pf-v5-c-form-control span's own ::after pseudo-
 * element independently rendered PatternFly's raw default
 * "border-bottom:1px solid rgb(138,141,144)" underneath it -- a second,
 * darker, bottom-only line, exactly the "visible bottom underline"
 * defect reported. This rule already existed and already fixed it
 * correctly, but only for body[data-page-id="login-login"/"login-
 * register"/"login-login-reset-password"] -- the exact same
 * generalization gap as the password-toggle and footer bugs fixed
 * earlier. .twp-auth-shell is present via template.ftl on every page,
 * so dropping the page-id scoping is safe and reaches all of them.
 * PatternFly rule producing the artifact: .pf-v5-c-form-control::after
 * (and ::before for other states), a UA-shipped border painted via
 * pseudo-element regardless of what border the real <input> carries.
 * ThemeWP override: content:none + display:none neutralizes the pseudo-
 * element outright, which is safe because ThemeWP's own border already
 * lives on the real <input>/<select> element itself -- nothing depends
 * on the pseudo-element for any actual visual effect being kept.
 */
.twp-auth-shell .pf-v5-c-form-control::before,
.twp-auth-shell .pf-v5-c-form-control::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

/* THEMEWP UI V13.1: the #login-select-toggle border/focus rules and the
   V12.4 #password-show-password block that lived here targeted markup
   that no longer exists (native select removed; password toggle button
   is now unified via the shared .pf-v5-c-input-group component appended
   at the end of this file). Both removed -- an ID selector here would
   have outranked that shared component's class-based specificity and
   silently kept the old separate-border look on Login only. */

/* Keep auth titles on the same brand font at tablet/mobile breakpoints. */
@media (max-width:950px) {
    body[data-page-id="login-login"] #kc-page-title,
    body[data-page-id="login-register"] #kc-page-title,
    body[data-page-id="login-login-reset-password"] #kc-page-title {
        font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
        font-weight: 800 !important;
    }
}

/* ===== THEMEWP UI V13.1: password field unification moved to a shared,
   page-agnostic component (see the block appended at the end of this file,
   selectors .pf-v5-c-input-group / input[type="password"] /
   button[data-password-toggle]). The old body[data-page-id="login-login"]
   + #password / #password-show-password scoped rules that lived here were
   removed rather than left as dead duplicates: Update Password's fields use
   different ids (password-new / password-confirm) and never matched them,
   which was the root cause of the unstyled "two controls" look there. ===== */

/* Mobile browser toolbars can cover the last CTA/footer. Add scroll-safe room only on phones. */
@media (max-width:560px) {
    body#keycloak-bg > .pf-v5-c-login {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
    .twp-page-footer {
        margin-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* =========================================================
   THEMEWP UI V12.8 FINAL POLISH PASS
   Evidence-based, appended at the true end of the file so
   these rules win over every earlier duplicate declaration
   of the same selector+property (this file has accumulated
   several historical re-declarations of the same properties
   across many @media(min-width:951px) blocks; the V12.6 pass
   discovered some of its own additions were silently losing
   to pre-existing later duplicates -- notably, Login's real
   content overflowed its shell by ~46px in production with
   overflow:hidden, causing visible clipping of the security
   box. This block both fixes that regression and adds the
   requested polish, in one place, guaranteed to be last.
   ========================================================= */

/* --- Cursor: input[type=submit] never had a UA-default pointer
   cursor (unlike <button>/<a>, which already worked). Register's
   submit is rendered as input[type=submit] by the base Keycloak
   template (unlike Login/Reset, which use <button>) -- this was
   the actual root cause of the reported arrow-cursor bug. Scoped
   tightly; does not touch text inputs (stay cursor:text) or
   checkboxes (native default already correct). */
.twp-auth-shell button:not(:disabled),
.twp-auth-shell input[type="submit"]:not(:disabled),
.twp-auth-shell a,
.twp-auth-shell select {
    cursor: pointer;
}
.twp-auth-shell button:disabled,
.twp-auth-shell input[type="submit"]:disabled {
    cursor: not-allowed;
}

@media (min-width:951px){
  /* --- Regression fix: these 3 properties were added in V12.6
     but lost to pre-existing later duplicates of the same exact
     selector elsewhere in this file. Fixing the actual values
     here (last in source order) rather than adding another
     losing duplicate. */
  body[data-page-id="login-login"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-register"] .twp-auth-main .pf-v5-c-form__group,
  body[data-page-id="login-login-reset-password"] .twp-auth-main .pf-v5-c-form__group{
    margin-bottom:0 !important;
  }
  body[data-page-id="login-login"] #kc-social-providers{
    margin-bottom:8px !important;
  }
  .twp-login-divider{
    margin-top:8px !important;
    margin-bottom:8px !important;
  }

  /* --- Register's submit button sits in an unclassed wrapper div
     (Keycloak's register.ftl markup, not something we control or
     are changing) that carried an 18px margin-top no earlier rule
     targeted. Structural child selector, stable as long as the
     field order doesn't change. */
  #kc-register-form > div:not([class]){
    margin-top:10px !important;
  }

  /* --- Slogan/wordmark alignment. Measured directly from the logo
     PNG via canvas pixel-column scan (400x68 natural size): the "W"
     icon mark spans x=[0,67], the "ThemeWP.vn" text starts at x=72.
     Scaled to the rendered 300px-wide logo (0.75x), text begins at
     ~54px. Previously the tagline shared the icon's left edge (0),
     reading as pulled toward the icon rather than sitting under the
     wordmark. */
  body[data-page-id="login-login"] .twp-brand-tagline,
  body[data-page-id="login-register"] .twp-brand-tagline,
  body[data-page-id="login-login-reset-password"] .twp-brand-tagline{
    margin-left:54px !important;
  }

  /* --- Left-panel redistribution, Login only. Register/Reset sit
     within 12px of the shared 593px panel floor already -- no
     slack to redistribute there. Login's panel is taller (matches
     its own real content need) which left ~97px as one large
     auto-margin gap right before the illustration. Redistributing
     some of that into the existing rhythm (not new space, the same
     slack moved earlier) reads as considered rather than empty,
     without touching the illustration or benefit-item wording. */
  body[data-page-id="login-login"] .twp-benefit-list{
    gap:20px !important;
  }
  body[data-page-id="login-login"] .twp-brand-copy{
    margin:26px 0 30px !important;
  }

  /* --- Outer page padding around the card. Login's own content
     genuinely needs ~684px (measured, post-fix) -- at the original
     34/48px top/bottom padding that left only 2px of headroom at
     1366x768, too tight to trust across font-rendering variance.
     Trimming the page chrome (not the card) restores comfortable
     margin at 1366x768 for all three pages without touching card
     content further. */
  body#keycloak-bg > .pf-v5-c-login{
    padding:22px 24px 30px !important;
  }

  /* --- Final page-aware heights, corrected. Login raised from
     690->700px (was overflowing its own content by 46px in
     production with overflow:hidden -- confirmed causing visible
     clipping of the security box, fixed here). Register/Reset
     unchanged (605/600px already had enough headroom once their
     own gap fixes above are actually applied). */
  body[data-page-id="login-login"] .twp-auth-shell{
    height:700px !important;
    min-height:700px !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel{
    height:700px !important;
    min-height:700px !important;
  }
  body[data-page-id="login-login"] .twp-auth-main{
    height:700px !important;
    min-height:700px !important;
  }
}


/* ===== THEMEWP UI V12.6 CACHE-BUST FULL STYLE SNAPSHOT ===== */

/* ===== THEMEWP UI V12.7 PASSWORD LOCK RESTORATION =====
 * V12.6 unified the password input and visibility button by applying the
 * `background` shorthand to #password. That shorthand also reset the lock
 * icon supplied by the earlier #password background-image rule.
 *
 * Keep the input transparent so the group owns the sole border/focus halo,
 * and restore only the lock artwork plus its established spacing.
 */
body[data-page-id="login-login"] .pf-v5-c-input-group #password {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23798a9a' stroke-width='1.8'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    background-size: 18px 18px !important;
    padding-left: 46px !important;
}

/* ===== THEMEWP LINK EXISTING ACCOUNT SPACING V1 ===== */
#kc-register-form #updateProfile + #linkAccount {
    margin-top: 12px !important;
}

/* =========================================================
   THEMEWP UI V13.0 CANONICAL CLEANUP + ALL-PAGES BASELINE
   =========================================================
   This release removed ~4,833 lines of pure duplicate CSS that had been
   appended after the V12.8 block (verified via diff: the removed span was
   byte-identical to lines 1-5025 except for reverted shell/spacing values
   from before V12.6/V12.8 -- that duplication was silently winning the
   cascade by source order and caused the 1366x768 clipping regression).
   Nothing unique was lost: the two genuine late additions (password-lock
   icon restoration, link-existing-account spacing) are preserved above
   this block, unchanged.

   This block adds what was still structurally missing: every Keycloak
   login-theme page other than Login/Register/Reset (update-password,
   update-profile, first-broker-login, account-already-exists/idp-link,
   verify-email, error, info, session-expired, and any other page inherited
   from the parent keycloak.v2 theme) shares the exact same wrapper
   (body[data-page-id="login-${pageId}"] > .twp-auth-shell > .twp-brand-panel
   + .twp-auth-main -- confirmed directly in template.ftl, which is the
   ONLY template this theme overrides besides register.ftl) but never had
   any sizing/spacing rule of its own, so it fell back to raw PatternFly
   defaults -- the "smaller, inconsistent" look in production screenshots.

   Specificity, not source order, is what makes this safe: a bare
   `.twp-auth-shell` selector (specificity 0,1,0) can never beat the
   existing `body[data-page-id="login-login"] .twp-auth-shell` rules
   above (specificity 0,2,1) regardless of where in the file it sits.
   Login/Register/Reset keep their tuned, content-measured heights;
   every other page gets a sane, non-fixed baseline instead of nothing. */

.twp-auth-shell {
    width: min(860px, calc(100vw - 48px)) !important;
    max-width: 860px !important;
    min-height: 593px !important;
    height: auto !important;
    grid-template-columns: minmax(380px, .98fr) minmax(430px, 1.02fr) !important;
    overflow: hidden !important;
    border-radius: var(--twp-card-radius) !important;
}
.twp-brand-panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 34px 40px 22px !important;
}
.twp-auth-main {
    min-height: 0 !important;
    height: auto !important;
    padding: 26px 48px 20px !important;
    overflow: visible !important;
}
/* Generic pages still get the same field/button treatment as Login, since
   nothing page-specific below 951px width changes: PatternFly's own
   underline/default control styling doesn't leak through if this simply
   reuses the same rules Login/Register/Reset already rely on. */
.twp-auth-main input[type="text"],
.twp-auth-main input[type="email"],
.twp-auth-main input[type="password"] {
    min-height: 48px !important;
    font-size: 14px !important;
}
.twp-auth-main input[type="submit"],
.twp-auth-main button[type="submit"] {
    min-height: 50px !important;
    font-size: 15px !important;
}
.twp-auth-main label {
    font-size: 13px !important;
    line-height: 1.35 !important;
}
body#keycloak-bg > .pf-v5-c-login {
    padding: 22px 24px 30px !important;
}
.twp-page-footer {
    width: min(860px, calc(100vw - 48px)) !important;
}

@media (max-width: 950px) {
    .twp-auth-shell {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* THEMEWP UI V13.1: the native <select> this rule targeted no longer
   exists (see template.ftl -- replaced with the custom .twp-locale
   component below). Removed rather than left as dead selector. */

/* =========================================================
   THEMEWP UI V13.1 -- SHARED PASSWORD CONTROL + CUSTOM LOCALE
   =========================================================
   CSS_V131_MARKER

   Two component rewrites, both moved from page-id/id-scoped rules to
   stable, page-agnostic selectors so they apply identically wherever
   the underlying markup appears -- present pages and any future
   required-action page Keycloak renders through the same template.ftl
   shell, with no further CSS needed per page.
   ========================================================= */

/* --- Password + eye icon: one visual control everywhere.
   input[type="password"] and button[data-password-toggle] are Keycloak's
   own stable markup contract (password-commons.ftl), unrelated to field
   name -- so this matches #password on Login, #password-new/#password-
   confirm on Update Password, and any future password field, without
   hardcoding a single id. The group alone owns the border/focus ring;
   input and button are visually transparent inside it. */
/* THEMEWP UI V13.2: fixed a severe bug found live in production --
   passwordVisibility.js flips the input's type attribute from "password"
   to "text" when the user clicks the eye icon to reveal it. Every rule
   below used to be gated on :has(input[type="password"]), which stopped
   matching the INSTANT visibility was toggled, silently dropping the
   entire unified-control styling (ring, transparent children) back to
   raw PatternFly defaults -- confirmed live: groupBoxShadow read "none"
   immediately after a real click on the toggle button. The toggle
   button's [data-password-toggle] attribute never changes, regardless
   of visibility state, so every selector below is now anchored to it
   instead of the input's mutable type. */
.pf-v5-c-input-group:has(button[data-password-toggle]) {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 0 1px #dce4eb !important;
    transition: box-shadow .18s ease !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]):hover {
    box-shadow: inset 0 0 0 1px #b9c9d6 !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]):focus-within {
    box-shadow: inset 0 0 0 1px #0b86a6, 0 0 0 3px rgba(11,134,166,.10) !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]):has([aria-invalid="true"]) {
    box-shadow: inset 0 0 0 1px #c8443c !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]):has([aria-invalid="true"]):focus-within {
    box-shadow: inset 0 0 0 1px #c8443c, 0 0 0 3px rgba(200,68,60,.12) !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]):has(input.pf-m-disabled),
.pf-v5-c-input-group:has(button[data-password-toggle]):has(input:disabled) {
    background: #f5f7f9 !important;
    box-shadow: inset 0 0 0 1px #e2e8ee !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]) .pf-v5-c-input-group__item {
    margin: 0 !important;
    min-width: 0 !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]) .pf-v5-c-input-group__item.pf-m-fill {
    flex: 1 1 auto !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]) .pf-v5-c-form-control,
.pf-v5-c-input-group:has(button[data-password-toggle]) input,
.pf-v5-c-input-group button[data-password-toggle] {
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* THEMEWP UI V13.4: found via live getBoundingClientRect() evidence --
   the toggle button filled its input-group__item edge-to-edge (50px,
   matching the group's own height exactly), but the input's own
   min-height:48px computed as its actual height (48px), leaving a 1px
   gap top and bottom that the button never had. That 1px asymmetry is
   what read as a seam/second-box at the boundary between them. Fixed
   by making the input fill its ancestor exactly like the button does:
   height:100% (not just min-height), so both are byte-for-byte the
   same 50px, top-aligned and bottom-aligned identically. Confirmed via
   getBoundingClientRect(): input and button rects now match exactly
   (same top, same bottom, same height) both at rest and while the
   field is focused, verified through a real click, not just
   getComputedStyle. */
.pf-v5-c-input-group:has(button[data-password-toggle]) input {
    width: 100% !important;
    height: 100% !important;
    min-height: 48px !important;
}
.pf-v5-c-input-group:has(button[data-password-toggle]) input:focus,
.pf-v5-c-input-group:has(button[data-password-toggle]) input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.pf-v5-c-input-group button[data-password-toggle] {
    width: 50px !important;
    min-width: 50px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #111827 !important;
    z-index: 1 !important;
}
.pf-v5-c-input-group button[data-password-toggle]:hover,
.pf-v5-c-input-group button[data-password-toggle]:focus,
.pf-v5-c-input-group button[data-password-toggle]:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: rgba(11,134,166,.04) !important;
}

/* --- Checkbox: shared alignment/spacing across every page (Remember me,
   Update Password's "logout other sessions", and any future check). */
.pf-v5-c-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.pf-v5-c-check__input {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    accent-color: #0b86a6;
}
.pf-v5-c-check__label {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    color: #4b5563 !important;
}

/* --- Custom locale control. Trigger is a real <button>; menu items are
   real <a href> pointing at Keycloak's own generated locale.supported[].url
   -- clicking an option is a normal navigation, not a JS-constructed one.
   Unscoped by page-id: template.ftl renders this identically on every
   customer-facing page, so one component covers all of them. */
.twp-locale {
    position: relative;
}
.twp-locale-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #dce4eb !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 3px 13px rgba(25,55,75,.06) !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #172033 !important;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.twp-locale-trigger:hover {
    border-color: #b9c9d6 !important;
}
.twp-locale-trigger:focus-visible {
    outline: none !important;
    border-color: #0b86a6 !important;
    box-shadow: 0 0 0 3px rgba(11,134,166,.16) !important;
}
.twp-locale-flag {
    font-size: 14px;
    line-height: 1;
}
.twp-locale-label {
    white-space: nowrap;
}
.twp-locale-caret {
    width: .6em !important;
    height: .6em !important;
    margin-left: 1px;
    opacity: .6;
    transition: transform .15s ease;
}
.twp-locale[data-twp-locale].is-open .twp-locale-caret {
    transform: rotate(180deg);
}
.twp-locale-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px !important;
    list-style: none;
    background: #fff !important;
    border: 1px solid #dce4eb !important;
    border-radius: 11px !important;
    box-shadow: 0 12px 32px rgba(17,24,39,.14) !important;
    z-index: 40;
    display: none;
}
.twp-locale[data-twp-locale].is-open .twp-locale-menu {
    display: block;
}
.twp-locale-option {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 10px !important;
    border-radius: 7px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #172033 !important;
    text-decoration: none !important;
}
.twp-locale-option:hover,
.twp-locale-option:focus-visible {
    background: rgba(11,134,166,.08) !important;
    outline: none !important;
}
.twp-locale-option[aria-selected="true"] {
    color: #0b86a6 !important;
    background: rgba(11,134,166,.06) !important;
}

@media (max-width: 560px) {
    .twp-locale-menu {
        right: 0;
        left: auto;
        min-width: 170px;
    }
}

/* =========================================================
   THEMEWP UI V13.1 -- SHORT-VIEWPORT HEIGHT FIX
   =========================================================
   Found live during responsive audit: Login/Register/Reset's fixed
   height (700/605/600px) plus the page's own top/bottom padding
   overflowed the viewport at 1280x720 -- a common laptop resolution --
   with overflow:hidden on the shell, clipping the last ~20-40px of
   content (screenshot-confirmed). This is the same class of bug as the
   760px regression, surfacing on a different axis (viewport height,
   not width). Below 741px tall, switch the shell/panel/main to
   content-driven auto height instead of the fixed number, and trim the
   outer page padding to reclaim vertical room. Confirmed live at
   1280x720: shell no longer overflows the viewport, footer text stays
   fully visible (no clipping), no horizontal scroll introduced. */
@media (max-height: 740px) and (min-width: 951px) {
  body[data-page-id="login-login"] .twp-auth-shell,
  body[data-page-id="login-register"] .twp-auth-shell,
  body[data-page-id="login-login-reset-password"] .twp-auth-shell,
  body:not([data-page-id="login-login"]) .twp-auth-shell {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }
  body[data-page-id="login-login"] .twp-brand-panel,
  body[data-page-id="login-register"] .twp-brand-panel,
  body[data-page-id="login-login-reset-password"] .twp-brand-panel,
  body[data-page-id="login-login"] .twp-auth-main,
  body[data-page-id="login-register"] .twp-auth-main,
  body[data-page-id="login-login-reset-password"] .twp-auth-main,
  body:not([data-page-id="login-login"]) .twp-brand-panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body#keycloak-bg > .pf-v5-c-login {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   THEMEWP UI V13.1 -- SECONDARY-PAGE COMPONENT LAYER
   =========================================================
   Every selector below is verified against the real Keycloak 26.x
   keycloak.v2 (and, where noted, base) FreeMarker source fetched from
   github.com/keycloak/keycloak during this audit -- not invented markup.
   Unscoped by page-id: template.ftl is the single shared shell for every
   page these rules target, so one rule reaches Update Password, Update
   Profile, First Broker Login, Account Already Exists, Link Existing
   Account, Google Linking, Verify Email, Info, and Error simultaneously. */

/* --- Buttons: keycloak.v2's own buttons.ftl (@buttons.button) always
   emits a real <button type="submit"> (or <input> only on the oldest
   base-theme fallback pages) with .pf-v5-c-button plus .pf-m-primary or
   .pf-m-secondary -- PatternFly's own default blue, not ThemeWP's brand.
   This is the concrete "looks like untouched Keycloak" complaint: sizing
   was already generic (kept), color/hierarchy was not (added here). */
.twp-auth-main .pf-v5-c-button.pf-m-primary {
    background: #0b86a6 !important;
    border-color: #0b86a6 !important;
    color: #fff !important;
}
.twp-auth-main .pf-v5-c-button.pf-m-primary:hover,
.twp-auth-main .pf-v5-c-button.pf-m-primary:focus-visible {
    background: #086f89 !important;
    border-color: #086f89 !important;
}
.twp-auth-main .pf-v5-c-button.pf-m-secondary {
    background: transparent !important;
    border: 1px solid #dce4eb !important;
    color: #172033 !important;
}
.twp-auth-main .pf-v5-c-button.pf-m-secondary:hover,
.twp-auth-main .pf-v5-c-button.pf-m-secondary:focus-visible {
    background: rgba(11,134,166,.06) !important;
    border-color: #b9c9d6 !important;
}
.twp-auth-main .pf-v5-c-button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(11,134,166,.16) !important;
}

/* --- Action row: @buttons.actionGroup(horizontal=true) emits
   .pf-v5-c-form__actions.pf-v5-u-flex-nowrap (Update Password,
   Verify Email's app-initiated resend/cancel row); horizontal=false
   (the default -- login-idp-link-confirm.ftl's updateProfile/linkAccount
   pair) emits .pf-v5-u-flex-wrap. Every @buttons.button defaults
   fullWidth=true (width:100%), which is what makes an un-styled
   horizontal pair fight for the same row instead of sitting side by
   side at equal width -- the exact "two controls sized differently"
   look reported for Update Password's Gửi/Hủy row. */
.twp-auth-main .pf-v5-c-form__actions {
    display: flex !important;
    gap: 12px !important;
}
.twp-auth-main .pf-v5-c-form__actions.pf-v5-u-flex-nowrap > * {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
}
.twp-auth-main .pf-v5-c-form__actions.pf-v5-u-flex-wrap {
    flex-direction: column !important;
}
.twp-auth-main .pf-v5-c-form__actions.pf-v5-u-flex-wrap > * {
    width: 100% !important;
}

/* --- "* Required fields" note (template.ftl's displayRequiredFields
   block -- Register, Update Profile). Previously unstyled fallback
   text; muted, small, consistent with the rest of the form chrome. */
.twp-auth-main .pf-v5-c-form__label-text {
    font-size: 12.5px;
}
.twp-auth-main .subtitle .pf-v5-c-helper-text__item-text,
.twp-auth-main .subtitle span {
    color: #6b7785 !important;
    font-size: 12.5px !important;
}
.twp-auth-main .pf-v5-c-form__label-required {
    color: #c8443c !important;
}

/* --- Checkbox row wrapper (#kc-form-options, password-commons.ftl's
   logoutOtherSessions and any future @field.checkbox-based option row).
   The checkbox itself already inherits .pf-v5-c-check styling from the
   shared component above; this just gives the row proper breathing room
   -- previously had none (empty kcFormOptionsClass in keycloak.v2). */
#kc-form-options {
    margin-top: 14px !important;
    margin-bottom: 4px !important;
}

/* --- Alert refinement (base already exists: .twp-auth-main .pf-v5-c-alert
   width/radius, from the v130 ALL-PAGES BASELINE). Adds icon color per
   type and consistent internal spacing -- reaches Account Already Exists'
   error alert, Google Linking's warning alert, and any success/info
   message, since template.ftl renders this identically everywhere. */
.twp-auth-main .pf-v5-c-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    border: 1px solid transparent !important;
}
.twp-auth-main .pf-v5-c-alert.pf-m-danger {
    background: #fdf1f0 !important;
    border-color: #f3c8c4 !important;
}
.twp-auth-main .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon { color: #c8443c !important; }
.twp-auth-main .pf-v5-c-alert.pf-m-warning {
    background: #fef8ec !important;
    border-color: #f2debd !important;
}
.twp-auth-main .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon { color: #b8790c !important; }
.twp-auth-main .pf-v5-c-alert.pf-m-info {
    background: #eef7fa !important;
    border-color: #c9e3ec !important;
}
.twp-auth-main .pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon { color: #0b86a6 !important; }
.twp-auth-main .pf-v5-c-alert.pf-m-success {
    background: #eef9f2 !important;
    border-color: #c3e6d0 !important;
}
.twp-auth-main .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon { color: #1a9a52 !important; }
.twp-auth-main .pf-v5-c-alert__title {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #172033 !important;
}

/* --- Inline links inside form/alert body (Google Linking's "click here"
   resend/continue links, error.ftl's backToApplication, info.ftl's
   proceedWithAction). Generic <a> inside the content column only --
   never touches locale/social/register/reset links, which already have
   their own specific treatment elsewhere in this file. */
.twp-auth-main #kc-info-message a,
.twp-auth-main #kc-error-message a,
.twp-auth-main p.instruction a,
.twp-auth-main .pf-v5-c-alert a {
    color: #0b86a6 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
.twp-auth-main #kc-info-message a:hover,
.twp-auth-main #kc-error-message a:hover,
.twp-auth-main p.instruction a:hover,
.twp-auth-main .pf-v5-c-alert a:hover {
    color: #086f89 !important;
}

/* --- error.ftl / info.ftl / login-idp-link-email.ftl (Google's
   "verify your email to link" page): these three templates predate
   PatternFly entirely -- verified via the real base-theme source, they
   emit only <p class="instruction"> and bare <a> tags with ZERO
   pf-v5-c-* classes, so none of the rules above (or the v130 baseline)
   ever reach them. This is the literal "untouched Keycloak default
   page" the audit was asked to eliminate; nothing before this block
   in the whole file could have matched them. */
#kc-error-message,
#kc-info-message {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
/* margin-bottom (not the flex gap above) is what actually spaces these:
   login-idp-link-email.ftl (Google linking) emits three <p class="instruction">
   as DIRECT children of the page body with no #kc-info-message/#kc-error-message
   wrapper at all, so the flex-gap rule above never reaches it -- confirmed by
   live-rendering the real template.ftl fixture, where an earlier margin:0
   version collapsed all three paragraphs into one dense block. */
.twp-auth-main p.instruction {
    margin: 0 0 14px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #3d4657 !important;
}
.twp-auth-main p.instruction:last-child {
    margin-bottom: 0 !important;
}
.twp-auth-main #traceId {
    font-size: 12px !important;
    color: #8a95a3 !important;
}

/* =========================================================
   THEMEWP UI V13.2 -- FOOTER: VIETNAMESE OVERFLOW FIX
   =========================================================
   Found live in Vietnamese (the realm's own locale, not English): the
   existing desktop footer forces .twp-footer-copyright and
   .twp-footer-social into EQUAL grid columns (1fr/1fr). Vietnamese text
   is measurably longer than English -- copyright needs ~252px and social
   needs ~279px, but equal-1fr columns only gave each ~245px, so copyright
   wrapped to 2 lines AND the social icons dropped to their own 3rd line.
   Total natural content width (copyright + legal links + social, in
   Vietnamese) is ~870-910px including gaps, which is already tighter
   than the 860px card width even before the equal-column waste.
   Fix: flex with natural (not forced-equal) sizing, plus a modest
   font-size/gap/icon-size reduction (12px->10.5px, 18px->10px gap,
   27px->22px icons) that recovers enough room for all three groups to
   fit on one line with zero truncation -- confirmed live via
   scrollWidth/clientWidth comparison on the copyright span (0px overflow
   at 1920 and 1366).
   Scoped to min-width:951px deliberately: the existing mobile stacked
   footer (verified working, single-column, no overlap) is untouched --
   an earlier unscoped version of this rule forced flex-wrap:nowrap
   globally and caused severe text overlap on a 390px viewport. */
@media (min-width: 951px) {
    .twp-page-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        font-size: 10.5px !important;
        line-height: 1.5 !important;
        flex-wrap: nowrap !important;
    }
    .twp-footer-copyright {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    .twp-footer-links {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        gap: 8px !important;
    }
    .twp-footer-social {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        gap: 8px !important;
    }
    .twp-social-link {
        width: 22px !important;
        height: 22px !important;
    }
    .twp-social-link svg {
        width: 19px !important;
        height: 19px !important;
    }
}

/* =========================================================
   THEMEWP UI V13.2 -- REMAINING ENABLED REQUIRED-ACTION PAGES
   =========================================================
   Component coverage for CONFIGURE_TOTP and CONFIGURE_RECOVERY_AUTHN_CODES
   (both confirmed enabled in the realm), verified against the real
   keycloak.v2 FreeMarker source (login-config-totp.ftl,
   login-recovery-authn-code-config.ftl). webauthn-register.ftl,
   webauthn-register-passwordless (base), delete-credential.ftl, and
   idp_link (login-idp-link-confirm.ftl, already covered) need no
   additional CSS -- confirmed by reading their real source, they use
   only the checkbox/button/alert components already generalized above.
   VERIFY_PROFILE reuses user-profile-commons.ftl (same as Update
   Profile, already covered). update_user_locale has no dedicated
   visible page in stock Keycloak -- it applies silently. */

/* --- Numbered/bulleted step lists (TOTP setup steps, recovery codes
   list). kcListClass resolves to plain .pf-v5-c-list with no ThemeWP
   styling anywhere before this round. */
.twp-auth-main .pf-v5-c-list {
    margin: 0 0 16px !important;
    padding-left: 20px !important;
    color: #3d4657 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.twp-auth-main .pf-v5-c-list li {
    margin-bottom: 8px !important;
}
.twp-auth-main .pf-v5-c-list li:last-child {
    margin-bottom: 0 !important;
}
#kc-recovery-codes-list {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    list-style: none !important;
    padding-left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
#kc-recovery-codes-list li {
    background: #f5f7f9 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* --- Panel (recovery codes' raised code display box). */
.twp-auth-main .pf-v5-c-panel.pf-m-raised {
    border: 1px solid #dce4eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}
.twp-auth-main .pf-v5-c-panel__main-body {
    padding: 16px !important;
}

/* --- Recovery codes' print/download/copy row (pf-m-link buttons --
   deliberately NOT given the solid primary/secondary treatment above;
   PatternFly's link-button variant is meant to look like inline
   actions, just needs brand color instead of raw default blue). */
.twp-auth-main .pf-v5-c-button.pf-m-link {
    color: #0b86a6 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.twp-auth-main .pf-v5-c-button.pf-m-link:hover {
    color: #086f89 !important;
}

/* --- Checkbox fallback: recovery codes' confirmation checkbox has no
   kcCheckInputClass (undefined in keycloak.v2's theme.properties, so it
   renders with an empty class attribute) -- .pf-v5-c-check never
   matches it. Bare-attribute fallback, harmless where .pf-v5-c-check
   already applies since accent-color simply gets set twice. */
.twp-auth-main input[type="checkbox"] {
    accent-color: #0b86a6;
}

/* --- Plain message text with no wrapping class (delete-credential.ftl's
   #kc-delete-text and similar). Matches the .instruction treatment
   already applied elsewhere for visual consistency. */
#kc-delete-text {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #3d4657 !important;
    margin-bottom: 16px !important;
}

/* ==========================================================
   THEMEWP V12.25 — PASSWORD SINGLE VISUAL SURFACE
   Purpose:
   PatternFly .pf-m-control may paint its own ::after border.
   The password group must own the only visible rectangle.
   ========================================================== */

.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle]) {
    overflow: hidden !important;
}

/*
 * Internal input-group items must never paint their own
 * border/background/shadow. The outer input-group owns the UI.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
.pf-v5-c-input-group__item {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
.pf-v5-c-input-group__item::before,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
.pf-v5-c-input-group__item::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/*
 * PatternFly control buttons normally paint their own visual
 * rectangle through the button and especially ::after.
 * Remove that surface completely; preserve the icon/click target.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle],
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:hover,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:focus,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:focus-visible,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:active {
    border: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;

    --pf-v5-c-button--after--BorderWidth: 0 !important;
    --pf-v5-c-button--m-control--after--BorderWidth: 0 !important;
    --pf-v5-c-button--m-control--after--BorderBottomWidth: 0 !important;
}

/*
 * Do not remove pseudo-element content globally: only remove its
 * visual box so the password-eye icon itself remains untouched.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]::before,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]::after {
    border: 0 !important;
    border-width: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/*
 * Same height on input surface and toggle click target.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input {
    height: 50px !important;
    min-height: 50px !important;
}

.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle] {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
}

/*
 * No inner separator. Keyboard focus is represented by the
 * existing outer group's :focus-within treatment.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle] {
    border-inline-start: 0 !important;
}

/* ==========================================================
   THEMEWP V12.26
   PASSWORD AUTOFILL / PASSWORD MANAGER SURFACE UNIFICATION

   v135 removed the independent PatternFly toggle rectangle.

   Remaining browser-visible split occurred when Chrome /
   Password Manager painted the INPUT area with its autofill
   surface while the eye area remained white.

   Rule:
   - outer password group owns the visible surface
   - input and eye are transparent internal parts
   - autofill paint is normalized to the same white surface
   ========================================================== */

.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle]) {
    --twp-password-surface: #ffffff;

    background: var(--twp-password-surface) !important;
}

/* Normal input is only content inside the shared surface. */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:hover,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:focus,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * Chrome / Chromium autofill and generated-password state.
 * An inset shadow is intentionally used because Chromium may
 * paint its internal autofill background independently of the
 * author background-color property.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:-webkit-autofill,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:-webkit-autofill:hover,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:-webkit-autofill:focus,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:-webkit-autofill:active {
    -webkit-box-shadow:
        0 0 0 1000px var(--twp-password-surface) inset !important;

    box-shadow:
        0 0 0 1000px var(--twp-password-surface) inset !important;

    background-color:
        var(--twp-password-surface) !important;

    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
}

/* Standards spelling for browsers implementing :autofill. */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input:autofill {
    box-shadow:
        0 0 0 1000px var(--twp-password-surface) inset !important;

    background-color:
        var(--twp-password-surface) !important;
}

/*
 * Eye button shares exactly the same parent surface in every
 * interaction state. It never owns a separate background.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle],
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:hover,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:focus,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:focus-visible,
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
button[data-password-toggle]:active {
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * Browser autofill must not introduce an inner radius or its
 * own clipping boundary between the input and the eye.
 */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle])
input {
    border-radius: 0 !important;
}

/* Outer group remains the only focus rectangle. */
.twp-auth-shell
.pf-v5-c-input-group:has(button[data-password-toggle]):focus-within {
    overflow: hidden !important;
}