styles.css

@import url("//fonts.googleapis.com/css?family=Lobster|Cabin:400,700");

/* Frutiger Light approximate */
@import url("//fonts.googleapis.com/css?family=Hind&display=swap"); 

/* DIN condensed approximate */
@import url("//fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");

/* Fira Mono */
@import url("//fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback");

/* header styles */

h1 {
  font-family: 'Hind';
  color: #958984;
}
h2 {
  font-family: 'Hind';
  color: #958984;
}
h3 {
  font-family: 'Hind';
  color: #958984;
}
h4 {
  font-family: 'Hind';
  color: #958984;
  font-style: italic;
}
h5 {
  font-family: 'Hind';
  color: #958984;
  font-style: italic;
}

/* top navbar styles */

.navbar {
  background-color:#00806E;
  border-color: black;
  font-family: 'Hind'; /* main tab fonts */
}

.navbar-brand { /* dashboard title */
  font-family: 'Roboto Condensed';
  font-weight: bold;
  color: #FF0000;
}

.navbar-nav li a:hover, .navbar-nav > .active > a {
  color: #fff !important;
  background-color:#5c4a42!important;
  background-image: none !important;
}

/* sidebar */

.sidebar {
  font-family: 'Hind';
  color: #958984;
}

.section.sidebar {
  background-color: #95898430; /* gray with alpha */
}

/* sub sections */

.level3 {
  font-family: 'Hind';
  color: #958984;
}

.chart-title {
  font-family: 'Hind';
  font-style: italic;
  color: #958984;
}

.nav-tabs {
  font-family: 'Hind';
  font-style: italic;
  color: #958984;
}


/* shiny slider stuff */

.irs-bar {
  background: #00806E
}
.irs-bar {
  border-top: 1px #00806E
}
.irs-bar-edge {
  background: #00806E
}
.irs-bar-edge {
  border: 1px #00806E
}
.irs-single {
  background: #00806E;
}

/* tabset top border */

.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: #00806E;
}

/* bar chart formatting for reactable */
.bar-cell {
  display: flex;
  align-items: center;
}
.number {
  font-family: "Fira Mono", Consolas, Monaco, monospace;
  font-size: 13.5px;
  white-space: pre;
}
.bar-chart {
  flex-grow: 1;
  margin-left: 6px;
  height: 14px;
}
.bar {
  height: 100%;
}