/** Generic styles ************************************************************/
html{
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

p{
	margin: 0.5rem 0;
	line-height:1.4;
}
h1{font-size:1.8em;  margin: 0 0 1rem;}
h2{font-size:1.5em;  margin: 0 0 0.8rem;}
h3{font-size:1.3em;  margin: 0 0 0.6rem;}
h4{font-size:1.15em;  margin: 0 0 0.4rem;}
h5{font-size:1.1em; margin: 0 0 0.3rem;}
h6{font-size:1.05em;  margin: 0 0 0.2rem;}

sup,sub{
	font-size: smaller;
}

/* === TRANSITIONS ========================================================== */

/* Scrollbar settings */
::-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 */

/** Content *************************************************************/
#page{
	padding: 2rem 0;
}
#content{
	padding: 1rem 20px;
	box-sizing: border-box;
    max-width: var(--maxWidth);
	margin: 0 auto;
}
.abstract{
	padding-left:10px;
	margin-right:10px;
}

/**Menus : nested ********************************************************************/
div.nestedTopics {
	background-color: var(--accentLightColor);
    padding: 1rem;
    border-radius: 8px;
}
.nestedTopics_ti {
	color: var(--contentFG);
    font-weight: bold;
    padding: 0;
}
ul.nestedTopics {
    padding: 0 0 0 1rem;
    list-style: none;
}
ul.nestedTopics a {
	color: var(--accentColor);
	text-decoration: none;
	display: block;
	padding: 0.5rem;
}
ul.nestedTopics a:hover {
    background-color: var(--hoverBG);
    border-radius: 5px;
}
ul.nestedTopics li {
	margin: 0;
}

/** Home title frame **********************************************************/
.tplHomeTiFra > table{
	border-spacing:0;
	width: 100%;
	max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: -fill-available;
    margin-block-end: 1em;
}
.tplHomeTiFra > table tbody{
    display:flex;
    flex-direction:column;
}
.tplHomeTiFra > table tr{
    display: grid;
    grid-template-columns: auto 1fr;
    gap:1rem;
    align-items: center;
    vertical-align: top;
}
.tplHomeTiFra > table tbody tr:last-child{
    grid-template-columns: auto;
}
.tplHomeTiFra > table td.tplHomeLogo{
    max-width: 50px;
    padding-inline-end: 1em;
}
.tplHomeTiFra > table td.tplHomeLogo img{
    width: 100%;
    height: auto;
}
.tplHomeTiFra h1 {
    margin: 0;
}
.tplHomeTiFra > table td.tplHomeTi h2{
	font-weight:500;
	margin: 0;
}
.tplHomeTiFra > table td.tplHomeLongTi{
	font-size:1.2em;
	color:var(--contentLightFG);
}

/** Glossary ******************************************************************/
.glossary {
	margin-bottom:20px;
}
.keyOutline{
	margin-bottom: 1rem;
	position: sticky;
    top: 0;
    background-color: var(--contentBG);
    z-index: 10;
    padding: 1rem 0;
}
.keyCateg{
    font-size: 2rem;
}
.keyOutlineEntry a{
	background-color:var(--accentColor);
	color: #fff;
	text-decoration: none;
	display:inline-block;
    padding: 0.5rem 0.7rem;
    margin:.3rem;
    border-radius: 0.3rem;
}
.keyOutlineEntry a:hover{
	background-color:var(--accentDarkColor);
}
.glossary dl{
	margin-bottom:30px;
}
.glossary dt{
	font-weight: bold;
	font-size:1.2rem;
}
.glossary dd{
	margin-bottom:20px;
}
.glossary span.syn{
	display:block;
	color:var(--contentFG);
	font-size:0.95rem;
	margin-left:0;
}
.glossary span.syn:before {
	content: '= ';
}
.glossary a.idxCallers_closed,
.glossary a.idxCallers_open{
	color:var(--accentColor);
	text-decoration: none;
	padding:0.5rem 0;
}
.glossary a.idxCallers_closed:hover .idxCallers_ti,
.glossary a.idxCallers_open:hover .idxCallers_ti{
	text-decoration: none;
	color:var(--accentDarkColor);
}
.glossary a.idxCallers_closed::before, .glossary a.idxCallers_open::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: normal;
	text-align: center;
	font-size: 0.8em;
	line-height: 20px;
	margin-right: 0.5rem;
}
.glossary a.idxCallers_closed::before{
	content:"\E800";
}
.glossary a.idxCallers_open::before{
	content:"\E801";
}
.glossary a.idxCallers_closed:hover::before, .glossary a.idxCallers_open:hover::before{
    background-color: var(--accentDarkColor);
}
.glossary .idxCallers_co {
	padding: 0.2rem 0.5rem;
	margin-left: 0.5rem;
	border-left: 1px solid var(--accentColor);
}
.glossary .idxCallers_co ul{
	list-style: none;
	list-style-image:none;
	margin: 0;
	padding: 0;
}
.glossary .idxCallers_co a{
	color: var(--accentColor);
	text-decoration: none;
}
.glossary .idxCallers_co a:hover{
	color: var(--accentDarkColor);
}
.glossary .def{
	margin-right:10px;
}

/** Index Proc ******************************************************/
dd.idxFra{
	margin-top: 0.5rem;
	margin-bottom: 2rem;
}
.idxEntryCaller{
    margin:0.5rem 0;
}
.idxProcs dt {
    font-weight: bold;
    margin-bottom: 0.3rem;
}
.idxProcs .idxEntryCaller a{
	color:#676767;
	text-decoration:none;
}
.idxProcs .idxEntryCaller a:hover{
	color:#676767;
	text-decoration:underline;
}
.idxProcs .idxEntryCo{
	margin-bottom:0.5rem;
}
.idxEntryCallers_open,
.idxEntryCallers_closed{
	background-repeat: no-repeat;
	background-position: top left;
	padding-left:16px;
	min-height: 14px;
}
.idxEntryCallers_open{
	background-image: url(img/closeOptDetails.png);
}
.idxEntryCallers_closed{
	background-image: url(img/openOptDetails.png);
}
.idxEntryCallers_co {
	padding-left:16px;
}
.idxProcs .idxEntryCaller a.idxEntryCallerLnk  {
	color: var(--accentColor);
}
span.stackSep{
	display:none;
}
a.stackLnk::after {
    content: " / ";
}

/** Content : Basket **********************************************************/
.basket {
	margin-left: 10px;
	margin-right: 10px;
	border-top: 1px dashed gray;
}
.basket_itti{
	font-size: 1.1em;
}

/** Content : condensed blocks ************************************************/
div.condensedChildren{
    display:flex;
    flex-direction: column;
    gap:15px;
}
section.condensedChild{
	border-left: 0;
	border-bottom:0;
	position: relative;
	margin: 0;
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: var(--accentColorAlpha);
}
section.condensedChild > .condensable_ti{
	position:relative;
	font-size: 1.2rem;
	display: flex;
	margin-inline: 0;
	margin-block:0;
}
section.condensedChild > .condensable_ti > span{
	flex: 1 1 auto;
}
section.condensedChild > .condensable_ti > .blockAnchor{
	padding-block-start: 8px;
}

a.condensed_btn_open, a.condensed_btn_closed {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    text-decoration: none;
    color: var(--contentFG);
}
a.condensed_btn_open {
    margin-block-end: 0.5em;
}
a.condensed_btn_open::before, a.condensed_btn_closed::before {
    background-color: var(--accentColor);
    color: var(--accentDarkFG);
    font-family: "fontello";
    display: inline-block;
    position: relative;
    width: 25px;
    height: 25px;
    line-height: 25px;
    padding: 3px;
    text-align: center;
    font-size: 0.9em;
    border-radius: 3em;
}
a.condensed_btn_closed::before {
	content: "\E817";
}
a.condensed_btn_open::before {
	content: "\E816";
}
.faqItem a.condensed_btn_closed::before {
	content: "\E800";
}
.faqItem a.condensed_btn_open::before {
	content: "\E801";
}
a.condensed_btn_open:hover, a.condensed_btn_closed:hover {
    filter: brightness(0.8);
}
section.condensedChild > .condensable_co{
	margin-inline-start: 17px;
}

/** Content : Definitions *****************************************************/
i.syn:before{
	content: "≃ ";
	color: gray;
}

/** Content : local menu ******************************************************/
.secOutFra {
    position:fixed;
    top:0;
    right:10px;
	z-index: 99;
	float:right;
	display: inline-block;
	font-size: 0.9em;
    margin-left:1em;
}
.secOutTi a.secOut_cl {
	width: auto;	
}
.secOutFra a{
	color: var(--accentColor);
	display: block;
	padding: 0.5rem 0.8rem;
	text-decoration: none;
}
.secOutFra a:hover{
	color: var(--accentDarkColor);
}
.secOutFra a:active {
	color: var(--contentFG);
	cursor: default;
}

.secOutTi a{
	color: var(--contentFG);
	background-color: var(--contentLightBG);
	padding: 0.8rem;
	max-width: 250px;
	transition-duration: 0.2s;
}
.secOutTi a.secOut_cl{
    background-color: color-mix(in srgb ,var(--contentLightBG) 70%, transparent);
    width:auto;
}
.secOutTi a.secOut_cl span{
    display:none;
}
.secOutTi a:hover{
	background-color: var(--contentLightBG);
}
.secOutTi a::before {
	font-family: "fontello";
	content: "\E82A";
	margin-inline-end: 8px;
}
.secOutTi a::after{
	font-family: "fontello";
	float:right;
	margin-inline-start: 8px;
}
.secOutTi a.secOut_cl::after {content: "\E816";}
.secOutTi a.secOut_op::after {content: "\E822";}

.secOutFra > .secOutUi {
    background-color: var(--contentLightBG);
    max-width: 250px;
}
.secOutUi ul {
	list-style: none;
	list-style-image:none;
	margin: 0 0 0 15px;
	padding: 0;
}
.secOutUi ol {
	list-style: none;
	list-style-image:none;
	margin: 0;
	padding: 0;
	padding-bottom:0.5rem;
    max-height: 75vh;
    overflow: auto;
}
li.caption_lo.screenSeq_lo {
	margin: 0;
}
.part_lo {
	margin: 0;
}

/** Content : See also & sub section outline **********************************/
.linkSection,
.subSecUi{
	margin:1rem 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;
	list-style-image:none;
}
ul.links a,
ul.sw_outSubSec_navList a{
	color:var(--accentColor);
	text-decoration: none;
	display:block;
	padding-top:2px;
}
ul.links a:hover,
ul.sw_outSubSec_navList a:hover{
    color:var(--accentDarkColor);
}

/** Content : block layout ****************************************************/
.headBlock_co {
    position: relative;
}
.headCo_ti.titleOnly_ti{
	text-align: center;
	font-size: 250%;
}
.headCo_ti.intro_ti{
	font-size: 2.5em;
}
.start_ti{
	padding: 0 10px;
}
.part {
    margin-block: 2em;
    padding: 0;
    border-block-end: 1px dashed var(--accentColorAlpha);
    padding-block-end: 1em;
}
.part .part {
    margin-block: 0.5em;
    padding-left:0.5rem;
}
.part .part .part .part {
	border-left: none;
	padding-left:0.5rem;
}
section.concept, section.stepList,
div.tree.block, div.screen.block {
    margin-block: 1em;
    padding: 0;
    border-block-end: 1px dashed var(--accentColorAlpha);
    padding-block-end: 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 {
	font-size: 1.4em;
}

.basket{
	clear:both;
}

/** Content : block styles ****************************************************/
.block {
    margin-block-end: 1em;
    position: relative;
}
.block_co, .infoblock_co, .part_co, .headCo_co, .screenZone_co, .screenStep_co {
    margin-block-end: 1em;
    padding-inline-start: 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.infoblock_co {
    padding-inline-start: 0;
    margin: 0;
}
.infoblock_ti + .infoblock_co {
    padding-inline-start: 0.8em;
}
.scEditable > .block_co{
    margin:0;
}
i.blockType{
	display:none;
	float: right;
}
.block_no_ti i.blockType{
	display:inline;
	float: none;
	font-style: normal;
}
.block_no_ti.cbkClosed > .block_ti i.blockType{
	display:inherit;
}
.block_no_ti.screen > .block_ti > span.block_ti_co,
.block_no_ti.stepList > .block_ti > span.block_ti_co,
.block_no_ti.cbkClosed > .block_ti > span.block_ti_co{
	position: inherit;
}

.warning.block,
.advice.block,
.tip.block,
.example.block,
.note.block,
.legal.block,
.complement.block {
    padding-inline-start: 10px;
    padding-block-start: 5px;
    min-height: 16px;
    border-inline-start: 3px solid var(--block-color);
}
.complement.block {
    padding-block: 5px;
    padding-inline: 10px;
    border-inline-start: none;
    border-block-end: 3px solid var(--block-color);
    border-radius: 6px;
}
.warning_ti,
.advice_ti,
.tip_ti,
.example_ti,
.note_ti,
.legal_ti,
.complement_ti {
	color:var(--block-color);
    font-size:1em;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.infoblock_ti {
    font-size: 1.2em;
}
.complement_ti,
.complement_ti .block_ti_co {
    max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: -fill-available;
    width: 100%;
}
.warning_ti::before,
.advice_ti::before,
.tip_ti::before,
.example_ti::before,
.note_ti::before,
.legal_ti::before,
.complement_ti::before,
a.block_btn_closed::before,
a.block_btn_open::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;
}
a.block_btn_closed::before,
a.block_btn_open::before {
    border-radius: 5px;
}

/* --- Warning --- */
.warning {
	--block-color: var(--blockWarning);
	background-color: var(--blockWarningLight);
}
.warning_ti::before {
	content: "\E80D";
}

/* --- Advice --- */
.advice {
	--block-color: var(--blockAdvice);
}
.advice_ti::before {
	content: "\E808";
}

/* --- Tip --- */
.tip {
	--block-color: var(--blockTip);
}
.tip_ti::before {
	content: "\E810";
}

/* --- Example --- */
.example {
	--block-color: var(--blockExample);
}
.example_ti::before {
	content: "\E823";
}

/* --- Note --- */
.note {
	--block-color: var(--blockNote);
}
.note_ti::before {
	content: "\E80E";
}

/* --- Legal --- */
.legal {
	--block-color: var(--blockLegal);
}
.legal_ti::before {
	content: "\E80F";
}

/* --- Complement --- */
.complement {
    --block-color: var(--blockComplement);
	background-color: var(--blockComplementLight);
}
.complement_ti::before {
	content: none;
}
.complement 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;
    padding: 0.6rem 0;
}
.complement_ti a.block_btn_closed,
.complement_ti a.block_btn_open{
    display:flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
}
a.block_btn_closed::before{
	content: "\E800";
}
a.block_btn_open::before{
	content: "\E801";
}
a.block_btn_closed:hover,
a.block_btn_open:hover{
    color:var(--contentFG);
}
a.block_btn_closed:hover::before,
a.block_btn_open:hover::before{
    background-color:var(--contentFG);
}

/* --- Concept --- */
.concept.block::before{
	background:none;
}
.def_bk {
	padding: 0.5em 1em;
    background-color: var(--accentLightColor);
    border-left: 3px solid var(--accentColor);
    margin-block-end: 0.5em;
}

.concept_ti dfn{
	font-style: inherit;
}
.concept_co span.syn{
	display:block;
	color:var(--contentFG);
	font-size:0.95rem;
	margin-left:20px;
}
.concept_co span.syn:before {
	content: '= ';
}

.caption{
	text-align: center;
    margin-bottom: 0;
}
.caption_ti{
	font-size:1em;
	margin-top: 0.5rem;
}
.descBlock_closed,
.descBlock_open{
	color:var(--accentColor);
	text-decoration:none;
	background-image:url("img/block/open.png");
	background-repeat: no-repeat;
	background-position: 4px 2px;
	padding-left: 20px;
}
.descBlock_open{
	background-image:url("img/block/close.png");
}
.caption_ti .desc{
	font-style: normal;
	max-width:630px;
	margin: 0 auto;
	text-align: left;
}

/* --- Anchor --- */
.blockAnchor{
	visibility:hidden;
	text-decoration: none;
	color:var(--accentColor);
	font-size: 0.9em;
	margin-inline-start:10px;
	order: 3;
}
.blockAnchor::before{
	font-family:"fontello";
	content:"\2693";
}
.blockAnchor span{
	display:none;
}
*:hover>.blockAnchor,
.blockAnchor:focus {
	visibility:visible;
}
.isMobile_true .blockAnchor{
    visibility:hidden;
}

/** Content : procedures ******************************************************/
.stepListFra {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
.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-weight: 900;
	font-size: 110%;
	margin-block-end: 0.7em;
}
.result_ti {
	margin-block-end: 0;
}
a.slpBtnStp, a.slpBtnLst {
	font-size: 1.2em;
    padding: 8px 11px 6px 11px;
    background-color: var(--elmtBG);
    text-align: center;
    color: var(--accentColor);
    text-decoration: none;
    border-radius: 10px 10px 0 0;
}
.slpTools a.disabled_false:hover{
	background-color: var(--hoverBG);
}
.slpTools a.disabled_true{
	color: #fff;
	background-color: var(--accentColor);
	cursor: default;
}
.slpTools a.disabled_true:hover {
	cursor: default;
}
a.slpBtnStp::before {
	content: "\E900";
	font-family: "fontello";
	font-size:1.2em;
}
a.slpBtnLst::before {
	content: "\E818";
	font-family: "fontello";
	font-size: 1.2em;
}
a.slpBtnStp span, a.slpBtnLst span{
	position:absolute;
	left:-9999px;
}
.slpSep, .slpCountLbl{
	display:none;
}
ol.steps{
	display: flex;
	flex-direction: column;
	gap: 1em;
	list-style: none;
	list-style-image:none;
	counter-reset:li;
	padding: .7rem;
	margin: 0;
	background: var(--contentBG);
    border-radius: 0.5rem;
}
li.step{
	position: relative;
}
.stepScreen {
	background-color: var(--elmtBG);
	padding: 1rem;
	border-radius: 5px;
	margin: 0;
}

.stepScreen li.step{
	padding:1rem;
	background-color: var(--contentBG);
}
li.step:before {
	font-size: 1.1em;
	content: counter(li, decimal) "";
	counter-increment: li;
	position: absolute;
	top: 1.1rem;
    font-weight: bold;
    min-width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-right: 5px;
    border-radius: 50px;
    background-color: var(--accentColor);
    color: var(--accentDarkFG);
}
.stepListPlayer ol.steps li.step:before {
	top: 0;
}
.step > .detail, .step > .ssteps {
	padding-left: 2.5rem;
}
.screenStep_co {
    margin-block: 1em;
}
ol.ssteps{
	list-style: none;
	list-style-image:none;
	padding: 0;
	margin: 0;
}
li.sstep{
	padding-left: 20px;
}
li.result.step {
	margin-top: 1rem;
    padding: 1rem;
    background-color: var(--elmtBG);
    border-radius: 8px;
}
li.sstep.result{
	position: relative;
    margin: 0;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: var(--elmtBG);
}
li.result .infoblock_co {
    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;
}
li.result::before{
	display: none;
}
.stepTitle {
	padding-inline-start: 2.3em;
	margin-block-start: 0.2em;
	display:inline-block;
}
.stepTitle p{
    margin:0 0 10px 0;
}
li.stepList .infoblock{
	padding-left: 0;
}
.screenStep_ti .blockAnchor{
    position: absolute;
    right: 16px;
    top: 19px;
}
a.extras_closed,
a.extras_open{
	background-image:url("img/block/open.png");
	background-repeat: no-repeat;
	background-position: 4px 2px;
	padding-left: 20px;
	color:#676767;
	text-decoration: none;
}
a.extras_closed:hover,
a.extras_open:hover{
	text-decoration: underline;
}
a.extras_open{
	background-image:url("img/block/close.png");
}
.extras_co {
	padding-top: 1px;
	padding-left: 10px;
	margin-left: 9px;
	border-left: 1px solid #C0C0C0;
	border-radius: 0 0 0 5px;
}

nav.stepListAlt {
    background-color: var(--elmtBG);
    padding: 1rem;
}
nav.stepListAlt ul{
	list-style: none;
	list-style-image:none;
	margin: 0;
	padding: 0;
}
nav.stepListAlt ul a{
	color: var(--accentColor);
	text-decoration: none;
	position:relative;
}
nav.stepListAlt ul a:hover{
	text-decoration: underline;
}

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

.overview::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-right:2px solid var(--accentColor);
}

/** Content : procedure player ************************************************/
.slpOver{
	display:none;
}
.stepListPlayer, .stepList .desc.simple{
    padding: 1em;
    border: 1.5em solid var(--accentLightColor);
    margin-block-end: 1em;
}
.stepList .desc.simple{
	background-color: var(--contentBG);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-block-start: 1.3em;
}
.slpTools {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
    justify-content: center;
    border-bottom: 3px solid var(--accentColor);
    position: relative;
}
.stepList .desc.simple::before{
	height: 30px;
    width: 30px;
    padding: 2px;
    background-color: var(--accentLightColor);
    text-align: center;
    color: var(--accentColor);
    line-height: 30px;
    position: absolute;
    text-decoration: none;
    left: -1.2em;
    top: -1.2em;
    content: "\E818";
    font-family: "fontello";
    font-size: 1.1em;
}
ol.steps li.step{
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
}
ol.steps li.step:first-child{
	margin-top: 0;
}
ol.steps li.step:last-child{
	margin-bottom: 0;
}
.slpOpAct .stepListPlayer {
    padding-top: 3em;
    background-color: var(--accentLightColor);
}
.slpOpAct .stepListPlayer ol.steps li.step:before {
    background-color: var(--accentColor);
    color: var(--accentDarkFG);
}

span.slpNavBtns{
	display:flex;
	align-items:center;
	justify-content: center;
	padding: 0.5rem;
    position: absolute;
    bottom: -4.2rem;
}
span.slpNavBtns.disabled_true{
	display:none;
}

a.slpBtnPrv,
a.slpBtnNxt{
	padding: 0.8rem;
    margin: 0 0.5rem;
    color: var(--accentColor);
    background-color: #ffffff;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}
a.slpBtnPrv{
	order:1;
}
a.slpBtnPrv::before{
	font-family:"fontello";
	content:"\E81A";
}
a.slpBtnNxt{
	order:3;
}
a.slpBtnNxt::before{
	font-family:"fontello";
	content:"\e817";
}
a.slpBtnPrv:hover,
a.slpBtnNxt:hover {
	background-color: var(--hoverBG);
}
a.slpBtnPrv span,
a.slpBtnNxt span{
	position:absolute;
	left:-9999px;
}
span.slpCountTxt{
	order:2;
	margin:0 0.5rem;
}
/** Content : procedure screen ************************************************/
.stepScreenBox{
	display:flex;
	justify-content: center;
	align-items: start;
    align-content: flex-start;
    flex-wrap: wrap;
	background-color: var(--contentBG);
}
.stepScreenTitles{
	position:relative;
	flex: 1 1 auto;
	background-color: var(--accentLightColor);
	padding: .3rem;
    display: flex;
    flex-direction: column-reverse;
    max-width: 47%;
}
.screenImage{
    flex: 0 0 auto;
    counter-reset:steps;
    background-color: var(--contentBG);
    padding: 10px;
    max-width: 50%!important;
}
.stepScreenTitles,
.stepScreenBox { /* Must be set on all parent flex items of an overflowing item */
	min-height:0;
	/*overflow:hidden;*/
}

ol.screenSteps{
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: steps;
	overflow-y: auto;
}
li.screenStep{
	margin: 0;
	display: block;
}
li.screenStep a {
	padding: 0.9rem 1rem 1rem 2.6rem;
}
li.screenStep a:hover {
	background-color: var(--hoverBG)!important;
	border-radius: 5px;
}
li.screenStep.active_true a:hover{
	color: var(--accentColor);
}
li.screenStep:before {
	font-weight: bold;
	border-radius: 50px;
	content: counter(steps, decimal);
	counter-increment: steps;
	padding: 0.2rem;
	text-align: center;
	line-height: 1.3rem;
	min-width: 1.3rem;
	max-width: 1.3rem;
	min-height: 1.3rem;
	max-height: 1.3rem;
	color: var(--accentColor);
	background-color: #ffffff;
	position: absolute;
	margin: 0.5rem 0 0 0.5rem;
}
a.screenStepLnk{
	color: var(--accentColor);
	text-decoration: none;
}
a.screenStepLnk:hover {
	background-color: var(--accentColorAlpha);
}
a.screenStepLnk:hover > span.stepArea{
	background-color: var(--accentColorAlpha);
}
a.screenStepLnk.active_true:before {
	color: #fff!important;
	background-color: var(--accentColor)!important;
}
li.screenStep.active_true {
	background-color: var(--accentColor);
	border-radius: 5px;
}
li.screenStep.active_true a {
	color: #ffffff;
}
.stepScreenTitles a.screenStepLnk {
	display: block;
}
a.screenStepLnk span {
	line-height: 1.4rem;
}
span.stepArea{
	outline: 2px dotted var(--accentColor);
	border-radius: 5px;
}
.screenImage a.screenStepLnk {
    margin:10px;
}
.screenImage a.screenStepLnk:before {
	background-color: #ffffff;
	border-radius: 15px;
	color: var(--accentColor);
	content: counter(steps, decimal) " ";
	counter-increment: steps;
	font-size: 0.8rem;
	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%);
}

.stepScreenTools{
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 0.8rem;
}
.stepScreen.showSteps_false li.screenStep.active_true, .stepScreen.showSteps_false a.screenStepLnk{
	background-color: transparent;
	color: var(--accentColor);
}
.stepScreen.showSteps_false .screenImage .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{
	padding: 0.7rem;
	margin: 0 0.5rem;
	color: var(--accentColor);
	background-color: #ffffff;
	text-decoration: none;
	text-align:center;
	border-radius: 5px;
}
.stepScreen.showSteps_false a.sspBtnPrv {
	display: none;
}
.stepScreen.showSteps_false a.sspBtnNxt::after {
	font-family: "fontello";
	content: "\F00F";
	font-size: 1.5rem;
}

a.sspBtnPrv::before{
	font-family: "fontello";
	content: "\E81A";
	font-size: 1.5rem;
}
a.sspBtnNxt::after {
	font-family: "fontello";
	content: "\e817";
	font-size: 1.5rem;
}
a.sspBtnPrv.disabled_true,
a.sspBtnNxt.disabled_true{
	opacity: 0.4;
}
a.sspBtnPrv:hover,
a.sspBtnNxt:hover {
	background-color: var(--hoverBG);
}
a.sspBtnPrv.disabled_true:hover,
a.sspBtnNxt.disabled_true:hover{
	background-color: #ffffff;
	cursor: default;
}
a.sspBtnPrv span,
a.sspBtnNxt span{
	position:absolute;
	left:-9999px;
}

.stepScreenCounter{
	margin-left: 0.5rem;
	order: 3;
}
.stepScreen.showSteps_false 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: black;
	opacity: 0.5;
}
.screenImage .screenStepLnk.active_false .stepArea{
	background: none !important;
}
.screenImage .screenStepLnk.active_true .stepArea {
	outline: 2px solid var(--accentColor);
}
div.text{
    overflow-x: auto;
    overflow-y: clip;
    border-spacing: 0;
}

/** Content : screen **********************************************************/
.screen.block::before{
	background:none;
}
.screen{
	position: relative;
}
.screen_ti{
	margin-right:65px;
}
.screenImg{
    counter-reset:zones;
    overflow-x: auto;
    overflow-y: clip;
    border-spacing: 0;
    max-width: -moz-available!important;
    max-width: -webkit-fill-available!important;
    max-width: -fill-available!important;
    padding:10px;
}
.screenImg img{
    margin:inherit;
}
.screenFra .caption{
    width: -moz-available;
    width: -webkit-fill-available;
    width: -fill-available;
    margin: 0 auto;
    background-color: var(--contentBG);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.screenImgFra {
    width: -moz-available;
    width: -webkit-fill-available;
    width: -fill-available;
    display: flex;
    flex-wrap: wrap;
}
.screenImg a.screenZoneLnk {
    margin:10px;
}
a.screenZoneLnk {
	text-decoration: none;
    margin: inherit;
    box-sizing: border-box;
}
a.screenZoneLnk.scrLnkAct::before{
	color: #fff;
	background-color: var(--accentColor);
}
.screenZone_pre{
	padding: 10px;
	box-shadow: 0px 3px 6px rgb(0 0 0 / 20%);
	border-radius: 5px;
	margin: 0 1rem 1rem 0;
	width: fit-content;
}
span.zoneArea{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	border-radius: 3px;
	outline: 2px dotted var(--accentColor);
	background:url("img/empty.png"); /* IE */
}
.scrFraAct span.zoneArea{
	outline: 2px dotted var(--accentLightColor);
}
a.screenZoneLnk:hover span.zoneArea{
	background-color: var(--accentColor);
	opacity: 0.4;
	outline: 2px dotted var(--accentColor);
}
.screen a.screenZoneLnk::before, .screenTitles li a.screenTitleLnk::before, li.screenZone .screenZone_ti::before{
    content: counter(zones, decimal) " ";
    counter-increment:zones;
	display: inline-block;
	font-weight:bold;
    z-index: 9;
    text-align: center;
    border-radius: 50px;
    background-color: #fff;
    color: var(--accentColor);
}
.screen a.screenZoneLnk::before{
    position: absolute;
    top: -10px;
    left: -12px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
}
.screenTitles li a.screenTitleLnk::before{
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
}

.screenTitles{
	text-align: left;
	padding: 0.8rem;
	box-sizing: border-box;
	background-color: var(--accentLightColor);
    overflow-x: auto;
    overflow-y: clip;
    border-spacing: 0;
    flex: auto;
    height:auto!important;
}
.screenTitles ol{
    counter-reset:zones;
	list-style: none;
	list-style-image:none;
	margin: 0;
	padding: 0;
}

ol.screenZones{
	list-style: none;
	margin: 0;
	padding: 1rem;
	background-color: var(--contentBG);
	counter-reset:zones;
}
.scrFraAct li.screenZone{
	margin: 1rem 0;
	position: relative;
	padding: 0.5rem;
}
.scrFraInt > ol.screenZones > li.screenZone.scrZneHide,
.scrFraAct > ol.screenZones > li.screenZone.scrZneHide {
    visibility: hidden;
    position: absolute;
    left: -20000px;
    top: -20000px;
}
li.screenZone .screenZone_ti::before{
    display: inline-block;
    font-weight: bold;
    min-width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-right: 5px;
    border-radius: 50px;
    background-color: var(--accentColor);
    color: #ffffff;
}
.screenZone_ti{
	font-size: 1.2em;
	margin: 5px 0 10px 0;
}
.scImgZmTi .screenZone_ti{
	font-size: 1em;
	padding-left: 0;
	margin: 5px 0 0 0;
}

.screenZone_tall .screenZone_desc {
	margin: 0!important;
}
.screenZone_end{
	margin:5px 0 5px 5px;
}
.scrFraAct .screenZone_end{
	display:none;
}
.screenZone_end a{
	color:silver;
	font-size: 0.8em;
	font-style: italic;
	text-decoration: none;
}
.scrFraAct .scrTiAct {
	border-radius: 8px;
	background-color: var(--accentColor);
}
.scrFraAct .scrTiAct a{
	color: #fff;
}
.scrFraAct .scrTiAct a:hover{
	background-color: var(--accentColor);
}
.scrZneImg{
	outline: 2px solid var(--accentColor);
	border-radius: 3px;
}
.screenTitles a{
	color: var(--accentColor);
	text-decoration: none;
    width: -moz-available;
    width: -webkit-fill-available;
    width: -fill-available;
	position:relative;
	padding: .5rem;
	display: flex;
    align-items: center;
    border-radius: 8px;
}
.screenTitles a:hover{
	background-color: var(--hoverBG);
}
.scrFraAct .scrTiAct a:hover {
	background-color: var(--accentColor);
}
.screenTitles li{
	margin: 0;
	min-height:16px;
	display:flex;
    align-items: center;
}
.scrFraAct .screenMask{
	background-color: black;
	opacity: 0.4;
	margin:inherit;
}
.scrZneImg{
	outline: 2px solid var(--accentColor);
	border-radius: 3px;
}
.scrFra {
    position: relative;
	background-color: var(--elmtBG);
	padding: 1rem;
	border-radius: 5px;
}
.scrTools{
	display: flex;
	flex-direction: row-reverse;
    justify-content: center;
    border-bottom: 3px solid var(--menuFG);
}
.scrTools a {
	font-size: 1em;
	padding: 8px 11px 6px 11px;
	background-color: var(--elmtBG);
	text-align: center;
	color: var(--accentColor);
	text-decoration: none;
	border-radius: 10px 10px 0 0;
}
.scrTools a.scrBtnAct::before {
	content: "\E819";
	font-family: "fontello";
	font-size: 1.3em;
}
.scrTools a.scrBtnLst::before {
	content: "\E818";
	font-family: "fontello";
	font-size: 1.3em;
}
.scrTools a[aria-selected="false"] {
	cursor:pointer;
}
.scrTools a[aria-selected="true"] {
	color: #fff;
	background-color: var(--accentColor);
	cursor:default;
}
.scrTools a[aria-selected="false"]:hover {
	background-color: var(--hoverBG);
}
.scrTools a[aria-selected="true"]:hover {
	cursor:default;
}

.scrTools a span{
	position:absolute;
	left:-9999px;
	top:-9999px;
}

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

/** Content : scImageMgr ********************************************************/
a.imgZoom{
	display: inline-block;
	line-height: 0;
}
.screenSeq > .caption_co{
	margin:0 auto;
	border: 1.5rem solid var(--accentLightColor);
    background-color: var(--contentBG);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.screenSeqFra .caption{
	margin:0;
}
.screenSeqFra{
	margin:1rem auto;
	background-color: #FFF;
}
.screenSeqFra div {
	margin: 0!important;
}
.scImgZmOver{
	background-color: #DDD;
	opacity: 0.4;
	position:fixed;
	width:100%;
	height:100%;
}
.scImgZmCvs{
	padding:20px;
	width:inherit;
	height:inherit;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

.scImgAnmCtrl{
	padding: 15px 15px 5px 15px;
	border-radius: 10px 10px 0 0;
	background-color: var(--accentLightColor);
	position:relative;
	margin:0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scImgAnmCtrLbl{
	display:none;
}
a.scImgAnmBtnPse,
a.scImgAnmBtnPly,
a.scImgAnmBtnNxt,
a.scImgAnmBtnPrv {
    font-family: "fontello";
    font-size: 1.3em;
    text-decoration: none;
    color: var(--accentColor);
    margin: 0 0.5rem;
    padding: 0.7rem;
    border-radius: 5px;
    background-color: var(--contentBG);
}
a.scImgAnmBtnPse span,
a.scImgAnmBtnPly span,
a.scImgAnmBtnNxt span,
a.scImgAnmBtnPrv 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";
}
a.scImgAnmBtnPse:hover,
a.scImgAnmBtnNxt:hover,
a.scImgAnmBtnPrv:hover,
a.scImgAnmBtnPly:hover {
	background-color: var(--hoverBG);
}
.scImgSep{
	display:none;
}
/** STOP - scImageMgr ********************************************************/

/* === CodeMirror =========================================================== */
.CodeMirror-static{
	margin-left:40px;
}
.CodeMirror-static pre {
	/* Reset some styles that the rest of the page might have set */
	border-radius: 0;
	border-width: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	white-space: pre;
	word-wrap: normal;
	line-height: inherit;
	color: inherit;
	z-index: 2;
	position: relative;
	overflow: visible;
	border-right: 30px solid transparent;
	width: fit-content;
	font-family: monospace;
	tab-size: 2;
}
.CodeMirror-line{
	position: relative;
	min-height: 16px;
}
.CodeMirror-linenumber{
	position: absolute;
	top:0;
	left:-38px;
	width:30px;
	padding: 0 3px 0 5px;
	min-width: 20px;
	min-height: 16px;
	text-align: right;
	color: #656565;
	background-color: #f7f7f7;
}

.cm-keyword {color: #708;}
.cm-atom {color: #219;}
.cm-number {color: #164;}
.cm-def {color: #00f;}
.cm-variable {color: black;}
.cm-variable-2 {color: #05a;}
.cm-variable-3 {color: #085;}
.cm-property {color: black;}
.cm-operator {color: black;}
.cm-comment {color: #a50;}
.cm-string {color: #a11;}
.cm-string-2 {color: #f50;}
.cm-meta {color: #555;}
.cm-error {color: #f00;}
.cm-qualifier {color: #555;}
.cm-builtin {color: #30a;}
.cm-bracket {color: #997;}
.cm-tag {color: #170;}
.cm-attribute {color: #00c;}
.cm-header {color: blue;}
.cm-quote {color: #090;}
.cm-hr {color: #999;}
.cm-link {color: #00c;}

.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-invalidchar {color: #f00;}
/* === STOP - CodeMirror ==================================================== */

/* === START - scCode ==================================================== */
.scCodeActive{
	border:1px solid silver;
	background-color:white;
	font-size: 90%;
}
.scCodeCtrl{
	background-color:#f3f3f3;
	border-bottom:1px solid #cfcfcf;
	padding:0;
	height:19px;
	text-align:right;
	z-index:2;
	position:relative;
}

.scCodeActive .CodeMirror-static{
	transition: margin-left 200ms ease-in;
}
.scCodeLineNums-invisible .CodeMirror-linenumber{
	display:none;
}
.scCodeLineNums-invisible .CodeMirror-static{
	margin-left:2px;
}

.scCodeRaw{
	tab-size: 2;
}

.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;
}
.scCodeCtrl a{
	display:inline-block;
	box-sizing: border-box;
	width:20px;
	height:19px;
	padding-left: 20px;
	overflow: hidden;
	background-image:url("img/code/buttons.png");
	background-repeat: no-repeat;
	background-position: -0px -0px;
	margin:0 1px;
}
.scCodeCtrl a:hover{
	opacity:0.8;
}
.scCodeCtrl a.scCodeBtnLineNums{
	background-position: -0px -20px;
}
.scCodeLineNums-invisible .scCodeCtrl a.scCodeBtnLineNums{
	background-position: -20px -20px;
}
.scCodeRaw-visible .scCodeCtrl a.scCodeBtnLineNums{
	visibility: hidden;
}
.scCodeCtrl a.scCodeBtnRaw{
	background-position: -0px -40px;
}
.scCodePlain .scCodeCtrl a.scCodeBtnRaw{
	background-position: -0px -20px;
}
.scCodeRaw-visible .scCodeCtrl a.scCodeBtnRaw{
	background-color: silver;
}
.scCodeRaw-visible.scCodePlain .scCodeCtrl a.scCodeBtnRaw{
	background-position: -20px -20px;
	background-color: inherit;
}
.scCodeCtrl a.scCodeBtnWrap{
	background-position: -0px -80px;
}
.scCodeWrap-on .scCodeCtrl a.scCodeBtnWrap{
	background-color: silver;
}
.scCodeRaw-visible .scCodeCtrl a.scCodeBtnWrap{
	visibility: hidden;
}


.scCodeCopyMsg.scCodeHidden {
	display:block;
	height: 0;
	visibility:hidden;
	transition: visibility 200ms step-end;
}
.scCodeCopyMsg.scCodeVisible {
	display:block;
	height:18px;
	visibility:visible;
	transition: visibility 200ms step-start;
}

.scCodeCopyMsg {
	position:absolute;
	z-index:1;
	opacity:0.8;
	top:19px;
	left:0;
	width:100%;
	background-color:#f7ed99;
	border-bottom:1px solid #e4ca8c;
	color:#7e652a;
	text-align: center;
	overflow:hidden;
	transition: height 200ms linear;
}
/* === STOP - scCode ==================================================== */

/* === ConceptTree ========================================================== */
.treeRoot>.nodeRoot>.nodeLblFra{
	border-left:0;
}
.treeRoot>.nodeRoot>.nodeLblFra>.nodeLbl{
	border-width: 2px;
}
.treeRoot>.nodeChildren_hide>.nodeLblFra>.nodeLbl{
	border-bottom-width: 5px;
}
.treeRoot>.nodeRoot>.nodeLblFra>.nodeLbl .nodeTi{
	font-size: 1.1em;
}
.nodeChild{
	padding-left:10px;
}
.nodeChild_pre{
	border-left:2px solid var(--hoverBG);
}
.nodeLbl,.nodeRef{
	padding:0.8rem;
	display:inline-block;
	margin-top:10px;
	background-color:var(--contentBG);
	max-width:500px;
	position: relative;
	border: 2px solid var(--hoverBG);
	border-radius: 10px;
}
.nodeChildren_hide>div>.nodeLbl {
	box-shadow: 2px 2px 0 var(--accentColor);
    border: 2px solid var(--accentColor);
    animation: all 0.5s;
}
.nodeChildren_hide>div>.nodeLbl:hover {
	box-shadow: 0px 0px 0 var(--accentColor);
}
.nodeLblCo{
	padding-left: 0;
	background-position: center left;
	background-repeat: no-repeat;
}
.nodeRef{
	border-color: var(--accentLightColor);
	box-shadow: inset 0 0 5px #AAA;
}
a.nodeRefLnk{
	color: #525252;
	text-decoration: underline;
}
.nodeDesc{
	font-size: 0.8em;
	color: #676767;
}
.nodeChildren{
	padding-left:5px;
}
.nodeChildren_hide>.nodeChildren{
	opacity:0;
	height:0 !important;
	transition-property : opacity,display;
	transition-duration : 0.1s;
}
.nodeChildren_show>.nodeChildren{
	opacity:1;
	height:auto;
	transition-property : opacity,display;
	transition-duration : 1.5s;
}
.nodeLead{
	display:inline-block;
	height:23px;
	border-left:2px solid var(--hoverBG);
	border-bottom:2px solid var(--hoverBG);
	vertical-align: top;
}
.nodeLeadSpacer{
	display:inline-block;
	width:12px;
	height:18px;
}
.nodeRoot{
	display:inline-block;
}
.nodeLblFra,.nodeRefFra{
	display:inline-block;
}
.nodeChildren_1 .nodeLbl{
	min-width: 60px;
}
.nodeChildren_2 .nodeLbl{
	min-width: 120px;
}
.nodeChildren_3 .nodeLbl{
	min-width: 180px;
}
.nodeChildren_4 .nodeLbl{
	min-width: 240px;
}
.nodeChildren_5 .nodeLbl{
	min-width: 300px;
}
.nodeChildren_6 .nodeLbl{
	min-width: 360px;
}
.nodeChildren_7 .nodeLbl{
	min-width: 420px;
}
.nodeChildren_8 .nodeLbl{
	min-width: 480px;
}
.nodeChildren_9 .nodeLbl{
	min-width: 540px;
}
.nodeChild_co:target>div>div>.nodeLbl{
	box-shadow: 0 0 5px #444;
}
.nodeIco {
	display: inline-block;
	margin-inline-start: 5px;
	order: 2;
	vertical-align: middle;
}

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

.nodeChildren_show a.nodeTi:before {
	font-family: "fontello";
    content: "\E816";
    font-size: 1.2rem;
}
.nodeChildren_hide a.nodeTi:before {
	font-family: "fontello";
    content: "\e817";
    font-size: 1.2rem;
}
.nodeTi {
    font-weight:900;
    display: grid;
	grid-template-columns:auto 1fr auto;
	align-items: baseline;
	word-wrap: break-word;
    color:var(--contentFG);
    text-decoration: none;
}
a.nodeTi {
    grid-template-columns:auto 1fr;
    gap: 10px;
}
.nodeChildren_hide>.nodeChildren > .nodeChild{
	display:none;
}
a.nodeMoreDesc_a {
    position: absolute;
    right: -14px;
    top: calc(50% - 13px);
    width: 25px;
    height: 24px;
    background-color: var(--accentColor);
    color: var(--contentBG);
    text-decoration: none;
    font-weight: normal;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.3rem;
    border-radius: 50px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
}
a.nodeMoreDesc_a::before {
    content:"\002B";
	font-family:"fontello";
}
a.nodeMoreDesc_a:hover {
	background-color: var(--accentDarkColor);
}

a.nodeMoreDesc_a span{
	position:absolute;
	left:-9999px;
}

/* Node types */
.nodeType_imp{
	border-color: var(--blockWarning);
	background-color: var(--blockWarningLight);
}
.treeSearch_mach > .nodeLblFra > .nodeLbl{
	border: 2px solid var(--accentColor);
}
.treeSearch_mach > .nodeLblFra > .nodeLbl .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: 1rem;
	overflow:auto;
}
.treeScroll{
    border-spacing:0;
}
.treeRoot.treeHasToolbar.treeSearch_off .treeScroll{
	overflow:auto;
}
.treeRoot.treeHasToolbar .treeScroll{
	border: 2px solid var(--accentLightColor);
	padding:0.5rem;
    background: var(--contentBG);
}
.treeRoot.treeHasToolbar.treeSearch_on .treeScroll{
	max-height:600px;
	overflow:auto;
}
.treeToolbar{
	display:flex;
	flex-direction:row-reverse;
	align-items: center;
	justify-content: flex-end;
	z-index:2;
	position:relative;
	margin-bottom: -2px;
}
.treeStatusbar{
	font-style: italic;
	text-align:right;
	padding:3px;
	z-index:2;
	font-size:0.8rem;
	position:relative;
	display:none;
	color: #676767;
}
.treeRoot.treeSearch_on .treeStatusbar{
	display:block;
}

.treeToolbar form.treeSearchForm{
	flex: 2 1 auto;
	padding-left: 1rem;
    display: flex;
    align-items: center;
}
.treeToolbar span.treeSearchLabel, .treeToolbar span.treeSearchResultLabel{
	display:inline-block;
	color:#676767;
	padding: 0 1rem;
}
.treeToolbar input.treeSearchInput{
	border: 1px solid var(--accentLightColor);
    margin-right: 1rem;
    padding: 0 3px;
	height: 20px;
}
.treeSearch_off .treeToolbar form.treeSearchForm{
	display:none;
}

.treeToolbar a{
	box-sizing: border-box;
	width: 30px;
	height: 30px; 
	text-align:center;
	line-height:30px;
	background-color:var(--accentLightColor);
	color: var(--accentColor);
	text-decoration:none;
}
.treeToolbar a span{
	position:absolute;
	left:-9999px;
}
.treeToolbar a.treeBtnOpenAll::before{
	font-family:"fontello";
	content:"\002B";
}
.treeToolbar a.treeBtnCloseAll::before{
	font-family:"fontello";
	content:"\2212";
}
.treeToolbar a.treeBtnPrv::before{
	font-family:"fontello";
	content:"\F011";
}
.treeToolbar a.treeBtnNxt::before{
	font-family:"fontello";
	content:"\F010";
}
.treeToolbar a.treeBtnSearch::before{
	font-family:"fontello";
	content:"\F50D";
}
.treeSearch_off .treeToolbar a.treeBtnSearch{
	
}
.treeSearch_on .treeToolbar a.treeBtnSearch{
	border-bottom:2px solid var(--accentColor);
	opacity:1;
}
.treeToolbar a:hover{
	opacity:0.7;
}
.treeToolbar span.treeSep{
	display:none;
}
.treeSearch_noact  a.treeBtnNxt,
.treeSearch_noact  a.treeBtnPrv{
	display:none;
}
/* === STOP - ConceptTree ========================================================== */
/* ============= Search ============= */
mark.schHit {
	background-color: #f7ff97;
	padding:0 2px;
}
mark.schHit_current {
	background-color: #9cff81;
	padding:0 2px;
}

/* === START - RESPONSIVE =================================================== */
@media (min-width: 2250px){
    .secOutFra{
        right:25vw;
    }
}
@media (max-width: 2249px) and (min-width: 1441px){
    .secOutFra{
        right:12vw;
    }
}
@media (max-width: 920px){
    .screenImage,
    .stepScreenTitles {
        max-width: -webkit-fill-available;
    }
    .secOutFra {
        display: none;
    }
    .block {
        padding: 0.9rem 1rem 1rem 1rem;
    }
    .screen.block{
        padding:0 0 1rem 0;
    }
    .block_co{
        margin-left: 0;
    }
    div.tree.block .block_ti, div.screen.block .block_ti{
        margin-left: 0;
    }
}
@media (max-width: 700px) {
    #content{
        max-width: -moz-available;
        max-width: -webkit-fill-available;
        max-width: fill-available;
    }
    .def_bk{
        padding: .5rem;
    }
    .stepScreenBox {
        flex-direction: column-reverse;
        align-items: center;
    }
	.caption iframe {
		width: 100%!important;
		height: auto!important;
	}
	.caption {
		margin: 0!important;
	}
	.tplHomeLogo {
		margin-bottom: 1rem;
	}
	.tplHomeTiFra > table td.tplHomeTi, .tplHomeTiFra > table td.tplHomeLongTi {
		padding: 0;
	}
	.tplHomeTiFra > table td.tplHomeTi h1 {
		font-size: 1.5rem;
	}
	.tplHomeTiFra > table td.tplHomeLongTi {
		font-size: 1.3rem;
	}
    .screenImgFra table {
		display: flex;
		flex-direction: column;
    	align-items: stretch;
	}
	.screenImgFra table tr {
		display: flex;
		flex-direction: column-reverse;
    	align-items: stretch;
	}
	.screenTitles {
		height: auto!important;
		padding: .4rem;
	}
	.screenTitles a{
		padding: .3rem;	
	}
	.screenImgFra table > tbody > tr > td:last-child{
		max-width: 100%;
	}
	.screenZone_co {
		display: flex;
		flex-direction: column;
	}
	.screenZone_pre {
		margin: 0;
	}
	.screenZone_desc {
		padding: 0!important;
		margin: 0.5rem 0!important;
	}
    .stepListPlayer, .stepList .desc.simple{
        padding: 5px;
        border: 10px solid var(--accentLight);
    }
}
@media (max-width: 580px){
    #page{
        padding-top:3rem;
    }
    .stepScreenTitles{
        padding:0;
    }

}