.mud-snackbar-content-message li {
    list-style: none;
}

.mud-chart .mud-chart-legend .mud-chart-legend-item {
    display: flex;
    align-items: center;
    gap: var(--emsurge-reduced-padding);
}

.mud-radio-group {
    display: flex;
    flex-direction: row;
    gap: var(--emsurge-standard-padding);
    justify-content: space-around;
}

.mud-radio {
    min-width: 15rem;
    max-width: 15rem;
    text-align: center;
}

/* Unnecessary different padding for last children */
.mud-table-dense * .mud-table-row .mud-table-cell:last-child {
    padding-right: inherit;
    padding-inline-end: inherit;
}

/* Horizontal scroll always visible if needed */
.mud-data-grid {
    max-height: 100%;
}

.mud-table-container {
    width: max-content;
    overflow: clip;
    display: block;
}

/* Increase Alerts font-size and fix vertical alignment with icon */
.mud-alert-message {
    padding: 0;
    font-size: var(--emsurge-global-subtitles-font-size);
    line-height: 1;
}

.mud-alert-icon {
    padding: 0;
}

.mud-alert {
    padding: var(--emsurge-standard-padding);
}

/* Make the Tabs header sticky so that it's visible when scrolling */
.mud-tabs-toolbar {
    position: sticky !important;
    top: 0;
    z-index: 1;
}

/* Make the snackbar adapt its width to the message's width. Otherwise, a long message makes the X button out of view - on top of showing an ugly truncated message. */
.mud-snackbar {
    min-width: fit-content;
}

.mud-snackbar-content-message {
    width: max-content;
    max-width: 90vw;
}

/* Tweak the MudDropZone so that the first item shows the same as the other one. Without these tweaks it's very hard to grab the first element and its tooltip doesn't show */
.mud-drop-item-preview-start {
    position: relative;
    height: 1rem;
}

/* Add some margin to MudSwitch because otherwise content to its left or right overlaps with it */
.mud-switch-span {
    margin-left: var(--emsurge-standard-padding);
    margin-right: var(--emsurge-standard-padding);
}
/* Use a golden color for the slider in an off switch instead of the darker, almost invisible, default color */
.mud-switch-track {
    background-color: var(--mud-palette-primary) !important;
}

.mud-expand-panel .mud-expand-panel-header {
    width: 100%;
    align-items: center;
    display: flex;
    font-size: 1rem;
    line-height: 1;
    min-height: 48px;
    outline: none;
    padding: 0;
    position: relative;
    transition: min-height .3s cubic-bezier(0.25, 0.8, 0.5, 1);
    user-select: none;
}

.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-left: 0;
    padding-right: 0;
}

.mud-dialog {
    border-radius: var(--emsurge-border-radius);
    background-color: var(--mud-palette-background);
    margin-top: var(--emsurge-dialog-top-margin);
    margin-left: var(--emsurge-dialog-left-margin);
    margin-right: var(--emsurge-dialog-right-margin);
    padding: var(--emsurge-standard-padding);
    width: 100%;
    height: 100%;
}

/*.mud-dialog { 
    border-radius: var(--emsurge-border-radius);
    background-color: var(--mud-palette-background);
    margin: var(--emsurge-standard-padding);
    width: 100%;
    height: 100%;
} We should use this one for Mobile */

/* MudDataGrid and MudTable */
/* Make the font size normal... for some reason MudBlazor decided to use a smaller font-size */
td.mud-table-cell {
    font-size: 1rem;
}

/* Remove default padding*/
.mud-data-grid .mud-table-cell.filter-header-cell {
    padding: var(--emsurge-reduced-padding);
}

/* We need to assign a height: 100% to a div generated by MudBlazor's dialog to contain a dialog's content! */
div.mud-dialog > div:first-of-type {
    height: 100%;
}

/* Reduce the top padding of the dialog container so that we make better use of vertical real state */
.mud-dialog-container.mud-dialog-topcenter {
    padding-top: var(--emsurge-reduced-padding);
}

.mud-chip-text.mud-chip-color-secondary {
    color: white;
    border-width: 2px !important;
    border-color: var(--emsurge-container-border-dim-color) !important;
    border-style: solid;
}

    .mud-chip-text.mud-chip-color-secondary:hover {
        color: var(--emsurge-golden-bright-color) !important;
        border-width: 2px !important;
        border-color: var(--emsurge-golden-bright-color) !important;
        border-style: solid;
    }

.mud-chip-filled.mud-chip-color-primary:hover {
    background-color: #E99909 !important;
    border-width: 2px !important;
    border-color: var(--emsurge-golden-bright-color) !important;
    border-style: solid;
}

/* Modify selected radio button color */
.mud-checked,
.mud-checked + span {
    color: var(--emsurge-golden-bright-color) !important;
}

/* Modify selected radio button color */
.mud-dialog .mud-dialog-content {
    padding: 0px;
}

/* Center the label for MudRadioButton */
.mud-radio-content {
    text-align: center;
}

/* Use height: 100% for the content of MudTabs */
.mud-tabs-panels {
    min-height: 100%;
    max-height: 100%;
    height: 100%;
}

/* Make sure a button's text does not wrap */
.mud-button-label {
    white-space: nowrap;
}

/* Remove the fill from a badge's background */
.mud-badge-no-background {
    background-color: transparent !important;
}

/* Make sure all MudDataGrid pagers are aligned to the left. */
.mud-table-pagination {
    display: flex;
}

/* Make sure vertical scroll works OK in a MudCollapse */
.mud-collapse-wrapper {
    overflow-y: auto;
}