.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);
}

/* 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;
}

.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 */

/* 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-dialog .mud-dialog-content {
    padding: 0px;
}

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