/*
	Überwachungskurve 1000 Hz
*/

#container #ueberwachungskurve_1000Hz {
	display: none;
	
	position: absolute;
	bottom: 300px;
	left: 5px;
	right: 5px;
	height: 145px;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
}

#container #ueberwachungskurve_1000Hz .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	height: 40px;
	line-height: 40px;
	
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

#container #ueberwachungskurve_1000Hz .speedBar {
	position: absolute;
	top: 40px;
	left: 5px;
	right: 105px;
	height: 100px;
	
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}


#container #ueberwachungskurve_1000Hz .speedBar .vSoll {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 0;
	height: 48px;
	line-height: 48px;
	
	box-sizing: border-box;
	border-right: 4px solid #711b1c;
	overflow: hidden;
	
	background-color: #9e2a2b;
}

#container #ueberwachungskurve_1000Hz .speedBar .vIst {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 0;
	height: 48px;
	line-height: 48px;
	
	box-sizing: border-box;
	border-right: 4px solid #245639;
	overflow: hidden;
	
	background-color: #4c956c;
}

#container #ueberwachungskurve_1000Hz .speedBar .vSoll .text,
#container #ueberwachungskurve_1000Hz .speedBar .vIst .text {
	padding-left: 5px;
}

#container #ueberwachungskurve_1000Hz .speedBar .vSoll .text span,
#container #ueberwachungskurve_1000Hz .speedBar .vIst .text span {
	font-size: 60%;
}



#container #ueberwachungskurve_1000Hz .seconds {
	position: absolute;
	top: 40px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}

#container #ueberwachungskurve_1000Hz .kmh {
	position: absolute;
	top: 90px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}

#container #ueberwachungskurve_1000Hz .kmh span,
#container #ueberwachungskurve_1000Hz .seconds span {
	font-size: 30%;
}

@media only screen and (min-width: 900px) {
	
	#container #ueberwachungskurve_1000Hz {
		bottom: 175px;
	}
	
}









/*
	Reststrecke Befreiung
*/

#container #reststrecke_befreiung {
	display: none;
	
	position: absolute;
	bottom: 300px;
	left: 5px;
	right: 5px;
	height: 95px;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
}

#container #reststrecke_befreiung .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	height: 40px;
	line-height: 40px;
	
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

#container #reststrecke_befreiung .meterBar {
	position: absolute;
	top: 40px;
	left: 5px;
	right: 105px;
	height: 50px;
	
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}


#container #reststrecke_befreiung .meterBar .bar {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 0;
	height: 46px;
	line-height: 46px;
	
	box-sizing: border-box;
	border-right: 4px solid #245639;
	overflow: hidden;
	
	background-color: #4c956c;
}

#container #reststrecke_befreiung .meter {
	position: absolute;
	top: 40px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}

#container #reststrecke_befreiung .meter span {
	font-size: 30%;
}

@media only screen and (min-width: 900px) {
	
	#container #reststrecke_befreiung {
		bottom: 175px;
	}
	
}









/*
	Reststrecke 1000 Hz-Beeinflussung
*/

#container #reststrecke_1000Hz {
	display: none;
	
	position: absolute;
	bottom: 300px;
	left: 5px;
	right: 5px;
	height: 95px;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
}

#container #reststrecke_1000Hz .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	height: 40px;
	line-height: 40px;
	
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

#container #reststrecke_1000Hz .meterBar {
	position: absolute;
	top: 40px;
	left: 5px;
	right: 105px;
	height: 50px;
	
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}


#container #reststrecke_1000Hz .meterBar .bar {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 0;
	height: 46px;
	line-height: 46px;
	
	box-sizing: border-box;
	border-right: 4px solid #245639;
	overflow: hidden;
	
	background-color: #4c956c;
}

#container #reststrecke_1000Hz .meter {
	position: absolute;
	top: 40px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}

#container #reststrecke_1000Hz .meter span {
	font-size: 30%;
}

@media only screen and (min-width: 900px) {
	
	#container #reststrecke_1000Hz {
		bottom: 175px;
	}
	
}









/*
	Reststrecke 500 Hz-Beeinflussung
*/

#container #reststrecke_500Hz {
	display: none;
	
	position: absolute;
	bottom: 300px;
	left: 5px;
	right: 5px;
	height: 95px;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
}

#container #reststrecke_500Hz .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	height: 40px;
	line-height: 40px;
	
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

#container #reststrecke_500Hz .meterBar {
	position: absolute;
	top: 40px;
	left: 5px;
	right: 105px;
	height: 50px;
	
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}


#container #reststrecke_500Hz .meterBar .bar {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 0;
	height: 46px;
	line-height: 46px;
	
	box-sizing: border-box;
	border-right: 4px solid #245639;
	overflow: hidden;
	
	background-color: #4c956c;
}

#container #reststrecke_500Hz .meter {
	position: absolute;
	top: 40px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}

#container #reststrecke_500Hz .meter span {
	font-size: 30%;
}

@media only screen and (min-width: 900px) {
	
	#container #reststrecke_500Hz {
		bottom: 175px;
	}
	
}









/*
	Überwachungskurve 500 Hz
*/

#container #ueberwachungskurve_500Hz {
	display: none;
	
	position: absolute;
	bottom: 300px;
	left: 5px;
	right: 5px;
	height: 145px;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
}

#container #ueberwachungskurve_500Hz .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	height: 40px;
	line-height: 40px;
	
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

#container #ueberwachungskurve_500Hz .speedBar {
	position: absolute;
	top: 40px;
	left: 5px;
	right: 105px;
	height: 100px;
	
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}


#container #ueberwachungskurve_500Hz .speedBar .vSoll {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 0;
	height: 48px;
	line-height: 48px;
	
	box-sizing: border-box;
	border-right: 4px solid #711b1c;
	overflow: hidden;
	
	background-color: #9e2a2b;
}

#container #ueberwachungskurve_500Hz .speedBar .vIst {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 0;
	height: 48px;
	line-height: 48px;
	
	box-sizing: border-box;
	border-right: 4px solid #245639;
	overflow: hidden;
	
	background-color: #4c956c;
}

#container #ueberwachungskurve_500Hz .speedBar .vSoll .text,
#container #ueberwachungskurve_500Hz .speedBar .vIst .text {
	padding-left: 5px;
}

#container #ueberwachungskurve_500Hz .speedBar .vSoll .text span,
#container #ueberwachungskurve_500Hz .speedBar .vIst .text span {
	font-size: 60%;
}

#container #ueberwachungskurve_500Hz .meter {
	position: absolute;
	top: 40px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}

#container #ueberwachungskurve_500Hz .kmh {
	position: absolute;
	top: 90px;
	right: 0;
	
	width: 100px;
	height: 50px;
	line-height: 50px;
	
	font-size: 40px;
	font-family: 'ShareTech';
}





#container #ueberwachungskurve_500Hz .meter span,
#container #ueberwachungskurve_500Hz .kmh span {
	font-size: 30%;
}


@media only screen and (min-width: 900px) {
	
	#container #ueberwachungskurve_500Hz {
		bottom: 175px;
	}
	
}


















/*
	PZB Leuchtmelder
*/

#container #pzbLeuchtmelder {
	position: absolute;
	bottom: 175px;
	left: 0;
	right: 5px;
	
	height: 120px;
	
	border-radius: 18px;
}

#container #pzbLeuchtmelder .box {
	position: relative;
	float: left;
	width: 33.33%;
	height: 100%;
	padding-left: 5px;
	box-sizing: border-box;
}

#container #pzbLeuchtmelder .box .content {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
	
	text-decoration: none;
	color: inherit;
	text-align: center;
	box-sizing: border-box;
	border: 3px solid black;
}

#container #pzbLeuchtmelder .zugart .content {
	position: absolute;
	top: 0;
	left: 5px;
	right: 0;
	bottom: 0;
	
	width: auto;
	height: auto;
	border-color: #032858;
	background-color: black;
}

#container #pzbLeuchtmelder .zugart .content .wechselblinken {
	position: absolute;
	top: 0;
	
	width: 50%;
	height: 100%;
	
	background-color: #023e8a;
	box-shadow: 0px 0px 30px #023e8a;
}

#container #pzbLeuchtmelder .zugart .content .wechselblinken_links {
	left: 0;
	opacity: 1;
	border-radius: 15px 0 0 15px;
}

#container #pzbLeuchtmelder .zugart .content .wechselblinken_rechts {
	right: 0;
	opacity: 1;
	border-radius: 0 15px 15px 0;
}

#container #pzbLeuchtmelder .zugart .content .off {
	opacity: 0;
}




#container #pzbLeuchtmelder .tausendHz .content {
	background-color: #ffea00;
	border-color: #a69800;
	color: black;
	box-shadow: 0px 0px 20px #ffea00;
}

#container #pzbLeuchtmelder .fuenfhundertHz .content {
	background-color: #d00000;
	border-color: #790000;
	color: black;
	box-shadow: 0px 0px 20px #d00000;
}

#container #pzbLeuchtmelder .box .dark {
	opacity: 0.2;
	box-shadow: none;
}




#container #pzbLeuchtmelder .box .content .title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	line-height: 40px;
	
	font-weight: 500;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.5);
}

#container #pzbLeuchtmelder .tausendHz .content .title,
#container #pzbLeuchtmelder .fuenfhundertHz .content .title {
	color: rgba(0, 0, 0, 0.5);
}



#container #pzbLeuchtmelder .box .content .value {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
	
	font-family: 'ShareTech';
}


#container #pzbLeuchtmelder .box .content .value .value_b span {
	font-size: 30%;
}


@media only screen and (min-width: 900px) {
	
	#container #pzbLeuchtmelder {
		right: 50%;
		bottom: 50px;
	}
	
}











/*
	Zugart-Popup
*/

#zugart .buttonGreen {
	display: block;
}

#zugart .buttonGreen .leuchtmelder {
	display: block;
	position: absolute;
	left: 10px;
	height: 40px;
	width: 40px;
	background-color: #023e8a;
	text-align: center;
}

#zugart .deactivate {
	padding-left: 20px;
}










/*
	PZB-Button (aktivieren)
*/

#pzbButton {
	display: block;
	position: absolute;
	left: 5px;
	bottom: 175px;
	
	padding: 5px 10px;
	
	border-radius: 18px;
	
	background-color: rgba(0, 0, 0, 0.3);
	text-decoration: none;
	color: rgba(255, 255, 255, 0.5);
}


@media only screen and (min-width: 900px) {
	
	#pzbButton {
		left: 25%;
		transform: translateX(-50%);
		bottom: 85px;
	}
	
}












/*
	Zwangsbremsung-Hinweis
*/

#zwangsbremsung {
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	
	padding: 10px 0;
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	line-height: 30px;
	background-color: #c1121f;
	border-radius: 15px;
	box-sizing: border-box;
	border: 3px solid #78080f;
	box-shadow: 0px 0px 20px #c1121f;
}