@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
@import '~@fortawesome/fontawesome-free/css/regular.css';
@import '~@fortawesome/fontawesome-free/css/solid.css';
@import '~@fortawesome/fontawesome-free/css/brands.css';


/*BASE.HTML.TWIG*/
.mainbody{ 
  background-image: url('../img/bibliblanche.jpg');
  backdrop-filter: blur(5px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height:100vh; 
  display:flex; 
  flex-direction:column; 
  align-items: stretch;
  flex-grow: 1;
}

.headersidebar{
  display: flex; 
  flex-direction: column; 
  flex-grow: 1;
}
    .navbar{ 
      display: flex; 
      align-self: flex-start;
      max-height:6vh; 
      background: rgb(2,0,36);
      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(51,126,134,1) 100%, rgba(224,255,255,1) 100%);
    }
        .btnrecherchenav{
          background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(51,126,134,1) 100%, rgba(224,255,255,1) 100%);
        }

.sidebarbody{
  display:flex; 
  flex-direction:row; 
  align-items:stretch;
  height:100vh;
  padding-top: 8vh;
  padding-bottom:2vh;
}

    .sidebar{
      position: -webkit-sticky;
      position: -moz-sticky;
      position: -ms-sticky;
      position: -o-sticky;
      position: fixed;
      padding-left:20px;
      padding-right:20px;
    }

    .allbodies{
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 58vh;
      max-height: 58vh;
      padding-top: 20px;
      border-radius: 10px;
      background-color: rgba(128, 128, 128, 0.5);
    }
        /*CUSTOMISATION DES SCROLLBARS*/
        #style-7::-webkit-scrollbar-track
        {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        #style-7::-webkit-scrollbar
        {
          width: 10px;
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        #style-7::-webkit-scrollbar-thumb
        {
          border-radius: 10px;
          background-image: -webkit-gradient(linear,
                            left bottom,
                            left top,
                            color-stop(0.44, rgb(122,153,217)),
                            color-stop(0.72, rgb(73,125,189)),
                            color-stop(0.86, rgb(28,58,148)));
        }

    /*CACHER LA SIDEBAR LORSQUE C'EST RESPONSIVE*/
    @media (max-width: 768px) {
      .sidebar{
        visibility: hidden;
      }
    }

.bodyfooter{
  display:flex; 
  flex-direction:column; 
  align-items:stretch;
  flex-grow:1;
  height:90vh;
  padding-left:320px; /* 320px = 280 (largeur de la sidebar) + 40 (padding) */
  padding-right:20px;
}

    .footer{  
      max-height: 30vh;
      min-height: 5vh;
      opacity: 95%;
      position: -webkit-sticky;
      position: -moz-sticky;
      position: -ms-sticky;
      position: -o-sticky;
      position:fixed;
      bottom:2vh;
      min-width: 80%;
    }


/*BODIES*/
.pageaccueil{
  flex-grow:1;
  margin-top: 15%;
}
    .brand{
      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(51,126,134,1) 100%, rgba(224,255,255,1) 100%);;
      font-size:10vh;
      color: #eee;
      text-align: center;
      align-self: center;
      border-radius: 10px;
    }

    .slogan{
      color: #eee;
      background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(133,133,133,1) 100%);
      font-size:5vh;
      text-align: center;
      border-radius: 10px;
    }

h3{
  color: white;
  text-shadow: black 1px 1px, black -1px 1px, black -1px -1px, black 1px -1px;
}

.pagelistelivres{
  max-width: 60%;
  margin: 0 auto;
  border-radius: 10px;
}

  .unLivre{
    height: 400;
    margin: 20px;
  }
    .pDescLivre{
      text-align: justify;
      overflow: auto;
      height: 350px;
    }
    .imgLivre{
      height: 400px; 
      width: 250px; 
      margin: 20px 20px 20px 0px;
      border-radius: 10px;
    }

.pageinscription{
  align-self: center;
  flex-grow:1;
  max-width: 60%;
  margin: 0 auto;
  h3{
    color: white;
    text-shadow: black 1px 1px, black -1px 1px, black -1px -1px, black 1px -1px;
  }
}
    .lien-redirection-vers-login{
      padding-left:10px;
    }

.pageconnection{
  align-self: center;
  flex-grow:1;
  max-width: 60%;
  margin: 0 auto;
  h3{
    color: white;
    text-shadow: black 1px 1px, black -1px 1px, black -1px -1px, black 1px -1px;
  }
}

    .options-login{
      display:flex; 
      flex-direction:row; 
    }

        .bouton-se-connecter{

        }

        .liens-redirection{
          flex-direction:column; 
          padding-left:10px;
        }

.checkemail{
  max-width: 60%;
  margin: 0 auto;
  border-radius: 10px;
}

.mainprofil{
  display:flex; 
  flex-direction: column;
}

    .boite_infos_user{
      flex-direction: row;
    }

        .userimage{

        }
        
        .infos_user {
          flex-direction: row;

        }


/*MISE EN EPLACE DE BACKGROUNDS DISTINCT POUR CHAQUE PAGE (SUSPENDU)*/
// .bgaccueil{
//   background-image: url('../img/bibliotheque.jpg');
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   max-width: 100%;
//   max-height: 100%;
//   background-repeat: no-repeat;
//   background-size: cover;
//   background-position: center;
//   filter:blur(10px);
// }

// .bglistelivres{
//   background-image: url('../img/bibliotheque.jpg');
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   background-repeat: no-repeat;
//   background-size: cover;
//   background-position: center;
//   filter:blur(10px);
// }

// .bginscrip{
//   background-image: url('../img/bibliotheque.jpg');
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   background-repeat: no-repeat;
//   background-size: cover;
//   background-position: center;
//   filter:blur(10px);
// }

// .bgconnec{
//   background-image: url('../img/bibliotheque.jpg');
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   max-width: 100%;
//   max-height: 100%;
//   background-repeat: no-repeat;
//   background-size: cover;
//   background-position: center;
//   filter:blur(10px);
// }

/*FORMULAIRES*/
.red{
    color: red !important;
  }
    //Formulaire inscription
    .form-container{
      display: flex;
      flex-flow: column;
    }
  
    .form-row{
      display: flex;
      flex-flow: column;
      margin-bottom: 15px;
    }
  
    .form-row label{
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 5px;
    }
  
    .form-row input{
      background: #eee;
      border: 0;
      border-radius: 3px;
      padding: 10px 15px;
    }
  
    .form-row select{
      padding: 10px 15px;
    }
  
    .btn{
      padding: 10px 15px;
      color: black;
      border: 0;
      border-radius: 3px;
      background-color: #3498db;
    }