/*
==============================
Feature: Custom Select Field
==============================
*/

.custom-select {
	position: relative;
}

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

.select-selected {
background-color: #fff;
}

/*style the arrow inside the select element:*/
.select-selected:after {
	position: absolute;
	content: "";
	top: 45%;
	right: 20px;
	width: 1px;
	height: 1px;
	border-right: 2px solid #363639;
	border-bottom: 2px solid #363639;
	border-left: 0;
	transform: rotate(45deg) translateY(-50%);
	padding: 0.25em;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
	transform: rotate(-135deg);
	top: 48%;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
	color: #252528;
	padding: 18px 16px;
	border: 2px solid;
	border-color: #606062;
	cursor: pointer;
	user-select: none;
}

.select-items div {
	border-color: transparent;
}

.select-selected.select-arrow-active {
	border-bottom-color: transparent;
	background-color: #F6F6F6;
}
/*style items (options):*/
.select-items {
	position: absolute;
	background-color: #fff;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 121;
	border: 2px solid #00c3c1;
	border-top-color: transparent;
}

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

.select-items div:hover, .same-as-selected {
background-color: #F6F6F6;
}

/*
==============================
Feature: Custom Select Field - Events
==============================
*/

#filterEvents .custom-select {
	width: 100%;
	border: 2px solid;
	border-color: #606062;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 10px;
	font-size: 0.9rem;
}
#filterEvents .select-items div,
#filterEvents .select-selected {
	width: 100%;
	border: 0;
}
#filterEvents .select-selected, #filterEvents .select-items div {
	padding: 7px 5px 5px;
}
#filterEvents .select-items {
	left: -2px;
	right: -2px;
}
#filterEvents .select-items div {
	width: 100%;
}
#filterEvents .select-selected:after {
	right: 12px;
}
#filterEvents .select-selected {
	text-align: right;
	margin-right: 15px;
}

@media (min-width: 992px) {
	#filterEvents .custom-select {
		width: 11rem;
	}
	#filterTags.custom-select {
		width: 13rem;
	}
	#filterEvents .select-selected {
		width: 8rem;
	}
}