html, body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
	outline: none;
}

a, .btn-link {
	color: #0071c1;
}

.btn-primary {
	background-color: #1b6ec2;
	border-color: #1861ac;
	color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
	padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	color-scheme: light only;
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	color: white;
	padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after {
	content: "An error has occurred."
}

.loading-splash {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: #fafafa;
	user-select: none;
}

.loading-splash-paper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 48px 64px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.11764705882352941);
}

.loading-splash-logo {
	animation: logo-breathe 2s ease-in-out infinite;
}

.loading-splash-bar {
	width: 200px;
	height: 4px;
	border-radius: 2px;
	background: #e0e0e0;
	overflow: hidden;
}

.loading-splash-bar-fill {
	width: 0;
	height: 100%;
	border-radius: 2px;
	background: #536942;
	animation: bar-fill 3s ease-out forwards;
}

.loading-splash-text {
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	color: #757575;
	letter-spacing: 0.01em;
}

@keyframes logo-breathe {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: .7;
		transform: scale(.97);
	}
}

@keyframes bar-fill {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

code {
	color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* LANDMANAGER */

.page-default-height {
	height: calc(100vh - 64px); /* 64px app bar */
	min-height: 480px;
	overflow-y: auto;
}

.page-grid {
	height: calc(100vh - 64px); /* 64px app bar */
	min-height: 480px;
	overflow-y: auto;
	padding-top: 16px;
}

.page-grid-header-item {
	height: 64px;
}

.page-grid-body-item {
	height: calc(100vh - 160px); /* 64px app bar, 64px grid header, 2x16px spacings */
}

.page-grid-body-item-scrollable-container {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	width: calc(100vw * 0.35);
	min-width: 600px;
	max-width: 900px;
}

.page-grid-body-item-fixed-container {
	height: 100%;
	overflow: hidden;
}

.page-grid-body-item-fixed-container .map-wrapper {
	height: 100%;
}

.page-grid-body-item-fixed-large-container {
	height: 100%;
	overflow: hidden;
	width: calc(100vw * 0.35);
	min-width: 600px;
	max-width: 900px;
}

.page-grid-body-item-fixed-small-container {
	height: 100%;
	overflow: hidden;
	width: calc(100vw * 0.15);
	min-width: 300px;
	max-width: 350px;
}

.page-grid-body-item-grow-container {
	height: 100%;
	overflow: hidden;
	flex-grow: 1;
}

.page-grid-body-item-grow-container .map-wrapper {
	height: 100%;
}

/* Layout panel component */
.layout-panel {
	height: calc(100vh - 64px); /* 64px app bar */
	min-height: 480px;
	overflow-y: auto;
	padding: 12px;
}

.layout-panel-title {
	min-height: 64px;
	height: 64px;
	padding: 4px;
}

.layout-panel-content {
	height: calc(100vh - 176px); /* 64px app bar, 16px padding, 64px title, 16px padding, 16px padding (bottom) */
	min-height: 480px;
	min-width: 600px;
}

.layout-panel-content-without-title {
	height: calc(100vh - 112px); /* 64px app bar, 16px padding, 16px padding, 16px padding (bottom) */
}

.layout-panel-fixed-small-section {
	height: 100%;
	overflow: visible;
	width: calc(100vw * 0.15);
	min-width: 300px;
	max-width: 350px;
	padding: 4px;
	flex-shrink: 0;
}

.layout-panel-fixed-medium-section {
	height: 100%;
	overflow: visible;
	width: calc(100vw * 0.35);
	min-width: 600px;
	max-width: 900px;
	padding: 4px;
	flex-shrink: 0;
}

.layout-panel-fixed-large-section {
	height: 100%;
	overflow: visible;
	width: calc(100vw * 0.50);
	min-width: 750px;
	max-width: 1100px;
	padding: 4px;
	flex-shrink: 0;
}

.layout-panel-grow-small-section, .layout-panel-grow-medium-section, .layout-panel-grow-large-section {
	height: 100%;
	overflow: visible;
	flex-grow: 1;
	padding: 4px;
}

.layout-panel-grow-small-section {
	min-width: 300px;
}

.layout-panel-grow-medium-section {
	min-width: 600px;
}

.layout-panel-grow-large-section {
	min-width: 750px;
}

.layout-panel-grow-small-section .map-wrapper {
	height: 100%;
}

.layout-panel-grow-medium-section .map-wrapper {
	height: 100%;
}

.layout-panel-grow-large-section .map-wrapper {
	height: 100%;
}

/*  */
.clipped-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Keeps a text on a single line without truncating it (unlike .clipped-text, the flexbox cannot
   shrink it below its full text width) */
.text-nowrap {
	white-space: nowrap;
}

/* Lets a flex child shrink and wrap long values (even unbroken tokens) instead of overflowing */
.text-break-anywhere {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Flex column whose .flex-scroll-area child scrolls internally while the sibling elements (headers,
   sticky footers) keep their height. The min-height 0 on both is essential: without it a flex child
   never shrinks below its content height, so nothing would ever scroll. */
.flex-scroll-host {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.flex-scroll-area {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/* Default class for stats paper elements */
.stats-paper {
	height: 170px;
	min-height: 170px;
	padding: 16px;
	transition: box-shadow 0.2s ease-in-out;
}

.stats-paper:hover {
	box-shadow: var(--mud-elevation-8) !important;
}

/* TreeView customization */
.mud-treeview-item-content {
	border-radius: 8px;
}

/* Skeleton customization: rectangle skeletons get rounded corners by default */
.mud-skeleton-rectangle {
	border-radius: var(--mud-default-borderradius);
}

/* Hero section */
.hero-section {
	background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-lighten) 100%);
	border: none !important;
}

.hero-section .hero-icon {
	font-size: 3rem;
	color: var(--mud-palette-primary-text);
}

.hero-section .hero-title {
	color: var(--mud-palette-primary-text);
}

.hero-section .hero-subtitle {
	color: var(--mud-palette-primary-text);
	opacity: 0.85;
}

/* Inverted (white on primary) update button on the app bar (NewVersionIndicator) */
.mud-button-filled.appbar-update-button {
	background-color: var(--mud-palette-primary-text);
	color: var(--mud-palette-primary);
}

/* Also override :active and :focus-visible, which MudBlazor otherwise repaints with the disabled-gray background */
.mud-button-filled.appbar-update-button:active,
.mud-button-filled.appbar-update-button:focus-visible,
.mud-button-filled.appbar-update-button:hover {
	background-color: color-mix(in srgb, var(--mud-palette-primary-text) 88%, var(--mud-palette-primary));
}

/* Dashboard quick action cards */
.dashboard-card {
	transition: box-shadow 0.2s ease-in-out;
}

.dashboard-card:hover {
	box-shadow: var(--mud-elevation-8) !important;
}

/* Role cards */
.role-card {
	transition: box-shadow 0.2s ease-in-out;
	overflow: hidden;
}

.role-card:hover {
	box-shadow: var(--mud-elevation-8) !important;
}

.role-card-bar {
	height: 4px;
	width: 100%;
}

/* Default class for paper elements */
/* TODO: apply to all papers by default */
.default-paper {
	padding: 16px;
}

/* Keeps the exchange balance card titles aligned, even when the difference card shows a status chip */
.balance-card-header {
	min-height: 32px;
}

/* Highlighted summary box, e.g. the exchange balance "GESAMT" summary or the version cards in the new-version dialog */
.highlight-box {
	background-color: var(--mud-palette-background-gray);
	border-radius: var(--mud-default-borderradius);
	padding: 12px 16px;
}

/* Constrains the width of the exchange balance explanation popover so the long hint text stays readable */
.balance-explanation-popover {
	display: block;
	max-width: 360px;
}

/* Selectable base cards in the contract payment calculation (parcel sum vs. agreed price) */
.base-select-card {
	border: 1px solid var(--mud-palette-lines-default);
	height: 100%;
	padding: 12px 16px;
}

.base-select-card-clickable {
	cursor: pointer;
}

.base-select-card-clickable:hover {
	border-color: var(--mud-palette-primary);
}

.base-select-card-active {
	background-color: var(--mud-palette-primary-hover);
	border-color: var(--mud-palette-primary);
}

.content-with-stats-paper {
	height: calc(100vh - 362px); /* 64px app bar, 16px padding, 64px layout panel header, 16px padding, 170px stats, 16px padding, 16px padding (bottom) */
	min-height: 294px; /* 480px min-height from layout-panel-content - 170px stats - 16px padding */
	padding: 16px;
}

.mud-paper:not(.mud-popover-open) {
	box-shadow: var(--mud-elevation-0);
	border: 1px solid var(--mud-palette-lines-default) !important;
}

/* Dashed paper (file-upload drop zones, download areas like the SEPA file download), overriding the
   global solid .mud-paper border above. */
.dashed-box.mud-paper:not(.mud-popover-open) {
	border: 2px dashed var(--mud-palette-lines-default) !important;
}

/* While a file is dragged over a drop zone the dashed border turns primary (MudFileUpload toggles the .dragging class via @bind-Dragging). */
.dashed-box.dragging.mud-paper:not(.mud-popover-open) {
	border-color: var(--mud-palette-primary) !important;
}

/* Selected card (e.g. the payment cards in the check dialog): primary border with a 12% primary tint
   (same tint as the IconContainer), overriding the global solid .mud-paper border above. */
.paper-selected.mud-paper:not(.mud-popover-open) {
	border: 2px solid var(--mud-palette-primary) !important;
	background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.mud-panel-outlined {
	border: 1px solid var(--mud-palette-lines-default) !important;
}

.mud-button-root {
	box-shadow: none !important;
}

/* Left-align wrapped label text in left-justified buttons (buttons center text by default) */
.mud-button-root.justify-start {
	text-align: start;
}

/* Smaller icons in dense menu items, 'font-size' taken from mud-icon-size-small */
.mud-menu-item-dense .mud-icon-root {
	font-size: 1.25rem !important;
}

/* Material Symbols font icons inherit their size from the surrounding context — the app's icon-sizing
   model — instead of MudBlazor's mud-icon-size-* classes (which would otherwise only size svg icons).
   Wherever both icon kinds sit side by side, a context rule makes the svg icons follow the same
   context size so font and svg render identically: icon buttons below, .state-button, the dense menu
   rule above, and IconContainer's inline font-size. */
.mud-icon-root.material-symbols-outlined,
.mud-icon-root.material-symbols-filled {
	font-size: inherit;
}

/* Both icon kinds take the icon button's own per-size font-size (1.125rem small / 1.5rem default)
   instead of the larger mud-icon-size-* classes that only svg icons would use otherwise. */
.mud-icon-button .mud-icon-root {
	font-size: inherit;
}

/* Container that makes a MudDataGrid fill remaining flex space and scroll rows internally */
.datagrid-flex {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.datagrid-flex > div,
.datagrid-flex .mud-table {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.datagrid-flex .mud-table-container {
	flex: 1;
	overflow-y: auto;
}

/* Variant of .datagrid-flex for containers that grow with their content (e.g. inside a dialog):
   the grid keeps its intrinsic height until the parent clamps it, then only the table body
   scrolls (FixedHeader keeps the header visible). The explicit minimums are essential: they let
   the elements shrink below their content height (the flex default min-height: auto equals the
   FULL content height in column direction), while the floor keeps the header and one row
   visible, so the clamped table always stays scrollable. */
.datagrid-flex-auto,
.datagrid-flex-auto .mud-table {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.datagrid-flex-auto {
	min-height: 120px;
}

.datagrid-flex-auto .mud-table {
	min-height: 90px;
}

.datagrid-flex-auto .mud-table-container {
	flex: 0 1 auto;
	min-height: 80px;
	overflow-y: auto;
}

/* Horizontal wrapper around side-by-side .datagrid-flex-auto grids: mirrors their floor so the
   row can shrink with them instead of sticking to its full content height. */
.datagrid-flex-auto-row {
	flex: 0 1 auto;
	min-height: 120px;
	min-width: 0;
}

/* Align the action bar's side padding with title (16px 24px) and content (8px 24px) — MudBlazor's
   Material default of 8px all around is sized for button-only bars, but our dialogs also place text
   there (e.g. the delete confirmation hint). Three-class selector: app.css loads before
   MudBlazor.min.css, so equal specificity would lose the cascade. */
.mud-dialog-container .mud-dialog .mud-dialog-actions {
	padding: 16px 24px;
}

/* Compact dialog title, opt-in via MudDialog TitleClass: bold subtitle1 (the app's in-between size,
   see the theme typography) instead of the default h6 (string titles always render as a Typo.h6
   MudText inside the title bar) */
.dialog-title-small .mud-typography-h6 {
	font-size: var(--mud-typography-subtitle1-size);
	line-height: var(--mud-typography-subtitle1-lineheight);
	letter-spacing: var(--mud-typography-subtitle1-letterspacing);
	font-weight: bold;
}

/* Dialog content as a non-scrolling flex column (set via MudDialog ContentClass): the dialog grows
   until its max height and the .datagrid-flex-auto grids inside scroll internally instead of the
   whole content. Fixed-size children keep their content height, the grids shrink to their floor. */
.mud-dialog-content.dialog-content-flex {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

/* The direct child (the content's root stack) must also lose its automatic content-height minimum. */
.mud-dialog-content.dialog-content-flex > * {
	min-height: 0;
}

/* Expansion panel whose content (e.g. a data grid) goes edge-to-edge without inner padding.
   The extra .mud-expand-panel keeps the specificity above MudBlazor's gutter rules because
   app.css is loaded before MudBlazor.min.css. */
.mud-expand-panel.mud-panel-flush .mud-expand-panel-content,
.mud-expand-panel.mud-panel-flush .mud-expand-panel-content.mud-expand-panel-gutters {
	padding: 0;
}

/* Gray column header for MudDataGrids, the group header rows use the same tint (via GroupClass="datagrid-group-row") */
.datagrid-gray-header thead .mud-table-cell {
	background-color: var(--mud-palette-background-gray);
}

.datagrid-gray-header .datagrid-group-row .mud-table-cell {
	background-color: var(--mud-palette-background-gray);
}

/* Prevent tooltip to overlap the layout */
.tooltip-clip-container .mud-tooltip-root {
	width: 100%;
}

/* Ensure nav menu tooltips take full width */
.mud-navmenu .mud-tooltip-root {
	width: 100%;
}

/* Disabled MudDataGrid row (combine with .grayed-out for the visual effect) */
.contract-row-disabled {
	pointer-events: none;
}

/* put checkbox left of mud-blazor expander */
.mud-data-grid .mud-table-cell.mud-datagrid-group .group-select-checkbox {
	order: -1;
	display: flex;
	align-items: center;
	margin-right: 16px;
}

.mud-data-grid .mud-table-cell.mud-datagrid-group .group-select-checkbox .mud-button-root {
	padding: 4px;
}

@keyframes table-row-flash {
	0%, 49.9% {
		background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
	}

	50%, 100% {
		background-color: transparent;
	}
}

.table-row-flash > td {
	animation: table-row-flash 1000ms step-end 3;
}

.table-row-selected {
	background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

/* Some helpers */
.overflow-hidden {
	overflow: hidden;
}

.scrollable {
	overflow-y: auto !important;
}

.color-info {
	color: var(--mud-palette-gray-dark);
}

.height-100p {
	height: 100%;
}

.width-100p {
	width: 100%;
}

.icon-large {
	font-size: 3.5rem !important;
}

.bold {
	font-weight: bold !important;
}

.italic {
	font-style: italic !important;
}

/* Grayed-out look for disabled/unavailable elements */
.grayed-out {
	opacity: 0.5;
}

/* Let alert content span the full alert width (e.g. for right-aligned actions inside a MudAlert) */
.alert-content-fill .mud-alert-message {
	flex: 1;
}

.alert-align-center .mud-alert-position {
	align-items: center;
}

/* Hides an element but keeps its height in the layout while collapsing its width, so siblings can
   use the full row width and the row height stays stable when it reappears (e.g. the action
   buttons in SelectionInfoAlert). min-width: 0 is required because flex items refuse to shrink
   below their content width. The children must not shrink into the zero width, otherwise their
   text wraps and inflates the height. */
.hidden-collapse-width {
	visibility: hidden;
	width: 0;
	min-width: 0;
	overflow: hidden;
}

.hidden-collapse-width > * {
	flex-shrink: 0;
}

/* Scroll container inside a .default-paper: extends the clipping edge sideways into the paper
   padding (16px), so hover shadows of full-width cards are not cut off. The inner padding pushes
   the content back to its original position.
   TODO: PaperBase (Scrollable="true") solves this properly by keeping the paper unpadded and
   padding the scroll container instead. Once the parcel parts subflow panels are migrated to an
   extended PaperBase (needs a header slot for back button/actions), this class can be removed. */
.paper-scroll-bleed {
	overflow: auto;
	margin: 0 -16px;
	padding: 0 16px;
}

.text-strikethrough {
	text-decoration: line-through !important;
}

/* Right-align input text, e.g. for money amounts in invoice-like layouts */
.input-text-end input {
	text-align: end;
}

/* Gray adornment text, matching the color-info unit suffixes used elsewhere */
.input-adornment-info .mud-input-adornment-text {
	color: var(--mud-palette-gray-dark);
}

/* Fixed-width amount column so values and inputs line up in invoice-like layouts */
.amount-column {
	flex: none;
	font-variant-numeric: tabular-nums;
	width: 150px;
}

/* Min height for MUD data grids */
.table-responsive:has(.min-height-less) {
	min-height: 250px !important;
}

/* Remove divider below last row in MUD data grids */
.mud-table-body .mud-table-row:last-child td {
	border-bottom: none;
}

/* Remove footers for grouped MUD data grids */
.mud-table-body .mud-table-row .footer-cell.mud-table-cell {
	display: none;
}

/* Add a divider above the table footer in MUD data grids; top-align all aggregate cells so
   single-line aggregates (e.g. points) line up with multi-line sums next to them */
.mud-table-foot .mud-table-row td {
	border-top: 2px solid var(--mud-palette-lines-default);
	vertical-align: top;
}

.drag-drop-input {
	cursor: pointer;
	opacity: 0;
}

.custom-toggle-group > .mud-button-filled {
	background-color: var(--mud-palette-gray-lighter) !important;
}

/* 
  Breakpoints per MudBlazor defaults:
  xs : max-width: 599.98px
  sm : (min-width: 600px)  and (max-width: 959.98px)
  md : (min-width: 960px)  and (max-width: 1279.98px)
  lg : (min-width: 1280px) and (max-width: 1919.98px)
  xl : (min-width: 1920px) and (max-width: 2559.98px)
  xxl: (min-width: 2560px)
*/

/* ---------------------- XS ---------------------- */

@media (max-width: 599.98px) {
	.width-xs-100 {
		width: 100px;
	}

	.width-xs-150 {
		width: 150px;
	}

	.width-xs-200 {
		width: 200px;
	}

	.width-xs-250 {
		width: 250px;
	}

	.width-xs-300 {
		width: 300px;
	}

	.width-xs-350 {
		width: 350px;
	}

	.width-xs-400 {
		width: 400px;
	}

	.width-xs-450 {
		width: 450px;
	}

	.width-xs-500 {
		width: 500px;
	}

	.width-xs-550 {
		width: 550px;
	}

	.width-xs-600 {
		width: 600px;
	}

	.width-xs-650 {
		width: 650px;
	}

	.width-xs-700 {
		width: 700px;
	}

	.width-xs-750 {
		width: 750px;
	}

	.width-xs-800 {
		width: 800px;
	}

	.width-xs-850 {
		width: 850px;
	}

	.width-xs-900 {
		width: 900px;
	}

	.width-xs-950 {
		width: 950px;
	}

	.width-xs-1000 {
		width: 1000px;
	}
}

/* ---------------------- SM ---------------------- */

@media (min-width: 600px) and (max-width: 959.98px) {
	.width-sm-100 {
		width: 100px;
	}

	.width-sm-150 {
		width: 150px;
	}

	.width-sm-200 {
		width: 200px;
	}

	.width-sm-250 {
		width: 250px;
	}

	.width-sm-300 {
		width: 300px;
	}

	.width-sm-350 {
		width: 350px;
	}

	.width-sm-400 {
		width: 400px;
	}

	.width-sm-450 {
		width: 450px;
	}

	.width-sm-500 {
		width: 500px;
	}

	.width-sm-550 {
		width: 550px;
	}

	.width-sm-600 {
		width: 600px;
	}

	.width-sm-650 {
		width: 650px;
	}

	.width-sm-700 {
		width: 700px;
	}

	.width-sm-750 {
		width: 750px;
	}

	.width-sm-800 {
		width: 800px;
	}

	.width-sm-850 {
		width: 850px;
	}

	.width-sm-900 {
		width: 900px;
	}

	.width-sm-950 {
		width: 950px;
	}

	.width-sm-1000 {
		width: 1000px;
	}
}

/* ---------------------- MD ---------------------- */

@media (min-width: 960px) and (max-width: 1279.98px) {
	.width-md-100 {
		width: 100px;
	}

	.width-md-150 {
		width: 150px;
	}

	.width-md-200 {
		width: 200px;
	}

	.width-md-250 {
		width: 250px;
	}

	.width-md-300 {
		width: 300px;
	}

	.width-md-350 {
		width: 350px;
	}

	.width-md-400 {
		width: 400px;
	}

	.width-md-450 {
		width: 450px;
	}

	.width-md-500 {
		width: 500px;
	}

	.width-md-550 {
		width: 550px;
	}

	.width-md-600 {
		width: 600px;
	}

	.width-md-650 {
		width: 650px;
	}

	.width-md-700 {
		width: 700px;
	}

	.width-md-750 {
		width: 750px;
	}

	.width-md-800 {
		width: 800px;
	}

	.width-md-850 {
		width: 850px;
	}

	.width-md-900 {
		width: 900px;
	}

	.width-md-950 {
		width: 950px;
	}

	.width-md-1000 {
		width: 1000px;
	}
}

/* ---------------------- LG ---------------------- */

@media (min-width: 1280px) and (max-width: 1919.98px) {
	.width-lg-100 {
		width: 100px;
	}

	.width-lg-150 {
		width: 150px;
	}

	.width-lg-200 {
		width: 200px;
	}

	.width-lg-250 {
		width: 250px;
	}

	.width-lg-300 {
		width: 300px;
	}

	.width-lg-350 {
		width: 350px;
	}

	.width-lg-400 {
		width: 400px;
	}

	.width-lg-450 {
		width: 450px;
	}

	.width-lg-500 {
		width: 500px;
	}

	.width-lg-550 {
		width: 550px;
	}

	.width-lg-600 {
		width: 600px;
	}

	.width-lg-650 {
		width: 650px;
	}

	.width-lg-700 {
		width: 700px;
	}

	.width-lg-750 {
		width: 750px;
	}

	.width-lg-800 {
		width: 800px;
	}

	.width-lg-850 {
		width: 850px;
	}

	.width-lg-900 {
		width: 900px;
	}

	.width-lg-950 {
		width: 950px;
	}

	.width-lg-1000 {
		width: 1000px;
	}
}

/* ---------------------- XL ---------------------- */

@media (min-width: 1920px) and (max-width: 2559.98px) {
	.width-xl-100 {
		width: 100px;
	}

	.width-xl-150 {
		width: 150px;
	}

	.width-xl-200 {
		width: 200px;
	}

	.width-xl-250 {
		width: 250px;
	}

	.width-xl-300 {
		width: 300px;
	}

	.width-xl-350 {
		width: 350px;
	}

	.width-xl-400 {
		width: 400px;
	}

	.width-xl-450 {
		width: 450px;
	}

	.width-xl-500 {
		width: 500px;
	}

	.width-xl-550 {
		width: 550px;
	}

	.width-xl-600 {
		width: 600px;
	}

	.width-xl-650 {
		width: 650px;
	}

	.width-xl-700 {
		width: 700px;
	}

	.width-xl-750 {
		width: 750px;
	}

	.width-xl-800 {
		width: 800px;
	}

	.width-xl-850 {
		width: 850px;
	}

	.width-xl-900 {
		width: 900px;
	}

	.width-xl-950 {
		width: 950px;
	}

	.width-xl-1000 {
		width: 1000px;
	}
}

/* ---------------------- XXL --------------------- */

@media (min-width: 2560px) {
	.width-xxl-100 {
		width: 100px;
	}

	.width-xxl-150 {
		width: 150px;
	}

	.width-xxl-200 {
		width: 200px;
	}

	.width-xxl-250 {
		width: 250px;
	}

	.width-xxl-300 {
		width: 300px;
	}

	.width-xxl-350 {
		width: 350px;
	}

	.width-xxl-400 {
		width: 400px;
	}

	.width-xxl-450 {
		width: 450px;
	}

	.width-xxl-500 {
		width: 500px;
	}

	.width-xxl-550 {
		width: 550px;
	}

	.width-xxl-600 {
		width: 600px;
	}

	.width-xxl-650 {
		width: 650px;
	}

	.width-xxl-700 {
		width: 700px;
	}

	.width-xxl-750 {
		width: 750px;
	}

	.width-xxl-800 {
		width: 800px;
	}

	.width-xxl-850 {
		width: 850px;
	}

	.width-xxl-900 {
		width: 900px;
	}

	.width-xxl-950 {
		width: 950px;
	}

	.width-xxl-1000 {
		width: 1000px;
	}
}

.state-button.no-click {
	pointer-events: none;
	cursor: default;
}

.state-button.completed {
	opacity: 0.4;
	transition: opacity 400ms ease-in-out;
}

.state-button .grid {
	display: inline-grid;
	align-items: center;
	justify-items: center;
}

.state-button .grid > span {
	grid-area: 1 / 1;
	visibility: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	gap: 8px;
}

.state-button.idle .grid > span.idle,
.state-button.processing .grid > span.processing,
.state-button.success .grid > span.success,
.state-button.failed .grid > span.failed {
	visibility: visible;
}

/* The MudText inherits font size and weight from the (small) button instead of its own typography */
.state-button .grid > span .text {
	white-space: nowrap;
	text-transform: uppercase;
	font-size: inherit;
	font-weight: inherit;
}

/* StateButton icons bypass MudButton's StartIcon wrapper (and its mud-button-icon-size-* font size),
   so mirror MudBlazor's small button icon size here instead of the larger mud-icon-size-small */
.state-button .grid > span .mud-icon-root {
	font-size: 1.125rem;
}

.hide-error-text .mud-input-control-helper-container {
	display: none;
}