.vehicle-container a {

  justify-content: center;

}





table.dataTable th,

table.dataTable td {

  white-space: nowrap;

}



/* Colour picker css only */



.colors {

  display: flex;

  position: fixed;

  bottom: 2em;

  right: 2em;

}



.color {

  height: 36px;

  width: 36px;

  margin-left: 0.5em;

  border-radius: 18px;

  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

  border: 2px solid #aaa;

  cursor: pointer;

}



.mx-10 {

  margin-left: 10px;

  margin-right: 10px;

}



.pt-2-n {

  padding-top: 2px;

}



.pb-2-n {

  padding-bottom: 2px;

}



.cbng-h {

  height: 70px;

  overflow: hidden;

}



@media (min-width: 991px) {

  .btd {

    padding-left: 0px;

    padding-bottom: 5px;

  }



  .th-pus {

    padding-top: 5px;

    padding-right: 0px;

  }

}



@media (max-width: 767px) {

  .frm-slct-p {

    padding: 10px 5px !important;

  }



  .fz-12 {

    padding: 15px 2px !important;

    font-size: 12px !important;

  }

}


.hi-slide {

  position: relative;

  width: auto;

  height: 200px;

  margin: 40px auto 0;

}



.hi-slide .hi-next,

.hi-slide .hi-prev {

  position: absolute;

  top: 50%;

  width: 50px;

  height: 50px;

  margin-top: -20px;

  border-radius: 50px;

  line-height: 40px;

  text-align: center;

  cursor: pointer;

  background-color: transparent;

  color: black;

  transition: all 30s;

  font-size: 20px;

  font-weight: bold;

}



.hi-slide .hi-next:hover,

.hi-slide .hi-prev:hover {

  opacity: 1;

  background-color: transparent;

}



.hi-slide .hi-prev {

  left: -10%;

}



.hi-slide .hi-prev::before {

  content: '';

}



.hi-slide .hi-next {

  right: -10%;

}



.hi-slide .hi-next::before {

  content: '';

}



.hi-slide>ul {

  list-style: none;

  position: relative;

  width: auto;

  height: 300px;

  margin: 0;

  padding: 0;

}



.hi-slide>ul>li {

  overflow: hidden;

  position: absolute;

  z-index: 0;

  left: 377px;

  top: 147px;

  width: 0;

  height: auto;

  margin: 0;

  padding: 0;

  background-color: transparent;

  cursor: pointer;



}



.hi-slide>ul>li>img {

  width: 100%;

  height: 100%;

  background-position: center;

}



@media (min-width: 575px) and (max-width: 768px) {

  .hi-slide .hi-prev {

    left: -15% !important;

  }



  .hi-slide .hi-next {

    right: -15% !important;

  }

}



@media (max-width: 575px) {



  .hi-slide .hi-next,

  .hi-slide .hi-prev {

    width: 30px !important;

  }



  .sb-n-0 {

    right: 0px !important;

  }



  .sb-p-0 {

    left: 0px !important;

    right: auto !important;

  }



  .hi-slide .hi-next {

    right: -20px !important;

  }



  .hi-slide .hi-prev {

    left: -20px !important;

  }

}





/* Checkbox Red */


.checkbox-prmry input[type=checkbox] {
    /* display: none; */
    opacity: 0;
    position: absolute;
    z-index: -10;
    top: 5px;
}



/* to hide the checkbox itself */

.checkbox-prmry input[type=checkbox]+label:before {

  font-family: FontAwesome;

  display: inline-block;

  color: #000;

}



.checkbox-prmry input[type=checkbox]+label:before {

  content: "\f096";

  color: var(--color-dark-1);

}



/* unchecked icon */

.checkbox-prmry input[type=checkbox]+label:before {

  letter-spacing: 10px;

}



/* space between checkbox and label */



.checkbox-prmry input[type=checkbox]:checked+label:before {

  content: "\f046";

  color: #d61a1a;

}



/* checked icon */

.checkbox-prmry input[type=checkbox]:checked+label:before {

  letter-spacing: 5px;

}



.checkbox-prmry .clr-lbl {

  color: var(--color-dark-1);

}



/* allow space for check mark */



@media (max-width: 991px) {

  .ph-mt {

    margin-top: 60px !important;

  }



  .p-y {

    padding-left: 5px !important;

    padding-right: 5px !important;

  }

}



@media (min-width: 991px) and (max-width: 1199px) {

  .ph-mt {

    margin-top: 70px !important;

  }

}



@media (min-width: 1199px) {

  .ph-mt {

    margin-top: 92px !important;

  }

}





/* Datetime */



input.date {

  height: 55px;

  padding: 15px 5px !important;

}



.calendar-date {

  position: relative;

}



.calendar-date:after {

  z-index: -1;

  content: "📅";

  display: block;

  font-size: 2rem;

  color: black;

  background: none;

  width: 50px;

  height: 50px;

  position: absolute;

  top: 1px;

  right: 0px;

}

.calendar-date-profil {

  position: relative;

}



.calendar-date-profil:after {

  z-index: 1;

  content: "📅";

  display: block;

  font-size: 2rem;

  color: black;

  background: none;

  width: 50px;

  height: 50px;

  position: absolute;

  top: 1px;

  right: 0px;

}



.clck {

  position: relative;

}



.clck:after {

  z-index: -1;

  content: "🕘";

  display: block;

  font-size: 2rem;

  color: black;

  background: none;

  width: 50px;

  height: 50px;

  position: absolute;

  top: 1px;

  right: 0px;

}



.enchilada::-webkit-calendar-picker-indicator {

  opacity: 0;

  padding-right: 17px;

}



.enchilada,

.enchilada:focus {
  background: rgba(0, 0, 0, 0);

}



::-webkit-datetime-edit {

  padding: 0.6em;

  font-size: 15px;

}



::-webkit-datetime-edit-fields-wrapper {

  background: transparent;

  border-radius: 10px;

  padding: 7px;

}



::-webkit-datetime-edit-text {

  color: #757575;

  padding: 0 0.6em;

}



::-webkit-datetime-edit-day-field {

  color: var(--color-dark-1);

}



::-webkit-datetime-edit-day-field:focus {

  color: var(--color-black);
  background: #DDDDDD;

}



::-webkit-datetime-edit-month-field {

  color: var(--color-dark-1);

}



::-webkit-datetime-edit-month-field:focus {

  color: var(--color-black);

  background: #DDDDDD;

}



::-webkit-datetime-edit-year-field {

  color: var(--color-dark-1);

}



::-webkit-datetime-edit-year-field:focus {

  color: var(--color-black);

  background: #DDDDDD;

}



::-webkit-inner-spin-button {

  opacity: 1;

  font-size: 2rem;

  margin-top: 5px;

}



::-webkit-calendar-picker-indicator {

  background: DarkSlateGray;

  color: Cornsilk;

  opacity: 1;

  font-size: 1.5rem;

  transition: all ease 400ms;

  transform: scale(1);

  margin-left: 5px;

}



::-webkit-calendar-picker-indicator:hover {

  background: black;

  color: Cyan;

  transform: scale(1.2);

  cursor: pointer;

}



input::-webkit-datetime-edit-year-field[enabled] {

  font-size: 5rem;

}



input::-webkit-datetime-edit {

  background: transparent;

  border-radius: 10px;

}



input::-webkit-datetime-edit-hour-field {

  color: var(--color-dark-1);

}



input::-webkit-datetime-edit-hour-field:focus {

  color: var(--color-black);

  background: #DDDDDD;

}



input::-webkit-datetime-edit-millisecond-field {

  color: var(--color-dark-1);

}



input::-webkit-datetime-edit-millisecond-field:focus {

  color: var(--color-black);

  background: #DDDDDD;

}



input::-webkit-datetime-edit-minute-field {

  color: var(--color-dark-1);

}



input::-webkit-datetime-edit-minute-field:focus {

  color: var(--color-black);

  background: #DDDDDD;

}



input::-webkit-datetime-edit-ampm-field {

  color: var(--color-dark-1);

}



input::-webkit-datetime-edit-ampm-field:focus {

  color: var(--color-black);

  background: #DDDDDD;

}



input::-webkit-datetime-edit-week-field {

  background: AQUAMARINE;

}



/*

>Custom image date picker NOT WORKING!!!!!

*/

/*

::-webkit-calendar-picker-indicator {

position:relative ;

color: rgba(0, 0, 0, 0);//alpha hide symbol

border-radius:20px;

width: 20px;

height: 30px;

}



::-webkit-calendar-picker-indicator::after {

content:'lol';

display: block;

background: Maroon;

//background: url('') no-repeat;

//background-size: 10%;

width: 100px;

height: 100px;

position: absolute;

transform: translateX(-20px);

opacity: 1;

z-index:9;

}

*/



.d-form-t {

  cursor: not-allowed;

  background: var(--color-light-2) !important;

}



.p-i-d {

  padding: 15px 5px !important;

}



.t-n-wrap {

  white-space: nowrap;

  overflow: hidden;

  width: 90%;

  text-overflow: ellipsis;

}



.toe {

  text-overflow: ellipsis;

}



.bb-0 {

  border-bottom: 0px !important;

}



.pob {

  display: flex;

  height: 100%;

  justify-content: center;

  align-items: center;

  border: 2px solid var(--color-dark-1);

  border-radius: 8px;

  padding: 15px 5px 5px 5px;

}



.sectionTitle__ {

  font-size: 24px;

  line-height: 34px;

  font-weight: 700;

  color: var(--color-dark-1);

  text-decoration: underline;

}

/* 360 */


.view-360 {

  position: relative;

  text-align: center;

  width: 100%;

  overflow: hidden;

  user-select: none;

  cursor: pointer;
  /* background-image: url('https://tagtoyota.co.id/staging/content/themes/tag-eba6d4ed0c4a0d912a787482f21c94db/img/tag/bg-catalog/background-catalog.jpg'); */
  background-size: cover;
  background-position: center center;

}

.view-360:active {

  cursor: w-resize;

}

.catalog-360 {
  position: absolute;
  bottom: 4rem;
  width: 100%;
  text-align: center;
}

@media (max-width: 767px) {
  .controls {
    margin-right: 25px !important;
    margin-left: 25px !important;
  }
}

.controls {
  margin-left: 5px;
  margin-right: 5px;
  position: relative;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.view-warna {

  position: relative;

  width: 100%;

  overflow: hidden;

  user-select: none;

}

.color-change {

  display: flex;

  flex-wrap: wrap;

}



/* Membuat opsi warna menjadi bulat */

.color-option {

  display: inline-block;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  border: solid 1px #d5d1d9;
}

.color-option[data-color*="silver-metallic"] {
  background-color: #B4B4B6;
}

.color-option[data-color*="black"] {
  background-color: #000000;
}

.color-option[data-color*="white"] {
  background-color: #ffff;
}

.color-option[data-color*="red"] {
  background-color: #7f151e;
}

.color-option[data-color*="purplish-silver"] {
  background-color: #8c8b91 !important;
}

.color-option[data-color*="silver-mica-metallic"] {
  background-color: #7e8080 !important;
}

.color-option[data-color*="attitude-black"] {
  background-color: #181c19 !important;
}

.color-option[data-color*="attitude-black-mica"] {
  background-color: #060709 !important;
}

.color-option[data-color*="deep-maroon-mica"] {
  background-color: #5f0520 !important;
}

.color-option[data-color*="black-mica"] {
  background-color: #061922 !important;
}

.color-option[data-color*="attitude-black-metallic"] {
  background-color: #312f2f !important;
}

.color-option[data-color*="red-mica-metallic_black"] {
  background: linear-gradient(0deg, #992027 50%, #000000 50%) !important;
}

.color-option[data-color*="silver-metallic_black"] {
  background: linear-gradient(0deg, #B4B4B6 50%, #000000 50%) !important;
}

.color-option[data-color*="metal-stream-metallic_black"] {
  background: linear-gradient(0deg, #90939c 50%, #000000 50%) !important;
}

.color-option[data-color*="metal-stream-me"] {
  background: #bdbcbc !important;
}

.color-option[data-color*="metal-stream"] {
  background: #878587 !important;
}



.color-option[data-color*="red-mica-metallic"] {
  background: #992027 !important;
}

.color-option[data-color*="red-m.m."] {
  background: #bd2126 !important;
}

.color-option[data-color*="glitter-black"] {
  background: #060607 !important;
}

.color-option[data-color*="grey-me"] {
  background: #979798 !important;
}

.color-option[data-color*="attitude-black_silver"] {
  background: linear-gradient(0deg, #181c19 50%, #B4B4B6 50%) !important;
}

.color-option[data-color*="platinum-white-pearl_attitude-black"] {
  background: linear-gradient(0deg, #e2e7ea 50%, #000000 50%) !important;
}

.color-option[data-color*="red-mica-metallic_attitude-black"] {
  background: linear-gradient(0deg, #992027 50%, #181c19 50%) !important;
}

.color-option[data-color*="platinum-white-pearl_black"] {
  background: linear-gradient(0deg, #e2e7ea 50%, #000000 50%) !important;
}

.color-option[data-color*="precious-white"] {
  background: #CFD5D6 !important;
}

.color-option[data-color*="turquoise-mm"] {
  background: #4B91B9 !important;
}

.color-option[data-color*="turquoise-mm_black"] {
  background: linear-gradient(0deg, #4B91B9 50%, #000000 50%) !important;
}

.color-option[data-color*="platinum-white-pearl"] {
  background-color: #e2e7ea !important;
}

.color-option[data-color*="graphite-metallic"] {
  background-color: #433832 !important;
}

.color-option[data-color*="two-tone-black-precious-metal"] {
  background: #3C4148;
}

.color-option[data-color*="two-tone-black-precious-silver"] {
  background: #C1C4C7;
}

.color-option[data-color*="two-tone-black-platinum-white-pearl-mica"] {
  background: #E9EAE7;
}

.color-option[data-color*="super-white"] {
  background-color: #F9FAFB !important;
}

.color-option[data-color*="prominence-red"] {
  background: #862724 !important;
}

.color-option[data-color*="lightning-yellow"] {
  background: #AD6335 !important;
}

.color-option[data-color*="white-metallic"] {
  background: #f1f1f1 !important;
}

.color-option[data-color*="matte-storm-grey-metallic"] {
  background: #61666D !important;
}

.color-option[data-color*="black-metallic"] {
  background: #070707 !important;
}

.color-option[data-color*="portimau-blue"] {
  background: #061B5C !important;
}

.color-option[data-color*="sparkling-cupper-grey"] {
  background: #3C4556 !important;
}

.color-option[data-color*="sparkling-black-pearl"] {
  background: #211f26 !important;
}

.color-option[data-color*="ignition-red"] {
  background: #ED1C24 !important;
}

.color-option[data-color*="crystal-black-silica"] {
  background: #231F20 !important;
}

.color-option[data-color*="bright-blue"] {
  background: #0C72A5 !important;
}

.color-option[data-color*="ice-silver-metallic"] {
  background: #969394 !important;
}

.color-option[data-color*="magnetite-grey-metallic"] {
  background: #4F4D4D !important;
}

.color-option[data-color*="sapphire-blue-pearl"] {
  background: #111146 !important;
}

.color-option[data-color*="grey-metallic"] {
  background: #2F3639 !important;
}

.color-option[data-color*="orange-metallic"] {
  background: #da5938 !important;
}

.color-option[data-color*="bronze-mica-metallic"] {
  background: #646053 !important;
}

.color-option[data-color*="white-pearl-mm"] {
  background: #F2F2F2 !important;
}

.color-option[data-color*="white-pearl"] {
  background: #e7e6e2 !important;
}

.color-option[data-color*="citrus-mica-metallic"] {
  background: #e6e58a;
}

.color-option[data-color*="yellow"] {
  background: #f4ec31;
}

.color-option[data-color*="yellow-se"] {
  background: #cebb06;
}

.color-option[data-color*="yellow-se_black"] {
  background: linear-gradient(0deg, #cebb06 50%, #000000 50%) !important;
}

.color-option[data-color*="red-black"] {
  background: linear-gradient(0deg, #7f151e 50%, #000000 50%) !important;
}

.color-option[data-color*="white-black"] {
  background: linear-gradient(0deg, #dadbdd 50%, #000000 50%) !important;
}

.color-option[data-color*="dark-grey-mica-metalic"] {
  background: #788791 !important;
}

.color-option[data-color*="platinum-white-pearl-mica"] {
  background: #E9EAE7 !important;
}

.color-option[data-color*="emotional-red"] {
  background: #BB2025 !important;
}

.color-option[data-color*="dark-red-mica-metallic"] {
  background: #741e21 !important;
}

.color-option[data-color*="calestite-grey-metallic"] {
  background: #647585 !important;
}

.color-option[data-color*="beige-metallic"] {
  background: #d6c3b2 !important;
}

.color-option[data-color*="phantom-brown-mica-metallic"] {
  background: #512711 !important;
}

.color-option[data-color*="bronze-mica-metallic"] {
  background: #827262 !important;
}

.color-option[data-color*="dk-steel-mc"] {
  background: #5e5d5d !important;
}



/* Memberikan kelas active pada opsi warna yang aktif */

.color-option.active {

  border: solid 2px #d5d1d9;

}



.specification.-type-1 {

  height: 100%;

  cursor: pointer;

}



.specification.-type-1 .specification__content {

  height: 100%;

  background: var(--color-light-5);

  border-radius: 8px;

  padding: 26px 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.specification.-type-1 .specification__img {

  display: flex;

  justify-content: center;

  align-items: center;

  width: auto;

  height: 150px;

}



.specification.-type-1 .specification__title {

  margin-top: 10px;

  font-size: 17px;

  height: 70PX;

  font-weight: 600;

  line-height: 26px;

  color: var(--color-dark-1);

}



.-specification-hover .specification__content,

.-specification-hover .specification__title,

.-specification-hover .specification__text {

  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);

}



.-specification-hover:hover .specification__content {

  background-color: var(--color-primary) !important;

}



.-specification-hover:hover .specification__title,

.-specification-hover:hover .specification__text {

  color: white !important;

}



.specification.-type-1 .specification__content.is-active {

  background: var(--color-primary) !important;

}



.specification.-type-1 .specification__content.is-active .specification__title {

  color: white !important;

}



@media screen and (max-width: 767px) {

  .spec-responsive tbody tr {

    display: flex;

    flex-wrap: wrap;

  }



  .spec-responsive tbody th,

  .spec-responsive tbody td {

    width: 50%;

    box-sizing: border-box;

  }

}



.form-select {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down select__icon'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E%0A");

  display: block;

  color: var(--color-dark-1);

  background-repeat: no-repeat;

  background-position: right 20px center;

  background-size: 19px;

  appearance: none;

}



.fs-10 {

  background-position: right 10px center !important;

}



.bs-1 {

  border: 1px solid #DDDDDD;

}



.d-it {

  display: inline-table;

}

.p-a-z-2 {
  position: absolute;
  z-index: 2;
}

.table-responsive {
  overflow-x: scroll;
}

.mt-min-5 {
  margin-top: -5px !important;
}

.two-liner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: 100%;
}

@media screen and (min-width: 767px) {
  .eventCard.-type-1 .eventCard__title {
    height: 44px;
  }
}

.p-30 {
  padding: 30px;
}

.m-h-200 {
  min-height: 200px;
}

.error-message {
  display: flex;
  justify-content: center;
  /* height: 100%; */
  font-weight: 600;
  font-size: 18px;
}

#view-360-interior {
  width: 100%;
  height: 60vh;
}

@media (min-width: 1199px) {
  .vehicle-container {
    position: absolute;

    top: 0;

    background-color: white;

    border-radius: 8px;

    color: black !important;
    overflow-y: scroll;
    min-width: 450px;

    min-height: 200px;
    max-height: 88vh;

    flex-wrap: wrap !important;

    padding-top: 20px;

    padding-bottom: 20px;

    box-shadow: 0px 25px 70px 0px #01213a12;

    /*pointer-events: none;*/

    margin-left: 1px;

    margin-top: -20px;

    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  .p-unset {
    position: unset !important;
  }
}

@media (max-width: 1199px) {
  .vehicle-container {
    display: none;
    position: absolute;
    top: 60px;
    left: 14px;
    color: black !important;
    padding: 20px;
    width: 100%;
    height: 100%;

    animation-duration: 0.1ms;
    animation-timing-function: ease-out;
    animation-name: slide-in-out;
  }

  @keyframes slide-in-out {
    0% {
      opacity: 0;
      transform: translateY(-10%);
    }

    50% {
      opacity: 0.5;
      transform: translateY(5%);
    }

    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  .header .header-menu.-is-el-visible .subnav .-is-active .vehicle-container {
    display: block;
    animation-duration: 1s;
    animation-name: slide-in-out;
  }

  .header .header-menu .menu__nav .vehicle-container a:hover {
    color: var(--color-primary) !important;
    background-color: transparent !important;
  }
}

.product-h {
  display: flow-root !important;
  transform: none !important;
  height: 100% !important;
}

.mw-none {
  max-width: none !important;
}

.txt-hidden {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-l-35-tb-15 {
  padding: 15px 35px 15px 22px !important;
}

.image-features {
  position: relative;
  overflow: hidden;
}

.image-features img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.title-features {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 100px;
  padding-bottom: 15px;
  background-image: linear-gradient(to top, rgb(224 0 0 / 80%), rgb(255 0 0 / 0%));
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .image-features .h-z-250 {
    object-fit: cover;
    height: 250px;
  }
}

.image-features:hover img {
  transform: scale(1.1);
}

.image-features:hover .title-features {
  opacity: 1;
}

@media (max-width: 1500px) {
  .xxl\:mt-30 {
    margin-top: 30px;
  }
}

.image-interior-overview {
  position: relative;
}

.image-interior-overview img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.title-interior-overview {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 100px;
  padding-bottom: 15px;
  background-image: linear-gradient(to top, rgb(224 0 0 / 80%), rgb(255 0 0 / 0%));
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .image-interior-overview .h-z-250 {
    object-fit: cover;
    height: 250px;
  }
}

.image-interior-overview:hover .title-interior-overview {
  opacity: 1;
}

.section-1-home {
  display: flex;
}

.section-1-home .swiper-slide {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.section-1-home .swiper-slide picture,
.section-1-home .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}