.viewer-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--light-gray);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: white;
  height: 100dvh;
  z-index: 999;

  @media (width >= 768px) {
    height: auto;
    position: static;
  }

  & header {
    padding: 9px;
    padding-left: 0;
    margin: 0;
    margin-left: 1rem;
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;

    & h3 {
      font-weight: 500;
      font-size: 1.375rem;
    }
  }

  & header.subheader.form-subheader {
    margin: 0.5rem 0;
  }

  & header.subheader.form-subheader:first-of-type {
    margin-top: 0;
  }

  & h5 {
    font-weight: 500;
  }

  & main {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    width: 100%;
    container-type: inline-size;

    & > fieldset {
      @container (width > 640px) {
        width: 640px;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    & table {
      width: 100%;

      & th {
        text-align: left;
      }
    }
  }

  & footer {
    border-top: 1px solid var(--light-gray);
    padding: 1rem;
    margin: 0;
  }

  & section {
    border: 1px solid var(--light-gray);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
  }

  & section + section {
    margin-top: 1rem;
  }

  & fieldset {
    margin-top: 1rem;
  }

  & fieldset:nth-child(1) {
    margin-top: 0;
  }

  & details {
    margin-top: 1rem;

    &.advanced-settings {
      background: var(--yellow-25);
      border: 1px solid var(--yellow-100);
      border-radius: var(--border-radius);
    }

    &.advanced-settings summary {
      background: var(--yellow-25);
      border-radius: var(--border-radius);
      color: var(--yellow-700);
      padding: 0.5rem 1rem;
    }

    &.advanced-settings > div {
      padding: 0.5rem 1rem 1rem;
    }

    & summary {
      cursor: pointer;
    }
  }
}