#languageSwitcher {
	z-index: var(--z-index-aboveAll);
	display: flex;
	flex-direction: column-reverse;
	align-self: flex-end;
	background-color: rgb(217, 255, 0);
	height: 100%;

	/* max-height: 150px; */
	overflow-y: hidden;
	list-style-type: none;
}

.languageSwitcher-unOrderedList.extended {
	height: auto;
	max-height: 250px;
	backdrop-filter: blur(5px);
}

.languageSwitcher-image {
	width: 100%;
}

/* Color switching is based on this excellent article: https://webdesign.tutsplus.com/tutorials/color-schemes-with-css-variables-and-javascript--cms-36989 */
/* Good table of named css colors: https://www.rapidtables.com/web/css/css-color.html */

:root,
:root.standard {																								/* default "old" color scheme */
	/* stylelint-disable declaration-colon-space-after */
	--marked:											red;
	--energy-servo:								orange;
	--energy-400v: 								black;
	--energy-24v: 								cornflowerblue;
	--measure-digital: 						cornflowerblue;
	--measure-analog: 						cornflowerblue;
	--data-asi: 									gold;
	--data-iolink: 								turquoise;
	--data-parallel: 							chartreuse;
	--data-systembus:							violet;
	/* stylelint-enable declaration-colon-space-after */
}

:root.differentiated {																					/* "new" experimental color scheme */
	/* stylelint-disable declaration-colon-space-after */
	--marked:											red;
	--energy-servo:								orange;
	--energy-400v: 								black;
	--energy-24v: 								cornflowerblue;
	--measure-digital: 						lightsalmon;
	--measure-analog: 						lightblue;
	--data-asi: 									gold;
	--data-iolink: 								orange;
	--data-parallel: 							chartreuse;
	--data-systembus:							violet;
	/* stylelint-enable declaration-colon-space-after */
}

:root.reduced {																									/* "new" color scheme based on QO requirements */
	/* stylelint-disable declaration-colon-space-after */
	--marked:											red;
	--energy-servo:								orange;
	--energy-400v: 								black;
	--energy-24v: 								cornflowerblue;
	--measure-digital: 						cornflowerblue;
	--measure-analog: 						cornflowerblue;
	--data-asi: 									gold;
	--data-iolink: 								cornflowerblue;
	--data-parallel: 							cornflowerblue;
	--data-systembus:							violet;
	/* stylelint-enable declaration-colon-space-after */
}

/* JIRA [LQSK-1401] Cursor bei sämtlichen Kabeln fehlerhaft */

/* JIRA [LQSK-1398] Cursor flicker while dragging */

.base-edge {
	cursor: default;
}

.base-edge path:not([class]) {
	stroke-dasharray: 1.5;											/* should be same value as jspManager/paintStyle/strokeWidth */
}

.base-edge.marked path {
	stroke: var(--marked);
}

.base-edge:not(.jtk-dragging):hover path {		/* not(.jtk-dragging) prevents the effect during manual edge creation */
	cursor: help;
}

.electric-edge-top {
	stroke-width: 3;
	opacity: 1;
	stroke-dasharray: 10;
}

.electric-edge-bottom {
	stroke-width: 3;
	opacity: 1;
	stroke-dasharray: 10;
	stroke-dashoffset: 10;
}

.electric-edge-invisible {
	opacity: 0;
}

.electric-edge-energy-servo {
	stroke: var(--energy-servo);
}

.electric-edge-energy-ac {
	stroke: var(--energy-400v);
}

.electric-edge-energy-dc {
	stroke: var(--energy-24v);
}

.electric-edge-measure-digital {
	stroke: var(--measure-digital);
}

.electric-edge-measure-analog-4-20ma {
	stroke: var(--measure-analog);
}

.electric-edge-measure-analog-0-10v {
	stroke: var(--measure-analog);
}

.electric-edge-data-asi {
	stroke: var(--data-asi);
}

.electric-edge-data-iolink {
	stroke: var(--data-iolink);
}

.electric-edge-data-parallel {
	stroke: var(--data-parallel);
}

.electric-edge-data-powerlink {
	stroke: var(--data-systembus);
}

.electric-edge-data-profibus {
	stroke: var(--data-systembus);
}

.electric-edge-data-profinet {
	stroke: var(--data-systembus);
}

.electric-edge-data-ethercat {
	stroke: var(--data-systembus);
}

.electric-edge-data-ethernet-ip {
	stroke: var(--data-systembus);
}

.electric-edge-data-canopen {
	stroke: var(--data-systembus);
}

.base-port {
	z-index: 10000;
	position: absolute;
	cursor: default;
}

.base-port-direction {
	position: absolute;
}

.base-port.marked {
	background-color: var(--marked);
}

.base-port:not(.jtk-drag-active):hover {
	/* not(.jtk-drag-active) prevents the effect during manual edge creation */
	cursor: help;
}

.base-port-link-container {
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: default;
}

.base-port-link-anchor {
	background-color: rgb(68 85 102); /* default color of jsp edge anchor */
	cursor: default;
}

.base-port-link-arrow path {
	cursor: help;
	stroke: #808080;
}

.base-port-link-caption {
	font-size: 0.7rem;
	white-space: nowrap;
	font-family: Roboto;
	cursor: pointer;
	color: #6d6d6d; /* a tad darker than the default mid grey of base-port-link-arrow makes the font appear slightly thicker and improves visibility when zoomed out */
}

.base-port-link-container.marked svg path {
	stroke: var(--marked);
}

.base-port-link-container.marked .base-port-link-caption {
	color: var(--marked);
}

.electric-port-energy-servo {
	background-color: var(--energy-servo);
}

.electric-port-energy-ac {
	background-color: var(--energy-400v);
}

.electric-port-energy-dc {
	background-color: var(--energy-24v);
}

.electric-port-measure-digital {
	background-color: var(--measure-digital);
}

.electric-port-measure-analog-4-20ma {
	background-color: var(--measure-analog);
}

.electric-port-measure-analog-0-10v {
	background-color: var(--measure-analog);
}

.electric-port-data-asi {
	background-color: var(--data-asi);
}

.electric-port-data-iolink {
	background-color: var(--data-iolink);
}

.electric-port-data-parallel {
	background-color: var(--data-parallel);
}

.electric-port-data-powerlink {
	background-color: var(--data-systembus);
}

.electric-port-data-profibus {
	background-color: var(--data-systembus);
}

.electric-port-data-profinet {
	background-color: var(--data-systembus);
}

.electric-port-data-ethercat {
	background-color: var(--data-systembus);
}

.electric-port-data-ethernet-ip {
	background-color: var(--data-systembus);
}

.electric-port-data-canopen {
	background-color: var(--data-systembus);
}

/* JIRA [LQSK-1395] ausklappbares Log implementieren */

#messenger {
	z-index: var(--z-index-aboveAll);
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	width: 100%;
	height: 60%;
	overflow-y: hidden;
	margin-bottom: 8px;
	padding-left: 5px;
}

#messenger:hover {
	overflow-y: scroll;
	scroll-snap-type: y mandatory;

	/* scroll-snap-align: center; */

	/*! https://developers.google.com/web/updates/2018/07/css-scroll-snap */
}

#messenger.extended {
	height: auto;
	max-height: 33.3vh;
	background-color: rgba(0 0 0 / 50%);
	padding-top: 5px;
	backdrop-filter: blur(5px);
}

.messenger-item {
	font-size: small;

	/* overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; */
}

.messenger-item:not(:last-child) {
	margin-bottom: 3px;
}

.messenger-item-normal {
	/* color: var(--statusBar-text-color-normal); */
	color: lightgrey /* just for testing; dulling down to be able to shift brightness for the links */
}

.messenger-item-warning {
	color: var(--statusBar-text-color-warning);
}

.messenger-item-error {
	color: var(--statusBar-text-color-error);
}

.messenger-item-link {
	filter: brightness(125%);
	cursor: pointer;

	/* filter: hue-rotate(10deg); */

	/* filter: saturation(50%); */

	/* filter: brightness(150%); */
}

.messenger-item-link:hover {
	filter: brightness(175%);
	cursor: pointer;
}

.messenger-item-link.trashed {
	filter: brightness(15%);
}

.messenger-item-link.deleted {
	filter: brightness(15%);
	text-decoration: line-through;
	pointer-events: none;
}

#statusbar {
	padding: 2px;
	gap: 4px;
	width: 100%;
	height: 100%;
	background-color: var(--statusBar-BG-color);
	display: flex;
	justify-content: space-between;
	overflow-y: visible;
}

.dragListFiller {
	width: 100%;
	height: var(--custom-control-default-height);
	background-color: var(--base-color-veryLight);
}

.dragListControl {
	margin-right: 0.75rem;
	margin-left: 0.75rem;
	padding: 0;
	list-style-type: none;
	border: 1px solid var(--base-color-mid);
}

:root {
	--custom-control-default-height-half: calc(var(--custom-control-default-height) / 2);
	--dragListControl-padding: 4px;
	--invisibleDiv-height: calc(var(--custom-control-default-height-half) + var(--dragListControl-padding));
}

.dragListItem {
	cursor: move;
	background-color: var(--base-color-veryLight);
	padding: var(--dragListControl-padding) var(--dragListControl-padding) var(--dragListControl-padding) calc(2 * var(--dragListControl-padding));
	z-index: 0;
}

.dragListItem.selected {
	background-color: var(--base-color-light);
}

.dragListItem-contentContainer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--custom-control-default-height);
	pointer-events: none;								/* prevents flickering when dragListItem children would catch the drag events */
}

.dragListItem-contentContainer-text {
	font-size: var(--default-font-size);
	color: var(--customControl-text-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dragListItem-contentContainer-image {
	height: 100%;
}

.dragListItem-contentContainer-handle {
	height: 50%;
	margin-left: 10px;
	opacity: 15%;										/* by making the graphic slightly opaque, the background shines through, no matter the bg-color, which results in a nice, more flexible effect */
}

.listItem-ghostDivTop {
	padding-top: var(--dragListControl-padding);
	width: 100%;
	height: var(--custom-control-default-height-half);
	position: absolute;
	top: 0;
	z-index: 1;
}

.listItem-ghostDivBottom {
	padding-top: var(--dragListControl-padding);
	width: 100%;
	height: var(--custom-control-default-height-half);
	position: absolute;
	top: var(--invisibleDiv-height);
	z-index: 1;
}

.listItem-wrapper {
	position: relative;
}

.listItem-wrapper:not(:last-of-type) {
	border-bottom: 1px solid var(--base-color-light);
}

:root {
	/* color definition for git version info in menubar; matching default bitbucket colors of our branches */
	--text-color-git-other-branch: fuchsia;
	--text-color-git-hotfix-branch: red;
	--text-color-git-bugfix-branch: coral;
	--text-color-git-feature-branch: dodgerblue;
	--text-color-git-development-branch: yellow;
	--text-color-git-testing-branch: green;
	--text-color-git-production-branch: var(--menuBar-text-color);
}

.menuBar-element-gitInfo {
	margin-left: auto; 															/* forces gitInfo element to the right side of the menuBar */
	display: flex;
	align-items: center;														/* center flex-item vertically */
}

.menuBar-element-gitInfo-text-OTHER {
	color: var(--text-color-git-other-branch);
}

.menuBar-element-gitInfo-text-HOTFIX {
	color: var(--text-color-git-hotfix-branch);
}

.menuBar-element-gitInfo-text-BUGFIX {
	color: var(--text-color-git-bugfix-branch);
}

.menuBar-element-gitInfo-text-FEATURE {
	color: var(--text-color-git-feature-branch);
}

.menuBar-element-gitInfo-text-DEVELOPMENT {
	color: var(--text-color-git-development-branch);
}

.menuBar-element-gitInfo-text-TESTING {			/* in our git called release */
	color: var(--text-color-git-testing-branch);
}

.menuBar-element-gitInfo-text-PRODUCTION {	/* in our git called Master */
	color: var(--text-color-git-production-branch);
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
/* line-height: 1.15; */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* stylelint-disable selector-id-pattern */
#rootCanvas {
	z-index: -10000000;
	position: absolute !important;
	background-color: transparent;
	height: 100%;
	width: 100%;
}
/* ######################################################################################################################################################## */
/* This sections plays a vital part in the markEdges mechanisms

Situation:
		You can't trigger a hover (mouse-enter) on a jspPort while dragging an edge - the jspEndpoint that you're holding is between the mouse-cursor and the jspPort and catches all pointer-events
?		This is a know html limitation! Nowadays there is a new html drag&drop concept. Maybe the problem is mitigated there and MAYBE jsp 5+ is using the new html drag&drop stuff.

Solution:
		While dragging, temporarily deactivate pointer-events on all components of the jspEndpoint

Problem:
		(a) You need to be very specific on where to deactivate pointer-events. Stuff easily breaks when you don't limit this to the minimum components involved and only while being in drag!
		(b) There is a temporary sibling ghost div created internally by jsp on an endpoint in drag

Approach:
		There are 3 elements to consider
		(1) a div with "jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-endpoint-connected jtk-dragging"
		(2) a svg containing the rect inside div (1) with no classes -> the svg definitely needs pointer-events none
		(3) a ghost div sibling above (1) with "jtk-managed jtk-endpoint-anchor jtk-connected"
*/

.jtk-endpoint.jtk-endpoint-anchor.jtk-draggable.jtk-dragging {
	/* the endpoint div (1) */
	pointer-events: none;
}

.jtk-endpoint.jtk-endpoint-anchor.jtk-draggable.jtk-dragging > svg {
	/* the svg (2) */
	pointer-events: none;
}

.jtk-managed.jtk-endpoint-anchor.jtk-connected:not(.jtk-port) {
	/* the ghost div (3) */
	pointer-events: none;
}
/* ######################################################################################################################################################## */

.jtk-surface {
	cursor: move;
}

.jtk-surface > .katavorio-clone-drag {
	cursor: grabbing !important;
}

.canvas-miniView {
	position: absolute !important;
	width: 15% !important;
	height: 15% !important;
	margin-right: 0.1vw !important;
	top: 0.1vw !important;
	z-index: 100 !important;
	border-radius: 0;
}

.jtk-miniview-collapse {
	display: none;
}

#canvasNode-outer-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

#canvasNode-inner-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#canvasNode-infoProvider {
	visibility: hidden;
	cursor: help !important;
	position: absolute;
	height: 1.25rem !important;
	width: 1.25rem !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.canvasNode-infoProvider-none {
	background-image: none;
}

.canvasNode-infoProvider-correct {
	visibility: visible !important;
	background-image: url(assets/images/configCorrect.984ab30f59412fea5b3b.svg);
}

.canvasNode-infoProvider-warning {
	visibility: visible !important;
	background-image: url(assets/images/configWarning.7ed64ef398c231b19677.svg);
}

.canvasNode-infoProvider-error {
	visibility: visible !important;
	background-image: url(assets/images/configError.a8303583faf1b6512d1c.svg);
}

.canvasNode-infoProvider-loading {
	visibility: visible !important;
	animation: rotation 2s infinite linear;
	background-image: url(assets/images/configLoading.33d9d4b4de69b3c703c1.svg);
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

.canvasUnitNode #drop-zone {
	position: absolute;
	visibility: hidden;
	margin: 10%;
	width: 80%;
	aspect-ratio: 1/1;
}

.canvasUnitNode.marked .canvasNode-image {
	outline: 1px solid var(--marked);
	outline-offset: -2px;
}

.canvasNode-parameters {
	font-size: xx-small;
	list-style-type: none;
	border-radius: 2px;
	height: fit-content;
	margin-left: 20px;
	background-color: var(--canvas-node-signature-BG-color);
	z-index: 1000000000000000000000;
}

.jspNode-parameterTable-label-element {
	text-align: left;
}

.jspNode-parameterTable-value-element {
	text-align: right;
}

.jspNode-parameterTable-unit-element {
	text-align: center;
}

#canvasNode-signature {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.8rem;
	white-space: nowrap;
	max-width: 100px;
	height: fit-content;
	z-index: 1000000000;
	margin-top: 15px;
}

.signature-name-element {
	background-color: var(--canvas-node-signature-BG-color);
	border-radius: 1px;
	padding-left: 2px;
	padding-right: 2px;
	width: fit-content;
}

.signature-function-element {
	background-color: var(--canvas-node-signature-BG-color);
	border-radius: 1px;
	padding-left: 2px;
	padding-right: 2px;
	width: fit-content;
}

.signature-reference-designator-element {
	background-color: var(--canvas-node-signature-BG-color);
	border-radius: 1px;
	padding-left: 2px;
	padding-right: 2px;
	width: fit-content;
}

.jtk-endpoint {
	/* hiding edge endpoint */
	z-index: 16777271; /* endpoint above edge (max for safari browser) */
	/* visibility: hidden; */
}
/* hiding edge endpoint */
/* visibility: hidden; */
/* .jtk-endpoint rect {
} */

.jtk-connected {
	/* moving connected ports to background (to ease selecting edge endpoints), but still over the device */
	z-index: 2;
}
/* Editable Flowchart */

.jtk-connection-edit path {
	stroke: var(--marked) !important;
}

.jtk-flowchart-handle {
	background-color: #fcc2b6 !important;
	box-shadow: none !important;
}

.jtk-flowchart-segment-drag:hover {
	background-color: var(--marked) !important;
}

object {
	position: relative;
	z-index: -1;
}
/* ########################################################################################################### */

.dragging-from-palette {
	cursor: grabbing;
}

.jspPaletteNode {
	/* marking element as draggable jsPlumb palette node */
	cursor: grab;
}

.jtk-draggable {
	/* hovering over draggable element */
	cursor: grab;
}

.jtk-drag {
	/* while dragging an element */
	cursor: grabbing;
	z-index: 1000000000;
}

.katavorio-delegated-draggable {
	/* spaces between palette nodes (sometimes there is no space) */
	cursor: default;
}

.katavorio-clone-drag {
	/* dragging from the node palette to the canvas */
	width: 3rem;
	height: 3rem;
	z-index: 1000000000;
}

.jtk-surface.jtk-drag-drop-hover {
	cursor: grabbing;
}

#js-slidr {
	position: fixed;
	width: 100%;
	height:100%;
	top:0;
	left:0;
}

#js-slidr > div {
	width: 100%;
	height: 100%;
	padding: 3em 0;
	text-align: center;
	font-size: 2em;
	color: white;
}

.switch {
	position: fixed;
	top: 0;
	left: 0;
}
/* ! Nothing here is used for the sidePanelLeft Accordions anymore */


.accordion-container {													/* central container for a group of accordion, pE aggregates all consumer related (sub)accordions */
	max-height: inherit;
	width: 100%;
	background-color: var(--accordion-item-border-color);
	padding-bottom: 1px !important;
}

.accordion-container-heading {											/* heading of accordion container */
	background-color: var(--accordion-container-heading-BG-color);
	padding: .5rem .5rem .5rem 1rem;									/* order: top, right, bottom, left */
	vertical-align: middle;
	font-weight: bold;
	font-size: 0.85rem !important;
	color: var(--accordion-container-heading-text-color) !important;

}

.accordion-itemHeader {
	margin-top: 1px !important;
}

.accordion-itemHeader, .accordion-itemHeaderDialog {													/* heading of sub-accordion */
	background-color: var(--accordion-item-header-BG-color) !important;
	cursor: default;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	color: var(--accordion-item-header-text-color) !important;
	font-weight: normal !important;
	padding: .5rem .1rem .5rem .0;
	font-size: 0.8rem;
}

.accordion-itemHeaderDialog {													/* heading of sub-accordion */
	max-height: 0.8rem;
	padding: .5rem .5rem .5rem .0;
}

.accordion-itemHeaderDialog span.ui-accordion-header-icon {
	margin-top: -1.6rem  !important;
}

.accordion-itemHeader:last-of-type {									/* remove margin on every last itemHeader */
	margin-bottom: 0 !important;
}

.accordion-itemHeader.accordion-itemHeader-active {
	font-weight: bold !important;
	color: var(--accordion-item-header-text-color-active) !important;
	background-color: var(--accordion-item-header-BG-color-active) !important;
}

.accordion-itemPanel .accordion-container {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

.accordion-itemHeader:hover {
	font-weight: bold !important;
	color: var(--accordion-item-header-text-color-hover) !important;
	background-color: var(--accordion-item-header-BG-color-hover) !important;
}

.accordion-itemPanel {
	padding: 0.1rem !important;
	display: flex;
	flex-grow: 0;													/* grow to fill parent container*/
	flex-shrink: 1; 	
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;											/* center flex-item vertically */
	background-color: var(--accordion-item-panel-BG-color);
}

/* .modal-dialog-body .accordion-itemPanel {} */

.sidePanelLeft .accordion-itemPanel {
	border: 0 !important;
}

/* gets rid of a jQuery default border right and bottom inside the panel */
/* .ui-widget-content {
	border: none !important;		
} */

.accordion-itemPanel {
	border-top: 1px solid var(--accordion-item-border-color) !important;
}


.accordion-item {
	padding: 0.2rem;
	width: 3rem;
	height: 3rem;
}

.accordion-item-image {		/* ! not longer needed for jsPlumb */
	width: inherit;
	height: inherit;
}

.accordion-item-image-nodrag {		/* ! not longer needed for jsPlumb */
	cursor: default !important;
}

.accordion-header-description {
	width: 7.5rem;
	overflow: hidden;
    display: inline-block;
}

.accordion-header-referenceDesignator, .accordion-header-connector {
	width: 4rem;
	overflow: hidden;
    display: inline-block;
}

.accordion-header-interface-parameters {
	width: 31rem;
    display: inline-block;
}

.accordion-header-port-parameters {
	width: 25rem;
	overflow: hidden;
	display: inline-block;
}

.accordion-header-type, .accordion-header-voltage, .accordion-header-current, .accordion-header-operatingMode, .accordion-header-safe {
	display: inline-block;
	overflow: hidden;
}

.accordion-header-port-parameters .cControl-HeadLine {
	display: inline-block !important;
}

.accordion-header-validationContainer {
	display: inline-block !important;
	overflow: hidden;
	width: 1.3333em; /* 17px; */
	height: 1.3333em; /* 17px; */
	vertical-align: top;
	margin-top: -0.15686em; /* -2px; */
}

.accSpanContainer, .accSeparator {
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

/* .accSpanContainer.unvalid, .accordion-header-connector.unvalid {}

.accSeparator {}

.accordion-footer {}
 */
/* Corporate Design LQ GROUP */

:root {
	/* list of all available (corporate design specific) colors */
	--base-color-veryDark: hsl(0, 0%, 15%);
	--base-color-dark: hsl(0, 0%, 32.5%);
	--base-color-mid: hsl(0, 0%, 50%);
	--base-color-light: hsl(0, 0%, 67.5%);
	--base-color-veryLight: hsl(0, 0%, 85%);
	--base-color-white: hsl(0, 0%, 100%);
	--accent-color1-veryDark: hsl(208, 50%, 25%);
	--accent-color1-dark: hsl(208, 50%, 37.5%);
	--accent-color1-mid: hsl(208, 50%, 50%);
	--accent-color1-light: hsl(208, 50%, 62.5%);
	--accent-color1-veryLight: hsl(208, 50%, 75%);
	--accent-color2-veryDark: hsl(349, 50%, 25%);
	--accent-color2-dark: hsl(349, 50%, 37.5%);
	--accent-color2-mid: hsl(349, 50%, 50%);
	--accent-color2-light: hsl(349, 50%, 62.5%);
	--accent-color2-veryLight: hsl(349, 50%, 75%);
	--accent-color3-veryDark: hsl(117, 50%, 25%);
	--accent-color3-dark: hsl(117, 50%, 37.5%);
	--accent-color3-mid: hsl(117, 50%, 50%);
	--accent-color3-light: hsl(117, 50%, 62.5%);
	--accent-color3-veryLight: hsl(117, 50%, 75%);
	--text-color-dark: hsl(0, 0%, 0%);
	--text-color-mid: hsl(0, 0%, 50%);
	--text-color-light: hsl(0, 0%, 100%);
	--text-color-accent1: var(--accent-color1-mid);							/* default info text color */
	--text-color-accent2: var(--accent-color2-mid);							/* default error text color */
	--text-color-accent3: var(--accent-color3-mid);


	/* element specific color assignment */
	--loadingScreen-text-color: lime;																/* just for testing */
	--splashScreen-BG-color: var(--base-color-white);
	--splashScreen-header-BG-color: var(--base-color-mid);
	--splashScreen-header-tab-text-color: var(--text-color-light);
	--splashScreen-header-tab-BG-color: var(--base-color-mid);
	--splashScreen-header-activeTab-BG-color: var(--base-color-white);
	--splashScreen-header-activeTab-text-color: var(--text-color-dark);
	--splashScreen-header-tab-separator-color: var(--base-color-dark);
	--splashScreen-footer-BG-color: var(--base-color-veryLight);
	--splashScreen-footer-separator-color: var(--base-color-dark);
	--splashScreen-recentProjects-text-color: var(--text-color-accent1);
	--splashScreen-recentProjects-selected-text-color: var(--text-color-accent2);
	--menuBar-BG-color: var(--base-color-veryDark);
	--menuBar-text-color: var(--text-color-light);
	--sidePanelLeft-BG-color: var(--base-color-dark);
	--sidePanelLeft-border-color: var(--base-color-mid);
	--sidePanelRight-BG-color: var(--base-color-dark);
	--sidePanelRight-border-color: var(--base-color-mid);
	--sidePanelLeft-widget-BG-color: var(--sidePanelLeft-BG-color);
	--sidePanelRight-widget-BG-color: var(--sidePanelRight-BG-color);
	--sidePanelWidget-border-color: var(--base-color-mid);
	--sidePanelWidget-search-placeholder-text-color: var(--text-color-mid);
	--sidePanelWidget-search-BG-color: var(--base-color-light);
	--sidePanelWidget-search-BG-color-active: var(--base-color-veryLight);
	--sidePanelWidget-search-text-color: var(--text-color-dark);
	--sidePanelWidget-search-text-color-active: var(--text-color-dark);
	--accordion-container-heading-BG-color: var(--base-color-dark);
	--accordion-container-heading-text-color: var(--text-color-light);
	--accordion-item-header-BG-color: var(--base-color-mid);
	--accordion-item-header-BG-color-hover: var(--base-color-light);
	--accordion-item-header-text-color: var(--text-color-light);
	--accordion-item-header-text-color-hover: var(--text-color-light);
	--accordion-item-header-text-color-active: var(--text-color-light);
	--accordion-item-panel-BG-color: var(--base-color-white);
	--accordion-item-border-color: var(--base-color-dark);
	--accordion-item-list-separator-color: var();															/* separator hidden by default */
	--accordion-marked-element-color: var(--accent-color2-mid);
	--canvas-BG-color-projectCanvas: var(--base-color-white);
	--canvas-info-text-color-projectCanvas: var(--text-color-dark);
	--canvas-preview-BG-color-assembly: var(--accent-color1-light);
	--canvas-preview-BG-color-assembly-hover: var(--accent-color1-mid);
	--canvas-preview-BG-color-infrastructure: var(--accent-color3-light);
	--canvas-preview-BG-color-infrastructure-hover: var(--accent-color3-mid);
	--canvas-BG-color-infrastructureCanvas: var(--base-color-white);
	--canvas-BG-color-trashCanvas: var(--base-color-white);
	--canvas-BG-color-trashed: rgba(255, 0, 0, 0.1);									/* TODO change to a combination of a color-variable and opacity */
	--canvas-BG-color-assemblyCanvas: var(--base-color-white);
	--canvas-info-text-color-assemblyCanvas: var(--text-color-accent1);
	--canvas-info-text-color-infrastructureCanvas: var(--text-color-accent3);
	--canvas-info-text-color-trashCanvas: var(--text-color-accent2);
	--canvas-info-text-color-trashed: var(--text-color-accent2);
	--layerController-container-BG-color: var(--sidePanelRight-BG-color);
	--layerController-item-header-BG-color: var(--base-color-mid);
	--layerController-item-header-BG-color-hover: var(--base-color-light);
	--layerController-item-header-BG-color-active: var(--base-color-mid);
	--layerController-item-header-text-color: var(--text-color-light);
	--layerController-item-header-text-color-hover: var(--text-color-light);
	--layerController-item-header-text-color-active: var(--text-color-light);
	--layerController-item-panel-BG-color: var(--base-color-white);
	--layerController-subControl-label-text-color: var(--text-color-dark);
	--layerController-color-border: var(--base-color-mid);
	--outliner-text-color: var(--text-color-light);
	--outliner-text-color-error: var(--text-color-accent2);
	--modal-background-color: rgba(0, 0, 0, 0.5);										/* TODO change to a combination of a color-variable and opacity */
	--dialog-title-BG-color: var(--base-color-veryDark);
	--dialog-title-text-color: var(--text-color-light);
	--dialog-BG-color: var(--base-color-veryLight);
	--dialog-horizontal-separator-color: var(--base-color-dark);
	--dialog-thumbnail-BG-color: var(--base-color-white);
	--customControl-text-color: var(--text-color-dark);
	--customControl-text-color-error: var(--text-color-accent2);
	--table-title-BG-color: var(--base-color-dark);
	--table-title-text-color: var(--text-color-light);
	--table-BG-color: var(--base-color-white);
	--table-text-color: var(--text-color-dark);
	--table-text-color-delete: var(--text-color-accent2);
	--table-hover-BG-color: var(--accent-color1-light);
	--canvas-node-signature-text-color: var(--text-color-dark);
	--canvas-node-signature-BG-color: rgba(255, 255, 255, 0.85);							/* TODO change to a combination of a color-variable and opacity */
	--statusBar-BG-color: var(--base-color-veryDark);
	--statusBar-text-color-normal: var(--text-color-light);
	--statusBar-text-color-warning: var(--text-color-accent1);
	--statusBar-text-color-error: var(--text-color-accent2);
}

/** Central client-wide STYLE top most structure
 *
 * UTILIZING:
 *		nothing atm
 *
 * TODO:
 *		use relative values to ensure correct scaling and a modern, responsive design!, see https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
 *		find a better way to match sizes of flag selector and flags (it's to primitive now)
 *
 * AUTHOR(S):
 *		Christian Lange
 *
 */

@font-face {
	font-family: Roboto;
	src: url(assets/fonts/Roboto-Regular.fc2b5060f7accec5cf74.ttf) format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* #region COMMON SETTINGS */
:root {																/* standard client-wide color theme */
	--default-padding: 0.25rem;
	--custom-control-default-height: 1.5rem;
	--default-font-size: 0.85rem;
	--default-property-header-height: 5rem;
	--z-index-aboveAll: 100000;
	--z-index-static-gui: 100;		/* statusbar, menubar, sidePanels... */
	--z-index-canvas: 100;
	--z-index-context-menu: 110;
}

body {
	background-color: white;										/* global background (set to red to better see errors) */
	font-family: sans-serif;
	overflow: hidden;
}

.noselect {															/* prevent selection/highlighting of text-spans (pe .canvas-text) */
	user-select: none;												/* Non-prefixed version, currently supported by Chrome and Opera */
}

.grayout {
	filter: opacity(50%) grayscale(100%);
}

/* #endregion COMMON SETTINGS */

/* #region JQUERY-UI (overwriting some annoying defaults) */

.ui-state-default {
	border: none;
	outline: none;
	background-color: transparent;
}

.ui-state-hover {
	border: none !important;
	outline: none !important;
	background-color: transparent !important;
}

.ui-state-active {
	border: none !important;
	outline: none !important;
	background-color: transparent !important;
}

.ui-state-focus {
	border: none;
	outline: none;
	background-color: transparent;
}

.ui-corner-all {
	border-radius: 0;
}

/* #endregion JQUERY */

/* #region LANGUAGESWITCHER */
.languageSwitcherShell {
	background-color: var(--statusBar-BG-color);
	position: relative;
	height: 100%;													/* vertically fill statusBar */
	flex-grow: 1;													/* fill free container space */
	align-items: center;											/* center flag vertically */
	justify-content: center;										/* center flag horizontally */
}

.languageSwitcherIcon {
	width: 82.5%;													/* fiddly approach to match flag size */
}

.languageSelection {
	display: none !important;										/* overwrite display: flex inherited from parent */
	position: absolute;
	align-self: center;
	justify-content: center;
	left: 3px;
	bottom: 100%;													/* as a solution for browser scale [QO] */
	z-index: 100;
}

.flag {
	width: 88%;														/* fiddly approach to match languageSwitcherIcon size */
}

.languageSelection .flag:hover {									/* drop shadow while hovering above flags */
	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
}

.languageSwitcherShell:hover .languageSelection {					/* show languageSelection while hovering */
	display: block !important;										/* overwrite display: flex inherited from parent */
}

/* #endregion LANGUAGESWITCHER */

.turnInvisible {						/* helper class to (un-)hide cControl-Validation-Indicator) */
	display: none !important;
}

@media (prefers-color-scheme: dark) {						/* invert favicon color for dark mode */
	/* "Give yourself to the Dark Side" - Darth Vader */
}

/* Central client-wide LAYOUT top most structure
 *
 * UTILIZING:
 *		css grid handling rough layout, details under https://www.w3schools.com/css/css_grid.asp
 *		css flexbox for fine-tuning inter-element-position, details under https://www.w3schools.com/css/css3_flexbox.asp
 *
 * TODO:
 *		use relative values to ensure correct scaling and a modern, responsive design!, see https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
 *		find a better way to match sizes of flag selector and flags (it's to primitive now)
 *
 * AUTHOR(S):
 *		Christian Lange
 *
 */


/* @import url("style.css"); */

* { /* Hack to ensure that grid-viewport-master is always displayed fullscreen, though all elements are free to overwrite those properties locally */
	margin: 0;
	padding: 0;
}

/* //!It overrides mui css that breaks our layout. @CL, maybe we should use box-sizing later */
*, *::before, *::after {
	box-sizing: revert !important;
}

/* #region GridDefinition */

:root {
	max-width: 100vw;							/* full width of browser window */
	max-height: 100vh;							/* full height of browser window */
}

.grid-viewport-master {							/* top level container of layout */
	display: grid;
	grid-template-rows: 3rem 1fr 1.875rem;
	align-content: space-between;				/* keep proportions on resizing */
	grid-gap: 0;								/* no space betwenn grid elements */
	width: 100vw;								/* full width of browser window */
	height: 100vh;								/* full height of browser window */
}

#smallScreen {									/* error message the display is too small */
	margin: 3.125em;
	display: none;
}

@media screen and (min-width: 1920px) {			/* for displays with the width 1920px and more */
	#sidePanelRight,
	#sidePanelLeft {
		width: 15.625rem;
	}

	.canvas-assemblyNode,
	.canvas-projectNode,
	.canvas-infrastructureNode,
	.canvas-trashNode,
	#rootCanvas {
		left: 15.625rem;
		width: calc(100vw - 31.25rem);
	}

	.canvas-miniView {
		right: 0;
	}

	.canvas-info-name,
	.canvas-info-referenceDesignator {
		font-size: 1.5rem;
	}

	.fancytree-title {
		max-width: 77%;
	}

	.layerSwitcher-range {
		width: auto;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1919px) {		/* for displays with the width 800-1920px */
	#sidePanelRight,
	#sidePanelLeft {
		width: 13vw;
	}

	.canvas-assemblyNode,
	.canvas-projectNode,
	.canvas-infrastructureNode,
	.canvas-trashNode,
	#rootCanvas {
		left: 13vw;
		width: 74vw;
	}

	.canvas-miniView {
		right: 0;
	}

	.canvas-info-name,
	.canvas-info-referenceDesignator {
		font-size: 1.25vw;
	}

	.fancytree-title {
		max-width: 66%;
	}

	.layerSwitcher-range {
		width: 6vw;
	}
}

@media screen and (min-height: 500px) and (max-height: 699px) {
	#consumers .accordion-itemPanel,
	#products .accordion-itemPanel {
		max-height: 17vh !important;

		/* overflow-y: scroll !important; */
	}

	.ui-accordion-content-active {
		min-height: 4rem !important;
	}

	.accordion-itemHeader {
		padding: 0.2rem 0.4rem 0.2rem 0 !important;
	}

	.accordion-container-heading {
		padding: 0.2rem 0.4rem 0.2rem 0.4rem !important;
	}
}

@media screen and (min-height: 700px) and (max-height: 959px) {
	#consumers .accordion-itemPanel,
	#products .accordion-itemPanel {/* for symbols+pics in accordion */
		max-height: 22vh !important;
	}

	.accordion-itemHeader {
		padding: 0.4rem 0.8rem 0.4rem 0 !important;
	}

	.accordion-container-heading {
		padding: 0.4rem 0.8rem 0.4rem 0.8rem !important;
	}
}

@media screen and (min-height: 960px) {/* for symbols+pics in accordion */
	#consumers .accordion-itemPanel,
	#products .accordion-itemPanel {
		max-height: 25vh !important;
	}
}

@media screen and (max-width: 1023px) {			/* switch off for small displays */
	#sidePanelRight,
	#sidePanelLeft {
		width: 0;
		overflow: hidden;
	}

	.canvas-assemblyNode,
	.canvas-projectNode,
	.canvas-infrastructureNode,
	.canvas-trashNode,
	#rootCanvas {
		left: 0 !important;
		width: 100vw;
	}

	.canvas-miniView {
		display: none !important;
	}

	#smallScreen {
		display: block !important;
	}

	.canvas-info-name,
	.canvas-info-referenceDesignator {
		font-size: 0.75em;
	}
}

@media screen and (max-height: 499px) {			/* switch off for small displays */
	#sidePanelRight,
	#sidePanelLeft {
		width: 0;
		overflow: hidden;
	}

	.canvas-assemblyNode,
	.canvas-projectNode,
	.canvas-infrastructureNode,
	.canvas-trashNode,
	#rootCanvas {
		left: 0 !important;
		width: 100vw;
	}

	.canvas-miniView {
		display: none !important;
	}

	#smallScreen {
		display: block !important;
	}

	.canvas-info-name,
	.canvas-info-referenceDesignator {
		font-size: 0.75em;
	}
}

#topPanel {
	background-color: var(--menuBar-BG-color);
}

#statusPanel {
	/* background-color: var(--statusBar-BG-color); */
}

#sidePanelLeft {
	height: calc(100vh - 4.875rem);
	background-color: var(--sidePanelLeft-BG-color);
	position: fixed;
	top: 3rem;
	left: 0;
	z-index: 99;
	flex-direction: column;
	border-right: 1px solid var(--sidePanelLeft-border-color);
}

#sidePanelRight {
	height: calc(100vh - 4.875rem);
	background-color: var(--sidePanelRight-BG-color);
	position: fixed;
	top: 3rem;
	right: 0;
	z-index: 99;
	flex-direction: column;
	border-left: 1px solid var(--sidePanelRight-border-color);
}

/* #region BasicFlexDefinition */

.flex-container {							/* standard class for all flexing containers (menuBar, statusBar, sidePanels) */
	display: flex;							/* enable flex functionality */
}

/* #endregion BasicFlexDefinition */

#canvasContainer {		/* in Mozilla on change the window size */
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

:root {
	/* standard client-wide settings */
	--default-cControl-Label-width: 14rem;
	--default-cControl-Unit-width: 2.8rem;
	--default-cControl-Input-width: 8rem;
	--default-cControl-Comment-width: 6rem;
}

.cControl-Text-normal {
	color: var(--customControl-text-color);
}

.cControl-Text-warning {
	color: var(--customControl-text-color-error);
}

.cControl-Container {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	margin-bottom: var(--default-padding);
	min-height: var(--custom-control-default-height);
	font-size: var(--default-font-size);
}

#unitDescription_cContainer.cControl-Container {
	min-height: calc(var(--custom-control-default-height) * 2); /* must be applied to all textarea containers ?? */
}

.cControl-Container:last-child {
	margin-bottom: 0; /* suppress margin on last flex child */
}
/* default customControl elements */

.cControl-Label {
	order: 1; /* always positioned first horizontally */
	width: var(--default-cControl-Label-width);
	margin-left: 0.75rem;
}

.cControl-Unit {
	order: 2; /* always positioned second horizontally */
	width: var(--default-cControl-Unit-width);
	/* margin-left: 0.75rem;	 */ /* distance to <label> element */
}

.cControl-Comment {
	order: 2; /* always positioned second horizontally */
	width: var(--default-cControl-Comment-width);
	margin-left: 0; /* distance to <label> element */
}

.cControl-ValidationIndicator-Base {
	order: 4; /* always positioned second to last horizontally */
	align-self: flex-start;
	margin-left: 0.75rem; /* distance to <input> element */
	height: 1.49em; /* 19px; */
	width: 1.49em; /* 19px; */
	background-size: contain;
	background-repeat: no-repeat;
}

.cControl-InfoIndicator {
	order: 5; /* always positioned last horizontally */
	align-self: flex-start;
	margin-left: 0.5rem; /* distance to <input> element */
	height: 1.49em; /* 19px; */
	width: 1.49em; /* 19px; */
	background-image: url(assets/images/configWarning.7ed64ef398c231b19677.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.cControl-ValidationIndicator-correct {
	background-image: none;
	display: none;
}

.cControl-ValidationIndicator-warning {
	background-image: url(assets/images/configWarning.7ed64ef398c231b19677.svg);
}

.cControl-ValidationIndicator-error {
	background-image: url(assets/images/configError.a8303583faf1b6512d1c.svg);
}

.cControl-ValidationIndicator-Header {
	height: 1.49em; /* 19px; */
	width: 1.49em; /* 19px; */
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-top: -0.0784em; /* -1px; */
	margin-left: -0.0784em; /* -1px; */
}

.cControl-ValidationIndicator-loading {
	background-image: url(assets/images/configLoading.33d9d4b4de69b3c703c1.svg);
	animation: rotation 2s infinite linear;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}
/* special customControl input elements */

.cControl-Input {
	order: 3; /* always positioned third horizontally */
	width: var(--default-cControl-Input-width);
	margin-left: 0.75rem; /* distance to <unit> element */
	padding-right: 0.25rem; /* move text from right edge */
	padding-left: 0.25rem; /* move text from right edge */
}

.cControl-Input-Textbox {
	text-align: left;
}

.cControl-Input-Textbox:disabled {
	user-select: none; /* atm buggy in all browsers except firefox */
}

.cControl-Input-TextArea {
	overflow-y: auto;
	resize: none;
	width: calc(var(--default-cControl-Input-width) + 0.1rem) !important; /* textArea doesn't evaluate width as other controls, therefore some correction factor is added */
	height: calc(var(--custom-control-default-height) * 2);
}

.cControl-Input-Label {
	text-align: left;
}

.cControl-Input-Dropdown {
	width: calc(var(--default-cControl-Input-width) + 0.8rem) !important; /* dropdown doesn't evaluate width as other controls, therefore some correction factor is added */
}

.cControl-Input-Checkbox,
.cControl-Input-Radio {
	width: auto;
	vertical-align: bottom;
}

.cControl-table-head-row-compact {
	display: block;
	height: 1rem;
}
/* ---------------------------------------------------------------------------------------------------------- */

.cControl-Input-ReferenceDesignator {
	display: flex;
	flex-direction: column;
	padding-right: 0 !important;
	width: calc(var(--default-cControl-Input-width) + 0.5rem) !important; /* dropdown doesn't evaluate width as other controls, therefore some correction factor is added */
}

.cControl-Input-ReferenceDesignator-ComponentContainer {
	display: flex;
	align-items: baseline;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
	width: auto;
	margin-bottom: calc(var(--default-padding) / 2);
}

.cControl-Input-ReferenceDesignator-ComponentContainer:last-child {
	margin-bottom: 0;
}

.cControl-Input-ReferenceDesignator-ComponentContainer-Label {
	display: block;
	width: 0.7rem;
	text-align: center;
	margin-right: 0.25rem;
}

.cControl-Input-ReferenceDesignator-ComponentContainer-Textbox {
	width: 100%;
}
/* ---------------------------------------------------------------------------------------------------------- */

.cControl-Input-Select-Value {
	order: 4 !important;
}

.cControl-InfoLabelSpan {
	width: 100%;
	/* width: calc(var(--default-cControl-Label-width) + var(--default-cControl-Unit-width) + var(--default-cControl-Input-width)); */
	font-style: italic;
	text-align: left;
	align-self: center;
	margin-left: 0.75rem;
}

.cControl-Header-Label {
	margin-left: 0.75rem;
}

.cControl-HeadlineSpan {
	width: 100%;
	text-align: left;
	align-self: center;
	font-weight: bold;
}

.cControl-InfoLabel:last-child {
	margin-top: auto; /* pushes last element to the bottom */
}

.cControl-Divider {
	height: 0;
	/* margin-left: -0.25rem;
	margin-right: -0.25rem; */
	margin-bottom: var(--default-padding);
	border-bottom: 1px solid var(--base-color-mid);
}

.cControl-PropertyHeader {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: var(--default-padding);
	min-height: var(--default-property-header-height);
	border-bottom: 1px solid var(--dialog-horizontal-separator-color);
}

.cControl-PropertyHeader-SubContainer {
	display: flex;
	margin-left: 0.5rem;
	padding-top: 0.5rem;
	flex-direction: column;
}

.cControl-PropertyHeader-Thumbnail {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.25rem;
	align-self: center;
	background-color: var(--dialog-thumbnail-BG-color);
	border: 1px solid var(--base-color-mid);
}

.testHeaderContainer {
	background: red;
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
}

.subControlsX {
	background: green;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cControl-PropertyHeader-Name {
	font-weight: bold;
	margin-bottom: 0.25rem;
}

.cControl-PropertyHeader-Description {
	margin-bottom: 0.25rem;
	font-style: italic;
}

.cControl-HeadlineSpanAccordion {
	overflow: hidden;
	text-overflow: ellipsis;
}

.cControl-HeadLine {
	margin-bottom: 0 !important;
}

.cControl-comboInput {
	width: calc(var(--default-cControl-Input-width) - 1rem);
	margin-left: -8.75rem;
	border: none;
	margin-top: 0.0784em; /* 1px; */
	outline: none;
}

.cControl-comboContainer {
	margin-left: 1.5rem;
}


/* #region DIALOG */

.left {
	float: left;
}

.right {
  float: right; 
}
  
.modal-aggregate {
	height: auto !important;
	max-height: 100vh;
	max-width: 100vw;
}

#modal-aggregate-connectors-target, #modal-aggregate-connectors-source {
	width: 24rem;
 	padding-right: 0.5rem;
}

#aggr_interfaces_target, #aggr_interfaces_source {
	width: 47rem;	
}

#modal-aggregate-connectors1-target, #modal-aggregate-connectors1-source {
	width: 12.7rem;
} 

@media screen and (min-width: 1400px) {
	.modal-aggregate {
		width: 87rem !important;	
	}
	#modal-aggregate-connectors1-target, #modal-aggregate-connectors1-source {
		padding-left: 0.5rem;
	} 
}

@media screen and (max-width: 1399px) {
	.modal-aggregate {
		width: 50rem !important;
	}
	#modal-aggregate-connectors1-target, #modal-aggregate-connectors1-source {
		padding-left: 0;
	} 
}  
/* #endregion DIALOG */
/* dialog accordion styles */

.accordion-header-description {
	width: 7.5rem;
	overflow: hidden;
  display: inline-block;
}

.accordion-header-referenceDesignator, .accordion-header-connector {
	width: 4rem;
	overflow: hidden;
  display: inline-block;
}

.accordion-header-interface-parameters {
	width: 31rem;
  display: inline-block;
}

.accordion-header-port-parameters {
	width: 25rem;
	overflow: hidden;
	display: inline-block;
}

.accordion-header-type, .accordion-header-voltage, .accordion-header-current, .accordion-header-operatingMode, .accordion-header-safe {
	display: inline-block;
	overflow: hidden;
}

.accordion-header-port-parameters .cControl-HeadLine {
	display: inline-block !important;
}

.accordion-header-validationContainer {
	display: inline-block !important;
	overflow: hidden;
	width: 1.3333em; /* 17px; */
	height: 1.3333em; /* 17px; */
	vertical-align: top;
	margin-top: -0.15686em; /* -2px; */
}

.accSpanContainer, .accSeparator {
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.accSpanContainer.unvalid, .accordion-header-connector.unvalid {
	color: red !important;
	/* text-shadow:1px 1px white;  var(--lqRed)*/
}

.modal-dialog-body .accordion-itemPanel {
	border-color: black !important;
	border-radius: 0 !important;
}

.modal-dialog-unit .accordion-itemHeaderDialog span.ui-accordion-header-icon {
	margin-top: -1.6rem  !important;
}

.modal-dialog-cable .accordion-itemHeaderDialog span.ui-accordion-header-icon {
	margin-top: -0.6rem  !important;
}

.accordion-itemHeaderDialog {													/* heading of subaccordion */
	max-height: 0.8rem;
	padding: .5rem .5rem .5rem .0;
	background-color: var(--base-mid); /*  !important; */
	margin-bottom: 0.0784em !important;	/* 1px+ */
	/* 	flex-grow: 0;
	flex-shrink: 0; */
	cursor: default;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	/* 	color: var(--base-verylight) !important;
	font-weight: normal !important; */
	padding: .5rem .1rem .5rem .0;
	font-size: 0.8rem;
}

.accSeparator {
	width: 0.8rem;
}

.accordion-footer {
	background-color: var(--base-light) !important;
	width: auto;
	height: 1.1rem;
	border: thin;
  border-color: white;
  border-style: solid;
}

/* #region DIALOG */

.cable-tabs-content {
	display: flex;
	flex-direction: column;
	width: auto;
	height: auto;
	margin: 2px;
	padding: 2px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.cable-tabs-heading-wrapper {
	display: flex;
	flex-direction: row;
	height: 1.8rem;
	background-color: var(--base-color-mid);
}

.cable-heading-tab {
	width: auto;
	/* padding: 7px; */
	color: var(--text-color-light);
	background-color: var(--base-color-mid);
	border-right: 1px solid var(--base-color-dark);
}

.cable-heading-tab.active {
	color: var(--text-color-dark);
	background-color: var(--base-color-white);
}

.cable-heading-tab.disabled {
	color: var(--base-color-mid);
	background-color: var(--base-color-light);
}

.cable-tabs-content-wrapper {
	background-color: var(--base-color-white);
	height: inherit;
	padding: 4px;
	vertical-align: middle;
}
.cControl-ValidationIndicator-Cable {
	order: 4;														/* always positioned last horizontally*/
	display: inline-block;
	vertical-align: text-bottom;
	margin-left: 0.5rem;											/* distance to <input> element */
	margin-right: 0.5rem;
	margin-top: 0.2rem;
	height: 1.25em;
	width: 1.25em;
	background-size: contain;
	background-repeat: no-repeat;
}

.image-cable {
	display: block;
}

.image-cable-hidden {
	display: none;
}

.cable-tab-content {
	display: none;
	margin: 0.5rem;
}

.cable-tab-content.active {
	display: block;
}

.margined-bottom {
	margin-bottom: var(--default-padding);
}
/* @import url("style.css"); */

.modal-background {
	display: flex;
	z-index: 100; /* stay on top */
	justify-content: center; /* center embedded dialog horizontally */
	align-items: center; /* center embedded dialog vertically */
	position: fixed; /* static modal */
	width: 100vw; /* cover whole viewport horizontally */
	height: 100vh; /* cover whole viewport vertically */
	background-color: var(--modal-background-color);
	animation-name: animateFadeIn;
	animation-duration: 0.25s;
}

.modal-dialog {
	display: flex;
	flex-direction: column;
	width: 30rem;
	height: auto;
	max-height: 90vh;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.modal-dialog-wide {
	display: flex;
	flex-direction: column;
	width: 85vw;
	height: auto;
	max-height: 90vh;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.modal-dialog-cable {
	display: flex;
	flex-direction: column;
	width: 32rem;
	height: 42rem;
	max-height: 90vh;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.modal-dialog-unit {
	display: flex;
	flex-direction: column;
	width: 49rem;
	height: 90vh;
	/* max-height: 100vh; */
	max-height: 90vh;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.modal-dialog-header {
	display: flex; /* helper to center text vertically */
	background-color: var(--dialog-title-BG-color);
	width: auto;
	height: 1.5rem;
	padding-left: var(--default-padding);
	align-items: center; /* center text vertically */
	font-weight: normal;
	font-size: 85%;
	color: var(--dialog-title-text-color);
}

.modal-dialog-body {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 10vh;
	z-index: 3; /* Sit on top */
	background-color: var(--dialog-BG-color);
	padding: var(--default-padding);
	overflow: auto;
}

.modal-dialog-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	z-index: 3; /* Sit on top */
	background-color: var(--dialog-BG-color);
	height: 1.5em;
	padding: var(--default-padding);
	border-top: 1px solid var(--dialog-horizontal-separator-color);
}

.dialog-button {
	width: 75px;
	height: 90%;
	margin-right: var(--default-padding); /* keeps default distance to next button */
	font-weight: normal;
	font-size: 85% !important;
}

.dialog-button:last-child {
	margin-right: 0; /* no margin towards right border for last button */
}

@keyframes animateFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* @import url("style.css"); */

.cControl-table {
	border-collapse: collapse;
	box-sizing: border-box;
	font-size: var(--default-font-size);
	text-align: left;
	width: 100%;
}


.cControl-table-wrap {
	overflow: hidden;
	max-height: 7.3rem;
}

.cControl-table-head {
	color: var(--table-title-text-color);
	background-color: var(--table-title-BG-color);
	font-weight: normal;
	cursor: pointer;
}

.cControl-table-body{
	color: var(--table-text-color);
	background-color: var(--table-BG-color);
}


.cControl-table-head-cell {
	font-weight: normal;
	padding-left: var(--default-padding);
	padding-bottom: 1px;					/* ensure text in heading fits nicely even for "very" low letters(y,g,j...) */
	padding-top: 2px;
}

.cControl-table-data-cell {
	font-weight: normal;
	padding-left: var(--default-padding);
	white-space: nowrap;
}

.cControl-table-data-row:hover {
	background-color: var(--table-hover-BG-color);
}

.cControl-table-data-row-delete {
	color: var(--table-text-color-delete);
	text-decoration: line-through;
}
.ui-icon.chevron-up {
	background-image: url(assets/images/chevronLeft.03dca421302491e817c8.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 75% 75%;
	transform: translateY(-1px) rotate(90deg) ;
}

.ui-icon.chevron-down {
	background-image: url(assets/images/chevronRight.4ceed93636a1b5f7022b.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 75% 75%;
	transform: translateY(-1px) rotate(90deg) ;
}

.layerController {
	border-top: 1px solid var(--layerController-color-border);
}

.layerController-Header {
	background-color: var(--layerController-item-header-BG-color);
	color: var(--layerController-item-header-text-color);
	font-weight: normal;
	font-size: 75%;
	padding-left: 0.2rem;
	padding-right: 0.1rem;
	padding-top: 0.25rem;
	padding-bottom: 0.2rem;
}

.layerController-Header.accordion-itemHeader-active {
	font-weight: bold !important;
	color: var(--layerController-item-header-text-color-active) !important;
	background-color: var(--layerController-item-header-BG-color-active) !important;
	color: var(--layerController-item-header-text-color-active) !important;
}

.layerController-Header:hover {
	font-weight: bold !important;
	color: var(--layerController-item-header-text-color-hover) !important;
	background-color: var(--layerController-item-header-BG-color-hover) !important;
}

.layerController-Header span.title {}

.layerController-Header span.ui-icon {
	margin-top: auto;
	float: right;
}

.layerController-Panel {
	background-color: var(--layerController-item-panel-BG-color);
	padding: 0.5rem;
}

.layerController-SubControl {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 0.75rem;
}

.layerController-SubControl:not(:last-child) {		/* vertical distance between elements */
margin-bottom: 0.25rem;
}

.layerController-subControl-label {
	font-size: 0.75rem;
	margin-right: 0.25rem;
	color: var(--layerController-subControl-label-text-color);
}

.layerSwitcher-checkbox {
	transform: scale(0.9);
	margin-left: auto;
	z-index: 9999;
}

.layerSwitcher-range {
	transform: scaleY(0.5);
	margin-left: auto;
	margin-right: 1px;
}

.visibility{}

#rootCanvas {																			/* special root canvas */
	visibility: hidden;
}

.canvas-base {
	height: 100%;
	position: absolute !important;
}

.canvas-base.trash {
	background-color: var(--canvas-BG-color-trashed);						/* TODO change to a combination of a color-variable an opacity, see commented section below */
	/* opacity: 0.3; */
}

.canvas-projectNode {
	display: flex;
	background-color: var(--canvas-BG-color-projectCanvas);			/* TODO change to a combination of a color-variable an opacity, see commented section below */
	/* opacity: 0.3; */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	background-repeat:no-repeat;
	background-position: center center;
	background-size: 50vh;
	background-image: url(assets/images/logo.b36da606b3ec56270a60.svg);
}

.canvas-assemblyNode {
	background-color: var(--canvas-BG-color-assemblyCanvas);				/* TODO change to a combination of a color-variable an opacity, see commented section below */
}

.canvas-infrastructureNode {
	background-color: var(--canvas-BG-color-infrastructureCanvas);				/* TODO change to a combination of a color-variable an opacity, see commented section below */
}

.canvas-trashNode {
	background-color: var(--canvas-BG-color-trashCanvas);				/* TODO change to a combination of a color-variable an opacity, see commented section below */
	/* opacity: 0.3; */
}


.canvas-info-subContainer {
	position: absolute;
	left:0;
	margin-left: 0.3vw !important;
	bottom:0.5vh;
	font-family: sans-serif;
	opacity: 0.5;
	font-weight: bold;
}

.canvas-info-name {}

.canvas-info-referenceDesignator {}

.canvas-info-subContainer.ProjectCanvas {
	color: var(--canvas-info-text-color-projectCanvas);
}

.canvas-info-subContainer.AssemblyCanvas {
	color: var(--canvas-info-text-color-assemblyCanvas);
}

.canvas-info-subContainer.InfrastructureCanvas {
	color: var(--canvas-info-text-color-infrastructureCanvas);
}

.canvas-info-subContainer.TrashCanvas {
	color: var(--canvas-info-text-color-trashCanvas);
}

.canvas-info-subContainer.trash {
	color: var(--canvas-info-text-color-trashed);
}


.canvas-preview-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 1em;
	min-width: 20vh;
	min-height: 13.33vh;
	z-index: 5;
	margin-left: 10vh;
	margin-right: 10vh;
}

.canvas-preview-container.AssemblyNode {
	background-color: var(--canvas-preview-BG-color-assembly);
}

.canvas-preview-container.AssemblyNode:hover {
	background-color: var(--canvas-preview-BG-color-assembly-hover);
}

.canvas-preview-container.InfrastructureNode {
	background-color: var(--canvas-preview-BG-color-infrastructure);
}

.canvas-preview-container.InfrastructureNode:hover {
	background-color: var(--canvas-preview-BG-color-infrastructure-hover);
}

.canvas-preview-text {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 2vh;
}

.canvas-preview-referenceDesignator {
	font-size: 1.65vh;
}

.outliner-container {
	margin-bottom: auto;
	flex-grow: 1;
	height: 100%;
	overflow-x: hidden;
}

.outliner-container .simplebar-scrollbar::before {
	background-color: var(--base-color-veryLight);
}

.fancytree-container {
	position: static !important;
	border: none !important;																					/* suppress border */
	background-color: var(--sidePanelRight-BG-color) !important;
	outline: none !important;																					/* suppress outline */
	width: 100%;
}

.fancytree-node {
	margin-left: -13px;
	width: 110% !important;
}

.fancytree-title {
	color: var(--outliner-text-color) !important;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
}

.fancytree-title.error {
	color: var(--outliner-text-color-error) !important;
}

.fancytree-icon {
	vertical-align: text-bottom !important;														/* nicer alignment of icons in relation to text */
}

.fancytree-plain span.fancytree-active span.fancytree-title {				/* overwriting default look of selected treeNodes */
	background-color: transparent;																		/* no background on active node */
	outline: none !important;																					/* no outline on active node */
	font-weight: bold;																								/* bold text on active node */
}

/*! this is legacy code. To be replaced by messenger.ts & its local messenger.css */

.messengerShell {
	background-color: var(--statusBar-BG-color);
	justify-content: flex-start;							/* align context at left side */
	align-items: center;									/* center flex-item vertically */

	/* flex-basis: 98.5%; */

	/* basis-width in relation to statusBar */
	height: 100%;											/* fill statusBar vertically */
}

.messageBox {
	display: inline-block;
	font-family: sans-serif;
	font-size: 85%;
	text-indent: 0.5rem;
}

.messageBox-text-normal {
	color: var(--statusBar-text-color-normal);
}

.messageBox-text-info {
	color: var(--statusBar-text-color-warning);
}

.messageBox-text-error {
	color: var(--statusBar-text-color-error);
}

/* Central client-wide style for all scrollbars
 *
 * UTILIZING:
 *		jQuery Scrollbar as a replacement for the standard scrollbar, details under https://gromo.github.io/jquery.scrollbar/ (the config here is taken from the Mac OS X Lion version, https://gromo.github.io/jquery.scrollbar/demo/basic.html)
 *
 * TODO:
 *
 * AUTHOR(S):
 *		Christian Lange
 *
 */


.customScrollbarContainer > .scroll-element,
.customScrollbarContainer > .scroll-element div {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 10;
}

.customScrollbarContainer > .scroll-element div {
	display: block;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

.customScrollbarContainer > .scroll-element .scroll-element_track {display: none;}
.customScrollbarContainer > .scroll-element .scroll-bar {
	background-color: #6C6E71;
	display: block;
 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
 
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
 
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}

.customScrollbarContainer:hover > .scroll-element .scroll-bar,
.customScrollbarContainer > .scroll-element.scroll-draggable .scroll-bar {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}


/* Deactivated since no horizontal scrollbars are needed atm*/
/* .customScrollbarContainer > .scroll-element.scroll-x {
	bottom: 0px;
	height: 0px;
	left: 0;
	min-width: 100%;
	overflow: visible;
	width: 100%;
} */

.customScrollbarContainer > .scroll-element.scroll-y {
	height: 100%;
	min-height: 100%;
	right: 0px;
	top: 0;
	width: 0px;
}

/* scrollbar height/width & offset from container borders */
.customScrollbarContainer > .scroll-element.scroll-x .scroll-bar {height: 7px; min-width: 10px; top: -9px;}
.customScrollbarContainer > .scroll-element.scroll-y .scroll-bar {left: -9px; min-height: 10px; width: 7px;}

.customScrollbarContainer > .scroll-element.scroll-x .scroll-element_outer {left: 2px;}
.customScrollbarContainer > .scroll-element.scroll-x .scroll-element_size {left: -4px;}

.customScrollbarContainer > .scroll-element.scroll-y .scroll-element_outer {top: 2px;}
.customScrollbarContainer > .scroll-element.scroll-y .scroll-element_size {top: -4px;}

.customScrollbarContainer-table > .scroll-element.scroll-y .scroll-element_outer {			/* push scrollbar down to account for the floating head in tables */
	top: calc(5px + var(--default-font-size) * 1.1) !important;
}

/* update scrollbar offset if both scrolls are visible */
.customScrollbarContainer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {left: -11px;}
.customScrollbarContainer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {top: -11px;}

/* Style for splashScreen.js */


.splashScreen-window {
	display: flex;
	flex-direction: column;
	width: 45vw;
	height: 50vh;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}


.splashScreen-heading-wrapper {
	display: flex;
	flex-direction: row;
	height: 2rem;
	background-color: var(--splashScreen-header-BG-color);
}

.splashScreen-heading-tab {
	width: 20%;
	text-align: center;
	line-height: 2rem;																													/* trick to center text vertically */
	color: var(--splashScreen-header-tab-text-color);
	background-color: var(--splashScreen-header-tab-BG-color);
	border-right: 1px solid var(--splashScreen-header-tab-separator-color);

}

.splashScreen-heading-tab.active {
	color: var(--splashScreen-header-activeTab-text-color);
	background-color: var(--splashScreen-header-activeTab-BG-color);
}


.splashScreen-content-wrapper {
	background-color: var(--splashScreen-BG-color);
	height: inherit;
}

.splashScreen-content-tab {
	display: none;
	margin: 0.5rem;
}

.splashScreen-content-tab.active {
	display: block;
}


.splashScreen-footer-wrapper {
	height: 1.75rem;
	background-color: var(--splashScreen-footer-BG-color);
	border-top: 1px solid var(--splashScreen-footer-separator-color);
	padding: 0 var(--default-padding) 0 var(--default-padding);
}

.splashScreen-footer-tab {
	display: none;
	height: 100%;
	flex-direction: row;
	align-items: center;
}

.splashScreen-footer-tab.active {
	display: flex;
}


.splashScreen-checkbox {
	margin-right: 0.25rem;
}

.splashScreen-checkbox-caption {
	font-size: 0.75rem;
}

.splashScreen-button {
	width: 50px;
	font-size: 85%;
	margin-left: auto;
}


.splashScreen-content-tab.recentProjectList.active {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}

.recentProjectList-item {
	color: var(--splashScreen-recentProjects-text-color);
	margin-bottom: .5rem;
}

.recentProjectList-item:last-of-type {
	margin-bottom: 0;
}

.recentProjectList-item:hover {
	font-weight: bold;
}

.recentProjectList-item.selected {
	color: var(--splashScreen-recentProjects-selected-text-color);
}

.recentProjectList-NoProjectWarning {
	color: var(--text-color-accent2);
}

/* ###################################### MARKDOWN FORMATTING ###################################### */

.splashScreen-content-tab h2 {
	margin-bottom: 10px;
}

.splashScreen-content-tab ul {
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 20px;
}

.splashScreen-content-tab ol {
	display: block;
	list-style-type: decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}

.splashScreen-content-tab li {
	display: list-item;
}

.splashScreen-content-tab p {
	display: block;
	text-align: justify;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

.splashScreen-content-tab p img {
	width: 100%;
}

.splashScreen-content-tab blockquote {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 20px;
	margin-inline-end: 20px;
}

br {
	display: block;
	margin: 10px 0;
}

#loadingScreen-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#loadingScreen-Animation {
	stroke-width: 0.75;
}

#loadingScreen-text {
	margin-top: 1rem;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--loadingScreen-text-color);
}

#path_l {
	stroke-dasharray: 85.39427947998047;
	stroke-dashoffset: 85.39427947998047;
	animation: line-animation 2s ease-in-out infinite forwards;
}

#path_q_outer {
	stroke-dasharray: 123.3434829711914;
	stroke-dashoffset: 123.3434829711914;
	animation: line-animation 2s ease-in-out infinite forwards 0.2s;
}

#path_q_inner {
	stroke-dasharray: 45.23420715332031;
	stroke-dashoffset: 45.23420715332031;
	animation: line-animation 2s ease-in-out infinite forwards 0.4s;
}


@keyframes line-animation {
	0% {
		stroke: var(--lqSilver);
		}
	75% {
		stroke-dashoffset: 0;
		stroke: var(--lqSilver);
	}

	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
	}
}

/* Style for AccordionNew.js */


.accordionNew {
	/* margin-bottom: 3rem;																											/* Do we really need a margin here? */
}
.accordionNew:last-of-type {
	/* margin-bottom: 0;																												/* Only needed if we use a margin on accordions! */
}

.accordionNew-heading {
	font-weight: bold;
	font-size: 0.8rem;
	padding: 0.5rem;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	color: var(--accordion-container-heading-text-color);
	background-color: var(--accordion-container-heading-BG-color);
}

.accordionNew-content {
	display: flex;
	flex-direction: column;
}
/* Style for collapsible.js */


.collapsible {																																/* outer container around collapsible */
	border-bottom: 1px solid var(--accordion-item-border-color);
	display: flex;
	flex-direction: column;
}

.collapsible-layerController {
	border-bottom: none;																												/* suppress border for layerController collapsible */
}

.collapsible-heading-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;																							/* force caption and symbol to the horizontal extremes */
	align-items: center;																												/* vertical alignment of caption and symbol spans */

	height: 2rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	font-size: 0.8rem;
	background-color: var(--accordion-item-header-BG-color);
	color: var(--accordion-item-header-text-color);
}

.collapsible-marked .collapsible-heading-caption {														/* results of collapsible-item searches */
	color: var(--accordion-marked-element-color) !important;
}

.collapsible-heading-caption {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.collapsible-heading-symbol {
	padding-left: 0.5rem;
	font-family: monospace;																											/* needed to correctly align +/- signs */
	font-size: 1rem;																														/* needed to correct the size of +/- signs; monospace is much smaller then the normal font */
  transform: translateY(-1px);																								/* needed to correct misalignment of the +/- signs with the label text; probably because of monospace */
}

.collapsible-heading-symbol:after {
	content: '+';																																/* add "plus" sign (+) */
}

.collapsible-content-wrapper {
	max-height: 0px;																														/* hide wrapper by default */
	background-color: var(--accordion-item-panel-BG-color);
	transition: max-height .33s ease-in-out;
}

.collapsible-content {
	background-color: var(--accordion-item-panel-BG-color);
}

.collapsible-content.layout-list {
	margin: 0 0.5rem 0 0.5rem;
	display: flex;
	flex-direction: column;
}

.collapsible-content.layout-tile {
	margin: 0 0.25rem 0 0.25rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;																			/* always create 4 equal columns */
}


/* ######################################## DYNAMIC SELECTORS ############################################################ */


.collapsible-heading-wrapper:hover {
	background-color: var(--accordion-item-header-BG-color-hover);
}

.collapsible-heading-wrapper:hover .collapsible-heading-caption {							/* select elements with class .collapsible-heading-caption that are descendants of elements with class .collapsible-heading-wrapper:hover */
	font-weight: bold;
	color: var(--accordion-item-header-text-color-hover);
}

.collapsible-expanded .collapsible-heading-caption {													/* select elements with class .collapsible-content-wrapper that are descendants of elements with class .collapsible-heading-caption */
	font-weight: bold;
	color: var(--accordion-item-header-text-color-active);
}

.collapsible-expanded .collapsible-content-wrapper {													/* select elements with class .collapsible-content-wrapper that are descendants of elements with class .collapsible-expanded */
	max-height: 17.5vh;																													/* show parts of new row only half to indicate that scrolling is possible/needed */
}

.collapsible-expanded .collapsible-heading-symbol:after {											/* select elements with class .collapsible-heading-symbol that are descendants of elements with class .collapsible-expanded */
	content: '-';																																/* replace with "minus" sign (-) */
}

/* Style for collapsibleItem.js */


.collapsible-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.collapsible-item.noDrag {																										/* while hovering over disabled (grayout) element */
	cursor: not-allowed;
}


.collapsible-item-image {																											/* always set width AND height to ensure non quadratic images get scaled to the same size as the rest */
	height: 2.5rem;
	width: 2.5rem;
}


.collapsible-item-caption {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.8rem;
	margin-left: .5rem;
}


/* ########################## LIST LAYOUT STYLES ########################## */


.collapsible-item.layout-list {																								/* select elements with classes .collapsible-item AND .layout-list */
padding: 0.25rem 0 0.25rem 0;
border-bottom: 1px solid var(--accordion-item-list-separator-color);
}

.collapsible-item.layout-list:last-of-type {
	border-bottom: none;
}

.collapsible-item.layout-list .collapsible-item-image {												/* select class .collapsible-item-image that is descending from elements with classes .collapsible-item AND .layout-list */
	/* no changes */
}

.collapsible-content .collapsible-item.layout-list.marked {										/* show search marking only while collapsible item is still on it's content pane (and hide it on drag) */
	color: var(--accordion-marked-element-color);
}


/* ########################## TILE LAYOUT STYLES ########################## */


.collapsible-item.layout-tile {																								/* select elements with classes .collapsible-item AND .layout-tile */
	padding: 0.25rem;																														/* + default padding of .collapsible-content.layout-tile (0.25rem) equals to 0.5rem distance from the left border, perfectly aligned with .collapsible-heading-caption (which gets its padding of 0.5rem from .collapsible-heading-wrapper) */
	border-bottom: none;
	margin:auto;
}

.collapsible-item.layout-tile .collapsible-item-image {												/* select class .collapsible-item-image that is descending from elements with classes .collapsible-item AND .layout-tile */
	margin: auto 0 auto 0;																											/* center image vertically */
}

.collapsible-item.layout-tile .collapsible-item-caption {											/* select class .collapsible-item-caption that is descending from elements with classes .collapsible-item AND .layout-tile */
	display: none;																															/* hide caption in tile layout*/
}

.collapsible-content .collapsible-item.layout-tile.marked .collapsible-item-image {				/* show search marking only while collapsible item is still on it's content pane (and hide it on drag) */
	outline: 1px solid 	var(--accordion-marked-element-color);
	outline-offset: 1px;
}


/* ########################## COLLAPSIBLE CONTROLS ########################## */


.collapsible-item-layerControl {
	margin-top: 2px;
	margin-bottom: 2px;
}


.collapsible-item-layerControl input[type=checkbox], .collapsible-item-layerControl input[type=range] {		/* select elements of type collapsible-item-layerControl AND checkbox OR elements of type collapsible-item-layerControl AND range */
	max-width: 50%;
	margin-left: auto;
}

.collapsible-item-layerControl input[type=checkbox] {		/* select elements of type collapsible-item-layerControl AND checkbox */
	margin-right: .5rem
}

.collapsible-item-layerControl input[type=range] {		/* select elements of type collapsible-item-layerControl AND range */
	margin-right: .45rem
}

.sidePanel-widget {
	display: flex;
	align-content: center;
	width: 100%;
	height: 1.75vh;
	border-bottom: 1px solid var(--sidePanelWidget-border-color);
}

#sidePanelWidgetLeft {
	flex-direction: row-reverse;
	background-color: var(--sidePanelLeft-widget-BG-color)
}

#sidePanelWidgetRight {
	flex-direction: row;
	background-color: var(--sidePanelRight-widget-BG-color)
}

.sidePanel-widget-image {
	margin-top: 0.5%;
	margin-bottom: 0.5%;
}

.sidePanel-widget-search {
	border: none;																																/* suppress textbox default border */
	font-size: 65%;
	width: 100%;
	padding: 0 2px 0 0.5rem;
	margin: 2px 5px 2px 0;
	color: var(--sidePanelWidget-search-text-color);
	background-color: var(--sidePanelWidget-search-BG-color);
}

.sidePanel-widget-search::placeholder {
	color: var(--sidePanelWidget-search-placeholder-text-color);
}

.sidePanel-widget-search:focus {
	outline: none;																															/* suppress default outline on focused textbox */
	color: var(--sidePanelWidget-search-text-color-active);
	background-color: var(--sidePanelWidget-search-BG-color-active);
}

#pdfExportWrapper {
	display: flex;
	flex-direction: row;
	background-color: white;
	visibility: hidden;
}

.test {
	stroke: cornflowerblue;
	stroke-width: 2.5;
	stroke-dasharray: 13 20;
}




/*# sourceMappingURL=main.7b1e5091c08600505853.css.map*/