body { margin: 0; padding: 0; }

#map { position: absolute; top: 0; bottom: 0; width: 100%; }

.map-overlay{
  position: absolute;
  left: 0;
  padding: 10px;
}

#icons8-bus {
  width: 96px;
  height: 96px;
  border: solid 1px #808080;
  box-shadow: inset 0px 1px 3px rgba(100,100,100,0.5);
}

.marker{
  background-image: url("./images/icons8-bus-96_blue_left.png");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.markerBlue{
  background-image: url("./images/icons8-bus-96_blue_left_up.png");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.markerGreen{
  background-image: url("./images/icons8-bus-96_green_left_up.png");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.markerRed{
  background-image: url("./images/icons8-bus-96_red_left_up.png");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/* https://www.w3schools.com/csS/css3_buttons.asp */
/* button{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
} */

button:hover{
  background:cadetblue;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}