.wmSelectController
{
	position:absolute;
	left:0px;
	top:0px; 
}
.wmSelect.hidden,
.wmSelect.disabled
{  	
	position:absolute;
	left:-1000vw;
	top:-1000vh;
	opacity:0;
	pointer-events:none;
} 
.wmSelectDisplay
{
	user-select:none;
	display:inline-block;
	background:white;
	border:1px solid #444;
	border-radius:4px;
	box-sizing:border-box;
	margin:0;
	padding:4px 8px;
	font-size:14px;
	font-family:Tahoma;
	padding-right:calc(8px * 4);
	position:relative; 
	vertical-align:top;
	width:400px;
	color:#222;
}
.wmSelectDisplay:hover
{
	cursor:pointer
}
.wmSelectDisplay::after
{
	content:'▼';
	position:absolute;
	top:5px;
	right:0px;;
	padding-right:8px;
	opacity:0.5;
	animation: none; 
}
.wmSelectDisplay.loading::after
{
 	animation: blinking 0.2s linear infinite;
}
.wmSelectDisplay:hover::after
{ 
	opacity:1;
}
.wmSelectDisplay .wmSelectBody
{ 
	background:rgba(255,255,255,0.9);
	position:absolute;
	z-index:1000;
	--height:0px;
	left:-1px; 
	bottom:calc(var(--height) * -1);
	
	left:-1000vw;
	bottom:auto;
	top:-1000vh;
} 

.wmSelectDisplay.hasIcon
{
	padding-left:28px;
	background-color:#dcdcdc;
	background-image:var(--iconUrl);
	background-size: auto 80%;
	
	background-position:4px center;
	background-repeat:no-repeat;
}

.wmSelectDisplay.open
{ 
	background-color:#9bd5ff;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}
.wmSelectDisplay.open .wmSelectBody
{
	display:block;
	min-width:calc(100% + 12px);
	width:300px;
	border-radius:4px;
	border-top-left-radius:0px;
	box-sizing:border-box;
	padding:3px;
	border:1px solid #444; 
	
	left:-1px; 
	bottom:calc(var(--height) * -1);
	top:auto;
}
.wmSelectBody > input
{
	width:calc(100% - 8px);
}
.wmSelectDisplay .wmSelectList	
{
	width:100%; 
	background:#f2f2f2;
	border-radius:4px;
	margin-top:3px;
	max-height:300px;
	overflow:hidden;
	overflow-y:scroll;
}

.wmSelectDisplay .wmSelectList .wmSelectItem
{
	position:relative;
	display:block;
	border:1px solid #777;
	box-sizing:border-box;
	margin:2px;
	padding:3px;
	height:24px;
	font-size:14px;
	border-radius:3px;
	padding-right:20px; 
	overflow:hidden;
	text-overflow:ellipsis;
    white-space: nowrap;
	--iconUrl:none;
}
.wmSelectDisplay .wmSelectList .wmSelectItem.hasIcon
{
	padding-left:28px;
	background-color:#dcdcdc;
	background-image:var(--iconUrl);
	background-size: auto 90%;
	
	background-position:4px center;
	background-repeat:no-repeat;
}
.wmSelectDisplay .wmSelectList .wmSelectItem[even="1"]
{
	background-color:#f9f9f9;
}
.wmSelectDisplay .wmSelectList .wmSelectItem.preselect
{
	background-color:#fffe95;
}
.wmSelectDisplay .wmSelectList .wmSelectItem:hover
{
	background-color:#ccffea;
}
.wmSelectDisplay .wmSelectList .wmSelectItem:hover::after
{
	content:'◄';
	position:absolute;
	right:-2px;
	top:2px;
	opacity:0.7;
}
.wmSelectDisplay .wmSelectList .wmSelectItem.hidden,
.wmSelectDisplay .wmSelectList .wmSelectItem.disabled
{
	display:none;
}
.wmSelectList .wmSelectValue
{
	display:none;
}
.wmSelectDisplay.showValue .wmSelectValue
{
	display:block;
	color:purple;
	position:absolute;
	right:4px;
	top:4px;
	text-align:right;
	font-size:12px;
}
.wmSelectDisplay.showValue .wmSelectList .wmSelectItem:hover .wmSelectValue
{
	right:16px;
}
@keyframes blinking {
  from { 
    opacity:0.1;
  }
  to { 
  	opacity:1;
  }
}

.wmSelectList::-webkit-scrollbar {
  width: 7px;
}
 
.wmSelectList::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
.wmSelectList::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}