#mapDivId {
  position: fixed;
  z-index: -1;
  width: 64vw;
  height: 93vh;
  border: 1px solid black;
  border-radius: 10px;
  }

body{
  background-color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:white;
}

li {
    float: left;
}

li a,
.dropbtn {
    display: inline-block;
    color: #bb0000;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-family: "Arial", Helvetica, sans-serif;
}

li a:hover,
.dropdown:hover .dropbtn {
    background-color:#bcbcbc;
    border-radius: 10px;
    cursor: pointer;
    cursor: hand;
}

#description-box {
    position: fixed;
    width: 32vw;
    height: 26vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 13vh;
    right: 1vw;
    text-align: left;
    padding-left: 20px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#monthPicker {
    position: fixed;
    width: 10vw;
    height: 4vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 5vh;
    right: 23vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}
#creditBox{
    position: fixed;
    width: 32vw;
    height: 16vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    bottom: .5vw;
    right: 1vw;
    text-align: left;
    padding-left: 20px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#chartContainer {
    position: fixed;
    width: 32vw;
    height: 40vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    right: 1vw;
    bottom: 19vh;
    text-align: left;
    padding-left: 20px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

.toggles {
    background: white;
    padding-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 7px;
    border-radius: 10px;
}

.legend {
    background: white;
    padding-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 7px;
    border-radius: 10px;
}

.heatLegend {
    background: white;
    padding-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 7px;
    border-radius: 10px;
    text-align: center;
}

.circle {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1.5px solid black;
}

.heatGradient {
    background: linear-gradient(red, yellow, green, blue);
    height: 80px;
    width: 14px;
    display: inline-block;
    border: 1.5px solid black;
    opacity: .6;
}

#theftHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 24vh;
    right: 27vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#theftHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}

#crashHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 29vh;
    right: 27vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#crashHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}

#drugHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 34vh;
    right: 27vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#drugHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}

#adminHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 24vh;
    right: 20vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#adminHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}

#assaultHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 29vh;
    right: 20vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#assaultHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}

#otherHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 34vh;
    right: 20vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#otherHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}

#allHeat{
    visibility: hidden;
    position: fixed;
    width: 5vw;
    height: 3vh;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    top: 29vh;
    right: 13vw;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: #bb0000;
    font-family: "Arial", Helvetica, sans-serif;
}

#allHeat:hover{
    border-width: 3px;
    cursor: pointer;
    cursor: hand;
}