.faculty-directory-exposed-filters form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 992px) {
  .faculty-directory-exposed-filters form {
    flex-direction: row;
    gap: 1.5rem;
  }
}
.faculty-directory-exposed-filters form .form-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
@media (min-width: 992px) {
  .faculty-directory-exposed-filters form .form-item {
    align-items: center;
    flex-direction: row;
  }
}
.faculty-directory-exposed-filters form .form-item label {
  white-space: nowrap;
}

.filter-by-alpha {
  gap: 1rem;
}
.filter-by-alpha a {
  color: #5e74ee;
  transition: color 0.25s ease-in-out;
}
.filter-by-alpha a:hover, .filter-by-alpha a:focus {
  text-decoration: underline;
  text-decoration-thickness: 0.2em !important;
  text-underline-offset: 0.5em;
  color: var(--bs-primary);
}
.filter-by-alpha a.is-active {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-thickness: 0.2em !important;
  text-underline-offset: 0.5em;
}
@media (max-width: 767.98px) {
  .filter-by-alpha {
    position: absolute;
    width: 100vw;
    left: 50vw;
    transform: translateX(-50vw);
    margin-top: 30px;
    overflow: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .filter-by-alpha::-webkit-scrollbar {
    display: none;
  }
  .filter-by-alpha a {
    white-space: nowrap;
  }
}

/*
 * The following rule is misattributed: it targets the MAIN faculty-directory
 * view template's own `.view-content` wrapper (the faculty listing itself),
 * not this component's markup. It happened to live in the same legacy
 * attachments.scss source file without actually being about this component.
 * Kept here (rather than silently dropped) because it has no better home
 * right now; see task-4-brief.md for the full explanation.
 */
@media (max-width: 767.98px) {
  .view-faculty-directory > .view-content {
    padding-bottom: 40px;
  }
}