/*li.e-colfocus,
.e-control:focus,
.e-control *:focus,
*:focus,
.e-control:focus-visible,
.e-control *:focus-visible,
*:focus-visible {
	outline: 4px solid var(--input-focus-color);
	outline-offset: 4px;
	border-radius: 5px;
	z-index: 1000;
}*/

.statusbar {
	height: 20px;
	background-color: var(--hellgrau2);
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 0px dotted var(--grid-border-color);
	padding: 0 20px;
	color: black;
	font-size: 10px;
}

.hnc-flex-row.pagetitel-hidden { /*TODO: ganz weg?*/
	display: none;
}

article.content { /*Hauptbereich im MainLayout.razor*/
	display: flex;
	flex-flow: column;
	/*height: calc(100% - 90px);*/
	overflow: auto;
	flex: 1;
}

/*TODO Mike*/
article > div {
	height: 100%;
	overflow-y: auto;
	padding-left: var(--control-focus-width);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1 *, h2:not(:has(.info-popover-wrapper)) *, h3 *, h4 *, h5 *, h6 * {
	color: var(--hncblau);
	/*text-transform: uppercase;*/
	font-family: 'Roboto';
	font-weight: 900;
}

	h1:last-child, h2:last-child, h3:last-child,
	h4:last-child, h5:last-child, h6:last-child,
	.h1:last-child, .h2:last-child, .h3:last-child,
	.h4:last-child, .h5:last-child, .h6:last-child,
	h1 *, h2:not(:has(.info-popover-wrapper)) *, h3 *, h4 *, h5 *, h6 * {
		margin-bottom: 0;
	}

a {
	text-decoration: none;
}

	a:not(.nav-link):hover {
		text-decoration: underline;
	}

/* Main Font */
.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label {
	font-family: 'Roboto'; /* Überschreibt Bootstrap */
}

.e-control, .e-css {
	font-size: inherit;
	font-weight: inherit;
}

/* =========================== */
/* #region Helper */
/* =========================== */
.mb20 {
	margin-bottom: 20px;
}

.hnc-flex-row {
	display: flex;
	flex-direction: row;
}

.hnc-flex-column {
	display: flex;
	flex-direction: column;
}

/* #endregion */

/* =========================== */
/* #region Controls */
/* =========================== */

/* ohne Bootstrap */

input:hover {
	background: var(--hncblauhell2);
	border-color: var(--hncblauhell1)
}

input:focus {
	border: 1px solid var(--hncblau);
	background: #fff;
	box-shadow: 0 0 0 4px rgb(13 110 253 / 25%);
}

input:focus-visible {
	outline: 0;
}

button {
	border-radius: var(--control-borderradius);
	background-color: var(--button-bg-color);
}

/* #region ======= CHECKBOX ======== */

/* Basis Gestaltung */
.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
	background-color: var(--checkbox-bg-color);
	border-color: var(--checkbox-border-color);
	height: 18px;
	width: 18px;
	line-height: 16px;
	margin: 4px;
}

/* readonly / disabled */
.e-checkbox-wrapper.e-checkbox-disabled .e-frame,
.e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame {
	background: var(--checkbox-bg-disabled);
	border-color: var(--checkbox-border-color-disabled)
}

.e-checkbox-wrapper .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkbox-wrapper .e-frame.e-stop {
	background-color: var(--checkbox-bg-color-checked);
	border-color: var(--checkbox-border-color-checked);
	color: #fff;
}

/*Beim klicken auf eine nicht angehakte Checkbox*/
.e-checkbox-wrapper .e-checkbox:active + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
	background-color: var(--checkbox-bg-color-checked);
	border-color: var(--checkbox-border-color-checked);
	color: #fff;
}

	/*Beim klicken auf eine angehakte Checkbox*/
	.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
	.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
		background-color: var(--checkbox-bg-color-checked);
		border-color: var(--checkbox-border-color-checked);
		color: #fff;
	}

/*Beim Focus*/
.hnc-control-wrapper .e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame {
	box-shadow: 0 0 0 4px var(--input-focus-color);
}

.e-checkbox-wrapper .e-check,
.e-css.e-checkbox-wrapper .e-check,
.e-checkbox-wrapper .e-stop,
.e-css.e-checkbox-wrapper .e-stop {
	font-size: 14px;
}

.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label,
.hnc-control-wrapper label {
	font-weight: 600;
	color: var(--hncblau);
	font-size: 12px;
	margin-left: calc(var(--control-borderradius) / 1.3);
}

.hnc-control-wrapper .e-checkbox-wrapper label {
	margin-left: 0;
}

/* Hover */
.e-checkbox-wrapper:hover .e-frame.e-check,
.e-css.e-checkbox-wrapper:hover .e-frame.e-check,
.e-checkbox-wrapper:hover .e-frame.e-stop {
	background-color: var(--hncblauhell2);
	border-color: var(--hncblauhell2);
	color: var(--hncblau);
}

.e-checkbox-wrapper:hover .e-frame,
.e-css.e-checkbox-wrapper:hover .e-frame {
	background-color: var(--hncblauhell2);
	border-color: var(--hncblauhell1);
}

	.e-checkbox-wrapper:hover .e-frame.e-check,
	.e-css.e-checkbox-wrapper:hover .e-frame {
		background-color: var(--hncorangehover);
		border-color: var(--hncorangehover);
		color: var(--white);
	}

.e-checkbox-wrapper:hover .e-label,
.e-css.e-checkbox-wrapper:hover .e-label {
	color: var(--hncblau);
}

.hnc-timepicker-wrapper .e-time-wrapper span.e-input-group-icon.e-time-icon.e-icons.e-active,
.hnc-datepicker-wrapper .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
	background-color: var(--hncorange);
	color: white;
}

/*bools to Display in Grid*/
.booltodisplay {
	font-family: "e-icons";
}

	.booltodisplay.booltodisplay-true:after {
		content: "\e727";
	}

	.booltodisplay.booltodisplay-false:after {
		content: " ";
	}

	.booltodisplay.booltodisplay-null:after {
		content: "\e8a9";
	}

/* #endregion */

/* #region ======= NAVITEMS ======== */

i.nav-icon.hnci-aplus {
	color: white;
}

/* Dropdown-Menu */
.nav-item .main-menu-dropdown {
	background-color: transparent;
	border: 0;
	display: flex;
	margin-top: 0;
	width: 60px;
	height: 60px;
	align-items: center;
}

	.nav-item .main-menu-dropdown.e-btn.e-active {
		background-color: var(--button-bg-active);
	}

		.nav-item .main-menu-dropdown.e-btn.e-active span.e-btn-icon {
			color: white;
		}

	.nav-item .main-menu-dropdown:hover,
	.nav-item .main-menu-dropdown:focus {
		background-color: var(--hncblauhell2)
	}

		.nav-item .main-menu-dropdown:hover span.e-btn-icon,
		.nav-item .main-menu-dropdown:focus span.e-btn-icon {
			color: var(--hncblau);
		}

	.nav-item .main-menu-dropdown span.e-btn-icon {
		color: var(--hncblaugrau);
		font-size: 2.2rem;
		width: unset;
		height: auto;
		margin: 0;
	}

	.nav-item .main-menu-dropdown .e-caret {
		display: none;
	}

/* #endregion */

/* main Style */

.e-float-input input,
.e-float-input.e-control-wrapper input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea {
	/*background: var(--input-bg-color);
		border-radius: var(--control-borderradius);*/
	border-radius: 0; /*Wird aber vom parent element überlagert*/
}

.e-input-group.e-control-wrapper.hnc-just-view {
	/*		border-radius: 0;
		background-color: transparent;
*/ cursor: not-allowed;
}

	.e-input-group.e-control-wrapper.hnc-just-view span.e-input {
		padding-left: 8px;
		line-height: 30px;
		height: 30px;
		box-sizing: border-box;
		min-width: 0;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-indent: 0;
		background-color: transparent;
	}

/* readonly / disabled */
.e-float-input textarea[readonly],
.e-float-input.e-control-wrapper textarea[readonly] {
	background: var(--input-bg-color-disabled);
	color: var(--input-color-disabled);
}

/* Focus */

/*
	.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
	.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
	.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
	.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),*/
.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
/*	.e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus,
*/ .e-toolbar .e-toolbar-item .e-tbar-btn:focus,
.e-toolbar .e-toolbar-item:focus,
.e-btn:focus {
	border-color: var(--hncblau);
	/*box-shadow: none;*/
	z-index: 100;
}

/* Icons */

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
	background: #fff;
	border-radius: var(--control-borderradius);
}

.e-input-group:has(.e-input[readonly]):hover,
.e-input-group.e-control-wrapper:has(.e-input[readonly]):hover,
.e-float-input:has(input[readonly]):hover,
.e-float-input.e-control-wrapper:has(input[readonly]):hover,
.e-float-input:has(textarea[readonly]):hover,
.e-float-input.e-control-wrapper:has(textarea[readonly]):hover {
	border-color: pink;
}

/* Hover */

.e-input-group:hover .e-input-group-icon,
.e-input-group.e-control-wrapper:hover .e-input-group-icon {
	color: var(--hncblauhell1);
}

.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
	background: var(--hncblauhell2);
	color: var(--hncblau);
	/*border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;*/
}

/* Das Inhalt-löschen-Icon mit roten Background */
.e-input-group:not(.e-disabled) .e-input-group-icon.e-clear:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon.e-clear:hover {
	background: var(--red);
	color: var(--white);
	/*border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;*/
}

/* Placeholder */
input.e-input.e-control.e-textbox::placeholder {
	color: var(--grau);
}

.e-input-group:hover input.e-input::placeholder,
.e-float-input:hover input.e-input::placeholder,
.e-float-input.e-input-group:hover input.e-input::placeholder,
.e-float-input.e-control-wrapper:hover input.e-input::placeholder,
.e-float-input.e-input-group.e-control-wrapper:hover input.e-input::placeholder {
	color: var(--hncblauhell1);
}

/* Bei Float ist das Label der 'Placeholder' */
.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):hover input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
	color: var(--hncblauhell1);
}

/* FloatLabel */
label.e-float-text,
.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
	color: var(--grau);
	background: transparent;
}

.e-float-input input:focus ~ label.e-float-text,
.e-float-input input:valid ~ label.e-float-text,
.e-float-input input ~ label.e-label-top.e-float-text,
.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
.e-float-input input label.e-float-text.e-label-top,
.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
.e-float-input.e-input-focus input ~ label.e-float-text {
	/*font-size: 15px;*/
	/*font-weight: 500;*/
	padding-right: 5px;
	padding-left: 5px;
	top: 26px;
	left: calc( var(--control-borderradius) + 5px );
	/*transform: translate3d(var(--control-borderradius), -25px, 0) scale(1);*/
	/*background-color: white;*/
	/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=) repeat-x center;*/
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%);
	width: fit-content;
	color: var(--hncblau);
	border-radius: calc( var(--control-borderradius) / 2 );
}

/*#region bigger controls */

.hnc-control-wrapper.hnc-control-big input.e-input,
.hnc-control-wrapper.hnc-control-big textarea.e-input,
.hnc-control-wrapper.hnc-control-big .e-input-group,
.hnc-control-wrapper.hnc-control-big .e-input-group.e-control-wrapper, label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
	font-size: 2rem;
}

	.hnc-control-wrapper.hnc-control-big input.e-input,
	.hnc-control-wrapper.hnc-control-big .e-input-group input,
	.hnc-control-wrapper.hnc-control-big .e-input-group.e-control-wrapper input,
	.hnc-control-wrapper.hnc-control-big .e-input-group input.e-input,
	.hnc-control-wrapper.hnc-control-big .e-input-group.e-control-wrapper input.e-input {
		height: 64px;
		border-radius: var(--control-borderradius);
	}

.hnc-control-wrapper.hnc-control-big .e-label {
	font-size: 15px;
}

.hnc-control-wrapper.hnc-control-big .e-float-input input:focus ~ label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input input:valid ~ label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input input ~ label.e-label-top.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input input label.e-float-text.e-label-top,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
.hnc-control-wrapper.hnc-control-big .e-float-input.e-input-focus input ~ label.e-float-text {
	font-size: 15px;
	font-weight: 500;
	/*transform: translate3d(var(--control-borderradius), -48px, 0) scale(1);*/
	top: 24px;
	left: calc( var(--control-borderradius) + 5px );
}

button.hnc-control-big {
	height: 64px;
}

.hnc-form-content .e-btn-group .hnc-control-wrapper {
	margin-bottom: 0;
	margin-right: 0;
	padding: 0;
}

.hnc-control-wrapper.hnc-buttongroup-wrapper .e-btn-group {
	box-shadow: none;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	display: flex;
}

	.hnc-control-wrapper.hnc-buttongroup-wrapper .e-btn-group .e-btn {
		background-color: var(--hellgrau);
		color: var(--hncblaugrau);
		border-color: var(--grid-border-color);
		line-height: 1.8;
	}

		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-btn-group .e-btn:hover {
			background-color: var(--hncblauhell2);
			color: var(--hncblau);
			border-color: var(--grid-border-color);
		}

		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-btn-group .e-btn:active,
		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-btn-group input:active + label.e-btn,
		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-btn-group input:checked + label.e-btn,
		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-css.e-btn-group .e-btn:active,
		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-css.e-btn-group input:active + label.e-btn,
		.hnc-control-wrapper.hnc-buttongroup-wrapper .e-css.e-btn-group input:checked + label.e-btn {
			background-color: var(--button-bg-active);
			border-color: transparent;
			color: #fff;
			outline: #6c757d 0 solid;
			outline-offset: 0;
		}

span.screenreader-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/*#endregion */

/* #region DropDownList */
.e-input-group.e-ddl,
.e-input-group.e-control-wrapper.e-ddl {
	padding-left: 8px;
}

.e-ddl.e-input-group .e-input-value {
	display: flex;
	align-items: center;
}

	.e-ddl.e-input-group .e-input-value > div {
		flex: 1 1 auto;
	}

.e-input-group.e-input-focus.e-ddl.e-icon-anim:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-ddl.e-icon-anim:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-ddl.e-icon-anim.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

li.e-list-item > div,
span.e-input-value > div {
	display: flex;
}

	li.e-list-item > div > text,
	span.e-input-value > div > text {
		flex: 1 1 auto;
		/*		text-align: center;
*/
	}

	li.e-list-item > div > .image,
	span.e-input-value > div > .image {
		padding-right: 5px;
		/*		text-align: center;
*/
	}

.e-popup.e-ddl {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: var(--control-borderradius);
	border-bottom-right-radius: var(--control-borderradius);
	margin-top: 0;
	border-color: var(--hncblau);
}

.e-dropdownbase .e-list-item {
	padding-left: 16px;
}

	.e-dropdownbase .e-list-item:last-child {
		border-bottom-left-radius: var(--control-borderradius);
		border-bottom-right-radius: var(--control-borderradius);
	}

	.e-dropdownbase .e-list-item.e-active {
		background-color: var(--hncblau);
	}

	.e-dropdownbase .e-list-item.e-hover {
		background: var(--hncblauhell2);
	}

	.e-dropdownbase .e-list-item.e-active.e-hover {
		background: var(--hncblauhell1);
	}

/* Kalender Picker */
.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
	background-color: var(--button-bg-active);
}

.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
	border-left: 2px solid var(--hncblau);
}

.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day {
	border-right: 2px solid var(--hncblau);
}

/*#endregion */

/*#region buttons */
.hnc-control-wrapper.hnc-button-wrapper {
	display: inline-block;
	position: relative;
}

	.hnc-control-wrapper.hnc-button-wrapper button.e-control.e-btn {
		width: 100%;
	}

	.hnc-control-wrapper.hnc-button-wrapper:not(.charm) button.e-btn:disabled {
		background-color: var(--button-bg-disabled);
		color: var(--button-text-disabled);
		border-color: var(--button-bg-disabled);
		box-shadow: none !important;
		cursor: not-allowed !important;
	}

.e-btn, .e-css.e-btn,
.hnc-button-wrapper button.e-btn,
.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]),
.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary {
	text-align: center;
	color: var(--button-text-color);
	background-color: var(--button-bg-color);
	border-radius: var(--control-borderradius);
	box-shadow: none;
	border: 1px solid var(--button-bg-color);
	font-family: Roboto;
}

/* footer mit primary und secondary */
.e-footer-content .e-btn.e-flat:not([DISABLED]) {
	color: var(--button-text-secondary);
	background-color: var(--button-bg-secondary);
	/*border-radius: var(--control-borderradius);
	box-shadow: none;
	border: 1px solid;*/
}

.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]) {
	background-color: var(--button-bg-color);
}

/* auskommentiert, da der Button nicht richtig dargestellt wird --> bsp. Datepicker Orgbereiche modal
	.e-daterangepicker.e-popup .e-footer .e-btn.e-flat:not(.e-primary),*/
.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat:not(.e-primary),
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat:not(.e-primary) {
	background-color: var(--button-bg-secondary);
}

.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled,
.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled {
	background-color: var(--button-bg-disabled);
	/*border-color: rgba(13, 110, 253, 0.65);*/
	color: white;
	opacity: 0.65;
}

.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:hover,
.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:hover {
	background-color: var(--button-bg-hover);
	color: var(--button-text-hover);
}

.hnc-button-wrapper button.e-btn:hover,
.e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]),
.e-footer-content .e-btn:hover.e-flat:not([DISABLED]) {
	background-color: var(--button-bg-hover);
	border-color: var(--button-bg-hover);
}

.hnc-button-wrapper.hnc-control-big button.e-btn {
	font-size: 30px;
}

/*#endregion */

/*#endregion */

.hnc-form-container {
	flex: 1 1 auto;
	/*overflow: auto; Darf nicht auto sein wegen sticky header */
	padding: 10px;
}

.hnc-form-content {
	/*max-width: 500px;
	min-width: 200px;*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

/* =========================== */
/* #region ToolTip */
/* =========================== */

/*Wird nicht benutzt*/
.e-tip-content button.e-btn {
	background-color: var(--hncblau);
	padding: 0px 6px 0 6px;
	border-width: 0;
	/*border-color: black;*/
	border-radius: 0px 4px 4px 0px;
}

/*Click Icon TODO: evtl. padding oder margin rechts für den Fließtext. Aktuell nicht benutzt*/
.e-tip-content p span.tooltipcalltoclick svg {
	width: 16px;
	fill: white;
	position: absolute;
	right: 3px;
	bottom: 3px;
}

/* Wiki Dialog */
.e-dialog.wiki-dialog {
}

	.e-dialog.wiki-dialog .e-dlg-content {
		display: flex;
		padding: 0;
	}

.tooltip-html-iconbar {
	display: flex;
	flex-direction: column;
	border-left-width: 1px;
	border-left-style: solid;
	background-color: var(--hncblau);
	border-color: #e5e5e5;
}

	.tooltip-html-iconbar button.e-btn {
		border-width: 0;
		padding: 6px;
	}

.tooltip-html-content {
	/*position: absolute;
	margin: 10px 0;
	height: 60vh;*/
	padding: 0 10px 4px 10px;
	overflow: auto;
	flex: 1 1 auto;
}

	/* Wiki-Tags verstecken */
	.tooltip-html-content .tags span:has(a.wikilink1) {
		opacity: 0;
	}

.tooltip-html-iconbar > .e-lib:first-child {
	border-bottom: 1px solid #e5e5e5;
	border-radius: 0;
}

.tooltip-html-iconbar .e-lib:last-child {
	margin-top: auto;
	border-top: 1px solid #e5e5e5;
	border-radius: 0;
}

.has-simple-tooltip {
	position: relative;
}

.simple-tooltip {
	width: 160px;
	background-color: var(--hncblau);
	color: #fff;
	text-align: center;
	padding: 5px 10px;
	border-radius: 6px 0 0 6px;
	position: absolute;
	z-index: 1;
	left: -160px;
	top: 0;
	opacity: 0;
	visibility: hidden;
	transition: 250ms;
}

.has-simple-tooltip:hover .simple-tooltip {
	opacity: 1;
	visibility: visible;
}

.has-simple-tooltip.e-btn .e-btn-icon.e-icon-left {
	margin-left: auto;
	width: auto;
}

/*#endregion*/

/* =========================== */
/* #region Grid */
/* =========================== */
.hnc-grid-container {
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
}

	.hnc-grid-container .e-grid .e-content {
		border-radius: 0 !important;
	}

.e-grid {
	border: 0;
	width: 100%;
}

	.e-grid .e-gridheader:has(tr.e-emptyrow) {
		display: none;
	}

	.e-grid .e-gridcontent:has(tr.e-emptyrow) table.e-table {
		height: 100%
	}

	.e-grid .e-gridcontent tr.e-emptyrow {
		background: var(--charm-bg-color);
		height: 70px;
	}

		.e-grid .e-gridcontent tr.e-emptyrow td {
			/*position: relative;*/
		}

			.e-grid .e-gridcontent tr.e-emptyrow td .empty-grid-message {
				position: absolute !important;
				top: 50%;
				left: 20px;
				transform: translate(0,-50%);
			}

.e-gridheader .e-sortfilter {
	background-color: var(--hncblau);
}

.e-grid .e-gridheader {
	/*border-width: 0;
		margin-bottom: 10px; SPLITGRID*/
	margin-bottom: 0; /* NON SPLITGRID */
	margin-left: var(--control-focus-margin); /* Ausrichtung des Grids zu den Charms mit Focus-Rahmen-Margin */
	margin-right: var(--control-focus-margin); /* Ausrichtung des Grids zu den Charms mit Focus-Rahmen-Margin */
	flex-shrink: 0;
	border-left-style: solid;
	border-right-style: solid;
	border-width: 2px 2px 0 2px;
	/*border-left-width: 2px;
		border-right-width: 2px;
		border-top-width: 2px;*/
	border-color: var(--hncblau);
	border-top-left-radius: var(--control-borderradius); /* NON SPLITGRID */
	border-top-right-radius: var(--control-borderradius); /* NON SPLITGRID */
	/*background-color: var(--hncblau);*/
	padding-right: 0 !important;
}

	.e-grid .e-gridheader .e-headercontent {
		/* border-radius: var(--control-borderradius); SPLITGRID */
		/*border-top-left-radius: var(--control-borderradius); /* NON SPLITGRID */
		/*border-top-right-radius: var(--control-borderradius); /* NON SPLITGRID */
		/*border-bottom-left-radius: 0; /* NON SPLITGRID */
		/*border-bottom-right-radius: 0; /* NON SPLITGRID */

		border: 0;
		/*border-left-width: 2px;
			border-right-width: 2px;
			border-top-width: 2px;
			border-color: var(--hncblau);*/
	}

tr.e-filterbar {
	border-bottom: 1px solid var(--grid-border-color); /* SPLITGRID */
	border-bottom: 0; /* NON SPLITGRID */
}

.e-grid .e-filterbarcell,
.e-grid .e-filterbarcelldisabled {
	background-color: var(--hncblauhell2);
	background-image: none;
	border-color: #dee2e6;
	height: auto;
	padding: 0;
}

.e-grid .e-filterbar .e-filterdiv {
	height: 0;
	transition: 500ms;
	overflow: hidden;
}

.e-grid .e-filterbar.filterbar-is-visible .e-filterdiv {
	height: 40px;
}

.e-grid .e-filterbarcell .e-input-group {
	/* benötigt für den Focus-Rahmen */
	width: calc(100% - 8px);
	margin: 4px;
	border-radius: var(--control-borderradius);
}

	.e-grid .e-filterbarcell .e-input-group .e-clear-icon {
		width: 15px;
	}

.e-grid .e-filterbarcell .e-checkbox-wrapper input {
	width: 1px;
}

.e-grid .e-filterbarcell .e-checkbox-wrapper {
	line-height: 0;
	height: 100%;
	padding: 6px;
}

	.e-grid .e-filterbarcell .e-checkbox-wrapper label {
		width: 26px;
	}

.e-grid .e-clipboard {
	display: none;
}

.e-grid .e-gridcontent {
	/* border-radius: var(--control-borderradius); SPLITGRID */
	border-bottom-left-radius: var(--control-borderradius); /* NON SPLITGRID */
	border-bottom-right-radius: var(--control-borderradius); /* NON SPLITGRID */
	border-top-left-radius: 0; /* NON SPLITGRID */
	border-top-right-radius: 0; /* NON SPLITGRID */
	border-width: 0 2px 2px;
	border-style: solid;
	border-color: var(--hncblau);
	margin-left: var(--control-focus-margin); /* Ausrichtung des Grids zu den Charms mit Focus-Rahmen-Margin */
	margin-right: var(--control-focus-margin); /* Ausrichtung des Grids zu den Charms mit Focus-Rahmen-Margin */
	position: relative;
}

	.e-grid .e-gridcontent tbody,
	.e-grid div.e-headercontent thead {
		/*box-shadow: 0px 0px 7px 7px var(--hellgrau2);*/
	}

/* Content-Fader am Ende der Tabelle (Verdeckt den Scrollbalken :-(  */
/*
		.e-grid .e-gridcontent:after {
			position: absolute;
			z-index: 1;
			bottom: 0;
			left: 0;
			pointer-events: none;
			background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
			width: 100%;
			height: 4em;
			content: "";
		}
	*/

.e-grid .e-table {
	border-collapse: collapse;
}

.e-grid .e-content .e-table {
	margin-bottom: 0px;
}

	/* Vorschaubilder im Grid */
	.e-grid .e-content .e-table .e-row td .grid-thumb {
		width: 100px;
	}

.e-grid div.e-content,
.e-grid div.e-headercontent,
.e-grid div.e-gridcontent div.e-content {
	background-color: var(--charm-bg-color);
	/*box-shadow: inset 0 0 5px 5px var(--grau);*/
}

tr.e-row:last-of-type {
	/*box-shadow: 0 5px 5px var(--grau);*/
}

.e-grid .e-pager {
	border: transparent;
	position: relative;
	padding-left: 0;
	padding-right: 0;
	margin-left: var(--control-focus-margin); /* Ausrichtung des Grids zu den Charms mit Focus-Rahmen-Margin */
	margin-right: var(--control-focus-margin); /* Ausrichtung des Grids zu den Charms mit Focus-Rahmen-Margin */
	line-height: 1;
	margin-bottom: 5px;
	background-color: transparent;
	width: calc(100% - (2 * var(--control-focus-margin))); /* volle Breite abzgl. 2x den Focus-Rahmen */
	/*padding-top: 28px;*/
}

	.e-grid .e-pager:has( > .e-pagerexternalmsg),
	.e-grid .e-pager:has( > .hnc-grid-status-bar) {
		padding-top: 28px;
	}

.egid .e-pager div.e-parentmsgbar {
	padding-top: 10px;
}

.e-pager .e-prevpagedisabled, .e-pager .e-prevpage, .e-pager .e-nextpage, .e-pager .e-nextpagedisabled, .e-pager .e-lastpagedisabled, .e-pager .e-lastpage, .e-pager .e-firstpage, .e-pager .e-firstpagedisabled, .e-pager .e-numericitem {
	background-color: transparent;
}

.e-pager .e-pagercontainer {
	background-color: transparent;
}

.e-pager .e-pagermessage,
.e-pager .e-pagerexternalmsg {
	display: none;
}

.hnc-grid-status-bar {
	background-color: var(--hncblau);
	color: white;
	position: absolute;
	left: var(--control-borderradius);
	top: 0;
	padding: 2px 1em 4px 1em;
	font-size: 14px;
	line-height: 14px;
	border-bottom-left-radius: var(--control-borderradius);
	border-bottom-right-radius: var(--control-borderradius);
	max-width: calc(100% - var(--control-borderradius) - var(--control-borderradius));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: none;
}

	.hnc-grid-status-bar .and {
		margin: 0 10px
	}

	.hnc-grid-status-bar .field {
	}

	.hnc-grid-status-bar .operator {
	}

	.hnc-grid-status-bar .value {
		font-weight: bold;
	}

.e-pager .e-pagerdropdown {
	/*margin-right: 0;*/
	margin-top: -20px;
}

.e-pager .e-pagerconstant {
	margin: 0 0 5px 0;
}

.e-grid.e-resize-lines .e-filterbarcell,
.e-grid.e-rtl.e-resize-lines .e-filterbarcell {
	border-top: 0;
}

.e-grid .e-headercell {
	background-color: var(--hncblau);
	color: white;
}

	.e-grid .e-headercell:hover {
		background-color: var(--hncblauhell1);
		color: var(--hncblau);
	}

.e-grid .e-gridheader .e-columnheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
	color: white;
}

.e-grid .e-gridheader .e-filterbar .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
	color: var(--white);
}

	.e-grid .e-gridheader .e-filterbar .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow):hover {
		color: var(--hncblau);
	}

.e-grid .e-gridheader thead .e-icons:not(.e-check):not(.e-stop) {
	font-size: 14px;
	font-weight: 600;
}

.e-headercell .e-control {
	font-size: 14px;
	font-weight: 700;
}

.hnc-grid-container .e-grid th.e-headercell[aria-sort=ascending],
.hnc-grid-container .e-grid th.e-headercell[aria-sort=descending] {
	background-color: var(--hncorange);
}

	.hnc-grid-container .e-grid th.e-headercell[aria-sort=ascending]:hover,
	.hnc-grid-container .e-grid th.e-headercell[aria-sort=descending]:hover {
		background-color: var(--hncorangehover);
	}

	.hnc-grid-container .e-grid th.e-headercell[aria-sort=ascending] .e-headertext,
	.hnc-grid-container .e-grid th.e-headercell[aria-sort=descending] .e-headertext,
	.hnc-grid-container .e-grid th.e-headercell[aria-sort=ascending] .e-sortfilterdiv,
	.hnc-grid-container .e-grid th.e-headercell[aria-sort=descending] .e-sortfilterdiv {
		color: white;
		opacity: 1;
	}

.e-grid td.e-active {
	background-color: var(--hncorange);
}

.e-grid tr:hover td.e-active {
	background-color: var(--hncorangehover);
}

.e-grid.e-gridhover .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
	background-color: var(--hncblauhell2);
	color: var(--hncblau);
}

.e-grid .e-rowcell {
	border-right-width: 1px;
}

	.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd),
	.e-grid .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd),
	.e-grid .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd),
	.e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
	.e-grid .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
	.e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
		color: var(--main-text-color);
	}

	/* Label der Checkbox ausblenden bei Bool-Spalten mit Checkbox. Sonst ist die Checkbox nicht zentriert  */
	.e-grid .e-rowcell .e-checkbox-wrapper span.e-label {
		display: none;
	}

	/* Icon Design bei Bool-Spalten */
	.e-grid .e-rowcell span.grid-bool {
		color: var(--charm-text-color);
		font-size: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.e-grid .e-rowcell span.grid-bool.grid-bool-success {
			color: var(--hncgruen);
		}

		.e-grid .e-rowcell span.grid-bool.grid-bool-fail {
			color: var(--red);
		}

		.e-grid .e-rowcell span.grid-bool.grid-bool-alert {
			color: var(--red);
		}

		.e-grid .e-rowcell span.grid-bool.grid-bool-warning {
			color: var(--hncorange);
		}

.e-grid td.e-active.e-rowcell span.grid-bool {
	color: white;
}

.e-altrow {
	background-color: var(--hellgrau);
}

.e-grid .hnc-grid-colorblock { /* Der farbige Indikator in manchen Grids */
	border: 1px solid var(--grau);
	vertical-align: middle;
}

	.e-grid .hnc-grid-colorblock.hnc-grid-colorblock-text {
		height: 28px;
	}

	.e-grid .hnc-grid-colorblock.hnc-grid-colorblock-indicator {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 2px;
		border-radius: var(--control-borderradius);
		width: 20px;
		height: 20px;
	}

.e-grid .e-ccdlg .e-ccul-ele {
	padding-left: calc( var(--control-focus-offset) + var(--control-focus-width));
	padding-right: calc( var(--control-focus-offset) + var(--control-focus-width));
}

.e-grid .e-dialog.e-ccdlg {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(30px);
	box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
}

.e-grid .e-ccdlg .e-dlg-content {
	background: transparent;
}

/*.e-filterdiv.e-fltrinputdiv input.e-input {
	height: 1.25rem;
	font-size: 0.8rem;
}

.e-grid .e-filterbarcell {
	overflow: visible;
}
*/
.e-pager .e-currentitem, .e-pager .e-currentitem.e-numericitem.e-focused {
	background-color: var(--hncorange);
	color: white;
}

.e-pager .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
	background: var(--hncblauhell2);
	color: var(--hncblau);
}

.e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover,
.e-pager .e-pager-default:hover {
	background: var(--hncblauhell2);
	color: var(--hncblau);
}

.e-pager .e-numericitem.e-focused:not(.e-active):not(.e-np):not(.e-pp):hover {
	background: var(--hncblauhell2);
	color: var(--hncblau);
}

.e-pager .e-spacing, .e-pager .e-numericitem:hover, .e-pager .e-currentitem {
	border-radius: var(--control-borderradius);
}

/*#endregion */
.e-pager .e-numericitem,
.e-pager .e-numericitem.e-np,
.e-pager .e-numericitem.e-pp {
	width: 32px;
	height: 32px;
	line-height: 33px; /* Einen Pixel mehr als Höhe damit der Text vertikal mittig scheint */
	padding: 0;
	border-right-width: 0;
	color: var(--hncblaugrau);
	border-radius: var(--control-borderradius);
}

	.e-pager .e-numericitem.e-currentitem:hover {
		padding: 0;
		color: var(--white);
		background: var(--hncorangehover);
	}

.e-pager .e-pagercontainer .e-firstpage, .e-pager .e-pagercontainer .e-prevpage, .e-pager .e-pagercontainer .e-firstpagedisabled, .e-pager .e-pagercontainer .e-prevpagedisabled, .e-pager .e-pagercontainer .e-nextpage, .e-pager .e-pagercontainer .e-lastpage, .e-pager .e-pagercontainer .e-nextpagedisabled, .e-pager .e-pagercontainer .e-lastpagedisabled {
	padding: 11px;
	border-width: 0;
}

.e-pager div.e-icons.e-pager-default {
	color: var(--hncblaugrau);
	border-radius: var(--control-borderradius);
}

.e-pager .e-numericitem.e-currentitem {
	/*padding: 7px 10.5px 9px 9.5px;*/
	border-width: 0;
	color: white;
	padding: 0;
}

.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
	padding: 0;
}

/*#region temp raus */
@media only print {
}

.e-pager .e-pagercontainer {
	/*border-radius: var(--control-borderradius);*/
	border-width: 0;
	margin-bottom: -2px;
}

/*#endregion */
/* SCROLLBAR */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

::-webkit-scrollbar-thumb {
	background-color: var(--hncblaugrau);
	border: 0 none #fff;
	border-radius: 7px;
}

	::-webkit-scrollbar-thumb:hover {
		background-color: var(--charm-bg-hover);
		border: 0 none #fff;
		border-radius: 7px;
	}

	::-webkit-scrollbar-thumb:horizontal {
		/*background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032.96%2019.99%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7Bfill%3A%20%23fff%3B%7D%3C/style%3E%3C/defs%3E%3Crect%20class%3D%22cls-1%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%229.42%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228.25%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2218.84%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 14px;*/
	}

	::-webkit-scrollbar-thumb:hover:horizontal {
		/*background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032.96%2019.99%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7Bfill%3A%20%23005ca2%3B%7D%3C/style%3E%3C/defs%3E%3Crect%20class%3D%22cls-1%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%229.42%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228.25%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2218.84%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;*/
	}

	::-webkit-scrollbar-thumb:vertical {
		/*background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2019.99%2032.96%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7Bfill%3A%20%23fff%3B%7D%3C/style%3E%3C/defs%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%22-7.64%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(12.35%20-7.64)%20rotate(90)%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%221.78%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(21.77%201.78)%20rotate(90)%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%2220.61%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(40.6%2020.61)%20rotate(90)%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%2211.19%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(31.19%2011.19)%20rotate(90)%22/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 14px 14px;*/
	}

	::-webkit-scrollbar-thumb:hover:vertical {
		/*background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2019.99%2032.96%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7Bfill%3A%20%23005ca2%3B%7D%3C/style%3E%3C/defs%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%22-7.64%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(12.35%20-7.64)%20rotate(90)%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%221.78%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(21.77%201.78)%20rotate(90)%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%2220.61%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(40.6%2020.61)%20rotate(90)%22/%3E%3Crect%20class%3D%22cls-1%22%20x%3D%227.64%22%20y%3D%2211.19%22%20width%3D%224.71%22%20height%3D%2219.99%22%20rx%3D%221.24%22%20ry%3D%221.24%22%20transform%3D%22translate(31.19%2011.19)%20rotate(90)%22/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;*/
	}

::-webkit-scrollbar-track {
	background-color: var(--dunkler);
	border-radius: 7px;
}

@media only screen and (max-width: 1200px) {
	.slider-container {
		display: none;
	}
}

/* SyncFusion BugFix */

.e-checkbox-wrapper .e-frame.e-stop {
	/*background-color: #0d6efd !important;
	border-color: #0d6efd !important;
	color: #fff !important;*/
}

/* Passwort Eye-Icon von Edge ausblenden */
::-ms-reveal {
	display: none;
}

.e-grid .e-rowcell.e-active:not(.e-editedbatchcell):not(.e-updatedtd) /*,
.e-grid .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd)*/ {
	color: white;
}

/* Carousel Image Slider */
.slider-container {
	background-color: #e5e5e5;
	height: 100%;
	margin: 0 auto;
	width: 50%;
}

.e-carousel .e-carousel-items .e-carousel-item .img-container {
	height: 100%;
}

	.e-carousel .e-carousel-items .e-carousel-item .img-container img {
		object-fit: cover;
	}

/* Image Text */
.e-carousel .e-carousel-items .e-carousel-item .img-caption {
	bottom: 2em;
	color: #fff;
	font-size: 2em;
	height: auto;
	position: absolute;
	padding: 0.3em 1em;
	text-align: center;
	width: 100%;
}

/* Slider Buttons */

.e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
	height: 20px;
	border-radius: 15px;
	background-color: var(--hncorange);
	border-color: var(--hncorange);
}

.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
	transition: 1500ms;
}

.e-carousel .e-carousel-indicators .e-indicator-bars {
	align-items: center;
}

/* report-filter-wrapper */

div.filter-dialog-content {
	display: flex;
	gap: 15px;
}

	div.filter-dialog-content .filter-dialog-content-reportbereich,
	div.filter-dialog-content .filter-dialog-content-report,
	div.filter-dialog-content .filter-dialog-content-builder {
		flex: 1;
	}

	div.filter-dialog-content .filter-dialog-content-items {
		overflow: auto;
		max-height: 50vh;
	}

.report-filter-element-wrapper {
	background-color: var(--hellgrau2);
	margin: 0.7em 0.3em;
	border-radius: var(--control-borderradius);
	/*border-color: black;*/
	padding: 0;
	overflow: hidden;
}

	.report-filter-element-wrapper .hnc-label-wrapper {
		background-color: var(--hncblau);
		padding: 4px 8px;
	}

		.report-filter-element-wrapper .hnc-label-wrapper label {
			font-weight: 600;
			color: white;
		}

	.report-filter-element-wrapper .report-filter-element-content {
		padding: 4px 26px 4px 4px;
		border-width: 0 1px 0 1px;
		border-style: solid;
		border-color: darkgrey;
		display: flex;
		position: relative;
		border-bottom: 1px dotted darkgrey;
	}

	.report-filter-element-wrapper .hnc-button-wrapper {
		width: 100%;
	}

		.report-filter-element-wrapper .hnc-button-wrapper button {
			background-color: transparent;
			border-width: 0 1px 1px 1px;
			border-bottom-right-radius: var(--control-borderradius);
			border-bottom-left-radius: var(--control-borderradius);
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			border-color: darkgrey;
			color: var(--hncblau);
			font-size: 1.4em;
			padding: 0;
		}

	.report-filter-element-wrapper .report-filter-element-content .hnc-control-wrapper {
		flex: 1 1 auto;
	}

		.report-filter-element-wrapper .report-filter-element-content .hnc-control-wrapper label {
			color: var(--hncblau);
			font-size: 0.8em;
			font-weight: 700;
			margin-left: var(--control-borderradius);
		}

	.report-filter-element-wrapper .report-filter-element-content.report-filter-element-groupcontent {
		border-bottom: 1px dotted darkgrey;
	}

	.report-filter-element-wrapper .report-filter-element-content .e-icons.report-filter-element-icon {
		position: absolute;
		top: calc( 50% - 9px );
		right: 6px;
		color: orangered;
	}

		.report-filter-element-wrapper .report-filter-element-content .e-icons.report-filter-element-icon:focus {
			outline: 2px solid var(--hncblauhell1);
		}

/* #region Button oben Links in der Ecke */

a:hover i.nav-icon.hnci-aplus:before {
	display: none;
}

a:not(:hover) i.nav-icon.hnci-aplus_color {
	display: none;
}

/*#endregion */

/* TODO: hier gemerkt aus dem HNCDialog  */
.modal {
	display: block;
}

.todo {
	background: yellow;
	padding: 3px 6px;
	border: 1px dashed black;
}

/*TODO Hover Icons Test*/

button:hover:not([disabled]) .hnci-loeschen:before {
	content: '\e837';
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
	background-color: var(--hncblau);
}

.e-treeview .e-list-icon.orange {
	color: orange;
}

.e-treeview .e-list-icon.blue {
	color: blue;
}

.e-treeview .e-list-icon.green {
	color: green;
}

/*selected item in listbox */
.e-listbox-container .e-list-item.e-selected {
	background: var(--hncorange);
	color: white;
}

/* Experiment: Row-Highlighting */
tr:has(td span.hnc-rowstate-edit) {
	border-left: 4px solid var(--hncblauhell1);
}

tr:has(td span.hnc-rowstate-new) {
	border-left: 4px solid var(--hncgruen);
}

tr:has(td span.hnc-rowstate-delete) {
	border-left: 4px solid red;
}

.hnc-grid-container:has(.previewbox-is-visible) .hnc-grid-preview {
	display: block;
	position: absolute;
	right: 0;
	width: 30%;
	background: #e7e7e7;
	border-radius: 7px;
	padding: 10px;
	overflow: auto;
}

.hnc-grid-container:has(.previewbox-is-visible) .e-gridheader,
.hnc-grid-container:has(.previewbox-is-visible) .e-gridcontent {
	width: calc(100% - 30% - 15px);
}

.btn-toggle-previewbox.previewbox-is-visible:after {
	content: "";
	bottom: -10px;
	width: 0;
	height: 0;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--hncorange);
}

/* kein hover effekt bei disabled buttons, das verwirrt sonst */
button[disabled],
.e-toolbar .e-toolbar-item:has(button[disabled]) {
	pointer-events: none !important;
	cursor: not-allowed !important;
}

span.mandatory-indicator {
	position: relative;
}

	span.mandatory-indicator:after {
		content: "*";
		position: absolute;
		/* background: red; */
		color: red;
		padding: 0px 3px;
		border-radius: 3px;
		/* font-size: 12px; */
		font-weight: bold;
	}

/* Text verstecken, aber für Screenreader erkennbar */
.hnc-control-wrapper .aria-description,
.nav-label.nav-label-hidden,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.hnci-main-icons.rotate180 {
	transform: rotate(180deg);
}

.hnci-main-icons.rotate90 {
	transform: rotate(90deg);
}

.hnci-main-icons.rotate270 {
	transform: rotate(270deg);
}

.e-btn .e-btn-icon.btn-notext {
	margin-left: 0;
}

button.e-upload-browse-btn {
	margin: 4px 0;
}