.eli_filter {
	max-width: 1000px;
}

.eli_filter-inner {
	display: flex;
	flex-flow: row wrap;
}

.eli_date-filter {
	display: flex;
	flex-flow: row wrap;
	flex: 0 0 100%;
	width: 100%;
	margin-bottom: 15px;

	.eli_date-filter-from-to {
		display: flex;
		flex-flow: row wrap;

		.eli_date-filter-from-wrapper,
		.eli_date-filter-to-wrapper {
			display: flex;
			align-items: center;
			border: 1px solid #ccc;
			border-radius: 7px;
			font-size: 13px;
			color: #939393;
			margin-right: 15px;

			img {
				height: 24px !important;
				width: auto;
				margin: 9px 12px;
			}

			input {
				border: none;
				border-radius: 7px;
				background-color: transparent;
				padding: 9px 12px;
				width: 100px;
				font-family: $main_font !important;
				font-size: 16px !important;
			}
		}
	}

	.eli_date-util {
		display: flex;
		border: 1px solid #ccc;
		border-radius: 7px;

		a {
			display: inline-block;
			flex: 1 0 auto;
			text-decoration: none !important;
			box-shadow: none !important;
			color: #939393;
			line-height: 42px;
			text-align: center;
			padding-left: 9px;
			padding-right: 9px;
			font-family: $main_font !important;
			font-size: 16px !important;
			font-weight: normal !important;

			&#choice-today,
			&#choice-tomorrow {
				border-right: 1px solid #ccc;
			}
		}
	}
}

.eli_select {
	height: 42px !important;
	background: transparent;
	padding: 9px 12px;
	color: #939393;
	width: 100%;
	font-family: $main_font !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
}

/* Fix SELECT BOX */
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.eli_ctn_select {
	position: relative !important;
	padding: 0 !important;
}


/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.eli_ctn_select select {
	/* Remove select styling */
	-webkit-appearance:none !important;
	-moz-appearance:none !important;
	appearance:none !important;
	text-indent: 0.01px !important;
	text-overflow: '' !important;
}

.eli_ctn_select select:focus {
	 outline: none !important;
}

.eli_ctn_select select::-ms-expand {
	display: none !important;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
.eli_ctn_select span.eli_hide_select {
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	background-color: transparent !important;
	width: 30px !important;
	height: 100% !important;
	z-index: 1 !important;
	pointer-events: none;

	-moz-border-radius: 3px !important;
	-webkit-border-radius: 3px !important;
	border-radius: 3px !important;

	&::after {
		content: "" !important;
		position: absolute !important;
		width: 14px !important;
		height: 8px !important;
		top: 55% !important;
		right: 60% !important;
		transform: translate(50%, -50%);
		background-image: url('../img/eli-select.png') !important;
		background-repeat: no-repeat !important;
		background-size: 12px !important;
		z-index: 2 !important;
		/* This hack make the select behind the arrow clickable in some browsers */
		pointer-events: none !important;
	}
}


@-moz-document url-prefix() {
	.eli_ctn_select select {
		overflow: hidden !important; /* optional */
		width: 120% !important;
	}

	.eli_ctn_select span.eli_hide_select {
		width: 20px !important;
	}
}

.eli_ctn_select {
	flex: 0 0 30%;
}

.eli_category-filter,
.eli_location-filter {
	margin-right: 15px;
}

.goldstar-frontend[filter-width="xs"] {
	.eli_date-filter-from-wrapper {
		margin-bottom: 15px;
	}
}

.goldstar-frontend[filter-width="xs"],
.goldstar-frontend[filter-width="sm"] {
	.eli_date-filter-from-to,
	.eli_date-util,
	.eli_ctn_select {
		flex: 0 0 100%;
	}

	.eli_date-filter-from-to,
	.eli_ctn_select {
		margin-bottom: 15px;
	}
}