#OffsetTimePicker .mud-toolbar {
    display: flex !important;
}

.fancybox__container {
    --fancybox-bg: rgba(24, 24, 27, 0.85);
    z-index: 9999;
}

.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}

.mud-input {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-chip {
    font-size: var(--mud-typography-default-size);
}

    .mud-chip.mud-chip-size-small {
        font-size: var(--mud-typography-body1-size);
    }

.mud-tabs {
    background-color: var(--mud-palette-surface);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-button-year {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-table-cell {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-table-root .mud-table-head .mud-table-cell > span.column-header {
    font-weight: 500;
    font-size: .875rem;
}

/*.mud-typography-body2 {
    color: var(--mud-palette-text-secondary);
}*/

.mud-typography-subtitle2 {
    color: var(--mud-palette-text-secondary);
}

.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom: 2px;
}

.mud-select button.mud-input-adornment-icon-button {
    padding-left: 2px;
}

.mud-select .mud-input-outlined button.mud-input-adornment-icon-button {
    padding-right: 2px;
}

.mud-icon-button{
    padding: 8px;
}


#blazor-error-ui {
    background: lightyellow;
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    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;
    padding: 0.6rem 1.75rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 3.5rem;
        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."
    }

#reconnect-modal {
    background: lightyellow;
    background-color: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning-darken);
    top: 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;
    padding: 0.6rem 1.75rem 0.7rem 1.25rem;
    margin: 0px;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.mud-nav-link {
    white-space: normal !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

.uppercase-headers .mud-table-head th {
    text-transform: uppercase;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Participants "Manage" tab — action buttons fill their column at a consistent width so their
   edges align (SelectReportFormatMenu renders a content-width menu button with no width param).
   Popover menu items are portaled to the page root, so they're unaffected by these rules. */
.manage-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 280px;
    /* Pin the action buttons to the bottom of the (equal-height) card so the button rows align
       across cards even when captions wrap to different line counts. */
    margin-top: auto;
}

.manage-actions .mud-menu {
    display: block;
    width: 100%;
}

.manage-actions .mud-button-root {
    width: 100%;
}
/* ---------------------------------------------------------------------------------------------------
   Wrapping data-grid toolbars.

   MudBlazor pins .mud-table-toolbar to a fixed 64px. The Wellness Programs tabs each carry 4-7 filter
   controls, so their toolbars wrap to a second line on anything narrower than a wide desktop and the
   overflow then paints on top of the column headers (a date-range picker sitting over ACTIONS / EVENT
   NAME). Let the toolbar grow with its content and keep 64px as the floor.

   Opt-in via .wrap-toolbar on the grid so tables with a single-line toolbar keep the stock height.
   --------------------------------------------------------------------------------------------------- */
.wrap-toolbar .mud-table-toolbar {
    height: auto;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Floating labels render above their field border, so a wrapped filter row needs more vertical room than
   the horizontal gap. Applied to the flex container holding the filters. */
.wrap-toolbar .toolbar-filters {
    row-gap: 20px;
}

/* ---------------------------------------------------------------------------------------------------
   Event detail sections.

   Each section of the event surface is a bordered card that reads as one unit whether it is showing
   values or an editor. The border (rather than elevation) keeps the cards quiet against the page so the
   one open editor is the thing that stands out.
   --------------------------------------------------------------------------------------------------- */
.event-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
}

/* The open section gets a left accent so it is obvious which card owns the Save button, without
   resorting to a colour fill that would fight the form controls inside it. */
.event-section-editing {
    border-left: 3px solid var(--mud-palette-primary);
}