html {
height:100%;
}
body {
  height:100%;
  margin: 0;
  padding: 0;
  background-color: rgb(250,250,250);
}
body.options{
 
   height:auto;
   min-height:100%;
  margin: 0;
  padding: 0;
  background-color: white;
}
.container{
  background-color: white;
}
.bordure{
  border:1px solid black;
}
.loginBackground {
  background-image: url(../medias/loginwallpaper.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
}

#login-form{
position: absolute;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  left:50%;
 width:500px;
  transform: translateY(-40%); /* tiré de la moitié de sa propre hauteur */
 margin-left:-250px;
  height:510px;
  background-color: white;
  box-shadow: 4px 4px 24px #666;
  border-radius:6px;
}
#langue-form{
  position: absolute;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  left:50%;
  width:500px;
  transform: translateY(-40%); /* tiré de la moitié de sa propre hauteur */
  margin-left:-250px;
  height:510px;
  background-color: white;
  box-shadow: 4px 4px 24px #666;
  border-radius:6px;
}
#favicon{
  
  margin-top:-36px;
}
.ancre{
    padding:0 10px;
    cursor:pointer;
    font-weight:bold;
    color: #337ab7;
    margin-right:20px;
}
.ancre:hover{
    text-decoration: underline;
    color:rgb(42,51,105);
}
#btn-container,#btn-container2{
    display:flex;
    justify-content: space-between;
    margin-top:0px;
    padding:0 20px;
}
#btn-container2{
    margin-top:20px;
}
#formation-container{
    display:flex;
    flex-direction:colum;
    justify-content: space-between;
    margin-top:0px;
  padding:0 20px;
}
.rangee{
  display:flex;
  flex-direction:column;
  align-items: center;
  gap:30px;
  margin:30px 0 0 0;
}
.cols{
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  align-items: center;
  color:white;
  background-color: rgba(66, 115, 171,.95);
  width:90%;
  padding:10px 0 0 0;
  border-radius:6px;
}
.ligne{
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  width:100%;
  gap:20px;
}
.lingo{
  font-size:1.5em;
  cursor:pointer;
}
.ligne.boite{
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  gap:5px;
}
.ligne.boite label{
  padding-top:10px;
  cursor:pointer;
}
.box{
  width:15px;
  height:15px;
  cursor:pointer;
}
#choix-langue a{
  display:inline-block;
  padding:5px;
}
.fen{
    
    height:auto;
    max-height: 550px;
    background-color: rgb(245,245,246);
    box-shadow: 2px 2px 2px 2px rgb(215,221,232);
   font-size:1.25em;
    border-radius:6px;
   border: thin solid rgb(215,221,232)
}
.ic{
    margin-right:5px;
}
#web-container{
   width:28%;
   
}
#video-container{
   
     width:68%;
}
#web-container-inner{
    width:92%;
    margin:0 0 20px 6%;
    height:450px;
    overflow-y: auto;
   margin-top:30px;
    
}
#video-container-inner{
    width:96.5%;
    margin:0 0 20px 2.5%;
    height:450px;
    overflow-y: auto;
   margin-top:30px;
   
}

.fen h3{
    color:rgb(42,51,105);
    text-align: center;
    padding:0;
    margin:10px 0 0 0; 
}
.ligne-video{
    margin-bottom:10px;
    display:flex;
    justify-content: space-between;
    background-color: rgb(243,243,242);
    padding:1px 0;
}
.ligne-web{
    margin-bottom:15px;
    background-color: rgb(243,243,242);
    padding:1px 0;
}
#contenant_bouton:hover,#contenant_bouton_a:hover{
	width:190px;
        height:61px;
	background:url(../medias/toxyscan_btn.png) bottom no-repeat;
}

#contenant_bouton,#contenant_bouton_a{
	width:190px;
        height:61px;
	background:url(../medias/toxyscan_btn.png) left top no-repeat;
        cursor:pointer;
}
.rad{
  width:24px;
  height:24px;

}
#oublie:hover{
  text-decoration:underline;
}
#contenant_bouton2{
	width:190px;
        height:61px;
	background:url(../medias/simtox_btn.png) top no-repeat;
        cursor:pointer;

}
#contenant_bouton2:hover{
	 background:url(../medias/simtox_btn.png) bottom no-repeat;
}
#contenant_bouton4{
	width:190px;
	height:61px;
	background:url(../medias/creatox_btn.png) top no-repeat;
	cursor:pointer;
  

}
#contenant_bouton4:hover{
	background:url(../medias/creatox_btn.png) bottom no-repeat;
}

#contenant_bouton3{
	width:190px;
	height:61px;
	background:url(../medias/toxy_lock_btn.png) top no-repeat;
	cursor:pointer;
}
#contenant_bouton3:hover{
	width:190px;
	height:61px;
	background:url(../medias/toxy_lock_btn.png) bottom no-repeat;
	cursor:pointer;
}
#zone-pompier{
	width:190px;
	height:61px;
	background:url(../medias/pompier_btn.png) top no-repeat;
    background-size: 190px 61px;
	cursor:pointer;
}#zone-chantier{	width:190px;	height:61px;	background:url(../medias/btn_gros_construction_pale.png) top no-repeat;    background-size: 190px 61px;	cursor:pointer;   }#zone-chantier:hover{	width:190px;	height:61px;	background:url(../medias/btn_gros_construction_fonce.png) top no-repeat;    background-size: 190px 61px;	cursor:pointer;   }
#zone-labtox{
    width:190px;
	height:61px;
	background:url(../medias/labtox.png) top no-repeat;
	cursor:pointer;
	
}
#zone-labtox:hover{
   width:190px;
	height:61px;
	background:url(../medias/labtox.png) bottom no-repeat;
	cursor:pointer;
}
.conteneur_bouton{
	width:211px;
	height:55px;
   background-color:rgb(53,118,170);
   border:1px solid rgb(35,79,112);
   border-radius:6px;
}
.conteneur_bouton:hover{
   background-color:rgb(96,156,205);
}
#rouge,#red {
  display:none;
   position: fixed;
   text-align: center;
  left:0;
 top:2px;
  animation-name: example;
    animation-duration: 1s;
  width: 90%;
  height: 60px;
  margin:0 5%;
  border-radius:6px;
  background:rgba(255,0,0,.5) url("../medias/danger_50.png") 10px center no-repeat;
  z-index:6000;
}
#warning {
  display:none;
   position: absolute;
   text-align: center;
  left:0%;
 bottom:100px;
  animation-name: example;
    animation-duration: 1s;
  width: 90%;
  height: 60px;
  margin:0 5%;
  border-radius:6px;
  background:rgba(255,255,0,.3) url("../medias/warning_50.png") 10px center no-repeat;
   box-shadow: 1px 2px 8px #666;
   padding: 0 5px 0 60px;

}
.texte{
   
   font-size:1em;
  height: 60px;
  margin-top:calc(30px - 1em);
}
.click{
  color:blue;
  cursor:pointer;
  font-weight:bold;
}
blink {
    -webkit-animation: 2s linear infinite condemed_blink_effect; 
    animation: 2s linear infinite condemed_blink_effect;
}
@-webkit-keyframes condemed_blink_effect { 
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
@keyframes condemed_blink_effect {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
@keyframes example {
   0%   { left:-100%; bottom:100px;}
   
    100% { left:0%; bottom:100px;}
}

#barre-option {
  border: 2px solid;
  border-color:rgb(215,221,232);
  border-radius: 1px;
  width:100%;
}