/*Import Merriweather Sans*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans');

/* styles.css */

body, .plotly .modebar-btn, .plotly .modebar-group, .plotly .modebar {
  font-family: 'Merriweather Sans';
}

/* Apply the custom font to the entire body */
body {
  font-family: 'Merriweather Sans';
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather Sans';
}

/* Apply the custom font to all title elements */
.hover-title {
  font-family: 'Merriweather Sans', sans-serif;
}

/* Apply the custom font to all h5 elements following an img element */
img + h5 {
  font-family: 'Merriweather Sans', sans-serif;
}

/* Apply the custom font to specific Plotly elements */
.plotly .main-svg text,
.plotly .main-svg tspan,
.plotly .modebar-btn,
.plotly .modebar-group,
.plotly .xaxislayer-above .xtick > text,
.plotly .yaxislayer-above .ytick > text,
.plotly .legend,
.plotly .legendtitle,
.plotly .legendtext {
  font-family: 'Merriweather Sans', sans-serif !important;
}

/* Custom CSS to style tabs within tabsetPanel */
.wellPanel .tabsetPanel .nav-tabs > li > a {
  background-color: #F5F5F5; /* Light grey background color for tabs */
  border-color: #ddd; /* Border color */
}

.wellPanel .tabsetPanel .nav-tabs > li.active > a,
.wellPanel .tabsetPanel .nav-tabs > li.active > a:focus,
.wellPanel .tabsetPanel .nav-tabs > li.active > a:hover {
  background-color: #CCCCCC !important; /* Darker grey background color for active tab */
  border-color: #b3b3b3; /* Darker border color for active tab */
}

.navbar-default .nice-button {
  background-color: #D3D3D3;
  color: black;
  border: none;
  padding: 3px 6px; /* Adjust padding to make buttons smaller */
  font-size: 8px; /* Adjust font size to make buttons smaller */
  border-radius: 5px;
  font-family: 'MerriweatherSans', sans-serif !important;
}

.navbar-default .nice-button.active,
.navbar-default .nice-button:hover {
  background-color: #333 !important; /* Dark grey color for active and hover states */
  color: white !important; /* White text color for active and hover states */
}