/* Loading animation for progress bars */
  @keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
  }

  /* Make *all* DivIcon markers transparent. 
   * This is a workaround for the fact that the water level icon as the ipyleaflet DivIcon
   * applies leaflet-div-icon to the icon, which is white by default.
   * Unfortunately, DivIcon does not take a class name or style attribute.
   * I tried adding this to the html passed to DivIcon, but this gets wrapped in a <div>
   * generated by the ipyleaflet library, and the style attribute is not applied.
   */
  .leaflet-marker-icon.leaflet-div-icon {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .sidebar-logo {
    max-width: 200px;
    margin: 0 auto 15px;
    display: block;
}

/* Info icon styling */
.bi-info-circle {
    color: var(--bs-primary);
    transition: opacity 0.2s;
}

.bi-info-circle:hover {
    opacity: 0.7;
}

.interpretation-content {
    line-height: 1.6;
}

.interpretation-content h4 {
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

.interpretation-content ul {
    margin-top: 0.8rem;
    padding-left: 1.5rem;
}