.svg-map {
  width: 100%;
}
.svg-map svg {
  width: 100%;
  height: 100%;
}
/*
svg rect {
  fill: #cdcdcd;
  stroke-width: 60;
  stroke: #acacac;
}
svg rect.V {
  fill: #de7a1e;
}
svg rect.R {
  fill: #dea17e;
}
svg rect.B {
  fill: #d3de88;
}
svg rect.G {
  fill: #a5de84;
}
svg rect.N {
  fill: #78de89;
}
svg rect.O {
  stroke: #3191ac;
}
svg rect.R {
  stroke: #312cac;
}
svg rect.highlight {
  fill: yellow;
}*/

.map-legend {
  margin: 15px 0px;
}
.map-legend .legend-item {
  display: inline-block;
  margin: 5px 10px 5px 0px;
  border: 1px solid #cdcdcd;
  padding: 5px 15px 5px 5px;
}
.map-legend .item-rect {
  display: inline-block;
  width: 40px;
  height: 20px;
  vertical-align: middle;
}
.map-legend .item-text {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}