BODY {
  margin:0;
  overflow:hidden;
  background-color:#FEFEFE;  
}

#fleche1, #fleche2, #fleche3 { display:none; }

#bandeauGauche {
  background-color:#232d4b;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 80% auto;
  position:fixed;
  top:0;
  left:0;
  width:33%;
  height:100%;
}
#bandeauGauche > img {
  margin-top:20px;
  width:100%;
}

#bandeauDroite {
  top: 0;
  left: 33%;
  bottom: 0;
  right: 0;
  position: absolute;
  display:flex;
  justify-content:center;
  flex-direction:column; 
  font-family: Verdana; 
  font-style:normal;
  font-weight:bold; 
  color:#232d4b;
}
#titreAppli {
  height:40%; 
  display:flex; 
  justify-content:center; 
  flex-direction:column;
}
#titreAppli > div:first-child {
  text-align:center;
}

#titreAppli img
{
  width:40%;
}

#titreAppli > div:last-child {
  text-align:center;
  font-size:1.25vw; 
  color:#00aa9b; /* #232d4b; */
  padding-top:5px;
} 
#cadreCnx {
  height:60%;
}

#cadreCnx > div:first-child {
  margin:auto; 
  position:relative; 
}
#cadreCnx > div:first-child > div:first-child {
  border:1px dotted #00aa9b; 
  background-color:white;
  position:absolute; 
  top:19px; 
  right:19px; 
  bottom:19px; 
  left:19px; 
  display:flex; 
  justify-content:center; 
  flex-direction:column;
}

#usernom, #userpass, #userbase, #usercnx, #useroldpass, #usernewpass {
  text-align:center;
} 
#userbase, #usercnx {
  margin-top:10px;
}

#fleche1, #fleche2, #fleche3 {
  position:absolute;
  background-color:#232d4b;
}
#fleche1 { top:0px;right:0px;width:40px;height:20px; }
#fleche2 { top:20px;right:0px;width:20px;height:20px; }
#fleche3 { bottom:0px;left:0px;width:20px;height:20px; }

#usernom > input {
  width:200px;
  height:25px;
  border:2px solid #00aa9b;
  font-family: Verdana; 
  font-style:normal;
  font-weight:bold; 
  color:#232d4b;
  font-size:15px;
  padding-left:25px; 
}
#usernom::before {
  font-size:20px;
  position:relative;
  content: "\f007";
  font-family:'FontAwesome';
  top:2px;
  left:25px;
  color:#00aa9b;
}
#userpass > input, #useroldpass > input, #usernewpass > input {
  width:200px;
  height:25px;
  border:2px solid #00aa9b;
  font-style:normal;
  font-weight:bold; 
  color:#232d4b;
  font-family:'text-security-square';
  font-size:15px;
  padding-left:25px; 
}
#userpass::before, #useroldpass::before, #usernewpass::before {
  font-size:22px;
  position:relative;
  content: "\f023";
  font-family:'FontAwesome';
  top:2px;
  left:25px;
  color:#00aa9b;
}
#userbase > select {
  width:231px;
  margin-left:20px; 
  height:30px;
  border:2px solid #00aa9b;
  font-family: Verdana; font-style:normal;font-weight:bold; color:#232d4b;
  font-size:15px;
}
#userdeco {
  height:25px;
  font-family: Verdana; 
  font-style:normal;
  font-weight:bold; 
  color:#00aa9b;
  font-size:15px;
  text-align:center;
}

#msgErreur1 {
  margin:10px auto 0 auto; 
  display:flex; 
  justify-content:center; 
  flex-direction:row;
}

#pied {
  position:absolute; 
  text-align:center; 
  bottom:20px; 
  left:0; 
  right:0; 
  font-size:0.8vw; 
  color:#00aa9b;
}

@media (max-height: 500px)
{
  #cadreCnx {
    height:75%;
  }
  #titreAppli {
    height:25%; 
  }
  #pied { 
    display:none; 
  }
  #msgErreur1 {
    margin-top:0px;
  }
}