html, body {
  background-color: white;
}

/* Sticky footer */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

/* Navbar */
.navbar-brand {
  padding: 0; /* Image file has margins */
}
#navbar-brand-logo {
  height: 50px;
}

/* Spacing tweaks */
.row {
  padding-top: 15px;
  padding-bottom: 15px;
}
body > .container {
  padding: 60px 15px;
}
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
  text-align: center;
}
code {
  font-size: 80%;
}
h1 {
  margin-bottom: 1em;
}


/* JS div sizes */
#monitoring-map {
  height: 500px;
}
#pm10-chart {
  height: 300px;
}
#pm25-chart {
  height: 300px;
}
#cp-windrose-chart, #gs-windrose-chart,
#cp-dustrose-chart, #gs-dustrose-chart {
  height: 300px;
}

/* Site color classes */
.dt4 > .card-header {
  background-color: #4C72B0; /* Fallback */
  background-color: var(--dt4-color);
  color: white;
}
.dt6 > .card-header {
  background-color: #DD8452; /* Fallback */
  background-color: var(--dt6-color);
  color: white;
}
.btn-dt4,
.btn-dt6 {
  background-color: #e8eaeb;
}
.btn-dt4:focus,
.btn-dt4:active,
.btn-dt4.active {
  background-color: #4C72B0; /* Fallback */
  background-color: var(--dt4-color);
  color: white;
}
.btn-dt6:focus,
.btn-dt6:active,
.btn-dt6.active {
  background-color: #DD8452; /* Fallback */
  background-color: var(--dt6-color);
  color: white;
}

/* Feather icons */
.feather {
  color: #999;
}
a:hover .feather,
a:active .feather {
  color: #333;
}