/* 19-06-14 */
/* 04-05:
- modif .article
- partout : #0CB61E; remplacé par #1d1c5e;
			#FFE184; remplacé par #b5b4e0;
			#F28014; remplacé par #000000; = mise-en-valeur
			#F47E84; remplacé par #000000; = complement-consigne
*/

//18-12-10:
/* jira§8[...] */
/* IK§10-15 */

@font-face {
  font-family: 'MyriadPro';
  src: url('fonts/MyriadPro/MyriadPro-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue/HelveticaNeue-regular.otf');
  font-weight: normal;
}

@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeue/HelveticaNeue-bold.otf');
  font-weight: bold;
}

@font-face {
  font-family: 'FontAwesomeBrand';
  src: url('fonts/FontAwesome/FontAwesome-fa-brands-400.ttf');
  font-weight: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/FontAwesome/FontAwesome-fa-regular-400.ttf');
  font-weight: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/FontAwesome/FontAwesome-fa-solid-900.ttf');
  font-weight: bold;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  cursor: default;
  font-size: 20px;
  /* IK§10-15: ??? 
  font-family: Arial, Helvetica, sans-serif; */
  
  /* IK§10-15 background: #FFE17B; */
}

/*
** Exercises
*/
/* NEW */
article {
 	/* border: dashed red;
 	 margin-right:150px;
  	margin-left:150px;
  	max-width: 800px; */
  }

/* 04-05 */
.article {
  font-family: "Arial";
  font-weight: normal;
  font-size: 17px;
  padding: 15px 45px;
  /* NEW 
  border: dashed red;
  margin-right:150px;
  margin-left:150px; 
  border: dashed red;*/
  margin-right:auto;
  margin-left:auto;
  align: center;
  max-width: 80%;
  overflow: hidden;
}

li:after {
  content: " ";
  display: block;
  clear: both;
}

.difficulte{
  text-align: right;
  display: none;
}

.groupe-consigne {
  padding-bottom: 5px;
}

.appel-audio {
  position: absolute;
  top: 40px;
  display: inline-block;
}

.consignes {
  display: inline-block;
  margin-left: 30px;
}

.consigne {
  color: #060409;
  font-weight: bold;
  font-size: 22px;

}

.complement-consigne {
  font-size: 18px;
  font-weight: bold; 
  line-height: 1.4em;
  color: #000000;
}

.exemple {
  color: #8A8A8A;
}

.reference {
  font-weight: bold;
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;

}

.liste-phrases-drag-drop {
  list-style-type: none;
  color: #8A8A8A;
  padding: 0px;
  margin-top: 0px;
}

.item-phrases-drag-drop {
  line-height: 36px;
}



.reference-drag-drop {
  padding-bottom: 2.3em;
}

.phrase-drag-drop {
  margin-top: 0px;
  color: #000000;
  letter-spacing: -0.11px;
}

.trou-drag-drop {
  text-align: center;
  background: #FFFFFF;
  font-weight: bold;
  color: #000000;
  margin: 5px 3px;
  display: inline-block;
  /*min-width: 100px;*/
  min-width: 40px;
  min-height: 36px;
  /* padding: 5px 10px;  2019 */
    padding-top: 0px;
    padding-bottom: 5px; 
     padding-left: 10px;
      padding-right: 10px;
  vertical-align: middle;
  outline: 3px dashed #9C9C9C;
}

/* rajouts pour test : trou-drag-drop-center, trou-drag-drop-left, trou-drag-drop-right */
.trou-drag-drop-center {
  text-align: center;
  background: #EBF9FF;
  /* border: 2px dashed #02A7E4;
  border-radius: 6px; */
  font-weight: bold;
  font-size: 18px;
  color: #02A7E4;
  letter-spacing: -0.13px;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 5px 10px;
  vertical-align: middle;
}

.trou-drag-drop-left {
  text-align: left;
  background: #EBF9FF;
  /* border: 2px dashed #02A7E4;
  border-radius: 6px; */
  font-weight: bold;
  font-size: 18px;
  color: #02A7E4;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 5px 10px;
  vertical-align: middle;
}

.trou-drag-drop-right {
  text-align: right;
  background: #EBF9FF;
  /* border: 2px dashed #02A7E4;
  border-radius: 6px; */
  font-weight: bold;
  font-size: 18px;
  color: #02A7E4;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 5px 10px;
  vertical-align: middle;
}

.dans-trou {
  padding-top:0px;
}

.reponse-fausse {
  padding-top:0px;
  color:#FF3716;
}

.reponse-vraie {
  padding-top:0px;
  color:#29D437;
}

.reference-drag-drop {
  font-size: 0.9em;
  margin-top:0em;
}

.i {
  font-weight: bold;
}

.mise-en-valeur {
  font-weight: bold;
  color: #000000;
}

.mise-en-valeur-rose {
  font-weight: bold;
  color: #FF69B4;
}

.commentaire {
  display: none;
}

.scoring {
}

.score {
  display: none !important;
}
#score {
  display: none !important;
}

/*
** DD
*/

.choix-drag-drop {
  display: inline-block;
  position: relative;
  touch-action: none;
  margin-left: -10px;
}

.proposition-drag-drop {
  cursor: pointer;
  line-height: 30px;
  display: inline-block;
/* min-width: 100px; */
   min-width: 40px; 
  min-height: 30px;
  padding: 5px 5px;
  /*border: 3px solid #F28014;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20); */
  margin: 5px 5px;
  text-align: center;
  /*background-color: #FFFFFF;*/
  background-color: #b5b4e0; /* §IK */
  color: #FFFFFF;
}


/* §IK => voir js .trou-drag-drop */
.selection-color-dd {
	 background-color: #b5b4e0;
}

.selection-color-recs {
	 background-color: #b5b4e0 !important; 
}


.proposition-drag-drop-selected {
}

.proposition-drag-drop-selected.drag-drop-lock-item {
  opacity: 0.5;
  pointer-events: none;
}

.proposition-drag-drop .proposition {
  margin: 0px;
  color: #343434;
}
/* §IK */
.reponse-vraie-dd {
 /* color: #29D437;
  background-color: #FFFFFF !important;*/ 
   background-color: #29D437 !important;
   color: #FFFFFF;
    /* jira§8 border: 3px solid #29D437 !important; */
   outline: none;
}
/* §IK */
.reponse-fausse-dd {
  /*color: #FF3716;
  background-color: #FFFFFF !important;*/ 
  color: #FFFFFF;
  /* jira§8  border: 3px solid #FF3716 !important; */
  background-color: #FF3716 !important;
  outline: none;
}




/*
** RECS
*/




.trou-drag-drop-recomposer {
  text-align: center;
  background: #FFFFFF;
  font-weight: bold;
  color: #000000;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
 	padding: 5px 10px; 
  vertical-align: middle;
  outline: 3px dashed #9C9C9C;
}



.trou-drag-drop-recomposer .item-drag-drop-recomposer {
 border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0px;
  min-height: 0px;
  margin: 0;
  background-color: #b5b4e0;
	background-size: 100% 100%;
}

.reference-drag-drop {
  padding-bottom: 2.3em;
}

.phrase-drag-drop {
  margin-top: 0px;
  color: #000000;
  letter-spacing: -0.11px;
}

.liste-phrases-drag-drop-recomposer {
  list-style-type: none;
  color: #8A8A8A;
  padding: 0px;
  padding-bottom: 5px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.phrase-a-recomposer {
  text-align: left;
  touch-action: none;
  margin-bottom: 0px;
  margin-left: -10px;
}

.phrase-recomposee{
  margin-top: 0px;
  text-align: left;
  color: #8A8A8A;
  line-height: 36px;
}

.item-drag-drop-recomposer {
  cursor: pointer;
  line-height: 36px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 5px 10px;
  /* §ik: border: 3px solid #F28014;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20); */
  margin: 10px 10px;
  text-align: center;
  /* §ik background-color: #FFFFFF; */
  color: #000000; 
  background-color: #b5b4e0; /* §IK */
}



.item-drag-drop-recomposer-already-selected {
  opacity: 0.5;
}

.reponse-vraie-recs {
 /* color: #29D437;
  background-color: #FFFFFF !important;*/
   background-color: #29D437 !important;
   color: #FFFFFF !important;
   /* jira§8 border: 3px solid #29D437 !important; */
   outline: none;
}
  
.reponse-fausse-recs {
  /* color: #FF3716;
  background-color: #FFFFFF !important; */
  
  color: #FFFFFF;
  /* jira§8 border: 3px solid #FF3716 !important; */
  background-color: #FF3716 !important;
  outline: none;
  
}

/* #ik2019 */
.reponse-vraie-reca {
   background-color: #29D437 !important;
   color: #FFFFFF !important;
   outline: none;
}
  
.reponse-fausse-reca {
  color: #FFFFFF;
  background-color: #FF3716 !important;
  outline: none;
 
}

/*
** MD
*/

.liste-phrase-deroulant {
  list-style-type: none;
  color: #000000;
  margin: auto;
  font-size: 25px;
  letter-spacing: -0.11px;
  padding-left: 0px;
}

.phrase-deroulant-multiple {
  /* §IK  margin-top: 0px; */
  margin-top: 20px;
  margin-bottom: 0px;
}

.trou-menu-deroulant {
 /* background-color: #FFFFFF !important;*/
   background-color: #b3d3f1 !important; /* §IK FFE184 b5b4e0*/ 
  outline: none;
  margin: 5px 5px;
  min-width: 80px;
  cursor:pointer;
  border: 3px solid #9C9C9C;
 /* background-color: #FFFFFF; */
  font-size: 25px;
  letter-spacing: -0.13px;
  border-radius: 1.5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background: url(../css/assets/arrowSelect.png) no-repeat;
  background-position: right 9px bottom 6px;
  background-size: 15px 15px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 30px;
}

.option-md {
	background-color: #FFFFFF !important;
}

.trou-menu-deroulant::-ms-expand {
  display: none;
}

.trou-menu-deroulant:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.reponse-vraie-md {
 /* color: #29D437;
  background-color: #FFFFFF !important;*/
  color: #FFFFFF;
  background-color: #29D437 !important;
}
.reponse-fausse-md {
  /*  color: #FF3716;
  background-color: #FFFFFF !important;*/
  
  color: #FFFFFF;
  background-color: #FF3716 !important;
}

/** #sortable **/
ul.liste-sortable-recomposer-aleatoire  {
  margin: auto;
  width: 300px;
  list-style-type: none;
  padding: 0;
}
ul.liste-sortable-recomposer-aleatoire li {
  cursor: pointer;
  display: block;
  line-height: 40px;
  margin: 15px auto;
  border: 2px solid #02A7E4;
  background:#02A7E4;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 6px;
  color:#FFFFFF;
  letter-spacing: -0.11px;
  font-size:17px;
  height: 40px;
  width: 300px;
  text-align: center;
  -ms-touch-action: none;
}

/*
** QCM
*/

.liste-choix-multiple {
  margin: 0;
}

.item-choix-multiple {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-left: -40px; 
}

/* §ik pour qcm avec image */
.item-choix-multiple-avec-img {
  list-style-type: none;
  padding: 0;
  margin: 0;
 /* margin-left: -40px; */
}
/* §ik pour qcm avec image */
.td-qcm-avec-image {
	width: 30%;
	vertical-align: top; 
	padding-top: 20px;
}

.radiobutton-label {
  line-height: 1.4em;
  padding: 6px 0px;
}

.item-options {
  cursor: pointer;
  display: block;
  margin: 8px 20px;
  padding: 3px 0px 5px 0px;
  color: #000000;
  letter-spacing: -0.11px;
  text-align: left;
  -ms-touch-action: none;
}

.item-options:nth-child(odd) {
  display: list-item;
  vertical-align: top;
  width :100% ;
}

.item-options:nth-child(even) {
  display: list-item;
  vertical-align: top;
  width: 100% ;
}

.item-options:nth-child(even)::after {
  content: "";
  display: list-item;
  clear :both;
}
.item-options:nth-child(odd)::after {
  content: "";
  display: list-item;
  clear: both;
}

.reponse-vraie-qcm {
  color: #FFFFFF;
  border: 3px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-qcm {
  color: #FFFFFF;
  border: 3px solid #FF3716 !important;
  background-color: #FF3716 !important;
}

/*
** QCU
*/

.liste-choix-unique {
  list-style-type: none;
  letter-spacing: -0.11px;
  color: #8A8A8A;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 0px;
}

.liste-options {
  margin-left: -40px;
  margin-bottom: 25px;
}

.phrase-qcm {
  color: #000000;
  letter-spacing: -0.13px;
  /* margin-top: 0px;*/
  /* §ik */
  margin-top: 10px;
  margin-bottom: 5px;
}

.reponse-vraie-qcu {
  color: #FFFFFF;
  border: 3px solid #29D437 !important;
  background-color: #29D437 !important;

}

.reponse-fausse-qcu {
  color: #FFFFFF;
  border: 3px solid #FF3716 !important;
  background-color: #FF3716 !important;
}

ul.liste-options {
  list-style-type: none;
}


/*
**                  VRAI-FAUX
*/


/* IK§10-15  ul*/
.liste-options-vf {
  list-style-type: none;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
 }
/* IK§10-15 : */
.item-options-vf {
  cursor: pointer;
  display: list-item;
  /* margin: 15px 5px; */
  margin: 10px 15px 0px 15px;				 /* IK§10-15 : margin */
  padding: 6px 15px 6px 0px; 		/* IK§10-15 : padding right : 15px */
  color: #000000;
  letter-spacing: -0.11px;
  text-align: left;
  width: 40%;
  -ms-touch-action: none;
}
/* IK§10-15 : */
#sep-item-options-vf {
	min-width: 30px;
}


.radiobutton-label-vf {
  line-height: 1.4em;
  padding: 4px 0px;
  font-family: Arial;
  font-weight: 500;
}

.reponse-vraie-vf {
  color: #FFFFFF;
  border: 3px solid #29D437 !important;
  background-color: #29D437 !important;

}

.reponse-fausse-vf {
  color: #FFFFFF;
  border: 3px solid #FF3716 !important;
  background-color: #FF3716 !important;
}

/*
** REL
*/

@media screen and (max-width: 768px) {
  #myCanvas {
    width: 70px;
  }

  #myCanvasDiv {
    width: 70px;
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  #myCanvas {
    width: 130px;
  }

  #myCanvasDiv {
    width: 130px;
    position: relative;
  }
}

.relier {
  margin: auto;
  border-spacing : 0;
  border-collapse : collapse;
}
.relier td {
  border:none;
  outline:none;
}

/* 18_11_27 */
.relier-td-texte-source {
  cursor: default;
  display: inline-block;
  max-width: 180px;
  min-height: 25px;
  border: 3px solid #959595 !important;
  background-color: #FFFFFF;
  color: #000000;
  letter-spacing: -0.11px;
  padding: 10px 0px;
  /*padding: 5px 10px;*/
  padding-left: 30px;
  padding-right: 5px;
  text-align: left !important;
  margin: 5px;
  margin-right: 20px;
}
/* 18_11_27 */
.relier-td-texte-cible {
  cursor: default;
  display: inline-block;
  max-width: 180px;
  min-height: 25px;
  border: 3px solid #959595 !important;
  background-color: #FFFFFF;
  color: #000000;
  letter-spacing: -0.11px;
 padding: 10px 0px;
 /*  padding: 5px 10px;
  padding-left: 20px;
  padding-right: 30px;*/
   padding-left: 5px;
  padding-right: 40px;
  text-align: left !important;
  margin: 5px;
  margin-left: 20px;
}


.relier-phrase-source {
  margin: 0px 10px 0px 0px;
  line-height: 25px;
}
.relier-phrase-cible {
  margin: 0px 0px 0px 10px;
  line-height: 25px;
}

.gauche {
  cursor: pointer;
  border: 1px solid #857540;
  border-radius: 100px;
  height: 20px;
  width: 20px;
}
.droite {
  cursor: pointer;
  border: 1px solid #857540;
  border-radius: 100px;
  height: 20px;
  width: 20px;
}

.gauche.active {
  cursor: pointer;
  border: 1px solid #8A8A8A;
  border-radius: 100px;
  background-color: #315D4C;
  height: 20px;
  width: 20px;
}
.gauche.active.vraie {
  background-color: #29D437;
}

.gauche.active.faux {
  background-color: #FF3716;
}
.droite.active {
  cursor: pointer;
  border: 1px solid #8A8A8A;
  border-radius: 100px;
  background-color: #315D4C;
  height: 20px;
  width: 20px;
}

.droite.active.vraie {
  background-color: #29D437;
}

.droite.active.faux {
  background-color: #FF3716;
}

/*
** SEL
*/

.phrase-selection-clic {
  margin: 0px;
}

.liste-phrases-selection-clic {
  list-style-type: none;
  color: #000000;
  line-height: 1.6em;
  word-spacing: 0.1em;
  padding-left: 0px;
  margin-top: 0px;
}

.reponse-vraie-sel {
  color: #FFFFFF;
  background-color: #29D437 !important;
  border-radius: 6px;
  
}
.reponse-fausse-sel {
  color: #FFFFFF;
  background-color: #FF3716 !important;
  border-radius: 6px;
 
}

/* §ik : pour faire rentrer les fractions dans la couleur dans SEL-CLIC ??? */
/* §ik : repercusiions ailleurs  ??? */
.couleur1, .couleur2, .couleur3, .couleur4, .reponse-vraie-sel, .reponse-fausse-sel {
  /*padding: 3px 5px;*/
  /* §ik */
  padding-top: 7px;
   padding-bottom: 9px;
    padding-left: 5px;
     padding-right: 5px;
}

/*
** TRI
*/

.propositions {
  list-style-type: none;
  text-align: left;
  margin: 0px 0px 20px -10px;
  padding-left: 0px;
  touch-action: none;
}



  
  
.propositions li {
  display: inline-block;
  cursor: pointer;
  line-height: 30px;
  min-width: 100px;
  min-height: 30px;
  /*box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);*/
  margin: 8px 5px;
  text-align: center;
  background-color: #FFFFFF;
}


h5.proposition {
  margin: 0px;
  font-size: 17px;
  color: #000000;
  letter-spacing: -0.10px;
  /* §IK border: border: 3px solid #F28014 !important; */
  padding: 5px 30px;
  font-weight: normal;
   background-color: #b3d3f1; /* §IK b5b4e0*/ 
   
  
}


.tbl_cible {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  touch-action: none;
}

.tbl_header {
  /*border: 3px solid #81066C;*/
 /* border: 3px solid #1d1c5e; */
 border: 3px solid #1d1c5e;
  overflow: hidden;
}

.tbl_header td {
  /*background: #81066C;*/
  background: #1d1c5e;
  border: 3px solid #ffffff;
  color: #FFFFFF;
  font-size: 20px;
  letter-spacing: -0.11px;
  text-align: center;
  margin: 5px;
}

.tbl_body td {
  background: #FFFFFF;
 /* border: 3px solid #81066C; */
 border: 3px solid #1d1c5e; 
  border-radius: 6px;
  color: #8A8A8A;
  font-size: 17px;
  letter-spacing: -0.11px;
  text-align: center;
}

.bloc-droppable {
  display: inline-block;
  top: 0px;
  width: 100%;
  min-height: 200px;
  -ms-touch-action: none;
}

.reponse-vraie-tri .proposition{
  color: #FFFFFF !important;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
  margin: 1px;
}

.reponse-fausse-tri .proposition{
  color: #FFFFFF !important;
  border: 1px solid #f9100b !important;
  background-color: #f9100b !important;
}

.tri-item-selected {
  opacity: 0.5;
}

/*
** ZE
*/



.liste-phrases-a-completer {
  list-style-type: none;
  margin-top: 20px;
  margin-bottom: 0px;
  padding-left: 0px;
}

.item-phrases-a-completer {
	 line-height: 36px;
     /* margin: 0px; 2019: */
     margin-bottom: 50px; /* 2019 */
}

.phrase-modele {
  /*padding-bottom: 1.3em;*/
/*  font-size: 17px; */
  color: #8A8A8A;
  letter-spacing: -0.11px;
  
}

.phrase-a-completer {
  color: #000000;
  line-height: 30px;
  margin-top: -10px;
  margin-bottom: 36px; /* ik2019 */
}
/* ik2019
p.phrase-a-completer {
  color: #000000;
  margin-bottom: 36px;  
}
*/
//18-12-10:
.phrase-a-completer input::-ms-clear {
    display: none;
}

#span-helper-to-resize-input {
  /* same css than trou-texte-editable */
  font-weight: normal;
  font-size: 17px;
  letter-spacing: -0.11px;
 
}

.trou-texte-editable {
  font-weight: normal;
  font-size: 17px; 
  /* §ik  font-size:17px;: */
  letter-spacing: -0.11px;

  display: inline-block;
  min-width: 80px;
  width: 80px;
  min-height: 30px;
  border: 3px solid #959595 !important;
  border-radius: 1.5px;
  margin: 4px 0px;
  padding: 2px 6px;
  vertical-align: center;
  color: #000000;
  cursor: default;
  outline: none;
  background-color: white;
  max-width: 100%;
}

 
 

/* TEST */
.trou-texte-editable-left {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  /*border: 2px solid #02A7E4;
  border-radius: 6px;*/
  text-align: left;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

/* TEST */
.trou-texte-editable-right {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  /*border: 2px solid #02A7E4;
  border-radius: 6px;*/
  text-align: right;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

/* TEST */
.trou-texte-editable-center {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  /*border: 2px solid #02A7E4;
  border-radius: 6px;*/
  text-align: center;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

.trou-texte-editable-correction-label {
  display: inline-block;
  /* min-width: 80px; */
  min-width: 5px;
  min-height: 30px;
  border: 3px solid #959595 !important;
  border-radius: 1.4px;
  margin: 4px 0px;
  padding: 2px 6px;
  vertical-align: center;
  font-weight: normal;
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #29D437;
  cursor: text;
  outline: none;
  text-align: left;
  background-color: #FFFFFF;
}



.reponse-vraie-ze {
  color: #29D437 !important;
  border: 3px solid #959595 !important;
  background-color: #FFFFFF !important;
}
.reponse-fausse-ze {
  color: #FF3716 !important;
  border: 3px solid #959595 !important;
  background-color: #FFFFFF !important;
}

.reponse-fausse-ze-vide {
  color: #FF3716 !important;
  border: 3px solid #959595 !important;
  background-color: #FFFFFF !important;
   min-width: 20px;
}

/*
**  Custom checkbox input
*/
.radiobutton-label {
  padding: 4px 0px;
}

/* Hide default case */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

/* Custom label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  display: block;
  position: relative;
  padding-left: 50px;
  padding-right: 10px;
  cursor: pointer;
}

/* Create checkbox */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 12px;
  top: 2px;
  width: 25px;
  height: 25px;
  border: 1px solid #b1b1b2;
  background-color: #FFFFFF;
  border-radius: 100px;
}

/* Custom if not checked */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border-radius: 100px;
  transition: all .2s;
}
/* Custom if checked */
[type="checkbox"]:checked + label:after {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00c";
  color: #32CD32;
  font-size: 17px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 19px; top: 9px;
  transition: all .2s;
}

/*Case of correction */
.reponse-to-hide-for-correction-qcm [type="checkbox"]:checked + label:after {
  opacity: 0;
  transform: scale(0);
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border-radius: 100px;
  transition: all .2s;
}

.reponse-vraie-qcm [type="checkbox"]:checked + label:after {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00c";
  color: #29D437;
  font-size: 17px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 19px; top: 9px;
}

.reponse-fausse-qcm [type="checkbox"]:checked + label:after {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00d";
  color: #FF3716 !important;
  font-size: 17px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 20px;
  top: 9px;
}

/*
**  Custom radio input
*/

/* Hide default case */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

/* Custom label */
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  display: block;
  height: 150%;
  position: relative;
  padding-left: 50px;
  padding-right: 10px;
  cursor: pointer;
}

/* Create checkbox */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left: 12px;
  top: 4px;
  width: 25px;
  height: 25px;
  border: 1px solid #b1b1b2;
  background-color: #FFFFFF;
  border-radius: 100px;
}

/* Custom if not checked */
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border-radius: 100px;
  transition: all .2s;
}
/* Custom if checked */

.item-options [type="radio"]:checked + label:after  {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00c";
  /* color: #315D4C; */
  color: #32CD32;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 19px; top: 9px;
  transition: all .2s;
}
/* §IK : */
.item-options-vf [type="radio"]:checked + label:after  {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00c";
   /* color: #315D4C; */
  color: #32CD32;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 19px; top: 9px;
  transition: all .2s;
}


/*******************************************************/
/* correction for: bad check assignement at correction*/

.reponse-vraie-qcu [type="radio"]:checked + label:after {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00c";
  color: #29D437;
  font-size: 17px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 19px; top: 9px;
}
.reponse-fausse-qcu [type="radio"]:checked + label:after {
  font-family: 'FontAwesome';
  font-weight: bold;
  content: "\f00d";
  color: #FF3716 !important;
  font-size: 17px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 20px; top: 9px;
}

/********************** end correction ************************************/
/*************************************************************************/


/*
** Validations buttons
*/
/* 04-05 */
.boutons-interactivite {
  overflow: hidden;
  clear: both;
 /* padding-left: 35px;
  padding-right: 35px; */
  margin-top: 15px;
  margin-bottom: 43px;
  
  margin-right:auto;
  margin-left:auto;
  align:center;
  max-width: 80%;
}

.boutons {
  cursor: pointer;
  text-align: left;
  font-family: "Arial";
  font-size: 20px;
  color:  #33ffe9 ;
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: 180px;
  width: 90%;
  height: 40px;
  padding-left: 25px;
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
}

.effacer {
  background:   #f5e702  ;
  border: 2px solid #F69223;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 20px;
  color:  #e10516 ;
  float: left;
  outline : none;
  margin-right:20px;
  background-image:url(./assets/efface.png);
  background-repeat:no-repeat;
  background-position:right 8px top;
}

.suivant {
  background: #009FE4;
  border: 2px solid #009FE4;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 20px;
  color: #FFFFFF;
  float: right;
  outline : none;
  background-image:url(./assets/suite.png);
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.correction {
  background: #E2007A;
  border: 2px solid #E2007A;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 20px;
  color: #FFFFFF;
  float: right;
  outline : none;
  background-image:url(./assets/bleu.png);
  background-repeat:no-repeat;
  /*background-position:right 10px center;*/
  						/*background-position:left  calc(0px + 100%)  center;*/
  background-position:right 0px center;
  
}

.valider {
  background: #70C318;
  border: 2px solid #78C318;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 20px;
  color:  #f50265 ;
  float: right;
  outline : none;
  background-image:url(./assets/picto-valid.png);
  background-repeat:no-repeat;
  background-position:right 10px center;
 
}

.aide-button {
  height: 50px;
  width: 180px;
  margin-top: 50px;
  background: #8B8B8B;
  border: 2px solid #8B8B8B;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 80px;
  color: #FFFFFF;
  float: left;
}

.mot {
  display: inline;
  cursor: pointer;
}

.selection-clic-bloc-couleurs {
  text-align: center;
  margin-top: 25px;
}

.color-selected {
  opacity: 1 !important;
}

.bloc-couleur {
  opacity: 0.2;
  cursor: pointer;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 130px;
  height: 80px;
  display: inline-block;
}

div.BLOC-COULEUR-1  {
  /*blue*/
  background-image: url(./assets/stabilo-blue.png);
}

div.BLOC-COULEUR-2  {
  /*red*/
  background-image: url(./assets/stabilo-pink.png);
}


div.BLOC-COULEUR-3  {
  /*green*/
  background-image: url(./assets/stabilo-purple.png);
}

div.BLOC-COULEUR-4  {
  /*yellow*/
  background-image: url(./assets/stabilo-orange.png);
}

.couleur1 {
  background-color: #00A0E0;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur2 {
  background-color: #E3007E;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur3 {
  background-color: #662881;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur4 {
  background-color: #E85C21;
  border-radius: 6px;
  color: #FFFFFF;
}

* html #bloc1 { height: 18em; } /* IE6 */


* html #bloc3 { height: 18em; } /* IE6 */

/* ============================================================ */
/* tableaux dans ZE et DD */
/* ============================================================ */
.ze-tableau {
  border-collapse: collapse;
  width:100%;
}
.ze-tr   {
  border: 1px solid black;
}
.ze-td   {
  border: 1px solid black;
}
.ze-td  {
  width:200px;
  min-width: 5rem;
  height: 1.5em;
  text-align: center;
  font-weight: bold;
}
.ze-td-titre {
  background-color: #b3d9ff;
  border: 1px solid black;
  /* width:200px; */
  width:100%;
  min-width: 5rem;
  height: 1.5em;
  text-align: center;
  font-weight: bold;
}
.ze-td  input
{
  display: inline-flex;
  width: 3px;
  min-width: 5rem;
  text-align: center;
  height: 1.5em;
  border: 0.1em solid #243588;
  border-radius: 0.4em;
  background-size: 100% 100%;
  vertical-align: top;
  outline: none;
  font-weight:bold;
}



/* §IK tableau DD */

.dd-tableau {
  border-collapse: collapse;
  width:100%;
}
.dd-tr {
  border: 1px solid #1d1c5e;
}
.dd-td {
  border: 1px solid #1d1c5e;
}
.dd-td {
  min-width: 4rem;
  height: 1.5em;
  text-align: center;
  /* jira§7 §18_11_22 font-size:16px; */
  font-weight:normal;
  font-family: Arial;
}


.dd-td-titre {
color: #FFFFFF;
  background-color: #1d1c5e;
  border: 1px solid #FFFFFF;
  min-width: 4rem;
  height: 1.5em;
  text-align: center;
  /* jira§7 §18_11_22 font-size:16px; */
  font-size:20px;
  font-weight:bold;
 font-family: Arial;
}

.dd-td-titre-faux {
/*color: #FFFFFF;
  background-color: #1d1c5e;
  border: 1px solid #FFFFFF;
   font-weight:bold;
   font-size:20px;
   */
  min-width: 4rem;
  height: 1.5em;
  text-align: center;
  /* jira§7 §18_11_22 font-size:16px; */
  
 
 font-family: Arial;
}


/* §IK : non 
.dd-td    span.trou-drag-drop {
  text-align: center;
  outline: 3px dashed #1d1c5e;
}
*/






/* rajout de BLED V1 : */
.picto-audio {
  position: relative;
  /* top: 30px; */
  vertical-align: middle;
  margin-top: 7px;
  margin-right: 3px;
  height: 20px;
  width: 20px;
}
.picto-consigne {
  position: relative;
  /* top: 30px; */
  vertical-align: middle;
  margin-top: 9px;
  margin-right: 3px;
  height: 20px;
  width: 20px;
}

.block-user-interactions {
  pointer-events: none;
}


/* §ik
** IMG float left dans RELIER, QCM, QCU    
*/

#container {
position:relative;
}
.appel-image{
	margin-top: 10px;
}

#container img {
position:absolute;
float:left;
left:0;
top:0;
}


#container .table-div {
position:relative; 
/*padding-right:'images-width';*/
/*padding-left:230px;*/
/* padding-left ou margin-left: : calculer/mettre dans élément html  */
}


/* §18_11_22: */
.image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*width: 50%;*/
}
/* §18_11_22: */
.image-float {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: left;
    /*width: 50%;*/
}


/*
** SEL IMG
*/


.imageClic {
	display: inline-block;
	cursor: pointer;
    margin:5px;
    padding: 5px;
    border: 0.1em solid #DCDCDC;  /* 243588 */
	border-radius: 0.4em;
	text-align:center;
	vertical-align: middle;
	/* line-height:200px;  IMPORTANT !!! : calculer/poser dans conv html */
    /* min-width: 200px;   IMPORTANT     : calculer/poser dans conv html */
    /* NON min-height:200px; */
}


.imageClic img {
	vertical-align: middle;
}

.imageClicVrai {
/*	display: inline-block;
	cursor: pointer;
     	margin:5px; */
     	border: 0.3rem solid #29D437;
	border-radius: 0.4em;
}

.imageClicFaux {
/*	display: inline-block;
	cursor: pointer;
     	margin:5px; */
     	border: 0.3rem solid #FF3716;
	border-radius: 0.4em;
}

.item-selection-clic {
	list-style: none;
	display: inline-block;
}

/* §ik rajouts : */
.couleur-selimg1 {
  /*background-color: #00A0E0; */
  border: 0.3rem solid #00A0E0;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur-selimg2 {
  /*background-color: #E3007E;*/
  border: 0.3rem solid #E3007E;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur-selimg3 {
 /* background-color: #662881; */
  border: 0.3rem solid #662881;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur-selimg4 {
 /* background-color: #E85C21; */
  border: 0.3rem solid #E85C21;
  border-radius: 6px;
  color: #FFFFFF;
}			
			
matmlx *.[mathvariant="normal"] {
  font-family: Arial, "HelveticaNeue", MyriadPro, Garamond, serif;
  font-weight: normal;
  font-style: normal;
  color: red;
}
		

/* FLECHES */
/* Footer avec flèches */
#content-left-footer
{
    position: relative;
    display: inline-block;
    left: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

/* Flèches + rollover */
#content-left-footer .fleche
{
    display:inline-block;
    width:54px;
    height:54px;
    margin: 0px 15px;
}

#content-left-footer .fleche.inactif
{
    background:none !important;
}

#content-left-footer #fleche-gauche
{
    background:url("../css/assets/fleche_gauche.png");
    background-repeat:no-repeat;
}

#content-left-footer #fleche-gauche:hover
{
    background:url("../css/assets/fleche_gauche_hover.png");
}

#content-left-footer #fleche-droite
{
    background:url("../css/assets/fleche_droite.png");
    background-repeat:no-repeat;
}

#content-left-footer #fleche-droite:hover
{
    background:url("../css/assets/fleche_droite_hover.png");
}

.appel-image-MN {
	margin-top: 20px;
	
    height: auto;
	 
}