@import '_content/GaelJ.BlazorCodeMirror6/GaelJ.BlazorCodeMirror6.ewb2sj01iq.bundle.scp.css';
@import '_content/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.628fccizqu.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-7dngq5s9hy] {
    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-7dngq5s9hy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/Partials/GlobalSearch.razor.rz.scp.css */
/* Zoekpalet voor dossiers. Theme-aware via de Bootstrap-surfacetokens (licht/donker) en het tenant-accent
   (--linktext uit styles.dynamic.css). Alle markup in GlobalSearch.razor is plain HTML, dus deze scoped CSS
   raakt de elementen rechtstreeks. */

.gs-nav-item[b-7tw7a1ynpt] {
    display: flex;
    align-items: center;
}

/* ---- Trigger in de header ---- */
.gs-trigger[b-7tw7a1ynpt] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    width: 160px;
    height: 38px;
    padding: 0 .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .875rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.gs-trigger:hover[b-7tw7a1ynpt] {
    border-color: var(--linktext, var(--bs-primary));
    color: var(--bs-body-color);
}

.gs-trigger > i[b-7tw7a1ynpt] {
    font-size: .9rem;
}

.gs-trigger-label[b-7tw7a1ynpt] {
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Overlay + paneel ---- */
.gs-overlay[b-7tw7a1ynpt] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 1rem;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    animation: gs-fade-b-7tw7a1ynpt .12s ease-out;
}

.gs-panel[b-7tw7a1ynpt] {
    --gs-accent: var(--linktext, var(--bs-primary, #0d6efd));
    width: 100%;
    max-width: 720px;
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: gs-pop-b-7tw7a1ynpt .14s ease-out;
}

/* ---- Invoerrij ---- */
.gs-input-row[b-7tw7a1ynpt] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gs-input-icon[b-7tw7a1ynpt] {
    color: var(--bs-secondary-color);
    font-size: 1.05rem;
}

.gs-input[b-7tw7a1ynpt] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1.1rem;
    line-height: 1.4;
}

.gs-input[b-7tw7a1ynpt]::placeholder {
    color: var(--bs-secondary-color);
}

/* De eigen wisknop van type="search" zou naast onze gs-iconbtn staan. */
.gs-input[b-7tw7a1ynpt]::-webkit-search-cancel-button {
    display: none;
}

.gs-input-state[b-7tw7a1ynpt] {
    color: var(--gs-accent);
}

.gs-iconbtn[b-7tw7a1ynpt] {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    padding: .25rem .4rem;
    border-radius: 6px;
    cursor: pointer;
}

.gs-iconbtn:hover[b-7tw7a1ynpt] {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.gs-esc[b-7tw7a1ynpt] {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg, var(--bs-secondary-bg));
    color: var(--bs-secondary-color);
    border-radius: 6px;
    padding: .2rem .45rem;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Resultaten ---- */
.gs-body[b-7tw7a1ynpt] {
    overflow-y: auto;
    padding: .4rem;
    flex: 1 1 auto;
}

.gs-section-head[b-7tw7a1ynpt] {
    padding: .5rem .6rem .35rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

.gs-result[b-7tw7a1ynpt] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .4rem .6rem;
    border-radius: 10px;
}

.gs-result.is-active[b-7tw7a1ynpt] {
    background: color-mix(in srgb, var(--gs-accent) 12%, var(--bs-body-bg));
}

.gs-result-link[b-7tw7a1ynpt] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 14rem;
    min-width: 0;
    padding: .15rem 0;
    color: inherit;
    text-decoration: none;
}

.gs-result.is-active .gs-result-title[b-7tw7a1ynpt] {
    color: var(--gs-accent);
}

.gs-result-avatar[b-7tw7a1ynpt] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
}

.gs-result-main[b-7tw7a1ynpt] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.gs-result-title[b-7tw7a1ynpt] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Razor knipt de witruimte tussen de naam en het @if-blok weg; de afstand komt daarom hiervandaan. */
.gs-result-ref[b-7tw7a1ynpt] {
    margin-inline-start: .3em;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.gs-result-preview[b-7tw7a1ynpt] {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

/* ---- Module-snelkoppelingen per dossier (legacy: de ronde knoppenrij in de MemberFinder-modal) ---- */
.gs-result-links[b-7tw7a1ynpt] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

.gs-modlink[b-7tw7a1ynpt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.gs-modlink:hover[b-7tw7a1ynpt],
.gs-modlink:focus-visible[b-7tw7a1ynpt] {
    border-color: var(--gs-accent);
    background: var(--gs-accent);
    color: #fff;
}

.gs-more[b-7tw7a1ynpt] {
    margin: .35rem .6rem .2rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

/* ---- Lege staten ---- */
.gs-empty[b-7tw7a1ynpt] {
    text-align: center;
    padding: 2rem 1.5rem 2.4rem;
}

.gs-empty-icon[b-7tw7a1ynpt] {
    font-size: 1.9rem;
    color: var(--bs-secondary-color);
    opacity: .6;
}

.gs-empty-title[b-7tw7a1ynpt] {
    margin: .8rem 0 .25rem;
    font-weight: 600;
}

.gs-empty-sub[b-7tw7a1ynpt] {
    margin: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

/* ---- Voettekst ---- */
.gs-footer[b-7tw7a1ynpt] {
    padding: .55rem .9rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg, var(--bs-secondary-bg));
}

.gs-shortcuts[b-7tw7a1ynpt] {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

kbd[b-7tw7a1ynpt] {
    display: inline-block;
    min-width: 1.1rem;
    text-align: center;
    padding: .05rem .3rem;
    margin-right: .15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .7rem;
    line-height: 1.3;
}

@keyframes gs-fade-b-7tw7a1ynpt {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gs-pop-b-7tw7a1ynpt {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gs-overlay[b-7tw7a1ynpt],
    .gs-panel[b-7tw7a1ynpt] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .gs-overlay[b-7tw7a1ynpt] {
        padding: 0;
    }

    .gs-panel[b-7tw7a1ynpt] {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .gs-result-links[b-7tw7a1ynpt] {
        justify-content: flex-start;
        padding-left: 2.9rem;
    }
}
/* /Components/Layout/Partials/PageHeaderBrand.razor.rz.scp.css */
.brand-logo-img[b-6tin7anfbs] {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.brand-name[b-6tin7anfbs] {
    color: var(--titletext);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-s608duzav5],
.components-reconnect-repeated-attempt-visible[b-s608duzav5],
.components-reconnect-failed-visible[b-s608duzav5],
.components-pause-visible[b-s608duzav5],
.components-resume-failed-visible[b-s608duzav5],
.components-rejoining-animation[b-s608duzav5] {
    display: none;
}

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


#components-reconnect-modal[b-s608duzav5] {
    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-s608duzav5 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-s608duzav5 {
    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/Modules/AstmaAdherenceFeedback/Partials/ReportModal.razor.rz.scp.css */
/* Port van de twee <style>-blokken die in Source9 midden in de markup van
   Modules/AstmaAdherenceFeedback/Pages/Member.aspx stonden. */

/* De twee pufjes-rijen liggen over elkaar: de rode helemaal, de groene afgeknipt op het behaalde
   percentage. In net48 miste .icon-graph een positioneringscontext, waardoor de absolute plaatsing van een
   toevallige voorouder afhing; hier is die context expliciet — het beeld blijft gelijk. */
.icon-graph[b-w1k6a9grmx] {
    position: relative;
    height: 50px;
}

    .icon-graph .graph-item[b-w1k6a9grmx] {
        overflow: hidden;
        position: absolute;
        padding: 8px 0;
        border-radius: 4px;
    }

    .icon-graph .graph-success[b-w1k6a9grmx] {
        color: green;
        background-color: rgba(0, 255, 0, 0.05);
    }

    .icon-graph .graph-danger[b-w1k6a9grmx] {
        color: red;
        background-color: rgba(255, 0, 0, 0.05);
    }

.circle-graph[b-w1k6a9grmx] {
    width: 180px;
    height: 180px;
    border: solid 4px;
    border-radius: 50%;
    text-align: center;
    padding: 20px;
    line-height: 1.5;
    margin-left: 10px;
}

    .circle-graph.graph-success[b-w1k6a9grmx] {
        border-color: green;
    }

    .circle-graph.graph-warning[b-w1k6a9grmx] {
        border-color: orange;
    }

    .circle-graph.graph-danger[b-w1k6a9grmx] {
        border-color: red;
    }

    .circle-graph .text[b-w1k6a9grmx] {
        font-size: 12px;
    }

    .circle-graph .percentage[b-w1k6a9grmx] {
        font-size: 50px;
        font-weight: 600;
    }

@media (max-width: 575.98px) {
    .circle-graph[b-w1k6a9grmx] {
        width: 100px;
        height: 100px;
    }

        .circle-graph .text[b-w1k6a9grmx] {
            display: none;
        }

        .circle-graph .percentage[b-w1k6a9grmx] {
            font-size: 30px;
        }
}
/* /Components/Modules/AstmaAdherence/Partials/AdherenceChart.razor.rz.scp.css */
/* Pendant van de .chart-panel-regel die in Source9 bovenaan Member.aspx van beide medicatiemodules stond.
   De hoogte staat inline op het element: de dashboardgrafieken zijn 400px, die in de rapportmodal 300px. */
.adherence-chart[b-5dywtjk4wn] {
    min-width: 310px;
    margin: 0 auto;
}
/* /Components/Modules/AstmaControleTest/Partials/AddMeasurementModal.razor.rz.scp.css */
/* Antwoordtegels van de ACT-vragenlijst. In Source9 (AddMeasurement{Child,Teen}.ascx) was dit een
   BS4-knoppengroep (`data-bs-toggle="buttons"`) met een CSS-truc die het radiolabel op `width: 0` zette,
   zodat alleen de losse tekst-div zichtbaar bleef. BS5 kent die knoppengroep niet meer; hier doet het
   label zelf dienst als tegel (`btn-check` + `label.btn`), dus die truc is niet meer nodig.

   De verhoudingen blijven wat ze daar waren: onder lg staan de antwoorden onder elkaar en links
   uitgelijnd, vanaf lg naast elkaar met gelijke breedte. */

.act-question[b-b51iw1d5ge] {
    margin-bottom: 1rem;
}

.act-question + .act-question[b-b51iw1d5ge] {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem;
}

.act-question-text[b-b51iw1d5ge] {
    display: block;
    margin-bottom: .5rem;
}

.act-options[b-b51iw1d5ge] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.act-option-label[b-b51iw1d5ge] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    height: 100%;
    white-space: normal;
    text-align: left;
}

.act-option-image[b-b51iw1d5ge] {
    flex: 0 0 auto;
    width: 40px;
    height: auto;
}

@media (min-width: 992px) {
    .act-options[b-b51iw1d5ge] {
        flex-direction: row;
        justify-content: space-around;
    }

    .act-option[b-b51iw1d5ge] {
        flex: 1 1 0;
    }

    .act-option-label[b-b51iw1d5ge] {
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
    }

    /* Tegels in een rij zijn even hoog als de langste. Bij de c-ACT blijft de inhoud daarom bovenaan
       staan, zodat de vier plaatjes op één lijn liggen. De ACT voor 12+ heeft alleen tekst, en dan hoort
       een kort antwoord als "Nooit" in het midden van zijn tegel in plaats van tegen de bovenrand.
       Afwijking van net48, dat overal `flex-start` aanhield. */
    .act-options-middle .act-option-label[b-b51iw1d5ge] {
        justify-content: center;
    }
}
/* /Components/Modules/AstmaControleTest/Partials/ResultModal.razor.rz.scp.css */
/* Vaste hoogte voor de wijzermeter; net48 zette die op de div zelf (`style="height: 200px"` in
   ModalResult.ascx) en liet Highcharts zich daarop meten. */
.act-result-chart[b-l9cjhbv96t] {
    height: 200px;
}
/* /Components/Modules/Carat/Partials/AddMeasurementModal.razor.rz.scp.css */
/* Antwoordtegels van de Carat-vragenlijst. In Source9 (AddMeasurement{Child,Teen}.ascx) was dit een
   BS4-knoppengroep (`data-bs-toggle="buttons"`) met een CSS-truc die het radiolabel op `width: 0` zette,
   zodat alleen de losse tekst-div zichtbaar bleef. BS5 kent die knoppengroep niet meer; hier doet het
   label zelf dienst als tegel (`btn-check` + `label.btn`), dus die truc is niet meer nodig.

   De indeling volgt die van net48:
     - Carat Kids (`carat-question-inline`): per vraag één rij — vraagtekst en de twee ja/nee-tegels naast
       elkaar vanaf md, met de illustratie ernaast. Dat is de `d-flex justify-content-between` met een
       `flex-column flex-md-row`-blok erin uit AddMeasurementChild.ascx.
     - Carat (volwassenen): lange vragen met vier antwoorden, dus het label op een eigen regel en de
       antwoorden eronder — zoals AddMeasurementTeen.ascx.
   De ruimte rond de scheidingslijn staat op één plek, in de `+`-regel hieronder: even veel boven als
   onder, en onafhankelijk van of de vraag een illustratie heeft. In net48 kwam die lucht indirect van de
   10px-marge om de afbeelding (de `<hr>` zelf had `m-0`), waardoor een vraag zonder illustratie een
   andere hoogte kreeg; één variabele op de separator is voorspelbaarder en scheelt bij dertien vragen
   merkbaar hoogte. */

.carat-question[b-5c5vjrpwdp] {
    display: flex;
    align-items: center;
    /* Horizontale ruimte tot de illustratie; net48 deed dat met 10px marge om de afbeelding. */
    gap: .75rem;
}

/* Het verticale ritme van de hele lijst: marge bóven de lijn, padding erónder. */
.carat-question + .carat-question[b-5c5vjrpwdp] {
    border-top: 1px solid var(--bs-border-color);
    margin-top: .75rem;
    padding-top: .75rem;
}

.carat-question-main[b-5c5vjrpwdp] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: .5rem;
    min-width: 0;
}

.carat-question-text[b-5c5vjrpwdp] {
    display: block;
}

.carat-options[b-5c5vjrpwdp] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Tegels in een rij zijn even hoog als de langste, dus een kort antwoord als "Nooit" zou tegen de
   bovenrand plakken. De inhoud staat daarom verticaal in het midden. Kan hier onvoorwaardelijk: anders dan
   bij de ACT zit de illustratie náást de vraag en niet in de tegel, dus er valt niets uit te lijnen.
   Afwijking van net48, dat overal `flex-start` aanhield. */
.carat-option-label[b-5c5vjrpwdp] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    white-space: normal;
    text-align: left;
}

/* net48: `max-height: 100px; width: 100px` vanaf lg, met 80px daaronder. De 10px-marge die daar omheen
   stond is vervallen — die deed het verticale ritme, en dat zit nu op de scheidingslijn. */
.carat-question-image[b-5c5vjrpwdp] {
    flex: 0 0 auto;
    width: 80px;
    max-height: 100px;
}

.carat-comment[b-5c5vjrpwdp] {
    margin-top: 1rem;
}

.carat-comment .carat-question-text[b-5c5vjrpwdp] {
    margin-bottom: .5rem;
}

@media (min-width: 768px) {
    /* Alleen de korte Carat Kids-vragen passen naast hun antwoorden (net48: `flex-md-row`). */
    .carat-question-inline .carat-question-main[b-5c5vjrpwdp] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    /* De twee ja/nee-tegels houden een vaste maat, de vraagtekst krijgt de rest. */
    .carat-question-inline .carat-options[b-5c5vjrpwdp] {
        flex: 0 0 auto;
        width: 14rem;
    }
}

@media (min-width: 992px) {
    .carat-options[b-5c5vjrpwdp] {
        flex-direction: row;
        justify-content: space-around;
    }

    .carat-option[b-5c5vjrpwdp] {
        flex: 1 1 0;
    }

    .carat-option-label[b-5c5vjrpwdp] {
        justify-content: center;
        text-align: center;
    }

    .carat-question-image[b-5c5vjrpwdp] {
        width: 100px;
    }
}
/* /Components/Modules/Carat/Partials/ResultModal.razor.rz.scp.css */
/* Vaste hoogte voor de wijzermeter; net48 zette die op de div zelf (`style="height: 200px"` in
   de ModalResult-controls) en liet Highcharts zich daarop meten. */
.carat-result-chart[b-83j8i4hsw6] {
    height: 200px;
}
/* /Components/Modules/Careplan/Pages/Lifestyle/Overview.razor.rz.scp.css */
/* De koprij boven elk van de twee panes. Rechts staan knoppen en links niet, en een btn-sm is hoger dan
   een kale kop — zonder een gelijke minimumhoogte beginnen de twee tabellen daardoor op een andere
   hoogte. 2rem is de hoogte van een btn-sm (0,875rem tekst op regelhoogte 1,5, plus padding en rand). */
.pane-head[b-rfjuvv1c0s] {
    min-height: 2rem;
}
/* /Components/Modules/Careplan/Partials/AccordFormFields.razor.rz.scp.css */
/* Het voorbeeld in het formulier blijft klein: de opgeslagen afbeelding is vele malen groter en
   zou de andere velden uit beeld duwen. */
.cp-accord-image-preview[b-gfuzcjh9ms] {
    max-height: 200px;
    width: auto;
}
/* /Components/Modules/Careplan/Partials/ActionFormFields.razor.rz.scp.css */
/* Het voorbeeld in het formulier blijft klein: de opgeslagen afbeelding is vele malen groter en
   zou de andere velden uit beeld duwen. */
.cp-action-image-preview[b-1834slh232] {
    max-height: 200px;
    width: auto;
}
/* /Components/Modules/Careplan/Partials/AddActionModal.razor.rz.scp.css */
/* De sjabloonlijst kan lang zijn (net48 zette hier dropdown-menu-scrollable op, een klasse die in
   App.Next niet bestaat). Zelfde bedoeling: het menu scrollt in plaats van de pagina uit te lopen. */
.cp-template-menu[b-7nojuny2jf] {
    max-height: 60vh;
    overflow-y: auto;
}
/* /Components/Modules/Careplan/Partials/Lifestyle/DomainDialog.razor.rz.scp.css */
/* De pop-up achter een druppel: de opmaak van wat dit component zelf rendert - de kop, de badge en de
   lijst met onderwerpen.

   De kaart eromheen staat niet hier maar in wwwroot/css/careplan-lifestyle.css: .modal-dialog,
   .modal-content en de sluitknop worden door HxModal gerenderd, en de markup van een kindcomponent
   krijgt het scope-attribuut van dit bestand niet. De kleur komt van .domain--{domein} op diezelfde
   kaart en erft hierheen als custom property.
*/

.domain__heading[b-5slxrd53s6] {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  color: var(--heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* round disc in the domain colour with the icon white on it */
.domain__badge[b-5slxrd53s6] {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color);
}

.domain__badge img[b-5slxrd53s6] {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;      /* every icon keeps its own aspect ratio */
  filter: var(--wheel-icon-filter);
}

/* De streep boven de onderwerpen, in de kleur van het domein. Bootstrap tekent een hr als een doorzichtige
   rand; hier is het een vlak in de volle kleur, zodat hij net als de bovenrand van de kaart bij het domein
   hoort en niet als scheiding tussen twee alinea's leest. */
.domain__rule[b-5slxrd53s6] {
  height: 2px;
  margin: 0 0 1rem;
  border: 0;
  background: var(--color);
  opacity: 1;
}

.domain__list[b-5slxrd53s6] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  font-size: 0.9375rem;     /* 15px: de inleiding van het thema staat boven de streep en is een maat groter */
  line-height: 1.45;
}

/* the little square echoes the tick boxes in the pdf */
.domain__list li[b-5slxrd53s6] {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}

.domain__list li[b-5slxrd53s6]::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.32em;
  border: 1.5px solid var(--heading);
  border-radius: 2px;
}

/* De vinkvakjes in de pop-up zijn hier invoer en geen tekening, dus vervalt het vierkant uit de pdf. */
.domain__list--input li[b-5slxrd53s6]::before {
  content: none;
}

.domain__list--input .form-check-input[b-5slxrd53s6] {
  margin-top: 0.3em;
}

/* Een streep tussen de onderwerpen: een onderwerp draagt zijn eigen tekst, dus zonder scheiding loopt
   het ene in het andere over. De padding erboven houdt de streep midden tussen de twee. */
.domain__list--input li + li[b-5slxrd53s6] {
  padding-top: 0.7em;
  border-top: 1px solid var(--bs-border-color);
}

/* De naam en de tekst van één onderwerp staan naast het vinkvakje en onder elkaar. Ze zitten in een
   eigen vak omdat de naam de label is en de tekst daarbuiten hoort te blijven; min-width laat een lange
   regel binnen de flexrij afbreken in plaats van hem op te rekken. */
.domain__choice[b-5slxrd53s6] {
  min-width: 0;
}

/* De inleiding van het thema, tussen de kop en de streep. Een maat groter dan de onderwerpen eronder: dit
   is de tekst die het domein uitlegt, en daaronder staat waaruit gekozen wordt. */
.domain__texts[b-5slxrd53s6] {
  margin-bottom: 1rem;
  font-size: 1rem;          /* 16px */
}

/* De naam van het onderwerp is waar de keuze over gaat: vet en een trapje groter dan zijn tekst. Zonder
   dat verschil moeten de naam, de kop van het tekstblok en de tekst zelf het van dikte en een
   onderstreping alleen hebben, en dan is niet te zien waar het ene onderwerp ophoudt. */
.domain__topic[b-5slxrd53s6] {
    display: block;
    font-size: 1.125rem;      /* 18px */
    font-weight: 700;
}
/* /Components/Modules/Careplan/Partials/Lifestyle/LifestyleBoard.razor.rz.scp.css */
/* Het bord: negen vlakken, waarvan de middelste drie samen één vlak met het roer zijn.

   Smal scherm eerst: dan is het één kolom in de leesorde van de markup, met het roer bovenaan. Vanaf
   lg wordt het de indeling van drie bij drie. De kleur van een vlak komt van dezelfde variabelen als
   de druppel ernaast; die staan op de documentwortel, in careplan-lifestyle.css.
*/

.board[b-xo1t1gwo3j] {
    display: grid;
    gap: 1rem;
}

.board__panel[b-xo1t1gwo3j] {
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 0.35rem solid var(--color);
}

/* De kop en de vakjes dragen de kleur van het domein. Ontspanning krijgt daarvoor de diepere tint uit
   --mark: dat geel is als tekst en als klein icoon op wit niet te zien. */
.board__panel-heading[b-xo1t1gwo3j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    color: var(--mark, var(--color));
    font-size: 1.05rem;
    font-weight: 700;
}

/* Het potlood opent de pop-up; het hoort bij de kop en krijgt dus haar kleur en maat. */
.board__panel-edit[b-xo1t1gwo3j] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
}

.board__panel-edit:hover[b-xo1t1gwo3j],
.board__panel-edit:focus-visible[b-xo1t1gwo3j] {
    opacity: 0.75;
}

/* Geen opsommingstekens: elk gekozen onderwerp draagt een aangevinkt vakje. */
.board__panel-list[b-xo1t1gwo3j] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.board__panel-list li[b-xo1t1gwo3j] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.board__panel-list i[b-xo1t1gwo3j] {
    margin-top: 0.15rem;
    color: var(--mark, var(--color));
}

.board__panel-empty[b-xo1t1gwo3j] {
    margin: 0;
    color: var(--bs-secondary-color);
}

.board__wheel[b-xo1t1gwo3j] {
    display: grid;
    place-items: center;
}

/* Op het bord volgt het roer zijn vak in plaats van het venster: de standaardmaat uit
   careplan-lifestyle.css is 70vmin, en dat is naast zes vlakken te veel. 100% is de middenkolom; de
   bovengrens houdt hem op een breed scherm in verhouding. */
.board__wheel[b-xo1t1gwo3j] {
    --wheel-size: min(100%, 36rem);
}

/* De zes kleuren per domein, zodat de rand van een vlak bij de druppel ernaast hoort. */
.panel--nutrition[b-xo1t1gwo3j] { --color: var(--color-nutrition); }
.panel--movement[b-xo1t1gwo3j] { --color: var(--color-movement); }
.panel--relaxation[b-xo1t1gwo3j] { --color: var(--color-relaxation); --mark: var(--heading-relaxation); }
.panel--sleep[b-xo1t1gwo3j] { --color: var(--color-sleep); }
.panel--substances[b-xo1t1gwo3j] { --color: var(--color-substances); }
.panel--connection[b-xo1t1gwo3j] { --color: var(--color-connection); }

@media (min-width: 992px) {
    .board[b-xo1t1gwo3j] {
        /* Drie gelijke kolommen: de middenkolom bepaalt de maat van het roer en niet omgekeerd, zodat de
           zes vlakken niet worden weggedrukt. */
        grid-template-columns: 1fr minmax(20rem, 1.8fr) 1fr;
        grid-template-rows: repeat(3, auto);
        align-items: start;
    }

    /* De drie middenvlakken zijn één vlak. */
    .board__wheel[b-xo1t1gwo3j] {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
    }

    /* Het roer is hoger dan de drie vlakken ernaast, dus houdt elke rij ruimte over. De bovenste twee
       vlakken staan bovenaan, de middelste in het midden en de onderste onderaan — zo volgen ze de
       hoogte van het roer in plaats van er bovenaan tegen elkaar te kruipen. */
    .panel--nutrition[b-xo1t1gwo3j] { grid-column: 1; grid-row: 1; align-self: start; }
    .panel--connection[b-xo1t1gwo3j] { grid-column: 1; grid-row: 2; align-self: center; }
    .panel--substances[b-xo1t1gwo3j] { grid-column: 1; grid-row: 3; align-self: end; }
    .panel--movement[b-xo1t1gwo3j] { grid-column: 3; grid-row: 1; align-self: start; }
    .panel--relaxation[b-xo1t1gwo3j] { grid-column: 3; grid-row: 2; align-self: center; }
    .panel--sleep[b-xo1t1gwo3j] { grid-column: 3; grid-row: 3; align-self: end; }

    /* Rechts van het roer spiegelt het vlak: de rand en de tekst aan de andere kant, en het vakje achter
       het onderwerp in plaats van ervoor. Alleen hier — in één kolom staan alle zes onder elkaar en
       staat alles links. */
    .panel--movement[b-xo1t1gwo3j],
    .panel--relaxation[b-xo1t1gwo3j],
    .panel--sleep[b-xo1t1gwo3j] {
        padding: 0.25rem 1rem 0.25rem 0;
        border-left: 0;
        border-right: 0.35rem solid var(--color);
        text-align: right;
    }

    .panel--movement .board__panel-list li[b-xo1t1gwo3j],
    .panel--relaxation .board__panel-list li[b-xo1t1gwo3j],
    .panel--sleep .board__panel-list li[b-xo1t1gwo3j],
    .panel--movement .board__panel-heading[b-xo1t1gwo3j],
    .panel--relaxation .board__panel-heading[b-xo1t1gwo3j],
    .panel--sleep .board__panel-heading[b-xo1t1gwo3j] {
        flex-direction: row-reverse;
    }
}
/* /Components/Modules/Careplan/Partials/Lifestyle/TextBlocks.razor.rz.scp.css */
/* De tekst is markdown-bron: een enkele regelovergang is betekenisvol en blijft staan. De lege regel
   tussen twee alinea's is dat ook, maar die wordt niet getekend — de tekst is per alinea opgesplitst en
   de afstand komt van deze marge, niet van een lege regel ter hoogte van een hele regel. */
.lifestyle-text__body[b-unosd76kc9] {
    margin: 0;
    white-space: pre-wrap;
}

.lifestyle-text__body + .lifestyle-text__body[b-unosd76kc9] {
    margin-top: 0.5em;
}

.lifestyle-text + .lifestyle-text[b-unosd76kc9] {
    margin-top: 0.5rem;
}

/* De kop van een tekstblok: onderstreept, zodat hij te onderscheiden is van de vette naam van het
   onderwerp erboven. */
.lifestyle-text__heading[b-unosd76kc9] {
    font-weight: 600;
    text-decoration: underline;
}
/* /Components/Modules/Careplan/Partials/Lifestyle/Wheel.razor.rz.scp.css */
/* Het leefstijlroer: de tekening. Elke maat is een punt uit "A4 Leefstijlroer-V06062024_Dig.pdf" van
   Vereniging Arts en Leefstijl.

   Dit is de opmaak van de markup van dit component, dus staat hij hier en niet in een stylesheet naast
   de pagina. De kleuren en de maat van het roer zijn variabelen op de documentwortel: die kunnen niet
   in een css-behind staan (`:root` krijgt het scope-attribuut nooit) en staan in
   wwwroot/css/careplan-lifestyle.css.
*/

/* ==========================================================================
   the wheel
   ========================================================================== */
.wheel[b-fnwxm0effz] {
  position: relative;
  width: var(--wheel-size);
  aspect-ratio: 1;
  container-type: inline-size;
  /* 1 unit = 1 point from the pdf; the wheel is 290 units square */
  --e: 0.3448275862cqw;
}

.wheel *[b-fnwxm0effz],
.wheel *[b-fnwxm0effz]::before,
.wheel *[b-fnwxm0effz]::after { box-sizing: border-box; }

.wheel__back[b-fnwxm0effz],
.wheel__ring[b-fnwxm0effz] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.wheel__back[b-fnwxm0effz] { z-index: 0; }

.wheel__ring[b-fnwxm0effz]   { z-index: 2; }

.wheel__sweeps[b-fnwxm0effz] {
  stroke: var(--wheel-stroke);
  stroke-width: 0.92;
  stroke-linecap: round;
}

.wheel__labels[b-fnwxm0effz] {
  fill: var(--wheel-label);
  font-family: var(--font);
  font-size: 8.6px;          /* px inside an svg = units from the viewBox */
  font-weight: 700;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-anchor: middle;
}

.wheel__compass-star[b-fnwxm0effz] { fill: var(--wheel-compass); }

.wheel__compass-ring[b-fnwxm0effz] { fill: var(--wheel-inner-fill); }

.wheel__compass-hub[b-fnwxm0effz] { fill: var(--wheel-compass); opacity: 0.55; }

/* --- the six handles ----------------------------------------------------- */
.handle[b-fnwxm0effz] {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  /* the teardrop runs from radius 32.897 to 138.955 and is 35.878 high */
  width: calc(106.058 * var(--e));
  height: calc(35.878 * var(--e));
  margin-left: calc(32.897 * var(--e));
  margin-top: calc(-17.939 * var(--e));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: calc(-32.897 * var(--e)) 50%;   /* the heart of the wheel */
  transform: rotate(var(--angle));
  transition: transform 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.handle__shape[b-fnwxm0effz] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--color);
}

/* The icon files are drawn upright. Here each icon gets its place in the
   teardrop (--icon-along and --icon-across, measured from the tip and the
   centre line) and the rotation it has in the pdf (--icon-rotate). The
   handle's own rotation is subtracted, because the icon sits inside that
   rotated button. All measurements in units from the pdf. */
.handle__icon[b-fnwxm0effz] {
  position: absolute;
  left: calc(var(--icon-along) * var(--e));
  top: 50%;
  margin-top: calc(var(--icon-across) * var(--e));
  width: calc(var(--icon-w) * var(--e));
  height: calc(var(--icon-h) * var(--e));
  filter: var(--wheel-icon-filter);
  transform: translate(-50%, -50%) rotate(calc(var(--icon-rotate) - var(--angle)));
}

/* per domain: the colour, and the icon's size, place and rotation ---------- */
.handle[data-domain="nutrition"][b-fnwxm0effz] {
  --color: var(--color-nutrition);
  --icon-w: 26.639; --icon-h: 26.889;
  --icon-rotate: -30deg; --icon-along: 79.5; --icon-across: -0.5;
}

.handle[data-domain="movement"][b-fnwxm0effz] {
  --color: var(--color-movement);
  --icon-w: 20.559; --icon-h: 32.469;
  --icon-rotate: 30deg; --icon-along: 78.38; --icon-across: -2.18;
}

/* The sun has twelve points and so 30 degrees of symmetry: its rotation cannot
   be measured off the icon. Hence 0, which says this icon stands as it was
   drawn. Replace the sun with something else and that new icon stays upright
   rather than quietly picking up a turn. */
.handle[data-domain="relaxation"][b-fnwxm0effz] {
  --color: var(--color-relaxation);
  --icon-w: 25.851; --icon-h: 25.844;
  --icon-rotate: 0deg; --icon-along: 82.8; --icon-across: 0.01;
}

.handle[data-domain="sleep"][b-fnwxm0effz] {
  --color: var(--color-sleep);
  --icon-w: 25.766; --icon-h: 24.44;
  --icon-rotate: -30deg; --icon-along: 79.22; --icon-across: -0.29;
}

.handle[data-domain="substances"][b-fnwxm0effz] {
  --color: var(--color-substances);
  --icon-w: 26.003; --icon-h: 25.873;
  --icon-rotate: 30deg; --icon-along: 75.43; --icon-across: 0.91;
}

.handle[data-domain="connection"][b-fnwxm0effz] {
  --color: var(--color-connection);
  --icon-w: 29.165; --icon-h: 28.052;
  --icon-rotate: -90deg; --icon-along: 80.22; --icon-across: -0.01;
}

/* --- hover, keyboard and click -------------------------------------------- */
.handle:hover[b-fnwxm0effz],
.handle:focus-visible[b-fnwxm0effz] {
  transform: rotate(var(--angle)) translateX(calc(5 * var(--e)));
  filter: brightness(1.08);
}

.handle:focus-visible[b-fnwxm0effz] { outline: none; }

.handle:focus-visible .handle__shape[b-fnwxm0effz] {
  filter: drop-shadow(0 0 calc(1.2 * var(--e)) #fff)
          drop-shadow(0 0 calc(3.5 * var(--e)) var(--color));
}

.handle[aria-pressed="true"][b-fnwxm0effz] {
  transform: rotate(var(--angle)) translateX(calc(8 * var(--e)));
}


@media (prefers-reduced-motion: reduce) {
  .handle[b-fnwxm0effz] { transition: none; }
}

/* ==========================================================================
   toevoegingen voor dit scherm
   ========================================================================== */

/* Een domein waarvoor geen thema wordt aangeleverd: de plek blijft staan, want het roer is een vaste
   tekening van zes, maar er valt niets te openen. */
.handle[data-empty="true"][b-fnwxm0effz] {
  cursor: default;
  filter: saturate(0.12) opacity(0.4);
}

.handle[data-empty="true"]:hover[b-fnwxm0effz],
.handle[data-empty="true"]:focus-visible[b-fnwxm0effz] {
  transform: rotate(var(--angle));
  filter: saturate(0.12) opacity(0.4);
}

@media print {
  /* Op papier staat het roer stil: niets uitgeschoven. */
  .handle[b-fnwxm0effz] { transform: rotate(var(--angle)) !important; }
}
/* /Components/Modules/CfMonitor/Partials/AddMeasurementModal.razor.rz.scp.css */
/* Antwoordtegels van de CF Monitor-vragenlijst. In Source9 (AddMeasurement.ascx) was dit een
   BS4-knoppengroep (`data-bs-toggle="buttons"`) met een CSS-truc die het radiolabel op `width: 0` zette,
   zodat alleen de losse tekst-div zichtbaar bleef. BS5 kent die knoppengroep niet meer; hier doet het
   label zelf dienst als tegel (`btn-check` + `label.btn`), dus die truc is niet meer nodig.

   De verhoudingen blijven wat ze daar waren: onder lg staan de antwoorden onder elkaar, vanaf lg naast
   elkaar met gelijke breedte. */

.cf-question[b-g8ofghfk3m] {
    margin-bottom: 1rem;
}

.cf-question + .cf-question[b-g8ofghfk3m] {
    border-top: 1px dotted var(--bs-border-color);
    padding-top: 1rem;
}

.cf-question-text[b-g8ofghfk3m] {
    display: block;
    margin-bottom: .5rem;
}

.cf-options[b-g8ofghfk3m] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cf-option-label[b-g8ofghfk3m] {
    width: 100%;
    height: 100%;
    white-space: normal;
    text-align: left;
}

@media (min-width: 992px) {
    .cf-options[b-g8ofghfk3m] {
        flex-direction: row;
        justify-content: space-around;
    }

    .cf-option[b-g8ofghfk3m] {
        flex: 1 1 0;
    }

    .cf-option-label[b-g8ofghfk3m] {
        text-align: center;
    }
}
/* /Components/Modules/Faqs/Pages/Member.razor.rz.scp.css */
/* Onderwerp-kaart in het FAQ-overzicht: subtiele lift + schaduw, titel en pijl kleuren op hover mee
   met het tenant-accent, omschrijving op 2 regels geclampt. De focus-ring komt uit base.css. */
.faq-group-card[b-ouvl2dm5qs] {
    color: var(--bs-body-color);
    transition: box-shadow .2s ease, transform .2s ease;
}

.faq-group-card:hover[b-ouvl2dm5qs] {
    box-shadow: var(--bs-box-shadow);
    transform: translateY(-2px);
    color: var(--bs-body-color);
}

.faq-group-card__title[b-ouvl2dm5qs] {
    transition: color .2s ease;
}

.faq-group-card:hover .faq-group-card__title[b-ouvl2dm5qs],
.faq-group-card:hover .faq-group-card__arrow[b-ouvl2dm5qs] {
    color: var(--linktextAccent, var(--linktext));
}

.faq-group-card__arrow[b-ouvl2dm5qs] {
    color: var(--linktext);
    transition: color .2s ease, transform .2s ease;
}

.faq-group-card:hover .faq-group-card__arrow[b-ouvl2dm5qs] {
    transform: translateX(3px);
}

.faq-group-card__desc[b-ouvl2dm5qs] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* base.css zet transitions al stil bij reduced motion, maar niet de transforms zelf. */
@media (prefers-reduced-motion: reduce) {
    .faq-group-card:hover[b-ouvl2dm5qs],
    .faq-group-card:hover .faq-group-card__arrow[b-ouvl2dm5qs] {
        transform: none;
    }
}
/* /Components/Modules/Faqs/Partials/FaqTopicRow.razor.rz.scp.css */
/* Antwoord-preview in de admin-tabelrij ingekort tot 2 regels; volledige tekst via Wijzigen.
   Houdt de rijen compact, consistent met de muted omschrijving-regel in de Files-admin. */
.faq-answer-preview[b-dalc3ga7xh] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rich-text-antwoord mag geen blok-marges in de tabelrij introduceren. */
.faq-answer-preview[b-dalc3ga7xh]  p:last-child {
    margin-bottom: 0;
}
/* /Components/Modules/Forms/Pages/AdminEditor.razor.rz.scp.css */
/* Scoped styling voor de vragenlijst-editor (pagina-/vragen-lijst). Tenant-neutraal: alle accenten via de
   --bs-primary-tokens. */

.page-row[b-yztxqgsvn9],
.question-row[b-yztxqgsvn9] {
    transition: background-color .12s ease;
}

.page-row:hover:not(.page-row-selected)[b-yztxqgsvn9],
.question-row:hover[b-yztxqgsvn9] {
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, .03));
}

/* Geselecteerde pagina: getinte achtergrond + linker accentbalk (geen volle bg, zodat de acties leesbaar
   blijven). Tenant-accent = --buttonbackground (zelfde token als .btn-primary / .list-group-item.active). */
.page-row-selected[b-yztxqgsvn9] {
    background-color: color-mix(in srgb, var(--buttonbackground) 8%, transparent);
    box-shadow: inset 3px 0 0 var(--buttonbackground);
}

/* Compacte herorden-knoppen (omhoog/omlaag), met duidelijke disabled-staat aan de uiteinden. */
.reorder[b-yztxqgsvn9] {
    margin: -.15rem 0;
    flex: 0 0 auto;
}

.reorder .reorder-btn[b-yztxqgsvn9] {
    padding: .05rem .3rem;
    line-height: 1;
    border: 0;
    color: var(--bs-secondary-color);
}

.reorder .reorder-btn:hover:not(:disabled)[b-yztxqgsvn9] {
    color: var(--buttonbackground);
}

.reorder .reorder-btn:disabled[b-yztxqgsvn9] {
    opacity: .25;
}

/* Klikbare naam/vraag mag inkorten i.p.v. de rij te verbreken. */
.page-name[b-yztxqgsvn9],
.question-text[b-yztxqgsvn9] {
    min-width: 0;
}

.question-icon[b-yztxqgsvn9] {
    flex: 0 0 1.25rem;
    text-align: center;
    padding-top: .15rem;
    color: var(--bs-secondary-color);
}

/* Authored vraag-/instructie-HTML in de lijst compact houden. */
.question-text :deep(p:last-child)[b-yztxqgsvn9] {
    margin-bottom: 0;
}
/* /Components/Modules/Forms/Pages/Viewer.razor.rz.scp.css */
/* Scoped styling voor de invul-Viewer: iets hogere voortgangsbalk. Accenten komen uit de globale
   tenant-tokens (de .progress-bar krijgt --buttonbackground via styles.dynamic.css). */

.viewer-progress .progress[b-830c1c7j2o] {
    height: .5rem;
}

/* DESIGN.md §3: body copy op 65-75ch. De kaart loopt over de volle breedte, de afsluittekst niet mee. */
.viewer-complete-text[b-830c1c7j2o] {
    max-width: 70ch;
}
/* /Components/Modules/Forum/Pages/MemberTopic.razor.rz.scp.css */
/* Markering van een via deep-link (#messageId) aangewezen bericht — legacy inline-style
   `.forumitem-active { border: solid 1px var(--buttonbackground) }`, hier op tenant-accent. */
.forumitem-active[b-ggc7djxk3l] {
    border: solid 1px var(--bs-primary);
    border-radius: .25rem;
}
/* /Components/Modules/InstantMessaging/Pages/Detail.razor.rz.scp.css */
/* Chat-layout (self-contained, scoped) — vervangt de net48-JS (Detail.aspx `cht()`) die de hoogte op
   window.innerHeight zette. De chat-kaart krijgt een schermafhankelijke hoogte en alleen de
   berichtenlijst + de zijbalk scrollen intern; de discussie-header en de typebalk blijven vast.
   De 12rem is de ruimte boven de kaart (app-header + page-title-sectie) — stem 'm af als de
   chrome-hoogte verandert. */
.chat-application[b-79pxwhqqox] {
    height: calc(100dvh - 12rem);
}

/* .card is al een flex-kolom; de chat-rij vult de resthoogte onder een eventuele intro-card-header. */
.chat-application > .card-header[b-79pxwhqqox] {
    flex-shrink: 0;
}

.chat-application > .d-flex[b-79pxwhqqox] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Flex-kolommen mogen krimpen zodat hun kind (de scroll-area) kan overflowen i.p.v. uit te zetten. */
.chat-container[b-79pxwhqqox],
.chat-box-inner-part[b-79pxwhqqox] {
    min-height: 0;
}

.chatting-box[b-79pxwhqqox] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.parent-chat-box[b-79pxwhqqox] {
    flex: 1 1 auto;
    min-height: 0;
}

.chat-box[b-79pxwhqqox] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* De berichtenlijst neemt de resthoogte en scrollt; headers en typebalk blijven vast. */
.chat-box-inner[b-79pxwhqqox] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.chat-meta-user[b-79pxwhqqox],
.chat-send-message-footer[b-79pxwhqqox] {
    flex-shrink: 0;
}

/* Zijbalk (deelnemers/afbeeldingen/bestanden) scrollt binnen de kaarthoogte. */
.user-chat-box[b-79pxwhqqox] {
    overflow-y: auto;
}
/* /Components/Modules/News/Pages/Admin.razor.rz.scp.css */
/* Zoekveld met ingebed loep-icoon (rechtsboven in de card-header). */
.news-admin-search[b-by7txuu7eo] {
    position: relative;
}

.news-admin-search__icon[b-by7txuu7eo] {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.news-admin-search__input[b-by7txuu7eo] {
    padding-left: 1.9rem;
    min-width: 14rem;
}

/* Klikbare kolomkop als sorteer-knop: ziet eruit als de koptekst zelf, geen knop-chrome. */
.news-admin-sort[b-by7txuu7eo] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.news-admin-sort:hover[b-by7txuu7eo] {
    color: var(--linktext);
}

/* Samenvatting bondig houden zodat rijen niet uit hun krachten groeien. */
.news-admin-summary[b-by7txuu7eo] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Modules/News/Pages/SystemManager/Detail.razor.rz.scp.css */
/* Media-picker: voorbeeldweergave + keuzeknop voor de afbeelding van het content-item.
   Vervangt de RadBinaryImage-thumbnail met de losse upload-/bijsnijdknoppen ernaast. */
.media-picker[b-rtdutu4273] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.media-picker__preview[b-rtdutu4273] {
    flex-shrink: 0;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.media-picker__preview--landscape[b-rtdutu4273] {
    width: 200px;
    height: 150px;
    object-fit: cover;
}

.media-picker__body[b-rtdutu4273] {
    flex: 1 1 12rem;
    min-width: 12rem;
}
/* /Components/Modules/News/Pages/SystemManager/Index.razor.rz.scp.css */
/* Zoekveld met ingebed loep-icoon (rechtsboven in de card-header). */
.content-news-search[b-urhfgy0sy6] {
    position: relative;
}

.content-news-search__icon[b-urhfgy0sy6] {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.content-news-search__input[b-urhfgy0sy6] {
    padding-left: 1.9rem;
    min-width: 14rem;
}

/* Klikbare kolomkop als sorteer-knop: ziet eruit als de koptekst zelf, geen knop-chrome. */
.content-news-sort[b-urhfgy0sy6] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.content-news-sort:hover[b-urhfgy0sy6] {
    color: var(--linktext);
}

/* Samenvatting bondig houden zodat rijen niet uit hun krachten groeien. */
.content-news-summary[b-urhfgy0sy6] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Modules/News/Partials/BlogForm.razor.rz.scp.css */
/* Media-picker: voorbeeldweergave + keuzeknop voor de nieuwsafbeelding en auteurfoto.
   Vervangt de losse col-6/col-6-rij met losse <img> (BS3 .thumbnail). */
.media-picker[b-zqca0rxet2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.media-picker__preview[b-zqca0rxet2] {
    flex-shrink: 0;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.media-picker__preview--landscape[b-zqca0rxet2] {
    width: 200px;
    height: 150px;
    object-fit: cover;
}

.media-picker__preview--avatar[b-zqca0rxet2] {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
}

.media-picker__body[b-zqca0rxet2] {
    flex: 1 1 12rem;
    min-width: 12rem;
}
/* /Components/Modules/News/Partials/NewsCard.razor.rz.scp.css */
.news-card[b-9cn3klbqgi] {
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.news-card:hover[b-9cn3klbqgi] {
    box-shadow: var(--bs-box-shadow);
    transform: translateY(-2px);
}

/* Vaste 4:3-verhouding (gelijk aan de upload-cropper) => uniforme kaarthoogtes, geen layout-shift. */
.news-card__media[b-9cn3klbqgi] {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--bs-border-color);
}

.news-card__media img[b-9cn3klbqgi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.news-card:hover .news-card__media img[b-9cn3klbqgi] {
    transform: scale(1.03);
}

/* Titel erft de tenant-linkkleur (global a { color: var(--linktext) }); op kaart-hover de accent. */
.news-card__title-link[b-9cn3klbqgi] {
    text-decoration: none;
}

.news-card:hover .news-card__title-link[b-9cn3klbqgi] {
    color: var(--linktextAccent);
}

/* Samenvatting clampen op 3 regels zodat kaarten niet uit elkaar lopen. */
.news-card__summary[b-9cn3klbqgi] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .news-card[b-9cn3klbqgi],
    .news-card__media img[b-9cn3klbqgi] {
        transition: none;
    }

    .news-card:hover[b-9cn3klbqgi] {
        transform: none;
    }

    .news-card:hover .news-card__media img[b-9cn3klbqgi] {
        transform: none;
    }
}
/* /Components/Modules/PersonalFiles/Pages/User.razor.rz.scp.css */
/* Scoped styling voor het persoonlijk dossier: de mappen-zijbalk, de paneelkop en de upload-zone.
   De bestandstabel zelf staat in Partials/PersonalFileTable.razor.css (scoped CSS is per component).
   Gebruikt de tenant-styling-tokens uit /content/custom/basic.css (--linktext = accent-tekst/links,
   --buttonbackground/--buttontext = primair-fill, zoals .list-group-item.active) zodat alles meekleurt
   per tenant. Bewust géén --bs-primary (dat is niet tenant-gekoppeld). Geen zware schaduwen; subtiele
   hover/transities (≤200ms) en duidelijke focus-states. */

/* ---- Mappen-zijbalk ---------------------------------------------------- */
.pf-folders[b-4dubnpwuy3] {
    padding: .5rem;
    overflow: hidden;
}

.pf-folders__head[b-4dubnpwuy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .5rem .5rem;
}

.pf-folders__title[b-4dubnpwuy3] {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}

.pf-folders__list[b-4dubnpwuy3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-folder[b-4dubnpwuy3] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}

.pf-folder__icon[b-4dubnpwuy3] {
    width: 1.25rem;
    text-align: center;
    color: var(--bs-secondary-color);
    transition: color .15s ease;
}

.pf-folder__name[b-4dubnpwuy3] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-folder__count[b-4dubnpwuy3] {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    font-variant-numeric: tabular-nums;
}

.pf-folder:hover[b-4dubnpwuy3] {
    background: var(--bs-tertiary-bg);
}

/* Actieve map = gevuld met de tenant-knopkleur (mirror van .list-group-item.active). */
.pf-folder.is-active[b-4dubnpwuy3] {
    background: var(--buttonbackground);
    color: var(--buttontext);
    font-weight: 600;
}

.pf-folder.is-active .pf-folder__icon[b-4dubnpwuy3] {
    color: var(--buttontext);
}

.pf-folder.is-active .pf-folder__count[b-4dubnpwuy3] {
    color: var(--buttontext);
    background: rgba(0, 0, 0, .15);
}

.pf-folder.is-dragover[b-4dubnpwuy3] {
    background: var(--bs-tertiary-bg);
    outline: 2px dashed var(--buttonbackground);
    outline-offset: -2px;
}

/* ---- Generieke icoonknop (ook in Partials/PersonalFileTable.razor.css) -- */
.pf-iconbtn[b-4dubnpwuy3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-secondary-color);
    transition: background-color .15s ease, color .15s ease;
}

.pf-iconbtn:hover[b-4dubnpwuy3] {
    background: var(--bs-tertiary-bg);
    color: var(--linktext);
}

/* ---- Bestanden-paneel -------------------------------------------------- */
.pf-panel__head[b-4dubnpwuy3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.pf-panel__title[b-4dubnpwuy3] {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.pf-panel__title > i[b-4dubnpwuy3] {
    color: var(--linktext);
}

.pf-panel__name[b-4dubnpwuy3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-panel__count[b-4dubnpwuy3] {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    font-variant-numeric: tabular-nums;
}

.pf-panel__rename[b-4dubnpwuy3] {
    max-width: 18rem;
}

.pf-panel__actions[b-4dubnpwuy3] {
    flex: 0 0 auto;
    display: flex;
    gap: .375rem;
}

/* ---- Focus & reduced motion ------------------------------------------- */
.pf-folder:focus-visible[b-4dubnpwuy3],
.pf-iconbtn:focus-visible[b-4dubnpwuy3] {
    outline: 2px solid var(--linktext);
    outline-offset: 2px;
    border-radius: .375rem;
}

@media (prefers-reduced-motion: reduce) {
    .pf-folder[b-4dubnpwuy3],
    .pf-folder__icon[b-4dubnpwuy3],
    .pf-iconbtn[b-4dubnpwuy3] {
        transition: none;
    }
}
/* /Components/Modules/PersonalFiles/Partials/MemberUploadZone.razor.rz.scp.css */
/* Scoped styling voor de upload-zone van de dossiereigenaar. Gebruikt de tenant-styling-tokens uit
   /content/custom/basic.css (--linktext = accent-tekst/links). */

.pf-upload[b-0arnd9fccc] {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
}

.pf-upload__title[b-0arnd9fccc] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-weight: 600;
}

.pf-upload__title i[b-0arnd9fccc] {
    color: var(--linktext);
}

.pf-upload__note[b-0arnd9fccc] {
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}
/* /Components/Modules/PersonalFiles/Partials/PersonalFileTable.razor.rz.scp.css */
/* Scoped styling voor de bestandstabel van het persoonlijk dossier. Gebruikt de tenant-styling-tokens uit
   /content/custom/basic.css (--linktext = accent-tekst/links) zodat alles meekleurt per tenant. Bewust géén
   --bs-primary (dat is niet tenant-gekoppeld). Geen zware schaduwen; subtiele hover/transities (≤200ms) en
   duidelijke focus-states. Pendant van de zijbalk-/paneelstyling in Pages/User.razor.css. */

/* ---- Lege staat -------------------------------------------------------- */
.pf-empty[b-am4598rxxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.pf-empty__icon[b-am4598rxxc] {
    font-size: 2.5rem;
    opacity: .5;
}

.pf-empty__text[b-am4598rxxc] {
    margin: 0;
}

/* ---- Bestandstabel ----------------------------------------------------- */
.pf-table[b-am4598rxxc] {
    --bs-table-bg: transparent;
}

.pf-table__iconcol[b-am4598rxxc] {
    width: 3.5rem;
}

.pf-table__infocol[b-am4598rxxc] {
    width: 1.5rem;
}

.pf-table__actioncol[b-am4598rxxc] {
    width: 5rem;
}

.pf-table thead th[b-am4598rxxc] {
    border-bottom: 1px solid var(--bs-border-color);
    padding: .6rem 1.25rem;
}

.pf-table tbody td[b-am4598rxxc] {
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}

.pf-table tbody tr:last-child td[b-am4598rxxc] {
    border-bottom: 0;
}

.pf-sort[b-am4598rxxc] {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    transition: color .15s ease;
}

.pf-sort:hover[b-am4598rxxc] {
    color: var(--linktext);
}

.pf-sort i[b-am4598rxxc] {
    margin-left: .25rem;
    color: var(--linktext);
}

.pf-file[b-am4598rxxc] {
    transition: background-color .15s ease;
}

.pf-file:hover[b-am4598rxxc] {
    background: var(--bs-tertiary-bg);
}

.pf-file.is-draggable[b-am4598rxxc] {
    cursor: grab;
}

/* Neutrale icoon-chip; het bestandstype wordt door de icoon-vorm onderscheiden, niet door kleur
   (tenant-neutraal). */
.pf-file__icon[b-am4598rxxc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    font-size: 1rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.pf-file__name[b-am4598rxxc] {
    font-weight: 500;
    color: var(--bs-body-color);
    text-decoration: none;
    cursor: pointer;
}

.pf-file__name:hover[b-am4598rxxc] {
    color: var(--linktext);
    text-decoration: underline;
}

.pf-file__info[b-am4598rxxc] {
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.pf-file__info:hover[b-am4598rxxc] {
    color: var(--linktext);
}

.pf-file__meta[b-am4598rxxc] {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pf-file__time[b-am4598rxxc] {
    margin-left: .25rem;
    opacity: .7;
}

.pf-file__actions[b-am4598rxxc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    opacity: 0;
    transition: opacity .15s ease;
}

/* Acties verschijnen bij hover/focus van de rij; op touch (geen hover) altijd zichtbaar. */
.pf-file:hover .pf-file__actions[b-am4598rxxc],
.pf-file:focus-within .pf-file__actions[b-am4598rxxc] {
    opacity: 1;
}

@media (hover: none) {
    .pf-file__actions[b-am4598rxxc] { opacity: 1; }
}

.pf-file__drag[b-am4598rxxc] {
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    cursor: grab;
    padding: 0 .25rem;
}

/* ---- Generieke icoonknop (ook in Pages/User.razor.css; scoped CSS is per component) ---- */
.pf-iconbtn[b-am4598rxxc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-secondary-color);
    transition: background-color .15s ease, color .15s ease;
}

.pf-iconbtn:hover[b-am4598rxxc] {
    background: var(--bs-tertiary-bg);
    color: var(--linktext);
}

/* ---- Focus & reduced motion ------------------------------------------- */
.pf-iconbtn:focus-visible[b-am4598rxxc],
.pf-sort:focus-visible[b-am4598rxxc],
.pf-file__name:focus-visible[b-am4598rxxc],
.pf-file__info:focus-visible[b-am4598rxxc] {
    outline: 2px solid var(--linktext);
    outline-offset: 2px;
    border-radius: .375rem;
}

@media (prefers-reduced-motion: reduce) {
    .pf-iconbtn[b-am4598rxxc],
    .pf-sort[b-am4598rxxc],
    .pf-file[b-am4598rxxc],
    .pf-file__actions[b-am4598rxxc] {
        transition: none;
    }
}
/* /Components/Modules/Tasks/Pages/Member.razor.rz.scp.css */
/* Ingekorte omschrijving in de takenlijst — vervangt de legacy jQuery.expander (slicePoint 300) uit het
   pageLoad-script van Member.aspx. Of er ingekort wordt bepaalt de pagina op dezelfde tekstlengte; het
   inkorten zelf gebeurt hier, zodat er geen JS-interop aan te pas komt. */

.task-description-clamped[b-ebyjs59qbf] {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* De omschrijving is rich text; laat een lange URL of tabel de kaart niet oprekken. */
.task-description[b-ebyjs59qbf] {
    overflow-wrap: anywhere;
}
/* /Components/Modules/TeamOverview/Pages/Member.razor.rz.scp.css */
/* De hele kaart is de profiel-link; de lichte lift maakt dat zichtbaar. De focus-ring komt uit base.css. */
.team-card[b-4lo3jnayul] {
    transition: box-shadow .2s ease, transform .2s ease;
}

.team-card:hover[b-4lo3jnayul] {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}

/* base.css zet transitions al stil bij reduced motion, maar niet de transform zelf. */
@media (prefers-reduced-motion: reduce) {
    .team-card:hover[b-4lo3jnayul] {
        transform: none;
    }
}

.team-card-avatar[b-4lo3jnayul] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
}

.team-card-name[b-4lo3jnayul] {
    font-size: 1rem;
}
/* /Components/Modules/Tickets/Pages/MemberDetails.razor.rz.scp.css */
/* Verborgen-bericht-styling, port van de Source9 MemberDetails.aspx inline-<style> + de
   workerRadAjaxPanel "ishidden"-class: een bestaand verborgen bericht én het reactie-paneel
   (wanneer "alleen zichtbaar voor medewerkers" aanstaat) krijgen een grijze tint + rand. */
.media.ishidden[b-sjmt5l85zn] {
    background-color: #efefef;
    border: solid 1px #d5d5d5;
}

.react.ishidden[b-sjmt5l85zn] {
    background-color: #efefef;
    border: solid 1px #d5d5d5;
    border-radius: .25rem;
    padding: .75rem;
}
/* /Components/Pages/Member/Cases/Dashboard.razor.rz.scp.css */
/* Port van het <style>-blok in de head van Source9 Dashboard.aspx. Scoped op deze pagina; de widgets zijn
   losse componenten, dus alles binnen .case-dashboard gaat via ::deep. */

/* Het oppervlak van de metingen-tegels. Bootstrap heeft geen token voor "kaartachtergrond" buiten .card
   om — daar zet [data-bs-theme=dark] .card zijn eigen --bs-card-bg — dus staan de twee tinten hier bij
   elkaar. De donkere waarden zijn dezelfde als die styles.css voor .card (#152332) en .bg-light (#26313d)
   in dark mode gebruikt, zodat de tegels naast de card-widgets eronder niet uit de toon vallen. */
.case-dashboard[b-0l6fendhpk] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    --ht-case-tile-bg: #fff;
    --ht-case-tile-empty-bg: var(--bs-muted-bg-subtle, #edf0f4);
}

[data-bs-theme=dark] .case-dashboard[b-0l6fendhpk] {
    --ht-case-tile-bg: #152332;
    --ht-case-tile-empty-bg: #26313d;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-section {
    display: flex;
    flex-direction: column;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-section-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 .6rem 0;
}

/* --- Metingen-tegels --- */

.case-dashboard[b-0l6fendhpk]  .case-prom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .75rem;
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .85rem;
    background: var(--ht-case-tile-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-card-border-radius, .5rem);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: border-color .15s ease;
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card:hover {
    border-color: var(--buttonbackground);
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card.is-empty {
    background: var(--ht-case-tile-empty-bg);
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 34px;
}

.case-dashboard[b-0l6fendhpk]  .case-prom-score {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
}

.case-dashboard[b-0l6fendhpk]  .case-prom-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.case-dashboard[b-0l6fendhpk]  .case-prom-delta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.case-dashboard[b-0l6fendhpk]  .case-prom-empty {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

/* --- Module-widgets --- */

.case-dashboard[b-0l6fendhpk]  .case-dashboard-widget {
    height: 100%;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-widget .card-footer {
    background: transparent;
    padding: .25rem .75rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list,
.case-dashboard[b-0l6fendhpk]  .case-dashboard-counts,
.case-dashboard[b-0l6fendhpk]  .case-dashboard-themes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list li + li,
.case-dashboard[b-0l6fendhpk]  .case-dashboard-counts li + li,
.case-dashboard[b-0l6fendhpk]  .case-dashboard-themes li + li {
    border-top: 1px solid var(--bs-border-color);
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list li a {
    display: block;
    padding: .5rem 0;
    text-decoration: none;
    color: var(--bs-body-color);
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list li a:hover .case-dashboard-list-title {
    color: var(--linktext);
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list-title {
    font-weight: 500;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list-meta {
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-list-sub {
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-counts li a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 0;
    text-decoration: none;
    color: var(--bs-body-color);
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-count-value {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 1.75rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-count-label {
    flex: 1;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-count-chevron {
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-metric {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-metric-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-metric-delta {
    font-size: .85rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-metric-spark {
    margin-top: .5rem;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-status {
    margin: .2rem 0;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-status-name {
    font-weight: 500;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-themes li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-theme-title {
    flex: 1;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-theme-value {
    font-weight: 600;
    min-width: 2.5rem;
    text-align: right;
}

.case-dashboard[b-0l6fendhpk]  .case-dashboard-theme-spark {
    width: 88px;
    flex: 0 0 auto;
}

.case-dashboard[b-0l6fendhpk]  .ht-sparkline {
    display: block;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .case-dashboard[b-0l6fendhpk]  .case-prom-card {
        transition: none;
    }
}
/* /Components/Pages/Member/Cases/Partials/StudyEnrollmentSteps.razor.rz.scp.css */
/* Voortgangsbalk van een onderzoeksaanmelding. Vervangt het jQuery-Steps-themabestand
   (legacy css/pages/steps.css): zelfde beeld — genummerde bolletjes met verbindingslijn — maar op
   Bootstrap-5-variabelen en flexbox. */

.enrollment-steps[b-xpe14fbsfe] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: enrollment-step;
}

.enrollment-step[b-xpe14fbsfe] {
    counter-increment: enrollment-step;
    flex: 1 1 0;
    position: relative;
    text-align: center;
    padding: 0 .25rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

/* Verbindingslijn tussen de bolletjes; niet vóór de eerste en niet ná de laatste stap. */
.enrollment-step[b-xpe14fbsfe]::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--bs-border-color);
}

.enrollment-step:first-child[b-xpe14fbsfe]::before {
    content: none;
}

.enrollment-step.done[b-xpe14fbsfe]::before {
    background: var(--bs-primary);
}

.enrollment-step-marker[b-xpe14fbsfe] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto .5rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    font-weight: 600;
}

/* Stapnummer zolang er geen icoon staat (done/ingetrokken tonen een vinkje/kruis). */
.enrollment-step-marker:empty[b-xpe14fbsfe]::before {
    content: counter(enrollment-step);
}

.enrollment-step-label[b-xpe14fbsfe] {
    display: block;
}

.enrollment-step.current[b-xpe14fbsfe] {
    color: var(--bs-body-color);
}

.enrollment-step.current .enrollment-step-marker[b-xpe14fbsfe] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.enrollment-step.done .enrollment-step-marker[b-xpe14fbsfe] {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

.enrollment-step.danger .enrollment-step-marker[b-xpe14fbsfe] {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.enrollment-step.done.danger .enrollment-step-marker[b-xpe14fbsfe] {
    background: var(--bs-danger);
    color: #fff;
}

@media (max-width: 575.98px) {
    .enrollment-step[b-xpe14fbsfe] {
        font-size: .75rem;
    }
}
/* /Components/Pages/Member/Cases/Proms/Questionnaire.razor.rz.scp.css */
/* Port van het <style>-blok in Source9 Generic/Pages/Frontend/Prom/FormAdd.aspx.

   Twee sectiesoorten: `sectionNormal` zet de antwoorden onder elkaar, `sectionMatrix` legt ze vanaf lg
   naast elkaar in kolommen met één kopregel erboven (de optieteksten). Onder lg valt de matrix terug op
   dezelfde verticale vorm als normaal, en verdwijnt die kopregel — de optietekst staat dan bij elke
   radioknop zelf. */

.partInstruction[b-r2x15ofsej] {
    font-size: 90%;
}

.sectionTitle[b-r2x15ofsej] {
    margin-top: 0.5rem;
}

.sectionInstruction[b-r2x15ofsej] {
    font-size: 120%;
}

.questionHelper[b-r2x15ofsej] {
    font-style: italic;
    font-size: 90%;
    text-align: right;
}

.sectionMatrix[b-r2x15ofsej] {
    display: block;
}

    .sectionMatrix.sectionMatrixHeader[b-r2x15ofsej] {
        display: none;
        font-weight: bold;
    }

/* De vraag is de kop van het blok en moet het eerst opvallen. Dat gaat hier via de tekstgrootte en de
   ruimte eromheen, niet via het lettergewicht: de vraagteksten bevatten zelf <b> om het kernwoord te
   benadrukken (de ACQ zet er de klacht in), en een zwaardere basis haalt het verschil met die nadruk weg.
   De maat staat in rem en niet in em, want de markup nest .questionText in .questionText. */
.sectionNormal .questionText[b-r2x15ofsej],
.sectionMatrix .questionText[b-r2x15ofsej] {
    display: flex;
    width: 100%;
    font-size: 1.0625rem;
    line-height: 1.4;
}

.sectionNormal .questionOptions[b-r2x15ofsej],
.sectionMatrix .questionOptions[b-r2x15ofsej] {
    width: 100%;
    margin-top: 0.75rem;
}

    /* Antwoordtegels, hetzelfde patroon als de ACT-modules (AddMeasurementModal): de radioknop zelf is
       onzichtbaar (`btn-check`) en het label is de klikbare tegel, zodat het raakvlak de volle breedte
       beslaat in plaats van een bolletje van 16px. Onder lg staan de tegels onder elkaar — ook in de
       matrixvorm, die pas vanaf lg kolommen krijgt. */
    .sectionNormal .questionOptions .space-even[b-r2x15ofsej],
    .sectionMatrix .questionOptions .space-even[b-r2x15ofsej] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .sectionNormal .questionOptions .rbTile[b-r2x15ofsej],
    .sectionMatrix .questionOptions .rbTile[b-r2x15ofsej] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        white-space: normal;
        text-align: left;
    }

@media (min-width: 992px) {
    .sectionMatrix[b-r2x15ofsej] {
        display: flex;
    }

        .sectionMatrix.sectionMatrixHeader[b-r2x15ofsej] {
            display: flex;
        }

            .sectionMatrix.sectionMatrixHeader .header[b-r2x15ofsej] {
                margin: 0 7px;
                flex-grow: 1;
                flex-basis: 0;
                text-align: center;
            }

        .sectionMatrix .questionText[b-r2x15ofsej] {
            width: 50%;
            display: flex;
            align-self: center;
        }

        /* In matrixvorm staan vraag en antwoorden naast elkaar; de marge die ze in de verticale vorm
           uit elkaar houdt, zou de kolommen hier scheeftrekken. */
        .sectionMatrix .questionOptions[b-r2x15ofsej] {
            width: 50%;
            margin-top: 0;
            margin-left: auto;
        }

            .sectionMatrix .questionOptions .space-even[b-r2x15ofsej] {
                flex-direction: row;
                justify-content: space-evenly;
                align-items: stretch;
            }

            .sectionMatrix .questionOptions .rbRadioButton[b-r2x15ofsej] {
                flex: 1 1 0;
                margin: 0 7px;
                padding: 7px 0;
            }

            /* In de kolomvorm staat de tekst in de kopregel en blijft er in de cel niets te lezen over;
               een lege tegel van volle breedte is dan geen aanwijzing meer. De tegel krimpt daarom tot de
               vorm van een keuzerondje dat vol loopt zodra het aangekruist is — alleen met een raakvlak van
               24px in plaats van de 16px van een echte radioknop. */
            .sectionMatrix .questionOptions .rbTile[b-r2x15ofsej] {
                width: 1.5rem;
                height: 1.5rem;
                min-height: 0;
                padding: 0;
                margin: 0 auto;
                border-radius: 50%;
                justify-content: center;
            }

                /* In matrixvorm staat de optietekst al in de kopregel erboven; in de tegel zelf is hij dan
                   overbodig, maar hij blijft wél de toegankelijke naam van de radioknop — de kopregel is een
                   losse div die nergens aan gekoppeld is. Verbergen gaat daarom met de clip-techniek van
                   Bootstrap (`.visually-hidden`): `visibility: hidden` haalt de tekst ook uit de
                   accessibility tree en laat de knop naamloos achter. */
                .sectionMatrix .questionOptions .rbText[b-r2x15ofsej] {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }
}

/* Scheidingslijn bóven elke vraag. De kleur komt uit het thema: de #efefef van net48 is in donkere
   modus niet te zien. */
.questionSeparator[b-r2x15ofsej] {
    border-bottom: 1px solid var(--bs-border-color);
    margin: 0 0 1rem;
}

.no-wrap[b-r2x15ofsej] {
    white-space: nowrap;
}

.help-image[b-r2x15ofsej] {
    border-radius: 8px;
    height: 120px;
}

/* Titelpagina: de blokken staan gecentreerd onder elkaar, met de bronvermelding als kleinste
   tekst onderaan — die eis stelt de rechthebbende van sommige vragenlijsten. */
.titlePage[b-r2x15ofsej] {
    text-align: center;
}

.titlePageVersion[b-r2x15ofsej] {
    font-size: 90%;
    color: var(--bs-secondary-color);
}

.titlePageImage[b-r2x15ofsej] {
    margin: 1.5rem 0;
}

    .titlePageImage img[b-r2x15ofsej] {
        max-width: 100%;
        height: auto;
    }

.titlePageCopyright[b-r2x15ofsej] {
    font-size: 80%;
    color: var(--bs-secondary-color);
}

/* Elk blok is één vraag met zijn antwoorden; de ruimte eromheen is groter dan die tussen de tegels
   onderling, zodat de vragen als losse blokken lezen en niet als één lange lijst. */
.promQuestion[b-r2x15ofsej] {
    margin-bottom: 1.75rem;
}

/* Bronvermelding onder elk scherm van de vragenlijst: links uitgelijnd en klein, maar wel leesbaar
   — hij hoort er op voorschrift van de rechthebbende te staan, niet om weggekeken te worden. */
.promCopyright[b-r2x15ofsej] {
    text-align: left;
    font-size: 80%;
    color: var(--bs-secondary-color);
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
/* /Components/Pages/Member/Cases/Proms/Result.razor.rz.scp.css */
/* Port van het <style>-blok in Source9 Generic/Pages/Frontend/Prom/FormResult.aspx. De `.resultTable`-
   regel daar was leeg en het bijbehorende blok stond op `hidden`; die is niet meegekomen. */

.micro[b-j9uuf4l3ds] {
    font-size: 60%;
}

.responsTable .row[b-j9uuf4l3ds] {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px var(--bs-card-cap-bg);
}

.prom-chart[b-j9uuf4l3ds] {
    margin-bottom: 1.5rem;
}
/* /Components/Pages/Member/Cases/Proms/Results.razor.rz.scp.css */
/* Ruimte tussen de grafiek(en) en de lijst eronder. Van het <style>-blok in Member.aspx blijft verder
   niets over: `.highcharts-credits` verbergen doet de grafiekoptie `credits.enabled` al, en de
   `.acttable`/`.btn-group`-regels horen bij het invulformulier (FormAdd), niet bij deze pagina. */
.prom-chart[b-8hb1uqqw5o] {
    margin-bottom: 1.5rem;
}
/* /Components/Pages/Member/Search.razor.rz.scp.css */
/* Volledige zoekpagina — spiegelt de GlobalSearch-rij-taal (GlobalSearch.razor.css) zodat de overlay en
   de pagina consistent ogen. Theme-aware via Bootstrap-surfacevariabelen + tenant-accent (--linktext). */

.sr-wrap[b-z3b7qk4br1] {
    --sr-accent: var(--linktext, var(--bs-primary, #0d6efd));
}

/* ---- Zoekbalk: zit in een eigen card (zelfde schaduw als de resultaten); de card is het oppervlak,
   de rij eronder is enkel de flex-layout (icoon + input + wissen + ronde accent "go"-knop). ---- */
.sr-searchcard[b-z3b7qk4br1] {
    transition: border-color .15s ease;
}

.sr-searchcard:focus-within[b-z3b7qk4br1] {
    border-color: var(--sr-accent);
}

.sr-searchbar[b-z3b7qk4br1] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sr-searchbar-icon[b-z3b7qk4br1] {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
}

.sr-searchbar-input[b-z3b7qk4br1] {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    appearance: none;
    color: var(--bs-body-color);
    font-size: 1.1rem;
    line-height: 1.4;
}

.sr-searchbar-input[b-z3b7qk4br1]::placeholder {
    color: var(--bs-secondary-color);
}

.sr-iconbtn[b-z3b7qk4br1] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    border-radius: 50%;
    cursor: pointer;
}

.sr-iconbtn:hover[b-z3b7qk4br1] {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.sr-searchbar-submit[b-z3b7qk4br1] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ---- Resultaatkop ---- */
.sr-results-head[b-z3b7qk4br1] {
    margin: .25rem .25rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

/* ---- Resultaatlijst ---- */
.sr-list[b-z3b7qk4br1] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sr-result[b-z3b7qk4br1] {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .65rem .7rem;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease;
}

.sr-result:hover[b-z3b7qk4br1],
.sr-result:focus-visible[b-z3b7qk4br1] {
    background: var(--bs-secondary-bg);
    background: color-mix(in srgb, var(--sr-accent) 12%, var(--bs-body-bg));
    outline: none;
}

.sr-result:hover .sr-result-title[b-z3b7qk4br1] {
    color: var(--sr-accent);
}

.sr-result-icon[b-z3b7qk4br1] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.sr-result-avatar[b-z3b7qk4br1] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
}

.sr-result:hover .sr-result-icon[b-z3b7qk4br1] {
    background: var(--sr-accent);
    color: #fff;
}

.sr-result-main[b-z3b7qk4br1] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.sr-result-title[b-z3b7qk4br1] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-result-preview[b-z3b7qk4br1] {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-result-meta[b-z3b7qk4br1] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.sr-result-type[b-z3b7qk4br1] {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .12rem .5rem;
    white-space: nowrap;
}

.sr-result-date[b-z3b7qk4br1] {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* ---- Lege / idle staat (mirror van de palette) ---- */
.sr-empty[b-z3b7qk4br1] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.sr-empty-icon[b-z3b7qk4br1] {
    font-size: 2rem;
    color: var(--bs-secondary-color);
    opacity: .6;
}

.sr-empty-title[b-z3b7qk4br1] {
    margin: .9rem 0 .25rem;
    font-weight: 600;
}

.sr-empty-sub[b-z3b7qk4br1] {
    margin: 0;
    font-size: .88rem;
    color: var(--bs-secondary-color);
}

/* ---- Skeletons ---- */
.sr-skeleton[b-z3b7qk4br1] {
    cursor: default;
}

.sr-sk[b-z3b7qk4br1] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg, var(--bs-body-bg)) 37%, var(--bs-secondary-bg) 63%);
    background-size: 400% 100%;
    animation: sr-shimmer-b-z3b7qk4br1 1.3s ease-in-out infinite;
}

.sr-sk-icon[b-z3b7qk4br1] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.sr-sk-line[b-z3b7qk4br1] {
    height: .7rem;
    margin: .2rem 0;
}

.sr-sk-sub[b-z3b7qk4br1] {
    height: .6rem;
    opacity: .7;
}

@keyframes sr-shimmer-b-z3b7qk4br1 {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-sk[b-z3b7qk4br1] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .sr-result-preview[b-z3b7qk4br1] {
        display: none;
    }

    .sr-result-date[b-z3b7qk4br1] {
        display: none;
    }
}
/* /Components/Pages/Member/Timeline.razor.rz.scp.css */
/* Scoped CSS voor Member/Timeline.razor.
   Pagina-eigen elementen (intro/filters/datumkoppen/lege staat) staan direct in deze razor en worden
   rechtstreeks gestyled. De activiteitsrijen zijn losse componenten onder Components/Shared/Timeline en
   krijgen géén scope-attribuut: die selectors lopen via `.tl-timeline ::deep ...`. */

.tl-intro[b-smvly1yqor] {
    margin-bottom: 1rem;
    color: var(--bs-body-color);
}

/* ---- Filterbalk ---- */
.tl-filters[b-smvly1yqor] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.tl-filter[b-smvly1yqor] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    max-height: 34px;
    padding: .35rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .8125rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tl-filter:hover[b-smvly1yqor] {
    border-color: rgba(var(--bs-primary-rgb), .5);
}

.tl-filter:focus-visible[b-smvly1yqor] {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.tl-filter.active[b-smvly1yqor] {
    background-color: rgba(var(--bs-primary-rgb), .1);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.tl-filter-count[b-smvly1yqor] {
    padding: 0 .4rem;
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.tl-filter.active .tl-filter-count[b-smvly1yqor] {
    background-color: var(--bs-primary);
    color: var(--buttontext, #fff);
}

/* ---- Tijdlijn-rail ---- */
.tl-timeline[b-smvly1yqor] {
    position: relative;
}

.tl-timeline[b-smvly1yqor]::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background-color: var(--bs-border-color);
}

.tl-dateheader[b-smvly1yqor] {
    margin: 1.75rem 0 1rem;
    padding-left: 3.5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.tl-dateheader:first-child[b-smvly1yqor] {
    margin-top: 0;
}

.tl-more[b-smvly1yqor] {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.tl-end[b-smvly1yqor] {
    font-size: .875rem;
}

/* ---- Lege staat ---- */
.tl-empty[b-smvly1yqor] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-smvly1yqor] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 1.5rem;
}

.empty-text[b-smvly1yqor] {
    max-width: 46ch;
    margin: 0;
    color: var(--bs-body-color);
}

/* ---- Activiteitsrij (losse componenten -> ::deep) ---- */
.tl-timeline[b-smvly1yqor]  .tl-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.tl-timeline[b-smvly1yqor]  .tl-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: .85rem;
    z-index: 1;
}

.tl-timeline[b-smvly1yqor]  .tl-node-avatar {
    padding: 0;
    overflow: hidden;
    border-color: rgba(var(--bs-primary-rgb), .35);
}

.tl-timeline[b-smvly1yqor]  .tl-node-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-timeline[b-smvly1yqor]  .tl-card {
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.tl-timeline[b-smvly1yqor]  .tl-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .25);
    box-shadow: 0 2px 10px rgba(var(--bs-dark-rgb), .07);
}

.tl-timeline[b-smvly1yqor]  .tl-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem .65rem;
    flex-wrap: wrap;
}

.tl-timeline[b-smvly1yqor]  .tl-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tl-timeline[b-smvly1yqor]  .tl-sentence {
    flex: 1 1 55%;
    min-width: 12rem;
    margin: 0;
    line-height: 1.55;
}

.tl-timeline[b-smvly1yqor]  .tl-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.tl-timeline[b-smvly1yqor]  .tl-time {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Scope-chip */
.tl-timeline[b-smvly1yqor]  .tl-scope {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    white-space: nowrap;
}

.tl-timeline[b-smvly1yqor]  .tl-scope-community {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.tl-timeline[b-smvly1yqor]  .tl-scope-personal {
    background-color: rgba(var(--bs-warning-rgb), .15);
    color: var(--bs-warning-text-emphasis);
}

/* Actor-/bestandslink in de zin */
.tl-timeline[b-smvly1yqor]  .tl-userlink,
.tl-timeline[b-smvly1yqor]  .tl-filelink,
.tl-timeline[b-smvly1yqor]  .tl-caselink {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--bs-primary);
    cursor: pointer;
}

.tl-timeline[b-smvly1yqor]  .tl-userlink:hover,
.tl-timeline[b-smvly1yqor]  .tl-filelink:hover,
.tl-timeline[b-smvly1yqor]  .tl-caselink:hover {
    text-decoration: underline;
}

.tl-timeline[b-smvly1yqor]  .tl-userlink:focus-visible,
.tl-timeline[b-smvly1yqor]  .tl-filelink:focus-visible,
.tl-timeline[b-smvly1yqor]  .tl-caselink:focus-visible,
.tl-timeline[b-smvly1yqor]  .tl-clamp-toggle:focus-visible {
    outline: none;
    border-radius: .5rem;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.tl-timeline[b-smvly1yqor]  .tl-self {
    font-weight: 600;
}

/* Voorvertoning-tekst met "lees meer" */
.tl-timeline[b-smvly1yqor]  .tl-content {
    margin-top: .65rem;
}

.tl-timeline[b-smvly1yqor]  .tl-preview .tl-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--tl-lines, 4);
    overflow: hidden;
    color: var(--bs-body-color);
}

.tl-timeline[b-smvly1yqor]  .tl-preview.expanded .tl-clamp {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.tl-timeline[b-smvly1yqor]  .tl-clamp-toggle {
    display: none;
    margin-top: .25rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-primary);
    cursor: pointer;
}

.tl-timeline[b-smvly1yqor]  .tl-preview.has-overflow .tl-clamp-toggle,
.tl-timeline[b-smvly1yqor]  .tl-preview.expanded .tl-clamp-toggle {
    display: inline-flex;
}

.tl-timeline[b-smvly1yqor]  .tl-clamp-toggle [data-tl-less] {
    display: none;
}

.tl-timeline[b-smvly1yqor]  .tl-preview.expanded .tl-clamp-toggle [data-tl-more] {
    display: none;
}

.tl-timeline[b-smvly1yqor]  .tl-preview.expanded .tl-clamp-toggle [data-tl-less] {
    display: inline;
}

/* Afbeelding-/video-voorvertoning */
.tl-timeline[b-smvly1yqor]  .tl-image {
    display: block;
    position: relative;
    margin-top: .65rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
    max-width: min(100%, 22rem);
    line-height: 0;
}

.tl-timeline[b-smvly1yqor]  .tl-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    transition: transform .2s ease;
}

.tl-timeline[b-smvly1yqor]  .tl-image:hover img {
    transform: scale(1.03);
}

.tl-timeline[b-smvly1yqor]  .tl-image:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.tl-timeline[b-smvly1yqor]  .tl-image-zoom,
.tl-timeline[b-smvly1yqor]  .tl-image-play {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgba(0, 0, 0, .55);
    line-height: 1;
}

.tl-timeline[b-smvly1yqor]  .tl-image-zoom {
    top: .5rem;
    right: .5rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .5rem;
    font-size: .8rem;
}

.tl-timeline[b-smvly1yqor]  .tl-image-play {
    inset: 0;
    margin: auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    font-size: 1.1rem;
}

@media (max-width: 575.98px) {
    .tl-timeline[b-smvly1yqor]  .tl-scope span:last-child {
        display: none;
    }

    .tl-timeline[b-smvly1yqor]  .tl-item {
        grid-template-columns: 2rem 1fr;
        gap: .65rem;
    }

    .tl-timeline[b-smvly1yqor]::before {
        left: 1rem;
    }

    .tl-dateheader[b-smvly1yqor] {
        padding-left: 2.65rem;
    }

    .tl-timeline[b-smvly1yqor]  .tl-node {
        width: 2rem;
        height: 2rem;
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-filter[b-smvly1yqor],
    .tl-timeline[b-smvly1yqor]  .tl-card,
    .tl-timeline[b-smvly1yqor]  .tl-image img {
        transition: none;
    }

    .tl-timeline[b-smvly1yqor]  .tl-image:hover img {
        transform: none;
    }
}
/* /Components/Pages/SystemAdmin/Shared/UserCard.razor.rz.scp.css */
/* Vaste marge boven de kaart (verving de per-pagina CssClass="mt-4"), zodat de kaart overal
   met dezelfde tussenruimte verschijnt. */
.user-card[b-bfewj6l7hk] {
    margin-top: 1.5rem;
}

.user-card-avatar[b-bfewj6l7hk] {
    width: 52px;
    height: 52px;
    border: 1px solid var(--bs-border-color);
}

.user-card-name[b-bfewj6l7hk] {
    font-size: 1.0625rem;
}

/* Kopieer-knop subtiel tot interactie. */
.user-card-copy[b-bfewj6l7hk] {
    opacity: .6;
    transition: opacity .15s ease-in-out;
}

.user-card-copy:hover[b-bfewj6l7hk],
.user-card-copy:focus-visible[b-bfewj6l7hk] {
    opacity: 1;
}
/* /Components/Pages/Worker/CaseAlerts.razor.rz.scp.css */
/* Port van de <style> in de head van Source9 Generic/Pages/CaseAlerts/Worker.aspx — het tab-filter op
   meldingscategorie (enkelvoudige selectie). Nav-underline-patroon uit DESIGN.md: active-state via
   var(--linktext) met weight 500 en een onderlijn.

   De "Meer"-dropdown (priority+ overflow) werkt hier anders dan in net48: JS meet alleen hoeveel tabs er
   passen, C# rendert de rest in het menu (zie CaseAlerts.razor.js). De opmaak is ongewijzigd. */

.ca-tabs[b-ivw7bxd3go] {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ca-tabs-list[b-ivw7bxd3go] {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ca-tabs-more[b-ivw7bxd3go] {
    flex: 0 0 auto;
}

.ca-tab[b-ivw7bxd3go] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .5rem .15rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.ca-tab:hover[b-ivw7bxd3go] {
    color: var(--linktextAccent, var(--linktext));
}

.ca-tab:focus-visible[b-ivw7bxd3go] {
    outline: 3px solid var(--bs-focus-ring-color);
    outline-offset: 2px;
}

.ca-tab.active[b-ivw7bxd3go] {
    color: var(--linktext);
    border-bottom-color: var(--linktext);
}

.ca-tab.active .ca-tab-label[b-ivw7bxd3go] {
    font-weight: 500;
}

/* Reserveer vooraf de breedte van de vette (active) variant, zodat de tabs niet verspringen. */
.ca-tab-label[b-ivw7bxd3go] {
    display: inline-grid;
}

.ca-tab-label[b-ivw7bxd3go]::after {
    content: attr(data-label);
    font-weight: 500;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

.ca-tab-count[b-ivw7bxd3go] {
    padding: 0 .4rem;
    border-radius: 8px;
    background-color: var(--bs-tertiary-bg);
    /* count = data: ink i.p.v. muted-grijs-op-grijs (washed-out) voor leesbaarheid */
    color: var(--bs-body-color);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

/* Diepere Dutch Sky (linktextAccent) i.p.v. linktext: wit op #037AB8 ≈ 4.67:1 (WCAG AA bij 12px),
   wit op #0488cd haalde maar 3.87:1. */
.ca-tab.active .ca-tab-count[b-ivw7bxd3go] {
    background-color: var(--linktextAccent, var(--linktext));
    color: var(--buttontext, #fff);
}

/* "Meer"-knop met de overgebleven tabs in een dropdown (priority+ patroon). */
.ca-more-toggle .fa-chevron-down[b-ivw7bxd3go] {
    font-size: .7rem;
}

.ca-tab.ca-tab-in-menu[b-ivw7bxd3go] {
    display: flex;
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
    padding: .4rem 1rem;
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: 0;
    font-size: .875rem;
    white-space: nowrap;
}

.ca-tab.ca-tab-in-menu .ca-tab-count[b-ivw7bxd3go] {
    margin-left: auto;
}

.ca-tab.ca-tab-in-menu.active[b-ivw7bxd3go] {
    color: var(--linktext);
    background-color: var(--bs-tertiary-bg);
}

@media (max-width: 991.98px) {
    .ca-tab[b-ivw7bxd3go] {
        min-height: 44px;
    }

    .ca-tab.ca-tab-in-menu[b-ivw7bxd3go] {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-tab[b-ivw7bxd3go] {
        transition: none;
    }
}

/* De meldingstekst opent de details, net als de titel in <CaseAlertWorklist>: knop zonder knop-opmaak,
   pas op hover als link herkenbaar. */
.ca-alert-link[b-ivw7bxd3go] {
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
}

.ca-alert-link:hover[b-ivw7bxd3go] {
    color: var(--linktext) !important;
    text-decoration: underline !important;
}

.ca-alert-link:focus-visible[b-ivw7bxd3go] {
    outline: 3px solid var(--bs-focus-ring-color);
    outline-offset: 2px;
}

/* De datumkolom is twee regels hoog; alle cellen boven uitlijnen zodat de melding, de namen en de
   actieknoppen op één lijn met de datum beginnen (het thema centreert ze verticaal). */
.card-body[b-ivw7bxd3go]  .e-grid td.e-rowcell {
    vertical-align: top;
}
/* /Components/Pages/Worker/CasesNew.razor.rz.scp.css */
/* Geport uit Source9 App/css/pages/casesnew.css — stepper + samenvatting van de dossier-toevoegen-wizard. */

.casenew-stepper[b-wwll7viqqv] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.casenew-stepper__item[b-wwll7viqqv] {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    min-width: 0;
}

.casenew-stepper__item:not(:first-child)[b-wwll7viqqv]::before {
    content: "";
    position: absolute;
    top: 16px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--bs-border-color);
    z-index: 0;
}

.casenew-stepper__item.is-done[b-wwll7viqqv]::before,
.casenew-stepper__item.is-current[b-wwll7viqqv]::before {
    background: var(--buttonbackground);
}

.casenew-stepper__marker[b-wwll7viqqv] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 0.4rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: #fff;
    font-weight: 600;
}

.casenew-stepper__item.is-done .casenew-stepper__marker[b-wwll7viqqv] {
    background: var(--buttonbackground);
    border-color: var(--buttonbackground);
    color: #fff;
}

.casenew-stepper__item.is-current .casenew-stepper__marker[b-wwll7viqqv] {
    border-color: var(--buttonbackground);
    color: var(--buttonbackground);
}

.casenew-stepper__label[b-wwll7viqqv] {
    display: block;
    padding: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casenew-stepper__item.is-current .casenew-stepper__label[b-wwll7viqqv] {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* Afgeronde stappen zijn klikbaar om terug te springen */
.casenew-stepper__link[b-wwll7viqqv] {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.casenew-stepper__link:hover .casenew-stepper__label[b-wwll7viqqv] {
    color: var(--bs-body-color);
    text-decoration: underline;
}

.casenew-stepper__link:focus-visible[b-wwll7viqqv] {
    outline: 2px solid var(--buttonbackground);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Labels verbergen we al vanaf 'md' en lager: bij 7 stappen worden ze anders te krap. */
@media (max-width: 767.98px) {
    .casenew-stepper__label[b-wwll7viqqv] {
        display: none;
    }
}

/* Tekstuele stapaanduiding — altijd zichtbaar, ook op mobiel waar de labels verdwijnen */
.casenew-stepper__progress[b-wwll7viqqv] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* Samenvatting (stap 'Controleren & bevestigen') */
.casenew-summary__group + .casenew-summary__group[b-wwll7viqqv] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.casenew-summary__title[b-wwll7viqqv] {
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.casenew-summary__row[b-wwll7viqqv] {
    display: flex;
    gap: 1rem;
    padding: 0.2rem 0;
}

.casenew-summary__label[b-wwll7viqqv] {
    flex: 0 0 12rem;
    color: var(--bs-secondary-color);
}

.casenew-summary__value[b-wwll7viqqv] {
    flex: 1 1 auto;
    font-weight: 500;
}

.casenew-summary__value--muted[b-wwll7viqqv] {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

@media (max-width: 575px) {
    .casenew-summary__row[b-wwll7viqqv] {
        flex-direction: column;
        gap: 0.1rem;
    }

    .casenew-summary__label[b-wwll7viqqv] {
        flex-basis: auto;
    }
}
/* /Components/Shared/CaseAlerts/CaseAlertDetailsModal.razor.rz.scp.css */
/* Port van de <style> in Source9 CaseAlerts/ActionDetails.ascx + ActionPromDetails.ascx. */

.prom-score-circle[b-j65cui0q9d] {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border: solid 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

/* De actiekolom heeft een vaste breedte vanaf lg, zodat de afhandel-knoppen op één regel passen en een
   lange toelichting (afgehandelde staat) de kolom niet uitrekt. */
@media (min-width: 992px) {
    .caseAlertActionCol[b-j65cui0q9d] {
        flex: 0 0 360px;
        width: 360px;
        max-width: 360px;
    }
}
/* /Components/Shared/CaseAlerts/CaseAlertSettingsModal.razor.rz.scp.css */
/* De invoervelden van de grenswaarden blijven smal (net48: RadNumericTextBox Width="90"). */

/* ::deep — het input-element wordt door HxInputNumber gerenderd en draagt de scope-id niet. */
[b-28bb5kvual] .settings-value {
    width: 90px;
}
/* /Components/Shared/CaseAlerts/CaseAlertWorklist.razor.rz.scp.css */
/* Port van de <style> in Source9 CaseAlert.ascx. De titel en de tabbladen waren daar LinkButtons/anchors
   met een postback; hier zijn het knoppen, dus die krijgen eerst de knop-opmaak weggehaald. */

.caseAlertCard .caseAlertTitleLink[b-0jce3vo2bl] {
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
}

.caseAlertCard .caseAlertTitleLink:hover[b-0jce3vo2bl] {
    color: var(--linktext) !important;
    text-decoration: underline !important;
}

/* Icoon + titel naast elkaar; de tekstkolom mag krimpen zodat line-clamp blijft werken in flex */
.caseAlertCard .caseAlertText[b-0jce3vo2bl] {
    min-width: 0;
}

/* Tabs als compacte uppercase-labels */
.caseAlertCard .card-header .nav-underline .nav-link[b-0jce3vo2bl] {
    border: 0;
    background: none;
    font-size: 12px;
    text-transform: uppercase;
}

/* Trek de tabs omlaag zodat de actieve underline samenvalt met de header-onderrand */
.caseAlertCard .card-header .nav-underline[b-0jce3vo2bl] {
    margin-bottom: calc(-1 * var(--bs-card-border-width));
}

/* Compacte paginering in de kaart, met het accent van het actieve menu-item. */
.caseAlertCard .pagination[b-0jce3vo2bl] {
    --bs-pagination-padding-y: .25rem;
    --bs-pagination-padding-x: .5rem;
    --bs-pagination-font-size: .875rem;
    --bs-pagination-active-bg: var(--menuactivebackground);
    --bs-pagination-active-border-color: var(--menuactiveborder);
}
/* /Components/Shared/CaseAlerts/PatientCard.razor.rz.scp.css */
/* Port van de <style> in Source9 CaseAlerts/PatientCard.ascx. */

.patientCard-field[b-71l1shvnl0] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.patientCard .copyBtn[b-71l1shvnl0] {
    line-height: 1;
}

.patientCard .copyBtn:hover[b-71l1shvnl0] {
    color: var(--linktext) !important;
}
/* /Components/Shared/PatientNavigation.razor.rz.scp.css */
/* Port van de <style> in Source9 Components/PatientNavigation.ascx. */

.pn-search[b-3u2efrsm2y] {
    width: 220px;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .pn-search[b-3u2efrsm2y] {
        width: 140px;
    }
}

/* "Overzicht selecteren": chip-look met kader en sm-formaat, zodat het qua hoogte/rand bij het zoekveld past. */
.pn-toggle[b-3u2efrsm2y] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: .875rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.pn-toggle:hover[b-3u2efrsm2y],
.pn-toggle.show[b-3u2efrsm2y] {
    color: var(--linktext);
    border-color: var(--linktext);
}

.pn-toggle:focus-visible[b-3u2efrsm2y] {
    outline: 3px solid var(--bs-focus-ring-color);
    outline-offset: 2px;
}

.pn-toggle .fa-chevron-down[b-3u2efrsm2y] {
    font-size: .7rem;
}

/* Dropdown-inhoud: icoon + label, flush items, accent op hover/actief. */
.pn-menu[b-3u2efrsm2y] {
    min-width: 14rem;
    font-size: .875rem;
}

.pn-menu .dropdown-item[b-3u2efrsm2y] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.pn-menu .dropdown-item:hover[b-3u2efrsm2y],
.pn-menu .dropdown-item:focus[b-3u2efrsm2y] {
    color: var(--linktext);
    background-color: var(--bs-tertiary-bg);
}

.pn-menu .dropdown-item.active[b-3u2efrsm2y] {
    color: var(--linktext);
    background-color: var(--bs-tertiary-bg);
}

.pn-menu .dropdown-header[b-3u2efrsm2y] {
    padding: .4rem 1rem .2rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.pn-menu .dropdown-divider[b-3u2efrsm2y] {
    border-top-color: var(--bs-border-color);
}

@media (prefers-reduced-motion: reduce) {
    .pn-toggle[b-3u2efrsm2y] {
        transition: none;
    }
}
/* /Components/Shared/Preview/ExcelPreviewModal.razor.rz.scp.css */
/* Excel-werkblad-lightbox (zelfde taal als de PDF-lightbox): donkere scrim, gecentreerd wit vel met de
   viewer-iframe, witte zwevende titel-pill + sluitknop. De scrim en de witte chips zijn functionele,
   thema-onafhankelijke media-overlaykleuren. */

.xl-overlay[b-hv4iahqdny] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: xl-overlay-in-b-hv4iahqdny 160ms ease-out;
}

.xl-overlay:focus[b-hv4iahqdny] {
    outline: none;
}

.xl-sheet[b-hv4iahqdny] {
    position: relative;
    width: min(90rem, 92vw);
    height: 92vh;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    cursor: default;
    animation: xl-pop-in-b-hv4iahqdny 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.xl-frame[b-hv4iahqdny] {
    width: 100%;
    height: 100%;
    border: 0;
}

.xl-loading[b-hv4iahqdny] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bs-secondary-color);
}

.xl-actions[b-hv4iahqdny] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.xl-btn[b-hv4iahqdny] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.xl-btn:hover[b-hv4iahqdny] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.xl-btn:focus-visible[b-hv4iahqdny] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes xl-overlay-in-b-hv4iahqdny {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes xl-pop-in-b-hv4iahqdny {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xl-overlay[b-hv4iahqdny],
    .xl-sheet[b-hv4iahqdny] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .xl-sheet[b-hv4iahqdny] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Shared/Preview/ExternalVideoPreviewModal.razor.rz.scp.css */
/* Externe-video-lightbox (zelfde taal als de afbeelding-lightbox), niet schermvullend. De donkere scrim en de
   witte knop/spinner zijn functionele, thema-onafhankelijke media-overlaykleuren. */

.ev-overlay[b-m52t6zx8f6] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: ev-overlay-in-b-m52t6zx8f6 160ms ease-out;
}

.ev-overlay:focus[b-m52t6zx8f6] {
    outline: none;
}

.ev-content[b-m52t6zx8f6] {
    width: min(56rem, 92vw);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    cursor: default;
    animation: ev-pop-in-b-m52t6zx8f6 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ev-loading[b-m52t6zx8f6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: #fff;
}

.ev-title[b-m52t6zx8f6] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    max-width: calc(100% - 6rem);
    height: 2.75rem;
    z-index: 1;
    margin: 0;
    padding: 0 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 2.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-actions[b-m52t6zx8f6] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.ev-btn[b-m52t6zx8f6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.ev-btn:hover[b-m52t6zx8f6] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.ev-btn:focus-visible[b-m52t6zx8f6] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes ev-overlay-in-b-m52t6zx8f6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ev-pop-in-b-m52t6zx8f6 {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-overlay[b-m52t6zx8f6],
    .ev-content[b-m52t6zx8f6] {
        animation: none;
    }
}
/* /Components/Shared/Preview/ImagePreviewModal.razor.rz.scp.css */
/* Schermvullende afbeelding-lightbox (port van de IM simple-lightbox-overlay). De donkere scrim en de
   witte sluitknop zijn functionele, thema-onafhankelijke media-overlaykleuren (zoals een video-overlay). */

.ip-overlay[b-p2tujjp48e] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: ip-overlay-in-b-p2tujjp48e 160ms ease-out;
}

.ip-overlay:focus[b-p2tujjp48e] {
    outline: none;
}

.ip-image[b-p2tujjp48e] {
    max-width: 90%;
    max-height: 90%;
    border-radius: .5rem;
    animation: ip-pop-in-b-p2tujjp48e 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-title[b-p2tujjp48e] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    max-width: calc(100% - 9rem);
    height: 2.75rem;
    margin: 0;
    z-index: 1;
    padding: 0 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 2.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ip-actions[b-p2tujjp48e] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    gap: .5rem;
}

.ip-btn[b-p2tujjp48e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
}

.ip-btn:hover[b-p2tujjp48e] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.ip-btn:focus-visible[b-p2tujjp48e] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes ip-overlay-in-b-p2tujjp48e {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ip-pop-in-b-p2tujjp48e {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ip-overlay[b-p2tujjp48e],
    .ip-image[b-p2tujjp48e] {
        animation: none;
    }
}
/* /Components/Shared/Preview/OtherPreviewModal.razor.rz.scp.css */
/* Lightbox-fallback voor niet-toonbare bestanden, niet schermvullend. De scrim en de witte sluitknop/titel zijn
   functionele, thema-onafhankelijke media-overlaykleuren; het paneel zelf volgt het thema (var-tokens). */

.op-overlay[b-48xc7f2ibl] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: op-overlay-in-b-48xc7f2ibl 160ms ease-out;
}

.op-overlay:focus[b-48xc7f2ibl] {
    outline: none;
}

.op-panel[b-48xc7f2ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: min(34rem, 92vw);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1.75rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: .5rem;
    text-align: center;
    cursor: default;
    animation: op-pop-in-b-48xc7f2ibl 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.op-image[b-48xc7f2ibl] {
    max-width: 100%;
    max-height: 60vh;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
}

.op-text[b-48xc7f2ibl] {
    margin: 0;
    color: var(--bs-body-color);
}

.op-title[b-48xc7f2ibl] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    max-width: calc(100% - 6rem);
    height: 2.75rem;
    z-index: 1;
    margin: 0;
    padding: 0 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 2.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-actions[b-48xc7f2ibl] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.op-btn[b-48xc7f2ibl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.op-btn:hover[b-48xc7f2ibl] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.op-btn:focus-visible[b-48xc7f2ibl] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes op-overlay-in-b-48xc7f2ibl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes op-pop-in-b-48xc7f2ibl {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .op-overlay[b-48xc7f2ibl],
    .op-panel[b-48xc7f2ibl] {
        animation: none;
    }
}
/* /Components/Shared/Preview/PdfPreviewModal.razor.rz.scp.css */
/* Schermvullende PDF-lightbox (zelfde taal als de afbeelding-lightbox). De scrim en de witte knoppen/titel zijn
   functionele, thema-onafhankelijke media-overlaykleuren (de chips zweven boven de donkere PDF-viewer-toolbar). */

.pp-overlay[b-c71x24rjv1] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: pp-overlay-in-b-c71x24rjv1 160ms ease-out;
}

.pp-overlay:focus[b-c71x24rjv1] {
    outline: none;
}

.pp-sheet[b-c71x24rjv1] {
    position: relative;
    width: min(90rem, 92vw);
    height: 92vh;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    cursor: default;
    animation: pp-pop-in-b-c71x24rjv1 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-frame[b-c71x24rjv1] {
    width: 100%;
    height: 100%;
    border: 0;
}

.pp-loading[b-c71x24rjv1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bs-secondary-color);
}

.pp-title[b-c71x24rjv1] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    max-width: calc(100% - 6rem);
    height: 2.75rem;
    z-index: 1;
    margin: 0;
    padding: 0 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 2.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-actions[b-c71x24rjv1] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    gap: .5rem;
}

.pp-btn[b-c71x24rjv1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
}

.pp-btn:hover[b-c71x24rjv1] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.pp-btn:focus-visible[b-c71x24rjv1] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes pp-overlay-in-b-c71x24rjv1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pp-pop-in-b-c71x24rjv1 {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-overlay[b-c71x24rjv1],
    .pp-sheet[b-c71x24rjv1] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .pp-sheet[b-c71x24rjv1] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Shared/Preview/PowerPointPreviewModal.razor.rz.scp.css */
/* PowerPoint-lightbox (zelfde taal als de PDF-lightbox): donkere scrim, gecentreerd wit vel met de
   viewer-iframe, witte zwevende titel-pill + sluitknop. De scrim en de witte chips zijn functionele,
   thema-onafhankelijke media-overlaykleuren. */

.pt-overlay[b-80c73j1fx3] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: pt-overlay-in-b-80c73j1fx3 160ms ease-out;
}

.pt-overlay:focus[b-80c73j1fx3] {
    outline: none;
}

.pt-sheet[b-80c73j1fx3] {
    position: relative;
    width: min(90rem, 92vw);
    height: 92vh;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    cursor: default;
    animation: pt-pop-in-b-80c73j1fx3 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pt-frame[b-80c73j1fx3] {
    width: 100%;
    height: 100%;
    border: 0;
}

.pt-loading[b-80c73j1fx3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bs-secondary-color);
}

.pt-actions[b-80c73j1fx3] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.pt-btn[b-80c73j1fx3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.pt-btn:hover[b-80c73j1fx3] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.pt-btn:focus-visible[b-80c73j1fx3] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes pt-overlay-in-b-80c73j1fx3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pt-pop-in-b-80c73j1fx3 {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-overlay[b-80c73j1fx3],
    .pt-sheet[b-80c73j1fx3] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .pt-sheet[b-80c73j1fx3] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Shared/Preview/VideoPreviewModal.razor.rz.scp.css */
/* Video-lightbox (zelfde taal als de afbeelding-lightbox), niet schermvullend. De donkere scrim en de witte
   knop/tekst zijn functionele, thema-onafhankelijke media-overlaykleuren. */

.vp-overlay[b-gio5ywwn09] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: vp-overlay-in-b-gio5ywwn09 160ms ease-out;
}

.vp-overlay:focus[b-gio5ywwn09] {
    outline: none;
}

.vp-content[b-gio5ywwn09] {
    width: min(64rem, 92vw);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    cursor: default;
    animation: vp-pop-in-b-gio5ywwn09 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vp-video[b-gio5ywwn09] {
    display: block;
    width: 100%;
    max-height: 82vh;
    border-radius: .5rem;
    background: #000;
}

.vp-fallback[b-gio5ywwn09] {
    margin: .75rem 0 0;
    text-align: center;
    font-size: .875rem;
    color: rgba(255, 255, 255, .85);
}

.vp-fallback a[b-gio5ywwn09] {
    color: #fff;
    text-decoration: underline;
}

.vp-title[b-gio5ywwn09] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    max-width: calc(100% - 6rem);
    height: 2.75rem;
    z-index: 1;
    margin: 0;
    padding: 0 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 2.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-actions[b-gio5ywwn09] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.vp-btn[b-gio5ywwn09] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.vp-btn:hover[b-gio5ywwn09] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.vp-btn:focus-visible[b-gio5ywwn09] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes vp-overlay-in-b-gio5ywwn09 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vp-pop-in-b-gio5ywwn09 {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-overlay[b-gio5ywwn09],
    .vp-content[b-gio5ywwn09] {
        animation: none;
    }
}
/* /Components/Shared/Preview/WordPreviewModal.razor.rz.scp.css */
/* Word-document-lightbox (zelfde taal als de PDF-lightbox): donkere scrim, gecentreerd wit vel met de
   viewer-iframe, witte zwevende titel-pill + sluitknop. De scrim en de witte chips zijn functionele,
   thema-onafhankelijke media-overlaykleuren. */

.wd-overlay[b-uybr0qvu91] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: var(--ht-z-lightbox);
    cursor: zoom-out;
    animation: wd-overlay-in-b-uybr0qvu91 160ms ease-out;
}

.wd-overlay:focus[b-uybr0qvu91] {
    outline: none;
}

.wd-sheet[b-uybr0qvu91] {
    position: relative;
    width: min(90rem, 92vw);
    height: 92vh;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    cursor: default;
    animation: wd-pop-in-b-uybr0qvu91 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wd-frame[b-uybr0qvu91] {
    width: 100%;
    height: 100%;
    border: 0;
}

.wd-loading[b-uybr0qvu91] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bs-secondary-color);
}

.wd-actions[b-uybr0qvu91] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.wd-btn[b-uybr0qvu91] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.wd-btn:hover[b-uybr0qvu91] {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.wd-btn:focus-visible[b-uybr0qvu91] {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .65);
}

@keyframes wd-overlay-in-b-uybr0qvu91 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wd-pop-in-b-uybr0qvu91 {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wd-overlay[b-uybr0qvu91],
    .wd-sheet[b-uybr0qvu91] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .wd-sheet[b-uybr0qvu91] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}