.weatherresults {
	width:100%;
	border: 1px;
	border-style: solid;
	border-collapse: collapse;
}
.sixcoltr {
	width:18%;
	padding:5px; 
	font-size:10px;
	border: 1px;
	border-style: solid;
	border-collapse: collapse;
}
.tableHdr {
	background-color: lightgrey;
	font-weight: bold;
}
.leaflet-control-custom-title {
    display:none;
}
.gpsPos table {
    font-size: 11px; 
    font-weight: bold;
}
.legend-control-container {
	width: 150px;
	min-height: 30px;
	text-align: left;
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(0,0,0,.4);
	background: none repeat scroll 0 0 #fff;
	color: #333;
	padding: 6px 10px 6px 6px;
}

.leaflet-control-mouseCoordinate {
	width: 200px;
	margin-bottom: 13px !important;
}

.show-spinner {
	display: flex !important;
}

html, body, #map {
	height: 100%;
	font: 10pt "Oswald", Arial, Helvetica, sans-serif; 
}

.fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
	margin-top: 10px;
}

.leaflet-draw, .leaflet-control-zoom, .leaflet-control-search {
	display: none;
}

.tadisabled {
	color: rgb(51, 51, 51, 0.4) !important;
}

li.disabled {
  color: rgb(0, 0, 0) !important;
}

.leaflet-control-layers {
  border-radius: none;
  box-shadow: none;
}

.leaflet-control-layers-expanded {
  width: 100% !important;
  padding: 0px;
  border: none !important;
}

#layercontrol {
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#layercontrol .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.snow-depth-style {
	background-color:white;
	padding:10px;
	font-size: larger;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.ta-snowdepth-filter {
	filter: blur(30px);
}
.taWarning {
	background: radial-gradient(yellow, transparent);
    padding: 25px;
    border-radius: 10px;
	margin-top: 10px;
	text-align:center;
}

.taNoMargin {
	margin-block-start: 0px;
    margin-block-end: 5px;
}
.taMarginTop10 {
	margin-top: 10px !important;
}
.panel {
	position: fixed;
	top: 0;
	right: -400px; /* Start off-screen */
	width: 400px;
	max-height: calc(100% - 110px);
	background-color: white;
	box-shadow: -2px 0 5px rgba(0,0,0,0.5);
	transition: right 0.5s ease; /* Animate the right property */
	z-index: 50;
	height: 100%;
  }
  .panel .close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	color: black;
	border: 1px solid;
	border-radius: 50%;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 1.2em;
	line-height: 1;
	z-index: 100; /* Ensure button is above panel content */
	min-width: 35px; /* Minimum touch target size for mobile */
	min-height: 35px; /* Minimum touch target size for mobile */
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .panel-content {
	padding: 20px;
	overflow: auto;
	max-height: calc(100% - 70px); /* Adjust height to account for padding */
  }
  .header-nav {
	position: fixed;
	top: 0;
	width: 450px;
	background-color: green;
	box-shadow: -2px 0 5px rgba(0,0,0,0.5);
	z-index: 50;
	height: 40px;
	margin-left: 600px;
	display: none;
  }
  .headerPanel-content {
	overflow: auto;
	color: white;
	text-align: center;
	font-size: larger;
	padding-top: 7px;
  }
/* Remove underline for all anchor tags */ 
  .headerPanel-content a { 
	text-decoration: none; 
	color: white !important;	
} 
/* Remove color change for visited links */ 
   .headerPanel-content a:visited { 
	color: white;
   } 

  .sidebar-right ~ .sidebar-map {
	margin-right: 0px !important;
  }  
.taLabel {
	font-weight: bold;
}
.taDownloadBtn {
	display: inline-block;
	padding: 10px 10px;
	color: #fff !important;
	background-color: #007bff;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.taDownloadBtn:hover {
background-color: #0056b3;
}
.taInfoSheet {
	display: inline-block;
	padding: 10px;
	margin-left: 10px;
	color: #fff !important;
	background-color: green;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.taInfoSheet:hover {
background-color: #24b54b;
}
.taSmaller {
	font-size: 11px;
}
.taTopMargin5p {
	margin-top: 5px;
}
.taTagBG {
	background-color: #cffcdb;
	border-radius: 10px;
	padding: 5px;
	display: inline-block;
	white-space: nowrap;
	margin: 2px;
}
.taTag {
	height: 15px;
}
.taLabelBlock {
	display: inline-block;
	white-space: nowrap;
}
.stats-flex-container {
	display: flex;
	flex-wrap: wrap;	
	align-items: center;
	justify-content: center;
}

@media (min-width: 1200px) {
    .sidebar-pane {
        min-width: 280px !important;
    }
}

/* Add extra right padding to sidebar panes to prevent buttons from being cut off by scrollbar */
@media (min-width: 768px) {
    .sidebar-pane {
        padding-right: 30px !important;
    }
}

@media (min-width: 1200px) {
    .sidebar-left~.sidebar-map .leaflet-left {
        left: 320px;
    }
}
@media only screen and (max-width: 600px) {
	.header-nav {
		display: none !important;
	}
}

.leaflet-control-layers-selector {
    z-index: 9999999; /* Ensure it is above other elements */
}
	/* CSS to gray out the page and show the spinner */ 
	#spinnerOverlay { 
		position: fixed; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		background: rgba(0, 0, 0, 0.5); 
		display: none; /* Hidden by default */ 
		justify-content: center; 
		align-items: center; 
		z-index: 9999; /* Ensure it is on top */ 
	} 
	.spinner { 
		border: 16px solid #f3f3f3; 
		border-top: 16px solid green; 
		border-radius: 50%; 
		width: 120px; 
		height: 120px; 
		animation: spin 2s linear infinite; 
	} 
	@keyframes spin { 
		0% { transform: rotate(0deg); } 
		100% { transform: rotate(360deg); }
	}

	.leaflet-legend {
		border-radius: 5px;
	}

	/**
	 * Clean View Mode - Hide all controls when 'v' parameter is present
	 * Applied via body.clean-view-mode class set in MapViewer.html
	 */
	body.clean-view-mode .leaflet-control {
		display: none !important;
	}

	body.clean-view-mode .leaflet-control-attribution {
		display: none !important;
	}

	body.clean-view-mode .leaflet-marker-icon {
		display: none !important;
	}

	body.clean-view-mode #sidebar {
		display: none !important;
	}

	/* Also hide the crosshair icon in clean view mode */
	body.clean-view-mode .tmv-crosshair-icon {
		display: none !important;
	}

	/* Make weather popup content scrollable on mobile */
	@media (max-width: 768px) {
		.leaflet-popup-content-wrapper {
			max-height: calc(100vh - 100px) !important;
			overflow: hidden;
		}

		.leaflet-popup-content {
			overflow-y: auto;
			overflow-x: hidden;
			max-height: calc(100vh - 150px) !important;
		}

		/* Ensure tables in popups are responsive on mobile */
		.leaflet-popup-content table.weatherresults {
			font-size: 0.85em;
		}
	}

	/* Utility class to hide elements */
	.ta-hidden {
		display: none !important;
	}