/* =========== */
.card__wrap .main .card__img {
  width: 90%;
  margin-top: 0;
}

.text-confirm-answer {
  color: gray;
  font-size: 17px;
  text-align: center;
  width: 100%;
  margin: 5px 0 5px 0;
  height: 20px;
}
/* .text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
} */
.for-float-wrapper .card__text {
  text-align: start;
  margin-top: 12px;
  margin-bottom: 30px;
  transition: all 250ms;
  font-size: 18px;
}
.markup-interactive {
  width: 88%;
  height: max-content;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__wrap-blocked .card__text-explanations {
  margin-top: 6%;
}
.card__wrap-blocked .dot,
.card__wrap-blocked #drawingCanvas {
  opacity: 0;
}

.card__wrap .main {
  flex-wrap: wrap;
  position: relative;
  user-select: none;
  -webkit-user-select: none; /* Для iOS */
  -ms-user-select: none; /* Для IE/Edge */
}
.dots-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}
.dot {
  width: 7vw;
  height: 7vw;
  background: #ff000021;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
}
@media screen and (min-width: 436px) {
  .dot {
    width: 26px;
    height: 26px;
  }
}
.dot.a {
  top: 9.2%;
  left: 28.4%;
}
.dot.b {
  top: 9.2%;
  left: 55%;
}
.dot.c {
  top: 9.2%;
  left: 81.8%;
}
.dot.d {
  top: 35.8%;
  left: 81.8%;
}
.dot.e {
  top: 62.4%;
  left: 81.8%;
}
.dot.f {
  top: 72.8%;
  left: 73.2%;
}
.dot.g {
  top: 83%;
  left: 64.6%;
}
.dot.h {
  top: 83%;
  left: 37.6%;
}
.dot.i {
  top: 83%;
  left: 10.4%;
}
.dot.j {
  top: 56.2%;
  left: 10.4%;
}
.dot.k {
  top: 29.6%;
  left: 10.4%;
}
.dot.l {
  top: 19.4%;
  left: 19.4%;
}
.dot.m {
  top: 29.6%;
  left: 37.6%;
}
.dot.n {
  top: 19.4%;
  left: 73.4%;
}
.dot.o {
  top: 56.2%;
  left: 64.6%;
}
.dot.p {
  top: 29.6%;
  left: 64.6%;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}
.hexagon {
  width: 50px;
}
.letters {
  /* margin-left: 10px; */
  font-size: 20px;
  text-transform: uppercase;
  transition: all 250ms;
}
.letters.margin {
  margin-left: 10px;
  transition: all 250ms;
  /* font-size: 20px;
  text-transform: uppercase; */
}
.letters span {
  margin-right: 3px;
  transition: all 250ms;
}
.card__wrap-blocked .markup-interactive {
  display: none;
}