/****************************************************************/
/*			COPYRIGHT 2019 J. ROLOFF / double-D-IT 				*/
/****************************************************************/

/* GENERAL SETTINGS ---------------------------------------------------------------------------- */
	* { margin: 0px; padding: 0px;}
	body { font: 13px Arial, Helvetica, sans-serif !important; color: #666 !important; margin: 0 !important; padding: 0 !important; /* background-color: #f9f9f9 !important; */ }
	body.overflow { overflow-y: hidden; }

	a { text-decoration: none; }
	input[type=button] { box-sizing: border-box; font-size: 1.15em !important; padding: 10px 20px; background-color: #97bf0d; color: #ffffff !important; border: none; }
	input[type=button].sec { background-color: #f7a800; background: #f7a800; }

	ul,ol { margin: 10px 0 5px 15px; padding: 0; list-style-position: outside;}
	ul { list-style: disc; }
	ol { list-style: decimal; }
	ol li > b, ul li > b {  }
	li > ul, li > ol { margin-bottom: 0; }
	hr  {border: 0px; border-bottom: 1px solid #999; margin: 10px 0px; line-height: 3px; }

	.fl { float: left; }
	.fr { float: right; }
	.clickable { cursor: pointer; }
	.none { display: none; }
	.page-wrapper {	min-height: 100%; height: 100%; margin: 0 auto -30px; }
	.animation { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

	textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; }

/* HEADER -------------------------------------------------------------------------------------- */
	.header { background-color: #999; width: 100%; height: 50px; top:0px; position: sticky; position: -webkit-sticky; position: fixed; position: -webkit-fixed; z-index: 110; transition: all 1.5s; overflow: hidden; }
	.header::after  { content: "\00a0"; position: absolute; top: 0px; left: 0px; display: inline-block; height: 50px; width: 50px; background-color: #f3f3f3; box-shadow: 3px 2px 3px 0px rgba(0,0,0,0.2); transition: all 1.5s; background-image: url('../images/logo.png'); background-repeat: no-repeat; background-position: center center; }
	
	body.alarmdeactive .header { background-color: #999; }

/* NAVI ---------------------------------------------------------------------------------------- */	
	.navi { border: 0px solid #ccc; width: auto; height: 30px; position: relative; top: 10px; margin-right: 10px; float: right; }
	.navi select { width: auto; max-width: 300px; height: 30px; padding: 1px 4px; font-size: 13px;  }
	.navi select option {} 
	.navi select .title { font-weight: bold;  background: #ddd; color: #333; font-size: 15px; text-shadow: 1px 1px 1px #fff; }
	.navi select .beta { display: none; }
	body.alarmon .navi select { max-width: 250px; }

/* BUTTON -------------------------------------------------------------------------------------- */
	.button {  width: auto; height: auto; position: relative; right: 5px; top: 5px; float: right; padding: 0px; }
	.button img { width:24px; height: 24px; cursor: pointer; vertical-align: text-top; background-color: rgba(0,0,0,0.2); padding: 8px; border-radius: 0px; }
	.button img:hover { background-color: rgba(0,0,0,0.3); }
	.button #datetime { text-align: right; color: #fff; display: none; line-height: 1.3; vertical-align: text-top; margin-top: 3px; }
	.button #infoicon  { display: inline-block; vertical-align: text-top; margin: 2px 5px 0 5px; }
	.button #infoicon img { width: 16px; height: 16px;  cursor: auto; vertical-align: text-top; background-color: transparent; padding: 0px; margin-bottom: 2px; display: block; }
	
/* NAVIGATION ---------------------------------------------------------------------------------- */
	.navigation {  width: auto; height: auto; position: relative; right: 5px; top: 5px; float: right; padding: 0px; }
	.navigation-content { /* right: -250px; */ }
	.navigation a span, .navigation a.icon { display: none; }
	.navigation a img { width: 24px; height: 24px; cursor: pointer; vertical-align: text-top; background-color: rgba(0,0,0,0.2); padding: 8px; border-radius: 0px; }
	.navigation a:hover img { background-color: rgba(0,0,0,0.3); }
	.navigation #checkdiag { display: none !important; }
	.navigation #datetime { text-align: right; color: #fff; display: none; line-height: 1.3; vertical-align: text-top; margin-top: 3px; }
	.navigation #infoicon { display: inline-block; vertical-align: text-top; margin: 2px 5px 0 5px; color: #FFF; }
	.navigation #infoicon > span, .navigation #infoicon > .infoiconlink > span  { display: block; }
	.navigation #infoicon a > span img  { cursor: pointer !important; }
	.navigation #infoicon img { width: 16px; height: 16px; cursor: help; vertical-align: text-top; background-color: transparent; padding: 0px; margin-bottom: 2px; display: block; }	
	.navigation #infoicon .infoiconON {  }
	.navigation #infoicon .infoiconOFF { display: none !important; }
	.navigation #infoicon span > span { display: none; margin-left: 5px; }
	
	@media screen and (max-width: 800px) 
	{	
		.navigation.responsive { background-color: inherit; }
		.navigation.responsive .navigation-content { top: 45px; background-color: inherit; border-top: none; position: absolute; right: -5px; height: calc(100vh - 50px); width: max-content; width: 250px; box-shadow: 0 5px 5px 2px rgba(0,0,0,.3); }
		.alarmon .navigation.responsive .navigation-content { top: 65px; height: calc(100vh - 70px); }
		.navigation a:not(:first-child), #datetime, #infoicon { display: none !important; padding: 2px 10px 1px 5px; }
		.navigation.responsive a, .navigation.responsive #datetime, .navigation.responsive #infoicon, .navigation.responsive #checkdiag { display: block !important;}
		.navigation #infoicon::before { display: inline-block; content: "Aktuelle Einstellungen:"; margin: 0 0 15px 15px; border-bottom: 1px dotted #fff; }
		.navigation #infoicon { width: 100%; padding: 25px 0 15px 0px; margin: 2px 5px 0 0px; border-top: 1px solid #fff; border-bottom: none; position: absolute; top: 175px; }
		.navigation #infoicon a { padding: 2px 10px 1px 0px; }
		.navigation #infoicon img { display: inline-block; margin: 0px 5px 0px 15px; }
		.navigation #infoicon span { display: block; }
		.navigation #infoicon span span, .navigation.responsive #checkdiag { font-size: 11px; line-height: 25px; display: inline-block; }
		.navigation.responsive a.icon { right: 0; top: 0; }
		.navigation.responsive .navigation-content a img { width: 20px; height: 20px; background-color: transparent; vertical-align: middle; }
		.navigation.responsive a { display: block; text-align: left; color: #fff; }
		.navigation.responsive a:hover { background-color: rgba(0,0,0,0.3); }
		.navigation.responsive a span { display: inline-block; }
		.navigation a.icon { float: none; text-align: right; display: block !important; }	
	}

/* ALARM --------------------------------------------------------------------------------------- */
	body.alarmon .header { background-color: rgba(221,0,0,1.0); height: 70px; }
	body.alarmon .header::after  { }
	body.alarmon #devinfo, body.alarmon #load { top: 70px; }
	
	body.alarmoff .header { background-color: rgba(83,158,0,1.0); }
	body.alarmoff .header::before { line-height: 40px; content: "KEINE ST\00d6RUNG"; display: inline; display: inline-block; color: #fff; padding:5px 40px 0 60px; }

	.alarm { margin: 0px 0px 0px 0px; display: inline-block; }
	.alarm_no { font-size: 44px; font-weight: bold; background-color: rgba(0,0,0,0.0); }
	.alarm_aus { margin: 0 auto; z-index: 1; color: #999; text-shadow: 1px 1px #fff; font-size: 25px; font-weight:700; line-height: 1.4; vertical-align: middle; margin-top: 30px; display:block; border: 0px solid #ddd; box-sizing: border-box; }
	.alarm_content { display: none; height: 50px; z-index: 10; }
	.alarm_content a { color: #fff; }
	.alarm_info { cursor: pointer; position: absolute; left: calc(50% - 130px); left: 50%; transform: translateX(-50%); font-weight: bold; padding-right: 10px; }
	.alarm_info img { width: 32px; height: 32px; padding: 9px 15px; background-color: rgba(0,0,0,0.0); vertical-align: middle; }
	.alarm_info, .alarm_title, .alarm_title .title, .alarm_descr { display: inline-block; line-height: 1; }
	.alarm_title { vertical-align: top; text-align: center; position: absolute; padding: 2px 10px; top: 52px; border: 0px solid #ccc; border-top: none; background-color: #d00; width: 100%; box-sizing: border-box; }
	body.alarmon .alarm_title .title { font-size: 13px; text-transform: uppercase; }
	.alarm_title .title, body.alarmoff .header::before, #alarm_overlay::before { font-size: 20px; font-weight:700; margin: 0px 5px 0 0px; }
	.alarm_descr { font-size: 12px; font-weight: normal; display: inline-block; }
	.alarm_info, #alarm_overlay
		{ 
			-webkit-animation-name: blinker; -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
			-moz-animation-name: blinker; 	 -moz-animation-duration:    1.5s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite;
			animation-name: blinker; 			animation-duration:      1.5s; animation-timing-function: linear; animation-iteration-count: infinite;
		}
	/*
	@-moz-keyframes blinker    { 0% { opacity: 1.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } }
	@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } }
	*/
	@-moz-keyframes blinker    { 0% { background-color:  rgba(221,0,0,.6); } 50% { background-color:  rgba(255,0,0,.95); } 100% { background-color:  rgba(221,0,0,.6); } }
	@-webkit-keyframes blinker { 0% { background-color:  rgba(221,0,0,.6); } 50% { background-color:  rgba(255,0,0,.95); } 100% { background-color:  rgba(221,0,0,.6); } }
	
	#alarm_overlay { z-index:99; display: none; background-color: rgba(221,0,0,0.6); position: fixed; position: -webkit-fixed; height: calc(100vh - 100px); overflow-y: hidden; margin: 0px; padding: 0px; top:70px; bottom: 30px; left: 0px;  right: 0px; box-sizing: border-box; }
	#alarm_overlay .alarm-display { position: absolute; display: block; width: 100%; height: calc(100vh - 100px); background-image: url('../images/alarm-big.png'); background-size: 35%; background-repeat: no-repeat; background-position: center center; top:0px; bottom: 30px; }
	#alarm_overlay .alarm-display img {   }
	#alarm_overlay::before { z-index:100; content: "ALARM!"; display: block; color: #d00; top: 50%; text-align: center; position: relative; margin: 0; text-shadow: 0px -1px 0 rgba(0,0,0,0.8); font-size: 46px; }
	.close { z-index: 100; display: block; width: 32px; height: 32px; position: relative; padding: 10px; top: 30px; left: calc(100% - 60px); }
	.close:hover { background-color: rgba(0,0,0,0.3); }

/* ALARM INFOBLATT ----------------------------------------------------------------------------- */
	#cover, #coveralarm, #covernavi, #coverdevinfo /* , #load */ { z-index: 101; position: absolute; position: fixed; position: -webkit-fixed; height: calc(100vh - 50px); overflow-y: hidden; display: none; margin: 0px; padding: 0px; background-color: rgba(0,0,0,0.75); top: 50px; right: 0px; bottom: 0px; left: 0px; }
	#alarm a { text-decoration: none; }   
	#frm_alarm { z-index:102; width: 800px; height: 600px; top: 100px; left: calc(50% - 400px); }
	
	#frm_alarm .closebtn { font-size: 1.15em !important; padding: 0.7em 1.5em; background-color: #f7a800; color: #ffffff !important; width: 100px; margin: 10px auto 0; text-align: center; cursor: pointer; }
	#alarmFrame { border: 1px solid #333; border-radius: 0px; padding:0px !important; background-color: #fff; }
	#coveralarm { background-color: rgba(0,0,0,.75); }

/* CONTENT / DIAGRAMME ------------------------------------------------------------------------- */
	/* #load { z-index: 999; background-color: rgba(255,255,255,0.7); background-image: url('../images/load.gif'); background-repeat:no-repeat; background-position: center center; background-size: 100px; } */
	body.alarmon #load { height: calc(100vh - 100px); }
	body.alarmon .content { top: 70px; } 
	.content { margin-bottom: 30px; overflow-x: auto !important; overflow-y: auto !important; padding: 3px 5px 26px; box-sizing: border-box; transition: all 1.5s; position: relative; top: 50px; } 
	.image_box { display:inline-block; text-align:left; vertical-align: top; padding: 0px; margin: 0px 2px 2px 0px; box-sizing: border-box; border: solid #666; border-width: 1px 1px 1px 1px; float: left; position: relative; }
	.image_box .image_title { color: #fff; background-color: #666; line-height: 16px; padding-left: 2px; }
	.image_box.titelalarmon { border-color: #d00; }
	.image_box.titelalarmon .image_title { background-color: #d00; }
	.image_box.titelalarmon .image_scroll { background-color: rgba(220,0,0,0.07); }
	
	.image_box .image_scroll { background-color: #ddd; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;	white-space: nowrap; padding: 0 2px; }
	
	.image_box .image { /* height: 200px; */ z-index:10; }
	.image_box img.scrollhor + span:after, .image_box img.scrollver + span:before { opacity: 0.7; width: 16px; height: 16px; position: absolute; content:" "; background-repeat:no-repeat; background-position: center; } 
	.image_box img.scrollhor + span:after { left: calc(100vw - 49px); bottom: 18px; background-image: url('../images/scrollhor.png'); } 
	
/* DIAGRAMMAUTOMATISIERUNG --------------------------------------------------------------------- */
	
	/* DIAGRAMM ALS BILDDARSTELLUNG - TITEL DES DIAGRAMMS ENDET MIT '|' */	
		#imagebox[attr$="|"] { /* clear: both; */ }
		#imagebox[attr$="|"].image_box .image_title { position: relative; padding: 0px 5px 0px 2px; margin-bottom: 3px; font-size: 16px; font-weight: bold; background-color: transparent; color: #666; }
		#imagebox[attr$="|"].image_box .image_title::after { content: " "; display: inline-block; width: 16px; height: 16px; position: relative; top: 3px; right: 4px; border-radius: 0%; background-color: rgba(249,249,249,1.0) !important; }
		body.alarmoff #imagebox[attr$="|"].image_box .image_title::after { /**/ background-color: rgba(83,158,0,1.0); }
		body.alarmon  #imagebox[attr$="|"].image_box .image_title::after { /**/ background-color: rgba(221,0,0,1.0); }
		
		#imagebox[attr$="|"].image_box { margin-right: 10px; border: none; }
		#imagebox[attr$="|"].image_box:last-child { margin-right: 0px; }
		#imagebox[attr$="|"].image_box .image_scroll { background-color: transparent; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.0); padding: 0px; }
		#imagebox[attr$="|"].image_box img { max-width: fit-content;  width: fit-content;  height: 100% !important; background-color: #f6f6f6; border: 1px solid #666; }
		#imagebox[attr$="|"].image_box img.scrollhor + span:after, #imagebox[attr$="|"].image_box img.scrollver + span:before { position: fixed; bottom: 40px !important; }
		#imagebox[attr$="|"].image_box img.scrollhor + span:after { left: calc(100vw - 39px); }
		#imagebox[attr$="|"].image_box img.scrollver + span:before { left: 5px;  background-image: url('../images/scrollver.png'); } 
			
		
		/* NUR INFO ---------------------------------------------------------------------------- 
		#imagebox[attr*="#"] .image { opacity: 0.075!important; } 
		#imagebox[attr*="#"]::before  { content: "WICHTIGE INFORMATION: Dieser Diagramm wird immer in einer neuen Zeile anfangen, wenn im Titel des Diagramms eine Raute-Taste '#' als letzes Zeichen gesetzt wird!!!"; display: inline-block;
		padding: 10px 20px; color: #fff; position: absolute; top: 15%; left: calc(50% - 150px); background: #d00; width: 300px; opacity: 1 !important; font-weight: bold; z-index:10; }
		*/
	
	/* DIAGRAMME AUSBLENDEN - TITEL DES DIAGRAMMS ENDET MIT '#' */

		#imagebox[attr$="*"] { display: none; } 
		/* NUR INFO ----------------------------------------------------------------------------
		#imagebox[attr$="*"] .image { opacity: 0.075!important; } 
		#imagebox[attr$="*"] #imagetitle { }
		#imagebox[attr$="*"] #imagetitle::after { content: "INFO: Wenn '*' am ENDE ist!"; display: inline-block; padding: 0px 10px; margin-left: 5px; }
		#imagebox[attr$="*"]::before  { content: "WICHTIGE INFORMATION: Dieser Diagramm wird vollständig ausgeblendet, wenn im Titel des Diagramms ein Sternchen '*' als letzes Zeichen gesetzt wird!!!"; display: inline-block;
		padding: 10px 20px; color: #fff; position: absolute; top: 15%; left: calc(50% - 150px); background: #d00; width: 300px; opacity: 1 !important; font-weight: bold; z-index:10; }
		*/
	
	/* DIAGRAMMUMBRUCH - TITEL DES DIAGRAMMS ENDET MIT '*' */

		#imagebox[attr$="'"] { clear: both; }
		/* NUR INFO ----------------------------------------------------------------------------
		#imagebox[attr*="#"] .image { opacity: 0.075!important; } 
		#imagebox[attr*="#"]::before  { content: "WICHTIGE INFORMATION: Dieser Diagramm wird immer in einer neuen Zeile anfangen, wenn im Titel des Diagramms eine Raute-Taste '#' als letzes Zeichen gesetzt wird!!!"; display: inline-block;
		padding: 10px 20px; color: #fff; position: absolute; top: 15%; left: calc(50% - 150px); background: #d00; width: 300px; opacity: 1 !important; font-weight: bold; z-index:10; }
		*/

	/* FAENGT MIT '^' AN */
		/*
		#imagebox[attr^="___"] {  } 
		*/
		
	/* WENN ENDET MIT '$'  */
		/*
		#imagebox[attr$="___"] {   }
		*/
	
	/* WENN '*' VORKOMMT */
		/*
		#imagebox[attr*="___"] {   }
		*/
		
	/* RAUMTEILUNG ----------------------------------------------------------------------------- */
		/* *
		#imagebox[attr^="1.1"]::before, #imagebox[attr^="2.1"]::before, #imagebox[attr^="3.0"]::before
		{ display: block; padding: 0px 4px; writing-mode: vertical-lr; text-orientation: upright; position: absolute; left: -23px; background: #666666; margin-right: 15px !important; height: 233px; float: left; clear: left; top: -1px; color: #fff;}
		
		/* 1. ___ RAUM / ET  */
		/* *
		#imagebox[attr^="1.1"]::before { content: "RAUM-1" !important; }
		#imagebox[attr^="1."] { background: rgba(0,0,0,.0); padding: 3px; margin: 5px 0px; border-left: transparent;  }
		
		/* 2. ___ RAUM / ET */
		/* *
		#imagebox[attr^="2.1"]::before { content: "RAUM-2 / ET 2" !important; }
		#imagebox[attr^="2."] { background: rgba(0,0,0,.0); padding: 3px; margin: 2px 0px; border-left: transparent;  }
		
		/* 3. ___ RAUM / ET */
		/* *
		#imagebox[attr^="3.0"]::before { content: "RAUM-3 / ET 3" !important; }
		#imagebox[attr^="3."] { background: rgba(0,0,0,.0); padding: 3px; margin: 2px 0px; border-left: transparent;  }
	
/* POPUP --------------------------------------------------------------------------------------- */
	#frm_props, #frm_alarm { position:fixed; display:none; margin:0px; padding:10px; box-sizing: border-box; background-color: #eee; box-shadow: 0 0 0 10px rgba(0,0,0,0.7); border-radius: 3px; }
	
/* SETTINGS ------------------------------------------------------------------------------------ */
	#frm_props { width: 410px; top: 30vh; left: calc(50% - 185px); z-index: 102; }
	#frm_props input, #frm_props p { font: 14px Arial, Helvetica, sans-serif; }
	#frm_props input, #frm_props label { cursor: pointer; }
	#frm_props label { padding-left: 10px; }
	#frm_props .fp_title { font-size: 16px; font-weight: 700; line-height: 1.5; margin-bottom: 15px; }
	#frm_props .fp_content { margin-bottom: 10px; }
	#frm_props #adi.fp_content { border: none; }
	#frm_props #adi.fp_content.on { border: 1px dotted #d00; padding: 5px 0px 5px 3px; background-color: rgba(221,0,0,0.1); }
	#frm_props #txtRefresh { padding: 3px 10px; text-align: right; margin: 0 3px; width: 33px; }
	#frm_props hr { color: #ccc; background-color: #ccc; border: none; height: 1px; margin: 20px 0; }

/* DEV-INFO ------------------------------------------------------------------------------------ */
	#devinfo { position: fixed; position: -webkit-fixed; width: 100vw; height: calc(100vh - 76px); background-color: rgba(0,0,0,0.75); top: 50px; right: -105vw; bottom:26px; opacity: 1; font-size: 13px; box-shadow:0px 0px 0px 0px rgba(0,0,0,0.75); }
	#devinfo.show { right: 0px; opacity: 1.0; }
	#devinfo .close { top: calc(100% - 120px); left: calc(100% - 80px); background-color: rgba(0,0,0,0.25); position: absolute; display: none !important; }
	#devinfo .info { box-sizing: border-box; background-color: #eee; padding: 15px 15px 15px 15px; top: 50px; right: -560px; float: right; border-radius: 0; box-shadow: none; width: calc(100vw - 50px); width: 350px;  height: 100%; opacity: 1 !important; z-index:10; display: block; overflow-y: auto; }
	#devinfo.show .info { right: 0px; }
	#devinfo h3 { font-size: 14px; font-weight: bold; border-bottom: 0px solid #ddd; padding: 0px 30px 0px 0px; background-image: url('../images/dd-logo.png'); background-repeat:no-repeat; background-position: right top; line-height: 25px}
	#devinfo strong { padding-bottom: 5px; display: block; }
	#devinfo span { padding: 5px 0px 10px; display: inline-block; }
	#devinfoshow { width: 30px; height: 100%; display: inline-block; float: right; background-image: url('../images/information.png'); background-size: 24px; background-repeat: no-repeat; background-position: right 1px; }
	#devinfoshow.hide { background-image: url('../images/close.png'); }
	
	#devinfo .legende img { background-color: rgba(0,0,0,0.45); width: 16px; padding: 5px; vertical-align: middle; margin: 0 1px 1px 0; }
	#devinfo .legende label { padding-left: 50px; }
	#devinfo .legende label:nth-last-child(-n+7) { padding-left: 23px; }
/*	#devinfo .close { z-index: 100; display: block; width: 32px; height: 32px; position: relative; padding: 10px; top: 50px; left: calc(100% - 75px); } */

/* LOGIN/OUT ----------------------------------------------------------------------------------- */
	/* LOGIN-SEITE --------------------------- */
	
	/* LOGOUT-SEITE -------------------------- */
		.logout { height: 100vh; overflow-y: hidden; margin: 0px; padding: 0px; background-color: #f3f3f3; box-shadow: inset 0 50px 0 0 #ccc, inset 0 -30px 0 0 #666; }
	/*  .logout::before { content: "DIZG Monitoring"; position: absolute; top: 0px; left: calc(50% - 150px); display: inline-block; height: 50px; width: 300px; transition: all 1.5s; background-image: url(https://monitoring.dizg.de/images/logo.png); background-repeat: no-repeat; background-position: left center; text-indent: 60px; font-size: 24px; font-weight: bold; line-height: 48px;} */
	/*	.logout::before { content: " "; position: absolute; top: 0px; left: 0px; display: inline-block; height: 50px; width:50px; transition: all 1.5s; background-image: url(https://monitoring.dizg.de/images/logo.png); background-repeat: no-repeat; background-position: left center; } */
		.logout .container { position: relative; text-align: center; top: 40%; margin: 0 auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-width: 360px; max-width: 360px; }
		.logout .container .infobox { text-align: center; border: 1px solid #CCC; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); border-radius: 3px; background: #fff; padding: 30px 10px; margin: 5px; box-sizing: border-box; }
		.logout .container .infobox h4 { font-size: 14px; margin-bottom: 15px; white-space: nowrap; }
		.logout .container .infobox h4::before { content:" "; background-image: url(../images/network.png); background-repeat: no-repeat; background-position: center center; background-size: auto; margin-right: 8px; padding: 0px; /*background-color: #539e00;*/ width: 24px; height: 24px; border-radius: 50%; display: inline-block; vertical-align: middle; }
		.logout .container .infobox p { text-align: left; padding-left: 50px; }
		.logout .container .infobox #automrefresh { color: #C00; font-weight: bold; }
		.logout .logout_footer { font-size: 11px; position: absolute; bottom: 0px; text-align: center; left: calc(50% - 65px); color: #fff; }
		
		.logout .logout_header { font-size: 20px; font-weight: bold; text-shadow: 0px 0px 0px #fff; margin-bottom: 45px; }
		.logout .logout_header::before, .logout .logout_header::after  { display: inline-block; vertical-align: middle;  background-repeat: no-repeat; background-position: center center; background-size: auto; }
		
		.logout .logout_header::before {  content:" "; width: 50px; height: 50px; margin-right: 15px; background-image: url(../images/logo.png); }
		.logout .logout_header::after { content:"double-D-IT Login"; }
		
			/* CUSTOMMER */
				/* DIZG - Monitoring */
			#dizg	.logout .logout_header::before { background-image: url(https://monitoring.dizg.de/images/logo.png); }
			#dizg	.logout .logout_header::after  { content:"DIZG Monitoring"; }
	
/* FOOTER -------------------------------------------------------------------------------------- */
	.footer { width: 100%; height: 26px; background-color: #666; border-top: 0px solid #fff; color: #fff; position: fixed; bottom: 0px; padding: 1px 10px; box-sizing: border-box; text-align: center; }
	.footer p { display:inline-block; vertical-align: middle; }
	.footer img { vertical-align: middle; margin-left: 10px; }

/* DESKTOP < 1200px ---------------------------------------------------------------------------- */

		@media (max-width: 1200px)
			{
				body {}
				.content { 	}
				.image_box { display:block; float: none; }
				.image_box .image_scroll { overflow-x: auto !important; white-space: nowrap; }

				/* DIAGRAMM ALS BILDDARSTELLUNG - TITEL DES DIAGRAMMS ENDET MIT '$' */
					.image_box img.scrollhor + span:after { left: calc(100vw - 32px); bottom: 0px; }
					#imagebox[attr$="|"].image_box img.scrollhor + span:after, #imagebox[attr$="|"].image_box img.scrollver + span:before { position: fixed; bottom: 40px !important; }
					#imagebox[attr$="|"].image_box img.scrollhor + span:after { left: calc(100vw - 22px); }
					#imagebox[attr$="|"].image_box img.scrollver + span:before { left: 5px; } 
					#imagebox[attr$="|"].image_box .image_scroll { box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.0); }
			}
			
/* DESKTOP < 1050px ---------------------------------------------------------------------------- */

		@media (max-width: 1050px)
			{		
				/* DIAGRAMM ALS BILDDARSTELLUNG - TITEL DES DIAGRAMMS ENDET MIT '$' */
					#imagebox[attr$="|"].image_box img.scrollhor + span:after, #imagebox[attr$="|"].image_box img.scrollver + span:before { position: fixed; bottom: 40px !important; }
					#imagebox[attr$="|"].image_box img.scrollhor + span:after { left: calc(100vw - 22px); }
					#imagebox[attr$="|"].image_box img.scrollver + span:before { left: 5px; } 
						
				/* NAVI ------------------------------------------------------------------------ */
					body.alarmon .navi select { max-width: 160px; }
						
				/* DIAGRAMME ------------------------------------------------------------------- */
					.image_box .image {	}
			}
			
/* RESPONSIVE - MOBIL -------------------------------------------------------------------------- */

		@media (max-width: 768px)
			{
				/* BUTTON ---------------------------------------------------------------------- */
					.button { top: 10px; float: right; padding: 0px; }
					.button img { width:20px; height: 20px; cursor: pointer; vertical-align: text-top; background-color: rgba(0,0,0,0.2); padding: 5px; border-radius: 0px; }
					.button img:hover { background-color: rgba(0,0,0,0.3); }
					.button #datetime { margin-right: 5px; font-size: 11px; line-height: 14px; }
					.button #infoicon { margin-top: -3px; }
					.navi select { max-width: 240px; }
					body.alarmon .navi select { max-width: 180px; }					
					
				/* ALARM ----------------------------------------------------------------------- */
					body.alarmoff .header::before { font-size: 14px;  background-size: 20px; padding-right: 0px; }	
					body.alarmon .alarm_info { left: 55px; transform: translateX(0%); }
					body.alarmon .alarm_info img { width: 32px; height: 32px; padding-left: 9px; padding-right: 9px; }
					body.alarmon .alarm_descr, body.alarmon .alarm_title .title, body.alarmon .alarm_info { font-size: 11px; }
					#alarm_overlay .alarm-display { background-size: 50%; }
					#alarm_overlay::before { font-size: 20px; margin: 3px 0px 2px 0px; }
					#frm_alarm {  top: 90px; height: calc(100% - 120px); }
									
				/* DIAGRAMME ------------------------------------------------------------------- */
				/*	.image_box::before  { content: ' &nbsp;'; display: block; color: #d00; background: yellow; position: relative; margin: 0;  } */
					.image_box { display:block; float: none; }
					.image_box .image_title {  }
					.image_box .image_scroll { }
					.image_box .image { height: 150px; width: max-content; max-width: max-content; width: -webkit-max-content; box-shadow: 0 0px 0 0 #666; -webkit-appearance: none; display: block; border-right: 0px solid #ddd; }

				/* SETTINGS -------------------------------------------------------------------- */
				
				/* DEV-INFO -------------------------------------------------------------------- */	
					#devinfo .info { width: 100vw; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 3px -2px inset; }
			}

		@media (max-width: 500px) 
			{
				body.alarmoff .header::before { font-size: 12px; background-size: 16px; padding-right: 0px; }	
				
				/* BUTTON ---------------------------------------------------------------------- */
					body.alarmon .button #datetime, .button #infoicon { display: none; } 					
					.navi select { max-width: 145px; }
					body.alarmon .navi select { max-width: 80px; }
				
				/* ALARM ----------------------------------------------------------------------- */	
					body.alarmon .alarm_title .title { display: none; }
					#alarm_overlay .alarm-display { background-size: 75%; }

				/* DIAGRAMME ------------------------------------------------------------------- */	
					.image_box .image_scroll { /* height: max-content; */ }
					.image_box .image { height: 120px;
					/*
							-webkit-transform: scale(0.5);
							transform: scale(0.5); 
						   -webkit-transform-origin: center;
							transform-origin: center;
					*/
					}
					
				/* SETTINGS -------------------------------------------------------------------- */
					#frm_props { width: calc(100vw - 40px); left: 20px; }
					#frm_props, #frm_alarm { padding: 5px; }
					#frm_alarm { width: 90%; left: 5%; }
				
				/* FOOTER ---------------------------------------------------------------------- */
					.footer { font-size: 11px; text-align: left; }			
			}

		@media (max-width: 400px) 
			{
				body.alarmoff .header::before { font-size: 12px; line-height: 13px; width: min-content; background-image: none; margin-top: 7px; }	
				
				/* BUTTON ---------------------------------------------------------------------- */
					.navi select { padding: 1px 1px; }
					.navi select { max-width: 100px; }
					
				/* ALARM ----------------------------------------------------------------------- */
					#alarm_overlay::before { font-size: 12px; }				
			}
			
		@media (max-width: 350px) 
			{
				body.alarmoff .header::before { font-size: 11px; padding-right: 10px; background-image: none; }	
				
				/* BUTTON ---------------------------------------------------------------------- */
					.button #infoicon, .button #datetime { display: none; }
					.navi select { max-width: 80px; }
					
				/* ALARM ----------------------------------------------------------------------- */
					#alarm_overlay::before { font-size: 10px; }
			}
			
		@media (max-width: 300px) 
			{							
				/* BUTTON ---------------------------------------------------------------------- */
					.navi select { max-width: 60px; }					
			}