/* Keep public form fields inside the viewport on narrow screens. */
.public-form-wrap,
.public-form,
.response-form,
.form-page,
.response-form > fieldset,
.form-page > fieldset {
  min-width: 0;
  max-width: 100%;
}

.public-form-wrap {
  width: 100%;
  overflow-x: clip;
}

.public-form {
  width: min(720px, 100%);
}

.response-form,
.form-page,
.response-form > fieldset,
.form-page > fieldset,
.choice-list,
.product-options,
.ranking-list,
.calculated-output,
.order-total,
.matrix-scroll,
.signature-box,
.star-rating {
  width: 100%;
  max-width: 100%;
}

.response-form > fieldset,
.form-page > fieldset,
.question-label,
.response-form fieldset > small,
.choice-list label,
.choice-list label span,
.product-options label,
.product-options strong,
.ranking-list li,
.ranking-list strong,
.calculated-output,
.order-total {
  min-width: 0;
  overflow-wrap: anywhere;
}

.response-form input:not([type="radio"]):not([type="checkbox"]),
.response-form textarea,
.response-form select {
  min-width: 0;
  max-width: 100%;
}

.product-options label {
  max-width: 100%;
}

.product-options > label > span:not(.product-option-qty) {
  min-width: 0;
  flex-wrap: wrap;
}

.product-option-qty {
  max-width: 100%;
}

.matrix-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.matrix-question {
  max-width: none;
}

.ranking-actions,
.signature-actions,
.page-navigation {
  max-width: 100%;
  flex-wrap: wrap;
}

@supports not (overflow: clip) {
  .public-form-wrap {
    overflow-x: hidden;
  }
}

@media (max-width: 650px) {
  .public-form-wrap {
    padding: 18px 10px 45px;
  }

  .public-form {
    width: 100%;
    padding: 28px 18px;
  }

  .response-form,
  .form-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .response-form > fieldset,
  .form-page > fieldset {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .matrix-question {
    min-width: 520px;
  }

  .matrix-question th,
  .matrix-question td {
    padding: 10px 8px;
  }

  .matrix-question tbody th {
    min-width: 140px;
  }

  .emoji-question thead th span {
    font-size: 24px;
  }

  .product-options label {
    padding: 12px;
  }

  .order-total {
    padding: 17px;
    font-size: 28px;
  }
}