.condition-report-crstream,
.condition-report-crstream * {
  box-sizing: border-box;
}
.condition-report-crstream {
  background: linear-gradient(to left, #ffffff, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 33px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
    .condition-report-crstream .top-bar {
        background-image: url('../../img/crstream/top-bar0.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        /*  background: linear-gradient(
    180deg,
    rgba(0, 35, 84, 0) 0%,
    rgba(0, 35, 84, 0.4) 23.31288307905197%,
    rgba(0, 35, 84, 0.8) 100%
  );
*/ padding: 20px 80px 20px 80px;
        display: flex;
        flex-direction: row;
        gap: 0px;
        align-items: flex-end;
        justify-content: center;
        align-self: stretch;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
    }
    .condition-report-crstream .vert-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        justify-content: flex-start;
        flex: 1;
        max-width: 712px;
        position: relative;
    }
.atr-cr {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.provided-by {
  color: #f5f7fa;
  text-align: left;
  font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
  font-size: var(--text-large-font-size, 20px);
  line-height: var(--text-large-line-height, 28px);
  font-weight: var(--text-large-font-weight, 400);
  position: relative;
}
.condition-reports-logo-white {
  flex-shrink: 0;
  width: 114px;
  height: 20px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  aspect-ratio: 114/20;
}
.title {
  background: linear-gradient(to left, #ffffff, #ffffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: var(
    --heading-h2-font-family,
    "NunitoSans-ExtraBold",
    sans-serif
  );
  font-size: var(--heading-h2-font-size, 32px);
  line-height: var(--heading-h2-line-height, 35.2px);
  font-weight: var(--heading-h2-font-weight, 800);
  position: relative;
}
.vert-layout2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  max-width: 712px;
  position: relative;
}
.report-date {
  color: #f5f7fa;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
}
.button-2 {
  background: #0084b8;
  border-radius: 5px;
  border-style: solid;
  border-color: #0084b8;
  border-width: 1px;
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 1px 1px 2px 0px rgba(21, 85, 113, 0.15);
  overflow: hidden;
}
.material-symbols-download-rounded {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.download {
  color: #ffffff;
  text-align: left;
  font-family: var(--small-bold-font-family, "NunitoSans-Bold", sans-serif);
  font-size: var(--small-bold-font-size, 14px);
  line-height: var(--small-bold-line-height, 19.6px);
  font-weight: var(--small-bold-font-weight, 700);
  position: relative;
}
.vertical-layout {
  padding: 0px 80px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.top-section-2 {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  gap: 16px;
  row-gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 1440px;
  position: relative;
}
.carousel-cr {
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  min-width: 400px;
  position: relative;
}
.image {
  padding: 223px 0px 223px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.button-layout {
  padding: 0px 8px 0px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.left {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.background {
  background: rgba(245, 247, 250, 0.85);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  aspect-ratio: 1;
}
.material-symbols-navigate-next {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 40px;
  top: 40px;
  transform: translate(-40px, -40px);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}
.right {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.material-symbols-navigate-next2 {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}
.horizontal-caption-layout {
  border-radius: 0px 0px 5px 5px;
  padding: 8px 16px 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.vertical-caption-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.photo-caption {
  color: #2b2f33;
  text-align: left;
  font-family: var(
    --text-normal-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-normal-bold-font-size, 16px);
  line-height: var(--text-normal-bold-line-height, 22.4px);
  font-weight: var(--text-normal-bold-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.year-make-model-vin {
  color: #3a3f44;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.image-pagination {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(to left, #6a737c, #6a737c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: var(--text-small-font-family, "NunitoSans-Regular", sans-serif);
  font-size: var(--text-small-font-size, 14px);
  line-height: var(--text-small-line-height, 19.6px);
  font-weight: var(--text-small-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /*justify-content: space-between;*/
  flex: 1;
  height: 556px;
  min-width: 400px;
  position: relative;
}
.header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
._2022-toyota-corolla {
  color: #121417;
  text-align: left;
  font-family: var(
    --heading-h2-font-family,
    "NunitoSans-ExtraBold",
    sans-serif
  );
  font-size: var(--heading-h2-font-size, 32px);
  line-height: var(--heading-h2-line-height, 35.2px);
  font-weight: var(--heading-h2-font-weight, 800);
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.horizontal-layout {
  display: flex;
  flex-direction: row;
  row-gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  position: relative;
}
.vin {
  background: #f5f7fa;
  border-radius: 5px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.barcode-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.vin2 {
  color: #2b2f33;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.stock {
  background: #f5f7fa;
  border-radius: 5px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.stock-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.stock2 {
  color: #2b2f33;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.body {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.row_no_bs {
  border-style: solid;
  border-color: #dde3e9;
  border-width: 0px 0px 1px 0px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  flex-wrap: wrap;
  row-gap: 2px;
  position: relative;
  min-width: 270px;
}

.label {
  color: #2b2f33;
  text-align: left;
  font-family: var(--small-bold-font-family, "NunitoSans-Bold", sans-serif);
  font-size: var(--small-bold-font-size, 14px);
  line-height: var(--small-bold-line-height, 19.6px);
  font-weight: var(--small-bold-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.content2 {
  color: #3a3f44;
  text-align: right;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  flex: 1 1 230px;
  min-width: 230px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.row2 {
  border-style: solid;
  border-color: var(--color-gray-2, #e0e0e0);
  border-width: 0px 0px 1px 0px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.label2 {
  color: var(--color-black-1, #231f20);
  text-align: left;
  font-family: var(--small-bold-font-family, "NunitoSans-Bold", sans-serif);
  font-size: var(--small-bold-font-size, 14px);
  line-height: var(--small-bold-line-height, 19.6px);
  font-weight: var(--small-bold-font-weight, 700);
  position: relative;
  width: 104px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.content3 {
  color: var(--color-black-3, #282828);
  text-align: right;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  flex: 1 1 200px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.announcements {
  background: #f5f7fa;
  border-radius: 5px;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 1440px;
  position: relative;
}
.title2 {
  color: #121417;
  text-align: left;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.description {
  color: #2b2f33;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  align-self: stretch;
}
.section {
  background: #ffffff;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 1448px;
  position: relative;
}
.header2 {
  background: #002354;
  padding: 16px 24px 16px 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.overview {
  color: #f5f7fa;
  text-align: left;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  flex: 1;
}
.body-1 {
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.tile {
  background: #f5f7fa;
  border-radius: 5px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  height: 280px;
  min-width: 148px;
  position: relative;
  overflow: hidden;
}
.material-symbols-check-circle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
}
.layout {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.auto-grade-gauge-4 {
  flex-shrink: 0;
  width: 131px;
  height: 131px;
  position: relative;
  overflow: hidden;
}
.vector {
  width: 97.81%;
  height: 97.81%;
  position: absolute;
  right: 1.05%;
  left: 1.14%;
  bottom: 0.79%;
  top: 1.4%;
  overflow: hidden;
}
.vector2 {
  width: 70.14%;
  height: 38.67%;
  position: absolute;
  right: 18.48%;
  left: 11.38%;
  bottom: 49.69%;
  top: 11.63%;
  overflow: hidden;
}
.rectangle {
  width: 12.67%;
  height: 13.08%;
  position: absolute;
  right: 43.61%;
  left: 43.72%;
  bottom: 66.76%;
  top: 20.16%;
  object-fit: cover;
}
.vector3 {
  width: 4.17%;
  height: 4.17%;
  position: absolute;
  right: 86.42%;
  left: 9.41%;
  bottom: 47.86%;
  top: 47.97%;
  overflow: hidden;
}
.vector4 {
  width: 4.17%;
  height: 4.17%;
  position: absolute;
  right: 78.68%;
  left: 17.15%;
  bottom: 71.06%;
  top: 24.77%;
  overflow: hidden;
}
.vector5 {
  width: 4.17%;
  height: 4.17%;
  position: absolute;
  right: 35.99%;
  left: 59.84%;
  bottom: 84.36%;
  top: 11.47%;
  overflow: hidden;
}
.vector6 {
  width: 4.17%;
  height: 4.17%;
  position: absolute;
  right: 59.91%;
  left: 35.92%;
  bottom: 84.36%;
  top: 11.47%;
  overflow: hidden;
}
.vector7 {
  width: 4.17%;
  height: 4.17%;
  position: absolute;
  right: 17.16%;
  left: 78.66%;
  bottom: 71.06%;
  top: 24.77%;
  overflow: hidden;
}
.auto-grade-score {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  width: 32.06%;
  height: 44.27%;
  position: absolute;
  right: 33.59%;
  left: 34.35%;
  bottom: 19.08%;
  top: 36.64%;
}
._4-0 {
  color: #121417;
  text-align: center;
  font-family: var(
    --heading-h3-highlight-font-family,
    "NunitoSans-ExtraBold",
    sans-serif
  );
  font-size: var(--heading-h3-highlight-font-size, 24px);
  line-height: var(--heading-h3-highlight-line-height, 26.4px);
  font-weight: var(--heading-h3-highlight-font-weight, 800);
  position: relative;
  align-self: stretch;
}
.clean {
  color: #2b2f33;
  text-align: center;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
}
.auto-grade {
  color: #121417;
  text-align: center;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
._4-02 {
  color: #2b2f33;
  text-align: center;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  align-self: stretch;
}
.material-symbols-check-circle2 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
}
.frame-754 {
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.engine-motor {
  flex-shrink: 0;
  width: 101px;
  height: 101px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.group {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.engine-start {
  color: #121417;
  text-align: center;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.yes {
  color: #2b2f33;
  text-align: center;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  align-self: stretch;
}
.moderate {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}
.ellipse-58 {
  background: var(--color-yello, #f4d35e);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 2px;
  top: 2px;
}
.frame-752 {
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.car-svgrepo-com-1-1 {
  flex-shrink: 0;
  width: 101px;
  height: 101px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.group2 {
  height: auto;
  position: absolute;
  left: 0px;
  top: 25.29px;
  overflow: visible;
}
.interior-2 {
  color: #121417;
  text-align: center;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.view {
  color: #005678;
  text-align: center;
  font-family: var(--small-bold-font-family, "NunitoSans-Bold", sans-serif);
  font-size: var(--small-bold-font-size, 14px);
  line-height: var(--small-bold-line-height, 19.6px);
  font-weight: var(--small-bold-font-weight, 700);
  text-decoration: underline;
  position: relative;
  align-self: stretch;
}
.car-svgrepo-com-2-1 {
  flex-shrink: 0;
  width: 101px;
  height: 101px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.group3 {
  height: auto;
  position: absolute;
  left: 6.62px;
  top: 0px;
  overflow: visible;
}
.exterior-18 {
  color: #121417;
  text-align: center;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.material-symbols-check-circle3 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.car-svgrepo-com-3-1 {
  flex-shrink: 0;
  width: 101px;
  height: 101px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.group4 {
  height: auto;
  position: absolute;
  left: 0px;
  top: 9.28px;
  overflow: visible;
}
.structural-components {
  color: #121417;
  text-align: center;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.na {
  color: #2b2f33;
  text-align: center;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  align-self: stretch;
}
.material-symbols-check-circle4 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-753 {
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.car {
  flex-shrink: 0;
  width: 101px;
  height: 101px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.group5 {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}
.runs-drives {
  color: #121417;
  text-align: center;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.damages-table {
  background: #ffffff;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 1440px;
  position: relative;
}
.inspection-results {
  color: #f5f7fa;
  text-align: left;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  flex: 1;
}
.back-to-top {
  color: #f5f7fa;
  text-align: left;
  font-family: var(--small-bold-font-family, "NunitoSans-Bold", sans-serif);
  font-size: var(--small-bold-font-size, 14px);
  line-height: var(--small-bold-line-height, 19.6px);
  font-weight: var(--small-bold-font-weight, 700);
  text-decoration: underline;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.body-2 {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.table-no-bs {
  padding: .0rem, .0rem;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 834px;
  position: relative;
}
.row3 {
  border-style: solid;
  border-color: #dde3e9;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  height: 55px;
  position: relative;
}

/* Update existing row styles to ensure proper alignment */
.row3, .row4 {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

/* Row hover effects for damage rows */
.row4:hover {
    background: #f2fafe !important;
    transition: background-color 0.2s ease;
}

.row4:hover .exhaust {
    backdrop-filter: blur(2px);
    transition: backdrop-filter 0.2s ease;
}

/* Ensure consistent cell behavior */
.cell-1, .cell-2, .cell-3, .cell-4,
.cell-12, .cell-22, .cell-32, .description-cell {
    box-sizing: border-box;
    overflow: hidden;
}

/* Default desktop column proportions - these will be overridden on smaller screens */
.row3 .cell-1, .row4 .cell-12 {
    flex: 1 1 30%;
}

.row3 .cell-4, .row4 .description-cell {
    flex: 1 1 15%;
}

.row3 .cell-2, .row4 .cell-22 {
    flex: 1 1 20%;
}

.row3 .cell-3, .row4 .cell-32 {
    flex: 1 1 35%;
}
.cell-1 {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex: 1;
  min-width: 269px;
  position: relative;
}
.title3 {
  color: #121417;
  text-align: left;
  font-family: var(
    --text-normal-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-normal-bold-font-size, 16px);
  line-height: var(--text-normal-bold-line-height, 22.4px);
  font-weight: var(--text-normal-bold-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mdi-unfold-more-horizontal {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.cell-4 {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  position: relative;
}
.mdi-unfold-more-horizontal2 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.cell-2 {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  min-width: 193px;
  position: relative;
}
.mdi-unfold-more-horizontal3 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.cell-3 {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  min-width: 219px;
  position: relative;
}
.mdi-unfold-more-horizontal4 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.row4 {
  background: rgba(255, 255, 255, 0.7);
  border-style: solid;
  border-color: #dde3e9;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease-in-out;
}

/* Row hover effects for damage rows */
.row4:hover {
    background: #f2fafe !important;
/*    transform: scale(1.005);
    transition: background-color 0.2s ease, transform 0.1s ease-in-out;*/
}

/*.row4:hover .exhaust {
    filter: brightness(1.05);
    transition: filter 0.2s ease;
}*/

/* Update image cursor since whole row is now clickable */
.exhaust {
    border-radius: 2px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    position: relative;
    object-fit: cover;
    aspect-ratio: 1;
    pointer-events: none; /* Prevent image from capturing click events */
}
.cell-12 {
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 269px;
  position: relative;
}
.title4 {
  color: #3a3f44;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.description-cell {
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.subtitle {
  color: #3a3f44;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.cell-22 {
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  min-width: 193px;
  position: relative;
}
.cell-32 {
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 219px;
  position: relative;
}
.status {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  aspect-ratio: 1;
}
.status-damage-green {
  background: var(--color-green, #4caf50);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.exhaust2 {
  border-radius: 2px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  position: relative;
  object-fit: cover;
}
.cell-33 {
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  height: 43px;
  min-width: 219px;
  position: relative;
}
.status-damage-red {
  background: var(--color-red, #e63946);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.status-damage-yellow {
  background: var(--color-yello, #f4d35e);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.cell-13 {
  padding: 10px 16px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  min-width: 269px;
  position: relative;
}
.row5 {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 0px 0px 1px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.exhaust3 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  position: relative;
  object-fit: cover;
}
.section2 {
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 1440px;
  position: relative;
}
.tire-condition {
  color: #f5f7fa;
  text-align: left;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  flex: 1;
}
.hor-layout {
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.left-vert-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  width: 189px;
  height: 366px;
  position: relative;
}
.tire-description {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.location {
  color: #121417;
  text-align: left;
  font-family: var(
    --text-normal-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-normal-bold-font-size, 16px);
  line-height: var(--text-normal-bold-line-height, 22.4px);
  font-weight: var(--text-normal-bold-font-weight, 700);
  position: relative;
}
.text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.manufacturer {
  color: #2b2f33;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
}
.tire-size {
  color: #2b2f33;
  text-align: left;
  font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
  font-size: var(--text-normal-font-size, 16px);
  line-height: var(--text-normal-line-height, 22.4px);
  font-weight: var(--text-normal-font-weight, 500);
  position: relative;
}
.mid-vert-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.tire-diagram {
  flex-shrink: 0;
  width: 226px;
  height: 366px;
  position: relative;
}
.blue-car-1 {
  width: 225.87px;
  height: 366px;
  position: absolute;
  left: 0px;
  top: 0px;
  object-fit: cover;
  aspect-ratio: 225.87/366;
}
.front-left {
    background: var(--color-gray-2, #e0e0e0);
    border-radius: 5px;
/*    width: 22px;
    height: 54px;*/
    position: absolute;
    left: 44px;
    top: 54px;
}
.front-right {
    background: var(--color-gray-2, #e0e0e0);
    border-radius: 5px;
/*    width: 22px;
    height: 54px;*/
    position: absolute;
    left: 162px;
    top: 54px;
}
.rear-right {
    background: var(--color-gray-2, #e0e0e0);
    border-radius: 5px;
/*    width: 22px;
    height: 54px;*/
    position: absolute;
    left: 162px;
    top: 256px;
}
.spare {
    background: var(--color-gray-2, #e0e0e0);
    border-radius: 5px;
/*    width: 22px;
    height: 54px;*/
    position: absolute;
    left: 86px;
    top: 366px;
    transform-origin: 0 0;
    transform: rotate(-90deg) scale(1, 1);
}
.rear-left {
    background: var(--color-gray-2, #e0e0e0);
    border-radius: 5px;
/*    width: 22px;
    height: 54px;*/
    position: absolute;
    left: 41px;
    top: 256px;
}
.tread-key-layout {
  padding: 8px 16px 8px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.tread-status {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.status5 {
  background: var(--color-green, #4caf50);
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  aspect-ratio: 1;
}
.description2 {
  color: #3a3f44;
  text-align: left;
  font-family: var(--text-small-font-family, "NunitoSans-Regular", sans-serif);
  font-size: var(--text-small-font-size, 14px);
  line-height: var(--text-small-line-height, 19.6px);
  font-weight: var(--text-small-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-24 {
  margin-top: -1px;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 22px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.status6 {
  background: var(--color-yello, #f4d35e);
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  aspect-ratio: 1;
}
.line-25 {
  margin-top: -1px;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 22px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.status7 {
  background: var(--color-red, #e63946);
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  aspect-ratio: 1;
}
.line-26 {
  margin-top: -1px;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 22px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.status8 {
  background: #dde3e9;
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  aspect-ratio: 1;
}
.right-vert-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  width: 189px;
  height: 366px;
  position: relative;
}
.tire-description2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.text2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.se-section {
  background: #ffffff;
  border-style: solid;
  border-color: #dde3e9;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  max-width: 1440px;
  position: relative;
}
.standard-equipment {
  color: #f5f7fa;
  text-align: left;
  font-family: var(
    --text-large-bold-font-family,
    "NunitoSans-Bold",
    sans-serif
  );
  font-size: var(--text-large-bold-font-size, 20px);
  line-height: var(--text-large-bold-line-height, 28px);
  font-weight: var(--text-large-bold-font-weight, 700);
  position: relative;
  flex: 1;
}
.title5 {
    color: #2b2f33;
    text-align: left;
    font-family: var(--text-normal-bold-font-family, "NunitoSans-Bold", sans-serif);
    font-size: var(--text-normal-bold-font-size, 16px);
    line-height: var(--text-normal-bold-line-height, 22.4px);
    font-weight: var(--text-normal-bold-font-weight, 700);
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.contents-2-span {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
    margin-bottom: 0;
    color: #3a3f44;
    font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
    font-size: var(--text-normal-font-size, 16px);
    line-height: var(--text-normal-line-height, 22.4px);
}

.contents-2-span li {
    margin-bottom: 4px;
    line-height: 1.4;
}

/* Equipment section styles */
.body-12 {
    padding: 24px;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.equipment-columns {
    display: flex;
    gap: 32px;
    width: 100%;
    align-items: flex-start;
}

.equipment-column {
    flex: 1;
    width: 50%;
    min-width: 0;
    max-width: calc(50% - 16px);
}

.se-category {
    margin-bottom: 24px;
    width: 100%;
}

.se-category:not(:first-child) .title5 {
    margin-top: 16px;
}

/* ===============================================
   RESPONSIVE STYLES
   =============================================== */

/* Responsive layout for damages table */
@media (max-width: 1036px) {
    /* Damage table responsive fixes */
    .damages-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .body-2 {
        width: 100%;
        padding: 16px;
        overflow-x: auto;
    }

    .table-no-bs {
        min-width: 800px;
        width: 800px;
        display: block;
    }

    #damages-table {
        min-width: 800px;
        width: 800px;
        display: block;
    }

    /* Force consistent widths for all table rows */
    .row3, .row4 {
        display: flex;
        flex-direction: row;
        width: 800px;
        min-width: 800px;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Header cells with fixed widths */
    .row3 .cell-1 {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    .row3 .cell-4 {
        flex: 0 0 140px;
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }

    .row3 .cell-2 {
        flex: 0 0 180px;
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    .row3 .cell-3 {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    /* Content cells matching header widths exactly */
    .row4 .cell-12 {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .row4 .description-cell {
        flex: 0 0 140px;
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .row4 .cell-22 {
        flex: 0 0 180px;
        width: 180px;
        min-width: 180px;
        max-width: 180px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .row4 .cell-32 {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
        padding: 8px 12px;
        box-sizing: border-box;
    }
}

/* Responsive layout for top-section-2 and other elements */
@media (max-width: 768px) {
    .vertical-layout {
        padding: 0px 16px 32px 16px; /* Reduce side padding on mobile */
    }
    
    .top-section-2 {
        flex-direction: column;
        gap: 16px;
        border-style: solid;
        border-color: #dde3e9;
        border-width: 1px;
        /* Match styling of other sections */
    }
    
    .carousel-cr {
        min-width: unset; /* Remove fixed min-width */
        width: 100%;
        order: 1; /* Image carousel first on mobile */
    }
    
    .content {
        min-width: unset; /* Remove fixed min-width */
        width: 100%;
        height: auto; /* Allow height to be flexible */
        order: 2; /* Content second on mobile */
    }
    
    .horizontal-layout {
        height: auto; /* Remove fixed height */
        gap: 8px;
    }
    
    .vin, .stock {
        flex: 1;
        min-width: unset;
        justify-content: center;
    }

    /* Equipment responsive layout */
    .equipment-columns {
        flex-direction: column;
        gap: 24px;
    }

    .equipment-column {
        width: 100%;
        max-width: 100%;
    }

    .se-category {
        margin-bottom: 16px;
    }

    .contents-2-span {
        margin-left: 16px;
    }

    .body-12 {
        padding: 16px;
    }
}

/* Extra small screens (616px and below) */
@media (max-width: 616px) {
    .vertical-layout {
        padding: 0px 8px 16px 8px; /* Further reduce padding */
    }
    
    .top-section-2 {
        gap: 12px;
    }
    
    ._2022-toyota-corolla {
        font-size: 24px; /* Reduce heading size */
        line-height: 28px;
    }
    
    .horizontal-layout {
        flex-direction: column; /* Stack VIN and Stock vertically */
        align-items: stretch;
        gap: 8px;
    }
    
    .vin, .stock {
        width: 100%;
        justify-content: flex-start;
    }
    
    .vin2, .stock2 {
        font-size: 14px; /* Smaller text */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .label {
        font-size: 12px; /* Smaller labels */
        /*width: 80px;*/ /* Reduce label width */
    }
    
    .content2 {
        font-size: 14px; /* Smaller content text */
    }
    
    .carousel-image-container {
        height: 300px; /* Reduce image container height */
    }
    
    /* Make top bar more mobile friendly */
    .condition-report-crstream .top-bar {
        padding: 20px 16px;
    }
    
    .title {
        font-size: 24px;
        line-height: 28px;
    }
    
    .provided-by {
        font-size: 16px;
    }
}

/* Very small screens (480px and below) */
@media (max-width: 480px) {
    .vertical-layout {
        padding: 0px 4px 12px 4px;
    }
    
    ._2022-toyota-corolla {
        font-size: 20px;
        line-height: 24px;
    }
    
    .label {
        font-size: 15px;
        /*width: 70px;*/
    }
    
    .content2 {
        font-size: 15px;
    }
    
    .carousel-image-container {
        height: 250px;
    }
    
    .condition-report-crstream .top-bar {
        padding: 16px 8px;
    }
    
    .title {
        font-size: 20px;
        line-height: 24px;
    }
    
    .provided-by {
        font-size: 14px;
    }
    
    .condition-reports-logo-white {
        width: 90px;
        height: 16px;
    }

    /* Adjust damage table for very small screens */
    .table-no-bs, #damages-table {
        min-width: 700px;
        width: 700px;
    }

    .row3, .row4 {
        width: 700px;
        min-width: 700px;
    }

    /* Smaller column widths for mobile */
    .row3 .cell-1, .row4 .cell-12 {
        flex: 0 0 200px;
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }

    .row3 .cell-4, .row4 .description-cell {
        flex: 0 0 120px;
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    .row3 .cell-2, .row4 .cell-22 {
        flex: 0 0 160px;
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }

    .row3 .cell-3, .row4 .cell-32 {
        flex: 0 0 220px;
        width: 220px;
        min-width: 220px;
        max-width: 220px;
    }
}

/* ── Vehicle Title & Trim ──────────────────────── */
.vehicle-title-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    align-self: stretch;
}

.vehicle-title-ymm {
    color: #121417;
    font-family: var(--heading-h2-font-family, "NunitoSans-ExtraBold", sans-serif);
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
}

.vehicle-title-trim {
    color: #2b2f33;
    font-family: var(--heading-h3-font-family, "NunitoSans-Bold", sans-serif);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

/* ── ACV Tire UI Section ────────────────────────── */
.tire-section-acv {
    background: #ffffff;
}

.tire-section-acv .f-row {
    background: #ffffff;
    padding: 16px 20px;
    align-items: center !important;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.legend-dot.green-dot { background-color: #20942e; }
.legend-dot.yellow-dot { background-color: #ffc200; }
.legend-dot.red-dot { background-color: #cb0000; }
.legend-dot.blue-dot { background-color: #1e78ff; }

.colored-bullets li {
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    color: #2b2f33;
    line-height: 1.8;
}

.table-tires {
    background: #FFFFFF;
    width: 100%;
}

.table-tires table {
    background: #FFFFFF;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

.table-tires table tr {
    background: #FFFFFF;
    border: none !important;
}

.table-tires table tr th, 
.table-tires table tr td {
    background: #FFFFFF !important;
    padding: 8px 10px;
    font-size: 13px;
    border: none !important;
    vertical-align: middle;
}

.table-tires table thead tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

.table-tires table th {
    background: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    color: #121417;
    border: none !important;
}

.table-tires table td.fw-bold {
    font-weight: 700;
    color: #121417;
}