:root {
	/* Overwrite default Mud Blazor primary and secondary colours with Naus blue and Mandalay orange */
	--mandalay-orange: #FF5C01;
	--mandalay-orange-lighten: rgb(244 67 54 / 39%);
	--success-green: rgb(6 215 12);
	--very-light-grey: #cfc8c83d;
	--mud-palette-primary: var(--mandalay-orange) !important;
	--mud-palette-primary-lighten: var(--mandalay-orange-lighten) !important;
	--mud-palette-primary-darken: #DE5100 !important;
	--mud-palette-secondary: #ff5722 !important;
	--mud-palette-secondary-darken: #ff3822 !important;
	--small-font-size: 0.8em;
	--normal-font-size: 1em;
	--lp-font-family: Courier New, Courier, monospace
}

html, body {
	/*Disable swipe gesture for page navigation on devices*/
	overscroll-behavior-x: none;
	/*Disable pull to refresh on devices*/
	overscroll-behavior-y: contain;
}

@media screen and (max-width: 428px) {
	.heading-font-size {
		font-size: 1em;
	}

	.text-font-size {
		font-size: var(--normal-font-size);
	}
}
@media screen and (min-width: 428px) {
	.heading-font-size {
		font-size: 1.25em;
	}

	.text-font-size {
		font-size: var(--normal-font-size);
	}
}

/* Mud Blazor Overrides */
.mud-chip-outlined.mud-chip-color-primary.mud-chip-selected {
	color: var(--mud-palette-info) !important;
}
.mud-slider.mud-slider-primary .mud-slider-input::-webkit-slider-runnable-track {
	background-color: var(--mandalay-orange-lighten) !important;
}
.mud-slider.mud-slider-primary .mud-slider-input::-moz-range-track {
	background-color: var(--mandalay-orange-lighten) !important;
}
button[aria-label='close'] {
	color: var(--mandalay-orange) !important;
}
button.mud-button {
	height: 24px !important
}

/* Device overrides where hover is not a thing */
@media (hover: none) {
	/*
		Override default behaviour on a device, which is to unset the button background colour, which
		results in a white background with white text. The below simply mimics non-device behaviour.
		This fix is only required for the NumericKeyPad component, hence the data attribute usage.
	*/
	button[data-nkp-value].mud-button-filled.mud-button-filled-primary:hover {
		background-color: var(--mud-palette-primary-darken) !important
	}

	/*
		Avoids sticky hover on devices for disabled buttons ensuring that when the user taps a button
		and it then becomes disabled, the relevant disabled css is applied to the button.
	*/
	.mud-button-filled.mud-button-filled-primary:hover:disabled {
		background: var(--mud-palette-action-disabled-background) !important;
	}
}

/* Ensure that the Mud Blazor placeholder text uses the small font size on small displays */
@media screen and (max-width: 428px) {
	.me-auto {
		font-size: var(--small-font-size) !important;
	}
}

/* Ensure that the Mud Blazor chip content text uses the small font size on small displays */
@media screen and (max-width: 428px) {
	.mud-chip-content {
		font-size: var(--small-font-size) !important;
	}
}

/* Dialog styles shared amongst all custom dialog components */
.dialog-title-container {
	display: inline-flex;
}

.dialog-icon {
	margin-right: 4px;
	height: auto !important;
}

/* TicketsGrid */
@media screen and (max-width: 428px) {
	input[data-id='TicketsGridBase__filterField'] {
		font-size: var(--small-font-size) !important;
	}

	.mud-table-container {
		overflow: hidden !important;
	}
}

/* TicketDetails */
.lp-container > div > div > div {
	margin-top: 0px !important;
}

div.comment-container > .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
	margin-top: -12px !important;
}

@media screen and (max-width: 428px) {
	input[data-id='TicketDetailsBase__licensePlateField'] {
		font-size: var(--small-font-size) !important;
	}
}

/* TicketDetails and TicketVehicleImages (shared) */
.ticket-meta-data {
	background-color: #cfc8c83d;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 3px;
	margin-top: 8px;
	margin-bottom: 8px;
}

::deep .ticket-meta-data-username {
	white-space: nowrap;
}

/* EditLicensePlateDialog */
.lp-text > div > div > input {
	text-transform: uppercase;
	font-family: var(--lp-font-family) !important;
}

.lp-readonly {
	font-family: var(--lp-font-family)
}

/* TicketItemList */
.ticketitem > div > div {
	margin-top: 0px !important;
}

@media screen and (max-width: 428px) {
	.ticketitem-product > div > div > input {
		font-size: var(--small-font-size) !important;
	}

	.ticketitem-qty > div > div > input {
		font-size: var(--small-font-size) !important;
	}
}

/* ProductSelectionDialog */
@media screen and (max-width: 428px) {
	input[data-id=ProductSelectionDialogBase__productNameFilterText] {
		font-size: var(--small-font-size) !important;
	}

	input[data-id=ProductSelectionDialogBase__measurementTypeSelect] {
		font-size: var(--small-font-size) !important;
	}

	.product-selection-dialog {
		width: 100%;
	}
}

/* NumericKeyPad */
input[data-id='NumericKeyPadBase__kpValue'] {
	color: var(--mud-palette-primary) !important;
	font-weight: bold !important;
	text-align: right;
	padding-top: 6px !important;
}

/* Global styles */

/* We don't want disabled MudTextField's with an adornment (button) to render the text as disabled, only the button */
input[disabled].mud-input-root-adorned-end {
	color: var(--mud-palette-text-primary) !important;
}

.font-size-normal {
	font-size: var(--normal-font-size);
}

.font-size-small {
	font-size: var(--small-font-size);
}

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

.colour-success-green {
	color: var(--success-green);
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-centre {
	text-align: center;
}

.text-start {
	text-align: start;
}

.text-end {
	text-align: end;
}

.bg-c-black-10pc {
	background-color: rgb(0 0 0 / 10%);
}

.bg-c-theme-palette {
	background-color: var(--mud-palette-background);
}

.pointer {
	cursor: pointer;
}

.d-grid {
	display: grid;
}

.d-inline {
	display: inline;
}

.jc-space-between {
	justify-content: space-between
}

.w-100pc {
	width: 100%;
}

.w-0 {
	width: 0px !important;
}

.h-100pc {
	height: 100%;
}

.mt-auto {
	margin-top: auto;
}

.mb-auto {
	margin-bottom: auto;
}

.va-bottom {
	vertical-align: bottom
}

.small-loading-indicator {
	height: 12px !important;
	width: 12px !important;
}

.closed-disc-list {
	list-style-type: disclosure-closed
}

.text-overflow-wrap-anywhere {
	overflow-wrap: anywhere
}

.ticket-meta-data-label {
	color: var(--mud-palette-text-primary);
}

.text-wrap {
	white-space: pre-wrap;
}