/*
	Name: 			css_levelmeter_2wcom.css
	Autor: 			Ole Jepsen
	Firma: 			2wcom System GmbH
	Version:		1.4 (24.10.2019)

	History:
		1.4 fix: Max Line wurde über einer augeklppten Select angezeigt. Lösung: z-index der Max Line redurziert.
		1.3 Schriftgröße der horizontalen Scala vergrößert. "div.lmhBackLabel .lmLabelCon" -> top: 1 -> 0, font-size: 6pt -> 7pt;
		    Diverse optimierungen für horizontale Levelmeter
		1.2 Klasse der Skala Labels geändert.
		1.1 Einige Anpassungen
		1.0 Remove some styles for more flexibility
*/

/* LEVELMETER VERTICAL  NEW*/

div.levelmeterVert,
div.lmVert
{
	position: relative;
	margin: auto;
	height:100%;
	width: 100%;
}

div.lmvBackValue {
	position: absolute;
	background-color:#6d6d6d;
	border:1px solid black;
	box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.7);
}

div.lmvBackValue.left {
	left:1px;
}

div.lmvBackValue.right {
	right:1px;
}

div.lmvValue {
	position: absolute;
	height:0%;

	bottom: 0%;
	/*box-shadow: inset 10px 0px 2px -10px rgba(0,0,0,0.3), inset -10px 0px 2px -10px rgba(0,0,0,0.3);*/
}

div.lmvValue.good{
	background-color:#23af8c;
	background-color:var(--green-color);
}

div.lmvValue.bad {
	background-color:#e61f38;
	background-color:var(--red-color);
}

div.lmvValue.invalid {
	background-color:#A0A0A0;
}

div.lmvValue.notice {
	background-color:#f3943e;
	background-color:var(--orange-color);
}

/* LINES */
div.lmvBackLine{
	position: absolute;
	border:1px solid;
}

div.lmvBackLine.left{
	left:1px;
}

div.lmvBackLine.right{
	right:1px;
}


div.lmvBackLine .lineCon{
	left:0px;
	position:absolute;
	width:100%;
	height:1px; /*MUSS 1 sein*/
}

div.lmvBackLine .line{
	position:absolute;
	height:1px;
	background-color:white;
}
div.lmvBackLine .maxLine{
	z-index:10;
	position:absolute;
	height:2px;
	left:-2px;
	border: 1px solid black;
	background-color:white;
}

/* LABELS */
div.lmvBackLabel{
	position: absolute;
	top:0px;
	height:100%;
	width:100%;
}

div.lmvBackLabel .lmLabelCon{
	position:absolute;
	width:100%;
	height:10px;
	line-height:10px;
	font-size: 9px;
}


/* LEVELMETER HORIZONTAL  NEW*/

div.levelmeterHori,
div.lmHori
{
	position: relative;
	margin: auto;
	height:100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

div.lmhBackValue {
	position: relative;
	background-color:#6d6d6d;
	top:0px;
	border:1px solid black;
	box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.7);
	box-sizing: border-box;
}

div.lmhValue {
	position: absolute;
	width:0%;
	/*box-shadow: inset 0px 10px 2px -9px rgba(0,0,0,0.3), inset 0px -10px 2px -9px rgba(0,0,0,0.3);*/
}

div.lmhValue.good{
	background-color:#23af8c;
	background-color:var(--green-color);
}

div.lmhValue.bad {
	background-color:#e61f38;
	background-color:var(--red-color);
}

div.lmhValue.invalid {
	background-color:#A0A0A0;
}

div.lmhValue.notice {
	background-color:#f3943e;
	background-color:var(--orange-color);
}


/* LINES */
div.lmhBackLine{
	position: relative;
	width:calc(100% + 1px);
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	left: 0px;
	top: -1px; /*Frag mich nicht warum...*/
}

div.lmhBackLine .line{
	width:1px;
	background-color:white;
}

div.lmhBackLine .line.dummy{ 
	width: 0px;
}
div.lmhBackValue .maxLine{
	position:absolute;
	top:-2px;
	z-index:10;
	border: 1px solid black;
	background-color:white;
}
/* MARK LINE */

div.lmhBackValue .markLine{
	position:absolute;
	width: 1px;
	top: -3px;
	background-color: black;
}

/* LABELS */
div.lmhBackLabel{
	position: relative;
	width:calc(100% + 16px);
	color: black;
	display: flex;
	justify-content: space-between;
	align-content: center;
}

div.lmhBackLabel .lmLabelCon{
	top:0px;
	position:relative;
	width:16px;
	height:100%;
	line-height:100%;
	font-size: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
}