/* Deklaration der Farben, die für die Button-Elemente genutzt werden. Bspw. bei den Prozess-Buttons und Filter-Buttons*/
:root {
	--main-color-btn-success: #bff7c9;
	--main-color-btn-success-border: #b6d8bc;
	--main-color-btn-success-hover: #ace8b7;
	--main-color-btn-warning: #ffe1aa;
	--main-color-btn-warning-border: #f5d08c;
	--main-color-btn-warning-hover: #ffd588;
	--main-color-btn-danger: lightcoral;
	--main-color-btn-danger-border: #e47373;
	--main-color-btn-danger-hover: #e06868;
	--main-color-modal-window-title: #9995cc;
	--main-color-modal-window-content: rgba(255, 255, 255, 0.75);
}



body {
	font-family: 'Asap';
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
	position: relative;
	background-image: url("../img/musterkanten.png");
	background-repeat: repeat;
	padding-top: 84px; /*padding für die navbar*/

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

body {
	min-height: 100vh;
}

@supports (min-height: 100dvh) {
	body {
		min-height: 100dvh;
	}
}


html {
	font-family: 'Asap';
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

.h3, h3 {
	font-size: large;
	font-weight: 800;
	padding: 0;
	margin: 0;
}

.content-div {
	/*margin-top: 84px;*/ /*dieses margin für die navbar wurde entfernt um flatpickr an der richtigen stelle anzuzeigen.*/
	flex-grow: 1;
	padding: 3%;
}

@media (max-width: 600px) {
	.content-div {
		padding: 0px !important;
		padding-top: 3% !important;
	}
}

.kursiv {
	font-style: italic;
}

.relativity {
	position: relative;
}

.overflow-hidden {
	overflow: hidden;
}

.fullWidth {
	width: 100%;
}

.hide {
	display: none;
}

.scroll-stop {
	overflow: hidden;
}

.font-weight-normal {
	font-weight: 100;
}

.relative {
	position: relative;
}

.input-icon {
	position: relative;
}

	.input-icon > i {
		position: absolute;
		display: block;
		transform: translate(0, -50%);
		top: 50%;
		pointer-events: none;
		width: 25px;
		text-align: center;
		font-style: normal;
	}

	.input-icon > input {
		padding-left: 25px;
		padding-right: 0;
	}

.input-icon-right > i {
	right: 0;
}

.input-icon-right > input {
	padding-left: 0;
	padding-right: 25px;
	text-align: right;
}

.min-height-100 {
	min-height: 100px;
}

.min-height-75 {
	min-height: 75px;
}

.margin-bottom-15 {
	margin-bottom: 15px;
}

/****************************************************/


.invalid-input {
	/*border: 2px solid red !important;*/
	border: 1px solid red !important;
}

	.invalid-input:focus {
		outline: none !important;
		/*border: 2px solid red !important;*/
		border: 1px solid red !important;
	}

.einsatz-beendet {
	color: #7c7c7c;
}

.einsatz-aktiv {
	font-weight: bold;
}

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

.padding-0 {
	padding: 0;
}

.padding-top-0-force {
	padding-top: 0 !important;
}

.show {
	display: block;
}

.test {
	min-width: 150px;
}

.padding-right {
	padding-right: 5px;
}

.button-bar > * {
	margin-right: 5px;
}

	.button-bar > *:last-child {
		margin-right: 0;
	}

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

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

/*****************************************/

.footnote {
	font-size: 9pt;
	color: #757575;
}

	.footnote .erstellt {
		text-align: left;
	}

	.footnote .geaendert {
		text-align: right;
		/*float:right;*/
	}

	.footnote .user-info {
		cursor: default;
	}

/***************************/

.checkbox-small {
	width: 21px;
	height: 21px;
	display: inline;
	text-align: left;
}

.checkbox-label {
	text-align: left;
	padding-top: 3px;
	padding-left: 5px;
}

/********************************/

.category-tag-container {
	list-style-type: none;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

	.category-tag-container li {
		border: 1px solid #a8a8a8;
		margin-right: 1px;
		margin-bottom: 1px;
		/*padding-left: 5px;
		padding-right: 5px;
		padding-top:4px;
		padding-bottom:4px;*/
		padding: 0;
		text-align: center;
		border-radius: 5px;
		cursor: pointer;
		color: #a8a8a8;
	}

		.category-tag-container li label {
			cursor: pointer;
			width: 100%;
			height: 100%;
			margin: 0;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 4px;
			padding-bottom: 4px;
		}

		.category-tag-container li:hover {
			color: black;
			border-color: black;
		}

		.category-tag-container li.selected {
			background-color: #d1d4ed;
			color: #404677;
			border: 1px solid #404677;
		}


/***************************************************/
.status-progress-bar {
	height: 18px;
	margin: 0;
	padding: 0px;
	width: 100%;
	margin-bottom: 10px;
}

td > .status-progress-bar {
	height: 18px;
	margin: -8px;
	padding: -8px;
	width: calc(100% + 16px);
	margin-bottom: 10px;
}

/************* text für password-validierung durch js *************/
.passwords-dont-match {
	color: red;
}

/************ panel icon list***************/
ul.panel-icon-list-left {
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
	list-style-type: none;
}

	ul.panel-icon-list-left > li {
		margin-left: 15px;
		cursor: pointer;
	}

/************ excel export button ******************/
.export-button {
	color: #333;
	background-color: rgba(255, 255, 255, 0.6);
	border-color: #ccc;
	max-height: 30px;
	padding-top: 4px;
}


.remove-outline {
	outline: none;
}

@media print {
	.aveo-nav {
		display: none !important;
	}

	a[href]:after {
		content: none !important;
	}
}

.remove-outline {
	outline: none;
}


/** rundmail tagcloud*/
.rundmail.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin: 0;
	padding: 10px 10px;
	border: 1px solid #ccc;
	background-color: white;
	min-height: 34px;
	border-radius: 4px;
	overflow: auto;
	max-height: 120px;
}

	.rundmail.tag-cloud li {
		border: 1px solid #a8a8a8;
		margin-right: 1px;
		margin-bottom: 1px;
		padding-left: 5px;
		padding-right: 5px;
		text-align: center;
		border-radius: 5px;
		font-size: smaller;
		cursor: pointer;
		color: #a8a8a8;
	}

		.rundmail.tag-cloud li label {
			cursor: pointer;
			margin: 0;
		}

			.rundmail.tag-cloud li label img {
				height: 18px;
				margin-bottom: 2px;
				opacity: 0.5;
			}

		.rundmail.tag-cloud li:hover label img {
			opacity: 1.0;
		}

		.rundmail.tag-cloud li:hover {
			color: black;
			border-color: black;
		}

		.rundmail.tag-cloud li.selected {
			background-color: #d1d4ed;
			color: #404677;
			border: 1px solid #404677;
		}

.user-details {
	font-size: x-small;
	color: grey;
	white-space: nowrap;
}

/******* grouping *********/
fieldset.grouping {
	min-width: 0;
	margin: auto;
	margin-bottom: 20px;
	padding: .35em .625em .75em;
	border: 1px solid #b5b5b5;
	border-radius: 5px;
}

	fieldset.grouping legend {
		display: inherit;
		width: auto;
		padding: 0;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 16px; /*21px;*/
		font-weight: bold;
		color: #676767;
		border-bottom: none;
		margin-bottom: 0;
	}

/***** fix fuer custom validation text *****/
/*gefunden auf https://stackoverflow.com/questions/4370131/asp-net-mvc-3-rc-razor-validationmessagefor-custommessage-and-clientsidevalida#answer-4373204 */
.field-validation-valid {
	display: none;
}

.validation-summary-valid {
	display: none;
}

.input-validation-error {
	border-color: #a94442;
	box-shadow: 0 0px 3px #a94442;
}

	.input-validation-error ~ .note-editor {
		border-color: #a94442 !important;
		box-shadow: 0 0px 3px #a94442 !important;
	}


/******** sso error message **********/
.sso-error-message-background {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.57);
	position: fixed;
	z-index: 99999;
}

.sso-error-message {
	padding: 25px;
	background-color: white;
	border: 1px solid black;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

	.sso-error-message .fehlermeldung {
		font-weight: bold;
	}

	.sso-error-message h3 {
		margin-bottom: 15px;
	}

	.sso-error-message button {
		float: right;
	}


.aveo-input-currency {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='50%25' y='50%25' dy='.35em' font-size='14' font-family='Arial, sans-serif' text-anchor='middle' fill='%23000'%3E€%3C/text%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.5rem center;
	background-size: 20px 20px;
	padding-left: 2.5rem;
}

.aveo-entgeltgruppen-beschreibung {
	display: block;
	margin-top: 4px;
	font-size: small;
	cursor: pointer;
}

	.aveo-entgeltgruppen-beschreibung:hover {
		color: #337ab7;
	}

.aveo-entgeltgruppen-gruppenname {
	font-size: 110%;
}

.aveo-form-hr {
	margin: -5px 0 1rem;
	border-top: 1px solid #00000052;
}

.aveo-checkbox {
	width: auto;
	min-width: 34px;
}

.aveo-checkbox--field-input {
	width: 100%;
}



/* CSS für das Element mit der Klasse "mit-beschreibung" */
.mit-beschreibung {
	display: inline-flex;
	align-items: center;
}

	.mit-beschreibung::after {
		content: "\f059";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		margin-left: 8px;
		font-size: 16px;
		color: #000;
		cursor: help;
	}


.zulagen-warning-icon {
	left: 0.5rem;
	color: orange;
}

.form-group:has(.entgeltgruppe-warning-icon) .form-control {
	border-color: orange;
	padding-left: 30px; /* Platz für das Icon */
}

.entgeltgruppe-warning-icon {
	position: absolute;
	left: 23px;
	top: 50%;
	transform: translateY(-50%);
	color: orange;
	pointer-events: none;
}

/* alle Felder, die required oder data-val-required sind, 
   aber NICHT readonly oder disabled */
.form-group:has( input[required]:not([readonly]):not([disabled]), input[data-val-required]:not([readonly]):not([disabled]), select[required]:not([readonly]):not([disabled]), select[data-val-required]:not([readonly]):not([disabled]), textarea[required]:not([readonly]):not([disabled]), textarea[data-val-required]:not([readonly]):not([disabled]) ) > label::after,
.form-group:has( input[required]:not([readonly]):not([disabled]), input[data-val-required]:not([readonly]):not([disabled]), select[required]:not([readonly]):not([disabled]), select[data-val-required]:not([readonly]):not([disabled]), textarea[required]:not([readonly]):not([disabled]), textarea[data-val-required]:not([readonly]):not([disabled]) ) > div > label::after {
	content: " *";
	color: #a94442;
	display: inline; /* Stern bleibt in der gleichen Zeile */
	white-space: nowrap; /* verhindert Zeilenumbruch */
	margin-left: 2px; /* kleiner Abstand zum Text */
	vertical-align: baseline; /* optisch auf Linie mit Text */
}


.outer-boundary {
	max-width: 1500px;
	margin: 0 auto;
}

.outer-boundary-single {
	max-width: 750px;
	margin: 0 auto;
}