@import url("inject.css");
@import url("font/font.css");
@import url("variables.css");

/* HEADER DOMAIN MENU */
#nav-domain a.lnkDomDoc {
	opacity: 1;
	cursor: default;
	pointer-events: none;
}

.quickAccess a.lnkDomDoc {
	border-block-end: 2px solid #217C8B;
    font-weight: 600;
    opacity: 1;
}

button.domainMenu {
    padding-inline-start: 2.5em;
    background: #fff url(img/scenari.svg) no-repeat 6px center / auto 24px;
}

#scSoftHeader {
	background: #F7F6F4;
	padding-top: 0;
	border-block-end: 1px solid var(--borderColor);
}
#scSoftHeader h1 {
	position: absolute;
	left: -9999px;
	top: -9999px;
}
#scSoftHeader .quickAccess a {
    font-size: 0.9em;
}

/*=== START GENERAL HTML =================================================== */
html{
	width:100%;
	height:100%;
}

body{
	font-family: var(--textStyle);
    font-size: var(--fontSize);
    line-height: 1.3;
	color:#555;
	margin: 0;
	min-height: 100%;
	width:100%;
	scroll-behavior: smooth;
	overflow-x:hidden;
	display: flex;
	flex-direction: column;
}

.hidden{
	position: absolute;
	width:1px;
	height:1px;
	visibility: hidden;
	top:-10000px;
	left:-10000px;
}

.blockAnchor{
	visibility:hidden;
	text-decoration: none;
	color:silver;
	font-size: .95em;
	margin-left:0.2em;
}
.blockAnchor::before{
	font-family:"fontello";
	content:"\2693";
	font-weight:normal;
}
.blockAnchor span{
	position:absolute;
	left:-9999px;
}
*:hover > .blockAnchor,
.blockAnchor:focus {
	visibility:visible;
}

.blockAnchor:hover{
	text-decoration:none;
	opacity:0.7;
}

:focus{
	outline:none;
}

p {
	line-height: 1.5em;
	margin: 0.3em 0;
}
a{
	text-decoration:none;
	color:#217C8B;
}
a:hover{
	text-decoration:underline;
}
button {
	cursor: pointer;
	background-color: #217C8B;
	border: medium none;
	color: #ffffff;
	font-weight: bold;
	line-height: 25px;
	padding: 0 0.2em;
}
button:hover {
   box-shadow: 0 0 5px rgba(115, 115, 115, 0.5);
}
code{
	word-break: break-word;
}

table.layout_tb  {
	border-collapse: separate;
}
table.layout_tb td{
	border:none;
}
table {
	border-collapse: collapse;
	margin: 1em auto;
}
th {
	background-color: #f7f6f4;
}
td, th {
	border: 1px solid #555;
	padding: 5px;
}
.cellNum_tbtd, .cellRight_tbtd {
	text-align: right;
}
.cellCenter_tbtd {
	text-align: center;
}

p img{
	vertical-align: middle;
}
ul {
	list-style-type:disc;
}
h3, h4, h5, h6{
	margin-block-end: 0;
}
h3{
	font-size: 1.5em;
}
h4{
	font-size: 1.4em;
	margin-inline-start:2em;
}
h5{
	font-size: 1.3em;
	margin-inline-start:4em;
}
h6{
	font-size: 1.2em;
	margin-inline-start:6em;
	
}
mark {
    color: #E46000;
    background-color: transparent;
}
/*=== END GENERAL HTML ===================================================== */

/*=== START TEMPLATE =================================================== */
html{
	scroll-padding-block-start: 90px;
}
#root{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
main {
	flex: 2 1 auto;
	align-self: center;
	max-width: var(--maxWidth);
	width:100%;
}
main > div{
	padding: 1em;
}
.nav_stuck_yes main {
	margin-block-start: 50px;
}
.nav_stuck_yes .content {
	margin-block-start: 60px;
}
.nav_stuck_yes .metaFrame {
	margin-block-start: 115px;
}
.nav_stuck_yes #navigation{
	min-height:40px;
}
footer{
	flex: 0 0 auto;
}

/* --- HOME --- */
.root main {
	margin:0;
	padding:0;
	align-self: stretch;
	max-width:100%;
}
.root #main > div {
	display: flex;
	flex-direction: row;
	max-width: 100%;
	height:100%;
	padding:0;
}
.root main aside{
	flex:0 0 400px;
	box-sizing: border-box;
	padding:1em;
	background: rgba(239, 237, 233, 0.2);
}
.root main .content{
	flex:2 1 auto;
	padding:1em;
}
/*=== END TEMPLATE ===================================================== */

/*=== START NAVIGATION MENU =========================================== */
#navigation {
	background-color: #F7F6F4;
	margin:1em 0;
	position:relative;
}
.nav_stuck_yes #navigation{
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0;
	box-shadow: 4px 1px 4px rgba(115, 115, 115, 0.5);
	z-index:10;
}

#navigation::before {
	background: #f7f6f4 linear-gradient(to right, #fff, #f7f6f4) repeat scroll 0 0;
	content: "";
	height: 100%;
	left: -20%;
	position: absolute;
	top: 0;
	width: 20%;
}
#navigation::after {
	background: #f7f6f4 linear-gradient(to left, #fff, #f7f6f4) repeat scroll 0 0;
	content: "";
	height: 100%;
	position: absolute;
	right: -20%;
	top: 0;
	width: 20%;
}

#navigation .pageOutline {
	margin: 0;
	padding: 0;
	text-align: center;
}
.nav_stuck_yes #navigation .pageOutline {
	margin-block-start: 35px;
}

#navigation .pageOutline li {
	display: inline-block;
}
#navigation a {
	display: inline-block;
	line-height: 2;
	margin: 0.2em 0.4em 0.3em;
	position: relative;
}

#navigation a:hover{
	text-decoration:none;
}

#navigation a:hover::after, .nav_stuck_yes #navigation a.currentSection_yes::after {
	transform:scaleX(1);
	opacity:1;
}

#navigation a::after {
	background: #217C8B radial-gradient(#217C8B, #f7f6f4) repeat scroll 0 0;
	bottom: -2px;
	content: "";
	height: 2px;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: 50% 50% 0;
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
	width: auto;
}

#navigation .pageOutline .root_lo{
	display: none;
}
.nav_stuck_yes #navigation .pageOutline .root_lo{
	display: inline-block;
	margin-inline-start: 5px;
	overflow: hidden;
	text-decoration: none;
	vertical-align: middle;
	width: 15px;
}

.nav_stuck_yes #navigation .pageOutline .root_lo::before {
	content: "\f102";
	font-family: "fontello";
    font-size: 22px;
    font-style: normal;
}

/*=== STOP NAVIGATION MENU =========================================== */

/*=== START TITRES =================================================== */
#headerImg {
	display: inline-block;
	vertical-align: middle;
	margin-inline-end:0.5em;
}
h1.list_ti, h1.tiplist_ti {
	font-size: 1em;
	border-bottom: 1px solid #efede9;
	padding: 10px 0;
}

.titleFrame{
	border-bottom: 1px solid #efede9;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	margin: .83em 0;
	align-items: center;
}
#productTitle{
	margin: 0;
	flex: 1 1 auto;
}
#linksLink{
	margin-inline-end:0.5em;
	flex: 0 0 auto;
	display: none;
}
.nav_stuck_yes #linksLink{
	display: block;
}
#scsoftLink{
	flex: 0 0 auto;
}
a.scsoft, a.linksLink{
	background-color: #217C8B;
	color: white;
	display:inline-block;;
	border-radius:5px;
	padding:5px;
	font-size: 110%;
	font-weight: bold;
}
.nav_stuck_yes a.scsoft, .nav_stuck_yes a.linksLink{
	font-size: 80%;
}
a.scsoft:hover, a.linksLink:hover{
	 text-decoration: none;
	 box-shadow:0 0 5px #217C8B;
}
a.scsoft span::before, a.linksLink span::before {
	font-family: "fontello";
	padding-inline-end: 5px;
	color: white;
	content: "\e800";
	text-align: center;
}
a.scsoft span::before {
	content: "\e800";
}
a.linksLink span::before {
	content: "\e803";
}
.nav_stuck_yes .titleFrame {
	position: fixed;
	z-index: 12;
	top:3px;
	padding: 0;
	margin: 0;
	width: 97%;
	max-width: 1165px;
	border: 0;
}
.nav_stuck_yes #productTitle {
	font-size: 1.2em;
}

.nav_stuck_yes #headerImg img{
	height:30px;
	width:auto;
}
.nav_stuck_yes #versionSelector{
	margin: 0 1em;
}
.nav_stuck_yes #versionSelector::before{
	width: 1.5em;
}
.nav_stuck_yes #versionSelector::after{
	right: 0.5em;
}
.nav_stuck_yes #versionSelector .version{
	padding: 2px 20px 2px 2px;
}
.nav_stuck_yes .titleFrame {
	font-size: 110%;
}

/*=== END TITRES =================================================== */

/*=== SEARCH =================================================== */
#seachBox {
    position: absolute;
    right: .8em;
    top: 50px;
}
#searchContainer {
	flex: 0 1 auto;
	text-align: center;
	margin-block-end: 1.5em;
}
#searchResult {
	flex: 2 1 auto;
}
#seachBox input#searchBtn {
	background: rgba(0, 0, 0, 0) url("img/search.svg") no-repeat scroll right center / auto 100%;
	height: 25px;
	width: 25px;
}
input#searchBtn {
	background: url("img/search.svg") no-repeat center left;
	background-size: 100%;
	border: none;
	cursor: pointer;
	color: transparent;
	height: 38px;
	width: 38px;
	padding: 0;
	margin-inline-start: 5px;
}
#seachBox input#searchText {
	width:auto;
	height:auto;
}
input#searchText {
	border: 1px solid #b9bcbe;
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.15) inset;
	padding: 6px 13px;
	width:20em;
	height:1.5em;
}
#searchContainer input#searchText {
	font-size: 1.1em;
}
input#searchText:focus {
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(107, 77, 145, 0.6);
}

.facets {
	margin-block-end: 1em;
	text-align: center;
}
.tabs{
	border-bottom:2px solid #217C8B;
}
.tabs a{
	text-decoration:none;
}
.tabs > div{
	display:inline-block;
	margin-inline-end: 5px;
	padding: 5px;
}
.tab_n{
	background-color:#efede9;	
}
.tab_y{
	background-color:#217C8B;
	color:#ffffff;
}

.list_co > ul, .tiplist_co > ul {
	list-style-type: none;
	padding-inline-start: 1em;
}
.list_co > ul > li, .tiplist_co > ul > li {
	margin:0.5em 0;
}
.list_co > ul > li::before, .productTitle::before, .tiplist_co > ul > li.tip::before {
	font-family:"fontello";
	margin-inline-end:5px;
}
.productTitle::before {
    font-size: 1.3em;
}
.list_co > ul > li.application::before, #messages a.application::after, #links a.application::after, .grpInfos a.application::after, .productTitle.application::before {
    content:"\E823";
}
.list_co > ul > li.extension::before, #messages a.extension::after, #links a.extension::after, .grpInfos a.extension::after, .productTitle.extension::before {
    content:"\E838";
}
.list_co > ul > li.server::before, #messages a.server::after, #links a.server::after, .grpInfos a.server::after, .productTitle.server::before {
    content:"\E82C";
}
.list_co > ul > li.devtool::before, #messages a.devtool::after, #links a.devtool::after, .grpInfos a.devtool::after, .productTitle.devtool::before {
    content:"\E82B";
}

.productTitle.model::before {
    padding-block-end: 7px;
}

.tiplist_co > ul > li.tip::before {
	content:"\e80e";
}

/* Filtres */
.filters {
	text-align: center;
}
.filter {
	background-color: #217C8B;
	color: #fff;
	display: inline-block;
	font-size: 1.1em;
	margin: 0 0.5em;
}
.filter .label {
	padding: 0.2em 0.5em;
}
.filter button.deleteFilter::before {
	content: "";
	font-family: "fontello";
	font-size: 1.4em;
	margin-inline-end: 1em;
}
.filter button.deleteFilter {
	background-color: transparent;
	border-left: 1px dashed #fff;
	overflow: hidden;
	padding: 0.2em 0.5em;
	width: 30px;
}

button.addFilter {
    background: rgba(0, 0, 0, 0) url("img/addFilter.svg") no-repeat scroll 0 0 / 20px auto;
	display: block;
	width: 20px;
	height: 18px;
}
button.addFilter span {
    display: none;
}
button.addFilter:hover {
    background-position: 0 -25px;
	box-shadow:none;
}

/* Results */
.results {
	margin: 1em auto;
	width: 100%;
	max-width: var(--maxWidth);
}
.results .product {
    margin-block-end: 1em;
    padding-block-end: 1em;
    border-bottom: 1px solid #EFEDE9;
}
.results .product:last-child, .results .product:only-child {
    border-bottom: none;
}
.results .productTitle {
    display: flex;
    align-items: center;
}
.results .productTitle > a {
	font-size: 1.4em;
}
.results .product .product .productTitle > a {
	font-size: 1.2em;
}

/* Voir tout */
.showAll {
    margin: 0.5em 0;
    width: 100%;
}
.moreRes.closed {
    display: none;
}

/* Stack */
.locResDokiel .context {
    font-size: 0.8em;
    color: #999;
}

/* Highlight */
div.highlight, p.highlight, .docHighlight {
    font-size: 0.9em;
	font-style: italic;
	font-weight:normal;
}
.docHighlight {
    margin: 0.5em 0 0 2em;
}
.doc.open .docHighlight {
    display: none;
}
.docBody p.highlight {
    margin: 0;
}
span.highlight {
    margin-inline-end: 0.5em;
}
span.highlight::before, span.highlight::after {
	content: "...";
}


.results .desc p {
    margin: 0;
}
.results.desc ul {
    margin-block-start: 0.1em;
}

/* Bloc extensions/doc/tip collapsable */
#searchResult .ext, #searchResult .doc, #searchResult .tips {
    margin-block-start: 0.5em;
	position: relative;
}
.ext.closed .extBody, .doc.closed .docBody, .tips.closed .tipsBody{
    display:none;
}
.extHead a, .docHead a, .tipsHead a {
    position:relative;
	padding-inline-start:2em;
}
.extHead a:hover, .docHead a:hover, .tipsHead a:hover{
	text-decoration:none;
	opacity:0.7;
}
.extHead a::before, .docHead a::before, .tipsHead a::before {
    position:absolute;
    left: 0.5em;
	font-family: "fontello";
}

.ext.open .extHead a::before, .doc.open .docHead a::before, .tips.open .tipsHead a::before {
    content: "\e80b";
}
.ext.closed .extHead a::before, .doc.closed .docHead a::before, .tips.closed .tipsHead a::before {
    content: "\e80a";
}
.archive.closed .docHead a::before {
    content: "";
}

.extHead a span, .docHead a span, .tipsHead a span {
    background-color: #EFEDE9;
    padding: 0.2em 0.5em;
}

.extHead a span::before {
    font-family: "fontello";
    content: "\F1E6";
    margin-inline-end: 5px;
}

.docHead a span::before{
	font-family: "fontello";
    content: "\e80c";
    margin-inline-end: 5px;
}

.tipsHead a span::before{
	font-family: "fontello";
    content: "\e80e";
    margin-inline-end: 5px;
}

.archive.video .docHead a span::before{
    content: "\e80e";
}
.archive.legacydoc .docHead a span::before{
    content: "\e80c";
}
.archive.other .docHead a span::before{
    content: "\f0f6";
}

.extBody, .docBody, .tipsBody {
    border-left: 1px dashed;
    margin-inline-start: 1em;
	padding-inline-start: 1em;
	margin-block-start: 1em;
}

.tipsBody ul {
	list-style-type: none;
	padding-inline-start: 1em;
}
.tipsBody ul li {
	margin:0.5em 0;
}
.tipsBody ul li::before {
	font-family:"fontello";
	margin-inline-end:5px;
	content: "\e80e";
}

/* Plan de la doc */
.docBody ul{
	list-style-type: none;
	padding-inline-start:1vw;
}

.docBody ul li {
    padding: 0;
    border-bottom: 1px solid #EFEDE9;
	position: relative;
	font-weight:bold;
}

.docBody ul li:last-child, .docBody ul li:only-child {
    border-bottom: none;
}

.docBody ul li a {
    color: #555;
	padding: 0.3em;
	display:block;
}

.docBody ul li a:hover {
    text-decoration:none;
	background-color:#f2f2f2;
}

.docBody ul li .header{
	position:relative;
}

.docBody ul li a .hit{
	color:#217C8B;
}

/* Menu filtré */
.showBestOnly .lowScore, ul.filteredMenu .closed ul{
    display:none;
}

ul.filteredMenu {
    padding: 0;
}
ul.filteredMenu ul {
	border-top: 1px solid #EFEDE9;
}

.docBody ul.filteredMenu li{
	padding-inline-start: 20px;
}

ul.filteredMenu button.open, ul.filteredMenu button.close{
	background-color:transparent;
	color:#217C8B;
	font-weight: normal;
	font-size: 1.1em;
	position: absolute;
	left: 0;
	top: 0;
}

ul.filteredMenu button.open:hover, ul.filteredMenu button.close:hover{
	box-shadow:none;
	opacity:0.7;
}

ul.filteredMenu button.open span, ul.filteredMenu button.close span{
	position:absolute;
	left:-9999px;
}

ul.filteredMenu button.open::before {
    font-family: "fontello";
    content: "\e811";
}

ul.filteredMenu button.close::before {
    font-family: "fontello";
    content: "\e812";
}

/* Tools */
.docBody > .tools {
    position: absolute;
    top: 0;
    right: -1em;
}

.docBody > .tools > * {
    margin: 0 0.5em;
}

.docBody > .tools span {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: 25px;
    white-space: nowrap;
    font-size: 1.5em;
}

.docBody > .tools > span {
	color:#217C8B;
}

.docBody > .tools > button{
	background-color:transparent;
	color:#555;
	font-weight: normal;
}

.docBody > .tools > button:hover{
	box-shadow:none;
	color:#217C8B;
}

.docBody > .tools span.tree::before{
	font-family:"fontello";
	content:"\e81b";
	margin-inline-end:50px;
}

.docBody > .tools span.list::before{
	font-family:"fontello";
	content:"\e813";
	margin-inline-end:50px;
}


/* Rank */
.docBody ul li .result .header::after {
    position: absolute;
    right: 0;
    font-family: "fontello";
    top: 0.1em;
    color: #F1C40F;
}

.schPgeRank_1 .header{
	padding-inline-end:20px;
}
.schPgeRank_1 .header::after {
    content: "\e810";
}

.schPgeRank_2 .header{
	padding-inline-end:30px;
}
.schPgeRank_2 .header::after {
    content: "\e810" "\e810";
}

.schPgeRank_3 .header{
	padding-inline-end:45px;
}
.schPgeRank_3 .header::after {
    content: "\e810" "\e810" "\e810";
}

.schPgeRank_4 .header{
	padding-inline-end:55px;
}
.schPgeRank_4 .header::after {
    content: "\e810" "\e810" "\e810" "\e810";
}

.schPgeRank_5 .header{
	padding-inline-end:70px;
}
.schPgeRank_5 .header::after {
    content: "\e810" "\e810" "\e810" "\e810" "\e810";
}

ul.filteredMenu li > .schPgeRank_0 .header {
    padding: 0.3em;
}
ul.filteredMenu .schPgeRank_0 + ul{
	border-top:none;
}


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

/*=== START PARAGRAPH =================================================== */
i.type {
	float: right;
	font-size: 1.2em;
	font-style: normal;
	margin-inline-start: 1em;
}
i.type::after{
	font-family: "fontello";
	font-size: 1.2em;
	margin-inline-start: 5px;
}
.home .content > #co {
	margin: 1em auto;
	width: 100%;
	max-width: var(--maxWidth);
}
#messages .dep, #messages .warning, #links, #messages .info,
.grpInfos .dep, .grpInfos .warning, .grpInfos .info{
	color: #ffffff;
	padding: 0.5em 1em;
	margin:1em 0;
	background-color: #b62c00;
}
#main > #links {
	margin-block-start: 1em;
	margin-block-end: 1em;
}
#messages .dep, .grpInfos .dep{
	background-color: #01676f;
}
#messages .info, .grpInfos .info {
	background-color: rgba(0,152,163,0.2);
	color: #555;
}
.grpInfos .genGrpInfos {
	color: #555;
	margin:0;
}
#messages .dep_ti,#messages  .warning_ti,#messages  .links_ti {
	min-height: 1.6em;
}
#messages .dep_ti span,#messages  .warning_ti span,#messages  .info_ti span,#messages  .links_ti span {
	font-size: 1.2em;
	font-weight: bold;
}

#messages .dep i.type::after{
	content: "\e803";
}
#messages .warning i.type::after{
	content: "\e801";
}
#links i.type::after{
	content:"\f148";
}
#links:empty {
	display: none;
}
#messages a, #links a, .grpInfos a {
	color: #ffffff;
	text-decoration: underline;
}
#messages .info a, .grpInfos .info a {
	color: #555;
}
#messages a:hover, #links a:hover, .grpInfos a:hover {
	text-decoration: none;
}
#messages a::after, #links a::after, .grpInfos a::after{
	content: "\e802";
	display: inline-block;
	font-family: "fontello";
	margin-inline-start: 5px;
	text-decoration: none;
}

.depList > ul {
    margin-inline-start: 3em;
}
.extTitle {
    font-size: 1.2em;
}
.extDesc {
    color: #777;
}
/*=== END PARAGRAPH =================================================== */

/*=== START METAS =================================================== */

.metaFrame {
	display:flex;
	border-bottom: 1px solid #efede9;
	padding-block-end: 0.5em;	
}
#desc {
	flex:3;
	position: relative;
}
#linkBox{
	flex:1;
	padding-inline-start:20px;
}
#desc .cartridge table {
	border-collapse: collapse;
	margin: 0;
	display: inline-block;
	color: #909090;
	font-style: italic;
	margin-inline-start: 20px;
}
#desc .cartridge tbody {
	display: inline;
}
#desc .cartridge table::before {
	font-family: "fontello";
	padding-inline-end: 5px;
	color: #555;
	content: "\e80f";
	text-align: center;
	width: 20px;
	font-style: normal;
	margin-inline-start: -20px;
	vertical-align: top;
}
#desc .cartridge table tr {
	background-color: transparent;
	display: inline-block;
	margin-inline-end: 1em;
}
#desc .cartridge table td {
	padding: 0;
	border: medium none;
	display: inline-block;
}
#desc .cartridge table td:first-child {
	margin-inline-end:0.3em;
}
#desc .cartridge table td:first-child::after {
	content: " : ";
}
#desc .cartridge table td.product {
	white-space: nowrap;
}

#desc .license {
	margin-block-start:1em;
}
#desc .license > a{
	text-decoration:none;
	color:#555;
}
#desc .license > a::before{
	font-family:"fontello";
	margin-inline-end:5px;
	font-weight:normal;
}
#desc .license > a.open::before,
#desc .license > a.license_open::before{
	content:"\e80b";
}
#desc .license > a.closed::before,
#desc .license > a.license_closed::before{
	content:"\e80a";
}
.collBlk_open {
	border-left: 1px dashed #444;
	margin-inline-start: 1em;
	padding-inline-start: 1em;
}

.lab .infos::before,
.project .infos::before,
.product .infos::before {
	content: "";
	font-family: "fontello";
    font-size: 1.1em;
    font-style: normal;
}
.lab .infos,
.project .infos,
.product .infos {
	display: inline-block;
	margin-inline-start: 5px;
	overflow: hidden;
	text-decoration: none;
	vertical-align: middle;
	width: 15px;
}
.illustration {
	position: absolute;
	right: 0;
	top: -120px;
	box-shadow: 0 0 5px rgba(115, 115, 115, 0.5);
}
.illustration:hover {
	box-shadow: 0 0 5px rgba(0, 152, 163, 0.5);
}
.imgZoom img {
	max-height: 80px;
}
.scImgZmOver {
	background-color: #000;
}

/* --- DOCLINK --- */
#extraLinks {
}
#extraLinks .links {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#extraLinks .links li {
	margin: 0.2em 1em;
}
#extraLinks a:hover {
	text-decoration: none;
}
#extraLinks a > span:hover {
	border-bottom: 1px solid;
}
#extraLinks a::before{
	font-family:"fontello";
	padding-inline-end:5px;
	color: #555;
	content: "\e803";
	text-align: center;
	width: 20px;
	margin-inline-start: -20px;
}
#extraLinks .docLink.type_download::before {content: "\e800";}
#extraLinks .docLink.type_forum::before {content: "\e808";}
#extraLinks .docLink.type_doc::before {content: "\e80c";}
#extraLinks .docLink.type_exemple::before {content: "\e832";}
#extraLinks .docLink.type_video::before, 
#extraLinks .docLink.type_tip::before {content: "\e80e";}

/*=== END METAS =================================================== */

/*=== START SELECTOR =================================================== */
#selectors {
	text-align: right;
}
#selectors > select {
	margin: 0 5px;
}
#versionSelector{
	font-size: 0.6em;
	margin:1em;
}
.selector{
	font-size:0.8em;
	margin:1em;
}
.productTitle .selector{
	margin: 0 1em;
	font-size: 0.6em;
}
#versionSelector .version, .selector select{
	font-size: inherit;
	padding: 0.5em;
	cursor:pointer;
}
.selector select,
#versionSelector .version{
	background-color:#efede9;
	color:#555;
}
.selector select option:hover, 
#versionSelector .version option:hover{
	box-shadow: 20px 20px #555 inset;
}

@supports (pointer-events: none) and ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	#versionSelector, .selector {
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}

	.selector select  {
		padding-inline-end: 2.5em;
		border: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;	
	}
	#versionSelector .version  {
		padding: 5px 35px 5px 5px;
		border: 0;
		font-size: 1.3em;
		font-weight: bold;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;	
	}

	#versionSelector::before, #versionSelector::after,
	.selector::before, .selector::after{
		content: "";
		position: absolute;
		pointer-events: none;
	}

	#versionSelector::after,
	.selector::after	{
		content: "\25BC";
		height: 1em;
		font-size: .625em;
		line-height: 1;
		right: 1.2em;
		top: 50%; margin-block-start: -.5em;
		color: #ffffff;
	}

	#versionSelector::before,
	.selector::before{ 
		width: 2em;
		right: 0; top: 0; bottom: 0;
		bottom: 0;
		top: 0;
	}
	.selector::before,
	#versionSelector::before{ 
		background-color: #555;
	}
	
	#versionSelector .version[disabled], .selector select[disabled] {
		color: rgba(0,0,0,.3);
	}
}
/*=== END SELECTOR =================================================== */

/*=== START Content : block ======================================================= */
.block_ti, .infoblock_ti{
	margin-block-end:0;
	margin-inline-start:0 !important;
	font-size:1em !important;
}
span.block_ti_co,
.headBlock_ti > span{
	background-image: url("img/block.png");
	background-repeat: no-repeat;
	padding-inline-start: 20px;
	display: inline-block;
	min-height:16px;
}
span.blockType{
	display:none;
}
.block_no_ti.cbkClosed > .block_ti span.blockType{
	display:inherit;
}
.block_no_ti > .block_ti{
	margin:0;
}
.block_no_ti > .block_ti > span.block_ti_co{
	position: absolute;
	background-color: white;
}
.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_ti span.block_ti_co{
	background-position: 0 -58px;
}
.advice_ti span.block_ti_co{
	background-position: 1px -120px;
}
.tip_ti span.block_ti_co{
	background-position: 3px -180px;
}
.example_ti span.block_ti_co{
	background-position: 0 -238px;
}
.note_ti span.block_ti_co{
	background-position: 0 2px;
}
.legal_ti span.block_ti_co{
	background-position: 0 -300px;
}
.complement_ti span.block_ti_co{
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding-inline-start: 0;
}
.block_co{
	padding-block-start: 1px;
	padding-inline-start: 12px;
	margin-inline-start: 8px;
	border-left: 1px solid #C0C0C0;
	border-radius: 0px 0px 0px 5px;
}
.warning > .block_co{
	border-left-color: #FFAAAA;
}
.advice > .block_co{
	border-left-color: #91B8E0;
}
.tip > .block_co{
	border-left-color: #C891E0;
}
.example > .block_co{
	border-left-color: #6EC7C8;
}
.note > .block_co{
	border-left-color: #B6E091;
}
.legal > .block_co{
	border-left-color: #DC84BD;
}
.complement > .block_co{
	border-left-color: #217C8B;
}
.caption{
	text-align: center;
	margin: 0 0 10px 0;
}
.caption_ti{
	font-style: italic;
	color:#676767;
}

.block_btn_closed::before {
    content: "\e80a";
    font-family: "fontello";
    margin-inline-end: 5px;
	font-weight:normal;
}

.block_btn_open::before {
    content: "\e80b";
    font-family: "fontello";
    margin-inline-end: 5px;
	font-weight:normal;
}

.block_ti_co a:hover{
	text-decoration:none;
}

.visavis {
	display: flex;
	flex-flow: row;
	margin: 1em 0;
}

.visavis > .first {
	margin-inline-end: 0.5em;
	padding-inline-end: 0.5em;
	border-right: 1px solid rgb(128, 128, 128);
}

.visavis.half-half > .first {
	flex: 1 1 50%;
}

.visavis.half-half > .next {
	flex: 1 1 50%;
}

.visavis.one-two > .first {
	flex: 1 1 33%;
}

.visavis.one-two > .next {
	flex: 1 1 67%;
}

.visavis.two-one > .first {
	flex: 1 1 67%;
}

.visavis.two-one > .next {
	flex: 1 1 33%;
}

.visavis.auto > div {
	flex: 1 1 auto;
}
/*=== END Content : block ======================================================= */

/*=== START - Content : examples ===================================================*/
a.exLink, a.secLink{
	display: inline-block;
	text-align: center;
	border-radius: 5px;
	margin:5px;
	padding:5px;
}
a.exLink span, a.secLink span{
	display: block;
}

/*=== END Content : examples ======================================================= */

/*=== START - Content : tab-box ===================================================*/
.tab-box {
	margin: 2em 0 0 0;
}
.tab-list{
	display:flex;
	flex-direction:row;
}
.tab-list input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.tab-list label {
  display: block;
	padding: 10px 0 10px 20px;
  border-radius: 2px 2px 0 0;
  font-size: 20px;
  font-weight: normal;
  background: rgba(239, 237, 233, 0.5);
  cursor: pointer;
  position: relative;
  top: 0px; 
  margin-inline-end:3px;
}
.tab-list label .blockAnchor{
	margin-inline: 0 5px;
	font-size: 60%;
	vertical-align: middle;
}
.tab-panels .tab-content{
	border-top:2px solid #217C8B;
}
.tab-panels .tab-content.inactive{
	display: none;
}
.tab-list [id^="tab"]:checked + label { 
	background:#217C8B;
	color:white;
}

/*=== END - Content : tab-box ======================================================= */

/*=== START - Content : ext ===================================================*/
#extList > h3 > span::before{
	font-family: "fontello";
	font-weight: normal;
	margin-inline-end: 0.5em;
	content: "\f1e6";
}
#extList > .depLists > .mod > h4 > span::before{
	font-family: "fontello";
	font-weight: normal;
	margin-inline-end: 0.5em;
	content: "\E81D";
}
#extList > .depLists > .gen > h4 > span::before{
	font-family: "fontello";
	font-weight: normal;
	margin-inline-end: 0.5em;
	content: "\E805";
}
#extList > .depLists > .skin > h4 > span::before{
	font-family: "fontello";
	font-weight: normal;
	margin-inline-end: 0.5em;
	content: "\f1fc";
}

/*=== END Content : ext ======================================================= */

/*=== START - Content : scImgMgr ===================================================*/

/* ========== scImgMgr structural CSS ========== */
/* ---------- gallery ---------- */
.galFra{
	position: relative;
}
.galPv{
	float: left;
	display: block;
	text-align: center;
	padding: 5px;
}
.galPvLnk {
	display:block;
	text-align: center;
	vertical-align:middle;
	width: 122px;
	height: 82px;
	text-decoration: none;
	overflow: hidden;
}
.galPvLnk:hover {
	text-decoration: none;
}
.galClr{
	clear: both;
}
.scImgGalOver{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.scImgGalCvs{
	position: fixed;
	top:50%;
	left:50%;
	z-index:2001;
	text-align: center;
}
.scImgGalFra{
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
.scImgGalCo{
	position: absolute;
	top:10px;
	left:10px;
	list-style: none;
	padding:0;
	margin:0;
}
.scImgGalImgFra{
	position: absolute;
	top:0px;
	left:0px;
	overflow:hidden;
	padding:0;
	margin:0;
}
.scImgGalTbr{
	position: absolute;
	bottom:0px;
	left:0px;
	height: 40px;
}
.scImgGalTbr .scImgGalCount{
	display:inline;
	bottom:3px;
	right: 50px;
}

/* ---------- zoom ---------- */
.scImgZmOver{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.scImgZmCvs{
	position:fixed;
	top:5%;
	left:5%;
	z-index:2001;
	width:90%;
	height:90%;
	overflow: hidden;
}
.scImgZmFra{
}
.scImgZmCo{
	text-align: center;
}
.scImgZmCo div{
	z-index: 2002;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	border:0px;
}
.scImgZmCo iframe{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	border:0px;
}
.scImgZmCo a{
	text-decoration: none;
}
.scImgZmCo a img{
	border:0px;
}

.imgSeq > .caption_co{
	display:inline-block;
	margin:0 auto;
	padding: 5px;
	border-radius: 5px;
	line-height: 1;
}
.imgSeqFra .caption{
	margin:0;
}
.imgSeqFra{
	margin:0 auto;
	background-color: #FFF;
}
a.zoom{
	display: inline-block;
	line-height: 0;
}
.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;
}
.scImgZmFra{
	background-color: white;
	padding:10px;
	border-radius: 10px;
	box-shadow:  0px 0px 20px 0px #999;
}
a.scImgZmBtnCls{
	position:absolute;
	box-sizing: border-box;
	top:-15px;
	right:-15px;
	width:30px;
	height:30px;
	padding-inline-start: 30px;
	overflow: hidden;
	background-image:url("img/close.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
.scImgZmTi{
	text-align: center;
	margin:5px 5px 0px 5px;
	color:#676767;
	font-style: italic;
}
.scImgZmMag{
	border-radius: 5px;
	box-shadow:  0px 0px 10px 0px #555;
}
.scImgAnmCtrl{
	padding-block-start: 5px;
	width: 115px;
	height: 16px;
	position:relative;
	margin:0 auto;
}
.scImgAnmCtrLbl{
	display:none;
}
.scImgAnmBtnInitPly{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background:url("img/playBtn.png") no-repeat center center;
}
.scImgAnmBtnInitPly span{
	display:none;
}
a.scImgAnmBtnPse,
a.scImgAnmBtnPly,
a.scImgAnmBtnNxt,
a.scImgAnmBtnPrv {
	position:absolute;
	box-sizing: border-box;
	width:15px;
	height:12px;
	padding-inline-start: 15px;
	overflow: hidden;
	background-image:url("img/player.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
a.scImgAnmBtnPse {
	left:30px;
	background-position: 0px -90px;
}
a.scImgAnmBtnNxt {
	left: 55px;
	background-position: 1px -60px;
}
a.scImgAnmBtnPrv {
	left:5px;
}
a.scImgAnmBtnPly {
	left:30px;
	background-position: 1px -30px;
}
a.scImgAnmBtnPse:hover,
a.scImgAnmBtnNxt:hover,
a.scImgAnmBtnPrv:hover,
a.scImgAnmBtnPly:hover {
	opacity: 0.8;
}
.scImgSep{
	display:none;
}
.scImgAnmCtrIdx{
	position:absolute;
	left:80px;
	width:15px;
	height:13px;
}
.scImgAnmCtrSep{
	position:absolute;
	left:95px;
	width:10px;
	height:13px;
}
.scImgAnmCtrCnt{
	position:absolute;
	left:105px;
	width:15px;
	height:13px;
}
/*=== STOP - Content : scImgMgr ===================================================*/

/* === START - MODAL ===================================================*/
body.modalIframe {
    overflow-y: hidden;
}
.modal_over {
    position: fixed;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    top: 0;
    bottom: 0;
	z-index: 99;
}
.modal iframe {
    max-width: 70em;
    height: calc(100% - 10vh);
    position: fixed;
    left: 0;
    top: 5vh;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(115, 115, 115, 0.5);
    width: calc(100% - 2em);
    right: 0;
    margin: 0 auto;
	z-index: 999;
}

.modal button.close {
    font-size: 2em;
    padding: 0.2em 0.5em;
    position: fixed;
    top: 0;
    right: 0;
    background-color: transparent;
	color: #217C8B;
	z-index: 9999;
}
.modal button.close::before{
	font-family:"fontello";
	content:"\E806";
}
.modal button.close span{
	position:absolute;
	left:-9999px;
}
/*=== END - MODAL ======================================================= */

/*=== START - TOOLTIP ===================================================*/
.tooltip{
	background-color: #ececec;
	border: 1px solid #2a2d35;
	box-shadow: 0 0 2px #2a2d35;
}
.tooltip_ti{
	background-color: #2a2d35;
	color: #fff;
	line-height: 1.7em;
	min-height:1.7em;
	text-align:center;
}
.tooltip_co{
	padding: 2px 4px;
}
a.tooltip_x::before {
	color: #fff;
	content: "\e806";
	font-family: "fontello";
	font-size: 1.4em;
	font-weight: normal;
}
a.tooltip_x {
	position: absolute;
	right: 2px;
	text-decoration: none;
	top:0;
}
.tooltip_x > span {
	display: none;
}
/*=== END - TOOLTIP ======================================================== */

/*=== START - COOKIE ======================================================= */
.cookieWarnBar_on header {
	margin-block-start: 1.6em;
}
.cookieWarnBar_on #seachBox,
.cookieWarnBar_on #navLangSelector{
	top: 2.1em;	
}
.cookieWarnBar_off .cookieWarnBar {
	display: none;
}
.cookieWarnBar {
	background-color: #fff;
	left: 0;
	padding: 0 3em 0 1em;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
	box-shadow: 0 0 5px rgba(115, 115, 115, 0.5);
}
a.cookieWarnBtn::before {
	content: "\e806";
	font-family: "fontello";
	font-size: 1.4em;
	font-weight: normal;
}
a.cookieWarnBtn {
	position: absolute;
	right: 0.5em;
	text-decoration: none;
	top:0;
}
.cookieWarnBtn > span {
	display: none;
}
.cookieWarnMsg {
	line-height: 1.6em;
}
/*=== END - COOKIE ========================================================= */

/*=== START - RESPONSIVE DESIGN ============================================ */
@media (max-width: 1100px){
	.home .content > #co, .results {
	  max-width: 100%;
	}
}
@media (max-width: 800px){
	.root #main > div {
		flex-direction: column;
	}
	.illustration {
		position: static;
		text-align:center;
		box-shadow: none;
	}
	.illustration:hover{
		box-shadow: none;
	}
	.extBody, .docBody{
		border-left:none;
		margin-inline-start:0;
		padding-inline-start:0;
	}
	.docBody ul{
		padding-inline-start:0;
	}
	.nav_stuck_yes .titleFrame {
		width: 96%;
	}
	.nav_stuck_yes #navigation .pageOutline {
    	font-size: 0.9em;
	}
	.nav_stuck_yes #navigation a {
    	line-height: 1.5;
	}
	#seachBox{
		top: 5px;
	}
}
@media (max-width: 600px){
	.metaFrame {
		display:block;
	}
	.nav_stuck_yes .titleFrame {
		width: 95%;
	}
	.nav_stuck_yes #productTitle {
		font-size: 1em;
	}
	.nav_stuck_yes a.scsoft, .nav_stuck_yes a.linksLink {
    width: 20px;
    height: 16px;
	}
	.nav_stuck_yes a.scsoft span::before, .nav_stuck_yes a.linksLink span::before {
	    width: 20px;
	    height: 20px;
	    margin: 0 10px 0 4px;
	}
}
@media (max-width: 500px){
	.nav_stuck_yes .titleFrame {
		width: 93%;
	}
	.nav_stuck_yes #navigation .pageOutline {
		font-size: 0.85em;
	}
	.tab-list {
		display: flex;
		flex-direction: column;
	}
	.nav_stuck_yes #navigation a {
    line-height: 1.5;
    margin: 0 0.2em 0.3em;
	}
	.visavis {
		display: block;
	}
	.visavis > .first {
		margin-inline-end: 0;
		padding-inline-end: 0;
		border-right: 0;
	}
}