/* ---------------------------------------------------- */
/* -------------------- Verwaltung -------------------- */
/* ---------------------------------------------------- */
:root {
	
}




/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:save:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=save&icon.size=24&icon.color=%23e8eaed */
.managerFormIconButton {
	font-family: var(--ManagerIcons);
	font-size: 26px;
	color: white;
	background-color: var(--black);
	padding: 0;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	line-height: 100%;
	text-decoration: none;
	border-radius: 0;
}

.managerFormIconButton:hover {
	color: white;
	background-color: var(--lightblack);
}

.fontIcons {
	font-family: var(--ManagerIcons) !important;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	vertical-align: top;
	text-decoration: none;
}


.validation-errors {
	display: block;
	width: 100%;
	padding-left: 20px;
}

.validation-message {
	color: #c61a09;
	font-size: 90%;
}

.invalid {
	border-color: #c61a09 !important;
}


#managerWrapper, #managerWrapper h1, #managerWrapper h2, #managerWrapper h3, #managerWrapper h4 {
	font-family: "Segoe UI", Arial, sans-serif;
}

#managerHeadline {
	width: 100%;
}

#managerWrapper {
	
}

#managerWrapper, #managerForm {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: flex-start;
}

#managerMenueWrapper, #managerFormWrapper {
	background-color: white;
	border: 2px solid var(--lightblack);
	color: var(--black);
}

#managerMenueWrapper {
	width: 300px;
	padding: 20px;
}

#managerMenueWrapper select {
	width: 100%;
	margin-bottom: 10px;
}

#managerMenue {
	margin: 0;
	padding-left: 20px;
	list-style: square;
	height: 600px;
	overflow-y: auto;
	scrollbar-width: thin;
}

#managerMenue a {
	text-decoration: none;
}

#managerFormWrapper {
	width: 100%;
	padding: 20px;
}

#managerMenueWrapper ~ #managerFormWrapper {
	width: calc(100% - 300px - 30px);
	margin-left: 30px;
}

#managerForm {
	column-gap: 20px;
	row-gap: 10px;
}

.managerFormLeft {
	width: 200px;;
}

.managerFormRight {
	width: calc(100% - 200px - 20px);
}

.managerFormRight > input:not([type="checkbox"], [type="date"]), .managerFormRight > textarea, .managerFormRight select {
	width: 100%;
	max-width: 300px;
}

.managerFormRight > input[type="checkbox"] {
	width: 20px;
    height: 20px;
}

.managerFormRight > textarea {
	height: 200px;
}

.managerFormUploadPreviewWrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: var(--abstand_9);
}

.managerFormUploadPreview {
	width: 100px;
	height: 100px;
	border: 1px solid var(--lightblack);
}

.managerFormUploadPreview a, .managerFormUploadPreview img {
	width: 100%;
	height: 100%;
}

.managerFormUploadPreview img {
	object-fit: scale-down;
	object-position: center;
	display: block;
}

.managerFormUploadPreview a {
	font-family: var(--ManagerIcons);
	font-size: 50px;
	line-height: 100%;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.managerFormUploadPreview a:hover {
	color: inherit;
}

.managerFormUploadWrapper {
	width: calc(100% - var(--abstand_9) - 100px);
}

.managerFormUploadButtonsWrapper {
	display: inline-block;
	vertical-align: top;
}

.managerFormUpload {
	margin-bottom: var(--abstand_9);
}

#managerMenueOpenChk {
	display: none;
}


@media (min-width: 1025px) {
	#managerMenueCloseArea, #managerMenueOpenLbl, #managerMenueCloseLbl {
		display: none;
	}
}

@media (max-width: 1024px) {
	#managerMenueWrapper {
		position: fixed;
		top: 0;
		left: -300px;
		width: 100%;
		max-width: 300px;
		height: 100%;
		transition: left 400ms ease-in-out;
		z-index: 3;
	}

	#managerMenueOpenChk:checked ~ #managerMenueWrapper {
		left: 0;
		box-shadow: 5px 10px 18px;
	}

	#managerMenueCloseArea, #managerMenueOpenLbl {
		z-index: 1;
	}

	#managerMenueCloseLbl {
		display: block;
		width: 30px;
		height: 29px;
		cursor: pointer;
		position: absolute;
		top: 14px;
		right: 14px;
	}
	
	#managerMenueCloseLbl::before, #managerMenueCloseLbl::after {
		display: block;
		width: 100%;
		height: 4px;
		background-color: #292929;
		border-radius: 2px;
		content: '';
		position: absolute;
		left: 0px;
	}
	
	#managerMenueCloseLbl::before {
		top: 13px;
		transform: rotate(-45deg);
	}
	
	#managerMenueCloseLbl::after {
		bottom: 12px;
		transform: rotate(45deg);
	}
	
	#managerMenueCloseArea {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		background-color: rgba(0, 0, 0, 0.2);
		transition: opacity 400ms ease-in-out;
	}

	#managerMenueOpenChk:checked ~ #managerMenueCloseArea {
		opacity: 1;
		pointer-events: all;
	}

	#managerMenueOpenLbl {
		position: fixed;
		right: 0;
		top: calc(50% - 25px);
        display: block;
        width: 50px;
        height: 50px;
		background-color: white;
	}

	#managerMenueOpenLbl::after {
		content: "";
        width: 16px;
        height: 16px;
        border-top: 3px solid var(--black);
        border-right: 3px solid var(--black);
        border-right-width: 3px;
        border-right-style: solid;
        border-right-color: var(--black);
        position: absolute;
		top: 16px;
        left: 20px;
        transform: rotate(225deg);
	}


	#managerMenueWrapper ~ #managerFormWrapper {
		width: 100%;
		margin-left: 0;
	}

	#managerMenueWrapper select {
		width: calc(100% - 40px);
	}
}

@media (max-width: 600px) {
	#managerForm {
		gap: 0;
	}

	.managerFormLeft, .managerFormRight {
		width: 100%;
	}

	.managerFormRight {
		margin-bottom: 10px;
	}
}