/* 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 */
.vehicle-compare-button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  white-space: nowrap;
  font-size: 1.6rem;
  border-top: 2px solid #f4f5f7;
  padding: 8px 20px;
  width: inherit;
}
.vehicle-compare-button-container .vehicle-compare-button-container--left {
  flex: auto;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox input[type=checkbox] {
  display: none;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox input[type=checkbox]:checked + .checkbox::before {
  font-family: "FontAwesome";
  font-size: 14px;
  content: "\f00c";
  color: #ffffff;
  background-color: var(--cta-background-color);
  font-weight: normal;
  border-color: var(--cta-background-color);
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox input[type=checkbox]:disabled + .checkbox::before {
  cursor: not-allowed;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox .checkbox {
  margin: 0px;
  color: #5c5c5c;
  display: flex;
  padding-left: 0;
  line-height: 1;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox .checkbox:hover::before {
  cursor: pointer;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox .checkbox::before {
  border-width: 1px;
  border-style: solid;
  border-color: #dcdce2;
  border-radius: 6px;
  background-color: #ffffff;
  content: "";
  width: 20px;
  height: 20px;
  padding: 2px;
  flex: 0 0 auto;
  margin-right: 13px;
}
.vehicle-compare-button-container .vehicle-compare-button-container--left .vehicle-compare-checkbox {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  position: relative;
  top: 0.05em;
}
.vehicle-compare-button-container .vehicle-compare-button-container--left .vehicle-compare-checkbox__label {
  letter-spacing: 0;
  color: #122532;
  display: inline-block;
  font-weight: inherit;
  margin: 0;
  align-items: center;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left .vehicle-compare-checkbox__label {
  margin: 0 0 0 1.1em;
}
.vehicle-compare-button-container .vehicle-compare-button-container--left .vehicle-compare-checkbox__label.checkbox {
  padding: 0;
}
#content-main-inventory .vehicle-compare-button-container .vehicle-compare-button-container--right {
  padding: 0 0 0 1.5em;
}
.wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--right {
  padding: 0 0 0 2.2em;
}
.vehicle-compare-button-container .vehicle-compare-button-container--right .vehicle-compare-button {
  letter-spacing: 0;
  font-size: inherit;
  padding: 0;
  text-transform: none;
  flex-grow: 2;
  border: 0;
  cursor: pointer;
}
.vehicle-compare-button-container .vehicle-compare-button-container--right .vehicle-compare-button__label {
  letter-spacing: 0;
  color: #122532;
}
.vehicle-compare-button-container .vehicle-compare-button-container--right .vehicle-compare-button__label {
  margin: 0;
  font-weight: inherit;
  font-style: italic;
}

/* Srp Wasabi List view */
.list-view {
  position: relative;
}
.list-view .vehicle-card--mod .vehicle-compare-button-container {
  border-top: none;
  padding: 15px 20px;
}

/* Srp Wasabi Grid View */
.grid-view .vehicle-card--mod .vehicle-compare-button-container {
  border-top: none;
  padding: 15px 20px;
}

.vehicle-card .vehicle-compare-button-container--right .vehicle-compare-button {
  color: var(--cta-background-color);
}

/* 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 */
/* Works well for either single elements, or multiple elements grouped under the same parent */
/* Remove default styling from button element */
/* Good for adding color to an SVG-based image. Adds an ::after of the intended color and positions it over the element with a grid. NOTE: doesn't just use position: absolute because Safari doesn't like it. */
/* Good for adding color to an SVG-based image. Adds an ::after of the intended color and positions it over the element with a grid. Uses the SVG itself as a mask. NOTE: doesn't just use position: absolute because Safari doesn't like it. Expected code structure: <div class="icon" style="{the image url}"><img src="{the image url}"></div> */
.compare-table {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.compare-table, .compare-table__body--details {
  /* Make bottom table section scrollable */
  overflow: auto;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.compare-table::-webkit-scrollbar, .compare-table__body--details::-webkit-scrollbar {
  display: none;
}
.compare-table__row {
  display: flex;
  column-gap: 0.29em;
}
@media (min-width: 834px) {
  .compare-table__row {
    column-gap: 0.79em;
  }
}
@media (min-width: 1920px) {
  .compare-table__row {
    column-gap: 2.14em;
  }
}
.compare-table__row--body:not(:first-of-type) .cell-contents--details {
  border-top: 2px solid #dcdce2;
}
.compare-table__cell {
  width: 100%;
  min-width: 180px;
}
.compare-table__cell--details {
  font-size: 0.95em;
}
.compare-table__loading {
  font-weight: 400;
}
.compare-table .cell-contents {
  height: 100%;
}
.compare-table .cell-contents--details {
  background: #f4f5f7;
}
.compare-table .cell-contents__empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.compare-table .cell-contents__empty-text {
  font-size: 16px;
  color: #a5a5a5;
}
.compare-table .header-cell {
  position: relative;
  border: 2px solid #f4f5f7;
  border-bottom: none;
}
.compare-table .header-cell__close {
  border: none;
  background: transparent;
  padding: 0;
  text-transform: initial;
  position: absolute;
  right: 0.36em;
  top: 0.36em;
  z-index: 50;
}
.compare-table .header-cell__close-icon {
  color: #a5a5a5;
}
.compare-table .header-cell__image {
  display: block;
  max-width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  object-position: top;
}
.compare-table .header-cell__vehicle-title {
  padding: 0.8em 1.45em;
  display: block;
}
.compare-table .header-cell .vehicle-title {
  margin: 0;
  line-height: 0.5em;
  color: #333333;
}
.compare-table .header-cell .vehicle-title__text {
  flex: 0 1 auto;
  font-size: 0.55em;
}
.compare-table .header-cell .vehicle-title__year, .compare-table .header-cell .vehicle-title__make-model {
  font-weight: 900;
  padding-right: 5px;
}
.compare-table .header-cell .vehicle-title__year {
  color: #a5a5a5;
}
.compare-table .header-cell .vehicle-title__trim {
  flex: 1 1 auto;
  font-size: 0.45em;
}
.compare-table .price-cell {
  padding: 0 1.45em 0.8em 1.45em;
  color: #000000;
  border-right: 2px solid #f4f5f7;
  border-left: 2px solid #f4f5f7;
  border-bottom: 2px solid #dcdce2;
}
.compare-table .price-cell__amount {
  font-weight: bold;
  font-size: 1.14em;
  margin: 0;
}
.compare-table .price-cell__label {
  font-size: 0.93em;
  margin: 0;
}
.compare-table .specs-cell {
  padding: 0.85em 1.45em;
}
.compare-table .specs-data {
  height: 100%;
}
.compare-table .highlights-cell {
  padding: 0.8em 1.45em;
}
.compare-table .highlights-cell__list {
  -webkit-padding-start: 0;
  padding-inline-start: 0;
}
.compare-table .highlights-cell__item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.4em 0;
}
.compare-table .highlights-cell__icon {
  margin-right: 0.5em;
  min-width: 24px;
  flex-basis: 24px;
  opacity: 0.2;
}
.compare-table .highlights-cell__expand {
  border: none;
  background: transparent;
  padding: 0;
  text-transform: initial;
}
.compare-table .comments-cell {
  padding: 1.25em 1.45em;
}
.compare-table .comments-cell__text {
  line-height: 1.35em;
  margin-bottom: 0.71em;
}
.compare-table .comments-cell__text:not(.comments-cell__text--expanded) {
  max-height: 6.7em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: block;
  white-space: nowrap;
  display: -webkit-box;
  white-space: unset;
}
@media (min-width: 834px) {
  .compare-table .comments-cell__text:not(.comments-cell__text--expanded) {
    -webkit-line-clamp: 3;
    max-height: 5.4em;
  }
}
.compare-table .comments-cell__expand {
  border: none;
  background: transparent;
  padding: 0;
  text-transform: initial;
}
.compare-table .comments-cell__vdp-button-container {
  margin-top: 1.65em;
}
.compare-table .comments-cell__vdp-button {
  border-radius: 5px;
  width: 100%;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  font-size: 1em;
  text-transform: none;
}

.specs__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}
.specs__item {
  display: flex;
}
.specs__value {
  font-weight: 700;
  display: -webkit-inline-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.specs__value, .specs__color-label {
  margin-top: 2px;
}
.specs__icon {
  margin-right: 0.5em;
}
.specs__color-icon {
  border: 1px solid #999999;
  border-radius: 5px;
  display: block;
}

.specs__list {
  row-gap: 13px;
}
.specs__icon {
  min-width: 24px;
  flex-basis: 24px;
}
.specs__color-icon {
  margin: 0.15em 9px 0.15em 1px;
  padding: 9px;
}

body::-webkit-scrollbar .vehicle-compare-container {
  display: none;
}

.vehicle-compare-container {
  display: grid;
  grid-template-rows: minmax(auto, 85px) auto;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999 !important;
  background: #ffffff;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.vehicle-compare-container::-webkit-scrollbar {
  display: none;
}
@media (min-width: 834px) {
  .vehicle-compare-container[data-has-vehicles=false] {
    background: #f4f5f7;
  }
}
.vehicle-compare-container header {
  color: unset;
}
.vehicle-compare-container .header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "title close" "clear share";
  height: 85px;
  align-content: flex-end;
  background-color: #f4f5f7;
  padding: 0 0.71em 0.71em 1.07em;
  width: 100vw;
  max-width: 1450px;
}
@media (min-width: 834px) {
  .vehicle-compare-container .header {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr repeat(2, auto);
    grid-template-areas: ". . close" "title clear share";
    align-items: flex-end;
    column-gap: 2.86em;
    height: 109px;
    padding: 0 2.86em 0.71em;
  }
}
@media (min-width: 1025px) {
  .vehicle-compare-container .header {
    margin-right: auto;
    margin-left: auto;
  }
}
.vehicle-compare-container .header__title {
  grid-area: title;
  font-size: 1.5em;
  font-weight: bold;
  padding: 1.13em 0 0;
  text-transform: none;
  margin: 0;
}
@media (min-width: 834px) {
  .vehicle-compare-container .header__title {
    font-size: 2.3em;
    padding-bottom: 0;
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container .header__actions {
    display: flex;
    justify-content: flex-end;
    align-self: end;
    align-items: center;
  }
}
.vehicle-compare-container .header__actions-close {
  border: none;
  background: transparent;
  padding: 0;
  text-transform: initial;
  cursor: pointer;
  padding: 1.07em 0.79em;
  color: #122532;
}
@media (min-width: 834px) {
  .vehicle-compare-container .header__actions-close {
    display: inline-block;
    padding: 0;
    font-size: 1.2em;
    line-height: 1;
  }
}
.vehicle-compare-container .header__actions-close-icon {
  font-size: 1.6em;
}
.vehicle-compare-container .header__actions-share {
  grid-area: share;
  border: none;
  background: transparent;
  padding: 0;
  text-transform: initial;
  cursor: pointer;
  z-index: 100;
}
@media (min-width: 834px) {
  .vehicle-compare-container .header__actions-share {
    font-size: 1.2em;
  }
}
.vehicle-compare-container .header__actions-clear {
  grid-area: clear;
  border: none;
  background: transparent;
  padding: 0;
  text-transform: initial;
  background: transparent;
  border: none;
  padding-bottom: 8px;
  font-size: 1.2em;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 834px) {
  .vehicle-compare-container .header__actions-clear {
    font-size: 1.2em;
  }
}
.vehicle-compare-container .header__container-close {
  grid-area: close;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.vehicle-compare-container .vehicle-compare__main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.vehicle-compare-container .vehicle-compare__main::-webkit-scrollbar {
  display: none;
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__main {
    padding: 1.43em 2.9em;
  }
}
.vehicle-compare-container .vehicle-compare__main--no-vehicles {
  justify-items: center;
  grid-template-columns: 1fr;
}
.vehicle-compare-container .vehicle-compare__main, .vehicle-compare-container .vehicle-compare__table {
  /* Make bottom table section scrollable */
  overflow: auto;
  height: 100%;
}
.vehicle-compare-container .vehicle-compare__table {
  min-width: fit-content;
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__table {
    max-width: calc(1450px - 2.9em * 2);
  }
}
.vehicle-compare-container .vehicle-compare__table--1-col {
  width: calc(calc(calc(100vw - 2.9em * 2) / 5) * 1);
  min-width: calc(180px * 1 + 0.29em * (1 - 1));
}
@media (min-width: 1450px) {
  .vehicle-compare-container .vehicle-compare__table--1-col {
    width: calc(calc(calc(1450px - 2.9em * 2) / 5) * 1);
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__table--1-col {
    min-width: calc(180px * 1 + 0.79em * (1 - 1));
  }
}
@media (min-width: 1920px) {
  .vehicle-compare-container .vehicle-compare__table--1-col {
    min-width: calc(180px * 1 + 2.14em * (1 - 1));
  }
}
.vehicle-compare-container .vehicle-compare__table--2-col {
  width: calc(calc(calc(100vw - 2.9em * 2) / 5) * 2);
  min-width: calc(180px * 2 + 0.29em * (2 - 1));
}
@media (min-width: 1450px) {
  .vehicle-compare-container .vehicle-compare__table--2-col {
    width: calc(calc(calc(1450px - 2.9em * 2) / 5) * 2);
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__table--2-col {
    min-width: calc(180px * 2 + 0.79em * (2 - 1));
  }
}
@media (min-width: 1920px) {
  .vehicle-compare-container .vehicle-compare__table--2-col {
    min-width: calc(180px * 2 + 2.14em * (2 - 1));
  }
}
.vehicle-compare-container .vehicle-compare__table--3-col {
  width: calc(calc(calc(100vw - 2.9em * 2) / 5) * 3);
  min-width: calc(180px * 3 + 0.29em * (3 - 1));
}
@media (min-width: 1450px) {
  .vehicle-compare-container .vehicle-compare__table--3-col {
    width: calc(calc(calc(1450px - 2.9em * 2) / 5) * 3);
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__table--3-col {
    min-width: calc(180px * 3 + 0.79em * (3 - 1));
  }
}
@media (min-width: 1920px) {
  .vehicle-compare-container .vehicle-compare__table--3-col {
    min-width: calc(180px * 3 + 2.14em * (3 - 1));
  }
}
.vehicle-compare-container .vehicle-compare__table--4-col {
  width: calc(calc(calc(100vw - 2.9em * 2) / 5) * 4);
  min-width: calc(180px * 4 + 0.29em * (4 - 1));
}
@media (min-width: 1450px) {
  .vehicle-compare-container .vehicle-compare__table--4-col {
    width: calc(calc(calc(1450px - 2.9em * 2) / 5) * 4);
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__table--4-col {
    min-width: calc(180px * 4 + 0.79em * (4 - 1));
  }
}
@media (min-width: 1920px) {
  .vehicle-compare-container .vehicle-compare__table--4-col {
    min-width: calc(180px * 4 + 2.14em * (4 - 1));
  }
}
.vehicle-compare-container .vehicle-compare__table--5-col {
  width: calc(calc(calc(100vw - 2.9em * 2) / 5) * 5);
  min-width: calc(180px * 5 + 0.29em * (5 - 1));
}
@media (min-width: 1450px) {
  .vehicle-compare-container .vehicle-compare__table--5-col {
    width: calc(calc(calc(1450px - 2.9em * 2) / 5) * 5);
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container .vehicle-compare__table--5-col {
    min-width: calc(180px * 5 + 0.79em * (5 - 1));
  }
}
@media (min-width: 1920px) {
  .vehicle-compare-container .vehicle-compare__table--5-col {
    min-width: calc(180px * 5 + 2.14em * (5 - 1));
  }
}
.vehicle-compare-container .vehicle-compare__add-vehicles {
  min-width: 180px;
  width: calc(calc(calc(100vw - 2.9em * 2) / 5) * 1);
}
@media (min-width: 1450px) {
  .vehicle-compare-container .vehicle-compare__add-vehicles {
    width: calc(calc(calc(1450px - 2.9em * 2) / 5) * 1);
  }
}
.vehicle-compare-container .add-vehicles {
  padding: 5.14em 1.43em 0;
}
.vehicle-compare-container .add-vehicles__label {
  font-size: 1.15em;
  color: #a5a5a5;
  text-align: center;
  margin-bottom: 2.14em;
}
.vehicle-compare-container .add-vehicles__back-button {
  display: block;
  margin: 0 auto;
  font-size: 13px;
  min-height: 40px;
}
.vehicle-compare-container .scrolling-controls {
  display: none;
}
.vehicle-compare-container .scrolling-controls .scrolling-control__btn {
  z-index: 10;
  position: fixed;
  top: 275px;
  height: 140px;
  width: 4.5em;
  background-color: #333333;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
}
.vehicle-compare-container .scrolling-controls .scrolling-control__btn i {
  pointer-events: none;
  font-size: 2.5em;
}
.vehicle-compare-container .scrolling-controls .scrolling-control--previous .scrolling-control__btn--previous {
  border-radius: 0 14px 14px 0;
  left: 0;
}
.vehicle-compare-container .scrolling-controls .scrolling-control--next .scrolling-control__btn--next {
  border-radius: 14px 0 0 14px;
  right: 0;
}
@media (min-width: 834px) {
  .vehicle-compare-container .scrolling-controls {
    display: flex;
  }
}
@media (min-width: 1025px) {
  .vehicle-compare-container .scrolling-controls {
    display: none;
  }
}
@media (min-width: 834px) {
  .vehicle-compare-container {
    background: #ffffff;
    grid-template-rows: minmax(auto, 109px) auto;
  }
}

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