/* ======================================================
SKIN ET-LIOS
=========================================================*/

:root{
  --couleur1:#577da9;
	--couleurHover:rgba(74,107,144,0.1);
	--couleurHover2:rgba(74,107,144,0.05);
  --couleur2:#eff3f7;
  --couleur3:#fcc100;
	--couleurImportant:#D51921;
	--couleurImportant2:#cc73ba
}

@font-face {
  font-family: 'oswald';
  src: url('fontSKIN/Oswald-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'oswaldLight';
  src: url('fontSKIN/Oswald-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'fontelloSKIN';
	src: url('fontSKIN/fontelloSKIN.eot');
	src: url('fontSKIN/fontelloSKIN.eot') format('embedded-opentype'),
	url('fontSKIN/fontelloSKIN.woff') format('woff'),
	url('fontSKIN/fontelloSKIN.ttf') format('truetype'),
	url('fontSKIN/fontelloSKIN.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
    font-family: arial, sans-serif;
}

#home {
    background-color: var(--couleur2);
    background-image: url(img/SKIN/logos.png);
    background-size: 7em;
    background-position: left 0.2em bottom 0.2em;
}

#home > div .home_ti {
    background: var(--couleur1);
    font-family: oswald, sans-serif;
    margin: 0;
    font-weight: normal;
    text-transform: uppercase;
    flex-grow: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#home > div > div.home {
    color: black;
    display: flex;
    flex-direction: column;
    margin-left: 0;
}

#home > div > div.home .home_co{
    box-shadow: 0 0 20px #262626;
	background:white
}

#home > div > nav {
	margin:0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#home > div > nav > button {
    font-family: 'oswald';
    color: black;
    transition: all 0.4s;
	font-size:1.1em;
    padding: 0.2em 0.5em;
    height: auto;
}

#home > div > nav > button:hover {
	background-color: var(--couleurHover);
}

#home > div > nav > button::after {
    background-image: url(img/SKIN/buttons.svg);
}

#home > div .presData {
	color: var(--couleur1);
}

#home > div > nav > .loadingMessage {
	color: var(--couleur1);
    font-family: oswald, sans-serif;
}

h2.slideBk_ti {
	font-family: oswald, sans-serif;
	font-weight:
	normal;
	padding: 0;
	padding-bottom:0.2em;
	padding-right:0.4em;
	background: linear-gradient(0deg, rgba(0,0,0,0.3) 0, var(--couleur1) 20px) var(--couleur1);
}

.slideBk_co {
	background:white
}

li::marker {
    color: var(--couleur1);
    font-size: 1.5em;
}

.ssSlide section.slideBk {
    background: white;
}

#root {
	background: var(--couleur2);
}

#root > main {
	box-shadow: 0 0 20px #262626;
}

#root > .tools button::before {
    background-image: url(img/SKIN/buttons.svg);
    width: 50px;
    height: 50px;
    background-size: 80%;
}

#root > .tools {
	/* padding-top:0.8em; */
}

#root > .tools button {
    border-radius: 0;
    transition: all 0.4s;
    height: 50px;
	width:50px
;
    margin: 0;
}

#root > .tools button:hover,
.tocClose #root > .tools button.btnMenu:hover,
#root > .tools button.btnMenu:hover{
	background-color: var(--couleurHover);
}

#root > .tools button.btnHome::before {
    background-position: 5px -103px;
}

#root > .tools button.btnHelp::before {
    background-position: 5px -315px;
}

.tocClose #root > .tools button.btnMenu::before {
    background-position: 3px -157px;
}

#root > .tools button.btnMenu::before {
    background-position: 3px -157px;
}

#root > .tools button.btnMenu {
    background-color: transparent;
}

#root > .tools button.btnNxt::before {
    background-position: 5px -51px;
}

#root > .tools button.btnPrv::before {
    background-position: 5px 8px;
}

#root > .tools .navbar .slideCount {
	font-family:oswald;
	font-size:1.5em;
	color: var(--couleur1);
}

#root > .tools .progressbar {background-color: var(--couleur1);}

.progCount {
    background-image:
    none;
    background-color: var(--couleur3);
    height: 100%;
    border: 2px solid var(--couleur1);
    box-sizing: border-box;
}

.txt_emphasis_is, .txt_quote_ph, .txt_special_ph {
    color: var(--couleur1);
}

.ssAltSldLnk.ref::after, .ssAltSldLnk.acr::after, .ssAltSldLnk.glos::after, .ssAltSldLnk.bib::after, .ssAltSldLnk.resLnk::after {
    font-family: "fontelloSKIN";
    font-size: 100%;
    color: black;
    content: " \e800";
    background: none;
    height: auto;
    width: auto;
}

p a {
    color: black;
    transition: all 0.4s;
    padding: 4px;
    display: inline-block;
    color: black !important;
    border-bottom: 1px solid var(--couleur3);
	text-decoration:none
}

a:hover {
	text-decoration:none;
	    background-color: var(--couleurHover2);
    text-decoration: none !important;
}
.bkBp {
    background-image: none;
    margin-bottom: 10px;
}

.bkBp>span {
    justify-content: start;
}

.bkBp .bkBase_ti i.type {
    background-image: url("img/SKIN/blocks.svg");
    order: 1;
    font-family: 'oswald';
    font-style: normal;
    font-weight: normal;
    margin-right: 10px;
    font-size: 1em;
    background-size: 62px;
    padding-left: 61px;
}

.bkBp .bkBase_ti span.title {
    margin-left: 0px;
    font-family: 'oswaldLight';
    font-weight: normal;
    font-size: 1.05em;
    flex: unset;
    margin-right: 1em;
    line-height: 1.1em;
}

.bkBp .bkBase_co {
    background-image: none;
    margin-left: 37px;
    border-left: 1px solid var(--couleur1);
    border-radius: 0;
    background-color: transparent;
    padding: 0.2em 0.5em;
    box-sizing: content-box;
}

.bkDef .bkBase_ti i.type {
    background-position: 0 -70px;
}

.bkEx .bkBase_ti i.type {
    background-position: 0 -631px;
}

.bkRem .bkBase_ti i.type {
    background-position: 0 -133px;
}

.bkAdv .bkBase_ti i.type {
    background-position: 0 -381px;
}

.bkWarning .bkBase_ti i.type {
    background-position: 0 -7px;
}

.bkComp .bkBase_ti i.type {
    background-position: 0 -442px;
}

.bkMeth .bkBase_ti i.type {
    background-position: 0 -321px;
}

.bkRemind .bkBase_ti i.type {
    background-position: 0 -256px;
}

.bkSyntax .bkBase_ti i.type {
    background-position: 0 -692px;
}

.bkLegal .bkBase_ti i.type {
    background-position: 0 -196px;
}

.bkSimul .bkBase_ti i.type {
    background-position: 0 -568px;
}

ul ul {
    list-style-type: circle;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

a.op_txt_ul::after, a.txt_url_ul::after, a.extUrl::after, div.docUrl a::after{
    color: black;
    font-family: "fontelloSKIN";
    content: " \f08e";
    font-size: 100%;
    background:
    none;
    width: auto;
    height: auto;
}

.ssAltSldLnk.acr::after {
    content: " \e802";
}

.ssAltSldLnk.ref::after {
    content: " \f11d";
}

.altSlide .bkBase_ti{
	font-family:
	oswald;
	font-weight: normal;
	color: var(--couleur1);
	font-size: 1em;
}

#altSlides .tools button {
    border-radius: 0;
    transition:
    all 0.4s;
    margin: 0;
}

#altSlides .tools button:hover {
	background:var(--couleurHover);
}

#altSlides .tools button.btnPrv::before {
    background-position: 4px 7px;
}

#altSlides.sldAltSlide.sldAltFirstStep .navbar > .btnPrv::before {
    display:none
}

#altSlides.sldAltSlide.sldAltLastStep .navbar > .btnNxt::before {
    display:none
}

#altSlides .btnAltSldCls {
    border-radius: 50%;
    bottom: auto;
    left: auto;
    right: -5px;
}

#altSlides .tools button::before {
    background-image: url(img/SKIN/buttons.svg);
}

#altSlides .btnAltSldCls::before {
    background-image: url(img/SKIN/buttons.svg);
}

.navbar .blockCount{
	font-family: 'oswald';
	color: var(--couleur1);
	font-size: 1.5em;
	margin: 0 0.2em;
}

.navbar.sldNavZoom{
	display:
	flex;
	flex-direction: row;
	align-items: center;
}

.BkObj .bkBase_ti{
	font-family: 'oswald';
	font-weight: normal;
	color: var(--couleur1);
}

.BkObj .bkBase_co{background-color: var(--couleur2);padding: 0.8em;}

p {
    margin: 0.5em;
}

div.bkQuestion,
div.bkExplanations,
div.bkCorrections{
	background-image: none;
}

div.bkQuestion:before,
div.bkExplanations:before,
div.bkCorrections:before {
	content:
	'énoncé';
	font-family: 'oswaldLight';
	background-color: var(--couleur2);
	padding: 0 0.2em;
	text-transform: uppercase;
	font-size: 0.9em;
	margin-bottom: 10px;
	display: inline-block;
}

#zoomFrame .btnZmCls {
    border-radius: 50%;
    bottom: 0;
    right: 0;
    margin: 0;
}

#zoomFrame .btnZmCls::before {
    background-image: url(img/SKIN/buttons.svg);
}

div.mcgSurChoiceNum, div.mcgMurChoiceNum {background-color: var(--couleur3);float: unset;}

div.bkCorrections:before {
    content: 'correction';
}

div.bkExplanations:before {
    content: 'explications';
}

div.mcgSurChoice_ur, div.mcgMurChoice_ur, div.mcqSurChoice_ur, div.mcqMurChoice_ur {
	display:
	flex;
	flex-direction: row;
	align-items: center;
}

div.mcgSurChoiceLbl, div.mcgMurChoiceLbl, div.mcqSurChoiceLbl, div.mcqMurChoiceLbl {
	flex-direction: row;
	flex-grow: 1;
}

div.mcgSurChoiceLbl::before, div.mcgMurChoiceLbl::before, div.mcqSurChoiceLbl::before, div.mcqMurChoiceLbl::before {
    margin: 0 0.5em;
}

.mcgMurGlobalExplanation,
.mcgSurGlobalExplanation {
	background-color: var(--couleur2);
	padding: 0.5em;
}

.ssAltSldLnk.ucLnk::after {
    font-family: "fontelloSKIN";
    font-size: 100%;
    color: black;
    content: " \f08e";
    background:
    none;
    width: auto;
    height: auto;
}

.bkDiv > .bkBase_ti > span {
    border-bottom: 0;
    border-left: 10px solid var(--couleur3);
    padding-left: 7px;
}

.bkDiv > .bkBase_ti {
    text-align: left;
    font-family: 'oswald';
    font-weight: normal;
    background-image: none;
    color: var(--couleur1);
}

.bkDiv .bkDiv > .bkBase_ti > span {
    border-left-width: 6px;
}

.bkDiv .bkDiv .bkDiv > .bkBase_ti > span {
  border-left-width: 3px;
}

.bkDiv .bkDiv .bkDiv .bkDiv > .bkBase_ti > span {
  border-left-width: 1px;
}

.dwnLnk::after, .txt_docLnk_ul::after {content: " \f02e";font-family: "fontelloSKIN";font-size: 100%;color: black;width: auto;height: auto;background: none;}

ol li::marker {
    font-size: 1.2em;
    font-weight: bold;
}

.bkBasic .bkBase_ti {
    color: black;
}

.bkWarning .bkBase_ti {
    color: black;
}

.bkBasic .bkBase_ti i.type {
    background-position: 0 -506px;
    color: var(--couleurImportant2);
}

.bkBasic .bkBase_co {
    border-left: 1px solid var(--couleurImportant2);
}

.bkWarning .bkBase_co {
    border-left-color: var(--couleurImportant);
}

.txt_tb th {
    border: 2px solid var(--couleur3);
    background-color: var(--couleur1);
    color: white;
    font-family: 'oswald';
    font-weight: normal;
}

.txt_tb td {
    border: 1px solid var(--couleur3);
}

.txt_tb .row_tbtr td, .txt_tb .row_tbtr th, .col_tbcl {
    background-color: var(--couleur1);
}

.txt_tb {
	border: 0;
}

blockquote.quoteBk {
	position:
	relative;
	background: transparent;
	padding: 0;
}

blockquote.quoteBk:before, blockquote.quoteBk:after {
    color: var(--couleur1);
    opacity: 1;
    position: absolute;
    content: "«";
    font-size: 3em;
    left: -0.5em;
    top: -0.5em;
}

blockquote.quoteBk:after {
    content: "»";
    right: -0.5em;
    bottom: -0.2em;
	left:unset;
	top:unset
}

div.bkCtx {
    border: 0;
}

.bkCtx .bkBase_ti,
div.bkQuest:before,
div.bkSol:before,
div.bkHint:before{
    font-family: 'oswald';
    font-weight: normal;
    border-bottom: 2px solid var(--couleur1);
    text-align: center;
	color:black;
	font-size:1em;
	display:block
}

div.bkQuest,
div.bkSol,
div.bkHint{
    padding-left: 0;
    background-image: none;
}

div.bkQuest:before{
	content:'Question';
}

div.bkHint:before{
	content:'Indice';
}

div.bkSol:before{
	content:'Solution';
}

.stepAnswer{
	color: green;
}

div.ordWordRand .bkOrdWordLbl {
	border-color: var(--couleur3);
}

span.matchLbl {
	border-color: var(--couleur3);
	background-color: white;
}

div.matchTarget {background-color: var(--couleur1);border-radius: 0;font-family: 'oswald';}

td.matchBskt {background-color: var(--couleur2);border: 0;}

td.matchGroup {border-radius: 0;border: 0;background: var(--couleur2);}

.mcqMurGlobalExplanation,
.mcqMurChoiceExpl,
.mcqSurChoiceExpl,
.mcqSurGlobalExplanation,
.mcgMurChoiceExpl,
.mcgSurChoiceExpl {
	background: var(--couleur2);
	padding:0.5em;
}

.part h2.slideBk_ti, .slideContact h2.slideBk_ti {color: var(--couleur1);border-bottom: 1px solid var(--couleur3);display: inline-block;padding: 0.5em;}

#tocFrame {
	background: white;
	border-right: 1px solid var(--couleur1);
	border-radius: 0;
	transition: all 0.4s;
	overflow:hidden
}

#tocFrame > * {
	width:300px
}
	
.tocSrlUp .tocSrlUpBtn, .tocSrlDwn .tocSrlDwnBtn {
    background: url(img/SKIN/menu-scroller.svg) no-repeat;
    height: 32px;
    transition: all 0.4s;
    width: 100%;
    padding: 0;
    margin: 0;
    background-position: 125px -37px;
}

.tocSrlUp .tocSrlUpBtn {
    background-position: 125px 2px;
}

.tocSrlUpBtn:hover, .tocSrlDwnBtn:hover {
	background-color: var(--couleurHover2);
}

.bkCoQuiz .bkBase_ti span,
.bkCoSol .bkBase_ti span{
    font-family: 'oswald';
    color: var(--couleur1);
    font-weight: normal;
    border-bottom: 1px solid var(--couleur3);
    padding: 0.33em 0.7em;	
}

.ssMask {
	filter: blur(15px);
}
.tocSrlDwn {
    flex: unset;
}

#toc > li {
    background-image: none;
}

#toc li > a{
	background: url(img/SKIN/menu-bullet.svg) no-repeat left center;
	padding-left: 15px;
	position: relative;
	left: -20px;
}

#toc li > a{
	background: url(img/SKIN/menu-bullet.svg) no-repeat left center;
	padding-left: 15px;
	position: relative;
	left: -20px;
}

#toc li.courseUa > a,
#toc li.ueDiv > a{
	padding-left: 0;
	background-image: none;
	left: 0;
}

#toc li.coQuiz > a,
#toc li.match > a,
#toc li.ordWord > a,
#toc li.cloze > a,
#toc li.field > a,
#toc li.mcgMur > a,
#toc li.mcgSur > a,
#toc li.mcqMur > a,
#toc li.mcqSur > a,
#toc li.practUc > a{
	background: url(img/SKIN/menu-bullet-quiz.svg) no-repeat left center;
}

#toc button.btnToggleOpen, #toc button.btnToggleClosed {
    background: url(img/SKIN/menu-toggle.svg);
    width: 15px;
    left: 3px;
	transition:all 0.4s
}

#toc button.btnToggleOpen {
    background: url(img/SKIN/menu-toggle.svg);
    width: 15px;
    left: 3px;
	transform:rotate(90deg)
}

#toc a.selected span {
	background-color: var(--couleur1) !important;
	border-radius: 0;
}

#toc a span {
	margin-left: 5px;
	transition: all 0.4s;
	padding: 3px;
}

#toc a:hover span {
	background: var(--couleurHover2);
}

.tooltip_ti {
    background-color: var(--couleur1);
    font-family: 'oswald';
    font-size: 1em;
}

.tooltip {
    background-color: white;
    border: 2px solid var(--couleur1);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

#scTooltip0Scrol::-webkit-scrollbar-thumb{
    background-color:var(--couleur1);
    border:2px solid var(--couleur2);
}

#scTooltip0Scrol::-webkit-scrollbar-track{
    background-color:var(--couleur2);
} 

#scTooltip0Scrol::-webkit-scrollbar{
    width: 15px;
}

.tocClose #tocFrame {
    display: block;
	width:0
}

.altSlide .slideBk_ti{
	background: var(--couleur1);
	color: white;
	font-family: 'oswald';
	font-weight: normal;
	padding: 0.2em 0.5em;
}

.altSlideRoot{
	border: 2px solid var(--couleur1);
}

#altSlides.sldAltSlide.sldAltLastStep .navbar > .btnNxt:hover,
#altSlides.sldAltSlide.sldAltFirstStep .navbar > .btnPrv:hover{
	background-color:transparent;
}