@charset "UTF-8";

/*Переменные и миксины*/

/*Миксины*/

.anketa {
  gap: 64px;
}

.anketa__form {
  width: calc((((100vw - (120px * 2)) + 64px) / 12 * 9) - 64px);
}

.anketa__help {
  padding: 32px;
  background: #3e3e3c;
  margin-top: 38px;
  width: calc((((100vw - (120px * 2)) + 64px) / 12 * 3) - 64px);
}

.help-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: var(--black);
  opacity: 0.5;
}

.shkal {
  margin-bottom: 32px;
}

.shkal:last-child {
  margin-bottom: 0;
}

.shkal .star {
  cursor: auto;
}

.shkal__title {
  margin-bottom: 8px;
}

.form__star-block .placeholder {
  padding-right: 24px;
  position: relative;
}

.anketa__help-ico {
  display: none;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 0px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url("../img/icons/help.svg") center center/contain no-repeat;
  cursor: pointer;
}

.white-page .anketa__help {
  background-color: var(--black4);
}

.white-page .shkal__title {
  color: var(--black);
}

@media (max-width: 1490px) {
  .anketa {
    gap: 32px;
  }

  .anketa__form {
    width: calc((((100vw - (120px * 2)) + 32px) / 12 * 9) - 32px);
  }

  .anketa__form {
    width: calc((((100vw - (64px * 2)) + 64px) / 12 * 8) - 64px);
  }

  .anketa__help {
    width: calc((((100vw - (120px * 2)) + 32px) / 12 * 3) - 32px);
  }

  .anketa__help {
    width: calc((((100vw - (64px * 2)) + 64px) / 12 * 4) - 64px);
  }
}

@media (max-width: 1490px) and (max-width: 1490px) {
  .anketa__form {
    width: calc((((100vw - (64px * 2)) + 32px) / 12 * 8) - 32px);
  }

  .anketa__help {
    width: calc((((100vw - (64px * 2)) + 32px) / 12 * 4) - 32px);
  }
}

@media (max-width: 950px) {
  .anketa__form {
    width: 100%;
  }

  .anketa__help {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 11;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 300px;
    margin: 0;
    overflow: hidden auto;
    max-height: 80vh;
  }

  .anketa__help-ico {
    display: block;
  }
}

@media (max-width: 700px) {
  .anketa__help {
    padding: 20px;
  }

  .shkal {
    margin-bottom: 16px;
  }
}