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

/** HTML5 CSS RESET ***********************************************************/
html {
	scroll-behavior: smooth;
	scroll-padding-block-start:170px;
	height:100%;
	width: 100%;
	font-family: var(--fontStyle);
	font-size: var(--fontSize);
	overflow: hidden;
	position: fixed;

	@media (max-width: 580px){
		scroll-padding-block-start:250px;
	}
}
/** END HTML5 CSS RESET *******************************************************/

/* Scrollbar for global */
::-webkit-scrollbar {
	width: 15px;
}
::-webkit-scrollbar-track {
	background: var(--scrollbar-bgcolor);
}
::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border-radius: 5rem;
	border: 3px solid var(--scrollbar-bgcolor);
}

/** DOKIELGUIDE ***************************************************************/

/** Generic styles ************************************************************/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--titleStyle);
	color: var(--titleFG);
	font-weight: 500;
}
h2{font-size:1.4em;margin-block: .83em 0.2em;}
h3{font-size:1.3em;margin-block: 1em 0.2em;}
h4{font-size:1.2em;}
h5{font-size:1.15em;}
h6{font-size:1.1em;}

li {
	margin-block: 0.6rem;
	margin-inline: 0;

	& span {
		line-height: 1.4;
	}
}

.hidden{
	display:none;
}

input, select {
	vertical-align:middle;
	cursor:pointer;
}

ul,ol{
	padding-inline-start:30px;
	margin-block: 0.6rem;
	margin-inline: 0;
}

nav {
	& ul, & ol {
		list-style:none;
	}
}
blockquote, q {
	quotes:none;

	& ::before, &::after {
		content:'';
	}
}
img {
	.txt_fig_ex .screenSeq & {
		max-width: inherit;
		height: revert;
	}
	html[data-theme='dark'] & {
		filter: brightness(0.85);
	}
}

sup,sub{
	font-size: smaller;
}
ins {
	background-color:#ff9;
	color: var(--contentFG);
	text-decoration:none;
}
mark {
	background-color:#ff9;
	color: var(--contentFG);
	font-style:italic;
	font-weight: bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-block-end:1px dotted;
	cursor:help;
}
hr {
	display:block;
	height:1px;
	border:0;
	border-block-start:1px solid #cccccc;
	margin-block: 1rem;
	margin-inline: 0;
	padding: 0;
}

menu{
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	display: flex;
	gap: 0.1rem;
}
menu > li{
	margin-block: 0;
}
/* === TRANSITIONS ========================================================== */
@keyframes glowSection {
	0% {box-shadow: inset 0 0 30px #FFFF60;}
	100% {box-shadow: none;}
}

/** Page layout **************************************************************/
body {
	margin: 0;
	background-color: var(--contentBG);
	color: var(--contentFG);
	line-height: 1.5;
}

#page {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--contentBG);
	-webkit-overflow-scrolling: touch;
	scroll-padding-block-start:250px;
	scroll-behavior: smooth;
	display: flex;
	flex-direction: column;
}

#main {
	position: relative;
	flex: 1;
	margin: 0;

	& main {
		overflow-y: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

#content {
	min-height: -webkit-fill-available;
	min-height: -moz-available;
	min-height: fill-available;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	max-width: var(--maxWidth);
	margin-inline: auto;
	padding-block: 1em 3em;
	padding-inline-start: calc(var(--menuWidth) + 1em);
	padding-inline-end: 1em;
	transition: padding 0.3s ease;

	.schDisplay_on & {
		padding-block-end: 8em;
	}
	.oneColumn & {
		padding-inline: 0.5em;
	}
	.planClosed &,
	.tplNoMenu & {
		padding-inline-start: 1em;
		transition: padding 0.3s ease;

		@media (max-width: 900px){
			padding-inline: 0.5em;
		}
	}
}

/* ============= Cookie warn bar ============= */
.cookieWarnBar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	border-block-start: 1px solid var(--borderColor);
	background-color: var(--contentBG);
	padding: 0.5em;
	opacity:1;
	z-index: 1000;
	display:flex;
	align-items: center;
	column-gap: 0.5em;

	&.acknowledged {
		bottom: -30vh;
		opacity:0;
		transition: all 0.5s ease-out;
	}
}
a.cookieWarnBtnOk, a.cookieWarnBtnNok {
	font-size: 0.9em;
	padding-block: 6px;
	padding-inline: 10px;
	text-decoration: none;
	color: var(--accentDarkFG);
	background-color: var(--accentColor);
	border-radius: var(--borderRadius);
	width: fit-content;

	&:hover {
		background-color: color-mix(in oklab, var(--accentColor), transparent 45%);
	}
}

.cookieWarnBar_on #page {
	filter: brightness(0.6);
}

/** Header ********************************************************************/
#header {
	display: flex;
	flex-direction: column;
	width: -moz-available;
	width: -webkit-fill-available;
	width: -fill-available;
	border-block-end: 1px solid var(--borderColor);

	& .titleLayer {
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: var(--headerBG);
		padding-inline: 1em;

		.oneColumn & {
			flex-wrap: wrap;
			row-gap: 0;
			padding-block: 0.5em;
		}
		.oneColumn.menuOpen & {
			padding-block: 0.5em 0;
		}
	}
	& .toolLayer {
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: var(--accentLightColor);
		padding-inline: 1em;
		padding-block: 0.5em;

		.oneColumn & {
			flex-wrap: wrap;
		}
		&:empty {
			display: none;
		}
		& > menu {
			order: 1;

			.oneColumn & {
				display: none;
			}
		}
	}
	& h1 {
		flex: auto;
		margin: 0;
		font-size: var(--fontSize);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:var(--headerFG);

		.oneColumn & {
			flex: 1;
		}
		& img {
			max-height: 35px;
			width: auto;
		}
		& a {
			text-decoration: none;
			color: var(--headerFG);
		}
	}
	& span.longTitle{
		font-size:0.8em;

		&.richTitle{
			font-size:0.8em;
		}
	}
}

div.searchFra {
	order: 2;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9em;

	.oneColumn & {
		flex: 100%;
	}
}
.schForm {
	display: flex;
	background-color: var(--schBG);
	border: 1px solid var(--borderColor);
	border-radius: 5px;
	align-items: center;
	padding-inline: 0.3rem;
}

#logo{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

li.planBtnParent {
	margin: 0;
}
button.planBtn,
button.menuBtn {
	border: 1px solid var(--borderColor);
	width: 32px;
	height: 32px;
	padding: 0;
	text-align: center;
	color: var(--accentColor);
	background-color: var(--contentBG);
	border-radius: var(--borderRadius);
	cursor:pointer;

	&:hover {
		background-color: color-mix(in oklab, var(--contentBG), transparent 85%);
		color:var(--accentColor);
	}
	&::before {
		font-family:"fontello";
	}
	& span {
		display:none;
	}
}
button.planBtn {
	&::before {
		content: "\E83A";
		font-size: 1.1em;
	}
	.planClosed &::before {
		content: "\E83B";
	}
	.twoColumn & {
		display: block;
	}
	.oneColumn & {
		display: none;
	}
}
button.menuBtn {
	&::before {
		content: "\E83B";
	}
	.menuOpen &::before {
		content: "\E83A";
		font-size: 1.1em;
	}
	.twoColumn & {
		display: none;
	}
	.oneColumn & {
		display: block;
	}
}

/* ============= Accessibility menu ============= */
#accessibility {
	position: absolute;
	top: 0;
	right:40px;
	margin: 0;
	font-size: 60%;
	list-style-type: none;
	padding: 0;
	z-index:10;

	& li{
		display:inline-block;
		margin-block: 0;
		margin-inline: 1rem;
	}
	& a{
		opacity:0;
		color: #8a6493;
		text-decoration: none;
		transition:0.2s all;

		&:focus{
			opacity:1;
		}
	}
	&:hover a{
		opacity:0.2;
	}

}
/**Footer ********************************************************************/
#footer {
	background-color: var(--footerBG);
	width: 100%;
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	max-width: -fill-available;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	row-gap: 0.3em;
	padding-block-end: 0.3em;
	font-size: 0.9rem;

	.tplSubWin &::before {
		content: none;
	}
	& nav {
		display: flex;
		align-items:center;
		gap: 1em;
		width: 100%;
		max-width: -moz-available;
		max-width: -webkit-fill-available;
		max-width: -fill-available;
		padding-block: 5px;
		padding-inline: 15px;
		background-color: var(--accentLightColor);

		& a {
			font-weight: 500;
			padding-block: 8px;
			padding-inline: 12px;
			display: flex;
			gap:8px;
			align-items:center;
			justify-content: center;
			text-decoration:none;
			color: var(--accentDarkFG);
			background-color:var(--accentColor);
			border-radius: var(--borderRadius);
			width: fit-content;

			&:hover {
				background-color: color-mix(in oklab, var(--accentColor), transparent 45%);
			}
			&.navNext {
				margin-inline-start: auto;

				&::after {
					font-family: "fontello";
					content: "\E83D";
				}
			}
			&.navPrev::before{
				font-family: "fontello";
				content: "\E83C";
			}
		}
	}
}
span.copyright{
	color:var(--footerFG);
	display:inline-block;
	margin: 0;
	padding-inline: 0.5em;
	font-size:0.8em;
}

a.cookieWarnBtnBar,
a.btnAbout {
	color: var(--accentColor);
	text-decoration: none;
	padding-inline: 0.5em;
}
a.btnAbout::before{
	font-family:"fontello";
	content:"\E821";
	margin-inline-end:5px;
}

#footer menu,
a.btnSc {
	padding-inline: 0.5em;
}

/** Home *************************************************************/
.tplHomeTitleArticle {
	padding-block-start: 4em;
}

.tplHomeTitleFrame {
	margin-block-end: 0.8em;
	display: flex;
	gap: 0.8em;

	& .tplHomeLogo {
		display: flex;
		flex-direction: column;
		justify-content: center;

		@media (max-width: 580px){
			align-items: center;
		}
	}
	& .tplHomeTi > * {
		font-size: 2.2em;
		color: var(--titleFG);
		margin: 0;
	}
	& .tplHomeLongTi {
		font-family: var(--titleStyle);
		font-size: 1.3em;
		color: var(--contentLightFG);
		margin-inline-start: 0.2em;

		& > * {
			margin: 0;
		}
	}
	@media (max-width: 580px){
		flex-direction: column;
	}
}

/** Menus : stack *************************************************************/
#stack {
	font-size: 0.9em;
	order: 5;
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	& span.sw_outStack_navRoot{
		display: contents;
	}
	.oneColumn & {
		flex: 100%;
		justify-content: flex-start;
	}
	& a {
		color: var(--accentColor);
		text-decoration: none;
		min-width: 22px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	& span.stkSel_yes {
		min-width: fit-content;
		overflow-wrap: anywhere;
	}

	.sw_outStack_navRoot .txt_ico_tim img {
		max-height: 20px;
		width: auto;
	}
	& span.stkSep{
		font-size: 80%;
		color:var(--contentLightFG);
	}
	.tplSub & {
		top: 53px;
	}
	@media (max-width: 580px){
		.menuActive & {
			display:none;
		}
	}
}

/** Menus : plan **************************************************************/
ul.sw_outMap_navList {
	list-style: none;
	margin-block: 0;
	margin-inline: 10px 0;
	padding: 0;

	& li {
		margin: 0;
	}
	& ul {
		list-style: none;
		margin-block: 0;
		margin-inline: 20px 0;
		padding: 0;

		& li {
			margin: 0;
		}
	}
	& a {
		display:block;
		color: var(--accentColor);
		text-decoration: none;
		padding-block: 0.5rem;
		padding-inline: 0.5rem;

		&:hover {
			background-color: color-mix(in oklab, var(--contentBG), #000 5%);
			border-radius: 5px;
		}
		& span.outLabel{
			padding-inline-start: 0.5rem;
		}
		&.mnuSel_yes > span {
			display:block;

			&.outLabel{
				font-weight: bold;
			}
		}
	}
}

/** Menus : root **************************************************************/
#menu {
	.oneColumn & {
		display: none;
		flex: 100%;
		order: 5;
	}
	.oneColumn.menuOpen & {
		display: block;
	}
	& ul {
		margin: 0;
		padding: 0;

		& li {
			margin: 0;
			display: inline-block;
		}
	}
	& a {
		color:var(--accentColor);
		text-decoration: none;
		margin-block: 0;
		margin-inline: 5px;
		padding-block: 0;
		padding-inline: 5px;
		display:block;
		height: 46px;
		line-height: 50px;

		&:hover {
			color: color-mix(in oklab, var(--accentColor), #000 50%);
		}
		.oneColumn & {
			height: auto;
			line-height: 40px;
		}
	}
	.tplSub & li.outRoot a {
		color: var(--headerFG);
		border-block-end:4px solid var(--headerFG);
		font-weight: bold;

		&::before {
			content: "\E83C";
			font-family: "fontello";
			margin-inline-end: 5px;
		}
		&:hover {
			filter:brightness(1);
			cursor: initial;
		}
	}
	.tplPage & li.outRoot a,
	.tplTools & li.mainSel_yes a {
		color: var(--headerFG);
		border-block-end:4px solid var(--headerFG);
		font-weight: bold;

		&:hover {
			filter:brightness(1);
			cursor: initial;
		}
	}
}

/** Menus : outline ***********************************************************/
#outline {
	& ul.mnu_dynamic{
		display: block;
		position: relative;
		flex: 2 1 auto;
		padding-block: 0.5rem 3rem;
		padding-inline: 1em;
		overflow: auto!important;
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bgcolor);
	}
	& .mnuSrlUpFra,
	& .mnuSrlDwnFra {
		display: none;
	}
	& .btnOff{
		opacity: 0;
	}
	& > ul {
		overflow: auto!important;
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bgcolor);
	}
	& ul {
		list-style: none;
		padding-block: 1em;
		padding-inline: 0;
		margin: 0;

		&:not(.mnu_root) {
			padding-block: 0;
			padding-inline-start: 1.5em;
		}
		@media (max-width: 900px){
			&.mnu_root {
				margin-block-end:5rem;
			}
		}
		/* Scrollbar for outline menu */
		&::-webkit-scrollbar {
			width: 15px;
		}

		&::-webkit-scrollbar-track {
			background: var(--scrollbar-bgcolor);
		}

		&::-webkit-scrollbar-thumb {
			background-color: var(--scrollbar-thumb-color);
			border-radius: 5rem;
			border: 3px solid var(--scrollbar-bgcolor);
		}
		/* end scrollbar settings */
		& li{
			margin: 0;
			position: relative;
		}
	}
	& .mnuLbl{
		position: relative;
		display: flex;
		flex-direction: row;

		@media (max-width: 580px){
			font-size: 1em;
		}
	}
	& a.mnu_tgle_o span,
	& a.mnu_tgle_c span{
		display:none;
	}
	& a.mnu_tgle_o,
	& a.mnu_tgle_c {
		display: flex;
		align-items: center;
		justify-content: center;
		color:var(--menuFG);
		text-decoration:none;
		padding-block: 0;
		padding-inline: 5px;
		border-radius: var(--borderRadius);
	}
	& a.mnu_tgle_c::before{
		font-family: "fontello";
		content: "\E817";
	}
	& a.mnu_tgle_o::before{
		font-family:"fontello";
		content:"\E816";
	}
	& a.mnu_lnk{
		width: 100%;
		color:var(--menuFG);
		text-decoration: none;
		padding: 0.3em;
		border-radius: var(--borderRadius);
		cursor: pointer;
	}
	& a:hover{
		background-color: color-mix(in oklab, var(--accentColor), transparent 85%);
	}
	& li > .mnu_sel_yes{
		position: relative;
		margin: 0;
		background-color: var(--accentLightColor);
		color: var(--contentFG);
		padding: 0.3rem;
		border-radius: var(--borderRadius);
		gap:5px;
	}
	/* mobile */
	.twoColumn & {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		max-width: var(--menuWidth);
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
		display: flex;
		flex-direction: column;
		padding-block: 10px;
		padding-inline: 0;
		background-color: var(--menuBG);
		border-inline-end: 1px solid var(--borderColor);
		z-index: 99;
		transition: left 0.3s ease;
	}
	.twoColumn.planClosed & {
		left: calc(var(--menuWidth) * -1);
	}
	.oneColumn & {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--menuWidth) * -1);
		max-width: var(--menuWidth);
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
		display: flex;
		flex-direction: column;
		padding-block: 10px;
		padding-inline: 0;
		background-color: var(--menuBG);
		border-inline-end: 1px solid var(--borderColor);
		z-index: 999;
		transition: left 0.3s ease;
	}
	.oneColumn.menuOpen & {
		left: 0;
	}
	&:target{
		box-shadow:none;
	}
}

/** About *********************************************************************/
.infoBk th{
	padding-block: 5px;
	padding-inline: 0 10px;
	text-align: left;
}

/** Glossary ******************************************************************/
.glossary {
	margin-block-end:20px;

	& dl {
		margin-block-end:30px;
	}
	& dt {
		font-weight: bold;
		font-size:1.2em;
	}
	& dd {
		margin-block-end:20px;
	}
	& span.syn {
		display:block;
		color:var(--contentFG);
		font-size:0.95rem;
		margin-inline-start:0;
	}
	& a.idxCallers_closed,
	& a.idxCallers_open{
		color:var(--accentColor);
		text-decoration: none;
		padding-block: 0.5rem;
		padding-inline: 0;

		&::before {
			font-family: "fontello";
			width: 20px;
			height: 20px;
			display: inline-block;
			vertical-align: top;
			background-color: var(--accentColor);
			color: var(--accentDarkFG);
			text-decoration: none;
			font-weight: 500;
			text-align: center;
			font-size: 0.8em;
			line-height: 20px;
			margin-inline-end: 0.5rem;
		}
		&:hover .idxCallers_ti {
			text-decoration: none;
			color:var(--accentDarkColor);
		}
		&:hover::before{
			background-color: var(--accentDarkColor);
		}
	}
	& a.idxCallers_closed::before{
		content:"\E800";
	}
	& a.idxCallers_open::before{
		content:"\E801";
	}
	& .idxCallers_co {
		padding-block: 0.2rem;
		padding-inline: 0.5rem;
		margin-inline-start: 0.5rem;
		border-inline-start: 1px solid var(--accentColor);

		& ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		& a {
			color: var(--accentColor);
			text-decoration: none;

			&:hover{
				opacity: 0.8;
			}
		}
	}
	& .def{
		margin-inline-end:10px;
	}
}
.keyOutline {
	margin-block-end: 1rem;
	position: sticky;
	top: 50px;
	background-color: var(--contentBG);
	z-index: 10;
	padding-block: 1rem;
	padding-inline: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.keyCateg {
	font-size: 2rem;
}
.keyOutlineEntry a {
	background-color:var(--accentColor);
	color: var(--accentDarkFG);
	text-decoration: none;
	display:inline-block;
	padding-block: 0.5rem;
	padding-inline: 0.7rem;
	border-radius: 0.3rem;

	&:hover{
		background-color:var(--accentDarkColor);
	}
}

/** Fundamental units as root **************************************************/
.home {
	&.concept .def_bk{
		padding-inline-start: 20px;
	}
	&.stepList .secAloneCo{
		padding-inline-start: 10px;

		@media (max-width: 900px){
			padding: 0;
		}
	}
	&.screen .secAloneCo{
		padding-inline-start: 15px;
	}
	&.tree .secAloneCo{
		padding-inline-start: 15px;
	}
}
/** Content : Basket **********************************************************/
.basket {
	margin-inline-start: 10px;
	margin-inline-end: 10px;
	border-block-start: 1px dashed gray;
}
.basket_itti{
	font-size: 1.1em;
}

/** Content : condensed blocks ************************************************/
section.condensedChild {
	border: 0;
	position: relative;
	margin-block: 1rem;
	margin-inline: 0;
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: var(--accentColorAlpha);

	& > .condensable_ti{
		position:relative;
		display: flex;
		margin: 0;

		& > span{
			flex: 1 1 auto;
		}
		& > .blockAnchor{
			padding-block-start: 8px;
		}
	}
	& > .faqItem_ti{
		font-size: 1.1em;
	}
	& > .condensable_co{
		background-color: var(--contentBG);
		padding: 0.4em;
		border-radius: 0.3em;
	}
}

a.condensed_btn_open,
a.condensed_btn_closed {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	text-decoration: none;
	color: var(--contentFG);

	&::before {
		background-color: var(--accentColor);
		color: var(--accentDarkFG);
		font-family: "fontello";
		display: inline-block;
		position: relative;
		width: 20px;
		height: 20px;
		line-height: 20px;
		padding-block: 3px;
		padding-inline: 3px;
		text-align: center;
		font-size: 1rem;
		border-radius: 3em;
		flex: 0 0 auto;
	}
	&:hover {
		filter: brightness(0.8);
	}
}
a.condensed_btn_open {
	margin-block-end: 0.5em;

	&::before {
		content: "\E816";
	}
	.faqItem &::before {
		content: "\E801";
	}
	.part.condensedChild & {
		margin: 0;
	}
}
a.condensed_btn_closed {
	&::before {
		content: "\E817";
	}
	.faqItem &::before {
		content: "\E800";
	}
}
.content.condensedChildren > div:first-child {
	margin-block-start: 0;
}
.content.condensedChildren > div:last-child {
	margin-block-end: 0;
}

/** Content : Definitions *****************************************************/
div.syns{
	margin-block: 1em;
}
i.syn:before{
	content: "≃ ";
	color: gray;
}

/** Content : local menu ******************************************************/
.headCo_co{
	position:relative;
}
.secOutFra {
	position:fixed;
	top:147px;
	right:10px;
	z-index: 99;
	float:right;
	display: inline-block;
	font-size: 0.9em;
	margin-inline-start:1em;

	.tplNoStk & {
		top:102px;
	}
	& a{
		color: var(--accentColor);
		display: block;
		padding-block: 0.5rem;
		padding-inline: 0.8rem;
		text-decoration: none;

		&:hover{
			opacity: 0.8;
		}
		&:active {
			color: var(--contentFG);
			cursor: default;
		}
	}
	& > .secOutUi {
		background-color: var(--contentLightBG);
		max-width: 250px;

		& ul {
			list-style: none;
			margin-block: 0;
			margin-inline: 15px 0;
			padding: 0;
		}
		& ol {
			list-style: none;
			margin: 0;
			padding: 0;
			padding-block-end:0.5rem;
			max-height: 75vh;
			overflow: auto;
		}
	}
	@media (max-width: 900px){
		display: none;
	}
}
.secOutTi {
	& a {
		color: var(--contentFG);
		background-color: var(--contentLightBG);
		padding-block: 0.8rem;
		padding-inline: 0.8rem;
		max-width: 250px;
		transition-duration: 0.2s;

		&:hover{
			background-color: var(--contentLightBG);
		}
		&::before {
			font-family: "fontello";
			content: "\E82A";
			margin-inline-end: 8px;
		}
		&::after{
			font-family: "fontello";
			float:right;
			margin-inline-start: 8px;
		}
		&.secOut_cl{
			background-color: color-mix(in oklab ,var(--contentLightBG) 70%, transparent);
			width:auto;

			&::after {content: "\E816";}
			& span {
				display:none;
			}
		}
		&.secOut_op::after {content: "\E822";}
	}
}
li.caption_lo.screenSeq_lo {
	margin: 0;
}
.part_lo {
	margin: 0;
}

/** Content : See also & sub section outline **********************************/
.linkSection,
.subSecUi {
	margin-block: 1rem;
	margin-inline: 0;
	padding: 1rem;
	background-color:var(--accentLightColor);
	border-radius:0.5rem;
}
.subSecUi_ti {
	color:var(--contentFG);
	font-weight: bold;
	font-size:1.2em;
	padding: 0;
}
ul.links,
ul.sw_outSubSec_navList {
	list-style: none;

	& a {
		color: var(--accentColor);
		text-decoration: none;
		display: block;
		padding-block-start: 2px;

		&:hover {
			color: var(--accentDarkColor);
		}
	}
}

/** Content : block layout ****************************************************/
.headBlock_co {
	position: relative;
}
.headCo_ti {
	&.titleOnly_ti{
		text-align: center;
		font-size: 250%;
	}
	&.intro_ti {
		font-size: 2.5em;
	}
}
.start_ti {
	padding-block: 0;
	padding-inline: 10px;;
}
.part {
	margin-block: 2em;
	border-block-end: 1px dashed var(--accentColorAlpha);
	padding-inline: 0;
	padding-block: 0 1em;

	&:first-child {
		margin-block-start: 0.5em;
	}
	& .part {
		margin-block: 0.5em;
		padding-inline-start: 0.5rem;

		& .part .part {
			border-inline-start: none;
			padding-inline-start: 0.5rem;
		}
	}
	& .part_co:first-child {
		margin-block-start: 0;
	}
	& .part_co:last-child {
		margin-block-end: 0;
	}
}
section.concept,
section.stepList,
div.tree.block,
div.screen.block {
	margin-block: 1em;
	border-block-end: 1px dashed var(--accentColorAlpha);
	padding-inline: 0;
	padding-block: 0 1em;
}
section:last-child,
.part .part_co > div:last-child,
section.concept:last-child,
.concept > div:last-child,
.part_co:last-child {
	border-block-end: none;
	margin-block-end: 0;
}
section:first-child,
.part .part_co > div:first-child,
section.concept:first-child,
.concept > div:first-child,
.part_co:first-child {
	margin-block-start: 0;
}
.stepList_ti {
	margin-block-end: 0.5em;
}

.basket{
	clear:both;
}

/** Content : block styles ****************************************************/
.block,
.infoblock {
	position: relative;
	margin-block: 1em;

	&:first-child {
		margin-block-start: 0;
	}
	&:last-child {
		margin-block-end: 0;
	}
}
.block {
	@media (max-width: 580px){
		padding-block: 0.9rem 1rem;
		padding-inline: 1rem;
	}
}

.infoblock_ti {
	padding-block-end: 0.5em;
	font-size: 1.1em;
	margin: 0;

	& + .infoblock_co {
		padding-inline-start: 0.8em;
	}
}

.block_co {
	&.collBlk_open {
		padding-block-start: 0.3em;
	}
	& p {
		margin-block: 0.7em;

		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
	.scEditable > & {
		margin: 0;
	}
}

.infoblock_co p {
	margin-block: 0.7em;

	&:first-child {
		margin-block-start: 0;
	}
	&:last-child {
		margin-block-end: 0;
	}
}

i.blockType {
	display:none;
	float: right;
}

.block_no_ti {
	& i.blockType{
		display:inline;
		float: none;
		font-style: normal;
	}
	&.cbk-closed > .block_ti i.blockType{
		display:inherit;
	}
	&.screen > .block_ti > span.block_ti_co,
	&.stepList > .block_ti > span.block_ti_co,
	&.cbk-closed > .block_ti > span.block_ti_co {
		position: inherit;
	}
}

.block {
	.warning&,
	.advice&,
	.tip&,
	.example&,
	.note&,
	.legal&,
	.complement&,
	.typed& {
		padding-inline-start: 10px;
		padding-block: 0.5em;
		min-height: 16px;
		border-inline-start: 3px solid var(--block-color);

		& > .block_ti {
			color:var(--block-color);
			font-size:1.1em;
			margin: 0;
			display: flex;
			align-items: baseline;
			gap: 5px;

			&::before {
				font-family: "fontello";
				font-size: 0.9em;
				color: var(--accentDarkFG);
				background-color:var(--block-color);
				text-align: center;
				width: 25px;
				height: 25px;
				line-height: 25px;
				padding: 3px;
				border-radius: 5em;
			}
		}
	}
	.complement&,
	.typed&.cbk-closeable,
	.typed&.cbk-closed {
		padding: 10px;
		border-inline-start: none;
		border-block-end: 3px solid var(--block-color);
		border-radius: 6px;
	}
	/* --- Complement --- */
	.complement& {
		--block-color: var(--blockComplement);
		background-color: var(--blockComplementLight);

		& > .block_ti::before {
			content: none;
		}
		& span.block_ti_co {
			display: flex;
			align-items: baseline;
		}

		& a.block_btn_closed,
		& a.block_btn_open {
			color:var(--blockComplement);
			text-decoration:none;
			justify-content: space-between;
			flex: 2 1 auto;

			&:hover{
				color:var(--contentFG);

				&::before{
					background-color:var(--contentFG);
				}
			}
		}
		& > .block_ti a.block_btn_closed,
		& > .block_ti a.block_btn_open {
			display:flex;
			align-items: baseline;
			justify-content: flex-start;
			gap: 5px;
		}
		& a::before {
			font-family: "fontello";
			font-size: 0.9em;
			color: var(--accentDarkFG);
			background-color:var(--block-color);
			text-align: center;
			width: 25px;
			height: 25px;
			line-height: 25px;
			padding: 3px;
			border-radius: 5px;
		}
		& a.block_btn_closed::before{
			content: "\E800";
		}
		& a.block_btn_open::before{
			content: "\E801";
		}
		& .complement_ti,
		& .complement_ti .block_ti_co {
			max-width: -moz-available;
			max-width: -webkit-fill-available;
			max-width: -fill-available;
			width: 100%;
		}
	}
	/* --- Warning --- */
	&.warning {
		--block-color: var(--blockWarning);
		background-color: var(--blockWarningLight);

		& > .block_ti::before {
			content: "\E80D";
		}
	}
	/* --- Advice --- */
	&.advice {
		--block-color: var(--blockAdvice);

		& > .block_ti::before {
			content: "\E808";
		}
	}
	/* --- Tip --- */
	&.tip {
		--block-color: var(--blockTip);

		& > .block_ti::before {
			content: "\E810";
		}
	}
	/* --- Example --- */
	&.example {
		--block-color: var(--blockExample);

		& > .block_ti::before {
			content: "\E823";
		}
	}
	/* --- Note --- */
	&.note {
		--block-color: var(--blockNote);

		&.block > .block_ti::before {
			content: "\E80E";
		}
	}
	/* --- Legal --- */
	&.legal {
		--block-color: var(--blockLegal);

		& > .block_ti::before {
			content: "\E80F";
		}
	}
	/* --- Typed block --- */
	&.typed {
		--block-color: var(--contentFG);

		&.important {
			--block-color: var(--blockImportant);
			background-color: var(--blockWarningLight);
		}
		&.focus {
			--block-color: var(--blockFocus);
		}
		&.discrete {
			--block-color: var(--blockDiscrete);
		}
		& .icon {
			vertical-align: middle;
			margin-inline-end: 0.3em;
		}
		& a.block_btn_closed,
		& a.block_btn_open {
			text-decoration: none;
			color: var(--block-color);

			[data-theme="light"] &:hover {
				color: color-mix(in oklab, var(--block-color), #000 70%)!important;

				&::before {
					background-color: color-mix(in oklab, var(--block-color), #000 70%)!important;
					color: #fff!important;
				}
			}
			[data-theme="dark"] &:hover {
				color: color-mix(in oklab, var(--block-color), #fff 70%)!important;

				&::before {
					background-color: color-mix(in oklab, var(--block-color), #fff 70%)!important;
					color: #fff!important;
				}
			}
			&::before {
				font-family: "fontello";
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 1.3em;
				height: 1.3em;
				font-size: 0.9em;
				color: #fff;
				background-color: var(--block-color);
				border-radius: var(--borderRadius);
				margin-inline-end: 0.4em;
			}
		}
		& a.block_btn_open::before {content: "\E801";}
		& a.block_btn_closed::before {content: "\E800";}
	}
	/* --- Concept --- */
	.concept& {
		&::before {
			background:none;
		}
		& .concept_ti dfn {
			font-style: inherit;
		}
		& .concept_co span.syn {
			display:block;
			color:var(--contentFG);
			font-size:0.95rem;
			margin-inline-start:20px;

			&::before {
				content: '= ';
			}
		}
	}
	.detail & {
		border-radius: 5px;

		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}
span.typed {
	--block-color: var(--contentFG);
	color: var(--block-color);
	&.important {
		--block-color: var(--blockImportant);
	}
	&.focus {
		--block-color: var(--blockFocus);
	}
	&.discrete {
		--block-color: var(--blockDiscrete);
	}
}

.def_bk {
	padding-block: 0.5em;
	padding-inline: 1em;
	background-color: var(--accentLightColor);
	border-inline-start: 3px solid var(--accentColor);
	margin-block-end: 0.5em;
}

.caption {
	text-align: center;
	margin-inline: 0;

	& .caption_ti {
		font-size:1em;
		margin-block-start: 0.5rem;

		& .desc {
			font-style: normal;
			max-width:630px;
			margin-block: 0;
			margin-inline: auto;
			text-align: left;
		}
	}
	& .caption_co > iframe {
		max-width: -webkit-fill-available;
		max-width: -moz-available;
		max-width: -fill-available;
	}
}

.descBlock_closed,
.descBlock_open {
	color:var(--accentColor);
	text-decoration:none;

	&::after {
		font-family: "fontello";
		margin-inline-start: 0.3em;
		border: 1px solid;
		border-radius: 4px;
		font-size: 0.8em;
		padding: 0.2em;
		vertical-align: middle;
	}
}
.descBlock_closed::after {
	content: "\E800";
}
.descBlock_open::after {
	content: "\E801";
}

/* --- Anchor --- */
.blockAnchor {
	visibility:hidden;
	text-decoration: none;
	color:var(--accentColor);
	font-size: 0.9em;
	margin-inline-start:10px;
	order: 3;

	&::before{
		font-family:"fontello";
		content:"\E809";
	}
	& span{
		display:none;
	}
	*:hover > &,
	&:focus, .isMobile_true & {
		visibility:visible;
	}
}

/** Content : procedures ******************************************************/
.stepListFra header .infoblock_co {
	margin: 0;
}
.stepList.block::before{
	background:none;
}
.stepList_co {
	position:relative;
}
.prereq_ti,
.comment_ti,
.result_ti,
.proc_ti,
.linkSection_ti {
	font-family: var(--titleStyle);
	font-weight: 500;
	font-size: 1.2em;
}
.proc_ti {
	margin-block-end: 0.3em;
}
a.slpBtnStp,
a.slpBtnLst {
	padding-block: 0.4em;
	padding-inline: 0.3em;
	background-color: var(--contentBG);
	text-align: center;
	color: var(--accentColor);
	text-decoration: none;
	display: flex;
	justify-content: center;
	gap: 0.2em;
	flex: 1;
	border: 1px solid var(--borderColor);
	border-block-end: 3px solid var(--accentDarkColor);
}
a.slpBtnLst {
	order: 1;
}
a.slpBtnStp {
	order: 2;
}

.slpTools {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;

	& a.disabled_false:hover {
		background-color: color-mix(in oklab, var(--elmtBG), #000 15%);
	}
	& a.disabled_true {
		color: #fff;
		background-color: var(--accentDarkColor);
		cursor: default;
	}
	& a.disabled_true:hover {
		cursor: default;
	}
	a.slpBtnStp::before {
		content: "\E900";
		font-family: "fontello";
	}
	a.slpBtnLst::before {
		content: "\E818";
		font-family: "fontello";
	}
}
.slpSep, .slpCountLbl{
	display:none;
}
.stepScreen {
	background-color: var(--elmtBG);
	padding: 1em;
	border-radius: 5px;
	margin: 0;

	& li.step{
		padding: 1em;
		background-color: var(--contentBG);
		position: relative;

		@media (max-width: 580px){
			padding: 5px;
		}
	}
}



.step > .detail, .step > .ssteps {
	padding-inline-start: 2.2em;
	margin-block-start: 0.3em;

	@media (max-width: 580px){
		padding-inline-start:0.5rem;
	}
}
ol.ssteps{
	list-style: none;
	padding: 0;
	margin: 0;
}
li.sstep{
	padding-inline-start: 20px;
}
li.sstep.result {
	position: relative;
	margin: 0;
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: var(--elmtBG);
}
li.sstep.result .infoblock {
	margin: 0;
}
.screen > .infoblock,
.screen > .block,
.screen > div:not(:first-child),
.default > .infoblock,
.default > .block,
.default > div:not(:first-child),
.simple > .infoblock,
.simple > .block,
.simple > div:not(:first-child),
.result > .infoblock,
.result > .block,
.result > div:not(:first-child),
.prereq > .infoblock,
.prereq > .block,
.prereq > div:not(:first-child) {
	margin-inline-start: 0.8em;

	@media (max-width: 900px){
		margin-inline-start: 0;
	}
}
li.result::before{
	display: none;
}
.stepTitle {
	align-items: baseline;
	gap: 0.3em;
	font-size:1em;
	margin-block: 0;
}

li.step .stepTitle::before {
	content: counter(li, decimal) "";
	counter-increment: li;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 30px;
	padding-inline: 0.2em;
	margin-inline-end: 0.3em;
	background-color: var(--accentColor);
	color: var(--accentDarkFG);
	border: 1px solid var(--borderColor);
}

li.stepList .infoblock{
	padding-inline-start: 0;
}
.screenStep_ti .blockAnchor{
	position: absolute;
	right: 16px;
	top: 19px;
}

div.extras {
	padding: 10px;
	border-inline-start: none;
	border-block-end: 3px solid var(--blockComplement);
	background-color: var(--blockComplementLight);
	border-radius: 6px;
	margin-block: 0.5em 1em;

	& a.extras_closed,
	& a.extras_open {
		color: var(--blockComplement);
		font-size: 1.1em;
		margin: 0;
		text-decoration: none;

		&:hover{
			color: color-mix(in oklab, var(--blockComplement), #fff 35%);

			&::before{
				background-color: color-mix(in oklab, var(--blockComplement), #fff 35%);
			}
		}
		&::before {
			display: inline-block;
			font-family: "fontello";
			font-size: 0.9em;
			color: var(--accentDarkFG);
			background-color: var(--blockComplement);
			text-align: center;
			width: 25px;
			height: 25px;
			line-height: 25px;
			padding: 3px;
			border-radius: var(--borderRadius);
			margin-inline-end: 0.3em;
		}
	}
	& .extras_co {
		padding-block-start: 0.3em;
	}
	& a.extras_closed::before {
		content: "\E800";
	}
	& a.extras_open::before {
		content: "\E801";
	}
}

nav.stepListAlt {
	background-color: var(--elmtBG);
	padding: 1rem;

	& ul {
		list-style: none;
		margin: 0;
		padding: 0;

		& a {
			color: var(--accentColor);
			text-decoration: none;
			position:relative;

			&:hover{
				text-decoration: underline;
			}
		}
	}
}

.overview{
	position:relative;
	border-inline-start: 2px solid var(--accentColor);
	margin-block: 0 1.5rem;
	margin-inline: 30px 0;

	&::before {
		content: "\e823";
		font-family: "fontello";
		background-color: var(--accentLightColor);
		text-align: center;
		color: var(--accentColor);
		line-height: 30px;
		position: absolute;
		left:-32px;
		top:0;
		height: 30px;
		width: 30px;
		border-inline-end:2px solid var(--accentColor);
	}
}

/** Content : procedure player ************************************************/
.slpOver{
	display:none;
}
.stepListPlayer {
	background-color: var(--accentLightColor);
	padding: 1em;
	margin-block-end: 1em;

	@media (max-width: 900px){
		padding: 0.5em;
	}
}
.stepList {
	& .desc.simple {
		position: relative;
		padding: 0.5em;

		@media (max-width: 1200px){
			&::before{
				background-color: var(--accentLightColor);
				border:0;
			}
		}
		@media (max-width: 900px){
			margin-inline-start:0;
			border: 1rem solid var(--accentLightColor);
		}
	}
	& .proc_ti::before{
		text-align: center;
		color: var(--accentColor);
		line-height: 30px;
		text-decoration: none;
		content: "\E818";
		font-family: "fontello";
		font-size: 1.1em;
		margin-inline-end: 0.4em;
	}
}
ol.steps {
	list-style: none;
	counter-reset:li;
	margin: 0;
	padding: 0.5em;
	background-color: var(--contentBG);
	border-radius: 5px;

	& li.step {
		border-inline-start: 1px solid var(--borderColor);
		margin: 0;
		padding-block-end: 1em;

		&.result {
			padding-block: 0.5em 0;
			display: flex;
			flex-direction: column;

			.slpOpAct & {
				border: 0;
				padding: 0;
			}
			& .result_ti {
				margin: 0;
				font-size: 1em;
				height: 30px;
				padding-inline: 0.2em;
				border: 1px solid var(--borderColor);
				background-color: var(--elmtBG);
				display: flex;
				align-items: center;
				justify-content: center;
				align-self: baseline;
			}
		}
		.slpOpAct & {
			border: 0;
			padding: 0;
		}
	}
}
.slpOpAct .stepListPlayer {
	background-color: var(--accentLightColor);
}

span.slpNavBtns {
	flex: 100%;
	order: 3;
	display:flex;
	align-items:center;
	justify-content: center;
	background-color: var(--accentLightColor);
	padding-block: 0.5em 0;
	padding-inline: 0.5em;

	&.disabled_true {
		display:none;
	}
}

a.slpBtnPrv,
a.slpBtnNxt {
	padding: 0.4em;
	margin-block: 0;
	margin-inline: 0.5em;
	background-color: var(--accentColor);
	color: var(--accentDarkFG);
	text-decoration: none;
	text-align: center;
	border-radius: var(--borderRadius);

	&:hover {
		background-color: color-mix(in oklab, var(--accentColor), #000 35%);
	}
	& span {
		position:absolute;
		left:-9999px;
	}
}
a.slpBtnPrv{
	order:1;

	&::before{
		font-family:"fontello";
		content:"\E81A";
	}
}
a.slpBtnNxt{
	order:3;

	&::before{
		font-family:"fontello";
		content:"\e817";
	}
}
span.slpCountTxt {
	order:2;
	margin-block: 0;
	margin-inline: 0.5rem;
}

/** Content : procedure screen ************************************************/
.stepScreenBox {
	display:flex;
	justify-content: center;
	background-color: var(--contentBG);
	align-items: center;

	@media (max-width: 900px){
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
	}
}
.stepScreenTitles {
	position:relative;
	flex: 1;
	background-color: var(--accentLightColor);
	padding-block: 0.3rem;
	padding-inline: 0.3rem;
	display: flex;
	flex-direction: column;
	align-self: stretch;

	@media (max-width: 900px){
		flex-direction: row;
		padding: 0.4rem;
	}
}
.stepScreenList{
	order: 1;
	overflow-y: auto;
	flex: 1;
	@media (max-width: 900px){
		max-height: 15vh;
		& ol.screenSteps {
			max-height:unset;
		}
	}
}
.stepScreenFlex{
	flex: 2;
	padding: 0.5em;
	align-self: stretch;
}
.showSteps_true .stepScreenFlex {
	background-color: #0006;
}
	.stepScreenImage {
	flex: 0 0 auto;
	counter-reset:steps;
	background-color: var(--contentBG);
}
.stepScreenImage,
.stepScreenTitles {
	@media (max-width: 900px){
		max-width: -webkit-fill-available;
	}
}
.stepScreenTitles,
.stepScreenBox { /* Must be set on all parent flex items of an overflowing item */
	min-height:0;
}

ol.screenSteps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: steps;
	max-height: 0;

	& li.screenStep {
		margin-block: 0.2em;
		display: block;

		& a {
			text-decoration: none;
			color: var(--contentFG);
			padding-block: 0.2em;
			padding-inline: 0.3em;
			display: block;
			background-color: var(--contentBG);
			border: 1px solid var(--borderColor);
			border-radius: var(--borderRadius);

			&:hover {
				background-color: color-mix(in oklab, var(--contentBG), #000 5%);
			}
			&::before {
				content: counter(steps, decimal);
				counter-increment: steps;
				border-radius: 50em;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 25px;
				height: 25px;
				padding-inline: 0.2em;
				color: var(--accentColor);
				border: 1px solid var(--borderColor);
				margin-inline-end: 0.3em;
			}
		}
		&.active_true a {
			border-color: var(--accentColor);
			border-inline-start: 5px solid var(--accentColor);

			&::before {
				background-color: var(--accentColor);
				color: #fff;
				border-color: var(--accentColor);
			}
			& > span > * {
				background-color: transparent;
			}
		}
	}
}
span.stepArea {
	outline: 2px dotted var(--accentColor);
	border-radius: 5px;
}
.stepScreenImage a.screenStepLnk::before {
	background-color: #ffffff;
	border-radius: 15px;
	color: var(--accentColor);
	content: counter(steps, decimal) " ";
	counter-increment: steps;
	font-size: 0.8em;
	height: 25px;
	left: -10px;
	top:-10px;
	line-height: 25px;
	font-weight: bold;
	position: absolute;
	text-align: center;
	width: 25px;
	z-index:9;
	box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
}
a.screenStepLnk.active_true::before {
	background-color: var(--accentColor);
	color: #ffffff;
}

.stepScreenTools {
	display:flex;
	gap: 0.5em;
	align-items:center;
	justify-content:center;
	padding: 0.8rem;

	@media (max-width: 900px){
		flex-direction: column;
	}
}

.stepScreen.showSteps_false .stepScreenImage .screenStepLnk.active_true .stepArea{
	outline: 2px dotted var(--accentColor);
}
.stepScreen.showSteps_false a.screenStepLnk.active_true:before{
	color: var(--accentColor)!important;
	background-color: #ffffff!important;
}

a.sspBtnPrv,
a.sspBtnNxt {
	margin: 0;
	background-color: var(--accentColor);
	color: #ffffff;
	text-decoration: none;
	text-align:center;
	border-radius: var(--borderRadius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	width: 35px;
	height: 35px;

	& span {
		position: absolute;
		left: -9999px;
	}
	&.disabled_true {
		opacity: 0.4;
		pointer-events: none;
	}
	&.disabled_false:hover {
		background-color: color-mix(in oklab, var(--accentColor), #000 15%);
	}
}
a.sspBtnPrv::before{
	font-family: "fontello";
	content: "\E81A";
	@media (max-width: 900px){
		transform: rotate(90deg);
	}

}
a.sspBtnNxt::after {
	font-family: "fontello";
	content: "\E817";
	@media (max-width: 900px){
		transform: rotate(90deg);
	}
}

.stepScreen.showSteps_false {
	& a.sspBtnPrv {
		display: none;
	}
	& a.sspBtnNxt::after {
		font-family: "fontello";
		content: "\F00F";
		@media (max-width: 900px){
			transform: rotate(0deg);
		}
	}
	& ol.steps{
		display: none;
	}
}
.stepScreen.active_true ol.steps > li.step.active_false,
.stepScreen.showSteps_false ol.steps > li.step {
	visibility: hidden;
	position: fixed;
	left:-10000px;
	top:-10000px;
}
.stepScreen.active_true .stepScreenMask {
	background-color: #0006;
}
.stepScreenImage .screenStepLnk.active_false .stepArea{
	background: none !important;
}
.stepScreenImage .screenStepLnk.active_true .stepArea {
	outline: 2px solid var(--accentColor);
}

/** Content : screen **********************************************************/
.screen.block {
	position: relative;

	&::before {
		background:none;
	}
	& .screen_ti {
		margin-inline-end:65px;
	}
}
.screenFra .caption {
	margin-block: 0;
	margin-inline: auto;
	background-color: var(--contentBG);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.screenFra.scrFraAct .caption {
	border-block-end: 5px solid var(--elmtBG);
}
.screenImg {
	counter-reset: zones;
	border-spacing: 0;
	background-color: var(--contentBG);
	margin-inline: auto;
	height: fit-content;
}
.screenImgFlex {
	flex: 1 auto;
	padding: 0.8em;
}
.screenImgFra {
	display: flex;

	@media (max-width: 900px){
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
	}
}
a.screenZoneLnk {
	text-decoration: none;

	&::before {
		position: absolute;
		top: -0.7em;
		left: -0.7em;
		width: 20px;
		height: 20px;
		font-size: 0.9em;
	}
	&.scrLnkAct::before {
		color: var(--accentDarkFG);
		background-color: var(--accentColor);
	}
	&:hover {
		&::before {
			background-color: color-mix(in oklab, var(--contentBG), transparent 50%);
		}
		&.scrLnkAct::before {
			background-color: color-mix(in oklab, var(--accentColor), transparent 50%);
		}
	}
}
.screenZone_pre {
	margin-inline: 1em;
	width: fit-content;

	@media (max-width: 900px){
		margin: 0;
	}
}
span.zoneArea {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	border-radius: 3px;
	outline: 2px dotted var(--accentColor);

	.scrFraAct & {
		outline: 2px dotted var(--accentLightColor);
	}
	a.screenZoneLnk:hover & {
		background-color: var(--accentColor);
		opacity: 0.4;
		outline: 2px dotted var(--accentColor);
	}
}

.screenTitles {
	text-align: left;
	box-sizing: border-box;
	background-color: var(--accentLightColor);
	overflow-y: auto;
	border-spacing: 0;

	& a {
		text-decoration: none;
		color: var(--contentFG);
		width: -moz-available;
		width: -webkit-fill-available;
		padding-block: 0.4em;
		padding-inline: 0.3em;
		display: block;
		background-color: var(--contentBG);
		border: 1px solid var(--borderColor);
		border-radius: var(--borderRadius);

		&::before {
			min-width: 1.5em;
			height: 1.5em;
		}
		@media (max-width: 900px){
			padding-block: 0.3rem;
			padding-inline: 0.3rem;
		}
	}
	& :not(.scrTiAct) a:hover {
		background-color: color-mix(in oklab, var(--contentBG), #000 5%);
	}
	& .scrTiAct a {
		border-color: var(--accentColor);

		&::before {
			background-color: var(--accentColor);
			color: #fff;
			border-color: var(--accentColor);
		}
	}
	& ol {
		counter-reset:zones;
		list-style: none;
		margin: 0.5em;
		padding: 0;
		max-height: 0;
	}
	& li {
		margin-block: 0.2em;
		display: block;
	}
	@media (max-width: 900px){
		border-block-start: 5px solid var(--elmtBG);
		padding: 0.4rem;
		max-height: 15vh;
		& ol {
			max-height:unset;
		}
	}
}

ol.screenZones {
	list-style: none;
	margin: 0;
	padding-inline: 1rem;
	background-color: var(--contentBG);
	counter-reset:zones;

    .scrFraInt > & > li.screenZone.scrZneHide,
    .scrFraAct > & > li.screenZone.scrZneHide {
    	visibility: hidden;
    	position: absolute;
    	left: -20000px;
    	top: -20000px;
    }
	& li.screenZone {
		margin-block: 1em;

		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}
.scrFraAct ol.screenZones {
	& li.screenZone {
		margin-block: 0;
		padding-block-start: 0.5em;
	}
}
.screenZone_ti {
	font-size: 1.2em;
	margin-block: 0 10px;
	margin-inline: 0;
	font-family: var(--titleStyle);

	.screenZone &::before {
		min-width: 30px;
		height: 35px;
		padding-inline: 0.2em;
		margin-inline-end: 5px;
		background-color: var(--accentColor);
		color: var(--accentDarkFG);
	}
	.scImgZmTi & {
		font-size: 1em;
		padding-inline-start: 0;
		margin-block: 5px 0;
		margin-inline: 0;
	}
}

a.screenZoneLnk::before,
.screenTitles a::before,
.screenZone .screenZone_ti::before {
	content: counter(zones, decimal) " ";
	counter-increment:zones;
	border-radius: 1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accentColor);
	background-color: var(--contentBG);
	border: 1px solid var(--borderColor);
	z-index: 1;
	font-family: var(--fontStyle);
}
.screenTitles a::before,
.screenZone .screenZone_ti::before {
	border-radius: 50em;
}

.screenZone_tall {
	& .screenZone_co {
		display: flex;

		@media (max-width: 900px){
			flex-direction: column;
			align-items: flex-start;
		}
	}
	& .screenZone_desc {
		flex: 1;

		@media (max-width: 900px){
			padding: 0!important;
			margin-block: 0.5rem!important;
			margin-inline: 0!important;
		}
	}
}
.scrFraAct {
	& .screenZone_end {
		display:none;

		& a {
			color:silver;
			font-size: 0.8em;
			font-style: italic;
			text-decoration: none;
		}
	}
	& .screenImgFlex{
		background-color: #0006;
	}
	& .screenMask {
		background-color: #0006;
	}
	& .scrTiAct > * {
		background-color: transparent;
	}
}

.scrZneImg {
	outline: 2px solid var(--accentColor);
	border-radius: 3px;
}
.scrFra {
	position: relative;
	background-color: var(--elmtBG);
	padding-block: 1rem;
	padding-inline: 1rem;
	border-radius: 5px;

	@media (max-width: 900px){
		padding: 0.5em;
	}
}
.scrTools {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;

	& a {
		padding-block: 0.4em;
		padding-inline: 0.3em;
		background-color: var(--contentBG);
		text-align: center;
		color: var(--accentColor);
		text-decoration: none;
		display: flex;
		justify-content: center;
		gap: 0.2em;
		flex: 1;
		border: 1px solid var(--borderColor);
		border-block-end: 3px solid var(--accentDarkColor);

		&[aria-selected="false"]:hover {
			background-color: color-mix(in oklab, var(--elmtBG), #000 15%);
		}
		&[aria-selected="true"] {
			color: #fff;
			background-color: var(--accentDarkColor);
			cursor: default;

			&:hover {
				cursor:default;
			}
		}
	}
}
a.scrBtnLst {
	order: 1;

	&::before {
		content: "\E818";
		font-family: "fontello";
	}
}
a.scrBtnAct {
	order: 2;

	&::before {
		content: "\E819";
		font-family: "fontello";
	}
}
.screenZone_end a{
	color: var(--accentDarkColor);
	font-style: italic;
	text-decoration: none;
}

/** Content : text ************************************************************/
table.txt_tb {
	border-spacing: 0;
	display: table;
	border-collapse: collapse;
	margin-block: 1rem;
	margin-inline: auto;
	color: var(--contentFG);
	background-color: var(--contentBG);
	font-size: .9em;
	border-inline: 1px solid var(--borderColor);

	& figure.caption {
		margin: 0;
	}
	& caption {
		text-align:left;
		color: var(--contentLightFG);
		margin-block: 0.5rem;
		margin-inline: 0;
	}
	& th, & td {
		padding: 0.3rem;
		border:1px solid var(--borderColor);

		@media (max-width: 580px){
			padding: 0.2rem;
		}
	}

	& .txt_colTi_tbcl {
		background-color: var(--elmtBG);
	}
	& .txt_rowTi_tbtr {
		background-color: var(--elmtBG);
	}
	& .txt_cellEmp_tbtd {
		background-color: var(--accentLightColor);
		color: var(--accentColor);
		text-align: left;
	}
	& .txt_cellCenter_tbtd p{
		text-align:center;
	}
	& .txt_cellRight_tbtd p{
		text-align:right;
	}

	& p {
		text-align: left;
		margin-block: 0 0.5em;

		&:last-child {
			margin-block: 0;
		}
	}
	& ul, & ol, & li{
		margin-block: 0.5em;
	}
	& th > div,
	& td > div {
		margin: .3rem 0
	}
	@media (max-width: 580px){
		width: max-content;
	}
}

table.layout_tb {
	border-collapse: collapse;
	border-spacing: 0;

	.proc & {
		background-color: var(--contentBG);

		& td {
			padding: 0.5em;
		}
	}
	& .txt_cellCenter_tbtd p{
		text-align:center;
	}
	& .txt_cellRight_tbtd p{
		text-align:right;
	}
	& th > div,
	& td > div {
		margin: .3rem 0
	}
}

ul.txt_sl,
ul.txt_il {
	list-style-type:disc;
}
.ico_tim img,
.txt_ico_tim img {
	vertical-align: middle;
}
.ico_tim img {
	padding-block: 0.5rem;
	padding-inline: 0.5rem;
	background-color: #fff;
}
.txt_textTab_is,
.txt_textButton_is,
.txt_textRadioButton_is,
.txt_textCheckBox_is,
.txt_input_is,
.txt_select_is,
.txt_keyboard_is,
.txt_menuPath_is,
.txt_filePath_is,
.txt_win_is {
	white-space: pre;
	padding-block: 1px;
	padding-inline: 3px;
	margin-inline: 0;
	font: inherit;
	border: 1px solid var(--borderColor);
	background-color: var(--elmtBG);
	border-radius: 5px;
}

div.text {
	overflow-x: auto;
	overflow-y: clip;
	border-spacing: 0;
	/* Specific .scCommentOn */
	.scCommentOn & {
		overflow: initial;
	}
}

code::before,
.txt_cmd_is::before {
	margin-inline-end: 0.3rem;
	font-size: 0.9em;
	font-family: "fontello";
}
.txt_textCheckBox_is::before{
	content:"\E807";
}
.txt_keyboard_is::before {
	content:"\E802";
}
.txt_menuPath_is::before {
	content:"\E903";
}
.txt_filePath_is::before {
	content:"\E81E";
}
.txt_win_is::before {
	content:"\E820";
}
.txt_textTab_is::before {
	content:"\E81F";
}
.txt_textRadioButton_is::before{
	content:"\E803";
}
.txt_input_is::before {
	content:"\e906";
}
.txt_select_is::before {
	content:"\e905";
}

.txt_cmd_is {
	font-family: "Lucida Console", Courier, monospace;
	background: var(--contentLightBG);
	border-radius: 5px;
	padding-inline: 3px;
	font-size: 0.9em;
}

.txt_label_is {
	font-weight: bold;
	font-size: 110%;
}

.txt_url_ul,
.txt_web_ul,
.txt_coLnk_ul,
.txt_resLnk_ul{
	color: var(--accentColor);
	text-decoration:none;

	&:hover {
		opacity: 0.8;
		text-decoration:underline;
	}
}
.txt_url_ul::after,
.txt_web_ul::after,
.txt_coLnk_ul::after {
	font-family: "fontello";
	margin-inline-start: 0.3rem;
	font-size:0.9em;
}
.txt_url_ul::after,
.txt_web_ul::after{
	content:"\E81C";
}
.txt_coLnk_ul::after{
	content:"\E81B";
}

.txt_term_is{
	font-style:italic;
}

a.txt_def_ul,
a.txt_doc_ul{
	text-decoration: none;
	border-block-end:1px dotted;
	color: var(--accentColor);

	&:hover {
		opacity: 0.8;
	}
}

span.pdf_ico::before {
	font-family: "fontello";
	content: "\f1c1";
	margin-inline-end: 5px;
}

span.archive_ico::before {
	font-family: "fontello";
	content: "\E844";
	margin-inline-end: 5px;
}

.txt_auth_tl {
	font-weight: bold;
}
.txt_ed_tl {
	text-decoration: underline;
}
.txt_title_tl {
	font-style: italic;
}

/* Tooltip */
.tooltip {
	background-color: var(--contentBG);
	box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
	font-size:0.9em;
	margin-block: 1rem;
	margin-inline: 1rem;
	right: 15px;
	border-radius: 10px;

	& a {
		color: var(--accentColor);
	}
	& .text{
		margin: 0;
	}
	& p {
		text-align: left;
		margin-block: 0.1rem;
		margin-inline: 0;
		line-height: 1.2;
	}
	& a.tooltip_x {
		position: absolute;
		right: -10px;
		color: var(--contentBG);
		top: -10px;
		text-decoration: none;
		background-color: var(--accentColor);
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 50px;
		font-size: 1.3em;
		box-shadow: 0 3px 6px rgb(0 0 0 / 20%);

		&:hover {
			background-color: var(--accentDarkColor);
		}
		&::before {
			content:"\E80B";
			font-family:"fontello";
		}
		& span {
			position:absolute;
			left:-9999px;
		}
	}
}
.tooltip_ti {
	font-size:var(--fontSize);
	font-weight: 500;
	padding-block: 0.8rem;
	padding-inline: 0.8rem;
	background-color: var(--elmtBG);
}
.tooltip_co {
	padding-block: 0.8rem;
	padding-inline: 0.8rem;
}
.tooltip_fra {
	outline: none;
}
/* ============= tooltip info ============= */
.tooltip_a.info {
	color: var(--accentColor);
	text-decoration: none;
	margin-block: 0;
	margin-inline: 0.3rem;
	height: 1.3rem;
	display: inline-block;
	width: 1.3rem;
	line-height: 1.4rem;

	&:hover {
		opacity: 0.8;
	}
	&::after {
		content: "\E821";
		font-family: "fontello";
	}
	& span {
		display:none;
	}
}
/* ============= tooltip help ============= */
.tooltip_a.help {
	appearance: none;
	border-radius: var(--borderRadius);
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--accentColor);
	background-color: var(--contentBG);
	border: 1px solid var(--borderColor);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
		background-color: color-mix(in oklab, var(--contentBG), transparent 85%);
	}
	&::before {
		font-family: "fontello";
		content: "\E812";
		font-size: 1.1em;
	}
	&.tooltip_act {
		background-color: var(--accentColor);
		color: #fff;
	}
	& span {
		display: none;
	}
}

/** Content : scImageMgr ********************************************************/
a.imgZoom {
	display: inline-block;
	line-height: 0;
}
.screenSeq > .caption_co {
	margin-block: 0;
	margin-inline: auto;
	border: 3px solid var(--accentLightColor);
	background-color: var(--contentBG);
	display: flex;
	flex-direction: column;
	align-items: center;

	@media (max-width: 900px){
		border:10px solid var(--accentLightColor);
	}
}
.screenSeqFra {
	margin-inline: auto;
	background-color: #FFF;

	& .caption {
		margin: 0;
	}
}
.scImgZmOver {
	background-color: #000;
	opacity: 0.4;
	position:fixed;
	width:100%;
	height:100%;
}
.scImgZmCvs {
	position: fixed;
	z-index: 1000;
	width: inherit;
	height: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.scImgZmFra {
	background-color: var(--contentBG);
	padding-block: 10px;
	padding-inline: 10px;
	box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
	border-radius: 10px;
}
a.scImgZmBtnCls {
	position: absolute;
	right: -10px;
	color: var(--accentDarkFG);
	top: -10px;
	text-decoration: none;
	background-color: var(--accentColor);
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	font-size: 1.5em;
	border-radius: 5rem;
	z-index: 1001;

	&::before {
		content:"\E80B";
		font-family:"fontello";
	}
	& span {
		position:absolute;
		left:-9999px;
	}
}
.scImgZmTi {
	text-align: center;
	margin-block: 5px 0;
	margin-inline: 5px;
	color: var(--contentFG);
	font-style: italic;
}
.scImgZmMag {
	border-radius: 5px;
	box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
}

.scImgAnmCtrl {
	padding-block: 15px 5px;
	padding-inline: 15px;
	border-radius: 10px 10px 0 0;
	background-color: var(--accentLightColor);
	position:relative;
	margin-block: 0;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scImgAnmCtrLbl {
	display:none;
}
.scImgAnmCtrIdx {
	margin-inline-start: 0.5rem;
}
.scImgAnmCtrCnt {
	margin-inline-end: 0.5rem;
}
a.scImgAnmBtnPse,
a.scImgAnmBtnPly,
a.scImgAnmBtnNxt,
a.scImgAnmBtnPrv {
	font-family: "fontello";
	font-size: 1.3em;
	text-decoration: none;
	color: var(--accentColor);
	margin-block: 0;
	margin-inline: 0.5rem;
	padding: 0.7rem;
	border-radius: var(--borderRadius);
	background-color: var(--contentBG);

	&:hover {
		background-color: color-mix(in oklab, var(--contentBG), transparent 85%);
	}
	& span{
		position:absolute;
		left:-9999px;
	}
}
a.scImgAnmBtnPse::before {
	content:"\F00E";
}
a.scImgAnmBtnNxt::before {
	content:"\E817";
}
a.scImgAnmBtnPrv::before {
	content:"\E81A";
}
a.scImgAnmBtnPly::before {
	content:"\F00F";
}
.scImgSep{
	display:none;
}
/** STOP - scImageMgr ********************************************************/

/* === CodeMirror =========================================================== */
.CodeMirror-static {
	margin-inline-start: 40px;

	& pre {
		/* Reset some styles that the rest of the page might have set */
		border-radius: 0;
		border-width: 0;
		background: transparent;
		font-size: inherit;
		margin: 0;
		white-space: pre;
		word-wrap: normal;
		line-height: inherit;
		color: inherit;
		z-index: 2;
		position: relative;
		overflow: visible;
		border-inline-end: 30px solid transparent;
		width: fit-content;
		font-family: monospace;
		tab-size: 2;
		min-height: 1.5em;
	}
}

.CodeMirror-line {
	position: relative;
	min-height: 16px;
	padding-inline:5px;
}
.CodeMirror-linenumber {
	position: absolute;
	top: 0;
	width: 30px;
	padding-block: 0;
	padding-inline: 5px 3px;
	min-width: 20px;
	min-height: 16px;
	text-align: end;
	font-size: 0.8em;
	background-color: var(--contentLightBG);

	html[data-theme='dark'] & {
		color: #f7f7f7;
		background-color: #3b3b3b;
	}
	html[dir='ltr'] & {
		left: -40px;
	}
	html[dir='rtl'] & {
		right: -40px;
	}
	.scCodeLineNums-invisible & {
		display: none;
	}
}

.cm-header,
.cm-strong {
	font-weight: bold;
}
.cm-em {
	font-style: italic;
}
.cm-link {
	text-decoration: underline;
}
.cm-variable {
	html[data-theme='light'] & {
		color: #aa0069;
	}
	html[data-theme='dark'] & {
		color: #d70085;
	}
}
.cm-property {
	html[data-theme='light'] & {
		color: #50a;
	}
	html[data-theme='dark'] & {
		color: #a54efb;
	}
}
.cm-operator {
	html[data-theme='light'] & {
		color: var(--contentFG);
	}
	html[data-theme='dark'] & {
		color: var(--contentFG);
	}
}
.cm-keyword {
	html[data-theme='light'] & {
		color: #708;
	}
	html[data-theme='dark'] & {
		color: #df50f3;
	}
}
.cm-atom {
	html[data-theme='light'] & {
		color: #219;
	}
	html[data-theme='dark'] & {
		color: #8e7eff;
	}
}
.cm-number {
	html[data-theme='light'] & {
		color: #164;
	}
	html[data-theme='dark'] & {
		color: #164;
	}
}
.cm-def {
	html[data-theme='light'] & {
		color: #00f;
	}
	html[data-theme='dark'] & {
		color: #c082e3;
	}
}
.cm-variable-2 {
	html[data-theme='light'] & {
		color: #05a;
	}
	html[data-theme='dark'] & {
		color: #2290ff;
	}
}
.cm-variable-3 {
	html[data-theme='light'] & {
		color: #085;
	}
	html[data-theme='dark'] & {
		color: #00aa6a;
	}
}
.cm-type {
	html[data-theme='light'] & {
		color: #b0b;
	}
	html[data-theme='dark'] & {
		color: #b0b;
	}
}
.cm-comment {
	html[data-theme='light'] & {
		color: #757575;
	}
	html[data-theme='dark'] & {
		color: #8f8f8f;
	}
}
.cm-string {
	html[data-theme='light'] & {
		color: #de6d6d;

		&.cm-property {
			color: #095;
		}
	}
	html[data-theme='dark'] & {
		color: #de6d6d;

		&.cm-property {
			color: #095;
		}
	}
}
.cm-string-2 {
	html[data-theme='light'] & {
		color: #e28c8c;
	}
	html[data-theme='dark'] & {
		color: #e28c8c;
	}
}
.cm-qualifier {
	html[data-theme='light'] & {
		color: #555;
	}
	html[data-theme='dark'] & {
		color: #555;
	}
}
.cm-meta {
	html[data-theme='light'] & {
		color: #555;
	}
	html[data-theme='dark'] & {
		color: #555;
	}
}
.cm-error {
	html[data-theme='light'] & {
		color: #f00;
	}
	html[data-theme='dark'] & {
		color: #f00;
	}
}
.cm-builtin {
	html[data-theme='light'] & {
		color: #30a;
	}
	html[data-theme='dark'] & {
		color: #7c4aef;
	}
}
.cm-bracket {
	html[data-theme='light'] & {
		color: #997;
	}
	html[data-theme='dark'] & {
		color: #997;
	}
}
.cm-tag {
	html[data-theme='light'] & {
		color: #170;
	}
	html[data-theme='dark'] & {
		color: #2ead19;
	}
}
.cm-attribute {
	html[data-theme='light'] & {
		color: #00c;
	}
	html[data-theme='dark'] & {
		color: #7a7af4;
	}
}
.cm-header {
	html[data-theme='light'] & {
		color: blue;
	}
	html[data-theme='dark'] & {
		color: #0080ff;
	}
}
.cm-quote {
	html[data-theme='light'] & {
		color: #090;
	}
	html[data-theme='dark'] & {
		color: #090;
	}
}
.cm-hr {
	html[data-theme='light'] & {
		color: #999;
	}
	html[data-theme='dark'] & {
		color: #999;
	}
}
.cm-link {
	html[data-theme='light'] & {
		color: #00c;
	}
	html[data-theme='dark'] & {
		color: #00c;
	}
}
.cm-negative {
	html[data-theme='light'] & {
		color: #d44;
	}
	html[data-theme='dark'] & {
		color: #d44;
	}
}
.cm-positive {
	html[data-theme='light'] & {
		color: #292;
	}
	html[data-theme='dark'] & {
		color: #292;
	}
}
.cm-invalidchar {
	html[data-theme='light'] & {
		color: #f00;
	}
	html[data-theme='dark'] & {
		color: #f00;
	}
}
/* === STOP - CodeMirror ==================================================== */

/* === START - scCode ======================================================= */
.scCodeActive {
	border: 1px solid var(--borderColor);
	background-color: var(--contentBG);
}

.scCodeCtrl {
	border-block-end: 1px solid var(--borderColor);
	height:25px;
	padding-block: 0;
	padding-inline: 0 0.2em;
	display:flex;
	justify-content: flex-end;
	align-items: center;
	gap:3px;
	z-index: 2;
	position: relative;
	background-color: var(--contentLightBG);
}

.scCodeActive .CodeMirror-static {
	transition: margin-inline-start 200ms ease-in;
}

.scCodeLineNums-invisible .CodeMirror-linenumber {
	display: none;
}

.scCodeLineNums-invisible .CodeMirror-static {
	margin-inline-start: 2px;
}

.scCodeRaw-invisible .scCodeRaw,
.scCodeRaw-visible .scCodeCode {
	display: block;
}

.scCodeActive .scCodeRaw,
.scCodeActive .scCodeCode {
	transition: opacity 1s ease-out;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.scCodeRaw-invisible .scCodeCode,
.scCodeRaw-visible .scCodeRaw {
	opacity: 1;
	height: auto;
	overflow: auto;
}
@-moz-document url-prefix() {
	/*workaround bug gecko https://bugzilla.mozilla.org/show_bug.cgi?id=764076 */
	.scCodeRaw-invisible .scCodeCode,
	.scCodeRaw-visible .scCodeRaw {
		padding-block-end: 0.5em;
	}
	.CodeMirror-line:last-child > .CodeMirror-linenumber{
		padding-block-end: 0.6em;
	}
}

.scCodeCtrl a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	text-decoration:none;
}

.scCodeCtrl a:hover {
	opacity: 0.8;
}

.scCodeCtrl a span {
	display: none;
}

.scCodeCtrl a::before {
	color: var(--accentColor);
}

a.scCodeBtnLineNums::before,
a.scCodeBtnWrap::before,
a.scCodeBtnRaw::before,
a.scCodeBtnCopy::before {
	font-family: "fontello";
	font-size:16px;
}

.scCodeLineNums-visible .scCodeCtrl a.scCodeBtnLineNums::before {content: "\E849";}
.scCodeLineNums-invisible .scCodeCtrl a.scCodeBtnLineNums::before {content: "\E84A";}
.scCodeRaw-visible .scCodeCtrl a.scCodeBtnLineNums {visibility: hidden;}

.scCodeCtrl a.scCodeBtnWrap::before {content: "\E846";}
.scCodeWrap-on .scCodeCtrl a.scCodeBtnWrap::before {content: "\E848";}
.scCodeRaw-visible .scCodeCtrl a.scCodeBtnWrap {visibility: hidden;}

.scCodeCtrl a.scCodeBtnRaw::before {content: "\E845";}
.scCodeRaw-visible .scCodeCtrl a.scCodeBtnRaw::before {content: "\E84B";}
.scCodePlain .scCodeCtrl a.scCodeBtnRaw::before {content: "\E845";}
.scCodeRaw-visible.scCodePlain .scCodeCtrl a.scCodeBtnRaw::before {content: "\E84B";}

.scCodeCtrl a.scCodeBtnCopy::before {content: "\E847";}

.scCodeCopyMsg.scCodeHidden {
	display: block;
	height: 0;
}

.scCodeCopyMsg.scCodeVisible {
	display: block;
	height: 26px;
}

.scCodeCopyMsg {
	position: absolute;
	z-index: 1;
	top: 26px;
	left: 0;
	width: 100%;
	text-align: center;
	overflow: hidden;
	transition: height 300ms ease-out;
	color: var(--accentDarkFG);
}
html[data-theme='light'] .scCodeCopyMsg {background-color: #453aa2;}
html[data-theme='dark'] .scCodeCopyMsg {background-color: #02264c;}

/* === STOP - scCode ======================================================== */

/* === ConceptTree ========================================================== */
.treeRoot {
	& > .nodeRoot > .nodeLblFra {
		border-inline-start:0;

		& > .nodeLbl {
			border-width: 2px;
		}
	}
	& > .nodeChildren_hide > .nodeLblFra > .nodeLbl {
		border-block-end-width: 5px;
	}
	& > .nodeRoot > .nodeLblFra > .nodeLbl .nodeTi {
		font-size: 1.1em;
	}
}
.nodeChild {
	padding-inline-start:10px;
}
.nodeChild_pre {
	border-inline-start:2px solid color-mix(in oklab, var(--contentFG), transparent 30%);
}
.nodeLbl,
.nodeRef {
	padding-block: 0.8rem;
	padding-inline: 0.8rem;
	display:inline-block;
	margin-block-start:10px;
	background-color:var(--contentBG);
	max-width:500px;
	position: relative;
	border: 2px solid color-mix(in oklab, var(--contentFG), transparent 30%);
	border-radius: 10px;
}
.nodeLbl {
	.nodeChildren_1 & {
		min-width: 60px;
	}
	.nodeChildren_2 & {
		min-width: 120px;
	}
	.nodeChildren_3 & {
		min-width: 180px;
	}
	.nodeChildren_4 & {
		min-width: 240px;
	}
	.nodeChildren_5 & {
		min-width: 300px;
	}
	.nodeChildren_6 & {
		min-width: 360px;
	}
	.nodeChildren_7 & {
		min-width: 420px;
	}
	.nodeChildren_8 & {
		min-width: 480px;
	}
	.nodeChildren_9 & {
		min-width: 540px;
	}
	.nodeChild_co:target > div > div > & {
		box-shadow: 0 0 5px #444;
	}
	.nodeChildren_hide > div > & {
		border-width: 2px 2px 4px 2px;
		animation: all 0.5s;
	}
}
.nodeLblCo {
	padding-inline-start: 0;
	background-position: center left;
	background-repeat: no-repeat;
}
.nodeRef {
	border-color: var(--accentLightColor);
	box-shadow: inset 0 0 5px #AAA;
}
a.nodeRefLnk {
	color: var(--accentColor);
	text-decoration: underline;
}
.nodeDesc {
	font-size: 0.8em;
	color: var(--contentLightFG);
}
.nodeChildren {
	padding-inline-start:5px;

	.nodeChildren_hide > & {
		opacity:0;
		height:0 !important;
		transition-property : opacity,display;
		transition-duration : 0.1s;
	}
	.nodeChildren_show > & {
		opacity:1;
		height:auto;
		transition-property : opacity,display;
		transition-duration : 1.5s;
	}
}
.nodeLead {
	display:inline-block;
	height:23px;
	border-inline-start:2px solid color-mix(in oklab, var(--contentFG), transparent 30%);
	border-block-end:2px solid color-mix(in oklab, var(--contentFG), transparent 30%);
	vertical-align: top;
}
.nodeLeadSpacer {
	display:inline-block;
	width:12px;
	height:18px;
}
.nodeChild_co {
	display: flex;
}
.nodeRoot {
	display:inline-block;
}
.nodeLblFra,
.nodeRefFra {
	display:inline-block;
}
.nodeIco {
	display: inline-block;
	order: 1;
	vertical-align: middle;
}

.imgBase {
	max-width: 22px;
	height: auto;
}

.nodeTi {
	div& {
		color:var(--titleFG);
		text-decoration: none;
		font-family: var(--titleStyle);
		display: flex;
		column-gap: 0.5em;

		& .nodeTi {
			flex: 1;
			order: 1;
		}
	}
	a& {
		text-decoration: none;
		color:var(--accentColor);
		display: flex;
		column-gap: 0.5em;
		order: 1;

		&:hover {
			opacity: 0.8;
		}
		&::before {
			font-family: "fontello";
			font-size: 0.9em;
			order: 2;

			.nodeChildren_show & {content: "\E816";}
			.nodeChildren_hide & {content: "\E817";}
		}
		& span {
			flex: 1;
		}
	}
	& .blockAnchor {
		visibility: visible;
		margin: 0;
		border: 1px solid var(--borderColor);
		border-radius: 5px;
		width: 25px;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--contentBG);

		&:hover {
			background-color: color-mix(in oklab, var(--contentBG), #000 5%);
		}
	}
}

.nodeChildren_hide > .nodeChildren > .nodeChild {
	display:none;
}
a.nodeMoreDesc_a {
	order: 3;
	margin: 0;
	border: 1px solid var(--borderColor);
	border-radius: var(--borderRadius);
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--contentBG);
	color: var(--accentColor);
	text-decoration: none;

	&::before {
		content:"\E823";
		font-family:"fontello";
	}
	&:hover {
		background-color: color-mix(in oklab, var(--contentBG), #000 5%);
	}
	& span {
		display: none;
	}
}

/* Node types */
.nodeType_imp {
	border-color: var(--blockWarning);
	background-color: var(--contentBG);
	color: var(--blockWarning);

	& .nodeTi,
	& .nodeDesc {
		color: var(--blockWarning);
	}
}

.treeSearch_mach > .nodeLblFra > .nodeLbl {
	border: 2px solid var(--accentColor);

	& .nodeTi{
		color: var(--accentColor);
	}
}
.treeSearch_cur > .nodeLblFra > .nodeLbl {
	animation:glow 0.5s ease-in-out 0s 1 alternate;
	background-color:#F8E1EA;
}
@keyframes glow {
	0% {transform: scale(1);}
	50% {transform: scale(1.03);}
	100% {transform: scale(1);}
}

/* === TOOLBAR - ConceptTree ========================================================== */
.treeRoot {
	background-color: var(--elmtBG);
	padding-block: 1rem;
	padding-inline: 1rem;

	& .treeScroll {
		overflow-x: auto;
		overflow-y: clip;
		border-spacing:0;
	}
	&.treeHasToolbar .treeScroll {
		border: 2px solid var(--accentLightColor);
		padding-block: 0.5rem;
		padding-inline: 0.5rem;

		&.treeSearch_on .treeScroll {
			max-height:600px;
			overflow:auto;
		}
	}
	& .treeToolbar {
		display:flex;
		flex-direction:row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		z-index:2;
		position:relative;

		& form.treeSearchForm {
			flex: 2 1 auto;
			padding-inline-start: 1rem;
			display: flex;
			align-items: center;
		}
		& span.treeSearchLabel,
		& span.treeSearchResultLabel {
			display:inline-block;
			padding-block: 0;
			padding-inline: 5px;
			font-size:0.9em;
		}
		& input.treeSearchInput {
			border: 1px solid var(--borderColor);
			padding-block: 5px;
			padding-inline: 5px;
			height: 20px;
			font-size:0.9em;
		}
		& a {
			box-sizing: border-box;
			width: 35px;
			height: 35px;
			text-align:center;
			line-height:35px;
			background-color:var(--accentLightColor);
			color: var(--accentColor);
			text-decoration:none;
			font-size:1.1em;

			&:hover{
				opacity:0.7;
			}
			&.treeBtnOpenAll::before{
				font-family:"fontello";
				content:"\E800";
			}
			&.treeBtnCloseAll::before{
				font-family:"fontello";
				content:"\E801";
			}
			&.treeBtnPrv::before{
				font-family:"fontello";
				content:"\E81A";
			}
			&.treeBtnNxt::before{
				font-family:"fontello";
				content:"\E817";
			}
			&.treeBtnSearch::before{
				font-family:"fontello";
				content:"\F50D";
			}
			& span {
				position:absolute;
				left:-9999px;
			}
		}
		& span.treeSep{
			display:none;
		}
	}
	& .treeStatusbar {
		font-style: italic;
		text-align:right;
		padding-block: 3px;
		padding-inline: 3px;
		z-index:2;
		font-size:0.8em;
		position:relative;
		display:none;
		color: var(--contentFG);
	}
	&.treeSearch_on .treeStatusbar {
		display:block;
	}
}

.treeSearch_off .treeToolbar form.treeSearchForm {
	display:none;
}
.treeSearch_on .treeToolbar a.treeBtnSearch {
	border-block-end:2px solid var(--accentColor);
	opacity:1;
}
.treeSearch_noact  a.treeBtnNxt,
.treeSearch_noact  a.treeBtnPrv{
	display:none;
}
/* === STOP - ConceptTree ========================================================== */

/* === START - Search ========================================================== */
input.schInput {
	border: none;
	padding-block: 0;
	margin-inline-end: 0.2rem;
	color: var(--schFG);
	background-color: var(--schBG);
	height: 32px;
	width: 180px;
	font-size: 1em;
	cursor: auto;

	.oneColumn & {
		width: -moz-available;
		width: -webkit-fill-available;
		width: -fill-available;
	}
}
input::placeholder {
	color: #ccc;
}
.schLabel {
	position: absolute;
	left: -9999px;
}
input.schBtnLaunch {
	width: 1.2em;
	height: 1.2em;
	-webkit-mask-image: url(img/search/btnSearch.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: var(--schFG);
	color: transparent;
	border: none;
	padding: 0;
	cursor: pointer;

	&:hover {
		background-color: color-mix(in oklab, var(--schFG), transparent 85%);
	}
	& span {
		display: none;
	}
}

div.schNoRes {
	text-align: center;
	font-size: 1.2em;
	margin-block-start: 18px;
}

div.schPropose a:hover {
	text-decoration:none;
}

.schCmds {
	position: relative;

	.oneColumn & {
		flex: 1;
	}
}

.schPropose {
	position: absolute;
	width: 100%;
	box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
	background-color: var(--contentBG);
	z-index: 1000;
	border-radius: var(--borderRadius);
}
.schBtnPropose {
	display:block;
	color: var(--schFG);
	padding: 0.3em;
	text-decoration: none;

	&:hover,
	&:active,
	&:focus {
		background-color: var(--contentLightBG);
	}
}
.schProposeExceeded {
	display:block;
	color: var(--contentFG);
	padding-block: 2px;
	padding-inline: 3px;
}

div.schProp_no {
	display:none;
}

.searchResults {
	display: none;

	&.schDisplay_many {
		z-index:1;
	}
	.schDisplay_off & {
		display: none;
	}
	.schDisplay_on & {
		position: fixed;
		bottom: 83px;
		display: block;
		width: -moz-available;
		width: -webkit-fill-available;
		width: -fill-available;
		z-index: 99;
		padding-inline-start: var(--menuWidth);
	}
	.schDisplay_on.oneColumn &,
	.planClosed & {
		padding-inline-start: 0;
	}
	&.schDisplay_none {
		z-index:1;
	}
	& a.schParentBtn {
		color: var(--contentFG);
		font-style: italic;
		font-size:95%;
	}
	& li.mnu_sel_yes a.schParentBtn {
		font-weight: bold;
	}
	& a.schPgeBtn,
	& a.mnu_lnk {
		color: var(--accentColor);
		text-decoration: none;
		border-radius: .3rem;
		display: flex;
		padding-inline: 0.4em;
	}
	& a.mnu_lnk:hover{
		background-color: var(--contentLightBG);
	}
	& a.mnu_tgle_o,
	& a.mnu_tgle_c {
		display:inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: var(--accentColor);
		border: 1px solid var(--accentColor);
		width: 1em;
		height: 1em;
		border-radius: 4px;

		&:hover {
			background-color: var(--contentLightBG);
		}
		&::before {
			font-family: "fontello";
			font-size: 0.8em;
		}
		& span {
			display:none;
		}
	}
	& a.mnu_tgle_c::before {
		content: "\E800";
	}
	& a.mnu_tgle_o::before {
		content: "\E801";
	}
	/* Page Rank */
	& .mnu_sch,
	& .schPgeBtn > span:first-child {
		flex: 1 1 auto;
		display: flex;
	}

	& .mnu_coef > span {
		display: none;
	}
	& .coef_9 .mnu_coef,
	& .coef_8 .mnu_coef,
	& .coef_7 .mnu_coef {
		color: var(--schCoef-3);
	}
	& .coef_6 .mnu_coef,
	& .coef_5 .mnu_coef,
	& .coef_4 .mnu_coef {
		color: var(--schCoef-2);
	}
	& .coef_3 .mnu_coef,
	& .coef_2 .mnu_coef,
	& .coef_1 .mnu_coef,
	& .coef_0 .mnu_coef {
		color: var(--schCoef-1);
	}
	& .mnu_coef::before {
		font-family: "fontello";
		font-size: 1.5em;
		line-height: 1rem;
	}
	& .coef_9 .mnu_coef::before {
		content: "\E854";
	}
	& .coef_8 .mnu_coef::before,
	& .coef_7 .mnu_coef::before {
		content: "\E852";
	}
	& .coef_6 .mnu_coef::before,
	& .coef_5 .mnu_coef::before,
	& .coef_4 .mnu_coef::before {
		content: "\E853";
	}
	& .coef_3 .mnu_coef::before,
	& .coef_2 .mnu_coef::before {
		content: "\E855";
	}
	& .coef_1 .mnu_coef::before,
	& .coef_0 .mnu_coef::before {
		content: "\E82C";
	}
}

.schResFrame {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: var(--maxWidth);
	margin-inline: auto;
	background-color: var(--resultsBG);
	color: var(--schFG);
	border-inline: 1px solid var(--borderColor);
	border-block-start: 1px solid var(--borderColor);
	border-radius: 8px 8px 0 0;
	overflow: hidden;

	@media (max-width: 580px){
		.schDisplay_on & {
			flex-direction:column;
			justify-content: flex-start;
			gap:0.5rem;
		}
	}
}

.schResList {
	display: none;

	.schDisplayList_on & {
		display: block;
		flex: 100%;
	}
	@media (max-width: 580px){
		top:80px;
		left:10px;
		right:10px;
		bottom:10px;
	}
}
.schResListSrl {
	overflow-y: auto;
	border-radius: 8px 8px 0 0;
	background-color: var(--contentBG);
	padding: 5px;
	max-height: 50vh;

	& li.mnu_b {
		list-style-type:none;
		margin: 0;
		padding-inline-start: 0.4em;
	}
	& ul {
		margin: 0;
		list-style: none;

		&.mnu_root li {
			list-style-type:none;
			margin: 0;
		}
		&.schParentList {
			list-style-type: none;
		}
		&.schParentList_c {
			display:none;
		}
		&.schParentList_o {
			display:block;
		}
	}
	& > ul {
		padding: 0;
	}
}
.schBtnTgle,
.schBtnReset {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--accentColor);
	padding: 0.2em;
	border-radius: var(--borderRadius);
	border: 1px solid var(--accentColor);
	text-decoration: none;
	height: fit-content;
	margin: 0.5em;
	font-size: 0.9em;

	&:hover {
		color: color-mix(in oklab, var(--accentColor), #000 30%);
		border-color: color-mix(in oklab, var(--accentColor), #000 30%);
	}
}
.schBtnReset {
	padding-inline: 0.4em;

	&::before {
		font-family: "fontello";
		content: "\E829";
	}
	& span {
		position: absolute;
		left: -9999px;
	}
}
.schBtnTgle::before {
	font-family: 'fontello';
	content: "\E83B";

	.schDisplayList_on &::before {
		content: "\E816";
	}
}

.schHitBox,
.schResBox,
.schPageBox {
	font-size: 0.9em;
}
.schHitBox,
.schPageBox {
	flex: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 5px;
	border-block-start: 1px solid var(--borderColor);
	padding-block: 5px;
	padding-inline: 8px;
	text-align: center;
	height: fit-content;

	@media (max-width: 580px){
		align-items:center;
	}
}
.schHitBox {
	border-block-start: 1px solid var(--borderColor);

	.schDisplay_none & {
		display:none;
	}
}
.schHitLbl,
.schResLbl {
	order:2;
	flex: 1;
}
.schDisplay_none .schResBox {
	text-align: center;
	margin-block: 20px 6px;
	margin-inline: 200px;
}
.schBtnNxt,
.schBtnPrv,
.schBtnPrvHit,
.schBtnNxtHit{
	text-decoration:none;
	color:var(--accentColor);
	padding-block: 0;
	padding-inline: 0.2rem;

	&:hover{
		opacity:0.7;
	}
	& span {
		position:absolute;
		left:-9999px;
	}
	.schDisplay_none & {
		display:none;
	}
}
.schBtnAct_no,
.schBtnHitAct_no {
	opacity: 0.2;
}

.schBtnNxt,
.schBtnNxtHit {
	order:4;

	&::before {
		font-family:"fontello";
		content:"\e817";
	}
}
.schBtnPrv,
.schBtnPrvHit {
	order:1;

	&::before {
		font-family:"fontello";
		content:"\E81A";
	}
}

.schHitFrame {
	background: url(img/search/schHit.png) center right no-repeat;
	position:absolute;
	bottom:8px;
	right:40px;
	left:40px;
	height:20px;
	font-size:1.2em;
}

li.mnu_sel_yes .schPgeBtn,
div.mnu_sel_yes .mnu_lnk {
	background-color: var(--accentLightColor);
	color: var(--contentFG);
	cursor: default;

	&:hover {
		background-color: var(--accentLightColor);
	}
}

div.mnu_sch_no {
	display: flex;
	align-items: baseline;

	& a.mnu_lnk {
		cursor:default;
		order: 2;
		flex: 1;
		color: var(--contentLightFG)!important;

		&:hover{
			background-color: transparent;
		}
	}
}

li.schPgeBk {
	position:relative;
}
a.schParent_tgle_c,
a.schParent_tgle_o {
	position: absolute;
	margin-inline-start: -16px;
	top: 2px;
	width: 7px;
	height: 7px;
	display:inline-block;
	background-image: url(img/search/schMnuTgle.png);
	background-repeat: no-repeat;

	&:hover {
		text-decoration:none;
		color: #F17C0B;
	}
	& span {
		display:none;
	}
}
a.schParent_tgle_c {
	background-position: 0 -7px;
}
a.schParent_tgle_o {
	background-position: 0 -21px;
}

.schPgeBtn:hover,
.mnu_lnk:hover {
	color: var(--accentColor);
}
.schResCnt,
.schHitCnt {
	display:inline-block;
	text-align: center;
	order:3;
}
.schDisplay_none .schResCnt,
.schDisplay_one .schResCnt {
	display:none;
}
.schHit {
	background-color: var(--accentLightColor);
	padding-block: 0;
	padding-inline: 1px;
}
.schHit_current {
	background-color: #ffff73;
	padding-block: 0;
	padding-inline: 1px;
}
.schTerm {
	font-weight: bold;

	& em {
		font-weight: 500;
	}
}
.schDisplay_on #menu ul.mnu_root .mnu_sch_no > a:hover {
	text-decoration:none;
}
.schDisplay_on #menu ul.mnu_root .mnu_sch_no > a.mnu_lnk {
	color: #BBB;
	cursor: default;
}
.tplSchBox {
	/* Fixed IE7 */
	position:relative;
	z-index: 2;
}
/* === STOP - Search ========================================================== */

/* === START - PWA ====================== =========================*/
:root{
	--pwa-ok-color: var(--blockFocus);
	--pwa-nok-color: var(--blockImportant);
	--pwa-ukn-color: var(--blockDiscrete);
	--pwa-button-size: 1.5rem;
	--pwa-button-color: var(--accentColor);
	--pwa-button-color-hover: var(--accentColor);
	--pwa-button-bgcolor: transparent;
	--pwa-button-bgcolor-hover: transparent;
	--pwa-button-radius: 0.3rem;
	--pwa-button-border-color: var(--borderColor);
	--pwa-button-border-color-hover: var(--borderColor);
	--pwa-button-fontsize: 120%;
	--pwa-tooltip-color: var(--contentFG);
	--pwa-tooltip-bgcolor: var(--menuBG);
	--pwa-tooltip-border: var(--borderColor);
	--pwa-popup-color: var(--contentFG);
	--pwa-popup-bgcolor: var(--contentBG);
	--pwa-popup-border: var(--borderColor);
	--pwa-popup-button-color: var(--contentLightFG);
	--pwa-popup-button-bgcolor: var(--contentLightBG);
	--pwa-popup-button-inv-bgcolor: var(--accentColor);
	--pwa-popup-button-inv-color: var(--accentDarkFG);
}
li.pwaInstallBtnParent {
	order: 2;
}
li.pwaCacheBtnParent {
	order: 2;
	display: flex;
	gap: 0.3rem;
}
/* === STOP - PWA =============================================== */

/* === START - About ========================================================== */
.about {
	& .headCo_co {
		display:flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	& .infoBk {
		& table {
			border-spacing: 0;

			& tbody {
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
			}
		}
		& tr {
			display:flex;
			gap: 0.5rem;
			align-items:center;
		}
		& th {
			padding: 0;
		}
	}
	& p {
		margin: 0;
	}
	& .infoblock {
		display:flex;
		gap:0.5rem;

		& .infoblock_ti {
			font-size:1.1em;
			font-weight: bold;
		}
	}
}
/* === STOP - About ========================================================== */

/* === START - SUBWINDOW =================================================== */
/*--- CONTAINER --------------------------------------------------------------*/
.subWindow_over {
	position:fixed!important;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background: rgb(0 0 0 / 55%);
	opacity:0.6;
}
.subWindow_win {
	position:fixed !important;
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	max-width: fill-available;
	margin-block: 0;
	margin-inline: auto;
	top:3em;
	bottom:3em;
	left:3em;
	right:3em;
	display: flex;
	flex-flow: column;
	background-color: var(--contentBG);
	border-radius: 10px;
	box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
}
.subWindow_ti {
	flex: 0 0 1.5em;
	min-height: 30px;
	padding-inline-start:0.5em;
}
.subWindow_co {
	flex: 1 1 auto;
	position: relative;
	& > a.focusOnCloseBtn {
		position:absolute;
		left:-1000px;
		top:-1000px;
	}
}
.subWindow_fra {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius: 10px;
}
a.subWindow_x {
	width: 30px;
	height: 30px;
	color: var(--accentDarkFG);
	background-color: var(--accentColor);
	position: absolute;
	right: -15px;
	top: -15px;
	text-align: center;
	line-height: 30px;
	text-decoration: none;
	border-radius: 5em;
	box-shadow: 0 3px 6px rgb(0 0 0 / 15%);

	&:hover {
		background-color: var(--accentDarkColor);
	}
	&::before {
		font-family:"fontello";
		content:"\E82B";
	}
	& span {
		display:none;
	}
}


/*--- subWin --------------------------------------------------*/
.tplSubWin {
	#page&::before {
		content:none;
	}
	& #header{
		padding: 0;
		position: static;
		height: auto;
		border: none;
		min-height: auto;
	}
	& #menu .outRoot a::before {
		font-family: "fontello";
		content: "\e816";
	}
	& #main {
		margin: 0;

		& main{
			justify-content:flex-start;
		}
	}
}
/* === STOP - SUBWINDOW =================================================== */

/* === START - THEME PREFERENCES ============================================= */
li.themeBtnParent {
	margin: 0;
	order: 1;
}

button.themeBtn {
	appearance: none;
	cursor: pointer;
	border: 0;
	position: relative;
	height: 25px;
	line-height: 25px;
	padding: 0;
	margin: 0;
	border-radius: 50em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background-color: var(--accentColor);
	color: var(--accentDarkFG);
	opacity: 1;
	text-decoration: none;
	z-index: 20;

	& span {
		display: none;
	}
	&:hover {
		opacity: 0.7;
	}
	@media (prefers-color-scheme: dark) {
		padding-inline: 5px 6px;

		html[data-theme='dark'] & {
			padding-inline: 5px 6px;
		}
		html[data-theme='light'] & {
			padding-inline: 6px 5px;
		}
		&::after,
		html[data-theme='dark'] &::after {
			font-family: "fontello";
			font-size: 1.2em;
			content: "\E842";
			width: auto;
			height: auto;
			border-radius: 0;
			background-color: transparent;
		}
		html[data-theme='light'] &::before {
			font-family: "fontello";
			font-size: 1.2em;
			content: "\E843";
			width: auto;
			height: auto;
			border-radius: 0;
			background-color: transparent;
		}
		&::before,
		html[data-theme='dark'] &::before,
		html[data-theme='light'] &::after {
			content: "";
			display: inline-block;
			border-radius: 50em;
			width: 15px;
			height: 15px;
			background-color: var(--accentDarkFG);
		}
	}
	@media (prefers-color-scheme: light) {
		padding-inline: 6px 5px;

		html[data-theme='light'] & {
			padding-inline: 6px 5px;
		}
		html[data-theme='dark'] & {
			padding-inline: 5px 6px;
		}
		&::before,
		html[data-theme='light'] &::before {
			font-family: "fontello";
			font-size: 1.2em;
			content: "\E842";
			width: auto;
			height: auto;
			border-radius: 0;
			background-color: transparent;
		}
		html[data-theme='dark'] &::after {
			font-family: "fontello";
			font-size: 1.2em;
			content: "\E843";
			width: auto;
			height: auto;
			border-radius: 0;
			background-color: transparent;
		}
		&::after,
		html[data-theme='light'] &::after,
		html[data-theme='dark'] &::before {
			content: "";
			display: inline-block;
			border-radius: 50em;
			width: 15px;
			height: 15px;
			background-color: var(--accentDarkFG);
		}
	}
}
/* === END - THEME PREFERENCES ============================================= */

/* === START - RESPONSIVE =================================================== */
@media (max-width: 580px){
	a.block_btn_closed::before, a.block_btn_open::before {
		left: 0.7rem;
	}
	div.tree.block .block_ti, div.screen.block .block_ti{
		margin-inline-start: 0;
	}
	.txt_textTab_is, .txt_textButton_is, .txt_textRadioButton_is, .txt_textCheckBox_is, .txt_input_is, .txt_select_is, .txt_keyboard_is, .txt_menuPath_is, .txt_filePath_is, .txt_win_is {
		white-space: normal;
		padding: 0;
	}
	.secOutFra {
		display: none;
	}
	.screenSeqFra {
		margin: 0;
	}
	.scImgAnmCtrl {
		padding-block: 5px;
		padding-inline: 5px;
		border-radius: 0;
		width: 100%;
	}
	a.scImgAnmBtnPse, a.scImgAnmBtnPly, a.scImgAnmBtnNxt, a.scImgAnmBtnPrv {
		margin-block: 0.2rem;
		margin-inline: 0.2rem;
	}
	.treeToolbar{
		row-gap:10px;
	}
	.treeToolbar form.treeSearchForm{
		padding: 0;
		flex-wrap:wrap;
	}
	.treeToolbar span.treeSearchLabel{
		flex:100%;
	}
	.stepListPlayer{
		border: 0.5rem solid var(--accentLightColor);
	}
	.slpOpAct .stepListPlayer{
		padding-block: 3.5rem 0.5rem;
		padding-inline: 0.5rem;
	}
	a.scImgZmBtnCls{
		right: 5px;
		top: -15px;
	}
	.stepScreenTitles{
		padding: 0;
	}
	.scCommentToolBar .activationCommentDiv{
		right:55px;
		left:auto;
	}
}
/* === STOP - RESPONSIVE ==================================================== */


/*	Preview	*/
.scCommentToolBar .activationCommentDiv {
	top: 9px;
}
#header:has(.scCommentToolBar) .titleLayer {
	padding-inline-start: 65px;
}