﻿div.template-page-panel[data-template-tool='KnowhowList'] { 
	position: relative;
	z-index: 1;
}

div.template-page-panel[data-template-tool='KnowhowList']:focus-within {
	z-index: 10;
}


section.know-how-list /*:not(.tpp-theme-white)*/ { 
	padding: 20px 0;
}

section.know-how-list div.title-and-filters { 
	display: flex; 
	flex-direction: column;
	align-items: start;
	gap: 20px;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

section.know-how-list div.title-and-filters .section-title > :last-child {
	margin-bottom: 0;
}

section.know-how-list div.title-and-filters div.filters {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 10px 20px;
	flex-wrap: wrap;
	justify-content: space-between;
}

section.know-how-list div.title-and-filters div.filters label { 
	width: 55px;
	text-align: right;
}

section.know-how-list div.title-and-filters div.filters div.filter-options {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

section.know-how-list div.title-and-filters div.filters div.filter-options div.filter-field:first-child:before {
	content: "Filter by:";
	display: inline-block;
	width: 55px;
	white-space: nowrap;
	font-weight: 500;
	font-size: 14px;
}

section.know-how-list .simple-pagination .simple-pagination-buttons { 
	margin-bottom: 0;
}

/*** Themes ***/
/*
	light-taupe
	multi-gradient
	white
*/

section.know-how-list.tpp-theme-white > div.wrapper > div.col-1 {
	padding-top: 0;
	padding-bottom: 0;
}

section.know-how-list.tpp-theme-light-taupe {
	background-color: var(--hl-light-taupe);
}

section.know-how-list.tpp-theme-light-taupe .knowhow-panel.standard-knowhow-panel .inner,
section.know-how-list.tpp-theme-light-taupe .standard-filter-field .dk-selected,
section.know-how-list.tpp-theme-light-taupe .standard-filter-field .dk-select-options,
section.know-how-list.tpp-theme-multi-gradient .knowhow-panel.standard-knowhow-panel .inner,
section.know-how-list.tpp-theme-multi-gradient .standard-filter-field .dk-selected,
section.know-how-list.tpp-theme-multi-gradient .standard-filter-field .dk-select-options {
	background-color: #ffffff;
}



@media (max-width: 660px) {
	section .know-how-list div.title-and-filters, section.know-how-list div.title-and-filters div.filters { 
		align-items: start;
		flex-direction: column;
		width: 100%;
	}

	section.know-how-list div.title-and-filters div.filters div.filter-options {
		display: grid;
		grid-template-columns: calc(50% + 20px) calc(50% - 30px);
		width: 100%;
	}

	section.know-how-list div.title-and-filters div.filters div.filter-options .standard-filter-field .dk-selected { 
		max-width: 100%;
	}

	section.know-how-list div.title-and-filters div.filters div.filter-options div.filter-field:nth-child(3) {
		padding-left: 65px;
	}
}

@media(max-width: 450px) {
	section.know-how-list div.title-and-filters div.filters div.filter-options { 
		display: flex;
		flex-direction: column;
	}

	section.know-how-list div.title-and-filters div.filters div.filter-options div.filter-field:not(:first-child) {
		padding-left: 65px;
	}
}