@charset "utf-8";

/* Card für die Startseite */

.newscard {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 0 auto;
  margin-top: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 }

.newscard.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@keyframes newscardfadeIn {
  0% {
    opacity: 0;
	visibility: hidden;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
	 visibility: visible;
    transform: translateY(0);
  }
}

.newscard.animate {
  animation: newscardfadeIn 0.5s ease-in-out 1s forwards;
}

.newscard-content {
  padding: 20px;
}

.newscard-title {
  font-size: 20px;
  margin-bottom: 10px;
  display:block;
}


.newscard-text {
  color: #555;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 5px;
  display: block;
  text-align:left;
}

.newscard-header
{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 20px;
}

.card-img {
  margin-top: 1rem;
  max-width: 10%;
  border-radius: 8px 8px 0 0;
  display: block;
  margin-right: 1rem;
}
/* Card Ende */ 

.slide.ng-enter {
  transition:all ease-in 10.25s;
  height: 0px;
}
 
.slide.ng-enter.ng-enter-active {
  height: 300px;
}

/* Slide-In-Out von Eingabefeldern als tr-Element in einer Table */
   @keyframes slideIn {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  @keyframes slideOut {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }
  
  .slide-in {
    animation: slideIn 0.5s forwards;
  }
  
  .slide-out {
    animation: slideOut 0.5s forwards;
  }


.fade-in-delayed{
	opacity: 0; /* Beginnt unsichtbar */
	animation: fadeIn-delayed 0.2s ease-in forwards; /* Einblendung über 0,2 Sekunden */
	animation-delay: 0.5s; /* Wartezeit von 0,5 Sekunden */
}

@keyframes fadeIn-delayed {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



@media print {
  body * {
    visibility: hidden;
  }
  #faqs, #faqs * {
    visibility: visible;
  }
  #faqs {
    position: absolute;
    left: 0;
    top: 0;
  }
}



@media screen {
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 14px;
	height: 100%;
}
p.standardtext { background: transparent; font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; font-size: 16px; 	height: 100%;}
.nurprinter{display: none;}
} /* MEDIA SCREEN */

#wartelayer {
	 /* A dark translucent div that covers the whole screen */
  display: none;
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: blue;
  opacity: 0.8;
}



.greenbutton, .redbutton, .orangebutton, .speicherbutton, .yellowbutton {
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
        
        border:1px solid #909090;
        
        display:inline-block;
        color: #000!important;
        font-family:Verdana;
        font-size:14px;
        font-weight:bold;
        padding:13px 16px;
        text-decoration:none;
        
        text-shadow:0px 1px 0px #263666;   	
}
.greenbutton{
		background-color: #0F6;
}
.redbutton{
	background-color: #F00;
}
.speicherbutton{
	background-color: #6CF;
}
.orangebutton {
	background-color:#F93;
}
.yellowbutton {
	background-color: #FF6;
}

input[type=button], input[type=submit], .submit, .button, .btn-login {        
			background-color: #4CAF50;
			color: white;
			padding: 10px 16px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 16px;
			margin-top: 10px;
			margin-bottom: 5px;
			transition: all 0.3s ease-in-out;
}
	
input[type=button]:hover, input[type=submit]:hover, .submit:hover, .button:hover, .btn-login:hover, button.submit:hover  {        
		background-color: #3e8e41;
		cursor: pointer;
}

button:disabled{background-color: lightgrey; cursor: auto;}
button:disabled:hover{background-color: red; cursor: auto;}


/* Die folgende Definition gilt nur noch für den Los-Suchknopf im Header, weil die Farben sich sonst mit dem Grün auf der rechten Seite beißen würden. */

input[type=submit].sucheingabe {        
        -moz-box-shadow:inset 1px 1px 1px 0px #29bbff;
        -webkit-box-shadow:inset 1px 1px 1px 0px #29bbff;
        box-shadow:inset 1px 1px 1px 0px #29bbff;
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0011ff));
        background:-moz-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:-webkit-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:-o-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:-ms-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:linear-gradient(to bottom, #2dabf9 5%, #0011ff 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0011ff',GradientType=0);
        
        background-color:#2dabf9;
        
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
        
        border:1px solid #0011ff;
        
        display:inline-block;
        color:#ffffff;
        font-family:Verdana;
        font-size:14px;
        font-weight:bold;
        padding:3px 6px;
        text-decoration:none;
        
        text-shadow:0px 1px 0px #263666;    
}
input[type=submit].sucheingabe:hover {               
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0011ff), color-stop(1, #2dabf9));
        background:-moz-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:-webkit-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:-o-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:-ms-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:linear-gradient(to bottom, #0011ff 5%, #2dabf9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0011ff', endColorstr='#2dabf9',GradientType=0);
        
        background-color:#0011ff;
		cursor: pointer;
    }
/* Suchbuttondefinitoon Ende */

/*
input[type=button], input[type=submit], .submit, .button {        
        -moz-box-shadow:inset 1px 1px 1px 0px #29bbff;
        -webkit-box-shadow:inset 1px 1px 1px 0px #29bbff;
        box-shadow:inset 1px 1px 1px 0px #29bbff;
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0011ff));
        background:-moz-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:-webkit-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:-o-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:-ms-linear-gradient(top, #2dabf9 5%, #0011ff 100%);
        background:linear-gradient(to bottom, #2dabf9 5%, #0011ff 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0011ff',GradientType=0);
        
        background-color:#2dabf9;
        
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
        
        border:1px solid #0011ff;
        
        display:inline-block;
        color:#ffffff;
        font-family:Verdana;
        font-size:14px;
        font-weight:bold;
        padding:3px 6px;
        text-decoration:none;
        
        text-shadow:0px 1px 0px #263666;    }
	
input[type=button]:hover, input[type=submit]:hover, .submit:hover, .button:hover {        
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0011ff), color-stop(1, #2dabf9));
        background:-moz-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:-webkit-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:-o-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:-ms-linear-gradient(top, #0011ff 5%, #2dabf9 100%);
        background:linear-gradient(to bottom, #0011ff 5%, #2dabf9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0011ff', endColorstr='#2dabf9',GradientType=0);
        
        background-color:#0011ff;
		cursor: pointer;
    }
*/	
input[type=button]:active, input[type=submit]:active, .submit:active, .button:active {
        position:relative;
        top:1px;
    }



input[type=text], textarea, .input, select, input[type=password], input[disabled='disabled'], .input_disabled {
    text-align:left;
	color:#000;   
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size:smaller;
    background-color:#FEEEE0; 
	-webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 1px 1px #999;  
    box-shadow: 0px 0px 1px 1px #999;
	
}
	
	

.input[type=submit]
{
	text-align:center;
}

.output{background-color: #dbdbdb!important;}
a:visited {  text-decoration: none;}


option:hover {
	background: #03F;
	color: #FFF;
}

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
	padding-right: 15px;
	padding-left: 2px;
	color: #000;
	display: inline;
}


h1 {vertical-align:80%;margin-left:100px;color: #FFF}

option {
	font-size:100%;
}

a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
.zentrierenflexbox{display: flex; justify-content: center;}
.zentrieren {
	position: relative;
/* 	left: 30%;  Darf nicht zu weit rechts stehen, weil sonst das Untermenü überdeckt würde */
    margin: 0 auto;
}
.rahmen { border-style:solid; border-color: black; }


/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
/*	color: #6E6C64; AB 10.3.23 */
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
}

@media screen {
/* ~~ Dieser Container mit fester Breite umschließt die anderen div-Tags. ~~ */
.container {
    width: 1200px;
	background: #FFF;
	position: absolute;
	top: 0%;
	left: 50%;
    margin-left: -600px;
	min-height: 100%;   
	background-image: url(../images/fauxcolumns.png);
}
} /* MEDIA SCREEN */

/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. Sie enthält einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */
.header {
	background-color: #03C; 
	background:url(../images/header_back.jpg) repeat-x;
	height: 100px;
}

/* ~~ Dies sind die Spalten für das Layout. ~~ 

1) Eine Auffüllung wird nur oben und/oder unten in den div-Tags positioniert. Die Elemente innerhalb dieser div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

2) Für die Spalten wurde kein Rand angegeben, da es sich um fließende Spalten handelt. Wenn Sie unbedingt einen Rand hinzufügen möchten, platzieren Sie ihn nicht auf der Seite in Flussrichtung (z. B. ein rechter Rand in einem div-Tag, das so festgelegt ist, dass das Element nach rechts fließt). In vielen Fällen kann stattdessen eine Auffüllung verwendet werden. Bei div-Tags, bei denen diese Regel gebrochen werden muss, sollten Sie der Regel des div-Tags eine display:inline-Deklaration hinzufügen, um das Problem zu umgehen, dass in einigen Versionen von Internet Explorer der Rand doppelt angezeigt wird.

3) Da Klassen in einem Dokument mehrmals verwendet werden können (und zudem auf ein Element mehrere Klassen angewendet werden können), wurden den Spalten Klassennamen statt IDs zugewiesen. Beispielsweise können zwei div-Tags für eine Seitenleiste bei Bedarf gestapelt werden. Diese div-Tags können problemlos in IDs geändert werden, solange Sie sie nur einmal pro Dokument verwenden.

4) Wenn Sie die Navigation auf der linken statt auf der rechten Seite platzieren möchten, lassen Sie diese Spalten einfach in die andere Richtung fließen (alle nach links anstatt alle nach rechts). Die Spalten werden dann in umgekehrter Reihenfolge dargestellt. Die div-Tags in der HTML-Quelle müssen nicht verschoben werden.

*/
.sidebar1 {
	float: right;
	width: 200px;
	background: #EADCAE;
	padding-bottom: 10px;
	z-index: 210;
}

p.minischrift{ font-size: 10px;}

p.sidebartext {
	font-size:12px;
	font-weight: normal;
	text-indent: 0px;
}
.sidebartext::after {
    content: "\A";
    white-space: pre;
}
.sidebarhilfe { background-color: transparent; padding-left: 4px; padding-right: 4px;}

@media screen {
.content {
	padding: 10px 0;
/*	width: 760px; */
    width: 1000px;
	float: right;
}
}


img.kapazitaetstypicon{
	width: 15px;
}


span.globalerfeiertag{color: #008000;}

.fehlermeldung {
	background-color: #F00;
}
.warnung {
	background-color: yellow;
}
.warnungtyp2 {
	background-color: #ff9b37;
}
.warnungtyp3 {
	background-color: #ff6666;
}


/* ~~ Dieser gruppierte Selektor gibt die Listen im .content-Bereich an. ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* Diese Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug platziert. Sie können die Werte nach Bedarf ändern. */
}

/* ~~ Stile für die Navigationslisten (können entfernt werden, wenn Sie ein vordefiniertes Ausklappmenü wie Spry verwenden) ~~ */
ul.nav {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	border-top: 1px solid #666; /* Hiermit wird der obere Rand für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rand im LI-Element platziert. */
	margin-bottom: 15px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den Inhalten unten erstellt. */
}
ul.nav li {
	border-bottom: 1px solid #666; /* Hiermit wird die Trennung der Schaltflächen erstellt. */
}
ul.nav a, ul.nav a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	padding: 5px 5px 5px 15px;
	display: block; /* Hiermit werden die Blockeigenschaften für den Hyperlink angegeben, sodass das gesamte umschließende LI-Element aufgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
	width: 180px;  /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 auf Mausklicks. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss. Berechnen Sie die exakte Breite durch Subtrahieren der Auffüllung für diesen Hyperlink von der Breite des Containers für die Randleiste. */
	min-width: 180px;
	text-decoration: none;
	background: #C6D580; 
	cursor: pointer;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	background: #ADB96E;
	color: #FFF;
}

/* ~~ Fußzeile ~~ */
.footer {
	padding: 2px 0;
	font-size:small;
	text-indent: 10px;
	text-align: center;
	bottom: 0;
	background: #e2d092;
	width: 1200px;
/*	margin-bottom: 0px; */
/*	z-index:200; */
	position: relative; /* Hiermit erhält IE6 die Eigenschaft hasLayout, damit die clear-Anweisung korrekt ausgeführt wird. */
	position: fixed;
	clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
}
.footer p{ font-size: 10px; }

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

#Logintabelle, #berichtstabelle {
	width: 500px;
	height: 100px;
	margin-top: -50px;
	margin-left: -350px;
	left: 50%;
	top: 50%;
	position: absolute;
}

#Logintabelle th {
	text-align:right;
}


#optionstable {
	width: 600px;
	height: 100px; 
	margin-left: -210px;
	margin-top: 100px;
	left: 50%;
	top: 50%;
	position: absolute;
}

.optionslisten {
	width:350px; 
	font-size: 16px;
	font-weight: normal;
/*	height: 100%; */
    min-height: 350px;
	color: #000;
/*	border:thin;	*/
}

.optionslistebreit {
	width:500px; 
	font-size: 16px;
	font-weight: normal;
/*	height: 100%; */
	color: #000;
/*	border:thin;	*/
}

.optionslistebreit hover {
	color: #FFF;
	background-color: #03F;
}

div#pfeile {
	position:relative;
	top: 200px;
	left: 50px;
}

div#pfeileneu {
	width: 150px;
    margin-left: 50px;
	display: flex;
/*	align-content: center; */
	justify-content: center;
	flex-direction: column;
}


#tabledivid {
    width: 997px;   
	height: 400px;
    overflow: auto;    
    scrollbar-base-color:#ffeaff;
}


.fixedColumn .fixedTable td
{
	color: black;
	text-align:left;
	background-color: #C6D580;
	font-size: 12px;
	font-weight: normal;
	white-space:nowrap;
	cursor: default;
}
        
.fixedHead, #kapazitaetsaenderung th, #abwesenheiten th, #terminsuche th
{
	color: black;
	background-color: #C6D580;
	font-size: 12px;
	font-weight: normal;
/*	padding: 5px; */
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid #C6D580;
	white-space:nowrap;
	min-width: 47px;
	min-height: 80px;
	text-align:center;
}

td.tabellenzelle{
	transition: all 0.3s ease-in-out;
}

#terminsuche th{ padding: 5px; padding-right: 18px;}

#terminsuche td
{
	font-size: 12px;
	padding-left: 3px;
	padding-right: 3px;
}

img.inlineicon{ width: 20px;  }
.fixedHead > .GridCellDiv{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}

th.fixedHead.ueberschriftzentrieren > .GridCellDiv
{
	justify-content: center;
}


.fixedColumn
{
	color: black;
	background-color: #C6D580;
	font-size: 12px;
	font-weight: normal;
/*	padding: 5px; */
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid lightgrey;
	white-space:nowrap;
	min-width: 47px;
	min-height: 25px;
	max-width:200px; overflow:hidden;
	text-align:left;
}


.fixedTable td, .tabellenzelle
{
	font-size: 9px;
	background-color: #FFFFFF;
	padding: 5px;
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
	border: 1px solid #CEE7FF;
	white-space:nowrap;
	min-width: 47px;
	cursor: pointer;
}

#uhrzeitfehler { text-decoration: blink; display:none;}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }


/* Termin anlegen */
#tabledivid2 {
    width: 997px;   
/*	height: 400px; */
    overflow: auto;    
    scrollbar-base-color:#ffeaff
	bac
}

/* Kapazitatsauswahl */
#kapazitaetsauswahl .aktiv{color:darkgreen;}
#kapazitaetsauswahl .inaktiv{color:red;}
#kapazitaetsauswahl .aktiv:hover{background-color:blue; color: white; cursor: pointer;}
#kapazitaetsauswahl .inaktiv:hover{background-color:blue; color: white; cursor: pointer;}

#kapazitaetsauswahl { margin-left: 30px; padding-left: 0; list-style: none;}
#kapazitaetsauswahl ul{ padding-left: 0; padding-right: 0; list-style: none;}

.multiselect {
    width:40em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow-y:scroll;
	text-align: left;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
/*    color:#ffffff;
    background-color:#6496C8; */
	color: green;
	border-bottom: 1px groove #00ff00;
}
.multiselect-off {
	color: red;
	border-bottom: 1px groove #00ff00;
}

.multiselect span:hover, .multiselect input[type=checkbox]:hover, .multiselect-on span:hover{
    color:#ffffff;
    background-color:blue;
    cursor: pointer;
}



.datumstipp           { color: grey; font-style:italic; }
.datumsfehler         { color: red; font-style:italic; }
.validationsfehler    { border-color: red;  }

/* DVA-Check */
table#dvagruppeninfo td {border: 1px solid black; font-size: 12px;} 
table#dvagruppeninfo th {border: 1px solid black; background-color: #06F;} 

#tree { width: 400px; margin-left: auto; margin-right: auto; text-align: left; }

/* Feldbezogene Fehlermeldung */
.fielderror { color: red; font-style: italic; font: Verdana, Geneva, sans-serif; font-size: 12px; }
.fielderrorbrush { border: 3px solid red; background-color: red;}

/* Statusmonitor */
table#statusmonitor th, table#statusmonitor td
{
	margin: 0px;
	border-collapse: collapse;
	border-top: 0px solid #B9B9B9;
	border-bottom: 1px solid #B9B9B9; 
	border-left: 0px;
	border-right: 0px;
	border-collapse: collapse;
	text-align: center;
	padding: 2px; 
	cellspacing: "0px";
}


table#statusmonitor th { 
	font-weight: bold;
	font-size: 10pt;
	color: #fff;
	padding: 4px 10px;
	background: #000087;
	background: -webkit-gradient(linear, left top, left bottom, from(#0000fe), to(#000087));
	background: -moz-linear-gradient(top, #0000fe, #000087);
	
	/* aktueller W3C working draft */
	background: linear-gradient(top, #0000fe, #000087);

	/* Für Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0000fe, endColorstr=#000087); zoom: 1;
	/* Für Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0000fe, endColorstr=#000087)";	
	
	border: 0px;
}

table#statusmonitor td { 
	font-size: 10pt;
	color: black;	
/*	width: 950px; */
}

tr.standort:hover td, tr.schlange:hover td
{
	color: white;
	background-color: #0000fe;
	cursor: pointer;
}


.links { text-align: left !important; }

.standort
{
	font-weight: bold;
	background-color: #CCC;
	display: table-row;
}

.schlange 
{
	display: none;
}

/* CSS für Plotly Grafik der Kapazitäten */
/* Das folgende CSS vermeidet die Doppelklickfunktion in der Legende von Plotly, mit der sich eine Grafik auf eine Linie reduzieren lässt. */
.legendtoggle { 
    cursor: default;
    pointer-events: none; 
}
/* <<< */


.grafik {
  display: none;
  background-color: white; 
  height: 260px;
  margin-left:0;
}

.malflaeche
{
	position: relative; 
    resize: none;
	overflow:hidden;
    width: 910px; 
	height: 250px;
}

.statusgruen
{
}
.statusgelb
{
	background: #ebfc00;
	background: -webkit-gradient(linear, left top, left bottom, from(#ebfc00), to(#ebfc00));
	background: -moz-linear-gradient(top, #ebfc00, #ebfc00);
	/* aktueller W3C working draft */
	background: linear-gradient(top, #ebfc00, #ebfc00);

	/* Für Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebfc00, endColorstr=#ebfc00); zoom: 1;
	/* Für Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebfc00, endColorstr=#ebfc00)";	
}
.statusrot 
{
	background: #fc0800;
	background: -webkit-gradient(linear, left top, left bottom, from(#fc5000), to(#fc0800));
	background: -moz-linear-gradient(top, #fc5000, #fc0800);

	/* aktueller W3C working draft */
	background: linear-gradient(top, #fc5000, #fc0800);

	/* Für Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fc5000, endColorstr=#fc0800); zoom: 1;
	/* Für Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fc5000, endColorstr=#fc0800)";	
}

/* Einstellungen fuer die TABs */

  #tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #tabs li {
    float: left;
    margin: 0 -20px 0 0;
	list-style: none;
  }

  #tabs a {
    float: left;
    position: relative;
    padding: 0 30px;
    height: 0;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;      
    border-right: 20px solid transparent;
    border-bottom: 20px solid #3D3D3D;
    border-bottom-color: #777\9;
    opacity: .3;
    filter: alpha(opacity=30);      
  }

  #tabs a:hover,
  #tabs a:focus {
    border-bottom-color: #0000C0; /* #2ac7e1; */
    opacity: 1;
    filter: alpha(opacity=100);
  }

  #tabs a:focus {
    outline: 0;
  }

  #tabs #current {
    z-index: 3;
    border-bottom-color: #3d3d3d;
    opacity: 1;
    filter: alpha(opacity=100);      
  }

  /* ----------- */
  #content {
      background: #fff;
      border-top:  0; /* 2px solid #3d3d3d; */
      padding: 1em;
      /*height: 220px;*/
  }

  #content h2,
    #content h3,
    #content p {
      margin: 0 0 15px 0;
  }  


/* Warteblende */
#warteblende {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,255,.4);
   overflow: hidden;
   background-image: url("../images/waiting.gif");background-repeat:no-repeat; 
   background-position:50% 50%;"
}


table#protokolltabelle { padding: 0; width: 100%; }
table#protokolltabelle td {padding: 4px 6px; font-size: 11px; word-wrap: anywhere;}
table#protokolltabelle th {background: blue; color: white; font-size: 11px; font-weight: bold; padding: 4px 4px;}
table#protokolltabelle tr:nth-child(even){ background: #8888FF; color: black;}
table#protokolltabelle tr:nth-child(odd){ background: #A8A8FF; color: black;}
table#protokolltabelle tr:hover{ cursor: pointer; background-color: blue; color: white;}

/* Checkboxdesign */
.einaus, .janein {
  width: 80px;
  height: 24px;
  background: /* #c5c5c5 */ #feeee0;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); 
}
.einaus:after, .janein:after  {
  content: 'AUS';
  color: red;
  position: absolute;
  right: 10px;
  z-index: 0;
  font: 12px/24px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.janein:after  { content: 'NEIN'; }


.einaus:before, .janein:before  {
	content: 'EIN';
	color: #063;
	position: absolute;
	left: 10px;
	z-index: 0;
	font: 12px/26px Arial, sans-serif;
	font-weight: bold;
}
.janein:before  {
	content: 'JA';
}
.einaus label, .janein label  {
  display: block;
  width: 34px;
  height: 18px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
/*  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3); 
}
.einaus input[type=checkbox], .janein input[type=checkbox] {
  visibility: hidden;
}
.einaus input[type=checkbox]:checked + label,
.janein input[type=checkbox]:checked + label {
  left: 43px;
}


/* Stylen von Radiobuttons
   alte Darstellung ausschalten 
   Neue Syntax
   <div class="radiocontainer">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
   </div>
*/
.radiocontainer input[type="radio"] {
  display: none;
}

.radiocontainer label {
  position: relative;
}

.radiocontainer span::before,
.radiocontainer span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.radiocontainer span.radio:hover {
  cursor: pointer;1
}
.radiocontainer span.radio::before {
  left: 4px;
  width: 45px;
  height: 21px;
  background-color: #cdcedc;  /* Hintergrunf */
  border-radius: 50px;
}
.radiocontainer span.radio::after {
  left: +29px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #8f99a7;   /* Zustand AUS */
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: 7px;
  background-color: #00cc00;   /* Zustand EIN */
}
/* Stylen von Radiobuttons Ende */





/* .sp_wrapper .sp_table table { table-layout: fixed; } */

.sp_wrapper .sp_table thead th {
  cursor: pointer;
  background-color: #fff;
}

.sp_wrapper .sp_table .sp_sorted_asc {
  background-image: url("../images/down-arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
}

.sp_wrapper .sp_table .sp_sorted_desc {
  background-image: url("../images/up-arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
}

.sp_wrapper .sp_navigator .sp_next, .sp_wrapper .sp_navigator .sp_previous {
  margin-left: 5px;
  margin-right: 5px;
}



/* DRUCKAUSGABE FUER DAS HANDBUCH */
@media print {
.screenonly { display: none; }
}


/* Tabellendesign für die Blackwhite E-Mailliste */
div#blackwhitediv{
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

table.tabellendesign, table.terminsuchergebnis {
  width: 95%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #4427f4;
  border-style: solid;  
}

table.tabellendesign td, table.tabellendesign th, table.terminsuchergebnis td, table.terminsuchergebnis th  {
  border-width: 2px;
  border-color: #4427f4;
  border-style: solid;
  padding: 3px;
}

td.mailadresse.ng-binding{padding-left: 10px;}

table.tabellendesign td, table.terminsuchergebnis td{ color: black;}
table.tabellendesign th, table.terminsuchergebnis th { color: white; background-color: #4427f4!important;}

table.terminsuchergebnis td, table.terminsuchergebnis th { font-size: 12px;}

/*
table.tabellendesign tr:nth-child(even) {
  background-color: transparent;
}

table.tabellendesign tr:nth-child(odd) {
  background-color: #e3e6fd;
}
*/
img.deleteimage{width: 28px;}
img.editimage{width: 28px;}

td.center{text-align: center;}

.hoverpointer:hover{cursor: pointer;}

.hovercolor tr:hover td{background-color: #ced2fb!important;}

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition: 10.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}


div#whitelisteeditlayer, div.whitelisteeditlayer{ border: 1px dashed blue; margin: 10px 0px 10px 0px; width: 95%; padding: 10px 0px 30px 0px; text-align: center;}
div.whitelisteeditlayer2{ border: nonw; margin: 0px 0px 0px 0px; width: 95%; padding: 0px 0px 0px 0px; text-align: center;}

div#whitelisteeditlayer h2{ margin-bottom: 20px;}


/* Wartefenster */
div#bittewarten{
	height: 100%!important;
	min-width: 100%!important;
	min-height: 100%!important;
	width: 100%!important;
	position: fixed;
	left: 0px;
	top: 0px;
	display: flex; 
	z-index: 9999;
	background-color: blue;
    opacity:0.6;
	align-items: center;
    justify-content: center;
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* ===========================================================
 * CHECKBOX-Styling für Terminsuchergebnisseite *
 * Pseudo element for check styling 
   =========================================================== */
.terminsuchergebnis[type=checkbox] {
  width: 2rem;
  height: 2rem;
  color: dodgerblue;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: background 300ms;
  cursor: pointer;
}


.terminsuchergebnis[type=checkbox]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}


.terminsuchergebnis input[type=checkbox]:hover{
    cursor: pointer;
}

/* Checked */

.terminsuchergebnis[type=checkbox]:checked {
  background-color: currentcolor;
}

.terminsuchergebnis[type=checkbox]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


/* Disabled */

.terminsuchergebnis[type=checkbox]:disabled {
  background-color: #CCD3D8;
  opacity: 0.84;
  cursor: not-allowed;
}


/* IE */

.terminsuchergebnis[type=checkbox]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}

.terminsuchergebnis[type=checkbox]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}

img.verborgenimage{
	display: inline;
	max-width: 18px;
}

/* Abwesenheiten-Tabelle */
td.tabellenzelle.dirty, span.anwesenheitdirty{background-color: grey;}
td.tabellenzelle.abwesend, span.abwesenheit{background-color: red;}
span.teilabwesenheitdirty{background-color:#ef9735;}
td.tabellenzelle.teilabwesend, span.teilabwesenheit{background-color: #ff8000;}
td.tabellenzelle.dirty.abwesend, span.abwesenheitdirty{background-color: #aa0000;}

span.anwesenheit, span.anwesenheitdirty, span.abwesenheit, span.abwesenheitdirty, span.teilabwesenheit, span.teilabwesenheitdirty{
	border: 1px solid #333;
	min-width: 2rem;
	height: 2rem;
}
div.inlinediv{
	display:inline-block;
}
p.absatz{ display: block; }




/* Login-Seite */
		.cardcontainer {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

		.card {
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #ffffff;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
			padding: 30px;
			width: 50%;
		}

		.card img {
			margin-right: 20px;
			height: 80px;
		}

		.card h2 {
			margin-top: 0;
			margin-bottom: 20px;
			font-size: 24px;
		}

.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.input-row label {
  width: 80px;
  margin-right: 16px;
}

.input-row input {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
}

		.btn-login {
			background-color: #4CAF50;
			color: white;
			padding: 10px 16px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 16px;
			margin-top: 10px;
			margin-bottom: 5px;
			transition: all 0.3s ease-in-out;
		}

		.btn-login:hover {
			background-color: #3e8e41;
		}
		
   #passwortlink {
	   font-style: italic; 
	   font-size: 9px;		
	   margin-left: 40px;
   }
   
   .passwortvergessen { display: none; }
   
   
	/* Rotation des Schlüssels */
	@keyframes rotation {
		0% {
			rotate: var(--axis) 0;
		}
		20% {
			rotate: var(--axis) 0;
		}
		35% {
			rotate: var(--axis) 180deg;
		}
		100% {
			rotate: var(--axis) 180deg;
		}
	}
   

   img#loginlogo{
	   --axis: y;  /* Rotationsachse als Variable */
	   animation: rotation 15s ease infinite alternate;
   }   
/* Login-Seite Ende */

/* Tabellennavigation bei Einzelabwesenheiten */
div#tabellennavigation
{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
}


/* Video-Tutorials */
.videoanleitungsheader{font-size: 12pt; font-weight: bold; margin-top: 0px; display:block; padding: 0; margin-bottom: 10px;}
ul.ohneaufzaehlungspunkt{list-style: none;}
.videotutorialbeschreibung{margin-top: 10px; margin-bottom: 20px; font-size: 12px; display:block; padding: 0;}



/* Radio-Buttons bei Terminartauswahl im Adminpanel */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.radio-option {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  padding: 0.35rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.radio-option:hover {
  background-color: #e0f0ff;
}

.radio-option input[type="radio"] {
  margin-right: 0.75rem;
  accent-color: #007bff;
}

label.radio-option {
  font-size: 1rem;
  color: #222;
  cursor: pointer;
}