:root { 
	--st-cell-padding: 12px
}

div.template-page-panel[data-template-panel=StructuredTable]:focus-within {
	position: relative;
	z-index: 1000;
}

section.structured-table { 

}

section.structured-table div.copy { 
	margin-bottom: 30px;
}

section.structured-table div.filter-options-container {
	margin: 0;
	display: flex;
	flex-direction: row;
	gap: 20px;
}

section.structured-table div.table-scroll { 
	overflow-x: auto;
}

section.structured-table div.filter-options {
	flex-basis: 100%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

section.structured-table div.filter-options[data-filter-count='4'] {
	grid-template-columns: repeat(4, 1fr);
}

section.structured-table div.filter-options[data-filter-count='3'] {
	grid-template-columns: repeat(3, 1fr);
}

section.structured-table div.filter-options[data-filter-count='2'] {
	grid-template-columns: 1fr 1fr;
}

section.structured-table div.filter-options[data-filter-count='1'] {
	grid-template-columns: 1fr;
}

section.structured-table div.filter-options > div {
	/** Some weird CSS hack that prevents the grid item growing */

	min-height: 0;
	min-width: 0;
}

section.structured-table button.btn-clear-search {
	width: 12px;
	height: 12px;
	background-image: url("/_assets/icon-close-hl-dark-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section.structured-table button.btn-clear-filters {
	white-space: nowrap;
	font-family: Roobert, sans-serif;
	font-weight: 400;
	color: var(--hl-dark-green);
	border: 1px solid #DEE1DA;
	background-color: #DEE1DA;
	height: 40px;
	padding: 12px;
}

section.structured-table button.btn-clear-filters:hover { 
	background-color: #ffffff;
}

section.structured-table .dk-select,
section.structured-table .dk-select-multi,
section.structured-table .dk-option {
	font-family: Roobert, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: var(--hl-dark-green);
}

section.structured-table div.filter-options .dk-selected { 
	font: inherit;
	border: 0;
	background-color: #f3f4f2;
	padding-left: 1em;
}

section.structured-table .dk-checkboxes .dk-select-options li.dk-option:before { 
	border-color: var(--hl-dark-green);
}

section.structured-table .dk-select-options .dk-option-selected { 
	color: var(--hl-dark-green);
}

section.structured-table .dk-select-options li.dk-option-highlight { 
	background-color: rgba(var(--hl-dark-green-rgb), 0.15);
}

section.structured-table div.search-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	background-color: #f3f4f2;
	color: var(--hl-dark-green);
	padding: 10px;
	border: 0;
	font-family: Roobert, sans-serif;
	font-weight: 400;
	font-size: 14px;
	margin: 0;
}

section.structured-table div.filter-options-container + div.search-container { 
	margin-top: 10px;
}

section.structured-table div.search-container button.btn-search {
	width: 20px;
	height: 20px;
	background-image: url("/_assets/icon-search-hl-dark-green.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

section.structured-table div.search-container input[type=text].search {
	position: relative;
	flex-basis: 100%;
	font: inherit;
	color: inherit;
	margin: 0;
	padding: 5px;
}

section.structured-table div.filter-options-container + div.table-scroll,
section.structured-table div.search-container + div.table-scroll {
	margin-top: 20px;
}

table.structured-table {
	margin: 0;
	border: 0;
	background-color: #ffffff;
}

table.structured-table thead {
	/*position: sticky;
	top: 0px;*/
}

table.structured-table thead tr th {
	padding: 0;
}

table.structured-table th.align-center,
table.structured-table td.align-center { 
	text-align: center;
}

table.structured-table th.align-right,
table.structured-table td.align-right {
	text-align: right;
}

table.structured-table tr th:not(:has(button.column-sort)) {
	padding: var(--st-cell-padding);
}

table.structured-table tr th {
	border: 0;
	background-color: var(--hl-dark-green);
	color: var(--hl-light-green);
	font-family: Roobert, sans-serif;
	font-size: 16px;
	font-weight: 500;
	vertical-align: middle;
}

table.structured-table tr th button.column-sort { 
	width: 100%;
	padding: var(--st-cell-padding);
	background-color: inherit;
	color: inherit;
	font: inherit;
	text-align: left;
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
}

table.structured-table tr th button.column-sort:after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 16px;
	background-image: url("/_assets/icon-sortable-column-white.png");
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

table.structured-table tr th button.column-sort.sort-asc:after { 
	background-image: url("/_assets/icon-sortable-column-white-asc.png");
}

table.structured-table tr th button.column-sort.sort-desc:after {
	background-image: url("/_assets/icon-sortable-column-white-desc.png");
}

table.structured-table tr td {
	padding: var(--st-cell-padding);
	background-color: #ffffff;
	color: var(--hl-dark-green);
	font-family: Roobert, sans-serif;
	font-weight: 400;
	font-size: 15px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid var(--hl-dark-green);
	vertical-align: top;
}

section.structured-table table.structured-table tbody tr.even td {
	background-color: rgba(var(--hl-dark-green-rgb), 0.05);
}


table.structured-table tr td > :last-child { 
	margin-bottom: 0;
}

table.structured-table tr.row-hidden {
	display: none;
}


@media (max-width: 1020px) {
	section.structured-table div.filter-options[data-filter-count='5'] { 
		grid-template-columns: repeat(3, 1fr);
	}
}

@media(max-width: 900px) {
	section.structured-table div.filter-options[data-filter-count='4'] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	section.structured-table div.filter-options[data-filter-count='3'] {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 640px) {
	section.structured-table div.filter-options[data-filter-count='5'] {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 500px) {
	section.structured-table div.filter-options[data-filter-count] {
		grid-template-columns: 1fr;
	}
}