#app .app {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
}

#app .data {
  max-width: 1000px;
  display: flex;
}

#app nav ul {
  padding-left: 0;
  display: flex;
  justify-content: center;
}

#app nav ul li {
  display: inline-block;
}

#app nav ul li a {
  display: inline-block;
  cursor: pointer;
  font-family: "Nimbus Sans L", "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #d04901; /* Header Orange */
  text-decoration: none;
  text-transform: uppercase;
  padding: 5px 25px 0;
  border-bottom: 2px solid rgb(229, 229, 229);
}

#app nav {
  margin-bottom: 8ex;
}

#app nav ul li a:hover {
  background-color: rgb(229, 229, 229, 0.5);
}

#app nav ul li.active a {
  font-weight: bold;
}

#app nav ul li.active.sex-gender a {
  border-bottom-color: #019cbf;
}
#app nav ul li.active.race-ethnicity a {
  border-bottom-color: #009c5c;
}
#app nav ul li.active.disability a {
  border-bottom-color: #721156;
}
#app nav ul li.active.lgbtq a {
  border-bottom-color: #1e3a7e;
}
#app nav ul li.active.board a {
  border-bottom-color: #dd6830;
}

#app .table {
  flex-grow: 1;
  width: 100%;
  margin: 0 0 14ex 0;
}

#app .table th {
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
}

#app nav li.active.sex-gender {
  border-bottom-color: #019cbf;
}

#app table.sex-gender .row-cell.last .left,
#app div.table.colorful table.sex-gender .left {
  background-color: #019cbf;
}

#app nav li.active.race-ethnicity {
  border-bottom-color: #009c5c;
}
#app table.race-ethnicity .row-cell.last .left,
#app div.table.colorful table.race-ethnicity .left {
  background-color: #009c5c;
}

#app nav li.active.disability {
  border-bottom-color: #721156;
}
#app table.disability .row-cell.last .left,
#app div.table.colorful table.disability .left
{
  background-color: #721156;
}

#app nav li.active.lgbtq {
  border-bottom-color: #1e3a7e;
}
#app table.lgbtq .row-cell.last .left,
#app div.table.colorful table.lgbtq .left {
  background-color: #1e3a7e;
}
#app nav li.active.board {
  border-bottom-color: #dd6830;
}
#app table.board .row-cell.last .left,
#app div.table.colorful table.board .left {
  background-color: #dd6830;
}

#app table {
  width: 100%;
  font-family: "Nimbus Sans L", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#app .table-container {
  display: flex;
  flex-direction: row;
}

#app .table-caption-container {
  width: 400px;
  padding: 20px 50px 0 25px;
}

#app table td {
  padding: 10px;
}

#app .caption {
  font-size: 14px;
}

#app .row-cell {
  min-width: 140px;
}

#app .row-cell .bg {
  background-color: rgb(238, 238, 238);
}

#app .row-cell span {
  font-family: "Nimbus Sans L", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 20px 4px;
  line-height: 100%;
}

#app .row-cell div {
  display: flex;
}

#app .row-cell-right .bg > div {
  justify-content: flex-end;
}

#app .row-cell .left {
  background-color: rgb(133, 133, 133);
}

#app .row-cell-empty .bg {
  padding-left: 10px;
}

#app td.label {
  width: 80px;
  vertical-align: middle;
  text-align: right;
  font-size: 14px;
  line-height: 1.3;
}

#app table {
  table-layout: fixed;
}

#app table .row-cell .left.value {
  color: white;
}

#app table tfoot {
  font-size: 12px;
}

#app table tfoot td {
  padding-top: 4ex;
}

#app h3 {
  font-family: "Nimbus Sans L", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#app table h4.subheading {
  margin: 1ex 0 0;
}

.editor-only {
    border: 1px dotted red;
    padding: 2rem;
}

.theme--default .editor-only {
  display: none;
}