:root {
	--selected-radius: 4px;
	--selected-border-width: 1px;
}

#map{
	background: var(--chart-background-color);
	border-radius: 10px;
}

#mapIndexSelector{
	position: absolute;
	margin: 0;
	top: 10px;
	left: 10px;
	width: 200px;
	padding: 2.2px;
	border-radius: 5px;
}

#clearSelectionButton{
	position: absolute;
	top: 9px;
	left: 220px;
	background: white;
	padding: 3px;
	border-radius: 5px;
}

#clearSelectionButton:hover{
	background: lightgray;
}

#mapColorLegend{
	position: absolute;
	top: 10px;
	right: 10px;
}

.sphere {
	fill:var(--chart-background-color);
}

.land {
	fill: var(--land-color);
}

.boundary {
	fill: none;
	stroke: var(--chart-background-color);
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

select{
	margin: 20px;
}

.mouseover.city-circle{
	stroke: black;
	stroke-width: var(--selected-border-width);
	r: var(--selected-radius);
}

.selected.city-circle{
	stroke: black;
	stroke-width: var(--selected-border-width);
	r: var(--selected-radius);
}