First prototype of new mockup

electron/main/style.css

@@ -108,8 +108,11 @@ gap: 5px;
 }
  
 .submit-btn {
+  display: flex;
+  justify-content: center;
   padding: 10px 20px;
-  margin-top: 10px;
+  margin-left: 80px;
+  margin-top: 30px;
   margin-bottom: 10px;
   background-color: #007BFF;
   color: white;
@@ -126,7 +129,7 @@ gap: 5px;
 }
  
 .mitte {
-  background-color: #FDFCFA;
+  background-color: #FFF;
   display: flex;
   width: 700px;
   flex-direction: column;
@@ -149,6 +152,7 @@ h1 {
   position: relative;
   width: 210px;
   height: 30px;
+  margin: 50px 20px 5px 20px;
   background: rgb(42, 46, 78);
   border-radius: 5px;
   overflow: hidden;
@@ -173,9 +177,10 @@ h1 {
 
 .dropdownMenus {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   margin-top: 1px;
-  gap: 150px;
+  margin-bottom: 30px;
+  gap: 170px;
   padding: 2px 10px 2px 10px;
 }
 
@@ -184,5 +189,47 @@ h1 {
 }
 
 .labelDiv {
-  gap: 200px;
+  gap: 60px;
+  display: flex;
+  justify-content: center;
+  overflow-wrap:inherit;
+  padding-bottom: 20px;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+
+/*Step bar*/
+.step-nav {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+  background: #fff;
+  padding: 10px 20px;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.step-item {
+  padding: 10px 15px;
+  border-radius: 8px;
+  background: #eee;
+  cursor: pointer;
+  font-weight: bold;
+  transition: 0.2s;
+}
+
+.step-item.active {
+  background: #007BFF;
+  color: white;
+}
+
+.step-item:hover {
+  background: #d9d9d9;
+}
+
+/*panels*/
+.step {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }