body {
  background: #eee;
}

* {
  box-sizing: border-box;
}

#Data td:nth-child(n + 2) {
  text-align: right;
}

nav {
  background: #333;
  color: #f8f8f8;
}

.selected {
  background: #bfb;
}

#Data tr:last-child {
  background: yellow;
}

#Data tr:last-child td:nth-child(1) {
  text-align: right;
  font-weight: bold;
}

#Data tr > :nth-child(2) {
  border-left: 1px solid #333;
}

#Data th {
  border-bottom: 1px solid #333;
}

.graph {
  zwidth: 24%;
  min-width: 450px;
  height: 250px;
  float: left;
  border: 1px solid black;
  margin-top: 10px;
  margin-right: 5px;
}

.d3 .settings,
.d3 .legend {
  display: none;
}

.d3 .x .tick text {
  font-size: 90%;
}

nav > span {
  margin-right: 3em;
}

nav {
  padding: 0.3em;
}

select:focus {
  background: yellow;
}

#ByCounty td:nth-child(n + 2) {
  text-align: right;
}

#Data th {
  vertical-align: bottom;
}

#ByCounty {
  position: fixed;
  background: #fdfb09;
  width: 70em;
  left: calc(50% - 30em);
  top: 10%;
  bottom: 10%;
  right: 10%;
  overflow: auto;
  z-index: 2;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 0 1em;
}

#ByCounty table {
  width: 100%;
  border: 5px solid #333;
}

#ByCounty th {
  position: sticky;
  background: #def;
  top: 0;
}

.background {
  opacity: 0.1;
  position: fixed;
}

button.close {
  position: absolute;
  right: 5px;
  top: 5px;
}

#Data td {
  vertical-align: top;
}

#ByCounty tr > *:nth-last-child(1) {
  background: lightyellow;
  border-left: 1px solid black;
}

#ByCounty tbody tr:hover {
  outline: 1px solid red;
}

#ByCounty th {
  cursor: pointer;
}

tr.breakdown {
  background: #fed;
}