/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


 #legend {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 5px;
        border: 3px solid #3474b4;
      }
      #legend h3 {
        margin-top: 0;
      }
      #legend img {
        vertical-align: middle;
      }



.map-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  font-family: "Roboto", "sans-serif";
  font-size: 16px;
  margin: 10px;
  padding-right: 5px;
  /* Hide the control initially, to prevent it from appearing
           before the map loads. */
  display: none;
}

/* Display the control once it is inside the map. */
#map .map-control {
  display: block;
}

.selector-control {
  font-size: 16px;
  line-height: 30px;
  vertical-align: baseline;
}

/* Libellés pour les entrées cochées*/ 


input[type="radio"] + label {
  /* Base Styles aka unchecked */
 color: purple;
}
input[type="radio"]:not(:checked) + label {
  /* Explicit Unchecked Styles */
 color: black; 
}
input[type="radio"]:checked + label {
  /* Checked Styles */
 color: red; 
}