$form-text-size: 16px; // If updating, update .checkbox, .radio margin-top to fit

.form-container {
  background-color: white;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  font-size: $form-text-size; // Don't overshadow inputs

  .page-header h1 {
    padding-left: $form-text-indent - 8px;
  }

  .controls {
    padding-top: 3px;
  }

  .form-control,
  .form-select {
    font-size: $form-text-size;
  }

  .question-container {
    padding-left: $form-text-indent;
    padding-right: $form-text-indent;
  }

  .q {
    .caption {
      display: block;
    }
  }

  .rep.card {
    border-radius: 0px;
  }

  .card-body {
    @include media-breakpoint-down(md) {
      padding-left: 0px;
      padding-right: 0px;
    }
  }

  .group-border {
    border: solid 1px $cc-neutral-mid;
    border-radius: 8px;
    margin: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .info {
    overflow-x: auto;
  }

  .gr-header {

   	padding-top: .125em;
    padding-bottom: .125em;

    .collapsible-icon-container {
      float: left;
      margin-right: 10px;
    }
    .webapp-markdown-output img {
      height: 1em;
      vertical-align: baseline;
    }

    .btn {
      background-color: white;

      &:hover {
        background-color: var(--bsbtn-hover-bg);
      }
    }
  }

  .card-header {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
}

.has-debugger {
  .sticky-submit {
    bottom: $minimized-debugger-height;
  }
}

.form-group-required-label {
  display: none;
}

.form-single-question {
  padding-bottom: 20px;
  padding-top: 20px;

  .page-header {
    display: none;
  }

  .q.required {
    transition: all 0.5s;
    margin-bottom: 0;
    label:before {
      display: none;
    }
  }

  .q.required.on {
    background-color: $cc-att-neg-hi;
    border: 10px solid $cc-att-neg-mid;
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 10px;

    label {
      margin-left: 0;
      margin-right: 0;
    }
  }

  .form-group-required-label {
    display: block;
    opacity: 0;
    transition: all 0.5s;
  }

  .form-group-required-label.on {
    opacity: 100;
    font-size: 1.6rem;
    background-color: $cc-att-neg-mid;
    color: white;
    width: auto;
    line-height: 14px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px 10px 11px;
    text-align: left;
    margin-top: 0;
    border: none;
  }
}

@media print {
  #content-container {
    max-width: none;
  }

  .form-container.print-container {
    margin: 0px;
    .page-header {
      padding-top: 0px;
    }
  }

  .q {
    break-inside: avoid;
  }

  .card.last,
  .card.last *,
  .q.last,
  .q.last * {
    margin-bottom: 0px;
    padding-bottom: 0px;
    .widget-container {
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
  }

  .help-block {
    color: #52616f !important;
    font-size: 14px;
  }

  input.form-check-input:checked {
    background-color: $primary !important;

    &[type="checkbox"] {
      background-image: #{escape-svg($form-check-input-checked-bg-image)} !important;
    }

    &[type="radio"] {
      background-image: #{escape-svg($form-check-radio-checked-bg-image)} !important;
    }
  }
}

.question-tile-row:has(div.q) {
  padding-top: 8px;
  padding-bottom: 8px;
}

.question-tile-row {
  display: flex;
  align-items: start;
  * .q,
  * p,
  * .caption {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
}

.checkbox,
.radio {
  input[type="checkbox"],
  input[type="radio"] {
    margin-top: 3.15px;
  }
  // Overrides Bootstrap defaults
  padding-top: 0px !important;
  padding-bottom: 7px;
}

#next-error {
  position: fixed;
  bottom: 35px;
  z-index: $zindex-next-error;
}

.my-05em-for-hs {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
  }
}
