html, body {
	overflow-x: hidden;
	overflow-y: hidden;
}

svg.map {
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	stroke-width: .05%;
	stroke-linecap: round;
	cursor: move !important;
}

svg.map:focus { outline: 0 !important; }

.ocean, .country, .lakes { display: none; }

.ocean, .lakes { fill: #ffffff; }

.country, .lakes { stroke: #444444; }

.country { fill: #cccccc; }

.country.country-clickable, svg.city {
	cursor: pointer;
	transition:
		fill 0.2s ease-in-out,
		fill-opacity 0.2s ease-in-out,
		stroke 0.2s ease-in-out;
}

.country.country-clickable {
	fill: transparent;
	fill-opacity: .5;
	stroke: #ffcc00;
}

.country.country-clickable:hover { fill-opacity: .75; }

.country.country-clickable:focus { fill-opacity: 1; }

svg.city {
	fill: #ffcc00;
	stroke: #997700;
	stroke-width: 1px;
	stroke-linecap: round;
}

svg.city:hover { fill: #cca300; }

svg.city:focus { fill: #997700; }

a.map-quiz-reset, .map-controls a {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-grid;
	opacity: .5;
	background-color: #ffffff;
	line-height: 2.75rem;
	font-size: 1.8rem;
	pointer-events: all;
}

a.map-quiz-reset:hover, .map-controls a:hover { opacity: .75; }

a.map-quiz-reset:focus, .map-controls a:focus {
	opacity: 1;
	outline: 0 !important;
}

a.map-quiz-reset {
	right: 0;
}

.pop-up-container {
	z-index: 2;
	background-color: rgba(0, 0, 0, .3);
}

.pop-up {
	width: 320px;
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}

a.pop-up-close {
	right: 0;
	top: 0;
}

.form-check, .form-check > * { cursor: pointer; }

textarea.form-control, input.inline-answer {
	color: #444444;
	background-color: transparent;
}

textarea.form-control {
	min-height: 3rem;
	max-height: 50vh;
	scrollbar-width: thin;
}

textarea.form-control:hover, input.inline-answer:hover { border-color: #003399; }

textarea.form-control:focus, input.inline-answer:focus {
	border-color: #002266;
	box-shadow: none;
}

.inline-answer-group * { display: inline-block; }

input.inline-answer {
	padding: 0;
	border: 0;
	border-bottom: 1px solid #cccccc;
}

p.question-result {
	background: linear-gradient(0deg, #ffffffdd, #ffffffdd), currentColor;
	border-left: .5rem solid;
}

p.question-result.question-result-correct { color: #1a6800; }

p.question-result.question-result-incorrect { color: #b10000; }

.map-controls {
	z-index: 1;
	font-size: 0;
	pointer-events: none;
}