/**
 * Autocomplete Css
 *
 * Mainly overrides for awesomplete.css
 */

div.awesomplete > ul > li:hover {
	background: hsl(200, 40%, 90%);
	color: #000;
}

div.awesomplete > ul > li[aria-selected="true"] {
	background: hsl(200, 40%, 80%);
	color: #404040;
}

div.awesomplete mark {
	color: #404040;
}

div.awesomplete li:hover mark,
div.awesomplete li[aria-selected="true"] mark {
	background: hsl(65, 100%, 49%);
}

.search-wrap div.awesomplete > ul {
	top: 40px;
	text-align: left;
	max-height: 13.5em;
	color: #404040;
	overflow: auto;
	background: linear-gradient(to bottom right, #fff, hsla(0, 0%, 100%, 0.9));
}

.search-wrap-inline div.awesomplete > ul {
	right: 0;
}

/* Matches submenu breakpoint */
@media screen and ( min-width: 501px ) {
	.search-wrap-inline div.awesomplete > ul {
		left: auto;
	}
}

.search-wrap .searchform label div.awesomplete > input,
.search-wrap div.awesomplete {	
	width: 100%;
}

.search-wrap .searchform,
.search-wrap .searchform div:first-child,
.search-wrap div.awesomplete {
	/* Needs to be visible for the awesomplete popup */
	overflow: visible;
}

.search-wrap div.awesomplete {
	/* This is for the input to expand */
	display: flex; 
}

div.awesomplete > ul::before {
	content: none;
}