/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Light twin of the sign-in backdrop. Settings and other dense pages get the gradient only. */
.app-backdrop[b-18v5dnakzo] {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, #f2f4f8 60%) #f2f4f8;
}

/* The frame's side lines only clear the 920px app grid on wide landscape screens. */
@media (min-width: 1360px) and (min-aspect-ratio: 4/3) {
    .app-backdrop--framed[b-18v5dnakzo] {
        background: url(/images/app-backdrop.svg) center / cover no-repeat, #f2f4f8;
    }
}

/* Hidden until focused; first tab stop on every page using this layout. */
.skip-link:focus[b-18v5dnakzo],
.skip-link:focus-visible[b-18v5dnakzo] {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 16px;
    border-radius: 8px;
    background: #fff;
    color: #006dc0;
    font-weight: 600;
    text-decoration: underline;
    outline: 3px solid #006dc0;
    outline-offset: 2px;
    box-shadow: 0 2px 8px rgba(57, 57, 57, 0.16);
}

main:focus[b-18v5dnakzo] {
    outline: none;
}

/* Centre vertically, but never push overflowing content above the scrollable area. */
.layout-content[b-18v5dnakzo] {
    align-items: center;
    align-items: safe center;
}

/* Spans the page width but only its children take clicks, so content underneath stays usable. */
.top-bar[b-18v5dnakzo] {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 16px;
    left: 24px;
    right: 8px;
    z-index: 11;
    pointer-events: none;
}

.top-bar > *[b-18v5dnakzo] {
    pointer-events: auto;
}

.brand-link[b-18v5dnakzo] {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    border-radius: 4px;
}

.brand-link:focus-visible[b-18v5dnakzo] {
    outline: 3px solid #006dc0;
    outline-offset: 4px;
}

.brand-logo[b-18v5dnakzo] {
    display: block;
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.nav-bar[b-18v5dnakzo] {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    background-color: transparent;
}

.menu-item[b-18v5dnakzo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wrapper[b-18v5dnakzo] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.icon-btn[b-18v5dnakzo] {
    border: none; /* Remove borders */
    border-radius: 50%;
    padding: 1px; /* Some padding */
}

.icon-btn:hover[b-18v5dnakzo] {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);

}

.icon-btn:focus[b-18v5dnakzo] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.icon-btn:focus-visible[b-18v5dnakzo] {
    outline: 3px solid #006dc0;
    outline-offset: 2px;
    box-shadow: none;
}


.avatar[b-18v5dnakzo] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 32px;
    border: 1px solid #e2e2e2;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    color: #333;
}

.avatar img[b-18v5dnakzo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.questionMark[b-18v5dnakzo] {
    font-size: 28px;
    color: #555;
}

.badge[b-18v5dnakzo] {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.s1-menu[b-18v5dnakzo] {
    padding: 8px;
    background-color: white;
    box-shadow: 0px 2px 8px -2px rgba(57, 57, 57, 0.16),
    0px 12px 16px 0px rgba(57, 57, 57, 0.08),
    0px 24px 24px 4px rgba(57, 57, 57, 0.08);
    border: none;
    border-radius: 8px;
    max-height: 500px;

    &:focus-visible {
        outline: none;
    }

    &:has(> [class*="custom-list-menu-items"])[b-18v5dnakzo] {
        padding: 0;
    }
}

.s1-menu-item[b-18v5dnakzo] {
    display: flex;
    gap: 16px;
    border-radius: 8px;
    color: #393939;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    padding: 8px;
    transition: background 0.2s linear,
    color 0.2s linear;
    cursor: pointer;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    span {
        font-size: 14px;
        color: black;
    }

    i[b-18v5dnakzo] {
        font-size: 1.25rem;
        color: black;
    }

    &:hover[b-18v5dnakzo] {
        background-color: #006dc01f;
        color: #393939;
    }

    &:active[b-18v5dnakzo] {
        background-color: #006dc01f;
        color: #006dc0;
    }
}

.s1-menu-backdrop[b-18v5dnakzo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1400;
    backdrop-filter: opacity(0);
}

.app-center-btn[b-18v5dnakzo] {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #006DC0;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    color: #006DC0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    margin: 0;
    box-sizing: border-box;
}

.app-center-btn:hover[b-18v5dnakzo] {
    background-color: #f8f9fa;
    text-decoration: none;
}

.app-center-btn:focus-visible[b-18v5dnakzo] {
    outline: 3px solid #006dc0;
    outline-offset: 2px;
}

.app-center-btn i[b-18v5dnakzo] {
    font-size: 16px;
}

.app-center-btn .app-center-icon[b-18v5dnakzo] {
    width: 20px;
    height: 20px;
}

/* On phones the label would push the top bar off-screen: show the icon only, keep the label for screen readers. */
@media (max-width: 575.98px) {
    .top-bar[b-18v5dnakzo] {
        left: 12px;
    }

    .brand-logo[b-18v5dnakzo] {
        width: 40px;
        height: 40px;
    }

    .app-center-btn[b-18v5dnakzo] {
        padding: 8px;
    }

    .app-center-btn span[b-18v5dnakzo] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Modal styles specific to MainLayout logout modal */
.modal-content[b-18v5dnakzo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    background: #FFF;
    /* Elevations/elevation 3 */
    box-shadow: 0 2px 8px -2px rgba(57, 57, 57, 0.12), 0 12px 16px 0 rgba(57, 57, 57, 0.08), 0 24px 24px 4px rgba(57, 57, 57, 0.04);
    border: none;
    padding: 0;
}

/* Modal Title/Header */
.modal-header[b-18v5dnakzo] {
    display: flex;
    padding: 16px 16px 16px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 8px 8px 0 0;
    background: #FFF;
    border-bottom: none;
    font-size: 16px;
    font-weight: 600;
}
.modal-title[b-18v5dnakzo]{
    color:  #393939;

    /* Titles/700 */
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    letter-spacing: -0.4px;
}

.btn-close[b-18v5dnakzo] {
    font-size: 12px;
}

/* Modal Content/Body */
.modal-body[b-18v5dnakzo] {
    display: flex;
    padding: 0 24px 16px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

/* Modal CTA Zone/Footer */
.modal-footer[b-18v5dnakzo] {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-top: none;
    margin-bottom: 0;
}

/* Cancel Button (Left) */
.modal-footer .btn-cancel[b-18v5dnakzo],
.modal-footer .btn-secondary[b-18v5dnakzo] {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid #E3E9ED;
    background: #FFF;
    color: #000;
}

.modal-footer .btn-secondary i[b-18v5dnakzo] {
    font-size: 18px;
}

/* Logout/Primary Button (Right) */
.modal-footer .btn-logout[b-18v5dnakzo] {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 8px;
    background: #006DC0;
    color: white;
    border: none;
    text-decoration: none;
}

.modal-footer .btn-logout:hover[b-18v5dnakzo] {
    background: #0056a3;
    text-decoration: none;
}

.modal-footer .btn-logout[b-18v5dnakzo]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/images/logout-button.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* /Components/Layout/UnauthorizedLayout.razor.rz.scp.css */
.right-part[b-325budzpi2] {
    font-family: "Inter";
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    overflow-y: auto;
    /* Light backdrop shared with the signed-in pages: a faint line-art frame with two lime accents. The panel
       is the scroll container, so the art stays put while content scrolls. */
    background: url("/images/app-backdrop.svg") center / cover no-repeat, #f2f4f8;
}

/* Portrait tablets: the wide art would be cropped at the sides, so swap in a narrower frame anchored to the top. */
@media (min-width: 577px) and (max-aspect-ratio: 1/1) {
    .right-part[b-325budzpi2] {
        background: url("/images/app-backdrop-portrait.svg") center top / cover no-repeat, #f2f4f8;
    }
}

.right-part .switch-language-wrapper[b-325budzpi2] {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 100px);
    margin: 20px 0;
}

.right-part .right-part-container[b-325budzpi2] {
    outline: none;
    display: flex;
    flex-direction: column;
    /* Grow to fill the panel but never scroll on its own: the whole panel scrolls, so the scrollbar sits at the edge. */
    flex: 1 0 auto;
    height: auto;
    padding: 0 40px;
}

/* The white card. Content-box so the column widths below describe the content, not the card. */
.right-part .right-part-container-content[b-325budzpi2] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    justify-content: flex-start;
    box-sizing: content-box;
    /* A fixed top offset rather than true centring: the card sits near the optical centre, but the logo
       doesn't jump between steps of different heights (email, password, error). */
    margin-top: clamp(24px, 20vh, 260px);
    margin-bottom: 32px;
    padding: 40px 40px 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 40, 120, 0.12), 0 0 0 1px rgba(0, 40, 120, 0.06);
}

@media (max-width: 576px) {
    .right-part .right-part-container[b-325budzpi2] {
        justify-content: unset;
        padding: 24px 16px 0;
    }

    /* Line the switcher up with the form's 16px gutter. */
    .right-part .switch-language-wrapper[b-325budzpi2] {
        width: calc(100% - 32px);
        margin: 16px 0 0;
    }
}

.right-part .right-part-container > div[b-325budzpi2] {
    width: 400px;
    margin-inline: auto;
    text-align: center;
}

/* Opt-in wider column for pages that lay content out side by side (they render an element with class "auth-wide"). */
@media (min-width: 768px) {
    .right-part .right-part-container > div:has(.auth-wide)[b-325budzpi2] {
        width: min(800px, calc(100vw - 160px));
    }

    .right-part .right-part-container > div:has(.auth-wide) .page-header[b-325budzpi2] {
        max-width: 560px;
        margin-inline: auto;
    }
}

/* Fluid on phones: the column never exceeds the viewport (no horizontal scrolling). */
@media (max-width: 576px) {
    .right-part .right-part-container[b-325budzpi2] {
        width: 100%;
    }

    .right-part .right-part-container > div[b-325budzpi2] {
        width: 100%;
        max-width: 400px;
        /* Inline only, so the footer's margin-top: auto still pins it to the bottom. */
        margin-inline: auto;
    }

    /* Phones: no backdrop or card, the form uses the whole screen. */
    .right-part[b-325budzpi2] {
        background: #fff;
    }

    .right-part .right-part-container-content[b-325budzpi2] {
        box-sizing: border-box;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .right-part .secure-connection[b-325budzpi2] {
        color: #6b6a7a;
    }
}

.page-header[b-325budzpi2] {
    text-align: center;
    margin-bottom: 40px;
}

/* Global page header elements - consistent spacing across all pages */
[b-325budzpi2] .logo {
    width: 292px;
    max-width: 100%;
    height: 32px;
    object-fit: contain;
    margin-bottom: 20px; /* keeps the logo and title reading as one header group */
}

[b-325budzpi2] .success-icon {
    width: 240px;
    margin: 20px 0;
}

[b-325budzpi2] .page-title {
    color: #141414;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 8px; /* 8px gap from title to description */
}

[b-325budzpi2] .page-title.error {
    color: #dc3545;
}

[b-325budzpi2] .description {
    color: #6b6a7a;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

[b-325budzpi2] .btn-arrow {
    margin-left: 8px;
    width: 20px;
    height: 20px;
}

[b-325budzpi2] h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
    text-align: center;
}


.secure-connection[b-325budzpi2] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 20px 0 12px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.secure-connection .bi[b-325budzpi2] {
    font-size: 14px;
    /* Deck's dark lime: the bright brand lime (#bbfa6d) is under 3:1 on light backgrounds. */
    color: #5f9300;
}

/* Brand-blue primary button on signed-out pages (5.7:1 with white text). Modals render outside .auth-shell and keep their own colours. */
.auth-shell[b-325budzpi2]  .btn-custom:not(:disabled):not(.disabled) {
    background-color: #005de4;
    --bs-btn-active-bg: #0045a8;
    --bs-btn-active-border-color: #0045a8;
}

.auth-shell[b-325budzpi2]  .btn-custom:not(:disabled):not(.disabled):hover {
    background-color: #0050c4;
}

.auth-shell[b-325budzpi2]  .btn-custom:not(:disabled):not(.disabled):focus,
.auth-shell[b-325budzpi2]  .btn-custom:not(:disabled):not(.disabled):active {
    background-color: #0045a8;
    border-color: #0045a8;
}

/* Larger 48px fields and buttons to suit the card (and easier to tap). Textareas keep their own height. */
.auth-shell[b-325budzpi2]  .form-outline :is(input, select).form-control {
    height: 48px;
}

.auth-shell[b-325budzpi2]  .form-outline :is(input, select).form-control + .form-label {
    transform: translateY(calc(1.2rem + 4px));
}

.auth-shell[b-325budzpi2]  .form-outline :is(input, select).form-control:is(:focus, :not(:placeholder-shown), .active) + .form-label {
    transform: translateY(0) scale(0.85);
}

.auth-shell[b-325budzpi2]  .password-toggle {
    width: 3rem;
    height: 48px;
}

.auth-shell[b-325budzpi2]  .btn-custom {
    padding-block: 12px;
}

/* 1px less than .btn-custom to absorb the border, so both buttons are the same height. */
.auth-shell[b-325budzpi2]  .btn-external {
    padding-block: 11px;
}

/* Fields: the border keeps its >= 3:1 colour (WCAG 1.4.11); hover and focus pick up the brand blue. */
.auth-shell[b-325budzpi2]  .form-outline .form-control:not(.invalid):not(:disabled):hover {
    border-color: #5f6f7e;
}

.auth-shell[b-325budzpi2]  .form-outline .form-control:not(.invalid):focus,
.auth-shell[b-325budzpi2]  .form-outline .form-control:not(.invalid):focus-visible {
    border-color: #005de4;
    box-shadow: 0 0 0 1px #005de4, 0 0 0 4px rgba(0, 93, 228, 0.18);
}

.auth-shell[b-325budzpi2]  .form-outline .form-control:not(.invalid):focus + .form-label,
.auth-shell[b-325budzpi2]  .form-outline .form-control:not(.invalid):not(:placeholder-shown) + .form-label {
    color: #005de4;
}

/* Give the passkey icon the same visual weight as the provider logos next to it. */
.auth-shell[b-325budzpi2]  .btn-external .bi {
    font-size: 20px;
    line-height: 1;
    color: #005de4;
}
/* /Components/Pages/AccountActivation.razor.rz.scp.css */
/* /Components/Pages/AccountReady.razor.rz.scp.css */
/* Page-specific styles for Account Ready Page */

/* Spacing between logo and success icon: 32px */
.logo[b-l63zicyrx5] {
    margin-bottom: 32px;
}

/* Success cup icon */
.success-icon[b-l63zicyrx5] {
    width: 240px;
    margin: 20px 0;
}


.page-title[b-l63zicyrx5] {
    color: #393939;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin-top: 0;
    margin-bottom: 8px; /* 8px gap between title and description */
}

.description[b-l63zicyrx5] {
    color: #6b6a7a;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.btn-arrow[b-l63zicyrx5] {
    margin-left: 8px;
    width: 20px;
    height: 20px;
}

/* /Components/Pages/ChooseApp.razor.rz.scp.css */
.hub[b-r2ngrz4t0f] {
    --hub-brand: #006dc0;
    --hub-brand-soft: rgba(0, 109, 192, 0.08);
    --hub-text: #393939;
    --hub-muted: #6b6a7a;
    --hub-border: #e3e9ed;
    --hub-radius: 16px;
    --hub-shadow: 0 1px 2px rgba(57, 57, 57, 0.04), 0 8px 24px -8px rgba(57, 57, 57, 0.08);
    --hub-shadow-hover: 0 2px 8px -2px rgba(57, 57, 57, 0.12), 0 16px 32px -8px rgba(0, 109, 192, 0.18);

    max-width: 920px;
    margin: 0 auto;
    padding: 5rem 1rem 2.5rem;
    color: var(--hub-text);
}

/* Header */

.hub-header[b-r2ngrz4t0f] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.hub-eyebrow[b-r2ngrz4t0f] {
    margin: 0 0 0.5rem;
    color: var(--hub-brand);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hub-title[b-r2ngrz4t0f] {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.hub-subtitle[b-r2ngrz4t0f] {
    margin: 0.5rem 0 0;
    color: var(--hub-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

/* Sections */

.hub-section + .hub-section[b-r2ngrz4t0f] {
    margin-top: 2rem;
}

.hub-section-title[b-r2ngrz4t0f] {
    margin: 0 0 0.75rem;
    color: var(--hub-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Shared card behaviour */

.recent-card[b-r2ngrz4t0f],
.app-card[b-r2ngrz4t0f] {
    position: relative;
    display: flex;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--hub-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.recent-card:hover[b-r2ngrz4t0f],
.recent-card:focus-visible[b-r2ngrz4t0f],
.app-card:hover[b-r2ngrz4t0f],
.app-card:focus-visible[b-r2ngrz4t0f] {
    color: inherit;
    border-color: rgba(0, 109, 192, 0.35);
    box-shadow: var(--hub-shadow-hover);
    transform: translateY(-2px);
}

.recent-card:focus-visible[b-r2ngrz4t0f],
.app-card:focus-visible[b-r2ngrz4t0f] {
    border-color: var(--hub-brand, #006dc0);
    outline: 3px solid #006dc0;
    outline-offset: 2px;
}

/* Continue where you left off */

.recent-card[b-r2ngrz4t0f] {
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(100deg, #fff 55%, #eef6fc 100%);
    border-left: 4px solid var(--hub-brand);
}

.recent-logo[b-r2ngrz4t0f] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.recent-logo img[b-r2ngrz4t0f] {
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.recent-desc[b-r2ngrz4t0f] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--hub-muted);
    font-size: 14px;
    line-height: 20px;
    text-align: start;
}

.recent-cta[b-r2ngrz4t0f] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--hub-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.recent-cta img[b-r2ngrz4t0f] {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

.recent-card:hover .recent-cta[b-r2ngrz4t0f],
.recent-card:focus-visible .recent-cta[b-r2ngrz4t0f] {
    background: #0056a3;
}

/* All applications */

.app-grid[b-r2ngrz4t0f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.app-grid > li[b-r2ngrz4t0f] {
    display: flex;
}

.app-card[b-r2ngrz4t0f] {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.5rem 1.5rem 1.25rem;
}

.app-logo[b-r2ngrz4t0f] {
    display: flex;
    align-items: center;
    height: 44px;
    max-width: calc(100% - 44px);
}

.app-logo img[b-r2ngrz4t0f] {
    height: 38px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.app-desc[b-r2ngrz4t0f] {
    color: var(--hub-muted);
    font-size: 14px;
    line-height: 20px;
    text-align: start;
}

.app-arrow[b-r2ngrz4t0f] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hub-brand-soft);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.app-arrow img[b-r2ngrz4t0f] {
    width: 14px;
    height: 14px;
    transition: filter 0.25s ease;
}

.app-card:hover .app-arrow[b-r2ngrz4t0f],
.app-card:focus-visible .app-arrow[b-r2ngrz4t0f] {
    background: var(--hub-brand);
    transform: translateX(2px);
}

.app-card:hover .app-arrow img[b-r2ngrz4t0f],
.app-card:focus-visible .app-arrow img[b-r2ngrz4t0f] {
    filter: brightness(0) invert(1);
}

/* Launching: spinner on the chosen card, others dimmed and inert */

.launch-spinner[b-r2ngrz4t0f] {
    display: none;
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.recent-card.is-launching .recent-cta img[b-r2ngrz4t0f],
.app-card.is-launching .app-arrow img[b-r2ngrz4t0f] {
    display: none;
}

.recent-card.is-launching .launch-spinner[b-r2ngrz4t0f],
.app-card.is-launching .launch-spinner[b-r2ngrz4t0f] {
    display: inline-block;
}

.app-card.is-launching .app-arrow[b-r2ngrz4t0f] {
    background: var(--hub-brand);
    color: #fff;
}

.hub.is-launching .recent-card[b-r2ngrz4t0f],
.hub.is-launching .app-card[b-r2ngrz4t0f] {
    cursor: progress;
}

.hub.is-launching .recent-card:not(.is-launching)[b-r2ngrz4t0f],
.hub.is-launching .app-card:not(.is-launching)[b-r2ngrz4t0f] {
    opacity: 0.55;
}

/* Tablet: two columns */

@media (max-width: 991.98px) {
    .app-grid[b-r2ngrz4t0f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: compact single-column rows */

@media (max-width: 575.98px) {
    .hub[b-r2ngrz4t0f] {
        padding-top: 4.5rem;
    }

    .hub-header[b-r2ngrz4t0f] {
        margin-bottom: 1.75rem;
    }

    .hub-subtitle[b-r2ngrz4t0f] {
        font-size: 14px;
    }

    .recent-card[b-r2ngrz4t0f] {
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        padding: 1rem 1.125rem;
    }

    .recent-logo img[b-r2ngrz4t0f] {
        height: 32px;
    }

    .recent-desc[b-r2ngrz4t0f] {
        flex-basis: 100%;
        order: 3;
    }

    .recent-cta[b-r2ngrz4t0f] {
        margin-left: auto;
        padding: 8px 14px;
    }

    .app-grid[b-r2ngrz4t0f] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .app-card[b-r2ngrz4t0f] {
        gap: 0.375rem;
        padding: 1rem 4rem 1rem 1.125rem;
    }

    .app-logo[b-r2ngrz4t0f] {
        height: 34px;
        max-width: 100%;
    }

    .app-logo img[b-r2ngrz4t0f] {
        height: 30px;
    }

    .app-desc[b-r2ngrz4t0f] {
        font-size: 14px;
        line-height: 20px;
    }

    .app-arrow[b-r2ngrz4t0f] {
        top: 50%;
        right: 1rem;
        width: 32px;
        height: 32px;
        transform: translateY(-50%);
    }

    .app-card:hover .app-arrow[b-r2ngrz4t0f],
    .app-card:focus-visible .app-arrow[b-r2ngrz4t0f] {
        transform: translateY(-50%) translateX(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .recent-card[b-r2ngrz4t0f],
    .app-card[b-r2ngrz4t0f],
    .app-arrow[b-r2ngrz4t0f],
    .app-arrow img[b-r2ngrz4t0f],
    .recent-cta[b-r2ngrz4t0f] {
        transition: none;
    }

    .recent-card:hover[b-r2ngrz4t0f],
    .recent-card:focus-visible[b-r2ngrz4t0f],
    .app-card:hover[b-r2ngrz4t0f],
    .app-card:focus-visible[b-r2ngrz4t0f] {
        transform: none;
    }
}
/* /Components/Pages/EmailConfirmationLandingPage.razor.rz.scp.css */
/* Page-specific styles for Email Confirmation Landing Page */


.success-icon[b-nk0lcg2a8f],
.error-icon[b-nk0lcg2a8f] {
    width: 240px;
    margin: 20px 0;
}

.page-title[b-nk0lcg2a8f] {
    color: #393939;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin-top: 0.67em;
}

.page-title.error[b-nk0lcg2a8f] {
    color: #dc3545;
}

.description[b-nk0lcg2a8f] {
    color: #6b6a7a;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.btn-arrow[b-nk0lcg2a8f] {
    margin-left: 8px;
    width: 20px;
    height: 20px;
}

/* /Components/Pages/Error.razor.rz.scp.css */
.error-container[b-ibhpyk2e1u] {
    text-align: center;
    padding: 60px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.error-code[b-ibhpyk2e1u] {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

.error-title[b-ibhpyk2e1u] {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
}

.error-message[b-ibhpyk2e1u] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 32px;
    line-height: 1.6;
}

.action-buttons[b-ibhpyk2e1u] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.action-buttons .btn[b-ibhpyk2e1u] {
    min-width: 160px;
    padding: 12px 24px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-buttons .btn i[b-ibhpyk2e1u] {
    font-size: 18px;
}

.support-hint[b-ibhpyk2e1u] {
    margin-top: 24px;
    font-size: 14px;
    color: #6c757d;
}

@media (max-width: 576px) {
    .error-code[b-ibhpyk2e1u] {
        font-size: 80px;
    }
    
    .error-title[b-ibhpyk2e1u] {
        font-size: 24px;
    }
    
    .error-message[b-ibhpyk2e1u] {
        font-size: 14px;
    }
    
    .action-buttons .btn[b-ibhpyk2e1u] {
        min-width: 140px;
        padding: 10px 20px;
    }
}

/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.forgot-password-subtitle[b-qjz2m63iuy] {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.32px;
    margin: 0;
    text-align: center;
}

.recaptcha-container[b-qjz2m63iuy] {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

/* /Components/Pages/Login.razor.rz.scp.css */
/* Page-specific styles for Login Page */

.login-divider[b-is4i6r0lmg] {
    border-bottom: 1px solid #d9e5f0;
    line-height: 0.1em;
    margin: 32px 0;
    text-align: center;
}

.login-divider span[b-is4i6r0lmg] {
    background-color: #fff;
    padding: 0 12px;
}
/* Same danger palette as the Bootstrap alerts used on the other pages. */
.login-error-box[b-is4i6r0lmg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: 8px;
    margin-bottom: 16px;
    align-self: stretch;
    color: #842029;
}

.error-icon[b-is4i6r0lmg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    color: #b02a37;
}

.error-message[b-is4i6r0lmg] {
    color: #842029;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    flex: 1;
    text-align: left;
}

/* /Components/Pages/LoginWith2FA.razor.rz.scp.css */
.twofa-stack[b-fghmenzoa4] {
    display: grid;
    overflow: hidden;
}

.twofa-stack > .twofa-view[b-fghmenzoa4] {
    grid-area: 1 / 1;
    min-width: 0;
}

.twofa-view[hidden][b-fghmenzoa4] {
    display: none !important;
}

.back-btn[b-fghmenzoa4] {
    border-color: #e2e2e2;
    color: #393939;
    background-color: #fff;
}

.back-btn:hover[b-fghmenzoa4],
.back-btn:focus-visible[b-fghmenzoa4] {
    border-color: #006dc0;
    background-color: #006dc01f;
    color: #006dc0;
}

/* "Trust this device" as a bordered option card: left-aligned so the box reads with its text,
   and the whole card toggles the checkbox (the label's ::after covers it). */
.trust-device[b-fghmenzoa4] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    background-color: #fff;
    text-align: start;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.trust-device:hover[b-fghmenzoa4] {
    border-color: #006dc0;
}

.trust-device:has(input:checked)[b-fghmenzoa4] {
    border-color: #006dc0;
    background-color: #006dc00f;
}

.trust-device:has(input:focus-visible)[b-fghmenzoa4] {
    outline: 2px solid #006dc0;
    outline-offset: 2px;
}

.trust-device[b-fghmenzoa4]  input {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    border: 1.5px solid #6c757d;
    cursor: pointer;
}

.trust-device[b-fghmenzoa4]  input:checked {
    background-color: #006dc0;
    border-color: #006dc0;
}

.trust-device[b-fghmenzoa4]  input:focus {
    box-shadow: none;
}

.trust-device-text[b-fghmenzoa4] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.trust-device-label[b-fghmenzoa4] {
    font-weight: 500;
    color: #212529;
    cursor: pointer;
}

.trust-device-label[b-fghmenzoa4]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.trust-device-hint[b-fghmenzoa4] {
    font-size: 0.875rem;
    color: #6c757d;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-container[b-ld9ogmlllq] {
    text-align: center;
    padding: 60px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.error-code[b-ld9ogmlllq] {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

.error-title[b-ld9ogmlllq] {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
}

.error-message[b-ld9ogmlllq] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 32px;
    line-height: 1.6;
}

.action-buttons[b-ld9ogmlllq] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.action-buttons .btn[b-ld9ogmlllq] {
    min-width: 160px;
    padding: 12px 24px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-buttons .btn i[b-ld9ogmlllq] {
    font-size: 18px;
}

.support-hint[b-ld9ogmlllq] {
    margin-top: 24px;
    font-size: 14px;
    color: #6c757d;
}

@media (max-width: 576px) {
    .error-code[b-ld9ogmlllq] {
        font-size: 80px;
    }
    
    .error-title[b-ld9ogmlllq] {
        font-size: 24px;
    }
    
    .error-message[b-ld9ogmlllq] {
        font-size: 14px;
    }
    
    .action-buttons .btn[b-ld9ogmlllq] {
        min-width: 140px;
        padding: 10px 20px;
    }
}

/* /Components/Pages/SecureAccount.razor.rz.scp.css */
.prompt-icon[b-7umvwz49ld] {
    display: block;
    font-size: 48px;
    line-height: 1;
    color: #00a3e0;
    text-align: center;
    margin: 16px 0;
}

.page-title[b-7umvwz49ld] {
    color: #393939;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-top: 0;
    margin-bottom: 8px;
}

.description[b-7umvwz49ld] {
    color: #6b6a7a;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.option-icon[b-7umvwz49ld] {
    font-size: 28px;
    line-height: 1;
    color: #393939;
}
/* /Components/Pages/Settings/ProfilePictureSettings.razor.rz.scp.css */
.current-picture[b-p0dbnwnksl] {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e2e2;
    background: #f4f4f4;
}

.upload-fields[b-p0dbnwnksl] {
    min-width: 0;
    max-width: 480px;
}

.avatar-grid[b-p0dbnwnksl] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.avatar-option[b-p0dbnwnksl] {
    display: block;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.avatar-option img[b-p0dbnwnksl] {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.avatar-option:hover[b-p0dbnwnksl] {
    border-color: #6c757d;
}

.btn-check:checked + .avatar-option[b-p0dbnwnksl] {
    border-color: #006dc0;
}

.btn-check:focus-visible + .avatar-option[b-p0dbnwnksl] {
    outline: 3px solid #006dc0;
    outline-offset: 2px;
}

fieldset[b-p0dbnwnksl] {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
/* /Components/Pages/Settings/SecuritySettings/RecoveryCodesDisplay.razor.rz.scp.css */
.recovery-codes[b-equ1a0ut8g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid #868e96;
    border-radius: 8px;
    background: #f8f9fa;
    max-width: 28rem;
}

.recovery-code[b-equ1a0ut8g] {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #393939;
    user-select: all;
}
/* /Components/Pages/Settings/SecuritySettings/SetupAuthenticator.razor.rz.scp.css */
.step[b-lzjct8t3n2] {
    display: block;
    padding-bottom: 0.5rem;
}

.qrcode-key[b-lzjct8t3n2] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #f8f9fa;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    word-break: break-word;
    user-select: all;
}

.qrcode-key strong[b-lzjct8t3n2] {
    font-weight: 600;
}
/* /Components/Pages/Settings/Shared/MainContent.razor.rz.scp.css */

/* Top-aligned (not vertically centred) so the panel stays put when switching between settings pages of
   different heights. The block padding clears the absolutely positioned top nav bar. */
.settings-container[b-dgl73p22ou] {
    align-self: flex-start;
    margin-block: 0;
    padding-block: 96px 24px;
}

/* On wide screens the container fills the viewport and only the content panel scrolls, so the page itself
   never gets a scrollbar and the navigation stays in view. */
@media (min-width: 992px) {
    .settings-container[b-dgl73p22ou] {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-block: 96px 24px;
    }

    .settings-container > .row[b-dgl73p22ou] {
        --bs-gutter-y: 0;
        flex: 1 1 auto;
        min-height: 0;
    }

    .settings-container > .row > *[b-dgl73p22ou] {
        height: 100%;
    }

    .content[b-dgl73p22ou] {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

.content[b-dgl73p22ou] {
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 2px 8px -2px #3939390a, 0 12px 16px #39393905;

    .title {
        display: flex;
        align-items: center;
        gap: 16px;
        color: #393939;
        font-size: 20px !important;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -.4px;

        .title-text {
            margin: 0;
            font: inherit;
            letter-spacing: inherit;
            color: inherit;
        }
    }

    [b-dgl73p22ou] .description {
        color: #6b6a7a;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -.28px;
        align-self: stretch;
    }

    .actions[b-dgl73p22ou] {
        display: flex;
        gap: 16px
    }
}

/* /Components/Pages/Settings/Shared/SettingsNavBar.razor.rz.scp.css */
.sidebar[b-pcamr3e1bb] {
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    border-radius: 12px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 2px 8px -2px #3939390a, 0 12px 16px #39393905;

    h2 {
        color: #393939;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
        letter-spacing: -.48px;
        margin-bottom: 0;
        margin-top: 16px
    }

    p[b-pcamr3e1bb] {
        margin-top: 0;
        color: #6b6a7a;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -.32px
    }
}

.profile[b-pcamr3e1bb] {
    text-align: center;
    max-width: 100%;
    margin-top: 12px;
}

.profile-picture[b-pcamr3e1bb] {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-picture-link[b-pcamr3e1bb] {
    position: relative;
}

.profile-picture-link:hover .profile-picture[b-pcamr3e1bb] {
    filter: brightness(0.9);
}

.profile-picture-edit[b-pcamr3e1bb] {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #006dc0;
    color: #fff;
    font-size: 0.8rem;
}

.profile-picture-link:focus-visible[b-pcamr3e1bb] {
    outline: 3px solid #006dc0;
    outline-offset: 2px;
}

.profile h2[b-pcamr3e1bb],
.profile p[b-pcamr3e1bb] {
    overflow-wrap: anywhere;
}

.navbar[b-pcamr3e1bb] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

[b-pcamr3e1bb] .nav-item {
    width: 100%;
}

[b-pcamr3e1bb] .nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    color: #393939;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.28px;
    color: inherit;
    text-decoration: none;

    &:hover {
        background: #f4f4f4;
    }

    img[b-pcamr3e1bb] {
        margin-right: 12px;
    }
}

[b-pcamr3e1bb] .nav-item.active {
    background: #ebf4fa;
    color: #006dc0;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.28px;
}

/* On small screens the sidebar sits above the page content: show it as a compact tab strip so the
   content is reachable without scrolling past the profile card. */
@media (max-width: 991.98px) {
    .sidebar[b-pcamr3e1bb] {
        padding: 8px;
    }

    /* Tabs keep a readable minimum width and wrap onto extra rows instead of squeezing their labels
       into each other; every tab stays visible, so no horizontal scrolling or JS is needed. */
    .navbar[b-pcamr3e1bb] {
        margin-top: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
        align-items: stretch;
        gap: 4px;
    }

    [b-pcamr3e1bb] .nav-item {
        width: auto;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        padding: 8px 4px;
        text-align: center;
        font-size: 13px;
        line-height: 16px;
        hyphens: auto;
        overflow-wrap: break-word;

        img {
            margin-right: 0;
        }
    }

    [b-pcamr3e1bb] .nav-item.active {
        font-size: 13px;
        line-height: 16px;
    }
}
/* /Components/Pages/Settings/UserDetails.razor.rz.scp.css */
.main-wrapper[b-9310sfz0my] {
    display: flex;
    width: 60%;
    margin: 110px auto;
    gap: 30px;
}

.content[b-9310sfz0my] {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    background: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    border-radius: 12px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 2px 8px -2px #3939390a, 0 12px 16px #39393905;
}

.title[b-9310sfz0my] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #393939;
    font-family: Inter;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -.4px;
}


.actions[b-9310sfz0my] {
    display: flex;
    gap: 16px
}
/* /Components/Pages/SsoSetup/Shared/SsoGuide.razor.rz.scp.css */
.guide-sidebar[b-sfh32nez8i] {
    height: 100%;
}

.guide-card[b-sfh32nez8i] {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 2px 8px -2px #3939390a, 0 12px 16px #39393905;
    padding: 24px;
}

.guide-header[b-sfh32nez8i] {
    color: #393939;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e2e2;
}

.guide-step[b-sfh32nez8i] {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.guide-step.active[b-sfh32nez8i],
.guide-step[aria-current="step"][b-sfh32nez8i] {
    background: #ebf4fa;
}

.guide-step.completed .step-header strong[b-sfh32nez8i] {
    color: #5f6b77;
    font-weight: 600;
}

.step-badge[b-sfh32nez8i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    background: #e3e9ed;
    color: #4a5866;
}

.step-badge.active[b-sfh32nez8i] {
    background: rgb(0, 109, 192);
    color: #fff;
}

.step-badge.completed[b-sfh32nez8i] {
    background: #198754;
    color: #fff;
}

.step-header[b-sfh32nez8i] {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.step-content[b-sfh32nez8i] {
    padding-left: 32px;
    color: #393939;
}

.step-content ol[b-sfh32nez8i],
.step-content ul[b-sfh32nez8i] {
    padding-left: 18px;
}

.step-content li[b-sfh32nez8i] {
    margin-bottom: 4px;
    line-height: 1.5;
}

.step-content code[b-sfh32nez8i] {
    font-size: 12px;
    word-break: break-all;
}
/* /Components/Pages/SsoSetup/Shared/SsoLayout.razor.rz.scp.css */
/*
  Fits within MainLayout's viewport-height flex container.
  Two-column layout: guide sidebar (left) + scrollable main content (right).
  No page-level scrolling on wide screens — the whole main panel (header included) scrolls,
  so the title does not permanently eat into the space left for the steps.
  The EnterSoftOne logo comes from MainLayout's top bar.
  Below the lg breakpoint the columns stack and the page scrolls normally.
*/
.sso-layout[b-hzjh5y22uk] {
    width: 90%;
    max-width: 1200px;
    height: calc(100vh - 80px);
    margin-top: 60px;
    display: flex;
    flex-direction: column;
}

.sso-columns[b-hzjh5y22uk] {
    flex: 1;
    display: flex;
    gap: 24px;
    min-height: 0; /* critical: allows flex children to shrink below content size */
}

.sso-main[b-hzjh5y22uk] {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 2px 8px -2px #3939390a, 0 12px 16px #39393905;
}

.sso-main-header[b-hzjh5y22uk] {
    padding: 32px 32px 0 32px;
    flex-shrink: 0;
}

.sso-main-body[b-hzjh5y22uk] {
    flex: 1 0 auto;
    padding: 24px 32px 32px 32px;
}

.sso-sidebar[b-hzjh5y22uk] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.title[b-hzjh5y22uk] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #393939;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -.4px;
    padding-bottom: 16px;
}

.title-text[b-hzjh5y22uk] {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

[b-hzjh5y22uk] .description {
    color: #6b6a7a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.28px;
    padding-bottom: 8px;
}

@media (max-width: 991.98px) {
    .sso-layout[b-hzjh5y22uk] {
        width: calc(100% - 24px);
        height: auto;
        margin: 72px 0 24px 0;
    }

    .sso-columns[b-hzjh5y22uk] {
        flex-direction: column;
        gap: 16px;
    }

    .sso-main[b-hzjh5y22uk] {
        flex: none;
        overflow: visible;
    }

    .sso-main-header[b-hzjh5y22uk] {
        padding: 20px 20px 0 20px;
    }

    .sso-main-body[b-hzjh5y22uk] {
        padding: 16px 20px 20px 20px;
    }

    /* The guide is secondary to the form controls on small screens. */
    .sso-sidebar[b-hzjh5y22uk] {
        flex: none;
        order: 2;
        overflow: visible;
    }
}
/* /Components/Pages/SsoSetup/SsoSetup.razor.rz.scp.css */
/* Page-level styles for SsoSetup - cards within the content area (.sso-content scopes them to this page). */

/* Step numbers in brand blue, matching the primary buttons. */
.sso-content[b-a98iopggie]  .sso-step-number {
    background-color: rgb(0, 109, 192);
    color: #fff;
}

/* Card titles sit one level below the page title. */
.sso-content[b-a98iopggie]  .card h2.h5 {
    font-size: 17px;
    font-weight: 600;
    color: #393939;
}

.sso-content[b-a98iopggie]  summary {
    cursor: pointer;
}

/* Bootstrap's default checkbox border (#dee2e6) is barely visible on white. */
.sso-content[b-a98iopggie]  .form-check-input {
    border-color: #7a8a99;
}

.sso-content[b-a98iopggie]  .form-check-input:checked {
    background-color: rgb(0, 109, 192);
    border-color: rgb(0, 109, 192);
}
/* /Components/Pages/SsoSetup/Steps/Step4Activation.razor.rz.scp.css */
/* Plain status text with an icon, so it cannot be mistaken for the action buttons beside it. */
.sso-status[b-3du2ez1zq0] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.sso-status.is-active[b-3du2ez1zq0] {
    color: #146c43;
}

.sso-status.is-inactive[b-3du2ez1zq0] {
    color: #5f6b77;
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */

.language-dropdown[b-xn1hk7z93o] {
    position: relative;
}

.language-dropdown .lang-trigger[b-xn1hk7z93o] {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid #E2E2E2;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    color: #212529;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    box-sizing: border-box;
}

.language-dropdown .lang-trigger:hover[b-xn1hk7z93o] {
    background-color: #f8f9fa;
    border-color: #006dc0;
}

.language-dropdown .lang-trigger:focus[b-xn1hk7z93o] {
    outline: 2px solid #2684ff;
    outline-offset: 2px;
}

.language-dropdown .lang-trigger[b-xn1hk7z93o]::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23393939' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    transition: transform .18s;
    pointer-events: none;
}

.language-dropdown[data-open="true"] .lang-trigger[b-xn1hk7z93o]::after {
    transform: rotate(180deg);
}

.lang-list[b-xn1hk7z93o] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 100%;
    margin: 4px 0 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.lang-item[b-xn1hk7z93o] {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    user-select: none;
}

.lang-item:hover[b-xn1hk7z93o] {
    background: #f2f5f9;
}

.lang-item:focus-visible[b-xn1hk7z93o] {
    outline: 2px solid #2684ff;
    outline-offset: -2px;
}

.lang-item.active[b-xn1hk7z93o] {
    background: rgba(0, 109, 192, 0.08);
}

.short[b-xn1hk7z93o] {
    font-weight: bold;
    min-width: 32px;
    text-transform: uppercase;
    margin-left: 0;
    line-height: 20px;
}

.full[b-xn1hk7z93o] {
    flex: 1;
    line-height: 20px;
}

/* On phones the trigger shows only the short code; the full name stays available to screen readers. */
@media (max-width: 575.98px) {
    .lang-trigger .full[b-xn1hk7z93o] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* /Components/Shared/OtpInput.razor.rz.scp.css */
.otp-input[b-rmgjpqhnej] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 1px solid #7a8a99;
    color: #393939;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.48px;

    &:active,
    &:focus {
        border: 2px solid #006dc0;
        outline: none;
    }

    &:focus-visible[b-rmgjpqhnej] {
        border: 2px solid #006dc0;
        outline: 3px solid #006dc0;
        outline-offset: 2px;
    }
}

.filled[b-rmgjpqhnej] {
    border: 2px solid #006dc0;
}

.error[b-rmgjpqhnej] {
    border: 2px solid #ff0038;
    color: #ff0038;
}

.otp-input.error:focus-visible[b-rmgjpqhnej] {
    outline-color: #ff0038;
}


.form-outline.is-submitting .otp-input[b-rmgjpqhnej] {
    opacity: 0.6;
    cursor: not-allowed;
}

.otp-progress[b-rmgjpqhnej] {
    display: none;
    height: 0.5rem;
}

.form-outline.is-submitting .otp-progress[b-rmgjpqhnej] {
    display: flex;
}
/* /Components/Shared/PasswordField.razor.rz.scp.css */
.form-outline.password-field .form-control[b-690rlb0ye3] {
    padding-right: 2.75rem;
}

.password-toggle[b-690rlb0ye3] {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: #6c757d;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s ease;
}

.password-toggle:hover[b-690rlb0ye3] {
    color: #006dc0;
}

.password-toggle:focus-visible[b-690rlb0ye3] {
    outline: 2px solid #006dc0;
    outline-offset: -2px;
}
/* /Components/Shared/PasswordRequirements.razor.rz.scp.css */
.password-requirements[b-jyv2wiz9l8] {
    margin: 0.5rem 0 1rem 0;
}

.password-tier-label[b-jyv2wiz9l8] {
    margin: 0 0 6px 0;
    min-height: 20px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.24px;
    text-align: right;
}

.password-tier-label .tier-average[b-jyv2wiz9l8],
.password-tier-label .tier-strong[b-jyv2wiz9l8] {
    display: none;
}

.password-tier-label .tier-average.visible[b-jyv2wiz9l8],
.password-tier-label .tier-strong.visible[b-jyv2wiz9l8] {
    display: inline;
}

.password-tier-label .tier-average[b-jyv2wiz9l8] {
    color: #8A5A00;
}

.password-tier-label .tier-strong[b-jyv2wiz9l8] {
    color: #1E7B34;
}

.password-strength-bar[b-jyv2wiz9l8] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.strength-segment[b-jyv2wiz9l8] {
    flex: 1;
    height: 4px;
    background-color: #E5E5E5;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.strength-segment.filled[b-jyv2wiz9l8] {
    background-color: #1E7B34;
}

.password-requirements.tier-weak-state .strength-segment.filled[b-jyv2wiz9l8] {
    background-color: #B07400;
}

.requirements-title[b-jyv2wiz9l8] {
    color: #6b6a7a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.2px;
    margin-bottom: 8px;
    text-align: left;
}

.requirements-list + .requirements-title[b-jyv2wiz9l8] {
    margin-top: 12px;
}

.requirements-list[b-jyv2wiz9l8] {
    margin: 0;
    padding: 0;
    list-style-type: none;
    /* Host pages centre their text; the requirements read as a left-aligned checklist. */
    text-align: left;
}

/* Top-aligned so the check stays on the first line when a requirement wraps. */
.requirements-list li[b-jyv2wiz9l8] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.requirement-checkbox[b-jyv2wiz9l8] {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    margin-top: 2px;
    margin-right: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.requirements-list li.valid .requirement-checkbox[b-jyv2wiz9l8] {
    background-color: #1E7B34;
    border-color: #1E7B34;
}

.requirements-list li.valid .requirement-checkbox[b-jyv2wiz9l8]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.requirement-text[b-jyv2wiz9l8] {
    color: #6b6a7a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.2px;
    transition: color 0.3s ease;
}

.requirements-list li.valid .requirement-text[b-jyv2wiz9l8] {
    color: #1E7B34;
}

.requirements-list li.recommended-row .requirement-text[b-jyv2wiz9l8] {
    flex: 1;
}

.recommended-badge[b-jyv2wiz9l8] {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 10px;
    background-color: #EEF1F6;
    color: #5B6B7E;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
    white-space: nowrap;
    align-self: center;
}

/* /Components/Shared/TwoFactorMethodCard.razor.rz.scp.css */
.two-factor-method-card[b-86pfnx9vpt] {
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

button:hover > .two-factor-method-card[b-86pfnx9vpt],
button:focus-visible > .two-factor-method-card[b-86pfnx9vpt] {
    border-color: #006dc0;
    background-color: #006dc00f;
}

button:disabled > .two-factor-method-card[b-86pfnx9vpt] {
    opacity: 0.6;
    cursor: not-allowed;
}