BODY
{
  background-color:#F8F8FF;
  margin:0;
  overflow:hidden;
  font-family: Arial; 
  font-style:normal;
}
#titreAppli 
{ 
  padding:20px;
  min-height:100px;
  height:20%;
}
#titreAppli > .logo
{
  background-image: url(/astre/as/ihm/nexpublica/logo_delos_couleur.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:80px;
}
#titreExtranet
{
	height:15%;
}
#pied 
{ 
  position:absolute;
  bottom:10px;
  right:50px;
  background-image: url(/astre/as/ihm/nexpublica/Nexpublica-Logo-Principal-Baseline.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:250px;
  height:80px;
}
#centre 
{
  display:flex;
  margin-top:20px;
}
#centre > div:first-child, #centre > div:last-child
{
  width:180px;
  height:300px;
  flex-grow:0.5;
}
#cadrePrompt
{
  background-image: url(/astre/as/ihm/nexpublica/nexpublica_prompts.png);
  background-repeat: no-repeat;
  background-position: right;
}
#cadreConnexion
{
  color:#000;
  background-color:#FFF;
  border-radius:8px;
  box-shadow: 0px 2px 4px lightgray;
  padding:15px 25px;
  height:280px;
  width: 250px;
  display:flex; 
  flex-direction:column;
}
#cadreConnexion .titre
{
  font-size:12px;
  padding-bottom:2px;
}
#cadreConnexion > div:nth-child(1)
{
  color:#1E0087;
  padding-top:5px;
  font-weight:bold; 
  text-align:center;
}
#cadreConnexion > div:nth-child(2)
{
  flex-grow:1;
  display: flex;
  flex-direction: column;
  justify-content: center;    
  white-space: nowrap;
}
.btnSubmit
{
  margin-top:20px;
  padding:5px;
  border-radius:4px;
  font-size:14px;
  background-color:#1E0087;
  color:#FFF;
  width:100%;
  cursor:pointer;
}
.btnSubmit:hover
{
  background-color:#CCD4FF;
  color:#1E0087;
}
#usernom > input, #userpass > input, #useroldpass > input, #usernewpass > input 
{
  width:220px;
  height:25px;
  border:1px solid #1E0087;
  font-family: Verdana; 
  font-style:normal;
  font-weight:bold; 
  color:#000;
  font-size:15px;
  margin-left:-18px; 
  padding-left:25px;
  margin-bottom:10px;
}
#userpass > input, #useroldpass > input, #usernewpass > input 
{
  font-family:'text-security-square';
  font-size:15px;
}
#userpass, #useroldpass, #usernewpass 
{
	position:relative;
}
#userpass > i, #useroldpass > i, #usernewpass > i
{
  right:10px!important;
}
#usernom::before, #userpass::before, #useroldpass::before, #usernewpass::before 
{
  font-size:20px;
  position:relative;
  content: "\f007";
  font-family:'FontAwesome';
  top:2px;
  left:5px;
  color:#1E0087;
}  
#userpass::before, #useroldpass::before, #usernewpass::before 
{
  content: "\f023";
}
#userbase > select 
{
  width:248px;
  height:30px;
  border:1px solid #1E0087;
  font-family: Verdana; font-style:normal;font-weight:bold; color:#000;
  font-size:12px;
}
#msgErreur1 
{
  margin:20px auto 0 auto; 
  display:flex; 
  justify-content:center; 
  flex-direction:row;
  font-weight:bold; 
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

@media (max-height:  650px)
{
	#titreAppli {
	  height:5%;
	}
}
@media (max-height: 500px)
{
  #titreAppli {
    display:none; 
  }
  #pied { 
    display:none; 
  }
  #msgErreur1 {
    margin-top:10px;
  }
}