@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
body{
   /* color: #333;
    font-family: 'Lato',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 150%;
    font-size: 100%;
    width:1024px;
    height:100%;
    color:black;
    background-color:white;
    background-image:url(../img/image_de_fond.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-top:0px;
    margin-left: auto ;
    margin-right: auto ;
    margin-bottom: 0px ;*/
}
.small-caps{
    font-variant: small-caps;
}

.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
.zoneblanche{
    width:250px;
}
.module {
    display: inline-block;
    cursor: move;
}
.underline{
    text-decoration:underline;
}
.module:hover{
    background: lightgrey;
}

#datasource span {
    margin-left: 5px;
    margin-right: 5px;
}
.droppableImg{
    width: 250px;
    height:250px;
}
#datasource:hover{
    border:solid  1px #F7BE81;     
}

.spot {
    display: inline-block; 
}



#datasource {
    border:solid 1px transparent;   
}

.point {
    display:inline-block;
    color: white; 
    font-weight: bold; 
    background-color: #06a; 
    /* margin: 5em auto; */
    text-align: center; 
    line-height: 70px; 
    height: 19px; 
    width: 19px; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;
    cursor:pointer;
    z-index: 1;
}

.line {
    position: relative;
    width: 3px;
    background-color: #06a;
    z-index: 5000;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
#new-link-line {
    position: absolute;
}
.phrases {
    cursor:move;
}
.idTitre{
    font-size:32px;
    font-family:"Open Sans", Times, sans-serif;
    font-weight: bold;
}
.idSTitre{
    font-size:16px;
    font-family: "Open Sans", Times, sans-serif;
}
.idSSTitre{
    font-size:16px;
    font-family: "Open Sans", Times, sans-serif;
}
.idSTitre img {
    width:150px;
}

h1{
    font-size:32px;
    font-family:"Open Sans", Times, sans-serif;
    margin-bottom:40px;
}
h2{
    font-size:24px;
    font-family:"Open Sans", Times, sans-serif;
    font-weight: bold;
}

.level{
    width:35px;
    align:right;
    display: inline-block;
    margin-left: 2px;
padding-top: 5px;

}
#underLogo a:link{ color: black; text-decoration:none; }
#underLogo a:visited{ color: black; text-decoration:none; }
#underLogo a:hover, a:focus{ color: black;text-decoration: underline; /*font-weight: bold;text-decoration:none;*/ }

/*#nav a:link{ color: #FFF; }
#nav a:visited{ color: #FFF; }
#nav a:hover, a:focus{ color: #FFF; text-decoration:none; }*/
.precent{
    color: white;
    font: 24px helvetica, sans-serif;	
    display: block;
    margin-left:230px;
}
#fade{
    filter:alpha(opacity=80);
    display:block;
}
#fade { /*--Masque opaque noir de fond--*/
    display: none; /*--masqué par défaut--*/
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .80;
    z-index: 99;
}
#fadeOn { /*--Masque opaque noir de fond--*/
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0.99;
    z-index: 99;
}

#intro p{
    margin-bottom: 20px;
    font: 18px "Open Sans", Times, sans-serif;
}
br.double{
    margin-bottom: 20px;
}
form.id {
    width: 725px;
    padding: 10px 20px;
}
form.id p {
    margin: 1em 0;
}
form.id p.double {
    overflow: hidden;
    width: 100%;
}
.saisir{
    border: none;
    font: 18px "Open Sans", Times, sans-serif;
    padding: 0px;
    margin: 0px;
    border-bottom:1px solid black;
}
form.id p.double label {
    float: left;
    width: 150px;
    text-align: right;
    font-weight: bold;
    cursor: pointer;
}
form.id p.double label span.info {
    display: block;
    margin-top: .2em;
    font-size: .8em;
    font-weight: normal;
    cursor: default;
}
form.id p.double input,
form.id p.double textarea {
    width: 250px;
    margin-left: 12px;
    border: solid 1px midnightblue;
    padding: 2px 4px;
}
form.id p.double textarea {
    padding: 2px 0 0 4px;
    width: 320px;
    height: 6em;
}
form.id p.simple {
    margin-right: 0px;
    margin-top: 40px;
}       
p{
    /*text-align:right;*/
}
.popup_block{
    display: none; /*--masqué par défaut--*/
    background: #fff;
    padding: 20px;
    border: 5px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
img.btn_close {
    float: right;
    margin: -50px -50px 0 0;
}
img.action{
    height:38px;
}
img.status{
    height:15px;
    width: 15px;
    margin: -50px -50px -2px 10px;
}
/**html #fade {
    position: absolute;
}
*html .popup_block {
    position: absolute;
} */

#Thequiz2{
    margin-left: auto ;
    margin-right: auto ;
    margin-top:30px ;
    margin-bottom:10px ;
    width:800px;
    background: #fff;
    /*float: left;*/
    font-size: 1.2em;

    padding-top: 20px;
   /* padding-left: 20px;*/
    padding-bottom: 20px;

border: 15px solid #A6102F;

}

#connexion{
    margin-left: auto ;
    margin-right: auto ;
    margin-top:30px ;
    margin-bottom:10px ;
    background: #fff;
    /*float: left;*/
    font-size: 1.2em;
    width: 300px;
    padding-top: 20px;
   /* padding-left: 20px;*/
    padding-bottom: 20px;

border: 15px solid #A6102F;

}

#game_content{
   /* margin-left: auto ;
    margin-right: auto ;
    margin-top:30px ;
    margin-bottom:10px ;
    width:800px;
    background: #fff;
    font-size: 1.2em;

    padding-top: 20px;
   padding-left: 10px;
   padding-right: 10px;
    padding-bottom: 20px;

border: 15px solid #A6102F;*/


}
#instructions{
    font-weight: bold;
    margin-bottom: 10px;
}

#underLogo{
/*    margin-top: 20px ;
    text-align:left;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    font: 20px "Open Sans", Times, sans-serif;
    background: #fff;*/
}
#underLogoIndex{

    width:100%;
    margin-left:auto;
    margin-right:auto;
    font-size:16px;
    font-family:"Open Sans", Times, sans-serif;
}

#logo{
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    width:800px;
    height: 184px;
}

#logo img {
    float: left;
}
#couvBd {
    float: right;
    margin-left:5%;
}

ul {
    list-style-type: none;
}
.faux{
    color:red;
    /*text-decoration: line-through;*/
}
.correct{
    color:green;
}

.correction{
    color:green;
}
#title{text-align:center}
/*Les boutons*/

#audio
{
    /*   width: 300px;
       margin-left:70%;
       margin-top: -70px;*/
    width: 300px;
    margin: 0 auto;
    margin-top: -10px;
}
.audio
{
    display: block;
    width: 300px;
    margin-top: 50px;
    /*height: 50px;*/
    padding: 1em;
    background: #fff ;
    /*border: medium solid #aa0428;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);*/
}

.classnameBleu {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0px;
 text-shadow: 1px 1px 3px #666666;
 font-family: 'Open Sans', sans-serif;
 color: #ffffff;
 font-size: 20px;
 background: #666666;
 padding: 10px 10px 10px 10px;
 text-decoration: none;

}

.classnameBleu:hover {
 background: #d9dadc;
 text-decoration: none;
}

.classnameBleu:active {
    position:relative;
    top:1px;
}

.classnameJaune {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0px;
 text-shadow: 1px 1px 3px #666666;
 font-family: 'Open Sans', sans-serif;
 color: #ffffff;
 font-size: 20px;
 background: #c17b12;
 padding: 10px 10px 10px 10px;
 text-decoration: none;
}


.classnameJaune:hover {
 background: #efab00;
 text-decoration: none;
}

.classnameJaune:active {
    position:relative;
    top:1px;
}

.classnameRouge {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0px;
 text-shadow: 1px 1px 3px #666666;
 font-family: 'Open Sans', sans-serif;
 color: #ffffff;
 font-size: 20px;
 background: #b82730;
 padding: 10px 10px 10px 10px;
 text-decoration: none;
}

.classnameRouge:hover {
 background: #ff0033;
 text-decoration: none;
}

.classnameRouge:active {
    position:relative;
    top:1px;
}

.classnameVert {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0px;
 text-shadow: 1px 1px 3px #666666;
 font-family: 'Open Sans', sans-serif;
 color: #ffffff;
 font-size: 20px;
 background: #46a12c;
 padding: 10px 10px 10px 10px;
 text-decoration: none;
 width: 150px;
}

.classnameVert:hover {
 background: #d4d700;
 text-decoration: none;
}

.classnameVert:active {
    position:relative;
    top:1px;
}
.bar, .progression{
    display: block;
    height: 30px;
    width: 500px;

    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.progression{
    background-color: green;
}
.bar{
    background-color: red;
    margin: 0 0 10px;
    -moz-box-shadow: 1px 1px 4px #999;
    -webkit-box-shadow: 1px 1px 4px #999;
    -o-box-shadow: 1px 1px 4px #999;
    box-shadow: 1px 1px 4px #999;
}





#infolien {
    margin-left: 30%;

    width: 100%;
    bottom: 0;
}
#infolien ul /* Liste */     
{
    padding : 0; /* pas de marge intérieure */
    margin : 0; /* ni extérieure */
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 20px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */

}

#infolien li+li {
    border-left-style: solid;
    border-left-color: black;
    border-left-width: 2px;
}

#infolien a /* Contenu des listes */
{
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */   
    color : #000; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    margin-left: 15px;
    margin-right: 15px;
}

#infolien a:hover {
    cursor: pointer;
}


#infolien li /* Elements des listes */      
{ 
    float : left; 

}

.topnav {
  overflow: hidden;
  background-color: #D9DADC;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
}
.topnav .custom_menu{margin:0; padding-left: 20px;    padding-right: 20px;}
.topnav .custom_menu ul.custom_menu_inner{padding-left: 0;    padding-right: 0;}
.topnav a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #A6102F;
  color: #fff !important;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top:57px;
  padding: 0;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #A6102F;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content,.dropdown.active .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn,.custom_menu {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .dropdown-content {
    top:5px;
	}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a,.topnav.responsive .custom_menu {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


#footer {
    margin:0px;
    background-image:url(../img/footer.png);
    height: 215px;
    width: 800px;
    margin-bottom: -20px;
    /*margin-left: -20px;*/
}
#footer_green {
    margin:0px;
    background-image:url(../img/footer_green.png);
    height: 215px;
    width: 800px;
    margin-bottom: -20px;
    /*margin-left: -20px;*/
}

#copyright{
    margin-right: 15px ;
    margin-top: 165px;
    float: right;
    color: #000;
    text-align:center;
    line-height: 30px;
}

#copyright a {
    text-decoration: none;
    color:#000;
}

#copyright a:hover{
    cursor:  pointer;

}