.alert-box {
  padding: 20px;
  clear: both;
  margin-bottom: 20px;
  overflow: hidden;
  color: #fff;
  background-color: #ED1C23;
}

.alert-box img {
  margin-right: 20px;
}

.alert-box h3 {
  color: #fff;
  font-size: 1.3em;
}

@media (min-width: 450px){
  .alert-box h3 {
    font-size: 1.8em;
  }
}

.alert-box a {
  text-decoration: none;
  color: #fff;
}

.alert-box a:hover {
  text-decoration: underline;
}

.alert-box .warningshowhide {
  background: #fff;
  color: #aa1d1d;
  padding: 5px 10px;
  border-radius: 2px;
}

.alert-box .statementshowhide {
  background: #fff;
  color: #555555;
  padding: 5px 10px;
  border-radius: 2px;
}

#avalanche-warning-listings {
  margin-top: 25px;
}

.danger-scale li {
  width: 15.5%;
}

#map-container {
  position: relative;
}

#map {
  width: 100%; 
  height: 480px; 
  margin: 0 auto;  
}

#legend {
  display: none;
  position: absolute;
  width: 312px;
  /*height: 162px;*/
  background-color: rgba(100,100,100,0.85);
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#legend h2 {
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 8px;
}

.st0{fill:#E80134;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F9F915;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#55BE47;stroke:#000000;stroke-miterlimit:10;}
.st4{font-size:12px;}
.st5{font-size:12px;}

#legend-forecast {
  background-color: #fff;
  font-size: 12px;
  padding: 4px 5px;
  margin-bottom: 18px;
  line-height: 13px;
}

#key {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

#key span {
  display: block;
  float: left;
  text-align: center;
  height: 16px;
  font-size: 14px;
  line-height: 14px;
  padding-top:2px;
}

#key .low {
  background-color: #4db848;
  width: 36px;
}
#key .moderate {
  background-color: #fcf200;
  width: 71px;
}
#key .considerable {
  background-color: #f7941e;
  width: 95px;
}
#key .high {
  background-color: #cd1c24;
  width: 44px;
}
#key .extreme {
  background-color: #231f20;
  width: 66px;
  color: #cd1c24  ;
}

/* Hack to put labels on front.  Javascript solution better */
.gm-style > div:first-of-type > div:first-of-type > div:first-of-type {
  z-index: 200 !important;
}

@media (min-width: 500px){
  #map {
    height: 600px;
  }
}