html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color: #cccccc;
	background-color: #111111;
}

#container {
	height: 100%;
	display: flex;
	flex-direction: row;
}

#map {
	flex: 1;
	height: 100%;
}

#sidebar {
	width: 400px;
	background-color: #111111;
	padding: 30px;
	box-sizing: border-box;
	overflow-y: auto;
}

h1, h2 {
	font-weight: 900;
	margin-top: 15px;
	margin-bottom: 7px;
}

a {
	color: #cccccc;
}

a:hover {
	color: #666666;
}

.loginform {
	margin-top: 100px;
}

table {
	border-collapse: collapse;
	width: 100%;
	display: none;
}

tr, td, th {
	text-align: left;
	font-size: 0.9em;
	border: 1px solid #333333;
	margin: 0px;
	padding: 4px;
}

button {
	width: 100%;
	padding: 10px;
	border: 1px solid #333333;
	background: none;
	color: #cccccc;
	margin-top:20px;
	margin-bottom:3px;
}

button:hover {
	border: 1px solid #666666;
}
button:active {
	background: #666666;
}

/* Mobilanpassning */

@media (max-width: 768px) {
	#container {
		display: block; /* inte flex längre, stapla vertikalt */
	}

	#map {
		width: 100%;
		height: 0;
		padding-bottom: 100%; /* kvadratisk höjd */
		position: relative;    /* Leaflet behöver positionerad container */
	}

	#sidebar {
		width: 100%;
		height: auto;
	}
}

/* Ikoner */

ul.timeline {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.timeline li {
	padding-left: 24px; /* plats för ikonen */
	position: relative;
	margin-bottom: 6px;
}

/* Lämnade-ikon */
ul.timeline li.leave-icon::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23a01818' d='M569 337C578.4 327.6 578.4 312.4 569 303.1L425 159C418.1 152.1 407.8 150.1 398.8 153.8C389.8 157.5 384 166.3 384 176L384 256L272 256C245.5 256 224 277.5 224 304L224 336C224 362.5 245.5 384 272 384L384 384L384 464C384 473.7 389.8 482.5 398.8 486.2C407.8 489.9 418.1 487.9 425 481L569 337zM224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Kom-till-ikon */
ul.timeline li.arrive-icon::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23018d03' d='M409 337C418.4 327.6 418.4 312.4 409 303.1L265 159C258.1 152.1 247.8 150.1 238.8 153.8C229.8 157.5 224 166.3 224 176L224 256L112 256C85.5 256 64 277.5 64 304L64 336C64 362.5 85.5 384 112 384L224 384L224 464C224 473.7 229.8 482.5 238.8 486.2C247.8 489.9 258.1 487.9 265 481L409 337zM416 480C398.3 480 384 494.3 384 512C384 529.7 398.3 544 416 544L480 544C533 544 576 501 576 448L576 192C576 139 533 96 480 96L416 96C398.3 96 384 110.3 384 128C384 145.7 398.3 160 416 160L480 160C497.7 160 512 174.3 512 192L512 448C512 465.7 497.7 480 480 480L416 480z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Live-rubrik till kartan */
.live-indicator {
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}