styles.css

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

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

/* Whole document: */

body{
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 18px;
  color: #636363;
}

/* header styles */

h1,h2,h3,h4,h5 {
  font-weight: 500;
  color: #005293;
  font-family: 'Rubik',Helvetica,Arial,Lucida,sans-serif;
}
h1 {
	font-size:40px;
}
h2 {
	font-size:32px;
}
h3 {
	font-size:24px;
}
h4 {
	font-size:18px;
}
h5 {
	font-size:16px;
}
h6 {
	font-size:14px;
}

/* 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 */

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

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

.nav-tabs {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: italic;
  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;
  font-style: italic;
}

/* 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 {
    color: #db5b25;
    font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 500;
	text-decoration:none;
}

a:visited {
  color: #db5b25;
}

a:hover {
  color: #f57d05;
}

/* tabset pills */
.nav-pills>li>a {
    border-radius: 4px;
    color: #ffffff!important;
    font-size: 16px;
    font-family: 'Rubik',Helvetica,Arial,Lucida,sans-serif!important;
    background-color: #F0AD4E;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    margin-top: 3px;
    margin-left: 3px;
}
.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: #ea6f17;
     }