/*
 * Feuille de style globale. Le thème MudBlazor (couleurs, rayon, typographie : Shared/Theme/ApplicationTheme.cs) et les
 * classes utilitaires MudBlazor font tout le reste : n'ajouter ici que ce qui n'existe pas dans MudBlazor.
 */

/* Écran de chargement affiché pendant le téléchargement de l'application WebAssembly (index.html). */
#loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
}

    #loading-screen img {
        width: auto;
        height: 120px;
        animation: loading-pulse 1.5s infinite ease-in-out;
    }

    #loading-screen #blazor-load-percentage-text {
        margin-top: 12px;
        font: 400 1rem "72", Arial, Helvetica, sans-serif;
        color: #0a6ed1;
    }

    #loading-screen .blazor-progress {
        width: min(280px, 80vw);
        height: 8px;
        margin-top: 10px;
        background: #d9d9d9;
        border-radius: 999px;
        overflow: hidden;
    }

    #loading-screen .blazor-progress-bar {
        width: 0%;
        height: 100%;
        background: #0a6ed1;
        border-radius: 999px;
        transition: width 0.1s linear;
    }

@keyframes loading-pulse {
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* Barres de défilement en harmonie avec la barre du haut : curseur de la couleur de la barre d'application ; rail gris du thème.
   scrollbar-color est hérité : une seule déclaration sur <html> couvre la page, le menu, les grilles et les listes (le style de
   barre de défilement de MudBlazor est désactivé : DefaultScrollbar="true" dans AppProviders). En mode sombre, ces couleurs
   foncées se confondraient avec le fond : on prend alors la couleur des bordures de champ, sauf pour Quartz dont la barre
   (#354A5F) reste visible. */
/* scrollbar-width n'est pas hérité (contrairement à scrollbar-color) : il faut le poser sur chaque élément. */
* {
    scrollbar-width: thin;
}

html {
    scrollbar-color: var(--mud-palette-appbar-background) var(--mud-palette-background-gray);
}

html.app-dark.theme-synapp,
html.app-dark.theme-successrh,
html.app-dark.theme-belize {
    scrollbar-color: var(--mud-palette-lines-inputs) var(--mud-palette-background-gray);
}

/* Menu classique : barre de défilement très mince (4 px, contre ≈ 10 px pour « thin »), sans rail, aux mêmes couleurs que ci-dessus.
   Chrome et Safari n'ajustent la largeur que par ::-webkit-scrollbar, qu'ils ignorent tant que scrollbar-width ou scrollbar-color
   est défini : ils sont donc remis à « auto » sur le menu. Firefox (sans ::-webkit-scrollbar) garde « thin », son minimum. */
@supports selector(::-webkit-scrollbar) {
    .mud-drawer.nav-drawer {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    .mud-drawer.nav-drawer::-webkit-scrollbar {
        width: 4px;
    }

    .mud-drawer.nav-drawer::-webkit-scrollbar-track {
        background: transparent;
    }

    .mud-drawer.nav-drawer::-webkit-scrollbar-thumb {
        background-color: var(--mud-palette-appbar-background);
        border-radius: 2px;
    }

    html.app-dark.theme-synapp .mud-drawer.nav-drawer::-webkit-scrollbar-thumb,
    html.app-dark.theme-successrh .mud-drawer.nav-drawer::-webkit-scrollbar-thumb,
    html.app-dark.theme-belize .mud-drawer.nav-drawer::-webkit-scrollbar-thumb {
        background-color: var(--mud-palette-lines-inputs);
    }
}

/* Défilement. Sous la barre d'application, ni le document ni la zone de contenu ne défilent : la page occupe la hauteur utile
   (conteneur shell-page des layouts). Une page à liste (syn-page-fill) ne défile jamais : sa grille, sa liste ou ses onglets
   prennent le reste de la hauteur et défilent seuls. Seule une page de formulaire long défile, dans son conteneur. Les pages
   sans barre (connexion, choix de société) gardent le défilement normal du document. */
html:has(.mud-appbar),
html:has(.mud-appbar) body {
    overflow: hidden;
}

.mud-layout:has(> .mud-appbar) > .mud-main-content {
    height: calc(100dvh - var(--mud-appbar-height));
    margin-top: var(--mud-appbar-height);
    padding-top: 0 !important;
    overflow: hidden;
}

/* Hauteur nominale de la barre à toute largeur : MudBlazor la réduit sous 600 px (d'un huitième, d'un quart en paysage) alors
   que la zone de contenu garde la hauteur nominale en marge haute, ce qui laissait un espace entre la barre et la page (et
   les onglets du Launchpad). */
html .mud-appbar .mud-toolbar-appbar {
    height: var(--mud-appbar-height);
}

.shell-page {
    height: 100%;
    overflow-y: auto;
}

/* Launchpad avec onglets (voir LaunchpadMenu.razor.css) : les onglets touchent la barre d'application, dont l'ombre ne les
   sépare pas. */
.mud-layout:has(.launchpad-sections) > .mud-appbar {
    box-shadow: none;
}

/* Page à liste : hauteur utile exacte, éléments empilés ; le dernier (grille, liste, onglets ou syn-fill) prend le reste. */
.syn-page-fill {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.syn-fill {
    flex: 1 1 0;
    min-height: 0;
}

/* Volet à deux panneaux (MudSplitPanel) : la zone de saisie du séparateur (::before, inset: -12px) dépasse de 12 px le haut et le bas du
   volet. Dans des onglets (syn-tabs-fill) ou une page qui défilent, ce débordement ajoute une barre de défilement sur toute la hauteur,
   en plus de celle du panneau de détail. La zone garde sa largeur de 28 px mais ne dépasse plus du volet en hauteur (en largeur pour un
   volet horizontal). */
.mud-split-panel .divider:not(.horizontal)::before {
    inset: 0 -12px;
}

.mud-split-panel .divider.horizontal::before {
    inset: -12px 0;
}

/* Champ de recherche d'une barre de liste (SynActionToolBar) : la racine du champ prend la place libre jusqu'à 360 px. Un max-width
   posé par Style ne limiterait que la zone de saisie : la racine continuerait de grandir et laisserait un vide avant les filtres. */
.syn-toolbar-search {
    flex: 1 1 0;
    min-width: 200px;
    max-width: 360px;
}

@media (max-width: 600px) {
    .syn-toolbar-search {
        flex-basis: 100%;
        max-width: none;
    }
}

/* Grille qui remplit son conteneur (SynDataGrid, ou classe syn-grid-fill) : en-tête fixe, seules les lignes défilent, le pager
   reste en bas. Hors d'un conteneur à hauteur bornée, elle prend simplement la hauteur de ses lignes. */
.mud-table.syn-grid-fill {
    flex: 1 1 0;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
}

.mud-table.syn-grid-fill > .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
}

/* Colonne collante des grilles (les actions d'une ligne) : MudBlazor la peint en gris (fond de page), ce qui la détache du tableau. Elle prend le
   fond du tableau (la couleur de surface) et celui du survol d'une ligne ; le fond reste opaque pour cacher les cellules qui défilent dessous
   (le survol est superposé à la surface par un dégradé uni, au cas où sa couleur serait translucide). */
.mud-data-grid .mud-table-cell.sticky-right,
.mud-data-grid .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-surface) !important; /* MudBlazor la peint avec des sélecteurs plus précis, jusque dans l'en-tête */
}

/* Dans l'en-tête, la colonne collante garde le fond gris des autres en-têtes (sinon une case blanche coupe la barre de titres). */
.mud-data-grid .mud-table-head .mud-table-cell.sticky-right,
.mud-data-grid .mud-table-head .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-background-gray) !important;
}

@media (hover: hover) and (pointer: fine) {
    .mud-data-grid.mud-table-hover .mud-table-body .mud-table-row:hover > .mud-table-cell.sticky-right,
    .mud-data-grid.mud-table-hover .mud-table-body .mud-table-row:hover > .mud-table-cell.sticky-left {
        background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
    }
}

/* Pager des grilles : il ne défile jamais. MudBlazor lui donne overflow: auto, ce qui l'autorise à rétrécir sous sa hauteur dans
   une grille flex (fenêtre peu haute : quelques pixels en moins et une barre de défilement verticale) ; il garde sa hauteur et,
   si la place manque en largeur, ses éléments passent à la ligne (flex-wrap de la barre). */
.mud-table-pagination {
    flex: none;
    overflow: visible;
}

/* Onglets qui remplissent leur conteneur (syn-tabs-fill) : la barre d'onglets reste visible, seul le contenu de l'onglet actif
   défile ; une grille posée dans l'onglet en prend toute la hauteur. MudBlazor rend l'onglet actif en display: contents : son
   contenu est directement empilé dans .mud-tabs-panels, qui porte le défilement. Onglets verticaux : la barre reste à gauche. */
.mud-tabs.syn-tabs-fill {
    flex: 1 1 0;
    min-height: 0;
}

.mud-tabs.syn-tabs-fill:not(.mud-tabs-vertical) {
    display: flex;
    flex-direction: column;
}

.mud-tabs.syn-tabs-fill > .mud-tabs-panels {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Cartes, panneaux et volets (MudPaper outlined) : bordure fine d'un pixel, coins francs, sans ombre, dans tous les thèmes. C'est le cadre des
   grilles de données de MudBlazor (tableaux outlined, laissés tels quels) : un panneau posé à côté d'une grille a le même cadre. */
.mud-paper-outlined {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.25rem;
    box-shadow: none;
}

/* Mode d'affichage « Normal » (poste de travail) : tout ce qui est en rem (police, icônes, tuiles, champs) est réduit de 12,5 %.
   Le mode « Tablette » (tactile) garde la taille de base. */
html.density-normal {
    font-size: 87.5%;
}

/* Thème Synapp : forme de Belize (règles communes ci-dessus et dans LaunchpadTile.razor.css), seules les couleurs lui sont propres :
   barre du haut sarcelle profond au-dessus d'un menu latéral clair (couleurs de la palette, comme Belize). L'accent citron vert
   (« lime » du nuancier) marque l'élément actif sur le fond sombre de la barre (avatar de l'utilisateur) : il n'est pas dans
   la palette MudBlazor, dont le Tertiary clair doit rester lisible sur papier. */
html.theme-synapp {
    --synapp-accent: #A3D131;      /* lime      oklch(0.80 0.185 125) */
    --synapp-teal: #07617C;        /* teal      oklch(0.46 0.085 225) */
    --synapp-teal-deep: #002B3B;   /* teal-deep oklch(0.27 0.055 228) */
}

/* Bandeau d'accueil (mud-theme-secondary) : dégradé sarcelle profond → sarcelle, texte papier. */
html.theme-synapp .mud-theme-secondary {
    background: linear-gradient(120deg, var(--synapp-teal-deep) 0%, var(--synapp-teal) 100%) !important;
    color: var(--mud-palette-appbar-text) !important;
}

/* Avatar de l'utilisateur dans la barre : le sarcelle de marque s'y confondrait, l'accent ressort. */
html.theme-synapp .mud-appbar .mud-avatar-filled-primary {
    background-color: var(--synapp-accent);
    color: var(--synapp-teal-deep);
}

/* Thème SuccessRH : forme de Quartz, couleurs du logo (palette dans ApplicationTheme.cs : marine #082D5E, orange #E85D00). Le
   marine reste la couleur principale du texte, des liens et des champs, et l'orange est l'accent de marque — actions principales
   (boutons pleins, texte blanc), onglet et lien de menu actifs, barres de progression, avatar de l'utilisateur, onglet actif du
   Launchpad (LaunchpadMenu.razor.css) —, comme le citron vert de Synapp. */
html.theme-successrh {
    --successrh-accent: #E85D00;       /* orange du logo */
    --successrh-accent-hover: #C94F00; /* orange assombri : survol des actions principales */
    --successrh-navy: #082D5E;         /* marine du logo */
    --successrh-navy-deep: #051E40;    /* marine assombri : départ du dégradé */
    --syn-accent: var(--successrh-accent);     /* accent du thème : lien de menu actif et onglet actif (voir « Menu classique » plus bas) */
}

/* Actions principales : bouton plein orange, texte blanc. */
html.theme-successrh .mud-button-filled-primary {
    background-color: var(--successrh-accent);
    color: #FFFFFF;
    --mud-ripple-color: #FFFFFF;
}

html.theme-successrh .mud-button-filled-primary:hover:not(:disabled) {
    background-color: var(--successrh-accent-hover);
}

/* Onglet actif (MudTabs, onglets des paramètres et des fiches) : le trait est orange (couleur de l'accent, voir « Onglets » plus bas)
   et un peu plus épais que celui de MudBlazor. */
html.theme-successrh .mud-tab-slider.mud-tab-slider-horizontal {
    height: 3px;
}

/* Contenu des onglets : fond blanc (couleur de surface : blanc en clair, bleu nuit en sombre) comme la barre d'onglets, au lieu
   du gris bleuté de la page. Les onglets du Launchpad restent sur le dégradé de l'accueil. */
html.theme-successrh .mud-tabs-panels {
    background-color: var(--mud-palette-surface);
}

html.theme-successrh .launchpad-sections .mud-tabs-panels {
    background-color: transparent;
}

/* Barres de progression principales (chargement, complétude…) : orange. */
html.theme-successrh .mud-progress-linear-color-primary:not(.mud-progress-linear-buffer)::before,
html.theme-successrh .mud-progress-linear-color-primary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--successrh-accent);
}

/* Bandeau d'accueil (mud-theme-secondary) : dégradé marine profond → marine du logo, texte de la barre. */
html.theme-successrh .mud-theme-secondary {
    background: linear-gradient(120deg, var(--successrh-navy-deep) 0%, var(--successrh-navy) 100%) !important;
    color: var(--mud-palette-appbar-text) !important;
}

/* Avatar de l'utilisateur dans la barre : le marine de marque s'y confondrait, l'orange ressort. */
html.theme-successrh .mud-appbar .mud-avatar-filled-primary {
    background-color: var(--successrh-accent);
    color: var(--successrh-navy);
}

/* En-tête d'un panneau latéral de la coquille (tâches en arrière-plan) : même hauteur et mêmes couleurs que la barre
   d'application, dont il prolonge le bandeau. */
.mud-drawer-header.shell-panel-header {
    height: var(--mud-appbar-height);
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

/* Bandeau d'en-tête d'une fenêtre plein écran (éditeur de modèle d'impression) : même hauteur et mêmes couleurs que la barre
   d'application. Les boutons y prennent la couleur du texte de la barre (Color.Inherit). */
.shell-bar {
    min-height: var(--mud-appbar-height);
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-appbar-text) !important;
}

/* Barre d'outils : la hauteur de la barre d'application remplace celle de MudToolBar (64 px), y compris avec WrapContent. */
html .mud-toolbar.shell-bar {
    height: auto;
    min-height: var(--mud-appbar-height);
}

.mud-dialog .mud-dialog-title.shell-bar {
    display: flex;
    align-items: center;
    height: var(--mud-appbar-height);
    padding: 0 8px 0 16px;
}

/* Fenêtre plein écran dont le contenu gère lui-même sa hauteur (éditeur de modèle) : pas de marge ni de défilement du contenu de
   la fenêtre, seuls ses onglets ou panneaux défilent. */
.mud-dialog .mud-dialog-content.shell-dialog-fill {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Actions d'une fenêtre (Annuler, Enregistrer…) : séparées du contenu par un trait de 2 px. */
.mud-dialog .mud-dialog-actions {
    border-top: 2px solid var(--mud-palette-lines-default);
}

/* Accent du thème (--syn-accent) : la couleur de ce qui est actif — entrée du menu classique, onglet. C'est la couleur principale de
   la palette (Quartz, Belize, Synapp, clair et sombre) ; SuccessRH le redéfinit en orange (--successrh-accent) alors que sa couleur
   principale est le marine. */
html {
    --syn-accent: var(--mud-palette-primary);
}

/* Onglets (MudTabs, dans toute l'application) : l'onglet actif est en gras, de la même couleur que son trait — texte et icône —, et son
   survol est teinté de cette couleur. « html » et « .mud-tabs » : plus spécifique que les règles de MudBlazor (couleur principale).
   Les onglets du Launchpad gardent leur propre accent (LaunchpadMenu.razor.css). */
html .mud-tabs .mud-tab-slider {
    background: var(--syn-accent);
}

html .mud-tabs .mud-tab.mud-tab-active:not(.mud-disabled) {
    color: var(--syn-accent);
    font-weight: 700;
}

html .mud-tabs .mud-tab.mud-tab-active:not(.mud-disabled):hover {
    background-color: color-mix(in srgb, var(--syn-accent) 8%, transparent);
}

/* Menu classique : l'entrée active a une seule couleur — l'accent du thème (--syn-accent) — pour son texte, son icône, son fond
   teinté et le filet plein à gauche. Le filet occupe la place qu'il réserve en transparent sur les autres entrées (4 px) : rien ne
   bouge au changement de page. Le filet à droite de MudBlazor est supprimé. */

.mud-drawer .mud-nav-link {
    border-inline-start: 4px solid transparent;
    border-inline-end: 0 none;
}

/* « html » et « .mud-navmenu » : plus spécifique que les règles de MudBlazor (texte et fond de la couleur principale). */
html .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--syn-accent);
    background-color: color-mix(in srgb, var(--syn-accent) 8%, transparent);
    border-inline-start-color: var(--syn-accent);
    border-inline-end: 0 none;
}

html .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--syn-accent);
}

/* Entrées du menu classique (lien seul, groupe entier, intitulé de section, NavigationMenu) : filet de 3 px de la couleur de leur
   module (gris pour le core, rouge foncé pour le super administrateur), posé sur le conteneur de l'entrée, à gauche du filet de
   l'entrée active (porté par le lien lui-même). */
.mud-drawer .syn-module-line {
    border-inline-start: 3px solid var(--syn-module-color, transparent);
}

/* Champs de saisie compacts (par défaut) : le remplissage des champs « outlined » passe à celui du mode dense de MudBlazor, sans
   avoir à poser Margin="Margin.Dense" sur chaque champ. Réglage utilisateur « Taille des champs » : la classe fields-standard de
   <html> (scripts/app-helpers.js) rétablit la hauteur d'origine. */
html:not(.fields-standard) .mud-input > input.mud-input-root-outlined:not(.mud-input-root-margin-dense),
html:not(.fields-standard) div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-margin-dense) {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}

html:not(.fields-standard) .mud-input > textarea.mud-input-root-outlined:not(.mud-input-root-margin-dense) {
    margin-top: 0;
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}

html:not(.fields-standard) .mud-input-control.mud-input-outlined-with-label:not(.mud-input-control-margin-dense) {
    margin-top: 8px;
    margin-bottom: 4px;
}

/* Champs d'une barre de liste (SynActionToolBar) : la recherche et les filtres ont les mêmes marges au-dessus et au-dessous (6 px).
   Un champ à libellé flottant réserve 8 px au-dessus et 4 px au-dessous (règle ci-dessus) : il se retrouvait 2 px plus bas que la
   recherche, les boutons et la bascule, tous centrés sur la barre. Après la règle ci-dessus, pour la même spécificité. */
.syn-toolbar-search,
html:not(.fields-standard) .syn-toolbar-filters .mud-input-control.mud-input-outlined-with-label {
    margin-top: 6px;
    margin-bottom: 6px;
}

/* Le libellé flottant d'un champ vide doit rester centré dans le champ réduit (valeur du mode dense de MudBlazor ; une fois
   réduit au-dessus du champ, c'est la règle d'origine, plus spécifique, qui s'applique). */
html:not(.fields-standard) .mud-input-label-outlined:not(.mud-input-label-margin-dense) {
    transform: translate(14px, 12px) scale(1);
}

/* En-tête de tableau façon Fiori : fond gris clair, texte en gras. Une grille à en-tête fixe (FixedHeader) reçoit de MudBlazor un sélecteur plus
   précis qui repeint ses en-têtes en blanc : seule la colonne collante (les actions) restait grise. Le même sélecteur, chargé après, les garde gris. */
.mud-table-head .mud-table-cell,
.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    font-weight: 700;
}

/* Mobile : pas de « tirer pour rafraîchir » (voir scripts/mobile-refresh-guard.js). */
html.mobile-no-refresh,
body.mobile-no-refresh {
    overscroll-behavior-y: none;
    overflow-y: auto;
}

/* Erreurs non gérées (modèle Blazor). */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }