/* Variables */
:root {
	--primary-text-color-light: #4c4c4c;
	--secondary-text-color-light: #7d7d7d;
	--primary-text-color-dark: #cfcfcf;
	--secondary-text-color-dark: #a0a0a0;
	--primary-background-color-light: #f5f5f5;
	--secondary-background-color-light: #e8e8e8;
	--primary-background-color-dark: #242424;
	--secondary-background-color-dark: #2e2e2e;
	--tab-background-color-light: #dadada;
	--tab-background-color-dark: #3d3d3d;
	--highlight-color-light: #e5e5e5;
	--highlight-color-dark: #303030;
	--border-color-light: #cccccc;
	--border-color-dark: #3a3a3a;
	--black-color: #202020;
	--white-color: #ffffff;
	--red-color: #d32f2f;
	--light-red-color: #ff6b6b;
	--blue-color: #0782b9;
	--light-blue-color: #86c8ff;
	--green-color: #388e3c;
	--light-green-color: #6abf69;
	--grey-color: #999999;
	--darkgrey-color: #777777;
	--yellow-color: #cdbf00;
	--brown-color: #8d6e63;
	--light-brown-color: #ffd8a8;
	--purple-color: #9019c7;
	--light-purple-color: #e3a3ff;
}

/* Keyframes */
@keyframes shake {

	0%,
	100% {
		transform: translateY(0);
	}

	5%,
	15%,
	25% {
		transform: translateY(-3px);
	}

	10%,
	20% {
		transform: translateY(3px);
	}

	30% {
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

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

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

@keyframes shadow-on-scroll {
    from { 
        background-color: var(--secondary-background-color-light);
		border: 1px solid transparent;
		border-top: 1px solid var(--border-color-light);
    }
    to { 
        background-color: rgba(250, 250, 250, 0.8);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 1px solid var(--border-color-light);
    }
}

/* Animation Utility Classes */
.fade-in {
	animation: fadeIn 0.5s ease-out;
}

.slide-in {
	animation: slideIn 0.4s ease-out;
}

.pulse-once {
	animation: pulse 0.3s ease-in-out;
}

.loading {
	animation: loading 1s linear infinite;
}

/* Global Styles */
* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.5rem;
	color: var(--primary-text-color-light);
	background-color: var(--secondary-background-color-light);
	font-family: 'Google Sans Flex', sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	max-width: calc(100vw - 300px);
	min-width: 1000px;
	margin: 0 auto;
}

/* Typography */
b {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--secondary-text-color-light);
	margin: 0 0 10px 0;
	font-weight: 600;
}

h1 {
	font-size: 1.6rem;
}

h2 {
	font-size: 1.35rem;
}

h3 {
	font-size: 1.15rem;
}

h4 {
	font-size: 1.0rem;
}

h5 {
	font-size: 0.9rem;
}

h6 {
	font-size: 0.85rem;
}

hr {
	border: none;
	border-top: 1px solid var(--border-color-light);
	margin: 5px 0 2.5px 0;
}

/* Layout */
header {
	display: flex;
	height: 50px;
	min-height: 50px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

header .logo {
	opacity: 0.5;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 0;
}

header h1 {
	line-height: 40px;
	font-size: 1.35rem;
	font-weight: 500;
	margin: 0;
	padding: 0;
	border: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Navigation */
#navbar {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	text-transform: uppercase;
}

nav .tabs {
	background-color: var(--tab-background-color-light);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
}

nav .tabs li {
	list-style: none;
}

nav .tabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px 4px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	color: var(--secondary-text-color-light);
	border: 1px solid transparent;
	border-radius: 99px;
	transition: color 0.3s, border-color 0.3s, font-weight 0.3s;
}

nav .tabs a:hover {
	color: var(--black-color);
}

nav .tabs a.active {
	font-weight: 600;
	color: var(--black-color);
	background-color: var(--white-color);
	border: 1px solid var(--border-color-light);
}

nav .tabs i {
	margin-right: 5px;
	opacity: 0.5;
}

.logout-link {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--secondary-text-color-light);
	background-color: var(--tab-background-color-light);
	border: 1px solid transparent;
	padding: 4px 10px 4px 8px;
	border-radius: 99px;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.logout-link:hover {
	color: var(--black-color);
	background-color: var(--white-color);
	border-color: var(--border-color-light);
}

/* Container & Layout */
.content-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
}

.scrollable-content-wrapper {
	min-height: 0;
}

.container {
	display: flex;
	flex: 1;
	width: 100%;
	overflow: hidden;
	background-color: var(--primary-background-color-light);
}

.content-wrapper>div:first-of-type {
	width: 100%;
}

/* Map section */
.sidebar {
	flex: 0 0 200px;
	padding: 0;
	padding-right: 15px;
	margin: 0;
	display: flex;
	gap: 10px;
	flex-direction: column;
	overflow-y: auto;
}

#map {
	flex: 1;
	min-width: 350px;
	min-height: 350px;
	position: relative;
	display: flex;
	transition: all 0.3s ease;
	border-radius: 8px;
}

.leaflet-flood-pane {
    opacity: 0.8 !important;
}

.legend {
	color: var(--primary-text-color-light);
	font-size: 0.8rem;
	font-family: 'Google Sans Flex', sans-serif;
	padding: 5px 10px 10px 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
}

.legend h3 {
	margin: 0 0 5px 0;
}

.legendline {
	height: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
}

.legendsymbol {
	width: 12px;
	height: 12px;
}

.legendlabel {
	margin: 0;
	padding: 0;
}

.rightbar {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 10px;
	padding-left: 15px;
	min-width: 300px;
	max-width: 400px;
}

/* Forms & Controls */
.inputs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.input-group {
	display: flex;
	flex-direction: column;
	background-color: var(--primary-background-color-light);
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
	margin: 0;
	padding: 0;
}

.input-group h4 {
	margin: 0;
	font-size: 0.9rem;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 10px;
	border-bottom: 1px solid var(--border-color-light);
}

.input-group> :not(h4) {
	flex: 1;
}

.input-group h4 i {
	margin-left: 5px;
}

.input-group label {
	max-width: none;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.input-group label i {
	margin-left: 5px;
	color: var(--secondary-text-color-light);
}

.select-inputs {
	padding: 10px;
	display: flex;
	flex-direction: column;
}

.scenario-inputs {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.scenario-inputs label {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

.scenario-inputs input[type="radio"] {
	margin: 0;
	cursor: pointer;
	width: 16px;
	height: 16px;
}

.scenario-inputs label:hover {
	background-color: var(--highlight-color-light);
}

.scenario-inputs input[type="radio"]:checked+span {
	font-weight: 600;
}

.select-inputs hr {
	margin: 6px 0;
	border: none;
	border-top: 1px solid var(--border-color-light);
}

.select-inputs label {
	font-weight: 500;
	color: var(--secondary-text-color-light);
	margin-bottom: 2px;
}

select {
	display: block;
	width: 100%;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid var(--border-color-light);
	background-color: var(--primary-background-color-light);
	color: var(--primary-text-color-light);
	font-family: inherit;
	transition: all 0.3s ease;
	cursor: pointer;
}

select:hover {
	border-color: var(--grey-color);
	background-color: var(--highlight-color-light);
}

select:focus {
	outline: none;
	background-color: var(--white-color);
	border-color: var(--blue-color);
}

select optgroup {
	text-transform: uppercase;
	font-style: normal;
}

select optgroup option {
	text-transform: none;
}

/* Login Page */
.login-page {
	width: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.login-card {
	width: min(100%, 300px);
	padding: 30px;
	border-radius: 16px;
	border: 1px solid var(--border-color-light);
	background-color: var(--primary-background-color-light);
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.login-card-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	gap: 15px;
}

.login-card-header i {
	font-size: 2rem;
	color: var(--secondary-text-color-light);
	background-color: var(--highlight-color-light);
	min-width: 60px;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
}

.login-card-header .login-card-text-wrapper {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.login-card h2 {
	font-weight: 500;
	margin: 0 0 5px 0;
	font-size: 1.5rem;
	color: var(--secondary-text-color-light);
}

.login-card p {
	margin: 0;
	color: var(--primary-text-color-light);
	line-height: 1.2rem;
}

.login-card label {
	color: var(--primary-text-color-light);
}

.login-card form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
	width: 100%;
	padding: 4px 8px;
	border: 1px solid var(--border-color-light);
	border-radius: 4px;
	background-color: var(--white-color);
	color: var(--primary-text-color-light);
	font: inherit;
}

.login-card input[type="text"]:-webkit-autofill,
.login-card input[type="password"]:-webkit-autofill,
.login-card input[type="text"]:-internal-autofill-selected,
.login-card input[type="password"]:-internal-autofill-selected {
	box-shadow: 0 0 0px 1000px var(--white-color) inset !important;
	-webkit-text-fill-color: var(--black-color) !important;
}

.login-card input:focus {
	outline: none;
	border-color: var(--secondary-text-color-light);
	background-color: var(--white-color);
}

.button,
.login-button {
	width: fit-content;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 15px;
	border-radius: 8px;
	background-color: var(--secondary-text-color-light);
	border: none;
	color: var(--white-color);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.button:hover,
.login-button:hover {
	background-color: var(--primary-text-color-light);
	transform: translateY(-1px);
}

.button:active,
.login-button:active {
	transform: translateY(0);
}

.login-error {
	width: fit-content;
	padding: 10px 15px;
	border-radius: 12px;
	background-color: rgba(211, 47, 47, 0.1);
	border: 1px solid rgba(211, 47, 47, 0.2);
	color: var(--red-color);
	display: flex;
	gap: 15px;
	align-items: center;
	line-height: 1.2rem;
}

.login-error i {
	font-size: 2rem;
}

/* Page Sections */
.page-section {
	padding: 15px;
	background-color: var(--primary-background-color-light);
	border: 1px solid var(--border-color-light);
	border-bottom: none;
	border-radius: 0;
	transition: all 0.3s ease;
	max-width: 100%;
	min-width: 100%;
}

.page-section:first-of-type:last-of-type {
	border-bottom: 1px solid var(--border-color-light);
	border-radius: 16px;
}

.page-section:first-of-type {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.page-section:last-of-type {
	border-bottom: 1px solid var(--border-color-light);
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

.export-section {
	padding: 15px;
}

.section-header {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.section-header h1,
.section-header h2,
.section-header h3 {
	color: var(--primary-text-color-light);
	font-size: 0.9rem;
	text-transform: uppercase;
	margin: 0;
	min-height: 24px;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
}

.section-toggle {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: none;
	border: 1px solid var(--border-color-light);
	border-radius: 50%;
	color: var(--grey-color);
	cursor: pointer;
	transition: transform 0.3s ease;
	box-shadow: none;
}

.section-toggle:hover {
	color: var(--black-color);
	background: none;
	box-shadow: none;
}

.section-toggle i {
	margin: 0;
	padding: 0;
	transition: rotate 0.3s ease;
	display: inline-block;
}

.page-section.collapsed .section-toggle i {
	transform: rotate(180deg);
}

.section-summary-and-icon-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

.export-panel {
	display: grid;
	width: 100%;
	max-width: none;
}

.export-panel-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-10px);
	transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.35s ease, padding 0.3s ease;
	padding-top: 0;
}

.export-panel-body.visible {
	max-height: 2000px;
	opacity: 1;
	transform: translateY(0);
	padding-top: 1rem;
}

.export-panel-body.hidden {
	max-height: 0;
	opacity: 0;
	transform: translateY(-10px);
	padding-top: 0;
}

.export-column-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 30px;
	padding: 15px;
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
	margin: 15px 0;
}

.export-column-group h4 {
	color: var(--primary-text-color-light);
	border-bottom: 1px solid var(--border-color-light);
	padding-bottom: 5px;
}

.export-column-group .dash-options-list-option {
	display: flex;
	align-items: center;
}

.export-column-group .dash-checklist {
	padding: 0;
	border: none;
	background: transparent;
}

.export-column-group .dash-checklist label {
	line-height: 1.2rem;
	display: flex;
}

@media (max-width: 1100px) {
	.export-column-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.export-column-groups {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

.section-summary-item-wrapper {
	display: block;
	background-color: var(--white-color);
	border: 1px solid var(--border-color-light);
	border-radius: 99px;
	padding: 2px 6px 2px 4px;
}

.section-summary-item-wrapper i {
	font-size: 0.8rem;
	line-height: 1.2rem;
	margin: 0;
	margin-right: 5px;
}

.section-summary-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	font-weight: 400;
    text-transform: none;
    font-size: 0.8rem;
	line-height: 1.2rem;
    color: var(--secondary-text-color-light);
}

.section-summary-value {
	font-weight: 600;
	font-size: 1rem;
    color: var(--primary-text-color-light);
}

.section-summary-item {
    opacity: 0.8;
}

/* CSS Grid transitions for collapse */
.collapse-content {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s ease;
}

.page-section.collapsed .collapse-content,
.results-wrapper.collapsible.collapsed .collapse-content {
	grid-template-rows: 0fr;
}

.collapse-inner {
	overflow: hidden;
	transition: opacity 0.3s ease;
	opacity: 1;
}

.page-section.collapsed .collapse-inner,
.results-wrapper.collapsible.collapsed .collapse-inner {
	opacity: 0;
}

.page-section.collapsed .story-content {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Sticky Filters */
.sticky-filters {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 10px 20px;
	background-color: var(--secondary-background-color-light);
	border-top: 1px solid var(--border-color-light);
}

@supports (animation-timeline: scroll()) {
    .sticky-filters {
        animation: shadow-on-scroll linear forwards;
        animation-timeline: scroll(root);
        animation-range: 0px 50px;
    }
}

/* Analytics page */
.dash-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.dash-row {
	display: flex;
	flex-direction: row;
	gap: 15px;
	width: 100%;
	overflow-x: auto;
}

.dash-column {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 15px;
	min-width: 300px;
	max-width: 600px;
	height: 350px;
}

.dash-column .dash-graph-wrapper {
	height: auto;
}

.dash-column .depth-distribution-wrapper {
	flex: 2;
}

.dash-graph-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 300px;
	max-width: 600px;
	height: 350px;
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
}

.dash-graph-wrapper .dash-graph {
	padding: 10px 15px 15px 15px;
}

.risk-progress-card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.risk-progress-card-inner {
	display: flex;
	gap: 0;
	align-items: center;
	padding: 15px;
	width: 100%;
}

.risk-progress-card-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 5px;
}

.risk-progress-card-text-wrapper {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	padding: 0 5px;
}

.risk-progress-card-percent {
	font-size: 2rem;
	font-weight: 500;
}

.risk-progress-card-bar {
	width: 100%;
	height: 10px;
	background: var(--border-color-light);
	border-radius: 99px;
	overflow: hidden;
}

.risk-progress-card-fill {
	height: 100%;
	border-radius: 99px;
	background: var(--red-color);
}

.risk-progress-card-counts {
	display: flex;
	flex-direction: row;
	gap: 5px;
	align-items: baseline;
	font-size: 1rem;
	line-height: 1rem;
}

.risk-progress-card-exposed {
	color: var(--primary-text-color-light);
	font-size: 1.2rem;
	font-weight: 600;
}

.risk-progress-card-total, .risk-progress-card-separator {
	color: var(--secondary-text-color-light);
	font-size: 0.9rem;
}

/* Theme-specific progress bar styles */
.theme-dark .risk-progress-card-fill {
	background: var(--light-red-color);
}

.theme-light .risk-progress-card-fill {
	background: var(--red-color);
}

.theme-dark .risk-progress-card-bar {
	background: var(--border-color-dark);
}

.theme-light .risk-progress-card-bar {
	background: var(--border-color-light);
}

.tabbed-dash-graph-wrapper {
	border: none;
}

.in-tab-dash-graph-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 300px;
	max-width: 600px;
	height: 310px;
	border: 1px solid var(--border-color-light);
	border-top: none;
	border-radius: 0 0 8px 8px;
}

.dash-graph-wrapper h4 {
	height: 40px;
	text-align: center;
	color: var(--secondary-text-color-light);
	margin: 0;
	padding: 10px 15px;
	font-size: 1rem;
	font-weight: 400;
}

.threshold-control-wrapper {
	display: flex;
	flex-direction: row;
	gap: 15px;
	align-items: center;
	padding: 15px;
	border-top: 1px solid var(--border-color-light);
}

.threshold-indicator-column {
	min-width: 100px;
	flex: 1;
}

.threshold-slider-column {
	min-width: 0;
	flex: 1.5;
}

.threshold-indicator-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.threshold-indicator-value {
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-text-color-light);
}

.threshold-indicator-caption {
	font-size: 0.9rem;
	line-height: 1.2rem;
	color: var(--primary-text-color-light);
	text-align: left;
}

.threshold-control-label {
	color: var(--secondary-text-color-light);
	display: flex;
	font-size: 0.8rem;
	margin-bottom: 5px;
}

.threshold-slider-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 5px;
}

.threshold-reset-button {
	height: 25px;
	width: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	border-radius: 99px;
	border: 1px solid var(--border-color-light);
	background-color: var(--primary-background-color-light);
	color: var(--secondary-text-color-light);
	cursor: pointer;
}

.threshold-reset-button:hover {
	background-color: var(--highlight-color-light);
	color: var(--primary-text-color-light);
}

.threshold-histogram-graph {
	flex: 1 1 auto;
	min-height: 0;
}

.threshold-control-wrapper .dash-slider-track {
	background-color: var(--border-color-light);
}

.threshold-control-wrapper .dash-slider-range {
	background-color: var(--primary-text-color-light) !important;
}

.threshold-control-wrapper .dash-slider-thumb {
	background-color: var(--primary-text-color-light);
	border: 2px solid var(--primary-background-color-light);
	box-shadow: none;
}

.threshold-control-wrapper .dash-slider-mark {
	color: var(--primary-text-color-light);
}

.threshold-control-wrapper .dash-slider-mark-outside-selection {
	color: var(--secondary-text-color-light);
}

.threshold-control-wrapper .dash-slider-mark::before {
	background-color: var(--border-color-light);
	width: 2px;
	height: 4px;
}

.dash-container .tab-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.dash-container .tab {
	display: flex;
	height: 40px;
	line-height: 1.2rem;
	align-items: center;
	justify-content: center;
    padding: 0;
    margin: 0;
	background-color: transparent;
	color: var(--grey-color);
	border: none !important;
	border-bottom: 1px solid var(--border-color-light) !important;
}

.dash-container .tab:hover {
	color: var(--secondary-text-color-light);
}

.dash-container .tab--selected {
	color: var(--secondary-text-color-light);
	border-top: 1px solid var(--border-color-light) !important;
	border-left: 1px solid var(--border-color-light) !important;
	border-right: 1px solid var(--border-color-light) !important;
	border-bottom: none !important;
	border-radius: 8px 8px 0 0;
}

/* Dash dropdown */
.dash-custom-dropdown {
	width: fit-content;
	max-width: 300px;
	box-shadow: none;
	margin: 0;
	background-color: var(--primary-background-color-light);
	border-color: var(--border-color-light);
    border-radius: 4px;
}

.dash-custom-dropdown:hover {
	background-color: var(--highlight-color-light);
	border-color: var(--grey-color);
	box-shadow: none;
}

.dash-custom-dropdown .dash-dropdown-value,
.dash-custom-dropdown .dash-dropdown-value-count {
	color: var(--primary-text-color-light);
	font-weight: normal;
}

.dash-custom-dropdown .dash-dropdown-clear {
	color: var(--secondary-text-color-light);
}

.dash-custom-dropdown.filter-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.dash-dropdown-actions button {
	box-shadow: none;
}

.dash-dropdown-actions button:hover {
	background-color: var(--highlight-color-light);
}

.dash-dropdown-trigger {
	max-height: 30px;
	min-height: 30px;
}

.dash-dropdown-trigger-icon {
	color: var(--secondary-text-color-light);
}

.dash-dropdown-option {
	display: flex;
	align-items: center;
	height: auto !important;
}

/* Dash input */
.dash-range-slider-input {
	width: 30px !important;
	height: auto;
	padding: 5px;
	background-color: var(--primary-background-color-light);
	border: 1px solid var(--border-color-light);
}

.no-data-message {
	font-size: 12px;
	color: var(--secondary-text-color-light);
	text-align: center;
}

/* Dash elements fixes */
.content-wrapper footer {
	display: none;
}

.mapboxgl-ctrl-attrib-button {
	display: none;
}

/* Vulnerability list */
.vulnerability-list-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 15px;
	min-width: 250px;
	max-width: 350px;
	background-color: var(--primary-background-color-light);
	overflow: hidden;
}

.vulnerability-list-header {
	height: 40px;
	display: flex;
	gap: 5px;
	padding: 0 5px;
	text-align: left;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	line-height: 1.2rem;
	color: var(--secondary-text-color-light);
}

.vulnerability-list-content {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vulnerability-list-item {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	padding: 0 5px;
	border-bottom: 1px solid var(--border-color-light);
	font-size: 0.9rem;
}

.vulnerability-list-item:first-of-type:last-of-type,
.vulnerability-list-item:last-of-type {
	border-bottom: none;
}

.vulnerability-list-name {
	color: var(--primary-text-color-light);
	display: flex;
	flex: 1;
	align-items: baseline;
	line-height: 1rem;
	gap: 4px;
}

.vulnerability-list-abbr {
	font-size: 0.7rem;
	font-weight: normal;
	color: var(--secondary-text-color-light);
}

.vulnerability-list-value-container {
	padding: 5px 0;
	display: flex;
	width: 80px;
	justify-content: space-between;
	position: relative;
}

.vulnerability-list-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	z-index: 0;
	border-right: 4px solid rgba(255, 135, 135, 0.4);
	background-color: rgba(255, 135, 135, 0.2);
	transition: width 0.3s ease;
}

.vulnerability-list-value {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	font-weight: 600;
	font-size: 14px;
	text-shadow: 0px 0px 2px var(--primary-background-color-light);
	position: relative;
	z-index: 1;
}

.vulnerability-list-percentage {
	flex: 0.5;
	margin-left: 5px;
	display: flex;
	justify-content: flex-end;
	font-weight: 400;
	font-size: 0.8rem;
	text-shadow: 0px 0px 2px var(--primary-background-color-light);
	position: relative;
	z-index: 1;
}

.vulnerability-list-duration {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	font-weight: 600;
	font-size: 14px;
	text-shadow: 0px 0px 2px var(--primary-background-color-light);
	position: relative;
	z-index: 1;
}

/* Text contents */
.story-content {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-color-light);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	word-break: normal;
	overflow-wrap: break-word;
	overflow-y: auto;
}

.story-content p {
	margin: 0 0 10px 0;
}

.story-content p:first-of-type:last-of-type {
	margin-bottom: 10px;
}

.story-content p:last-of-type {
	margin-bottom: 0;
}

.story-content a {
	color: var(--blue-color);
	text-decoration: none;
}

.story-content a:hover {
	text-decoration: underline;
}

.story-content table {
	margin: 20px 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
	overflow: hidden;
}

.story-content table th,
.story-content table td {
	padding: 5px 10px;
	border: 0.5px solid var(--border-color-light);
}

.story-content table tr:last-child td {
	border-bottom: none;
}

.story-content table tr:first-child th {
	border-top: none;
}

.story-content table td:first-child,
.story-content table th:first-child {
	border-left: none;
}

.story-content table td:last-child,
.story-content table th:last-child {
	border-right: none;
}

.story-content table th {
	text-align: left;
	border-bottom: 2px solid var(--border-color-light);
}

.story-content code {
	font-family: 'Google Sans Code', monospace;
	background-color: var(--highlight-color-light);
	padding: 2px 4px;
	border-radius: 4px;
}

.story-content figure {
	width: fit-content;
	padding: 10px 0;
	margin: 10px 0;
}

.story-content figure img {
	display: inline-flex;
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
}

.story-content figure figcaption {
	padding: 0 10px;
	line-height: 1.2rem;
}

.story-content figure figcaption .caption-note {
	font-size: 0.8rem;
	display: block;
	font-style: italic;
	color: var(--secondary-text-color-light);
}

.story-content figure figcaption .caption-note a {
	color: var(--secondary-text-color-light);
}

.documentation .story-content {
	padding-top: 0;
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	column-gap: 15px;
	row-gap: 0;
	align-items: start;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.documentation .toc-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: sticky;
	top: 10px;
	max-height: 100%;
	overflow-y: auto;
	padding: 0 10px 0 0;
}

.documentation .toc .toc-list {
	font-size: 0.9rem;
	line-height: 2rem;
	padding: 0;
	margin: 0;
}

.documentation .toc .toc-list .is-active-link {
	font-weight: 400;
}

.documentation .toc .toc-list .is-active-link::before {
	background: none;
}

.documentation .toc .toc-list .toc-link::before {
	background: none;
}

.documentation .back-to-top {
	font-size: 0.8rem;
	color: var(--secondary-text-color-light) !important;
	text-decoration: none;
	grid-column: 2;
	padding: 0 15px;
	border-left: 1px solid var(--border-color-light);
}

.documentation .back-to-top:hover {
	color: var(--black-color);
}

.documentation .back-to-top i {
	margin-right: 5px;
}

/* Automatic heading numbering */
.documentation.page-section {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.documentation .doc-wrapper {
	padding: 10px 20px;
	counter-reset: h3-counter;
	min-width: 0;
	border-left: 1px solid var(--border-color-light);
}

.documentation .doc-wrapper h3 {
	counter-reset: h4-counter;
	counter-increment: h3-counter;
}

.documentation .doc-wrapper h3::before {
	content: counter(h3-counter) ".\00a0";
}

.documentation .doc-wrapper h4 {
	counter-reset: h5-counter;
	counter-increment: h4-counter;
}

.documentation .doc-wrapper h4::before {
	content: counter(h3-counter) "." counter(h4-counter) ".\00a0";
}

.documentation .doc-wrapper h5 {
	counter-reset: h6-counter;
	counter-increment: h5-counter;
}

.documentation .doc-wrapper h5::before {
	content: counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) ".\00a0";
}

.documentation .doc-wrapper h6 {
	counter-increment: h6-counter;
}

.documentation .doc-wrapper h6::before {
	content: counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "." counter(h6-counter) ".\00a0";
}

/* Loading states */
.global-loading-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 14px;
	background: transparent;
	pointer-events: none;
	z-index: 9999;
}

.global-loading-overlay.visible {
	display: flex;
}

.global-loading-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	width: min(420px, 92vw);
	background: var(--primary-background-color-light);
	border: 1px solid var(--border-color-light);
	border-radius: 12px;
	padding: 20px 30px 20px 20px;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
	pointer-events: auto;
}

.global-loading-card i {
	font-size: 2rem;
	color: var(--secondary-text-color-light);
}

.global-loading-card .global-loading-message-and-bar-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.global-loading-card h4 {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	color: var(--primary-text-color-light);
}

.global-loading-card #global-loading-message {
	color: var(--secondary-text-color-light);
}

.global-loading-track {
	width: 100%;
	height: 8px;
	margin-bottom: 4px;
	border-radius: 99px;
	background: var(--border-color-light);
	overflow: hidden;
}

.global-loading-fill {
	width: 0%;
	height: 100%;
	border-radius: 99px;
	background: var(--primary-text-color-light);
	transition: width 1.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.global-loading-message-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px 0;
}

.global-loading-message-container span {
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.global-loading-percent {
	color: var(--secondary-text-color-light);
	text-align: right;
}

/* Blur content sections while loading */
body.global-loading-active .content-wrapper .page-section {
	filter: blur(8px);
	opacity: 0.9;
	pointer-events: none;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

body.global-loading-active .content-wrapper .sticky-filters {
	filter: none;
	opacity: 1;
	pointer-events: auto;
}

.loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: loading 1s ease-in-out infinite;
}

.loading-state {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

.loading-state::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 2px solid rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	border-top-color: var(--blue-color);
	animation: loading 1s ease-in-out infinite;
}

/* Info Panels and Results */
#info-panel-container {
	transition: opacity 0.3s ease;
}

#info-panel-container:not([style*="display: none"]) {
	opacity: 1;
}

#info-panel-container[style*="display: flex"] {
	animation: slideIn 0.4s ease-out;
}

.result-group {
	transition: all 0.3s ease;
}

.result-group:not([style*="display: none"]) {
	animation: fadeIn 0.5s ease-out;
}

#storytelling-text {
	font-size: 1rem;
	padding: 10px;
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
}

#storytelling-text #storytelling-text-with-path {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#storytelling-text:not(:empty) {
	animation: fadeIn 0.5s ease-out;
}

#storytelling-text-no-path {
	display: none;
}

#storytelling-text p {
	margin: 0;
}

#storytelling-text p:not(:has(span:not(:empty))) {
	display: none;
}

#storytelling-text .storytelling-value {
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 99px;
	padding: 2px 4px;
	line-height: 1rem;
	vertical-align: middle;
	white-space: nowrap;
	border-width: 1px;
	border-style: solid;
	position: relative;
	bottom: 2px;

	/* defaults (overridden per indicator below) */
	background-color: var(--white-color);
	border-color: rgba(0, 0, 0, 0.2);
	color: var(--black-color);
}

#storytelling-text .storytelling-value::before {
	margin-right: 2px;
	font-family: "Font Awesome 7 Free";
	font-weight: 600;
	font-size: 0.8rem;
	flex-shrink: 0;
}

/* Village / start location */
#story-start-location.storytelling-value::before {
	content: '\f3c5';
	color: var(--purple-color);
}

/* Walking distance */
#story-distance.storytelling-value::before {
	content: '\f554';
	color: var(--blue-color);
}

/* CSB / health center */
#story-csb.storytelling-value::before {
	content: '\e3b2';
	color: var(--red-color);
}

/* Terrain / elevation */
#story-elevation.storytelling-value::before {
	content: '\f6fc';
	color: var(--brown-color);
}

/* Walking duration */
#story-duration.storytelling-value::before {
	content: '\f017';
	color: var(--red-color);
}

/* Water crossings count */
#story-crossings-total .storytelling-value::before {
	content: '\f773';
	color: var(--blue-color);
}

/* Cost diff (time variation) */
#story-cost-diff .storytelling-value::before {
	content: '\f251';
	color: var(--red-color);
}

#elevation-profile-container[style*="display: flex"] {
	animation: fadeIn 0.5s ease-out;
}

#slope-profile-container[style*="display: flex"] {
	animation: fadeIn 0.5s ease-out;
}

/* Results & Info */
.results-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
}

.result-group {
	width: 100%;
	padding: 10px;
	margin: 0;
	border: 1px solid var(--border-color-light);
	border-bottom: none;
	border-radius: 0;
	background-color: var(--primary-background-color-light);
	position: relative;
}

.result-group:first-of-type:last-of-type {
	border-radius: 4px;
	border-bottom: 1px solid var(--border-color-light);
}

.result-group:first-of-type {
	border-radius: 4px 4px 0 0;
	border-top: 1px solid var(--border-color-light);
}

.result-group:last-of-type {
	border-radius: 0 0 4px 4px;
	border-bottom: 1px solid var(--border-color-light);
}

.result-group h4,
.result-group h5 {
	display: inline-block;
	width: fit-content;
	margin: 0;
	padding: 0;
}

.result-group .chart-summary {
	float: right;
	text-align: right;
	font-size: 0.8rem;
	line-height: 10pt;
	font-style: italic;
	color: var(--secondary-text-color-light);
	margin: 0 0 5px 10px;
}

.result-group .chart-summary small {
	font-style: normal;
}

/* Collapsible results-wrapper */
.results-wrapper.collapsible {
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
	padding: 10px;
	transition: all 0.3s ease;
}

.results-wrapper.collapsible.collapsed .section-toggle i {
	transform: rotate(180deg);
}

.results-wrapper.collapsible .section-header {
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0 0 10px 0;
}

.results-wrapper.collapsible.collapsed .section-header {
	margin: 0;
}

.results-wrapper.collapsible .section-header h4 {
	font-size: 0.9rem;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	margin: 0;
}

.results-wrapper.collapsible .section-header h4 i {
	margin-left: 5px;
}

.message-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	padding: 10px 15px;
	margin: 10px 0;
	background-color: var(--white-color);
	border: 1px solid var(--border-color-light);
	border-radius: 12px;
	width: fit-content;
	max-width: 26rem;
	text-align: left;
	transform-origin: center;
	animation: shake 5s ease-in-out infinite;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.message-box i {
	font-size: 1.5rem;
	color: var(--secondary-text-color-light);
}

.message-box .message-text {
	font-size: 0.9rem;
}

#info-panel-container {
	display: none;
	flex-direction: column;
	justify-content: start;
	align-items: start;
}

#info-panel {
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#info-panel .info-path.timeline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

#info-panel .info-path.timeline::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background-color: var(--border-color-light);
	z-index: 0;
}

.timeline-item {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}

.timeline-marker {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--border-color-light);
	margin-right: 5px;
}

.end-marker {
	background-color: var(--red-color);
}

#info-panel .timeline-content {
	white-space: nowrap;
}

#info-panel #start-coords,
#info-panel #csb {
	text-align: left;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--primary-text-color-light);
}

#info-panel small {
	font-size: 0.8rem;
	font-weight: normal;
	color: var(--secondary-text-color-light);
	display: block;
}

.info-details {
	display: flex;
	flex-direction: column;
}

.info-details .distance,
.info-details .duration {
	display: flex;
	position: relative;
	flex-direction: row;
	align-items: center;
	padding: 0 0 0 10px;
	border-left: 2px solid var(--secondary-background-color-light);
}

.info-details .distance span,
.info-details .duration span {
	font-weight: 600;
	font-size: 1.35rem;
}

.info-details .distance span {
	color: var(--blue-color);
}

.info-details .duration span {
	color: var(--red-color);
}

.info-details .distance i,
.info-details .duration i {
	font-size: 0.9rem;
	width: 0.9rem;
	text-align: center;
	margin-right: 10px;
	color: var(--grey-color);
}

#elevation-profile-container,
#slope-profile-container {
	flex-direction: column;
}

#elevation-profile,
#slope-profile {
	position: relative;
	max-height: 80px;
	width: 100%;
	overflow: hidden;
	font-family: 'Google Sans Flex', sans-serif;
}

/* SweetAlert & Tooltips */
.swal-popup {
	font-size: 12px;
	padding: 10px;
	color: var(--primary-text-color-light);
	background-color: var(--primary-background-color-light);
}

.leaflet-tooltip.custom-tooltip {
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 0.8rem;
	padding: 0 5px;
	border-radius: 4px;
}

.leaflet-tooltip.commune-label {
	color: var(--secondary-text-color-light);
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 0.7rem;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.leaflet-control-scale,
.leaflet-control-layers,
.leaflet-control-attribution {
	font-family: 'Google Sans Flex', sans-serif;
}

.tippy-box {
	background-color: var(--primary-background-color-light);
	color: var(--primary-text-color-light);
	font-family: inherit;
	font-size: 0.8rem;
	padding: 0 5px;
	border: 1px solid var(--border-color-light);
	border-radius: 8px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.tippy-box>.tippy-arrow {
	color: var(--primary-background-color-light);
}

.select2-container--default .select2-selection--single {
	background-color: var(--primary-background-color-light);
	border: 1px solid var(--border-color-light);
	border-radius: 4px;
	color: var(--primary-text-color-light);
	height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--primary-text-color-light);
}

.select2-container--default .select2-selection--single .select2-selection__arrow, 
.select2-container--default .select2-selection__clear {
	color: var(--secondary-text-color-light);
}

.select2-container--default .select2-dropdown {
	background-color: var(--primary-background-color-light);
	border: 1px solid var(--border-color-light);
	color: var(--primary-text-color-light);
}

.select2-container--default .select2-search--dropdown {
	border-bottom: 1px solid var(--border-color-light);
	background-color: var(--primary-background-color-light);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	width: 100%;
	border: 1px solid var(--border-color-light);
	border-radius: 4px;
	background-color: var(--secondary-background-color-light);
	color: var(--primary-text-color-light);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	outline: none;
	border-color: var(--blue-color);
	background-color: var(--white-color);
}

.select2-container--default .select2-results__option {
	color: var(--primary-text-color-light);
	background-color: transparent;
}

.select2-container--default .select2-results__option--highlighted {
	background-color: var(--highlight-color-light);
	color: var(--primary-text-color-light);
}

/* FontAwesome Icons */
.fontawesome-outline {
	text-shadow: 0px 0px 4px white, 0px 0px 4px white, 0px 0px 4px white;
}

/* Footer */
footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-height: 30px;
	color: var(--secondary-text-color-light);
	text-align: center;
	font-size: 0.8rem;
}

footer a {
	color: var(--secondary-text-color-light);
	text-decoration: none;
}

footer a:hover {
	color: var(--black-color);
	text-decoration: underline;
}

@media (max-width: 1200px) {
	.threshold-control-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.documentation .story-content {
		grid-template-columns: minmax(0, 1fr);
	}

	.documentation .toc-wrapper {
		position: static;
		max-height: none;
		margin: 10px 0 10px 0;
	}

	.documentation .back-to-top {
		grid-column: 1;
	}
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {

	@keyframes shadow-on-scroll {
		from { 
			background-color: var(--secondary-background-color-dark);
			border: 1px solid transparent;
			border-top: 1px solid var(--border-color-dark);
		}
		to { 
			background-color: rgba(40, 40, 40, 0.8);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
			border: 1px solid var(--border-color-dark);
		}
	}

    :root {
        color-scheme: dark;
    }

	.login-card {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
	}

	.login-card-header i {
		color: var(--secondary-text-color-dark);
		background-color: var(--highlight-color-dark);
	}

	.login-card h2 {
		color: var(--secondary-text-color-dark);
	}

	.login-card p,
	.login-card label {
		color: var(--primary-text-color-dark);
	}

	.login-card input[type="text"],
	.login-card input[type="password"] {
		background-color: var(--black-color);
		border-color: var(--border-color-dark);
		color: var(--primary-text-color-dark);
	}

	.login-card input:focus {
		border-color: var(--secondary-text-color-dark);
		background-color: var(--black-color);
	}

	.button,
	.login-button {
		background-color: var(--secondary-text-color-dark);
		color: var(--black-color);
	}

	.button:hover,
	.login-button:hover {
		background-color: var(--primary-text-color-dark);
	}

	.login-error {
		background-color: rgba(255, 82, 82, 0.12);
		border-color: rgba(255, 82, 82, 0.24);
		color: var(--light-red-color);
	}

	.select2-container--default .select2-selection--single {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
		color: var(--primary-text-color-dark);
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: var(--primary-text-color-dark);
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow,
	.select2-container--default .select2-selection__clear {
		color: var(--secondary-text-color-dark);
	}

	.select2-container--default .select2-dropdown {
		background-color: var(--secondary-background-color-dark);
		border-color: var(--border-color-dark);
		color: var(--primary-text-color-dark);
	}

	.select2-container--default .select2-search--dropdown {
		border-color: var(--border-color-dark);
		background-color: var(--secondary-background-color-dark);
	}

	.select2-container--default .select2-search--dropdown .select2-search__field {
		border-color: var(--border-color-dark);
		background-color: var(--primary-background-color-dark);
		color: var(--primary-text-color-dark);
	}

	.select2-container--default .select2-search--dropdown .select2-search__field:focus {
		outline: none;
		border-color: var(--blue-color);
		background-color: var(--secondary-background-color-dark);
	}

	.export-panel-body .dash-checklist,
	.export-column-group {
		border-color: var(--border-color-dark);
	}

	.export-column-groups {
		border-color: var(--border-color-dark);
	}

	.export-column-group h4,
	.export-column-group .dash-checklist label {
		color: var(--primary-text-color-dark);
	}

	.export-column-group h4 {
		border-color: var(--border-color-dark);
	}

	.select2-container--default .select2-results__option {
		color: var(--primary-text-color-dark);
		background-color: transparent;
	}

	.select2-container--default .select2-results__option--highlighted {
		background-color: var(--highlight-color-dark);
		color: var(--primary-text-color-dark);
	}

	html,
	body {
		color: var(--primary-text-color-dark);
		background-color: var(--secondary-background-color-dark);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--secondary-text-color-dark);
	}

	hr {
		border-top: 1px solid var(--border-color-dark);
	}

	header .logo {
		filter: invert(1);
	}

	nav .tabs {
		background-color: var(--tab-background-color-dark);
	}

	nav .tabs a {
		color: var(--secondary-text-color-dark);
	}

	nav .tabs a:hover {
		color: var(--white-color);
	}

	nav .tabs a.active {
		color: var(--white-color);
		background-color: var(--black-color);
		border-color: var(--border-color-dark);
	}

	.logout-link {
		color: var(--secondary-text-color-dark);
		background-color: var(--tab-background-color-dark);
	}

	.logout-link:hover {
		color: var(--white-color);
		background-color: var(--black-color);
		border-color: var(--border-color-dark);
	}

	.container {
		background-color: var(--primary-background-color-dark);
	}

	.global-loading-card i {
		color: var(--secondary-text-color-dark);
	}

	.input-group {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
	}

	.input-group h4 {
		border-bottom-color: var(--border-color-dark);
	}

	.input-group label {
		color: var(--primary-text-color-dark);
	}

	.input-group label i {
		color: var(--secondary-text-color-dark);
	}

	.scenario-inputs {
		border-left-color: var(--border-color-dark);
	}

	.scenario-inputs label {
		color: var(--primary-text-color-dark);
	}

	.scenario-inputs label:hover {
		background-color: var(--secondary-background-color-dark);
		border-color: var(--light-blue-color);
	}

	.select-inputs {
		border-left-color: var(--border-color-dark);
	}

	.select-inputs hr {
		border-color: var(--border-color-dark);
	}

	.select-inputs label {
		color: var(--secondary-text-color-dark);
	}

	select {
		background-color: var(--primary-background-color-dark);
		color: var(--primary-text-color-dark);
		border-color: var(--border-color-dark);
	}

	select:hover {
		background-color: var(--secondary-background-color-dark);
		border-color: var(--darkgrey-color);
	}

	select:focus {
		background-color: var(--black-color);
		border-color: var(--light-blue-color);
	}

	.story-content {
		border-top-color: var(--border-color-dark);
	}

	.story-content a {
		color: var(--light-blue-color);
	}

	.story-content table {
		border-color: var(--border-color-dark);
	}

	.story-content table th,
	.story-content table td {
		border-color: var(--border-color-dark);
	}

	.story-content code {
		background-color: var(--secondary-background-color-dark);
	}

	.story-content figure img {
		border-color: var(--border-color-dark);
	}

	.story-content figure figcaption .caption-note {
		color: var(--secondary-text-color-dark);
	}

	.story-content figure figcaption .caption-note a {
		color: var(--secondary-text-color-dark);
	}

	.documentation .toc-wrapper {
		border-color: var(--border-color-dark);
	}

	.documentation .toc .toc-list-item::before {
		color: var(--light-blue-color);
	}

	.documentation .doc-wrapper {
		border-color: var(--border-color-dark);
	}

	.documentation .back-to-top {
		color: var(--secondary-text-color-dark) !important;
		border-color: var(--border-color-dark);
	}

	.back-to-top:hover {
		color: var(--white-color);
	}

	select {
		background-color: var(--primary-background-color-dark);
		color: var(--primary-text-color-dark);
		border-color: var(--border-color-dark);
	}

	.page-section {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
	}

	.page-section:first-of-type:last-of-type {
		border-bottom-color: var(--border-color-dark);
	}

	.page-section:first-of-type {
		border-top-color: var(--border-color-dark);
	}

	.page-section:last-of-type {
		border-bottom-color: var(--border-color-dark);
	}

	.section-toggle {
		color: var(--grey-color);
		border-color: var(--border-color-dark);
	}

	.section-toggle:hover {
		color: var(--white-color);
	}

	.section-header h1,
	.section-header h2,
	.section-header h3 {
		color: var(--primary-text-color-dark);
	}

	.section-summary-item-wrapper {
		background-color: var(--black-color);
		border-color: var(--border-color-dark);
	}

	.section-summary-container {
		color: var(--secondary-text-color-dark);
	}

	.section-summary-value {
		color: var(--primary-text-color-dark);
	}

	#storytelling-text {
		border-color: var(--border-color-dark);
	}

	#storytelling-text .storytelling-value {
		color: var(--white-color);
		background-color: var(--black-color);
		border-color: rgba(255, 255, 255, 0.2);
	}

	#story-start-location.storytelling-value::before {
		color: var(--light-purple-color);
	}

	#story-distance.storytelling-value::before {
		color: var(--light-blue-color);
	}

	#story-csb.storytelling-value::before {
		color: var(--light-red-color);
	}

	#story-elevation.storytelling-value::before {
		color: var(--light-brown-color);
	}

	#story-duration.storytelling-value::before {
		color: var(--light-red-color);
	}

	#story-crossings-total.storytelling-value::before {
		color: var(--light-blue-color);
	}

	#story-cost-diff.storytelling-value::before {
		color: var(--light-red-color);
	}

	.result-group {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
		border-bottom-color: transparent;
	}

	.result-group:first-of-type:last-of-type {
		border-bottom-color: var(--border-color-dark);
	}

	.result-group:first-of-type {
		border-top-color: var(--border-color-dark);
	}

	.result-group:last-of-type {
		border-bottom-color: var(--border-color-dark);
	}

	.result-group .chart-summary {
		color: var(--secondary-text-color-dark);
	}

	#info-panel .info-path.timeline::before {
		background-color: var(--border-color-dark);
	}

	.timeline-marker {
		background-color: var(--border-color-dark);
	}

	.end-marker {
		background-color: var(--light-red-color);
	}

	#info-panel #start-coords,
	#info-panel #csb {
		color: var(--primary-text-color-dark);
	}

	.info-details .distance,
	.info-details .duration {
		border-left: 2px solid var(--secondary-background-color-dark);
	}

	.info-details .distance span {
		color: var(--light-blue-color);
	}

	.info-details .duration span {
		color: var(--light-red-color);
	}

	.results-wrapper.collapsible {
		border-color: var(--border-color-dark);
	}

	.results-wrapper.collapsible .section-header h4 {
		color: var(--secondary-text-color-dark);
	}

	.message-box {
		background-color: var(--black-color);
		border-color: var(--border-color-dark);
	}

	.message-box i {
		color: var(--secondary-text-color-dark);
	}

	.swal-popup {
		color: var(--primary-text-color-dark);
		background-color: var(--primary-background-color-dark);
	}

	.tippy-box {
		background-color: var(--black-color);
		color: var(--primary-text-color-dark);
		border-color: var(--border-color-dark);
	}

	.tippy-box>.tippy-arrow {
		color: var(--black-color);
	}

	.sticky-filters {
		background-color: var(--secondary-background-color-dark);
		border-color: var(--border-color-dark);
	}

	.dash-container .tab {
		color: var(--darkgrey-color);
		border-color: var(--border-color-dark) !important;
	}

	.dash-container .tab:hover {
		color: var(--secondary-text-color-dark);
	}

	.dash-container .tab--selected {
		color: var(--secondary-text-color-dark);
	}

	.dash-graph-wrapper {
		border-color: var(--border-color-dark);
	}

	.dash-graph-wrapper h4 {
		color: var(--secondary-text-color-dark);
	}

	.threshold-control-wrapper {
		border-top-color: var(--border-color-dark);
	}

	.threshold-reset-button {
		border-color: var(--border-color-dark);
		background-color: var(--primary-background-color-dark);
		color: var(--secondary-text-color-dark);
	}

	.threshold-reset-button:hover {
		background-color: var(--secondary-background-color-dark);
		color: var(--primary-text-color-dark);
	}

	.threshold-indicator-value {
		color: var(--primary-text-color-dark);
	}

	.threshold-indicator-caption {
		color: var(--primary-text-color-dark);
	}

	.threshold-control-label {
		color: var(--secondary-text-color-dark);
	}

	.threshold-control-wrapper .dash-slider-track {
		background-color: var(--border-color-dark);
	}

	.threshold-control-wrapper .dash-slider-range {
		background-color: var(--primary-text-color-dark) !important;
	}

	.threshold-control-wrapper .dash-slider-thumb {
		background-color: var(--primary-text-color-dark);
		border-color: var(--primary-background-color-dark);
	}

	.threshold-control-wrapper .dash-slider-mark {
		color: var(--primary-text-color-dark);
	}

	.threshold-control-wrapper .dash-slider-mark-outside-selection {
		color: var(--secondary-text-color-dark);
	}

	.threshold-control-wrapper .dash-slider-mark::before {
		background-color: var(--border-color-dark);
	}

	.in-tab-dash-graph-wrapper {
		border-color: var(--border-color-dark);
	}

	.dash-custom-dropdown {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
	}

	.dash-custom-dropdown:hover {
		background-color: var(--secondary-background-color-dark);
		border-color: var(--darkgrey-color);
	}

	.dash-custom-dropdown .dash-dropdown-value,
	.dash-custom-dropdown .dash-dropdown-value-count {
		color: var(--primary-text-color-dark);
	}

	.dash-custom-dropdown .dash-dropdown-clear {
		color: var(--secondary-text-color-dark);
	}

	.dash-dropdown-trigger-icon {
		color: var(--secondary-text-color-dark);
	}

	.dash-range-slider-input {
		background-color: var(--primary-background-color-dark);
		border-color: var(--border-color-dark);
	}

	.risk-progress-card-exposed {
		color: var(--primary-text-color-dark);
	}

	.vulnerability-list-container {
		background-color: var(--primary-background-color-dark);
	}

	.vulnerability-list-header {
		color: var(--secondary-text-color-dark);
	}

	.vulnerability-list-item {
		border-bottom-color: var(--border-color-dark);
	}

	.vulnerability-list-name {
		color: var(--primary-text-color-dark);
	}

	.vulnerability-list-abbr {
		color: var(--secondary-text-color-dark);
	}

	.vulnerability-list-value {
		text-shadow: 0px 0px 2px var(--black-color);
	}

	.vulnerability-list-percentage {
		text-shadow: 0px 0px 2px var(--black-color);
	}

	.vulnerability-list-duration {
		text-shadow: 0px 0px 2px var(--black-color);
	}

	.vulnerability-list-bar {
		border-color: rgba(255, 135, 135, 0.4);
		background-color: rgba(255, 135, 135, 0.2);
	}

	.global-loading-card {
		background: var(--black-color);
		border-color: var(--border-color-dark);
	}

	.global-loading-card h4 {
		color: var(--primary-text-color-dark);
	}

	.global-loading-card p,
	.global-loading-percent {
		color: var(--secondary-text-color-dark);
	}

	.global-loading-track {
		background: var(--border-color-dark);
	}

	.global-loading-fill {
		background: var(--primary-text-color-dark);
	}

	body.global-loading-active .content-wrapper .page-section {
		filter: blur(8px);
		opacity: 0.9;
	}

	footer {
		color: var(--secondary-text-color-dark);
	}

	footer a {
		color: var(--secondary-text-color-dark);
	}

	footer a:hover {
		color: var(--white-color);
	}
}