#map {
	height:100%;
	background-color:#000;
	z-index:90;
}

#map .leaflet-marker-icon, #map .leaflet-popup, #map .leaflet-pane .leaflet-shadow-pane * {
	/*PERF transition: transform .3s; /* gör att markörer inte pluppar fram utan istället glider*/
}

#info {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	padding:1.5em;
	background-color:#00000033;
	box-shadow: #00000033 0 0 30px;
	backdrop-filter: blur(4px);
	opacity:1;
	height:100%;

	transition: .2s all;
	z-index:100;
	overflow:hidden;

	.info-content {
		margin: auto;
		max-width:600px;
		padding:0 1em .2em;
		background:#eee;
		border-bottom:5px solid #ccc;
		color:#222;
		transform:scale(1) translate(0px, 0px);
		opacity:1;
		transition: .4s all;
		height:80%;
		overflow-y:scroll;
		box-shadow: 0 0 20px #00000077;

		h1 {
			margin-top:.5em;
			margin-bottom:.1em;
		}
		p {
			margin-left:0;
			margin-right:0;
		}
		h2 {
			margin-top:1em;
		}
		h3 {
			margin-top:1em;
		}

		ul {
			line-height: 1.5;
		    font-size: .875rem;
		    letter-spacing: 0.015625rem;
		    margin: .5em;

			li {
				margin-bottom:.5em;
			}
		}
	}

	&.--hidden {
		opacity:0;
		padding-top:0;
		padding-bottom:0;
		height:0px;

		.info-content {
			opacity:0;
			transform:scale(.9) translate(0, -40px);
		}
	}
}

.info-icon-set {
	display:flex;
	gap:1em;
	align-items: center;
	margin-top:1em;

	h3 {
		margin-top:0 !important;
	}

	.status-item {
		font-size:80%;
	}
	.status-bottom {
		margin:0;
		gap:.5em;
	}

	.map-icon-crossing {
		background-repeat: no-repeat;
        height: 18px !important;
        margin: -2px 0;
	}
	.map-icon-station-no-platforms {
		margin: 0 5px 5px 1px;
	}
	.map-icon-train {
		position:relative;
		--bearing: 45deg;/*
		transform: translate(.5em, 0);
		--markerSize:14px !important;*/
		box-shadow:none;
		background-color: rgb(54, 164, 247);
	}

	&.--button {
		opacity:.3;
		border:1px solid #ccc;
		background-color:#666;
		border-radius:.5em;
		padding: .2em .5em;
		cursor:pointer;
		transition:.2s all;
		color:#FFF;

		&.--working {
			border-color:#EA3;
			background-color:#861;
			color:#FFFFFF66;
		}
	}

	&.--active {
		opacity:1;
	}
}


.status-wrapper {
	position:absolute;
	bottom:-0;
	left:0px;
	right:0px;
	background:#222;
	font-size:80%;
	padding:3px;
	z-index:1000;
	text-align:left;

	#status {
		margin-bottom:3px;

	}
	#status-ta {

	}
}

.status-bottom {
	max-width:600px;
	margin:auto;
	display:flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	margin-bottom:.3em;
}

.status-item {
	display:flex;
	gap:6px;
	align-items: center;

	.map-icon-crossing {
		background-repeat: no-repeat;
        height: 18px !important;
        margin: -2px 0;
	}
	.map-icon-station-no-platforms {
		margin: 0 5px 5px 1px;
	}
	.map-icon-train {
		position:relative;
		--bearing: 45deg;/*
		transform: translate(.5em, 0);*/
		--markerSize:14px !important;
		box-shadow:none;
		background-color: rgb(54, 164, 247);
	}

	&.--button {
		opacity:.3;
		border:1px solid #ccc;
		background-color:#666;
		border-radius:.5em;
		padding: .2em .5em;
		cursor:pointer;
		transition:.2s all;
		color:#FFF;

		&.--working {
			border-color:#EA3;
			background-color:#861;
			color:#FFFFFF66;
		}
	}

	&.--active {
		opacity:1;
	}
}

.status-indicator {
	border-radius: 100%;
	background-color:#999;

	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#00000099;
	width:16px;
	font-size:70%;
	overflow:hidden;

	&.--normal {
		background-color:#56eb3f;
	}
	&.--warning {
		background-color:#ffcd38;
	}
	&.--error {
		background-color:#eb4034 !important;
	}
}

/****************************/

.leaflet-popup-content-wrapper {
	overflow:hidden;
	padding:0;
}
.leaflet-popup-content {
	margin:0;
}

/* Används för stationer och sånt som bara har enkel text*/
.popup-padding {
	padding:1em;
	padding-right:2em;
}

/* Tågdata */
.popup-row {
	display:flex;
	line-height:1;
	border-bottom:1px solid #eee;

	> div {
		padding:.5em;
	}

	.p-company {
		display:flex;
		align-items: center;
		font-size:.8em;
		font-weight:500;
	}

	.p-close-padding {
		width:20px;
	}
}

.p-title {
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	margin:.5em;
}

/* Progress bar */

.progress-bar {
	--baseColor: #ccc; /* --fillColor sätts av JS i .popup-timetable */
	padding:0 10px;
	position:relative;

	.pb-circle {
		position:absolute;
		left:0;right:0;
		top:-1px;bottom:0;
		margin:auto;

		background-color:var(--baseColor);
		border-radius:100%;
		width:11px;
		aspect-ratio:1;
		z-index:10;

		&::after {
			content: '';
			position:absolute;
			left:0;right:0;
			top:-40%;
			bottom:50%;
			width:3px;
			margin:auto;
			background-color:var(--baseColor);
		}
	}

	.pb-bar {
		background-color:var(--baseColor);
		width:3px;
		position:absolute;
		left:0;right:0;
		top:50%;
		bottom:-60%;
		margin:auto;
		z-index:9
	}

	&.--firstStation .pb-circle::after {
		display:none;
	}
	&.--lastStation .pb-bar {
		display:none;
	}

	&.--arr .pb-circle, &.--dep .pb-circle {
		--baseColor:var(--fillColor);
		background-color:var(--fillColor);
	}
	&.--dep .pb-bar {
		background-color:var(--fillColor);
	}
}

/* Timetable */

.popup-timetable {/*
	max-height:40vh;
	overflow-y:scroll;*/
}

table {
	width:100%;
}
th {
	font-weight:500;
	text-align:left;
}
td,th {
	padding:1px 4px; /*ta bort tvingad padding från style.css*/
	border-bottom:solid 1px rgba(255,255,255,.05);

	&.tt-location {
		padding-left:0;
	}
	&.--fadeColor {
		opacity:.4;
	}

	&.rtl {
		text-align:right;
	}
}

/***********************/

#map.hide-data .train-box {
	visibility: hidden;
}

.map-icon-train {
	--border-width: 2px;
	--border-color: #000;
	--bearing: 0deg;

	--markerSize: 20px;
	--shadowColor: #FFF;

	--td-margin: var(--markerSize);


	border:var(--border-width) solid var(--border-color);
	background:#FFF;
	border-radius:100%;
	/*display: flex;
	justify-content: center;
	align-items: center;*/
	z-index:11;
	box-shadow:
		0 0 .5em var(--shadowColor),
		0 0 1em var(--shadowColor);

	font-size:var(--markerSize);

	width:1em !important;
	height:1em !important;

	.train-content {
		font-size:.45em;
		font-weight:700;
		text-align:center;
		display:flex;
		align-items: center;
		justify-content: center;
		line-height:1;
		z-index:12;
		position:absolute;
		width:100%;

	    aspect-ratio: 1;
	    mask-size: contain;
	    mask-repeat: no-repeat;

		img {
			width: 100%;
			display:block;
			aspect-ratio:1;
		}
	}

	&.--mit-user {
		background-color:#44F;
		border-color:#33A;
		box-shadow:0px 0px 20px #00f;
		opacity:.8 !important;
		z-index:9 !important;

		&::before {
			border-color:#33A;
			background-color:#44f;
		}
	}

	&::before {
		content: '';
		position:absolute;
		width:.5em;
		height:.5em;
		transform:rotate(calc(45deg + var(--bearing)));
		transform-origin: .5em .5em;
		position:absolute;
		background-color:inherit;
		top:calc(0px - var(--border-width));
		left: calc(0px - var(--border-width));
		border-left:var(--border-width) solid var(--border-color);
		border-top:var(--border-width) solid var(--border-color);
	}

	&.--trainArrived {
		border-radius:0;
		--markerSize: 16px;
		/*font-size:16px;**//*
		width: .7em !important;
		height: .6em !important;
		--td-margin: 16px;*/

		&::before {
			display:none;
		}

		.train-content {
			padding:1px;
			/*font-size:60%;*/
		}

		.td-speed {display:none;}
	}

	/* Databox */
	/*&::after, .train-content {
		content: attr(data-ident) '\A' attr(data-speed);
		position:absolute;
		color:#fff;
		text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 2px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
		white-space: pre;
		transform-origin: 10px 10px;
	}*/

	.train-box {
		position:absolute;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:0px;
		line-height:1;
		transition: all .25s;
		font-size:.8rem;

		* {
			background-color:#000000aa;
			color:#fff;
			font-size:80%;
			white-space: nowrap;
			padding:2px;
			border-radius:3px;
		}
		*:empty {
			display:none;
		}

		.td-speed {
			font-size:80%;
		}
	}

	&.td-r::after, .train-box.td-r {
		left:var(--td-margin);
		text-align:left;
		align-items: flex-start;
	}
	&.td-l::after, .train-box.td-l {
		right:var(--td-margin);
		text-align: right;
		align-items: flex-end;
	}
	&.td-t::after, .train-box.td-t {
		bottom:var(--td-margin);
		text-align:center;
	}
	&.td-b::after, .train-box.td-b {
		top:var(--td-margin);
		text-align:center;
	}
}

#map .map-icon-train { /* utflyttat pga marginalerna fuckar med statusrutan */
	margin-top:-.5em !important;
	margin-left:-.5em !important;
}


#map.hide-crossings .map-icon-crossing {
	visibility: hidden;
}

.map-icon-crossing {
	--size: 14px;
	width: var(--size) !important;
	height: calc(var(--size) * 1.4) !important;
	background-size: contain;
	background-position:center center;

	/*margin-top:-8px !important;*/

	&.--single-crossing {
		background-image:url('img/crossing single.png');
	}
	&.--double-crossing {
		background-image:url('img/crossing double.png');
	}

	/* filter:drop-shadow(0 0 5px #FFF);*/
	/*
	width:10px;
	height:10px;*/
}

#map.hide-stations .map-icon-station-no-platforms,
#map.hide-stations .map-icon-station
 {
	visibility: hidden;
}

.map-icon-station-no-platforms {
	--border-width: 2px;
	--border-color: #000;

	--markerSize: 6px;
	--shadowColor: #FFF;

	--td-margin: var(--markerSize);


	font-size:var(--markerSize);

	width:1em !important;
	height:1em !important;

	&::after {
		display:block;
		content: '';
		rotate:45deg;
		border:var(--border-width) solid var(--border-color);
		background:#888;
		width:100%;
		height:100%;
	}

}

.map-icon-station {
	--border-width: 2px;
	--border-color: #000;

	--markerSize: 12px;
	--shadowColor: #FFF;

	--td-margin: var(--markerSize);


	border:var(--border-width) solid var(--border-color);
	background:#FFF;
	border-radius:100%;
	/*display: flex;
	justify-content: center;
	align-items: center;*/
	z-index:9;

	font-size:var(--markerSize);
/*
	margin-top:-.5em !important;
	margin-left:-.5em !important;*/
	width:1em !important;
	height:1em !important;


	/* Databox */
	/*&::after, .train-content {
		content: attr(data-ident) '\A' attr(data-speed);
		position:absolute;
		color:#fff;
		text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 2px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
		white-space: pre;
		transform-origin: 10px 10px;
	}*/

	.train-box {
		position:absolute;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:0px;
		line-height:1;
		transition: all .25s;
		font-size:.8rem;

		* {
			background-color:#000000aa;
			color:#fff;
			font-size:80%;
			white-space: nowrap;
			padding:2px;
			border-radius:3px;
		}
		*:empty {
			display:none;
		}

		.td-speed {
			font-size:80%;
		}
	}

}

main {padding:0;}
#stupid-bottom-padding-that-should-be-removed {display:none;}