.autoCompleteResultsField {
  padding-top: 5px;
  position: relative;
}

#autoCompleteResults {
  background-color: white;
  width: 100%;
  position: absolute;
  text-align: left;
  z-index: 1;
}

#magnifier {
  color: var(--theme-primary);
  position: absolute;
  left: 7px;
  top: 13px;
  z-index: 1;
}

#autoComplete {
  width: 100%;
  padding-left: 30px;
}

.autoComplete_selected {
  background-color: lightsteelblue;
  div {
    background-color: lightsteelblue;
  }
}

#autoComplete_list {
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-border-radius);
  padding: 0;
  margin: 0;
  li {
    list-style: none;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
    div {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    &:hover {
      background-color: lightsteelblue;
    }
    &:nth-of-type(1) {
      border-bottom: 1px;
      padding-top: 12px;
      padding-bottom: 6px;
    }
    &:nth-of-type(2) {
      padding: 0;
      margin-top: 3px;
      background-color: white;
      div {
        padding-right: 12px;
        .autocomplete_name {
          padding-top: 3px;
          padding-bottom: 0;
          padding-left: 12px;
        }
        &:hover {
          background-color: lightsteelblue;
        }
      }
    }
    &:nth-of-type(2)::before {
      content: 'Ou rechercher par lieu :';
      flex: 0 0 90%;
      color: grey;
      padding-left: 12px;
      padding-right: 12px;
    }
    &:last-of-type {
      padding-bottom: 12px;
    }
    .autocomplete_type {
      color: grey;
    }
  }
}

#autoComplete_list:empty {
  display: none;
}

.autoComplete_highlighted {
  font-weight: bold;
  color: var(--theme-primary);
}
