#menupanel {
	height: 100%;
	width: 0%;
	position: fixed;
	z-index: 4;
	top: 40px;
	left: -18px;
	background-color: var(--second-color-lightest);
	overflow-x: hidden;
	transition: 0.2s;
	opacity: 1;
	overflow-y: auto;
	border-right-style: groove;
}

#menuPanelHeader_ButtonClose {
	margin-top: 10px;
	margin-right: 10px;
	float: right;
	height: 20px;
	width: 20px;
	font-size: large;
	color: var(--text-color-sidePanel);
	cursor: pointer;
}

#menuTitle {
	text-align: left;
	margin-right: 15px;
}

#menuContent {
	width: auto;
	padding-left: 40px;
}

#menuTable_ReportTable, #menuTable {
	border: none;
	border-collapse: collapse;
	margin-left: -20px;
	width: 121%;
}

#menuTable_ReportTable.hovered td,
 #menuTableTr.hovered td {
	background-color: #000000;
	color: #ffffff;
}

#menuTable_ReportTable hr,
 #menuTableTr hr {
	margin-left: -40px;
}

#menuTable_ReportTable tr:nth-child(even),
#menuTable tr:nth-child(even) {
	background-color: var(--second-color-light)
}

#menuTable_ReportTable td {
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	color: var(--second-color-dark);
	text-align: left;
	cursor: pointer;
}

#menuTable td {
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	padding-left: 40px;
	color: var(--text-color-sidePanel);
	text-align: left;
	cursor: pointer;
}

#menuTable_ReportTableDIV {
	margin-left: -20px;
}

.tableWindow {
	display: none;
	text-align: left;
	position: fixed;
	z-index: 9998;
	/* border-color: var(--circle-fill); */
	top: 13vmin;
	margin-left: 4vmin;
	background: white;
	/* left: var(--menuBarWidth); */
	/* background-color: var(--background-color); */
	transition: 0.2s;
	opacity: 1;
	width: 64vmin;
	height: 67vmin;
	/* border-bottom-left-radius: 2vmin; */
	/* border-bottom-right-radius: 2vmin; */
	border: 1px solid var(--main-color-1);
	/* border-color: var(--main-color); */
	/* color: var(--text-color-sidePanel); */
}

.loadTable {
    overflow-y: auto;
    /* overflow-y: scroll; */
    overflow-x: hidden;
    position: relative;
    height: -webkit-fill-available;
    /* width: 94%; */
    word-break: break-all;
    text-align: left;
    max-height: 51vh;
}

#backgroundPanel {
	max-height: unset;
}

.contentFrame{
	display: contents;
	text-align: left;
	width: max-content;
	color: var(--text-color-sidePanel);
}

#menuPanelViewLoadSaveContent select {
	width: 97%;
	height: 79%;
	margin-left: 10px;
	border: none;
	background: no-repeat;
	margin-bottom: 20px;
	margin-top: 10px;
	outline: none;
	font-size: inherit;
	color: var(--text-color-sidePanel);
	background: transparent;
}

#menuPanelViewLoadSaveContent button {
	margin-left: 5px;
	background: var(--second-color-dark);
	color: white;
	cursor: pointer;
	border-radius: 20px;
	border: none;
}

.headerFunction {
	color: var(--header-textColor);
	font-size: 2vmin;
	cursor: pointer;
	float: right;
	margin-right: 2.5vmin;
	line-height: 3vmin !important;
}

.headerFunctionNote {
	font-size: 1.5vmin;
    cursor: pointer;
    float: right;
    margin-right: 1.5vmin;
    color: var(--main-color);
}

.headerFunction:hover {
	color: var(--color-configurable)
}

.headerInfo {
    color: var(--header-textColor);
    font-size: 2.2vmin;
    width: -webkit-fill-available;
    display: inline-flex;
}

.headerIcon {
    margin: 0 1.5vmin;
    font-size: 3vmin;
    color: var(--second-color);
    line-height: 4vmin !important;
}

.headerBar{
	height: 4.5vmin;
	/* margin-top: -4vmin; */
	/* margin-left: -4vmin; */
	/* margin-bottom: 1em; */
	background-color: var(--main-color);
	/* width: calc(100% + 9vmin); */
	text-align: left;
	font-size: 2.5vmin;
	line-height: 4vmin;
	vertical-align: middle;
	display: flex;
	padding-left: 1vmin;
	font-weight: bold;
	padding-top: 1vh;
}

#hilfePanel {
	width: 0%;
	position: fixed;
	z-index: 99;
	top: 74px;
	bottom: 0;
	left: -4px;
	background-color: var(--second-color-lightest);
	border-style: solid;
	border-color: #ddd;
	border-width: 1px;
	overflow-x: hidden;
	transition: 0.2s;
	opacity: 1;
	overflow-y: auto;
}

#impressumPanel {
	width: 0%;
	position: fixed;
	z-index: 99;
	top: 74px;
	left: -4px;
	background-color: var(--second-color-lightest);
	border-style: solid;
	border-color: #ddd;
	border-width: 1px;
	overflow-x: hidden;
	transition: 0.2s;
	opacity: 1;
	overflow-y: auto;
	bottom: 0;
}

#impressumPanel::-webkit-scrollbar {
	width: 5px;
}

#impressumPanel::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#impressumPanel::-webkit-scrollbar-thumb {
	background-color: #c5c1c1;
	outline: 1px solid slategrey;
}

#impressum {
	padding-right: 20px;
	font-size: 12px;
	text-align: left;
	padding-left: 60px;
}

#filterEinstellung {
	margin-top: 40px;
	margin-bottom: 20px;
}

.searchDiv {
	float: right;
    position: relative;
    margin-bottom: 1em;
    color: var( --text-color-sidePanel);
}

.dateField {
	border-radius: 0.5vmin;
    color: var(--text-color-sidePanel);
    background: var(--input-background-sidePanel);
    border: none;
    padding-left: 2vmin;
    height: 2vmin;
}

.inputField {
	font-family: 'Ubuntu', sans-serif;
    border: 1px solid;
    width: 25vmin;
    height: 3vmin;
    padding-left: 0.4em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    border-radius: 0.5vmin;
	color: var(--text-color-sidePanel);
	border-color: var(--second-color-light);
	font-size: 1em;
	background: var(--background-color-darker);
}

.inputFieldWideP,
.inputFieldWide {
	border: 1px solid;
    width: 29vw;
    padding-left: 1vmin;
    border-radius: 0.5vmin;
    color: var(--text-color-sidePanel);
    background: var(--input-background-sidePanel);
	border-color: var(--second-color-light);
	font-size: 1em;
}

.inputFieldWideP {
	height: 3.5vmin;
}

.inputFieldWidePNumber {
    width: calc(29vw - 1vmin) !important;
}

.inputFieldWidePNumber::-webkit-outer-spin-button,
.inputFieldWidePNumber::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.inputFieldWideNr {
	border: 1px solid;
    /* width: 88%; */
    height: 3vmin;
    padding-left: 1vmin;
    border-radius: 0.5vmin;
    color: var(--text-color-sidePanel);
    background: var(--input-background-sidePanel);
    border-color: var(--second-color-light);
}

.filterTable {
	border-spacing: 30px;
	border-collapse: collapse;
	margin-left: 60px;
	width: 90%;
}

.filterTable th {
	height: 30px;
	font-size: 12px;
	background-color: var(--second-color-lightest);
	border-bottom: solid 1px #ddd;
}

.filterTable td {
	height: 30px;
	font-size: 12px;
}

.filterTable tr:hover td {
	background-color: #a8afb7;
	color: white;
	font-weight: bolder;
}

.filterTable tr.hovered td {
	background-color: #000000;
	color: #ffffff;
}

.filterTable tr:nth-child(even) {
	background-color: var(--second-color-light)
}

#savedInfo {
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	padding-left: 60px;
	display: none;
	line-height: 175%;
}

.linekennzahlTh {
	height: 30px;
	font-size: 12px;
	text-align: left;
	padding-left: 10px;
	width: 35%;
}

.circlekennzahlTh {
	height: 30px;
	font-size: 12px;
	text-align: left;
	padding-left: 10px;
	width: 35%;
}

#imgCircle1, #imgCircle3, #imgCircle5 {
	border-radius: 50%;
}

.bottomSeperator {
	margin-top: 30px;
	margin-bottom: 20px;
	margin-left: 60px;
	border-bottom: solid 2px #ddd;
}

.inputStyle {
	width: 50px;
}

#uberflumenPanel {
	width: 0%;
	position: fixed;
	z-index: 99;
	top: 74px;
	left: -4px;
	background-color: var(--second-color-lightest);
	border-style: solid;
	border-color: #ddd;
	border-width: 1px;
	overflow-x: hidden;
	transition: 0.2s;
	opacity: 1;
	overflow-y: auto;
	bottom: 0;
}

.uberflumen {
	padding-right: 20px;
	font-size: 12px;
	text-align: left;
	padding-left: 60px;
}

#problemMeldenPanel {
	width: 0%;
	position: fixed;
	z-index: 99;
	top: 74px;
	left: -4px;
	background-color: var(--second-color-lightest);
	border-style: solid;
	border-color: #ddd;
	border-width: 1px;
	overflow-x: hidden;
	transition: 0.2s;
	opacity: 1;
	overflow-y: auto;
	bottom: 0;
}

.problemmelden {
	padding-right: 20px;
	font-size: 14px;
	text-align: left;
	padding-left: 60px;
}

.problemmeldenlabel {
	padding-right: 20px;
	font-size: 14px;
	text-align: left;
}

#melden {
	width: 100%;
	height: 250px;
	padding: 8px 8px;
	font-size: 12px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: var(--second-color-lightest);
	resize: none;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	outline: none;
}

#melden:focus {
	border: 2px solid #826f09;
}

#meldenForm {
	margin-left: 60px;
}

.meldinput {
	width: 100%;
	height: 30px;
	padding: 8px 8px;
	font-size: 12px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
}

#meldinput:focus {
	border: 2px solid #826f09;
}

#problemMeldenPanel::-webkit-scrollbar {
	width: 5px;
}

#problemMeldenPanel::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#problemMeldenPanel::-webkit-scrollbar-thumb {
	background-color: #c5c1c1;
	outline: 1px solid slategrey;
}

.logopicture {
	text-align: left;
	margin-left: 60px;
}

#menupanelList {
	text-align: left;
    display: block !important;
    font-size: 1.4vmin;
    color: var(--text-color-sidepanel);
    margin-top: 4vmin;
    margin-left: 2vmin;
    overflow: auto;
    height: 87%;
}

#menupanelList ul {
	text-align: left;
	padding-inline-start: 0px;
}

.splitBarTitle {
	display: none;
}

#choosenTitleMenupanelList {
	display: none;
}

#feedBackMenupanelList {
	display: none;
}

#menuPanelDashboardLabel {
	text-align: left;
	margin-left: 60px;
	color: var(--second-color-dark);
	font-size: initial;
}

.menuPanelButtonBack {
	width: 30%;
	background: var(--second-color-dark);
	font-size: 18px;
	color: white;
	cursor: pointer;
	border-radius: 20px;
	height: 40px;
	border: none;
	left: 35%;
	bottom: 150px;
	position: absolute;
}

#menuPanelViewLoadSave_lastLoadedInfo {
	bottom: 0px;
    position: sticky;
    width: 100%;
    background: var(--second-color-dark);
    font-size: 0.92em;
    font-weight: bold;
}

.menuTableDownloadIcon {
	font-size: 15px;
	color: #000000;
	background: var(--second-color);
	margin-left: 7px;
}

.strike {
	display: block;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	margin-left: -40px;
}

.strike>span {
	position: relative;
	display: inline-block;
}

.strike>span:before, 
.strike>span:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9999px;
	height: 1px;
	background: black;
}

.strike>span:before {
	right: 100%;
	margin-right: 15px;
}

.strike>span:after {
	left: 100%;
	margin-left: 15px;
}

#backgroundPanelLoadSaveSelectDiv {
	height: 25vmin !important;
}

.loadTableTable {
    width: 53vmin;
    color: var(--text-color-sidePanel);
    border-collapse: collapse;
    table-layout: auto;
    width: 101%;
    font-size: 1.8vmin;
}

.loadTableTable th {
	cursor: pointer;
	background-color: var(--second-color-light);
	/* border-bottom:1px solid var(--second-color-light); */
	color: var(--text-color-sidePanel);
	font-size: 1.8vmin;
}

.loadTableTable thead th {
	position: sticky;
	top: 0;
	text-align: center;
	/* padding-top: 0.5vmin; */
	/* padding-bottom: 0.4vmin; */
}

#menuPanel_ViewLoadSave_Table td {
    max-width: 30vmin;
}

#menuPanel_pButtonMenu_Table td {
    max-width: 19vmin;
}

#varianteSelectGruppeLoad_Table td {
    max-width: 19vmin;
}

#layoutMenuCircle_Table td {
    max-width: 19vmin;
}


.loadTableTable td:nth-child(1), th:nth-child(1) {padding-left: 0.6em;cursor: pointer;}

.loadTableTable td:last-child, th:last-child { padding-right: 0.6em;}

.loadTableTable tr{
    /* padding: 2vmin 0; */
    height: 3vmin;
    cursor: grab;
    line-height: 2.3;
    cursor: pointer;
}

.pPanelExport_checkbox {
	cursor: pointer;
}

.loadTableTable tr:hover {
    background-color: var(--color-configurable);
    color: var(--main-color);
}

.loadTableTable tr:nth-child(even){
	background: rgb(250, 250,250);
}

.loadTableTable tr.loadTableTableSelectedEntry,
.userChatSelectedUser{
	font-weight: bold;
	color:var(--main-color);
	background-color: var(--color-active);
}

.menuPanelViewLoadSaveSelectEntryReference, 
.menuPanelViewLoadSaveSelectEntrySnapshot {
	cursor: pointer;
}

.menuPanelViewLoadSaveSelectEntryReference {
	font-size: 1em;
}

.loadTableTableSelectedEntry,
.userChatSelectedUser {
	font-weight: bold;
	color:var(--header-textColor) !important;
	background-color: var(--color-active) !important;
}

.customValueInput {
	font-size: inherit;
}

#backgroundFiles {
	display: none;
}

#backgroundPanelLoadSave_previewImgDiv {
	margin-left: 1vmin;
    height: 100%;
    display: flex;
    width: 100%;
}

#backgroundPanelLoadSave_preview {
    width: 97%;
    display: block;
    border: 1px solid var(--second-color-light);
    margin-top: 1vmin;
    border-radius: 1vmin;
    padding: 1vmin;
    height: 26vmin;
    margin-top: 1vmin;
}

#backgroundPanelLoadSave_previewImg {
    max-width: 58%;
    max-height: 58%;
    margin: auto;
}

#backgroundPanelLoadSave_previewSpan{
	font-weight: bold;
    font-size: 1.4vmin;
    color: var(--text-color-sidePanel);
}

#backgroundPanelLoadSave_previewInfo{
    width: fit-content;
    color: var(--text-color-sidePanel);
    font-size: 1.8vmin;
    text-align: left;
    margin: 0;
    /* padding: 1.5em; */
    line-height: 150%;
    background: var(--background-color);
    position: fixed;
    bottom: 5vmin;
    /* left: 3vmin; */
    right: 3vmin;
    border: 0.1em solid;
    border-radius: 0.5em;
    border-color: var(--circle-fill);
    display: none;
}

#backgroundPreviewPanelImage {
	background: white;
    position: fixed;
    max-height: 6vw;
    border: 0.1em solid;
}

#backgroundPanelLoadSave_previewInfo_Button{
	margin-top: 2vmin;
}

.sidePanelSmallPicker {
	color: var(--text-color-sidePanel);
    background: var(--second-color-light);
	-webkit-appearance: none;
	width: 80%;
	height: 0.5em;
	border-radius: 5px;
	outline: none;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.sidePanelSmallPicker::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: var(--text-color-sidePanel);
	cursor: pointer;
}

.backgroundPanelLoadSave_previewValueLabel {
	cursor: pointer;
}

#backgroundPanelLoadSave_previewInfoRememberAsDefault {
	cursor: pointer;
}

.backgroundPanelLoadSave_previewValue {
	word-break: break-all;
	width: 40%;
}

/* #layoutMenuCircleSelect tr{
	height: 3vmin;
	cursor: pointer;
} */

/* #layoutMenuInfoSelect tr{
	height: 3vmin;
} */

#layoutMenuCircleSelect tr.layoutMenuCircleSelectSelectedEntry{
	font-weight: bold;
	color:var(--main-color) !important;
	background-color: var(--color-active) !important;
}

#layoutMenuInfoSelect tr.layoutMenuInfoSelectSelectedEntry{
	font-weight: bold;
	color:var(--header-textColor);
	border: 1px solid;
	border-radius: 0.3vmin;
	box-shadow: 0 0 10px 100px var(--logo-color) inset;
}

#menuPanelPButtonMenu {
	margin-left: 1.5vmin;
    margin-top: 1.5vmin;
    margin-bottom: 3vmin;
    width: 54vmin;
}

#layoutMenuInfoDetail {
	border: 1px solid;
    padding: 0.3vmin 0.4vmin 0.3vmin 0.4vmin;
    border-radius: 0.5vmin;
	font-size: 1.4vmin;
	font-weight:bold;
	cursor:pointer;
	color: var(--header-textColor);
    background: var(--main-color-light);
    border-color: var(--main-color-light);
}

#menuPanel_WorkflowTree {
	color: var(--text-color-sidePanel);
}

#kennzahlenUserFieldsDiv_Search {
    font-size: inherit;
    height: 4vmin;
    float: left;
    margin-bottom: 2vh;
    color: var(--text-color-sidepanel);
    background: var(--input-background-sidePanel);
    border-style: none;
    padding: 0vmin 0.5vmin;
    width: 86%;
}

#kennzahlenUserFieldsDiv_Reset {
	float: right;
	padding: 1vmin;
	font-size: 2.5vmin;
	font-weight: bold;
	cursor: pointer;
	color: var(--color-active);
}