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

	Voraussetzungen:
	- valueLevelmeter.js

	Versionshistory:
		v1.06 (08.10.2021 ojepsen)
			- add: rule for "unknown" status
		v1.05 (04.03.2021 ojepsen)
			- add: rules for labelStatus (new option)
		v1.04 (07.01.2021 ojepsen)
			- add: "bad" style for labels
		v1.03 (21.12.2020 ojepsen)
			- add: light and dark styles
		v1.02 (27.10.2020 ojepsen)
			- add rules for peak-dummy
		v1.01 (23.10.2020 ojepsen)
			- remove peak holder size
		v1.00 (06.10.2020 ojepsen)
			- initial version
*/

.vlm-parent-con{
	display: flex;
	justify-content: center;
	align-items: center;
}
.vlm-parent-con[vlm-direction='hori']{
	flex-direction: column;
}

.vlm-parent-con .vlm-item-con{
	position: relative;
	flex-shrink: 0;
}

.vlm-parent-con[vlm-direction='vert'],
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con{
	height: 100%;
}
.vlm-parent-con[vlm-direction='hori'],
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con{
	width: 100%;
}
.vlm-parent-con .vlm-item-con .vlm-main-con{
	height: 100%;
	width: 100%;
	position: relative;
}


.vlm-parent-con .vlm-item-con .vlm-main-con .vlm-content-con{
	position: relative;
	width: 100%;
	height: 100%;
}

/* LINE CONTAINER */ 
.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-main-con{
	box-sizing: border-box;
}
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'] .vlm-main-con{	height: 100%;	}
.vlm-parent-con[vlm-direction='vert']:not([vlm-only-lm-flag]) .vlm-item-con[vlm-type='lm'] .vlm-main-con{	padding: 4px 0px;}

.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'] .vlm-main-con{	width: 100%;}
.vlm-parent-con[vlm-direction='hori']:not([vlm-only-lm-flag]) .vlm-item-con[vlm-type='lm'] .vlm-main-con{	padding: 0px 4px;}

.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-line-con{
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: center;
	top: 0px;
}
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'] .vlm-line-con{
	height: calc(100% + 1px);
	width: 100%;
	flex-direction: column;
	left: 0px;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'] .vlm-line-con{
	width: calc(100% + 1px);
	height: 100%;
	flex-direction: row;
}

.vlm-parent-con:not([vlm-options*="light_"]) .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line{		background-color: white;	}
.vlm-parent-con[vlm-options*="light_"] .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line{	background-color: #7c7b7b;	}
.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line[vlm-line-type='dummy']{	background-color: transparent; }

.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line{		height: 1px;				width: calc(100% - 4px);	min-width: 4px;}
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line[vlm-line-type='small']{			width: calc(100% - 8px);	min-width: 0px;}



.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line{		width: 1px;					height: calc(100% - 4px);	min-height: 2px;	}

.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'] .vlm-line-con .vlm-line[vlm-line-type='small']{			height: calc(100% - 8px);	}




/* VALUE CONTAINER */ 
.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-bar-bg-con{
	width: 100%;
	height: 100%;
	position: absolute;
	box-sizing: border-box;	
	
}

.vlm-parent-con:not([vlm-options*="light_"]) .vlm-item-con[vlm-type='lm'] .vlm-bar-bg-con
{
	background-color:#6d6d6d;
	border:1px solid  #3c3c3c;
	box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.7);
}

.vlm-parent-con[vlm-options*="light_"] .vlm-item-con[vlm-type='lm'] .vlm-bar-bg-con
{
	background-color:#efefef;
	border:1px solid  #7c7b7b;
	box-shadow: inset 0px 0px 3px 0px rgba(170, 170, 170, 0.7);
}



.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-bar-con{
	position: absolute;
	background-color: #23af8c;
}
.vlm-parent-con .vlm-item-con[vlm-type='lm'][vlm-status='bad'] .vlm-bar-con{
	background-color: #e61f38;
}
.vlm-parent-con .vlm-item-con[vlm-type='lm'][vlm-status='unknown'] .vlm-bar-con{
	background-color: #aaaaaa;
}

.vlm-parent-con:not([vlm-options*="labelStatus_"]) .vlm-item-con[vlm-type='lm'][vlm-status='bad'] .vlm-label-con{	color: #e61f38;		}

.vlm-parent-con[vlm-options*="labelStatus_"] .vlm-item-con[vlm-type='lm'] .vlm-label-con{
	border-radius: 4px;
}
.vlm-parent-con[vlm-direction='hori'][vlm-options*="labelStatus_"] .vlm-item-con[vlm-type='lm'] .vlm-label-con{
	padding-right: 1px;
}
.vlm-parent-con[vlm-options*="labelStatus_"] .vlm-item-con[vlm-type='lm'][vlm-status='bad'] .vlm-label-con{	
	color: white;		
	background-color: #e61f38;
}
.vlm-parent-con[vlm-options*="labelStatus_"] .vlm-item-con[vlm-type='lm'][vlm-status='good'] .vlm-label-con{	
	color: white;		
	background-color: #23af8c;
}

.vlm-parent-con .vlm-item-con[vlm-type='lm'][vlm-status='notice'] .vlm-bar-con{
	background-color: #f3943e;
}

.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'] .vlm-bar-con{
	bottom: 1px;
	left: 1px;
	width: calc(100% - 2px);
	max-height: calc(100% - 2px);	
}

.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'] .vlm-bar-con{
	top: 1px;
	left: 1px;
	height: calc(100% - 2px);
	max-width: calc(100% - 2px);	
}


/* PEAK CONTAINER */
.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-peak-con{
	left: 0px;
	position: absolute;
	background-color:  white;
	border: 1px solid #3c3c3c; 
	box-sizing: border-box;
	z-index: 2;
}
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'] .vlm-peak-con{
	/* height: 4px; */
	width: 100%;
	bottom: 0px;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'] .vlm-peak-con{
	height: 100%;
	/* width: 4px; */
	top: 0px;
	/* margin: 0px 5px; */
}

.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'][vlm-peak-overlap='true'] .vlm-peak-con{
	width: calc(100% + 2px);
	left: -1px;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'][vlm-peak-overlap='true'] .vlm-peak-con{
	height: calc(100% + 2px);
	top: -1px;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'][vlm-peak-overlap='true']:first-child{
	margin-top: 1px; /* Damit der PeakCon nicht abgeschnitten wird. */
}
.vlm-parent-con .vlm-item-con[vlm-type='lm'] .vlm-peak-dummy{
	background-color: transparent !important;
	border-color: transparent !important;
}

/* ######################################## LEVELMETER TOUCH FLAG ######################################## START */ 
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='lm'][vlm-touch-flag='true'] .vlm-bar-bg-con{
	border-left: none;
}

.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='lm'][vlm-touch-flag='true'] .vlm-bar-bg-con{
	border-top: none;
}
/* ######################################## LEVELMETER TOUCH FLAG ######################################## END */ 




/* TYPE: SPACE */
.vlm-parent-con .vlm-item-con[vlm-type='space']{
	width: 100%;
	height: 100%;
}

/* TYPE: SCALE */
.vlm-parent-con .vlm-item-con[vlm-type='scale'] .vlm-content-con{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.vlm-parent-con[vlm-direction='vert'] .vlm-item-con[vlm-type='scale'] .vlm-content-con {
	flex-direction: column-reverse;
	padding: 1px 0px;
	height: calc(100% - 2px);
}
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='scale'] .vlm-content-con {	flex-direction: row;
}
.vlm-parent-con .vlm-item-con[vlm-type='scale'] .vlm-scale-number{
	font-size: 9px;
	line-height: 7px;
	height: 8px;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-item-con[vlm-type='scale'] .vlm-scale-number{
	text-align: center;
	min-width: 10px;
}

/* LABEL CONTAINER */
.vlm-parent-con[vlm-label-flag] .vlm-item-con div{
	flex-shrink: 0;
}

.vlm-parent-con[vlm-direction='hori'][vlm-label-flag] .vlm-item-con{
	display: flex;
	justify-content: center;
}
.vlm-parent-con .vlm-label-con{
	font-size: 9px;
	overflow: visible;
	white-space: pre;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.vlm-parent-con[vlm-direction='vert'] .vlm-label-con{
	width: 100%;
	height: 10px;
	justify-content: center;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-label-con{
	height: 100%;
	
	
}

.vlm-parent-con[vlm-direction='hori'] .vlm-label-con[vlm-label-con-number="1"]{
	justify-content: flex-end;
}
.vlm-parent-con[vlm-direction='hori'] .vlm-label-con[vlm-label-con-number="2"]{
	justify-content: flex-end;
}