{# Search Box #}
.labs-search-box {
  position: relative;
}
.labs-search-box #search-by {
  padding-left: 60px;
  padding-right: 50px;
}
.labs-search-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(18px, -50%);
}
.labs-reset-search-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-15px, -50%);
  padding: 5px;
  border-radius: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.labs-reset-search-icon:hover {
  background-color: #ddd;
}
.labs-reset-search-icon:active {
  background-color: #999;
}

{# Search Filters #}
.search-filter-container {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin: 1rem auto;
}
.search-filter-container h4 {
  display: inline;
  font-size: 1rem;
  margin-bottom: 0;
}
.search-filter-wrapper, .filter-header {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.search-filter {
  font-size: 1rem;
  font-weight: bold;
  color: #999;
  background-color: white;
  border: none;
}
.filter-header {
  width: auto; 
}
.filter-reset_mobile {
  display: none;
}
.filter-reset {
  display: inline-flex;
  justify-content: flex-end;
}
.filter-reset input, .filter-reset_mobile input {
  font-size: 1rem;
  font-weight: 700;
  color: #999;
  background-color: #fff;
  border: solid;
  border-radius: 100px;
}
.filter-reset:hover input {
  background-color: #999;
  color: #fff;
  border-color: #999;
  transition: all 0.3s ease;
  cursor: pointer;
}

{# Lab Decks #}
.lab-deck-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.lab-deck {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  height: 100%;
  border: 1px solid #ddd;
  padding: 1.2rem 1rem;
  text-align: center;
}
.lab-deck > * {
  margin-bottom: 1rem;
}
.lab-deck h5 {
  hyphens: auto;
  z-index: 5;
  padding: 0 2.5rem;
}
@media(min-width: 1400px) {
  .lab-deck h5 {
    padding: 0 3rem;
  }
}
.lab-deck div:first-child {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.lab-deck div:nth-child(2) {
  margin-bottom: 1.5rem;
}

{# Card Footer #}
.card__footer {
  border-top: 4px solid #f5f8fb;
  padding-top: 1.75em;
}
.lab-deck > .card__footer a:first-child {
  margin-bottom: 1em;
}
.lab-deck > .card__footer:has(a:first-child[style]) {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.lab-deck > .card__footer a:first-child[style]~cta-btn:last-child {
  max-width: fit-content;
}
@media(max-width: 1040px) {
  .lab-deck > .card__footer:not(:has(a:first-child[style])) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .lab-deck > .card__footer > .cta-btn {
    max-width: fit-content;
  }
}
@media(max-width: 680px) {
  .lab-deck > .card__footer> .cta-btn:first-child[style] {
    display: none;
  }
}

{# Media Queries #}
@media(max-width: 1040px) {
  .lab-deck-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .search-filter-container {
    flex-direction: column;
  }
  .search-filter-container h4 {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
  }
  .filter-header {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .filter-reset_mobile {
    display: inline-flex;
  }
  .filter-reset {
    display: none;
  }
  .search-filter {
    display: inline-flex;
    width: 100%;
    padding: 0.3rem;
    border: 1px solid black;
    border-bottom: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .search-filter[name=sort]{
    border-bottom: 1px solid black;
  }
  .search-filter-wrapper {
    position: relative;
  }
  .search-filter {
    display: inline-flex;
    width: 100%;
    padding: 0.3rem;
    border: 1px solid black;
    border-bottom: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .search-filter[name=sort]{
    border-bottom: 1px solid black;
  }
  .search-filter-wrapper {
    position: relative;
  }
  .search-filter-wrapper::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 12px;
    height: 12px;
    border: 2px solid grey;
    border-width: 0 2px 2px 0;
    pointer-events: none;
  }
}

@media(max-width: 680px) {
  .lab-deck-container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
{# "New" Badge #}
.deck-overlay {
  width: 100%; 
  height: 100%;
}
.new-container {
  position: absolute;
}
.new-burst {
  z-index: 2;
  width: max-content;
  position: relative;
  text-align: center;
  background: radial-gradient(circle, #f2b900 15%, orange 95%);
  text-shadow: 0 0.05em 0.05em rgb(0 0 0 / 50%);
}
.new-burst::before, .new-burst::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: inherit;
}
.new-burst::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.new-burst::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
} 
.bigger-burst {
  width: 150%;
}
@media(max-width: 1040px) {
  .bigger-burst {
    width: 175%;
  }
}
.new-burst p {
  font-size: max(1vw, 1vh);
  color: white;  
  z-index: 3;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-15deg) skew(-5deg);
  font-weight: bolder;
  text-shadow: 2px 2px #444;
  letter-spacing: 0.05em;
}
@media(max-width: 1040px) and (min-width: 1400px) {
  .new-burst p {
    font-size: max(1.5vw, 1.5vh);
  }
}

{# Pagination Feature Styling #}
.items-shown-container {
  display: flex;
  justify-content: end;
}
.items-shown-container > p {
  margin-bottom: 0.5rem;
  line-height: .75;
  font-size: .9rem; 
}
.pagination-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 1rem;
}
.pagination-pages {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.pagination-pages a {
  padding: 0 5px;
}
.pagination-pages .active {
  color: white;
  background: #247cff;
  border: 2px solid #247cff;
  border-radius: 100%;
}
.pagination-pages .active:hover {
  text-decoration: none;
  color: white;
  background: #1c53a5;
  border: 2px solid #1c53a5;
  border-radius: 100%;
}
.pagination-pages p {
  margin: 0;
}
@media (max-width: 767px) {
  .pagination-container {
    font-size: 1rem;
    justify-content: space-between;
  }
  .pagination-pages {
    width: 60%;
  }
}