/* CSS file */
/* lt2_filterband.css */
/* Used on charts/graphs and ER to filter a list below it */


#lt_filter_band_button {
	display:none;
}
#lt_filter_band {
	--lt-filter-band-gap: var(--lt-padding-half);
	border-bottom: 1px solid var(--lt-tint-dark-1);
	display: flex;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	background: var(--lt-sidebar-tan);
	background: #f7f5f3dd;
	z-index: 20;
	right: var(--lt-padding);
	padding: var(--lt-padding-half) var(--lt-padding);
	border-radius: var(--lt-border-radius);
	border: var(--lt-border);
	width: 100%;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	margin-bottom: var(--lt-padding);

	gap: var(--lt-filter-band-gap);
	flex-wrap: wrap;

	top: 49px;
	box-shadow:none;

	/* full width */
	margin-left: -20px;
	width: calc(100% + 40px);
	border-left: none;
	border-right: none;
	border-radius: 0;
}

.no-flexgap #lt_filter_band > * {
	margin-right: var(--lt-filter-band-gap);
}
.no-flexgap #lt_filter_band > *:last-child {
	margin-right: 0;
	gap:0;
}
.has_subnav #lt_filter_band {
	top: 85px;
}
#lt_filter_band.disabled {
	opacity: 0.5;
	user-select: none;
	pointer-events: none;
}


#lt_filter_band .group {
	gap: var(--lt-filter-band-gap);
	display:flex;
	flex-wrap: wrap;
}
.no-flexgap #lt_filter_band .group > * {
	margin-right: var(--lt-filter-band-gap);
}
.no-flexgap #lt_filter_band .group > *:last-child {
	margin-right: 0;
	gap:0;
}


.lt_filter_bar .btn_group:has(~ .pagination) {
	flex-grow:0;
}
.lt_filter_bar > .pagination {
	flex-grow:1;
	text-align: center;
}


#lt_filter_band > .note {
	flex-basis: 100%;
}

#lt_filter_band select,
#lt_filter_band select:focus-visible {
	border: none;
	background: #fff0;
	color: #fff;
	font-weight: 600;
	padding: 0;
	margin: 0;
	outline: none;
	max-width: 10em;
	text-overflow: ellipsis;
	padding-right: 9px;
}

#lt_filter_band > .right {
	justify-self: right;
	margin-left:auto;
}
#nstats_filter_custom_text {
	flex-basis: 100%;
	margin-top: var(--lt-padding-quarter-neg);
	padding: var(--lt-padding-quarter) var(--lt-padding-quarter) 0;
	color: var(--lt-gray-color);
}


@media (max-width: 767px) {
	#lt_filter_band_button {
		z-index: 99;
		display: none;
	}

	#lt_filter_band {
		--lt-filter-band-gap: var(--lt-padding-quarter);
		display:flex;
		xposition: relative;
		top: 102px;
		right: unset;
		margin-top: var(--lt-padding);
		box-shadow:none;
		background: var(--lt-sidebar-tan);
		justify-content: space-between;

		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	#lt_filter_band.active {
		display:block;
	}

	#lt_filter_band select {
		margin-bottom: var(--lt-padding-quarter);
	}


	.lt_popup_menu[data-name="read_filter"],
	.lt_popup_menu[data-name="added_filter"] {
		xdisplay:none;
	}
}


/* should match .lt2 .flex_nav_right .btn in main */
@media (max-width: 360px) {
	.lt2 #lt_filter_band .btn,
	.lt2 #lt_filter_band a.btn {
		font-size: 0.8rem;
	}
}