Changed Grouped-softkey layout on second Row

Step/wwwroot/assets/styles/base/card.less

@@ -624,7 +624,9 @@
                 &.active {
                     background-color: #1791ff;
                     color: @color-white;
-
+                }
+                &.empty{
+                    background: transparent;
                 }
             }
         }

Step/wwwroot/assets/styles/base/plc-softkeys.less

@@ -448,6 +448,9 @@
                         width: 100%;
                         background: rgba(255, 255, 255, 0.5);
                     }
+                    &.empty{
+                        background: transparent;
+                    }
                 }
             }
         }

Step/wwwroot/assets/styles/style.css

@@ -4216,6 +4216,9 @@ footer .container button.big:before {
   width: 100%;
   background: rgba(255, 255, 255, 0.5);
 }
+.soft-key .detail section.multiple span.empty {
+  background: transparent;
+}
 #nc-softkeys-container {
   width: 312px;
   height: 216px;
@@ -5838,6 +5841,9 @@ footer .container button.big:before {
   background-color: #1791ff;
   color: #fff;
 }
+.softkeys-prefered .control .multiple span.empty {
+  background: transparent;
+}
 .softkeys-prefered .control .button .fa {
   font-size: 32px;
   color: #002680;

Step/wwwroot/src/modules/base-components/cards/softkeys-prefered.vue

@@ -19,6 +19,8 @@
               </div>
               <div class="multiple" v-if="type==2">
                 <span v-for="k in keys" :key="k" :class="{active:getSoftKeyStatus(k), disabled:!disabledNoMultiple && !getSoftKeyActive(k)}">{{getSubKeyText(k)}}</span>
+                <span v-if="keys.length==4" class="empty">&nbsp;</span>
+                <span v-if="keys.length==4 || keys.length==5" class="empty">&nbsp;</span>
               </div>
               <div class="menu-container" v-if="menuOpened" :class="{bottom: verticalIndex<=0, top: verticalIndex>0}"> <!--  left : subkeyslength>3 &&  positionIndex%4 == 0, right: subkeyslength>3 && positionIndex%4 == 3 -->
                 <div class="menu">

Step/wwwroot/src/modules/under-the-hood/soft-key1.vue

@@ -8,6 +8,8 @@
       <!-- <button class="star" :class="{active: starred}" @click="toggleStar()"><i class="fa fa-star"></i></button> -->
       <section class="multiple" @click="toggleMenu()">
         <span v-for="k in keys" :key="k" :class="{active:getSoftKeyStatus(k), disabled:!disabled && !getSoftKeyActive(k)}">{{getSubKeyText(k)}}</span>
+        <span v-if="keys.length==4" class="empty">&nbsp;</span>
+        <span v-if="keys.length==4 || keys.length==5" class="empty">&nbsp;</span>
       </section>
     </div>
     <div class="menu-container" v-if="menuOpened" :class="{bottom: verticalIndex<=0, top: verticalIndex>0, left : subkeyslength>3 &&  positionIndex%4 == 0, right: subkeyslength>3 && positionIndex%4 == 3}">