/* Row 1 */
.row1 {
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  z-index: 2;
  position: relative;
  justify-content: space-between;
}
.row1 .imgBlock {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--unit_x50);
}
@media only screen and (max-width: 768px) {
  .row1 .imgBlock {
    display: none;
  }
}
.row1 .imgBlock .mainImg {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.row1 .imgBlock .mainImg img {
  width: 90%;
  max-width: var(--unit_x500);
}


.row1 .carPurchaseFormBlock {
  display: flex;
  align-items: center;
}
.row1 .carPurchaseForm {
  /*width: 50%;*/
  text-align: left;
  padding: var(--unit_x18);
  margin: 0px auto 0px 0px;
}
.row1 form[name="carPurchaseForm"] {
  width: 100%;
}
.row1 .carPurchaseForm .backLabelArea {
  margin-top: var(--unit_x14);
  text-align: center;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}
.row1 .carPurchaseForm .progressBarSteps {
  margin-top: var(--unit_x18);
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons {
  margin-top: var(--unit_x14);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons > div {
  width: 47%;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons .button {
    color: var(--col_pl10);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons .button::before {
  content: '';
  background-color: var(--col_pl10);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons .green {
  background-color: var(--col_tg50);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons .red {
  background-color: var(--col_pr60);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .body .infoTxt {
  margin-bottom: var(--unit_x14);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons a,
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterQuestion"] .buttons button {
  width: 100%;
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterIdentification"] .body .betweenLabel {
  color: var(--col_pl50);
  text-align: center;
  margin: var(--unit_x8) 0px;
  font-size: var(--unit_x10);
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea {
  background-color: var(--col_pd100);
  border: 1px var(--col_pd50) dashed;
  border-radius: var(--unit_x5);
  height: var(--unit_x145);
  padding: 0px var(--unit_x40);
  color: var(--col_pl10);
  font-size: var(--unit_x10);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea.error {
  border-color: var(--col_pr60);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea .imgPreviewBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 90%;
  top: 5%;
  left: 0px;
  padding: 10px;
  overflow-y: scroll;
  z-index: 10;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea .imgPreviewBox .prevImg {
  position: relative;
  width: 33%;
  height: 50%;
  border-radius: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea .imgPreviewBox .prevImg:hover:before {
  content: ' ';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: rgba(255,255,255,0.8);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea .imgPreviewBox .prevImg:hover:after {
  content: url("data:image/svg+xml,%3Csvg width='16px' height='16px' fill='currentColor' viewBox='0 0 16 16' class='bi bi-trash' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/%3E%3Cpath fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/%3E%3C/svg%3E");  position: absolute;
  left: 0px;
  top: calc(50% - 8px);
  width: 100%;
  height: 100%;
  fill: red;
  color: red;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea .imgPreviewBox .prevImg:nth-child(n+4) {
  margin-top: 10px;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea .uploadInProgressBox {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleLetterUpload"] .uploadArea input[type="file"] {
  z-index: 0;
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .body .betweenLabel {
  color: var(--col_pl50);
  text-align: center;
  margin: var(--unit_x8) 0px;
  font-size: var(--unit_x10);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea {
  background-color: var(--col_pd100);
  border: 1px var(--col_pd50) dashed;
  border-radius: var(--unit_x5);
  height: var(--unit_x145);
  padding: 0px var(--unit_x40);
  color: var(--col_pl10);
  font-size: var(--unit_x10);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea.error {
  border-color: var(--col_pr60);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea .imgPreviewBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 90%;
  top: 5%;
  left: 0px;
  padding: 10px;
  overflow-y: scroll;
  z-index: 10;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea .imgPreviewBox .prevImg {
  position: relative;
  width: 33%;
  height: 50%;
  border-radius: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea .imgPreviewBox .prevImg:hover:before {
  content: ' ';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: rgba(255,255,255,0.8);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea .imgPreviewBox .prevImg:hover:after {
  content: url("data:image/svg+xml,%3Csvg width='16px' height='16px' fill='currentColor' viewBox='0 0 16 16' class='bi bi-trash' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/%3E%3Cpath fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/%3E%3C/svg%3E");  position: absolute;
  left: 0px;
  top: calc(50% - 8px);
  width: 100%;
  height: 100%;
  fill: red;
  color: red;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea .imgPreviewBox .prevImg:nth-child(n+4) {
  margin-top: 10px;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea .uploadInProgressBox {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_vehicleImages"] .uploadArea input[type="file"] {
  z-index: 0;
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .body > div {
  margin-bottom: var(--unit_x16);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .body .descText {

}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .body .info {
  margin-bottom: var(--unit_x10);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .body .ratingStars {
  margin-top: var(--unit_x2);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .input_textarea {
  height: 80px;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .buttons {
  margin-top: var(--unit_x18);
  margin-bottom: var(--unit_x23) !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .buttons a,
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .buttons button {
  width: 100%;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .radios {
  display: flex;
  justify-content: left;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .radios .input_radio {
  flex-grow: 1;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactName"] .radios .input_radio:first-child {
  /*margin-right: var(--unit_x100);*/
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .body > div {
  margin-bottom: var(--unit_x14);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .buttons {
  margin-top: var(--unit_x18);
  margin-bottom: var(--unit_x23) !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .buttons a,
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .buttons button {
  width: 100%;
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_contactZip"] .body > div {
  margin-bottom: var(--unit_x16);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactZip"] .input_textarea {
  height: 80px;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactZip"] .buttons {
  margin-top: var(--unit_x18);
  margin-bottom: var(--unit_x23) !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactZip"] .buttons a,
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactZip"] .buttons button {
  width: 100%;
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .body > div {
  margin-bottom: var(--unit_x14);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .buttons {
  margin-top: var(--unit_x18);
  margin-bottom: var(--unit_x23) !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .buttons a,
.row1 .carPurchaseForm .stepElm[data-stepname="step_contactData"] .buttons button {
  width: 100%;
}

.row1 .carPurchaseForm .stepElm[data-stepname="step_overview"] .body > div {
  margin-bottom: var(--unit_x14);
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_overview"] .buttons {
  margin-top: var(--unit_x18);
  margin-bottom: var(--unit_x23) !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_overview"] .buttons a,
.row1 .carPurchaseForm .stepElm[data-stepname="step_overview"] .buttons button {
  width: 100%;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_overview"] .thumbnailBox .previewBox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: scroll;
  max-height: 280px;
}
.row1 .carPurchaseForm .stepElm[data-stepname="step_overview"] .thumbnailBox .previewBox .prevImg {
  position: relative;
  width: 48%;
  height: 50px;
  border-radius: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  justify-content: space-between;
  margin-top: 10px;
}
.carPurchaseForm .overviewDataLine {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: var(--unit_x16);
}
.carPurchaseForm .overviewDataLine .info {
  margin-bottom: 0;
}
.carPurchaseForm .overviewDataLine .dataElm {
  margin-bottom: var(--unit_x16);
}

.carPurchaseForm .stepElm[data-stepname="step_thx"] .body > div {
  margin-bottom: var(--unit_x14);
}
.carPurchaseForm .stepElm[data-stepname="step_thx"] .buttons {
  margin-top: var(--unit_x18);
  margin-bottom: var(--unit_x23) !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.carPurchaseForm .stepElm[data-stepname="step_thx"] .buttons a,
.carPurchaseForm .stepElm[data-stepname="step_thx"] .buttons button {
  width: 100%;
}



.input_checkbox label.notice {
  margin-top: 0px;
}

.nav_scrollElm {
  display: none;
  z-index: 3;
}
@media (max-height:720px) and (min-width:998px) {
  .nav_scrollElm {
    display: none;
  }
}
.stepElm:first-child {
  display: block;
}

.spaceDown {
  margin-bottom: var(--unit_x14);
}


.loadNextStepBox span:nth-child(1) {
  -webkit-animation-name: animationLoadingPoints;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.5s;
  -moz-animation-name: animationLoadingPoints;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0.5s;
  animation-name: animationLoadingPoints;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
.loadNextStepBox span:nth-child(2) {
  -webkit-animation-name: animationLoadingPoints;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.5s;
  -moz-animation-name: animationLoadingPoints;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0.5s;
  animation-name: animationLoadingPoints;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
}
.loadNextStepBox span:nth-child(3) {
  -webkit-animation-name: animationLoadingPoints;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 1s;
  -moz-animation-name: animationLoadingPoints;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 11s;
  animation-name: animationLoadingPoints;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

@-webkit-keyframes animationLoadingPoints {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}