/*
	VALUE PANELS JS PLUGIN
	Datei: valuePanels.css
	Autor: Ole Jepsen
	Firma: 2wcom Systems GmbH

	Voraussetzungen:
	- valuePanels.js

	Versionshistory:
		v0.73 (19.09.2025 ojepsen)
			- fix: Hidden history view in some cases (using single container-base)
		v0.72 (10.07.2025 ojepsen)
			- fix: FieldContainer are wider than normal fields
		v0.71 (30.06.2025 ojepsen)
			- fix: Signs like "g" are clipped as secound value
		v0.70 (06.02.2025 ojepsen)
			- add: rule for vp-status-state="standby"
		v0.69 (19.12.2024 ojepsen)
			- add: rule for "VP_VOPT_HISTORY" icon
		v0.68 (26.11.2024 ojepsen)
			- fix: Long values are overflowing the field container
		v0.67 (20.11.2024 ojepsen)
			- add: support for LED status in row 0
		v0.66 (13.11.2024 ojepsen)
			- fix: Long values in the last field can overflow over the max width
		v0.65 (15.10.2024 ojepsen)
			- fix: field status can be overwritten by the “sum-status”.  
			- fix: field container is not hidden correctly if no content is visible.
		v0.64 (25.09.2024 ojepsen)
			- add: rules for value option "VP_VOPT_HISTORY"
		v0.63 (21.03.2024 ojepsen)
			- change: status for hide an led from "n/a" to "hide"
			- add: new status "n/a" to draw values as "not available"
		v0.62 (04.01.2024 ojepsen)
			- add: z-index to vp-value-con and vp-icon-con
		v0.61 (03.01.2024 ojepsen)
			- add: rules for iconUrl
		v0.60 (25.08.2023 ojepsen)
			- fix: fontOption "VALUE_CENTER" for VP_VOPT_DUAL does not work
		v0.59 (02.02.2023 ojepsen)
			- add: rules for VP_VOPT_LED in combi with VP_VOPT_MULTI_VALUE
		v0.58 (26.10.2022 ojepsen)
			- fix: Incorrect display of VP_VOPT_LED in first position 
		v0.57 (17.06.2022 ojepsen)
			- add: rules for combinations of vp-icon-con and vp-value-btn
		v0.56 (14.04.2022 ojepsen)
			- fix: Some fontOptions combinations are not working.
			- add: fontOptions (VALUE_LEFT and VALUE_RIGHT) to VP_VOPT_ICON
		v0.55 (12.04.2022 ojepsen)
			- add: rules for caption:1 (VP_VOPT_LABEL)
		v0.54 (11.04.2022 ojepsen)
			- add: rules for fontOption "ellipsis"
		v0.53 (31.03.2022 ojepsen)
			- add: rules for valuePanel update to v1.01
		v0.52 (23.03.2022 ojepsen)
			- add: rules for vp-led (fontOptions)
		v0.51 (18.03.2022 ojepsen)
			- add: VP_VOPT_DUAL kann nun auch über fontOptions gestylt werden. (LABEL_ -> für das First Value und VALUE_ -> für das Second Value)
		v0.50 (25.02.2022 ojepsen)
			- add: Regeln für VP_VOPT_INPUT_TEXT Option
		v0.49 (10.02.2022 ojepsen)
			- change: Einige Änderungen beim FieldContainer
			- change: LED Status Attr umbenannt (nun sollten alle values das gleiche Status Attr nutzen)
		v0.48 (08.09.2021 ojepsen)
		    - change: Highlight Darstellung verbessert.
		v0.47 (06.07.2021 ojepsen)
		    - fix: Darstellungsfehler im IE
		v0.46 (02.07.2021 ojepsen)
		    - change: Kleinere Anpassungen der Highligth Darstellung
		v0.45 (01.07.2021 ojepsen)
		    - fix: Highlight Darstellung erneut überarbeitet
		v0.44 (28.06.2021 ojepsen)
		    - fix: Fehlerhafte Highlight Darstellung mit Status Bar
		v0.43 (22.06.2021 ojepsen)
		    - fix: Fehlerhafte Highlight Darstellung bei Container mit Field Status 
		v0.42 (11.06.2021 ojepsen)
		    - add: fontOption rules for VALUE_VCENTER
		v0.41 (10.06.2021 ojepsen)
		    - change: bigger "highlight" border around the fields
		v0.40 (29.03.2021 ojepsen)
			- add: optimized styles for "labelStatus"
		v0.39 (19.03.2021 ojepsen)
			- add: styles for "VP_VOPT_MULTI_TABLE" and "VP_VOPT_EXT_SOURCE"
		v0.38 (04.03.2021 ojepsen)
			- add: styles for option "labelStatus"
			- add: rules for valueLevelMeter "row extendable"
		v0.37 (29.01.2021 ojepsen)
		    - fix: levelmeter peaks overlap the fildContainer buttons. Add z-index rule
		v0.36 (18.01.2021 ojepsen)
		    - add: some rules for field containers (notice state)
		v0.35 (07.01.2021 ojepsen)
		    - add: some rules for field containers (status values)
		v0.34 (21.12.2020 ojepsen)
		    - add: Regeln zum ein und ausklappen von Multivalues
		v0.33 (08.12.2020 ojepsen)
		    - fix: Field Container mit "auto" width, wird nicht richtig angezeigt.
		v0.32 (30.11.2020 ojepsen)
		    - add: Regeln für Values im Titel Container
		v0.31 (27.10.2020 ojepsen)
			- fix: Fields in a row-span do not extend over the entire height.
		v0.30 (23.10.2020 ojepsen)
			- fix: The label of a Fiel Container is overlaid by a level meter peak. (add z-index) 
		v0.29 (06.10.2020 ojepsen)
			- add: support for valueLevelmeter 
		v0.28 (22.09.2020 ojepsen)
			- change: LED Strips are now smaller (6px->5px)
		v0.27 (16.04.2020 ojepsen)
			- add: Support for Levelmeter fontOptions
		v0.26 (26.02.2020 ojepsen)
			- add: LED Strip
			- fix: Einige Anzeigefehler der FieldContainer
		v0.25 (16.01.2020 ojepsen)
			- fix: Fields mit Option "switchGroup" bekommen einen Hand Cursor auch wenn sie Disabled sind! Grund: die Option enthält das Wort switch.
		v0.24 (07.01.2020 ojepsen)
			- add: Status "n/a" blendet LED aus.
			- fix: Multivalue Tabellen werde innerhalb eines B3 Containers ungestylt.
			- change: Rows mit keinem sichtbaren Inhalt werden auch ausgeblendet wenn das Field kein "Exp. Button" besitzt.
		v0.23 (25.11.2019 ojepsen)
			- add: Field Container Style update
		v0.22 (19.11.2019 ojepsen)
			- add: Field Container Style
		v0.21 (22.10.2019 ojepsen)
			- change: Alle Value Container sind nun 30px hoch. Die Rows sind min. 15 px hoch. Möchte man ein Value mit geringerer Höhe haben, so muss height übergeben werden.
		v0.20 (18.10.2019 ojepsen)
			- add: Monospace Font family
			- add: Debug Anzeige für einige Value Optionen
		v0.19 (10.10.2019 ojepsen)
			- change: Default LED Farbe ist nun grau.
			- add: ausblenden einer Row, wenn alle enthaltenen Values unsichtbar sind.
			- add: ausblenden des "erweitern" Button
			- add: ausblenden des ganzen Views, wenn alle Fields unsichtbar sind.
		v0.18 (08.10.2019 ojepsen)
		    - fix: auto width bei levelmeter und label funktioniert nicht!
		v0.17 (27.09.2019 ojepsen)
		    - fix: fontoptions wirken nicht auf ein VP_VOPT_LABEL.
		v0.16 (28.08.2019 ojepsen)
		    - debugInfo hinzugefügt.
		v0.15 (21.08.2019 ojepsen)
			- anpassungen für vp-hide
		v0.14 (16.08.2019 ojepsen)
			- change: "vp-hidden" in "vp-hide" umbenannt
			- change: font-options hinzugefügt.
			- change: kleinere änderungen
		v0.13 (05.08.2019 ojepsen)
			- fix: Fields werden nicht richtig ausgeblendet. 
		v0.12 (02.08.2019 ojepsen)
			- add: anpassungen für das field grid layout
			- add: support: value "align"
			- add: support: label "size"
		v0.11 (30.07.2019 ojepsen)
			- add: field grid layout support für IE11
			- add: erweiterten Field Titel
		v0.10 (05.07.2019 ojepsen)
			- add: field grid layout
		v0.08 (28.06.2019 ojepsen)
			- fix: multivalue led höhe angepasst.
			- add: erste Row eines field ohne label hat nun kein margin-top mehr.
		v0.07 (28.06.2019 ojepsen)
			- add support "VP_VOPT_MULTI_VALUE"
		v0.06 (28.06.2019 rmagnussen)
			- fixed .vp-field border color (medium-grey-color for switch, light-grey-color otherwise)
		v0.05 (27.06.2019 rmagnussen)
			- adjusted .vp-field border color to medium grey-color
			- adjusted .vp-field-row margin-top to 6px
		v0.04 (24.06.2019 ojepsen)
			- add "vp-led" support.
			- add "vp-fopt-light"
		v0.03 (18.06.2019 ojepsen)
			- add "vp-hidden" support.
		v0.02 (04.06.2019 ojepsen)
			- add "dual" value support.
			- fix: kleinere anzeigefehler
		v0.01 (24.05.2019 ojepsen)
			- Erstellung

*/
.vp-view-content .vp-icon-con
{
	display: flex;
	align-items: center;
	justify-content: center;
}
.vp-view-content .vp-field-icon{
	display: flex;
	align-items: center;
	padding-right: 5px;
}
.vp-view-content .vp-icon-con div,
.vp-view-content .vp-field-icon div
{
	background-repeat: no-repeat;
	z-index: 1;

}



.vp-view-content{
	width: 100%;
	/* overflow: hidden; */
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: 1fr;
	grid-template-rows: auto;
	position: relative;
	-ms-grid-columns: 1fr;
	grid-template-columns: 100%;
}

.vp-view-content[vp-view-content-rowspan=true]{
	-ms-grid-columns: max-content auto;
	grid-template-columns: max-content auto;
}

.vp-view-content[vp-fields-visible-cnt="0"]
{
	display: none !important;
}

.vp-view-content .vp-view-content-row{
	/*min-height: 72px;*/
	display: flex;
	/*margin-bottom: 5px;*/
	flex-wrap: nowrap;
	/* overflow: hidden; */
}
.vp-view-content .vp-view-content-row .vp-field-content,
.vp-view-content .vp-view-content-row .vp-field-container{
	margin-top: 5px;
}
.vp-view-content [vp-view-content-row="1"] .vp-field-content,
.vp-view-content .vp-field-container .vp-field-content,
.vp-view-content [vp-view-content-row="1"] .vp-field-container{
	margin-top: 0px;
}

.vp-view-content [vp-view-content-row="1"]{
	-ms-grid-row: 1;
	grid-row: 1;
}
.vp-view-content [vp-view-content-row="2"]{
	-ms-grid-row: 2;
	grid-row: 2;
}
.vp-view-content [vp-view-content-row="3"]{
	-ms-grid-row: 3;
	grid-row: 3;
}
.vp-view-content[vp-view-content-rowspan="true"] .vp-view-content-row:not([vp-view-content-rowspan]){
	grid-column-start: 1;
	grid-column-end: 3;
}
/* .vp-view-content[vp-view-content-rowspan="true"] .vp-view-content-row{
	-ms-grid-column: 2;
	grid-column: 2;
} */



.vp-view-content[vp-view-content-rowspan] [vp-view-content-rowspan]{
	/*height: 100%;*/
	float: left;
	margin-right: 5px;
	/* -ms-grid-column: 1 !important; */
	/*-ms-grid-row-span: 2;*/

	grid-column-start: 1;
	/*grid-row-start: 1;*/
	/*grid-row-end: 3;*/
}

.vp-view-content[vp-view-content-rowspan="false"] [vp-view-content-rowspan][vp-view-content-row="1"]{
	grid-row-end: 1 !important;
}

/* FIELD */
.vp-view-content .vp-field-content
{
	position: relative;
	height: auto;
	float: left;
	top: 0px;
	width: 1px;
	/* overflow: hidden; */
	/*min-height: 108px;*/
	/* border: 1px solid #efefef;
	border: 1px solid var(--light-grey-color); */
	background-color: #efefef;
	background-color: var(--light-grey-color);
	/*box-sizing: border-box;*/
	margin-right: 5px;
}



.vp-view-content .vp-view-content-row > div:last-of-type{ 
	margin-right: 0px;
}

.vp-view-content .vp-field-content > .vp-field{
	height: 100%;
	float: left;
	top: 0px;
	left: 0px;
	line-height: 10px;
	padding: 8px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #efefef;
	border: 1px solid var(--light-grey-color);
}

.vp-view-content .vp-field-content > .vp-field:not([vp-no-title="true"]){
	padding-top: 3px !important;
}

.vp-view-content .vp-field-content > .vp-field .vp-field-row-con{
	display: -ms-grid;
	display: grid;
	overflow: hidden;
}
.vp-view-content .vp-field-content[vp-field-options*="switch_"] > .vp-field{
	border: 1px solid #cccccc;
	border: 1px solid var(--medium-grey-color);
}

.vp-view-content .vp-field-content[vp-field-options*="spacer_"]{
	background: white !important;
	margin-top: 0px;
}
.vp-view-content .vp-field-content[vp-field-options*="spacer_"] > .vp-field{
	display: none;
}

.vp-view-content .vp-field-content[vp-field-status="true"] .vp-field{
	border-left: none;
	margin-left: 8px;
	padding-left: 8px;
	width: calc(100% - 8px);
}

.vp-view-content .vp-field-content[vp-disabled="true"]{
	color: #aaaaaa !important;
	color: var(--disabled-grey-color) !important;
	background-color: white;
}

.vp-view-content .vp-field-content [vp-hide*="hide"],
.vp-view-content .vp-field-content[vp-hide*="hide"],
.vp-view-content .vp-field-container-base[vp-hide*="hide"],
.vp-view-content .vp-field-container[vp-hide*="hide"]{
	display: none !important;
}


.vp-view-content .vp-field-content[vp-field-switch-state="false"] .vp-field{
	background-color: white;
}

.vp-view-content .vp-field-content[vp-field-switch-state="true"] .vp-field{
	border-color: #cccccc;
	border-color: var(--medium-grey-color);
}

.vp-view-content-row[vp-expand-all-fields="false"]:not([vp-view-content-rowspan]) .vp-field-content,
.vp-view-content-row[vp-expand-all-fields="false"]:not([vp-view-content-rowspan]) .vp-field-container
{
	height: min-content;
}

.vp-view-content-row[vp-expand-all-fields="false"]:not([vp-view-content-rowspan]) .vp-field-container-content .vp-field-content{
	/* height: calc(100% + 2px); */
	height: 100%;
}



/* FIELD CONTAINER */

.vp-view-content .vp-field-container-base
{
	position: relative;
	height: auto;
	float: left;
	top: 0px;
	margin-right: 5px;
	/* overflow: hidden; */
}

.vp-view-content .vp-field-container{
	margin-right: 5px;
	height: auto;
	float: left;
	top: 0px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	/*width: 1px;  Wichtig beim letzten Field, welches eine dyn. Breite hat! */
	
	overflow: hidden;
	/* background-color: #efefef; */

}
.vp-view-content .vp-field-container .vp-field-container-content{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #efefef;
}

/* .vp-view-content .vp-field-container .vp-field-container-content{
	padding: 0px !important;
	margin: 8px;
	margin-top: 3px;
	width: calc(100% - (8px + 8px));
	height: calc(100% - (8px + 3px));
} */

/* .vp-view-content .vp-field-content[vp-field-options*="light_"] > .vp-field{
	background-color: white; */

.vp-view-content .vp-field-container .vp-field-container-content .vp-content-area{
	width: auto;
	height: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
}

.vp-view-content .vp-field-container .vp-field-container-content .vp-field-content{
	box-sizing: border-box;
	overflow: hidden;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]{
	position: absolute;
	height: calc(100% - 28px);
	top: 28px;
	width: 20px;
	/* justify-content: center; */
	align-items: center;	
	display: none;
	z-index: 10;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"].visible{
	display: flex !important;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"] div.infoCon{
	position: absolute;
	display: none;
	width: auto;
	/* top: calc((100% - 40px) / 2); */
	height: auto;
	align-items: center;
	flex-direction: column;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #1e9476;
	background: #23af8c;
	z-index: 5;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"] div.infoCon div{
	color: white;
	text-align: center;
	white-space:nowrap;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"] div.infoCon div.title{
	font-weight:bold;
	font-size: 15px;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"] div.infoCon div.enhTitle{
	font-size: 13px;
}

.vp-view-content .vp-field-container .vp-field-container-btn-left div.infoCon{
	text-align: right;
	left: 25px;
	
}
.vp-view-content .vp-field-container .vp-field-container-btn-right div.infoCon{
	text-align: left;
	right: 25px;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]:hover div.infoCon{
	display: block;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"] div.arrow{
	position: absolute;
	width: 0;
	height: 0;
	/* top: calc((100% - 12px) / 2); */
	left: 7px;
	border-top-width: 8px;
	border-top-style: solid;
	border-top-color:transparent;
	border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color:transparent;
	border-left-color:#cccccc;
	border-right-color:#cccccc;
}
.vp-view-content .vp-field-container .vp-field-container-btn-left{
	left: 0px;
}
.vp-view-content .vp-field-container .vp-field-container-btn-left div.arrow{
	border-right-width: 8px;
}
.vp-view-content .vp-field-container .vp-field-container-btn-right{
	right: 0px;
}
.vp-view-content .vp-field-container .vp-field-container-btn-right div.arrow{
	border-left-width: 8px;
}

.vp-view-content .vp-field-container:hover [class*="vp-field-container-btn-"]{
	background: #ffffff80;
	height: calc(100% - 29px - 2px);
	top: calc(29px );
	border: 1px solid #1e9476;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-left"] div.arrow{
	border-right-style: solid;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-right"] div.arrow{
	border-left-style: solid;
}

.vp-view-content .vp-field-container:hover [class*="vp-field-container-btn-"] div.arrow{
	border-left-color: #3c3c3c;
	border-right-color: #3c3c3c;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]{
	border-color: #1e9476;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]:hover{
	background: #23af8c;
	cursor: pointer;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]:active{
	background: #1e9476;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]:hover div.arrow,
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"]:active div.arrow{
	border-left-color: #ffffff;
	border-right-color: #ffffff;
}

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="bad"] div.infoCon,
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="bad"]
{
	border-color: #cf1d35;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="bad"] div.infoCon,
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="bad"]:hover
{
	background: #e61f38;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="bad"]:active{
	background: #cf1d35;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="notice"] div.infoCon,
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="notice"]
{
	border-color: #d48336;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="notice"] div.infoCon,
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="notice"]:hover
{
	background: #f3943e;
}
.vp-view-content .vp-field-container [class*="vp-field-container-btn-"][vp-status-state="notice"]:active{
	background: #d48336;
}




/* FIELD CONTAINER -> Scroll Bar */
.vp-view-content .vp-field-container .vp-field-container-scroll-con{
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	display: flex;
	justify-content: center;
	height: 7px;

}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball{
	height: 2px;
	width: 10px;
	margin: 0px 2px;
	background-color: white;
	position: relative;
	top: 0px;
	border: 1px solid black; 
	cursor: pointer;
	display: flex;
	justify-content: center;
	/* border-radius: 4px; */
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball{
	border-color: #1e9476; 
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball.active,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball:hover{
	background-color: #23af8c; 	
}





.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball:hover div.infoCon{
	display: flex;
	
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball div.infoCon{
	display: none;
	position: absolute;
	height: auto;
	width: min-content;
	padding-left: 10px;
	padding-right: 10px;
	align-items: center;
	flex-direction: column;
	border: 1px solid #1e9476;
	background: #23af8c;
	
	bottom: 10px;
	box-sizing: border-box;
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball div.infoCon div{
	color: white;
	text-align: center;
	white-space:nowrap;
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball div.infoCon div.title{
	font-weight:bold;
	font-size: 15px;
}
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball div.infoCon div.enhTitle{
	font-size: 13px;
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"] div.infoCon,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"]
{
	border-color:#cf1d35;
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"]:not(:hover):not(.active)
{
	animation: bad_ball_blink 0.8s infinite;
}
@keyframes bad_ball_blink
{
	0%  {	background-color:	#ffffff; 	}
	50% {	background-color:	#ffffff; 	}
	60% {	background-color: 	#e61f38; 	}
	90% {	background-color:	#e61f38; 	}
	100% {	background-color:	#ffffff; 	}
}


.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"] div.infoCon,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"].active,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"]:hover{
	background-color: #e61f38;
}
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="notice"] div.infoCon,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="notice"]
{
	border-color:#d48336;
}
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="notice"] div.infoCon,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="notice"].active,
.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="notice"]:hover{
	background-color: #f3943e;
}

/* FIELD CONTAINER -> FIELD */
.vp-view-content .vp-field-container .vp-field-content{
	margin-right: 0px;
}


/*.vp-view-content .vp-field-content[vp-field-switch-state="true"] .vp-field-status{
	border: 1px solid #cccccc;
	border-color: var(--medium-grey-color);
	border-right: none;
}
*/



/* FIELD STATUS -> "LED" Feld...*/
/*.vp-view-content .vp-field-content[vp-field-status="true"]{
	padding-left: calc( 8px + 9px );
}
*/
.vp-view-content .vp-field-content .vp-field-status{
	height: 100%;
	left: 0px;
	top: 0px;
	position: absolute;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 9px;
	width: 9px;
	background-color: #aaaaaa; 
	background-color: var(--disabled-grey-color);
	box-sizing: border-box;
}

.vp-view-content .vp-field-content .vp-field-status[vp-status-state="bad"]{
	background-color: #e61f38; 
	background-color: var(--red-color);
}
.vp-view-content .vp-field-content .vp-field-status[vp-status-state="good"]{
	background-color: #23af8c; 
	background-color: var(--green-color);
}
.vp-view-content .vp-field-content .vp-field-status[vp-status-state="notice"]{
	background-color: #f3943e; 
	background-color: var(--orange-color);
}

.vp-view-content .vp-field-content .vp-field-status[vp-status-state="standby"]{
	background-image:	repeating-linear-gradient(-45deg, #aaaaaa 0%, #aaaaaa 50%,  #23af8c 50%, #23af8c 100%);
}

.vp-view-content .vp-field-content[vp-field-options*="button_"],
.vp-view-content .vp-field-content[vp-field-options*="switch_"]
{
	cursor: pointer;
} 

.vp-view-content .vp-field-content[vp-field-options*="button_"]:hover .vp-field,
.vp-view-content .vp-field-content[vp-field-options*="switch_"]:hover .vp-field
{
	border-color: #585858;
	border-color: var(--dark-grey-color);
}
.vp-view-content .vp-field-content[vp-field-options*="button_"]:hover .vp-field-status,
.vp-view-content .vp-field-content[vp-field-options*="switch_"]:hover .vp-field-status
{
	border: 1px solid #585858;
	border-color: var(--dark-grey-color);
	border-right: none;
} 

.vp-view-content .vp-field-content[vp-field-options*="light_"] > .vp-field{
	background-color: white;
	border: 1px solid #cccccc;
	border: 1px solid var(--medium-grey-color);
}

.vp-view-content .vp-field-content[vp-field-options*="status_"][vp-field-options*="light_"] > .vp-field{
  border-left: none;
}


/* FIELD -> HIGHLIGHT */

.vp-view-content[vp-highlight="true"] .vp-field-content:not([vp-field-content-number])[vp-field-options*="normal_"],
/* .vp-view-content[vp-highlight="true"] .vp-field-container-content */
.vp-view-content[vp-highlight="true"] .vp-field-container
{
	border: 1px solid #23af8c !important;
	border: 1px solid var(--green-color) !important;
	box-shadow: 0px 0px 2px 0px #23af8c;
	box-shadow: 0px 0px 2px 0px var(--green-color);
	box-sizing: border-box;
}

.vp-view-content[vp-highlight="true"] .vp-field-content:not([vp-field-content-number])[vp-field-options*="normal_"][vp-field-status="true"] .vp-field{
	width: calc(100% - 8px);
}

.vp-view-content[vp-highlight="true"] .vp-field-content .vp-field-status{
	width: 8px;
}

.vp-view-content[vp-highlight="true"] .vp-field-content:not([vp-field-content-number])[vp-field-options*="normal_"] .vp-field,
.vp-view-content[vp-highlight="true"] .vp-field-container  .vp-field
{
	padding: 7px;
	padding-top: 2px !important;
}

.vp-view-content[vp-highlight="true"] .vp-field-content[vp-field-options*="status_"]:not([vp-field-content-number]) > .vp-field{
	border-left: none !important;
}
/* .vp-view-content[vp-highlight="true"] .vp-field-content:not([vp-field-content-number]) .vp-field-status{
	border: 1px solid #23af8c !important;
	border: 1px solid var(--green-color) !important;
	border-right: none !important;
}  */



/* FIELD TITLE */
.vp-view-content .vp-field-content .vp-field .vp-field-title-con{
	width: 100%;
	height: 25px;
	text-align: left;
	border-bottom: 1px solid #cccccc;
	border-bottom: 1px solid var(--medium-grey-color);
	display: flex;
}
.vp-view-content .vp-field-content .vp-field .vp-field-title-con div.vp-title,
.vp-view-content .vp-field-content .vp-field .vp-field-title-con div.vp-enhanced-title{
	color: #3c3c3c;
	color: var(--black-color);
	text-align: left;
	height: 14px;
	line-height: 13px;
	display: flex;
	align-items: center;
	float: left;
	margin-top: 5px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-title-con div.vp-title{
	font-size: 17px;
}
/* FIELD TITLE VALUE CON */
.vp-view-content .vp-field-content .vp-field .vp-field-title-con div.vp-title-value-con{
	float: left;
	flex-grow: 100;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.vp-view-content .vp-field-content .vp-field .vp-title-value-con .vp-value-con .vp-label{
	font-size: 10px;
	height: 12px;
	line-height: 12px;
}

.vp-view-content .vp-field-content .vp-field .vp-title-value-con .vp-value-con .vp-value{
	font-size: 12px;
	height: 13px;
	line-height: 13px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="small"] 	div.vp-title{	font-size: 14px; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="small"] 	div.vp-enhanced-title{	font-size: 9px; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="medium"]	div.vp-title{	font-size: 17px; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="medium"] 	div.vp-enhanced-title{	font-size: 12px; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="large"] 	div.vp-title{	font-size: 20px; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="large"] 	div.vp-enhanced-title{	font-size: 14px; }

.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="bold"] 	div.vp-title{		font-weight: bold; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="italic"] 	div.vp-title{	font-style: italic; }


/* FIELD ENHANCED TITLE */
.vp-view-content .vp-field-content .vp-field .vp-field-title-con div.vp-enhanced-title{
	font-size: 12px;
	margin-right: 8px;
	height: 10px;
}

.vp-view-content .vp-field-content[vp-disabled="true"] .vp-field-title-con div{
	color: #aaaaaa !important;
	color: var(--disabled-grey-color) !important;
}





/* FIELD ROW */
.vp-view-content .vp-field-content .vp-field .vp-field-row{
	position: relative;
	width: 100%;
	/* min-height: 15px; */
	margin-top: 6px;
	display: flex;
	flex-wrap: nowrap;
	/* overflow: hidden; */
}
.vp-view-content .vp-field-content .vp-field .vp-field-row[vp-field-row-extendable="true"]{
	height: auto;
	max-height: 30px;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row[vp-dyn-field-row="true"]{
	max-height: none !important;
	height: auto;
}
.vp-view-content .vp-field-content .vp-field[vp-no-title="true"] .vp-field-row[vp-field-row^="1"]
{
	margin-top: 0px;
}

/* .vp-view-content .vp-field-content .vp-field .vp-field-row[vp-field-row-extendable="true"][vp-field-row-visible-cnt="0"] */
.vp-view-content .vp-field-content .vp-field .vp-field-row[vp-field-row-visible-cnt="0"]:not([vp-field-row-force-visibility="true"])
{
	display: none !important;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row[vp-field-row-visible-cnt="0"][vp-field-row-force-visibility="true"]{
	height: 30px;
}

/* FIELD ROW -> VALUE CONTAINER*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con{
	overflow: hidden;
	height: 100%;
	z-index: 1;
	position: relative;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-btn-con,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con{
	height: 30px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con{
	min-height: 30px;
	position: relative;
	overflow: hidden;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con{
	height: 30px;
	position: relative;
	overflow: hidden;
}


/* .vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con.vp-last[vp-auto-width="true"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con.vp-last[vp-auto-width="true"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con.vp-last[vp-auto-width="true"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-btn-con.vp-last[vp-auto-width="true"]{ */
	/* .vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con[vp-auto-width="true"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con[vp-auto-width="true"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-auto-width="true"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-btn-con[vp-auto-width="true"], */
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con.vp-last,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con.vp-last,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con.vp-last,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-input-con.vp-last,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-btn-con.vp-last{
	flex: 1;
	width: auto !important;
}

.vp-view-content .vp-field-content .vp-field[vp-field-row-collapsed="false"] .vp-field-row[vp-field-row-extendable="true"],
.vp-view-content .vp-field-content .vp-field[vp-field-row-collapsed="false"] .vp-field-row .vp-value-con[vp-value-extendable="true"].vp-value-expanded,
.vp-view-content .vp-field-content .vp-field[vp-field-row-collapsed="false"] .vp-field-row .vp-valuelevelmeter-con[vp-value-extendable="true"].vp-value-expanded,
.vp-view-content .vp-field-content .vp-field[vp-field-row-collapsed="false"] .vp-field-row .vp-ext-source-con[vp-value-extendable="true"].vp-value-expanded{
	max-height: none !important; /* Damit ein "hoher" Multivalue erst sichtbar wird, wenn das Field aufgeklappt wird */
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-hide*="hide"]{
	display: none;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con > div,
.vp-view-content .vp-field-content .vp-field .vp-field-title-con .vp-value-con > div
{
	white-space: nowrap;
	padding-left: 2px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con.vp-first div
{
	padding-left: 0px;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con.vp-first > div.vp-led
{
	margin-left: 0px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="labelStatus_"] div.vp-label span
{
	padding-left: 1px;
	padding-right: 1px;
	border-radius: 3px;
	margin-left: -1px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"][vp-value-status="n/a"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"] div[vp-value-status="n/a"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"] tr[vp-value-status="n/a"]
{
	color: #aaaaaa;
	color: var(--disabled-grey-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"][vp-value-status="n/a"] .vp-history-icon{
	display: none;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"][vp-value-status="bad"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"] div[vp-value-status="bad"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"] tr[vp-value-status="bad"]{
	color: #e61f38;
	color: var(--red-color);
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"][vp-value-status="notice"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"] div[vp-value-status="notice"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="status_"] tr[vp-value-status="notice"]{
	color: #f3943e;
	color: var(--orange-color);
}

/* FIELD ROW -> VALUE CONTAINER -> ALIGN*/
/* FIELD ROW -> VALUE CONTAINER -> ALIGN -> LABELS*/



/* FIELD ROW -> VALUE CONTAINER -> ALIGN -> VALUES*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-align]{
	display: flex;
	flex-direction: column;
}


.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="right"] 	.vp-label{	text-align: right;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="center"] 	.vp-value{	text-align: center;	}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="center"][vp-value-options*="led_"] 	.vp-value,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="center"][vp-value-options*="dual_"] 	.vp-value,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="center"] 	.vp-label
{
	display: flex;	
	justify-content: center;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="right"] 	.vp-value{	text-align: right;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con[vp-value-font-options*="left"] 	> div{	float: left;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con[vp-value-font-options*="right"] 	> div{	float: right;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con[vp-value-font-options*="vcenter"] 	{	display: flex !important;	align-items: center;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con[vp-value-font-options*="left"] 	> div{	float: left;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con[vp-value-font-options*="right"] 	> div{	float: right;	}
.vp-view-content .vp-field-content .vp-field .vp-btn-con[vp-value-font-options*="left"] 	{	justify-content: left;	}
.vp-view-content .vp-field-content .vp-field .vp-btn-con[vp-value-font-options*="right"] 	{	justify-content: end;	}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="dual_"][vp-value-font-options*="center"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="dual_"][vp-label-font-options*="center"]
{	align-items: center;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="dual_"][vp-value-font-options*="right"],
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="dual_"][vp-label-font-options*="right"]
{	align-items: flex-end;	}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-icon-con[vp-value-options*="icon_"][vp-value-font-options*="right"]
{	justify-content: flex-end;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-icon-con[vp-value-options*="icon_"][vp-value-font-options*="vcenter"] div
{	background-position-y: center;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-icon-con[vp-value-options*="icon_"][vp-value-font-options*="left"]
{	justify-content:flex-start;	}


.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][caption="1"]
{
	justify-content: center;
	align-items: end;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][caption="1"] .vp-label span{
	font-size: 12px;	
	/* font-style: italic; */
	line-height: 9pt;
	z-index: 2;
	background-color: #efefef;
	padding: 0px 3px;
	color: #585858;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][caption="1"] .vp-label .vp-caption-line
{
	background-color: #cccccc;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 5px;
	left: 0px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="right"]	.vp-label{	justify-content: flex-end; }
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="small"] 	.vp-label{	font-size: 10px;	 	line-height: 11pt;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="medium"] 	.vp-label{	font-size: 13px;	line-height: 9pt;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="large"] 	.vp-label{	font-size: 15px;	line-height: 10pt;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="bold"] 	.vp-label{	font-weight: bold;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="italic"] 	.vp-label{	font-style: italic;}

/* FIELD ROW -> VALUE CONTAINER -> LABEL*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-label{
	font-size: 10px;
	height: 15px;
	line-height: 15px;
	width: 100%;
	box-sizing: border-box;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-label span{
	line-height: 15px !important;
}

/* FIELD ROW -> VALUE CONTAINER -> VALUE*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-value{
	font-size: 12px;
	height: 15px;
	line-height: 12px;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-no-label="true"] .vp-value
{
	line-height: 15px;
	/* height: 30px; */
	white-space: normal;
	height: 100%;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="small"]		.vp-label,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="small"]		.vp-value
{	font-size: 10px;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="medium"] 		.vp-label,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="medium"] 		.vp-value
{	font-size: 12px;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="large"] 		.vp-label,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="large"] 		.vp-value
{	font-size: 13px;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="bold"] 		.vp-label,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="bold"] 		.vp-value
{	font-weight: bold;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="italic"] 		.vp-label,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="italic"] 		.vp-value
{	font-style: italic;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="monospace"] 	.vp-label,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="monospace"] 	.vp-value
{	font-family: Courier, monospace;}

/* .vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="ellipsis"] .vp-label {	width: 100%;} */
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="ellipsis"] .vp-label span {	overflow: hidden; text-overflow: ellipsis;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="ellipsis"] .vp-value {	width: 100%; overflow: hidden; text-overflow: ellipsis;}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="vcenter"][vp-value-font-options*="center"] .vp-value
{	display: flex !important;	align-items: center; 	justify-content: center;	}


/* FIELD ROW -> VALUE CONTAINER -> HISTORY -> ICON */
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-history-icon{
	height: 10px;
	width: 10px;
	position: absolute;
	/* right: 2px; */
	top: 3px;
	margin-left: 2px;
	background-image: url(../../cwi/images/icon10_time_585858.png);
	background-repeat: no-repeat;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con:hover .vp-history-icon{
	background-image: url(../../cwi/images/icon10_time.png);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-history-icon:hover,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-history-icon.open
{
	background-image: url(../../cwi/images/icon10_time_23af8c.png);
	cursor: pointer;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-history-icon.open div.line2 {
	height: 20px;
	background-color: #23af8c;
	width: 1px;
	top: 10px;
	position: relative;
	left: 4px;
  }

/* FIELD ROW -> VALUE CONTAINER -> HISTORY -> CONTAINER */

/* .vp-view-content .vp-field-content .vp-history-con{ */
.vp-view-content .vp-view-content-row .vp-history-con{
	position: absolute;
	width: 1px;
	z-index: 1000;
	display: flex;
	justify-content: center;
}

.vp-view-content .vp-view-content-row  .vp-history-con .vp-history-body{
	position: absolute;
	z-index: 1000;
}

.vp-view-content .vp-view-content-row  .vp-history-con .vp-history-content{
	width: max-content;
	min-width: 180px;
	border: 1px solid #23af8c;
	background-color: #efefef;
	padding: 5px;
	max-height: 200px;
	margin-bottom: 5px;
}

 .vp-history-con .vp-history-content table tr.header th{
	border-bottom: 1px solid #585858;
	font-weight: normal;
}

 .vp-history-con .vp-history-content .infoIcon{
	background-image: url("../../cwi/images/wait.gif");
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	float: left;
	margin-right: 5px;
}
 .vp-history-con .vp-history-content .closeBtn{
	background-image: url(../../cwi/css/ui/images/ui-icons_000000_256x240.png);
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	float: right;
	background-position: -80px -128px;
}
 .vp-history-con .vp-history-content .closeBtn:hover {
	background-image: url(../../cwi/css/ui/images/ui-icons_23af8c_256x240.png);
	cursor: pointer;
}

.vp-view-content .vp-view-content-row  .vp-history-con .vp-history-content table.header {
	margin-bottom: 5px;
	color: #23af8c;
}

.vp-view-content .vp-view-content-row  .vp-history-con .vp-history-content div.content {
	background-color: white;
	padding: 5px;
	/* width: max-content; */
	width: calc(100% - 10px);
	max-height: 169px;
	overflow: scroll;
}

.vp-view-content .vp-view-content-row  .vp-history-con .vp-history-content div.content table .time{		width: 120px; }
.vp-view-content .vp-view-content-row  .vp-history-con .vp-history-content div.content table .deltaTime{width: 70px; }

/* FIELD ROW -> VALUE CONTAINER -> MULTI VALUE */
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-multi-value,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-multi-value tr{
	height: auto;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-multi-value table td{
	line-height: 15px;
	height: auto;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value table td:first-child{
	width: 16px;
	height: auto;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value .vp-led{
	margin: 0px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value tr[vp-value-status="unknown"] .vp-led{
	background-color: #aaaaaa;
  	background-color: var(--disabled-grey-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value tr[vp-value-status="good"] .vp-led{
	background-color: #23af8c;
	background-color: var(--green-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value tr[vp-value-status="bad"] .vp-led{
	background-color: #e61f38;
	background-color: var(--red-color);
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value tr[vp-value-status="notice"] .vp-led{
	background-color: #f3943e;
	background-color: var(--orange-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="led_"] .vp-multi-value tr[vp-value-status="hide"] .vp-led{ /* LED ausblenden ... */
	display: none;
}

/* FIELD ROW -> VALUE CONTAINER -> MULTI VALUE  +   MULTI-TABLE */
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-multi-value table.vp-multi-table tr.hover
{
	background-color: #cccccc;
	background-color: var(--medium-grey-color);
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="multiTable_"] .vp-multi-value{
	padding: 0px;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="multiTable_"] .vp-multi-value table.vp-multi-table tr td{
	padding-left: 2px;
}

/* FIELD ROW -> VALUE CONTAINER -> LED*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-led,
.vp-view-content .vp-field-content .vp-field .vp-field-title-con .vp-value-con .vp-led{
	width: 12px;
  	height: 12px;
	margin-top: 0px;
  	border-radius: 7px;
	float: left;
	padding: 0px;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 1px;
	background-color: #aaaaaa;
  	background-color: var(--disabled-grey-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="unknown"] .vp-led{
	background-color: #aaaaaa;
  	background-color: var(--disabled-grey-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="good"] .vp-led{
	background-color: #23af8c;
	background-color: var(--green-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="bad"] .vp-led{
	background-color: #e61f38;
	background-color: var(--red-color);
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="notice"] .vp-led{
	background-color: #f3943e;
	background-color: var(--orange-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="hide"] .vp-led{ /* LED ausblenden ... */
	display: none;
}

/* FIELD ROW -> VALUE CONTAINER -> LED STRIP*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-led-strip{
	width: 5px;
  	/* height: calc(100% - 4px); */
  	height: 100%;
	float: left;
	padding: 0px;
	margin-right: 2px;
	margin-left: 0px;
	/* top: 2px; */
	background-color: #aaaaaa;
	  background-color: var(--disabled-grey-color);
	  position: relative;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"] .vp-led-strip{
	/* height: calc(100% - 12px); */
	margin-right: 0px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="unknown"] .vp-led-strip{
	background-color: #aaaaaa;
  	background-color: var(--disabled-grey-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="good"] .vp-led-strip{
	background-color: #23af8c;
	background-color: var(--green-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="bad"] .vp-led-strip{
	background-color: #e61f38;
	background-color: var(--red-color);
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="notice"] .vp-led-strip{
	background-color: #f3943e;
	background-color: var(--orange-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-status="hide"] .vp-led-strip{ /* LED ausblenden ... */
	display: none;
}

/* FIELD ROW -> VALUE CONTAINER -> DUAL-VALUE*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="dual_"]{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: column;
}


.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-value-first,
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-value-second{
	font-size: 12px;
	height: 14px;
	line-height: 13px !important;
	display: flex;
	align-items: center;
}


/* FIELD ROW -> LABEL CONTAINER*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"]{
	display: flex;
	align-items: center;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"] .vp-label{
	font-size: 15px;
	line-height: 15px;
	display: flex;
}



.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="labelStatus_"][vp-value-status="good"] .vp-label span{
	background-color: #23af8c;
	background-color: var(--green-color);
	color: white;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="labelStatus_"][vp-value-status="bad"] .vp-label span{
	background-color: #e61f38;
	background-color: var(--red-color);
	color: white;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="labelStatus_"][vp-value-status="unknown"] .vp-label span{
	background-color: #cccccc;
	background-color: var(--medium-grey-color);
}


/* EXPAND BUTTON -> Button um das Field auf und zu zu klappen. */
.vp-view-content .vp-expand-con.vp-expand-available .vp-expand-icon{
	width: 13px;
	height: 16px;
	top: 50%;
	position: relative;
	margin-top: -8px;
	float: left;
	background-image: url(ui/images/ui-icons_3c3c3c_256x240.png);
	background-position: -34px -17px;
}

.vp-view-content .vp-view-content-row[vp-content-row-collapsed="false"] .vp-expand-con.vp-expand-available .vp-expand-icon,
.vp-view-content .vp-field[vp-field-row-collapsed="false"] .vp-expand-con.vp-expand-available .vp-expand-icon{
	background-position: -66px -17px;
}

.vp-view-content [vp-field-row-collapsed] .vp-expand-con.vp-expand-available:hover{
	cursor: pointer;
}

.vp-view-content [vp-field-row-collapsed] .vp-expand-con.vp-expand-available:hover .vp-expand-icon{
	background-image: url(ui/images/ui-icons_23af8c_256x240.png);
}

/* BUTTON */
.vp-view-content .vp-field-content .vp-field .vp-btn-con{
	display: flex;
	justify-content:   center;
	align-items: center;
}

.vp-view-content .vp-field-content .vp-field .vp-value-con[vp-value-btn="true"],
.vp-view-content .vp-field-content .vp-field .vp-icon-con[vp-value-btn="true"]{
	cursor: pointer;
}


/* INPUT CON */ 
.vp-view-content .vp-field-content .vp-field .vp-input-con{
	margin-left: 2px;
}

/* ROW TOGGLE */ 
.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con{
	height: 100%;
	overflow: hidden;
}
.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-values-con{
	/* height: 100%; */
	position: relative;
	top: 0px;
}
.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-values-con{
	position: relative;
	height: 100%;
	padding-left: 5px !important;
}
.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con:not(.active) .vp-row-toggle-values-con{
	padding-left: 0px !important;
}
.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-info{
	height: 100%;
	/* top: 1px; */
	position: relative;
	width: 1px;
	float: left;
	margin-right: 1px;
	border: 1px solid #cccccc;
	overflow: hidden;
}

.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con:not(.active) .vp-row-toggle-info{
	display: none;
}
/* .vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-info div{
	height: calc(50% - 1px);
	width: 100%;
	border: 1px solid #585858;
} */
/* .vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-info div:first-of-type{
	border-bottom:none;
	margin-bottom: 1px;
	height: 50%;

} */
.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-info div.active{
	background-color: #585858;
	position: absolute;
	top: 0px;
	border: none;
	width: 100%;
}

.vp-view-content .vp-field-content .vp-field .vp-row-toggle-con .vp-row-toggle-value{
	width: 100%;
	height: 100%;
}


/* DEBUGGING */
.vp-view-content[vp-debug="true"] .vp-field-content .vp-field .vp-field-row .vp-valuelevelmeter-con,
.vp-view-content[vp-debug="true"] .vp-field-content .vp-field .vp-field-row .vp-levelmeter-con,
.vp-view-content[vp-debug="true"] .vp-field-content .vp-field .vp-field-row .vp-icon-con,
.vp-view-content[vp-debug="true"] .vp-field-content .vp-field .vp-field-row .vp-value-con{
	border: 1px solid #e61f38;
	box-sizing: border-box;
}

.vp-debug-info{
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 100;
	color: #e61f38;
	font-size: 10px;
	background-color: white;
	font-weight: normal;
	padding: 5px;	
	border: 1px solid #e61f38;
}

.vp-debug-info table th{
	padding-right: 10px;
	padding-left: 5px;
	line-height: 10px;
	text-align: right;
}
.vp-debug-info table td{
	white-space: nowrap;
	line-height: 10px;
	text-align: left;
}