
html {

	/* ============= */
	/* === color === */
	/* ============= */
	--color-red: #ff3333;

	/* ================ */
	/* === customer === */
	/* ================ */
	--customer-color: rgb(100, 100, 255);
	--customer-color-50pct: rgba(100, 100, 255, 0.5);
	--customer-color-10pct: rgba(100, 100, 255, 0.1);
	
	/* === general === */
	--master-background-color: #f0f0f0;
	--layout-size-spacing: 5;		/* pixel */

	
	/* ======================== */
	/* === background color === */
	/* ======================== */
	--primary-background-color: #ffffff;
	--secondary-background-color: #dddddd;
	--hover-background-color: #cccccc;
	--active-background-color: #d0d0d0;
	--selected-background-color-50pct: var(--customer-color-50pct);
	--selected-background-color-10pct: var(--customer-color-10pct);
	
	/* ================== */
	/* === text color === */
	/* ================== */
	--primary-text-color: #111111;
	--secondary-text-color: #888888;
	--third-text-color: #aaaaaa;
	--advanced-text-color: var(--customer-color);

	/* === specials === */
	--icon-font-size: 120%;
	--border-color:	#c8c8c8;
	
	/* === UI Tag ===*/
	
	--tag-tabsbar-background: 			linear-gradient(rgb(250, 250, 250), rgb(200, 200, 200));
	--tag-tabsbar-background-selected: 	linear-gradient(rgb(200, 200, 200), rgb(220, 220, 220));
	
	--tag-list-box-shadow:	2px 2px 10px rgba(0, 0, 0, 0.1);

	--tagContainer-border: 1px solid var(--border-color);
	--tagContainer-border-bottom: 1px solid var(--border-color);
	--tagContainer-border-radius: 5px;


	/* === UI Popup background === */
	--popup-header-background:	rgb(200, 200, 255);	
	--popup-backdrop-background:	rgba(0, 0, 0, 0.2);
	--popup-shadow: 0px 0px 10px 0px #595959;
	--popup-shadow-selected: 0px 0px 10px 0px var(--customer-color);
}

[data-theme="newStyle"] {
    --master-background-color: #ffffff;
	
	--hover-background-color: #eeeeee;
	--active-background-color: #e0e0e0;
	
	--border-color:	#e0e0e0;
	
	--tagContainer-border: 0px solid var(--border-color);
	--tagContainer-border-bottom: 1px solid var(--border-color);
	--tagContainer-border-radius: 0px;

	--tag-tabsbar-background: 			linear-gradient(var(--master-background-color), var(--master-background-color));
	--tag-tabsbar-background-selected: 	linear-gradient(var(--border-color), var(--border-color));

	--primary-background-color: var(--master-background-color);
	--secondary-background-color: var(--master-background-color);
	
	--special-boder: 1px solid #eeeeee;

}

[data-theme="dark"] {

	/* ================ */
	/* === customer === */
	/* ================ */
	--customer-color: rgb(150, 150, 255);
	--customer-color-50pct: rgba(150, 150, 255, 0.5);
	--customer-color-10pct: rgba(150, 150, 255, 0.1);

	/* === general === */
    --master-background-color: #1a1a1a;

	/* ======================== */
	/* === background color === */
	/* ======================== */
	--primary-background-color: #222222;
	--secondary-background-color: #333333;
	--hover-background-color: #444444;
	--active-background-color: #555555;

	/* ================== */
	/* === text color === */
	/* ================== */
	--primary-text-color: #eeeeee;
	--secondary-text-color: #888888;
	--third-text-color: #555555;
	--advanced-text-color: var(--customer-color);

	/* === specials === */
    --border-color: #666666;

	/* === UI Tag ===*/
	--tag-tabsbar-background: 			linear-gradient(rgb(100, 100, 100), rgb(50, 50, 50));
	--tag-tabsbar-background-selected: 	linear-gradient(rgb(150, 150, 150), rgb(70, 70, 70));

	--tag-list-box-shadow:	2px 2px 10px rgba(255, 255, 255, 0.1);

	/* === UI Popup background === */
    --popup-header-background: rgb(100, 100, 200);
	--popup-backdrop-background:	rgba(100, 100, 100, 0.5);
	
}

[data-theme="newStyleDark"] {
	/* === general === */
    --master-background-color: #1a1a1a;

	--tagContainer-border: 0px solid var(--border-color);
	--tagContainer-border-bottom: 1px solid var(--border-color);
	--tagContainer-border-radius: 0px;

	--tag-tabsbar-background: 			linear-gradient(var(--master-background-color), var(--master-background-color));
	--tag-tabsbar-background-selected: 	linear-gradient(var(--border-color), var(--border-color));

	--special-boder: 1px solid #333333;
	
	
	/* ================ */
	/* === customer === */
	/* ================ */
	--customer-color: rgb(150, 150, 255);
	--customer-color-50pct: rgba(150, 150, 255, 0.5);
	--customer-color-10pct: rgba(150, 150, 255, 0.1);


	/* ======================== */
	/* === background color === */
	/* ======================== */
	--primary-background-color: var(--master-background-color);
	--secondary-background-color: #333333;
	--hover-background-color: #444444;
	--active-background-color: #555555;

	/* ================== */
	/* === text color === */
	/* ================== */
	--primary-text-color: #eeeeee;
	--secondary-text-color: #888888;
	--third-text-color: #555555;
	--advanced-text-color: var(--customer-color);

	/* === specials === */
    --border-color: #333333;

	--tag-list-box-shadow:	2px 2px 10px rgba(255, 255, 255, 0.1);

	/* === UI Popup background === */
    --popup-header-background: rgb(100, 100, 200);
	--popup-backdrop-background:	rgba(100, 100, 100, 0.5);
}


[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--master-background-color); /* Hintergrund der Scrollleiste */
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #666666; /* Farbe der Scrollbar */
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--active-background-color); /* Heller beim Hover */
}

/* Für Firefox */
[data-theme="dark"] {
    scrollbar-color: #666666 var(--master-background-color);
}



[data-theme="newStyleDark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="newStyleDark"] ::-webkit-scrollbar-track {
    background: var(--master-background-color); /* Hintergrund der Scrollleiste */
}

[data-theme="newStyleDark"] ::-webkit-scrollbar-thumb {
    background: #666666; /* Farbe der Scrollbar */
    border-radius: 5px;
}

[data-theme="newStyleDark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--active-background-color); /* Heller beim Hover */
}

/* Für Firefox */
[data-theme="newStyleDark"] {
    scrollbar-color: #666666 var(--master-background-color);
}

/* ==================== */
/* === shadow-blink === */
/* ==================== */
@keyframes shadow-blink {
    0% { box-shadow: 0px 0px 20px 0px var(--customer-color-50pct); }
    50% { box-shadow: 0px 0px 20px 0px var(--customer-color); }
    100% { box-shadow: 0px 0px 20px 0px var(--customer-color-50pct); }
}

.blink-shadow {
    animation: shadow-blink 1.0s infinite alternate;
}


/* ======================================================================================== */
/* ======================================================================================== */
/* ======================================================================================== */
/* ======================================================================================== */
/* ======================================================================================== */
/* ======================================================================================== */
html, body {
	color: var(--primary-text-color);
}

textarea:focus, input:focus{
	outline: none;
}

/* ======================================================================================== */
/* ======================================================================================== */
/* ====================================          ========================================== */
/* ====================================   Menu   ========================================== */
/* ====================================          ========================================== */
/* ======================================================================================== */
/* ======================================================================================== */
.divMenu {
	background: var(--primary-background-color);
}

.menuButton {
	color: var(--primary-text-color);
	border: 0px solid #666666;
	border-radius: 3px;
	padding: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: none;
}

.menuButton:disabled {
	color: var(--primary-text-color);
	background: var(--selected-background-color-50pct);
}


/* ================= */
/* === tagButton === */
/* ================= */

.tagButton {
	padding: 5px;
	border-width: 0px;
	border-radius: 3px;
	color: var(--advanced-text-color);
	background: var(--secondary-background-color);
	white-space: nowrap;
	transition: 0.3s;

	border: var(--special-boder);
}

.tagButton:disabled {
	color: var(--third-text-color);
	background: var(--secondary-background-color);
}

.tagButton:hover {
	background: var(--hover-background-color);
}


.tagButton:active {
	background: var(--active-background-color);
}

.tagButton:focus {
	outline: none;
}

/* ======================= */
/* === tagToggleButton === */
/* ======================= */
.tagToggleButtonSwitch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
}

.tagToggleButtonSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.tagToggleButtonSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary-background-color);	/* hintergrund off */
    border-radius: 8px;
    transition: 0.4s;
}

.tagToggleButtonSlider:before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: var(--advanced-text-color);  /* Farbe Slider*/
    border-radius: 50%;
    transition: 0.4s;  /* Diese Zeile hat gefehlt! */
}

input:checked + .tagToggleButtonSlider {
    background-color: var(--selected-background-color-50pct);	/* hintergrund on */
}

input:checked + .tagToggleButtonSlider:before {
    transform: translateX(14px);
}


/* ================ */
/* === tagHr 	=== */
/* ================ */
.tagHr {
	width: 100%;
	border: none; /* Entfernt die Standardlinie */
    height: 2px;  /* Höhe der Linie */
    min-height: 2px;  /* Höhe der Linie */
    background-color: var(--customer-color-50pct); /* Farbe der Linie */
}

/* ================ */
/* === tagSpan 	=== */
/* ================ */
.tagSpan {
	white-space: nowrap;
}

/* ==================== */
/* === tagTextField === */
/* ==================== */
.tagTextField {
	padding: 3px;
	border-width: 0px;
	border-radius: 3px;
	background: var(--secondary-background-color);
	transition: 0.3s;
	
	border: var(--special-boder);
	box-sizing: border-box;
}

.tagTextField:hover {
	background: var(--hover-background-color);
}

.tagTextFieldInput {
	color: var(--primary-text-color);
	border-width: 0px;
	background: none;
}

.tagTextFieldInput:hover {
	background: none;
}

.tagTextFieldPrefix {
	margin-left:3px;
	margin-right:3px;
	color: var(--secondary-text-color);
}

.tagTextFieldPostfix {
	margin-left:3px;
	color: var(--secondary-text-color);
}

.tagTextFieldDeleteIcon {
	color: var(--secondary-text-color);
}

.tagTextFieldDeleteIcon:hover {
	color: var(--primary-text-color);
}

/* =================== */
/* === tagCheckbox === */
/* =================== */
.tagCheckbox {
	accent-color: var(--advanced-text-color);
}

/* ================ */
/* === tagTable === */
/* ================ */
table.tagTable {
	position: relative;
	border-collapse: separate; /* Don't collapse */
	border-spacing: 0;
	table-layout: fixed;
}

table.tagTable th.tagTable:hover {
}		

table.tagTable tr.tagTable:hover {
	background: var(--selected-background-color-10pct);
}		

table.tagTable tr.selected {
	background: var(--selected-background-color-50pct);
}		

table.tagTable tr.selected:hover {
	background: var(--selected-background-color-50pct);
}		

th.tagTable, td.tagTable {
	border-left: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	padding-left: 3px;
	padding-right: 3px;
	height: 18px;
	text-overflow: ellipsis;
}

.tagTable th {
	background-color: var(--secondary-background-color);
	position: sticky; /* sticky / relative Wichtig für die absolute Positionierung der Resize-Handler */
	top: 0;
	z-index: 10; /* Sicherstellen, dass der Header über anderen Inhalten liegt */
}

/* Inneres Wrapper-Element für relative Positionierung */
.tagTable .th-wrapper {
    position: relative; /* Nur das Wrapper-Div ist relativ, nicht das <th> */
    display: flex;
    justify-content: space-between;	/* center; */
    align-items: center;
    padding: 5px;
	cursor: default;	
}

td.tagTable {
	white-space:nowrap; 
	text-overflow: ellipsis;
	overflow: hidden;	
}

/* Sticky Footer */
.tagTable tfoot tr {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
}

th.tagTable:first-child {  
	border-left: 0px solid #000000;
}

td.tagTable:first-child {  
	border-left: 0px solid #000000;
}

th.tagTable:last-child {  
	border-right: 0px solid #000000;
}

td.tagTable:last-child {  
	border-right: 0px solid #000000;
}



/*
	transform: translateX(+50%);
    background-color: transparent;
*/
.tagTableResizeHandler {
	content: "";
	position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 100%;
    background-color: transparent;
	transform: translateX(+50%);
    cursor: col-resize;
}

/* =============== */
/* === tagTabs === */
/* =============== */
.tagTabsBar {
	display:flex;
	width:100%; 
	background-image: var(--tag-tabsbar-background);
	border-radius:3px 3px 0px 0px; 
}

.tagTabsContent {
	height:100%; 
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-top: 2px solid var(--border-color);
	
}

.tagTabsReiter {
	display: flex; 
	flex-direction: column; 
	align-items: flex-start;	
}
 
.tagTabsUnderline {
	align-self: center; 
	background-color:var(--customer-color); 
	height:2px; 
	width: 0%;
	transition: width 0.1s linear; 
}

.tagTabsButton {
	color: var(--primary-text-color);
	padding: 5px;
	margin: 0px;
	border-left: 1px solid var(--primary-background-color);
	border-right: 1px solid var(--primary-background-color);
	border-top: 0px;
	border-bottom: 0px;
	border-radius:0px; 
	background: rgba(0, 0, 0, 0.0);
}

.tagTabsButton:focus {
	outline: none;
}


.tagTabsButtonSelected {
/*	background-image: var(--tag-tabsbar-background-selected);*/
	/*color: var(--advanced-text-color);*/
}

.tagTabsButton:disabled {
	color: var(--secondary-text-color);
}


/* ==================== */
/* === tagContainer === */
/* ==================== */
.tagContainer {
	padding:5px; 
	background-color: var(--primary-background-color);
	border: var(--tagContainer-border);
	border-bottom: var(--tagContainer-border-bottom);
	border-radius:var(--tagContainer-border-radius); 
	transition: 0.3s;
}

.tagContainer:hover {
	border-color: var(--selected-background-color-50pct);
}



/* =================== */
/* === tagCombobox === */
/* =================== */
.tagCombobox {
	display: flex;
	align-items: center;
	padding: 3px;
	border-radius: 3px;
	background: var(--secondary-background-color);
	transition: 0.3s;
	border: var(--special-boder);
	box-sizing: border-box;
}

.tagCombobox:hover {
	background: var(--hover-background-color);
}


.tagCombobox:active {
	background: var(--active-background-color);
}

.tagComboboxInput {
	color: var(--advanced-text-color);
	background: none;
	border-width: 0px;
}

.tagComboboxInput:focus {
	outline: none;
}

.tagComboboxInputArror {
	color: var(--advanced-text-color);
	transition: 0.3s;
}

.tagComboboxInputArror:hover {
/*	color:#000000;*/
}

.tagComboboxOverlay {
	position:absolute; 
	z-index:100; 
	display:flex; 
	flex-direction: column; 
	overflow: auto; 
	background:var(--secondary-background-color);
	border: 1px solid var(--border-color);
	border-radius: 3px;
	box-shadow: 0px 2px 10px 0px #bbbbbb; /* 595959 0px 6px 18px 0px rgba(182,182,182,0.41);*/
	padding:4px;
}

.tagComboboxItem {
	padding: 5px;
	cursor: default;
	border-radius: 3px;
}

.tagComboboxItem:hover {
	background: var(--selected-background-color-50pct);
}


.tagToggleArrow {
	transition-duration: 0.5s;
	color: var(--advanced-text-color);
	font-size: var(--icon-font-size);
}

/* ================== */
/* === tagConsole === */
/* ================== */
.tagConsole {
	color: var(--primary-text-color);
	background-color: var(--secondary-background-color);
	overflow: auto;
	border: var(--special-boder);
	box-sizing: border-box;
	padding: 5px;
}


/* =============== */
/* === tagList === */
/* =============== */
.tagListUL {
	list-style: none;
	padding: 0;
	max-width: calc(100% - 50px);
	margin: auto;
}

.tagListLI {
	background: var(--primary-background-color);
	padding: 10px;
	margin: 10px 0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: var(--tag-list-box-shadow);
	transition: transform 0.2s, background 0.3s;
}

.tagListLI:hover {
	transform: scale(1.025);
}

.tagListContent {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.tagListTitle {
	font-weight: bold;
}
.tagListSubTitle {
	font-size: 0.9em;
	color: var(--secondary-text-color);
}


.tagChatInputDiv{
	padding: 10px;
	margin: 10px;
	border: var(--special-boder);
	border-radius: 12px;
	box-shadow: 0px 0px 10px 0px var(--secondary-text-color);
	background: var(--secondary-background-color);
	transition: 0.3s;
}


.tagChatInput {
	width: 100%;
	min-height: 24px; /* statt z.B. 40px */
	max-height: 200px;

	color: var(--primary-text-color);  
	background: none;
	
	border: 0px solid #ccc;
	resize: none;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
  }

.tagChatInput:focus {
	outline: none;
}





/* ============================================ */
/* ============================================ */
/* =============                  ============= */
/* =============   context menu   ============= */
/* =============                  ============= */
/* ============================================ */
/* ============================================ */

/*
.contextMenuOverlay {
	position: absolute;
	z-index: 200;
	top: 0px;
	left:0px;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
}

.contextMenuBackdrop {
	position: fixed;
	z-index: -1;
	top: 0px;
	left:0px;
	height: 100%;
	width: 100%;
	background: none;
}

.contextMenuInputBackdrop {
	position: fixed;
	z-index: -1;
	top: -100px;
	left: -100px;
	height: 0px;
	width: 0px;
}
}
*/

.contextMenuInputBackdrop {
	position: fixed;
	z-index: -1;
	top: -100px;
	left: -100px;
	height: 0px;
	width: 0px;
}



.contextMenuMain {
	position: fixed;
	z-index: 2000;
	display:flex; 
	flex-direction: column; 
	overflow: auto; 
	background-color: var(--secondary-background-color); 
	border: 1px solid var(--border-color);
	border-radius: 3px;
	box-shadow: 0px 2px 10px 0px #bbbbbb; /* 595959 0px 6px 18px 0px rgba(182,182,182,0.41);*/
	padding:4px;
}

.contextMenuItem {
	padding: 5px 20px 5px 3px;
	cursor: default;
	border-radius: 3px;
	display: flex;
}

.contextMenuItem:hover {
	background: var(--selected-background-color-50pct);
}

/*
rgba(0, 0, 0, 0.2);
*/

/* ===================================== */
/* ===================================== */
/* =============           ============= */
/* =============   popup   ============= */
/* =============           ============= */
/* ===================================== */
/* ===================================== */
.popupOverlay {
	position: absolute;
	z-index: 200;
	top: 0px;
	left:0px;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popupBackdrop {
	position: fixed;
	z-index: -1;
	top: 0px;
	left:0px;
	height: 100%;
	width: 100%;
	background: var(--popup-backdrop-background);
}		

.popupBackButton {
	align-items: center; 
	justify-content: center; 
	padding-left:15px; 
	padding-right:15px; 
	height:100%
}		

.popupBackButton:hover {
	background: var(--hover-background-color);
}


.popupMain {
	border: 1px solid var(--border-color);
	border-radius:5px;
	box-shadow: var(--popup-shadow);
	display:flex; 
	flex-direction: column;
}

.popupHeader {
	height:25px;
	min-height:25px;
	max-height:25px;
	border-radius:5px 5px 0px 0px;
	background: var(--popup-header-background);
	padding-left: 10px;
	padding-right: 10px;
    display: flex;
    align-items: center;	
}

.popupContent {
	background-color: var(--primary-background-color);
	height:100%;
	display:flex; 
	flex-direction: column;
	border-radius:0px 0px 5px 5px;
	overflow: auto;
	padding: 7px;
	
}		

/* ==================== */
/* === Notification === */
/* ==================== */
.notification {
	position: absolute;
	z-index: 1000;
	top: 0px;
	left:0px;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notificationContent {
	background: var(--secondary-background-color);
	color: var(--primary-text-color);
	border: 1px solid var(--border-color);
	border-radius:5px; 
	padding: 10px;
	box-shadow: 0px 0px 10px 0px #aaaaaa;
	display:flex; 
	flex-direction: column;
}		

/* ============== */
/* === Addons === */
/* ============== */
.CodeMirror {
  border: 0px solid #eee;
  background: #ffffff;
  width: 100%;
  height: 100%;
}

/* ======================================================= */
/* ======================================================= */
/* ======================== PAGE ========================= */
/* ======================================================= */
/* ======================================================= */
.homepageDivContent {
	width:100%; 
	height:100%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
/*	background-color:#aaaaaa;*/
}

.homepageDivCreatedBy {
	position: fixed;
	z-index: 10;
	bottom: 0px;
	right: 0px;			
	margin: 10px;
	color: #111111;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
}

.homepageImgMain {
	box-shadow: 0px 0px 50px 0px #000000; 
	border: 0px solid #aaaaaa;	
	border-radius:5px;

}


/*
table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
	border: 3px solid #aaaaff;
	padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}
tr.green th {
  background: green;
  color: white;
}
tr.purple th {
  background: purple;
  color: white;
}
th {
	border: 3px solid #aaffaa;
  background: white;
  position: sticky;
  top: 0;
}
*/






