#mapContainer {
    position: absolute;
    top: 3em;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
#titreMap{
    font-size: 1em;
    font-weight: bold;
}
#soustitreMap{
    font-size: .8em;
}
#titreMap.droite ,#soustitreMap.droite,#titreMap.gauche ,#soustitreMap.gauche{
    display: block;
}
#soustitreMap.haut{
    margin-left:1em;
}
.blocTraceHover{
    border-color:#000000 !important;
}
.blocTrace,.blocZone{
    padding :.1em,.2em;
}
.blocTrace,.blocZone,.blocTag,.blocPi {
    border: solid;
    border-width: 1px;
    border-color: #B8B8B8;
    border-radius: .25em;
    padding :0 .3em;
    margin-right: .2em;
    min-width: 10em;
    vertical-align: top;
    background-color: #FFFFFF;
    height: 3.2em;
}
.blocTrace2,.blocZone2,.blocTag2,.blocPi2{
    background-color: #f0f0f0;
}
#blocPiLegende > .d-inline-block {
    vertical-align: middle;
  }
.legTrace{
    width:1em;
    height:1em;
    vertical-align: middle;
    border-radius:50%;

}
.legZone{
    width:1.5em;
    height:1em;
    vertical-align: middle;
    margin-right:.2em;
}
.legZoneTag{
    width:1.5em;
    height:1.25em;
    vertical-align: middle;
    margin-right:.2em;
}
.legZoneTag > i{
    vertical-align: super;
}
.nomTrace,.nomZone{
    font-size: .7em;
    vertical-align: middle;
    max-width: 11.5em;
    margin-left: .25em;
}
.toolTrace {
    color: #b4b4b4;
    text-align: center;
    font-size: .8em;
    cursor: pointer;
    line-height:1.8em;
}
.toolsTraceContainer{
    max-width:6em;
}
.toolTrace.active{
    color: #4E4E4E;
}
.toolTrace.activeZoom{
    color: var(--color);
}
/* #legende{
    width: max-content;
} */
#btnLegende{
    position:absolute;
    right:1em;
    top:1em;
    display: none;
    width: 2em;
    height: 2em;
    border-radius:
    50%;
    z-index: 2;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: var(--color-80);
    background-image:url("../img/legende.png") !important; /* Pour safari */
    background:url("../img/legende.png") no-repeat var(--color-80);
    background-size:70%;
    background-position: center;
}
#closeDetails{
    position:absolute;
    right:.2em;
    top:.5em;
    cursor:pointer
}
#imgPiLegende{
    max-height:2em;
}
.labelPi {
    font-size: 10px;
    background-color: #4E4E4E;
    color: #fff;
    padding: 0 .25em;
    border-radius: .25em;
    margin-bottom: .1em;
    display:inline-block;
}
.labelBh{
    background-color: #dc3545 !important;
}
.labelBenevoles{
    background-color: #0b4ea2 !important;
}
.infosBen {
    font-size: .8em;
    padding-left: 1em;
}
#details{
    background-color: white;
}
#details.gauche,#details.droite{
    padding:1.5em .1em .1em .15em;
    overflow-y:auto;
    overflow-x:hidden;
}
#details.haut{
    padding:.5em 0em .1em .5em;
    overflow-x:auto;
    overflow-y:hidden;
}
#details.bas{
    padding:.1em 0em .1em .5em;
    overflow-x:auto;
    overflow-y:hidden;
}