html {
    font-size: 16px; /* default */
}

@media (max-width: 1200px) {
    html { font-size: 15px; }
}
@media (max-width: 992px) {
    html { font-size: 14px; }
}
@media (max-width: 768px) {
    html { font-size: 13px; }
}
@media (max-width: 480px) {
    html { font-size: 12px; }
}

:root {
	--space-xs: 0.25rem;
	--space-sm: 0.7rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
  }

  
.js-plotly-plot,
.plot-container,
.svg-container {
    width: 100% !important;
    max-width: 100% !important;
}


/* Begin Typography & Colors */
body {
	position: relative;
	font-size: 0.875rem;
	font-family: "Space Grotesk", sans-serif;
	font-optical-sizing: auto;
	color: white;
	text-align: center;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; /* stack main-row and bottom-row vertically */
	height: 100vh;
	line-height: normal;
	font-style: normal;
	overflow: hidden;
	}

.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1, h2, h3 {
	font-weight: bold;
	text-align: left;
	color: white;
	}

h1 {
	font-size: 2em;
	}

h2 {
	font-size: 1.6em;
	padding: 10px 0 0 0;
	margin: 0px;
	}

h3 {
	font-size: 1.3em;
	padding: 0;
	margin: 30px 0 0;
	}

h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
	text-decoration: none;
	color: rgb(255, 255, 255);
	}

h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #ffffff;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

h2.pagetitle {
	margin-top: 10px;
	text-align: center;
	font-size: 1.6em;
}

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */

.sidebar-rail {
	display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0;
	white-space: nowrap;
}

.sidebar-content {
    flex: 1;
    transition: transform 0.3s ease, opacity 0.1s ease;
	position: relative;
}

body.sidebar-collapsed .left-column {
    width: 2.5rem;   /* match your rail */
	overflow: hidden;
}

body.sidebar-collapsed .sidebar-content {
	opacity: 0;
    transform: translateX(-100%);
	pointer-events: none;
}

body.sidebar-collapsed .sidebar-rail h1,
body.sidebar-collapsed .sidebar-rail .sidebar-nav-item span {
    opacity: 0;
    transition: opacity 0s ease;
}

body:not(.sidebar-collapsed) .left-column {
    overflow-y: auto;
}

body:not(.sidebar-collapsed) .sidebar-content,
body:not(.sidebar-collapsed) .sidebar-rail h1,
body:not(.sidebar-collapsed) .sidebar-rail .sidebar-nav-item span {
    opacity: 1;
    transition: transform 0.3s ease, opacity 2s ease 0.3s;
}

.filter-toggle {
	background: none;
    border: none;
	padding: 0;
    position: static;
    margin: 0;
	z-index: 1000;
	color: rgb(255, 255, 255);
	font-size: 2rem;
	justify-self: center;
}

.filter-toggle img {
    grid-column: 1;
    grid-row: 5;
	filter: brightness(0) invert(1);
	width: 2rem;
	height: 2rem;
	padding: 0;
	margin: auto;
	vertical-align: baseline;
}

.faq-button {
	grid-column: 1;
	grid-row: 4;
	background: none;
	border: none;
	padding: 0;
	position: static;
	margin: 0;
	z-index: 1000;
	color: rgb(255, 255, 255);
	font-size: 2rem;
	justify-self: center;
}

.sidebar-nav-item img {
	width: 2rem;
	height: 2rem;
	padding: 0;
	filter: brightness(0) invert(1);
}

.sidebar-nav-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    text-decoration: none;
	grid-column: 1 / span 2;
	height: 3em;
	align-items: center;
	color: #ccc;
	text-align: left;
	font-size: 1rem;
	cursor: pointer;
	box-sizing: border-box;
    line-height: 1;
    padding: 0;

}

.sidebar-nav-item span {
	padding-left: 0.75rem;
}

.sidebar-nav-item:hover {
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
}

.sidebar-nav-item:hover span {
    color: white;
}

.sidebar-nav-item:hover img{
    filter: brightness(1);
}

.sidebar-nav-item:hover .home-link {
    content: url("assets/images/home.png");
	filter: brightness(0) invert(1);
}

.sidebar-nav-item:hover .faq-link {
    content: url("assets/images/question-sign1.svg");
	filter: brightness(0) invert(1);
}

.sidebar-nav-item.active span {
	color: #74b9e7;
	font-weight: bold;
}

#active-filters {
    margin-top: var(--space-sm);
}

/* Group container */
.filter-group {
    margin-bottom: var(--space-sm);
}

/* Header */
.filter-group-title {
    font-weight: bold;
    margin-bottom: var(--space-xs);
	text-align: left;
}

/* The X button on the left */
.remove-chip {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.5em;
    color: #888;
    padding: 0;
}

.remove-chip:hover {
    color: red;
}

.main-row {
	display: flex;
	flex: 1 1 auto; /* take up remaining space, but allow footer room */
	min-height: 0;
	background-color: transparent;
	position: relative;
}

.left-column {
	min-width: 0;
	width: 17vw;
	display: flex;
	flex-direction: column;
    transition: width 0.3s ease;
	padding: var(--space-sm);
	margin: var(--space-sm);
  }

.center-column {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	padding: var(--space-sm);
	margin: var(--space-sm);
	margin-left: 0;
	padding-left: 1.5em;
	}

.left-column,
.center-column {
	scrollbar-gutter: stable;
	overflow-y: auto;
	overflow-x: hidden;
	background: rgba(255, 255, 255, 0.05); /* semi-transparent background */
	backdrop-filter: blur(0.25em); /* blur the background behind it */
	-webkit-backdrop-filter: blur(0.25em); /* Safari support */
	border: 0.1em solid rgba(255, 255, 255, 0.2); /* subtle border for glass effect */
	border-radius: 0.7em; /* rounded corners */
	}

.bottom-row {
		background-color: #e9e9e9;
		font-size: 0.9em;
		color: rgb(42, 42, 42);
		padding: 0.35em;
		text-align: center;
		height: auto;
		flex-shrink: 0;
	}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 2000;
}

.modal.active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.modal.active .modal-content {
    transform: translateY(0);
}
.modal-content {
    background: #507994; /* matches your theme */
    backdrop-filter: blur(0.5em);
    padding: 2rem;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 0.1em solid rgba(255,255,255,0.2);
	transform: translateY(10px);
    transition: transform 0.25s ease;
    width: min(90vw, 700px);   /* Replace fit-content */
	height: 80vh;
    max-height: 80vh;
	scrollbar-gutter: stable;
}

.modal-content p {
    text-align: left;
	font-size: 0.9rem;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

.modal-content h3 {
	margin-top: 0.75em;
}

.modal-content a {
	color: #ffffff;
}

.modal-content a:hover {
	font-weight: bold;
}

.close-modal {
    position: absolute;
    right: 1rem;
    top: 0.8rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}	

.dashboard {
    display: grid;
    grid-template-columns: 3fr 1fr;   /* left wide, right narrow */
    grid-template-rows: auto 1fr;      /* two rows */
    gap: var(--space-sm);;
    flex: 1;          /* 👈 take remaining space */
    min-height: 0;
	margin: 0;
	padding: 0;
}

.dashboard-map {
    display: grid;
    grid-template-columns: 2fr 1fr;   /* left wide, right narrow */
    gap: var(--space-sm);;
    flex: 1;          /* 👈 take remaining space */
    min-height: 0;
	margin: 0;
	padding: 0;
}

#stack-panel {
    grid-row: 1 / 3;
    grid-column: 1;
}

#pie-panel {
    grid-row: 2;
    grid-column: 2;
}

.stack, .pie {
    min-height: 0;
	height: 100%;
	padding: 0;
	flex: 1;
}

.panel {
	background: white;
	border-radius: 0.6rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	color:rgb(0, 0, 0);
	text-align: left;
	gap: var(--space-sm);
	min-height: 0;
	display: flex;
    flex-direction: column;
  }

.panel h2 {
	color: #000000;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
}
  
/* Top-right box */
#key-values {
    grid-row: 1;
    grid-column: 2; 
	padding: var(--space-sm);
	padding-top: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
  
.kv-card {
	background: rgba(0, 0, 0, 0.04);
	padding: 0.5rem;
	border-radius: 10px;
}

.kv-card:hover {
background: rgba(0, 0, 0, 0.1);
}

.kv-title {
font-size: 0.8rem;
opacity: 0.7;
}

.kv-value {
font-size: 1.3rem;
font-weight: bold;
}

.kv-sub {
font-size: 0.8rem;
opacity: 0.6;
}

.toggle-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Switch container */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}

/* Hide default checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* Slider */
.slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: #ccc;
	border-radius: 24px;
	transition: 0.3s;
}

/* Knob */
.slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #143d59;
border-radius: 50%;
transition: 0.3s;
}

input:checked + .slider::before {
	transform: translateX(26px);
}

/* ✨ 3D Moving Starfield Background */
body {
	background-color: #05070f;
}

*, ::after, ::before {
	box-sizing: content-box !important;
}

#slider, #slider * {
	box-sizing: border-box !important;
}

p {
	margin-top: 0.85em;
	margin-bottom: 0.85em;
}

.filter-container {
	display: flex; 
	flex-direction: column; 
}

.filter {
	position: relative;
	background: #143d59;
	margin-top: 0.5em;
	color: whitesmoke;
	padding: 0.3em;
	height: auto;
	cursor: pointer; /* show pointer on hover */
	text-align: left;
	border-radius: 0.6rem;
}

.filter label {
	font-size: 1em;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.filter label::after {
	content: '';
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;
	border-top: 0.4em solid whitesmoke;
	vertical-align: middle;
	transition: transform 0.3s ease;
	margin-left: 0.5em;
}

/* Arrow down (open) */
.filter.open label::after {
	transform: rotate(180deg);
}

/* Remove any arrows from dropdown labels */
.dropdown label::after {
	display: none !important;
	content: none !important;
}

/* Hide dropdown initially */
.dropdown ul {
	display: none;
	position: absolute;
	list-style-type: none;
	background-color: #8dc4ee;
	max-height: 30vh;
	overflow-y: auto;
	width: 100%;
	min-width: unset; /* Ensure a minimum width */
	white-space: normal;
	border-radius: 0.3rem;
	z-index: 100;
	top: calc(100% + 0.3rem);
	left: calc(0% - 0.3rem);
}

.dropdown label {
	display: flex;
	align-items: center;
	text-align: left;
	padding: 0;
}

.filter.open .dropdown ul {
	display: block;
	padding: 0.4em;
}

.wrap-text {
	white-space: normal;
	word-wrap: break-word;
	max-width: 25vh; /* Adjust the width as needed */
}

.tab-pane {
	height: 100%;
	display: flex; /* Ensure children align properly */
	flex-direction: column; /* Align children vertically */
	background: rgba(255, 255, 255, 0.92);
	border-radius: 1rem;
	box-sizing: border-box;
	padding: var(--space-sm);
	overflow: hidden;
	flex-grow: 1;
}

.tab-pane h1 {
	color:#000000;
	text-align: center;
	margin: 0;
}

.tab-content > .tab-pane {
    height: 100%;
}

.tab-content > .active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.map-tabpane, .chart-tabpane {
	height: 100%;
	width: 100%;
}

.filter-button {
	padding: 0.4em;
	background-color: #143d59;
	border: 0.1em solid #ccc;
	border-radius: 0.5em;
	color: whitesmoke;
	margin: 0;
	margin-top: 0.5em;
}


.filter-buttons {
    display: flex;
    gap: 10px; /* space between buttons */
	width: 100%;
}

.filter-button {
    /* optional styling */
	flex: 1;
    padding: 8px 16px;
}

#myTabContent {
	margin: 1em 0 1em 0;
	flex: 1;	
	display: flex; /* Optional: Ensures children align properly */
	flex-direction: column; /* Optional: Aligns children vertically */
	min-height: 0;
}

#map, #site-details {
	height: 100%;   /* Fill the column vertically */
	width: 100%;    /* Fill the column horizontally */
	min-height: 10px;
	min-width: 10px;
}

.nav-tabs{
	border: 0;
	font-size: 1.6em;
}

.nav-tabs .nav-item {
	padding-right: 1em;
	margin: 0;
}

.nav-tabs .nav-link {
	background-color: #143d59;
	color: whitesmoke;
	margin-bottom: 0;
	border: 0.1em solid transparent;
	border-bottom-left-radius: 0;
	padding: 0.2em;
}

.nav-tabs .nav-link:hover {
	background-color: #246a99;
	border-color: transparent;
}

.nav-tabs .nav-link.active {
	background-color: #588db1;
	font-weight: bold;
	color: whitesmoke;
	border-color: #588db1;
	box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent, inset 0 0 0 0 transparent, 0 0.3rem 0 0 #143d59;
}

.nav-tabs-container {
	border-bottom: 0.3rem solid #e9e9e9; /* or your desired color */
}


.tracker-header {
    line-height: 1.2;
	text-align: left;
}

.tracker-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.tracker-subtitle {
    font-size: 0.8rem;
}


/* Container to align the tables side by side */
.table-container,
.table-container h3 {
	position: relative;
	color:rgb(0, 0, 0)
}

/* Table styling */
table {
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;
	color: black;
}

th, td, tr {
	padding: 0.3em;
	text-align: left;
	border: 0.1em solid #ddd;
	white-space: nowrap;
}


th {
	background-color: #dddddd;
}

tbody, tr {
	background-color: #ffffff;
}

tfoot {
	font-weight: bold;
	background-color: #ffffff;
}

.faq-item {
	display: block;
	margin-top: 0.5rem;
}

.item-question {
	background: #143d59;
	color: whitesmoke;
	font-size: 1.125em;
	padding: 0.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}
.question-text {
	display: inline-block;
}
.arrows-container {
	margin: 0.4rem;
}
.item-answer {
	display: none;
	color: rgb(0, 0, 0);
	padding: 0.7em;
	border-radius: 0.6rem;
}
.close {
	display: none;
}

.show-answer .item-answer {
	display: block;
	background: #8dc4ee;
}
.show-answer .close {
	display: inline;
}
.show-answer .expand {
	display: none;
}

/* Style for the arrow button on the table*/
.arrow-button {
	padding: 0.2em;
	background: #143d59;
	border: none;
	margin: none;
	color: whitesmoke;			
	font-size: 1em; /* Increase size for better visibility */
	position: absolute; /* Position relative to the table container */
	left: -1.4em; /* Place the button outside the table on the right */
	width: 1em;
	height: calc(0.3em *2 + 0.1em *2 + 1em - 0.2em*2);
	z-index: 10; /* Ensure the button is above other elements */
}

.arrow-button:focus {
	outline: none;
}

/* Styling for the date range slider */

.noUi-horizontal {
	height: 0.35em;
}

.noUi-target {
	border: none;
	background: #e9e9e9;
}

.noUi-value {
	margin-top: 0.5em;
}

.noUi-tooltip {
	padding: 0;
	border: 0;
	color: #ffffff;
	background-color: transparent;
}

.noUi-connect {
	background: #588db1;;
}

.noUi-handle {
	background: #143d59;
	box-shadow: none;
	border: 0;
	border-radius: 50%; 
}

.noUi-handle:before, .noUi-handle:after {
	display: none;
}

.noUi-pips-horizontal {
	padding: 0.7em;
	height: 0.7em;
	color: #ffffff;
}

.noUi-marker, .noUi-marker-large {
	background:  #ffffff;
}

.noUi-horizontal .noUi-handle{
	width: 1.4em;
	height: 1.4em;
	color: #000000;
	right: -0.7em;
	top: -0.7em;
}

select {
	width: 130px;
	}