.customer-field {
  position: relative;
}

.customer-results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  display: none;
  max-height: 270px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #d8d3e3;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(55, 48, 83, .16);
}

.customer-results.open {
  display: block;
}

.customer-option {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #171b2a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.customer-option:hover,
.customer-option:focus,
.customer-option.active {
  background: #f3f1f8;
  outline: none;
}

.customer-option b,
.customer-option span {
  display: block;
  overflow-wrap: anywhere;
}

.customer-option span {
  margin-top: 3px;
  color: #676579;
  font-size: 11px;
}

.customer-option .customer-source {
  display: block;
  margin-top: 4px;
  color: #8a8798;
  font-size: 10px;
}

.customer-option .customer-alias {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 10.5px;
  overflow-wrap: anywhere;
}

.customer-option .customer-branch {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.customer-state {
  display: block;
  width: 100%;
  padding: 14px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

button.customer-state.error {
  cursor: pointer;
}

button.customer-state.error:hover,
button.customer-state.error:focus-visible {
  background: var(--bar-neutral);
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.imported-note {
  color: #846b25 !important;
  background: #fff8dc !important;
  border-color: #eadba3 !important;
}