main.onboarding {

  ul.list#data-piece-response-list {
    gap: 0.5rem;

    li.list__item {
      list-style: none;
      --list-point-distance: 0.5rem;
      --list-item-color: var(--ink-gray);
      position: relative;

      .list__item-header {
        display: flex;
        gap: 0.5rem;

        &::before {
          content: "•";
          color: var(--list-item-color);
          font-size: 1rem;
          margin-right: var(--list-point-distance);
        }
      }

      &:has(+ .list__item) {
        .list__item-content {
          border-left: 1px solid var(--list-item-color);
        }
      }
      .list__item-content {
        padding: 1rem 0 1rem 1rem;
        margin-left: calc(var(--list-point-distance) / 2 - 1px);
        display: block;
      }

      &.list__item--past {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.8), rgba(255,255,255,0));
          pointer-events: none;
        }
      }

      &.list__item--notice {
        --list-item-color: var(--blue);
      }

      &.list__item--success, &.list__item--approved {
        --list-item-color: var(--success-dark)
      }

      &.list__item--warning {
        --list-item-color: var(--warning-dark)
      }

      &.list__item--danger {
        --list-item-color: var(--danger-dark)
      }
    }
  }

  &.admin {
    .page__content {
      max-height: 425px;
      min-height: 425px;

      & > .page__section {
        flex: 1 1 calc((100% / 3) - (1rem * 2));
        max-height: inherit;
        min-height: inherit;

        & > turbo-frame {
          display: contents;
        }
      }

      @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: 1rem;
        max-height: unset;
        min-height: unset;

        & > .page__section {
          flex: 1 1 100%;

          &:not(:first-child) {
            border-left: unset;
            padding-left: 0;
          }
        }
      }
    }

    section.attributes {
      .attributes__list#onboarding-attributes {
        .attributes__item#onboarding-forms-documents {
          .attributes__body {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.5rem;
          }
        }
      }
    }

    .onboarding-chats {
      .page__section-header {
        margin-bottom: 0;
        width: 100%;
      }

      .list#onboarding-chats-list {
        width: 100%;
        flex: 1;

        li.list__card  header.list__card-header {
          align-items: center;
        }
      }
    }
  }
}