@import "/style/variables.css";

.select {
	font-size: 14px;
	background-color: var(--main-color-grey-100);
	border: 1px solid hsla(207, 16.7%, 57.6%, 0.3);
	padding: 14px 17px;
	border-radius: 10px;
	outline: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9393 18.0607C11.5251 18.6464 12.4749 18.6464 13.0607 18.0607L22.6066 8.51472C23.1924 7.92893 23.1924 6.97918 22.6066 6.3934C22.0208 5.80761 21.0711 5.80761 20.4853 6.3934L12 14.8787L3.51472 6.3934C2.92893 5.80761 1.97918 5.80761 1.3934 6.3934C0.807612 6.97918 0.807612 7.92893 1.3934 8.51472L10.9393 18.0607ZM10.5 16V17H13.5V16H10.5Z" fill="currentColor"/></svg>');
	background-repeat: no-repeat;
	background-position-x: calc(100% - 10px);
	background-position-y: 16px;
	cursor: pointer;
}

.select:required:invalid {
	color: gray;
}