#map { height: 927px; }

.still {

}

.popups {
    width: 960px;
    height: 540px;
}

.map-legend {
  position: absolute; /* or relative, depending on placement */
  top: 0;
  right: 0;
  background-color: white;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 999;
}

.map-legend ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.map-legend li {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.legend-color-box {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #333;
}

#cbContainer {
  position: absolute; /* or relative, depending on placement */
  top: 500px;
  right: 10px;
  background-color: white;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 999;
}

#cbContainer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.#cbContainer li {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.cb {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #333;
}

.red { background-color: red; z-index:5; }
.blue { background-color: blue; z-index:4;}
.purple { background-color: purple; z-index:3;}
.orange { background-color: orange; z-index:2;}

 b {
  font-size: 2.5em;
       }