html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  color: white;
  background: #3D4C57;
  font-family: "Avenir Next W00","Helvetica Neue",Helvetica,Arial,sans-serif;
}


#viewDiv {
  position: absolute;
  top: 0px;
  left: 0px;
}

.esri-ui {
  bottom: 0px !important;
}

section {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  padding: 30px 30px;
  background-color: rgba(61, 76, 87, 0.85);
  max-width: 300px;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 15px;
}

a {
  color: #9FA5AB;

  text-decoration: none;
}

a:visited {
  color: #9FA5AB;
}

a:hover {
  color: white;
  text-decoration: underline;
}

.dashboard-component {
  width: 100px;
  /* height: 100px; */
  float: left;
}

.confirmed {
  color: #ffdc2e;
  /* background-color: #fff6cc; */
}

.confirmed-light {
  color: #d5c058;
  /* color: rgb(255, 246, 204); */
}

.deaths {
  color: #ea4b43;
}

.deaths-light {
  color: #cb6762;
}

.recovered {
  color: #4fea3e;
}

.recovered-light {
  color: #6dcb62;
}

.dashboard-number {
  font-size: 1.5em;
}

.dashboard-attribution {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.65);
}

.dashboard-credits {
  position: absolute;
  bottom: 20px;
  right: 50px;
  width: 260px;
  font-size: 0.8em;
  text-align: center;
}

/* .extra{
  font-size: 0.8em;
} */

#dashboardRegion {
  font-size: 1.3em;
  margin-bottom: 20px;
}

#dashboardLineChart {
  margin-top: 100px;
}

@media screen and (max-width: 695px) {
  section {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }

  .dashboard-credits {
    width: 100%;
    right: 0px;
  }
}

@media screen and (max-height: 600px) {
  #dashboardLineChart {
    visibility: hidden;
    display: none !important;
  }
}

@media screen and (max-height: 400px) {

  #dashboardBarChart {
    visibility: hidden;
    display: none !important;
  }
}