#map {
  width: calc(100% - 400px);
  height: 100%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0px;
  left: 400px;
}

#legend {
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  z-index: 400;
  font-size: 1em;
  font-family: sans-serif;
  width: 165px;
  background: rgba(255, 255, 255, 0.6);
}

.legendheading {
  position: relative;
  height: 25px;
  padding: 5px 2px 0px 2px;
  font-size: larger;
  font-weight: bold;
}

.legenditem {
  padding: 2px;
  margin-bottom: 2px;
}


/*Marker clusters*/

.marker-cluster-pie g.arc {
  fill-opacity: 0.5;
}

.marker-cluster-pie-label {
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}


/*Markers*/

.marker {
  width: 18px;
  height: 18px;
  border-width: 2px;
  border-radius: 50%;
  margin-top: -10px;
  margin-left: -10px;
  border-style: solid;
  fill: #CCC;
  stroke: #444;
  background: #CCC;
  border-color: #444;
}

.marker div {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}

.marker div span {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*marker categories*/

.category-s1 {
   fill: #009E8E;
  stroke: #16FFD0;
  background: #16FFD0;
  border-color: #007;
}
.category-99 {
   fill: #FA0;
  stroke: #6495ed;
  background: #6495ed;
  border-color: #007;
}
.category-10 {
  fill: #CCC;
  stroke: #444;
  background: #CCC;
  border-color: #444;
}

.category-1 {
  fill: #FF0000;
  stroke: #800;
  background: #FF0000;
  border-color: #800;
}

.category-2 {
  fill: #FA0;
  stroke: #B60;
  background: #FA0;
  border-color: #B60;
}

.category-3 {
  fill: #FF3;
  stroke: #D80;
  background: #FF3;
  border-color: #D80;
}

.category-4 {
  fill: #BFB;
  stroke: #070;
  background: #BFB;
  border-color: #070;
}

.category-5 {
  fill: #9DF;
  stroke: #007;
  background: #9DF;
  border-color: #007;
}

.category-6 {
  fill: #CCC;
  stroke: #444;
  background: #CCC;
  border-color: #444;
}


/*marker icons*/

.icon-0 {
  background-image: url('../img/empty-16.png');
  background-repeat: no-repeat;
  background-position: 1px 0px;
}

.icon-1 {
  background-image: url('../img/nopos-16.png');
  background-repeat: no-repeat;
  background-position: 1px 0px;
}

.icon-2 {
  background-image: url('../img/bicycle-16.png');
  background-repeat: no-repeat;
  background-position: 1px 0px;
}

.icon-3 {
  background-image: url('../img/motorcycle-16.png');
  background-repeat: no-repeat;
  background-position: 1px 0px;
}

.icon-4 {
  background-image: url('../img/car-16.png');
  background-repeat: no-repeat;
  background-position: 1px 0px;
}

.icon-5 {
  background-image: url('../img/car-16.png');
  background-repeat: no-repeat;
  background-position: 1px 0px;
}


/*Popup*/

.map-popup span.heading {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
}

.map-popup span.attribute {
  display: block;
}

.map-popup span.label {
  font-weight: bold;
}