:root {
    --font-family-list: 
        "Merriweather Sans", 
        "Merriweather Sans ExtraBold", 
        "Merriweather Sans Light", 
        "Merriweather Sans Medium", 
        "Merriweather Sans SemiBold", 
        "Merriweather";
}


/* General body styles */
body {
  background-color: #FFFFFF;  /* Background color */
  color: #000000;             /* Default text color */
  font-family: var(--font-family-list);
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-list); /* Heading font */
}

/* Code and preformatted text styles */
code, pre {
  font-family: 'Courier Prime', monospace;  /* Code font */
}

/* Link colors and other interactive elements */
a {
  color: #000000;  /* Primary color for links */
}

a:hover, a:focus {
  color: #949494;  /* Secondary color on hover/focus */
}

/* Button and interactive element styles */
.btn-primary {
  background-color: #000000;  /* Primary button color */
  border-color: #000000;
}

.btn-primary:hover {
  background-color: #949494;  /* Secondary color for hover */
  border-color: #949494;
}

.btn-secondary {
  background-color: #949494;  /* Secondary button color */
  border-color: #949494;
}

.btn-secondary:hover {
  background-color: #000000;  /* Primary color for hover */
  border-color: #000000;
}

/* Info color (e.g., for alert boxes, informational elements) */
.alert-info {
  background-color: #f5f4f1;  /* Info color */
  border-color: #f5f4f1;
  color: #000000;  /* Text color for info elements */
}

/* Customize other form elements, input boxes, etc., based on your design */
input, select, textarea {
  background-color: #FFFFFF;
  border: 1px solid #949494;  /* Secondary color for borders */
  color: #000000;  /* Text color */
  font-family: var(--font-family-list);
}

input:focus, select:focus, textarea:focus {
  border-color: #000000;  /* Primary color for focus */
  outline: none;
}

/* Container and layout styles */
.container-fluid {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

/* Font styles for leaflets, tooltips, and modals */
.leaflet .legend { 
  line-height: 11px;
  font-size: 10px;
  font-family: var(--font-family-list);
}

.info { 
  font-size: 10px;
  font-family: var(--font-family-list);
}

.leaflet-container {
  font-family: var(--font-family-list);
}

.hovertext text {
  font-family: var(--font-family-list) !important;
  font-size: 12px !important;
}

.modeBarStyle {
  font-family: var(--font-family-list); !important;
  font-size: 10px !important;
}


.card-body {
  height: 100%;
  width: 100%;
}

.card-header {
  background-color: #f5f4f1;
}

/* Modal styles */
.modal-dialog {
  max-width: 95%; 
  height: 95%;
}

.modal-button {
  color: #FFB300;
}

.modal-content {
  height: 95%;
}

/* Specific styling for 'vorname' */
#vorname {
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* Accordion and navbar styling */
.accordion .panel {
  background-color: black; 
  color: white;
}

.navbar .navbar-default {
  background-color: black !important;
  color: #FFFFFF !important;
}

.navbar .nav-item .nav-link.active {
  color: black !important;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.navbar.navbar-default {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

#nav_menu .nav-link:hover {
  font-weight: inherit;
}

.navbar .nav-underline .nav-link, .navbar .nav-underline :where(ul.nav.navbar-nav > li) > a {
  padding-bottom: 8px;
}

.navbar .nav-underline :where(ul.nav.navbar-nav > li) > a.active {
  border-color: #FFB300;
}

.nav-link {
  font-size: 20px
}

/* Button styles for 'bttn-unite' */
.bslib-card .card-header {
  font-weight: 300 !important;
}

.bttn-unite {
  border-radius: inherit;
  color: #26262c;
  border-width: 2px;
}

.bttn-unite.bttn-success {
  color: #26262c;
  border-color: #26262c;
}

.bttn-unite::after, .bttn-unite::before {
  display: none;
}

.bttn-unite.bttn-success:focus, .bttn-unite.bttn-success:hover {
  background: transparent;
  border-color: #FFB300;
  color: #26262c;
}

.js-plotly-plot .plotly {
  font-family: var(--font-family-list);
}

/* Responsive styles */
.plot3-container {
  width: 100%;
}

/* Icon color (if using Font Awesome or similar icons) */
i, .fa, .icon {
  color: #000000;  /* Primary color for icons */
}

/* Specific styles for the leaflet controls */
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
  font-size: 9px;
}

.livestr-button {
  color: #000000;
}