.mud-layout
{
    /* Faint Secondary and Primary glows over Surface to Background; every color comes from the theme. */
    background: radial-gradient( circle at bottom left, color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent) 0%, color-mix(in srgb, var(--mud-palette-secondary) 4%, transparent) 18%, transparent 35% ), radial-gradient( circle at top right, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0%, color-mix(in srgb, var(--mud-palette-primary) 3%, transparent) 20%, transparent 40% ), linear-gradient( 180deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100% );
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.mud-breadcrumbs
{
    margin-top: 7px;
    padding: 10px 0px;
}

.mud-dialog-actions
{
    padding: 16px 25px !important;
}

.mud-divider
{
    border-top: 1px dashed var(--mud-palette-divider);
}

/* Navigation items are pills inset from the drawer edge; the active one is tinted, bold, and primary colored. */
.mud-nav-link
{
    width: calc(100% - 24px);
    min-height: 44px;
    margin: 2px 12px;
    padding: 10px 14px;
    border-radius: 22px;
}

    .mud-nav-link.active:not(.mud-nav-link-disabled)
    {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
    }

        .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text
        {
            font-weight: 700;
        }

        .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon
        {
            color: var(--mud-palette-primary);
        }

    .mud-nav-link .mud-nav-link-expand-icon.mud-transform
    {
        transform: rotate(90deg) !important;
    }

.mud-nav-link-expand-icon
{
    width: 18px;
    height: 18px;
}

.mud-overlay
{
    z-index: 2000;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text
{
    color: var(--mud-palette-primary) !important;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled)
{
    background-color: var(--mud-palette-primary-hover) !important;
}

    /* Keeps the active pill from fading to the lighter hover color. */
    .mud-nav-link.active:hover:not(.mud-nav-link-disabled)
    {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
    }

.mud-table th, .mud-simple-table th
{
    background-color: var(--mud-palette-background-gray);
}

/* Body rows align to the top, so a multiline cell does not float its neighbours to the middle. */
.mud-table-root .mud-table-body .mud-table-row,
.mud-simple-table table tbody tr
{
    vertical-align: top;
}

.mud-button-root.mud-button-text:hover
{
    background-color: var(--mud-palette-primary-hover) !important;
}

.mud-tabs-tabbar
{
    background-color: transparent !important;
}

.mud-tab-panel
{
    text-transform: none !important;
    letter-spacing: 0;
    min-width: auto !important;
}

#blazor-error-ui
{
    padding: 0 !important;
}

@media (max-width: 599.98px)
{
    /* MudBlazor leaves 32px on each side of a full-width dialog; phones need the room. */
    .mud-dialog-width-full
    {
        width: calc(100% - 32px);
    }
}