Update static/style.css

static/style.css

@@ -1064,3 +1064,84 @@ color:black;
 
 #canvas21 { border: 1px solid black; max-width: 50%; max-height: 50;}
 #segmented-img {border: 1px solid black; max-width: 50%; max-height: 50; }
+
+/* 2.6 2.8 dynamic fields */
+.dynamic-field-input {
+    font-size: 12px;
+    width: 26ch;
+    height: 33px;
+    border-radius: 1px;
+    border-color: #646060;
+    margin-bottom: 3px;
+    margin-right: 0.2%;
+    margin-left: -2.5px;
+    text-align: center;
+    font-family: "acumin-pro", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* Add icon styling - blue circle with square border */
+.add-single-field-icon {
+  width: 15px;
+  height: 15px;
+  background-color: rgb(47, 131, 198);
+  border-radius: 100%;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  margin-left: 10px;     /* space from the input */
+  margin-right: 16px;    /* space before the remove icon (bigger) */
+  margin-bottom: 3px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.add-single-field-icon::before {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 2px solid #2f83c6;
+  border-radius: 5px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.add-single-field-icon:hover {
+  box-shadow: 0 0 8px 2px #2f83c6;
+}
+
+/* Remove icon styling - red circle with square border */
+.remove-single-field-icon {
+  width: 15px;
+  height: 15px;
+  background-color: #f32b2b;
+  border-radius: 100%;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  margin-left: 0;        /* no extra margin here */
+  margin-bottom: 3px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.remove-single-field-icon::before {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 2px solid #f32b2b;
+  border-radius: 5px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.remove-single-field-icon:hover {
+  box-shadow: 0 0 8px 2px #f32b2b;
+}