.searchable-select {
  position: relative;
  min-width: 0;
}

.searchable-select > select[data-searchable-select] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.searchable-select-input {
  width: 100%;
}

.searchable-select-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 310px;
  overflow-y: auto;
  border: 1px solid rgba(214, 226, 234, .98);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(6, 43, 111, .18);
  overscroll-behavior: contain;
}

.searchable-select-menu[hidden] {
  display: none;
}

.searchable-select-option,
.searchable-select-empty {
  min-height: 42px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid rgba(220, 229, 238, .72);
  background: transparent;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

.searchable-select-option:last-child {
  border-bottom: 0;
}

.searchable-select-option:hover,
.searchable-select-option[aria-selected="true"] {
  background: rgba(94, 223, 224, .18);
  color: var(--navy);
}

.searchable-select-option strong {
  font-weight: 650;
}

.searchable-select-empty {
  color: var(--slate);
}

@media (max-width: 680px) {
  .searchable-select-menu {
    max-height: 260px;
  }
}