/* ToolTip */
/*=========*/

.tooltip {
	position: relative;
	display: inline-block;
  }
  
  .tooltip .tooltiptext {
	visibility: hidden;
	width: var(--XXXXL);
	background-color: var(--grau);
	color:	white;
	text-align: center;
	border-radius: var(--XS);
	padding: var(--XS) var(--XXS);
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: var(--XXXL-);
	opacity: 0;
	transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: var(--XS-);
	border-width: var(--XS);
	border-style: solid;
	border-color: var(--grau) transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
  }

/* Autopicker */
/*============*/

.AUTO
{
	background:			white;
	padding:			0px;
	margin:				0px;
	margin-bottom: 		var(--S); 
	list-style-type:	none;
	border-top: 		var(--rahmenSilber);
	border-right: 		var(--rahmenSilber);
	border-left: 		var(--rahmenSilber);
	box-shadow: var(--schatten)
 }
.AUTO_ITEM
{
	border-bottom: 		var(--rahmenSilber);
	padding-left: 		2px;
	font-size: 			smaller;
}

.AUTO li:hover				{ background: var(--grauNormal); }
.AUTO li[aria-selected]		{ background: var(--grauDunkel); }


/* makeAnzeige */
/*=============*/

._SYSTEM_ANZEIGE 
{
	color:						black;
	width:						var(--breite);
	background-color:			var(--gelb);
	font-size:	 				larger;
	font-weight:	 			normal;
	text-align: 				center;
	margin:						var(--S);
	padding:					var(--S);
	border-radius:				var(--S);
}

._KOMPONENTE_ANZEIGE 
{	
	width: 						100%;
	display: 					flex;
	justify-content:	 		center;
	background-color:			var(--grauHell);
	margin: 					var(--S) 0px;
}

._ANZEIGE 	
{
	text-align: 				center;
	width:						var(--breite);
	padding:					var(--S);
	margin:						var(--S);
	border-radius:				var(--S);
}

._ANZEIGE_ok_dunkel			{	background-color: var(--gruenDunkel)	}
._ANZEIGE_notOk_dunkel		{	background-color: var(--rotDunkel)		}
._ANZEIGE_ok_hell			{	background-color: var(--gruenHell)		}
._ANZEIGE_notOk_hell		{	background-color: var(--rotHell)		}
._ANZEIGE_text				{ 	color: black;	}


/* KOMPONENTE FORMULAR  */
/*======================*/

._KOMPONENTE_FORMULAR 		{	text-align: center;	}

._FORMULAR_schalter 	
{	
	text-align: 				center;
	width: 						100%;
	padding:					var(--S);
	margin-bottom: 				var(--XXS);
}

._FORMULAR_schalter_ok				{	background-color: var(--gruenHell)		}
._FORMULAR_schalter_ok:hover		{	background-color: var(--gruenNormal)	}
._FORMULAR_schalter_ok:active		{	background-color: var(--gruenDunkel)	}
._FORMULAR_schalter_ok:disabled		{	background-color: var(--grauHell)		}

._FORMULAR_schalter_notOk			{	background-color: var(--rotHell)		}
._FORMULAR_schalter_notOk:hover		{	background-color: var(--rotNormal)		}
._FORMULAR_schalter_notOk:active	{	background-color: var(--rotDunkel)		}
._FORMULAR_schalter_notOk:disabled	{	background-color: var(--grauHell) 		}

._FORMULAR_schalterText				{ 	font-weight: bold; }

._FORMULAR_fehler 
{
	font-size:	 				larger;
	font-weight:	 			bold;
	text-align: 				center;			
}

._SCHALTER_beschreibung 
{
	color: 						var(--grau);
	text-align: 				center;
	font-size:	 				smaller;
	width: 						var(--breite);
	margin: 					var(--S);
	padding: 					var(--XS);
}

._SCHALTER_rahmen 
{				
	display:					flex;
	flex-direction:				row;
	flex-wrap:					wrap;
	justify-content: 			center;
	margin: 					var(--XXS);
	padding:					var(--XXS), 0;
}


/* KOMPONENTE EINGABE */
/*====================*/

._KOMPONENTE_EINGABE_RAHMEN 
{	
	margin: 					0;
	padding: 					0
}

._KOMPONENTE_EINGABE 
{	
	display: 					table;		
	background-color:			var(--grauSehrHell);
	border: 					var(--rahmenWeiss);
	width: 						var(--breite);
	border-radius: 				var(--S);
	margin: 					var(--XXS);
	padding: 					var(--S) var(--XXS) var(--XXS)
}

._KOMPONENTE_EINGABE_ROT
{	
	display: 					table;		
	background-color:			var(--rotDunkel);
	border: 					var(--rahmenRot);
	width: 						var(--breite);
	border-radius: 				var(--S);
	margin: 					var(--XXS);
	padding: 					var(--S) var(--XXS) var(--XXS)
}

._KOMPONENTE_EINGABE_ORANGE
{	
	display: 					table;		
	background-color:			var(--orangeDunkel);
	border: 					var(--rahmenOrange);
	width: 						var(--breite);
	border-radius: 				var(--S);
	margin: 					var(--XXS);
	padding: 					var(--S) var(--XXS) var(--XXS)
}

._KOMPONENTE_EINGABE_GELB
{	
	display: 					table;		
	background-color:			var(--gelbDunkel);
	border: 					var(--rahmenGelb);
	width: 						var(--breite);
	border-radius: 				var(--S);
	margin: 					var(--XXS);
	padding: 					var(--S) var(--XXS) var(--XXS)
}

._KOMPONENTE_EINGABE_GELBGRUEN
{	
	display: 					table;		
	background-color:			var(--gelbgruenDunkel);
	border: 					var(--rahmenGelbgruen);
	width: 						var(--breite);
	border-radius: 				var(--S);
	margin: 					var(--XXS);
	padding: 					var(--S) var(--XXS) var(--XXS)
}

._KOMPONENTE_EINGABE_GRUEN
{	
	display: 					table;		
	background-color:			var(--gruenDunkel);
	border: 					var(--rahmenGruen);
	width: 						var(--breite);
	border-radius: 				var(--S);
	margin: 					var(--XXS);
	padding: 					var(--S) var(--XXS) var(--XXS)
}

._EINGABE_inhalt 
{												
	margin:						var(--XXS) 0;
	padding:					0;
}

._EINGABE_inhalt_textaria 
{
	width: 						96%;
	height: 					var(--hoehe);
	border-radius:				var(--XXXS);
	background-color: 			white;	
	border: 					var(--rahmenSilber);
	padding: 					var(--XXXS);	
}		

._EINGABE_inhalt_select	
{	
	width: 						100%;
	border-radius:				var(--XXXS);
	background-color: 			white;	
	border: 					var(--rahmenSilber);
	padding: 					var(--XXXS);	
}
._EINGABE_inhalt_input	
{
	width: 						96%;
	border-radius:				var(--XXXS);
	background-color: 			white;	
	border: 					var(--rahmenSilber);
	padding: 					var(--XXXS);	
}

._EINGABE_inhalt_jaNein	
{
	width: 						var(--N);
	height: 					var(--N);
}

._EINGABE_fuss 
{	
	font-size:	 				smaller;
	height: 					var(--XL);
}

._EINGABE_hinweis
{
	font-size:	 				smaller;
	color:						var(--rot);
	background-color:	 		var(--rotNormal);
	text-align: 				left;
	border-radius: 				var(--S);
	margin:						var(--XXXS) var(--XXXS) var(--XXXS) var(--XXXS);
	padding:					var(--XXS) var(--S);
}

._EINGABE_teil
{
	display:					flex;
	justify-content:			center;
	flex-direction:				row;
	flex-wrap:					wrap;	
}

._EINGABE_text 
{		
	font-size:	 				smaller;
	margin-bottom: 				var(--XXXS);
}

._EINGABE_mehrfachauswahl
{
	background-color:	 		white;
	text-align: 				left;
	border:						var(--rahmenSilber);
	border-radius:				var(--S);
	margin: 					var(--XXS) 0;
	padding: 					var(--XXS);
}

._EINGABE_mehrfachauswahl_input
{	
	width: 						var(--S);
	height: 					var(--S);
	margin-right: 				var(--XXS);
}

._EINGABE_einfachauswahl
{
	background-color:	 		white;
	text-align: 				left;
	border:						var(--rahmenSilber);
	border-radius:				var(--S);
	margin: 					var(--XXS) 0;
	padding: 					var(--XXS);
}

._EINGABE_einfachauswahl_input
{	
	width: 						var(--S);
	height: 					var(--S);
	margin-right: 				var(--XXS);
}

._EINGABE_zustimmen
{
	background-color:	 		white;
	text-align: 				left;
	border:						var(--rahmenSilber);
	border-radius:				var(--S);
	margin: 					var(--XXS) 0;
	padding: 					var(--XXS);
}

._EINGABE_zustimmen_input
{	
	width: 						var(--S);
	height: 					var(--S);
	margin-right: 				var(--XXS);
}

._EINGABE_jaNeinLeer
{
	background-color:	 		white;
	text-align: 				left;
	border:						var(--rahmenSilber);
	border-radius: 				var(--S);
	margin: 					var(--XXS) 0;
	padding: 					var(--XXS);
}

._EINGABE_jaNeinLeer_input
{
	width: 						var(--S);
	height: 					var(--S);
	margin-right:				var(--XXS);	

}

._EINGABE_jaNein
{
	background-color:	 		white;
	text-align: 				center;
	border:						var(--rahmenSilber);
	border-radius: 				var(--S);
	margin: 					var(--XXS) 0;
}

/* KOMPONENTE TEXT */
/*=================*/

._KOMPONENTE_TEXT 
{
	text-align: 				left;		
}

._TEXT_teil	
{
	display:					flex;
	flex-direction:				row;
	flex-wrap:					wrap;	
	margin:						var(--S) var(--XS);
	padding:					var(--XS) var(--S);
}