- saving progress;

src/assets/scss/components/flowBuilder.scss

@@ -44,24 +44,39 @@
   display: flex;
   flex-direction: column;
   width: max-content;
+  margin: 0 auto;
 }
 
 .flowContainer__level {
   display: flex;
   justify-content: center;
   gap: 20px;
-  padding: 0 0 60px;
   /*min-height: 240px;*/
   /*margin: 0 auto;*/
+
+  &.initialLevel {
+    padding: 0 0 30px;
+  }
+
+  &.intermediateLevel, &.finalLevel {
+    padding: 30px 0 30px;
+  }
+
+  &.intermediateLevel {
+    border-bottom: 1px solid var(--table-border-color);
+    border-top: 1px solid var(--table-border-color);
+  }
 }
 
 .flowContainer__flowItem {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 280px;
   min-width: 280px;
   padding: 15px;
-  border: 1px solid var(--panel-content-borderColor);
+  border: 1px solid var(--table-border-color);
+  z-index: 9;
 
   .flowContainer__flowItemInner > label {
     border-color: #757575;
@@ -76,6 +91,44 @@
       color: white;
     }
   }
+
+  &.levelForms, &.initialForm {
+    &:after {
+      position: absolute;
+      bottom: -31px;
+      left: 50%;
+      content: '';
+      width: 1px;
+      height: 31px;
+      background-color: var(--table-border-color);
+    }
+  }
+
+  &.levelForms, &.finalForm {
+    &:before {
+      position: absolute;
+      top: -31px;
+      left: 50%;
+      content: '';
+      width: 1px;
+      height: 31px;
+      background-color: var(--table-border-color);
+    }
+  }
+}
+
+.flowContainer__levelMaskStart, .flowContainer__levelMaskEnd {
+  position: absolute;
+  width: 140px;
+  height: 100% ;
+  top: -1px;
+  background-color: white;
+}
+.flowContainer__levelMaskStart {
+  left: 0;
+}
+.flowContainer__levelMaskEnd {
+  right: 0;
 }
 
 .flowContainer__flowItemInner {

src/assets/scss/components/topBar.scss

@@ -72,4 +72,10 @@
     i {
         margin-right: 7px;
     }
+}
+
+@media (max-width: 500px) {
+    .topBar__endContent {
+        flex-wrap: wrap;
+    }
 }