#timeline-wrapper {
	position:fixed; height:60px;
	top:56px;left:0;right:0;
	font-size:50%; /*50% på telefon */
	z-index:100;
	box-shadow:0 0 10px #000;
}

/*************
 * TODO: Fixa en buffert till höger som är olikfärgad det sista tim-blocket. Tror detta är gjort nu.
 *************/
#timeline-bar {
	position:absolute;
	left:2vw;
	right:2vw;
	bottom:0;
	z-index:101;
	height:20px;
}
 #timeline-seeker {
	 position:absolute;
	 left:0%;
	 bottom:0;
	 width:1px;
	 height:30px;
	 background:#f00;
	 z-index:102;
	 box-shadow:0px 0px 1px #000;
 }
 #timeline-time {
	 position:absolute;
	 bottom:-1em;
	 background:#f00;
	 padding:1px;
	 border-radius:1px;
 }
 #timeline-time.flip {
	 text-align:right;
	 position:absolute;
	 right:0;
 }

 #timeline-bg {
 	position:absolute;
 	top:0;bottom:0;
 	left:0;right:0;
 	display:flex;
 	z-index:99;
 }
 #timeline-bg div {
 	padding:5px 1px;
	flex: 1;
 }
 #timeline-bg div:nth-child(even) {
 	background: #bbb;height:100%;
 }
 #timeline-bg div:nth-child(odd) {
 	background: #ccc;height:100%;
 }

 #timeline-bg .tl-buffer {
	padding:0;
	flex:none;
	width:2vw; /**** SÄTTER BUFFERT VÄNSTER OCH HÖGER! ÄNDRA ÄVEN I "#timeline" nedanför! ****/
 }



/*
#timeline-bg {
	position:absolute;
	top:0;bottom:0;
	left:0;right:0;
	display:grid;
	grid-auto-columns: 15px repeat(auto-fill,minmax(0, 1fr)) 15px;
	grid-auto-flow: column;
	z-index:99;
}
#timeline-bg div {
	padding:5px;
}
#timeline-bg div:nth-child(even) {
	background: #bbb;height:100%;
}
#timeline-bg div:nth-child(odd) {
	background: #ccc;height:100%;
}

#timeline-bg .tl-buffer {
	background:#Fcc !important;
}

********/






/*
#timeline {
	position:fixed;background:#F00; width:10px;
	top:70px;right:10px; bottom:20px;
	font-size:50%;
}*/
#timeline {
	position:absolute;
	top:15px;bottom:0;
	left:2vw;right:2vw; /*** SÄTTER BYFFERT VÄNSTER OCH HÖGER! ÄNDRA ÄVEN #timeline-bg .tl-buffert OVANFÖR! ***/
	z-index:100;
}

#timeline > div {
	position:absolute;
	top:15px;
	height:10px;
}
/*
#timeline div {
	position:relative;
}*/

#timeline div div {
	display:none;
}
#timeline .r--train div,
#timeline .r--pass div {
	display:block;
}


#timeline div .tagNr {
	position:absolute;
	lefT:0;right:0;
	top:0;bottom:0;
	margin:auto;
	text-align:center;
	font-size:80%;

	display:flex;
	justify-content: center;
    align-items: center;
}
#timeline div .tpl-from {
	position:absolute;
	left:-3px;
	top:-9px;
	color:#00c;
}
#timeline div .tpl-to {
	position:absolute;
	right:-3px;
	bottom:-12px;
	color:#00c;
}


.r--train {
	/*height:100px;*/
	background-color:#33F;
}
.r--init {
	/*height:100px;*/
	background-color:#A33;;
}
.r--pass {
	background-color:rgba(50,50,255,.3);
}
.r--platform {
	background-color:#77f;
}
.r--unpaid-break {
	background-color:transparent;
}
.r--paid-break {
	background-color:rgba(0,0,0,.1);
}
.r--reserve {
	background-color:#3cc;
}
.r--shunting {
	background-color:#Fc3;
}
.r--inspection {
	background-color:#Fc3;
}
.r--walking {
	background-color:#333;
}
.r--disposable {
	background-color:#c7f;
}

/*visar en ruta till höger om raden med samma färg som i grafen */
.row-type {
	position:absolute;
	display:block; /*block*/
	right:0;top:0;bottom:0;
	width:4px;
}

main {padding:0;}
#list {
	font-size:80%;
}
.row-time {
	position:absolute;
	left:0;top:0;bottom:0;
	width:6px;
}
.row-time-past {
	background:#722;
}
.row-time-current {
	background:#f00;
}
.row-time-future {
	background:#888;
}


.row {
	position:relative;
	border-bottom:1px solid #444;
	padding:10px 10px;
	min-height:36px;
	display:grid;
	gap:.5em;
	grid-template-columns: 1fr 40px; /*min-content*/
}/*
.row div {
	display:inline-block;
}*/

.row:has(.row-time-current) { background:#200 }

.row .row-top {
	display:flex;
	align-items: center;
	flex-wrap:wrap;
	flex-grow:1;
}

.row .tj {
	flex-grow: 1;
}

.row .time-from, .row .time-to, .row .tagNr {
	width:40px;
}

.row .tagNr {
	width:45px;
	padding-right:4px;
	font-weight:600;
	color:#00c9b2;
	text-align:right;
}

.row .tpl-from, .row .tpl-to {
	flex-shrink:1;
	margin-right:.5em;
	display:flex;
	flex-direction:column;
	gap:.5em;

	.tpl-row {
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap:.5em;
	}
}
.row .tpl-to {
	margin-left:.5em;
}

.row .vehicles {
	display:block;
	flex-basis:100%;
	margin:.5em;
	margin-bottom:0;
	line-height:2;

	.vehicle-row {
		display:flex;
		align-items: center;
		gap:.3em;
		margin-bottom:.4em;
	}
	.vehicle-box {
		display:inline-block;
		background:#444;
		border-radius:6px;
		padding:.3em .5em;
		display:flex;
		flex-direction: column;
		align-items: center;
		line-height:1;
		gap:.3em;
	}
	.vehicle-fromto {
		display:inline-block;
		line-height:1.3;
		font-size:70%;
		opacity:.7;

		&.--from {
			text-align:right;
		}
	}
	.vehicle-continue {
		height:3px;
		background-color:;
		width:20px;

		&.--from {
			background:linear-gradient(90deg, #00000000 0%, #00c9b2 100%);
		}
		&.--to {
			background:linear-gradient(270deg, #00000000 0%, #00c9b2 100%);
		}
	}
	.vehicle-adeui {
		height:3px;
		width:5px;
		background-color: #00c9b2;
	}

	.vehicles-litt {
		opacity:.5;
		font-size:80%;
	}

	&.--empty-true {
		display:none;
	}
}

.row .rest {
	background:#55b;
	color:#ddddff;
	border-radius:6px;
	padding: 0 .5em;
	display:inline-flex;
	gap:1em;

	.location::before {
		content: 'Lokal';
		margin-right:5px;
		opacity:.5;
	}
}

.tracknumber:not(:empty) {
	color:#FF0;
	/*
	background:#FF0;
	color:#000;
	padding:3px;
	border-radius:4px;*/
}



.row.r--train {
	height:100px;
	border-left-color:#33F;
}
.row.r--platform {
	border-left-color:#77f;
}
.row.r--unpaid-break {
	border-left-color:#7f7;
}
.row.r--paid-break {
	border-left-color:#3f3;
}
.row.r--reserve {
	border-left-color:#3cc;
	border-left-style:solid;
}
.row.r--shunting {
	border-left-color:#Fc3;
	border-left-style:groove;
}
.row.r--inspection {
	border-left-color:#Fc3;
}
.row.r--walking {
	border-left-color:#c7f;
}
.row.r--disposable {
	border-left-color:#c7f;
}
.row.r--pass {
	border-left-color:#c44;
}



.modal {
	position:fixed;
	top:0;
	left:0;
	right:0;
	background-color:#00000055;
	z-index:1000;
	overflow:hidden;

	transition:.3s all;
	height:0%;
	opacity:0;

	&.--open {
		height:100%;
		opacity:1;
	}

	.modal-inner {
		position:relative;
		margin:2em;
		background-color:#FFF;
		color:#000;
		box-shadow:0 0 2em #000000aa;
		border-radius:4px;
		overflow:hidden;
	}

	.modal-close-button {
		position:absolute;
		right:0;
		top:0;
		padding:.5em;
		color:#FFF;
	}

	.modal-title {
		background:rgb(0, 201, 178);
		color:#FFF;
		padding:1em;
	}

	.modal-content {
		padding:1em;


		.modal-location-code {
			background-color:#eee;
			border-radius:6px;
			padding:.5em .7em;
			font-size:90%;
			display:inline-block;
		}


		h1 {
			font-size:1.1rem;
			margin-top:0;
			font-weight:600;
		}

		h2 {
			font-size:1rem;
			margin-top:1em;
			font-weight:500;
		}
		ol {
			font-size:.875rem;
			line-height:1.5;
		}
		p {
			margin-left:0;
			margin-right:0;
		}

		iframe {
			border:0;
			width:calc(100% + 2em);
			height:300px;
			margin:-1em;
			margin-top:1em;
		}
	}

}








/********************************************
 * DRAWER Används inte, men kanske i framtiden för cards
 ********************************************/
 /* Standard */
@keyframes removefade {
    0%   {opacity:.5;height:100%;}
    50%  {opacity:0; height: 100%;}
    100% {opacity:0; height: 0%;}
}

#drawer-toggle-label {
	position:absolute;
	top:0;
	right:0;
	height:56px;
	display:none;
	cursor:pointer;
	color:#FFF;
	padding:16px;
	font-size:24px;
}

#drawer-toggle-fade {
	position:fixed;
	left:0;top:0;right:0;
	height:0%;
	background:#000;
	z-index:101;
	opacity:0;
	transition: height 0ms 250ms, opacity 250ms 0ms;
}

#drawer-toggle {
	display:none;
}

#drawer-toggle:checked ~ #drawer {
	left:0;
}
#drawer-toggle:checked ~ #drawer-toggle-fade {
	opacity:.8;
	height:100%;
	transition: height 0ms 0ms, opacity 250ms 0ms;
}


@media (min-width: 1160px) { /* Horisontell meny */
	#drawer {
		display:inline-block;
		vertical-align:top;
		height:56px;
	}

}

@media (max-width:1160px) { /* Drawer */
	#drawer-toggle-label {
		display:block;
	}
	#drawer {
		position:fixed;
		left:-300px; /*-300px*/
		top:0;
		bottom:0;
		width:300px;
		max-width:80%;
		background:#222;
		z-index:102;
		transition: .25s;
		overflow-y:auto;
	}
}