h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Theme-aware zebra (works with MudTable Striped in light/dark). */
.mud-table.mud-table-striped .mud-table-row:nth-of-type(odd) .mud-table-cell {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%);
}


/* ---------------------------------------------------------------------------
   Logo del marchio.

   Il file e' blu (#124093) su fondo trasparente: su una superficie scura
   sparisce. La pastiglia bianca lo rende leggibile in entrambi i temi senza
   dover mantenere una seconda versione del file, che prima o poi divergerebbe
   dall'originale.
   --------------------------------------------------------------------------- */

.cibus-logo-box {
    display: flex;
    justify-content: center;
    padding: 16px 12px 8px;
}

.cibus-logo-box .cibus-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
}

.cibus-logo-accesso {
    display: flex;
    justify-content: center;
    margin: 40px auto 8px;
}

.cibus-logo-accesso img {
    max-width: 280px;
    width: 60%;
    height: auto;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px 20px;
    box-sizing: border-box;
}

/* Il logo di RETE è quadrato (simbolo + nome + dicitura), non orizzontale
   come quello di Cibus Network: senza un tetto sulla larghezza diventerebbe
   enorme sulle pagine di accesso. */
.cibus-logo-accesso-rete img {
    max-width: 220px;
    width: 42%;
    padding: 16px;
}

/* Menu laterale: logo azienda in cima, voci al centro (scrollabili),
   marchio RETE + versione inchiodati in fondo senza coprire le voci. */
/* Il contenuto del drawer MudBlazor deve riempire l'altezza, altrimenti
   height:100% sul wrapper interno non ha effetto e il piede non resta in fondo. */
.mud-drawer-content:has(> .cibus-drawer-inner) {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.cibus-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.cibus-drawer-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.cibus-rete-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

/* MudBlazor dà a ogni <button> contenuto centrato, maiuscolo e spaziato: qui il
   footer deve restare identico alla versione non cliccabile, allineato a sinistra. */
button.cibus-rete-footer--cliccabile {
    cursor: pointer;
    border-radius: 0;
    justify-content: flex-start;
    min-width: 0;
    margin: 0;
    padding: 10px 14px 14px;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    transition: background-color 0.15s ease;
}

button.cibus-rete-footer--cliccabile .cibus-rete-footer-testo {
    align-items: flex-start;
    text-align: left;
}

button.cibus-rete-footer--cliccabile:hover,
button.cibus-rete-footer--cliccabile:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.cibus-rete-footer-logo {
    flex: 0 0 auto;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 3px;
    line-height: 0;
}

.cibus-rete-footer-logo img {
    display: block;
    width: 28px;
    height: 28px;
}

/* Badge notifiche: MudBlazor lo ancora all'area del MudIconButton, più larga
   dell'icona; lo avviciniamo alla campanella senza tagliarlo né farlo uscire
   dalla AppBar. Il bordo segue lo sfondo della barra (primary), non la surface
   della pagina — così resta corretto su tema chiaro/scuro e sui due temi. */
.mud-badge-root.cibus-notifiche-campanella .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 22px) calc(100% - 22px);
}

.mud-badge-root.cibus-notifiche-campanella .mud-badge.mud-badge-bordered {
    border-color: var(--mud-palette-primary);
}

.cibus-rete-footer-testo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.cibus-rete-footer-nome {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.cibus-rete-footer-versione {
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled);
}


/* ---------------------------------------------------------------------------
   Stampa delle finestre di statistiche.

   Quando si stampa: via la barra in alto, il menu laterale, i pulsanti, i campi
   di ricerca e i selettori; via i grafici. Restano le tabelle per intero, su
   fondo bianco con testo nero anche nel tema scuro.
   --------------------------------------------------------------------------- */
@media print {
    /* Fondo bianco e testo nero anche nel tema scuro: è il difetto più facile
       da non vedere, chi lavora col tema scuro stampa un foglio nero. */
    *,
    *::before,
    *::after {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #000000 !important;
    }

    /* Barra in alto e menu laterale: sulla carta non servono e mangiano spazio. */
    .mud-appbar,
    .mud-drawer {
        display: none !important;
    }

    /* Il contenuto non deve più riservare lo spazio della barra fissa né del
       menu laterale (MudBlazor lascia margin-left anche con drawer nascosto).
       I padding orizzontali della pagina (px-4) li dà già la stampante. */
    .mud-main-content {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Pulsanti, campi di ricerca e selettori: via dalla carta. I campi di ricerca
       portano la classe «cibus-stampa-nascondi»; i selettori MudBlazor si
       riconoscono dalle loro classi. Il pulsante di stampa non deve comparire
       nella stampa stessa. */
    .mud-button,
    .mud-icon-button,
    .mud-select,
    .mud-checkbox,
    .mud-switch,
    .mud-tabs-toolbar,
    .cibus-stampa-nascondi,
    .cibus-stampa-pulsante {
        display: none !important;
    }

    /* Solo a schermo: in stampa resterebbe il titolo senza contenuto (es. i grafici,
       che in stampa non si disegnano). */
    .cibus-solo-schermo {
        display: none !important;
    }

    /* I grafici non vanno in stampa: tagliati o vuoti, e servono meno su carta. */
    .mud-chart {
        display: none !important;
    }

    /* Le tabelle per intero: niente barre di scorrimento e niente colonne
       tagliate a destra. Il testo va a capo e la tabella si adatta al foglio. */
    div[style*="overflow-x"],
    .mud-table-container {
        overflow: visible !important;
    }

    .mud-table table {
        /* Larghezza al foglio; le colonne prendono lo spazio che serve (niente fixed). */
        width: 100% !important;
    }

    .mud-table-cell {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Intestazione ripetuta su ogni pagina e righe che non si spezzano a metà. */
    thead {
        display: table-header-group;
    }

    tr {
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Pannello profilo (AppBar) e pagina Impostazioni.
   --------------------------------------------------------------------------- */

.profilo-pannello-dropdown {
    width: min(22rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.profilo-pannello-lista {
    max-width: 100%;
}

.profilo-pannello-testata {
    max-width: 100%;
}

.profilo-pannello-nome,
.profilo-pannello-email {
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.profilo-pannello-email {
    -webkit-line-clamp: 2;
}

.profilo-pannello-esci {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem 0.75rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.profilo-pannello-esci:hover {
    background: var(--mud-palette-action-default-hover);
}

.impostazioni-tema-scheda {
    cursor: pointer;
    border-color: var(--mud-palette-lines-default);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.impostazioni-tema-scheda:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.impostazioni-tema-scheda--attiva {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.impostazioni-swatch {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Editor Quill dei modelli email.

   quill.snow.css è fatto per uno sfondo chiaro. Col tema scuro il testo
   ereditato diventa chiaro e il foglio resta bianco: non si legge più.
   Il foglio di terze parti non si modifica (un aggiornamento lo riscriverebbe)
   e viene iniettato dopo app.css, quindi queste regole stanno sotto
   .cibus-quill-email per vincere comunque sulla specificità.

   Solo a video, nell'editor: non entrano nell'HTML che si salva e si spedisce.
   --------------------------------------------------------------------------- */

.cibus-quill-email .ql-toolbar.ql-snow,
.cibus-quill-email .ql-container.ql-snow {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.cibus-quill-email .ql-container.ql-snow {
    min-height: 220px;
    height: auto;
    border-top-width: 0;
}

.cibus-quill-email .ql-editor {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    min-height: 196px;
}

.cibus-quill-email .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary);
}

.cibus-quill-email .ql-snow .ql-stroke,
.cibus-quill-email .ql-snow .ql-stroke-miter {
    stroke: var(--mud-palette-text-primary);
}

.cibus-quill-email .ql-snow .ql-fill,
.cibus-quill-email .ql-snow .ql-stroke.ql-fill {
    fill: var(--mud-palette-text-primary);
}

.cibus-quill-email .ql-toolbar.ql-snow button:hover,
.cibus-quill-email .ql-toolbar.ql-snow button:focus,
.cibus-quill-email .ql-toolbar.ql-snow button.ql-active,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label:hover,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label.ql-active,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item:hover,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: var(--mud-palette-primary);
}

.cibus-quill-email .ql-toolbar.ql-snow button:hover .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow button:focus .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-stroke,
.cibus-quill-email .ql-toolbar.ql-snow button:hover .ql-stroke-miter,
.cibus-quill-email .ql-toolbar.ql-snow button:focus .ql-stroke-miter,
.cibus-quill-email .ql-toolbar.ql-snow button.ql-active .ql-stroke-miter,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke-miter,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke-miter,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke-miter,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: var(--mud-palette-primary);
}

.cibus-quill-email .ql-toolbar.ql-snow button:hover .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow button:focus .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow button.ql-active .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item:hover .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow button:hover .ql-stroke.ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow button:focus .ql-stroke.ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow button.ql-active .ql-stroke.ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke.ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke.ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke.ql-fill,
.cibus-quill-email .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: var(--mud-palette-primary);
}

@media (pointer: coarse) {
    .cibus-quill-email .ql-toolbar.ql-snow button:hover:not(.ql-active),
    .cibus-quill-email .ql-toolbar.ql-snow button:hover:not(.ql-active) .ql-fill,
    .cibus-quill-email .ql-toolbar.ql-snow button:hover:not(.ql-active) .ql-stroke.ql-fill {
        color: var(--mud-palette-text-primary);
        fill: var(--mud-palette-text-primary);
    }

    .cibus-quill-email .ql-toolbar.ql-snow button:hover:not(.ql-active) .ql-stroke,
    .cibus-quill-email .ql-toolbar.ql-snow button:hover:not(.ql-active) .ql-stroke-miter {
        stroke: var(--mud-palette-text-primary);
    }
}

/* Tendine della barra (colore, e dimensione del testo se presente):
   hanno un fondo proprio, bianco nel foglio di Quill. I campioni di colore
   tengono il loro fondo, altrimenti non si distinguono più. */
.cibus-quill-email .ql-snow .ql-picker {
    color: var(--mud-palette-text-primary);
}

.cibus-quill-email .ql-snow .ql-picker-options {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.cibus-quill-email .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
}

.cibus-quill-email .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: var(--mud-palette-text-secondary);
}

.cibus-quill-email .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: var(--mud-palette-text-secondary);
}

.cibus-quill-email .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--mud-palette-lines-default);
}

.cibus-quill-email .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.cibus-quill-email .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
    border-color: var(--mud-palette-text-primary);
}

/* Il marcatore ha un fondo celeste fisso: col testo chiaro del tema scuro sparisce.
   Vale solo nel foglio; la classe salvata nel modello non cambia. */
.cibus-quill-email .ql-editor .cn-marcatore {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-info) 22%, var(--mud-palette-surface));
    border-color: var(--mud-palette-info);
}

/* ---------------------------------------------------------------------------
   Tabelle larghe: si scorre con la barra del BROWSER, non con barre nostre.

   Storia, perché non si torni indietro senza saperlo:
   - mod_6 (29 settembre 2026): sul portatile, per scorrere a destra un elenco
     lungo bisognava arrivare in fondo alla pagina, dove stava la barra. Si era
     fatta scorrere ogni tabella dentro di sé (alta quanto lo schermo, con le sue
     barre).
   - 4 ottobre 2026: peggio di prima. La barra orizzontale stava in fondo alla
     TABELLA: si scendeva, si spostava, si risaliva a cercare il cliente. Il
     committente ha chiesto la barra orizzontale del browser, che sta sempre in
     fondo alla finestra.

   Quindi nelle pagine: la tabella è larga quanto serve e la PAGINA scorre in
   orizzontale. Di serie MudBlazor dà a ogni tabella overflow-x:auto (una barra
   propria): qui si toglie, e si neutralizzano anche i contenitori con
   overflow-x scritti nelle pagine. L'intestazione resta ferma sotto la barra in
   alto mentre si scorre in verticale (sticky rispetto alla finestra: funziona
   solo perché nessun contenitore sopra la tabella ha più un suo scorrimento).

   Nelle finestre di dialogo resta com'era: lì sotto non c'è una pagina che
   possa scorrere, e una tabella larga deve scorrere dentro la finestra.
   --------------------------------------------------------------------------- */
@media screen {
    .mud-main-content .mud-table-container,
    .mud-main-content div[style*="overflow-x"] {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Gli importi non vanno a capo: «6.509,25» sopra e «€» sotto, o «0,00» e «%», visti
       nelle foto a 1280 px del 4 ottobre 2026. Le colonne dei numeri sono, per convenzione
       in tutto il programma, quelle allineate a destra: la regola vale solo per loro, così
       i nomi lunghi possono ancora andare a capo e la tabella non si allarga a dismisura. */
    .mud-main-content td[style*="text-align:right"],
    .mud-main-content td[style*="text-align: right"],
    .mud-main-content th[style*="text-align:right"],
    .mud-main-content th[style*="text-align: right"] {
        white-space: nowrap;
    }

    /* Una tabella più larga del suo riquadro sborda (è voluto: scorre la pagina). Il fondo
       però deve seguirla, altrimenti le righe in eccesso restano sul grigio della pagina. */
    .mud-main-content .mud-table-root {
        background-color: var(--mud-palette-surface);
    }

    .mud-main-content .mud-table-head .mud-table-cell {
        position: sticky;
        top: var(--mud-appbar-height);
        z-index: 2;
        background-color: var(--mud-palette-surface);
    }

    /* Colonne ferme a sinistra (la matrice Clienti × Retiste): ora che scorre la pagina,
       left:0 è il bordo della FINESTRA, cioè sotto il menu laterale. Col menu aperto la
       colonna si ferma accanto al menu. L'angolo (intestazione) sta sopra a entrambe. */
    .mud-drawer-open-responsive-md-left .mud-main-content .matrice-tabella .matrice-sticky {
        left: var(--mud-drawer-width-left);
    }

    .mud-main-content .matrice-tabella thead .matrice-sticky {
        z-index: 3;
    }

    .mud-dialog .mud-table-container,
    .mud-dialog div[style*="overflow-x"] {
        overflow-x: auto !important;
    }

    .mud-dialog .mud-table-head .mud-table-cell {
        position: static;
    }
}