/* Create survey page */
main.admin.surveys {
  &#admin-new-survey-question {
    .new-survey-question-container{
      section#existing-questions {
        align-self: stretch;
        display: inline-flex;
        flex-direction: column;
        min-width: var(--container-sm);
        overflow: clip;

        & > turbo-frame {
          display: flex;
          flex: 1;
        }

        .cards-container {
          border-bottom: none;
          min-height: 100%;
          max-width: var(--container-sm);
        }
      }

      section#new-question-form {
        min-width: var(--container-s);
        width: 100%;
      }
    }

    @media screen and (max-width: 768px) {
      .new-survey-question-container{
        flex-direction: column-reverse;

        section#existing-questions {
          width: 100%;
        }
      }
    }
  }

  .survey-form, .question-form {
    .form-section#question-information {
      margin-bottom: 1.5rem;

      .field {
        margin-bottom: 0;
      }

      .field:last-of-type {
        width: 35%;

        .field-label {
          max-width: none;
        }
      }
    }
  }

  .question-form {
    .question-number {
      color: var(--theme-color-darker);
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .form-section {
      margin-top: 0.25rem;

      .options-missing-error-message {
        color: var(--danger);
        font-size: 0.9rem;
        font-weight: bold;
      }
    }
  }

  .option-row {
    background-color: var(--lightest-gray);
    border-radius: 0.5rem;
    padding: 0.5rem;

    .field:has(input[type="checkbox"]) {
      flex-direction: column !important;
      gap: 0.25rem !important;
    }
  }
}

#survey_controls {
  /*// shared styling in controls section of admin_forms*/
  .field#schedule-starttime, .field#schedule-endtime {
    .form-input {
      margin: auto;
    }
  }
}