/* prettier-ignore */
/*# sourceMappingURL=user.css.map */

:root {
    --ews-color: rgb(0, 128, 67); /* grün */
    --it-color: rgb(8, 134, 192); /* blau */
    --technik-color: rgb(91, 34, 129); /* lila */
    --kunst-color: rgb(223, 0, 125); /* magenta */
    --sport-color: rgb(239, 113, 2); /* orange */
    --sonstiges-color: rgb(231, 178, 71); /* sonstiges */

    --ews-color-light: rgba(0, 128, 67, 0.4); /* 70% Opazität */
    --it-color-light: rgba(8, 134, 192, 0.4); /* 70% Opazität */
    --technik-color-light: rgba(91, 34, 129, 0.4); /* 70% Opazität */
    --kunst-color-light: rgba(223, 0, 125, 0.4); /* 70% Opazität */
    --sport-color-light: rgba(239, 113, 2, 0.4); /* 70% Opazität */
    --sonstiges-color-light: rgba(231, 178, 71, 0.4); /* 70% Opazität */
	--danger-color-light: rgba(236, 31, 0, 0.4);
	
	/* nachfolgende "light-hex"-Farben sind extrahiert aus Screenshot von "btn ews/it...-color-light"-Buttons */
    --ews-color-light-hex: rgba(147, 199, 177);
    --it-color-light-hex: rgba(150, 202, 227);
    --technik-color-light-hex: rgba(183,162,202);
    --kunst-color-light-hex: rgba(236, 148, 200);
    --sport-color-light-hex: rgba(243, 193, 151);
    --sonstiges-color-light-hex: rgba(239, 219, 178);
	--danger-color-light-hex: rgba(247, 165, 153);
}


/* -------------------------------------------------------------------------- */
/*                               eigene Farben                                */
/* -------------------------------------------------------------------------- */

.text-ews {
	color: var(--ews-color);
}
.text-it {
	color: var(--it-color); /* Textfarbe */
}
.text-technik {
	color: var(--technik-color); /* Textfarbe */
}
.text-kunst {
	color: var(--kunst-color); /* Textfarbe */
}
.text-sport {
	color: var(--sport-color); /* Textfarbe */
}
.text-sonstiges {
	color: var(--sonstiges-color); /* Textfarbe */
}
.text-white {
	color: rgba(255, 255, 255);
}
.text-black {
	color: rgba(0, 0, 0);
}



.link-ews {
	color: var(--ews-color); /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: ; /* Fettdruck */
}
.link-ews:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.link-it {
	color: var(--it-color); /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: ; /* Fettdruck */
}
.link-it:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.link-technik {
	color: var(--technik-color); /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: ; /* Fettdruck */
}
.link-technik:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.link-kunst {
	color: var(--kunst-color); /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: ; /* Fettdruck */
}
.link-kunst:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.link-sport {
	color: var(--sport-color); /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: ; /* Fettdruck */
}
.link-sport:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.link-sonstiges {
	color: var(--sonstiges-color); /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: ; /* Fettdruck */
}
.link-sonstiges:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.link-white {
	color: #ffffff; /* Textfarbe */
	text-decoration: none; /* Unterstreichung entfernen */
	font-weight: bold; /* Fettdruck */
}
.link-white:hover {
	text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.border-ews {
  --phoenix-border-opacity: 1;
  border-color: var(--ews-color) !important;
}

.text-bg-ews {
  color: #ffffff !important;
  background-color: var(--ews-color) !important;
}

.border-it {
  --phoenix-border-opacity: 1;
  border-color: var(--it-color) !important;
}

.text-bg-it {
  color: #fff !important;
  background-color: var(--it-color) !important;
}

.border-technik {
  --phoenix-border-opacity: 1;
  border-color: var(--technik-color) !important;
}

.text-bg-technik {
  color: #fff !important;
  background-color: var(--technik-color) !important;
}

.border-kunst {
  --phoenix-border-opacity: 1;
  border-color: var(--kunst-color) !important;
}

.text-bg-kunst {
  color: #fff !important;
  background-color: var(--kunst-color) !important;
}

.border-sport {
  --phoenix-border-opacity: 1;
  border-color: var(--sport-color) !important;
}

.text-bg-sport {
  color: #fff !important;
  background-color: var(--sport-color) !important;
}

.border-sonstiges {
  --phoenix-border-opacity: 1;
  border-color: var(--sonstiges-color) !important;
}

.text-bg-sonstiges {
  color: #ffffff !important;
  background-color: var(--sonstiges-color) !important;
}

/* Light-Hintergrund */
.text-bg-light-ews {
  color: #ffffff !important;
  background-color: var(--ews-color-light) !important;
}

.text-bg-light-it {
  color: #fff !important;
  background-color: var(--it-color-light) !important;
}

.text-bg-light-technik {
  color: #fff !important;
  background-color: var(--technik-color-light) !important;
}

.text-bg-light-kunst {
  color: #fff !important;
  background-color: var(--kunst-color-light) !important;
}

.text-bg-light-sport {
  color: #fff !important;
  background-color: var(--sport-color-light) !important;
}

.text-bg-light-sonstiges {
  color: #fff !important;
  background-color: var(--sonstiges-color-light) !important;
}

/* Light Hintergrund Ende */

/* Light-Hintergrund-Hover */
.text-bg-light-ews:hover {
  color: #ffffff !important;
  background-color: var(--ews-color) !important;
  text-decoration: none !important;
}

.text-bg-light-it:hover {
  color: #fff !important;
  background-color: var(--it-color) !important;
  text-decoration: none !important;
}

.text-bg-light-technik:hover {
  color: #fff !important;
  background-color: var(--technik-color) !important;
  text-decoration: none !important;
}

.text-bg-light-kunst:hover {
  color: #fff !important;
  background-color: var(--kunst-color) !important;
  text-decoration: none !important;
}

.text-bg-light-sport:hover {
  color: #fff !important;
  background-color: var(--sport-color) !important;
  text-decoration: none !important;
}

.text-bg-light-sonstiges:hover {
  color: #fff !important;
  background-color: var(--sonstiges-color) !important;
  text-decoration: none !important;
}

/* Light Hintergrund-Hover Ende */


/* Light-Hintergrund - OHNE HOVER!!!! */

.text-bg-nh-light-ews {
  color: #ffffff !important;
  background-color: var(--ews-color-light-hex) !important;
}

.text-bg-nh-light-it {
  color: #fff !important;
  background-color: var(--it-color-light-hex) !important;
}

.text-bg-nh-light-technik {
  color: #fff !important;
  background-color: var(--technik-color-light-hex) !important;
}

.text-bg-nh-light-kunst {
  color: #fff !important;
  background-color: var(--kunst-color-light-hex) !important;
}

.text-bg-nh-light-sport {
  color: #fff !important;
  background-color: var(--sport-color-light-hex) !important;
}

.text-bg-nh-light-sonstiges {
  color: #fff !important;
  background-color: var(--sonstiges-color-light-hex) !important;
}

.text-bg-nh-light-danger {
  color: #fff !important;
  background-color: var(--danger-color-light-hex) !important;
}

/* Ende Light-Hintergrund - OHNE HOVER!!!! */



.table-ews {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--ews-color); /* d7e3ff*/
    font-weight: bold;
}

.table-it {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--it-color); /* d7e3ff*/
    font-weight: bold;
}

.table-technik {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--technik-color); /* d7e3ff*/
    font-weight: bold;
}

.table-kunst {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--kunst-color); /* d7e3ff*/
    font-weight: bold;
}

.table-sport {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--sport-color); /* d7e3ff*/
    font-weight: bold;
}

.table-sonstiges {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--sonstiges-color);
    font-weight: bold;
}

.table-ews-light {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--ews-color-light); /* d7e3ff*/
    font-weight: bold;
}

.table-it-light {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--it-color-light); /* d7e3ff*/
    font-weight: bold;
}

.table-technik-light {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--technik-color-light); /* d7e3ff*/
    font-weight: bold;
}

.table-kunst-light {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--kunst-color-light); /* d7e3ff*/
    font-weight: bold;
}

.table-sport-light {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--sport-color-light); /* d7e3ff*/
    font-weight: bold;
}

.table-sonstiges-light {
  --phoenix-table-color: #fff;
  --phoenix-table-bg: var(--sonstiges-color-light);
    font-weight: bold;
}

/*
Farben für table-hover wie folgt erzeugen:
- Ausgangsfarbe für das jeweilige Fach nehmen (mit Pipette aus Logo)
- Transparenz der Farbe auf 125 setzen
- neue Ebene einfügen
- Ebene mit neu erzeugter Farbe füllen
- Screenshot machen
- in neues bild einfügen
- hellere der beiden "kariert"-Farben mit Pipette aufnehmen
- HEX-Code verwenden
*/

.table-hover-ews > tbody > tr:hover > * {
 --phoenix-table-color-state: #ffffff;
 --phoenix-table-bg-state: var(--ews-color-light);
}

.table-hover-it > tbody > tr:hover > * {
 --phoenix-table-color-state: #ffffff;
 --phoenix-table-bg-state: var(--it-color-light);
}

.table-hover-technik > tbody > tr:hover > * {
 --phoenix-table-color-state: #ffffff;
 --phoenix-table-bg-state: var(--technik-color-light);
}

.table-hover-kunst > tbody > tr:hover > * {
 --phoenix-table-color-state: #ffffff;
 --phoenix-table-bg-state: var(--kunst-color-light);
}

.table-hover-sport > tbody > tr:hover > * {
 --phoenix-table-color-state: #ffffff;
 --phoenix-table-bg-state: var(--sport-color-light);
}

.table-hover-sonstiges > tbody > tr:hover > * {
 --phoenix-table-color-state: #ffffff;
 --phoenix-table-bg-state: var(--sonstiges-color-light);
}

/* Neue Klasse für das Ausschließen vom Hover-Effekt */
.table-hover-ews > tbody > tr.no-hover:hover > *,
.table-hover-it > tbody > tr.no-hover:hover > *,
.table-hover-technik > tbody > tr.no-hover:hover > *,
.table-hover-kunst > tbody > tr.no-hover:hover > *,
.table-hover-sport > tbody > tr.no-hover:hover > * {
  --phoenix-table-color-state: initial;
  --phoenix-table-bg-state: initial;
}


/* ---------------- ALERTS ----------------- */
.alert-ews {
	background-color: var(--ews-color); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--ews-color); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}
.alert-ews-light {
	background-color: var(--ews-color-light); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--ews-color-light); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it-light .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}

.alert-it {
	background-color: var(--it-color); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--it-color); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}
.alert-it-light {
	background-color: var(--it-color-light); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--it-color-light); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it-light .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}

.alert-technik {
	background-color: var(--technik-color); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--technik-color); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}
.alert-technik-light {
	background-color: var(--technik-color-light); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--technik-color-light); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it-light .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}

.alert-kunst {
	background-color: var(--kunst-color); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--kunst-color); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}
.alert-kunst-light {
	background-color: var(--kunst-color-light); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--kunst-color-light); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it-light .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}

.alert-sport {
	background-color: var(--sport-color); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--sport-color); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}
.alert-sport-light {
	background-color: var(--sport-color-light); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--sport-color-light); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it-light .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}

.alert-sonstiges {
	background-color: var(--sonstiges-color); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--sonstiges-color); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}
.alert-sonstiges-light {
	background-color: var(--sonstiges-color-light); /* Hintergrund */
	color: #333; /* Dunkler Text */
	border: 2px solid var(--sonstiges-color-light); /* Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
} .alert-it-light .btn-close {
	color: #333; /* Dunkle Farbe für den Schließen-Knopf */
}




.no-hover:hover, .no-hover:focus {
	background-color: inherit;
	color:inherit;
}



        .highlight {
            background-color: var(--ews-color-light); /* Hellgrün bei Table-Hover als Beispiel */
        }
	/* Erweiterung der Highlight-Klasse für den Druckmodus */
	@media print {
		
		/* Hintergrund beim Ausdruck transparent*/
		body {
			background-color: white !important;
		}

		
	    .highlight {
	        background-color: var(--ews-color-light); /* Hellgrün auch beim Drucken */
	        /* Sie können zusätzliche Stile hinzufügen, die nur beim Drucken gelten sollen */
	    }
	}
		
        /* Stil für die Scrollbar (funktioniert in WebKit-Browsern wie Chrome und Safari) */
        ::-webkit-scrollbar {
            width: 6px; /* Breite der Scrollbar */
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1; /* Hintergrundfarbe des Scrollbar-Tracks */
        }

        ::-webkit-scrollbar-thumb {
            background: #888; /* Farbe des Scrollbar-Handles */
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555; /* Farbe des Scrollbar-Handles beim Hover */
        }


.flexrow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.flexrow > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
}

/* Schriftart auf Courier New setzen */
.font-classic {
    font-family: 'Courier New', Courier, monospace;
}

/* Schriftart auf Courier New setzen */
.font-classic-sm {
    font-family: 'Courier New', Courier, monospace;
	font-size:10pt;
}

/* Schriftart auf Courier New setzen */
.font-classic-ssm {
    font-family: 'Courier New', Courier, monospace;
	font-size:8pt;
}

.text-fett {
	font-weight: bold;
}

.text-rot {
	color: red;
}

.text-fett-rot {
	font-weight: bold;
	color: red;
}

.text-bg-gelb {
	background-color: yellow;
}

/* Buttons wie normalen Text darstellen (z. B. für Absenzeinträge */
.text-button {
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
	margin: 0;
	text-decoration: none;
}
.text-button:hover {
	text-decoration: none; /* Optional, um die Unterstreichung beim Hover zu entfernen */
}

/* Logos beim Ausdruck oben rechts (Einbindung der Grafik erfolgt in der Navigation!!!) */
        .logo-top-right {
            position: absolute;
            top: 0;
            right: 0;
            margin: 10px;
            width: 150px;
            height: 60px;
            z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */
        }
		

		




/* 	Userfotos rund darstellen */
	
	/* Aufbau und Verwendung: <div class="circle-container"><div class="circle-image"><img class="circle-image" src="bild.jpg" /></div></div> */

	/* <div class="circle-container"> - Container mit der Größe 200x200 und je 50% abgerundeten Ecken -> rund */
	.circle-container {
	  width: 200px;
	  height: 200px;
	  border-radius: 50%;
	  overflow: hidden;
	}
	/* <div class="circle-image"> - Container der das Bild in den Circle einfügt */
	.circle-image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	/* <img class="circle-image"> - Klasse für das als Kreis darzustellende Bild */
	.circle-image img {
	  max-width: 100%;
	  max-height: 100%;
	}
/* 	ENDE - Userfotos rund darstellen */




/* Loader */

	/* Verwendung: <div id="loader"></div> --> direkt nach <body>-Tag */

	/* Center the loader */
	#loader {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  z-index: 1;
	  width: 120px;
	  height: 120px;
	  margin: -76px 0 0 -76px;
	  border: 16px solid #f3f3f3;
	  border-radius: 50%;
	  border-top: 16px solid #008143;
	  -webkit-animation: spin 2s linear infinite;
	  animation: spin 2s linear infinite;
	}

	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}

	/* Add animation to "page content" */
	.animate-bottom {
	  position: relative;
	  -webkit-animation-name: animatebottom;
	  -webkit-animation-duration: 1s;
	  animation-name: animatebottom;
	  animation-duration: 1s
	}

	@-webkit-keyframes animatebottom {
	  from { bottom:-100px; opacity:0 } 
	  to { bottom:0px; opacity:1 }
	}

	@keyframes animatebottom { 
	  from{ bottom:-100px; opacity:0 } 
	  to{ bottom:0; opacity:1 }
	}

	#seiteninhalt {
	  display: none;
	}

/* ENDE - Loader */