/* Base styles (Mobile default: 0px to 767px) */
	/* google symbol */
		.material-symbols-outlined {
			font-size: 28pt;
			font-variation-settings:
			'FILL' 0,
			'wght' 400,
			'GRAD' 0,
			'opsz' 20
		}
	/* page */
		*, :after, :before {
			box-sizing: border-box;
			padding: 0;
			margin: 0;
		}
		html, body {
			height: 100%;
			width: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden; /* Stops mobile bouncing/scrolling outside header & map */
		}
		body {
			width: 100%;
			font-family: "Questrial", "Poppins", sans-serif;
			position: relative;
			min-height: 100%;
			padding: 0;
			background-color: #f1f1f1;
		}
		button {
			font-family: "Questrial", "Poppins", sans-serif;
		}
		#map {
			width: 100%;
			height: calc(100vh - 63px); 
		}
	/* info box */
		#infoTextBox {
			position: absolute;
			top: 73px;
			left: 10px;
			z-index: 10000;
			max-width: calc(100vw - 20px);
			max-height: calc(100vh - 150px);
			display: flex;
			flex-direction: column;
			overflow: hidden;
			overflow-wrap: break-word;
			background-color: white;
			background-clip: padding-box;
			border: 2px solid rgba(0,0,0,0.2);
			border-radius: 4px;
			/*box-shadow: 0 3px 14px rgba(0,0,0,0.4);*/
			font-family: 'Questrial', sans-serif;
		}
		#infoTextBox #info-head {
			position: relative !important;
			flex-shrink: 0; /* Keeps the header fixed at its intrinsic height */
			background-color: #fff; /* Prevents scrolling content from showing through */
			z-index: 2;
			padding: 20px;
		}
		#infoTextBox #info-head .info-icon {
			float: left;
			font-size: 18px;
			font-weight: bold;
			line-height: 30px;
			font-family: serif;
			padding-right: 20px;
		}
		#infoTextBox #info-head h2 {
			margin: 7px 0 20px 0;
		}
		#infoTextBox #info-head .info-close {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
			padding-top: 7px;
			width: 48px;
			height: 48px;
			border-radius: 24px;
			font-family: 16px/24px Tahoma, Verdana, sans-serif;
			font-size: 24pt;
			background: #E9E9ED;
			text-align: center;
			transition: .5s;
			z-index: 10;
		}		
		#infoTextBox #info-head .info-close:hover {
			background: #D8D8DE;
		}
		#infoTextBox #info-head #info-tabs {
			clear: both;
		}
		#infoTextBox .tabcontent {
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
			padding-bottom: 5px;
		}
		#infoTextBox #info-head #info-tabs button {
			border: none;
			outline: none;
			cursor: pointer;
			margin: 0 10px 0 0;
			padding: 16px 20px 12px 20px;
			border-radius: 21px;
			transition: 0.3s;
		}
		#infoTextBox #info-head #info-tabs button.active {
			background: #337AB7;
			color: #fff;
		}
		#infoTextBox p {
			margin: 20px 30px;
			text-indent: 40px;
			line-height: 150%;
			text-align: justify;
		}
		#infoTextBox #tab1-info .glossary-group > li {
			border-radius: 2px;
			font-size: 16pt;
			vertical-align: middle;
		}		
		#infoTextBox #tab1-info .glossary-group li > span {
			vertical-align: middle;
			padding-right: 10px
		}
		#infoTextBox #tab1-info .glossary-group li > strong {
			vertical-align: middle;
		}
		#infoTextBox #tab1-info li {
			padding: 20px;
			list-style-type: none;
			font-size: 12pt;
			line-height: 150%;
		}
		#infoTextBox #tab1-info ul li ul li ul {
			background: #E9E9ED;
			list-style-image: url('../img/emoji_objects_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
			list-style-type: square;
			list-style-position: inside;
			margin-top: 10px;
		}
		#infoTextBox #tab1-info table {
			width: 100%;
			border: 1px solid #E9E9ED;
			background: #fff;
			border-collapse: collapse;
			margin: 10px 0;
		}
		#infoTextBox #tab1-info table tr td {
			padding: 3px 7px;
			border: 2px solid #E9E9ED;
		}
		#infoTextBox #tab1-info .active-highlight {
			background-color: #fff3cd;
			transition: background-color 0.3s ease;
			border-radius: 4px;
		}
	/* header nav */
		header {
			position: relative;
			z-index: 2000;
			background: #fff /*green*/;
			height: 63px;
			box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.25);
		}
		header nav {
			width: 100%;
			height: 63px;
			margin: 0 auto;
			padding: 10px;
		}
		header nav a img {
			float: left;
		}
		header nav ul {
			width: 555px;
			margin: 0 auto;
			padding-top: 12px;
		}
		header nav ul li {
			display: none;
		}
		header nav ul li a {
			text-decoration: none;
			color: #212529;
			padding: 8px 24px;
			font-size: 1.125rem;
		}
		header nav div#nav_right {
			float: right;
		}
		header nav div#nav_right a {
			background: #337AB7;
			color: #fff;
			text-decoration: none;
			padding: 13px 22px;
			border-radius: 21px;
		}
	/* map markers */
		@keyframes border-pulse {
			0% {
				background: rgb(255, 255, 255);
				box-shadow: 0 0 0 0 rgb(255, 255, 255);
			}
			70% {
				background: rgba(255, 255, 255, 0);
				box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
			}
			100% {
				background: rgba(255, 255, 255, 0);
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
			}
		}
		.animation {
			animation: border-pulse 1.5s infinite;
			border-radius: 50%;
		}
		/* --- Small Clusters (<10 items) --- */
		.marker-cluster-small {
			background-color: rgba(201, 104, 48, 0.4) !important; /* Translucent outer ring */
		}
		.marker-cluster-small div {
			background-color: #C96830 !important; /* Solid inner circle */
			color: #ffffff !important;             /* Text color */
		}

		/* --- Medium Clusters (<100 items) --- */
		.marker-cluster-medium {
			background-color: rgba(201, 104, 48, 0.4) !important;
		}
		.marker-cluster-medium div {
			background-color: #C96830 !important;
			color: #ffffff !important;
		}

		/* --- Large Clusters (100+ items) --- */
		.marker-cluster-large {
			background-color: rgba(201, 104, 48, 0.4) !important;
		}
		.marker-cluster-large div {
			background-color: #C96830 !important;
			color: #ffffff !important;
		}
	/* tooltip content */
		.tooltip_custom {
			padding: 2px 7px 0 7px;
		}
		.tooltip_custom p {
			padding-bottom: 4px;
		}
		.tooltip_custom .tooltip-count {
			background: #030304;
			color: #fff;
			font-family: 'Doto', sans-serif;
			font-size: 16pt;
			padding: 5px 15px 5px 15px;
		}
		.tooltip_custom .tooltip-count table tr:first-child {
			color: #8BD0D0;
		}
		.tooltip_custom .tooltip-count table tr:nth-child(2) {
			color: #C8D9AE;
		}
		.tooltip_custom .tooltip-count table tr:nth-child(3) {
			color: #C97092;
		}
		.tooltip_custom .tooltip-count table tr td:nth-child(2){
			padding-left: 30px;
			text-align: right;
		}
		.tooltip_custom .tooltip-sensors {
			width: 120px;
			float: left;
		}
		.tooltip_custom .tooltip-sensors span {
			font-size: 18pt;
			padding: 7px 2px 0 0;
		}
		
		.tooltip_custom .tooltip-status {
			width: 20px;
			float: right;
			padding-top: 11px;
		}
	/* popup header */
		.popup-header {
			position: relative !important; /* Changed from fixed to stay in flex flow */
			flex-shrink: 0;                /* Prevents header from shrinking */
			width: 100vw;
			z-index: 1;
			padding-top: 30px;
			background: #9B9B9B;
		}
		.popup-header-title {
			color: #fff;
		}
		.popup-header-title h1 {
			text-align: center;
			width: 100%;
			font-size: 20pt;
			font-weight: bold;
		}
		.popup-header-title p {
			text-align: center;
			width: 100%;
			padding: 12px;
		}
		.popup-header-title .tooltip-status {
			text-align: center;
			width: 100%;
		}
	/* popup tabs */
		.popup-header-tabs {
			overflow: hidden;
			width: 100%;
			background-color: #9B9B9B;
			margin: 0 auto;
			padding: 0px 0px 0px 10px;
		}
		.popup-header-tabs button {
			float: left;
			border: none;
			outline: none;
			cursor: pointer;
			margin-right: 10px;
			padding: 16px 22px 12px 22px;
			border-radius: 16px 16px 0 0;
			transition: 0.3s;
		}
		.popup-header-tabs button:hover {
			background-color: #ddd;
		}
		.popup-header-tabs button.active {
			background-color: #fff;
		}
		.popup-content-tab {
			display: none;
			flex: 1; /* Occupies all remaining vertical space */
			min-height: 0; /* Enables scrolling inside flex items */
			overflow-y: auto; /* Isolates scrollbar strictly inside tab content */
			padding: 10px 0;
			border-top: none;
			width: 100vw;
		}
	/* popup tab - data */
		.popup-filter-container {
			width: 100vw;
		}
		.popup-filter-container button {
			border: none;
			outline: none;
			cursor: pointer;
			margin: 0 0 10px 10px;
			padding: 16px 20px 12px 20px;
			border-radius: 21px;
			transition: 0.3s;
		}
		.popup-filter-container form {
			float: right;
		}
		.popup-filter-container form label {
			display: inline-flex;
			align-items: center;
			margin-left: 10px;
		}
		.popup-filter-container form input,
		.popup-filter-container form select {
			padding: 13px 16px 9px 16px;
			border-radius: 21px;
			margin: 0 0 10px 10px;
			cursor: pointer;
			background: #fff;
		}
		.popup-filter-container form button {
			margin: 0 30px 10px 10px;
		}
		.popup-count-container {
			position: relative;
			width: 100vw;
			background: #030304;
			color: #fff;
			font-family: 'Doto', sans-serif;
			font-size: 20pt;
			padding: 15px 0;
			overflow: hidden;
		}
		.cat-ee {
			position: absolute;
			top: 50%;
			left: 0;
			width: 265px;
			height: 110px;
			animation: cat-ee-amin 65s linear infinite;
		}
		@keyframes cat-ee-amin {
			0%, 91.67% {
				transform: translate(-100%, -50%);
			}
			100% {
				transform: translate(1262px, -50%);
			}
		}
		.popup-count-container table {
			width: 100vw;
			margin: 0 auto;
		}
		.popup-count-container table tr {
			float: left;
			width: 33%;
			padding-bottom: 10px;
		}
		.popup-count-container table tr:first-child {
			color: #8BD0D0;
		}
		.popup-count-container table tr:nth-child(2) {
			color: #C8D9AE;
		}
		.popup-count-container table tr:nth-child(3) {
			color: #C97092;
		}
		.popup-count-container table tr td {
			display: block;
			width: 100%;
			text-align: center;
		}
		.popup-count-container table tr td:nth-child(2){
			float: left;
		}
		.popup-count-container div {
			width: 100%;
			max-width: 1024px;  
			margin: 0 auto;
			padding: 0 30px;
			font-size: 18pt;
		}
		.popup-count-container div span {
			white-space: nowrap;      /* Prevents 'date_start to date_end' from breaking into two lines */
			text-align: center;        /* Keeps the glued text horizontally centered */
			overflow: hidden;          /* Gracefully clips text if the mobile screen is smaller than the date string */
			text-overflow: ellipsis;   /* Appends '...' if screen width is too narrow */
		}
		.popup-chart-group-container {
			margin: 30px 0 60px 0;
		}
		.popup-chart-container,
		.popup-chart-container-half {
			width: 100vw;
			margin: 0 auto;
			padding: 20px 30px 20px 20px;
			background: #fff;
			position: relative;
			clear: both;
		}
		.popup-chart-canvas-container {
			height: 400px;			
		}
		.popup-chart-container-half table {
			margin: 50px auto;
			border-collapse: collapse;
		}
		.popup-chart-container-half table tr:first-child {
			background: #7A1A3F;
		}
		.popup-chart-container-half table tr:nth-child(2) {
			background: #177474;
		}
		.popup-chart-container-half table tr:nth-child(3) {
			background: #4d4257;
		}
		.popup-chart-container-half table tr td {
			font-size: 24pt;
			font-weight: bold;
			text-align: right;
			color: #fff;
			padding: 10px 20px;
		}
		.popup-chart-container-half table tr td:nth-child(2){
			float: left;
			padding-left: 40px;
		}
		.popup-chart-container .popup-chart-icon-container,
		.popup-chart-container-half .popup-chart-icon-container {
			width: 100%;
		}
		.popup-chart-container .popup-chart-icon-container span,
		.popup-chart-container-half .popup-chart-icon-container span {
			float: left;
		}
		.popup-chart-container .popup-chart-icon-container h2,
		.popup-chart-container-half .popup-chart-icon-container h2 {
			position: relative;
			top: 5px;
			padding: 0 95px 10px 50px;
			font-size: 24px;
			color: #666666;
		}
		.popup-chart-container .popup-chart-icon-container a,
		.popup-chart-container-half .popup-chart-icon-container a {
			position: absolute;
			top: 20px;
			right: 30px;
			width: auto;
			left: auto;
			bottom: auto;
			cursor: pointer;
			color: #000;
		}
		.popup-chart-container .popup-chart-icon-container a:first-of-type,
		.popup-chart-container-half .popup-chart-icon-container a:first-of-type {
			right: 75px;
		}
		#popup-road-profile-container {
			width: 1024px;
			margin: 20px auto;
		}
		#popup-road-profile-container p {
			padding: 5px 0;
			font-size: 14pt;
		}
		#popup-road-profile-container p span {
			font-weight: bold;
		}
	/* leaflet override */
		.leaflet-control-custom a span {
			font-size: 22pt !important;
			margin-top: 1px;
		}
		.leaflet-fixed-pane {
			z-index: 1200 !important;
		}
		.popup-fixed {
			position: fixed;
			width: 100vw;
			height: calc(100vh - 63px) !important;
			top: 63px !important;
			bottom: 0 !important;
			right: 0 !important;
			left: 0 !important;
			cursor: default;
			transform: none !important;
			margin: 0;
			border-radius: 0;
		}
		.leaflet-popup-content {
			display: flex;
			flex-direction: column;
			height: 100%;
			width: 100vw;
			margin: 0;
		}
		.leaflet-popup-tip-container {
			display: none;
		}
		.leaflet-popup-content-wrapper {
			display: flex;
			flex-direction: column;
			height: 100%;
			max-height: 100%;
			overflow: hidden !important; /* Disables outer scrollbar */
			padding: 0;
			border-radius: 0;
		}
		.leaflet-container {
			font-family: "Questrial", "Poppins", sans-serif;
		}
		.leaflet-container a.leaflet-popup-close-button {
			right: auto;
			left: 0;
			width: 48px;
			height: 48px;
			font-size: 24px;
			padding-top: 10px;
			background: #fff;
			color: #000;
			transition: .5s;
			z-index: 2;
			border-radius: 35px;
			margin: 10px;
		}
		.leaflet-container a.leaflet-popup-close-button:hover {
			background: #F1F1F1;
			color: #000;
		}
		.leaflet-popup-content p {
			margin: 0 auto;
		}
/* Tablet & larger (768px+) */
@media (min-width: 768px) {
	/* header nav */
		/*header {
			background: blue;
		}*/
		#infoTextBox {
			left: 53px;
			max-width: calc(768px - 65px);
			max-height: calc(100vh - 120px);
		}
		.popup-count-container div {
			font-size: 20pt;
		}
		.popup-chart-container-half {
			width: 50%;
			float: left;
			clear: none;
		}
		.popup-chart-container-half a {
			right: 5%;
		}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
		/*header {
			background: red;
		}*/
		header nav {
			width: 1024px;
		}
		header nav ul {
			width: 555px;
			margin: 0 auto;
			padding-top: 12px;
		}
		header nav ul li {
			display: inline;
			float: left;
		}
		header nav ul li a {
			text-decoration: none;
			color: #212529;
			padding: 8px 24px;
			font-size: 1.125rem;
		}
		header nav div#nav_right {
			float: right;
		}
		header nav div#nav_right a {
			background: #337AB7;
			color: #fff;
			text-decoration: none;
			padding: 13px 22px;
			border-radius: 21px;
		}
		.popup-count-container {
			font-size: 24pt;
		}
		.popup-count-container table {
			width: 1024px;
			margin: 0 auto;
		}
		.popup-count-container table tr {
			margin-left: 30px;
			width: 30%;
		}
		.popup-count-container table tr td {
			display: inline-block;
			width: 40%;
			text-align: left;
		}
		.popup-count-container table tr td:nth-child(2){
			float: none;
		}
	/* popup tabs */
		.popup-header-tabs {
			overflow: hidden;
			width: 1024px;
			background-color: #9B9B9B;
			margin: 0 auto;
			padding: 0px 0px 0px 10px;
		}
		.popup-header-tabs button {
			float: left;
			border: none;
			outline: none;
			cursor: pointer;
			margin-right: 10px;
			padding: 16px 22px 12px 22px;
			border-radius: 16px 16px 0 0;
			transition: 0.3s;
		}
		.popup-header-tabs button:hover {
			background-color: #ddd;
		}
		.popup-header-tabs button.active {
			background-color: #fff;
		}
	/* popup tab - data */
		.popup-filter-container {
			width: 1024px;
			height: 52px;
			margin: 0 auto;
		}
		.popup-chart-container {
			width: 1024px;
		}
}
/* Desktop (1280px+) */
@media (min-width: 1280px) {
	/* header nav */
		/*header {
			background: #fff;
		}*/
	/* popup header */
		.popup-header {
			width: 1280px;
		}
		.popup-header-title h1 {
			width: 1280px;
		}
		.popup-header-title p {
			width: 1280px;
		}
		.popup-header-title .tooltip-status {
			width: 1280px;
		}
	/* popup tabs */
		.popup-content-tab {
			width: 1280px;
		}
	/* popup tab - data */
		.popup-count-container {
			width: 100%;
			font-size: 24pt;
		}
		.popup-chart-container-half a {
			right: 120px;
		}
	/* leaflet override */
		.popup-fixed {
			width: 1280px;
			bottom: 0 !important;
			right: 0 !important;
			left: auto !important;
		}
		.leaflet-popup-content {
			width: 1280px;
		}
}