.pane.technical {
  --primary-color: #008ecf;
  --primary-color-50: #e6f4fa;
  --primary-color-100: #cce8f5;
  --primary-color-200: #a6d7ee;
  --primary-color-300: #80c7e7;
  --primary-color-400: #59b6e0;
  --primary-color-500: #008ecf;
  --primary-color-600: #0079b0;
  --primary-color-700: #006391;
  --primary-color-800: #004e72;
  --primary-color-900: #003953;
  --top-color: #008ecf;
  --collapsed-color: #80c7e7;
  --collapsed-text-color: #003953;

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

      svg {
        width: min(100%, 960px);
        margin: 0 auto;
        display: block;

        [id^='box'] {
          cursor: pointer;

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


      @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;
        border-radius: 12px;
      }
    }
  }
}