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



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


/* .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;
	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;
	/* top: -1px; */
	position: relative;
}

/* .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;
	display: flex;
	flex-direction: row;

}

/* Single Option -> Label START */
.vs-con div.vs-label {
	font-size: 10pt !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: 8pt !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;
}
.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
{
	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;
}
