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

	Voraussetzungen:
	- valueSelect.js

	Versionshistory:
		v1.04 (14.12.2023 ojepsen)
			- add: width:3px for ledStrip_* images
		v1.03 (13.12.2023 ojepsen)
			- add: rules for select focus
			- add: z-index rule for original select
		v1.02 (07.12.2023 ojepsen)
			- add: rules for vs-img-src attr
		v1.01 (17.08.2023 ojepsen)
			- change: The option list can now grow in width if individual options require more space.
		v1.00 (08.10.2021 ojepsen)
			- fix: Anzeige der Optionen nicht ganz mittig.
*/

.vs-con select.vs-original{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0) !important;
	-moz-opacity: 0 !important;
	-khtml-opacity: 0 !important;
	opacity: 0 !important;
	background-color: transparent !important;
	border-color: transparent !important;
	width: 0px !important;
	height: 0px !important;
	position: absolute !important;
	top: 2px;
	z-index: 0;
} 


/* Positioning by .tR and .tC */
table.tC tr th .vs-con,
table.tC tr td .vs-con,
.tC:not(table) .vs-con,
table tr th.tC .vs-con {
	display: inline-block;
}

table.tR tr th .vs-con,
table.tR tr td .vs-con,
.tR:not(table) .vs-con,
table tr th.tR .vs-con {
	float: right;
}


/* Container START*/
.vs-con{
	border:solid 1px #23af8c;
	border:solid 1px var(--green-color);
	position:relative;
	background-color: white;
	box-sizing: border-box;
	
	/* overflow: hidden; */
}

.vs-con:not(.disabled):hover,
.vs-con.vs-open,
.vs-con:not(.disabled).focus{
	/* border-color: #1e9476;
	border-color: var(--dark-green-color); */
	box-shadow: 0 0 2px #1e9476;
	box-shadow: 0 0 2px var(--dark-green-color);
}

.vs-con.vs-hidden
{
	display: none !important;
}


/* .vs-con select{
	left: 500px;
	position: absolute;
	top: -1px;
} */

.vs-con .vs-opt-con{
	overflow: hidden;
}


/* Arrow Button START*/
.vs-con div.vs-arrow-btn {
	width: 13px;
	height: 100%;
	position: absolute;
	right: 0px;
	top: 0px;
	/* background-color: white; */
	z-index: 90;
}
.vs-con div.vs-arrow-btn div {
	width: 13px;
	height: 16px;
	top: 50%;
	right: 0px;
	position: absolute;
	margin-top: -8px;
	background-image: url(../../cwi/css/ui/images/ui-icons_000000_256x240.png);
	background-position: -66px -1px;
}
.vs-con:not(.disabled):hover div.vs-arrow-btn{
	background-color :#23af8c !important;
	background-color: var(--green-color) !important;
	border-left: 1px solid #1e9476;
	border-left: 1px solid var(--dark-green-color);
}

/* Options Container START */
.vs-con .vs-options-con{
	position: absolute;
	z-index: 91;
	margin-top: 0px;
	box-shadow: 0px 1px 5px #aaa;
	min-width: 100%;
	background: white;
	/* border-left: solid 1px #23af8c;
	border-right: solid 1px #23af8c; */
	border: solid 1px #23af8c;
	left: -1px;
}

.vs-con .vs-options-con .vs-opt-con{
	border-bottom: 1px solid #ccc;
	/* position: relative; */
}



.vs-con .vs-options-con .vs-opt-con:last-child{
	border-bottom: none;
}

/* .vs-con .vs-options-con .vs-opt-con:hover, */
.vs-con .vs-options-con .vs-opt-con:not(.disabled).vs-selected
{
	background: Highlight !important;
	color: HighlightText !important;
}
/* .vs-con .vs-options-con .vs-opt-con:hover div.vs-label-con div, */
.vs-con .vs-options-con .vs-opt-con:not(.disabled).vs-selected div.vs-label,
.vs-con .vs-options-con .vs-opt-con:not(.disabled).vs-selected div.vs-desc
{
	color: HighlightText !important;
}


.vs-con .vs-options-con[vs-maxHeight]{
	overflow: scroll;
	overflow-x: hidden;
}


/* Single Option START */

.vs-con .vs-opt-con{
	width: 100%;
	display: flex;
	align-items: center;
	height: 100% !important;
	position: relative;
	z-index: 1;
}

.vs-con > .vs-opt-con{
	top: -1px;
}

/* .vs-con > .vs-opt-con{
	position: absolute;
} */

.vs-con .vs-opt-con .vs-img-con{
	padding-left: 3px;
	display: flex;
	align-items: center;
}

/* Single Option -> Label Container (label + Desc) START*/
.vs-con .vs-opt-con .vs-label-con{
	display: flex;
	flex-direction: column;
	padding-left: 3px;
	/* height: 100% !important; */
}

.vs-con .vs-opt-con .vs-label-desc-con{
	display: flex;
	flex-direction: column;
	/* height: 100% !important; */
	padding-left: 3px;
}

.vs-con .vs-opt-con .vs-label-inline-desc-con{
	padding-left: 3px;
	padding-right: 3px;
	display: flex;
	flex-direction: row;

}

/* Status LED Strip START*/
.vs-con .vs-opt-con .vs-status-con
{
	height: calc(100% - 4px);
	margin-left: 1px;
	width: 3px;
}
.vs-con .vs-opt-con .vs-status-con[statusColor="0"] {
	background-color:#aaaaaa;
	background-color:var(--disabled-grey-color);
}

.vs-con .vs-opt-con .vs-status-con[statusColor="1"] {
	background-color:#e61f38;
	background-color:var(--red-color);
}

.vs-con .vs-opt-con .vs-status-con[statusColor="2"] {
	background-color:#23af8c;
	background-color:var(--green-color);
}

.vs-con .vs-opt-con .vs-status-con[statusColor="3"] {
	background-color:#f3943e;
	background-color:var(--orange-color);
}

.vs-con .vs-opt-con .vs-status-con[statusColor="100"] {
	background-color: none;
}


/* Single Option -> Label START */
.vs-con div.vs-label {
	font-size: 13px !important;
	/* min-height: 12px; */
	line-height: 8pt;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.vs-con .vs-label-con div.vs-label{
	height: 100%;
}

.vs-con .vs-label-desc-con div.vs-label,
.vs-con .vs-label-inline-desc-con div.vs-label
{
	padding-bottom: 1px;
	font-weight: bold;
	color: black;
}

.vs-con .vs-label-desc-con div.vs-label{
	align-items: end;
	flex-grow: 1;
}

.vs-con div.vs-desc {
	padding-top: 1px;
	font-size: 10px !important;
	line-height: 7pt;
	color: #727272;
	font-weight: normal;
	display: flex;
	white-space: nowrap;
	
	
}

.vs-con .vs-label-desc-con div.vs-desc{
	align-items: start;
	flex-grow: 1;
}

.vs-con .vs-label-inline-desc-con div.vs-desc{
	padding-left: 5px;
	line-height: 8pt;
}





/* Config BUTTON START */
.vs-con:not(.disabled) > .vs-opt-con:hover div.vs-cfg-btn-con{
	
	display: flex;
}

.vs-con div.vs-cfg-btn-con{
	position: absolute;
	right: 18px;
 	display: none;
	z-index: 90;
	height: 100%;
	width: 16px;
	align-items: center;
	top: 0px;
}
.vs-con div.vs-cfg-btn-con div.vs-cfg-btn{
	border-radius: 6px;
	border: 1px solid white;
	background-color: white;
	height: 14px;
	width: 14px;
	background-image:url(../../cwi/css/ui/images/ui-icons_000000_256x240.png);
	cursor: pointer;
	background-position: -177px -114px;
}

.vs-con:not(.disabled) > .vs-opt-con div.vs-cfg-btn-con div.vs-cfg-btn:hover{
	background-color: #23af8c;
	border-color: #1e9476;
	opacity: 1;
	background-image:url(../../cwi/css/ui/images/ui-icons_ffffff_256x240.png);
	
}


/* DISABLED STYLE START */
.vs-con.disabled{
	border-color: #AAAAAA;
}


.vs-con .vs-opt-con.disabled div.vs-label,
.vs-con .vs-opt-con.disabled div.vs-desc,
.vs-con.disabled .vs-label,
.vs-con.disabled .vs-desc{
	color: #AAA !important;
}

.vs-con .vs-opt-con.disabled .vs-img-con .vs-img,
.vs-con.disabled .vs-img-con .vs-img{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
	filter: alpha(opacity=0.4) !important;
	-moz-opacity: 0.4 !important;
	-khtml-opacity: 0.4 !important;
	opacity: 0.4 !important;
}

.vs-con.disabled .vs-arrow-btn div{
	background-image:url(../../cwi/css/ui/images/ui-icons_aaaaaa_256x240.png);
}


/* DARKMODE */
.vs-con[vs-mode="dark"],
.vs-con[vs-mode="dark"] .vs-options-con {
	background-color: #3c3c3c !important;
	border-color: #3c3c3c !important;
}

.vs-con[vs-mode="dark"] .vs-label-desc-con div.vs-label, 
.vs-con[vs-mode="dark"] .vs-label-inline-desc-con div.vs-label,
.vs-con[vs-mode="dark"] .vs-label-con div.vs-label
{
	color: white;
}

.vs-con[vs-mode="dark"] div.vs-desc{
	color: #aaaaaa;
}

.vs-con[vs-mode="dark"] .vs-img{
	filter: invert(1);
}

.vs-con[vs-mode="dark"] div.vs-arrow-btn{
	background-color: #3c3c3c !important;
	border-color: #3c3c3c !important;
}
.vs-con[vs-mode="dark"]:hover div.vs-arrow-btn{
	background-color: #3c3c3c !important;
	border-color: #3c3c3c !important;
}
.vs-con[vs-mode="dark"] div.vs-arrow-btn div{
	background-image: url(../../cwi/css/ui/images/ui-icons_ffffff_256x240.png);
}
.vs-con[vs-mode="dark"]:hover div.vs-arrow-btn div{
	background-image: url(../../cwi/css/ui/images/ui-icons_23af8c_256x240.png);
}
.vs-con[vs-mode="dark"] .vs-options-con .vs-opt-con{
	border-bottom: 1px solid #585858;
}


/* LED Strip Images */
div.vs-img[class*="ledStrip_"]
{
	height: calc(100% - 6px) !important;
	width: 3px !important;
	position: absolute;
	top: 3px;
	left: 2px;
}
.ledStrip_0 {
	background-color: #aaaaaa !important;
}
.ledStrip_1 {
	background-color: #e61f38 !important;
}
.ledStrip_2 {
	background-color: #23af8c !important;
}

/* vs-img */
.vs-img.vs-img-src{
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: center;
}