:root {
	--bg1: white;
	--bg2: white;
	--col1: #444;
	--bg-quote: #f2f2f2;
	--bg-toast: #e2e2e2;
	--bg-code: #fffff0;
	--border: #888888;
	--comment: #b00;
	--prompt: teal;
	--keyword: blue;
	--string: olive;
	--identifier: maroon;
	--shell: green;
}

body.dark {
	--bg1: #222;
	--bg2: #444;
	--col1: #eee;
	--bg-quote: #424264;
	--bg-toast: #424242;
	--bg-code: #555550;
	--border: #888888;
	--comment: #faa;
	--prompt: #aff;
	--keyword: #aaf;
	--string: #afa;
	--identifier: #faf;
	--shell: #0f0;
}

body.map {
	background-color: var(--bg1);
	color: var(--col1);
	padding: 0;
	margin: 0;
}

a {
	color: var(--keyword);
}

#map {
	width: 100vw;
	height: 100vh;
}

.ol-popup {
	position: absolute;
	background-color: var(--bg-toast);
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid var(--border);
	bottom: 12px;
	left: -50px;
	min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}
.ol-popup:before {
	border-top-color: var(--border);
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}
.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}
.ol-popup-closer:after {
	content: "✖";
}
.ol-popup-edit {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 28px;
}
.ol-popup-edit:after {
	content: "edit";
}

.ol-popup img
{
	max-width: 300px;
	max-height: 400px;
}

#comments
{
	border: 1px solid var(--border);
	border-radius: 7px;
	margin: .3em;
	padding: .3em;
	display: none;
}

#comments img
{
	width: 100%;
	max-width: 50em;
}

.loadlocation
{
	border: 1px solid var(--border);
	border-radius: 3px;
	margin: .3em;
	padding: .3em;
}

.knownlocation
{
	color: silver;
}

.loadlocation.conflict
{
	border: 1px solid yellow;
}
.loadlocation.error
{
	border: 1px solid red;
}
.loadlocation.success
{
	border: 1px solid green;
}