/* Styles */

.menuButton{
  display:none;
}

.adminClose,
.adminOpen,
.userOpen,
.userClose,
.hamburger,
.cross{
  background:none;
  position:relative;
  padding:2px 0px 0px 3px;
  border:0;
  font-weight:bold;
  cursor:pointer;
  z-index:10000000000000;
}

.homeClose,
.adminClose,
.userClose,
.cross{
  background:none;
  position:relative;
  padding:2px 0px 0px 3px;
  border:0;
  font-weight:bold;
  cursor:pointer;
  z-index:10000000000000;
  display:none;
}

.menu{
  padding:0;
  margin:0;
  height:24px;
  text-align:center;
  border-bottom : solid 1px grey;

}

.menu ul {margin:0; padding: 0; list-style-type: none; list-style-image: none; margin-top:5px}
.menu li {display: inline;  font-size:16px;}
.menu a {  
  color:#979797;
  text-decoration: none;  
  font-weight: bold;
  display:inline;
  margin:0;
  padding-right:10px;
  padding-left:10px;  
}

/* conteneur de box pour petit écran : aligner les box à gauche*/

#mainbox{
  font-family: calibri;
  box-sizing: border-box;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -webkit-flex-direction:row;
  flex-direction:row;  
}

.play_white{
  background:none;
}

.build_white{
  background:none;
}

.menu_sep{
  display:inline;
}


/***************************/


.display_header{
  margin:0;
  padding:0;
  height:36px;
  border:0;
}

.play{
  background:#F3D617;/*#CDE7FF;*/
}

.build{
  background:#CDE7FF; /*#CDE7FF;*/
}

.logo{
  margin:0;
  padding:0;
  display:inline;
}

.titleText{
  display:inline;
  font-size:18pt;  
  color:black;
  font-weight: bold;
  font-family:Arial;  
}
 
.title{
  width:100%;
  text-align: center;
  box-sizing: border-box;  
}	

.languages{
  position:absolute;  
  top:3px;
  right:3px;
}

.username{
  position:absolute;  
  padding:0;
  margin:0;
  color:#473F35;  
  top:0;
  left:390px;
  height:20px;
  padding-left:25px;
  padding-top:3px;
  color:black;
}

.link_quit{
  padding-top:3px;
  padding-right:5px;
  position:absolute;
  left:370px;
}

.menu_lev1{
  padding:0;
  margin:0;
  height:28px;
  background:url('images/ombre.png');
  background-position: 0px 24px;
  background-repeat:repeat-x;   
}

.menu_lev1 .elt_menu a{
  color:#979797;
  text-decoration: none;  
  font-weight: bold;
  float:left;
  display:block;
  margin:0;
  padding-top:4px;
  padding-bottom:4px;  
  padding-right:10px;
  padding-left:10px;  
}

.menu_lev1 .elt_menu_select a{
  text-decoration: none;
  font-weight: bold;
  float:left;
  display:block;
  margin:0;
  padding-top:4px;
  padding-bottom:4px;    
  padding-left:10px;  
  padding-right:10px;
  color:#FDB602;  
}


.menu_lev1 .elt_menu_img a{
  color:rgb(0,0,0);
  text-decoration: none;  
  font-weight: bold;
  float:left;
  display:block;
  margin:0;
  padding-top:3px;
  padding-bottom:1px;  
  padding-right:10px;
  padding-left:10px;  
}

.menu_lev1 .elt_menu_img_select a{
  color:rgb(255,255,255);
  text-decoration: none;
  font-weight: bold;
  float:left;
  display:block;
  margin:0;
  padding-top:3px;
  padding-bottom:2px;    
  padding-left:10px;  
  padding-right:10px;
}

.menu_lev1 .elt_menu_img_select a{
  background:url('images/stripes.png');  
}


.menu_lev2{
  width:100%;
  padding:0;
  margin:0;
  float:left;  
  height:28px;
  background:url('images/ombre.png');
  background-position: 0px 24px;
  background-repeat:repeat-x;   
  background-color:#F7F7F7;
}


.menu_lev2 .elt_menu a{
  float:left;
  display:block;
  margin:0;  
  padding-top:4px;
  padding-bottom:4px;    
  padding-left:10px;  
  padding-right:10px;  
  color:rgb(255,255,255);
  text-decoration: none;  
  font-weight: bold;  
}

.menu_lev2 .elt_menu_select{
  float:left;
  display:block;
  margin:0;
  padding-top:4px;
  padding-bottom:4px;    
  padding-left:10px;  
  padding-right:10px;  
}

.menu_lev2 .elt_menu_select a{
  color:#FDB602;
  text-decoration: none;
  font-weight: bold;
  margin:0;
}


.menu_lev2{
  background-color:#F7F7F7;
  color:#000000;
}

.menu_lev2 .elt_menu a{
  color:#868686;
}

.menu_lev2 .elt_menu_select{
  
}

.blockGap{
  padding-top:32px;  
}

/* HACK elements */
.fieldset .legend{
  border:0;
  background-color:#F3F3F3;
  padding:6px;
  background-image: none;
}

.label{
  font-weight:normal;
}

.button,
.button:link,
.button:visited,
.button:link:visited{
 text-decoration:none;
 color:#3E2500;
}

header{
  width:100%; 
  height:25px; 
}

.buttonsRight{
  position:absolute;  
  top:3px;
  right:5px;
}

.user{
  position:relative;  
  float:right;
}

.admin{
  position:relative;  
  float:right;
  margin-right:3px;
}

.buttonsLeft{
  position:absolute;  
  top:3px;
  left:5px;
}

.menuButton{
  position:relative;  
  float:left;
  margin:0;
  padding:0;  
  margin-left:3px;
}

.menuUser {z-index:1000000; display:none; font-weight:bold; font-size:0.8em; width:100%;   position:absolute; text-align:center;}
.menuUser ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menuUser li {display: block;   padding:8px 0 8px 0; border-bottom:#1d1f20 1px solid;font-size:12pt;}
.menuUser ul:first-child{ border-top:#1d1f20 1px solid;}
.menuUser ul li a { text-decoration:none;  margin: 0px;}
.menuUser a{text-decoration:none; color:black;}

.menuAdmin {z-index:1000000; display:none; font-weight:bold; font-size:0.8em; width:100%;  position:absolute; text-align:center;}
.menuAdmin ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menuAdmin li {display: block;   padding:8px 0 8px 0; border-bottom:#1d1f20 1px solid;font-size:12pt;}
.menuAdmin ul:first-child{ border-top:#1d1f20 1px solid;}
.menuAdmin ul li a { text-decoration:none;  margin: 0px;}
.menuAdmin a{text-decoration:none; color:black;}

.menuHome {z-index:1000000; display:none; font-weight:bold; font-size:0.8em; width:100%;  position:absolute; text-align:center;}
.menuHome ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menuHome li {display: block;   padding:8px 0 8px 0; border-bottom:#1d1f20 1px solid;font-size:12pt;}
.menuHome ul:first-child{ border-top:#1d1f20 1px solid;}
.menuHome ul li a { text-decoration:none;  margin: 0px;}
.menuHome a{text-decoration:none; color:black;}

.button_shell_free{
  margin-right:2px;
  margin-left:4px;
  margin-bottom:5px;
  margin-top:10px;
}

/* HACK */
.zebraTable td{
  line-height:1;
}

.hacklev1{
  width:100%;  
}

.width100{
  clear:both;
  width:auto;
  display:inline;  
  font-size:12pt;  
}

.back{
  margin:0;
  padding:0;
  text-align:center;
  width:100%;
  box-sizing:border-box;
}

.userFocus{
  background-color:#FFF8D7;
}

.listScores td{
  font-size:9pt;  
}

.badge{
  float:left;  
  border:solid 1px #CDE7FF;
  width:60px;
}

.countChallenge span,
.countChallenge a{
  font-size:20pt;
  font-weight :bold;    
  text-decoration: none;
}

.countChallenge{
  padding: 10px;
  padding-top:5px;
  padding-bottom:5px;
}

.typeChallenge{
  padding:0;  
}

.imgChallenge{
  height:64px;  
}

.blockMarker{
  border-bottom:solid 1px lightgray;  
  text-align:left;
}

/****** UPLOAD BUTTON ***********/
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.file_list_item{
  font-style:normal;

}

#files_to_upload_list{
  margin-bottom:20px;    
  margin-top:5px;
}

.filename_uploadfiles{
  background: url('../images/app/file.svg') no-repeat;  
  padding:8px;
  padding-left:24px;
  background-position: 4px 8px;   
  background-size: 16px;
  background-color:#F5F8FF;  
  border:solid 1px #598FC1;
  border-left-width: 5px;
}

.thumbnailBox{
  padding:5px;
  border:solid 1px #598FC1;
  background-color:#F5F8FF;
  margin:5px;
  text-align:center;
}

.titrePage{
  font-size:15pt;  
  text-align:center;
  padding-top:8px;
  padding-bottom:8px;
}

.missionDone{
  position:relative;
  font-size:13pt;
  font-weight:bold;
  color:#6DC180;
  margin-bottom:10px;
}

.missionFailed{
  position:relative;
  font-size:13pt;
  font-weight:bold;
  color:#FF6643;
  margin-bottom:10px;
}

.challengeLink{
  font-size:11pt;
  padding:3px;
  text-decoration: none;
  font-weight:bold;
}

.blocBasic{
  margin-left:25px;  
  font-style: normal;
  color:#878a85;
}

.blocBasicMission{
  font-style: normal;
  color:navy;
  text-align:left;
  margin-bottom:15px;
}

.warningField{
  background: url('../images/warning.svg') no-repeat;   
  background-position: 2px 4px;
  background-color: #FFC9B2;  
  background-size: 16px 16px;
  padding:5px;
  padding-left:20px;
  border-radius: 6px;
}

.dashedBlueLine{
  border-top:dashed 1px #F3D617;  
  padding-top:8px;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited{
  color:white;  
}


#sortable { list-style-type: none; margin: 0; padding: 0;  }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; font-size: 1.4em;}

#sortable_static { list-style-type: none; margin: 0; padding: 0;  }
#sortable_static li { margin: 0 3px 3px 3px; padding: 0.4em; font-size: 1.4em;}


.ui-state-default{
  border:solid 1px grey;  
  background: -webkit-linear-gradient(top, #F9F7EF 30%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(#F9F7EF 30%,#FFFFFF 100%); /* W3C; A catch-all for everything else */     
}

.ui-state-highlight{
  height:30px;
}

.answerDisplay{
  font-size:9pt;  
}

 .commandRefresh{
   position:relative;
   padding:8px;
   float:left;
 }
 
 .counterAnswer{
   position:relative;
   float:left;
   width:60px;
   margin-left:5px;
 }
 
 #counterAnswer{
  font-size:18pt;   
  text-align:center;
 }
 
 .legend_question{
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color:#497958;
    border-bottom: 2px solid #e5e5e5;
    font-weight: bold;
    font-size:15pt;
    text-align:center;
}

.displayQuestion{
  padding-bottom:6px;  
}

.QuestionText{
  font-size:13pt;  
  border-bottom: solid 1px gainsboro;
  padding:5px;
  color:navy;
  margin-bottom:3px;
}

.questionAnswer{
  font-size:12pt;
  cursor:pointer;
  background-color:#FFF8CA;
  height:38px;
  padding-top:8px;
}

.answerAlt{
  background-color:white;  
}

.QuestionNumber{
  background-color:#F5F8FF;
  font-weight:bold;
  font-size:13pt;
  padding:4px;
}

.clickAnswer{
  text-align:center;  
  padding:5px;
}

.SelectedBlue{
  background-color:#97B0F8;
  font-weight:bold;
  border-radius: 6px;
  background: linear-gradient(90deg,#D2D3F8 30%,#F5F8FF 100%); /* W3C; A catch-all for everything else */   
}

.SelectedBlueImg{
  background-image: url('../images/app/tick_blue.svg');
  background-repeat:no-repeat;
  background-position:95% 50%;
  background-size: 20px 20px;
  color:#006EF5;  
}

.goodBG{
  background: linear-gradient(90deg,#8AF8A0,#FFFFFF 90%); /* W3C; A catch-all for everything else */       
    border-radius: 6px;
}
.wrongBG{
  background: linear-gradient(90deg, #FFA094, #FFFFFF 90%); 
    border-radius: 6px;
}

.goodResponse{
  background-image: url('../images/app/good.svg');
  background-repeat:no-repeat;
  background-position:95% 50%;
  background-size: 20px 20px;  
}

.wrongResponse{
  background-image: url('../images/app/wrong.svg');   
  background-repeat:no-repeat;
  background-position:95% 50%;
  background-size: 20px 20px;
}

.pointsEarned{
  background-color:#EBF0FF;
  font-size:10pt;
  padding:5px;
}

.buttons{
  margin-top:10px;
}

.challenge_legend{
  margin-top:8px;
}

.legend_title{
  font-size:9pt;
  font-weight: bold;  
  margin-left:8px;
  padding-top:5px;
  padding-bottom:5px;
}

.legend_item{
  width:20px;
}

.reviewProgress{
 margin-top:4px;
}

.reviewProgressPeer{
 margin-top:10px;
 font-weight: bold;
}

.reviewMenu{
  text-decoration: none;
  font-size:12pt;  
  color:#598FC1;
}

.age_field{
  display:none;  
}

.checkFormField{
  font-size:9pt;
  vertical-align:middle;
  padding-top:3px;
  margin-bottom:8px;
}

.mailCheckImg,
.loginCheckImg{
  /*float:left;*/
  width:30px;
  margin-left:15px;   
  margin-bottom:8px;
}

.mailCheckTxt,
.loginCheckTxt{
  /*margin-left:50px;*/
  text-align:center;
  margin-bottom:8px;
}

.emailMsg{
  color:#F3B600;
  font-family:calibri;
  font-size:11pt;
  margin-bottom:5px;
}

.swal-footer {
  background-color: #F3F3F3;
  margin-top: 32px;
  border-top: 1px solid #E9EEF1;
  overflow: hidden;
}

.swal-overlay {
  background-color: rgba(255, 247, 193, 0.45);
}

.swal-modal {
  background-color:white;
  border: 3px solid #F3D617;
}

.swal-button {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #F3D617;
  font-size: 12px;
  color:black;
}

.shunt_box{
  margin-top:8px;  
  padding:5px;  
}

.shunt_box_title{
  margin-bottom:4px;
  background-color: #C4C4C4;
  padding:3px;
}


.pageTitle{
  font-size:20px;  
  padding-top:5px;
  padding-bottom:5px;
  background-color: #EFEFEF;
  text-align: center;
}

.pageSubTitle{
  font-size:16px;  
  padding-top:5px;
  padding-bottom:5px;
  background-color: #FFCA00; /*#FFEF85;*/
  text-align: center;
  border-top:solid white 2px;
}

.niceLink{
  color:black; /*#FFCA00;*/
  text-decoration: none;
  font-weight:bold;
}

.niceLink:hover{
  color:#FFCA00; /*#A8DAFF;*/
}

.compteur{
font-size:30pt;
font-family: 'caracterel2';  
color:black;
}

#emailMsg{
  width:400px;  
}

.action_filtrer{
  margin-right:5px;
  text-decoration: none;  
  color:navy;
  font-style:italic;
}

.bouton_programme{
    padding:5px;
}