html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 100%;
}

.controls {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 0;
	font-size: 14px;
}

.controls label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.controls input {
	accent-color: #FC5130;
}

#datasets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

#opacity {
	width: 160px;
}

#map {
	flex: 1 1 auto;
}

@media (max-width: 768px) {
	.container {
		padding: 0;
		box-shadow: none;
	}

	.header {
		padding: 8px 12px 0;
	}

	.controls {
		padding: 10px 12px;
	}
}