body, html {
    height:100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0px;
    background-color: rgb(105, 105, 105);
}
  
div.bloc_principale {
   height:100vh;
   color: rgb(193, 202, 212);
}

div.alert{
    position: absolute;
    top: 0em;
    left: 35vw;
    width: 30vw;
    text-align: center;
}
div.alert p{
}

div.cadre{
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgb(17, 17, 17);
    background-color: rgb(206, 206, 206);
}

a{
    color: rgb(22, 37, 87);
    font-style: bold;
}

nav.nav-top{
    height: 50px;
}

header{
    height: 60px;
    background-color: rgb(170, 170, 170);
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 5px;
    box-shadow: 1px 1px 4px rgb(29, 29, 29);
    border-style: inset;
}

div.deconnexion{
    position: absolute;
    top: 1em;
    right: 3em;
}

div.deconnexion a{
    color: rgb(180, 180, 180);
}

.navigation{
    margin-top: 5px;
    color: rgb(180, 180, 180);
}






div.login{
    display: flex;
    align-items: center;
    justify-items: center;
    padding-top: 1em;
    height: 100vh;
}

div.formulaireLoggin{
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgb(17, 17, 17);
    background-color: rgb(206, 206, 206);
}

div.main{
    padding-top: 1em;
    height: 91vh;
}

header h1{
    text-shadow: 0px 0px 4px #777;
}

div.onglet{
    height: 2vh;
}

div.page{
    height: 81vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 89vh;
    margin-left: 0em;
    margin-right: 0em;
}

div.titre-page{
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
}

div.content{
    display: flex;
    flex-grow: inherit;
    align-items: flex-start;
}

div.col-gauche{
    max-height: 91vh;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: flex-start;
    width: 250px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgb(17, 17, 17);
    background-color: rgb(206, 206, 206);
    margin-left: 0em;
    margin-right: 0em;
    padding-top: 1em;
    padding-left: 2em;
    padding-bottom: 1em;
    background-color: rgb(226, 226, 226);
}

div.col-droite{
    max-height: 91vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: calc(100% - 250px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgb(17, 17, 17);
    background-color: rgb(206, 206, 206);
    margin-left: 1em;
    margin-right: 0em;
    padding: 1em;
    margin-bottom: 2em;
    background-color: rgb(226, 226, 226);
}

div.search-cadre{
}

div.filtre{
    border-bottom: 1px;
    padding-bottom: 1em;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgb(17, 17, 17);
    background-color: rgb(255, 255, 255);
}

form.search{
    border-radius: 5px;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

form.action{
    border-radius: 5px;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgb(17, 17, 17);
    background-color: rgb(206, 206, 206);
}

form.add{
    border-radius: 5px;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

div.ajouter{
    height: 6em;
    border-radius: 5px;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);
    margin-bottom: 1em;
    padding-left: 8em;
    padding-top: 2em;
}






div.tableau{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tableauEntete{
    width: 100%;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);
}

.tableauEntete th{
    background-color: rgb(71, 71, 71);
    color: rgb(216, 216, 216);
}

.tableauDonnee{
    width: 100%;
    max-height: 76vh;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);
    padding: 1em;
}





div.formulaire{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
}

div.formulaire form{
    padding: 1em;
    box-shadow: 1px 1px 8px rgb(53, 53, 53);

}

.tableauEntete th{
    background-color: rgb(71, 71, 71);
    color: rgb(216, 216, 216);
}

div h2{
    text-shadow: 0px 0px 4px #777;
}

footer.footer{
    height: 4vh;
    width: 100%;
    margin: 0px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: -moz-linear-gradient(#111, #444);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#111), to(#444));
    background-image: -webkit-linear-gradient(#111, #444);
    background-image: -o-linear-gradient(#111, #444);
    background-image: -ms-linear-gradient(#111, #444);
    background-image: linear-gradient(#111, #444);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 1px 1px #777;
    -webkit-box-shadow: 0 1px 1px #777;
    box-shadow: 0 1px 1px #777;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 1vh;
}

footer a{
    color: rgb(180, 180, 180);
}

footer p{
    text-align: center;
    color: rgb(199, 199, 199);
}