#map {
	height: 100%;
	display: block;
	z-index: 0;
}

#addbtn {
	position: fixed;
	top: 0px;
	right: 0px;
	z-index:1000;
	margin: 20px;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.mapboxgl-ctrl-geolocate{
	display: none !important;
}

.info-modal{
	position: fixed;
	display: none;
	left: 0px;
	top: 0px;
	width: calc(100%);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0 15px 20px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	z-index: 1000;
}

.searchbar{
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 30px;
	z-index: 1000;
}

.detail-modal{
	position: fixed;
	left: 0px;
	bottom: -100%;
	width: calc(100%);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	z-index: 1002;
}

.scooter-info{
	position: fixed;
	bottom: 0px;
	width: 100%;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	z-index: 1004;
	display:none;
}

.departures-list{
	height: 40vh;
	overflow-y: scroll;
	margin: 0px;
	list-style: none;
	padding: 0px;
}

.departure-item{
	position: relative;
	border-bottom: 1px solid #949494;
}

.open-trip{
	cursor: pointer;
}

.cancelled{
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.8);
	z-index: 50;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #dc3545;
	background: linear-gradient(to top right, #fff calc(50% - 1px), #dc3545, #fff calc(50% + 1px));
	opacity: 0.75;
	font-weight: bold;
	margin: -.5rem;
}

.cancelled-inner{
	color: #dc3545;
	padding-top: 20px;
}

.bottom-nav{
	width: 100%;
	z-index: 1001;
	position: fixed;
	bottom: 0px;
	left: 0px;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
}

.bottom-nav-item{
	cursor: pointer;
}

.full-page{
	display: none;
	width: 100%;
	height: 100%;
	z-index: 1000;
	position: fixed;
	top: 0px;
	left: 0px;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
}

.lines-list{
	list-style: none; 
	background: rgba(220, 220, 220,0.8); 
	overflow-x: scroll; 
	white-space: nowrap;
}

.network-icon{
	background: rgba(255, 255, 255, 0.8);
    padding: 5px !important;
    border-radius: 8px;
}

.box{
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	background:rgba(248, 248, 248, 0.8);
	box-shadow: 0 15px 20px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
	border-radius: 8px;
	z-index: 1000;
}

.feature-box{
	display: inline-block;
  background: #dbdbdb;
  border-radius: 4px;
  padding: 3px;
}

.bg-dark-dynamic{
	background: #dbdbdb;
}

.bg-darker-dynamic{
	background: #a7a7a7;
}

.stop-marker{
	width: 30px;
	height: 30px;
}

.stop-marker:hover{
	cursor: pointer;
}

.vehicle-marker{
	width: 30px;
	height: 30px;
}

.vehicle-marker:hover{
	cursor: pointer;
}

.vehicle-marker-delay{
	background: #fff;
	width: 200%;
	border-radius: 10px;
	position: relative;
	top: -5px;
	left: -50%;
	z-index: 200;
	font-size: 11px;
}

.delay-success{
	color: #198754;
}

.delay-danger{
	color: #dc3545;
}

@media (prefers-color-scheme: dark) {
	/* CSS Code wenn Dark Mode aktiv */ 
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
		color: white;
	}
	
	.info-modal{
		position: fixed;
		display: none;
		left: 0px;
		top: 0px;
		width: calc(100%);
		/*
		background: rgba(173, 173, 173, 0.9);
		box-shadow: 0px 0px 15px 2px black;
		*/
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background:rgba(60, 60, 60, 0.8);
		box-shadow: 0 15px 20px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		z-index: 1000;
	}
	
	.detail-modal{
		position: fixed;
		left: 0px;
		bottom: -100%;
		width: calc(100%);
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background:rgba(60, 60, 60, 0.8);
		box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		z-index: 1002;
	}
	
	.scooter-info{
		position: fixed;
		bottom: 0px;
		width: 100%;
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background:rgba(60, 60, 60, 0.8);
		box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		z-index: 1004;
		display:none;
	}
	
	.cancelled{
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.8);
		z-index: 50;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #dc3545;
		background: linear-gradient(to top right, #101010 calc(50% - 1px), #dc3545, #101010 calc(50% + 1px));
		opacity: 0.75;
		font-weight: bold;
		margin: -.5rem;
	}
	
	.bottom-nav{
		width: 100%;
		z-index: 1001;
		position: fixed;
		bottom: 0px;
		left: 0px;
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background:rgba(60, 60, 60, 0.8);
		box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
	}
	
	.full-page{
		display: none;
		width: 100%;
		height: 100%;
		z-index: 1000;
		position: fixed;
		top: 0px;
		left: 0px;
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background:rgba(60, 60, 60, 0.8);
		box-shadow: 0px -15px 20px 0px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
	}
	
	.lines-list{
		list-style: none; 
		background: rgba(30,30,30,0.8); 
		overflow-x: scroll; 
		white-space: nowrap;
	}
	
	.box{
		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);
		background:rgba(60, 60, 60, 0.8);
		box-shadow: 0 15px 20px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);
		border-radius: 8px;
		z-index: 1000;
	}
	
	.feature-box{
		background: #222;
	}

	.bg-dark-dynamic{
		background: #222;
	}

	.bg-darker-dynamic{
		background: #111;
	}

	.vehicle-marker-delay{
		background: #444;
		color: rgb(182, 181, 181);
	}

	.delay-success{
		color: #43faa5;
	}
	
	.delay-danger{
		color: #ff7180;
	}
}

#page-body{
	overflow-y: scroll;
	overflow-x: hidden;
	position: relative;
	width: 100%;
	height: calc(100% - 140px);
}

.media-ticker{
	width: 100%;
}

.marquee {
  overflow: hidden;
  background: #bd2130;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff !important;
}

.stop-circle {
	width: 32px;
	height: 32px;
	line-height: 32px;
	background-image: url('/img/stop_sign_empty.png');
	background-size: contain;
	color: #000;
	text-align: center;
}

.stop-circle:hover{
	cursor: pointer;
}

.vehicle-circle {
	width: 32px;
	height: 32px;
	line-height: 32px;
	background: #900d2d;
	color: #fff;
	text-align: center;
	border-radius: 100%;
	border: 1px solid #000;
}

.vehicle-circle:hover{
	cursor: pointer;
}

.bike-circle {
	width: 32px;
	height: 32px;
	line-height: 32px;
	background: #004A99;
	color: #fff;
	text-align: center;
	border-radius: 100%;
	border: 1px solid #000;
}

.scooter-circle {
	width: 32px;
	height: 32px;
	line-height: 32px;
	background: #673AB7;
	color: #fff;
	text-align: center;
	border-radius: 100%;
	border: 1px solid #000;
}

.leaflet-top .leaflet-control{
	margin-top: 80px !important;
}

.round-icon{
	border-radius: 100%;
}

.scooter-btn{
	width: 100%;
	background: #fff;
	padding: 10px;
	display: block;
	text-align: center;
	border-radius: 100px;
}

.btn-voi, .btn-voi:hover{
	background: #f46c63;
	color: #fff;
	text-decoration: none;
}

.btn-tier, .btn-tier:hover{
	background: #69d2aa;
	color: #001c6e;
	text-decoration: none;
}

.btn-bird, .btn-bird:hover{
	background: #fff;
	color: #000;
	text-decoration: none;
}

.material-icons{
	vertical-align: bottom;
}