.emissions-container {
	position: absolute;
	top: 110px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	background: transparent;
}
	.emissions-container::-webkit-scrollbar {
		width: 6px;
	}

	.emissions-container::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.emissions-container::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 3px;
	}

		.emissions-container::-webkit-scrollbar-thumb:hover {
			background: #94a3b8;
		}

.emissions-list {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	padding-right: 2px;
	background: transparent;
}

/*.leak-events-list {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 2px;
	background: blue;
}

	.leak-events-list::-webkit-scrollbar {
		width: 6px;
	}

	.leak-events-list::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.leak-events-list::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 3px;
	}

		.leak-events-list::-webkit-scrollbar-thumb:hover {
			background: #94a3b8;
		}*/


.div_leftCH4_menu {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 32px;
	overflow: visible;
	width: 340px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
}

.div_GraphOptions {
	border: 1px solid Gainsboro;
	margin-left: 10px;
	margin-top: 8px;
	padding: 6px 10px 6px 10px;
	background-repeat: no-repeat;
	background-position: 8px center;
	width: 240px;
	box-shadow: 2px 2px 1px #3A4F63;
	border-radius: 4px;
	background-color: #EEF1F4;
	overflow: visible;
}

.div_graphs {
	position: absolute;
	top: 8px;
	left: 428px;
	width: 800px;
	box-shadow: 2px 2px 1px #3A4F63;
	border-radius: 4px;
	overflow: visible;
	display: flex;
	flex-direction: column;
	height: auto;
}

.div_body {
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
	left: 0;
	top: 0px;
	bottom: 0px;
	position: absolute;
}

.div_left {
	margin: 0;
	position: absolute;
	top: 0px;
	left: 148px;
	bottom: 4px;
	width: 280px;
	margin-bottom: 5px;
	overflow: hidden;
	background-color: transparent;
}


.div_right {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 4px;
	margin-bottom: 5px;
	width: 280px !important;
	background-color: transparent;
	padding: 4px 6px 2px 0px;
	overflow-y: auto;
	overflow-x: hidden;
}

.div_map {
	position: absolute;
	top: 0px;
	left: 434px;
	right: 296px;
	bottom: 0px;
	border: 1px solid Gainsboro;
	margin: 8px auto;
	padding: 4px 5px 4px 4px;
	background-repeat: no-repeat;
	background-position: 8px center;
	box-shadow: 2px 2px 3px #3A4F63;
	border-radius: 4px;
	background-color: #FAFAFA;
	overflow: hidden;
}

.mapPanel {
	height: 100%;
}

.pdfCenter {
	border: none;
	width: 100%;
	left: 0px;
	padding-top: 3px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 15px;
	text-align: left;
	margin-bottom: 5px;
	height: 800px;
}

.lblFilter, .lblFilter a.active, .lblFilter a.visited {
	font-size: 10pt;
	font-weight: bold;
	padding-bottom: 2px;
	text-decoration: none;
	color: #006600;
}

#btnToggleBanner {
	width: 100%;
	margin-top: 8px;
	background-color: #f3f4f6;
	color: #4b5563;
	border: 1px solid #d1d5db;
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	transition: all 0.2s ease;
}

	#btnToggleBanner:hover {
		background-color: #e5e7eb;
	}

	#btnToggleBanner i {
		font-size: 14px;
	}

.banner-toggle-button {
	background-color: #00DE92 !important;
	font-weight: normal; /* Match radio button text */
	font-family: inherit; /* Inherit from parent */
	color: buttontext !important;
}


/*#############################################################################################################*/
/*#region Tech*/
.tech-filter {
	margin-top: 8px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
}

	.tech-filter input[type="checkbox"] {
		display: none;
	}

	.tech-filter label {
		position: relative;
		display: flex;
		align-items: center;
		padding: 6px 8px;
		margin: 2px 0;
		cursor: pointer;
		font-size: 14px;
		color: #4b5563;
		border-radius: 4px;
		transition: background-color 0.2s;
	}

		.tech-filter label::before {
			content: '';
			width: 16px;
			height: 16px;
			margin-right: 8px;
			border: 2px solid #d1d5db;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			background-color: white;
		}

	.tech-filter input[type="checkbox"]:checked + label::before {
		border-color: #00C38E;
		background-color: #00C38E;
	}

	.tech-filter input[type="checkbox"]:checked + label::after {
		content: '';
		position: absolute;
		left: 18px;
		top: 50%;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: translateY(-65%) rotate(45deg);
	}

.find-tech-button {
	width: 100% !important;
	margin-top: 8px;
	background-color: #00DE92 !important;
	color: buttontext !important;
	border: 1px solid #d1d5db;
	font-weight: normal; /* Match radio button text */
	font-family: inherit; /* Inherit from parent */
}

	.find-tech-button:hover {
		background-color: #e5e7eb;
	}

/* Tech List */
.tech-list {
	max-height: 400px;
	overflow-y: auto;
}

.tech-item {
	padding: 12px;
	border-bottom: 1px solid #e5e7eb;
	cursor: pointer;
	transition: background-color 0.2s;
}

	.tech-item:hover {
		background-color: #f3f4f6;
	}

.tech-name {
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}

.tech-details {
	font-size: 0.875rem;
	color: #6b7280;
}

.tech-location, .tech-movement, .tech-last-update {
	margin-top: 2px;
}

.tech-details i {
	width: 16px;
	margin-right: 8px;
	color: #4b5563;
}

.tech-location {
	color: #4b5563;
}

.tech-movement {
	color: #059669;
}

.tech-last-update {
	color: #6b7280;
	font-size: 0.8125rem;
}
/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Admin*/

.admin-content {
	padding: 24px;
	background: #f8fafc;
	height: 100%;
	overflow: auto;
}

.admin-section {
	margin-bottom: 32px;
	background: white;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin-section-title {
	font-size: 18px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 16px;
}

.admin-section .text-lg {
	font-size: 18px;
	font-weight: 600;
	color: #374151; /* Dark gray color */
	margin-bottom: 16px;
}

.admin-section .text-md {
	font-size: 16px;
	font-weight: 500;
	color: #4b5563; /* Medium gray color */
	margin-bottom: 12px;
}

.admin-controls {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Sound Settings Section */
.sound-settings {
	background: white;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sound-settings-title {
	font-size: 18px;
	font-weight: 600;
	color: #374151; /* Dark gray color */
	margin-bottom: 16px;
}

.sound-select-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.sound-select-label {
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

.sound-select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 14px;
	color: #1f2937;
	background-color: white;
}

/* Action Buttons */
.sound-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.sound-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
}

.sound-button-secondary {
	background-color: #f3f4f6;
	color: #4b5563;
	border: 1px solid #d1d5db;
}

	.sound-button-secondary:hover {
		background-color: #e5e7eb;
	}

.sound-button-primary {
	background-color: #2A4638;
	color: white;
}

	.sound-button-primary:hover {
		background-color: #00C38E;
	}

	.sound-button-primary:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

/* Status Messages */
.status-message {
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 4px;
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

	.status-message i {
		font-size: 16px;
	}

.status-success {
	background-color: #def3e4;
	color: #166534;
}

.status-error {
	background-color: #fee2e2;
	color: #991b1b;
}

/* Loading Spinner */
.spinner {
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top: 2px solid white;
	width: 16px;
	height: 16px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Lamb Center*/
.div_lambcenter {
	position: absolute;
	top: 0px;
	left: 424px;
	right: 296px;
	bottom: 0px;
	border: 1px solid Gainsboro;
	margin: 8px auto;
	padding: 4px 5px 5px 4px;
	background-repeat: no-repeat;
	background-position: 8px center;
	box-shadow: 2px 2px 3px #3A4F63;
	border-radius: 4px;
	background-color: #FAFAFA;
	overflow: hidden;
}

.split-container {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0; /* Added */
}

.top-panel {
	background-color: #FAFAFA;
	overflow: hidden; /* Changed from 'auto' to 'hidden' */
	height: 50%; /* Default split at 50% */
	min-height: 20%;
	max-height: 80%;
	display: flex; /* Added */
	flex-direction: column; /* Added */
	min-height: 0; /* Added - critical for Firefox */
}

.splitter {
	width: 100%;
	height: 8px;
	background-color: #f3f4f6;
	cursor: row-resize;
	position: relative;
	flex-shrink: 0;
}

	.splitter:hover {
		background-color: #e5e7eb;
	}

	.splitter::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 32px;
		height: 4px;
		border-radius: 2px;
		background-color: #cbd5e1;
	}

.bottom-panel {
	flex: 1;
	background-color: #FAFAFA;
	overflow: hidden;
	position: relative;
}

	/* Ensure map container fills bottom panel */
	.bottom-panel #map {
		width: 100%;
		height: 100%;
		min-height: 100px;
		border: 1px solid #ccc;
	}

/* Style for when dragging is active */
.split-container.dragging {
	cursor: row-resize;
	user-select: none;
}

	.split-container.dragging * {
		user-select: none;
	}

.tab-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0; /* Added to allow proper flex shrinking */
}

.tab-header {
	background: #f5f5f5;
	border-bottom: 1px solid #ddd;
	z-index: 3;
	flex-shrink: 0;
	display: flex;
	gap: 2px;
	height: 40px;
}

.tab-button {
	padding: 12px 24px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
	transition: all 0.2s ease;
}

	.tab-button i {
		margin-right: 8px;
	}

	.tab-button:hover {
		color: #2A4638;
	}

	.tab-button.active {
		color: #2A4638;
		border-bottom-color: #00C38E;
	}



.tab-content {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
	min-height: 0;
}

.tab-panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	overflow: hidden;
}

	.tab-panel.active {
		display: flex;
		flex-direction: column;
	}

.tab-panel:not(.active) {
		display: none;
	}

.admin-content {
	padding: 24px;
	background: #f8fafc;
	height: 100%;
	overflow: auto;
}

/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Sensor Grid */
.grid-container {
	flex: 1 1 auto;
	overflow: auto;
	padding: 10px;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 #f1f1f1;
}

	.grid-container::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.grid-container::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.grid-container::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 3px;
	}

		.grid-container::-webkit-scrollbar-thumb:hover {
			background: #94a3b8;
		}

.sensor-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

	.sensor-grid .text-red {
		color: #dc2626 !important;
	}


	.sensor-grid th {
		background-color: #f8fafc;
		padding: 8px;
		text-align: left;
		font-weight: 500;
		color: #374151;
		border-bottom: 2px solid #e5e7eb;
		position: sticky;
		top: 0;
		z-index: 1;
		min-width: 80px;
		background-color: #f8fafc;
	}

	.sensor-grid td {
		padding: 8px;
		border-bottom: 1px solid #e5e7eb;
		color: #1f2937;
		background: white;
		min-width: 80px;
		white-space: nowrap;
	}

	.sensor-grid tr {
		background-color: white;
		transition: background-color 0.2s ease;
	}

		.sensor-grid tr:hover {
			background-color: #f9fafb;
		}

	.sensor-grid td.numeric {
		text-align: right;
		font-family: monospace;
		color: #1f2937;
	}

		.sensor-grid td.numeric.text-red {
			color: #dc2626 !important;
			font-weight: bold;
		}

/* Very Late Tab Styles */
.verylate-actions {
	padding: 12px;
	border-bottom: 1px solid #e5e7eb;
	background-color: #f9fafb;
}

.mark-oos-button {
	padding: 8px 16px;
	background-color: #dc2626;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

	.mark-oos-button:disabled {
		background-color: #f3f4f6;
		color: #9ca3af;
		cursor: not-allowed;
	}

	.mark-oos-button:not(:disabled):hover {
		background-color: #b91c1c;
	}

/* Override the default sensor grid styles for late sensor rows */
#verylate-grid .late-sensor-row {
	cursor: pointer;
	transition: background-color 0.2s ease;
	height: auto !important;
}

	#verylate-grid .late-sensor-row:hover td {
		background-color: #f3f4f6 !important;
	}

	#verylate-grid .late-sensor-row.selected {
		background-color: #e5e7eb !important;
		height: auto !important;
	}

	#verylate-grid .late-sensor-row td {
		padding: 8px !important;
		border-bottom: 1px solid #e5e7eb !important;
		transition: background-color 0.2s ease !important;
	}

	#verylate-grid .late-sensor-row.selected td {
		background-color: #e5e7eb !important;
		padding: 8px !important;
		border-bottom: 1px solid #e5e7eb !important;
	}

#verylate-grid td {
	position: relative !important;
	padding: 8px !important;
}

.late-count {
	color: #dc2626;
	font-weight: bold;
}

[data-tab="verylate"].tab-button {
	position: relative;
}

	[data-tab="verylate"].tab-button.has-late {
		color: #dc2626;
		font-weight: bold;
	}

/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Late Items*/

.late-items-container {
	padding: 1rem;
	height: 100%;
	overflow: auto;
}

.late-items-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.late-items-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #333;
}

/* Loading and Error States */
.loading-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
}

	.loading-spinner::after {
		content: '';
		width: 32px;
		height: 32px;
		border: 2px solid #f3f3f3;
		border-top: 2px solid #333;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

.error-message {
	padding: 1rem;
	background-color: #fee2e2;
	color: #dc2626;
	border-radius: 0.5rem;
	margin: 1rem;
}

/* Table Styles */
.late-items-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background-color: white;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

	.late-items-table th,
	.late-items-table td {
		padding: 0.75rem 1rem;
		text-align: left;
		border-bottom: 1px solid #e5e7eb;
	}

	.late-items-table th {
		background-color: #f9fafb;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 0.75rem;
		color: #6b7280;
	}

	.late-items-table tr:hover {
		background-color: #f9fafb;
	}

	.late-items-table tr.selected {
		background-color: #dbeafe;
	}

	.late-items-table tr.even {
		background-color: #ffffff;
	}

	.late-items-table tr.odd {
		background-color: #f9fafb;
	}

/* Column Styles */
.checkbox-column {
	width: 48px;
	text-align: center;
}

.item-checkbox {
	width: 1rem;
	height: 1rem;
	cursor: pointer;
}

/* Warning States */
.late-warning {
	color: #dc2626;
	font-weight: 600;
}

.battery-warning {
	color: #dc2626;
	font-weight: 600;
}

/* Mark OOS Button */
.mark-oos-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: #dc2626;
	color: white;
	border: none;
	border-radius: 0.375rem;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 0.2s;
}

	.mark-oos-button:hover {
		background-color: #b91c1c;
	}

	.mark-oos-button i {
		font-size: 1rem;
	}

/* No Items Message */
.no-items-message {
	text-align: center;
	color: #6b7280;
	padding: 2rem;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Div Left Menu */
.div_left_menu {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 32px;
	width: 142px !important;
	overflow: visible;
	padding: 8px;
	background-color: transparent;
}

/* Filter Section Container */
.fsUnitFilter {
	background: white;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 12px;
	border: 1px solid #e5e7eb;
	margin-right: 2px;
}

/* Filter Section Header */
.lblFilter {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #2A4638;
	margin-bottom: 8px;
}

/* Radio Button and Checkbox Base */
.fsUnitFilter input[type="radio"],
.fsUnitFilter input[type="checkbox"],
.late-filter input[type="checkbox"] {
	display: none;
}

/* Label Base */
.fsUnitFilter label,
.late-filter label {
	position: relative;
	display: flex;
	align-items: center;
	padding: 6px 8px;
	margin: 2px 0;
	cursor: pointer;
	font-size: 14px;
	color: #4b5563; /* Default color */
	border-radius: 4px;
	transition: background-color 0.2s;
	white-space: nowrap;
}

	.fsUnitFilter label:hover,
	.late-filter label:hover {
		background-color: #f3f4f6;
	}

.fsUnitFilter input[type="radio"] + label {
	position: relative;
	display: flex;
	align-items: center;
	padding: 6px 8px;
	margin: 2px 0;
	cursor: pointer;
	font-size: 14px;
	color: #4b5563;
	border-radius: 4px;
	transition: background-color 0.2s;
}

	/* Radio Button Custom Control */
	.fsUnitFilter input[type="radio"] + label::before {
		content: '';
		width: 16px;
		height: 16px;
		margin-right: 8px;
		border: 2px solid #d1d5db;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		position: relative; /* Added */
	}

.fsUnitFilter input[type="radio"]:checked + label::before {
	border-color: #00C38E;
}

.fsUnitFilter input[type="radio"] + label::after {
	content: '';
	width: 8px;
	height: 8px;
	background: #00C38E;
	border-radius: 50%;
	position: absolute;
	left: 18px; /* Adjusted - this should be the center of the circle */
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.2s;
}

.fsUnitFilter input[type="radio"]:checked + label::after {
	transform: translate(-50%, -50%) scale(1); /* Center the dot and show it */
}

.fsUnitFilter input[type="radio"]:checked + label {
	color: #2A4638;
	font-weight: 500;
}

.fsUnitFilter input[type="radio"] {
	display: none;
}

.fsUnitFilter label:hover {
	background-color: #f3f4f6;
}
/* Checkbox Custom Control */
.late-filter {
	margin-top: 8px;
	margin-left: 3px;
	border-top: 1px solid #e5e7eb;
	padding-top: 8px;
}

	.late-filter label::before {
		content: '';
		width: 16px;
		height: 16px;
		margin-right: 8px;
		border: 2px solid #d1d5db;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		background-color: white;
	}

	.late-filter input[type="checkbox"]:checked + label::before {
		border-color: #00C38E;
		background-color: #00C38E;
	}

	.late-filter input[type="checkbox"]:checked + label::after {
		content: '';
		position: absolute;
		left: 18px;
		top: 50%;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: translateY(-65%) rotate(45deg) scale(1);
	}

	/* Default state */
	.late-filter label {
		color: #4b5563;
	}

	/* When unchecked and there are late units */
	.late-filter input[type="checkbox"]:not(:checked) + label[data-late-count]:not([data-late-count="(0)"]) {
		color: #dc2626 !important;
		font-weight: 500;
	}

.test-mode-filter {
	margin-top: 8px;
	margin-bottom: 8px;
}

.test-mode-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	background-color: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	color: #4b5563;
	font-size: 14px;
	font-weight: normal; /* Match radio button text */
	font-family: inherit; /* Inherit from parent */
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left; /* Match radio button alignment */
	padding-left: 8px; /* Match radio button padding */
}

	.test-mode-button:hover {
		background-color: #e5e7eb;
	}

	.test-mode-button:active {
		background-color: #d1d5db;
		color: #1f2937;
	}

	.test-mode-button i {
		font-size: 14px;
		color: inherit;
		width: 16px; /* Give icon consistent width */
		text-align: center; /* Center the icon */
		margin-right: 8px; /* Space between icon and text */
	}

	/* When test mode is active */
	.test-mode-button:active {
		background-color: #d1d5db;
		color: #1f2937;
	}
/* Legend Section */
.LegendImage2 {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 8px;
}

.LegendLabel2 {
	display: inline-block;
	font-size: 0.875rem;
	color: #4b5563;
	padding: 4px 0;
}

/* Hide/Show Banner Buttons */
#div_hideTop,
#div_showTop {
	margin-top: 8px;
	width: 100%;
}

#div_hideTop {
	display: block; /* Ensure Hide button is visible by default */
}

#div_showTop {
	display: none; /* Ensure Show button is hidden by default */
}

.RolloverPDFButton {
	display: inline-block;
	width: 80px;
	padding: 8px 12px;
	background-color: #2A4638;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

	.RolloverPDFButton:hover {
		background-color: #00C38E;
	}
/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Modal-Overlay */
/* Add Unit Button */
.admin-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background-color: #2A4638;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	width: 150px;
	margin-bottom: 16px; /* Add spacing between buttons */
}

	.admin-button:last-child {
		margin-bottom: 0; /* Remove margin from last button */
	}

	.admin-button:hover {
		background-color: #00C38E;
	}

	.admin-button i {
		font-size: 14px;
	}

/* Container for admin buttons */
.admin-content .flex {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Add gap between flex items as backup */
}

/* Modal Overlay */
.admin-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

	.admin-modal-overlay.show {
		opacity: 1;
		visibility: visible;
	}

/* Modal Dialog */
.admin-modal {
	background: white;
	border-radius: 8px;
	width: 500px;
	max-width: 90%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transform: translateY(-20px);
	transition: all 0.3s ease;
	overflow: hidden;
}

.admin-modal-content {
	padding: 24px;
}

.admin-modal-overlay.show .admin-modal {
	transform: translateY(0);
}

/* Modal Header */
.admin-modal-header {
	background-color: #2A4638;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.admin-modal-title {
	color: white;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.admin-modal-close {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	opacity: 0.8;
	transition: opacity 0.2s;
}

	.admin-modal-close:hover {
		opacity: 1;
	}


.input-group {
	display: flex;
	gap: 8px;
	width: 100%;
}

/* Form Groups */
.form-group {
	margin-bottom: 16px;
	width: 100%;
	box-sizing: border-box;
}

	.form-group label {
		display: block;
		font-size: 14px;
		font-weight: 500;
		color: #374151;
		margin-bottom: 6px;
	}

	.form-group input[type="text"],
	.form-group select:not(.asset-select),
	.form-control {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #d1d5db;
		border-radius: 4px;
		font-size: 14px;
		color: #1f2937;
		transition: all 0.2s;
		box-sizing: border-box;
		min-height: 38px;
	}

.form-select.asset-select {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
}

/* Lookup Button */
.lookup-button {
	width: 92px;
	flex-shrink: 0;
}

.form-group input:focus,
.form-group select:focus,
.form-control:focus {
	outline: none;
	border-color: #00C38E;
	box-shadow: 0 0 0 2px rgba(0, 195, 142, 0.1);
}

.form-select.loading {
	background-color: #f3f4f6;
	cursor: not-allowed;
}

.form-select.error {
	border-color: #dc2626;
	background-color: #fee2e2;
}

.error-message {
	color: #dc2626;
	font-size: 12px;
	margin-top: 4px;
}

/* Asset Options in Dropdown */
.asset-option {
	font-family: 'Consolas', 'Courier New', monospace;
	padding: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Form Select (Dropdowns) */
.form-select {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2937;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1.5em 1.5em;
	box-sizing: border-box;
}

.form-control,
.form-select,
.admin-modal-button {
	min-height: 38px;
	margin-top: 8px;
}

	/* Disabled State */
	.form-select:disabled {
		background-color: #f3f4f6;
		cursor: not-allowed;
	}

/* Status Messages */
.status-message {
	padding: 12px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: 14px;
}

	.status-message.error {
		background-color: #fee2e2;
		color: #991b1b;
		border: 1px solid #fecaca;
	}

	.status-message.success {
		background-color: #def3e4;
		color: #166534;
		border: 1px solid #bbf7d0;
	}




/* Modal Actions */
.admin-modal-actions {
	padding: 16px 24px;
	background-color: #f9fafb;
	border-top: 1px solid #e5e7eb;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* Action Buttons */
.admin-modal-button {
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

	.admin-modal-button.primary {
		background-color: #2A4638;
		color: white;
		border: none;
	}

		.admin-modal-button.primary:hover {
			background-color: #00C38E;
		}

		.admin-modal-button.primary:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

	.admin-modal-button.secondary {
		background-color: white;
		color: #4b5563;
		border: 1px solid #d1d5db;
	}

		.admin-modal-button.secondary:hover {
			background-color: #f3f4f6;
		}

/* Loading Spinner */
.spinner {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}


.asset-select {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Add hover effect for options */
.asset-option:hover {
	background-color: #f3f4f6;
}


/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region DateRangePicker */

.date-filter-panel {
	top: 0;
	background: transparent;
	padding: 0;
	flex-shrink: 0;
	width: 100%;
}

	.date-filter-panel .alert-card {
		margin: 0 10px;
		width: calc(100% - 10px);
		box-sizing: border-box;
		left: 0;
		margin-left: 0;
		background-color: #EBF0F1;
		padding: 16px;
	}

.filter-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.daterangepicker-input {
	width: 90% !important;
	padding: 8px;
	border: none;
	border-radius: 4px;
	text-align: center;
}

.radio-list {
	display: flex;
	justify-content: center;
	gap: 24px;
	padding: 4px 0;
	width: 100%;
}

#rbFilter input[type="radio"] {
	margin-right: 4px;
}

#rbFilter label {
	color: #4b5563;
	font-size: 0.875rem;
}
/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Login/Contacts */
#loginLeft {
	background-color: #00DE92;
	margin-top: 40px;
	float: left;
	width: 100%;
	overflow: auto;
	/*position: relative; */
}

.loginleftblock {
	background-color: #FFFFFF;
	padding: 24px;
	margin-bottom: 6px;
	vertical-align: top;
	color: #2A4638;
}


.loginbox {
	display: flex;
	justify-content: center;
	background-color: #EEF1F4;
	padding: 24px 64px 24px 48px;
	margin-bottom: 6px;
	vertical-align: top;
	font-size: 20px;
}


.loginfieldleft {
	float: left;
	width: 350px;
}

.loginfieldright {
	float: left;
	width: 350px;
}

.loginTextbox {
	background-color: #EEF1F4;
	outline: none;
	border: solid 2px #BBB;
	padding: 3px;
	width: 325px;
	margin-top: 8px;
	margin-bottom: 8px;
}

/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region info-window */
.custom-info-window {
	padding: 0 !important;
	margin: 0 !important;
}

	.custom-info-window .info-window {
		max-width: none !important;
		width: 300px;
	}

.info-window {
	font-family: Arial, sans-serif;
	background-color: #f8f9fa;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-header {
	background-color: #2A4638;
	color: white;
	padding: 10px 15px;
}

	.info-header h2 {
		margin: 0;
		font-size: 18px;
	}

.last-updated {
	font-size: 12px;
	margin: 5px 0 0;
	opacity: 0.8;
}

.info-content {
	padding: 15px;
}

.info-section {
	margin-bottom: 15px;
}

	.info-section h3 {
		font-size: 14px;
		margin: 0 0 10px;
		color: #333;
	}

	.info-section p {
		margin: 5px 0;
		font-size: 13px;
		color: #555;
	}

	.info-section i {
		width: 20px;
		margin-right: 5px;
		color: #4a90e2;
	}

.info-footer {
	padding: 10px 15px;
	text-align: right;
	background-color: #f8f9fa;
	border-top: 1px solid #dee2e6;
}

/* Hide default Google Maps InfoWindow close button */
.gm-ui-hover-effect {
	display: none !important;
}

/* Hide any legacy close button implementations */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
	display: none !important;
}

.button-container {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.details-button, .close-button {
	background-color: #2A4638;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Exo 2.0', Arial, sans-serif;
	transition: background-color 0.2s;
}

	.details-button:hover, .close-button:hover {
		background-color: #00C38E;
	}

/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Modal Dialog */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}
/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Responders Grid */
.tab-panel#responders-panel {
	display: none;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

	.tab-panel#responders-panel.active {
		display: flex;
	}

.responders-actions {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 12px;
	background-color: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.edit-responder-button {
	padding: 8px 16px;
	background-color: #2A4638;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

	.edit-responder-button:hover {
		background-color: #00C38E;
	}

	.edit-responder-button:disabled {
		background-color: #9ca3af;
		cursor: not-allowed;
	}

.grid-container {
	flex: 1;
	overflow: auto;
	padding: 0;
	position: relative;
}

#responders-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

	#responders-grid thead {
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: #f8fafc;
	}

	#responders-grid th {
		background-color: #f8fafc;
		padding: 12px 8px;
		text-align: left;
		font-weight: 500;
		color: #374151;
		border-bottom: 2px solid #e5e7eb;
		white-space: nowrap;
	}

	#responders-grid td {
		padding: 8px;
		border-bottom: 1px solid #e5e7eb;
		background-color: white;
		height: 18px !important;
		line-height: 20px !important;
		vertical-align: middle;
	}

	#responders-grid .text-center {
		text-align: center;
	}

	#responders-grid td:nth-child(4),
	#responders-grid td:nth-child(5),
	#responders-grid td:nth-child(6),
	#responders-grid td:nth-child(7),
	#responders-grid td:nth-child(8),
	#responders-grid td:nth-child(9),
	#responders-grid td:nth-child(10),
	#responders-grid td:nth-child(11),
	#responders-grid td:nth-child(12),
	#responders-grid td:nth-child(13) {
		width: 60px;
	}

	#responders-grid .responder-grid-row {
		cursor: pointer;
		transition: background-color 0.2s ease;
		height: 18px !important;
	}

		#responders-grid .responder-grid-row:hover td {
			background-color: #f3f4f6;
		}

		#responders-grid .responder-grid-row.selected td {
			background-color: #e5e7eb;
		}

/* Edit Form Styles */
.edit-form {
	padding: 20px;
}

.form-group {
	margin-bottom: 15px;
}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.form-group input[type="text"] {
		width: 100%;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

.notification-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	margin-top: 20px;
}

.notification-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

	.notification-item input[type="checkbox"] {
		margin: 0;
	}

.add-responder-button {
	padding: 8px 16px;
	margin-right: 8px;
	background-color: #00C38E;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.add-responder-button:hover {
	background-color: #00A277;
}

/*#endregion */
/*#############################################################################################################*/

/*#############################################################################################################*/
/*#region Personal Monitors Grid */

.pm-actions {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
}

.map-pm-button {
	background: linear-gradient(135deg, #1e40af, #3b82f6);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

	.map-pm-button:hover:not(:disabled) {
		background: linear-gradient(135deg, #1d4ed8, #2563eb);
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	.map-pm-button:disabled {
		background: #9ca3af;
		cursor: not-allowed;
		transform: none;
		box-shadow: none;
	}

	.map-pm-button i {
		font-size: 14px;
	}

.show-sensors-button {
	background: linear-gradient(135deg, #059669, #10b981);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

	.show-sensors-button:hover:not(:disabled) {
		background: linear-gradient(135deg, #047857, #059669);
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	.show-sensors-button:disabled {
		background: #9ca3af;
		cursor: not-allowed;
		transform: none;
		box-shadow: none;
	}

	.show-sensors-button i {
		font-size: 14px;
	}

/* Personal Monitors Grid - Override the problematic .selected class */
#personalmonitors-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

	#personalmonitors-grid thead {
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: #f8fafc;
	}

	#personalmonitors-grid th {
		background-color: #f8fafc;
		padding: 12px 8px;
		text-align: left;
		font-weight: 500;
		color: #374151;
		border-bottom: 2px solid #e5e7eb;
		white-space: nowrap;
	}

	#personalmonitors-grid td {
		padding: 8px;
		border-bottom: 1px solid #e5e7eb;
		background-color: white;
		height: 18px !important;
		line-height: 20px !important;
		vertical-align: middle;
	}

	#personalmonitors-grid .pm-grid-row {
		cursor: pointer;
		transition: background-color 0.2s ease;
		height: 18px !important;
	}

		#personalmonitors-grid .pm-grid-row:hover td {
			background-color: #f3f4f6;
		}

	/* CRITICAL: Override the shepherdh2s.css .selected class with higher specificity */
	#personalmonitors-grid tr.pm-grid-row.selected {
		height: 18px !important;
		width: auto !important;
		text-align: left !important;
		padding: 0 !important;
	}

		#personalmonitors-grid tr.pm-grid-row.selected td {
			background-color: #e3f2fd !important;
			height: 18px !important;
			width: auto !important;
			text-align: left !important;
			padding: 8px !important;
			line-height: 20px !important;
		}

			/* Add blue left border for selected rows */
			#personalmonitors-grid tr.pm-grid-row.selected td:first-child {
				border-left: 4px solid #2196f3;
			}

/*#endregion */
/*#############################################################################################################*/