* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/* font-family: Verdana, Geneva, sans-serif; */
	font-family: 'Inter', sans-serif; 
	/* font-family: 'Open Sans', sans-serif;  */
	/* font-family: 'Roboto', sans-serif;  */
	/* font-family: 'Lato', sans-serif;  */
	/* font-family: 'Montserrat', sans-serif;  */
	/* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
	/* margin: 10px; */
}

:root {
	/*Login*/
	--dialog-background-color: #fff;
	--dialog-border-radius: 0.75rem;
	--control-border-radius: 0.25rem;
	--application-border-color: #cfcfcf;
	--dialog-overlay-color: rgba(0, 0, 0, 0.2);
	/* Black background with opacity */

	/* --login-dialog-width: 350px; */
	--login-dialog-background-color: var(--dialog-background-color);
	--login-border-radius: var(--dialog-border-radius);
	--login-application-border-color: var(--application-border-color);
	/*nicht verwendet*/
	--login-eye-icon-color: gray;

	/*NAVBAR*/
	--navbar-menu-background-color: var(--index-sidebar-background-color);
	--navbar-border-color: var(--application-border-color);
	--navbar-text-color: rgba(33, 37, 41, 0.75);
	/* black; */

	/*INDEX*/
	--index-body-background-color: white;
	--index-sidebar-background-color: #fff;
	--index-sidebar-user-text-color: black;
	/*nicht verwendet*/
	--index-sidebar-menu-text-color: black;
	--index-sidebar-menu-caption-text-color: #930F00;
	--index-sidebar-border-color: var(--application-border-color);
	--index-sidebar-bottom-text-color: black;
	--index-sidebar-max-width: 260px;
	/* default 260px; */
	--index-sidebar-min-width: 0px;
	--index-sidebar-main-margin: 0px;
	/* default 5px; */
	--index-sidebar-hover-background-color: #e8e8e8;
	/*#033d83;*/
	--index-sidebar-hover-text-color: #033d83;
	/*black; white;*/
	/*index und table*/
	--index-sidebar-active-text-color: #033d83;
	/*black; white;*/
	--index-sidebar-active-background-color: #e8e8e8;
	/*#033d83;*/
	--index-main-submenu-height: 50px;
	--index-main-submenu-background-color: #fff;
	--index-sidebar-caption-of-submenu-text-color: #930F00;
	/* #797979;*/
	--index-main-submenu-main-top: calc(var(--navbar-menu-height) + var(--index-main-submenu-height));
	--sidebar-border-radius-selected-item: var(--control-border-radius);
	--index-transition-time: 500ms;

	/*delete*/
	--common-application-border-color: var(--application-border-color);
	/*delete und edit*/
	--common-border-radius: var(--dialog-border-radius);
	/*delete edit select*/

	/*EDIT*/
	--delete-dialog-width: 450px;
	/*nicht verwendet*/
	--login-text-color: rgba(33, 37, 41, 0.75);
	/*login und edit*/

	/*BUTTONS*/
	--button-edit-text-color: #033d83;
	--button-edit-border-color: #033d83;
	--button-edit-background-color: #fff;
	--button-edit-hover-text-color: #fff;
	--button-edit-hover-border-color: #033d83;
	--button-edit-hover-background-color: #033d83;

	--button-delete-text-color: #c82333;
	--button-delete-border-color: #c82333;
	--button-delete-background-color: #fff;
	--button-delete-hover-text-color: #ad1f2d;
	--button-delete-hover-border-color: #ad1f2d;
	--button-delete-hover-background-color: #fff;

	--button-create-text-color: #033d83;
	--button-create-border-color: #033d83;
	--button-create-background-color: #fff;
	--button-create-hover-text-color: #fff;
	--button-create-hover-border-color: #033d83;
	--button-create-hover-background-color: #033d83;

	--button-save-text-color: white;
	--button-save-border-color: green;
	--button-save-background-color: green;
	--button-save-hover-text-color:  white;
	--button-save-hover-border-color:#046f04;
	--button-save-hover-background-color:#046f04; /*rgb(1, 108, 1);*/

	--button-cancel-text-color: white;
	--button-cancel-border-color: #c82333;
	--button-cancel-background-color: #c82333;
	--button-cancel-hover-text-color: white;
	--button-cancel-hover-border-color:#b12231;
	--button-cancel-hover-background-color:#b12231;

	--button-font-size: 0.875rem;
	--button-text-color: #033d83;	/*#fff;*/
	--button-background-color: #fff;/*#033d83*/	
	--button-border-color: #033d83;/*#033d83*/	
	--button-hover-text-color: #fff;
	--button-hover-background-color: #033d83;
	--button-hover-border-color: #033d83;
	--button-border-radius: var(--control-border-radius);

	/*INPUT*/
	--input-focus-color: #033d83;
	--input-border-color: var(--application-border-color);
	--common-dialog-background-color: var(--dialog-background-color);
	/*delete edit*/
	--input-border-radius: var(--control-border-radius);

	/*DROPDOWN*/
	--dropdown-border-radius: var(--control-border-radius);
	--dropdown-button-text-color: #033d83;
	/*#fff;*/
	--dropdown-button-background-color: #fff;
	/*#033d83;*/
	--dropdown-button-border-color: #033d83;
	/*#033d83;*/
	--dropdown-button-hover-text-color: #033d83;
	/*nicht verwendet*/
	--dropdown-button-hover-background-color: #e8e8e8;
	/*nicht verwendet*/
	--dropdown-button-hover-border-color: #e8e8e8;
	/*nicht verwendet*/

	--dorpdown-selection-hover-border-radius: var(--control-border-radius);
	--dorpdown-selection-hover-background-color: #e8e8e8;
	--dropdown-selection-hover-text-color: #033d83;
	--dropdown-content-background-color: #f9f9f9;


	/*table*/
	--table-table-background-color: white;
	--table-table-header-background-color: white;
	--table-table-header-text-color: #930F00;
	--table-table-header-border-color: var(--application-border-color);
	--table-table-data-hover-background-color: #033d83;
	--table-table-data-hover-text-color: white;
	--table-table-data-alternate-color: #e8e8e8;
	/*#033d83;*/
	--table-table-data-text-color: black;
	--table-table-border-bottom-color: #033d83;
	--table-selected-row-border-radius: var(--control-border-radius);

	/*Bei Änderungen*/
	--changed-color:#ffc800;
	--default-color: #8bcd8a;
	--button-toggle-hover-background-color: #e8e8e8;
}

.container {
	display: flex;
	align-items: center;
	/* 	justify-content: space-between; */
	/*damit mehere controls links ausgerichtet werden*/
	height: 40px;
	width: 100%;
	gap: 5px;
	/* margin-bottom: 10px; */
}

.status_offen::before{
	color: green;
	content: "offen";
	display: flex;
}

.status_gesperrt::before{
	color: red;
	content: "eingefroren";
	display: flex;
}

.mt10{
	margin-top: 10px;
}

.mb10{
	margin-bottom: 10px;
}

.mt20{
	margin-top: 20px;
}

.mb20{
	margin-bottom: 20px;
}

.mt40{
	margin-top: 40px;
}

.mb40{
	margin-bottom: 40px;
}

.start,
.end {
	display: flex;
	gap: 10px;
	/* Abstand zwischen den Elementen */
}

.label_number_of_record{
	width: 40px;
	text-align: right;
}

.spacer {
	flex-grow: 1;
	/* Dieser Bereich nimmt den restlichen Platz ein */
}

.eintraege {
	margin-left: 5px;
}

.search {
	margin-left: 5px;
}

.input-with-icon {
	position: relative;
}

.input-with-icon span {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
}

/*Mauszeiger als Pointer, wenn über eye-icon*/
.input-with-icon span:hover {
	cursor: pointer;
}

.gap20 {
	gap: 20px;
 }

.bottom {
	position: absolute;
	bottom: 130px;
	right: 10px;
 }

h1 {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 26px;
}

h2 {
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: normal;
	padding: 10px 0 5px 0 !important;
	border-bottom: 0.5px solid var(--login-text-color);
}

.containerCaptionButton {
 display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-bottom: 0.5px solid var(--login-text-color); */
    padding-bottom: 8px;     
	padding-top: 5px;  
}

.containerCaptionButton h2 {
    /* flex-grow: 1;          nimmt die ganze Breite */
    /* margin: 0;             optional */
    /* border-bottom: 1px solid #000; dein border */
	  margin: 0;
}

#etm-new-button {
    margin-left: 20px;      /* Abstand zum h2 */
}

h3 {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: normal;
	padding: 5px 0 0 0 !important;
	margin-bottom: 0.3em;
	margin-top: 0;
}

.h-color {
	color: var(--table-table-header-text-color);
}

article p {
	line-height: 22px;
	font-size: 0.875rem;
	/* line-height: 1.3rem; */
	margin: 0;
	margin-bottom: 0px;
	margin-bottom: 0.8rem;
	color: #5F5F5F;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;

}

/* .tooltip-container{

} */

.tooltip-text {
	position: absolute;
	background-color: white;
	color: black;
	padding: 8px;
	border-radius: 4px;
	/* font-size: 14px; */
	white-space: nowrap;
	pointer-events: none; /* Tooltip nicht fokussierbar */
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 1000;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid gray;	
}

/* Pfeil auf rechter Seite des Tooltips */
/* .tooltip-text::after {
	content: "";
	position: absolute;
	border-width: 8px;
	border-style: solid;
	border-color: transparent transparent transparent #333;
} */

.save-text {
	margin-top: 5px;
	margin-bottom: 5px;
	background: var(--changed-color); 
	display: none;
	border-radius: 5px;
	padding: 5px; 
}

  .changed {
    /* background-color: #8bcd8a; */
	background-color: var(--changed-color);
  }

  .input-value {
	background-color: var(--default-color);
  }