.modal.bothelper {
      max-width: 1200px;
      width: 100%;
      padding: 18px 18px 35px 18px;
  }

  .modal.bothelper.ended {
      max-width: 930px;
  }

  .quizblock {
      background-color: #fff;
  }

  .quizblock .modal.bothelper {
      display: block !important;
  }

  .bothelper {
      transition: max-width 0.2s ease;
  }

  .bothelper.started .bothelper__base-head {
      display: none;
      animation: bothelper-anim 0.2s ease;
  }

  .bothelper.ended {
      transition: max-width 0.2s ease;
  }

  .bothelper.ended .bothelper__side {
      display: none;
      animation: bothelper-anim 0.2s ease;
  }

  .bothelper.ended .bothelper__base-status {
      display: none;
      animation: bothelper-anim 0.2s ease;
  }

  .bothelper__inner {
      display: flex;
      flex-direction: column-reverse;
      gap: 40px 90px;
  }

  .bothelper__base {
      flex: 1 300px;
      width: 100%;
  }

  .bothelper__base-head {
      margin-bottom: 40px;
      animation: bothelper-anim 0.2s ease;
  }

  .bothelper__base-head h1 {
      font-size: 24px;
      color: #1F1F1F;
      margin-bottom: 15px;
  }

  .bothelper__base-head p {
      font-size: 14px;
      line-height: normal;
      max-width: 554px;
      color: #1f1f1f;
  }

  .bothelper__side {
      border-radius: 10px;
      overflow: hidden;
      background-color: #F5F6F7;
      padding: 40px 27px;
      animation: bothelper-anim 0.2s ease;
  }

  .bothelper__sideauthor {
      position: relative;
      display: flex;
      align-items: center;
      gap: 20px;
      z-index: 0;
  }

  .bothelper__sideauthor.online .bothelper__sideauthor-img {
      position: relative;
  }

  .bothelper__sideauthor.online .bothelper__sideauthor-img::after {
      position: absolute;
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #86BF0B;
      outline: 3px solid #fff;
      right: 18px;
      bottom: 0;
      z-index: 1;
  }

  .bothelper__sideauthor-img {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      width: 93px;
      height: 93px;
      border-radius: 50%;
      outline: 5px solid rgba(0, 0, 0, 0.05);
  }

  .bothelper__sideauthor-img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      border-radius: 50%;
  }

  .bothelper__sideauthor-name {
      font-size: 15px;
      font-weight: 600;
      color: #000;
      line-height: 20px;
  }

  .bothelper__sideauthor-position {
      font-size: 12px;
      font-weight: 300;
      color: #000;
      margin-bottom: 5px;
  }

  .bothelper__sideauthor-phone {
      font-size: 12px;
      font-weight: bold;
      color: #3E86F6;
      -webkit-text-decoration: underline 1px transparent;
      text-decoration: underline 1px transparent;
      transition: -webkit-text-decoration 0.2s ease;
      transition: text-decoration 0.2s ease;
      transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
  }

  .bothelper__sidehint {
      position: relative;
      margin-top: 40px;
      background-color: #fff;
      color: #55595C;
      padding: 16px 20px;
      border-radius: 8px;
  }

  .bothelper__sidehint::after {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 21px 15px;
      border-color: transparent transparent #ffffff transparent;
      top: -21px;
      left: 35px;
  }

  .bothelper__base-opts {
      margin-top: 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
  }

  .bothelper-step {
      display: none;
      animation: bothelper-anim 0.2s ease;
  }

  .bothelper-step[data-skip="false"] .skip-hint {
      display: none !important;
  }

  .bothelper-step.current-step {
      display: block;
      animation: bothelper-anim 0.2s ease;
  }

  @keyframes bothelper-anim {
      0% {
          opacity: 0;
      }

      100% {
          opacity: 1;
      }
  }

  .step-head {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 22px;
  }

  .step-title {
      font-size: 18px;
      font-weight: 600;
      color: #1f1f1f;
      text-transform: uppercase;
  }

  .skip-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      overflow: hidden;
      font-size: 12px;
      line-height: normal;
      font-weight: 600;
      color: #fff;
      background-color: #B0C1CE;
      padding: 10px 20px;
  }

  .step-vars {
      display: flex;
      flex-wrap: wrap;
      gap: 17px;
  }

  input[name=otdstyle_my] {
      max-width: 348px;
      flex: 1 100%;
      display: flex;
      align-items: center;
      border-radius: 10px;
      background-color: #F5F6F7;
      padding: 21.5px 26px;
      font-size: 14px;
      font-weight: 500;
      color: #1f1f1f;
      cursor: pointer;
      line-height: normal;
      overflow: hidden;
      width: 100%;
  }

  label.step-radio {
      display: flex;
      flex: 1 100%;
      max-width: 348px;
  }

  label.step-radio input[type=radio] {
      position: absolute;
      opacity: 0;
      left: 0;
  }

  label.step-radio input[type=radio]:checked+span {
      background-color: #3E86F6;
      color: #fff;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNDM0MzEgMTEuMjA0MUwwLjIzNDMwNSA2LjIyMzI1Qy0wLjA3ODEwMTYgNS45MjQwMSAtMC4wNzgxMDE2IDUuNDM4ODMgMC4yMzQzMDUgNS4xMzk1NkwxLjM2NTY1IDQuMDU1ODZDMS42NzgwNiAzLjc1NjU5IDIuMTg0NjIgMy43NTY1OSAyLjQ5NzAzIDQuMDU1ODZMNiA3LjQxMTE4TDEzLjUwMyAwLjIyNDQzMUMxMy44MTU0IC0wLjA3NDgxMDIgMTQuMzIxOSAtMC4wNzQ4MTAyIDE0LjYzNDQgMC4yMjQ0MzFMMTUuNzY1NyAxLjMwODEzQzE2LjA3ODEgMS42MDczNyAxNi4wNzgxIDIuMDkyNTUgMTUuNzY1NyAyLjM5MTgyTDYuNTY1NjkgMTEuMjA0MUM2LjI1MzI1IDExLjUwMzQgNS43NDY3MiAxMS41MDM0IDUuNDM0MzEgMTEuMjA0MVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
      background-repeat: no-repeat;
      background-position: right 20px center;
      background-size: 16px 12px;
  }

  label.step-radio span {
      display: flex;
      align-items: center;
      border-radius: 10px;
      background-color: #F5F6F7;
      padding: 17px 42px 17px 20px;
      font-size: 14px;
      font-weight: 500;
      line-height: normal;
      color: #1f1f1f;
      cursor: pointer;
      line-height: normal;
      overflow: hidden;
      width: 100%;
  }

  label.step-imageradio {
      position: relative;
      display: flex;
      max-width: 262px;
  }

  label.step-imageradio input[type=radio] {
      position: absolute;
      opacity: 0;
      left: 0;
  }

  label.step-imageradio input[type=radio]:checked+figure {
      background-color: #3E86F6;
  }

  label.step-imageradio input[type=radio]:checked+figure figcaption {
      color: #fff;
  }

  label.step-imageradio figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 9px;
      overflow: hidden;
      gap: 18px;
  }

  label.step-imageradio figure img {
      max-width: 262px;
      max-height: 178px;
      border-radius: 9px;
      overflow: hidden;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
  }

  label.step-imageradio figure figcaption {
      font-size: 15px;
      line-height: normal;
      width: calc(100% - 24px);
      text-align: center;
  }

  .bothelper__base-status {
      margin-top: 30px;
  }

  .progress-status {
      display: flex;
      flex-direction: column;
      gap: 7px;
      animation: bothelper-anim 0.2s ease;
  }

  .progress-status span.progress-text {
      text-align: right;
      font-size: 11px;
      color: #838D9A;
      line-height: 1;
  }

  .progress-line {
      position: relative;
      width: 100%;
      height: 6px;
      background: #F6F7F9;
      border-radius: 100px;
  }

  .progress-line::after {
      --pgPercentage: var(--value);
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: calc(var(--pgPercentage) * 1%);
      height: 100%;
      background: linear-gradient(90deg, rgb(180, 101, 218) 0%, rgb(207, 108, 201) 35%, rgb(238, 96, 156) 67%, rgb(238, 96, 156) 100%);
      border-radius: 100px;
      max-width: 100%;
      overflow: hidden;
      transition: width 0.2s ease;
  }

  .step-next {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 28px;
      font-weight: 600;
      color: #fff;
      background-color: #7B95D2;
      padding: 10px 75px 10px 40px;
      border-radius: 5px;
      overflow: hidden;
      margin-left: auto;
      background-repeat: no-repeat;
      background-position: right 40px center;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxOSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjU2IDE1TDEwLjA4IDEzLjUyODNMMTUuMDIgOC41NDg0MkwtMy43MzY2M2UtMDcgOC41NDg0MkwtMi44MjAwN2UtMDcgNi40NTE1OEwxNS4wMiA2LjQ1MTU4TDEwLjA4IDEuNDcxNzRMMTEuNTYgNS4wNTMwNGUtMDdMMTkgNy41TDExLjU2IDE1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  }

  .step-next[disabled] {
      opacity: 0.5;
      pointer-events: none;
  }

  .step-prev {
      display: none;
      align-items: center;
      background: transparent;
      padding: 0;
      gap: 7px;
      font-size: 13px;
      color: #B0B5B9;
  }

  .form-control {
      border-radius: 10px;
      border: none;
      background: #F5F6F7;
      box-shadow: none;
      padding: 16px 40px 16px 20px;
      height: auto;
      color: #1f1f1f;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      min-width: 296px;
  }

  select.form-control {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00LjYxMTM4IDUuNjc4NjJMMC4xNjA5NzkgMS40MDA3N0MtMC4wNTM2NjA0IDEuMTk0NDUgLTAuMDUzNjYwNCAwLjg1OTk2NSAwLjE2MDk3OSAwLjY1MzY3MUwwLjY4MDA0OCAwLjE1NDczMUMwLjg5NDMyIC0wLjA1MTIzMjMgMS4yNDE1OSAtMC4wNTE2Mjg1IDEuNDU2MzcgMC4xNTM4NTFMNS4wMDAwMSAzLjU0NDEyTDguNTQzNjMgMC4xNTM4NTFDOC43NTg0MSAtMC4wNTE2MjgxIDkuMTA1NjggLTAuMDUxMjMyIDkuMzE5OTUgMC4xNTQ3MzJMOS44MzkwMiAwLjY1MzY3MUMxMC4wNTM3IDAuODU5OTg3IDEwLjA1MzcgMS4xOTQ0OCA5LjgzOTAyIDEuNDAwNzdMNS4zODg2MiA1LjY3ODU5QzUuMTc0IDUuODg0OTEgNC44MjYwMiA1Ljg4NDkxIDQuNjExMzggNS42Nzg2MloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
      background-repeat: no-repeat;
      background-position: center right 20px;
      background-size: auto;
  }

  .form-control:focus {
      box-shadow: none;
      outline: none;
  }

  .step-end-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
  }

  .step-end-inner .step-labels {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 348px;
      gap: 24px;
  }

  .step-labels.step-var-list {
        gap: 10px;
        margin: 24px 0 0 0;
    }


    .step-textlabel {
        text-align: left;
        font-size: 17px;
        line-height: 24px;
    }

  .step-end-inner label.custom-checkbox {
      max-width: 324px;
      margin: 33px 0 45px 0;
  }

  .step-end-inner button.btn-default.btn-accent {
      padding: 10px 30px;
  }

  .step-head-end {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
  }

  .step-head-end .step-title {
      font-size: 29px;
      font-weight: bold;
      margin-bottom: 30px;
      text-align: center;
  }

  .step-head-end .step-desc {
      text-align: center;
      font-size: 17px;
      line-height: 24px;
  }

  .modal.send-done {
      padding: 50px 30px 30px 30px;
  }

  .modal.send-done .modal-title {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 0px;
  }

  .modal.send-done .modal-info {
      font-size: 14px;
      line-height: 23px;
  }

  .modal.send-done .modal-adds {
      margin-top: 0;
      display: flex;
      justify-content: center;
  }

  .send-done__inner {
      display: flex;
      flex-direction: column;
      gap: 30px;
  }

  .send-done-photo {
      max-width: 278px;
      max-height: 494px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      margin: 0 auto -30px auto;
  }

  .send-done-photo img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
  }

  .button-subscribe {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-decoration: none;
      color: #0088CC;
      font-size: 14px;
      font-weight: 600;
      background-color: #F6F7F9;
      padding: 12px 36px;
      border-radius: 8px;
      overflow: hidden;
  }

  .button-subscribe .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
  }

  .button-subscribe .icon.icon-tg {
      background: #0088CC;
      line-height: 1;
      font-size: 12px;
      color: #fff;
  }

  button.helper-send[disabled] {
      opacity: 0.5;
      pointer-events: none;
  }






  @media screen and (min-width: 767px) {
      /* .send-done__inner {
          flex-direction: row;
      } */

      .modal.send-done .modal-title {
          text-align: left;
          font-size: 29px;
          margin-bottom: 0;
          font-family: 'Raleway';
      }

      .modal.send-done .modal-adds {
          justify-content: flex-start;
      }

      .modal.send-done .modal-info {
          font-size: 19px;
          line-height: 28px;
      }

      .send-done-photo {
          position: absolute;
          left: 30px;
          top: 0;
          margin: 0;
      }

      .send-done__inner {
          align-items: center;
          justify-content: center;
      }

      /* .modal.send-done {
          min-height: 494px;
      } */

      .button-subscribe {
          font-size: 16px;
      }
  }

  @media screen and (min-width: 920px) {
      .modal.send-done {
          padding: 48px 52px;
          justify-content: center;
          max-width: 795px;
      }
  }

  @media screen and (min-width: 1439px) {
      .send-done-photo {
          max-width: 337px;
      }
  }

  @media screen and (min-width: 980px) {
      .bothelper__inner {
          flex-direction: row;
          justify-content: space-between;
      }

      .bothelper__side {
          max-width: 296px;
          width: 100%;
      }
  }

  @media screen and (min-width: 1023px) {
      .modal.bothelper {
          max-width: 1200px;
          width: 100%;
          padding: 47px 42px 44px 55px;
      }

      .bothelper__base-head p {
          font-size: 15px;
          line-height: 26px;
      }

      .bothelper__base-head h1 {
          font-family: 'Raleway', sans-serif;
          font-size: 30px;
      }

      .step-title {
          font-size: 19px;
      }

      .step-head {
          gap: 22px;
          margin-bottom: 30px;
      }

      .bothelper__base-opts {
          margin-top: 34px;
      }

      label.step-radio span {
          font-size: 18px;
      }

      button.step-next {
          font-size: 16px;
          padding: 12px 95px 12px 60px;
          background-position: right 60px center;
      }

      .step-vars {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
      }

      .bothelper__sideauthor-name {
          font-size: 18px;
          line-height: 22px;
          font-weight: bold;
      }

      .bothelper__sideauthor-position {
          font-size: 14px;
          line-height: normal;
      }

      .bothelper__sideauthor-phone {
          font-size: 16px;
          font-weight: bold;
          line-height: normal;
      }

  }

  @media screen and (min-width: 1439px) {
      .step-title {
          font-size: 22px;
      }

      .bothelper__base-head h1 {
          font-size: 40px;
      }

      .bothelper__base-head p {
          font-size: 19px;
          line-height: 28px;
      }

      .step-vars.step-images-vars {
          gap: 40px 80px;
      }

      .step-vars {
          gap: 26px 35px;
      }

      .bothelper__inner {
          gap: 40px 70px;
      }

      button.step-next {
          font-size: 19px;
      }
  }