/* Colors */
/* Grid components */
/* Page padding */
:root {
  --fs-7: 7px;
  --fs-8: 8px;
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-25: 25px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-35: 35px;
  --fs-40: 40px;
  --fs-45: 45px;
  --fs-47: 47px;
  --fs-56: 56px;
  --fs-66: 66px;
  --fs-70: 70px;
  --fs-126: 126px;
  /*Sprite rows*/
  --general-sprite-row-1: 0px;
  --general-sprite-row-2: -25px;
  --general-sprite-row-3: -55px;
  --general-sprite-row-4: -89px;
  --general-sprite-row-5: -129px;
  /*Sprite row 1*/
  --black-info-15: var(--sprite-icons-url) no-repeat 0px var(--general-sprite-row-1);
  --white-info-15: var(--sprite-icons-url) no-repeat -25px var(--general-sprite-row-1);
  /*Sprite row 2*/
  --white-calendar-20: var(--sprite-icons-url) no-repeat 0px var(--general-sprite-row-2);
  --whatsapp-20: var(--sprite-icons-url) no-repeat -30px var(--general-sprite-row-2);
  --black-info-20: var(--sprite-icons-url) no-repeat -60px var(--general-sprite-row-2);
  --white-info-20: var(--sprite-icons-url) no-repeat -90px var(--general-sprite-row-2);
  --arrow-left-white-20: var(--sprite-icons-url) no-repeat -120px var(--general-sprite-row-2);
  --arrow-left-black-20: var(--sprite-icons-url) no-repeat -150px var(--general-sprite-row-2);
  --safety-table-item-included-20: var(--sprite-icons-url) no-repeat -180px var(--general-sprite-row-2);
  --safety-table-item-optional-20: var(--sprite-icons-url) no-repeat -210px var(--general-sprite-row-2);
  --safety-table-item-missing-20: var(--sprite-icons-url) no-repeat -240px var(--general-sprite-row-2);
  --black-plus-20: var(--sprite-icons-url) no-repeat -270px var(--general-sprite-row-2);
  --black-minus-20: var(--sprite-icons-url) no-repeat -300px var(--general-sprite-row-2);
  /*Sprite row 3*/
  --private-area-hover-24: var(--sprite-icons-url) no-repeat 0px var(--general-sprite-row-3);
  --share-24: var(--sprite-icons-url) no-repeat -34px var(--general-sprite-row-3);
  /*Sprite row 4*/
  --magnifying-glass-30: var(--sprite-icons-url) no-repeat 0px var(--general-sprite-row-4);
  --white-check-30: var(--sprite-icons-url) no-repeat -40px var(--general-sprite-row-4);
  --white-calculator-30: var(--sprite-icons-url) no-repeat -80px var(--general-sprite-row-4);
  /*Sprite row 5*/
  --images-360-35: var(--sprite-icons-url) no-repeat 0px var(--general-sprite-row-5);
  --buy-car-button-35: var(--sprite-icons-url) no-repeat -45px var(--general-sprite-row-5);
}

* {
  margin: 0;
  padding: 0;
  font-size: var(--fs-16);
  line-height: calc(var(--fs-16) + 2px);
}

body {
  padding-right: 0 !important;
  overflow: auto !important;
}

.tooltip .tooltip-inner {
  font-size: var(--fs-12);
  max-width: 500px;
  width: calc(100% - 20px);
  min-width: 100px;
  margin: auto;
  white-space: break-spaces;
}

h1, h2, h3, h4, p {
  margin: 0;
}
h1.h1, h2.h1, h3.h1, h4.h1, p.h1 {
  margin: 0;
}

h1 {
  font-size: var(--fs-35);
  line-height: var(--fs-35);
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a:not(.default-link-style) {
  text-decoration: unset;
  color: black;
}
a:not(.default-link-style):hover {
  color: black;
}
a:not(.default-link-style).link-btn-s1 {
  color: black;
  text-decoration: underline;
  transition: color ease-in-out 0.2s;
}
a:not(.default-link-style).link-btn-s1:hover {
  color: var(--primary-color);
}

body[type=Cadillac] a.link-btn-s1:hover {
  color: var(--primary-color);
}

.iconimg {
  object-fit: contain;
}
.icon.s-15 {
  width: 15px;
  height: 15px;
  object-fit: cover;
}
.icon.s-20 {
  width: 20px;
  height: 20px;
}
.icon.s-40 {
  width: 40px;
  height: 40px;
}

.title-with-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.title-with-logo .title {
  font-size: var(--fs-35);
  line-height: 37px;
}
.title-with-logo .logo {
  max-width: 260px;
  width: 100%;
  max-height: 60px;
  height: 100%;
  margin-top: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pt-30 {
  padding-top: 30px;
}

/* ~~~~~~~~~~~~~ Scrollbar ~~~~~~~~~~~~~ */
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #EFEFEF;
  border-radius: 10px;
}

/*hidden*/
.hide-scrollbar ::-webkit-scrollbar-thumb {
  background: transparent;
}

.air-pollution-level-banner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: auto;
  justify-content: center;
  gap: 10px;
}
.air-pollution-level-banner-wrapper .new-air-pollution-banner-wrapper {
  gap: 0px;
}
.air-pollution-level-banner-wrapper .new-air-pollution-banner-wrapper .air-pollution-levels-wrapper {
  justify-content: center;
}

/* Track */
body[type=Cadillac] ::-webkit-scrollbar-track {
  border-radius: unset;
}
body[type=Cadillac] ::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: unset;
}

body[type=Chevrolet] ::-webkit-scrollbar-track {
  border-radius: 10px;
}
body[type=Chevrolet] ::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page-padding {
  padding-left: 140px;
  padding-right: 140px;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.bold {
  font-weight: 700;
}

.bolder {
  font-weight: 800;
}

.thin {
  font-weight: 300;
}

.shadow {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
}

.gradient {
  background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%) 0% 0% no-repeat padding-box;
}

.border-bottom-gray {
  border-bottom: solid #BCC5C7 1px;
}

.hide {
  display: none !important;
}

.pointer {
  cursor: pointer;
}

.m-b-0 {
  margin-bottom: 0;
}

.icon {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
}
.icon img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.icon.included {
  background-image: url("/icons/safety-included-icon.svg");
}
.icon.optional {
  background-image: url("/icons/saftey-optional-icon.svg");
}
.icon.missing {
  background-image: url("/icons/safety-missing-icon.svg");
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

/* ~~~~~~~~ Colors ~~~~~~~~ */
.white {
  color: white;
}

/* ~~~~~~~~ Fonts ~~~~~~~~ */
.f-12 {
  font-size: var(--fs-12);
  line-height: 14px;
}

.f-25 {
  font-size: var(--fs-25);
  line-height: 26px;
}

.new-site-upload-message {
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}
.new-site-upload-message span {
  font-size: var(--fs-14);
}

body:has(.new-site-upload-message) .header-wrapper {
  top: 25px;
}
body:has(.new-site-upload-message) #calc-dialog .modal-dialog {
  top: 30px;
}

/* ~~~~~~~~ Swiper ~~~~~~~~ */
.swiper {
  /* &:has(.swiper-button-lock) {
      .swiper-wrapper {
          //transform: unset !important;
          //justify-content: center;
      }
  }

  &:has(.swiper-pagination-lock) {
      .swiper-wrapper {
          //transform: unset !important;
          //justify-content: center;
      }
  }*/
}
.swiper .swiper-wrapper .swiper-slide {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.swiper .swiper-pagination-style-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.swiper .swiper-pagination-style-1 .swiper-pagination-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: calc(var(--fs-12) + 5px);
  font-size: var(--fs-12);
  border: 1px solid black;
  color: black;
  background-color: white;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  opacity: 1;
}
.swiper .swiper-pagination-style-1 .swiper-pagination-bullet-active {
  color: white;
  background-color: black;
  font-weight: 700;
}
.swiper .sb-style-1.swiper-button-prev, .swiper .sb-style-1.swiper-button-next {
  color: black;
  border-radius: var(--primary-border-radius);
  background-color: white;
  width: 37px;
  height: 37px;
  padding: 17px;
  opacity: 1;
  border: 1px solid #BCC5C7;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1607843137);
  margin: 0;
}
.swiper .sb-style-1.swiper-button-prev:after, .swiper .sb-style-1.swiper-button-next:after {
  font-size: 14px;
}
.swiper .sb-style-1.swiper-button-prev:hover:after, .swiper .sb-style-1.swiper-button-next:hover:after {
  font-weight: 700;
}
.swiper .sb-style-1.swiper-button-next {
  left: 140px;
  transition: padding-right ease-in-out 0.3s;
}
.swiper .sb-style-1.swiper-button-next:hover {
  padding-right: 35px;
}
.swiper .sb-style-1.swiper-button-prev {
  right: 140px;
  transition: padding-left ease-in-out 0.3s;
}
.swiper .sb-style-1.swiper-button-prev:hover {
  padding-left: 35px;
}
.swiper .sb-style-2.swiper-button-prev, .swiper .sb-style-2.swiper-button-next {
  color: black;
  opacity: 1;
  margin: 0;
  top: -7px;
  z-index: 2;
}
.swiper .sb-style-2.swiper-button-prev:after, .swiper .sb-style-2.swiper-button-next:after {
  font-weight: 700;
}
.swiper .sb-style-2.swiper-button-prev:after, .swiper .sb-style-2.swiper-button-next:after {
  font-size: var(--fs-14);
}
.swiper .sb-style-2.swiper-button-prev.swiper-button-disabled:after, .swiper .sb-style-2.swiper-button-next.swiper-button-disabled:after {
  font-weight: 400;
}
.swiper .sb-style-3.swiper-button-prev, .swiper .sb-style-3.swiper-button-next {
  display: flex;
  gap: 5px;
  align-items: center;
  bottom: 0px;
  top: auto;
  margin: 0 30px;
}
.swiper .sb-style-3.swiper-button-prev::after, .swiper .sb-style-3.swiper-button-next::after {
  display: inline-block;
  width: 30px;
  height: 20px;
  background-image: url("/icons/black-left-arrow-2.png");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  flex: 0 0 auto;
}
.swiper .sb-style-3.swiper-button-prev span, .swiper .sb-style-3.swiper-button-next span {
  color: black;
}
.swiper .sb-style-3.swiper-button-prev.swiper-button-disabled span, .swiper .sb-style-3.swiper-button-next.swiper-button-disabled span {
  color: #BCC5C7;
}
.swiper .sb-style-3.swiper-button-prev span {
  order: 1;
}
.swiper .sb-style-3.swiper-button-prev::after {
  order: 0;
  transform: rotate(180deg);
}

/* ~~~~~~~~ Tabs ~~~~~~~~ */
.tabs-style-1.nav-tabs .nav-item {
  transition: border-bottom ease-in-out 0.2s;
  padding: 5px 20px;
  border-bottom: 6px solid transparent;
}
.tabs-style-1.nav-tabs .nav-item span {
  font-size: var(--fs-20);
  line-height: calc(var(--fs-20) + 7px);
}
.tabs-style-1.nav-tabs .nav-item.active {
  border-bottom: 6px solid var(--primary-color);
}
.tabs-style-1.nav-tabs .nav-item.active span {
  font-weight: 700;
}
/* ~~~~~~~~ Inputs ~~~~~~~~ */
input {
  border: unset;
  background-color: transparent;
  font-size: var(--fs-14);
  width: 100%;
}
input:focus {
  outline: none;
}
input[type=checkbox] .custom-checkbox-cover {
  border: none;
}
input[type=tel] {
  text-align: right;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16"> <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/> </svg>');
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: 50%;
  border: unset;
}
select:focus {
  outline: none;
}

.custom-checkbox-cover {
  border: none;
}

.input-field-wrapper {
  display: flex;
  background: white 0% 0% no-repeat padding-box;
  border-radius: var(--thirdly-border-radius);
  padding: 10px;
}

body[type=Cadillac] .input-field-wrapper {
  border-radius: unset;
}

.input-checkbox-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 10px;
}
.input-checkbox-wrapper .form-check-input {
  margin-top: 0;
}
.input-checkbox-wrapper .form-check-input:focus {
  box-shadow: unset;
  border-color: var(--primary-color);
}
.input-checkbox-wrapper .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.input-checkbox-wrapper span {
  font-size: var(--fs-14);
  line-height: calc(var(--fs-14) + 2px);
}

.img-zoom-effect {
  overflow: hidden;
}
.img-zoom-effect img {
  transition: ease-in-out transform 0.2s; /* Animation */
}
.img-zoom-effect:hover img {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.dialogs-wrapper .modal-dialog-centered {
  margin-top: 0;
  margin-bottom: 0;
}

/* ~~~~~~~~ Buttons ~~~~~~~~ */
button {
  border: unset;
  background-color: white;
  color: black;
}

.btn-close {
  opacity: 1;
}
.btn-close:focus {
  outline: none;
  box-shadow: unset;
}

button:disabled,
button[disabled] {
  background-color: var(--light-disabled-color) !important;
}

/* ~~~~~~~~ Main buttons on the site ~~~~~~~~ */
.rounded-button {
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  gap: 10px;
  color: black;
  background-color: white;
  text-decoration: unset;
  transition: all ease-in-out 0.5s;
  /* &:focus {
      border: solid 2px $gold1;
      background-color: white;
      color: $gold1;
  }*/
}
.rounded-button a {
  color: inherit;
  font-weight: 600;
  text-decoration: unset;
}
.rounded-button a:hover {
  color: inherit;
}
.rounded-button.gold-button {
  padding: 10px 20px;
  border: unset;
  /*  &:hover {
      color: white;
      background-color: var(--secondary-color);
  }*/
}
.rounded-button.black-button {
  color: white;
  padding: 10px 20px;
  border: unset;
  background-color: black;
}
.rounded-button.black-button.outlin {
  padding: 9px 19px;
  color: black;
}
.rounded-button.disabled {
  transition: unset;
  border: unset;
}

.whatsapp-main-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 8;
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
}

/* ~~~~~~~~~~~~ Mobile ~~~~~~~~~~~~~ */
@media (max-width: 1279px) {
  body .new-site-upload-message {
    z-index: 4;
    height: 80px;
    padding: 0 10px;
    position: relative;
    top: 0px;
  }
  body .new-site-upload-message span {
    font-size: var(--fs-12);
  }
  body:has(.new-site-upload-message) {
    /*  #main-container {
        position: relative;
        top: 80px;
    }*/
  }
  body:has(.new-site-upload-message) .header-wrapper {
    top: unset;
  }
  body:has(.new-site-upload-message) #calc-dialog .modal-dialog {
    top: 5px;
  }
  body:has(.new-site-upload-message) .buy-car-wizard-page-wrapper .buy-car-wizard-iframe {
    height: calc(100vh - 80px - 70px);
  }
  body:has(.new-site-upload-message):has(.anchor-menu-wrapper) .new-site-upload-message {
    top: 55px;
  }
  body:has(.new-site-upload-message):has(.anchor-menu-wrapper) .breadcrumbs-wrapper {
    top: 205px;
  }
  body:has(.new-site-upload-message):has(.anchor-menu-wrapper):has(.tabs-wrapper.layout-tabs) .breadcrumbs-wrapper {
    top: 245px;
  }
  body:has(.new-site-upload-message):has(.tabs-wrapper.layout-tabs) .breadcrumbs-wrapper {
    top: 190px;
  }
  body:has(.new-site-upload-message) .breadcrumbs-wrapper {
    top: 150px;
  }
  * {
    font-size: var(--fs-14);
    line-height: calc(var(--fs-14) + 2px);
  }
  .page-padding {
    padding-left: 20px;
    padding-right: 20px;
  }
  .icon {
    width: 30px;
    height: 30px;
  }
  .title-with-logo .title {
    font-size: var(--fs-25);
    line-height: calc(var(--fs-25) + 5px);
  }
  .title-with-logo .logo {
    margin-top: 15px;
    max-height: 40px;
    height: 40px;
    width: auto;
  }
  /* ~~~~~~~~ Buttons Mobile ~~~~~~~~ */
  .rounded-button {
    height: 40px;
  }
  .rounded-button span {
    font-size: var(--fs-14);
    line-height: calc(var(--fs-14) + 2px);
  }
  /* ~~~~~~~~ Swiper ~~~~~~~~ */
  .swiper .sb-style-1.swiper-button-next {
    left: 20px;
  }
  .swiper .sb-style-1.swiper-button-prev {
    right: 20px;
  }
}
/* sprite icons */
.sprite-icons {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  /* ROW 1 */
  /* ROW 2 */
  /* ROW 3 */
  /* ROW 4 */
  /* ROW 5 */
  /*row 1 after logos */
}
.sprite-icons.black-info-15 {
  background: var(--black-info-15);
  height: 15px;
  width: 15px;
}
.sprite-icons.white-info-15 {
  background: var(--white-info-15);
  height: 15px;
  width: 15px;
}
.sprite-icons.white-calendar-20 {
  background: var(--white-calendar-20);
}
.sprite-icons.whatsapp-20 {
  background: var(--whatsapp-20);
}
.sprite-icons.black-info-20 {
  background: var(--black-info-20);
}
.sprite-icons.white-info-20 {
  background: var(--white-info-20);
}
.sprite-icons.arrow-left-white-20 {
  background: var(--arrow-left-white-20);
}
.sprite-icons.arrow-left-black-20 {
  background: var(--arrow-left-black-20);
}
.sprite-icons.safety-table-item-included-20 {
  background: var(--safety-table-item-included-20);
}
.sprite-icons.safety-table-item-optional-20 {
  background: var(--safety-table-item-optional-20);
}
.sprite-icons.safety-table-item-missing-20 {
  background: var(--safety-table-item-missing-20);
}
.sprite-icons.black-plus-20 {
  background: var(--black-plus-20);
}
.sprite-icons.black-minus-20 {
  background: var(--black-minus-20);
}
.sprite-icons.private-area-hover-24 {
  background: var(--private-area-hover-24);
  height: 24px;
  width: 24px;
}
.sprite-icons.share-24 {
  background: var(--share-24);
  height: 24px;
  width: 24px;
}
.sprite-icons.magnifying-glass-30 {
  background: var(--magnifying-glass-30);
  height: 30px;
  width: 30px;
}
.sprite-icons.white-check-30 {
  background: var(--white-check-30);
  height: 30px;
  width: 30px;
}
.sprite-icons.white-calculator-30 {
  background: var(--white-calculator-30);
  height: 30px;
  width: 30px;
}
.sprite-icons.images-360-35 {
  background: var(--images-360-35);
  height: 35px;
  width: 35px;
}
.sprite-icons.buy-car-button-35 {
  background: var(--buy-car-button-35);
  height: 35px;
  width: 35px;
}
.sprite-icons.whatsapp-60 {
  background: var(--whatsapp-60);
  height: 60px;
  width: 60px;
}

.notransition {
  -o-transition: none !important;
  -ms-transition: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

.text-area-display {
  white-space: break-spaces;
}

/* used for when putting richtext in grid blocks (a parent container is created with 20px padding - this is used to color the parent) */
div:has(> .color-parent-black-background-white-text) {
  background-color: #000;
  color: #fff;
}