:root {
	--color-grey-light: #f7f7f7;
	--color-grey-dark: #b1b1b1;
	--color-grey-darker: #919191;
	--color-grey-verydark: #6a6a6a;
	--color-menu-active-bg: #df1f1a;
	--color-menu-active-fg: #faffff;
	--color-text-dark: #000000;
	--color-text-light: #ffffff;
	--color-button-bg: #1e1e1e;
	--color-button-fg: #ffffff;
	--color-button-hover: #df1f1a;
	--color-table-head-bg: #131313;
	--color-table-head-fg: #ffffff;
	--color-panel-bg: #ffffff;
	--color-panel-fg: #000000;
	--color-head-1: #df1f1a;
	--color-link: #000000;
	--color-accent: #df1f1a;
	--color-bg-form: #ffffff;
	--color-bg-form-section: #ffffff;
	--color-fg-form-section: #1e1e1e;
}


html, body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
}

html {
	margin-left: calc(100vw - 100%);
	margin-right: 0; /* avoid horizontal jump when switching between pages with and without vertical scrollbar */
}

body {
	background-color: var(--color-grey-light);
}

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

TD.td-preformatted {
	white-space: pre-wrap;
	font-family: monospace;
	font-size: 86%;
	color: var(--bs-success);
}

.logo-main {
	width: 142px;
}

.page {
	background-color: var(--color-panel-bg);
	padding: 0;
}

.module-header {
	padding: 2rem 1.75rem 1rem 1.75rem;
}

.module-content {
	padding: 2rem 1.75rem 3rem 1.75rem;
}

.module-menu {
	background-color: var(--color-grey-dark);
	margin-left: 0rem;
	margin-right: 0rem;
}

	.module-menu .nav-link {
		color: var(--color-menu-active-fg);
		border: none;
		white-space: nowrap;
		padding: 1rem 0.5rem 1rem 0.5rem;
		font-size: 0.95rem;
	}

		.module-menu .nav-link i {
			margin-right: 0.5rem;
		}

		.module-menu .nav-link:hover {
			background-color: var(--color-grey-verydark);
			color: var(--color-menu-active-fg);
		}

		.module-menu .nav-link.active {
			background-color: var(--color-menu-active-bg);
		}


.module-menu-empty {
	min-height: 0.5rem;
	margin-top: 2rem;
}

.module-menu-separator {
	background-color: var(--color-menu-active-bg);
	min-height: 0.5rem;
	background-color: var(--color-menu-active-bg);
	margin-bottom: 2rem;
	margin-left: 0rem;
	margin-right: 0rem;
}


#labelHamburger {
	font-size: 300%;
	color: var(--color-menu-active-bg);
	cursor: pointer;
}


#cbHamburger {
	position: absolute;
	left: -1000px;
	top: -1000px;
	visibility: hidden;
}

/* we should not use global rules such as h1, h2, a, form,... to avoid conflicts with custom css used for webs of individual cities */
.container h1 {
	margin-left: 0;
	padding-left: 0;
	font-size: 200%;
	color: var(--color-head-1);
	margin-bottom: 1rem;
}

	.container h1:focus {
		outline: none;
	}

.container h3 {
	color: var(--color-head-1);
	padding-left: 0 !important;
}


.container a, .btn-link, .nav-link {
	color: var(--color-link);
}

	.container a:hover, .btn-link:hover, .nav-link:hover {
		color: var(--color-head-1);
	}

	.container a:active, .btn-link:active, .nav-link:active, /*a:focus,*/ .btn-link:focus /*, .nav-link:focus */ {
		color: var(--color-head-1);
	}


.label-important {
	color: var(--color-head-1);
}


.nav-tiles {
	font-size: 1rem;
	margin-top: 1rem;
}

	.nav-tiles > .nav-link {
		padding: 2rem;
		white-space: nowrap;
		border: 2px solid var(--color-grey-dark);
		border-radius: 0.5rem;
		text-align: center;
		margin: 0.5rem;
	}

		.nav-tiles > .nav-link:hover, .nav-tiles > .nav-link:active {
			background-color: var(--color-grey-verydark);
			color: var(--color-menu-active-fg);
		}


.nav-horizontal {
	/*display: flex;*/
}

	.nav-horizontal > .nav-link {
		display: inline-block;
		border-right: 1px solid var(--color-grey-dark);
	}

		.nav-horizontal > .nav-link:first-of-type {
			padding-left: 0;
		}

		.nav-horizontal > .nav-link:last-of-type {
			border-right: none;
		}

		.nav-horizontal > .nav-link.active {
			color: var(--color-head-1);
		}

.page-box {
	/*border: 1px solid var(--color-button-fg);*/
	margin-top: 1rem;
	padding: 0;
}

.page-box-grey {
	border: 1px solid var(--color-grey-dark);
	background-color: var(--color-grey-light);
}

.page-box-light-top {
	border-bottom: 1px solid var(--color-grey-light);
	margin-bottom: 2rem;
}

.page-box-light-bottom {
	border-top: 1px solid var(--color-grey-light);
	margin-top: 3rem;
}

	.page-box-light-top button, .page-box-light-bottom button {
		font-size: 90%;
	}

.page-box-padding {
	padding: 0.5rem;
}

.page-box .tablabel {
	padding-top: 0.5rem;
}


.container form {
	background-color: var(--color-bg-form);
}

.form-no-background form {
	background-color: unset;
}

.container form label {
	/*margin-top: 0.75rem;*/

	margin-bottom: 0.25rem;
	font-weight: bold;
	color: var(--color-grey-verydark);
}

	.container form label.form-check-label {
		margin-top: unset;
	}

.container form .form-check {
	margin-top: 1rem;
}

.container form .form-row {
	/*padding-left: 0.5rem;*/
	border-top: 1px solid var(--color-text-light);
	padding-bottom: 1rem;
}


.form-buttons {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 0.75rem;
	border-top: 1px solid var(--color-text-light);
	background-color: var(--color-panel-bg);
}

.form-section {
	margin-top: 1rem;
	color: var(--color-fg-form-section);
	background-color: var(--color-bg-form-section);
	padding: 1rem 0.5rem 1rem 0rem;
	font-size: 150%;
}

.form-inline {
	padding: 1rem 1rem;
}

	.form-inline label, .form-inline .form-control, .form-inline button {
		/*display: inline;*/
		/*width: auto;*/
		font-size: 90%;
		margin-right: 0.25rem;
	}

	.form-inline .label-inner {
		color: var(--color-grey-verydark);
		font-weight: bold;
		display: inline;
	}

	.form-inline .form-control-inline {
		display: inline-block;
		width: auto;
	}

	.form-inline .toggle-selector .btn {
		color: var(--color-grey-verydark);
		font-weight: bold;
	}


.container form .form-hint {
	padding: 0.25rem 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 90%;
	color: var(--color-grey-verydark);
	font-style: italic;
}

	.container form .form-hint a {
		color: var(--color-table-head-bg);
		cursor: pointer;
	}

.btn-primary {
	color: var(--color-button-fg);
	background-color: var(--color-button-bg);
	border-color: var(--color-button-bg);
}

	.btn-primary:focus, .btn-primary:active {
		color: var(--color-button-fg);
		background-color: var(--color-button-bg);
	}

	.btn-primary:hover {
		background-color: var(--color-button-hover);
		border-color: var(--color-button-hover);
	}

.icon-button {
	padding-left: 0rem;
	text-decoration: none;
}

.important {
	color: var(--color-accent);
}

.table-grid th.muted {
	color: var(--color-grey-verydark);
	border-bottom-color: var(--color-table-head-fg)!important;	/* avoid colorizing the bottom border by the muted color */
}

.table-grid td.muted {
	color: var(--color-grey-verydark);
}


.current-user {
	/*text-align: center;*/
	text-align: left;
}

.current-user-name {
	font-weight: bold;
	color: var(--color-accent);
}

.current-user-role {
	font-size: 78%;
}


.current-user-button {
	font-weight: bold;
}


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

.invalid {
	outline: 1px solid red;
}

.validation-message {
	margin-top: 0.25rem;
	color: red;
}

.toggle-selector {
	/*border:2px dashed red;*/
}

	.toggle-selector button, .toggle-selector button:active, .toggle-selector button:focus {
		border: none;
		box-shadow: none;
		white-space: nowrap;
	}


#blazor-error-ui {
	background: lightyellow;
	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 .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;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

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


.app-messages {
	position: fixed;
	top: 0;
	z-index: 999999;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
}

	.app-messages .badge {
		min-width: 2.0rem;
		display: inline-block;
		border-radius: 0.5rem;
		margin-right: 0.25rem;
	}

.animate-disappear {
	opacity: 1;
	animation: animateDisappearFrames 1.5s;
	animation-delay: 2.0s;
	animation-fill-mode: forwards;
}

@keyframes animateDisappearFrames {
	0% {
		opacity: 1;
		transform: rotateX(90deg);
	}

	50% {
		opacity: 0.5;
		transform: rotateX(0deg);
	}

	100% {
		display: none;
		opacity: 0;
		transform: rotateX(90deg);
	}
}

.table-grid {
	/*border:1px dotted red;*/
}

	.table-grid th {
		background-color: var(--color-table-head-bg);
		color: var(--color-table-head-fg);
	}

	.table-grid tbody tr td {
		background-color: var(--color-grey-light);
	}

		.table-grid tbody tr td.grid-row-number {
			color: var(--color-grey-verydark);
			font-size: 80%;
		}

		.table-grid thead tr th.grid-row-number {
			color: var(--color-grey-light);
			font-size: 80%;
		}


		/* super responsive table */
		.table-super-responsive tbody tr td label {
			display: none;
		}

@media (max-width: 768px) {
	.table-super-responsive table, .table-super-responsive thead, .table-super-responsive tbody, .table-super-responsive th, .table-super-responsive td, .table-super-responsive tr {
		display: block;
	}

		.table-super-responsive td.right, .table-super-responsive th.right {
			text-align: left !important;
		}

		.table-super-responsive thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		.table-super-responsive tbody tr td {
			padding: 0rem 1.5rem 1rem 0rem;
			border: 0;
			/*background-color: unset;*/
		}

			.table-super-responsive tbody tr td label {
				display: block;
				margin: 0.5rem 0 0.25rem 0;
				padding: 0 0 0.1rem 0;
				font-weight: bold;
				color: var(--color-grey-verydark);
			}

			.table-super-responsive tbody tr td.main-cell {
				margin-top: 0.5rem;
				margin-left: 0.0rem;
				padding: 0 0 0.25rem 0.5rem;
				font-size: 150%;
			}

				.table-super-responsive tbody tr td.main-cell label {
					margin: 0;
					margin-bottom: 0.25rem;
				}

				.table-super-responsive tbody tr td.grid-row-number {
					display: none;
				}
}

/* super responsive table - end */


.pager {
	text-align: right !important;
	padding: 0 0.5rem 1rem 0.5rem;
	font-size: 0.70rem;
}

	.pager .active {
		color: var(--color-accent);
	}

	.pager .btn {
		min-width: 2rem;
		font-size: 0.70rem;
	}


.linethrough {
	text-decoration: line-through;
}


.printout-body {
	width: 17cm;
	height: 25cm;
}

.offence-form-printout {
	color: black !important;
	border: 1px solid black;
	padding: 2rem;
}

	.offence-form-printout h1 {
		color: black !important;
	}

	.offence-form-printout img {
		max-width: 250px;
	}



.col-srt {
	visibility: hidden;
	cursor: pointer;
}

	.col-srt.col-srt-active, th:hover .col-srt {
		visibility: visible;
	}

/* leaflet maps */
.mapview {
	height: 60vh;
	width: 100%;
}

.mapviewfullscreen {
	height: 100vh;
	width: 100%;
}
/* leaflet maps - end */


/* controller location map icons */

/* default */
.controller-icon-default .leaflet-popup-content-wrapper, .controller-icon-default .leaflet-popup-tip, .controller-icon-default.leaflet-tooltip {
	background-color: #ff8c00;
	color: #ffffff;
}

.controller-icon-default.leaflet-tooltip-bottom:before {
	border-bottom-color: #ff8c00;
}

.controller-icon-default.leaflet-tooltip-top:before {
	border-top-color: #ff8c00;
}

/* emergency */
.controller-icon-emergency .leaflet-popup-content-wrapper, .controller-icon-emergency .leaflet-popup-tip, .controller-icon-emergency.leaflet-tooltip {
	background-color: #ff0000;
	color: #ffffff;
}

.controller-icon-emergency.leaflet-tooltip-bottom:before {
	border-bottom-color: #ff0000;
}

.controller-icon-emergency.leaflet-tooltip-top:before {
	border-top-color: #ff0000;
}



/* inactive */
.controller-icon-inactive .leaflet-popup-content-wrapper, .controller-icon-inactive .leaflet-popup-tip, .controller-icon-inactive.leaflet-tooltip {
	background-color: #0000ff;
	color: #ffffff;
}

	.controller-icon-inactive .leaflet-popup-content-wrapper a {
		color: white; /* change link color to avoid blue link on blue background */
	}


.controller-icon-inactive.leaflet-tooltip-bottom:before {
	border-bottom-color: #0000ff;
}

.controller-icon-inactive.leaflet-tooltip-top:before {
	border-top-color: #0000ff;
}



/* bts */
.controller-icon-bts .leaflet-popup-content-wrapper, .controller-icon-bts .leaflet-popup-tip, .controller-icon-bts.leaflet-tooltip {
	background-color: #ffff00;
	color: #000000;
}

.controller-icon-bts.leaflet-tooltip-bottom:before {
	border-bottom-color: #ffff00;
}

.controller-icon-bts.leaflet-tooltip-top:before {
	border-top-color: #ffff00;
}


/* location */
.controller-icon-location .leaflet-popup-content-wrapper, .controller-icon-location .leaflet-popup-tip, .controller-icon-location.leaflet-tooltip {
	background-color: #ff00ea;
	color: #000000;
}

.controller-icon-location.leaflet-tooltip-bottom:before {
	border-bottom-color: #ff00ea;
}

.controller-icon-location.leaflet-tooltip-top:before {
	border-top-color: #ff00ea;
}

/* controller location map icons - end */

.modal.show {
	display: block !important;
}

/* emergency */

.tickets-emergency {
	margin-top: 1rem;
	border: 2px dashed red;
	text-align: center;
	font-size: 3rem;
	animation: tickets-emergency-frames 1s step-end infinite;
}

	.tickets-emergency a, .tickets-emergency a:active, .tickets-emergency a:visited {
		color: red;
		animation: tickets-emergency-frames 1s step-end infinite;
		text-decoration: none;
	}

@keyframes tickets-emergency-frames {
	from, to {
		border-color: transparent;
		color: transparent;
	}

	50% {
		border-color: red;
		color: red;
	}
}

/* driver codes */
.driver-code {
	letter-spacing: 5px;
}


.grid-total-row td {
	font-weight: bold;
}

td.grid-total-column {
	font-weight: bold;
}

/* Controllers - Device tracking table */
.table tr:nth-child(odd).log {
	background-color: #F0F0F0;
}

.table tr:nth-child(even).log {
	background-color: #E8E8E8;
}

.table tr:nth-child(odd).bts {
	background-color: #FDFD80;
}

.table tr:nth-child(even).bts {
	background-color: #FEFEC0;
}

.table tr:nth-child(odd).gps {
	background-color: #FF6A00;
}

.table tr:nth-child(even).gps {
	background-color: #FF974A;
}

.table tr.inactive {
	background-color: #90a5ff;
}

	.table tr.log td, .table tr.bts td, .table tr.gps td, .table tr.inactive td {
		background-color: transparent !important;
	}

/* Controllers - Device tracking table */


/* bill print*/

#bill-print {
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 12px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	background-color: white;
	color: Black;
}

	#bill-print table, #bill-print tr, #bill-print td {
		font-size: 100%;
	}


	#bill-print table {
		clear: both;
		width: 455px;
		margin: 50px auto;
		border-collapse: collapse;
	}

		#bill-print table td {
			text-align: left;
			padding: 10px;
			line-height: 1.4em;
		}

	#bill-print .right {
		text-align: right;
	}

	#bill-print .center {
		text-align: center;
	}

	#bill-print tr#trd td {
		font-weight: bold;
		padding: 20px 10px;
	}

	#bill-print tr#snd td, #bill-print tr#trd td, #bill-print tr.item td, #bill-print tr#fifth td {
		border: 1px solid black;
	}

	#bill-print tr#trd td, #bill-print tr.item td {
		border-bottom: none;
	}

	#bill-print tr.item td {
		padding: 0 10px 20px 10px;
		vertical-align: top;
	}

	#bill-print tr.item td, #bill-print tr#fifth td {
		border-top: none;
	}

		#bill-print tr#fifth td#c2, #bill-print tr#fifth td#c3 {
			padding: 0;
			text-align: center;
			margin: 0;
		}

	#bill-print tr#fifth span {
		padding: 20px 10px;
		font-weight: bold;
		border: 2px solid black;
		border-top-width: 3px;
		display: block;
	}

	#bill-print tr#fifth td#c2 span {
		border-right: none;
	}

	#bill-print tr#fifth td#c3 span {
		border-left: none;
	}

	#bill-print tr#fifth td#c1, #bill-print small {
		font-size: 0.9em;
	}

	#bill-print tr#last td {
		padding: 20px 10px;
		font-size: 0.9em;
	}

		#bill-print tr#last td em {
			font-style: normal;
			float: left;
			display: block;
			width: 70px;
			height: 100px;
		}


/* bill print - end */


/* loading component */

.loading-wrapper {
	display: inline-block;
	padding-left: 1rem;
}

	.loading-wrapper .is-loading {
		pointer-events: none;
		opacity: 0;
		animation: animateVisibilityFrames 0.5s;
		animation-delay: 0.5s;
		animation-fill-mode: forwards;
	}

.loading-wrapper-shift {
	transform: translateY(1.5rem);
	width: 75%;	/* avoid overlapping the Excel export button */
}

@keyframes animateVisibilityFrames {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/* loading component - end */




#claimForm .validation-message {
	display: inline-block;
	font-size: 0.9rem;
}

#claimForm .invalid {
	outline: unset;
}