.autocomplete {
	position: relative;
}

	.autocomplete input[type='text'] {
		width: 100%;
		box-sizing: border-box;
	}

.autocomplete-items {
	position: absolute;
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-top: none;
	z-index: 99;
	top: 100%;
	left: 0;
	right: 0;
	border-radius: 10px;
	/* Matches the tag autocomplete panel so long lists scroll instead of
	   running off the card, and the panel lifts off the content beneath it. */
	max-height: 200px;
	overflow-y: auto;
	box-shadow: var(--shadow-near);
}

	.autocomplete-items div {
		padding: 10px;
		cursor: pointer;
		box-sizing: border-box;
		background-color: var(--color-lightest);
		border-bottom: 1px solid var(--border-color);
		font-size: .9rem;
		line-height: .9rem;
	}

		.autocomplete-items div:first-child {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}

		.autocomplete-items div:last-child {
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		.autocomplete-items div:hover,
		.autocomplete-active {
			background-color: var(--color-2) !important;
			color: var(--color-2-reverse);
		}

/* Mapbox address suggestions for the AddressEdit control. Built in JS
   (address-edit.js) rather than Razor, so these cannot live in a scoped
   stylesheet. Styled to match the .autocomplete-items panel above. */
.address-suggestions {
	position: absolute;
	z-index: 99;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: var(--shadow-near);
}

.address-suggestion {
	padding: 10px;
	cursor: pointer;
	box-sizing: border-box;
	background-color: var(--color-lightest);
	border-bottom: 1px solid var(--border-color);
	font-size: .9rem;
	line-height: .9rem;
}

	.address-suggestion:first-child {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.address-suggestion:last-child {
		border-bottom: none;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.address-suggestion:hover,
	.address-suggestion.active {
		background-color: var(--color-2) !important;
		color: var(--color-2-reverse);
	}