Add style rule node

@@ -44,6 +44,14 @@
         </div>
         </div>
       </section>
       </section>
       <section *ngIf="ruleNode.component.type === ruleNodeType.RULE_CHAIN">
       <section *ngIf="ruleNode.component.type === ruleNodeType.RULE_CHAIN">
+        <div class="tb-details-buttons" fxLayout.xs="column">
+          <button mat-raised-button color="primary"
+                  [disabled]="(isLoading$ | async)"
+                  (click)="onEntityAction($event, 'disableAccount')"
+                  [fxShow]="!isEdit && isUserCredentialsEnabled()">
+            {{'user.disable-account' | translate }}
+          </button>
+        </div>
         <tb-entity-autocomplete required
         <tb-entity-autocomplete required
                                 [excludeEntityIds]="[ruleChainId]"
                                 [excludeEntityIds]="[ruleChainId]"
                                 [entityType]="entityType.RULE_CHAIN"
                                 [entityType]="entityType.RULE_CHAIN"

@@ -171,26 +171,40 @@
 
 
     .fc-edit {
     .fc-edit {
       .fc-nodeedit,
       .fc-nodeedit,
-      .fc-nodedelete,
-      .fc-nodeopen {
+      .fc-nodedelete {
         box-sizing: content-box;
         box-sizing: content-box;
         border: solid 2px #fff;
         border: solid 2px #fff;
         background: #f83e05;
         background: #f83e05;
         outline: none;
         outline: none;
       }
       }
+    }
 
 
-      .fc-nodeopen{
-        top: 30px;
-        right: -14px;
-
-        mat-icon{
-          width: 20px;
-          min-width: 20px;
-          height: 20px;
-          min-height: 20px;
-          font-size: 18px;
-          line-height: 18px;
-        }
+    .fc-nodeopen{
+      display: block;
+      position: absolute;
+      top: 11px;
+      right: -12px;
+      border: 1px solid #FFFFFF;
+      border-radius: 4px;
+      line-height: 18px;
+      height: 22px;
+      width: 22px;
+      background: #886CB1;
+      color: #fff;
+      text-align: center;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      mat-icon{
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        min-height: 16px;
+        font-size: 16px;
+      }
+
+      &:hover{
+        background-color: #4E2D7E;
       }
       }
     }
     }
 
 

@@ -59,8 +59,8 @@
       ×
       ×
     </div>
     </div>
   </section>
   </section>
-  <section class="fc-edit" *ngIf="node.component.type === RuleNodeType.RULE_CHAIN">
-    <div class="fc-nodeedit fc-nodeopen" (click)="openRuleChain($event, node)">
+  <section *ngIf="node.component.type === RuleNodeType.RULE_CHAIN && modelservice.isEditable()">
+    <div class="fc-nodeopen" (click)="openRuleChain($event, node)">
       <mat-icon class="material-icons" svgIcon="mdi:login"></mat-icon>
       <mat-icon class="material-icons" svgIcon="mdi:login"></mat-icon>
     </div>
     </div>
   </section>
   </section>

@@ -40,8 +40,7 @@
 
 
   :host-context(.fc-edit) {
   :host-context(.fc-edit) {
     .fc-nodeedit,
     .fc-nodeedit,
-    .fc-nodedelete,
-    .fc-nodeopen {
+    .fc-nodedelete {
       box-sizing: content-box;
       box-sizing: content-box;
       border: solid 2px #fff;
       border: solid 2px #fff;
       background: #f83e05;
       background: #f83e05;