.ui-autocomplete {
	max-height: 20vh;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}
/* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
* html .ui-autocomplete {
	height: 20vh;
}

.form-select {
	display: block;
	width: 100%;
	padding: 0.375rem 2.25rem 0.375rem 0.75rem;
	-moz-padding-start: calc(0.75rem - 3px);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.15;
	color: #212529;
	background-color: #fff;

	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px 14px;
	border: none;
	border-radius: 4vh;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: background-color 0.3s ease-in;
}
.form-select:focus-visible {
	outline: none;
}

select {
	display: inline-block;
	text-align: start;
	appearance: auto;
	box-sizing: border-box;
	align-items: center;
	white-space: pre;
	-webkit-rtl-ordering: logical;
	background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
	margin: 0em;
	border-width: 1px;
	border-style: solid;
	border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
	border-image: initial;
	border-radius: 0px;

	background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");
}