:root {
	height: 100%;
}

body {
	height: 100%;
	display: flex;
	flex-direction: column;
}

#map {
	flex: 1;
}

#routes-form {
	display: flex;
	flex-direction: row;
	gap: 4px;

	margin: 4px;
}

#routes-list {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, 50px);

	label {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}

.legend-image {
	width: 15px;
	height: 15px;
	margin-right: 4px;
}

footer {
	display: grid;
	grid-template-columns: 1fr 1fr;

	padding-inline: 4px;

	font-size: 0.8rem;

	span:nth-child(2n) {
		justify-self: end;
	}
}