/* CSS Document */

  /***PREMIERE LIGNE***/
  /**table gauche**/
.barre_haut {   
  display: flex;   
  flex-direction: row;   
  justify-content: space-between;   
  flex-wrap: nowrap;   
  align-items: center;   
  padding: 5px 0; }
  
  /*Div qui contient le pseudo et le rang*/ 
  .spro_rang {     
  display: flex;     
  margin: 0 15px 0 0;     
  border-radius: 10px;     
  width: 35%;     
  height: 60px;     
  border: var(--border1);     
  flex-wrap: wrap;     
  background: var(--neutral); }
  
   /*Div qui contient le pseudo*/ 
  .spro_username {      
  padding: 4px 0 0 12px;     
  border-bottom: none;     
  text-align: left;     
  font-size: 20px;     
  height: 31px;     
  box-sizing: border-box;     
  width: 100%;     
  font-family: var(--special-font5); }
  
   /*Div contenant le rang et limage*/ 
  .spro_rang2 {     
  display: flex;    
  width: 100%;     
  justify-content: center;     
  font-size: 14px;     
  line-height: 28px;   
  margin: 0 10px;   
  font-family: var(--special-font);   
  font-weight: bold;   
  text-transform: uppercase; }
  
  /*Styling de limage*/ 
  .spro_rang2 img {        
  width: 60px;     
  height: 60px;     
  border-radius: 100%;     
  padding: 5px;     
  box-sizing: border-box;     
  background: var(--background2);     
  border: var(--border1);     
  margin: -31px 0 0 7px; }
  
  /**table centre**/
  /*Div qui contient le FC et Pseudo IRL*/
  .barre_haut1 {    
  width: 35%;    
  height: 60px;     
  margin: 0 15px 0 0;     
  border: var(--border1);     
  padding: 0 10px;     
  border-radius: 10px;     
  background-color: var(--neutral); } 
  
  /**table droit**/
  .barre_haut2 {    
  width: 35%;    
  height: 60px;          
  border: var(--border1);     
  padding: 0 10px;     
  border-radius: 10px;     
  background-color: var(--neutral); }
  
   /*Div de la derniere connexion*/ 
  .spro_lastvisit {       
  margin: 7px;     
  background: none;     
  text-align: center;     
  text-transform: uppercase;     
  color: var(--textColorAccent);     
  font-weight: bold;     
  letter-spacing: 1px;     
  line-height: 24px;     
  border-radius: 6px;     
  font-size: 14px;     
  font-family: var(--special-font); }
  
  /***DEUXIEME LIGNE***/
  /**table gauche**/
  .spro_1 {    
  background: var(--neutral);    
  padding: 10px;     
  border-radius: 10px;     
  display: flex;    
  margin: 20px 0;     
  border: var(--border1); }
  
/*Div à gauche qui contient avatar*/ 
  .spro_2 {     
  border-radius: 10px;     
  width: 232px;     
  box-sizing: border-box;     
  display: flex;     
  flex-direction: column; } 
   
  /*Div contenant lavatar*/ 
  .spro_avatar {         
  background: var(--background2);     
  padding: 6px;     
  border-radius: 10px;     
  box-sizing: border-box; } 
  
  /*Styling de lavatar*/ 
  .spro_avatar img {
  border-radius: 10px;     
  max-width: 200px;} 
  
    /*Div contenant les liens en bas*/ 
  .spro_links {    
  display: flex;     
  margin: 7px 0 0;   
  flex-direction: column; } 
  
  /*Styling des liens*/ 
  .spro_links a {         
  width: 100%;     
  line-height: 29px;     
  background: var(--neutral);     
  text-align: center;     
  text-transform: uppercase;     
  letter-spacing: 1px;     
  font-weight: bold;     
  border-radius: 10px;     
  font-size: 12px; } 
  
  .spro_links a:nth-child(2) {     
  margin:2px 0; }
  
  /**Table centre**/ 
  .spro_3 {     
  margin: 0 0 0 7px;     
  width: 100%; } 
   
  .spro_5 {
  display: flex;} 
   
  .spro_6 {   
  width: 60%;     
  margin: 0 7px 0 0;   
  height: 450px; } 
  
  /*Div contenant contact et les infos*/ 
  .spro_profile {    
  border: var(--border1);     
  padding: 10px;     
  border-radius: 10px;   
  height: 100%; }
  
  /*Div contenant le en ligne et les images contact*/ 
  .spro_contact {      
  border-bottom: var(--border1);     
  padding: 0 0 7px;     
  margin: 0 0 7px;     
  display: flex;     
  text-transform: uppercase;     
  justify-content: space-evenly;     
  font-weight: bold;     
  color: var(--textColorAccent);     
  font-size: 14px;     
  align-items: center; } 
  
  /*Styling images contact*/ 
  .spro_contact img { width: 23px;     
  background: var(--background1);     
  padding: 3px;     
  box-sizing: border-box;     
  border-radius: 5px; } 
  
  /**Table droit**/
  /*Div contenant la feuille de personnage*/ 
  .spro_4 {    
  width: 40%;     
  border: var(--border1);     
  padding: 10px;     
  box-sizing: border-box;   
  border-radius: 10px;    
  overflow: auto;
  height: 450px;}
  
  
  /*Div contenant toutes les infos*/ 
  .spro_info {          
  height: 90%;     
  overflow: auto;}
  
  .spro_info1 {   
  height: 90%;   
  width: 100%;
  overflow: auto;} 
  
  .spro_info img { 
  max-width:200px;   
  border-radius:10px; } 
  
  /*Styling et mise en page des infos*/ 
  .left-box { 
  width: 100%;  
  height: 100%;  
  display: flex;   
  grid-gap:15px;   
  flex-direction: column;   
  justify-content: space-around;   
  flex-wrap: nowrap; } 
  
  .left-box1 {   
  width: 100%;     
  height: 30px;     
  display: flex;     
  flex-direction: column-reverse;     
  justify-content: space-evenly;     
  font-family: var(--special-font);     
  font-weight: bold;     
  align-items: flex-start;     
  font-size: 14px;     
  flex-wrap: nowrap;     
  line-height: 10px; } 
  
  dl.details dt {     
  text-align: left;     
  width: 12em;     
  font-size: 14px;     
  text-transform: uppercase;     
  font-weight: bold;     
  color: var(--textColorAccent);   
  font-family: var(--special-font); }
  
  dl.details dd {     
  margin: 0 0 .5em 12em;   
  font-size:14px;   
  line-height:22px; }
  
  /*Div titre feuille de personnage*/ 
  .spro_frpgtitle {     
  background-image: var(--degrade);     
  color: var(--acc3);     
  font-size: 12px;     
  text-align: center;     
  font-weight: 600;     
  border-radius: 4px; } 
  
  /*Div avec scroll pour feuille personnage*/ 
  .spro_frpg {     
  margin: 7px 0 0;     
  height: 335px;     
  overflow: auto;     
  border-top: var(--border1);     
  box-sizing: border-box;     
  padding: 10px 0 0; } 
  
  /*Styling des champs*/ 
  frpg {font-weight: 700;     
  letter-spacing: 1px;     
  color: var(--acc1);     
  text-transform: uppercase;   
  font-size: 13px;} 
  
  /*Styling où le texte se trouve*/ 
  .spro_frpg textarea {     
  width: 100%!important;     
  height: 93px!important;     
  border: var(--border1);     
  border-radius: 10px;     
  margin: 10px 0 12px;     
  overflow: auto;     
  box-sizing: border-box; } 
  
  .inputbox:hover {     
  border: var(--border1);}