.webform-options-display-buttons label.webform-options-display-buttons-label {
  display: inline !important;
}

#edit-grammata--wrapper-legend,
#edit-latiniko-alfavito--wrapper-legend {
  padding-bottom: 10px;
}

/*
 * 1. Style the main input field
 * This is the field the user types in.
 */
.ui-autocomplete-input {
  background-color: #f5f5f5; /* A light grey */
  color: #000000; /* Black for the text */
  border: 1px solid #cccccc; /* A medium grey border */
}

/*
 * 2. Style the dropdown menu container
 * This is the box that holds all the suggestions.
 */
.ui-autocomplete {
  background-color: #ffffff; /* A clean white background for the dropdown */
  border: 1px solid #cccccc; /* A standard grey border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow for depth */
}

/*
 * 3. Style an individual suggestion item
 * This affects each line item in the dropdown.
 */
.ui-menu-item .ui-menu-item-wrapper {
  color: #333333; /* Dark grey text for readability */
  background-color: transparent; /* Ensures it uses the main dropdown background */
  border: none;
  padding: 8px 12px;
}

/*
 * 4. Style the highlighted or focused item
 * This is the suggestion the user is hovering over or has selected.
 */
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background-color: #0070ab; /* A vibrant blue for the highlight */
  color: #ffffff; /* White text for contrast on the highlight */
  border-radius: 4px;
}