/*=== FONTS ==================================================================*/
@font-face {
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/Bitter-Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: italic;
	font-weight: 400;
	src: url(fonts/Bitter-Italic.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 500;
	src: url(fonts/Bitter-Medium.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: italic;
	font-weight: 500;
	src: url(fonts/Bitter-MediumItalic.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 600;
	src: url(fonts/Bitter-SemiBold.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: italic;
	font-weight: 600;
	src: url(fonts/Bitter-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 700;
	src: url(fonts/Bitter-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'Bitter';
	font-style: italic;
	font-weight: 700;
	src: url(fonts/Bitter-BoldItalic.woff2) format('woff2');
}

/*=== GLOBAL =================================================================*/
:root {
	--max-width: 60em;
	--color: #414141;
	--head-color: black;
	--bg-color: white;
	--link-color: #2045f3;
	/* https://isotropic.co/hex-color-to-css-filter/ */
	--link-color-filter: invert(17%) sepia(100%) saturate(3459%) hue-rotate(232deg) brightness(98%) contrast(96%);
	--nav-color: #707070;
	--nav-brd-color: #e2e5e9;
	--btn-bg-color: #ecefff;
	--meta-color: #919191;
	--block-margin: 1ex;
	--header-height: 3rem;

	background-color: var(--bg-color);
	color: var(--color);
	font-family: 'Bitter', 'Source Serif', serif;
	font-size: 11pt;
	font-weight: 400;
	scroll-behavior: smooth;
	scroll-margin-top: 2em;
}

body {
	margin: 0;
}

p,
ul,
ol {
	margin: var(--block-margin) 0;
}

table {
	width: 90%;
	margin: var(--block-margin) auto;
}

td,
th {
	padding: 1ex;
}

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

a:hover {
	text-decoration-line: underline;
}

strong {
	font-weight: 600;
}

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

img {
	max-width: 100%;
}

figcaption,
caption {
	font-style: italic;
}

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

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

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

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

#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: 500;
	-webkit-line-clamp: 2;
	text-decoration: inherit;
}

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

#showSiteNav {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
	width: 3em;
	background-image: url('img/menu.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	border-inline-start: solid 1px var(--nav-brd-color);
}

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

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

#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(--nav-color);
}

#siteNav .active_yes {
	border-bottom: solid 2px var(--link-color);
	color: var(--link-color);
	font-weight: 500;
}

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

#siteNav a:hover {
	color: var(--link-color);
}

#siteNav .help > * {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: var(--header-height);
	margin: 0;
	background-image: url('img/help.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	border-inline-start: solid 1px var(--nav-brd-color);
}

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

/*=== MAIN ===================================================================*/
#main {
	max-width: var(--max-width);
	padding: 0 1em;
	margin: 1em auto;
}

h1 {
	margin: .1ex 0;
	color: var(--head-color);
	font-size: 2.2em;
	font-weight: 500;
}

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

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

.function {
	display: inline;
}

/*--- Breadcrumb -------------------------------------------------------------*/
#breadcrumb {
	flex: 1 1 auto;
}

#breadcrumb_ti {
	display: none;
}

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

.bdcbSel_yes {
	display: none;
}

.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(--nav-brd-color);
	margin-top: 1ex;
	background-color: var(--bg-color);
}

#topLink {
	display: none;
	width: 2em;
	height: 2em;
	background-image: url('img/top.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
}

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

#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: 1ex 0;
	margin: 0 1em;
	color: var(--nav-color);
	text-decoration: none;
	white-space: nowrap;
}

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

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

#contentNavList a:hover {
	color: var(--link-color);
}

#contentNavList a.active {
	border-bottom: solid 2px var(--link-color);
	color: var(--link-color);
}

.button,
.tooltip_x {
	display: block;
	width: 1.8em;
	height: 1.8em;
	background-color: var(--btn-bg-color);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	border-radius: 50%;
}

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

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

#navScrollLeft {
	left: -1px;
	background-image: url('img/left.svg');
}

#navScrollRight {
	right: -1px;
	background-image: url('img/right.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(--bg-color);
}

#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 ================================================================*/
.processMap_co {
	margin-top: 2em;
}

#content {
	margin-bottom: 75%;
}

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

h2 {
	color: var(--head-color);
	font-size: 1.7em;
	font-weight: 500;
}

.finality {
	margin: 1em 0;
}

.finality_ti {
	border-inline-end: solid 1px var(--head-color);
	color: var(--head-color);
	float: left;
	font-weight: 600;
	margin-inline-end: .5em;
	padding-inline-end: .5em;
}

.descrBlock_ti {
	display: list-item;
	margin: 2ex 0 1ex 0;
	font-size: 1.2em;
	list-style-position: inside;
	list-style-type: square;
}

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

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

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

.indicTable {
	width: 95%;
}

.indicTable td {
	width: 25%;
}

.refEntryCbk > a {
	text-decoration: inherit;
}

.refEntryCbk_ti {
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: .2ex;
}

.refEntryCbk_closed::before {
	content: '+ ';
}

.refEntryCbk_open::before {
	content: '- ';
}

.refEntryCbk_open > .refEntryCbk_ti {
	text-decoration: none;
}

.refEntryCbk_co {
	box-sizing: border-box;
	padding-left: 1em;
	border-left: dashed 2px var(--meta-color);
	margin-left: 1em;
}

.pm {
	overflow: hidden;
	margin: calc(var(--block-margin) * 2) 0;
}

.pm_ti {
	display: flex;
	align-items: center;
	color: var(--head-color);
	font-weight: 600;
}

.pm_ti > span {
	flex: 1;
	margin-right: 1em;
}

.pm:not(.information) > .pm_ti::after {
	display: block;
	color: var(--meta-color);
	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 2px var(--meta-color);
	margin-left: 1em;
}

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

#diagramFullscreenLink {
	position: absolute;
	top: 1ex;
	right: 1ex;
	display: none;
	width: 3em;
	height: 3em;
	background-image: url('img/enterFullscreen.svg');
	cursor: pointer;
	touch-action: manipulation;
}

#diagramArea:hover > #diagramFullscreenLink {
	display: block;
}

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

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

.workInstr #diagramArea {
	margin: 1em 1em 1em 0;
	float: left;
}

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

#diagramArea:fullscreen > #diagram > .svgMap {
	min-width: 100%;
	max-width: none;
}

#diagramArea:fullscreen > #diagramFullscreenLink {
	position: fixed;
	display: block;
	background-image: 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;
}

.action_ti {
	font-weight: 700;
}

.actionBlock {
	margin: 1ex 0;
}

.actionBlock_ti {
	font-weight: 500;
}

.actionBlock p {
	--block-margin: .5ex;
}

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

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

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

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

.cellNum_tbtd {
	text-align: right;
}

.cellWord_tbtd {
	text-align: right;
}

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

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

/*=== FOOTER =================================================================*/
#footer {
	height: var(--header-height);
	border-top: solid 1px var(--nav-brd-color);
}

/*=== HOME ===================================================================*/
.home {
	max-width: var(--max-width);
	margin: 0 auto;
}

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

.home > #header {
	display: block;
	height: auto;
	border-bottom: none;
	padding-inline-end: 0;
}

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

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

.home > #footer {
	height: auto;
	padding: 0 1em;
	border-top: none;
	margin: 2em 0;
}

.home > #footer > .meta {
	color: inherit;
}

.home > #footer > .meta > .meta_ti {
	color: var(--head-color);
	font-weight: 600;
}

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

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

.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;
}

.refEntry_ti {
	font-size: 1.2em;
}

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

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

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

/*--- Map --------------------------------------------------------------------*/
.map_co > ul {
	padding-inline-start: 0;
}

.map ul {
	list-style-type: none;
}

.map ul ul {
	border-left: 1px dashed var(--color);
}

.map li {
	margin: 1.5ex 0;
}

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

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

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

/*=== TOOLTIP ================================================================*/
.tooltip {
	padding: 1.5ex;
	border: solid 1px var(--nav-brd-color);
	background-color: var(--bg-color);
	border-radius: 1ex;
	box-shadow: 0 0 1em var(--color);
}

.tooltip_ti {
	font-weight: 700;
	margin-inline-end: 1.8em;
}

.tooltip_x {
	position: absolute;
	top: 1.5ex;
	right: 1.5ex;
	background-image: url(img/close.svg);
	font-size: .8em;
}

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

/*=== 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: block;
	}

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

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

	#siteNav.active {
		position: fixed;
		top: var(--header-height);
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		background-color: var(--bg-color);
	}

	#siteNav > ul {
		position: static;
		display: block;
		margin: 1em;
	}

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

	#siteNav .help > * {
		all: unset;
		position: absolute;
		bottom: 1em;
		left: 2em;
		background-image: url('img/help.svg');
		background-position: left;
		background-repeat: no-repeat;
		background-size: 1em 1em;
	}

	#siteNav .help > * > span {
		all: unset;
		padding-left: 1.5em;
		color: var(--color);
	}

	#siteNav .help > *:hover > span {
		text-decoration: underline;
	}

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

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

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

	.bdcbOwner_processMap {
		display: initial;
	}
}

@media (hover: none) {
	#diagramFullscreenLink {
		display: block;
	}
}