/* Dropdown container */
#departmentSuggestions {
  list-style: none; /* Remove bullets */
  margin: 0; /* Remove margin */
  padding: 0; /* Remove padding */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
  animation: fadeIn 0.2s ease-in-out; /* Subtle animation */
  max-width: 300px; /* Limit maximum width for large screens */
  width: 100%; /* Ensure it adapts to the input field size */
  position: absolute; /* Properly align below the input */
  left: 0; /* Align with the input field */
  transform: translateX(-10px); /* Slight padding from left */
  z-index: 10;
  border-radius: 8px; /* Rounded corners */
  background-color: white; /* Clean background */
  max-height: 240px; /* Set a maximum height */
  overflow-y: auto; /* Enable vertical scrolling */
}

/* Dropdown items */
#departmentSuggestions li {
  padding: 12px 16px; /* Comfortable spacing */
  font-size: 1rem; /* Readable font size */
  font-weight: 500; /* Medium weight */
  color: #333; /* Neutral text color */
  border-bottom: 1px solid #f1f1f1; /* Divider between items */
  cursor: pointer; /* Indicate clickability */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Last item border removal */
#departmentSuggestions li:last-child {
  border-bottom: none;
}

/* Hover effect for dropdown items */
#departmentSuggestions li:hover {
  background-color: #f0f9ff; /* Light blue background */
  color: #007bff; /* Highlight text color */
}

/* Smooth dropdown appearance */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #departmentSuggestions {
    width: 90%; /* Expand to almost full width */
    left: 5%; /* Centered padding */
    max-width: none; /* No restriction on small screens */
    transform: translateX(0); /* Align properly */
  }
}

/* Scrollbar styling (Webkit-based browsers like Chrome, Edge) */
#departmentSuggestions::-webkit-scrollbar {
  width: 8px;
}

#departmentSuggestions::-webkit-scrollbar-track {
  background: #f9f9f9; /* Scrollbar track color */
}

#departmentSuggestions::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Scrollbar handle color */
  border-radius: 4px; /* Rounded edges */
}