/*

MAP CSS

*/

/* Sets container width and height for map */
div#map {
  /* width: 55.625rem; */
  /* height: 28.75rem; */
  overflow: auto;
}



/* Updates Map width in mobile and tablet view */
@media only screen and (max-width: 1024px) {
  div#map {
    width: 100%;
  }
}

/* brush box properties*/
.selection { stroke: red; stroke-width: 2px; stroke-dasharray: 4px; stroke-opacity: 0.5; fill: transparent; }

/* properties for map landmasses. Mesh is the border between countries*/
path.land { stroke: #50576A; stroke-width: 0.5px; fill: #eee; }
path.mesh { stroke: #50576A; stroke-width: 0.5px; fill: none; }
path.tectonic { stroke:#000; stroke-width: 0.5px; fill: none; opacity: 0.5 }

/* properties for IPP strokes*/
path.gpsIPP { stroke:#4682B4 ; stroke-width: 2px; opacity: 0.5; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}
path.gloIPP { stroke:#FF6347 ; stroke-width: 2px; opacity: 0.5; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}
path.galIPP { stroke:#00FF00 ; stroke-width: 2px; opacity: 0.5; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}
path.beiIPP { stroke:#DDA0DD ; stroke-width: 2px; opacity: 0.5; stroke-linejoin: "round"; stroke-linecap: "round"; fill: none;}

#map svg text { font-size: 0.8rem; }
#map svg text.title { font-size: 12px; }
#map svg text.mapLabel { font-weight: normal; font-size: 0.75rem;}

/*earthquake plotting*/
#map svg circle.quake {stroke-width:2px; }

div#map p#dragzoomselect { text-align: center; font-size: 9px; }

/* properties for outer container that has map + sidebar for selection*/

#outerContainer{
  width: 100%;
  height: auto;
  margin: auto;
}