/* The container must be positioned relative: */
.custom-select {
    position: relative;
    /* margin-top: 15px; */
	width: calc(100% - 220px - 15px);
}

.custom-select select {
  	display: none; /*hide original SELECT element: */
}

.select-selected {
	background-color: transparent;
	/* margin-bottom: 15px; */
}

/* Style the arrow inside the select element: */
.select-selected:after {
	position: absolute;
	font-family: "Font Awesome\ 5 Free";
	font-weight: 900;
	content: "\f078";
	color: var(--form-grey);
	right: 15px;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
	border-color: transparent transparent var(--form-grey) transparent;
	transform: rotate(180deg);
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
	color: var(--form-grey);
	cursor: pointer;
	height: 42px;
	padding-left: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -1px;
	border: 2px solid var(--form-grey);
	border-top: none;
}

.select-selected {
	border-top: 2px solid var(--form-grey);
}

/* Style items (options): */
.select-items {
	position: absolute;
	background-color: var(--light-grey);
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  	display: none;
}

.select-items div:hover, 
.same-as-selected {
  	background-color: var(--form-grey);
	color: var(--white) !important;
}

@media (max-width: 1500px) and (min-width: 950px) {
    .custom-select {
		width: 100%;
		margin-bottom: 15px;
	}
}

@media (max-width: 600px) {
    .custom-select {
		width: 100%;
		margin-bottom: 15px;
	}
}