styles.css

/* Rubik */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600;700&display=swap');

/* Frutiger Light approximate */
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,500,700,900"); 

/* DIN condensed approximate */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/* Whole document: */

body{
  font-family: 'Roboto';
  font-size: 17px;
  font-weight: 400;
}

/* header styles */

h1{
  font-family: 'Rubik';
  font-weight: 700;
  color: #005293;
}

h2,h3,h4,h5 {
  font-family: 'Lato';
  font-weight: 800;
  color: #00806E
}

.header-section-number {
  color: #00806E
}

/* top navbar styles */

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

.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: 'Roboto';
  font-weight: 300;
  color: #958984;
}

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

#editor-map { /* this sets map editor height dynamically if in sidebar */
  height: calc(100vh - 60px) !important;
} 

#map { /* this sets map height dynamically if in sidebar */
  height: calc(100vh - 60px) !important;
} 

/* sub sections */

.level1 {
  font-family: 'Roboto';
}

.level2 {
  font-family: 'Roboto';
}

.level3 {
  font-family: 'Roboto';
}

.chart-title {
  font-family: 'Roboto';
  font-weight: 300;
  color: #958984;
}

.nav-tabs {
  font-family: 'Roboto';
  font-weight: 300;
  color: #958984;
}

.control-label {
  font-family: 'Roboto';
  font-weight: 300;
  color: #958984;
}

.shiny-text-output {
  font-family: 'Roboto';
  font-weight: 300;
  color: #958984;
}

.material-switch {
  font-family: 'Roboto';
  font-weight: 300;
  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%;
}

/* leaflet */

.leaflet-control { /* leaflet legends, control boxes */
  font-family: 'Roboto';
  font-weight: 300;
  color: #958984;
}

/* figure captions */

.caption {
  font-family: 'Roboto';
  font-weight: 300;
  color: #958984;
}

/* reactable fixed columns*/

.sticky {
  position: sticky !important;
  background: #fff;
  z-index: 1;
}

.left-col-1 {
  left: 0px;
}

.left-col-2 {
  left: 170px;
  border-right: 1px solid #eee !important;
}

.left-col-3 {
  left: 370px;
  border-right: 1px solid #eee !important;
}

.left-col-1-bord {
  left: 0px;
  border-right: 1px solid #eee !important;
}

.right-col-1 {
  right: 0px;
}

.right-col-2 {
  right: 85px;
  border-left: 1px solid #eee !important;
}

.right-col-3 {
  right: 225px;
  border-left: 1px solid #eee !important;
}

.right-col-2a {
  right: 100px;}

.right-col-3a {
  right: 200px;
  border-left: 1px solid #eee !important;
}

/* wrapper class for centering images */
#wrapper{
 text-align:center;
}

.center {
  display: block;
  text-align:center;
}

/* change link colors to match wordpress */
a:link {
  color: #ea6f17;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #ea6f17;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #0078db;
  background-color: transparent;
  text-decoration: none;
}

/* tabset pills */
.nav-pills>li>a:hover, .nav-pills>li>a:focus, .nav-pills>li.active>a,     .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
     background-color: #F0AD4E;
     }