formeo 3.1.4 → 4.1.0

package/dist/formeo.css

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 3.1.3
+Version: 4.0.0
 Author: Draggable https://draggable.io
 */
 
@@ -40,22 +40,28 @@ button[class*=-clone]:hover .svg-icon {
   fill: #fff;
 }
 
-.item-edit-toggle:hover {
+.edit-toggle:hover {
   background-color: rgb(50, 93, 136) !important;
 }
-.item-edit-toggle:hover .svg-icon {
+.edit-toggle:hover .svg-icon {
   fill: #fff;
 }
 
+.f-autocomplete {
+  position: relative;
+}
+
+.f-autocomplete-display-field {
+  width: 100%;
+}
+
 .f-autocomplete-list {
   background-color: #fff;
   display: none;
   list-style: none;
   padding: 0;
   position: absolute;
-  z-index: 20;
-  max-height: 200px;
-  overflow-y: auto;
+  z-index: 2;
   width: 100%;
   margin: 0 -1px;
   border: 1px solid #999999;
@@ -63,6 +69,7 @@ button[class*=-clone]:hover .svg-icon {
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
 }
 .f-autocomplete-list li {
+  position: relative;
   border: 1px solid #999999;
   display: none;
   cursor: default;
@@ -73,17 +80,72 @@ button[class*=-clone]:hover .svg-icon {
   will-change: background-color;
   font-size: 0.85em;
 }
-.f-autocomplete-list li.active-option {
-  background-color: rgb(224.8267782427, 204.4154811715, 234.8845188285);
+.f-autocomplete-list li.component-type-row {
+  padding-left: 4px;
+}
+.f-autocomplete-list li.component-type-column {
+  padding-left: 8px;
+}
+.f-autocomplete-list li.component-type-field {
+  padding-left: 16px;
+}
+.f-autocomplete-list li.active-option.component-type-stage {
+  background-color: #4F46E5;
+  color: #f9fafb;
+}
+.f-autocomplete-list li.active-option.component-type-row {
+  background-color: rgb(229, 70, 188.2);
+  color: #f9fafb;
+}
+.f-autocomplete-list li.active-option.component-type-column {
+  background-color: rgb(229, 142.6, 70);
+  color: #111827;
+}
+.f-autocomplete-list li.active-option.component-type-field {
+  background-color: rgb(124.6, 229, 70);
+  color: #111827;
+}
+.f-autocomplete-list li.active-option.component-type-option {
+  background-color: rgb(70, 229, 206.2);
+  color: #111827;
+}
+.f-autocomplete-list li:hover.component-type-stage {
+  background-color: rgb(185.3507109005, 181.7890995261, 244.7109004739);
+  color: #111827;
 }
-.f-autocomplete-list li:hover {
-  background-color: rgb(189.1310460251, 144.5726359833, 211.0873640167);
+.f-autocomplete-list li:hover.component-type-row {
+  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
+  color: #111827;
+}
+.f-autocomplete-list li:hover.component-type-column {
+  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+  color: #111827;
+}
+.f-autocomplete-list li:hover.component-type-field {
+  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
+  color: #111827;
+}
+.f-autocomplete-list li:hover.component-type-option {
+  background-color: rgb(181.7890995261, 244.7109004739, 235.6881516588);
+  color: #111827;
+}
+.f-autocomplete-list li:has(.options-list):hover .options-list {
+  display: block;
 }
 .f-autocomplete-list .component-type {
   color: #666666;
   font-style: italic;
   font-size: 0.75em;
 }
+.f-autocomplete-list.options-list {
+  left: 100%;
+  top: 0;
+  width: 75%;
+  min-height: 100%;
+}
+.f-autocomplete-list.options-list li {
+  display: block;
+}
 
 .formeo-panels-wrap h5 {
   margin: 0;
@@ -134,6 +196,7 @@ button[class*=-clone]:hover .svg-icon {
   list-style: none;
 }
 .formeo-panels-wrap .f-panel {
+  height: 0;
   vertical-align: top;
   display: inline-block;
   width: 100%;
@@ -158,6 +221,9 @@ button[class*=-clone]:hover .svg-icon {
   text-align: center;
   white-space: nowrap;
 }
+.formeo-panels-wrap .active-panel {
+  height: auto;
+}
 
 .tabbed-panels .panel-nav {
   height: auto;
@@ -243,6 +309,9 @@ button[class*=-clone]:hover .svg-icon {
   border: 1px solid rgb(102, 175, 233);
   outline: none;
 }
+.formeo select[multiple] {
+  height: auto;
+}
 .formeo input {
   font-size: 100%;
   font-family: inherit;
@@ -395,12 +464,6 @@ button[class*=-clone]:hover .svg-icon {
   display: inline-flex;
   vertical-align: bottom;
 }
-.formeo .f-input-group input + input,
-.formeo .f-input-group input + select,
-.formeo .f-input-group select + select,
-.formeo .f-input-group select + input {
-  margin-left: -1px;
-}
 .formeo .f-input-group select {
   appearance: none;
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDMyIj4KPHBhdGggZmlsbD0iIzQ0NCIgZD0iTTAgMTJsMTEuOTkyIDExLjk5MiAxMS45OTItMTEuOTkyaC0yMy45ODR6Ij48L3BhdGg+Cjwvc3ZnPgo=");
@@ -493,14 +556,6 @@ button[class*=-clone]:hover .svg-icon {
     border-color: rgb(191.1771428571, 221.6285714286, 245.8228571429);
   }
 }
-@keyframes HIDE_CONDITION_FIELD {
-  0% {
-    display: none;
-  }
-  100% {
-    display: none;
-  }
-}
 @keyframes COMPONENT_HIGHLIGHT_PULSE {
   0% {
     box-shadow: 0 0 1px 8px rgb(153, 84, 187);
@@ -522,7 +577,6 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .component-tag {
   display: none;
   height: 24px;
-  z-index: 200;
   flex-direction: row;
   gap: 4px;
   align-items: center;
@@ -560,7 +614,6 @@ button[class*=-clone]:hover .svg-icon {
   margin: 0;
   padding: 0;
   list-style: none;
-  height: 100%;
 }
 .formeo.formeo-editor .group-actions {
   display: flex;
@@ -568,7 +621,7 @@ button[class*=-clone]:hover .svg-icon {
   position: absolute;
   top: 0;
   line-height: 0;
-  z-index: 2;
+  z-index: 1;
   align-items: center;
   justify-content: center;
   flex-direction: row;
@@ -676,19 +729,19 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .formeo-row .row-tag {
   left: -1px;
-  border-color: rgb(239, 71, 111);
+  border-color: rgb(229, 70, 188.2);
 }
 .formeo.formeo-editor .formeo-row .row-tag .f-i-component-corner {
   fill: #fff;
-  stroke: rgb(239, 71, 111);
+  stroke: rgb(229, 70, 188.2);
 }
 .formeo.formeo-editor .formeo-row:has(.hovering-column) .row-actions,
 .formeo.formeo-editor .formeo-row:has(.hovering-column) .field-actions {
   display: none;
 }
 .formeo.formeo-editor .formeo-row.sortable-ghost {
-  background-color: rgb(253.688, 239.912, 243.192);
-  box-shadow: 0 0 0 1px rgb(239, 71, 111);
+  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
+  box-shadow: 0 0 0 1px rgb(229, 70, 188.2);
 }
 .formeo.formeo-editor .formeo-row.sortable-ghost * {
   opacity: 0;
@@ -696,17 +749,20 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .formeo-row:has(.editing-field) .row-actions {
   display: none;
 }
+.formeo.formeo-editor .formeo-row.highlight-component {
+  box-shadow: 0 0 4px 2px rgb(229, 70, 188.2);
+}
 .formeo.formeo-editor .row-moving {
-  background-color: rgb(253.688, 239.912, 243.192) !important;
+  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891) !important;
 }
 .formeo.formeo-editor .row-moving .action-btn-wrap button {
-  background-color: rgb(253.688, 239.912, 243.192);
+  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
 }
 .formeo.formeo-editor .row-moving .row-tag {
-  background-color: rgb(253.688, 239.912, 243.192);
+  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
 }
 .formeo.formeo-editor .row-moving .row-tag .f-i-component-corner {
-  fill: rgb(253.688, 239.912, 243.192);
+  fill: rgb(244.7109004739, 181.7890995261, 228.56492891);
 }
 .formeo.formeo-editor .row-actions {
   left: 0;
@@ -729,7 +785,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .hovering-row,
 .formeo.formeo-editor .editing-row {
-  box-shadow: 0 0 0 1px rgb(239, 71, 111);
+  box-shadow: 0 0 0 1px rgb(229, 70, 188.2);
 }
 .formeo.formeo-editor .hovering-row:first-child,
 .formeo.formeo-editor .editing-row:first-child {
@@ -774,11 +830,11 @@ button[class*=-clone]:hover .svg-icon {
   gap: 16px;
 }
 .formeo.formeo-editor .formeo-column .column-tag {
-  border-color: rgb(6, 214, 160);
+  border-color: rgb(229, 142.6, 70);
 }
 .formeo.formeo-editor .formeo-column .column-tag .f-i-component-corner {
   fill: #fff;
-  stroke: rgb(6, 214, 160);
+  stroke: rgb(229, 142.6, 70);
 }
 .formeo.formeo-editor .formeo-column .column-tag,
 .formeo.formeo-editor .formeo-column .column-actions {
@@ -816,7 +872,7 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .formeo-column .resize-x-handle::before {
   width: 0;
   right: 6px;
-  border: 1px dashed rgb(47.3227272727, 249.1772727273, 196.7727272727);
+  border: 1px dashed rgb(238.4265402844, 183.3516587678, 137.0734597156);
   border-width: 0 2px;
   display: block;
   top: 0;
@@ -825,7 +881,7 @@ button[class*=-clone]:hover .svg-icon {
   content: "";
 }
 .formeo.formeo-editor .formeo-column .resize-x-handle svg {
-  fill: rgb(47.3227272727, 249.1772727273, 196.7727272727);
+  fill: rgb(238.4265402844, 183.3516587678, 137.0734597156);
   position: absolute;
   right: 1px;
   width: 14px;
@@ -837,10 +893,10 @@ button[class*=-clone]:hover .svg-icon {
   bottom: -14px;
 }
 .formeo.formeo-editor .formeo-column .resize-x-handle:hover::before {
-  border-color: rgb(6, 214, 160);
+  border-color: rgb(229, 142.6, 70);
 }
 .formeo.formeo-editor .formeo-column .resize-x-handle:hover svg {
-  fill: rgb(6, 214, 160);
+  fill: rgb(229, 142.6, 70);
 }
 .formeo.formeo-editor .formeo-column.editing-column {
   overflow: hidden;
@@ -852,8 +908,8 @@ button[class*=-clone]:hover .svg-icon {
   display: none;
 }
 .formeo.formeo-editor .formeo-column.sortable-ghost {
-  background-color: rgb(220.9545454545, 254.0454545455, 245.4545454545);
-  box-shadow: 0 0 0 1px rgb(6, 214, 160);
+  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+  box-shadow: 0 0 0 1px rgb(229, 142.6, 70);
 }
 .formeo.formeo-editor .formeo-column.sortable-ghost * {
   opacity: 0;
@@ -861,6 +917,9 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .formeo-column:has(.editing-field) .column-actions {
   display: none;
 }
+.formeo.formeo-editor .formeo-column.highlight-component {
+  box-shadow: 0 0 4px 2px rgb(229, 142.6, 70);
+}
 .formeo.formeo-editor .editing-row .formeo-column,
 .formeo.formeo-editor .editing-row .empty {
   border-radius: 8px;
@@ -899,16 +958,19 @@ button[class*=-clone]:hover .svg-icon {
   display: none;
 }
 .formeo.formeo-editor .column-moving {
-  background-color: rgb(220.9545454545, 254.0454545455, 245.4545454545);
+  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
 }
 .formeo.formeo-editor .column-moving .action-btn-wrap button {
-  background-color: rgb(220.9545454545, 254.0454545455, 245.4545454545);
+  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
 }
 .formeo.formeo-editor .column-moving .column-tag {
-  background-color: rgb(220.9545454545, 254.0454545455, 245.4545454545);
+  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
 }
 .formeo.formeo-editor .column-moving .column-tag .f-i-component-corner {
-  fill: rgb(220.9545454545, 254.0454545455, 245.4545454545);
+  fill: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+}
+.formeo.formeo-editor button.column-handle {
+  background-color: rgba(255, 255, 255, 0.9);
 }
 .formeo.formeo-editor .hovering-column .column-tag {
   display: flex;
@@ -927,24 +989,26 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .hovering-column,
 .formeo.formeo-editor .editing-column {
-  box-shadow: 0 0 0 1px rgb(6, 214, 160);
+  box-shadow: 0 0 0 1px rgb(229, 142.6, 70);
 }
 .formeo.formeo-editor .column-actions {
   padding: 0;
   left: 50%;
-  z-index: 1;
   transition: width 0.15s;
 }
 .formeo.formeo-editor .column-actions .f-i-handle {
   transform: rotate(90deg);
 }
 .formeo.formeo-editor .formeo-field {
-  min-height: 24px;
+  min-height: 26px;
   position: relative;
   list-style: none;
   margin: 0;
   will-change: box-shadow;
 }
+.formeo.formeo-editor .formeo-field.highlight-component {
+  box-shadow: 0 0 4px 2px rgb(124.6, 229, 70);
+}
 .formeo.formeo-editor .formeo-field:last-child {
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
@@ -996,8 +1060,8 @@ button[class*=-clone]:hover .svg-icon {
   border: 1px dashed #cccccc;
 }
 .formeo.formeo-editor .formeo-field.sortable-ghost {
-  background-color: rgb(183.8148148148, 210.2222222222, 233.1851851852);
-  box-shadow: 0 0 0 1px rgb(38, 84, 124);
+  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
+  box-shadow: 0 0 0 1px rgb(124.6, 229, 70);
 }
 .formeo.formeo-editor .formeo-field.sortable-ghost * {
   opacity: 0;
@@ -1006,16 +1070,16 @@ button[class*=-clone]:hover .svg-icon {
   right: -1px;
   left: auto;
   top: -24px;
-  border-color: rgb(38, 84, 124);
+  border-color: rgb(124.6, 229, 70);
   background-color: #fff;
 }
 .formeo.formeo-editor .field-tag .f-i-component-corner {
   fill: #fff;
-  stroke: rgb(38, 84, 124);
+  stroke: rgb(124.6, 229, 70);
 }
 .formeo.formeo-editor .editing-field,
 .formeo.formeo-editor .hovering-field {
-  box-shadow: 0 0 0 1px rgb(38, 84, 124);
+  box-shadow: 0 0 0 1px rgb(124.6, 229, 70);
 }
 .formeo.formeo-editor .editing-field .field-tag,
 .formeo.formeo-editor .hovering-field .field-tag {
@@ -1042,16 +1106,16 @@ button[class*=-clone]:hover .svg-icon {
   flex-direction: row-reverse;
 }
 .formeo.formeo-editor .field-moving {
-  background-color: rgb(183.8148148148, 210.2222222222, 233.1851851852);
+  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
 }
 .formeo.formeo-editor .field-moving .action-btn-wrap button {
-  background-color: rgb(183.8148148148, 210.2222222222, 233.1851851852);
+  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
 }
 .formeo.formeo-editor .field-moving .field-tag {
-  background-color: rgb(183.8148148148, 210.2222222222, 233.1851851852);
+  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
 }
 .formeo.formeo-editor .field-moving .field-tag .f-i-component-corner {
-  fill: rgb(183.8148148148, 210.2222222222, 233.1851851852);
+  fill: rgb(203.3962085308, 244.7109004739, 181.7890995261);
 }
 .formeo.formeo-editor .editing-field {
   z-index: 1;
@@ -1062,102 +1126,127 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .field-preview p {
   white-space: normal;
 }
-.formeo.formeo-editor .field-edit {
+.formeo.formeo-editor .field-preview .f-checkbox.highlight-component,
+.formeo.formeo-editor .field-preview .f-radio.highlight-component {
+  box-shadow: 0 0 2px 1px rgb(70, 229, 206.2) inset;
+}
+.formeo.formeo-editor .component-edit {
   display: none;
   overflow: hidden;
-  margin-top: 16px;
-  border-top: 1px solid #cccccc;
 }
-.formeo.formeo-editor .field-edit label {
+.formeo.formeo-editor .component-edit label {
   font-size: 0.825em;
 }
-.formeo.formeo-editor .field-edit .panel-nav {
+.formeo.formeo-editor .component-edit .panel-nav {
   margin-bottom: 0;
   padding: 0;
   overflow: hidden;
 }
-.formeo.formeo-editor .field-edit .panel-nav button {
+.formeo.formeo-editor .component-edit .panel-nav button {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.formeo.formeo-editor .field-edit.field-edit-options {
-  list-style: decimal;
-}
-.formeo.formeo-editor .field-edit .field-prop {
+.formeo.formeo-editor .component-edit .component-prop {
   display: flex;
 }
-.formeo.formeo-editor .field-edit .prop-controls {
+.formeo.formeo-editor .component-edit .prop-controls {
   flex-shrink: 0;
   align-items: center;
   display: flex;
-  margin-left: 3px;
 }
-.formeo.formeo-editor .field-edit .prop-controls button {
+.formeo.formeo-editor .component-edit .prop-controls .prop-remove {
+  z-index: 3;
+}
+.formeo.formeo-editor .component-edit .prop-controls.conditions-prop-controls {
+  display: flex;
+  align-items: flex-start;
+  margin-left: 16px;
+  min-width: 16px;
+}
+.formeo.formeo-editor .component-edit .prop-controls.conditions-prop-controls .prop-remove {
+  margin-top: -1px;
+}
+.formeo.formeo-editor .component-edit .prop-controls button {
   position: relative;
 }
-.formeo.formeo-editor .field-edit .prop-controls .svg-icon {
-  width: 12px;
-  height: 12px;
+.formeo.formeo-editor .component-edit .prop-controls .svg-icon {
+  width: 10px;
+  height: 10px;
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
 }
-.formeo.formeo-editor .field-edit .prop-control {
-  width: 24px;
-  height: 24px;
+.formeo.formeo-editor .component-edit .prop-control {
+  width: 16px;
+  height: 16px;
   right: 0;
   bottom: 0;
   position: absolute;
   padding: 0;
 }
-.formeo.formeo-editor .field-edit .prop-control:nth-of-type(1) {
+.formeo.formeo-editor .component-edit .prop-control:nth-of-type(1) {
   right: 0px;
 }
-.formeo.formeo-editor .field-edit .prop-control:nth-of-type(2) {
+.formeo.formeo-editor .component-edit .prop-control:nth-of-type(2) {
   right: 24px;
 }
-.formeo.formeo-editor .field-edit .prop-control:nth-of-type(3) {
+.formeo.formeo-editor .component-edit .prop-control:nth-of-type(3) {
   right: 48px;
 }
-.formeo.formeo-editor .field-edit .prop-control:nth-of-type(4) {
+.formeo.formeo-editor .component-edit .prop-control:nth-of-type(4) {
   right: 72px;
 }
-.formeo.formeo-editor .field-edit .prop-control:first-child {
+.formeo.formeo-editor .component-edit .prop-control:first-child {
   right: 0;
 }
-.formeo.formeo-editor :not(.control-count-1) .field-edit .prop-control:last-child {
+.formeo.formeo-editor :not(.control-count-1) .component-edit .prop-control:last-child {
   border-radius: 4px 0 0 4px;
-  margin-right: -1px;
   display: none;
 }
-.formeo.formeo-editor :not(.control-count-1) .field-edit .prop-control:first-child {
+.formeo.formeo-editor :not(.control-count-1) .component-edit .prop-control:first-child {
   border-radius: 4px;
 }
-.formeo.formeo-editor .field-edit .prop-control:hover:first-child {
+.formeo.formeo-editor .component-edit .prop-control:hover:first-child {
   border-radius: 0 4px 4px 0;
 }
-.formeo.formeo-editor .field-edit .prop-control:hover:first-child:last-child {
+.formeo.formeo-editor .component-edit .prop-control:hover:first-child:last-child {
   border-radius: 4px;
 }
-.formeo.formeo-editor .field-edit .prop-control:hover:last-child {
+.formeo.formeo-editor .component-edit .prop-control:hover:last-child {
   display: inline-block;
 }
-.formeo.formeo-editor .field-edit .prop-control:last-child:first-child {
+.formeo.formeo-editor .component-edit .prop-control:last-child:first-child {
   display: inline-block;
   border-radius: 4px;
   margin-right: 0;
 }
-.formeo.formeo-editor .field-edit .prop-wrap {
+.formeo.formeo-editor .component-edit .to-remove {
   position: relative;
-  margin-bottom: 8px;
+}
+.formeo.formeo-editor .component-edit .to-remove::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(217, 83, 79, 0.1);
+  z-index: 2;
+}
+.formeo.formeo-editor .component-edit .prop-wrap {
+  position: relative;
+  margin-bottom: 16px;
   list-style: none;
   margin-left: 0;
 }
-.formeo.formeo-editor .field-edit .field-edit-group {
+.formeo.formeo-editor .component-edit .prop-wrap:first-child .conditions-prop-controls .prop-remove {
+  display: none;
+}
+.formeo.formeo-editor .component-edit .field-edit-group {
   padding: 8px 8px 0;
 }
-.formeo.formeo-editor .field-edit [contenteditable] {
+.formeo.formeo-editor .component-edit [contenteditable] {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -1165,180 +1254,229 @@ button[class*=-clone]:hover .svg-icon {
   align-content: stretch;
   align-items: stretch;
 }
-.formeo.formeo-editor .field-edit .prop-inputs,
-.formeo.formeo-editor .field-edit .prop-controls {
-  transition: width 150ms;
+.formeo.formeo-editor .component-edit .prop-inputs,
+.formeo.formeo-editor .component-edit .prop-controls {
+  transition: width 150ms, display 150ms;
   will-change: width;
 }
-.formeo.formeo-editor .field-edit .prop-inputs .f-addon,
-.formeo.formeo-editor .field-edit .prop-inputs input:not([type=checkbox]):not([type=radio]),
-.formeo.formeo-editor .field-edit .prop-inputs select,
-.formeo.formeo-editor .field-edit .prop-inputs textarea,
-.formeo.formeo-editor .field-edit .prop-inputs [contenteditable],
-.formeo.formeo-editor .field-edit .prop-controls .f-addon,
-.formeo.formeo-editor .field-edit .prop-controls input:not([type=checkbox]):not([type=radio]),
-.formeo.formeo-editor .field-edit .prop-controls select,
-.formeo.formeo-editor .field-edit .prop-controls textarea,
-.formeo.formeo-editor .field-edit .prop-controls [contenteditable] {
+.formeo.formeo-editor .component-edit .prop-inputs .f-addon,
+.formeo.formeo-editor .component-edit .prop-inputs input:not([type=checkbox]):not([type=radio]),
+.formeo.formeo-editor .component-edit .prop-inputs select,
+.formeo.formeo-editor .component-edit .prop-inputs textarea,
+.formeo.formeo-editor .component-edit .prop-inputs [contenteditable],
+.formeo.formeo-editor .component-edit .prop-controls .f-addon,
+.formeo.formeo-editor .component-edit .prop-controls input:not([type=checkbox]):not([type=radio]),
+.formeo.formeo-editor .component-edit .prop-controls select,
+.formeo.formeo-editor .component-edit .prop-controls textarea,
+.formeo.formeo-editor .component-edit .prop-controls [contenteditable] {
   font-size: 0.825em;
-  flex: 1 1 auto;
 }
-.formeo.formeo-editor .field-edit .prop-inputs .f-addon:focus,
-.formeo.formeo-editor .field-edit .prop-inputs input:not([type=checkbox]):not([type=radio]):focus,
-.formeo.formeo-editor .field-edit .prop-inputs select:focus,
-.formeo.formeo-editor .field-edit .prop-inputs textarea:focus,
-.formeo.formeo-editor .field-edit .prop-inputs [contenteditable]:focus,
-.formeo.formeo-editor .field-edit .prop-controls .f-addon:focus,
-.formeo.formeo-editor .field-edit .prop-controls input:not([type=checkbox]):not([type=radio]):focus,
-.formeo.formeo-editor .field-edit .prop-controls select:focus,
-.formeo.formeo-editor .field-edit .prop-controls textarea:focus,
-.formeo.formeo-editor .field-edit .prop-controls [contenteditable]:focus {
+.formeo.formeo-editor .component-edit .prop-inputs .f-addon:focus,
+.formeo.formeo-editor .component-edit .prop-inputs input:not([type=checkbox]):not([type=radio]):focus,
+.formeo.formeo-editor .component-edit .prop-inputs select:focus,
+.formeo.formeo-editor .component-edit .prop-inputs textarea:focus,
+.formeo.formeo-editor .component-edit .prop-inputs [contenteditable]:focus,
+.formeo.formeo-editor .component-edit .prop-controls .f-addon:focus,
+.formeo.formeo-editor .component-edit .prop-controls input:not([type=checkbox]):not([type=radio]):focus,
+.formeo.formeo-editor .component-edit .prop-controls select:focus,
+.formeo.formeo-editor .component-edit .prop-controls textarea:focus,
+.formeo.formeo-editor .component-edit .prop-controls [contenteditable]:focus {
   z-index: 1;
 }
-.formeo.formeo-editor .field-edit .prop-inputs [class^=condition-] + select,
-.formeo.formeo-editor .field-edit .prop-inputs select + [class^=condition-],
-.formeo.formeo-editor .field-edit .prop-controls [class^=condition-] + select,
-.formeo.formeo-editor .field-edit .prop-controls select + [class^=condition-] {
-  margin-left: -1px;
-}
-.formeo.formeo-editor .field-edit .control-count-2 .prop-controls:hover {
+.formeo.formeo-editor .component-edit .control-count-2 .prop-controls:hover {
   width: 48px;
 }
-.formeo.formeo-editor .field-edit .control-count-2 .prop-controls:hover + .prop-inputs {
+.formeo.formeo-editor .component-edit .control-count-2 .prop-controls:hover + .prop-inputs {
   width: calc(100% - 24px);
 }
-.formeo.formeo-editor .field-edit.panel-count-1 .panel-nav {
+.formeo.formeo-editor .component-edit.panel-count-1 .panel-nav {
   border-bottom: 1px solid #999999;
 }
-.formeo.formeo-editor .field-edit.panel-count-1 .panel-nav button {
+.formeo.formeo-editor .component-edit.panel-count-1 .panel-nav button {
   display: none;
 }
-.formeo.formeo-editor .field-edit.panel-count-1 .panel-labels {
+.formeo.formeo-editor .component-edit.panel-count-1 .panel-labels {
   background-color: transparent;
 }
+.formeo.formeo-editor .component-edit[popover] {
+  display: block;
+  width: 66.7%;
+  height: 66.7%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 24px 1px #000;
+  border: 1px solid #000;
+  border-radius: 8px;
+  z-index: 100;
+}
 .formeo.formeo-editor .f-condition-row {
   display: flex;
   width: 100%;
-  margin-top: -1px;
-  border: 1px solid #cccccc;
+  position: relative;
+  border-bottom: 1px solid #cccccc;
+}
+.formeo.formeo-editor .f-condition-row > [class^=condition-] {
+  border-left: 1px solid #cccccc;
+}
+.formeo.formeo-editor .f-condition-row .manage-condition-type {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  right: -16px;
+  position: absolute;
+  box-shadow: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  z-index: 1;
+}
+.formeo.formeo-editor .f-condition-row .remove-condition-type {
+  top: 0;
+}
+.formeo.formeo-editor .f-condition-row .add-condition-type {
+  bottom: 0;
+  display: none;
+}
+.formeo.formeo-editor .f-condition-row:last-child .remove-condition-type {
+  border-bottom-right-radius: 0;
+}
+.formeo.formeo-editor .f-condition-row:last-child .add-condition-type {
+  display: flex;
+}
+.formeo.formeo-editor .f-condition-row:last-child:not(:first-child) .add-condition-type {
+  border-top-right-radius: 0;
 }
 .formeo.formeo-editor .f-condition-row input,
 .formeo.formeo-editor .f-condition-row select,
 .formeo.formeo-editor .f-condition-row [contenteditable] {
-  border-width: 0;
+  background-color: #fff;
+  border: 0 none;
   border-radius: 0;
-  width: inherit;
-  box-shadow: 0 0 0 1px #cccccc;
 }
 .formeo.formeo-editor .f-condition-row input:focus,
 .formeo.formeo-editor .f-condition-row select:focus,
 .formeo.formeo-editor .f-condition-row [contenteditable]:focus {
-  box-shadow: 0 0 0 1px rgb(102, 175, 233);
-}
-.formeo.formeo-editor .f-condition-row:first-child input:last-child,
-.formeo.formeo-editor .f-condition-row:first-child select:last-child {
-  border-top-right-radius: 4px;
-}
-.formeo.formeo-editor .f-condition-row:last-child input:last-child,
-.formeo.formeo-editor .f-condition-row:last-child select:last-child {
-  border-bottom-right-radius: 4px;
-}
-.formeo.formeo-editor .f-condition-row:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-.formeo.formeo-editor .f-condition-row:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.formeo.formeo-editor .f-condition-row .condition-logical {
-  max-width: 56px;
-  text-transform: uppercase;
+  box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
 }
 .formeo.formeo-editor .f-condition-row div.condition-source,
 .formeo.formeo-editor .f-condition-row div.condition-target {
   position: relative;
-  width: 100%;
-}
-.formeo.formeo-editor .f-condition-row [class^=condition-] {
+  border-left: 1px solid #cccccc;
+}
+.formeo.formeo-editor .f-condition-row .condition-logical,
+.formeo.formeo-editor .f-condition-row .condition-source,
+.formeo.formeo-editor .f-condition-row .condition-target,
+.formeo.formeo-editor .f-condition-row .condition-sourceProperty,
+.formeo.formeo-editor .f-condition-row .condition-targetProperty,
+.formeo.formeo-editor .f-condition-row .condition-comparison,
+.formeo.formeo-editor .f-condition-row .condition-assignment,
+.formeo.formeo-editor .f-condition-row .condition-value {
+  flex: 1 !important;
   max-width: 100%;
   transition: max-width 266ms;
   will-change: max-width;
+  min-height: 31px;
 }
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isVisible .condition-comparison,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isVisible .condition-target,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isVisible .condition-assignment,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isVisible .condition-value,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isVisible .condition-targetProperty, .formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isNotVisible .condition-comparison,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isNotVisible .condition-target,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isNotVisible .condition-assignment,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isNotVisible .condition-value,
-.formeo.formeo-editor .f-condition-row.if-condition-row.condition-sourceProperty-isNotVisible .condition-targetProperty {
-  max-width: 0%;
-  padding: 0;
-  border: 0 none;
-  overflow: hidden;
+.formeo.formeo-editor .f-condition-row .condition-logical {
+  max-width: 64px;
+  text-transform: uppercase;
 }
-.formeo.formeo-editor .f-condition-row.then-condition-row.condition-targetProperty-isVisible .condition-comparison,
-.formeo.formeo-editor .f-condition-row.then-condition-row.condition-targetProperty-isVisible .condition-assignment,
-.formeo.formeo-editor .f-condition-row.then-condition-row.condition-targetProperty-isVisible .condition-value, .formeo.formeo-editor .f-condition-row.then-condition-row.condition-targetProperty-isNotVisible .condition-comparison,
-.formeo.formeo-editor .f-condition-row.then-condition-row.condition-targetProperty-isNotVisible .condition-assignment,
-.formeo.formeo-editor .f-condition-row.then-condition-row.condition-targetProperty-isNotVisible .condition-value {
-  max-width: 0%;
-  padding: 0;
-  border: 0 none;
-  overflow: hidden;
+.formeo.formeo-editor .f-condition-row .condition-source input[type=text],
+.formeo.formeo-editor .f-condition-row .condition-target input[type=text] {
+  min-height: 31px;
 }
-.formeo.formeo-editor .f-condition-row.condition-target .condition-targetProperty {
-  max-width: 0%;
+.formeo.formeo-editor .f-condition-row .hidden-property {
+  max-width: 0% !important;
   padding: 0;
   border: 0 none;
   overflow: hidden;
+  box-shadow: none;
+  margin: 0;
 }
-.formeo.formeo-editor .f-condition-row.condition-source .condition-sourceProperty {
-  max-width: 0%;
-  padding: 0;
-  border: 0 none;
-  overflow: hidden;
+.formeo.formeo-editor .f-condition-row.display-none {
+  display: none;
 }
-.formeo.formeo-editor .f-autocomplete-display-field + .f-autocomplete-list:focus {
-  z-index: 100;
+.formeo.formeo-editor .f-condition-row .hidden-option {
+  display: none;
 }
-.formeo.formeo-editor [class$=-focused] {
-  z-index: 1;
+.formeo.formeo-editor .type-conditions-wrap {
+  width: 100%;
 }
-.formeo.formeo-editor [class$=-focused] .f-autocomplete-list {
-  z-index: 100;
+.formeo.formeo-editor .then-condition-row:first-of-type .remove-condition-type {
+  display: none;
+}
+.formeo.formeo-editor .if-condition-row:first-of-type .remove-condition-type {
+  display: none;
+}
+.formeo.formeo-editor .if-condition-row .condition-target input {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+}
+.formeo.formeo-editor .condition-target input.f-autocomplete-display-field:placeholder-shown + span.clear-button,
+.formeo.formeo-editor .condition-source input.f-autocomplete-display-field:placeholder-shown + span.clear-button {
+  display: none;
+}
+.formeo.formeo-editor .condition-target .clear-button,
+.formeo.formeo-editor .condition-source .clear-button {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.formeo.formeo-editor .condition-target .clear-button .svg-icon,
+.formeo.formeo-editor .condition-source .clear-button .svg-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  padding: 1px;
+  border: 1px solid #333333;
+  fill: #333333;
+}
+.formeo.formeo-editor .condition-target .clear-button:hover .svg-icon,
+.formeo.formeo-editor .condition-source .clear-button:hover .svg-icon {
+  border: 1px solid rgb(217, 83, 79);
+  fill: rgb(217, 83, 79);
+}
+.formeo.formeo-editor .condition-target .clear-button:active .svg-icon,
+.formeo.formeo-editor .condition-source .clear-button:active .svg-icon {
+  background-color: rgb(217, 83, 79);
+  border: 1px solid rgb(201.4953271028, 48.0841121495, 43.5046728972);
+  fill: #fff;
+}
+.formeo.formeo-editor .conditions-prop-inputs {
+  border-top: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
 }
 .formeo.formeo-editor .conditions-prop-inputs label.condition-label {
   display: inline-flex;
   flex: 0 0 auto;
-  box-shadow: 0 0 0 1px #cccccc;
   align-items: center;
   padding: 4px;
   border-right: 0;
   text-transform: uppercase;
-  color: #999999;
-}
-.formeo.formeo-editor .conditions-prop-inputs label.condition-label.if-condition-label {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  color: #333333;
+  background-color: #fff;
 }
 .formeo.formeo-editor .conditions-prop-inputs label.condition-label.then-condition-label {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top: 0;
+  background-color: #666666;
+  color: #fff;
+}
+.formeo.formeo-editor .field-conditions-0 .conditions-prop-inputs {
+  border-top: 0 none;
 }
-.formeo.formeo-editor .field-edit-group {
+.formeo.formeo-editor .edit-group {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.formeo.formeo-editor .hidden-property {
-  display: none;
-}
 .formeo.formeo-editor .options-panel .prop-wrap {
   margin-bottom: 8px;
 }
@@ -1366,12 +1504,20 @@ button[class*=-clone]:hover .svg-icon {
   background-color: transparent;
 }
 .formeo.formeo-editor .panel-action-buttons {
+  display: flex;
+  justify-content: end;
+  gap: 8px;
   padding: 0 8px 8px;
 }
-.formeo.formeo-editor .panel-action-buttons::after {
-  content: "";
-  display: table;
-  clear: both;
+.formeo.formeo-editor .panel-action-buttons button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 24px;
+  gap: 4px;
+}
+.formeo.formeo-editor .panel-action-buttons .svg-icon {
+  height: 16px;
 }
 .formeo.formeo-editor .panel-action-buttons [class^=add-] {
   float: right;
@@ -1398,26 +1544,13 @@ button[class*=-clone]:hover .svg-icon {
   align-items: center;
   flex: 0;
 }
-.formeo.formeo-editor .prop-inputs .f-addon:first-child {
-  margin-right: -1px;
-}
-.formeo.formeo-editor .prop-inputs .f-addon:last-child {
-  margin-left: -1px;
+.formeo.formeo-editor .prop-inputs .f-addon input {
+  margin: 0;
 }
 .formeo.formeo-editor .prop-inputs label {
   padding-right: 1em;
   margin-bottom: 0;
 }
-.formeo.formeo-editor .prop-inputs.attrs-prop-inputs .f-addon,
-.formeo.formeo-editor .prop-inputs.attrs-prop-inputs input:not([type=checkbox]):not([type=radio]),
-.formeo.formeo-editor .prop-inputs.attrs-prop-inputs select,
-.formeo.formeo-editor .prop-inputs.attrs-prop-inputs textarea,
-.formeo.formeo-editor .prop-inputs.attrs-prop-inputs [contenteditable] {
-  flex: 2;
-}
-.formeo.formeo-editor .highlight-component {
-  box-shadow: 0 0 4px 2px rgb(153, 84, 187);
-}
 .formeo.formeo-editor .formeo-stage {
   width: 73%;
   box-sizing: border-box;
@@ -1425,13 +1558,16 @@ button[class*=-clone]:hover .svg-icon {
   margin-right: 4px;
   flex: 1 1 auto;
   position: relative;
-  transition-property: background-color, border-color;
-  transition-duration: 500ms, 333ms;
-  border: 0 dashed transparent;
+  transition-property: background-color, border;
+  transition-duration: 266ms, 266ms;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: transparent;
   background-color: rgba(255, 255, 255, 0);
   padding-left: 23px;
   padding-bottom: 8px;
   overflow: visible;
+  border-radius: 8px 0 8px 8px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -1442,10 +1578,6 @@ button[class*=-clone]:hover .svg-icon {
   justify-content: flex-start;
   gap: 16px;
 }
-.formeo.formeo-editor .formeo-stage.empty {
-  border: 3px dashed #cccccc;
-  background-color: rgba(255, 255, 255, 0.25);
-}
 .formeo.formeo-editor .formeo-stage.removing-all-fields .formeo-row {
   transition: margin-top 250ms ease-in;
 }
@@ -1457,6 +1589,75 @@ button[class*=-clone]:hover .svg-icon {
     width: calc(100% - 50px);
   }
 }
+.formeo.formeo-editor .formeo-stage.highlight-component {
+  box-shadow: 0 0 4px 2px #4F46E5;
+}
+.formeo.formeo-editor .formeo-stage .hidden {
+  display: none;
+}
+.formeo.formeo-editor .formeo-stage.empty {
+  border-color: #999999;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.formeo.formeo-editor .formeo-stage.editing-stage, .formeo.formeo-editor .formeo-stage.hovering-stage, .formeo.formeo-editor .formeo-stage.hovering-stage.empty {
+  border-color: #4F46E5;
+  border-style: solid;
+}
+.formeo.formeo-editor .formeo-stage.editing-stage .stage-tag, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-tag, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-tag {
+  display: flex;
+}
+.formeo.formeo-editor .formeo-stage.editing-stage .stage-action-btn-wrap, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-action-btn-wrap, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-action-btn-wrap {
+  display: flex;
+  border-top-right-radius: 8px;
+}
+.formeo.formeo-editor .formeo-stage.editing-stage .stage-handle, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-handle, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-handle {
+  display: none;
+}
+.formeo.formeo-editor .formeo-stage.editing-stage .formeo-row, .formeo.formeo-editor .formeo-stage.hovering-stage .formeo-row, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .formeo-row {
+  box-shadow: none;
+}
+.formeo.formeo-editor .stage-tag {
+  border: 0 none;
+  border: inherit;
+  display: none;
+  left: auto;
+  overflow: hidden;
+  padding: 0 32px 2px 8px;
+  right: -1px;
+  transition: width 266ms ease-in-out;
+  width: auto;
+  border-bottom-width: 0;
+}
+.formeo.formeo-editor .stage-edit {
+  padding: 16px;
+  background-color: #fff;
+  margin-top: 0;
+  margin-bottom: 16px;
+  border-top-left-radius: 8px;
+}
+.formeo.formeo-editor .stage-edit .panel-nav {
+  border-bottom: 0 none !important;
+}
+.formeo.formeo-editor .stage-edit .conditions-prop-inputs {
+  border-top: 1px solid #cccccc;
+}
+.formeo.formeo-editor .stage-actions {
+  right: -1px;
+  top: -24px;
+  text-align: right;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-width: 0;
+}
+.formeo.formeo-editor .stage-actions .edit-toggle,
+.formeo.formeo-editor .stage-actions .edit-toggle:focus {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 1px solid #4F46E5;
+  border-top-left-radius: 0;
+  border-top-right-radius: 8px;
+  border-top: 1px solid #4F46E5;
+}
 .formeo.formeo-editor .editing-stage .formeo-settings {
   display: block;
 }
@@ -1673,13 +1874,25 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-render .formeo-column:last-of-type {
   padding-right: 0;
 }
+.formeo.formeo-render .f-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.formeo button .svg-icon {
+  max-width: 100%;
+  max-height: 100%;
+}
 
 /*
   Mixins
 */
 .formeo-controls {
   width: 26%;
+  max-width: 224px;
   overflow: hidden;
+  container-type: inline-size;
+  container-name: controls;
 }
 
 .formeo-controls.formeo-sticky {
@@ -1867,9 +2080,6 @@ button[class*=-clone]:hover .svg-icon {
   }
   .formeo-controls .form-actions > button {
     max-width: 100%;
-    padding: 10px;
-    border-radius: 0;
-    line-height: 0;
     width: 100%;
     float: none;
     position: relative;
@@ -1892,7 +2102,6 @@ button[class*=-clone]:hover .svg-icon {
   }
   .formeo-controls .form-actions .control-icon {
     display: inline-block;
-    margin-right: 10px;
   }
 }
 .formeo-controls .field-control {
@@ -1976,6 +2185,27 @@ button[class*=-clone]:hover .svg-icon {
   padding: 2px;
 }
 
+@container controls (max-width: 46px) {
+  .control-label {
+    display: none;
+  }
+  .form-actions button {
+    padding: 2px 0;
+    text-align: center;
+  }
+  .form-actions button:first-child {
+    border-top-right-radius: 4px !important;
+    border-top-left-radius: 4px !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+  .form-actions button:last-child {
+    border-bottom-left-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+    border-top-right-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+  }
+}
 .field-control {
   cursor: move;
   list-style: none;