:root {
  --screen-sm-max: 991px;
}
.course-list-filters {
  display: grid;
  grid-template-areas: 'categories categories semesters semesters' 'search alpha alpha alpha';
  grid-gap: 10px 20px;
  margin-bottom: 40px;
}
@media (max-width: var(--screen-sm-max)) {
  .course-list-filters {
    grid-template-areas: 'categories' 'search' 'alpha';
  }
}
.course-list-filters:not(:has(.curriculum_categories)) .curriculum_semesters {
  grid-column: 1 / -1;
}
#searchInput {
  grid-area: search;
  box-shadow: none;
  border-color: #ccc;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  min-width: 0;
}
.curriculum_categories {
  grid-area: categories;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 10px;
  padding-bottom: 10px;
  height: fit-content;
}
.curriculum_semesters {
  grid-area: semesters;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 10px;
  padding-bottom: 10px;
  height: fit-content;
}
.curriculum_buttonFilter > span {
  font-size: 14px;
}
.curriculum_buttonFilter button {
  background-color: transparent;
  margin-left: 0 !important;
  border: 1px solid #ccc;
  padding: 0 14px;
  font-weight: 600;
  line-height: 32px;
  font-size: 14px;
  transition: all 0.4s;
}
.curriculum_buttonFilter button.selected,
.curriculum_buttonFilter button:hover {
  background-color: var(--curr-cat-selected-color, var(--color-first));
  color: var(--curr-cat-selected-font-color, #FFFFFF);
  border-color: var(--curr-cat-selected, var(--color-first));
}
.curriculum_alphabet {
  grid-area: alpha;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.curriculum_alphabet button {
  margin-left: 0 !important;
  background-color: transparent;
  text-transform: uppercase;
  padding: 6px 4px 2px;
}
.curriculum_alphabet button.selected,
.curriculum_alphabet button:hover {
  color: var(--curr-alph-selected-font-color, var(--color-first));
  font-weight: var(--curr-alph-selected-font-weight, 600);
}
/*# sourceMappingURL=filters.css.map */