/* Formatierungen im hellen Bildschirmmodus */
@media screen and (prefers-color-scheme: light) {

	/* Root-Element wird formatiert */
	html {
		--hw-color: #000000;
		--hw-bgcolor: #ffffff;
		--hw-contbg: #f2f9ff;
		--hw-dark: #004272;
		--hw-light: #0077cc;
		--hw-error: #990000;
		--hw-linecol: #aaaaaa;
		--hw-greyed: #f5f5f5;
	}

}

/* Formatierungen im dunklen Bildschirmmodus */
@media screen and (prefers-color-scheme: dark) {

	/* Root-Element wird formatiert */
	html {
		--hw-color: #dddddd;
		--hw-bgcolor: #221100;
		--hw-contbg: #004272;
		--hw-dark: #ddccbb;
		--hw-light: #ddeeff;
		--hw-error: #ff7777;
		--hw-linecol: #776655;
		--hw-greyed: #443322;
	}

}

/* Formatierungen für alle Bildschirmansichten */
@media screen {

	/* --- BODY-BEREICH MIT VARIABLENDEFINITION --- */

	/* Body-Element wird formatiert */
	.hw-top {
		color: var(--hw-color);
		margin: 0;
		padding: 0;
		font-family: AsapWeb,Arial,Helvetica,sans-serif;
		background-color: var(--hw-bgcolor);
		display: grid;
		width: 100%;
		min-height: 100vh;
		height: 100vh;
		overflow: auto;
	}

	/* Keine Zeilenumbrüche */
	.hw-nowrap {
		white-space: nowrap;
	}
	
	/* --- FEHLER-, WARNUNGS- UND HINWEISFELDER --- */

	/* Formatierung für Hinweis-, Warnungs- und Fehlerfelder wird festgelegt */
	.hw-hinweisfeld, .hw-warnungfeld, .hw-fehlerfeld {
		padding: .5rem .75rem;
		margin-bottom: 1rem;
		background-color: var(--hw-bgcolor);
		box-sizing: border-box;
		border-radius: .5rem;
		border: 1px solid var(--hw-linecol);
		width: -moz-fit-content;
		width: fit-content;
	}
	
	/* Formatierung für Hinweis-, Warnungs- und Fehlerfelder wird festgelegt */
	.hw-hinweisfeld::before, .hw-warnungfeld::before, .hw-fehlerfeld::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Abweichende Formatierung für Hinweisfeld */
	.hw-hinweisfeld,
	.hw-hinweis {
		color: var(--hw-dark);
	}

	/* Abweichende Formatierung für Warnungsfeld */
	.hw-warnungfeld,
	.hw-warnung {
		color: var(--hw-light);
	}

	/* Abweichende Formatierung für Fehlerfeld */
	.hw-fehlerfeld,
	.hw-fehler {
		color: var(--hw-error);
	}

	/* --- FORMULARFELDER --- */

	/* Standardeinstellungen für Formulare */
	form {
		font-size: 0;
		display: inline;
	}
	
	/* Standardformatierungen für Formularelemente */
	button,
	input,
	select,
	textarea {
		font-family: AsapWeb,Arial,Helvetica,sans-serif;
		outline: none;
		border-radius: 0;
		box-sizing: border-box;
	}
	
	/* Deaktivierte Buttons werden entsprechend dargestellt */
	button:disabled {
		background-color: var(--hw-greyed);
		color: var(--hw-linecol);
	}

	/* Deaktivierte Formularfelder werden entsprechend dargestellt */
	input:disabled,
	select:disabled {
		background-color: var(--hw-greyed);
		color: var(--hw-linecol);
		border: 1px solid var(--hw-linecol);
		opacity: 1;
	}

	/* Standardformatierungen für Formularelemente */
	input,
	select,
	textarea {
		background-color: var(--hw-bgcolor);
		color: var(--hw-dark);
		padding: .2rem .3rem;
		border: 1px solid var(--hw-dark);
	}

	/* Deaktivierte oder abgelaufene Elemente grau darstellen */
	.hw-disabled,
	.hw-input-checkbox + .hw-form-label.hw-disabled,
	.hw-input-radio + .hw-form-label.hw-disabled {
		color: var(--hw-linecol);
	}

	/* Standard-Button mit Icon und Text */
	.hw-button-imagetext,
	.hw-label-imagetext {
		background-color: var(--hw-contbg);
		color: var(--hw-dark);
		border: 1px solid var(--hw-linecol);
		border-radius: .5rem;
		padding: .75rem 1rem;
	}

	/* Inhaltsformatierung des Standard-Buttons mit Icon und Text */
	.hw-button-imagetext-content,
	.hw-label-imagetext-content {
		display: inline-block;
		white-space: nowrap;
	}

	/* Inhaltsformatierung des Standard-Buttons mit Icon und Text */
	.hw-button-imagetext-content::before,
	.hw-label-imagetext-content::before,
	.hw-button-imagelink-content::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagesmall {
		background-color: var(--hw-contbg);
		font-size: 0;
		width: 2rem;
		height: 1.5rem;
		padding: 0;
		border: 1px solid var(--hw-linecol);
		border-radius: .25rem;
		color: var(--hw-dark);
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagesmall::before {
		font-family: 'AwesomeWeb';
		font-size: 1rem;
		text-align: center;
		font-style: normal;
	}

	/* Button in Linkform mit Icon */
	.hw-button-imagelink {
		border: 0;
		padding: 0;
		background-color: transparent;
		text-align: left;
	}

	/* Inhaltsformatierung des Standard-Buttons mit Icon und Text */
	.hw-button-imagelink-content {
		display: inline-block;
		text-decoration: underline;
		color: var(--hw-dark);
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagebig {
		background-color: transparent;
		font-size: 0;
		width: 2.4rem;
		height: 2.4rem;
		border: 0;
	}

	/* Container für Eingabemasken */
	.hw-form-container {
		width: -moz-fit-content;
		width: fit-content;
		padding: 1rem;
		margin-bottom: 1rem;
		border-radius: .5rem;
		border: 1px solid var(--hw-linecol);
		background-color: var(--hw-bgcolor);
	}

	/* Formular als Grid-Layout anstelle bisheriger Formlines für bessere Breitenverwaltung */
	.hw-form-grid {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: 1rem;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-form-label {
		box-sizing: border-box;
		align-self: self-start;
		justify-self: self-start;
		white-space: nowrap;
		grid-column-start: 1;
		grid-column-end: 2;
		padding-top: .2rem;
		padding-bottom: .2rem;
		border-top: 1px solid transparent;
	}

	/* Formatierung für Formularzeile mit Buttons im Eingabeblock */
	.hw-buttonline {
		margin-bottom: -.5rem;
		grid-column-start: 1;
		grid-column-end: 3;
	}

	/* Formatierung für Formularzeile mit Buttons im Eingabeblock */
	.hw-buttonline button {
		margin-right: 1rem;
		margin-bottom: .5rem;
	}

	/* Formatierung für Formularzeile mit Buttons im Eingabeblock */
	.hw-buttonline button:last-child {
		margin-right: 0;
	}
	
	/* Formatierung von Eingabefeldern in Formularen */
	.hw-input-text,
	.hw-input-value,
	.hw-input-select,
	.hw-input-datum,
	.hw-input-datumzeit,
	.hw-input-zeit {
		justify-self: self-start;
	}

	/* Formatierung von Eingabefeldern in Formularen */
	.hw-input-datum,
	.hw-input-datumzeit {
		text-align: center;
	}

	/* Mehrzeiliges Eingabefeld wird formatiert */
	.hw-input-textarea,
	.hw-input-file {
		grid-column-start: 1;
		grid-column-end: 3;
		justify-self: self-start;
	}

	/* Formularfeld für Import-Daten */
	.hw-input-importdata {
		font-family: monospace;
	}
	
	/* Formularfeld für Checkboxen */
	.hw-input-checkbox,
	.hw-input-radio {
		width: 0;
		height: 0;
		display: inline;
		margin: 0;
		padding: 0;
	}

	/* Ganzseitige Informationen nach einer Checkbox werden verborgen */
	.hw-input-checkbox.hw-hidden ~ .hw-fullerror {
		display: none;
	}

	/* Wenn die entsprechende Information angezeigt werden soll */
	.hw-input-checkbox.hw-hidden:checked ~ .hw-fullerror {
		display: flex;
	}

	/* Checkbox-Label positionieren */
	.hw-input-checkbox + .hw-form-label,
	.hw-input-radio + .hw-form-label {
		vertical-align: middle;
		margin-right: 0;
		color: var(--hw-dark);
	}

	/* Checkbox-Label positionieren */
	.hw-input-checkbox + .hw-form-label::before,
	.hw-input-radio + .hw-form-label::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		margin-right: .5rem;
		text-align: center;
	}
	
	/* Sonderform für Radiobuttons oder Checkboxen */
	.hw-input-radiolist,
	.hw-input-checkboxlist {
		border: 1px solid var(--hw-dark);
		margin: 0;
		max-height: 15rem;
		min-width: 15rem;
		max-width: fit-content;
		box-sizing: border-box;
		overflow-y: auto;
		padding: 0;
	}

	/* Bei ganzzeiligen Formularfeldern wird die Größe gestreckt */
	.hw-formline-text .hw-input-radiolist,
	.hw-formline-text .hw-input-checkboxlist {
		max-width: none;
	}

	/* Neue Zeile für Auswahllisten (Radio oder Checkbox) */
	.hw-input-list-row {
		display: grid;
		grid-template-columns: 0 2.2rem auto;
		border-bottom: 1px solid var(--hw-linecol);
	}

	/* Letzte Zeile für Auswahllisten (Radio oder Checkbox) */
	.hw-input-list-row:last-child {
		border-bottom: 0;
	}

	/* Inputs in Auswahllisten (Radio oder Checkbox) verbergen */
	.hw-input-list-input {
		display: inline;
		width: 0;
		height: 0;
	}

	/* Labels für eigentliche Auswahlbuttons (Radio oder Checkbox) */
	.hw-input-list-checker {
		padding: .5rem;
		display: block;
	}

	/* Labels für eigentliche Auswahlbuttons (Radio oder Checkbox) */
	.hw-input-list-checker::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		margin-right: .5rem;
		text-align: center;
	}
	
	/* Labels für eigentliche Auswahlbuttons (Radio oder Checkbox) */
	.hw-input-list-label {
		padding: .5rem .75rem .5rem 0;
	}

	/* Ausgewählter Listeneintrag wird hervorgehoben */
	.hw-input-list-input:checked ~ .hw-input-list-checker,
	.hw-input-list-input:checked ~ .hw-input-list-label {
		color: var(--hw-dark);
	}

	/* Überschriftenzeile in Eingabemaske */
	.hw-formline-header {
		font-weight: bold;
		color: var(--hw-dark);
	}
	
	/* Textzeilen in Eingabemaske */
	.hw-formline-header,
	.hw-formline-text,
	.hw-formline-hinweis,
	.hw-formline-check,
	.hw-formline-radio {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	/* Hinweiszeile in Eingabemaske */
	.hw-formline-hinweis {
		font-style: italic;
		color: var(--hw-dark);
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-firsthalf {
		grid-column-start: 1;
		grid-column-end: 2;
		justify-self: self-start;
		align-self: center;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-secondhalf {
		grid-column-start: 2;
		grid-column-end: 3;
		justify-self: self-start;
		align-self: center;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-rechtegrid {
		grid-column-start: 1;
		grid-column-end: 3;
		justify-self: self-start;
		align-self: center;
		display: grid;
		grid-template-columns: auto auto auto auto auto;
		column-gap: 1rem;
		row-gap: .5rem;
		align-items: center;
	}

	/* Überschriften in einzelnen Gitterzellen positionieren */
	.hw-formline-rechtegrid .hw-formline-header {
		grid-column-start: auto;
		grid-column-end: auto;
		padding: .5rem 0;
	}

	/* Überschriften in einzelnen Gitterzellen positionieren */
	.hw-formline-rechtegrid.hw-trenner-top {
		padding-top: .5rem;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung */
	.hw-formline-tabgrid {
		text-align: left;
		width: -moz-fit-content;
		width: fit-content;
		padding: 0;
		display: grid;
		grid-template-columns: auto auto;
		border-radius: .5rem;
		border: 1px solid var(--hw-linecol);
		margin: 0;
		justify-self: center;
		grid-column-start: 1;
		grid-column-end: 3;
		overflow: hidden;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung im Vollbildmodus */
	.hw-formline-tabgrid.hw-fullhinweis {
		border-radius: 0;
		border-color: var(--hw-dark);
	}

	/* Mehrere Gruppierte Elemente in einer Formularzeile */
	.hw-formline-multiple {
		display: inline-block;
	}

	/* Formatierung von Feldern bei Eingabefehlern */
	.hw-einfehler {
		color: var(--hw-error);
		border: 1px solid var(--hw-error);
	}

	/* Formatierung von Labels bei Eingabefehlern */
	.hw-labfehler {
		color: var(--hw-error);
		padding-right: 1.6rem;
	}

	/* Formatierung von Labels bei Eingabefehlern */
	.hw-labfehler::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Trennlinie im Formular über dem aktuellen Eintrag */
	.hw-trenner-top {
		border-top: 1px solid var(--hw-linecol);
		padding-top: 1rem;
	}

	/* Trennlinie im Formular unter dem aktuellen Eintrag */
	.hw-trenner-bottom {
		border-bottom: 1px solid var(--hw-linecol);
		padding-bottom: 1rem;
	}
	
	/* --- ZEBRA DATEPICKER --- */

	/* Container für ZebraDatePicker */
	.hw-formline-zebracont {
		position: absolute;
		justify-self: self-start;
	}

	/* Container für ZebraDatePicker */
	.hw-formline-zebracont .Zebra_DatePicker {
		margin-top: .25rem;
		position: absolute;
		background-color: var(--hw-contbg);
		box-shadow: 0 0 10px var(--hw-linecol);
		border-radius: .5rem;
		border: 1px solid var(--hw-linecol);
		text-align: center;
		box-sizing: border-box;
		color: var(--hw-dark);
		overflow: hidden;
		z-index: 1;
	}

	/* Container für ZebraDatePicker */
	.hw-formline-zebracont .Zebra_DatePicker.dp_hidden {
		display: none;
	}

	/* Größe der Inhaltsblöcke wird definiert */
	.hw-formline-zebracont .Zebra_DatePicker .dp_header,
	.hw-formline-zebracont .Zebra_DatePicker .dp_daypicker,
	.hw-formline-zebracont .Zebra_DatePicker .dp_monthpicker,
	.hw-formline-zebracont .Zebra_DatePicker .dp_yearpicker,
	.hw-formline-zebracont .Zebra_DatePicker .dp_timepicker,
	.hw-formline-zebracont .Zebra_DatePicker .dp_footer {
		width: 100%;
	}

	/* Hintergrundfarbe der anderen Picker wird definiert */
	.hw-formline-zebracont .Zebra_DatePicker .dp_monthpicker,
	.hw-formline-zebracont .Zebra_DatePicker .dp_yearpicker,
	.hw-formline-zebracont .Zebra_DatePicker .dp_timepicker{
		background-color: var(--hw-bgcolor);
	}

	/* Standardformtierung für Tabellenzellen im Picker */
	.hw-formline-zebracont .Zebra_DatePicker th,
	.hw-formline-zebracont .Zebra_DatePicker td {
		padding: .2rem .3rem;
		min-width: 1.2rem;
	}

	/* Überschriftsspalten werden hervorgehoben */
	.hw-formline-zebracont .Zebra_DatePicker th {
		background-color: var(--hw-bgcolor);
	}

	/* Wenn Kalenderwochen dargestellt werden, diese etwas ausgrauen */
	.hw-formline-zebracont .Zebra_DatePicker .dp_daypicker.dp_week_numbers th:first-child {
		color: var(--hw-linecol);
	}

	/* Feste Größe für vor- und zurück-Pfeile vergeben */
	.hw-formline-zebracont .Zebra_DatePicker .dp_previous,
	.hw-formline-zebracont .Zebra_DatePicker .dp_next {
		width: 1.5rem;
		font-size: 0;
	}

	/* Symboldarstellung für Kalender */
	.hw-formline-zebracont .Zebra_DatePicker .dp_view_toggler.dp_icon,
	.hw-formline-zebracont .Zebra_DatePicker .dp_view_toggler.dp_icon.dp_calendar,
	.hw-formline-zebracont .Zebra_DatePicker .dp_confirm.dp_icon {
		font-size: 0;
	}

	/* Symboldarstellung für Kalender */
	.hw-formline-zebracont .Zebra_DatePicker .dp_previous::before,
	.hw-formline-zebracont .Zebra_DatePicker .dp_next::before,
	.hw-formline-zebracont .Zebra_DatePicker .dp_view_toggler.dp_icon::before,
	.hw-formline-zebracont .Zebra_DatePicker .dp_view_toggler.dp_icon.dp_calendar::before,
	.hw-formline-zebracont .Zebra_DatePicker .dp_confirm.dp_icon::before {
		font-family: 'AwesomeWeb';
	}

	/* Symboldarstellung für Kalender */
	.hw-formline-zebracont .Zebra_DatePicker .dp_view_toggler.dp_icon::before {
		display: block;
		min-width: 3rem;
	}

	/* Tage, welche sich nicht im aktuellen Monat befinden abschwächen */
	.hw-formline-zebracont .Zebra_DatePicker .dp_not_in_month {
		background-color: var(--hw-greyed);
	}

	/* Tage, welche deaktiviert sind abschwächen */
	.hw-formline-zebracont .Zebra_DatePicker .dp_disabled {
		color: var(--hw-linecol);
	}

	/* Kopfbereich des Datepickers */
	.hw-formline-zebracont .Zebra_DatePicker .dp_header {
		border-bottom: 1px solid var(--hw-linecol);
	}
	
	/* Fußbereich des Datepickers */
	.hw-formline-zebracont .Zebra_DatePicker .dp_footer {
		border-top: 1px solid var(--hw-linecol);
	}
	
	/* Aktueller Tag wird hervorgehoben */
	.hw-formline-zebracont .Zebra_DatePicker .dp_current {
		color: var(--hw-error);
	}

	/* Ausgewählter Tag wird besonders hervorgehoben */
	.hw-formline-zebracont .Zebra_DatePicker .dp_selected {
		color: var(--hw-contbg);
		background-color: var(--hw-dark);
		text-decoration: none;
	}

	/* Uhrzeitauswahl in ZebraDatePicker formatieren */
	.hw-formline-zebracont .Zebra_DatePicker .dp_time_hours,
	.hw-formline-zebracont .Zebra_DatePicker .dp_time_minutes {
		font-size: 1.5rem;
		width: 50%;
	}

	/* Zeitseparator in ZebraDatePicker formatieren */
	.hw-formline-zebracont .Zebra_DatePicker .dp_time_separator div {
		position: relative
	}

	/* Inhalt für Zeitseparator in ZebraDatePicker definieren */
	.hw-formline-zebracont .Zebra_DatePicker .dp_time_separator div:after {
		content: ":";
		left: 100%;
		position: absolute;
	}

	/* Icon für DatePicker wird dargestellt */
	.Zebra_DatePicker_Icon {
		border: 0;
		background-color: transparent;
		font-size: 0;
		vertical-align: middle;
	}

	/* Icon für DatePicker wird dargestellt */
	.Zebra_DatePicker_Icon::before {
		font-family: 'AwesomeWeb';
		width: 2rem;
		text-align: center;
		color: var(--hw-dark);
	}

	/* Icon für DatePicker wird dargestellt */
	.Zebra_DatePicker_Icon_Wrapper .hw-input-datum,
	.Zebra_DatePicker_Icon_Wrapper .hw-input-datumzeit {
		vertical-align: middle;
	}

	/* --- SETUP --- */

	/* Formatierung für Fehlerdarstellung in Setup-Routine */
	.hw-setup-line {
		margin: 1rem;
		line-height: 1.5rem;
	}

	/* Formatierung für Masterkeys in Setup-Routine */
	.hw-setup-masterkeys {
		font-family: monospace;
		font-weight: bold;
		margin-top: .5rem;
	}

	/* Formatierung für Absatz in Setup-Routine */
	.hw-setup-absatz {
		margin-top: .5rem;
	}

	/* Button in der Setup-Routine */
	.hw-setup-button {
		margin-left: 1rem;
		margin-bottom: 1rem;
	}

	/* Abstände der Meldungsfelder in der Setup-Routine */
	.hw-setup .hw-fehlerfeld,
	.hw-setup .hw-warnungfeld,
	.hw-setup .hw-hinweisfeld {
		margin: 1rem;
	}

	/* --- LOGO-BANNER --- */

	/* Formatierung der Kopfleiste mit Logo */
	.hw-logo {
		width: 100%;
		background-color: var(--hw-dark);
		align-self: self-start;
		justify-self: stretch;
		text-align: left;
		z-index: 8000;
		box-sizing: border-box;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	/* Platzierung des Bildlogos in der Kopfleiste */
	.hw-logo-banner {
		margin: 1rem;
		font-size: 0;
		display: inline-block;
	}

	/* Platzierung der Bilddatei im Bildlogo der Kopfleiste */
	.hw-logo-bild {
		margin: 0;
		padding: 0;
	}

	/* Formatierung der Schriftzüge in der Kopfleiste */
	.hw-logo-schrift {
		margin-left: 0;
		vertical-align: top;
		display: inline-block;
		font-weight: bold;
		color: var(--hw-bgcolor);
	}

	/* --- FOOTER-LEISTE --- */

	/* Formatierung der Footerleiste mit Datum */
	.hw-datum {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		bottom: 0;
		text-align: center;
		padding: .5rem 1.5rem 0 1.5rem;
		box-sizing: border-box;
		color: var(--hw-bgcolor);
		background-color: var(--hw-dark);
		align-self: self-end;
		justify-self: center;
	}

	/* Meldung für Datenbankfehler wird platziert */
	.hw-datum-dbfehler {
		display: inline-block;
		font-weight: bold;
		margin-bottom: .5rem;
		margin-left: .5rem;
		margin-right: .5rem;
		vertical-align: baseline;
		color: var(--hw-contbg);
	}

	/* Hinweis im Datumsbereich wird platziert */
	.hw-datum-hinweis {
		display: inline-block;
		margin-bottom: .5rem;
		margin-left: .5rem;
		margin-right: .5rem;
		vertical-align: baseline;
	}

	/* Ausrichtung der Elemente im Datumsbereich wird definiert */
	.hw-datum-copy,
	.hw-datum-tag,
	.hw-datum-zeit {
		margin: 0;
		vertical-align: baseline;
		display: inline-block;
	}

	/* Abstände im Datumsbereich werden eingefügt */
	.hw-datum-copy,
	.hw-datum-tag {
		margin-right: .5rem;
	}

	/* Trennstriche werden bei der Datumsdarstellung eingefügt */
	.hw-datum-tag:before,
	.hw-datum-zeit:before {
		content: '-';
		vertical-align: baseline;
		display: inline-block;
		margin-right: .5rem;
	}

	/* Hinweisblöcke für PHP und JAVA im Datumsbereich */
	.hw-datum-php,
	.hw-datum-java {
		display: inline-block;
		font-size: 0;
	}

	/* --- LOGIN-SEITE --- */

	/* Positionierung des Login-Feldes */
	.hw-login {
		text-align: center;
		vertical-align: middle;
		margin: 1rem;
		padding: 0;
		box-sizing: border-box;
		align-self: center;
		justify-self: center;
		z-index: 10005;
	}

	/* Formular als Grid-Layout anstelle bisheriger Formlines für bessere Breitenverwaltung */
	.hw-login-grid {
		display: grid;
		grid-template-columns: auto auto;
		column-gap: 1rem;
		row-gap: 1rem;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-login-label {
		box-sizing: border-box;
		align-self: center;
		justify-self: self-end;
		white-space: nowrap;
		grid-column-start: 1;
		grid-column-end: 2;
	}

	/* Login-Formular ohne unteren Abstand */
	.hw-login .hw-form-container {
		margin-bottom: 0;
	}

	/* Passwortrücksetzung mit Abstand */
	.hw-login .hw-resetform {
		margin-top: 1rem;
		display: block;
	}
	
	/* --- MELDUNGEN --- */
	
	/* Meldestelle für Mitteilungskurzdarstellung */
	.hw-meldestelle {
		position: fixed;
		z-index: 8050;
		box-sizing: border-box;
	}
	
	/* Checkbox für Anzeige der Meldungen wird verborgen */
	.hw-meldcheck {
		display: none;
	}
	
	/* Gesammelte Fehler-, Warnungs- und Hinweismeldungen */
	.hw-meldungen {
		box-sizing: border-box;
		display: none;
	}

	/* Wenn das Mitteilungscenter aktiviert ist, wird dieses angezeigt */
	.hw-meldcheck:checked ~ .hw-meldungen {
		display: block;
	}

	/* Überschrift im Mitteilungscenter */
	.hw-meldover {
		font-weight: bold;
		margin-bottom: 1rem;
		display: inline-block;
		height: 1rem;
		overflow: visible;
	}
	
	/* Schließen-Button im Mitteilungscenter */
	.hw-meldclose {
		float: right;
		min-height: 1rem;
	}

	/* Schließen-Button im Mitteilungscenter */
	.hw-meldclose::after {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		text-align: right;
	}

	/* Meldungen müssen bei Bedarf gescrollt werden */
	.hw-meldinhalt {
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 1rem;
		max-height: calc(50vh - 4rem);
	}

	/* Letzter Eintrag in Mitteilungsliste erhält keinen Abstand nach unten */
	.hw-meldinhalt .hw-hinweisfeld:last-child,
	.hw-meldinhalt .hw-warnungfeld:last-child,
	.hw-meldinhalt .hw-fehlerfeld:last-child {
		margin-bottom: 0;
	}

	/* Meldungsblöcke in der Meldestelle werden formatiert */
	.hw-meldhinweis::before,
	.hw-meldwarnung::before,
	.hw-meldfehler::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		margin-right: .5rem;
		text-align: center;
	}
	
	/* --- HAUPT-INHALTE --- */

	/* Verborgener Inhalt */
	.hw-hidden {
		display: none;
	}

	/* Abstände von Überschriften werden angepasst */
	h1,
	h2,
	h3 {
		margin-top: 0;
		margin-bottom: 1rem;
	}
	
	/* Farbe von Links wird angepasst */
	a {
		color: var(--hw-light);
	}
	
	/* Standard-Tabellenformatierungen */
	table {
		font-family: AsapWeb,Arial,Helvetica,sans-serif;
		border-spacing: 0;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung */
	.hw-tabcont {
		background-color: var(--hw-bgcolor);
		text-align: left;
		width: -moz-fit-content;
		width: fit-content;
		padding: 0;
		border-radius: .5rem;
		border: 1px solid var(--hw-linecol);
		overflow: hidden;
	}

	/* Leere Filterbar zum Filtern von Tabellendarstellungen */
	.hw-filterbar-leer,
	.hw-seitenbar-leer {
		padding: 0;
		font-size: 0;
		background-color: var(--hw-dark);
		border-bottom: 1px solid var(--hw-linecol);
	}

	/* Filterbar zum Filtern von Tabellendarstellungen */
	.hw-filterbar,
	.hw-seitenbar {
		padding: .5rem .75rem;
		vertical-align: middle;
		font-size: 0;
		background-color: var(--hw-dark);
		border-bottom: 1px solid var(--hw-linecol);
		color: var(--hw-bgcolor);
	}
	
	/* Ausrichtung der Seitenzahlen für die aktuelle Tabelle nach rechts */
	.hw-seitenbar {
		text-align: right;
	}
	
	/* Ausrichtung von Formularfeldern korrigieren */
	.hw-filter-widget,
	.hw-seiten-widget {
		vertical-align: middle;
		margin-right: .5rem;
		display: inline-block;
	}

	/* Select-Feld für Filter verkleinern */
	input.hw-filter-widget,
	select.hw-filter-widget,
	select.hw-seiten-widget {
		padding: initial;
		border: 1px solid var(--hw-linecol);
	}

	/* Ausrichtung von Formularfeldern korrigieren */
	.hw-filter-container,
	.hw-seiten-container {
		vertical-align: middle;
		margin: 0;
		display: inline-block;
	}
	
	/* Icon für DatePicker wird dargestellt */
	.hw-filter-container .Zebra_DatePicker_Icon::before {
		color: var(--hw-contbg);
	}
	
	/* Label-Suchfeld für Filterbar formatieren */
	.hw-filter-searchlabel {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: var(--hw-contbg);
		width: 2rem;
		height: 1.5rem;
		padding: 0;
		border: 1px solid var(--hw-linecol);
		border-radius: 0.25rem;
		box-sizing: border-box;
		color: var(--hw-dark);
		text-align: center;
	}

	/* Label-Suchfeld für Filterbar formatieren */
	.hw-filter-searchlabel::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		text-align: center;
	}

	/* Auswahlfeld statt Suchfeld anzeigen */
	.hw-filter-barsearch {
		max-width: 10rem;
	}

	/* Auswahlfeld statt Suchfeld anzeigen */
	.hw-filter-searchbox:checked ~ .hw-filter-barselect,
	.hw-filter-searchbox:checked ~ .hw-filter-barinput,
	.hw-filter-searchbox ~ .hw-filter-barsearch {
		display: initial;
	}
	
	/* Auswahlfeld statt Suchfeld anzeigen */
	.hw-filter-searchbox:checked ~ .hw-filter-barsearch,
	.hw-filter-searchbox ~ .hw-filter-barselect,
	.hw-filter-searchbox ~ .hw-filter-barinput {
		display: none;
	}

	/* Aktionsbuttons in Darstellungsbereichen von Listendarstellungen */
	.hw-contaktionen {
		margin-bottom: .5rem;
		font-size: 0;
	}

	/* Aktionsbuttons bekommen Abstände zueinander */
	.hw-contaktionen .hw-button-imagetext {
		margin-right: 1rem;
		margin-bottom: .5rem;
	}

	/* Abstand des letzten Formularfelds korrigieren */
	.hw-filter-widget:last-child,
	.hw-seiten-widget:last-child {
		margin-right: 0;
	}
	
	/* Darstellung der Inhaltstabellen in einem Grid */
	.hw-tablebar {
		grid-column-start: 1;
		grid-column-end: 3;
		overflow-y: auto;
	}

	/* Inhaltstabelle für die Darstellung vorhandener Daten */
	.hw-conttab {
		padding: 0;
		width: 100%;
		grid-column-start: 1;
		grid-column-end: 3;
		overflow-y: auto;
	}

	/* Trennung bei direkt aufeinanderfolgenden Tabellen */
	.hw-conttab-topborder {
		border-top: 1px solid var(--hw-linecol);
	}

	/* Trennung bei direkt aufeinanderfolgenden Tabellen */
	.hw-conttab-toptrenner {
		border-top: 3px double var(--hw-linecol);
	}
	
	/* Die Überschriftenzeile wird fest positioniert - Auswirkung nur bei verkleinertem Container hw-tablebar */
	.hw-conttab thead {
		position: sticky;
		top: 0;
	}

	/* Formatierung der Kopfleiste einer Inhaltstabelle */
	.hw-conttab th {
		padding: .5rem .75rem;
		color: var(--hw-dark);
		font-weight: bold;
		background-color: var(--hw-contbg);
	}

	/* Letztes Element im Kopfbereich erhält einen Rahmen unten */
	.hw-conttab thead tr:last-child th {
		border-bottom: 1px solid var(--hw-linecol);
	}

	/* Abstände und Formatierung innerhalb einer Inhaltstabelle */
	.hw-conttab td {
		padding: .5rem .75rem;
		border-top: 1px solid var(--hw-linecol);
	}

	/* Die obere Linie der ersten Zeile im tbody wird unterdrückt */
	.hw-conttab tbody tr:first-child td {
		border-top: 0;
	}

	/* Formatierung für Checkbox-Labels in Inhaltstabelle */
	.hw-conttab-row .hw-input-checkbox ~ .hw-form-label {
		text-decoration: underline;
	}

	/* Abstände und Formatierung innerhalb einer Inhaltstabelle */
	.hw-conttab-subrow th,
	.hw-conttab-subrow td {
		border-top: 1px solid var(--hw-greyed);
	}

	/* Ausrichtung von Formularfeldern wird korrigiert */
	.hw-conttab form {
		vertical-align: middle;
	}

	/* Icon in Tabellenzelle */
	.hw-conttab-iconline {
		display: inline-block;
		min-height: 1rem;
		vertical-align: middle;
	}

	/* Icon in Tabellenzelle */
	.hw-conttab-iconline::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
		font-style: normal;
	}
	
	/* Icon in Tabellenzelle */
	.hw-conttab-iconline::after {
		display: none;
	}

	/* Sekundärer Eintrag */
	.hw-conttab-subline {
		font-style: italic;
	}

	/* Mehrere Iconlines in einer TD */
	.hw-conttab-rechteline .hw-conttab-iconline {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Mehrere Iconlines in einer TD */
	.hw-conttab-rechteline .hw-conttab-iconline:last-child {
		margin-right: 0;
	}
	
	/* Tabellenzelle mit Zeitangaben */
	.hw-conttab-zeitline,
	.hw-conttab-tagover {
		text-align: center;
	}

	/* Tabellenzeile mit normalen Buchungen */
	.hw-conttab-buchline td,
	.hw-conttab-endeline td {
		border-top: 1px solid var(--hw-greyed);
	}

	/* Tabellenzeile mit Summierungen */
	.hw-conttab-sumline td {
		color: var(--hw-dark);
	}

	/* Formatierung für genehmigte Abwesenheit */
	.hw-conttab-genline {
		color: var(--hw-bgcolor);
		background-color: var(--hw-light);
	}

	/* Formatierung für nicht genehmigte Abwesenheit */
	.hw-conttab-ungenline {
		color: var(--hw-bgcolor);
		background-color: var(--hw-dark);
	}

	/* Tabellenzeile ohne Text */
	.hw-conttab-symbolic {
		font-size: 0;
	}

	/* Tabellenzeile ohne Text */
	.hw-conttab-symbolic::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
	}

	/* Tabellenzeile ohne Text */
	.hw-conttab-symbolic.hw-fehler::before {
		color: var(--hw-error);
	}
	
	/* Zusätze bei geänderten Buchungsdaten */
	.hw-conttab-symbolic.hw-icons-korrigiert::before,
	.hw-conttab-symbolic.hw-icons-abwesend::before {
		width: 1.25rem;
		vertical-align: super;
		text-align: right;
		padding: 0;
		margin-right: 0;
	}

	/* Tagesdarstellung in Tabelle erhält Trennlinie links */
	.hw-conttab-tagline {
		border-left: 1px solid var(--hw-linecol);
		min-width: 1rem;
		text-align: center;
		white-space: nowrap;
	}

	/* Tagesdarstellung für freie Tage */
	.hw-conttab-noline {
		background-color: var(--hw-greyed);
	}
	
	/* Inhaltsdarstellung in Tabellenzeile als Gitter untereinander */
	.hw-conttab-gridline {
		display: grid;
		row-gap: .5rem;
		justify-items: start;
		align-items: center;
		grid-auto-flow: row;
		align-content: center;
		min-width: 12rem;
	}

	/* Inhaltsdarstellung in Tabellenzeile als Gitter nebeneinander */
	.hw-conttab-gridbuch {
		display: grid;
		column-gap: 1rem;
		justify-items: start;
		align-items: center;
		grid-auto-flow: column;
		align-content: center;
	}
	
	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-hinweis,
	.hw-conttab-betrieb-ende,
	.hw-conttab-homeoffice-ende,
	.hw-conttab-abwesenheit {
		color: var(--hw-linecol);
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-betrieb {
		color: var(--hw-dark);
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-unterwegs,
	.hw-conttab-homeoffice {
		color: var(--hw-light);
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-fehler {
		color: var(--hw-error);
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-contleer {
		color: var(--hw-dark);
		padding: .75rem 1rem;
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-contleer::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Alle Texte in Aktionsspalten von Tabellen werden unterdrückt */
	.hw-akthead {
		font-size: 0;
	}

	/* Aktionsbuttons in Tabellen */
	.hw-aktform {
		display: inline-block;
		margin-right: .5rem;
	}
	
	/* Letzter Aktionsbutton in Tabellenzelle */
	.hw-aktform:last-child {
		margin-right: 0;
	}

	/* Aktionsformular in Tabellen */
	.hw-aktform-grid {
		display: grid;
		column-gap: .5rem;
		justify-items: start;
		align-items: center;
		grid-auto-flow: column;
		align-content: center;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-0 {
		margin-left: 0;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-1 {
		margin-left: 1.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-2 {
		margin-left: 3rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-3 {
		margin-left: 4.5rem;
	}
	
	/* Formatierung für Ebenen */
	.hw-ebene-4 {
		margin-left: 6rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-5 {
		margin-left: 7.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-6 {
		margin-left: 9rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-7 {
		margin-left: 10.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-8 {
		margin-left: 12rem;
	}

	/* Hauptüberschrift im Titelbereich ausblenden */
	.hw-head-haupt {
		display: none;
	}
	
	/* Menüpunkt als Überschrift verwenden und Symbol einblenden */
	.hw-head-neben {
		color: var(--hw-dark);
	}

	/* Menüpunkt als Überschrift verwenden und Symbol einblenden */
	.hw-head-neben::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		margin-right: 1rem;
	}

	/* Menüpunkt als Überschrift verwenden und Symbol einblenden */
	.hw-head-neben::after {
		display: none;
	}

	/* Darstellung einer ganzseitigen Meldung zur Bestätigung */
	.hw-fullerror {
		position: fixed;
		display: flex;
		align-content: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		left: 0;
		top: 0;
		z-index: 10050;
		background-color: rgba(0, 0, 0, .75);
		text-align: center;
		vertical-align: middle;
		margin: 0;
		padding: 1rem;
		font-size: 1rem;
		color: var(--hw-color);
	}	

	/* Bestätigungsmeldung in ganzseitiger Darstellung */
	.hw-fullborder {
		display: inline-block;
		align-self: center;
		padding: 1rem 1rem 0 1rem;
		background-color: var(--hw-bgcolor);
		box-shadow: 0 0 10px var(--hw-color);
		border-radius: .5rem;
		border: 1px solid var(--hw-linecol);
		max-height: 90%;
		max-width: 90%;
	}

	/* Bestätigungsmeldung mit Positionierungsgitter */
	.hw-fullborder.hw-fullgrid {
		display: grid;
		grid-auto-flow: row;
		grid-template-rows: min-content 1fr min-content;
		grid-template-columns: 1fr;
	}

	/* Warnmeldung der Bestätigung in ganzseitiger Darstellung */
	.hw-fullwarnung {
		font-weight: bold;
		color: var(--hw-dark);
		margin-bottom: 1rem;
	}

	/* Hinweismeldungen der Bestätigung in ganzseitiger Darstellung */
	.hw-fullhinweis {
		margin-bottom: 1rem;
	}

	/* Hinweismeldungen der Bestätigung in ganzseitiger Darstellung */
	.hw-fullhinweis.hw-form-grid {
		width: fit-content;
		margin: 0 auto 1rem auto;
	}
	
	/* Abstände der Buttons in Vollbildmeldung ändern */
	.hw-fullborder .hw-button-imagetext {
		margin: 0 .5rem 1rem .5rem;
		display: inline-block;
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-icontext {
		padding: 0 1rem 1rem 0;
		color: var(--hw-dark);
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-icontext::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Akkordeon-Checkbox verbergen */
	.hw-akkordcheck {
		display: none;
	}

	/* Akkordeon-Inhalt wird verborgen und mit Abstand erstellt */
	.hw-akkordcont {
		display: none;
		margin-top: .5rem;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: .5rem;
	}

	/* Text im Akkordeon anzeigen */
	.hw-akkordlabel {
		margin-bottom: .5rem;
	}

	/* Text im Akkordeon anzeigen */
	.hw-akkordlabel:after {
		content: ' anzeigen';
	}

	/* Inhalt nach Akkordeon nur anzeigen, wenn die Checkbox aktiv ist */
	.hw-akkordcheck:checked ~ .hw-akkordcont {
		display: grid;
	}

	/* Text im Akkordeon bei Auswahl verändern */
	.hw-akkordcheck:checked ~ .hw-akkordlabel:after {
		content: ' ausblenden';
	}

	/* Titel für Legenden */
	.hw-legende-titel {
		font-weight: bold;
		display: inline-block;
		margin-right: 1rem;
	}

	/* Text-Bereiche für Legenden */
	.hw-legende-textline {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Icon-Bereiche für Legenden */
	.hw-legende-iconline {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Icon-Bereiche für Legenden */
	.hw-legende-iconline::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Sonderformat für Jahreskalender: Erläuterung ohne Icon */
	.hw-legende-tabline .hw-legende-textline {
		padding: .25rem .5rem;
		border-radius: .5rem;
	}

	/* Sonderformat für Jahreskalender: Erläuterung mit Icon */
	.hw-legende-tabline .hw-legende-iconline {
		padding: .25rem .5rem;
		background-color: var(--hw-greyed);
		border-radius: .5rem;
	}

	/* Abstand bei Neuladen-Info im Bereich Ansichten */
	.hw-ladestand {
		margin-bottom: .5rem;
	}

	/* Bestimmte Buttons und Inhalte werden rot dargestellt */
	.hw-icons-aktdelete,
	.hw-icons-aktdelall,
	.hw-icons-ablehnung,
	.hw-icons-ablehnungen,
	.hw-icons-aktdone {
		color: var(--hw-error);
	}

	/* Bestimmte Inhalte werden heller dargestellt */
	.hw-icons-akzeptiert {
		color: var(--hw-dark);
	}
	
}