.microhead-select {

  display: flex;
  flex-direction: column; /* Stack the selected value and options container */
  width: 100%; /* Ensure the widget uses the full width */
 
  position: relative;
  border: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: #fff;
  border-radius: 6px;
  border-width: 3px;
  border-color: #eee;
}

.options-container {

  position: absolute;
  top: 120%;
  left: -3px;
  width: 105%;
  border: 3px solid #eee;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  border-radius: 6px;
  border-width: 3px;
  border-color: #eee;
  z-index: 1000;
}

.options-container.hidden {
  max-height: 0;
}

.options-container:not(.hidden) {
  max-height: 500px; /* Adjust as needed */
  overflow-y: auto;
}

.option {
  padding: 10px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease; /* Smooth transition for the background color */

}

.option:hover {
  background-color: #cc1c1c!important; /* Slightly darker grey than the selected value hover for differentiation */
}

.selected-value {
  flex: 1; /* Fill the container */
  width: 100%; /* Ensure it spans the full width */
  cursor: pointer; /* Show a pointer cursor to indicate it's clickable */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for visual effects */
  margin-top: 8px;
  /* Other styling here */
}
.selected-value:hover {
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}