/* unique to the directory page */
div#department-filter {
  padding: 0;
  margin: 6px 4px 6px 0;
  font-size: 1rem;
}

div#department-filter select {
  padding: 12px 15px;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

div#department-filter select {
  /* chevron down */
  background-image: url(/_resources/css/"data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(11, 93, 167)' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
  background-position: 99% center;
  background-repeat: no-repeat;
  background-size: 28px;
}

.table-responsive {
  overflow-x: hidden;
}

.table-responsive .col-md-3 button {
  @media (max-width: 768px) {
    margin-top: 1rem;
  }
}

.table-responsive .alphabet {
  display: flex;
  flex-flow: row wrap;
  /* justify-content: center; */
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.alphabet span {
  margin: 0 4px;
  padding: 0 4px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.25rem;
}

.alphabet span:hover,
.alphabet span:focus {
  color: var(--primary-color);
}

.alphabet span.active {
  color: var(--primary-color);
  text-decoration: underline;
}

td[headers="phone"] p {
  margin-bottom: 0;
  @media (max-width: 992px) {
    display: inline;
    margin-left: 6px;
  }
}