/* Import von allgemeinen CSS Dateien (im shared css ordner) */
@import url("./../../css/color.css");
@import url("./../../css/font/font.css");
@import url("./../../css/dialog.css");
@import url("./../../css/calendar.css");
@import url("./neoChecker.css");

/* Positionierung und Größe von Elementen (nur die Schriftgröße ist in font.css) */
@media print {
	.title,
	.topmenu,
	.submenu,
	#malist,
	#malist *,
	#mafilter,
	#mafilter *,
	#reportlist,
	#reportlist *,
	input,
	#nachrichten-feed,
	.hide-print {
		display: none !important;
	}
}

@media screen {
	/* "Normalisierung" siehe https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing */
	*,
	::before,
	::after {
		box-sizing: border-box;
	}

	body {
		margin: 0;
	}

	section,
	input,
	select {
		border: 1px solid #cccccc;
		color: var(--basic-font-color);
	}
	input[type="text"] {
		color: black;
	}

	input[type="checkbox"] {
		margin: 0;
		cursor: pointer;
	}

	input[multiple] option {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 300px;
	}

	input:focus,
	select:focus {
		border: 1px solid var(--primary-color);
	}

	#loader {
		border: 16px solid var(--third-color); /* Light blue */
		border-top: 16px solid var(--secondary-color); /* Blue */
		border-radius: 50%;
		width: 120px;
		height: 120px;
		animation: spin 2s linear infinite;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	#loader-div {
		display: none;
		visibility: visible;
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
	}

	#progressbar-dialog {
		display: none;
		position: absolute;
		margin: auto;
		right: 10px;
		bottom: 10px;
		min-height: 80px;
		width: 250px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		border: 1px solid var(--primary-color);
		border-radius: 10px;
		background-color: var(--third-color);
		z-index: 999999;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	#home-logo {
		position: absolute;
		display: block;
		max-height: 200px;
		max-width: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.error-alerts {
		overflow: auto;
		max-height: 500px;
	}

	#nachrichten-feed {
		position: absolute;
		bottom: 10px;
		right: 10px;
		display: flex;
		flex-direction: column;
		row-gap: 5px;
		pointer-events: none;
	}
	
	#kleine-system-nachricht {
		display: flex;
		width: 250px;
		min-height: 50px;
		max-height: 100px;
		padding: 10px 10px;
		padding-left: 30px;
		font-size: 16px;
		z-index: 99999;
		border: 1px solid black;
		border-radius: 10px;
		opacity: 0;
		transition: opacity 0.5s ease-out;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: left;
		background-repeat: no-repeat;
		background-size: auto;
		background-position: 5px center;
		pointer-events: none;
	}

	.bg-green {
		background-color: var(--custom-green);
		color: white;
		background-image: url("./icons/check-lg.svg");
	}
	
	.bg-red {
		background-color: var(--custom-red);
		color: white;
		background-image: url("./icons/exclamation-circle.svg");
	}
	
	.bg-yellow {
		background-color: var(--custom-yellow);
		color: black;
		background-image: url("./icons/info-circle.svg");
	}

	.bi-info-circle {
		/* color: var(--custom-green); */
	}
	.bi-info-circle:hover::before {
		content: "\f430";
	}

	#logout-link {
		text-decoration: none;
		font-weight: bold;
		color: var(--secondary-color);
	}

	#logout-link:hover {
		color: var(--background-grey2);
	}

	#ma-sofortmeldung-beantragen-dialog p,
	#ma-sofortmeldung-stornieren-dialog p {
		display: block;
	}

	.patch-header {
		margin: 5px;
	}

	.patch-liste {
		margin-top: 5px; 
		line-height: 1.25;
	}

	.hide-mod,
	.hide-mod2 {
		font-size: inherit;
	}
	.hide-mod span,
	.hide-mod2 span {
		font-size: inherit;
	}

	/****************************************** MAIN GRID LAYOUT ******************************************/
	.gridcontainer {
		display: grid;
		grid-gap: 1px;
		height: 100vh;
		line-height: 7mm;
		grid-template-rows: [top] 11mm [topmenutop] 7mm [topmenusplit] 7mm [submenutop] 7mm [main] 1fr [footmenu] auto [bottom];
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas:
			"neolohn zeich titel titel titel titel titel titel titel titel logout logout"
			"zeitraum zeitraum topmenu1 topmenu2 topmenu3 topmenu4 topmenu5 topmenuleer topmenuleer topmenuleer topmenuleer topmenuverwaltung"
			"ma-aktiv betrieb topmenu1 topmenu2 topmenu3 topmenu4 topmenu5 topmenuleer topmenuleer topmenuleer topmenuleer topmenuverwaltung"
			"masuche masuche submenu1 submenu2 submenu3 submenu4 submenu5 submenu6 submenu7 submenu8 submenu9 submenu10"
			"maliste maliste main main main main main main main main main main"
			"maliste maliste result result result result result result result result result result";
	}

	/* areas dürfen nicht gleichnamig zu rows sein! */
	/* Default bei Start */
	.mamenu,
	.vwmenu,
	.mimenu,
	.reportmenu,
	.tagesuebersichtmenu,
	.monatsuebersichtmenu {
		visibility: hidden;
	}

	.title,
	.topmenu,
	.submenu,
	.malist_filtertitle,
	.malist_filter_action,
	.malist_empty {
		text-align: center;
	}

	.topmenu,
	.submenu {
		color: var(--menu-font-color);
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* standard background-color zuerst bevor active color class */
	.submenu {
		background-color: var(--secondary-color);
		font-size: 12px;
	}

	.topmenu {
		background-color: var(--primary-color);
		font-weight: bold;
		font-size: 14px;
	}

	.topmenu_active,
	.topmenu:hover,
	.submenu_active,
	.submenu:hover,
	.filter-select.filter_active{
		color: var(--secondary-color);
		background-color: var(--third-color);
		font-weight: bold;
		cursor: pointer;
	}
	.malist_filtertitle.filter_active {
		color: var(--secondary-color);
		background-color: var(--third-color);
	}

	.rowspan2 {
		line-height: 14mm;
	}

	.main {
		grid-area: main;
	}

	/***** Title Header *****/

	#neolohn-clock {
		font-weight: bold;
		color: var(--primary-color);
		line-height: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}

	.title {
		height: 11mm;
		line-height: 11mm;
		font-size: 20px;
	}

	.title1 {
		grid-area: neolohn;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding-left: 5px;
		gap: 10px;
		color: var(--primary-color);
	}

	.title2 {
		grid-area: zeich;
	}

	.title3 {
		grid-area: titel;
		color: var(--primary-color);
		font-weight: bold;
		text-align: left;
		padding-left: 20px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.suche {
		grid-area: suche;
	}

	#logout {
		grid-area: logout;
		display: flex;
		justify-content: right;
		color: var(--primary-color);
		padding-right: 10px;
	}

	#logout-link-div {
		cursor: pointer;
	}

	.logout-last-minute {
		color: var(--custom-red);
	}

	/***** Topmenu Navigation *****/

	.topmenu_active {
		border-top: 1px solid var(--primary-color);
		border-bottom: 1px solid var(--primary-color);
	}

	.zeitraum {
		grid-area: zeitraum;
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 10px;
		line-height: normal;
	}

	#monats-auswahl {
		float: none;
		font-weight: bold;
		max-width: 150px;
		border-radius: 5px;
		padding: 1px;
	}

	.monat-pfeil {
		font-size: 18px;
	}

	.monat-pfeil:hover {
		color: var(--primary-color);
	}

	.betrieb {
		grid-area: betrieb;
	}

	.ma-aktiv {
		grid-area: ma-aktiv;
	}

	.mitarbeiter {
		grid-area: topmenu1;
	}

	.berichte {
		grid-area: topmenu2;
	}
	
	.dienstplan {
		grid-area: topmenu3;
		text-decoration: none;
	}

	.tagesuebersicht {
		grid-area: topmenu4;
	}
	
	.monatsuebersicht {
		grid-area: topmenu5;
	}

	.message {
		grid-area: topmenuleer;
	}

	.verwaltung {
		grid-area: topmenuverwaltung;
	}

	.topmenu-btn {
		background-color: var(--body-background-color);
		color: var(--primary-color);
		padding: 2px 4px;
		border-radius: 5px;
		margin-left: 5px;
		font-size: inherit;
	}
	.topmenu-link {
		font-size: inherit;
	}

	.topmenu-btn:hover {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
	}

	#menu-betriebsstaette, #menu-ma-aktiv {
		width: 100%;
		height: 100%;
		background-color: transparent;
		color: var(--menu-font-color);
		border: none;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
	}

	#menu-betriebsstaette:hover, #menu-ma-aktiv:hover {
		color: var(--secondary-color);
		background-color: var(--third-color);
		cursor: pointer;
	}

	#menu-betriebsstaette > option, #menu-ma-aktiv > option {
		color: var(--primary-color);
	}

	/***** Submenü Navigation ******/
	.submenu1 {
		grid-area: submenu1;
	}

	.submenu2 {
		grid-area: submenu2;
	}

	.submenu3 {
		grid-area: submenu3;
	}

	.submenu4 {
		grid-area: submenu4;
	}

	.submenu5 {
		grid-area: submenu5;
	}

	.submenu6 {
		grid-area: submenu6;
	}

	.submenu7 {
		grid-area: submenu7;
	}

	.submenu8 {
		grid-area: submenu8;
	}

	.submenu9 {
		grid-area: submenu9;
	}

	.submenu10 {
		grid-area: submenu10;
	}

	.submenu11 {
		grid-area: submenu11;
	}

	.submenu12 {
		grid-area: submenu12;
	}

	/****** MA Liste, Filterauswahl und Aktion *****/
	.masuche {
		grid-area: masuche;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.masuche > label {
		width: 30%;
	}

	.masuche > input {
		width: 100%;
		height: 80%;
		margin: 0 2.5px;
		border: none;
		background-image: url("./icons/search.svg");
		background-repeat: no-repeat;
		background-position: right 5px center;
	}

	.malist {
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: auto;
		background: repeating-linear-gradient(
			180deg,
			var(--background-grey),
			var(--background-grey) 25px,
			#fff 25px,
			#fff 50px
		);
	}

	.malist-sidebar {
		grid-area: maliste;
		overflow: auto;
		max-height: 100%;
		display: flex;
		flex-direction: column;
	}
	.malist_filtertitle,
	.malist_title,
	.malist_filter,
	.malist_empty {
		width: 100%;
		float: left;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.hinweis {
		flex: auto;
		background-color: var(--third-color);
		color: var(--basic-font-color);
	}

	.ma-select-item {
		list-style: none;
		cursor: pointer;
		height: 25px;
		border-bottom: 1px solid var(--secondary-color);
		background-color: var(--background-grey);
	}

	.hidden {
		display: none !important;
	}

	.invisible {
		visibility: hidden;
	}

	.odd-color {
		background-color: var(--body-background-color);
	}

	.ma-select-item:hover {
		background-color: var(--secondary-color);
		color: var(--menu-font-color);
	}

	.ma-select-active {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
	}

	.ma-control {
		display: grid;
		grid-template-columns: 50% 20% 20% 10%;
		margin: 0 5px;
		height: 25px;
		column-gap: 1px;
	}

	.ma-control.bewerber-control {
		grid-template-columns: 50% 25% 25%;
	}

	.ma-control-detail.ma-control-icons {
		overflow: hidden;
		justify-content: flex-end;
	}
	.ma-control-detail.ma-control-icons:hover {
		overflow: unset;
		z-index: 10;
	}

	.ma-control-detail.ma-control-checkbox {
		justify-content: flex-end;
    	margin-right: 2.5px;
	}

	.ma-control-detail > input[type="checkbox"] {
		transform: scale(1.5);
		margin: 0;
		height: 25px;
	}

	.ma-control-detail > i {
		margin-right: 1.25px;
		margin-left: 1.25px;
		font-size: 12px;
	}
	.bewerber-control .ma-control-detail > i {
		margin-right: 1.25px;
		margin-left: 1.25px;
		font-size: 18px;
	}

	.ma-control-detail > i:hover {
		color: var(--custom-yellow);
	}

	.bi-lock-fill.ma-abgeschlossen-icon:not(.no-unlock-icon):hover::before {
		content: "\f5ff";
	}

	.ma-control-name {
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 25px;
		font-size: 12px;
	}

	.ma-control-detail {
		font-size: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ma-control-detail.pgs {
		justify-content: left;
		font-size: 10px;
	}

	.ma-control:hover .ma-control-detail.pgs {
		display: none;
	}
	.ma-control:hover {
		grid-template-columns: 60% 30% 10%;
	}
	.bewerber-control.ma-control:hover {
		grid-template-columns: 50% 25% 25%;
	}

	.filter-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;
		grid-gap: 0px 1.5px;
		font-size: 14px;
	}

	.malist_filtertitle {
		grid-column: span 2;
	}

	.malist_filter_action {
		grid-column: span 2;
		background-color: var(--secondary-color);
		color: var(--menu-font-color);
	}

	#ma-filter-auswahl {
		display: flex;
		flex-direction: column;
		margin-top: auto;
	}

	.filter-checkbox {
		margin-top: none;
		transform: scale(1.5);
	}

	.filter-select {
		width: 100%;
		height: 100%;
		color: var(--menu-font-color);
		border-color: transparent;
    	background-color: var(--secondary-color);
		font-size: 12px;
	}

	.filter-select:hover {
		background-color: var(--third-color);
		color: var(--secondary-color);
		cursor: pointer;
	}

	.malist_title,
	.malist_filtertitle {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
		font-weight: bold;
	}
	.malist_filtertitle,
	.malist_filter,
	.malist_empty,
	.malist_title {
		border-bottom: 1px solid white;
	}

	#malist {
		border-right: 1px solid #cccccc;
	}

	#maauswahl,
	#mafilter {
		background-color: var(--third-color);
	}

	.malist_empty {
		background-color: var(--third-color);
	}

	#sidebar-berechnen, #sidebar-export {
		border-bottom: none;
	}

	/***** Mitarbeiterdaten *****/
	p {
		margin: 5px;
	}

	#abgeschlossen-banner {
		font-weight: bold;
		width: 100%;
		height: 40px;
		background-color: var(--custom-yellow);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-container {
		flex-wrap: wrap;
		overflow: hidden;
		position: relative;
	}

	.fieldset8columns {
		width: 80%;
		margin-bottom: 10px;
	}

	.fieldset4columns {
		width: 40%;
		margin-bottom: 10px;
	}

	.fieldset3columns {
		width: 30%;
		margin-bottom: 10px;
	}
	
	.fieldset2columns {
		width: 20%;
		margin-bottom: 10px;
	}

	.fieldset1columns {
		width: 10%;
		margin-bottom: 10px;
	}

	.fieldset-input {
		float: right;
		width: 50%;
		font-size: inherit;
	}

	.hide-input-arrows::-webkit-outer-spin-button,
	.hide-input-arrows::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.fieldset-input.important-input {
		background-color: var(--third-color);
		border-color: var(--primary-color);
	}
	.fieldset-input.important-input:invalid {
		border-color: var(--custom-yellow);
	}

	.fieldset-container {
		margin: 10px;
		display: flex;
		flex-direction: row;
	}

	.fieldset-container-vertical {
		display: flex;
		flex-direction: column;
		width: 30%;
	}

	.fieldset-container-vertical .fieldset3columns {
		width: 100%;
	}

	.fieldset-container button,
	.fieldset-container-vertical {
		font-size: inherit;
	}
	
	.verwenden-button,
	.entfernen-button {
		transition: transform 0.33s ease-in-out;
	}
	
	.verwenden-button:hover,
	.entfernen-button:hover {
		transform: scale(0.95);
	}

	.fieldset-container section {
		height: 100%;
	}

	.fieldset-checkbox-div {
		display: grid;
		grid-template-columns: 50% 50%;
		gap: 5px;
		margin: 5px;
		hyphens: auto;
	}

	.fieldset-div {
		display: grid;
		grid-template-columns: 50% 50%;
		margin: 5px;
		gap: 0 5px;
		hyphens: auto;
		line-height: 6mm;
	}

	
	#ma-Zuschlaege .fieldset-div,
	#ma-Zuschlaege .fieldset-checkbox-div,
	#ma-Zeitkonto .fieldset-div,
	#ma-Zeitkonto .fieldset-checkbox-div,
	#ma-posten-einsatz .fieldset-checkbox-div {
		grid-template-columns: 70% 30%;
	}

	#u-app .fieldset-checkbox-div,
	#u-standard .fieldset-checkbox-div,
	#ma-taetigkeit .fieldset-checkbox-div,
	#ma-app-settings .fieldset-checkbox-div {
		grid-template-columns: 80% 20%;
	}
	#ma-app-settings .fieldset-checkbox-div {
		margin: 0;
		margin-right: 5px;
	}

	#u-app .fieldset-checkbox-div input[type="checkbox"],
	#u-standard .fieldset-checkbox-div input[type="checkbox"],
	#ma-taetigkeit .fieldset-checkbox-div input[type="checkbox"],
	#ma-app-settings .fieldset-checkbox-div input[type="checkbox"]  {
		margin-left: auto;
    	margin-right: 5px;
	}
	#u-standard .fieldset-checkbox-div input[type="number"] {
		margin-left: auto;
	}

	#u-verzeichnisse .fieldset-div {
		grid-template-columns: 70% 15% 15%;
	}

	#u-verzeichnisse input[type="checkbox"] {
		width: fit-content;
		scale: 1.25;
		margin: auto;
	}

	.zeitkonto-input-div {
		display: grid;
		grid-template-columns: 50% 50%;
		gap: 0 5px;
		margin-right: 5px;
	}

	.fieldset-div input,
	.fieldset-div select {
		width: 100%;
		background-color: white;
	}

	.fieldset-div input:disabled, 
	.fieldset-div select:disabled {
		background-color: transparent;
	}

	.fieldset-input[type="checkbox"] {
		float: none;
		width: fit-content;
		transform: scale(1.25);
		margin-left: 5px;
	}

	.fieldset3columns > section,
	.fieldset8columns > section,
	.fieldset4columns > section,
	.fieldset2columns > section,
	.fieldset1columns > section {
		background-color: var(--background-grey);
		border: none;
		padding: 5px;
		border-radius: 10px;
	}

	.fieldset3columns select,
	.fieldset4columns select,
	.fieldset8columns select,
	.fieldset3columns input,
	.fieldset4columns input,
	.fieldset8columns input,
	.fieldset2columns select,
	.fieldset2columns input {
		border-radius: 5px;
	}

	fieldset {
		border: 0;
		margin: 0;
		padding-top: 0;
		padding-right: 5px;
		padding-left: 5px;
		padding-bottom: 0;
		float: left;
	}

	legend {
		margin-top: 8px;
		font-weight: bold;
		font-size: 14px;
	}

	input,
	select {
		padding: 2px;
	}

	select:required,
	input:required {
		border-color: red;
		background-color: var(--third-color);
	}
	select:disabled,
	input:disabled {
		border-color: var(--background-grey2);
		background-color: var(--background-grey);
	}
	button:disabled {
		opacity: .7;
		cursor: default !important;
	}
	select:disabled:hover,
	input:disabled:hover,
	button:disabled:hover {
		cursor: default !important;
	}
	
	select:required:valid,
	input:required:valid {
		border-color: var(--secondary-color);
	}

	input:invalid {
		border-color: red;
	}

	.option-icon > .icon-right {
		float: right;
	}

	.validation-msg {
		color: red;
		font-size: small;
		line-height: normal;
		display: flex;
		justify-content: flex-end;
		height: min-content;
		grid-column: span 2;
	}

	.validation-option {
		color: var(--primary-color);
		font-size: small;
		line-height: normal;
		display: flex;
		justify-content: flex-end;
		height: min-content;
		grid-column: span 2;
	}

	.ma-uebersicht-section > div {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin: 2.5px 5px;
	}

	.ma-uebersicht-section > div > div {
		display: flex;
		flex-direction: row;
	}
	
	.ma-uebersicht-section > div > div:first-of-type {
		font-weight: bold;
	}

	.ma-uebersicht-section input {
		border:none;
		font-size:inherit;
		padding:0;
		line-height: inherit;
	}

	.ma-uebersicht-status-select {
		border: none;
		background-color: transparent;
		color: var(--basic-font-color);
		font-size: inherit;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		opacity: 1;
	}

	.ma-la-zeile, .u-la-zeile, .ma-nba-zeile, .u-nba-zeile, .mi-zeile {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
	}
	
	.ma-jh-zeile {
		display: grid;
		grid-template-columns: 0.75fr 0.5fr 1fr 1.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		font-weight: bold;
		font-size: 12px;
	}

	.ma-jh-zeile:nth-child(even) {
		background-color: var(--background-grey);
	}
	
	.ma-jh-zeile.jh-vorwert {
		background-color: var(--custom-green);
		color: var(--menu-font-color);
	}
	.ma-jh-zeile.jh-vorwert .bi-trash-fill:hover {
		color: var(--custom-red);
	}

	.accordion[u-la-button-header],
	.accordion[u-nba-button-header],
	.accordion[bdp-button-header] {
		font-weight: normal;
	}

	.ma-qu-zeile.header {
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;

	}

	.ma-qu-zeile.header.liste-zeile {
		position: inherit;
		z-index: inherit;
		top: 0;
	}

	.ma-qu-zeile input, .ma-qu-zeile select {
		width: 100%;
		background-color: white;
	}

	.ma-qu-zeile input:disabled, .ma-qu-zeile select:disabled {
		background-color: var(--background-grey);
	}

	button[ma-qu-button] {
		border-radius: 5px;
	}

	.ma-qu-zeile {
		grid-template-columns: 0.25fr 1.5fr 1.25fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	.ma-qu-zeile .bi-star,
	.ma-qu-zeile .bi-star-fill {
		color: var(--secondary-color);
	}

	.ma-qu-zeile .bi-star:hover,
	.ma-qu-zeile .bi-star-fill:hover {
		color: var(--primary-color);
	}

	.ma-qu-zeile .bi-star:hover::before {
		content: "\f586";
		cursor: pointer;
	}

	.ma-qu-zeile .bi-star-fill:hover::before {
		cursor: pointer;
	}

	.ma-qu-tools {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-self: center;
		justify-items: center;
	}

	.regeltage-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		width: 100%;
	}
	
	.regeltag {
		display:grid;
		grid-template-rows: repeat(3, 1fr);
		gap: 5px;
		text-align: center;
	}
	
	.regeltag > div:first-child {
		font-weight: bold;
	}
	
	.regeltag > input[type="time"] {
		text-align: center;
	}
	
	.regeltag > input[type="time"]::-webkit-calendar-picker-indicator {
		display: none;
	}

	.text-search-results-div {
		border: 1px solid #ccc;
		background: white;
		min-height: 20px;
		max-height: 250px;
		overflow-y: auto;
	}
  
	.text-search-results-div > div {
		padding: 2.5px;
		cursor: pointer;
	}

	.text-search-results-div > div:hover {
		background-color: #f0f0f0;
	}

	#ma-pdf-button {
		text-decoration: none;
		padding: 5px;
	}

	#ma-pdf-refresh {
		font-size: larger;
		margin-bottom: 5px;
		width: 50%;
	}

	#ma-pdf-refresh > i {
		display: inline-block;
		transition: transform 0.75s ease-in;
	}

	#ma-pdf-refresh:hover > i {
		display: inline-block;
		transform: rotate(360deg);
	}

	#download-dokumente, #entwurf-dokumente {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#download-dokumente .schriftverkehr-liste,
	#entwurf-dokumente .schriftverkehr-liste {
		width: 95%;
	}

	.ma-notizfeld {
		width: calc(100% - 10px);
		padding: 10px;
		height: 12.5vh;
		border-radius: 10px;
		margin: 5px;
	}

	.ma-jh-auk-tage, .ma-jh-aug-std {
		display: grid;
		gap: 2.5px;
	}

	.ma-jh-auk-tage {
		grid-template-columns: repeat(3, 1fr);
	}
	.ma-jh-aug-std {
		grid-template-columns: repeat(4, 25%);
	}
	.ma-jh-auk-tage span, .ma-jh-aug-std span {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 10px;
		background: var(--secondary-color);
		color: var(--menu-font-color);
		border-radius: 5px;
		border: none;
	}
	
	.urlaubsantrag {
		background-color: white;
		padding: 2px;
		border: 1px solid var(--primary-color);
		border-radius: 10px;
		display: grid;
		grid-template-columns: 35% 15% 25% 25%;
		align-content: center;
		align-items: center;
		margin-bottom: 5px;
		font-size: 13px;
		line-height: normal;
	}

	.urlaubsantrag .text-date-short {
		padding: 0 2.5px;
	}

	.urlaubsantrag-status {
		text-align: center;
	} 

	.urlaubsantrag-aktion {
		display:flex; 
		justify-content:space-evenly;
	}

	.urlaubsantrag-aktion > div {
		cursor: pointer;
	}

	.urlaubsantrag-aktion > div:hover {
		opacity: 70%;
	}

	.icon-button {
		border: none;
		cursor: pointer;
		background-color: transparent;
	}

	.icon-button:disabled > i {
		color: var(--background-grey);
	}

	.ma-ua-liste {
		max-height: 20vh;
		overflow-y: auto;
	}

	.u-urlaubssperre-list {
		max-height: 40vh;
		overflow-y: scroll;
	}

	.ma-mutterschutz-item ul,
	.u-urlaubssperre-item ul {
		padding-left: 20px;
		margin-top: 0;
		border-radius: 5px;
		border: 1px solid var(--primary-color);
		background-color: white;
		line-height: 1.5;
	}

	.dokument-name {
		text-decoration: underline;
	}

	.dokument-name {
		color: var(--secondary-color)
	}

	.dokument-info {
		font-size: small;
	}
	
	.dokument-icon {
		font-size: large;
		color: var(--primary-color);
	}

	.verzeichnis-name {
		color: var(--primary-color);
		font-weight: bold;
		hyphens: auto;
	}

	.verzeichnis-item-active .verzeichnis-name {
		color: var(--menu-font-color)
	}
	.verzeichnis-item-active i {
		color: var(--menu-font-color)
	}
	.postfach-item.verzeichnis-item-active {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
	}

	.papierkorb-verzeichnis .postfach-item {
		border-color: var(--custom-red);
	}
	.papierkorb-verzeichnis .verzeichnis-name {
		color: var(--custom-red);
	}
	.papierkorb-verzeichnis .verzeichnis-item-active {
		background-color: var(--custom-red);
	}
	.papierkorb-verzeichnis .verzeichnis-item-active .verzeichnis-name {
		color: var(--menu-font-color);
	}
	
	.dokument-item-active .dokument-name {
		color: var(--menu-font-color)
	}
	.dokument-item-active i {
		color: var(--menu-font-color)
	}
	.postfach-item.dokument-item-active,
	.schriftverkehr-liste-item.dokument-item-active {
		background-color: var(--secondary-color);
		color: var(--menu-font-color);
	}

	.postfach-liste {
		display: flex;
		flex-direction: column;
		margin: 2.5px;
		height: calc(100% - 50px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.postfach-item {
		display: grid;
		grid-template-columns: 90% 10%;
		background-color: white;
		border: 1px solid var(--primary-color);
		border-radius: 10px;
		padding: 0 5px;
		margin: 2.5px;
		align-items: center;
	}

	#postfach-img {
		display: block;	
		margin: auto;
		max-width: 100%;
		width: auto;
	}

	.context-delete {
		position: absolute;
		background-color: var(--custom-red);
		color: white;
		border-radius: 10px;
		border: 1px solid black;
		z-index: 100;
		padding: 5px;
		cursor: pointer;
	}
	.context-delete:hover {
		background-color: var(--custom-yellow);
	}

	.dokument-liste-item.postfach-item {
		grid-template-columns: 10% 80% 10%;
	}

	.dokument-details {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.postfach-item input[type="checkbox"] {
		transform: scale(1.5);
	}

	.postfach-item:hover {
		cursor: pointer;
		background-color: var(--third-color);
	}

	.schriftverkehr-header.postfach-header {
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}

	.postfach-sidebar {
		grid-column: span 2;
		background-color: var(--background-grey);
		height: 100%;
		overflow: hidden;
	}

	.postfach-content {
		overflow: auto;
	}

	.viewer-container {
		height: 100%;
	}

	.viewer-container > div {
		height: 100%;
	}

	.pdf-toolbar {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.pdf-toolbar > span {
		height: 25px;
	}
	
	.pdf-toolbar > span i {
		cursor: pointer;
		font-size: 20px;
	}

	.drop-zone-dragover {
		background-color: yellow !important;
		color: var(--primary-color) !important;
	}

	.ma-nachricht-div {
		display: grid;
		grid-template-columns: 90% 10%;
		align-content: center;
	}

	.ma-nachricht-div > button {
		max-height: 40px;
	}
	.ma-nachricht-div > input[type="checkbox"] {
		max-height: 20px;
	}

	.ma-nachricht-div > textarea {
		border-radius: 5px;
	}

	.ma-nachricht-info {
		display:flex;
		justify-content: space-between;
		width: 90%;
		font-size: small;
	}

	.ma-notizen-bearbeitet-info {
		display: none;
	}

	#ma-nachrichten-liste {
		max-height: 50vh;
		overflow: auto;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.gutzeit-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-content: center;
		justify-items: center;
		margin-bottom: 5px;
	}
	
	.zpauschal-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-content: center;
		justify-items: center;
		margin-bottom: 5px;
	}

	.zpauschal-grid input,
	.gutzeit-grid input {
		width: 75px;
		text-align: center;
		font-size: inherit;
	}

	.gutzeit-grid input::-webkit-outer-spin-button,
	.gutzeit-grid input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.kranktage-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		align-content: center;
		justify-items: center;
		margin-bottom: 5px;
	}

	.kurzfristig-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-content: center;
		justify-items: center;
		margin-bottom: 5px;
	}

	.ma-kinder {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.ma-kinder input {
		margin: 2.5px;
	}

	/***** Ausgabebereich *****/
	.output_group {
		display: grid;
		grid-template-columns: 70% 30%;
		row-gap: 5px;
		align-content: baseline;
		text-align: left;
		position: relative;
	}

	.kosten-uebersicht {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: 10px;
		height: auto;
		border-radius: 10px;
		background-color: var(--third-color);
		margin-right: 10px;
		font-size: 14px;
	}

	.output_group > .output_value,
	.result-an-sfn-std {
		text-align: right;
	}

	.output_label,
	.output_title {
		font-weight: bold;
		text-align: left;
	}

	.result-details {
		background-color: var(--third-color);
		padding-left: 10px;
		border-radius: 10px;
		height: fit-content;
	}

	.result {
		margin-top: auto;
		grid-area: result;
		display: grid;
		grid-gap: 1mm;
		height: auto;
		margin-bottom: 2.5px;
	}

	.result-details > summary {
		font-weight: bold;
	}

	.result-an-sfn-switch {
		position: absolute;
		cursor: pointer;
		top: -7mm;
		right: 0px;
		font-size: 14px;
		font-weight: bold;
	}

	/**** Berichte ****/

	#ma-Berichte {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		height: 100%;
		overflow: hidden;
	}

	.reportlist {
		grid-column: span 2;
		height: 100%;
		height: -webkit-fill-available;
		background-color: var(--background-grey);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.reportlist > div {
		height: 100%;
		overflow: auto;
	}

	.reportlist .schriftverkehr-liste-item {
		background-color: var(--third-color);
		color: var(--basic-font-color);
		font-weight: bold;
		text-align: left;
		font-size: 18px;
		padding-left: 10px;
	}

	.reportlist .schriftverkehr-liste-item.report-item-active {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
	}

	#bericht-upload-zone {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 5px 5px 2.5px;
		padding: 2px;
		border: 2px dashed var(--secondary-color);
		color: var(--secondary-color);
		max-height: 100px;
		border-radius: 10px;
		transition: transform 0.25s ease-out;
		font-weight: bold;
		line-height: normal;
	}

	#bericht-upload-zone:hover {
		border-color: var(--primary-color);
		color: var(--primary-color);
		cursor: pointer;
		transform: scale(0.95);
		background-color: var(--third-color);
	}

	.reportarea {
		grid-column: span 8;
		overflow: auto;
		padding-top: 1px;
		padding-left: 2px;
		line-height: normal;
		transform-origin: top left;
		height: 100%;
	}

	.zoomreport {
		transform-origin: left top;
		padding: 2mm;
		background-color: white;
	}

	.titelseite_der_berichte {
		grid-area: submenu1 / submenu1 / submenu2 / submenu2;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.zoom {
		width: 40vw;
	}

	.pagination {
		grid-area: submenu3 / submenu3 / submenu9 / submenu9;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.titelseite_der_berichte:hover,
	.pagination:hover {
		cursor: default;
	}

	#report-kw-change:not(.hidden),
	#report-pagination:not(.hidden) {
		display: flex;
		align-items: center;
		gap: 5px;
	}
	#report-kw-change button:hover,
	#report-pagination button:hover {
		color: var(--menu-font-color);
		background-color: var(--primary-color);
		cursor: pointer;
	}
	#report-kw-change button,
	#report-pagination button {
		background-color: var(--third-color);
		border-color: var(--primary-color);
		color: var(--primary-color);
		border-radius: 5px;
	}

	.download {
		grid-area: submenu10;
	}

	.tagesauswahl {
		grid-area: submenu1 / submenu1 / submenu2 / submenu2;
	}

	.tagesauswahl input {
		border-radius: 5px;
	}

	.error {
		color: var(--primary-color);
		animation-name: erroranimation;
		animation-duration: 20s;
	}

	/********************* ZEITEN **********************/
	#zeiten-body {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
	}

	.zeiten-grid {
		display: grid;
		grid-template-columns: repeat(4, 5vw);
		border: var(--primary-color) 1px solid;
		background-color: black;
		color: black;
		row-gap: 1px;
		column-gap: 1px;
		margin-right: 10px;
		line-height: 1;
		position: relative;
	}

	.zeiten-grid .zeiten-item {
		font-size: 11px;
		height: 5mm;
		width: 5vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.zeiten-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background-color: white;
	}

	.zeiten-item.ueberlaenge {
		color: var(--custom-red);
		font-weight: bold;
		flex-direction: row;
		justify-content: center;
		gap: 5px;
	}

	.zeiten-item.ueberlaenge > i {
		font-size: 11px;
	}

	.zeiten-grid.egfz-gzminus > .zeiten-item:first-child {
		background-color: #FAE0F3;
	}
	.zeiten-grid.egfz-gzplus  > .zeiten-item:first-child {
		background-color: #FDE3CD;
	}

	.zeiten-notiz {
		position: absolute;
		top: -3px;
		right: -5px;
		text-align: center;
		font-size: small;
		line-height: normal;
		color: var(--custom-yellow);
	}
	
    #sharedMapPopup {
		position: absolute;
		width: 300px;
		height: 250px;
		z-index: 1000;
		border: 1px solid var(--primary-color);
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.2);
		visibility: hidden;
	}
	.leaflet-control-zoom.leaflet-bar.leaflet-control span {
		font-size: inherit;
	}

	.gps-bg-start {
		background-image: url('./icons/geo-alt-fill.svg');
		background-repeat: no-repeat;
		background-position: 2.5px center;
		background-size: 25% 80%
	}
	.gps-bg-ende {
		background-image: url('./icons/geo-alt-end.svg');
		background-repeat: no-repeat;
		background-position: 2.5px center;
		background-size: 25% 80%
	}

	.zpauschal-grid > input.no-border,
	.gutzeit-grid > input.no-border,
	#zeiten-liste .zeiten-input,
	.zeiten-select,
	.zeiten-item > label {
		border: none;
	}

	#zeiten-liste-summe {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1mm;
		border-top: 1mm solid var(--primary-color);
		background-color: var(--body-background-color);
		line-height: normal;
	}

	#zeiten-liste-summe > div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zeiten-tag {
		display: flex;
		justify-content: space-between;
		padding-left: 2mm;
		padding-right: 2mm;
		width: 20mm;
		line-height: normal;
		font-size: small;
	}

	.zeiten-kw {
		width: 5.5mm;
		padding-left: 2.5px;
		font-weight: bold;
		font-size: small;
		line-height: normal;
		text-align: center;
	}

	.zeiten-liste-container {
		display: flex;
		flex-direction: column;
		width: -webkit-fill-available;
		width: -moz-available;
		height: 100%;
		overflow-x: auto;
	}

	#zeiten-liste {
		overflow-y: auto;
	}

	#zeiten-liste .zeiten-list-item:nth-child(odd) {
		background-color: var(--background-grey);
		color: black;
	}

	#zeiten-liste .zeiten-list-item.zeiten-sonntag {
		background-color: var(--third-color);
		color: black;
	}
	
	#zeiten-liste .zeiten-list-item.zeiten-feiertag {
		background-color: var(--custom-turquoise);
		color: black;
	}

	#zeiten-liste .zeiten-list-item:hover {
		background-color: var(--secondary-color);
		color: var(--menu-font-color);
		cursor: pointer;
	}

	#zeiten-liste .zeiten-list-item.tag-selected {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
	}

	.zeiten-list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: var(--body-background-color);
		padding: 0.5mm;
		min-height: 5mm;
		flex-wrap: wrap;
    	gap: 2.5px 0;
	}

	.zeiten-list-item .zeiten-grid:nth-child(2n + 5) {
		margin-left: 25.5mm;
	}

	.zeiten-list-item .tag-urlaub {
		rotate: 45deg;
		margin-right: 5px;
		font-size: 14px;
	}

	.zeiten-item input[type="time"]:disabled::-webkit-calendar-picker-indicator {
		visibility: visible;
	}

	.zeiten-item input[type="time"]:disabled {
		pointer-events: none;
	}

	.zeiten-item input[type="time"] {
		padding: 0;
	}

	.zeiten-item input[type="checkbox"] {
		transform: scale(1.5);
	}

	.zeiten-item > label {
		text-align: left;
		font-weight: bold;
	}

	.hide-focus:focus,
	.hide-focus:active,
	.hide-focus:focus-visible {
		border: none;
		outline: none;
	}

	.zeiten-input-container {
		min-width: 25vw;
		max-width: 25vw;
		overflow: auto;
		height: 100%;
	}

	.zeiten-input-container button:hover {
		cursor: pointer;
	}

	.zeiten-input-control {
		border: 1px solid var(--primary-color);
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: auto;
		margin: 1mm 2.5mm;
	}
	.zeiten-input-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: var(--secondary-color);
		color: var(--menu-font-color);
	}

	.zeiten-input-body {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 5px;
		row-gap: 5px;
		padding: 10px;
		border-top: 1px solid var(--primary-color);
		overflow: auto;
	}

	.zeiten-input-body select {
		background-color: white;
	}

	.zeiten-input {
		text-align: center;
	}

	.zeiten-egfz-tage {
		height: -webkit-fill-available;
		height: -moz-fill-available;
		max-height: 7mm;
		min-width: 25px;
	}

	.zeiten-item-selected > .zeiten-item {
		background-color: var(--custom-light-yellow);
	}

	.zeiten-item-loeschen > .zeiten-item {
		background-color: var(--custom-red);
		color: #fff;
	}

	.zeiten-span1 {
		grid-column: span 1;
		align-items: stretch;
	}

	.zeiten-span2 {
		grid-column: span 2;
		align-items: stretch;
		justify-content: flex-start;
	}
	.zeiten-span4 {
		grid-column: span 4;
		align-items: stretch;
	}

	.egfz-buttons {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1mm;
	}

	#zeiten-mitarbeiter {
		font-weight: bold;
	}

	.pause-input {
		display: flex;
		justify-content: space-between;
		margin-bottom: 2mm;
	}

	.pause-input > div {
		display: flex;
		gap: 5px;
	}

	.pause-input input[type="checkbox"] {
		margin-left: 5px;
	}

	.pause-input span {
		cursor: pointer;
	}

	#zeiten-datum-input {
		margin-bottom: 5px;
		padding: 0 2mm;
	}

	.zeiten-legende {
		display: flex;
		flex-direction: row;
		align-items: center;
		row-gap: 5mm;
		padding: 1mm 0.5mm;
		border-bottom: 1mm solid var(--primary-color);
		background-color: var(--body-background-color);
	}
	.zeiten-legende > span {
		width: 20mm;
		text-align: center;
	}

	.zeiten-legende-auswahl {
		display: grid;
		grid-template-rows: 5mm;
		grid-gap: 1mm;
		grid-template-columns: 1fr;
	}

	.zeiten-legende-auswahl input[type="checkbox"] {
		transform: scale(1.25);
	}

	/********************* Tagesübersicht **********************/
	.tu-body {
		font-size: 14px;
	}

	.tu-list-body {
		width: 70%;
	}
	
	.tu-list-header {
		padding-left: 10px;
		padding-top: 5px;
		display: flex;
		width: 100%;
		gap: 5px;
	}

	.tu-header-status {
		border: 1.5px solid;
	}

	.tu-list {
		display: flex;
		flex-direction: column;
		padding: 5px 10px;
		gap: 5px;
	}
	.tu-item {
		display: grid;
		grid-template-columns: 2.5fr 0.5fr 2fr 1fr 1fr 2fr;
		grid-template-rows: auto;
		border: 2.5px solid var(--secondary-color);
		border-radius: 10px;
		padding: 5px 10px;
	}
	.tu-item:hover {
		background-color: var(--primary-color);
		color: white;
	}
	.tu-item .tu-name {
		font-weight: bold;
	}
	.tu-item input {
		border-radius: 5px;
	}
	.tu-item .tu-status {
		text-align: end;
	}

	.tu-item .tu-hover-pausen:hover {
		position: relative;
	}
	.tu-item .tu-hover-pausen:hover .tu-pausen-info {
		display: block;
	}

	.tu-item .tu-pausen-info {
		display: none;
		position: absolute;
		z-index: 10;
		width: max-content;
		border: 1px solid var(--primary-color);
		border-radius: 5px;
		color: black;
		padding-left: 20px;
		padding-right: 5px;
		background-color: var(--body-background-color);
		margin: 0;
	}

	.tu-item .tu-pausen-info li {
		list-style: decimal;
	}

	.tu-header-status {
		border-radius: 5px;
		padding: 0 5px;
	}

	.tu-header-status:hover {
		background-color: var(--primary-color);
		color: white;
		cursor: pointer;
	}

	.tu-filter-item .tu-filter-parent:hover,
	.tu-filter-item .tu-filter-child:hover {
		background-color: var(--primary-color);
		color: white;
		cursor: pointer;
	}

	.tu-filter-status-active {
		text-shadow: 0.5px 0.5px black;
		font-weight: bold;
		color: white;
	}

	.tu-filter-title {
		padding-left: 5px;
		margin: 5px 5px 0px;
		font-weight: bold;
	}

	.tu-filter-parent {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		padding: 0 5px;
		margin: 5px;
		margin-bottom: 2.5px;
		border: 1.5px solid var(--primary-color);
		border-radius: 5px;
		background-color: var(--primary-color);
		color: white;	
		background-repeat: no-repeat;
		background-position: center right 2.5px;
		background-image: url('./icons/chevron-down-white.svg');
	}

	.tu-filter-parent-open {
		background-image: url('./icons/chevron-up-white.svg');
	}

	.tu-filter-child {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		padding: 0 5px;
		margin: 2.5px 5px;
		border: 1.5px solid var(--primary-color);
		border-radius: 5px;
		background-color: var(--third-color);
		margin-right: 25px;
		color: var(--primary-color);
	}
	.tu-filter-child.hidden {
		display: none;
	}

	/********************* Monatsuebersicht **********************/
	.rotate45 {
		transform: rotate(45deg);
	}

	/********************* Verwaltung **********************/
	.accordion {
		background-color: var(--background-grey);
		width: 100%;
		padding: 15px;
		text-align: left;
		border: none;
		outline: none;
		font-weight: bold;
		font-size: large;
		background-image: url('./icons/chevron-down.svg');
		background-repeat: no-repeat;
		background-position: center right 25px;
		margin-top: 5px;
		margin-bottom: 15px;
	}

	.accordion:first-child {
		margin-top: 0px;
	}

	.accordion.active {
		background-image: url('./icons/chevron-up.svg');
		margin-bottom: 0;
		position: sticky;
		z-index: 10;
		top: 0px;
	}

	.active, .accordion:hover, .accordion-create {
		background-color: var(--background-grey2);
		cursor: pointer;
	}

	.accordion-create {
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		outline: none;
		width: 100%;
		padding: 15px;
		background-color: var(--third-color);
		background-image: none;
	}

	.accordion-create > .plus-icon {
		font-size: x-large;
		margin: 0 10px;
	}

	.accordion-create:hover {
		opacity: 70%;
	}

	.main-container {
		height: 100%;
		overflow: auto;
		font-size: 14px;
	}

	.checkbox-feiertag {
		width: 20%;
	}

	.bs-input-notiz-section {
		display: flex;
		flex-direction: column;
	}

	.bs-input-notiz-section > button {
		margin: 10px auto;
	}

	.bereiche-list-grid, .bereiche-liste {
		display: grid;
		grid-template-columns: 1fr 1fr 0.5fr;
		grid-auto-rows: min-content;
		column-gap: 5px;
		row-gap: 2px;
		align-content: center;
	}

	.bereiche-liste {
		grid-column: span 3;
	}

	.posten-list-grid, .posten-liste {
		display: grid;
		grid-template-columns: 0.66fr 0.66fr 0.66fr 0.5fr;
		grid-auto-rows: min-content;
		column-gap: 5px;
		row-gap: 2px;
	}

	.fieldset3columns label {
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.posten-liste {
		grid-column: span 4;
	}

	.posten-list-grid > input[type="text"],
	.bereiche-list-grid > input[type="text"] {
		width: auto;
	}
	
	.bereiche-liste > input,
	.posten-liste > input,
	.posten-liste > select {
		width: 100%;
		background-color: white;
	}

	.liste-zeile > p, 
	.liste-zeile > input,
	.liste-zeile > select {
		text-align: center;
		overflow: hidden;
		hyphens: auto;
		width: 100%;
		margin: auto;
	}

	.liste-zeile {
		text-align: center;
		display: grid;
		column-gap: 5px;
		padding: 2.5px;
		border: 1px solid transparent;
		line-height: normal;
	}

	.liste-zeile:not(.header):hover {
		background-color: var(--third-color);
		border: 1px solid var(--secondary-color);
		border-radius: 5px;
		color: var(--basic-font-color);
	}

	.lohnarten-liste {
		padding-bottom: 5px;
		display: flex;
		flex-direction: column;
	}

	.lohnarten-liste > button {
		border: none;
		outline: none;
		width: 100%;
		background-color: var(--third-color);
		padding: 10px;
		font-weight: bold;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	
	.lohnarten-liste > button:hover {
		background-color: var(--background-grey2);
		cursor: pointer;
	}

	.historie-liste > .header {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
		position: sticky;
		z-index: 10;
		top: 0px;
	}

	.lohnarten-liste > .header {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
		position: sticky;
		z-index: 10;
		top: 50px;
		min-height: 30px;
	}

	.qu-zeile, .eo-zeile {
		grid-template-columns: repeat(10, 1fr);
	}
	.nba-zeile {
		grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr 1fr 1fr 1fr .5fr 1fr;
	}

	.lag-zeile, .kk-zeile {
		grid-template-columns: 0.5fr 2fr 1fr 1fr 1fr;
	}

	.bw-zeile {
		grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1.5fr .5fr;
	}

	.bdp-zeile, .la-zeile {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr .5fr .5fr;
	}

	.la-export,
	.nba-export {
		display: grid;
    	grid-template-columns: 0.5fr 0.25fr 0.25fr;
	}
	.la-export > input,
	.nba-export > input {
		width: 100%;
	}
	
	.liste-zeile input[type="checkbox"] {
		margin: 2.5px;
		max-height: 20px;
	}

	.pausen-liste {
		margin: 5px;
		display: flex;
		justify-content: space-between;
	}

	.pausen-liste input[type="number"] {
		max-width: 50px;
	}
	
	.pausen-liste input[type="checkbox"] {
		transform: scale(1.5);
	}

	.pausen-liste input {
		text-align: right;
	}

	.pausenmodell-extra-pause {
		background-color: var(--secondary-color);
		border: 1px solid var(--secondary-color);
		border-radius: 5px;
		color: var(--menu-font-color);
		width: 100%;
		transition: transform 0.33s ease-in-out;
	}
	.pausenmodell-extra-pause:hover {
		opacity: 70%;
		cursor: pointer;
		transform: scale(0.975);
	}

	.verwenden-button,
	.entfernen-button {
		border-radius: 5px;
		width: fit-content;
		color: var(--menu-font-color);
	}

	.verwenden-button {
		background-color: var(--custom-green);
		border: 1px solid var(--custom-green);
	}

	.entfernen-button {
		background-color: var(--custom-red);
		border: 1px solid var(--custom-red);
	}

	.entfernen-button:hover,
	.verwenden-button:hover {
		opacity: 70%;
		cursor: pointer;
	}

	input.spalte-bezeichnung {
		text-align: left;	
	}

	.spalte-bezeichnung {
		grid-column: span 2;
	}

	.spalte-rollen {
		display: flex;
		width: 100%;
		gap: 2.5px;
	}
	.spalte-rollen > input {
		width: 100%;
	}

	.notiz-input {
		height: 100%;
		width: 100%;
		border-radius: 5px;
	}

	.schriftverkehr-container {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		height: 100%;
	}

	.schriftverkehr-sidebar {
		grid-column: 1 / 3;
		height: 100%;
		overflow: auto;
		background-color: var(--background-grey);		
	}

	.schriftverkehr-editor {
		grid-column: 3 / 9;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		border: 2px solid var(--primary-color);
		border-top: none;
		border-bottom: none;
	}

	.viewer-container.schriftverkehr-viewer {
		height: calc(100% - 145px);
	}

	.schriftverkehr-variablen {
		grid-column: 9 / 11;
		height: 100%;
		overflow: auto;
		background-color: var(--background-grey);
	}
	
	
	.schriftverkehr-header {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
		font-weight: bold;
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
	}

	.schriftverkehr-header2 {
		background-color: var(--secondary-color);
		color: var(--menu-font-color);
		font-weight: bold;
		height: 45px;
		width: 100%;
		text-align: center;
		line-height: 45px;
		background-repeat: no-repeat;
		background-position: center right 10px;
		background-image: url('./icons/chevron-up-white.svg');
	}

	.schriftverkehr-header3:hover,
	.schriftverkehr-header2:hover {
		cursor: pointer;
		opacity: 0.75;
	}
	
	.schriftverkehr-header2.closed-header,
	.schriftverkehr-header3.closed-header {
		background-repeat: no-repeat;
		background-position: center right 10px;
		background-image: url('./icons/chevron-down-white.svg');
		margin-bottom: .5mm;
	}
	
	.schriftverkehr-header3 {
		background-color: var(--primary-color);
		color: var(--menu-font-color);
		height: 7mm;
		width: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;
		padding-left: 10px;
		gap: 5px;
		background-repeat: no-repeat;
		background-position: center right 10px;
		background-image: url('./icons/chevron-up-white.svg');
	}
	
	.schriftverkehr-header-title {
		font-weight: bold;
		height: 45px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: var(--third-color);
		color: var(--basic-font-color);
		padding-left: 20px;
		column-gap: 5px;
	}

	.schriftverkehr-header-title > input {
		border: none;
		padding: 5px;
		border-radius: 5px;
		font-weight: bold;
		font-size: inherit;
		width: 80%;
	}

	.schriftverkehr-liste {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 2.5px;
	}

	.schriftverkehr-variablen .schriftverkehr-liste-item {
		padding: 0 5px;
	}

	#schriftverkehr-dokumente .schriftverkehr-liste-item {
		text-align: left;
		padding-left: 10px;
		hyphens: auto;
	}
	
	.schriftverkehr-liste-item.schriftverkehr-neu-btn {
		display: flex;
		background-color: var(--custom-green);
		color: var(--menu-font-color);
		align-items: center;
		justify-content: center;
		font-weight: bold;
		padding: 0;
		height: 25px;
	}

	.schriftverkehr-liste-item {
		background-color: white;
		margin: 2.5px;
		padding: 1px;
		border-radius: 10px;
		text-align: center;
		border: 1px solid var(--background-grey2);
	}
	.schriftverkehr-liste-item:hover {
		cursor: pointer;
		opacity: 70%;
	}

	.schriftverkehr-editor-content {
		width: -webkit-fill-available;
		width: -moz-available;
	}

	.schriftverkehr-footer {
		height: 50px;
		background-color: var(--third-color);
		color: var(--basic-font-color);
		margin-top: auto;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.schriftverkehr-footer > button:hover {
		opacity: 70%;
		cursor: pointer;
	}

	.schriftverkehr-footer > #mustervorlage-hinweis {
		text-align: justify;
		font-size: 10px;
		line-height: normal;
		max-width: 80%;
	}

	.schriftverkehr-variablen > .schriftverkehr-liste {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		font-size: small;
	}

	#editor.uneditable {
		cursor: text;
	}

	#editor * {
		font-family: Arial, sans-serif;
		user-select: auto;
		-moz-user-select: auto;
	}

	#editor p {
		text-align: justify;
		white-space: pre-line;
		font-size: 12px;
	}

	/* Override for Firefox, in Firefox werden Leertasten eliminiert aufgrund dieser property */
	@-moz-document url-prefix() {
		#editor p {
			white-space: unset;
		}
  	}

	#editor li, #editor th, #editor td {
		font-size: 12px;
	}

	#editor h1 { font-size: 24px; }
	#editor h2 { font-size: 22px; }
	#editor h3 { font-size: 20px; }
	#editor h4 { font-size: 18px; }
	#editor h5 { font-size: 16px; }
	#editor h6 { font-size: 14px; }

	#editor del {
		color: inherit;
		text-decoration: underline;
	}

	#editor .toastui-editor-contents table th {
		background-color: white;
		color: black;
		font-weight: bold;
	}

	#editor .toastui-editor-contents table th > p {
		color: black;
	}

	#editor .bi-blockquote-left {
		background-image: none;
		font-size: 24px;
	}
}

@media screen and (max-width: 1920px) {
	* {
		font-size: 12px;
	}
	.pgs-pnr, .bewerber-date {
		font-size: 9px;
	}
	.reportlist .schriftverkehr-liste-item,
	.liste-zeile * {
		font-size: 12px;
	}
	.title {
		font-size: 14px;
	}
}

@media screen and (min-width: 1920px) {
	.topmenu {
		font-size: 16px;
	}
	#menu-betriebsstaette,
	#menu-ma-aktiv,
	.filter-select,
	.submenu {
		font-size: 14px;
	}
}

@media screen and (min-width: 2400px) {
	.main-container {
		font-size: 16px;
	}
}