/*
	VALUE PANELS JS PLUGIN
	Datei: valuePanels.css
	Autor: Ole Jepsen
	Firma: 2wcom Systems GmbH
	Datum: 04.03.2021 
	Version: V0.38

	Voraussetzungen:
	- valuePanels.js

	Versionshistory:
		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-icon-con div{
	background-repeat: no-repeat;

}


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

.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;
	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;
}

.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: 9px;
	padding-left: 9px;
	width: calc(100% - 9px);
}

.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[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"] .vp-field-container, */
.vp-view-content-row[vp-expand-all-fields="false"] .vp-field-content-container
{
	height: min-content;
}
.vp-view-content-row[vp-expand-all-fields="false"]:not([vp-view-content-rowspan]) .vp-field-content-container .vp-field-content{
	height: calc(100% + 2px);
}



/* FIELD CONTAINER */
.vp-view-content .vp-field-container{
	margin-right: 5px;
	height: auto;
	float: left;
	top: 0px;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
.vp-view-content .vp-field-container .vp-field-content-container{
	width: 100%;
	height: 100%;
	/* border: 1px solid #efefef; */
	box-sizing: border-box;
	overflow: hidden;
	background: #efefef;
}

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

.vp-view-content .vp-field-container .vp-field-content-container .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-content-container .vp-field-content{
	box-sizing: border-box;
}
.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.info{
	position: absolute;
	display: none;
	width: auto;
	height: 20px;
	align-items: center;
	justify-content: center;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #1e9476;
	background: #23af8c;
	color: white;
	z-index: 5;
}
.vp-view-content .vp-field-container .vp-field-container-btn-left div.info{
	text-align: right;
	left: 25px;
	
}
.vp-view-content .vp-field-container .vp-field-container-btn-right div.info{
	text-align: left;
	right: 25px;
}

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

.vp-view-content .vp-field-container [class*="vp-field-container-btn-"] div.arrow{
	position: absolute;
	width: 0;
	height: 0;
	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.info,
.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.info,
.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.info,
.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.info,
.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: 6px;
	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.info{
	display: block;
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball div.info{
	display: none;
	position: relative;
	height: 20px;
	width: min-content;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	border: 1px solid #1e9476;
	background: #23af8c;
	color: white;
	bottom: 40px;
	box-sizing: border-box;
}

.vp-view-content .vp-field-container .vp-field-container-scroll-con div.ball[vp-status-state="bad"] div.info,
.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"] div.info,
.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.info,
.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.info,
.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-container .vp-field-content .vp-field{
	border: none;
}


/*.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-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,
.vp-view-content[vp-highlight="true"] .vp-field-content-container{
	border: 1px solid #23af8c !important;
	border: 1px solid var(--green-color) !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: 13pt;
}
/* 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: 8pt;
	height: 12px;
	line-height: 12px;
}

.vp-view-content .vp-field-content .vp-field .vp-title-value-con .vp-value-con .vp-value{
	font-size: 9pt;
	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: 11pt; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="small"] 	div.vp-enhanced-title{	font-size: 7pt; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="medium"]	div.vp-title{	font-size: 13pt; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="medium"] 	div.vp-enhanced-title{	font-size: 9pt; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="large"] 	div.vp-title{	font-size: 15pt; }
.vp-view-content .vp-field-content .vp-field .vp-field-title-con[vp-label-font-options*="large"] 	div.vp-enhanced-title{	font-size: 11pt; }

.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: 9pt;
	margin-left: 8px;
	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;
}


/*.vp-view-content .vp-field-content .vp-field .vp-field-row > div:last-child.vp-auto-width{
	flex-grow: 1;
	width: auto !important;
}*/

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

.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-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"]{
	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{
	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-row .vp-value-con div.vp-label span
{
	white-space: nowrap;
	padding-left: 2px;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con div.vp-label
{
	padding-left: 0px;
}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con div.vp-label span
{
	padding-right: 2px;
	border-radius: 3px
}



.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*="center"] 	.vp-label{	text-align: center;	}
.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*="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-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"]{	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"]{		align-items: flex-end;		}

/* FIELD ROW -> VALUE CONTAINER -> LABEL*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-label{
	font-size: 8pt;
	height: 15px;
	line-height: 15px;
}

/* FIELD ROW -> VALUE CONTAINER -> VALUE*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con .vp-value{
	font-size: 9pt;
	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;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="small"] 		.vp-label{	font-size: 8pt;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="medium"] 		.vp-label{	font-size: 9pt;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="large"] 		.vp-label{	font-size: 10pt;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[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-label-font-options*="italic"] 		.vp-label{	font-style: italic;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-label-font-options*="monospace"] 	.vp-label{	font-family: monospace;}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="small"] 		.vp-value{	font-size: 8pt;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="medium"] 		.vp-value{	font-size: 9pt;	}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="large"] 		.vp-value{	font-size: 10pt;}
.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-value-font-options*="italic"] 		.vp-value{	font-style: italic;}
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-font-options*="monospace"] 	.vp-value{	font-family: monospace;}



/* 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: 16px;
	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: 16px;
}

.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;
}


/* FIELD ROW -> VALUE CONTAINER -> LED*/
.vp-view-content .vp-field-content .vp-field .vp-field-row .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;
	background-color: #aaaaaa;
  	background-color: var(--disabled-grey-color);
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-led-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-led-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-led-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-led-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-led-status="n/a"] .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-led-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-led-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-led-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-led-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-led-status="n/a"] .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: 9pt;
	height: 14px;
	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: 12pt;
	line-height: 15px;
	display: flex;
}

.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="center"]{	justify-content: center;  }
.vp-view-content .vp-field-content .vp-field .vp-field-row .vp-value-con[vp-value-options*="label_"][vp-label-font-options*="right"]{	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: 8pt;	 	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: 10pt;	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: 12pt;	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;}

.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"]{
	cursor: pointer;
}



/* 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;
}