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

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

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

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

/* Material Symbols icons: inherit font-size from parent so they can be sized via containers */
.mud-icon-root.material-symbols-outlined,
.mud-icon-root.material-symbols-filled {
	font-size: inherit;
}

/* Reusable icon container with background tint */
.icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	font-size: 18px;
}

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

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