.select-container {
	position: relative;
}

	.select-container::after {
		content: "";
		position: absolute;
		right: 24px;
		width: 20px;
		height: 100%;
		-webkit-mask-image: url('data:image/svg+xml;utf8, <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 6L8 10L12.5 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		-webkit-mask-position: center center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-image: url('data:image/svg+xml;utf8, <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 6L8 10L12.5 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		mask-position: center center;
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
		background-color: var(--form-field-text-color);
		transition: transform 0.3s;
	}


	.select-container:has(select:focus)::after {
		transform: rotate(-180deg);
	}

.form-group select {
	font: inherit;
	border: 0;
	width: 100%;
	padding: 11px 16px 12px;
	box-shadow: 0px 4px 30px rgba(0, 21, 118, 0.08);
	border-radius: 5px;
	color: var(--form-field-text-color);
	background-color: var(--form-field-dropdown-background-color);
	font-weight: 600;
	appearance: none;
	transition: background-color 0.5s;
	min-height: 2.5em;
}

	.form-group select:hover {
		background-color: var(--form-field-background-color);
		border-radius: 5px;
	}