/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* De lay-out zelf komt van MudLayout, MudAppBar en MudDrawer. Wat hier stond
   — .page, .sidebar met zijn gradient, .top-row, main — hoorde bij de
   Blazor-startpagina en is met de MudDrawer vervallen.

   Wat overblijft is de foutbalk onderaan het scherm. Die staat in App.razor
   buiten MudLayout om, want hij moet ook werken wanneer de SignalR-verbinding
   weg is en er dus geen component meer rendert. Daarom houdt hij een eigen
   kleur en een eigen color-scheme. */

#blazor-error-ui[b-76jf39fl3w] {
    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-76jf39fl3w] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Wat hier stond — .navbar-toggler, .nav-scrollable, de witte Bootstrap-iconen
   als data-URI en de .nav-link-kleuren voor een donkere sidebar — hoorde bij de
   navigatie van het Blazor-startproject. MudNavMenu rendert andere elementen
   met andere klassen, dus geen enkele van die regels raakte nog iets.

   De regels hieronder gaan wel over deze lade. Ze staan hier en niet in app.css
   omdat ze alleen binnen dit component gelden. */

/* Kopje boven een groep menu-items: "Dagelijks", "Stamdata", "Account". */
.nav-kop[b-65xisa7s6q] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 1rem 1rem .3rem;
}

/* Het aantal concepten of openstaande posten: een zacht getal, geen badge.
   Het is context bij de naam en hoort niet met de naam om aandacht te vechten.

   margin-left en padding-left staan er samen met opzet. Lukt het uitlijnen
   rechts hieronder, dan duwt de margin het getal naar de rechterkant; lukt het
   niet omdat MudBlazor zijn interne klassen ooit anders noemt, dan valt de
   margin weg en houdt de padding het getal alsnog los van de naam. Dat is nu
   een vangnet voor een toekomstige MudBlazor-versie en niet meer voor deze —
   zie de regel onderaan — maar het blijft staan: het kost één eigenschap en de
   klassenaam is niet de onze. */
.nav-aantal[b-65xisa7s6q] {
    margin-left: auto;
    padding-left: .5rem;
    font-family: "DM Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .72rem;
    color: var(--mud-palette-text-disabled);
}

/* De tekstregel van een menu-item wordt een flexrij, zodat het getal rechts
   kan uitlijnen. ::deep is nodig omdat dit element door MudNavLink wordt
   gerenderd en niet door dit component.

   De klassenaam is nagekeken in MudBlazor 9.10.0 en klopt. Spec §9.1 zette hem
   als onzeker op omdat hij uit het geheugen was opgeschreven; hij staat
   werkelijk in het pakket, zowel als tekst in MudBlazor.dll als in
   MudBlazor.min.css:

       .mud-nav-link .mud-nav-link-text { width:100%; text-align:start;
                                          margin-left:12px; letter-spacing:0 }

   MudBlazor zet daar dus zelf al `width: 100%` op; wat deze regel toevoegt is
   `display: flex`, en dat is precies wat `margin-left: auto` op .nav-aantal
   nodig heeft. Specificiteit: onze selector wordt na de CSS-isolatie
   `.nav-wrap[b-…] .mud-nav-link-text` (0,2,1) en die van MudBlazor is (0,2,0),
   dus deze wint. */
.nav-wrap[b-65xisa7s6q]  .mud-nav-link-text {
    display: flex;
    align-items: center;
    width: 100%;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-j9mafhc19e],
.components-reconnect-repeated-attempt-visible[b-j9mafhc19e],
.components-reconnect-failed-visible[b-j9mafhc19e],
.components-pause-visible[b-j9mafhc19e],
.components-resume-failed-visible[b-j9mafhc19e],
.components-rejoining-animation[b-j9mafhc19e] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-j9mafhc19e {
    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;
    }
}