.legend {
    background-color: #fff;
    border-radius: 3px;
    bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: absolute;
    right: 10px;
    z-index: 1;
  }

  .legend h4 {
    margin: 0 0 10px;
  }

  .legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    width: 20px;
  }
  .mapboxgl-ctrl-geocoder{
    min-width: 210px;
  }
  
  .marker {
  background-image: url('./img/blue-marker.svg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
  
body { 
  font-family: Arial;
  padding:0; 
  background-color: white;
  overflow: hidden;
  height:99%;
  width:99%;
}

input{
  position:relative;
  vertical-align:middle; 
}
label{  
  position:relative;
  display:inline-block;    
  vertical-align:middle; 
}

.texteDisclaimer {
	margin:10px 10px 0px 15px;
	float:left;
	text-align:justify;
}
  
  
 body { margin:0; padding:0; }
 #map { position:absolute; top:0; bottom:0; width:100%; }
 
 /*mon reseau mobile*/
 
/* aside { */
  /* font: 14px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; */
  /* position: absolute; */
  /* top: 0px; */
  /* bottom: 0px; */
  /* left: 0px; */
  /* overflow: auto; */
  /* color: white; */
  /* background: rgba(39, 39, 39, 0.9); */
  /* width: 300px; */
  /* z-index: 2; */
/* } */


/* .boutonType1 { */
  /* height: 40px; */
  /* width: 125px; */
  /* padding: 4px 0px; */
  /* text-align: center; */
  /* font-family: Arial, sans-serif; */
  /* cursor: pointer; */
  /* outline: 0 none; */
  /* color: white; */
  /* border-radius: 5px; */
  /* background: #444444; */
  /* box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4); */
  /* float: left; */
/* } */

/* .boutonType1 img { */
  /* vertical-align: middle; */
/* } */

/* .boutonType1 p { */
  /* margin-top: 8px; */
/* } */

/* .boutonType1.active { */
  /* background: #777777; */
  /* box-shadow: 0px 0px 5px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); */
/* } */

/* .selectLight { */
  /* position: absolute; */
  /* top: 4px; */
  /* right: 4px; */
  /* height: 7px; */
  /* width: 7px; */
  /* border-radius: 7px; */
  /* background-color: #666666; */
/* } */

/* .selectLight.active { */
  /* background-color: #2AED11; */
/* } */

/*mon reseau mobile fin*/

#texteTitreCarte{
	position: absolute;
/* 	top: calc(17%);
	left: calc (50%); */
	color: black;
}

#texteTitreCarteMobile{display: none}
#titreCarteMobile{display: none}

#titreCarte{
  /* top: calc(-2%); */
  /* left: calc(-2%); */
  top: -20px;
  left: -40px;
  position: absolute;
  height: 20px;
  width: 200px;
  font: 16px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 20px 50px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
}
  
  #logoArcep {
  position: absolute;
  bottom: 5px;
  left: 40px;
  height: 70px;
  width: 150px;
  overflow: auto;
  background-image: url("../img/logoArcep.png");
  background-repeat: no-repeat;
  background-size: contain;
    }
	/* #titreCarte { */
  /* position: absolute; */
  /* top: calc(98%); */
  /* left: 50px; */
  /* height: 70px; */
  /* width: 3000px; */
  /* overflow: auto; */
  /* color:  */
    /* } */
  
  
  #PopupBienvenue {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(50% - 150px);
  left: calc(50% - 157px);
  height: 170px;
  width: 300px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
  
  
  
  #Legende {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(50%);
  right: calc(1%);
  height: 280px;
  width: 210px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
  
  #LegendeNormale {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(50%);
  right: calc(1%);
  height: 100px;
  width: 210px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
  
    
  #LegendeZTD {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(50%);
  right: calc(1%);
  height: 90px;
  width: 250px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  display:none;
  }
  
  #Outremer {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(56%);
  left: calc(1%);
  height: 60px;
  width: 150px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
  
  #Zonebouttondisclaimer {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(33%);
  left: calc(1%);
  height: 10px;
  width: 600px;
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}
  
  #voletdisclaimer {
  padding: 22px 30px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      /* left : calc(-2%); */
	  left : -40px;
      bottom: calc(66%);
	  width: 65px;
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
  }
  
  #Disclaimer {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(33%);
  left: calc(1%);
  height: 300px;
  width: 600px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
  
  #Zonebouttondom {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(56%);
  left: calc(1%);
  height: 10px;
  width: 150px;
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}
  

#Zonelistedom {
 font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  z-index: 5;
  top: calc(40%);
  right: calc(10%);
  height: 30px;
  width: 50px;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
}


#Zonebouttonlegend {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(50%);
  right: calc(1%);
  height: 10px;
  width: 180px;
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}



popupBoutonFermer {
  position: absolute;
  top: -10px;
  right: -10px;
  height: 20px;
  width: 20px;
  text-align: center;
  cursor:pointer;
  color: #fff;
  border: 1px solid #000000;
  border-radius: 30px;
  background: #000;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  line-height: 20px;
}



#legendeAgglos {
  font-family: Arial,sans-serif;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  bottom: calc(2%);
  right: calc(1%);
  height: 110px;
  width: 170px;
  background-color: #fff;
  padding: 5px;
  border: 2px solid #555555;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}
#legendeAgglosNormale {
  font-family: Arial,sans-serif;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  bottom: calc(2%);
  right: calc(1%);
  height: 50px;
  width: 100px;
  background-color: #fff;
  padding: 5px;
  border: 2px solid #555555;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}


    #volet {
      padding: 22px 30px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      left: -40px;
      top: calc(10%);
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
      display:none;
    }
    
    
 
	
	#voletlegend {

      padding: 22px 30px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      /* right: calc(-3%); */
	  right : -40px;
      bottom: calc(33%);
	  width: 60px;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
    }

	#voletdom {
  
      padding: 22px 30px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      /* left : calc(-3%); */
	  left : -40px;
      bottom: calc(33%);
	  width: 60px;
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
      
    }
	
    
@media screen and (max-width: 910px) {
  
.mapboxgl-ctrl-geocoder {
    min-width: 210px !important;
}

#popupBoutonFermer {
  position: absolute;
  top: -10px;
  right: -10px;
  height: 20px;
  width: 20px;
  text-align: center;
  cursor:pointer;
  color: #fff;
  border: 1px solid #000000;
  border-radius: 30px;
  background: #000;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  line-height: 20px;
}

#PopupBienvenue {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 6;
  top: calc(30%);
  left: calc(2%);
  height: 170px;
  width: 300px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
    
    #legendeAgglos {
  font: 8px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  bottom: calc(3%);
  right: calc(1%);
  height: 110px;
  width: 200px;
  background-color: #fff;
  padding: 5px;
  border: 2px solid #555555;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}

    #legendeAgglosNormale {
  font: 8px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  bottom: calc(3%);
  right: calc(1%);
  height: 50px;
  width: 100px;
  background-color: #fff;
  padding: 5px;
  border: 2px solid #555555;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}
  

  

#Zoneboutton {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(3%);
  left: calc(2%);
  height: 10px;
  width: 230px;
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}

	
  #Legende {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(37%);
  right: calc(1%);
  height: 280px;
  width: 210px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  display:none;
  }
  
  #LegendeNormale {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(37%);
  right: calc(1%);
  height: 100px;
  width: 210px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  display:none;
  }

  #LegendeZTD {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(37%);
  right: calc(1%);
  height: 150px;
  width: 210px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }
  
#Zonebouttonlegend {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(37%);
  right: calc(1%);
  height: 10px;
  width: 180px;
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}

#Zonebouttondisclaimer {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(5%);
  left: calc(10%);
  height: calc(5%);
  width: calc(80%);
  /* height: 10px; */
  /* width: 275px; */
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}
  
  #voletdisclaimer {
  padding: 15px 15px 15px 15px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      left : -35px;
      bottom: calc(60%);
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
  }
  
  #Disclaimer {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(5%);
  left: calc(5%);
  height: calc(90%);
  width: calc(85%);
  /* height: 300px; */
  /* width: 275px; */
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }

#Outremer {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(60%);
  left: calc(1%);
  height: 60px;
  width: 150px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  }

  #Zonebouttondom {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 5px;
  position: absolute;
  z-index: 5;
  top: calc(60%);
  left: calc(1%);
  height: 10px;
  width: 150px;
  color:#black;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}
  
#volet {
      padding: 15px 15px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      left: -30px;
      top: calc(10%);
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
      display:none;
    }
    
    
	
	#voletlegend {
       
      
      padding: 15px 15px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      right: -30px;
      bottom: calc(20%);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
    }
	
	#voletdom {
       
      
      padding: 15px 15px;
      background: #555;
      color: #fff;
      text-decoration: none;
      position: absolute;
      left: -35px;
      bottom: calc(20%);
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -moz-radius: 0 0 8px 8px;
      border-radius: 0 0 8px 8px;
    }
	

	#logoArcep {
  position: absolute;
  top: calc(-0.5%);
  left: 5px;
  height: 35px;
  width: 75px;
  overflow: auto;
  background-image: url("../img/logoArcep.png");
  background-repeat: no-repeat;
  background-size: contain;
    }
	
	#texteTitreCarte{
	position: absolute;
/* 	top: calc(17%);
	left: calc (50%); */
	color: black;
	display: none;
}

#titreCarte{
  top: calc(-2%);
  left: calc(-2%);
  position: absolute;
  height: 20px;
  width: 200px;
  font: 16px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 20px 50px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  display: none;
}

	#texteTitreCarteMobile{
	position: absolute;
  top: calc(50%);
/* 	top: calc(17%);
	left: calc (50%); */
	color: black;
	display: block;
}

#titreCarteMobile{
  top: calc(-2%);
  left: calc(-2%);
  position: absolute;
  height: 40px;
  width: 83px;
  font: 9px/12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 10px 10px;
  color:#black;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10);
  border: 1px solid #555555;
  display: block;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact::after{
	left: 0px !important;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact {
	margin: 0 10px 0 0 !important;
	padding-left: 24px !important;
	padding-right: 4px !important;
}
	
}