/************************************/
/*** Drop-down                    ***/
/************************************/

drop-down {
	display: inline-block;
	min-width: 4em;
	user-select: none;
	cursor: default;
}

.dropdown-wrapper {
	width: 100%;
}

.dropdown-label { 
	width: 100%; 
   text-overflow: ellipsis;
   white-space: nowrap;
/* This seems to be necessary for Firefox. */
   display: table-cell; 
	overflow-x: hidden;
	overflow-y: visible;
	vertical-align: middle;
}

.dropdown-icon {
	position: relative;
	top: 0.1em;
	left: -0.4em;
	font-size: 75%;
	opacity: 0.6;
}

.selected .dropdown-icon {
	color: var(--global-color) !important;
}

.dropdown-popup {
	overflow: auto;
	padding: 0;
} 

.dropdown-popup:empty {
	display: none;
} 

.dropdown-list {
	list-style: none;
	cursor: default;
	text-align: left;
	background: var(--input-backgnd);
	margin: 1px;
	padding: 0;
}

.dropdown-list > li {
	overflow: hidden;
	margin: 2px 1px;
	padding: 0.3em 0.6em;
	cursor: default;
	user-select: none;
}

.dropdown-list > li:hover, .dropdown-list > li:hover * {
	color: var(--selected-color) !important;
	background: var(--selected-backgnd) !important;
}

.dropdown-label .fa, .dropdown-list > li .fa {
	width: 1.2em;
	text-align: center;
	margin-right: 0.5em !important;
}

.dropdown-label img, .dropdown-list > li img {
	height: 1em;
	margin-right: 0.5em !important;
	vertical-align: middle;
	position: relative;
	top: -0.1em;
}