#animalsContent {
  flex-direction: column;
  max-width: calc(100% - .75rem);
  
  & .swiper :is(.swiper-button-prev, .swiper-button-next) {
  display: block;
  position: absolute;
  top: calc(50% - 2rem) !important;
}
}


body {
  background: var(--compare) !important;
}

  body a {
    text-decoration: none !important;
  }

.pet-nav.pet-nav-tabs {
  flex-direction: row !important;
}

  .pet-nav.pet-nav-tabs button {
    background: var(--color-6);
    color: var(--compare);
    border-radius: .25rem;
  }

.pet-nav .pet-nav-link {
  padding: .5rem;
}

.pet-nav a {
  display: flex !important;
}

h4 {
  margin: 0 !important;
  padding-left: 2rem;
  align-items: center;
}

  .pet-nav .pet-nav-link.active {
    background: white;
    border-left: 1px solid var(--compare-less);
    border-right: 1px solid var(--compare-less);
  }

.pet-nav.pet-nav-tabs li + li {
  margin-left: .5rem;
  border-radius: .25rem;
}


.tab-content > .active {
  display: flex !important;
}

.petango.overview {
  width: 100%;
  flex-direction: column;
}

  .petango.overview .pet-species,
  .pet-species-all {
    width: 100vw !important;
    max-width: 100% !important;
    align-items: stretch;
    overflow-x: hidden;
    padding-bottom: 3rem;
  }
    /* Start of pet cards for no slick cards for the view all*/
    .pet-species-all > div {
      flex-direction: column;
      padding: .5rem;
      box-shadow: var(--float-close);
      background: var(--compare-more);
      transition: transform 0.3s, box-shadow 0.3s;
      min-width: 235px;
      width: calc(100% /5 - .85rem);
    }

      .pet-species-all > div:hover {
        box-shadow: var(--float);
        transform: scale(1.05);
      }

.pet-species-all {
  column-gap: .5rem;
  row-gap: .5rem;
  flex-wrap: wrap;
  padding: 2rem 1rem;
  width: 100vw !important;
  max-width: var(--max-width) !important;
}

.swiper-wrapper {
  padding: 0 !important;
}

.petango.overview .swiper,
.petango.overview .swiper-wrapper,
.petango.overview .swiper-slide,
.petango.overview .swiper-slide img,
.petango.overview .pet-image {
  user-select: none;
  -webkit-user-select: none;
}

.petango.overview .swiper {
  -webkit-tap-highlight-color: transparent;
}

.petango.overview .swiper-slide img,
.petango.overview .pet-image {
  -webkit-user-drag: none;
}

@media screen and (max-width: 600px) {
  .pet-species-all {
    padding-left: 0;
    padding-right: 0;
    max-width: calc(100dvw - 2rem) !important;
    overflow: visible;
  }

  .pet-species-all > div {
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }

  .pet-species-all > div:hover {
    transform: none;
  }
  .has-icon {
    margin: 0;
  }
}

/* End of pet cards for no slick cards for the view all*/

.overview .slick-track {
  justify-content: flex-start;
  margin: 0 !important;
  column-gap: 1rem;
  padding: 1rem 0;
}

.overview .slick-slide > div {
  flex-direction: column;
  flex-shrink: 0;
  padding: .5rem;
  box-shadow: var(--float-close);
  background: var(--compare-more);
  margin: .5rem;
}

  .overview .slick-slide > div:hover {
    box-shadow: var(--float);
    transform: scale(1.05);
  }

.petango *::-webkit-scrollbar {
  box-shadow: none;
  width: .25rem;
  height: .25rem;
}

.petango *::-webkit-scrollbar-thumb {
  box-shadow: none;
  background: var(--contrast-less);
  width: .25rem;
  height: .25rem;
}

.petango *::-webkit-scrollbar-track {
  box-shadow: none;
  width: .25rem;
  height: .25rem;
}

.pet-species-label {
  width: 100%;
  max-width: var(--max-width);
  padding: 3rem 0 1.5rem;
  align-self: center;
  justify-content: space-between;
}

  .pet-species-label h3 {
    padding-left: .5rem;
    flex-direction: row;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 200;
  }

    .pet-species-label h3:before {
      display: none;
    }

#animals {
  padding: 0;
}

  #animals li:before {
    display: none !important;
  }

  #animals li {
    margin: 0;
  }


/*
  THIRD Party Fix Start
*/

.extra.slick-slide,
.slick-track,
.slick-list.draggable {
  display: flex !important;
}

.slick-list.draggable {
  overflow: visible !important;
}



.slick-slide {
  height: unset !important;
}
/*
  THIRD Party Fix End
*/

.pet-container .d-flex {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: .5rem;
  max-width: unset;
  width: 100%;
  margin: 0;
  justify-content: flex-start;
}

  .pet-container .d-flex .me-3 {
    flex-shrink: 0;
    margin: 0;
  }

.pet-container #searchToolBar {
  margin: 0;
  width: calc(100% - 2em);
  padding: 0 1rem;
}

#btnClear {
  background-color: #333;
  color: white;
  border-color: #333;
}

#btnClear svg {
  stroke: white;
}

.me-3:has(#txtName) {
  padding: .25rem;
  border: 1px solid var(--contrast-less) !important;
}

@media screen and (max-width: 600px) {
  .overview .pet-image {
    height: 30rem;
  }

  .pet-species,
  .petango {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .pet-container .d-flex {
    flex-wrap: wrap;
  }

  #txtName,
  #selectType,
  #selectAge,
  #selectGender,
  #btnClear {
    height: 2.5rem;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 476px) {
  .pet-card,
  .pet-species-all > div {
    min-width: 100%;
  }
}

.pet-container .block--container {
  padding: 1rem;
}

.pet-container #intro {
  padding: 2rem 0;
}

.pet-container .upper {
  align-items: center;
  column-gap: 1rem;
  padding: 1rem 0;
  border-bottom: .5px solid var(--compare-less);
}

  .pet-container .upper h2 {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--contrast);
    text-transform: uppercase;
    margin: 0;
  }

    .pet-container .upper h2:before {
      display: none;
    }

.pet-container .back {
  display: flex;
  color: #767676;
  cursor: pointer;
  transition: all .2s;
  flex-direction: row;
  align-items: center;
}

  .pet-container .back span {
    opacity: 0;
    margin-left: .5rem;
    margin-right: 2rem;
    transition: all .2s;
  }

  .pet-container .back:hover {
    color: #333333;
  }

    .pet-container .back:hover span {
      opacity: 1;
    }

.pet-container button.nav-link {
  box-shadow: none;
  color: #333;
  background: var(--compare);
  border-radius: 0 !important;
}

.pet-container button.nav-linkactive {
  background: var(--contrast);
  color: var(--compare);
}

.pet-container #intro {
  padding-left: 1rem;
}

.pet-container :is(p, p + *:not(p)) {
  margin-top: 0;
  margin: 0;
}

.pet-container #animals {
  margin: 0;
  background: var(--compare);
  width: 100%;
  max-width: 100%;
  border-radius: 0 !important;
}