.validation-message {
    color: var(--mud-palette-error);
}

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

#blazor-error-ui #blazor-error-content {
	display: flex;
	justify-content: center;
}

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

.mud-table-row.selected,
.mud-table-cell.selected,
.mud-grid.selected,
.mud-table-hover .mud-table-row.clickable:hover,
.mud-grid.clickable:hover {
	cursor: pointer !important;
	background: var(--mud-palette-table-hover) !important;
}

/*noinspection CssUnresolvedCustomProperty*/
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: inherit;
}

ul.mud-blazor-reset {
	padding: initial;
	list-style: initial;
	margin: initial;
}

/*
Some overrides so that the global search bar lights up better.
This is based on the reference application for the MudBlazor documents
 */
.global-search-bar .mud-input {
	height: 42px;
}
.global-search-bar.mud-input-control {
	background-color: var(--mud-palette-primary-lighten);
	margin-bottom: 5px;
	height: 42px;
	min-width: 350px;
	max-width: 500px;
	float: right;
	border-radius: var(--mud-default-borderradius);
}
.global-search-bar .mud-input.mud-input-outlined .mud-input-outlined-border {
	border: none;
	border-radius: var(--mud-default-borderradius);
}

.global-search-bar .mud-input.mud-input-outlined input,
.global-search-bar .mud-input.mud-input-outlined svg {
	color: #ffffff;
}

/*
	This is added because the default from tinyMCE's stylesheet is 1300 which means that dropdowns in a TinyMCE editor
	will not appear if it is in a modal dialog
 */
.tox-tinymce-aux {
	z-index: 13000 !important;
}

/*
-------------------Application Loading Progress Indicator start----------------------
This is an element that shows while the app is downloading needed resources
*/
.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}

.loading-progress circle {
	fill: none;
	stroke: #e0e0e0;
	stroke-width: 0.6rem;
	transform-origin: 50% 50%;
	transform: rotate(-90deg);
}

.loading-progress circle:last-child {
	stroke: #1b6ec2;
	stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
	transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
	position: absolute;
	text-align: center;
	font-weight: bold;
	inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
	content: var(--blazor-load-percentage-text, "Loading");
}
/*
-------------------Application Loading Progress Indicator end----------------------
*/

/*
 The MudTab component has a class that sets the text of a tab panel to be centered by setting the
 justify-content value to "center". This utility class is used to reset it to its default CSS value
 and is used on vertical tabs so that the content of the tab panel is not centered
 */
.justify-content-initial {
	justify-content: initial;
}

/*
This will add vertical scroll
 */
.scroll-y {
	overflow-y: scroll;
	overflow-x: hidden;
}

/*
This will add vertical scroll and max height for modals
 */
.modal-content-max-y {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 65vh;
}

.page-content-max-y {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 65vh;
}

/*
For some reason the MudBlazor team added gutters of 24 px to the toolbar of a MudDataGrid causing it to have a weird indent that we have no control over.
So this override removes this.
 */
.mud-data-grid .mud-toolbar-gutters,
.mud-table .mud-toolbar-gutters {
	padding-left: 16px;
	padding-right: 16px;
}

.mud-toolbar-nogutters > .mud-toolbar-gutters,
.mud-toolbar-nogutters > .mud-toolbar-gutters {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.zero-height-toolbar > .mud-toolbar {
    height: 0 !important;
}

/*
The defaults provided by the MudBlazor stylesheet for these three selectors are just odd and cause buttons to not be aligned with content,
MudPaper elevations to be clipped, and are just odd. These three overrides bring order to the chaos.
 */
.mud-dialog .mud-dialog-title {
	padding: 12px 12px 5px !important;
}

.mud-dialog .mud-dialog-content {
	padding: 5px 12px !important;
}

.mud-dialog .mud-dialog-actions {
	padding: 5px 12px 12px !important;
}

/*
MudBlazor has a relatively long-standing issue open regarding FixedHeaders used with the filter option DataGridFilterMode.ColumnFilterRow.
This class may be used as a bandage solution to give us the expected behaviour.
https://github.com/MudBlazor/MudBlazor/issues/7464
 */
.sticky-header {
	top: 0;
	position: sticky;
	z-index: 1;
	background-color: var(--mud-palette-surface);
}

.widget-data-cell-extra-dense {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/*
The CodeBeam MudBlazor extensions NuGet package has a MudSection component that we can use to enable an HTML Grid layout rather than flexbox.
These overrides help tidy things up a little bit for us
 */

.mud-section {
	/* This prevents unwanted scrollbars from appearing */
	overflow: initial !important;
}

/* removes margin on the selected text for CodeBeam's MudSelectExtended component */
.mud-select-extended .mud-select-input-extended {
	margin-left: 0 !important; 
}

/* fixes an issue where mud data grids within a secondary mud tab are not displaying in full width */
.mud-tabs-panels .mud-tabs-vertical .mud-tab-panel {
	width: 100% !important;
	padding-right: 10px !important;
}

/*
Prevents selected text in MudSelectExtended from wrapping to multiple lines.
Without this, long values break the layout and overflow the input.
Forces single-line display with ellipsis truncation.
 */
.mud-select-input-extended {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/*
One of our extension libraries for MudBlazor breaks the highlighting by making the colour of the text transparent.  (Why?  who knows?)
This puts it back to the default.
 */
mark {
    color: initial !important;
}

.full-size {
    width: 100%;
    height: 100%;
}

.min-height-0 {
    min-height: 0;
}