/*the container must be positioned relative:*/
.autocomplete {
	position: relative;
	display: inline-block;
	/*display:flex;
	align-items:center;
	justify-content:space-between;*/
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: var(--color-white);
	margin: 0;
	font-size: 0.9rem !important;
}
.autocomplete input {
	width: 100%;
	height: 100%;
	border: none !important;
	outline: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	border-radius: 5px;
	text-indent: 5px;
}
.autocomplete.autocomplete-selectBox {
	padding:0 28px;
	cursor:pointer;
}
.autocomplete.autocomplete-selectBox:before {
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;	
    content: '\f107';	
	font-family: fontAwesome, 'Font Awesome 6 Pro';
	top:0;
	right:0;
	width:24px;
	height:100%;
}
.autocomplete.autocomplete-right.autocomplete-selectBox:before {
	right:unset;
	left:0;
}
.autocomplete.autocomplete-selectBox > .autocomplete-icon {
	position:absolute;
	left:4px;
	width:24px;
    top: 5px;
    bottom: 5px;
	cursor:pointer;
	object-fit:contain;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.autocomplete.autocomplete-right.autocomplete-selectBox > .autocomplete-icon {
	left:unset;
	right:4px;
}
.autocomplete-items {
	position: absolute;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
	max-height:320px;
	overflow-y:auto;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%); 
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;	
}
.autocomplete-items div {
	display: flex;
	align-items: center;	
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
	background-color: #e9e9e9; 
}
.autocomplete-items div img{
	width:24px;
	height:24px;
	margin:0 5px;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}