/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
  padding: 10px 20px; /* Adjust padding for better alignment */
  margin-left: 15px; /* Center the button more relative to the layout */
}

/* Keep the same color for non-focused button */
.dropbtn:not(:focus) {
  background-color: #04AA6D;
}

/* Dropdown button hover & focus styles */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980b9;
}

/* Search bar inside the dropdown */
#species_search {
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 20px 10px 45px; /* Adjust padding for search input */
  border: none;
  border-bottom: 1px solid #ddd;
  position: sticky; /* Stick the search bar to the top */
  top: 0;
  background-color: #f6f6f6;
  z-index: 2;
  margin: 0;
}

/* Search bar directly visible without button */
#species_search {
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 20px 10px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 300px; /* Adjust the width of the search bar */
  margin: 15px auto; /* Center the search bar horizontally */
  display: block; /* Ensure it is visible */
  background-color: #f6f6f6;
}

/* Directly visible search bar without button */
#species_search {
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 200px; /* Adjusted width for the search bar */
  margin: 0; /* No margins */
  background-color: #f6f6f6;
  display: block; /* Ensure it's visible */
}
/* Search bar is visible */
#species_search {
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 200px;
  margin: 0;
  background-color: #f6f6f6;
  display: block;
}

/* Focused search bar outline */
#species_search:focus {
  outline: 3px solid #ddd;
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

/* Initially hide the dropdown content */
.dropdown-content {
  display: none; /* Hidden until search bar is clicked */
  position: absolute;
  background-color: #ffffff;
  width: 200px;
  border: 1px solid #ddd;
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
}

/* Links inside dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

/* Hover effects for dropdown links */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Show dropdown when the search bar is clicked (JavaScript will add the 'show' class) */
.show {
  display: block;
}

/* Additional adjustments for responsiveness */
@media screen and (max-width: 768px) {
  #species_search {
      width: 100%;
  }

  .dropdown-content {
      width: 100%;
  }
}