:root {
		--app-height: 100%;
		--app-width: 100%;
		--menu-sm-width: 0px;
		--menu-lg-width: 125px;
		--bottom-height: 0px;
		--sm-switch-height: 0px;
		--md-switch-height: 0px;
		--xs-height-size: 40px;
		--sm-height-size: 40px;
		--md-height-size: 40px;
		--lg-height-size: 40px;
		--xl-height-size: 40px;
		--xxl-height-size: 40px;
		--2k-height-size: 40px;
		--4k-height-size: 40px;
		--8k-height-size: 40px;
	}

	html,
	body {
		overscroll-behavior-y: none;
		height: 100% !important;
	}

	body {
		font-size: 15px;
		line-height: 1;
		text-rendering: optimizeLegibility;
		/*color: rgb(105, 105, 105);	OLD CODE */
		color: rgb(115, 115, 115);
		font-family: 'Open Sans', sans-serif;
		background-color: #222222;
	}

	p {
		margin: 0;
	}

	.system_markers .leaflet-popup-content-wrapper {
		border-radius: 0;
	}

	.system_markers .leaflet-popup-content {
		margin: 0;
		width: 250px;
	}

	.leaflet-popup-content p {
		margin: 0;
	}

	#top_over_map {
		z-index: 200;
		background-color: #333333;
	}

	.aonline_fullscreen {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.left_side_panel {
		width: 100%;
		z-index: 1200;
		display: none;
		padding: 0;
		background-color: white;
	}

	.menu_block_bottom {
		color: #2a70b9;
		font-size: 7pt;
		height: 20px;
		line-height: 20px;
	}

	.row {
		margin-left:0;
		margin-right:0;
	}

	.container-fluid {
		padding:0;
	}

	.hide {
		display: none !important;
	}

	.section_header {
		font-size: small;
		font-weight: normal;
		background-color: #2a70b9;
		color: ghostwhite;

		text-shadow: 1px 1px 1px black;
		text-align: left;
		display: flex;
		align-items: center;
	}

	*:focus {
		outline: none;
	}

	.aonline-notice-info, .aonline-notice-question {
		background-color: #ffffcc;
		border: 1px solid #b2b2b2;
		color: darkslategray;
		padding: 5px;
		font-size: 9pt;
		border-radius: 4px;
	}

	.aonline-notice-info ul {
		margin: 10px 0;
	}

	.aonline-notice-info li {
		line-height: 20px;
	}

	.aonline-notice-success {
		background-color: #c6efce;
		border: 1px solid #33a333;
		color: #006100;
		padding: 5px;
		font-weight: bold;
	}

	.aonline-notice-error, .aonline-notice-warning {
		background-color:#ffcccc;
		border:1px solid #dd7777;
		color:#A30000;
		padding:5px;
		box-shadow: 5px 5px 5px #c9c9c9;
		border-radius: 4px;
	}

	.form-control {
		font-size: 9pt;
		line-height: 1.6;
		text-rendering: optimizeLegibility;
		color: rgb(105, 105, 105);
		font-family: 'Open Sans', sans-serif;
	}

	.form-select-sm {
		font-size: 9pt;
	}

	.leaflet-tooltip {
		border: none;
		padding: 0;
	}

	.cluster-1 {
		background-image:url(/system/images/markercluster/m1.png);
		line-height:53px;
		width: 53px;
		height: 52px;
	}
	.cluster-2 {
		background-image:url(/system/images/markercluster/m2.png);
		line-height:53px;
		width: 56px;
		height: 55px;
	}
	.cluster-3 {
		background-image:url(/system/images/markercluster/m3.png);
		line-height:66px;
		width: 66px;
		height: 65px;
	}

	#wrapper {
		position: relative;
		width: 100vw;
	}

	#center_over_map {
		position: absolute;
		padding:0;
		left:0;
		max-height: var(--app-height);
		height: var(--app-height);
		overflow: hidden;
		background-color: darkslategray;
		z-index: 1200;
	}

	@media (max-width: 992px) {
		/* Small Screen */
		#right_over_map, .notifications_side_panel {
			position: absolute;
			padding:0;
			right:0;
			top: 0;
			z-index: 1150;
			height: var(--app-height);
			overflow: hidden;
		}
	}

	@media (min-width: 992px) {
		/* Large Screen */
		#right_over_map, .notifications_side_panel {
			position: absolute;
			padding:0;
			right:0;
			top: 0;
			z-index: 1150;
			height: var(--app-height);
			overflow: hidden;
		}
	}

	label {
		padding-bottom: 5px;
		font-size: 9pt;
	}

	.description {
		padding: 5px 0 10px 0;
		color: lightslategray;
		font-family: helvetica, serif;
		font-size: 11px;
	}

	.aonline-link {
		color: #2a70b9;
		font-weight: bold;
		cursor: pointer;
	}

	.box {
		width: 230px;
		margin: 68px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		font-weight: 900;
		color: #fff;
		font-family: arial, serif;
		position: relative;
	}

	.sb2:before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid #00bfb6;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: -19px;
		top: 6px;
	}

	/*===========================================================================*/
	/*== dialog_fullscreen_panel ================================================*/
	/*===========================================================================*/

	@media (max-width: 992px) {
		/* For Smaller Screens */
		#dialog_fullscreen_size {
			padding: 0;
		}
	}

	@media (min-width: 992px) {
		/* For Large Screens */
		.dialog_container {
			top: 5%;
			position: absolute;
		}

		#dialog_fullscreen_size {
			top: 5%;
			position: absolute;
		}
	}

	.iframe-container {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	/* Then style the iframe to fit in the container div with full height and width */
	.responsive-iframe {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.aonline-btn {
		background-color: #333333;
		color: white;
		cursor: pointer;
		display: flex;
		justify-content: center;
	}

	.aonline-btn.aonline-btn-primary {
		background-color: #333333;
		color: white;
	}

	.aonline-btn.aonline-btn-success {
		background-color: darkgreen;
		color: white;
	}

	.aonline-rotate-block {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	@media (max-width: 576px) {
		/* XS */

		.aonline-btn {
			width: 100px;
		}

		.aonline-rotate-block {
			display: flex;
		}

		.aonline-normal-block {
			display: none;
		}
	}

	@media (min-width: 576px) {
		/* SM */

		.aonline-rotate-block {
			display: none;
		}

		.aonline-normal-block {
			display: block;
		}
	}

	@media (min-width: 768px) {
		/* MD */

		.aonline-btn {
			width: 200px;
		}

		.aonline-rotate-block {
			display: none;
		}

		.aonline-normal-block {
			display: block;
		}
	}

	@media (min-width: 992px) {
		/* LG */

		.aonline-rotate-block {
			display: none;
		}

		.aonline-normal-block {
			display: block;
		}
	}

	@media (min-width: 1200px) {
		/* XL */

		.aonline-rotate-block {
			display: none;
		}

		.aonline-normal-block {
			display: block;
		}
	}

	@media (min-width: 1400px) {
		/* XXL */

		.aonline-rotate-block {
			display: none;
		}

		.aonline-normal-block {
			display: block;
		}
	}

	.aonline-btn-primary {
		width: 150px;
		background-color: #2a70b9;
		color: white;
		cursor: pointer;
	}

	.aonline-btn-primary.aonline-disabled {
		background-color: rgba(42, 112, 185, 0.5);
		cursor: not-allowed;
		color: white;
		pointer-events: none;
	}

	/*===========================================================================*/
	/*== LAYOUT TRIAL ===========================================================*/
	/*===========================================================================*/

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html, body {
		width: 100%;
		height: 100%;
	}

	#aonline_layout_container {
		display: flex;
		flex-direction: row;
		width: 100vw;
	}

	#aonline_layout_menu_block {
		flex: 0 0 150px;
		background-color: #333;
		color: white;
		z-index: 1000;
	}

	#aonline_layout_content_block {
		background: #f4f4f4;
		z-index: 1100;
	}

	#aonline_layout_map_panel {
		background: #ddd;
		flex-grow: 1;
	}

	#aonline_layout_content_block.large ~ #aonline_layout_map_panel {
		flex-grow: unset;
	}

	#bottom_panel {
		width: 100%;
		height: 200px;
		background-color: whitesmoke;
		color: white;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	#resize_handle {
		width: 100%;
		height: 10px;
		background: #666;
		cursor: ns-resize;
	}

	@media (max-width: 576px) {
		/* XS */

		#aonline_layout_menu_block {
			display: none; /* Hide menu on phones */
		}

		#aonline_layout_content_block {
			width: 100vw;
		}

		#aonline_layout_content_block.small, #aonline_layout_content_block.medium {
			width: 100vw;
			/*flex-grow: 1;*/ /* takes the rest of the space */
		}

		#aonline_layout_content_block.large {
			width: 100vw;
			/*flex-grow: 1;  takes the rest of the space */
		}

		#aonline_layout_map_panel {
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	@media (min-width: 576px) {
		/* SM */

		#aonline_layout_menu_block {
			display: none; /* Hide menu on phones */
		}

		#aonline_layout_content_block.small, #aonline_layout_content_block.medium {
			width: 100vw;
			/*flex-grow: 1;*/ /* takes the rest of the space */
		}

		#aonline_layout_content_block.large {
			width: 100vw;
			/*flex-grow: 1;  takes the rest of the space */
		}
	}

	@media (min-width: 768px) {
		/* MD */

		#aonline_layout_menu_block {
			display: none; /* Hide menu on phones */
		}

		#aonline_layout_content_block.small, #aonline_layout_content_block.medium {
			width: 450px;
			/*flex-grow: 1;*/ /* takes the rest of the space */
		}

		#aonline_layout_content_block.large {
			width: 100vw;
			/*flex-grow: 1;  takes the rest of the space */
		}
	}

	@media (min-width: 992px) {
		/* LG */

		#aonline_layout_menu_block {
			display: block;
		}

		#aonline_layout_content_block.small {
			width: 550px;
		}

		#aonline_layout_content_block.medium {
			width: 800px;
		}

		#aonline_layout_content_block.large {
			flex-grow: 1;  /* takes the rest of the space */
		}
	}

	/* Overlay to cover menu and map when working in content_block */
	.aonline_overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4); /* Semi-translucent */
		pointer-events: none; /* Prevent blocking clicks when inactive */
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		z-index: 200;
	}

	/* When active, make it clickable and visible */
	.aonline_overlay.active {
		pointer-events: all;
		opacity: 1;
	}

	.right_side_panel {
		display: none;
		background: #f4f4f4;
		max-height: var(--app-height);
		position: absolute;
		z-index: 1300;
		padding: 0;
		right: 0;
		top: 0;
		width: 100%;
	}

	#aonline_layout_right_content_block {
		top: 0;
		right: 0;
		position: absolute;
	}

	/* RIGHT SIDE PANEL */
	#aonline_layout_right_content_block {
		background: #f4f4f4;
		z-index: 1100;
	}
	#aonline_layout_right_content_block.small {
		width: 550px;
	}

	#aonline_layout_right_content_block.medium {
		width: 800px;
	}

	#aonline_layout_right_content_block.large {
		width: calc(100vw - 125px);
	}

	@media (max-width: 576px) {
		#aonline_layout_right_content_block.small {
			width: 100%;
		}

		#aonline_layout_right_content_block.medium {
			width: 600px;
		}

		#aonline_layout_right_content_block.large {
			width: calc(100vw - 125px);
		}
	}

	@media (min-width: 576px) {
		#aonline_layout_right_content_block.small {
			width: 550px;
		}

		#aonline_layout_right_content_block.medium {
			width: 600px;
		}

		#aonline_layout_right_content_block.large {
			width: calc(100vw - 125px);
		}
	}

	#center_over_map {
		width: calc(100vw - 550px);
	}

	@media (max-width: 768px) {
		.right_side_panel {
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			position: absolute;
			top: 0;
			right: 0;
			background: #f4f4f4;
			z-index: 1100;
		}
	}

	.aonline-symbol {
		width: 30px;
		text-align: center;
		float: left;
	}

	.zebra {
		line-height: 40px;
		border-left: 1px solid lightgrey;
		border-right: 1px solid lightgrey;
	}

	.zebra.zebra_small {
		line-height: 25px;
		border-left: none !important;
		border-right: none !important;
	}

	.zebra.zebra_large {
		line-height: 40px;
		border-left: none !important;
		border-right: none !important;
	}

	.zebra > .row:nth-child(even) {
		background-color: white;
		border-bottom: 1px solid lightgrey;
		font-size: 8pt;
	}
	.zebra > .row:nth-child(odd) {
		background-color: #EBEBEB;
		border-bottom: 1px solid lightgrey;
		font-size: 8pt;
	}