/* colors */
/* The CTA and Main colors are pulled from site templates created by the Design team. These colors vary per OEM or group. */
/* CTA stands for Call-to-Action. The CTA color is often a bright, eye-catching color like red or light blue, used for links and important buttons. */
/* The Main color is often a dark, muted color like black or navy blue, used for backgrounds and less important buttons. */
/* fonts */
/* breakpoints */
/* borders */
/* local variables */
/* TODO: remove if border color classes are added to site templates */
/* Construct a media query that applies to multiple ranges of breakpoints. First and last argument must either be a single number or a list of 2 numbers. */
/* Make sure to give the truncated element a width. If the truncated element has display: flex or inline-flex, add min-width: 0 to the truncated element's immediate parent. If the flex truncated element is nested inside one or more other flex containers, also add min-width: 0 to the nearest ancestor element that does NOT have display: flex or inline-flex */
/* Single element */
/* Works well for either single elements, or multiple elements grouped under the same parent */
/* Remove default styling from button element */
/* Create a multi-column ul that avoids list items breaking between 2 columns. li { display: inline-block } will force each list item to stay in one column, but also removes the default list item styling (bullets). Adding a bullet character in the ::before, changing the display of the li to inline-flex, and adding a column gap to the li restores the bullet styling. */
@keyframes indicator-start-to-end {
  0% {
    left: 4px;
  }
  60% {
    left: calc(calc(
  100% - 26px - 4px
) + 2px);
  }
  100% {
    left: calc(
  100% - 26px - 4px
);
  }
}
@keyframes indicator-end-to-start {
  0% {
    left: calc(
  100% - 26px - 4px
);
  }
  60% {
    left: calc(4px - 2px);
  }
  100% {
    left: 4px;
  }
}
.search-by-filter__less-filters,
.search-by-filter__more-filters {
  gap: 10px;
}
.search-by-filter__less-filters .vehicle-filter,
.search-by-filter__more-filters .vehicle-filter {
  position: relative;
  height: 69px;
  border: solid 1px #dcdce2;
  background: #ffffff;
}
@media (min-width: 500px) {
  .search-by-filter__less-filters .vehicle-filter::after,
  .search-by-filter__more-filters .vehicle-filter::after {
    content: "\f107";
    display: block;
    font-family: "FontAwesome";
    font-weight: 700;
    font-size: 22px;
    z-index: 1;
    color: #a5a5a5;
    position: absolute;
    right: 12px;
    bottom: 10px;
    pointer-events: none;
  }
}
.search-by-filter__less-filters .vehicle-filter .control-label,
.search-by-filter__more-filters .vehicle-filter .control-label {
  position: absolute;
  top: 8px;
  left: 16px;
  color: #5c5c5c;
  font-size: 12px;
}
.search-by-filter__less-filters select.form-control,
.search-by-filter__more-filters select.form-control {
  height: 100%;
  padding: 25px 12px 6px 16px;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
@keyframes loading-bg {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 200%;
  }
}
[aria-busy=true] .search-by-filter__less-filters select.form-control,
[aria-busy=true] .search-by-filter__more-filters select.form-control {
  background-image: linear-gradient(135deg, #ffffff 30%, #a5a5a5 45%, #a5a5a5 55%, #ffffff 70%);
  background-position: 50% 50%;
  background-size: 200%;
  animation: loading-bg 1.5s linear infinite reverse;
}
[aria-busy=true] .search-by-filter__less-filters select.form-control,
[aria-busy=true] .search-by-filter__more-filters select.form-control {
  color: transparent;
}
[aria-busy=true] .search-by-filter__less-filters select.form-control::placeholder,
[aria-busy=true] .search-by-filter__more-filters select.form-control::placeholder {
  color: transparent;
}
@media (min-width: 992px) {
  .search-by-filter__less-filters select.form-control,
  .search-by-filter__more-filters select.form-control {
    font-size: 18px;
  }
}
.search-by-filter__less-filters select.form-control:focus,
.search-by-filter__more-filters select.form-control:focus {
  border-width: 0.2em;
}
.search-by-filter__less-filters select.form-control:not(:focus),
.search-by-filter__more-filters select.form-control:not(:focus) {
  border: none;
  box-shadow: none;
}
.search-by-filter__less-filters select option,
.search-by-filter__more-filters select option {
  background: #333333;
  color: #ffffff;
}
@media (max-width: calc(992px - 1px)) {
  .search-by-filter__less-filters.desktop,
  .search-by-filter__more-filters.desktop {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .search-by-filter__less-filters.mobile,
  .search-by-filter__more-filters.mobile {
    display: none !important;
  }
}

.search-by-filter__less-filters .vehicle-filters {
  display: grid;
  grid-gap: 10px;
}
@media (min-width: 992px) {
  .search-by-filter__less-filters .vehicle-filters {
    grid-gap: unset;
  }
}
@media (min-width: 992px) {
  .search-by-filter__less-filters .vehicle-filters .vehicle-filter:nth-of-type(n + 3) {
    border-left: none;
  }
}
.search-by-filter__less-filters .vehicle-filter__search {
  display: none;
  height: 60px;
  width: 207px;
  padding: 6px;
  background: #ffffff;
  border: solid 1px #eaecf0;
  border-left: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
@media (min-width: 992px) {
  .search-by-filter__less-filters .vehicle-filter__search {
    display: block;
  }
}
@media (min-width: 992px) {
  .search-by-filter__less-filters {
    gap: unset;
  }
  .search-by-filter__less-filters .vehicle-filters {
    display: grid;
  }
  .search-by-filter__less-filters[data-filter-count="1"] .vehicle-filters {
    grid-template-columns: repeat(1, 1fr);
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) {
    border-radius: 5px 0 0 5px;
    border-radius: 5px;
    border-radius: 5px 0 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(2) {
    border-radius: 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) {
    border-radius: 0 5px 5px 0;
    border-radius: 0 5px 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) {
    border-radius: 5px 0 0 5px;
    border-radius: 5px;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(2) {
    border-radius: 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(3) {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="1"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"] .vehicle-filters {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) {
    border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(2) {
    border-radius: 0;
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(2) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) {
    border-radius: 0 5px 5px 0;
    border-radius: 0 5px 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(2) {
    border-radius: 0;
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(2) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(3) {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="2"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"] .vehicle-filters {
    grid-template-columns: repeat(3, 1fr);
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) {
    border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(2) {
    border-radius: 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) {
    border-radius: 0 5px 5px 0;
    border-radius: 0 5px 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=True] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 0 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(1) select {
    border-radius: 5px 0 0 5px;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(2) {
    border-radius: 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(3) {
    border-radius: 0 5px 5px 0;
  }
  .search-by-filter__less-filters[data-filter-count="3"][data-more-filters-displayed=False] .vehicle-filters .vehicle-filter:nth-child(3) select {
    border-radius: 0 5px 5px 0;
  }
}
.search-by-filter__more-filters {
  margin-top: 10px;
}
.search-by-filter__more-filters.collapse:not(.in) {
  display: none;
}
.search-by-filter__more-filters.collapsing, .search-by-filter__more-filters.in {
  display: grid;
}
@media (min-width: 992px) {
  .search-by-filter__more-filters {
    gap: unset;
    margin-top: 0px;
  }
  .search-by-filter__more-filters[data-filter-count="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .search-by-filter__more-filters[data-filter-count="1"] div:nth-child(1) {
    border-radius: 0 0 5px 5px;
  }
  .search-by-filter__more-filters[data-filter-count="1"] div:nth-child(1) select {
    border-radius: 0 0 5px 5px;
  }
  .search-by-filter__more-filters[data-filter-count="1"] div:nth-child(2) {
    border-radius: 0;
  }
  .search-by-filter__more-filters[data-filter-count="1"] div:nth-child(3) {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="1"] div:nth-child(3) select {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-by-filter__more-filters[data-filter-count="2"] div:nth-child(1) {
    border-radius: 0 0 0 5px;
  }
  .search-by-filter__more-filters[data-filter-count="2"] div:nth-child(1) select {
    border-radius: 0 0 0 5px;
  }
  .search-by-filter__more-filters[data-filter-count="2"] div:nth-child(2) {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="2"] div:nth-child(2) select {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="2"] div:nth-child(3) {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="2"] div:nth-child(3) select {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .search-by-filter__more-filters[data-filter-count="3"] div:nth-child(1) {
    border-radius: 0 0 0 5px;
  }
  .search-by-filter__more-filters[data-filter-count="3"] div:nth-child(1) select {
    border-radius: 0 0 0 5px;
  }
  .search-by-filter__more-filters[data-filter-count="3"] div:nth-child(2) {
    border-radius: 0;
  }
  .search-by-filter__more-filters[data-filter-count="3"] div:nth-child(3) {
    border-radius: 0 0 5px 0;
  }
  .search-by-filter__more-filters[data-filter-count="3"] div:nth-child(3) select {
    border-radius: 0 0 5px 0;
  }
}
@media (min-width: 992px) {
  .search-by-filter__more-filters .vehicle-filter {
    border-top: none;
  }
  .search-by-filter__more-filters .vehicle-filter:not(:first-of-type) {
    border-left: none;
  }
}

.search-by-filter__toggle-filters-button-container {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.search-by-filter__toggle-filters-button-container[data-more-filters-displayed=True] {
  justify-content: space-between;
}
@media (min-width: 992px) {
  .search-by-filter__toggle-filters-button-container {
    margin-top: 20px;
  }
}
.search-by-filter__toggle-filters-button {
  border: none;
  background: transparent;
  padding: 0;
  align-self: center;
  position: relative;
  font-size: 14px;
  min-width: 128px;
  min-height: 36px;
  background-color: rgba(92, 92, 92, 0.5);
  border: 1px solid rgba(92, 92, 92, 0.5);
  border-radius: calc(36px / 2);
  /* Toggle indicator and drop shadow */
  /* Toggle indicator drop shadow */
  /* Toggle indicator */
}
@keyframes loading-bg {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 200%;
  }
}
[aria-busy=true] .search-by-filter__toggle-filters-button {
  background-image: linear-gradient(135deg, #ffffff 30%, #a5a5a5 45%, #a5a5a5 55%, #ffffff 70%);
  background-position: 50% 50%;
  background-size: 200%;
  animation: loading-bg 1.5s linear infinite reverse;
}
[aria-busy=true] .search-by-filter__toggle-filters-button .search-by-filter__toggle-filters-button-label {
  color: transparent;
}
.search-by-filter__toggle-filters-button::before, .search-by-filter__toggle-filters-button::after {
  content: "";
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 4px;
  left: 4px;
  border-radius: calc(26px / 2);
  z-index: 2;
  animation: indicator-end-to-start 0.7s cubic-bezier(0.25, 0, 0.25, 1) forwards;
}
.search-by-filter__toggle-filters-button::before {
  box-shadow: 0px 2px 6px var(--cta-background-color);
  opacity: 0.5;
}
.search-by-filter__toggle-filters-button::after {
  background-color: var(--cta-background-color);
}
.search-by-filter__toggle-filters-button.less-filters {
  /* Toggle indicator and drop shadow */
}
.search-by-filter__toggle-filters-button.less-filters::before, .search-by-filter__toggle-filters-button.less-filters::after {
  animation: indicator-start-to-end 0.7s cubic-bezier(0.25, 0, 0.25, 1) forwards;
}
.search-by-filter__toggle-filters-button.less-filters::before {
  background-color: var(--cta-background-color);
  transition: background-color 0.7s ease-in-out;
}
.search-by-filter__toggle-filters-button.less-filters .search-by-filter__toggle-filters-button-label {
  padding-left: 22px;
  padding-right: 37px;
}
.search-by-filter__toggle-filters-button.desktop {
  display: none;
}
@media (min-width: 992px) {
  .search-by-filter__toggle-filters-button.desktop {
    display: unset;
  }
}
@media (min-width: 992px) {
  .search-by-filter__toggle-filters-button.mobile {
    display: none;
  }
}
.search-by-filter__toggle-filters-button-label {
  grid-area: toggle;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 37px;
  padding-right: 22px;
  color: #ffffff;
  z-index: 1;
  transition: padding calc(
        0.7s * 0.6
      ) cubic-bezier(0.3, 0, 0.2, 1);
}
.search-by-filter .vehicle-filter:focus-within {
  border: none;
}

.search-by-filter__reset-button {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 700 !important;
  width: 100%;
  min-height: 43px;
  padding: 8px 20px;
  transition: all 0.2s;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 992px) {
  .search-by-filter__reset-button {
    width: auto;
  }
}
.search-by-filter__reset-button, .search-by-filter__reset-button:hover, .search-by-filter__reset-button:active, .search-by-filter__reset-button:focus {
  color: #ffffff;
}
.search-by-filter__reset-button.mobile {
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .search-by-filter__reset-button.mobile {
    display: none;
  }
}
.search-by-filter__reset-button.desktop {
  display: none;
  width: 80px;
  margin-left: 6px;
  margin-top: 0;
}
@media (min-width: 992px) {
  .search-by-filter__reset-button.desktop {
    display: inline-block;
    padding: unset;
  }
}

.search-by-filter__search-button {
  margin-top: 20px;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 700 !important;
  width: 100%;
  min-height: 43px;
  padding: 8px 20px;
  transition: all 0.2s;
  color: #ffffff;
  min-width: 130px;
  border: 2px solid #ffffff;
}
@media (min-width: 992px) {
  .search-by-filter__search-button {
    width: auto;
  }
}
.search-by-filter__search-button:hover, .search-by-filter__search-button:active, .search-by-filter__search-button:focus {
  background-color: #ffffff;
  color: #333333;
}
.search-by-filter__search-button.desktop {
  display: none;
}
@media (min-width: 992px) {
  .search-by-filter__search-button.desktop {
    display: unset;
    margin-top: unset;
  }
}
.search-by-filter__search-button.mobile.bottom-margin {
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .search-by-filter__search-button.mobile {
    display: none;
  }
}

.search-by-keyword {
  display: grid;
  grid-template-areas: "input" "button";
  grid-template-rows: repeat(2, auto);
  row-gap: 20px;
}
@media (min-width: 992px) {
  .search-by-keyword {
    grid-template-areas: "input button";
    grid-template-rows: auto;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 0;
  }
}
@keyframes loading-bg {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 200%;
  }
}
[aria-busy=true] .search-by-keyword__input {
  background-image: linear-gradient(135deg, #ffffff 30%, #a5a5a5 45%, #a5a5a5 55%, #ffffff 70%);
  background-position: 50% 50%;
  background-size: 200%;
  animation: loading-bg 1.5s linear infinite reverse;
}
[aria-busy=true] .search-by-keyword__input {
  border-radius: 0.5rem;
  height: 5rem;
}
.search-by-keyword .search_bar {
  grid-area: input;
  width: 100%;
  padding: 4px 4px 4px 16px;
  border-radius: 0.5rem;
  min-height: 5rem;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
}
@media (min-width: 992px) {
  .search-by-keyword .search_bar {
    font-size: 18px;
  }
}
.search-by-keyword .search_bar[id$=-mobile] {
  display: block;
}
@media (min-width: 992px) {
  .search-by-keyword .search_bar[id$=-mobile] {
    display: none;
  }
}
.search-by-keyword .search_bar[id$=-desktop] {
  display: none;
}
@media (min-width: 992px) {
  .search-by-keyword .search_bar[id$=-desktop] {
    display: block;
  }
}
.search-by-keyword .search_bar::placeholder {
  color: #333333;
}
.search-by-keyword .search_bar:focus {
  outline: none;
  border-width: 0.2em;
}
.search-by-keyword .search_bar:not(:focus) {
  border: 1px solid #dcdce2;
}
.search-by-keyword #opensearch-submit {
  grid-area: button;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 700 !important;
  width: 100%;
  min-height: 43px;
  padding: 8px 20px;
  transition: all 0.2s;
  color: #ffffff;
  min-width: 130px;
  border: 2px solid #ffffff;
  max-height: 50px;
}
@media (min-width: 992px) {
  .search-by-keyword #opensearch-submit {
    width: auto;
  }
}
.search-by-keyword #opensearch-submit:hover, .search-by-keyword #opensearch-submit:active, .search-by-keyword #opensearch-submit:focus {
  background-color: #ffffff;
  color: #333333;
}
.search-by-keyword .opensearch-suggestions {
  grid-area: dropdown;
  max-height: 170px;
  overflow: auto;
  background-color: #ffffff;
  color: #333333;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 0;
  margin: 0;
  box-shadow: 0px 0px 15px #eaecf0;
  scrollbar-width: thin;
}
.search-by-keyword .opensearch-suggestions::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.search-by-keyword .opensearch-suggestions::-webkit-scrollbar-track {
  background: #ebecf0;
}
.search-by-keyword .opensearch-suggestions::-webkit-scrollbar-thumb {
  background-color: #a5a5a5;
  border-radius: 10px;
}
.search-by-keyword .opensearch-suggestions li {
  display: block;
  text-transform: capitalize;
  cursor: pointer;
  padding-left: 20px;
  line-height: 38px;
}
.search-by-keyword .opensearch-suggestions li:first-of-type {
  padding-top: 9px;
}
.search-by-keyword .opensearch-suggestions li:last-of-type {
  padding-bottom: 20px;
}
.search-by-keyword .opensearch-suggestions li:hover {
  background-color: #f4f5f7;
}

.search-by-budget--2-option {
  /* Each tab label is vertically centered in each tab, so divide each tab's height in half and calculate how many halves down from the top of the container each label is */
  /* Each tab label is vertically centered in each tab, so divide each tab's height in half and calculate how many halves down from the top of the container each label is */
}
.search-by-budget--2-option[data-selected-option="0"] .search-by-budget__tabs-list::before {
  top: calc(25% - 7px);
}
.search-by-budget--2-option[data-selected-option="1"] .search-by-budget__tabs-list::before {
  top: calc(75% - 7px);
}
.search-by-budget--3-option {
  /* Each tab label is vertically centered in each tab, so divide each tab's height in half and calculate how many halves down from the top of the container each label is */
  /* Each tab label is vertically centered in each tab, so divide each tab's height in half and calculate how many halves down from the top of the container each label is */
  /* Each tab label is vertically centered in each tab, so divide each tab's height in half and calculate how many halves down from the top of the container each label is */
}
.search-by-budget--3-option[data-selected-option="0"] .search-by-budget__tabs-list::before {
  top: calc(16.6666666667% - 7px);
}
.search-by-budget--3-option[data-selected-option="1"] .search-by-budget__tabs-list::before {
  top: calc(50% - 7px);
}
.search-by-budget--3-option[data-selected-option="2"] .search-by-budget__tabs-list::before {
  top: calc(83.3333333333% - 7px);
}
.search-by-budget__tabs-list {
  list-style: none;
  text-align: left;
  padding-inline-start: 0;
  margin: 0;
  position: relative;
  border-left: 1px solid #ffffff;
  /* Selected tab indicator */
}
.search-by-budget__tabs-list::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: top 0.5s cubic-bezier(0.8, 0, 0.6, 1);
  background-color: var(--cta-background-color);
  border: 2px solid #ffffff;
}
.search-by-budget__tab-button {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  min-height: 43px;
  padding: 11px 10px 11px 16px;
  background: none;
  border: none;
}
[aria-busy=true] .search-by-budget__tab-button {
  pointer-events: none;
}
.search-by-budget__tab-button:hover, .search-by-budget__tab-button:active, .search-by-budget__tab-button:focus {
  text-decoration: none;
  color: #ffffff;
}
.search-by-budget__tab-content {
  display: grid;
}
.search-by-budget__tab-pane {
  /* Set up crossfading between tabs to override default Bootstrap styling */
  grid-row: 1;
  grid-column: 1;
}
.search-by-budget__tab-pane.fade {
  opacity: 1;
  transition: opacity 0.3s linear;
}
.search-by-budget__tab-pane.fade.active:not(.fadein) {
  opacity: 0;
}
.search-by-budget__tab-pane.fade.active.fadein {
  opacity: 1;
}

.invalid-feedback {
  color: #ffffff;
}

.search-by-budget {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "tabs inputs" "actions actions";
  row-gap: 20px;
  column-gap: 14px;
  padding: 0 7px;
  min-height: 294px;
}
@media (min-width: 380px) {
  .search-by-budget {
    min-height: 0;
  }
}
@media (min-width: 992px) {
  .search-by-budget {
    grid-template-columns: auto 1fr;
    grid-template-areas: "tabs inputs" "tabs actions";
    max-width: 520px;
    margin: 0 auto;
  }
}
.search-by-budget__tabs {
  grid-area: tabs;
}
.search-by-budget__tab-content {
  grid-area: inputs;
}
.search-by-budget__actions {
  grid-area: actions;
}
@media (min-width: 992px) {
  .search-by-budget__actions {
    display: flex;
    align-items: center;
    justify-self: end;
  }
  .search-by-budget__actions--search {
    order: 1;
  }
}
.search-by-budget__search-button {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 700 !important;
  width: 100%;
  min-height: 43px;
  padding: 8px 20px;
  transition: all 0.2s;
  color: #ffffff;
  min-width: 130px;
  border: 2px solid #ffffff;
}
@media (min-width: 992px) {
  .search-by-budget__search-button {
    width: auto;
  }
}
.search-by-budget__search-button:hover, .search-by-budget__search-button:active, .search-by-budget__search-button:focus {
  background-color: #ffffff;
  color: #333333;
}
.search-by-budget__reset-button {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 700 !important;
  width: 100%;
  min-height: 43px;
  padding: 8px 20px;
  transition: all 0.2s;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 992px) {
  .search-by-budget__reset-button {
    width: auto;
  }
}
.search-by-budget__reset-button, .search-by-budget__reset-button:hover, .search-by-budget__reset-button:active, .search-by-budget__reset-button:focus {
  color: #ffffff;
}
.search-by-budget.search-by-budget--1-option {
  padding: 0;
  column-gap: 0;
}
@media (min-width: 992px) {
  .search-by-budget.search-by-budget--1-option {
    width: 66.667%;
  }
}

/* TODO: refactor the inputs to CSS grid to allow for long labels wrapping on mobile, then remove this block */
.budget-range__container#rangefinance .range__input-group::before, .budget-range__container#rangelease .range__input-group::before {
  top: 48px;
}
@media (min-width: 380px) {
  .budget-range__container#rangefinance .range__input-group::before, .budget-range__container#rangelease .range__input-group::before {
    top: 26px;
  }
}
.budget-range__container#rangefinance .range__max-input,
.budget-range__container#rangefinance .range__min-input, .budget-range__container#rangelease .range__max-input,
.budget-range__container#rangelease .range__min-input {
  padding-top: 47px;
}
@media (min-width: 380px) {
  .budget-range__container#rangefinance .range__max-input,
  .budget-range__container#rangefinance .range__min-input, .budget-range__container#rangelease .range__max-input,
  .budget-range__container#rangelease .range__min-input {
    padding-top: 25px;
  }
}
.budget-range__container#rangefinance .range__label, .budget-range__container#rangelease .range__label {
  max-width: 155px;
}
@media (min-width: 380px) {
  .budget-range__container#rangefinance .range__label, .budget-range__container#rangelease .range__label {
    max-width: none;
  }
}
.budget-range__input-container {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
@media (min-width: 992px) {
  .budget-range__input-container {
    flex-direction: row;
  }
}
.budget-range__max-input::placeholder, .budget-range__min-input::placeholder {
  color: #333333;
}
.budget-range__max-input:focus::placeholder, .budget-range__min-input:focus::placeholder {
  color: transparent;
}
.budget-range__max-input {
  width: 100%;
  padding: 25px 5px 10px 26px;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  border: 1px solid #dcdce2;
  border-radius: 5px;
  margin: 0;
  height: auto;
}
@keyframes loading-bg {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 200%;
  }
}
[aria-busy=true] .budget-range__max-input {
  background-image: linear-gradient(135deg, #ffffff 30%, #a5a5a5 45%, #a5a5a5 55%, #ffffff 70%);
  background-position: 50% 50%;
  background-size: 200%;
  animation: loading-bg 1.5s linear infinite reverse;
}
[aria-busy=true] .budget-range__max-input {
  color: transparent;
}
[aria-busy=true] .budget-range__max-input::placeholder {
  color: transparent;
}
.budget-range__max-input:focus {
  padding-top: 23px;
  padding-bottom: 8px;
  border-width: 0.2em;
}
@media (min-width: 992px) {
  .budget-range__max-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.budget-range__min-input {
  width: 100%;
  padding: 25px 5px 10px 26px;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  border: 1px solid #dcdce2;
  border-radius: 5px;
  margin: 0;
  height: auto;
}
@keyframes loading-bg {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 200%;
  }
}
[aria-busy=true] .budget-range__min-input {
  background-image: linear-gradient(135deg, #ffffff 30%, #a5a5a5 45%, #a5a5a5 55%, #ffffff 70%);
  background-position: 50% 50%;
  background-size: 200%;
  animation: loading-bg 1.5s linear infinite reverse;
}
[aria-busy=true] .budget-range__min-input {
  color: transparent;
}
[aria-busy=true] .budget-range__min-input::placeholder {
  color: transparent;
}
.budget-range__min-input:focus {
  padding-top: 23px;
  padding-bottom: 8px;
  border-width: 0.2em;
}
@media (min-width: 992px) {
  .budget-range__min-input {
    border-right: solid 1px #eaecf0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.budget-range__input-group {
  position: relative;
}
@media (min-width: 992px) {
  .budget-range__input-group {
    flex: 1 1 auto;
  }
}
.budget-range__input-group::before {
  position: absolute;
  content: "$";
  top: 26px;
  font-size: 16px;
  left: 16px;
  color: #333333;
}
.budget-range__label {
  position: absolute;
  color: #5c5c5c;
  top: 0;
  left: 0;
  margin-left: 16px;
  margin-top: 9px;
  font-weight: bold;
  font-size: 12px;
  font-weight: 700;
}

.shop-by-vehicle__header {
  padding: 0;
  width: 100%;
  margin-bottom: 28px;
  color: #ffffff;
  text-align: center;
}
@media (min-width: 992px) {
  .shop-by-vehicle__header {
    display: block;
  }
}
.shop-by-vehicle__header .header__icon-container {
  padding-right: 20px;
}
.shop-by-vehicle__header .header__label {
  font-weight: bold;
}
.shop-by-vehicle__header .header__label--line-one {
  font-size: 28px;
  padding-bottom: 5px;
  line-height: 34px;
}
.shop-by-vehicle__header .header__label--line-two {
  font-size: 18px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-by-vehicle__header .desktop {
  display: none;
}
@media (min-width: 992px) {
  .shop-by-vehicle__header .desktop {
    display: grid;
  }
}
@media (min-width: 992px) {
  .shop-by-vehicle__header .mobile {
    display: none;
  }
}
.shop-by-vehicle__search {
  height: 100%;
  padding: 0;
}
.shop-by-vehicle .search-nav {
  display: flex;
  justify-content: space-between;
  max-width: 433px;
  font-size: 12px;
  margin: 0 auto 24px;
  border-bottom: none;
}
.shop-by-vehicle .search-nav::before, .shop-by-vehicle .search-nav::after {
  display: none;
}
.shop-by-vehicle .search-nav__item {
  min-height: 40px;
}
.shop-by-vehicle .search-nav__item:hover, .shop-by-vehicle .search-nav__item.active {
  border-bottom: 2px solid #ffffff;
}
.shop-by-vehicle .search-nav__item.desktop {
  display: none;
}
@media (min-width: 992px) {
  .shop-by-vehicle .search-nav__item.desktop {
    display: unset;
  }
}
@media (min-width: 992px) {
  .shop-by-vehicle .search-nav__item.mobile {
    display: none;
  }
}
.shop-by-vehicle .search-nav__btn {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  padding: 16px 8px 8px;
  line-height: 1;
}
@media (min-width: 501px) {
  .shop-by-vehicle .search-nav__btn {
    padding: 8px 16px;
  }
}
.shop-by-vehicle .search-nav__btn:focus {
  outline: none;
}
.shop-by-vehicle .search-nav__btn--short {
  font-size: 14px;
  font-weight: 700;
}
.shop-by-vehicle .search-nav__img {
  display: none;
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  -webkit-mask-size: 20px 20px;
}
@media (min-width: 501px) {
  .shop-by-vehicle .search-nav__img {
    display: inline-block;
  }
}
.shop-by-vehicle .search-nav__img--budget {
  width: 22px;
  height: 22px;
  -webkit-mask-size: 22px 22px;
}
.shop-by-vehicle .search-content--keyword.active {
  /* Prevent search valet dropdown menu from getting cut off at the edges */
  margin: -10px;
  padding: 10px;
}
.shop-by-vehicle .search-content.desktop {
  display: none;
}
@media (min-width: 992px) {
  .shop-by-vehicle .search-content.desktop {
    display: unset;
  }
}
@media (min-width: 992px) {
  .shop-by-vehicle .search-content.mobile {
    display: none;
  }
}

.homepage-search-widget-cosmos {
  padding: 2em;
  margin: 0 auto;
  min-width: 280px;
  max-width: 750px;
}
.homepage-search-widget-cosmos select.form-control {
  /* keep text from being overlapped by arrow */
  padding-right: 30px;
}
.homepage-search-widget-cosmos--without-padding {
  padding: unset;
  max-width: 540px;
}
.homepage-search-widget-cosmos--without-padding .shop-by-vehicle__header {
  text-align: unset;
}
.homepage-search-widget-cosmos--without-padding .search-by-filter__toggle-filters-button-container {
  justify-content: unset;
}
.homepage-search-widget-cosmos .search-content.tab-pane {
  display: none;
  height: auto;
  overflow-y: auto;
}
.homepage-search-widget-cosmos .search-content.tab-pane.active {
  display: block;
}
.homepage-search-widget-cosmos .opensearch-suggestions {
  text-align: left;
}

/*# sourceMappingURL=homepageSearchWidgetCosmos.css.map */