.pane.co-creation {
  --primary-color: #50568e;
  --primary-color-50: #eeeef4;
  --primary-color-100: #dcdde8;
  --primary-color-200: #c2c4d7;
  --primary-color-300: #a8abc7;
  --primary-color-400: #8d91b6;
  --primary-color-500: #50568e;
  --primary-color-600: #444979;
  --primary-color-700: #383c63;
  --primary-color-800: #2c2f4e;
  --primary-color-900: #202239;
  --top-color: #50568e;
  --collapsed-color: #a8abc7;
  --collapsed-text-color: #2c2f4e;

  .pane-bar {
    /* background: lightblue; */
  }

  .pane-content {
    main {
      display: flex;
      flex-direction: column;
      gap: 60px;
      margin: 40px 20px 80px;
      padding: 32px 24px;
      max-width: var(--content-max-width, 1400px);
      align-self: stretch;
      /* background: lightcoral; */
      width: calc(100% - 40px);
      box-sizing: border-box;

      svg {
        width: min(100%, 700px);
        margin: 0 auto;
        display: block;
        [id^='box'] {
          cursor: pointer;

          

          &.active,
          &:hover {
            rect {
              fill: var(--primary-color-500);
            }
          }
        }
      }

      .btn-primary {
        color: var(--text-primary);
        background: var(--primary-color-500);
      }

      @media (max-width: 1023.5px) {
        width: calc(100% - 48px);
        margin: 32px 24px 64px;
        padding: 24px;
      }

      @media (max-width: 767.5px) {
        width: 100%;
        margin: 20px 0 60px;
        padding: 20px;
      }
    }
  }

}