html, body {
	background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

#mainContainer {
	text-align: center;
	vertical-align: middle;
}

#logooverlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#mapControls {
	padding: 10px;
	position: fixed;
	left: 0;
	top: 0;
	width: 300px;
	height: 100vh;
	overflow: auto;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
	z-index: 100;
}

#map-container {
	position: fixed;
	left: 300px;
	top: 0;
	width: calc(100vw - 300px);
	height: 100vh;
}

#map {
	height: 100%;
	width: 100%;
}

.credits {
	font-size: 12px;
}

@media
(max-width: 768px),
(max-width: 1152px) and (min-resolution: 1.5x),
(max-width: 1152px) and (-webkit-min-device-pixel-ratio: 1.5),
(max-width: 1536px) and (min-resolution: 2x),
(max-width: 1536px) and (-webkit-min-device-pixel-ratio: 2),
(max-width: 2304px) and (min-resolution: 3x),
(max-width: 2304px) and (-webkit-min-device-pixel-ratio: 3) {
	body, .btn {
		font-size: 2rem;
	}
	h5 {
		font-size: 2.25rem;
	}
	.form-control {
		font-size: 2rem;
	}
	.select2-container--bootstrap .select2-selection {
		font-size: 2rem;
		height: 62px;
	}
	.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
		font-size: 2rem;
	}

	#mapControls {
		position: relative;
		width: 100vw;
		height: unset;
	}

	#map-container {
		position: relative;
		left: 0;
		width: 100vw;
		margin-left: -10px;
		margin-bottom: 1rem;
	}

	.modal-dialog {
		max-width: 96vw;
	}
}