h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--si-success);
}

.invalid {
    outline: 1px solid var(--si-danger);
}

.validation-message {
    color: var(--si-danger);
}

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

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

.avatar-image div.rz-fileupload-content img {
    border-radius: 50%;
}

.avatar-image-holder {
    width: 64px;
    height: 64px;

    img {
        border-radius: 50%;
    }
}

span .rz-fileupload-choose {
    padding: 10px;
    font-size: 14px;
    border-radius: var(--rz-button-border-radius)
}

.new-notification {
    font-weight: bold;
}

.rz-grid-table tr.expired td .rz-cell-data {
    color: var(--si-danger);
    opacity: 0.75;
}

.rz-grid-table tr.expiring-soon td .rz-cell-data {
    color: var(--si-warning);
}

.rz-grid-table tr.disabled td .rz-cell-data {
    color: var(--si-faint);
}

.rz-grid-table tr.is-primary td .rz-cell-data {
    font-weight: 600;
}

.rz-grid-table tr.flow-active td {
    background-color: var(--rz-success-lighter) !important;
}

.rz-grid-table tr.flow-stopped td {
    background-color: var(--rz-danger-lighter) !important;
}

.rz-grid-table tr.flow-draft td {
    background-color: var(--si-sunken) !important;
}

.rz-grid-table td .is-limited {
    font-weight: 600;
    color: var(--si-danger);
}

.rz-grid-table td .rate-warning,
.rz-grid-table td .rate-attention,
.analytics-page .rate-warning,
.analytics-page .rate-attention {
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.rz-grid-table td .rate-warning,
.analytics-page .rate-warning {
    color: var(--si-warning);
    background-color: var(--si-warning-tint);
}

.rz-grid-table td .rate-attention,
.analytics-page .rate-attention {
    color: var(--si-danger);
    background-color: var(--si-danger-tint);
}

.rz-grid-table td .rate-too-few {
    color: var(--si-faint);
}

/* Locations map: health bands, an intensity shade (--map-intensity, 0-1) and grey for areas without a value. The faintest shade
   (--map-shade-min) stays visibly apart from the grey. */

:root {
    --map-shade-min: 15%;
}

.map-fill-fine {
    fill: color-mix(in srgb, var(--si-success) 60%, var(--si-surface));
    background-color: color-mix(in srgb, var(--si-success) 60%, var(--si-surface));
}

.map-fill-warning {
    fill: color-mix(in srgb, var(--si-warning) 55%, var(--si-surface));
    background-color: color-mix(in srgb, var(--si-warning) 55%, var(--si-surface));
}

.map-fill-attention {
    fill: color-mix(in srgb, var(--si-danger) 70%, var(--si-surface));
    background-color: color-mix(in srgb, var(--si-danger) 70%, var(--si-surface));
}

.map-fill-scale {
    fill: color-mix(in srgb, var(--si-primary) calc(var(--map-shade-min) + (100% - var(--map-shade-min)) * var(--map-intensity, 1)),
        var(--si-primary-tint));
}

.map-fill-none {
    fill: var(--si-bubble);
    background-color: var(--si-bubble);
}

.map-ramp {
    background: linear-gradient(90deg, color-mix(in srgb, var(--si-primary) var(--map-shade-min), var(--si-primary-tint)), var(--si-primary));
}

/* Images */

.image-thumbnail {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Switch - added border and margin to make it fully visible */

.rz-switch-circle:before {
    border: var(--rz-border-base-700);
}

.rz-switch {
    margin: 3px 0;
}

/* A grid page: header and filter bar keep their height, the PageGrid takes the rest and scrolls instead of the page. */
.page-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* An edit page body: FormPanels side by side from 1024px, stacked below. */
.edit-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    max-width: 1120px;
}

@media (min-width: 1024px) {
    .edit-cols {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .edit-cols.even {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Several FormPanels in one column of .edit-cols, or a full-width stack of panels (e.g. a wide editor). */
.edit-col,
.edit-stack {
    display: grid;
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.edit-cols > .edit-span {
    grid-column: 1 / -1;
}

/* A switch or checkbox with its label, inside a FormPanel. */
.check-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--si-control-h);
}

/* A row of in-form buttons spanning the FormPanel grid. */
.form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Radzen gives every dialog min-height 150px; a confirmation sizes to its content. */
.rz-dialog.confirm-dialog-window {
    min-height: 0;
}

/* A picker dialog: search, a grid that scrolls inside a fixed height, then the DialogFooter. */
.picker-dialog {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: min(560px, calc(100dvh - 180px));
    min-height: 300px;
}

/* RadzenTabs as a flat strip above page content; the tab content brings its own panels. */
.page-tabs .rz-tabview {
    --rz-tabs-background-color: transparent;
    --rz-tabs-border: 2px solid transparent;
    --rz-tabs-padding: 14px 0 0;
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-color: var(--si-muted);
    --rz-tabs-tab-font-weight: 600;
    --rz-tabs-tab-hover-background-color: transparent;
    --rz-tabs-tab-hover-color: var(--si-ink);
    --rz-tabs-tab-focus-background-color: transparent;
    --rz-tabs-tab-focus-color: var(--si-ink);
    --rz-tabs-tab-selected-background-color: transparent;
    --rz-tabs-tab-selected-color: var(--si-ink);
    --rz-tabs-tab-selected-top-border-color: var(--si-primary);
}

.page-tabs .rz-tabview-nav {
    border-bottom: 1px solid var(--si-line);
}

.page-tabs .rz-tabview-panels {
    border: none;
}

.cell-link {
    font-weight: 600;
    color: var(--si-ink);
    text-decoration: none;
}

.cell-link:hover {
    color: var(--si-primary-ink);
    text-decoration: underline;
}

.cell-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cell-button:focus-visible {
    outline: 2px solid var(--si-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.cell-text-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.cell-text-button:hover {
    text-decoration: underline;
}

.cell-text-button:focus-visible {
    outline: 2px solid var(--si-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.cell-button.danger,
.cell-button.danger:hover {
    color: var(--si-danger);
}

.cell-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Kept in the accessibility tree; screen readers announce it, nothing is drawn. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}