@import url(utilites.css);
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body::-webkit-scrollbar {
  display: none;
  /* Webkit (Chrome, Safari, Edge) */
}

.mainPort {
  width: 100dvw;
  height: 100dvh;
}

.notNav {
  width: 100%;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 7;
  display: flex;
  align-items: center;
}
.notNav img:nth-child(1) {
  width: 7.5rem;
  margin: 1.2rem 3rem;
}
.notNav img:nth-child(2) {
  margin-left: auto;
  margin-right: 2rem;
  padding: 0.5rem 1rem;
  transform: scale(0.6);
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Standard */
  transition: 0.3s ease-in-out all;
  border-radius: 10px;
  position: relative;
}
.notNav img:nth-child(2):hover {
  background-color: #e4e4e4;
}

.mainFramePort {
  display: grid;
  grid-template-columns: 1fr 1fr 21.25rem;
  /* 3 equal columns for layout */
  gap: 3rem;
  /* Space between columns */
  padding-right: 3rem;
}

.carouselContainer {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 3;
  margin-right: 3rem;
  float: left;
  height: 100dvh;
  width: 100%;
  position: sticky;
  top: 0;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: auto;
}

.carousel-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-images img,
.carousel-images video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}

.carousel-images .active {
  opacity: 1;
  visibility: visible;
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #dddbdb;
  border: none;
  color: white;
  font-size: 10px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s ease-in-out all;
  opacity: 0;
}

button.prev {
  left: 0px;
}

.carousel:hover button.prev {
  left: 25px;
  opacity: 1;
}

button.next {
  right: 0px;
}

.carousel:hover button.next {
  right: 25px;
  opacity: 1;
}

button:hover {
  background: rgba(158, 154, 154, 0.8);
}

.calcContainer {
  grid-column-start: 3;
  grid-column-end: 4;
  width: 21.25rem;
  margin-top: 3rem;
  margin-right: 3rem;
  padding-bottom: 8rem;
}

.calcCarNameTitle {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 3rem;
  letter-spacing: normal;
  text-align: center;
  padding: 1rem 0 1rem 0;
  color: #171a20;
}

.calcCarStatsContainer {
  display: flex;
  flex-direction: row;
}
.calcCarStatsContainer div {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
  width: 100%;
}
.calcCarStatsContainer div span:nth-child(1) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  -webkit-text-decoration: none solid rgb(57, 60, 65);
          text-decoration: none solid rgb(57, 60, 65);
  color: #393c41;
}
.calcCarStatsContainer div span:nth-child(2) {
  font-size: 0.875rem;
  line-height: 1.5rem;
  word-spacing: 0px;
  color: #393c41;
  font-weight: 700;
}

.tabs {
  width: 100%;
  overflow: hidden;
}

.tab-buttons {
  display: flex;
  margin-bottom: 1rem;
}

.tab-buttons button {
  background-color: white;
  color: #5d5f63;
  flex: 1;
  padding: 0.625rem;
  border: none;
  border-bottom: 1px solid #d0d1d2;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
  box-sizing: border-box;
  font-weight: 600;
}

.tab-buttons button.active {
  color: #171a20;
  border-bottom: 2px solid #171a20;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.orderTabsCash,
.orderTabsLease,
.orderTabsFinance {
  width: 100%;
  border: 1px solid #d0d1d2;
  border-radius: 0.3rem;
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 1rem 0.6rem;
  margin: 0.8rem 0;
  cursor: pointer;
  transition: ease-in 0.2s all;
}
.orderTabsCash span:nth-child(2),
.orderTabsLease span:nth-child(2),
.orderTabsFinance span:nth-child(2) {
  float: right;
}

.orderTabsCash.active,
.orderTabsLease.active,
.orderTabsFinance.active {
  background-color: #f4f4f4;
  color: #171a20;
  border: 1px solid #171a20;
}

.textNcheckboxContainer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: white;
  margin-top: 0.5rem;
}
.textNcheckboxContainer .textHolder {
  display: flex;
  flex-direction: column;
}

.textNcheckboxContainer input {
  margin-right: 0.625rem;
  width: 32px !important;
}

.textNcheckboxContainer .text {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
}
.textNcheckboxContainer .text:nth-child(2) {
  margin-top: 0.5rem;
}

.paintsContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3.5rem;
}
.paintsContainer .paintDataContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.paintsContainer .paintDataContainer span:nth-child(1) {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
}
.paintsContainer .paintDataContainer span:nth-child(2) {
  color: #171a20;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.4rem;
}
.paintsContainer .paintColorsContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 1.5rem;
}
.paintsContainer .paintColorsContainer img {
  margin-top: 0.3rem;
  max-width: 2.5rem;
  cursor: pointer;
}

.wheelsContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 3.5rem;
}
.wheelsContainer .wheelPrice {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
}
.wheelsContainer .wheelName {
  color: #171a20;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.3rem;
}
.wheelsContainer img {
  margin: 1.3rem 0rem;
  max-width: 2.5rem;
}
.wheelsContainer .wheelType {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
}
.wheelsContainer .wheelRange {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.2rem;
}

.towPachageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 3.5rem;
}
.towPachageContainerTitle {
  color: #171a20;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.3rem;
}
.towPachageContainerText {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.towPachageContainerOption {
  width: 100%;
  padding: 1rem 0.6rem;
  margin-top: 1.1rem;
  border: 1px solid #d0d1d2;
  border-radius: 0.3rem;
  transition: all ease-in 0.2s;
  cursor: pointer;
}
.towPachageContainerOption input[type=checkbox] {
  width: 23px !important;
}
.towPachageContainerOptionHolder {
  display: flex;
  float: left;
}
.towPachageContainerOptionHolder label {
  float: left;
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  padding-left: 0.5rem;
  cursor: pointer;
}
.towPachageContainerOption span {
  float: right;
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
}

.holderToggle {
  background-color: #f4f4f4;
  border: 1px solid #171a20;
  color: #171a20;
}
.holderToggle label {
  color: #171a20;
}
.holderToggle span {
  color: #171a20;
}

.entiriorColorsContainer img {
  cursor: pointer;
  max-width: 2.5rem;
  margin: 1.5rem 1rem;
  box-sizing: content-box;
}

.seatNum {
  color: #171a20;
  font-weight: 600;
}

.towPachageContainer .towPachageContainerText:nth-child(2) {
  text-align: center;
}

.selfDriveMiniVideoContainer {
  display: flex;
  font-size: 0.875rem;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #d0d1d2;
  border-radius: 0.3rem;
  width: 100%;
  margin: 1.35rem;
}
.selfDriveMiniVideoContainer div:nth-child(1) img {
  display: block;
  width: 7.5rem;
}
.selfDriveMiniVideoContainer div:nth-child(2) {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.selfDriveMiniVideoContainer div:nth-child(2) span:nth-child(1) {
  color: #171a20;
  font-weight: 600;
  padding: 0.1rem 1rem;
}
.selfDriveMiniVideoContainer div:nth-child(2) span:nth-child(2) {
  color: #5d5f63;
  font-weight: 600;
  padding: 0.1rem 1rem;
}

.videoUnavailable {
  color: red;
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  font-weight: 500;
}

.selfDriveParagraph {
  font-size: 0.75rem;
  color: #5d5f63;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.125rem;
  letter-spacing: normal;
}

.chargingContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3.5rem;
  width: 100%;
}
.chargingContainer .chargingHeader {
  color: #171a20;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.3rem;
}
.chargingContainer .chargingText {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  text-align: center;
  margin-top: 0.2rem;
}
.chargingContainer .chargingChargersContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.6rem;
}
.chargingContainer .chargingChargersContainer img {
  width: 7.5rem;
}
.chargingContainer .chargingChargersContainer .charger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #d0d1d2;
  border-radius: 4px;
  padding: 0.75rem;
  min-height: 2.5rem;
  width: 100%;
  transition: all ease-in 0.2s;
}
.chargingContainer .chargingChargersContainer .charger:nth-child(1) {
  margin-right: 1rem;
}
.chargingContainer .chargingChargersContainer .chargerPrice {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #171a20;
}
.chargingContainer .chargingChargersContainer .chargerTitle {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #171a20;
  padding-top: 0.25rem;
}
.chargingContainer .chargingChargersContainer .chargerText {
  font-size: 0.75rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #5c5e62;
  text-align: center;
  line-height: 1.125rem;
  font-weight: 500;
}
.chargingContainer .chargingChargersContainer input[type=checkbox] {
  position: absolute;
  display: block;
  top: 0.61rem;
  left: 0.61rem;
  width: 23px !important;
  background-color: transparent;
  outline: none;
}

.chargingLearnMore {
  margin-top: 1.5rem !important;
}

.chargerActive {
  background-color: #f4f4f4;
  border: 1px solid #171a20 !important;
}

.accessories {
  width: 100%;
  margin-top: 3.5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.accessories h2 {
  color: #171a20;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.3rem;
  text-align: center;
}
.accessories .access {
  width: 100%;
  padding: 1rem 0.6rem;
  margin-top: 1.1rem;
  border: 1px solid #d0d1d2;
  border-radius: 0.3rem;
  transition: all ease-in 0.2s;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.accessories .access label {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  padding-left: 0.5rem;
  cursor: pointer;
}
.accessories .accessPrice {
  color: #5d5f63;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  margin-left: auto;
}
.accessories .learnMoreBtn {
  margin-top: 1.5rem;
}

.accessActive {
  background-color: #f4f4f4;
  border: 1px solid #171a20 !important;
}
.accessActive label {
  color: #171a20 !important;
}
.accessActive span {
  color: #171a20 !important;
}

.totalContainer {
  font-family: "Inter", sans-serif !important;
  width: 100%;
  margin-top: 3rem;
}
.totalContainer .totalTitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #171a20;
  text-align: center;
}
.totalContainer .totalTextInput {
  background-color: #f4f4f4;
  color: #868a91;
  display: block;
  margin: 0 auto;
  border: 1px solid #f4f4f4;
  border-radius: 4px;
  height: 2.5rem;
  width: 12.25rem;
  font-size: 0.875rem;
  font-weight: 650;
  outline: none;
  padding-left: 0.8rem;
  margin-top: 1.3rem;
}
.totalContainer .totalTextInput:focus {
  border: 1px solid #868a91;
}
.totalContainer .formUnavailable {
  color: red;
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  font-weight: 500;
  text-align: center !important;
  width: 100%;
  margin-top: 0.7rem;
}
.totalContainer .totalPayments {
  display: flex;
  flex-direction: row;
  font-size: 1.1rem;
  color: #171a20;
  font-weight: 600;
  margin-top: 1rem;
}
.totalContainer .totalPayments span {
  margin-left: auto;
}
.totalContainer .totalPayments:nth-child(1) {
  margin-top: 2.5rem;
}
.totalContainer .totalFeeSubText {
  font-size: 0.75rem;
  color: #5c5e62;
  font-weight: 400;
  margin-top: 0.3rem;
}
.totalContainer .totalFeeSubText {
  font-size: 0.75rem;
  color: #5c5e62;
  font-weight: 400;
  margin-top: 0.7rem;
}
.totalContainer .totalExplore {
  font-size: 0.75rem;
  color: #5c5e62;
  font-weight: 400;
  margin-top: 1.5rem;
  text-decoration: underline;
  cursor: pointer;
}
.totalContainer .extrasProdsContainer {
  display: flex;
  flex-direction: column;
}
.totalContainer .extrasContainer {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.totalContainer .extrasContainer .extra {
  margin-top: 0.4rem;
}
.totalContainer .extrasContainer .extraName {
  font-family: "Inter", sans-serif !important;
  float: left;
  font-size: 0.875rem;
  color: #393c41;
  font-weight: 500;
}
.totalContainer .extrasContainer .extraPrice {
  font-family: "Inter", sans-serif !important;
  float: right;
  font-size: 0.875rem;
  color: #393c41;
}
.totalContainer .totalOrderBtn {
  width: 100%;
  font-family: "Inter", sans-serif !important;
  padding: 0.6rem 2rem;
  background-color: transparent;
  border: 3px solid #171a20;
  font-weight: 700;
  color: #171a20;
  letter-spacing: 0.5px;
  cursor: not-allowed;
  transition: 0.2s ease-in all;
  border-radius: 3px;
  margin-top: 1.5rem;
  position: relative;
  background-color: white;
}
.totalContainer .totalOrderBtn::after {
  content: "Order Unavailable";
  color: red;
  position: absolute;
  display: inline-block;
  width: 100%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 80%;
  z-index: -1;
  transition: ease-in-out 0.2s all;
}
.totalContainer .totalOrderBtn:hover {
  background-color: #171a20;
  color: white;
}
.totalContainer .totalOrderBtn:hover::after {
  top: 150%;
}

.priceBox {
  width: 100%;
  max-width: 25.312rem;
  box-shadow: rgba(0, 0, 0, 0.589) 0px 3px 8px;
  position: fixed;
  z-index: 5;
  bottom: 0;
  background-color: white;
  border-radius: 10px 10px 0 0;
  padding: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  transition: 0.2s ease-in transform;
}
.priceBoxPrice {
  font-size: 1.5rem;
  font-family: "Inter", sans-serif !important;
  font-weight: 500;
  margin-right: auto;
}
.priceBoxText {
  font-size: 0.75rem;
  font-family: "Inter", sans-serif !important;
  font-weight: 500;
  display: block;
  color: #868a91;
}
.priceBoxBtn {
  float: right;
  width: 7.5rem;
  margin-left: auto;
}

.visible {
  transform: translate(0, 100%);
}

.notNavVisible {
  transition: ease-in-out 0.3s;
  transform: translate(0, -100%);
}

@media screen and (max-width: 1023px) {
  .mainFramePort {
    padding-right: 1.5rem;
  }
  .priceBox {
    right: 0;
  }
}
@media screen and (max-width: 963px) {
  .carousel-images img,
  .carousel-images video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
  }
}
@media screen and (max-width: 650px) {
  body {
    margin: 0;
    padding: 0;
  }
  .mainFramePort {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 16rem 1fr;
    padding-right: 0;
    margin-right: 0;
    grid-row-gap: 1rem;
    justify-items: center;
    margin: 0;
    padding: 0rem;
  }
  .carouselContainer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 50dvh;
    width: 100%;
    z-index: 6;
    padding: 0;
    margin: 0;
    margin-top: 0;
  }
  .calcContainer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: 0;
    padding: 0;
    margin: 0;
    margin-bottom: 9rem;
  }
}
@media screen and (max-width: 650px) and (max-width: 650px) {
  /* ... your existing mobile styles ... */
  .priceBox {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #d0d1d2;
    padding: 1rem;
    transform: translate(0, 0) !important;
    /* Override any transform */
  }
  .priceBoxBtn {
    width: auto;
    padding: 0.5rem 1rem;
  }
  /* If you have a visible class that moves it, you might need to override that too */
  .priceBox.visible {
    transform: translate(0, 0) !important;
  }
}/*# sourceMappingURL=orderTesla.css.map */