@font-face {
  font-family: Fira Mono;
  src: url(./FiraMono-Medium-C0X91SFH.eot);
  src: local("Fira Mono Medium"), local("FiraMono-Medium"),
    url(./FiraMono-Medium-C0X91SFH.eot) format("embedded-opentype"),
    url(./FiraMono-Medium-D8khClEM.woff2) format("woff2"),
    url(./FiraMono-Medium-DWk_VWcc.woff) format("woff"),
    url(/assets/fonts/FiraMono-Medium.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Fira Mono;
  src: url(./FiraMono-Medium-C0X91SFH.eot);
  src: local("Fira Mono Medium"), local("FiraMono-Medium"),
    url(./FiraMono-Medium-C0X91SFH.eot) format("embedded-opentype"),
    url(./FiraMono-Medium-D8khClEM.woff2) format("woff2"),
    url(./FiraMono-Medium-DWk_VWcc.woff) format("woff"),
    url(/assets/fonts/FiraMono-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Fira Mono;
  src: url(./FiraMono-Bold-B65ijyhD.eot);
  src: local("Fira Mono Bold"), local("FiraMono-Bold"),
    url(./FiraMono-Bold-B65ijyhD.eot) format("embedded-opentype"),
    url(./FiraMono-Bold-DShqyf6i.woff2) format("woff2"),
    url(./FiraMono-Bold-UatUhD4c.woff) format("woff"),
    url(./FiraMono-Bold-Bn4uj1nk.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
}
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

html {
  background: none;
}

body {
  color: #ffffff;
  background: white;
  margin: 0;
  padding: 0;
}

.elements-list {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  height: auto;
  list-style: none;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  opacity: 0.9;
  color: rgb(70, 69, 69);
  font-size: 12px;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.cam-pos {
  /* position: absolute;
right: 0; */
  padding-right: 15px;
}

.cam-data {
  /* position: absolute;
right: 0; */
  top: 50px;
}

.point {
  position: absolute;
}

.label {
  position: relative;
  display: none;
  opacity: 0;
}

.label--active {
  opacity: 1;
}

.label--active::after {
  content: url("cross.svg");
  position: absolute;
  bottom: 35px;
  right: -25px;
}

.point:hover .label {
  opacity: 1;
}

.point:hover .label {
  opacity: 1;
}

/* .point.visible .label
{
  opacity: 1;
} */

/* .point.visible .label
{
  opacity: 1;

} */

.point.visible .label {
  transform: scale(1, 1);
}

.point.visible .label {
  transform: scale(1, 1);
}

.visible {
  transform: scale(1, 1);
}

.point {
  /* width: 8px;
  height: 8px; */
  border-radius: 5px;
  opacity: 0;
}

.point--visible {
  opacity: 1;
}

.svg-line {
  transition: all 0.25s ease;
}

.line-wrap {
  position: absolute;
  top: 0;
  right: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.text-wrap {
  width: 210px;
  position: relative;
}

.text {
  box-sizing: border-box;
  transition: all 0.25s ease;
  background: RGBA(255, 255, 255, 0.4);
  height: 0;
  overflow: hidden;
  padding-left: 15px;
  z-index: 100;
}

.text-content {
  position: relative;
  display: flex;
  font-family: Fira Mono, monospace, sans-serif;
  font-size: 17px;
  font-weight: 400;
  min-width: 250px;
  max-width: 250px;
  /* height: auto; */
  /* background-color: #00000010;
  -webkit-backdrop-filter: blur(20px); */
  backdrop-filter: blur(20px);
  padding-top: 20px;
  padding-bottom: 20px;
  z-index: 1;
  height: 50px;
  transition: all 1s ease-in-out;
}

.hide {
  display: none;
  height: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.nulled {
  border-top: none !important;
  width: 0;
}

.text-content-left {
  justify-content: flex-start;
  text-align: right;
}

.text-content-right {
  align-items: end;
  justify-content: right;
  text-align: right;
}

ul {
  margin-top: 5px;
  padding-left: 15px;
}

li {
  text-indent: 0px;
}

.text p {
  margin-top: 5px;
}

.text-title {
  position: absolute;
  padding-top: 0px;
  padding-bottom: 20px;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  border-top: 1px solid rgba(218, 131, 240, 1);
  height: min-content;
  pointer-events: none;
  z-index: 2;
}

/* @media (max-width: 900px) {
  .text-title {
    display: none;
  }
} */

.title-button {
  position: absolute;
  text-align: center;
  color: white;
  top: -9px;
  width: 16px;
  height: 16px;
  background: rgba(122, 55, 153, 1);
  border-radius: 10px;
  border: none;
  pointer-events: all;
  cursor: pointer;
  z-index: 1;
  /* -webkit-box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.5); */
}

.title-button:hover {
  cursor: pointer;
}

.title-button--active {
  border: 1px solid black;
}

.text--visible {
  /* height: 450px; */
  height: fit-content;
  max-height: fit-content;
  transition: all 0.5s ease;
}
.text--visible:hover {
  z-index: 100;
}

.text_active {
}

.text_right {
  display: flex;
  justify-content: end;
  right: 0px;
}

.text_left {
  display: flex;
  justify-content: start;
  left: 0px;
}

.text--mobile {
  height: 0;
  overflow: hidden;
  padding: 0;
}

.close {
  position: absolute;
  top: 4px;
  right: 0px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background-image: url(cross.svg);
  background-repeat: no-repeat;
  z-index: 200;
}
.close-pointer {
  /* position: absolute; */
  top: 4px;
  right: 0px;
  width: 100%;
  height: 25px;
  cursor: pointer;
  background-image: url(cross.svg);
  background-repeat: no-repeat;
  background-position: 100%;
  z-index: 200;
}

.line {
  opacity: 0;
  pointer-events: none;
}

.line--visible {
  opacity: 1;
}

.container-webgl {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.preloader-wrap {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ��������� ������ canvas */

.model-container--active {
  display: flex;
}

.model-container {
  /* box-sizing: border-box;
position: relative; */
  /* height: 100vh; */
  /* height: 100%;
width: 100%; */
  /* margin-top: 15px; */
  /* display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
padding: 0;
overflow: hidden; */
}
/* 
.model-container:hover {
cursor: grab;
} */

.controls-helper {
  position: absolute;
  top: 0;
  left: 0;
}

.controls {
  display: none;
  position: absolute;
  /* top: calc(100vh - 5px); */
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* height: 100%; */
  height: 35px;
  margin-left: auto;
  margin-right: auto;
}

.controls-wrap {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 25px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 900px;
}

.controls-wrap button {
  flex-basis: 100%;
  padding: 5px 5px;
  background-color: #008f86;
  border: none;
  border-radius: 6px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.controls-wrap button:hover {
  background-color: #ffeb9a;
}

.rotate-left,
.rotate-right {
  background: none;
  border: none;
  display: flex;
  height: 100%;
  width: auto;
}

.nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 25px;
  width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  list-style: none;
  color: inherit;
  font-family: inherit;
  font-weight: 100;
  font-size: 24px;
}

.nav-list li {
  cursor: pointer;
}

.col--center {
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: left;
  padding-left: 2rem;
  pointer-events: none;
}

.col--center-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.preloader {
  display: block;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 30px auto;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ffcb04;
  animation: preloader-5-spin 2s linear infinite;
}
.preloader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000000;
  animation: preloader-5-spin 3s linear infinite;
}
.preloader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ffcb04;
  animation: preloader-5-spin 1.5s linear infinite;
  -webkit-animation: preloader-5-spin 1.5s linear infinite;
}

.ended {
  display: none;
}

@keyframes preloader-5-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wrap-flex {
  display: flex;
  flex-direction: row;
  /* overflow: scroll; */
}
.img-wrap {
  width: 100%;
}

.img-wrap img {
  width: 100%;
  /* height: 200px; */
  object-fit: contain;
}

.text-table {
  border: 1px solid #ddd;
  padding: 0;
  border-collapse: collapse;
  font-size: 10px;
}

.text-table td {
  border: 1px solid #ddd;
  /* width: 80px; */
}

.text-ul {
  padding: 15px;
}

.buttons-wrap {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
}

.row {
  display: none;
}
.col {
  position: absolute;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  height: 100%;
  /* display: flex; */
  flex-direction: column;
  justify-content: space-evenly;
}

.col--left {
  left: 0;
  top: 0;
  text-align: left;
  padding-left: 2rem;
}

.col--right {
  right: 5px;
  top: 0;
  text-align: right;
  padding-right: 2rem;
}

.row {
  position: relative;
  width: 100%;
  height: 100%;
}

.col--left-wrap {
  position: relative;
  height: 100%;
  z-index: 1;
}

.col--right-wrap {
  position: relative;
  height: 100%;
  z-index: 1;
}

.webgl {
  position: relative;
  top: 0;
  left: 0;
  /* display: none; */
}

.driver {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 400px;
  line-height: 1;
  /* font-size: clamp(8rem, -.25rem + 12vw, 18rem); */
  font-size: 84px;
  left: 2rem;
  bottom: 2rem;
  transition: all 0.5s ease-in-out;
}

.drvier-row {
  font-size: 64px;
  flex-direction: row;
  /* display: block; */
  /* max-width: unset;
  width: 100%; */
  transition: all 0.5s ease-in-out;
}

.driver small {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  padding-left: 15px;
}

.button-wrap {
  width: 100%;

  margin: auto;
  position: absolute;
  top: 50%;
  left: 0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

.load-model {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  gap: 10px;
  background: rgb(0, 143, 134);
  color: #ffffff;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  float: none;
  text-transform: inherit;
  margin-bottom: 10px;
  border: none;
}

.load-model:hover {
  background: #9f0412;
}

.load-model-img {
  /* height: 38px;
  width: 38px; */
}

.preloader {
  display: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  /* background: conic-gradient(
    from -21.78deg at 51.46% 62.67%,
    #0c0c0c 0deg,
    #0c0c0c 48.6deg,
    #0c0c0c 102.05deg,
    #342b5f 121.82deg,
    #2c1230 132.34deg,
    #2c1230 183.86deg,
    #512a57 208.42deg,
    #2c1230 258.35deg,
    #0c0c0c 360deg
  ); */
  align-items: center;
}

/* 
.product-page__content {
  width: 936px;
  min-width: 264px !important;
  vertical-align: top;
  position: relative;

}
@media (max-width: 1010px) {
  .product-page__content {
    width: auto;

  }
} */

@media (min-width: 900px) {
  .product-page__content {
    --image-max-width: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--container-padding-v)
      max(var(--container-padding-h), (100vw - var(--container-inner)) / 2);
  }
}

.container-display__point-label {
  transition: opacity 0.1s;
  opacity: 1;
  white-space: pre-wrap;
  font-family: Fira Mono, monospace, sans-serif;
  font-weight: 400;
}

.container-display__point {
  position: absolute;
  transition: all 0.1s, top 0s;
  --diam-max: 3rem;
  --diam: min(4vh, 4vw, var(--diam-max));
  --diam-half: calc(var(--diam) / -2);
  --diam-pad: calc(var(--diam) / 8);
  --diam-epad: calc(var(--diam) * 0.8);
  pointer-events: none;
}

.container-display__point-corner {
  position: absolute;
  width: var(--diam);
  height: var(--diam);
  color: #00d1ff;
  bottom: var(--diam-half);
  border: none;
  border-radius: 100px;
  background: transparent;
  padding: var(--diam-pad);
}

@media (min-width: 900px) {
  .container {
    --container-padding-v: 4rem;
    --container-padding-h: 4rem;
    position: relative;
    min-height: max(var(--viewport-height), 40vw);
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }

  .container-display__point--active .container-display__point-content {
    max-width: 30rem;
  }
}

@media (max-width: 900px) {
  .controls-wrap {
    flex-direction: column;
    gap: 15px;
    padding-top: 15px;
    width: 100%;
  }

  .controls-wrap button {
    min-height: 35px;
  }

  .container {
    width: 100vw;
  }

  .text {
    font-size: 10px;
  }

  .col {
    position: absolute;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .col--left {
    display: none;
  }

  .col--right {
    display: none;
  }

  .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 35px;
    height: 35px;
  }
}