.ml-select {
	min-width: 125px;
	height: 45px;
	padding: 10px;
	padding-right: 50px;
	font-family: var(--header-font-family);
	font-weight: bold;
	font-size: 15px;
	line-height: 24px;
	border-radius: 5px;
	border-color: var(--ml-border-highlight-color);
	background-color: var(--ml-background-color);

	background-image:
		linear-gradient(45deg, transparent 50%, #343a61 50%),
		linear-gradient(135deg, #343a61 50%, transparent 50%),
		linear-gradient(to right, #dee3f0, #dee3f0);
	background-position:
		calc(100% - 18px)
		calc(14px + 6px),
		calc(100% - 13px)
		calc(14px + 6px),
		calc(100% - 35px)
		0;
	background-size:
		5px 5px,
		5px 5px,
		1px 100%;
	background-repeat: no-repeat;
}

select.ml-select {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ml-select:hover {
	background-color: var(--ml-background-moodlight-color);
	border-color: var(--ml-border-outline-color);
}

.ml-select:focus {
	background-image:
		linear-gradient(45deg, #343a61 50%, transparent 50%),
		linear-gradient(135deg, transparent 50%, #343a61 50%),
		linear-gradient(to right, #dee3f0, #dee3f0);
	background-position:
		calc(100% - 15px) 17px,
		calc(100% - 20px) 17px,
		calc(100% - 2.5em) 0;
	background-size:
		5px 5px,
		5px 5px,
		1px 100%;
	background-repeat: no-repeat;
	outline: 0;
}