@import url('font/font.css');

/*=== GLOBAL =================================================================*/
:root {
	background-color: var(--bgColor);
	color: var(--color);
	font-family: var(--fontStyle), 'Source Serif', serif;
	font-size: var(--fontSize);
	font-weight: var(--weight);
	scroll-behavior: smooth;
	scroll-padding-top: 4em;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

p {
	margin: var(--blockMargin) 0;
}

ul,
ol {
	margin: var(--blockMargin) 0;
	padding-left: 2em;
}

table {
	width: calc(100% - 4em);
	margin: var(--blockMargin) auto;
}

td,
th {
	padding: 0 1.5ex;
}

.descrTable th {
	padding: var(--blockMargin);
	font-weight: var(--headWeight);
}

a {
	color: var(--linkColor);
	text-decoration: inherit;
}

a:hover {
	color: var(--linkHoverColor);
	text-decoration-line: underline;
}

button {
	all: unset;
	outline: revert;
}

strong {
	font-weight: var(--strongWeight);
}

figure {
	margin: calc(var(--blockMargin) * 2) 0;
	text-align: center;
}

img {
	max-width: 100%;
	height: auto;
}

figcaption,
caption {
	font-style: italic;
	margin: calc(var(--blockMargin) / 2) 0;
}

section:target > h2 {
	animation: highlight 2s ease;
	text-decoration: underline transparent;
}

@keyframes highlight {
	0% {
		text-decoration-color: var(--color);
	}

	100% {
		text-decoration-color: transparent;
	}
}

/*=== COOKIE WARN ============================================================*/
#cookieWarnBar {
	background-color: var(--btnBgColor);
	border-bottom: solid 1px var(--navBrdColor);
	padding: 1ex 1em;
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#cookieWarnBar > button {
	color: var(--linkColor);
	background-color: var(--bgColor);
	cursor: pointer;
	height: min-content;
	padding: .5ex;
	border-radius: .5ex;
	font-size: small;
}

#cookieWarnBar > button:hover {
	color: var(--linkHoverColor);
	text-decoration: underline;
}

/*=== SKIP LINKS =============================================================*/
#skipLinks {
	position: absolute;
	transform: translateY(-100%);
	border-bottom: solid 1px var(--navBrdColor);
	padding: 1ex 1em;
}

#skipLinks:focus-within {
	position: static;
	transform: translateY(0);
}

#skipLinks > ul {
	display: flex;
	flex: 1;
	padding: 0;
	margin: 0;
	list-style: none;
	gap: 1em;
}


/*=== HEADER =================================================================*/
#header {
	position: relative;
	display: flex;
	color: var(--headColor);
	box-sizing: border-box;
	align-items: center;
	padding: 1ex 3em 1ex 1ex;
	border-bottom: solid 1px var(--navBrdColor);
}

#header > img {
	max-height: 2em;
	flex: 0;
	margin-inline-end: 1em;
	object-fit: contain;
}

#rootLink {
	display: -webkit-box;
	overflow: hidden;
	flex: 1;
	-webkit-box-orient: vertical;
	color: inherit;
	font-weight: var(--headWeight);
	-webkit-line-clamp: 2;
	text-decoration: inherit;
	font-size: 1.2em;
}

#rootLink:hover {
	color: var(--linkHoverColor);
}

#showSiteNav {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
	width: 3em;
	--icon: url('img/menu.svg');
	border-inline-start: solid 1px var(--navBrdColor);
}

#showSiteNav > span {
	position: absolute;
	top: auto;
	left: -10000px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/*=== SITE NAV ===============================================================*/
#siteNav {
	display: flex;
	border-bottom: solid 1px var(--navBrdColor);
}

#siteNav_ti {
	display: none;
}

#siteNav > ul {
	display: flex;
	overflow: hidden;
	flex: 1;
	padding: 0;
	margin: 0;
}

#siteNav li {
	display: block;
	padding: 1ex 0;
	margin: 0 1em;
	color: var(--navColor);
}

#siteNav li:hover {
	color: var(--linkHoverColor);
	border-bottom-color: var(--linkHoverColor);
}

#siteNav .active_yes {
	border-bottom: solid 2px var(--linkColor);
	color: var(--linkColor);
	font-weight: var(--headWeight);
	cursor: pointer;
}

#siteNav a {
	color: inherit;
	text-decoration: inherit;
}

#siteNav .help {
	margin-left: auto;
}

#siteNav .help > * {
	display: flex;
	align-items: center;
}

#siteNav .help > *::before {
	--icon: url('img/help.svg');
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / 100% no-repeat;
	mask: var(--icon) center / 100% no-repeat;
	margin-right: .5ex;
}

#siteNav .help.active_yes > *::before {
	--icon: url('img/back.svg');
	cursor: pointer;
}

/*=== MAIN ===================================================================*/
#main {
	max-width: var(--maxWidth);
	width: 100%;
	padding: 0 1em;
	margin: 1em auto;
	box-sizing: border-box;
	flex: 1;
}

h1 {
	margin: 2rem 0;
	color: var(--headColor);
	font-size: 2.2em;
	font-weight: var(--headWeight);
}

.context {
	flex: 1;
	align-items: center;
}

.metas {
	margin: -2rem 0 2rem;
}

.meta {
	color: var(--metaColor);
}

.function {
	display: inline;
}

/*--- Breadcrumb -------------------------------------------------------------*/
#breadcrumb {
	flex: 1 1 auto;
	margin: 2em 0 -2em;
}

#breadcrumb_ti {
	display: none;
}

/* .bdcbOwner_processMap visible on mobile */
.bdcbPos_ancestor:not(.bdcbOwner_processMap) + .bdcbSep::after {
	content: ' > ';
}

.bdcbSel_yes {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;
}

.bdcbOwner_processMap {
	display: none;
}

/*--- Content nav ------------------------------------------------------------*/
#contentNav {
	position: sticky;
	z-index: 1;
	top: /* -1px required for the intersection observer */ -1px;
	display: flex;
	align-items: center;
	border-bottom: solid 1px var(--navBrdColor);
	background-color: var(--bgColor);
	margin: 1ex -1em 0;
}

#topLink {
	display: none;
	width: 2em;
	height: 2em;
	--icon: url('img/top.svg');
}

#contentNav.stuck #topLink {
	display: flex;
}

#topLink > span {
	display: none;
}

#contentNavArea {
	position: relative;
	min-width: 0;
	flex: 1;
	margin: 0 1ex;
}

#contentNavList {
	position: relative;
	display: flex;
	width: fit-content;
	max-width: 100%;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

#contentNavList.refNavList {
	margin: 0 auto;
}

#contentNavList::-webkit-scrollbar {
	display: none;
}

#contentNavList > * {
	display: block;
	padding: 1.2ex 0;
	margin: 0 1em;
	color: var(--navColor);
	text-decoration: none;
	white-space: nowrap;
}

#contentNavList > .refNavLink {
	margin: 0 1ex;
}

#contentNavList > span.refNavLink {
	color: #bbb;
}

#contentNavList a:hover {
	color: var(--linkHoverColor);
	border-bottom-color: var(--linkHoverColor);
}

#contentNavList a.active {
	border-bottom: solid 2px var(--linkColor);
	color: var(--linkColor);
	font-weight: var(--headWeight);
}

.button,
.tooltip_x {
	display: block;
	width: 1.8em;
	height: 1.8em;
	background-color: var(--btnBgColor);
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

.button[hidden],
.tooltip_x[hidden] {
	display: none;
}

.button::after,
.tooltip_x::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--linkColor);
	-webkit-mask: var(--icon) center / 50% no-repeat;
	mask: var(--icon) center / 50% no-repeat;
}

.button:hover::after,
.tooltip_x:hover::after {
	background-color: var(--linkHoverColor);
}

button.button[disabled] {
	opacity: .4;
}

.navLink {
	display: flex;
}

.navLink::before {
	content: "";
	display: block;
	flex: 1;
	background-color: var(--navColor);
	-webkit-mask: var(--icon) center / 50% no-repeat;
	mask: var(--icon) center / 50% no-repeat;
}

.navLink:hover::before {
	background-color: var(--linkHoverColor);
}

.printLink {
	--icon: url('img/print.svg');
	margin-inline-end: 1ex;
}

#navScrollLeft,
#navScrollRight {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	display: none;
	margin: auto;
	width: 1.4em;
	height: 1.4em;
}

#navScrollLeft {
	left: -1px;
	--icon: url('img/arrow.svg');
	transform: rotate(180deg);
}

#navScrollRight {
	right: -1px;
	--icon: url('img/arrow.svg');
}

#contentNav.scrollLeft #navScrollLeft,
#contentNav.scrollRight #navScrollRight {
	display: block;
}

#contentNavArea::before,
#contentNavArea::after {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	display: block;
	width: .9em;
	background-color: var(--bgColor);
}

#contentNavArea::before {
	left: 0;
}

#contentNavArea::after {
	right: 0;
}

#contentNav.scrollLeft #contentNavArea::before,
#contentNav.scrollRight #contentNavArea::after {
	content: '';
}

.printLink > span {
	position: absolute;
	top: auto;
	left: -10000px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/*=== CONTENT ================================================================*/
#content, .map_co {
	margin-bottom: 40vh;
}

.processMap_co {
	margin-top: 2em;
}

#content > section {
	margin: 3em 0;
	clear: both;
	scroll-margin-top: 3em;
}

h2 {
	color: var(--headColor);
	font-size: 1.7em;
	font-weight: var(--headWeight);
}

.finality {
	margin: 1em 0;
}

.descrBlock_ti {
	margin: 2ex 0 1ex 0;
	font-size: 1.2em;
	color: var(--headColor);
}

ul.descrList {
	list-style-type: square;
}

.descrTable {
	border-collapse: collapse;
	border-spacing: 0;
}

.descrTableHead {
	border-bottom: solid 1px var(--headColor);
	color: var(--headColor);
	font-weight: var(--headWeight);
	text-align: center;
}

.indicsActive {
	width: 95%;
}

.indicsActive td {
	width: 25%;
}

.indicsPotential {
	width: 95%;
	margin: calc(var(--blockMargin) * 2) auto;
}

.indicsPotential_ti {
	padding: 1ex;
	border-bottom: solid 1px var(--headColor);
	margin: var(--blockMargin) 0;
	color: var(--headColor);
	font-weight: var(--headWeight);
	text-align: center;
}

.inOutTable td,
.ameliorTable td {
	width: 50%;
	vertical-align: top;
}

.descrDetails {
	padding-left: 1em;
}

.descrDetails_ti {
	font-size: 1.2em;
	color: var(--headColor);
	list-style-position: outside;
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: .2ex;
	text-decoration-color: var(--linkColor);
	cursor: pointer;
}

.descrDetails_ti:hover {
	text-decoration-color: var(--linkHoverColor);
}

.descrDetails_ti::marker {
	content: '+ ';
	color: var(--linkColor);
}

.descrDetails_ti:hover::marker {
	color: var(--linkHoverColor);
}


.descrDetails[open] > .descrDetails_ti {
	text-decoration: none;
}

.descrDetails[open] > .descrDetails_ti::marker {
	content: '- ';
}

.descrDetails_co {
	box-sizing: border-box;
	padding-left: 1em;
	border-left: dashed 1px var(--metaColor);
	margin-left: 1ex;
}

/*--- Pedagogical markup -----------------------------------------------------*/
.pm {
	margin: calc(var(--blockMargin) * 2) 0;
	display: flow-root;
}

.pm_ti {
	font-weight: var(--strongWeight);
}

.pm:not(.information) > .pm_ti {
	display: flex;
	align-items: center;
}

.pm:not(.information) > .pm_ti > span {
	flex: 1;
	margin-right: 1em;
}

.pm:not(.information) > .pm_ti::after {
	display: block;
	color: var(--metaColor);
	content: attr(data-kind);
	font-size: .8em;
	font-variant: small-caps;
}

.pm:not(.information) > .pm_co {
	box-sizing: border-box;
	padding-left: 1em;
	border-left: dashed 1px var(--metaColor);
	margin-left: 1em;
}

/*=== DIAGRAM ================================================================*/
#diagramArea {
	position: relative;
	margin: 2em 0;
}

#diagramFullscreenBtn {
	position: absolute;
	top: 1ex;
	right: 1ex;
	width: 3em;
	height: 3em;
	--icon: url('img/enterFullscreen.svg');
	cursor: pointer;
	touch-action: manipulation;
	opacity: 0;
	pointer-events: none;
	transition: 0.5s opacity;
}

#diagramArea:hover > #diagramFullscreenBtn,
#diagramFullscreenBtn:focus {
	opacity: inherit;
	pointer-events: inherit;
}

@media (hover: none) {
	#diagramFullscreenBtn {
		opacity: inherit;
		pointer-events: inherit;
	}
}

#diagramFullscreenBtn > span {
	position: absolute;
	top: auto;
	left: -10000px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

#diagram {
	position: relative;
	touch-action: manipulation;
}

.workInstr #diagramArea:has(+ .pmSet) {
	margin: 1em 1em 1em 0;
	float: left;
}

#diagramArea:fullscreen {
	overflow: auto;
	justify-content: center;
	background-color: var(--bgColor);
	float: none;
	scrollbar-width: thin;
}

#diagramArea:fullscreen > #diagram > .svgMap {
	min-width: calc(100% - 4em);
	max-width: none;
	margin: 4em auto;
}

#diagramArea:fullscreen > #diagramFullscreenBtn {
	position: fixed;
	display: block;
	--icon: url('img/exitFullscreen.svg');
}

#diagram > .svgMap {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

#content > .svgMap {
	margin: 0 2em 4ex 0;
	float: left;
}

.svgMap > a {
	cursor: pointer;
}

.svgArea {
	fill: transparent;
}

.svgArea:hover {
	fill: #fff;
	opacity: .3;
}

.svgArea:focus {
	stroke: #000;
	stroke-width: 1px;
}

.actionBlock {
	margin: 1ex 0;
}

.actionBlock_ti {
	font-weight: var(--headWeight);
}

.actionBlock p {
	--blockMargin: .5ex;
}

.metaRef_ti {
	font-weight: var(--headWeight);
}

/*=== TEXT ===================================================================*/

/*--- Tables -----------------------------------------------------------------*/
.text_tb {
	border: solid 1px var(--color);
	border-collapse: collapse;
	caption-side: bottom;
}

.text_tb td {
	border: solid 1px var(--color);
}

.text_tb th {
	border: solid 1px var(--color);
	font-weight: var(--strongWeight);
	text-align: center;
}

.textNum_tbtd {
	text-align: right;
}

.textWord_tbtd {
	text-align: center;
}

/*--- Inlines ----------------------------------------------------------------*/
.textDefinition_ul,
.textDocument_ul {
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: .2ex;
}

.externalRef::after {
	color: var(--metaColor);
	content: ' (' attr(title) ')';
	font-size: .8em;
}

/*--- SWOT -------------------------------------------------------------------*/
.swot {
	border-spacing: 1ex;
	border-collapse: separate;
	border: none;
}

.swot th, .swot td {
	border: none;
}

.swot th {
	font-weight: var(--headWeight);
	padding: 0;
}

.swot td {
	vertical-align: top;
	padding: 1ex 1.5ex;
}

.swotIntern, .swotExtern {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.swotStrenghts {
	background-color: #e4efaa;
}

.swotWeaknesses {
	background-color: #fbcaa9;
}

.swotOpportunities {
	background-color: #bad6c5;
}

.swotThreats {
	background-color: #cbb7c2;
}

.swotComp_ti {
	margin: .5ex 0;
	font-weight: var(--strongWeight);
}

/*=== FOOTER =================================================================*/
#footer {
	min-height: var(--footerHeight);
	border-top: solid 1px var(--navBrdColor);
}

/*=== HOME ===================================================================*/
.prcsMapLink {
	display: flex;
	width: fit-content;
	height: 2.4em;
	box-sizing: border-box;
	align-items: center;
	padding: 0 1em 0 2em;
	margin: 1em auto 2em;
	background-color: var(--linkColor);
	background-image: url('img/processMap.svg');
	background-position: 1ex center;
	background-repeat: no-repeat;
	background-size: 1em;
	border-radius: 1.2em;
	color: var(--bgColor);
}

.prcsMapLink:hover {
	background-color: var(--linkHoverColor);
	color: var(--bgColor);
}

.home > #header {
	display: block;
	height: auto;
	border-bottom: none;
	padding-inline-end: 0;
	max-width: var(--maxWidth);
	width: 100%;
	margin: 0 auto;
}

.home > #header > img {
	display: block;
	max-height: none;
	margin: 0 auto;
}

.home > #header > h1 {
	font-size: 2.5em;
	text-align: center;
}

.home .props {
	margin: 2em 0;
}

.home .prop_ti {
	color: var(--headColor);
	font-weight: var(--headWeight);
}

/*=== TOOLS ==================================================================*/

/*--- Categs -----------------------------------------------------------------*/
.refCategs {
	position: sticky;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-bottom: solid 1px var(--navBrdColor);
	background-color: var(--bgColor);
}

.refCateg {
	padding: 1ex .8ex;
}

.refCateg > span {
	color: #999;
}

.refList {
	padding: 0;
	margin: 0;
	list-style: none;
	scroll-margin-top: 3em;
}

.refEntry {
	margin: 1.5em 0;
}

.index .refEntry {
	margin: 2em 0;
}

.refEntry_ti {
	font-size: 1.2em;
	color: var(--headColor);
}

.refEntry_co {
	padding-left: 1em;
	font-size: .9em;
}

.index .refEntry_co {
	padding-left: 0;
}

.refEntry_co > .pmSet > .pm {
	margin: var(--blockMargin) 0;
}

.refUses {
	margin: var(--blockMargin) 0;
	font-size: .8em;
}

.refUses_ti {
	font-weight: 500;
}

.refUses_co > ul {
	padding-left: 2em;
	list-style-type: disc;
}

.exampleLink {
	margin-left: .5em;
	font-size: .8em;
}

/*--- Map --------------------------------------------------------------------*/
.sw_map_navList,
.sw_map_navList ul {
	list-style-type: none;
}

.sw_map_navList,
.sw_map_navList > li > ul {
	padding-inline-start: 0;
	margin: 0;
}

.sw_map_navList > li:not(.processMap),
.sw_map_navList > .processMap > a {
	display: none;
}

.sw_map_navList ul ul {
	border-left: 1px dashed var(--metaColor);
	margin-left: 1em;
}

.sw_map_navList li {
	margin: 1.5ex 0;
}

.sw_map_navList ul ul > li {
	margin: 1ex 0;
}

/*--- Help -------------------------------------------------------------------*/
.legend {
	border-collapse: collapse;
	border-spacing: 0;
}

.legendHead {
	border-bottom: solid 1px var(--headColor);
	color: var(--headColor);
	font-weight: var(--headWeight);
	text-align: center;
}

.legPicture {
	padding: 1ex;
	text-align: center;
}

/*--- RACI Matrix ------------------------------------------------------------*/
.rmProcessMap {
	border-collapse: collapse;
	margin-inline: 0 auto;
	table-layout: fixed;
	width: calc(100% - 4em);
}

.rmRoleCol {
	width: 2em;
}

.rmProcessMap > tbody > tr {
	height: 2em;
}

.rmActivity > th {
	text-align: left;
}

.rmProcessMap > thead th {
	border: none;
}

.rmFunction {
	position: relative;
	height: 11em;
	font-weight: var(--strongWeight);
}

.rmFunction > span {
	bottom: 5px ;
	left: 50% ;
	position: absolute ;
	transform: rotate( -45deg ) ;
	transform-origin: center left ;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 15em;
	text-align: left;
}

.rmActivity > * {
	border: solid 1px #DDD;
}

.rmActivity > th {
	font-weight: inherit;
}

.rmActivity > th > a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rmProcess + .rmActivity > *,
.rmMacroPrcs + .rmActivity > * {
	border-top: none;
}

.rmActivity > td {
	height: 2em;
	padding: 0;
	text-align: center;
}

.rmActivity > td:empty {
	background-color: #f5f5f5;
}

.rmMacroPrcs, .rmProcess {
	height: 2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: white;
	font-weight: var(--strongWeight);
	break-after: avoid;
}

.rmMacroPrcs > th {
	font-size: 1.1em;
	background-color: #333;
}

.rmProcess > th {
	font-size: 1.1em;
	background-color: #666;
}

.rmRoleR {
	background-color: #fbcaa9;
}

.rmRoleA {
	background-color: #bad6c5;
}

.rmRoleC {
	background-color: #cbb7c2;
}

.rmRoleI {
	background-color: #e4efaa;
}

/*=== TOOLTIP ================================================================*/
.tooltip_a {
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: .2ex;
}

.tooltip {
	padding: 1.5ex;
	border: solid 1px var(--navBrdColor);
	background-color: var(--bgColor);
	border-radius: 1ex;
	box-shadow: 0 0 1em var(--color);
}

.tooltip_ti {
	color: var(--headColor);
	font-weight: var(--headWeight);
	font-size: 1.1em;
	margin-inline-end: 1.8em;
	margin-bottom: .5ex;
}

.tooltip_x {
	position: absolute;
	top: 1ex;
	right: 1ex;
	--icon: url('img/close.svg');
	font-size: .8em;
}

.tooltip_x > span {
	position: absolute;
	top: auto;
	left: -10000px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/*=== SEARCH =================================================================*/

/*--- Search form ------------------------------------------------------------*/
#searchForm {
	margin: -1em auto 2em auto;
	position: relative;
	display: flex;
	align-items: center;
	width: 30em;
}

#searchLabel {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

#searchInput {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 1ex;
	border: solid 1px var(--navBrdColor);
	border-radius: .5ex;
}

#searchInput::-webkit-calendar-picker-indicator {
	display: none !important;
}

#searchInput:placeholder-shown {
	background-color: #fafafa;
}

#searchInput::placeholder {
	color: #d2d2d2;
}

#clearSearch {
	--icon: url('img/close.svg');
	font-size: .6em;
	position: absolute;
	right: 5em;
}

#submitSearch {
	--icon: url('img/search.svg');
	margin-left: 1ex;
	flex: 0 0 1.8em;
}

/*--- Search results  --------------------------------------------------------*/
.resultsPanel {
	position: fixed;
	bottom: 0;
	margin: 0 auto;
	width: 40em;
	border: solid 1px var(--navBrdColor);
	border-bottom: none;
	background-color: var(--bgColor);
	box-sizing: border-box;
	max-width: 100%;
	left: max(calc((100vw - 40em) / 2), 0px);
	z-index: 2000;
	box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
}

.resultsList ~ *,
#searchNoResults:not([hidden]) ~ * {
	display: none;
}

#searchResults > header {
	display: flex;
	align-items: center;
}

.resultsPanel > header {
	border-bottom: solid 1px var(--navBrdColor);
}

#searchResults > header button {
	width: 1.2em;
	height: 1.2em;
	margin: 0 1ex;
}

.resultsPanel > div {
	max-height: calc(40vh - 2em);
	overflow: auto;
}

#searchResults[data-collapsed] > div {
	visibility: hidden;
	height: 1ex;
}

#collapseResults {
	--icon: url('img/collapse.svg');
}

.resultsList #collapseResults {
	display: none;
}

#searchResults[data-collapsed] #collapseResults {
	transform: rotate(180deg);
}

#resultsNav {
	display: flex;
	align-items: center;
	align-self: stretch;
	border-left: solid 1px var(--navBrdColor);
	border-right: solid 1px var(--navBrdColor);
}

.resultsList #resultsNav {
	display: none;
}

#previousResult {
	--icon: url('img/arrow.svg');
	transform: rotate(-90deg);
}

#nextResult {
	--icon: url('img/arrow.svg');
	transform: rotate(90deg);
}

#searchTextBox {
	flex: 1;
	margin: 1ex;
}

.resultsList #searchTextBox {
	font-size: 1.2em;
}

#closeResults {
	--icon: url('img/close.svg');
}

#pageResultsList,
.folderList {
	list-style: none;
	margin: 0;
	padding-left: 1ex;
}

.resultsPanel #pageResultsList {
	padding: 1ex;
	padding-left: 1em;
}

.folderList {
	padding-left: 1em;
}

.folderResult > details > summary {
	cursor: pointer;
}

.folderResult > details > summary:hover {
	text-decoration: underline;
}

#pageResultsList .current {
	font-weight: var(--strongWeight);
}

.folderResult > details > summary::marker {
	color: var(--navColor);
}

#pageResultsList li {
	margin: .4ex 0;
}

.resultsList #pageResultsList li {
	margin: 1ex 0;
}

.pageResult {
	padding-left: 1em;
}

/*=== MOBILE =================================================================*/
@media (max-device-width: 500px) and (orientation: portrait),
(max-device-height: 500px) and (orientation: landscape) {
	:root {
		font-size: calc(max(9pt, 1.4vmin));
	}

	#header {
		padding-inline-end: 6em;
	}

	#showSiteNav {
		display: flex;
	}

	#showSiteNav.active {
		--icon: url('img/close.svg');
	}

	#siteNav {
		z-index: 10;
		display: none;
		font-size: 1.5em;
	}

	#siteNav.active {
		flex: 1;
		display: flex;
		background-color: var(--bgColor);
	}

	#siteNav.active + #main,
	#siteNav.active + #main + #footer {
		display: none;
	}

	#siteNav > ul {
		flex-direction: column;
		margin: 1em;
		flex: 1;
	}

	#siteNav li {
		color: var(--color);
	}

	#siteNav li.active_yes {
		border-bottom: none;
		text-decoration: underline;
	}

	#siteNav .help {
		margin-left: inherit;
		margin-top: auto;
	}

	#siteNav.visible + main {
		display: none;
	}

	#contentNav,
	.refCategs {
		margin-right: -1em;
		margin-left: -1em;
	}

	.bdcbPos_ancestor + .bdcbSep::after {
		content: ' > ';
	}

	.bdcbOwner_processMap {
		display: initial;
	}

	.workInstr #diagramArea {
		float: none;
	}
}