/************************************
 * 
 * 	SCROLLBAR
 * 	Header
 * 	Container
 * 	Inputfelder
 * 	Button
 *  POPUP
 *  Login
 */



/*****************************************************************************************************************
* VARIABLEN 
*****************************************************************************************************************/
:root {
  --main-bg-color: 		#004a60;
  --main-bg-color: 		#009EAE;
	--main-text-color: 	#FBBB21;



	--grau-hell: 				#F2F2F2;
	--grau-dunkel: 			#BDBDBD;




	--EDH-Gelb: 				#FBBB21;
	--EDH-Türkis1: 			#31B7BC;
	--EDH-Türkis2: 			#009EAE;
	--EDH-Türkis3: 			#00849C;
	--EDH-Dunkelblau: 	#00354E;
	--EDH-Weiss:				#FFFFFF;

	/* font-size: var(--fontSize); */

	--fontSize_S: clamp(0.7rem, 0.8vw, 1.2rem);
	--fontSize_M: clamp(1rem, 2.5vw, 2rem); 
	--fontSize_L: clamp(1.5rem, 2.5vw, 4rem);
	--fontSize_XL: clamp(1rem, 10vw, 2rem);

}





.navigation {
  border: 0px solid red;
  height: 70px;
  width: 100%;

  background: #0B0B3B;

  position: fixed;
  top: 0px;
  left: 0;
  z-index: 9999;
}


#message {
  border: 0px solid red;
  height: 25px;
  width: 100%;

  padding-left: 70px; 
  color: #FF0000;

  position: fixed;
  top: 70px;
  left: 0;
  z-index: 99999;
}

#body {
 border: 0px solid yellow;


}











	.show_OnPad_P {
		display: none;
	}


/* iPad Air Landscape */
@media screen and (max-width: 1180px) {

}

/* iPad Air Portrait  */
@media screen and (max-width: 820px) {
	
	.show_OnPad_P {
		display: flex;
	}

}


/*****************************************************************************************************************
* zu kleines Level 
*****************************************************************************************************************/
.noLevel {
	background-color: #000;
	z-index: 999;
	position: absolute;
	width: 100%;
	height: 300vh;
	opacity: 0.5;
}







/*****************************************************************************************************************
* Header 
*****************************************************************************************************************/
	.header {
		position: relative;
		margin-left: 5px;
	}
	.header > div {
		font-size: 25px;
		color: var(--EDH-Türkis3);
	}
	.header > span {
		padding-left: 10px;
	}
	.header > button {
		position: absolute;
		top: 20px;
		right: 20px;
		background-color: var(--main-text-color);
	}

	@media only screen and (max-width: 768px) {
		.header > div {
			font-size: 12px;
		}
		.header > span {
			font-size: 12px;
		}
		.header > button {
			font-size: 12px;
			top: 0px;
			right: 0px;
		}
	}

/*****************************************************************************************************************
* Container 
*****************************************************************************************************************/

	.mainContainer {
		border: 0px	solid red;
		width: 100%;
		display: flex;
	}
	.mainContainer > div {
		border: 0px	solid red;
		width: 33.3%;
		padding: 5px;
	}

	@media only screen and (max-width: 768px) {
		.mainContainer {
			flex-direction: column;
		}
		.mainContainer > div {
			width: 100%;
		}
	}

/*****************************************************************************************************************
* Inputfelder 
*****************************************************************************************************************/









	/*readonly*/
	.readonly {
		background-color: #F6E3CE;
	}



	/*Radio button*/




	/* NICHT IN DER SUCHE 
	#auftrag_id,#auftrag_creatName,#auftrag_creatDate, #auftrag_anlageId,
	#auftrag_anlageId, #auftrag_anlageOrt, 
	#auftrag_kontaktId, #auftrag_kontakt_vorname, #auftrag_kontakt_nachname, #auftrag_kontakt_handy, #auftrag_kontakt_telefon, #auftrag_melde_email,
	#auftrag_meldeId, #auftrag_portal, #auftrag_baujahr, #auftrag_anlageleistung {
		background-color: #F6E3CE;
	}
	*/

	@media only screen and (max-width: 768px) {
		.inputContainer > label {
			font-size: 12px;
		}
	}

/*****************************************************************************************************************
* Button 
*****************************************************************************************************************/




	.buton_container {
		display: flex;
	}







	@media only screen and (max-width: 768px) {
		button {
			border: 0px;
			border-radius: 5px;
			padding: 5px 5px;
			font-size: 12px;
		}
		button:hover {
			transform: scale(0.99);
			opacity: 0.8;
		}
	}