@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

header {
  width: 100%;
}

.content-cont {
  margin-top: 40px;
}

.filter-section {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  background-color: #ededed;
  margin-bottom: 20px;
}

.filter {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  height: 100%;
  transition: height 0.2s ease;
  overflow: hidden;
}

.filter label {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.filter h5 {
  margin-top: 0;
}

.search-cont form {
  margin-top: 1em;
}

.output-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 2%;
}

.output-section a {
  width: 31%;
}

.filter-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  display: none;
}

.filter-toggle h4 {
  margin: 0;
}
.filter-span{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}
.filter-toggle button {
  border: none;
  color: #050f24;
  background-color: transparent;
  margin-right: 10px;
}
.checkbox-filter{
    width: 1.1em;
    height: 1.1em;
    background-color: white;
    color: white;
    transition: background-color 0.2s ease;
}
.filter label:has(input:checked) .checkbox-filter{
    background-color: var(--color-primary);
    color: white;
}
.checkbox-filter i{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
.checkbox-filter i::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.filter-toggle .bi-caret-down-fill::before {
  transition: transform 0.2s ease;
}
.filter-check {
    display: none;
}

@media screen and (max-width: 992px) {
  .output-section a {
    width: 49%;
  }
}

@media screen and (max-width: 762px) {
  .output-section a {
    width: 100%;
  }

  .filter-toggle {
    display: flex;
  }

  .filter {
    height: 0;
    padding: 0;
  }
}

.expand .bi-caret-down-fill::before {
  transform: rotateZ(180deg);
}

.expand .filter {
  height: 100%;
  padding: 5px;
}
#search_form {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  background-color: white;
    border: 1px solid #333333;
    justify-content: space-between;
}
#clear-search {
    width: 12.5%;
    border: none;
    background: transparent;
}
#search_term {
  width: 75%;
  border: none;
  background: transparent;
}
#search_term:focus-visible {
    outline: none;
}
#search-submit {
  width: 12.5%;
  border: none;
  background: transparent;
}