:root {
	--w-sidebar: 300px;
	--w-panel: 300px;
}

.map_div {
	height: 100vh !important;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	padding: unset !important;
	margin: unset !important;
	border: unset !important;
}

.map_div:first-child {
	left: 0px;
}

.sidebar_content {
	padding-left: var(--padding-h-md);
	padding-right: var(--padding-h-md);
	padding-top: var(--padding-v-md);
	padding-bottom: var(--padding-v-md);
}

.sus-map-sidebar {
	position: relative;
	display: flex;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	left: var(--padding-h-md);
	min-width: var(--w-sidebar);
	max-width: var(--w-sidebar);
	width: var(--w-sidebar);
	/* min-height: min-content; */
	max-height: calc(100vh - (var(--padding-h-md) * 3 + 35px));
	border-radius: 15px;
	border: 1px solid #000;
	background: var(--c-primary-complement);
	z-index: 10;
	top: var(--side-bar-top);
}

.sus-map-sidebar-container {
	position: relative;
	background-color: white;
	z-index: calc(20 + var(--depth-ui));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
	max-height: 100%;
	padding: 0px;
	margin: 0px;
	width: var(--w-sidebar);
}

.sus-map-sidebar-content {
	height: fit-content;
	width: 100%;
	flex-grow: 1;
	flex-shrink: 1;
}

.sus-map-sidebar-content > div {
	height: fit-content;
	width: 100%;
	padding-left: var(--padding-h-md);
	padding-right: var(--padding-h-md);
	padding-top: var(--padding-v-md);
	/* padding-bottom: var(--padding-v-md); */
}

.sus-map-sidebar #legend > img {
	width: 100% !important;
	height: auto;
}

.bottom_sidebar {
	flex-shrink: 0;
	flex-grow: 0;
	position: relative !important;
	top: unset !important;
	bottom: unset !important;
	left: unset !important;
	right: unset !important;
	height: fit-content;
	margin: unset !important;
	background: var(--c-primary-complement);
	border-top: 1px solid #000; /* change border color to match */
	padding-left: var(--padding-h-md);
	padding-right: var(--padding-h-md);
	padding-top: var(--padding-v-md);
	padding-bottom: var(--padding-v-md);
}

/* Handle sus-map-sidebar for mobile */
.mobile-sidebar-menu {
	display: none;
}

@media (max-width: 768px) {
	.mobile-sidebar-menu {
		display: flex;
	}

	.title-text-info {
		display: none;
	}

	.sus-map-sidebar {
		position: absolute;
		left: var(--padding-h-md);
		right: var(--padding-h-md);
		min-width: auto; /* changed from var(--w-sidebar) */
		max-width: none; /* changed from var(--w-sidebar) */
		width: auto; /* changed from var(--w-sidebar) */
		transition: max-width 0.5s ease-in-out;
	}

	.sus-map-sidebar .sus-map-sidebar-container {
		width: 100%; /* Changed from var(--w-sidebar) */
	}

	.sus-map-sidebar:not(.open) .sus-sidebar-widgets {
		max-height: 0;
		opacity: 0;
		margin: 0px;
		overflow: hidden;
		transition: all 0.5s ease-in-out;
	}

	.sus-map-sidebar.open .sus-sidebar-widgets {
		max-height: 100%;
		opacity: 1;
		transition: all 0.5s ease-in-out;
	}

	.sus-map-sidebar:not(.open) .bottom_sidebar {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: all 0.5s ease-in-out;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.sus-map-sidebar.open .bottom_sidebar {
		max-height: 100%;
		visibility: visible;
		opacity: 1;
		transition: all 0.5s ease-in-out;
	}

	.sus-map-sidebar:not(.open) h3 {
		font-size: larger;
		margin: 0px;
	}
}

.sus-map-panel {
	position: absolute;
	/* overflow: hidden; */
	overflow: auto;
	overflow-x: hidden;
	top: var(--padding-h-md);
	right: var(--padding-h-md);
	min-width: var(--w-panel);
	max-width: var(--w-panel);
	width: 20vw;
	/* min-height: min-content; */
	max-height: calc(100vh - 30px);
	height: fit-content;
	border-radius: 15px;
	border: 1px solid #000;
	background: white;
	transition: margin-right 0.5s ease-in-out;
}

.sus-map-panel-content {
	position: relative;
	z-index: calc(20 + var(--depth-ui));
	width: 100%;
	padding-left: var(--padding-h-md);
	padding-right: var(--padding-h-md);
	padding-top: var(--padding-v-md);
	padding-bottom: var(--padding-v-md);
}

.mobile-panel-menu {
	display: none;
}

.mobile-panel-title {
	display: none;
}

@media (max-width: 768px) {
	.mobile-panel-menu {
		display: block;
		position: absolute;
		top: 0px;
		right: 0px;
		padding: var(--padding-v-md);
		z-index: calc(25 + var(--depth-ui));
	}

	.mobile-panel-title {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		padding: var(--padding-v-md);
		padding-top: 14px;
		padding-bottom: 14px;
		margin: 0px;
	}

	.sus-map-panel {
		position: fixed !important;
		bottom: var(--padding-h-md);
		left: var(--padding-h-md);
		right: var(--padding-h-md);
		top: auto;
		min-width: auto;
		max-width: none;
		width: auto;
	}

	.sus-map-panel:not(.open) .sus-map-panel-content {
		max-height: 0;
		opacity: 0;
		margin: 0px;
		overflow: hidden;
		transition: all 0.5s ease-in-out;
	}

	.sus-map-panel:not(.open) {
		height: 45px;
		overflow: hidden;
	}

	.sus-map-panel.open .sus-map-panel-content {
		max-height: 100%;
		opacity: 1;
		transition: all 0.5s ease-in-out;
	}

	.sus-map-panel.open {
		max-height: 45vh;
	}

	.sus-map-panel.open .mobile-panel-title {
		display: none;
	}
}

/* IN COMBINATION WITH JS, COLLAPSED RIGHT PANEL */
@media (min-width: 768px) and (max-width: 1400px) {
	.sus-map-panel {
		opacity: 0.95;
		transition: opacity 0.95s ease-out, visibility 1s ease-out;
		transition-delay: visibility 4s;
	}
}

.sus-map-panel-content a.sus-small-link,
.sus-map-panel-content h4 {
	margin-top: var(--padding-v-md);
	display: inline-block;
}

.sus-map-sidebar ul,
.sus-map-panel ul {
	padding-left: var(--padding-h-md);
}

.sus-map-panel p,
.sus-map-sidebar p,
.panel_view p {
	font-size: 1.45rem;
}

.sus-map-sidebar div.form-group,
.sus-map-panel div.form-group {
	margin-top: 0px;
}

.mapboxgl-map .mapboxgl-ctrl a {
	font-family: var(--ff-body);
	color: rgb(128, 128, 128);
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
	background: none !important;
}

.sus-sidebar-widgets {
	margin-top: var(--padding-v-md);
	padding-top: var(--padding-v-md);
	border-top: 1px solid #000; /* Add border-top property */
	margin-bottom: var(--padding-v-md);
}

.sus-sidebar-widgets > *:first-child {
	margin-top: var(--padding-v-md);
}

.sus-sidebar-widget-warning-text {
	font-size: 1.2rem !important;
	font-style: italic;
	display: inline;
}

.sus-sidebar-widget-warning-text-button {
	min-height: 12px !important;
	max-height: 12px !important;
	font-size: 1.2rem !important;
	display: inline !important;
	padding: 15px !important;
	padding-top: 0px !important;
}

.scrollable-div {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* height: 100%; */
}

.settings-gear {
	position: absolute;
	z-index: 20;
	background-color: transparent;
	margin: var(--padding-h-md);
	background-color: black;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	left: calc(var(--w-sidebar) - 35px);
	line-height: 0;
}

@media (max-width: 768px) {
	/* Place the gear on the right on mobile */
	.settings-gear {
		left: auto;
		right: 0px;
	}
}

.settings-gear .fa-gear {
	color: white;
	font-size: large;
}

.theme-dropdown {
	position: absolute;
	z-index: 20;
	background-color: transparent;
	margin: var(--padding-h-md);
}

.tutorial-btn {
	position: absolute;
	z-index: 20;
	background-color: transparent;
	margin: var(--padding-h-md);
	background-color: black;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	left: calc(var(--w-sidebar) + 35px / 2 - 10px);
	line-height: 0;
	top: 0px;
	cursor: pointer;
}

.tutorial-btn .fa-question {
	color: white;
	font-size: large;
}

@media (max-width: 768px) {
	.tutorial-btn {
		display: none;
	}
}

.title_text {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.title_text .fa-circle-info {
	color: black;
	margin-left: 10px;
}

.title_text h3 {
	font-size: 2.5rem;
	text-transform: uppercase;
}

.sus-title-box {
	position: absolute;
	z-index: 20;
	margin: var(--padding-h-md);
	/* min-height: min-content; */
	max-height: calc(100vh - (var(--padding-h-md) * 3 + 35px));
	height: fit-content;
	top: calc(var(--padding-h-md) + 35px);
	margin-left: calc(var(--w-sidebar) + 35px);
}

.sus-title-box a {
	text-decoration: underline;
}

.sus-title-box p {
	margin-bottom: 10px;
}

.sus-map-sidebar .sidebar-section-title {
	font-size: small;
	font-weight: bold;
	white-space: normal;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.scale-panel {
	margin-bottom: 15px;
}

.dyk-panel-title {
	border-top: 1px solid #000;
	padding-top: var(--padding-v-md);
}

.explore-panel {
	padding-bottom: var(--padding-v-md);
}