: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;
	}

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

		:root {
			--aonline-row-height: 30px;
		}
	}

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

		:root {
			--aonline-row-height: 30px;
		}
	}

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

		:root {
			--aonline-row-height: 30px;
		}
	}

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

		:root {
			--aonline-row-height: 40px;
		}
	}

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

		:root {
			--aonline-row-height: 40px;
		}
	}

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

		:root {
			--aonline-row-height: 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;
	}

	.left-side-panel {
		width: 100%;
		z-index: 1200;
		padding: 0;
		background-color: white;
		height: 100%;
	}

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

	.is-hidden {
		display: none !important;
	}

	.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: 0;
		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;
        font-size: 9pt;
        line-height: 25px;
	}

	.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: 8pt;
	}

	.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;
	}

	#places-rotate-block {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

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

		.aonline-btn {
			width: 100px;
		}

		#places-rotate-block {
			display: flex;
		}

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

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

		#places-rotate-block {
			display: none;
		}

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

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

		.aonline-btn {
			width: 200px;
		}

		#places-rotate-block {
			display: none;
		}

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

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

		#places-rotate-block {
			display: none;
		}

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

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

		#places-rotate-block {
			display: none;
		}

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

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

		#places-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-content-block {
		background: #f4f4f4;
		z-index: 2;
	}

	#aonline-layout-map-panel {
		background: #ddd;
		flex-grow: 1;
	}

	#aonline-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-content-block {
			width: 100vw;
		}

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

		#aonline-content-block.large {
			width: calc(100vw - var(--right-width));
			/*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-content-block.small, #aonline-content-block.medium {
			width: 100vw;
			/*flex-grow: 1;*/ /* takes the rest of the space */
		}

		#aonline-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-content-block.small, #aonline-content-block.medium {
			width: 350px;
			/*flex-grow: 1;*/ /* takes the rest of the space */
		}

		#aonline-content-block.large {
            width: calc(100vw - var(--menu-width) - var(--right-width));
			/*flex-grow: 1;  takes the rest of the space */
		}
	}

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

		#aonline-layout-menu-block {
			display: block;
		}

		#aonline-content-block.small {
			width: 450px;
		}

		#aonline-content-block.medium {
			width: 600px;
		}

		#aonline-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: var(--menu-width);
		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 {
		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;
	}

	@media (max-width: 576px) {
		/* XS */
		#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);
		}

		#center-over-map {
			width: 100vw;
		}
	}

	@media (min-width: 576px) {
		/* SM */
		#aonline-layout-right-content-block.small {
			width: 400px;
		}

		#aonline-layout-right-content-block.medium {
			width: 600px;
		}

		#aonline-layout-right-content-block.large {
			width: calc(100vw - 125px);
		}

		#center-over-map {
			width: calc(100vw - 400px);
		}
	}

	@media (min-width: 992px) {
		/* LG */
		#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;
	}

	/* FOR THE QUILL FORMATTING */

	.aonline-text-area.ql-container {
		min-height: 150px;
		height: auto !important;
	}

	.aonline-text-area > .ql-editor {
		min-height: 200px;
	}

    .leaflet-container {
        touch-action: none;
        will-change: transform;
        transform: translateZ(0);
    }

    .aonline-glass-effect {
        background: rgba(255, 255, 255, 0.15); /* Transparent white */
        backdrop-filter: blur(10px);            /* The magic: blur background behind */
        -webkit-backdrop-filter: blur(10px);    /* Safari support */
        /*border: 1px solid rgba(255, 255, 255, 0.3);*/
        color: white;
    }

    .aonline-label {
        padding-top: 5px;
    }

	/*============================================================================*/
	/*============================================================================*/
	/*============================================================================*/

	#aonline-content-block {
		display: flex;
		flex-direction: column;
		height: 100%;    /* or 100vh */
	}

	.aonline-top-block {
		flex: 0 0 auto;
		/*height: 80px;     your fixed height */
		background: #eee;
	}

	.aonline-center-block {
		flex: 1 1 auto;               /* take remaining available space */
		overflow-y: auto;      /* scroll if content exceeds space */
		min-height: 0;
		background: #fafafa;
	}

	.aonline-content-block {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.aonline-bottom-block {
		flex: 0 0 auto;
		height: 60px;    /* your fixed height */
		background: #ddd;
	}




	#aonline-mobile-menu-more-panel {
		display: flex;
		flex-direction: column;
		height: 100%;    /* or 100vh */
	}

	#aonline-mobile-top {
		flex: 0 0 auto;
		/*height: 80px;     your fixed height */
		background: #eee;
	}

	#aonline-mobile-middle {
		flex: 1 1 auto;               /* take remaining available space */
		overflow-y: auto;      /* scroll if content exceeds space */
		min-height: 0;
		background: #fafafa;
	}

	#aonline-mobile-bottom {
		flex: 0 0 auto;
		height: 60px;    /* your fixed height */
		background: #ddd;
	}