/* =========================================== */
/* Filter Styling */
/* =========================================== */
.t2m-filter {
	margin: 10px 0;
	background-color: var(--t2m-filter-bg-color, rgba(232, 246, 244, 1.0));
	border-width: var(--t2m-filter-border-width, 0);
	border-style: var(--t2m-filter-border-style, solid);
	border-color: var(--t2m-filter-border-color, #000);
	border-radius: var(--t2m-filter-border-radius, 0);
	box-shadow: var(--t2m-filter-box-shadow, unset);
	padding: var(--t2m-filter-padding, 20px);
}

.t2m-filter:hover,
.t2m-filter:focus {
	background-color: var(--t2m-filter-bg-color-hover, transparent);
}

.t2m-filter h2 {
	color: var(--t2m-filter-title-text-color, #000);
	font-family: var(--t2m-filter-title-font, 'Roboto'), sans-serif;
	font-size: var(--t2m-filter-title-font-size, 17px) !important;
}

/* ID-scope zodat thema's met `#page-container h2 !important` (1-0-1, bijv. Divi) */
/* de filtertitel niet overschrijven. id + class samen = 1-1-1, wint van 1-0-1 */
/* ongeacht laadvolgorde. */
#t2m-filter.t2m-filter h2 {
	color: var(--t2m-filter-title-text-color, #000) !important;
	font-family: var(--t2m-filter-title-font, 'Roboto'), sans-serif !important;
	font-size: var(--t2m-filter-title-font-size, 17px) !important;
}

.t2m-filter-options {
	display: flex;
	flex-wrap: wrap;
}

.t2m-select-field {
	border-width: var(--t2m-filter-options-dropdown-border-width, 1px);
	border-style: var(--t2m-filter-options-dropdown-border-style, solid);
	border-color: var(--t2m-filter-options-dropdown-border-color, #000);
	padding: var(--t2m-filter-options-dropdown-padding, 10px);
	transition: 250ms ease;
	display: inline-flex;
	cursor: pointer;
	width: fit-content;
	margin: 0 8px 8px 0;
}

.t2m-select-field:focus {
	border-width: var(--t2m-filter-options-dropdown-border-width, 1px);
	border-style: var(--t2m-filter-options-dropdown-border-style, solid);
	border-color: var(--t2m-filter-options-dropdown-border-color, #000);
	padding: var(--t2m-filter-options-dropdown-padding, 10px);
}

.t2m-select-field option {
	color: var(--t2m-filter-text-color, #000);
	font-family: var(--t2m-filter-text-font, 'Roboto'), sans-serif;
	font-size: var(--t2m-filter-text-font-size, 13px);
	cursor: pointer;
	border-radius: 5px;
	transition: 250ms ease;
}

.t2m-select-field option:hover,
.t2m-select-field option:focus {
	color: var(--t2m-filter-text-color-hover, #000);
	border-radius: 5px;
}