:root {
    --panelmenu_farbe:      #e9e9e9;
    --panelmenu_text:       black;
    --panelsubm_farbe:      #e9e9e9;
    --panelsubm_text:       #555555;
    --panelsubh_farbe:      lightgray;
    --panelsubh_text:       black;

    --header_farbe:	    lightgray;

    --mainmenu_farbe:	    #C2C2C2;
    --mainmenu_text:	    black;
    --mainhover_farbe:	    #C2C2C2;
    --mainhover_text:	    black;

    --circle_farbe:	    darkgray;
    --circle_text:	    black;

    --submenu_farbe:	    #C2C2C2;
    --submenu_text:	    black;
    --subhover_farbe:       lightgray;
    --subhover_text:	    black;

    --search_farbe:         darkgray;
    --search_text:          black;
    --search_placeholder:   lightgray;

/* Energy /*/
    --header_farbe:	    #8a00e5;

    --mainmenu_farbe:	    #5b0a91;
    --mainmenu_text:	    white;
    --mainhover_farbe:	    #5b0a91;
    --mainhover_text:	    white;

    --circle_farbe:	    #5b0a91;
    --circle_text:	    white;

    --subpanel_farbe:	    #5b0a91;
    --submenu_farbe:	    #5b0a91;
    --submenu_text:	    white;

    --subhover_farbe:       #8a00e5;
    --subhover_text:	    white;

    --panelmenu_farbe:      #eeeeee;
    --search_farbe:         #5b0a91;
    --search_text:          black;
    --search_placeholder:   lightgray;
    /* */

/* Lime /* /
    --header_farbe:	    #bbe33d;
    --mainmenu_farbe:	    #9abb33;
    --mainmenu_text:	    black;
    --circle_farbe:	    #9abb33;
    --circle_text:	    black;
    --subpanel_farbe:	    #9abb33;
    --submenu_text:	    black;
    --subhover_text:	    black;
    --subhover_farbe:       #bbe33d;
    --panelmenu_farbe:      #eeeeee;
    --search_farbe:         #9abb33;
    --search_text:          black;
    --search_placeholder:   #bbe33d;
/* */

/* Mobility /* /
    --header_farbe:	    #00cccc;
    --mainmenu_farbe:	    #019999;
    --mainmenu_text:	    black;
    --circle_farbe:	    #019999;
    --circle_text:	    black;
    --subpanel_farbe:	    #019999;
    --submenu_text:	    black;
    --subhover_text:	    black;
    --subhover_farbe:       #00cccc;
    --panelmenu_farbe:      #eeeeee;
    --search_farbe:         #019999;
    --search_text:          black;
    --search_placeholder:   #00cccc;
/* */

/* Innomotics /* /
    --header_farbe:	    #08191f;

    --mainmenu_farbe:	    #1a323c;
    --mainmenu_text:	    white;
    --mainhover_farbe:	    #1a323c;
    --mainhover_text:	    #e1f000;

    --submenu_farbe:	    #1a323c;
    --submenu_text:	    white;
    --subhover_farbe:	    #08191f;
    --subhover_text:	    #e1f000;

    --search_farbe:         #1a323c;
    --search_text:          white;
    --search_placeholder:   #e1f000;

    --circle_farbe:	    #e1f000;
    --circle_text:	    #08191f;
/* */

}

body {
		font-family: "Bitstream Vera Sans", arial;
		font-size: small;
        margin: 0;
        padding: 0;
}

.right-section {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* space-x-6 */
}

.content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
}

h1 {
		margin-top: 0px;
}

a { 
/* 		color: navy; */
		color: black;
		text-decoration: none;
/* 		font-weight: bold; */
}

a:hover {
		background-color: lightgray;
}

table {
		border-collapse: collapse;
}

th {
		background-color: lightgray;
		padding: 5px;
/* 		padding-left: 10px; */
/* 		padding-right: 20px; */
		border: 1px solid gray;
}

td {
		padding: 5px;
/* 		padding-left: 10px; */
/* 		padding-right: 20px; */
		border: 1px solid gray;
}

input[type="checkbox"]:disabled {
		display: none;
}

#navigator {
/* 		position: fixed; */
/* 		position: absolute; */
/* 		width: 19%; */
/* 		overflow: hidden; */
/* 		overflow: auto; */
/* 		left: 0px; */
/* 		top: 50px; */
		padding-left: 10px;
		background-color: aliceblue;
}
#navigator a { 
		color: black;
		text-decoration: none;
		font-weight: normal;
}

#bereichsdaten th {
		width: 150px;
}

#bereichsdaten td {
		width: 300px;
		border-bottom: 1px solid gray;
}

#login-frame {
	width:100%;
	display: flex;
	justify-content: center;
}

#login {
	position: absolute;
	top: 200px;
	padding: 50px;
	background-color: WhiteSmoke;
	border: 1px solid gray;
}

.overlayHidden {
    display: none;
}
.overlay {
    width: 30em;
    background: coral;
    border: 2px solid;
    border-radius: 0.5em .5em .5em;
    position: fixed;
    top: 20%;
    left: 30%;
    padding: 2%;
}

.rowfilter {
	height: 100%;
	width: 80%;
	font-size: small;
	padding: 0px;
	padding-left: 5%;
	padding-right: 5%;
	border: 0;
	border-radius: 5px;
	margin: 0px;
}

.filtercell {
	font-size: small;
	padding: 0px;
	padding-top: 4px;
	padding-bottom: 3px;
}

.tderror {
	background: lightcoral;
}

.trskip {
	background: #eeeed1;
}

.trupdate {
	background: lightgreen;
}

.trinsert {
	background: lightblue;
}

.tooltip {
	position: relative;
	/*display: inline-block;
	border-bottom: 1px dotted black;*/
}
  
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
0	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/*************************************** Kopfzeile ************************************/

.main-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--header_farbe);
    z-index: 40;
}

.header-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 4rem; /* h-16 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*************************************** Hauptmenu ************************************/

.mainmenu {
    list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
    margin: 0;
    padding: 0;
    display: flex; /* Richtet die Hauptpunkte horizontal aus */
    height: 4rem; /* Stellt sicher, dass das Menü die Höhe des Header-Containers einnimmt */
    align-items: center; /* Zentriert die Hauptpunkte vertikal im Header */
}

.mainmenu > li {
    position: relative;
    margin: 0 0.5rem;
    padding: 0 0.5rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.mainmenu > li:hover {
    background-color: var(--mainhover_farbe);
}

.mainmenu a {
    text-decoration: none;
    color: var(--mainmenu_text);
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
}

.mainmenu a:hover {
    background-color: transparent;
/*    color: var(--mainhover_text);           /* Funktioniert nur, wenn man direkt über dem Link ist */
}

.mainmenu > li:hover > .submenu {
    visibility: visible;
    opacity: 1;
}

/********************************** Submenus (Aufklappmenus) ********************************/

.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background-color: var(--submenu_farbe);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 100;
}

.submenu li {
    display: block;
    color: var(--submenu_text);
}

.submenu a {
    padding: 0.75rem 1rem;
    display: block;
    font-weight: 400;
}

.submenu a:hover {
    background-color: var(--subhover_farbe);
    color: var(--subhover_text);
}

/*************************************** Account-Info/Logout Button ************************************/

.account-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--circle_farbe);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--circle_text);
    cursor: pointer;
    margin-left: 1.5rem;
}

.account-circle:hover {
    opacity: 0.8;
}


.account-circle-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.account-circle-wrapper:hover > .account-dropdown {
    visibility: visible;
    opacity: 1;
}

.account-dropdown {
    position: absolute;
    top: 4rem;
    right: 0;
    min-width: 12rem;
    background-color: var(--mainmenu_farbe);
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 100;
}

/*************************************** Account-Info/Logout AufklappMenü ************************************/

.user-info {
    color: var(--submenu_text);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #335363;
}

.dropdown-link {
    display: block;
    text-decoration: none;
    color: var(--submenu_text);
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

.dropdown-link:hover {
    background-color: var(--subhover_farbe);
    color: var(--subhover_text);
}

.dropdown-link.logout {
    color: red;
    text-decoration: bold;
}

/*************************************** Search Box ************************************/

.search-box {
    display: flex;
    align-items: center;
    background-color: var(--search_farbe);
    border-radius: 0.25rem;
    padding: 0.25rem;
    margin-right: 2rem;
}

.search-input {
    border: none;
    background: transparent;
    color: var(--search_text);
    padding: 0.5rem;
    font-size: 0.9rem;
    outline: none;
}

.search-input::placeholder {
    color: var(--search_placeholder);
}

.search-button {
    border: none;
    background-color: transparent;
    color: var(--search_placeholder);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
    height: 100%;
}

/********************************** Panelmenu-Container ********************************/

.indexpanel-header {
    align-items: center;
    justify-content: space-between;
    position:relative;
}

.panelbutton-container {
    float:left;
    z-index:4
}

.panelmenu-container {
    float:left;
    z-index:3
}

.permfilter-container {
    float:left;
    z-index:2
}

/*************************************** Panelmenu ************************************/

.panelmenu {
    list-style: none;
    padding: 0px;
    margin-top: 1px;
    display: flex;
}

.panelmenu > li {
    position: relative;
    display: block;

    padding: 2px 0px 2px 0px;
    margin-right: 10px;		/* Abstand der Menüeinträge */

    border: 1px solid gray;
    border-radius: 5px;
    background: var(--panelmenu_farbe);
}

.panelmenu a {
    text-decoration: none;
    padding: 2px 10px 2px 10px;	/* Innenabstände der Buttons oben rechts unten links */
    color: var(--panelmenu_text);
    border-radius: 5px;         /* verhindert das Übermalen des Randes bei hover */
    white-space: nowrap;
}

.panelmenu > li:hover > .panelsubmenu {
    visibility: visible;
    opacity: 1;                 /* Damit kann man das Menü weich ausblenden */
}

.panelmenu a:hover {
    background-color: var(--panelsubh_farbe);
    color: var(--panelsubh_text);
}

/********************************** Panel-Submenus (Aufklappmenus) ********************************/

.panelsubmenu {
    list-style: none;
    visibility: hidden;
    position: absolute;		                /* koppelt das Submenu vom Hauptmenu ab, ansonsten ist das Submenu innerhalb des Menueintrags */
    padding: 0px;		                /* muss gesetzt werden (mindestens links), da li einen default Wert hat */
    margin-top: 5px;                            /* Abstand zum Menüeintrag */
    margin-left: 5px;

    white-space: nowrap;
    width: auto;

    border: 1px solid gray;
    border-radius: 5px;
    background: var(--panelsubm_farbe);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;                                 /* Damit kann man das Menü weich ausblenden */
    transition: visibility 0.3s, opacity 0.3s;  /* Damit kann man das Menü weich ein- und ausblenden */
/*     z-index: 100; */
}

.panelsubmenu li {
    color: var(--submenu_text);
}

.panelsubmenu a {
    color: var(--panelsubm_text);
    padding: 5px 10px 5px 10px;                 /* so funktioniert der link über die gesamte Menüzeile */
    display: block;
}

.panelsubmenu a:hover {
    background-color: var(--panelsubh_farbe);
    color: var(--panelsubh_text);
}