/* Add here all your css styles (customizations) */

/* ---------------------------------------------------------------------------
   Contact form: the custom listbox (a select with a subtitle per option), the
   business type-ahead and its read-only details block. Same border, radius,
   font and focus colour as .form-control (Bootstrap 4 + Unify), so they sit
   in the form as the inputs do.
   --------------------------------------------------------------------------- */
.e2r-listbox {
  position: relative;
}

.e2r-listbox__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-color: #fff;
  padding-right: 2.25rem;
}

.e2r-listbox__button::after {
  content: "";
  position: absolute;
  right: .9rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.4rem;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.e2r-listbox.is-open .e2r-listbox__button::after {
  transform: rotate(225deg);
  margin-top: -.15rem;
}

.e2r-listbox__button:focus,
.e2r-listbox__button:focus-visible {
  outline: 0;
  border-color: #107ef4;
  box-shadow: 0 0 0 .2rem rgba(16, 126, 244, .25);
}

.e2r-listbox__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  opacity: .5;
}

.e2r-listbox.has-value .e2r-listbox__value {
  opacity: 1;
}

.e2r-listbox__list,
.e2r-typeahead__list {
  position: absolute;
  z-index: 1050;
  left: 0;
  right: 0;
  margin: .25rem 0 0;
  padding: .25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: .25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  max-height: 300px;
  overflow-y: auto;
}

.e2r-listbox__list:focus,
.e2r-listbox__list:focus-visible {
  outline: 0;
  border-color: #107ef4;
  box-shadow: 0 0 0 .2rem rgba(16, 126, 244, .25), 0 8px 24px rgba(0, 0, 0, .12);
}

.e2r-listbox__list[hidden],
.e2r-typeahead__list[hidden] {
  display: none;
}

.e2r-listbox__list [role="option"],
.e2r-typeahead__list [role="option"] {
  padding: .5rem .75rem;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.e2r-listbox__list [role="option"].is-active,
.e2r-typeahead__list [role="option"].is-active {
  background: #f1f6fd;
  border-left-color: #107ef4;
}

.e2r-listbox__list [role="option"][aria-selected="true"] .e2r-listbox__main {
  color: #107ef4;
}

.e2r-listbox__main,
.e2r-typeahead__main {
  display: block;
  font-weight: 600;
  color: #464c5e;
  line-height: 1.35;
}

.e2r-listbox__sub,
.e2r-typeahead__sub {
  display: block;
  font-size: .8125rem;
  color: #8c95a5;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.e2r-typeahead {
  position: relative;
}

.e2r-typeahead__list {
  top: 100%;
}

.e2r-typeahead .form-control[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.e2r-biz-details {
  margin-top: .75rem;
  padding: .75rem 1rem;
  border: 1px solid #e1e6ee;
  border-radius: .25rem;
  background: #f7f9fc;
  font-size: .875rem;
}

.e2r-biz-details[hidden] {
  display: none;
}

.e2r-biz-details__title {
  font-weight: 600;
  color: #464c5e;
  margin-bottom: .35rem;
}

.e2r-biz-details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .75rem;
  row-gap: .15rem;
  margin: 0;
}

.e2r-biz-details dt {
  font-weight: 400;
  color: #8c95a5;
}

.e2r-biz-details dd {
  margin: 0;
  color: #464c5e;
}

.e2r-biz-details__clear {
  display: inline-block;
  margin-top: .5rem;
  font-size: .8125rem;
}

.e2r-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .25rem .75rem;
}