:root {
	--mw-appbar-height:64px; /* overridden at smaller screen sizes; can be used in height calcs, ie: for map height */
	--mw-content-margin-top:16px;
	--mw-content-height:calc(100vh - var(--mw-appbar-height) - (var(--mw-content-margin-top) * 2) + 4px);
	--mw-blue:#2d75e9;
	--mw-green:#1cc420;
	--mw-orange:#f46f25;
	--mw-purple:#420098;
	--mw-yellow:#ffdc00;
	/*--mw-gray-100:#f8f9fa;*/
	--mw-gray-200:#e9ecef;
	/*--mw-gray-300:#dee2e6;*/
	/*--mw-gray-400:#ced4da;*/
	--mw-gray-500:#adb5bd;
	--mw-gray-600:#6c757d;
	/*	--mw-gray-700:#495057;
		--mw-gray-800:#343a40;
		--mw-gray-900:#212529;*/

	--kendo-color-primary: var(--mud-palette-primary);
	--kendo-color-on-primary: var(--mud-palette-primary-text);
/*	--kendo-color-primary-hover: var(--mud-palette-primary-darken);
	--kendo-color-primary-active: var(--mud-palette-primary-darken);
	--kendo-color-primary-subtle: var(--mud-palette-primary-lighten);*/

	--kendo-color-secondary: var(--mud-palette-secondary);
	--kendo-color-on-secondary: var(--mud-palette-secondary-text);
/*	--kendo-color-secondary-hover: var(--mud-palette-secondary-darken);
	--kendo-color-secondary-active: var(--mud-palette-secondary-darken);
	--kendo-color-secondary-subtle: var(--mud-palette-secondary-lighten);*/

	--kendo-color-tertiary: var(--mud-palette-tertiary);
	--kendo-color-on-tertiary: var(--mud-palette-tertiary-text);
/*	--kendo-color-tertiary-hover: var(--mud-palette-tertiary-darken);
	--kendo-color-tertiary-subtle: var(--mud-palette-tertiary-lighten);*/

	--kendo-color-success: var(--mud-palette-success);
	--kendo-color-on-success: var(--mud-palette-success-text);

	--kendo-color-info: var(--mud-palette-info);
	--kendo-color-on-info: var(--mud-palette-info-text);

	--kendo-color-warning: var(--mud-palette-warning);
	--kendo-color-on-warning: var(--mud-palette-warning-text);

	--kendo-color-error: var(--mud-palette-error);
	--kendo-color-on-error: var(--mud-palette-error-text);

	/* ─── Neutral surfaces & text ──────────────────────────────────── */
	--kendo-color-app-surface: var(--mud-palette-background); /* page */
	--kendo-color-surface: var(--mud-palette-surface); /* cards */
	--kendo-color-surface-alt: var(--mud-palette-drawer-background);
	--kendo-color-on-surface: var(--mud-palette-text-primary);
	--kendo-color-on-app-surface: var(--mud-palette-text-primary);
	--kendo-color-on-base: var(--mud-palette-drawer-text);
	--kendo-color-subtle: var(--mud-palette-drawer-text);
	--kendo-color-text-subtle: var(--mud-palette-text-secondary);
	--kendo-color-on-surface-disabled: var(--mud-palette-text-disabled);
	--kendo-color-base: var(--mud-palette-background-gray); /* very-light neutral */
	--kendo-color-base-hover: var(--mud-palette-table-hover);
	--kendo-color-base-subtle: var(--mud-palette-table-striped);
	--kendo-color-base-active: var(--mud-palette-table-hover);

	/* ─── Borders & separators ─────────────────────────────────────── */
	--kendo-color-border: var(--mud-palette-lines-default);
	--kendo-color-border-alt: var(--mud-palette-lines-inputs);

	/* ─── Top app-bar & actions ────────────────────────────────────── */
	/*--kendo-color-appbar: var(--mud-palette-appbar-background);*/
	/*--kendo-color-on-appbar: var(--mud-palette-appbar-text);*/

	--kendo-color-action-default: var(--mud-palette-action-default);
	--kendo-color-action-disabled: var(--mud-palette-action-disabled);
	--kendo-color-action-disabled-bg: var(--mud-palette-action-disabled-background);
}

/* styles that can have media query overrides */
.mw-header { font-size:28px; margin-bottom:6px; line-height:1.0; display:flex; align-items:center; gap:8px; } /* line-height prevents too much vertical space when the header wraps */
.mw-header > small { font-size:.7em; margin-top:6px; color:var(--mw-gray-600); }
.mw-header-sub { font-size:20px; }
.mw-header-colored { font-size:16px; font-weight:bold; padding:8px 12px 6px 12px; border-radius:4px; background-color:var(--mud-palette-action-disabled-background); color:var(--mud-palette-text-primary); } /* full width header that works with light/dark modes */
.mw-layout-icons { position:absolute; top:0; left:109px; }
.mw-layout-icons svg { width:15px; height:15px; }
.mw-layout-icons span { position:relative; top:-3px; margin-left:1px; padding:0 2px; font-size:.9em; }
.mw-layout-app-name { top:38px; font-family:montserrat; letter-spacing:2px; }
.mw-layout-username { max-width:480px; }
.mud-container { margin-top:var(--mw-content-margin-top); }
.mud-expand-panel .mud-expand-panel-header { padding:0 16px; } /* reduce the vertical padding in panel headers */
.mud-dialog-width-false { width:80vw; max-width:none; } /* override max-width from mud css so our widths get applied */
.mud-dialog .mud-dialog-content { padding:2px 16px; }

@media (max-width:1279.98px) { /* md overrides */
	.mud-card-content { padding:8px; } /* default was 16px */
}

@media (max-width:959.98px) { /* sm overrides (phones in landscape mode) */
	:root {
		--mw-appbar-height:56px;
		--mw-content-margin-top:12px;
	}
	.mw-layout-icons { left:98.5px; }
	.mw-layout-app-name { top:32px; font-size:.9em; }
	.mw-layout-username { max-width:215px; } /* max before it could shift the top right menu */
	.mw-header { font-size:24px; gap:4px; }
	.mw-header > small { margin-top:4px; margin-left:2px; }
	.mw-header-sub { font-size:16px; }
	.mw-header-colored { padding:6px 12px 4px 12px; }

	.mud-main-content { padding-top:var(--mw-appbar-height); }
	.mud-container { padding-left:8px; padding-right:8px; } /* default was 16px */
	.mud-appbar { height:var(--mw-appbar-height); }
	.mud-appbar img { height:30px; }
	.mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always { top:var(--mw-appbar-height); height:calc(100vh - var(--mw-appbar-height)); } /* bumps the drawer up to match where our smaller appbar is while still allowing it to be full height and properly scroll */

	.mud-expand-panel .mud-expand-panel-header { min-height:44px; font-size:.9rem; }
	.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters { padding:0 12px 12px 12px; }

	.mud-treeview-dense .mud-treeview-item-content { padding:0; } /* default was 0 4px */
	.mud-treeview-item-arrow { margin:0; } /* default was 1px 4px */

	.mud-dialog-width-false { width:92vw; }
	.mud-dialog .mud-dialog-content { padding:0 12px; }
}

@media (max-width:599.98px) { /* xs overrides (phones in portrait mode) */
	.mw-layout-icons { left:90.5px; }
	.mud-dialog-width-false { width:96vw; }
	.mud-dialog .mud-dialog-content { padding:0 8px; }
}

@media (max-width:480px) {
	.mud-dialog-width-xs { width:96vw; } /* prevents confirmation dialogs from taking 100% width at this size */
}

/* custom mars styles that dont have media query overrides */
.mw-label-ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw-button-row .mud-button { margin-bottom:5px; }
.mw-scroll-top { scroll-margin-top:calc(var(--mw-appbar-height) + 10px); }
.mw-small-print { font-size:.85em; color:var(--mw-gray-600); }
.mw-fine-print { font-size:9px; color:var(--mw-gray-500); }
.mw-img-fluid { max-width:100%; height:auto; }
.mw-dialog-opener > .mud-input-control-input-container * { cursor:pointer; } /* ensure all form dialog opener controls have a pointer cursor to look consistent with select controls; the wildcard is required for all children of the mud container to receive the style */
pre.mw-json { font-size:9px; color:var(--mud-palette-text-primary); background:var(--mud-palette-background-gray); margin:4px 0; padding:8px; border-radius:4px; overflow-x:auto; }
.mw-tile {
	border:solid 1px var(--mud-palette-divider);
	border-radius:4px;
	color:var(--mud-palette-text-primary);
	margin-bottom:12px;
	padding:3px;
	display:flex;
	overflow:hidden; /* prevents content running over the edge in extreme cases */
}
.mw-tile, .mw-tile .mud-input, .mw-tile .mud-button-group-root { background-color:var(--mud-palette-drawer-background); } /* input should always have the same bgcolor as the tile (important for readings where logic can change the tile bg color) */
.mw-tile .mw-tile-chevron { padding:8px; }
.mw-chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.mw-chip-md { border-radius:8px; white-space:nowrap; font-size:12px; padding:3px 8px; }
.mw-chip-sm { border-radius:8px; white-space:nowrap; font-size:11px; padding:1px 6px; }
.mw-chip-xs { border-radius:8px; white-space:nowrap; font-size:10px; padding:1px 5px; }
.mw-chip-bordered { border:solid 1px var(--mud-palette-lines-default); }

/* fix for date, time, datetime inputs on iphone that are tiny vertically otherwise, this targets only those input types and sets a min-height */
.mud-input.mud-input-outlined.mud-input-margin-dense:has(input[type="datetime-local"]),
	.mud-input.mud-input-outlined.mud-input-margin-dense:has(input[type="date"]),
	.mud-input.mud-input-outlined.mud-input-margin-dense:has(input[type="time"]) { min-height:40px; }

a { color:#0071c1; }
.fw-bold { font-weight:bold; }
.invalid { border:1px solid red; }
.validation-message { color:red; }

/* dotnet uses the id #blazor-error-ui under the hood so we need to keep it, mudblazor has styles overriding #blazor-error-ui, we have to override some and some are duplicated as they also need to apply to our #blazor-update-ui */
#blazor-error-ui, #blazor-update-ui, #blazor-update-error-ui {
	color:white;
	bottom:20px;
	display:none;
	padding:.7rem 10px;
	position:fixed;
	left:0;
	width:94vw;
	transform:translate(calc(50vw - 50%));
	border-radius:4px;
	z-index:9999; /* increased from 1000 so it appears above the mud drawer */
	box-shadow:none; /* set to none because mudblazor adds one to the error ui */
	font:14px Roboto; /* if an error occurrs during app init the font needs to be explicitly set as we havent loaded the layout yet */
}
#blazor-error-ui, #blazor-update-error-ui { background:var(--mw-orange); } /* cant use mud variables */
#blazor-update-ui { background:var(--mw-green); } /* cant use mud variables */
#blazor-error-ui span, #blazor-update-ui span, #blazor-update-error-ui span { margin-left:2px; border-radius:4px; padding:.2rem 8px .15rem 8px; background:white; color:#444; cursor:pointer; }
#blazor-error-ui .dismiss, #blazor-update-ui .dismiss, #blazor-update-error-ui .dismiss { color:white; cursor:pointer; position:absolute; right:10px; top:.75rem; }

/* mudblazor overrides */
.mud-drawer-header.mud-drawer-header-dense { min-height:auto; padding:8px 8px 0 18px; font-size:15px; }
.mud-alert { font-size:1.05em; } /* makes all alerts have 5% bigger font */
.mud-tabs-tabbar { background-color:var(--mud-palette-divider); } /* gives tabs more noticeable separation in light mode */
.mud-tab { padding:6px 3px; letter-spacing:normal; text-transform:none; } /* defaults: padding:6px 12px */
.mud-tab.mud-tab-active { color:var(--mud-palette-info); } /* default was mud-palette-primary */
.mud-tabs-scroll-button button { padding:12px 6px; } /* makes the left/right scroll buttons take less horizontal width but stay the same height as the rest of the tab toolbar, default was 12px on all sides*/
.mud-simple-table table * tr>td, .mud-simple-table table * tr th { font-size:12px; line-height:1.2; } /* selector exactly overwrites default */
.mud-simple-table.mud-table-dense * tr td, .mud-simple-table.mud-table-dense * tr th { padding:8px 10px; } /* selector exactly overwrites default, defaults: 6px 16px */
.mud-input-helper-text { font-size:.7rem; line-height:1.2; } /* defaults: font-size:.75rem, line-height:1.6 */
.mud-badge { font-size:10px; height:15px; min-width:18px; padding:3px 5px; } /* globally makes badges smaller */
.mud-list-item-icon { min-width:30px; } /* default was 56px which is huge */
.mud-input-label-outlined { background-color:var(--mud-palette-background); } /* in 8.1 they changed this to be transparent, it causes the label and required asterisk to get a line through, as of 8.8 just the asterisk has the line through */

/* telerik grid overrides */
/*.k-grid { border-color:var(--mud-palette-divider-light); }*/ /* for dark mode */
/*.k-grid .k-table-thead, .k-grid .k-grid-header, .k-grid .k-pager, .k-grid .k-grid-content { color:var(--mud-palette-drawer-text); background-color:var(--mud-palette-drawer-background); }*/ /* for dark mode, k-grid-content is needed for grids that dont have enough rows to fill their available space and .k-grid-header is needed for the sliver of scrollbar at the end of the header/filter rows */
/*.k-grid .k-header span.k-link:hover { color:var(--mw-blue); }*/ /* makes the hover color visible in both light/dark modes */
/*.k-grid .k-grid-header .k-sorted, .k-grid .k-grid-header .k-sort-icon { color:var(--mud-palette-text-primary); }*/ /* for dark mode */
/*.k-grid tbody tr.k-table-row, .k-grid tbody tr.k-table-row.k-table-alt-row { color:var(--mud-palette-text-primary); background-color:var(--mud-palette-background); }*/ /* for dark mode, colors for all regular grid rows */
/*.k-grid .k-hierarchy-cell .k-svg-icon { color:unset; }*/ /* difficult with all possible row and hover colors to always have the detail row expand icon look ok, this seems to compromise between all permutations */
/*.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover { background-color:var(--mud-palette-divider-light); }*/ /* row hover color is very tricky as we sometimes want to apply custom row colors that would be overwritten and sometimes text isnt readable on light/dark modes; telerik grid also is quirky with alternating rows where explicit colors have not been set */
.k-grid .k-table-row.k-detail-row, .k-grid .k-table-row.k-detail-row:hover { background-color:var(--mud-palette-background); } /* prevent the default telerik hover color in detail rows as it can be very jarring with forms in detail rows, including .k-table-row forces alt rows to also follow this rule */

.k-grid th.k-table-th { padding:6px 4px; font-size:13px; }
.k-grid td.k-table-td { padding:6px 4px; font-size:11px; line-height:1.1; }

.k-grid .k-filter-row td.k-table-td { padding:4px; }
.k-grid .k-filter-row input, .k-grid .k-filter-row .k-input-inner { font-size:12px; padding:4px; } /* smaller filter row inputs; .k-input-inner is needed for dropdown filters such as the one made automatically for boolean columns */
.k-grid .k-filter-row .k-filtercell-wrapper > span.k-picker, .k-grid .k-filter-row .k-filtercell-wrapper > span.k-input { height:26px; } /* ensures all filter controls including pickers and dates are the same height */
.k-grid .k-filter-row .k-filtercell-wrapper .k-numerictextbox .k-input-spinner { display:none; } /* remove spinners from filter row numeric filters */
.k-grid .k-filter-row .k-filtercell-operator button { width:24px; height:24px; }
.k-grid .k-filter-row button:not(.k-disabled) span.k-svg-i-filter-clear { color:var(--mud-palette-error); } /* red icon for cancel filter button */
.k-grid .k-grouping-header { font-size:12px; line-height:1.2; }

.k-grid .k-grid-pager { font-size:11px; }
.k-grid .k-grid-pager .k-dropdownlist { padding:0 4px; }
.k-grid .k-grid-pager .k-dropdownlist span.k-input-inner { font-size:13px; padding:2px 4px; margin-top:2px; }

/* dropdown filter/pager lists within the grid are outside the grid so they can only be accessed this way; this will likely affect other telerik dropdowns */
.k-list .k-list-ul li.k-list-item { font-size:13px; padding:4px 6px 4px 8px; }
.k-list .k-list-ul li.k-list-item.k-selected { color:var(--mud-palette-success-text); background-color:var(--mud-palette-success); } /* override telerik default red text selected style */