/* /Components/Layout/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher[b-g8rdlylcjl] {
    display: inline-flex;
    align-items: center;
}

/* Trigger: the current language's flag is the indicator. */
.lang-trigger[b-g8rdlylcjl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    line-height: 1;
}

    .lang-trigger:hover[b-g8rdlylcjl],
    .lang-trigger[aria-expanded="true"][b-g8rdlylcjl] {
        background-color: var(--sk-light, #f3f6f9);
    }

/* A hairline keeps the white bands of a flag from bleeding into the background. */
.flag[b-g8rdlylcjl] {
    display: inline-block;
    width: 1.35rem;
    height: 0.95rem;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

    .flag[b-g8rdlylcjl]  svg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.lang-caret[b-g8rdlylcjl] {
    width: 0;
    height: 0;
    border-left: 0.26rem solid transparent;
    border-right: 0.26rem solid transparent;
    border-top: 0.28rem solid var(--sk-muted, #878a99);
    transition: transform .15s ease;
}

.lang-trigger[aria-expanded="true"] .lang-caret[b-g8rdlylcjl] { transform: rotate(180deg); }

/* Menu rows: flag then the language written in its own tongue. */
.lang-item[b-g8rdlylcjl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

    .lang-item.active[b-g8rdlylcjl] {
        background-color: var(--sk-light, #f3f6f9);
        color: var(--sk-primary, #405189);
        font-weight: 500;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell: fixed navy sidebar, white top bar, light content canvas. */

.app-layout[b-kj44l37usv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-sidebar[b-kj44l37usv] {
    background-color: var(--sk-sidebar-bg, #405189);
}

.app-main[b-kj44l37usv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------- Top bar ---------- */

.app-topbar[b-kj44l37usv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--sk-topbar-height, 70px);
    padding: 0 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid var(--sk-border, #e9ebec);
}

.topbar-right[b-kj44l37usv] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}

/* Search pill, pinned to the left of the bar. */
.member-search[b-kj44l37usv] {
    margin-bottom: 0;
    max-width: 100%;
}

    .member-search[b-kj44l37usv]  input {
        width: 20rem;
        max-width: 100%;
        padding-left: 2.1rem;
        background-color: var(--sk-light, #f3f6f9);
        border-color: transparent;
        border-radius: 0.25rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23878a99' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0.7rem center;
        background-size: 0.85rem;
    }

    .member-search[b-kj44l37usv]  input:focus {
        background-color: #fff;
        border-color: #a3adcc;
    }

/* User chip with initials avatar — the trigger for the account dropdown. */
.user-chip[b-kj44l37usv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
}

    .user-chip:hover[b-kj44l37usv],
    .user-chip[aria-expanded="true"][b-kj44l37usv] {
        background-color: var(--sk-light, #f3f6f9);
    }

/* Caret that flips when the menu is open. */
.user-caret[b-kj44l37usv] {
    width: 0;
    height: 0;
    border-left: 0.28rem solid transparent;
    border-right: 0.28rem solid transparent;
    border-top: 0.3rem solid var(--sk-muted, #878a99);
    transition: transform .15s ease;
}

.user-chip[aria-expanded="true"] .user-caret[b-kj44l37usv] { transform: rotate(180deg); }

.user-avatar[b-kj44l37usv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(64, 81, 137, .12);
    color: var(--sk-primary, #405189);
    font-size: var(--sk-font-xs, 0.75rem);
    font-weight: 600;
    flex-shrink: 0;
}

.user-name[b-kj44l37usv] {
    font-weight: 500;
    font-size: var(--sk-font-size, 0.875rem);
    color: var(--sk-heading, #495057);
    white-space: nowrap;
}

/* ---------- Content canvas ---------- */

.app-content[b-kj44l37usv] {
    flex: 1;
    padding: 1.5rem;
    background-color: var(--sk-body-bg, #f3f3f9);
}

@media (max-width: 640.98px) {
    .app-topbar[b-kj44l37usv] {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .member-search[b-kj44l37usv]  input { width: 100%; }

    .user-name[b-kj44l37usv] { display: none; }

    .app-content[b-kj44l37usv] { padding: 1rem; }
}

@media (min-width: 641px) {
    .app-layout[b-kj44l37usv] { flex-direction: row; }

    .app-sidebar[b-kj44l37usv] {
        width: var(--sk-sidebar-width, 250px);
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    /* A sticky bar is its own stacking context, so anything inside it is stuck below Bootstrap's
       backdrop — see the section outlet in MainLayout for why dialogs render outside the bar. */
    .app-topbar[b-kj44l37usv] {
        position: sticky;
        top: 0;
        z-index: 5;
    }
}

/* ---------- Error banner ---------- */

#blazor-error-ui[b-kj44l37usv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-kj44l37usv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navy sidebar: brand, small uppercase section labels, icon + label nav items. */

.sidebar-brand[b-735y1yvppa] {
    display: flex;
    align-items: center;
    height: var(--sk-topbar-height, 70px);
    padding: 0 1.5rem;
}

.brand-link[b-735y1yvppa] {
    display: flex;
    align-items: center;
    color: var(--sk-sidebar-item-hover, #fff);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    overflow: hidden;
}

    .brand-link:hover[b-735y1yvppa] { color: var(--sk-sidebar-item-hover, #fff); text-decoration: none; }

/* An uploaded logo scales to fit the brand strip without distorting. */
.brand-logo[b-735y1yvppa] {
    max-height: 2.6rem;
    max-width: 100%;
    object-fit: contain;
}

.brand-text[b-735y1yvppa] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Logo with a wordmark beside it ---------- */

.brand-link-paired[b-735y1yvppa] { gap: 0.5rem; }

    /* The image is held back so the two share the strip: left to itself a wide logo takes the
       whole width and the text it was paired with never appears at all. */
    .brand-link-paired .brand-logo[b-735y1yvppa] { max-width: 55%; flex-shrink: 0; }

/* Smaller than the standalone club name, which at the full brand size leaves room for barely a
   word once the logo has taken its half. Truncates rather than pushing the logo out of shape. */
.brand-logo-text[b-735y1yvppa] {
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Mobile toggle ---------- */

.navbar-toggler[b-735y1yvppa] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    position: absolute;
    top: 1.1rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.25rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.08);
}

    .navbar-toggler:checked[b-735y1yvppa] { background-color: rgba(255, 255, 255, 0.18); }

.nav-scrollable[b-735y1yvppa] { display: none; }

.navbar-toggler:checked ~ .nav-scrollable[b-735y1yvppa] { display: block; }

/* ---------- Section labels ---------- */

.nav-group-title[b-735y1yvppa] {
    padding: 1.2rem 1.5rem 0.5rem;
    font-size: var(--sk-font-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sk-sidebar-label, #838fb9);
}

/* ---------- Nav items ---------- */

.nav-item[b-735y1yvppa] {
    padding: 0 0.75rem;
    margin-bottom: 0.1rem;
}

    .nav-item[b-735y1yvppa]  .nav-link {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.6rem 0.75rem;
        border-radius: 0.25rem;
        color: var(--sk-sidebar-item, #abb9e8);
        font-size: var(--sk-font-size, 0.875rem);
        font-weight: 400;
        background: none;
        border: none;
        width: 100%;
        text-decoration: none;
        transition: color .15s ease, background-color .15s ease;
    }

    .nav-item[b-735y1yvppa]  .nav-link:hover {
        color: var(--sk-sidebar-item-hover, #fff);
        background-color: rgba(255, 255, 255, 0.07);
        text-decoration: none;
    }

    .nav-item[b-735y1yvppa]  a.active {
        color: var(--sk-sidebar-item-hover, #fff);
        background-color: rgba(255, 255, 255, 0.12);
        font-weight: 500;
    }

/* ---------- Icons ---------- */
/* The glyph artwork lives in app.css as a --icon custom property, shared with the stat cards. */

.nav-icon[b-735y1yvppa] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}

@media (min-width: 641px) {
    .navbar-toggler[b-735y1yvppa] { display: none; }

    .nav-scrollable[b-735y1yvppa] {
        display: block;
        height: calc(100vh - var(--sk-topbar-height, 70px));
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-60zlb0dypt],
.components-reconnect-repeated-attempt-visible[b-60zlb0dypt],
.components-reconnect-failed-visible[b-60zlb0dypt],
.components-pause-visible[b-60zlb0dypt],
.components-resume-failed-visible[b-60zlb0dypt],
.components-rejoining-animation[b-60zlb0dypt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-retrying[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-failed[b-60zlb0dypt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-60zlb0dypt] {
    display: block;
}


#components-reconnect-modal[b-60zlb0dypt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-60zlb0dypt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-60zlb0dypt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-60zlb0dypt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-60zlb0dypt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-60zlb0dypt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-60zlb0dypt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-60zlb0dypt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-60zlb0dypt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-60zlb0dypt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-60zlb0dypt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-60zlb0dypt] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-60zlb0dypt] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-60zlb0dypt] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-60zlb0dypt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-60zlb0dypt] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-60zlb0dypt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-60zlb0dypt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-60zlb0dypt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/ReleaseNotesDialog.razor.rz.scp.css */
/* "What's new" button in the top bar, and the notes inside its dialog. */

.notes-trigger[b-zw1uw7dgbe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
}

    .notes-trigger:hover[b-zw1uw7dgbe] {
        background-color: var(--sk-light, #f3f6f9);
    }

.notes-icon[b-zw1uw7dgbe] {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--sk-muted, #878a99);
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}

.notes-trigger:hover .notes-icon[b-zw1uw7dgbe] {
    background-color: var(--sk-primary, #405189);
}

/* Sits on the corner of the bell rather than beside it, so the bar's spacing does not shift
   the moment a release is published. */
.notes-dot[b-zw1uw7dgbe] {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--sk-danger, #f06548);
    border: 1px solid #fff;
}

/* ---------- Inside the dialog ---------- */

.release + .release[b-zw1uw7dgbe] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sk-border, #e9ebec);
}

.release-head[b-zw1uw7dgbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.release-headline[b-zw1uw7dgbe] {
    margin: 0.5rem 0 0.75rem;
    color: var(--sk-heading, #495057);
    font-weight: 500;
}

.release-section[b-zw1uw7dgbe] {
    margin: 1rem 0 0.35rem;
    color: var(--sk-muted, #878a99);
    text-transform: uppercase;
    font-size: var(--sk-font-xs, 0.75rem);
    letter-spacing: 0.04em;
}

.release-items[b-zw1uw7dgbe] {
    margin: 0;
    padding-left: 1.1rem;
}

    .release-items li + li[b-zw1uw7dgbe] {
        margin-top: 0.3rem;
    }
/* /Components/Pages/Attendance.razor.rz.scp.css */
/*
    The day's lessons, stacked. On a phone the button that opens a register is the point of this
    screen, so it gets the full width rather than sitting past the right-hand edge of a table.

    Above the small breakpoint the button shrinks back to its own width at the end of the row, where
    a pointer expects it.
*/

.day-what[b-va465hsnxd] {
    min-width: 0;
}

.day-detail[b-va465hsnxd] {
    color: var(--sk-muted);
    font-size: var(--sk-font-sm);
}

/* The register being looked at, marked without borrowing the table-row highlight it used to use. */
.day-action[b-va465hsnxd] {
    width: 100%;
}

@media (min-width: 576px) {
    .day-action[b-va465hsnxd] {
        width: auto;
    }
}
/* /Components/Pages/GeneralTasks.razor.rz.scp.css */
/* A mail body arrives with its own line breaks and nothing else. Honouring them is the difference
   between a readable letter and one long paragraph; wrapping anywhere keeps a pasted URL or a long
   reference number from pushing the whole card sideways. */
.general-task-body[b-u183oe8mk3] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Pages/ImportDebtors.razor.rz.scp.css */
/* The same before-and-after as the federation import's preview, which is a separate component and
   so cannot borrow its scoped styles. Kept identical on purpose: the two previews are read the same
   way, and one of them looking different would suggest it meant something different. */

.import-change + .import-change[b-6pagl1hxhd] {
    margin-top: 0.2rem;
}

.import-old[b-6pagl1hxhd] {
    text-decoration: line-through;
    color: var(--sk-muted, #878a99);
}
/* /Components/Pages/ImportMembers.razor.rz.scp.css */
/* One field's before-and-after in the import preview. */

.import-change + .import-change[b-f38hz0x8fp] {
    margin-top: 0.2rem;
}

/* Struck through rather than removed: the reader is being asked to approve a replacement, so the
   value being replaced has to stay legible next to the one taking its place. */
.import-old[b-f38hz0x8fp] {
    text-decoration: line-through;
    color: var(--sk-muted, #878a99);
}
/* /Components/Shared/AttendanceRegisterPanel.razor.rz.scp.css */
/*
    The register is taken standing on the mat, usually on a phone. Two rules follow from that.

    Below the small breakpoint the pair of marks takes the whole width and grows to a size a thumb
    hits without aiming; above it they sit compactly at the end of the member's row, where a mouse
    wants them.

    The name block is allowed to shrink (min-width: 0) so a long name wraps instead of pushing the
    buttons off the row — the exact failure the table version had.
*/

.register-who[b-zfzrewhtk7] {
    min-width: 0;
}

.register-detail[b-zfzrewhtk7] {
    color: var(--sk-muted);
    font-size: var(--sk-font-sm);
}

@media (max-width: 575.98px) {
    .register-mark[b-zfzrewhtk7] {
        width: 100%;
    }

        .register-mark .btn[b-zfzrewhtk7] {
            flex: 1 1 0;
            padding-top: 0.625rem;
            padding-bottom: 0.625rem;
        }
}

/*
    "Afgemeld" sits next to "Aanwezig", which carries the success colour on its outline, so the
    theme's hairline border left the pair looking like one live button and one disabled one. It
    takes the heading grey — a step darker than the muted grey it is lettered in, so at arm's length
    on the mat it holds its own next to the success outline and reads as a choice not yet made
    rather than a choice not available.
*/
.register-mark .btn-outline-secondary[b-zfzrewhtk7] {
    --bs-btn-border-color: var(--sk-heading);
    --bs-btn-hover-border-color: var(--sk-heading);
}
/* /Components/Shared/BrandingPanel.razor.rz.scp.css */
/* Checkerboard behind the logo so transparent PNGs are readable. */
.logo-preview[b-05i2u23v5w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 4rem;
    padding: 0.4rem;
    border: 1px dashed var(--sk-border, #e9ebec);
    border-radius: 0.25rem;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f3f6f9 25%, transparent 25%),
        linear-gradient(-45deg, #f3f6f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f6f9 75%),
        linear-gradient(-45deg, transparent 75%, #f3f6f9 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    flex-shrink: 0;
}

    .logo-preview img[b-05i2u23v5w] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* The tab icon is square and small, so preview it at roughly its real size. */
.favicon-preview[b-05i2u23v5w] {
    width: 4rem;
}
/* /Components/Shared/MemberPhotoPanel.razor.rz.scp.css */
/* A fixed square so the row does not jump about as portraits of different shapes come and go.
   The image fills it and is cropped rather than letterboxed: these are faces, and a face centred
   in a square reads better than one floating in two grey bars. */
.member-photo[b-dyopnlanu8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 7.5rem;
    border: 1px dashed var(--sk-border, #e9ebec);
    border-radius: 0.25rem;
    background-color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

    .member-photo img[b-dyopnlanu8] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Takes the rest of the row and shrinks with it. A basis of auto would size this to the hint
   text underneath, which is long enough to push itself onto a line of its own at every width. */
.member-photo-controls[b-dyopnlanu8] {
    flex: 1 1 15rem;
    min-width: 0;
}
/* /Components/Shared/MemberWizard.razor.rz.scp.css */
.wizard-steps[b-iiuv2tlr2m] {
    margin: 0;
    padding: 0;
}

.wizard-step-button[b-iiuv2tlr2m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
    color: var(--sk-muted, #878a99);
    font-size: var(--sk-font-size, 0.875rem);
    cursor: pointer;
}

    .wizard-step-button:disabled[b-iiuv2tlr2m] {
        cursor: default;
        opacity: 0.65;
    }

.wizard-step-number[b-iiuv2tlr2m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--sk-light, #f3f6f9);
    color: var(--sk-muted, #878a99);
    font-weight: 600;
    flex-shrink: 0;
}

/* Steps already completed stay clickable so the user can go back and correct them. */
.wizard-step.done .wizard-step-button[b-iiuv2tlr2m] {
    color: var(--sk-primary, #405189);
}

.wizard-step.done .wizard-step-number[b-iiuv2tlr2m] {
    background-color: rgba(64, 81, 137, .15);
    color: var(--sk-primary, #405189);
}

.wizard-step.active .wizard-step-button[b-iiuv2tlr2m] {
    border-color: var(--sk-primary, #405189);
    color: var(--sk-primary, #405189);
    font-weight: 600;
}

.wizard-step.active .wizard-step-number[b-iiuv2tlr2m] {
    background-color: var(--sk-primary, #405189);
    color: #fff;
}

@media (max-width: 575.98px) {
    .wizard-step-label[b-iiuv2tlr2m] {
        display: none;
    }

    .wizard-step-button[b-iiuv2tlr2m] {
        padding: 0.35rem;
    }
}