/* Loaded after MudBlazor.min.css. */

.mud-button-root.mud-button {
  border-radius: var(--mt-radius-pill);
  font-family: var(--mt-font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
.mud-button-root.mud-button.mud-button-filled-primary {
  background-color: var(--mt-ink);
  color: var(--mt-on-ink);
}
.mud-button-root.mud-button.mud-button-filled-primary:hover:not(.mud-disabled) {
  background-color: var(--mt-ink-hover);
}
.mud-button-root.mud-button.mud-button-filled.mud-disabled,
.mud-button-root.mud-button.mud-button-filled:disabled {
  background-color: var(--mt-muted);
  color: var(--mt-text-disabled);
}
.mud-button-root.mud-button:focus-visible {
  outline: 2px solid var(--mt-ink);
  outline-offset: 2px;
}
/* 44px like a field, so a field and its button line up in a row; 37px inside tables. */
.mud-button-root.mud-button-filled[class*="-size-medium"],
.mud-button-root.mud-button-outlined[class*="-size-medium"] {
  min-height: 44px;
  padding: 10px 20px;
  line-height: 24px;
}
.mud-button-root.mud-button-outlined[class*="-size-medium"] {
  padding-top: 9px;
  padding-bottom: 9px;
}
:where(.mud-table) .mud-button-root.mud-button-filled[class*="-size-medium"] {
  min-height: 37px;
  padding: 8px 18px;
  line-height: 21px;
}
:where(.mud-table) .mud-button-root.mud-button-outlined[class*="-size-medium"] {
  min-height: 37px;
  padding: 7px 18px;
  line-height: 21px;
}
.mud-button-root.mud-button .mud-button-label {
  font-size: inherit;
  line-height: inherit;
}
.mud-button-root.mud-button .mud-button-label .mud-typography {
  line-height: inherit;
}
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled:focus-visible {
  box-shadow: none;
}
.mud-button-root.mud-button-outlined.mud-button-outlined-default {
  border-color: var(--mt-border-strong);
  background-color: var(--mt-surface);
  color: var(--mt-ink);
}
.mud-button-root.mud-button-outlined.mud-button-outlined-default:hover {
  background-color: var(--mt-hover);
}

.mud-toggle-group {
  border-radius: var(--mt-radius-pill);
}
/* MudBlazor 9 gives an outlined group a border width but no style; keep the solid primary frame of 8.x. */
.mud-toggle-group.mud-toggle-group-outlined {
  border-style: solid;
}
.mud-toggle-group.mud-toggle-group-outlined.mud-toggle-group-primary {
  border-color: var(--mud-palette-primary);
}
.mud-toggle-group > .mud-toggle-item.mud-button-root {
  border-radius: 0;
}
.mud-toggle-group > .mud-toggle-item.mud-button-root:first-child {
  border-start-start-radius: var(--mt-radius-pill);
  border-end-start-radius: var(--mt-radius-pill);
}
.mud-toggle-group > .mud-toggle-item.mud-button-root:last-child {
  border-start-end-radius: var(--mt-radius-pill);
  border-end-end-radius: var(--mt-radius-pill);
}

/* MudBlazor 9 dropped the switch label sizes and grew table header rows; keep the 8.x look. */
label.mud-switch {
  font-size: var(--mud-typography-body1-size);
  line-height: var(--mud-typography-body1-lineheight);
}
.mud-table-head .mud-table-cell {
  line-height: 1.5rem;
}

.mud-button-root.mud-icon-button:not(.mud-switch-base):not([class*="checkbox"]):not([class*="radio"]) {
  border-radius: 10px;
}

/* Icon buttons inside other controls keep MudBlazor's plain look. */
.mud-button-root.mud-icon-button:not(.mud-button-filled):not(:where(
    .mud-input-adornment *, .mud-input-control *, .mud-menu *, .mud-dialog-title *, .mud-snackbar *,
    .mud-alert *, .mud-table-pagination *, .mud-picker *, .mud-appbar *, header *, .mud-chip *,
    .mud-drawer *, .mud-carousel *, .mud-tabs-tabbar *, .mud-expand-panel-header *, .mud-toolbar *,
    .mud-paper.mud-popover *, .mud-pagination *)) {
  border: 1px solid var(--mt-border-soft);
  background-color: var(--mt-canvas);
  color: var(--mt-text-secondary);
}
.mud-button-root.mud-icon-button:not(.mud-button-filled):not(:where(
    .mud-input-adornment *, .mud-input-control *, .mud-menu *, .mud-dialog-title *, .mud-snackbar *,
    .mud-alert *, .mud-table-pagination *, .mud-picker *, .mud-appbar *, header *, .mud-chip *,
    .mud-drawer *, .mud-carousel *, .mud-tabs-tabbar *, .mud-expand-panel-header *, .mud-toolbar *,
    .mud-paper.mud-popover *, .mud-pagination *)):hover {
  background-color: var(--mt-hover);
  border-color: var(--mt-border-strong);
}
.mud-button-root.mud-icon-button.mud-error-text:not(.mud-button-filled) {
  color: var(--mud-palette-error);
}
.mud-button-root.mud-icon-button.mud-error-text:not(.mud-button-filled):hover {
  background-color: rgba(201, 22, 12, .08);
  border-color: rgba(201, 22, 12, .25);
}
.mud-button-root.mud-icon-button[class*="-size-medium"]:not(:where(.mud-input-control *)) {
  padding: 8px;
}
.mud-button-root.mud-icon-button[class*="-size-small"]:not(:where(.mud-input-control *)) {
  padding: 5px;
  border-radius: 8px;
}

/* Menus wrap their list in .mud-menu-list-wrapper (MudBlazor 9). */
.mud-popover.mud-paper:has(> .mud-list, > .mud-menu-list-wrapper > .mud-list, > .select__list) {
  background-color: var(--mt-surface);
  border-radius: var(--mt-radius-popover);
  /* A real border would eat into MudBlazor's max-height and make the popover and its list both scroll. */
  box-shadow: var(--mt-shadow-popover);
  margin-top: 6px;
}
/* On phones the list stays as wide as its field: a wider list would widen the page into its desktop layout. */
@media (min-width: 600px) {
  .mud-popover.mud-popover-relative-width:has(> .mud-list, > .mud-menu-list-wrapper > .mud-list) {
    min-width: max-content;
    max-width: min(560px, calc(100vw - 32px));
  }
}
.mud-popover.mud-paper > .mud-list,
.mud-popover.mud-paper > .mud-menu-list-wrapper > .mud-list {
  padding: 8px;
}
.mud-popover .mud-list > .mud-list-item + .mud-list-item,
.mud-popover .mud-list > .mud-menu-item + .mud-menu-item {
  margin-top: 2px;
}
.mud-popover .mud-list > .mud-list-item,
.mud-popover .mud-list > .mud-menu-item {
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 40px;
}
.mud-popover .mud-list > .mud-list-item:hover,
.mud-popover .mud-list > .mud-menu-item:hover {
  background-color: var(--mt-hover);
}
.mud-popover .mud-list > .mud-list-item.mud-selected-item {
  background-color: var(--mt-muted);
  color: var(--mt-ink);
  font-weight: 600;
}
.mud-popover .mud-list > .mud-list-item.mud-selected-item .mud-typography {
  font-weight: inherit;
}
.mud-popover .mud-menu-item {
  color: var(--mt-ink);
}
.mud-popover .mud-menu-item .mud-menu-item-icon {
  color: var(--mt-ink);
  margin-inline-end: 12px;
  font-size: 1.25rem;
}
.mud-popover .mud-menu-item:has(> .mud-menu-item-icon.mud-error-text),
.mud-popover .mud-menu-item .mud-menu-item-icon.mud-error-text {
  color: var(--mud-palette-error);
}
.mud-popover .mud-list > .mud-menu-item:has(> .mud-menu-item-icon.mud-error-text):hover {
  background-color: rgba(201, 22, 12, .08);
}
.mud-popover .mud-menu-item .mud-menu-item-text,
.mud-popover .mud-list-item .mud-typography-body1 {
  font-size: 0.9375rem;
}
.mud-popover .mud-list > .mud-list-item.mud-list-item-disabled,
.mud-popover .mud-list > .mud-menu-item.mud-menu-item-disabled {
  opacity: .45;
}

.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) > .mud-input-control-input-container {
  display: flex;
  flex-direction: column;
}
/* Without the floating-label space a labelled field lines up with the buttons next to it. */
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) {
  margin-top: 0;
  margin-bottom: 0;
}
.mud-input-control > .mud-input-control-input-container > label.mud-input-label {
  order: -1;
  position: static;
  transform: none !important;
  max-width: none;
  margin: 0 0 6px;
  padding: 0 !important;
  font-family: var(--mt-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  color: var(--mt-text-secondary);
  background: none;
  pointer-events: auto;
}
.mud-input-control > .mud-input-control-input-container > label.mud-input-label.mud-input-error {
  color: var(--mud-palette-error);
}
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) .mud-input-outlined-border legend {
  display: none;
}
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) .mud-input.mud-input-text {
  margin-top: 0;
}
/* The label no longer covers an empty field, so its placeholder can always show. */
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) .mud-input-root::placeholder {
  opacity: .5 !important;
}

.mud-dialog {
  border-radius: var(--mt-radius-tile);
  background-color: var(--mt-surface);
  box-shadow: var(--mt-shadow-popover);
  color: var(--mt-ink);
}
/* div.mud-dialog outranks the hosts' site.css band rule. */
div.mud-dialog .mud-dialog-title {
  position: relative;
  min-height: 64px;
  padding: 18px 64px 18px 24px;
  margin: 0 0 16px;
  background: var(--mt-muted);
  border-bottom: 1px solid var(--mt-border);
  border-start-start-radius: var(--mt-radius-tile);
  border-start-end-radius: var(--mt-radius-tile);
  font-family: var(--mt-font-sans);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--mt-ink);
}
div.mud-dialog .mud-dialog-title > .mud-typography-h4,
div.mud-dialog .mud-dialog-title > .mud-typography-h5,
div.mud-dialog .mud-dialog-title > .mud-typography-h6 {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
div.mud-dialog .mud-dialog-title .mud-button-close {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  padding: 8px;
  border-radius: 10px;
  color: var(--mt-text-secondary);
}
div.mud-dialog .mud-dialog-title .mud-button-close:hover {
  background-color: var(--mt-hover);
  color: var(--mt-ink);
}
div.mud-dialog .mud-dialog-title .mud-button-close:focus-visible {
  outline: 2px solid var(--mt-ink);
  outline-offset: 1px;
}
.mud-dialog .mud-dialog-content {
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 599px) {
  div.mud-dialog .mud-dialog-title {
    min-height: 56px;
    padding: 16px 56px 16px 16px;
    font-size: 20px;
  }
  div.mud-dialog .mud-dialog-title .mud-button-close {
    right: 8px;
  }
  .mud-dialog .mud-dialog-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

input.form__input,
textarea.form__input {
  border: 1px solid var(--mt-border-strong);
  border-radius: var(--mt-radius-control);
  background-color: var(--mt-surface);
  padding: 10px 14px;
  font-family: var(--mt-font-sans);
  font-size: 15px;
  line-height: 22px;
  color: var(--mt-ink);
}
input.form__input {
  min-height: 44px;
}
input.form__input:focus-visible,
textarea.form__input:focus-visible {
  outline: 2px solid var(--mt-ink) !important;
  outline-offset: -1px;
  border-color: var(--mt-ink);
}
input.form__input.invalid,
textarea.form__input.invalid {
  border-color: var(--mt-error);
  outline: 0;
}

/* The hosts' app.css pins the radius (radius * 2) with !important, hence the same here with a stronger selector. */
.mud-input.mud-input-outlined fieldset.mud-input-outlined-border {
  border-radius: var(--mt-radius-control) !important;
  border-color: var(--mt-border-strong);
}
@media (hover: hover) and (pointer: fine) {
  .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):not(.mud-input-error):hover > fieldset.mud-input-outlined-border {
    border-color: var(--mt-text-tertiary);
  }
}
.mud-input.mud-input-outlined.mud-input-error fieldset.mud-input-outlined-border {
  border-color: var(--mud-palette-error);
}
.mud-input.mud-input-outlined.mud-disabled fieldset.mud-input-outlined-border {
  border-color: var(--mt-border-soft);
}
.mud-select .mud-input.mud-input-outlined {
  font-family: var(--mt-font-sans);
  font-size: 1rem;
  color: var(--mt-ink);
}
.mud-select .mud-input div.mud-input-slot.mud-select-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.mud-select .mud-input-adornment-end .mud-input-adornment-icon,
.mud-autocomplete .mud-input-adornment-end .mud-input-adornment-icon {
  font-size: 1.5rem;
  color: var(--mt-text-secondary);
  transition: transform 150ms ease;
}
.mud-select:has([aria-expanded="true"]) .mud-input-adornment-end .mud-input-adornment-icon {
  transform: rotate(180deg);
}
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
  border-color: var(--mt-ink);
}
/* The hosts' app.css pins dense paddings with !important, hence the same here. */
.mud-input-control:not(:where(.mud-table *)) .mud-input.mud-input-outlined > input.mud-input-root-outlined,
.mud-input-control:not(:where(.mud-table *)) .mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
  padding-top: 12.5px !important;
  padding-bottom: 12.5px !important;
}

.mud-input-adornment .mud-icon-button {
  padding: 6px;
  border-radius: 8px;
}
.mud-input-margin-dense .mud-input-adornment .mud-icon-button {
  padding: 4px;
}
.mud-input-adornment .mud-icon-button.mud-icon-button-edge-end {
  margin-inline-end: -6px;
}
.mud-input-adornment .mud-icon-button.mud-icon-button-edge-start {
  margin-inline-start: -6px;
}
.mud-popover .mud-list > .mud-list-item .mud-list-item-text {
  margin: 0;
}
/* Room under the dialog's buttons, whether they sit in DialogActions or at the end of the content. */
.mud-dialog .mud-dialog-actions {
  padding: 12px 24px 20px;
  gap: 8px;
}
.mud-dialog:not(:has(.mud-dialog-actions)) .mud-dialog-content {
  padding-bottom: 24px;
}

/* One even gap instead of the section's 40px plus each field's own margin. */
.section__content:has(> .single-attribute-content, > .input-group) {
  gap: 20px;
}
.section__content > .single-attribute-content,
.section__content > .input-group {
  margin: 0;
}

.mud-dialog .mud-dialog-actions .mud-button-root.mud-button {
  min-height: 44px;
  padding: 10px 20px;
  line-height: 24px;
}
.mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text {
  color: var(--mt-ink);
}
.mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text.mud-button-text-error {
  color: var(--mt-error);
}
.mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text:hover {
  background-color: var(--mt-hover);
}
.mud-button-root.mud-button-filled.mud-button-filled-default {
  background-color: var(--mt-muted);
  color: var(--mt-ink);
}
.mud-button-root.mud-button-filled.mud-button-filled-default:hover {
  background-color: var(--mt-hover);
}

.mud-tabs .mud-tab {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.mud-chip {
  font-family: var(--mt-font-sans);
  font-weight: 500;
}
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
  border-radius: var(--mt-radius-pill);
}
.mud-chip.mud-chip-filled.mud-chip-color-default {
  background-color: var(--mt-muted);
  color: var(--mt-ink);
}
.mud-chip.mud-chip-outlined.mud-chip-color-default {
  border-color: var(--mt-border-strong);
  color: var(--mt-ink);
}

/* Backgrounds are !important because MudBlazor's hover:mud-*-hover utility classes are. */
.mud-checkbox,
.mud-radio {
  gap: 8px;
  /* The row keeps the 28px of MudBlazor's dense control, so lists of options do not run into each other. */
  min-height: 28px;
}
.mud-checkbox > .mud-button-root.mud-icon-button,
.mud-radio > .mud-button-root.mud-icon-button {
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--mt-border-strong);
  background-color: var(--mt-surface) !important;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.mud-checkbox > .mud-button-root.mud-icon-button {
  border-radius: 6px;
}
.mud-radio > .mud-button-root.mud-icon-button {
  border-radius: 50%;
}
.mud-checkbox > .mud-icon-button > .mud-icon-root,
.mud-radio > .mud-icon-button > .mud-icon-root,
.mud-checkbox > .mud-icon-button > .mud-ripple-effect,
.mud-radio > .mud-icon-button > .mud-ripple-effect {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .mud-checkbox:not(.mud-disabled):not(.mud-readonly):hover > .mud-icon-button.mud-checkbox-false:not(.mud-disabled),
  .mud-radio:not(.mud-disabled):not(.mud-readonly):hover > .mud-icon-button:not(.mud-checked):not(.mud-disabled) {
    border-color: var(--mt-ink);
    background-color: var(--mt-surface) !important;
  }
  .mud-checkbox:hover > .mud-icon-button.mud-checkbox-true:not(.mud-disabled),
  .mud-checkbox:hover > .mud-icon-button.mud-checkbox-null:not(.mud-disabled),
  .mud-radio:hover > .mud-icon-button.mud-checked:not(.mud-disabled) {
    border-color: var(--mt-ink-hover);
    background-color: var(--mt-ink-hover) !important;
  }
}
.mud-checkbox > .mud-icon-button.mud-checkbox-true,
.mud-checkbox > .mud-icon-button.mud-checkbox-null,
.mud-radio > .mud-icon-button.mud-checked {
  border-color: var(--mt-ink);
  background-color: var(--mt-ink) !important;
}
.mud-checkbox > .mud-icon-button.mud-checkbox-true {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
}
.mud-checkbox > .mud-icon-button.mud-checkbox-null {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
}
.mud-radio > .mud-icon-button.mud-checked {
  background-image: radial-gradient(circle, var(--mt-on-ink) 0 3.5px, transparent 4px);
}
.mud-checkbox > .mud-icon-button:has(.mud-checkbox-input:focus-visible),
.mud-radio > .mud-icon-button:has(.mud-radio-input:focus-visible) {
  outline: 2px solid var(--mt-ink);
  outline-offset: 2px;
}
.mud-checkbox > .mud-icon-button.mud-disabled,
.mud-radio > .mud-icon-button.mud-disabled {
  border-color: var(--mt-border-soft);
  background-color: var(--mt-muted) !important;
}
.mud-checkbox > .mud-icon-button.mud-disabled.mud-checkbox-true,
.mud-checkbox > .mud-icon-button.mud-disabled.mud-checkbox-null,
.mud-radio > .mud-icon-button.mud-disabled.mud-checked {
  border-color: var(--mt-text-disabled);
  background-color: var(--mt-text-disabled) !important;
}
.mud-checkbox > .mud-typography,
.mud-radio > .mud-typography {
  font-family: var(--mt-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mt-ink);
}
.mud-checkbox > .mud-typography .mud-typography,
.mud-radio > .mud-typography .mud-typography {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.mud-checkbox.mud-disabled > .mud-typography,
.mud-radio.mud-disabled > .mud-typography {
  color: var(--mt-text-disabled);
}
/* Table selection boxes no longer need MudBlazor's negative margin around the padded button. */
.mud-table-cell .mud-checkbox {
  margin: 0;
}

.mud-alert {
  border-radius: var(--mt-radius-media);
}

.mud-table-body .mud-button-root.mud-icon-button:not(.mud-switch-base):not([class*="checkbox"]):not([class*="radio"]) {
  padding: 5px;
  border-radius: 8px;
  font-size: 1.25rem;
}
.mud-table-body .mud-button-root.mud-icon-button .mud-icon-root {
  font-size: 1.25rem;
}

/* Toolbars wrap instead of squeezing the search field and breaking the button's text. */
.mud-table-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  height: auto;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.mud-table-toolbar > .mud-input-control {
  flex: 1 1 220px;
}
.mud-table-toolbar .mud-button-root.mud-button {
  white-space: nowrap;
}

.mud-appbar.header--site > .mud-toolbar {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mt-container-max);
  margin-inline: auto;
  padding-left: var(--mt-space-4);
  padding-right: var(--mt-space-4);
}
@media (min-width: 768px) {
  .mud-appbar.header--site > .mud-toolbar {
    padding-left: var(--mt-space-8);
    padding-right: var(--mt-space-8);
  }
}

@media (max-width: 360px) {
  .mud-appbar.header .mud-toolbar-gutters {
    padding-left: 8px;
    padding-right: 8px;
  }
  .mud-appbar.header .gap-3 {
    gap: 6px !important;
  }
}

/* Below the fixed app bar, so they never cover its actions. */
#mud-snackbar-container.mud-snackbar-location-top-left,
#mud-snackbar-container.mud-snackbar-location-top-center,
#mud-snackbar-container.mud-snackbar-location-top-right {
  top: calc(var(--mud-appbar-height) + 12px);
}

/* White on the state's dark text colour meets 4.5:1; the message carries the state in words. */
.mud-snackbar {
  border-radius: var(--mt-radius-popover);
  box-shadow: var(--mt-shadow-popover);
  font-family: var(--mt-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}
/* The action keeps one line and its width; the message wraps instead. */
.mud-snackbar .mud-snackbar-content-action {
  flex-shrink: 0;
}
.mud-snackbar .mud-snackbar-content-action > .mud-button-root {
  white-space: nowrap;
}
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-alert-filled-dark {
  background-color: var(--mt-ink);
  color: var(--mt-on-ink);
}
.mud-snackbar.mud-alert-filled-success {
  background-color: var(--mt-success-text);
  color: var(--mt-on-ink);
}
.mud-snackbar.mud-alert-filled-info {
  background-color: var(--mt-info-text);
  color: var(--mt-on-ink);
}
.mud-snackbar.mud-alert-filled-warning {
  background-color: var(--mt-warning-text);
  color: var(--mt-on-ink);
}
.mud-snackbar.mud-alert-filled-error {
  background-color: var(--mt-error);
  color: var(--mt-on-ink);
}
@media (max-width: 599px) {
  #mud-snackbar-container.mud-snackbar-location-top-right {
    left: 16px;
    right: 16px;
  }
  #mud-snackbar-container .mud-snackbar {
    min-width: 0;
    flex-wrap: wrap;
  }
  /* Too narrow for both: the action moves under the message instead of squeezing it. */
  #mud-snackbar-container .mud-snackbar .mud-snackbar-content-message {
    flex: 1 1 12rem;
    min-width: 0;
  }
}

/* Required fields: put field-required on the field or its label; MudBlazor's Required uses the same ::after, so never two. */
.field-required label.mud-input-label::after,
.field-required .phone-input__label::after,
.field-required .select__label::after,
.field-required .mt-field__label::after,
:is(label, span).field-required::after,
.mud-input-control.mud-input-required > .mud-input-control-input-container > label.mud-input-label::after {
    content: "*";
    margin-left: 2px;
    color: var(--mt-error);
}

/* MudBlazor's min-width: max-content beat the field-width max-width and flipped wide lists to the other side. */
.mud-popover.mt-popover-fit {
    min-width: 0 !important;
}

/* Before the circuit is interactive a click would be lost (data-interactive from LayoutMain); fade only if it is slow. */
html:has(.wrapper[data-interactive="false"]) {
    cursor: progress;
}
html:has(.wrapper[data-interactive="false"]) :is(button, input, select, textarea, [role="button"], .mud-button-root) {
    pointer-events: none;
    animation: mt-await-circuit 0s linear 300ms forwards;
}
@keyframes mt-await-circuit {
    to {
        opacity: .6;
    }
}