body{
    overflow: hidden;
}

#bloc_identites{
    
    z-index:3;
    height:100vh;
    width: 100vw;
    background-color:#2E405330;
    position: absolute;
   
    
}
#mon_bloc_identites,#mon_bloc_table{
    border-radius: 20px;
    width: 40vw;
    height: 80vh;
    padding: 10px;
    background-color: #ECF0F1;
    border: solid white 3px;
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
#contenaire_identites{
    background-color: white;
    border: solid #AEB6BF 2px;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr;
    grid-template-areas: "cont1"
                         "cont2";
                         
   
}
#cont1{
    grid-area: cont1;
    text-align: center;
   
}
#ttt{
    font-family: monospace;
    font-weight: bold;
    font-size: 18px;
    margin-top: 5px;
}
#cont2{
    grid-area: cont2;
    text-align: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#contenaire_table{
    background-color: white;
    border: solid #AEB6BF 2px;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    
                         
   
}

#col_1{
    
}
#bar{
    width: 10px;
    border-radius: 50px;
    height: 95%;
    background-image: radial-gradient( circle 976px at 51.2% 51%,  rgba(11,27,103,1) 0%, rgba(16,66,157,1) 0%, rgba(11,27,103,1) 17.3%, rgba(11,27,103,1) 58.8%, rgba(11,27,103,1) 71.4%, rgba(16,66,157,1) 100.2%, rgba(187,187,187,1) 100.2% );
}
#col_2{
   display: grid;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas: "fleche1"
                        "fleche2"
                        "fleche3"
                        "fleche4"
                        "fleche5"
                        "fleche6";
}
#col_3{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr ;
    grid-template-areas: "ident_1"
                        "ident_2"
                        "ident_3"
                        "ident_4"
                        "ident_5"
                        "ident_6";
}
#col_4{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:"les3_1"
                        "les3_2"
                        "les3_3"
                        "les3_4"
                        "les3_5"
                        "les3_6";
}
#les3_1,#les3_2,#les3_3,#les3_4,#les3_5,#les3_6{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "boule_1 boule_2 boule_3";
}
.boule_1{
    grid-area: boule_1;
}
.boule_2{
    grid-area: boule_2;
}
.boule_3{
    grid-area: boule_3;
}
.annulerIdent{
    position: absolute;
    right: 10px;
    top: 10px;
}
#pdf_canvas{
    overflow: hidden;
}
.cercle_1R{
    width: 30px;
    height: 30px;
    background-color: #FF0B73;
    border-radius: 200px;
    
}
#pourImage{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden;
    width: 100vw;
}
.cercle_1V{
    width: 30px;
    height: 30px;
    background-color: #24F66A;
    border-radius: 200px;

}
.cercle_2{
    background-color: #248AF6;
    border-radius: 200px;
    width: 30px;
    height: 30px;
}
.cercle_3{
    background-color: #425B76;
    border-radius: 200px;
    width: 30px;
    height: 30px;
}

.C{
    text-align: center;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-areas: "c1 c2"
                        "c3 c4"
                        "c5 c6"
}
.z{
    background-color: #f0f3f4;
    margin: 2px;
    font-weight: bold;
}
.z:hover{
    background-color: #2e4053;
    color: white;
}
.p2{
    height: 100%;
    
}
a{
    color: black;
    text-decoration: none;
}
@media (max-width: 1000px){
    #mon_bloc_identites,#mon_bloc_table{
        width: 70vw;
    }
}
@media (max-width: 790px){
    #mon_bloc_identites,#mon_bloc_table{
        width: 50vw;
    }
}
@media (max-width: 610px){
    #mon_bloc_identites,#mon_bloc_table{
        width: 98vw;
    }
}
@media (max-width: 400px){
    #mon_bloc_identites,#mon_bloc_table{
        width: 98vw;
        height: 80vh;
    }

    
}
@media (min-height: 850px ) and (max-width: 500px){
    #mon_bloc_identites,#mon_bloc_table{
        height: 40vh;
    }
}
@media (max-width:500px){
    .pourRecherche_2{
   
        padding: 1px;
  
    }
}