Fix 46 CRITICAL BUGs

Change-Id: Id354491665a1d8c25a7c1f3e83fcb4d146ca2f37
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3529

35 files changed, 1678 insertions, 1477 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
index 26ae0d4d74..774b7eb798 100644
--- a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
@@ -1,264 +1,292 @@
 @import './../../../../../assets/styles/mixins.less';
 @import '../../../../../assets/styles/sprite';
+
 @smaller-screen: ~"only screen and (max-width: 1580px)";
 
-:host /deep/ input { width:100%;}
+:host /deep/ input {
+  width: 100%;
+}
 
 .attributes-table {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  text-align: left;
+
+
+  .inner-cell-div {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 20px;
+  }
+
+  .inner-cell-div-multiline {
+    max-width: 100%;
+  }
+
+  .table-header {
+    display: flex;
+    flex-direction: row;
+    flex: 0 0 auto;
+    font-weight: bold;
+    border-top: #d2d2d2 solid 1px;
+    background-color: #f2f2f2;
+
+    .table-cell {
+      color: #191919;
+      font-size: 13px;
+
+      .table-header-sort-arrow {
+        display: inline-block;
+        background-color: transparent;
+        border: none;
+        color: #AAA;
+        margin: 8px 0 0 5px;
+
+        &.up {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom: 5px solid;
+          height: 5px;
+        }
+
+        &.down {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 5px solid;
+        }
+      }
+    }
+  }
+
+  .table-rows-header {
+    border: #d2d2d2 solid 1px;
+    border-top: none;
+    display: flex;
+    align-items: center;
+
+    .archive-label {
+      margin-left: 10px;
+    }
+  }
+
+  .table-body {
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
     flex: 1;
-    height: 100%;
-    text-align: left;
-
+    background-color: @main_color_p;
+
+    .no-data {
+      border: #d2d2d2 solid 1px;
+      border-top: none;
+      text-align: center;
+      height: 100%;
+      padding: 20px;
+    }
 
-    .inner-cell-div {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        height: 20px;
+    /deep/ .selected {
+      background-color: #e6f6fb;
+      color: #009fdb;
     }
 
-    .inner-cell-div-multiline {
-        max-width: 100%;
+    &.view-mode {
+      /deep/ .dynamic-property-row:not(.selected) {
+        background-color: #f8f8f8;
+      }
     }
 
-    .table-header {
-        display: flex;
-        flex-direction:row;
-        flex: 0 0 auto;
-        font-weight:bold;
-        border-top: #d2d2d2 solid 1px;
-        background-color: #f2f2f2;
-
-        .table-cell {
-            color:#191919;
-            font-size:13px;
-            .table-header-sort-arrow {
-                display: inline-block;
-                background-color: transparent;
-                border: none;
-                color: #AAA;
-                margin: 8px 0 0 5px;
-                &.up {
-                    border-left: 5px solid transparent;
-                    border-right: 5px solid transparent;
-                    border-bottom: 5px solid;
-                    height:5px;
-                }
-                &.down {
-                    border-left: 5px solid transparent;
-                    border-right: 5px solid transparent;
-                    border-top: 5px solid;
-                }
-            }
+    .table-row {
+      display: flex;
+      flex-direction: row;
+      flex: 0 0 auto;
+
+      &.readonly {
+        background-color: #f8f8f8;
+        cursor: auto;
+      }
+
+      &:hover:not(.selected) {
+        background-color: #f8f8f8;
+        cursor: pointer;
+
+        /deep/ .dynamic-property-row:not(.selected) {
+          background-color: #f8f8f8;
+          cursor: pointer;
         }
+      }
+
+      .selected-row {
+        background-color: #e6f6fb;
+      }
+
+      .table-cell.valueCol {
+        padding: 0px;
+
+      }
     }
+  }
 
-    .table-rows-header {
-        border: #d2d2d2 solid 1px;
-        border-top:none;
-        display: flex;
-        align-items: center;
-        .archive-label{
-            margin-left: 10px;
-        }
+  .table-cell {
+    font-size: 13px;
+    flex: 1;
+    border: #d2d2d2 solid 1px;
+    border-right: none;
+    border-top: none;
+    padding: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: flex;
+    min-height: 40px;
+
+    &:last-child {
+      border-right: #d2d2d2 solid 1px;
     }
 
-    .table-body {
-        display:flex;
-        flex-direction: column;
-        overflow-y:auto;
+    // Column: Property Name
+    &.col1 {
+      flex: 1 0 190px;
+      max-width: 300px;
+      display: flex;
+      @media @smaller-screen {
+        flex: 0 0 25%;
+      }
+
+      .attribute-name {
         flex: 1;
-        background-color: @main_color_p;
-
-        .no-data {
-            border: #d2d2d2 solid 1px;
-            border-top:none;
-            text-align: center;
-            height: 100%;
-            padding: 20px;
-        }
-        /deep/.selected{
-            background-color: #e6f6fb;
-            color:  #009fdb;
-        }
-        &.view-mode{
-            /deep/ .dynamic-property-row:not(.selected){
-                background-color:#f8f8f8;
-            }
-        }
-        .table-row {
-            display: flex;
-            flex-direction:row;
-            flex: 0 0 auto;
-            &.readonly{
-                background-color: #f8f8f8;
-                cursor: auto;
-            }
-
-            &:hover:not(.selected){
-                background-color:#f8f8f8; cursor:pointer;
-                /deep/ .dynamic-property-row:not(.selected){
-                    background-color:#f8f8f8; cursor:pointer;
-                }
-            }
-
-            .selected-row {
-                background-color:#e6f6fb;
-            }
-
-            .table-cell.valueCol {
-                padding:0px;
-
-            }
-        }
-    }
-    .table-cell {
-        font-size:13px;
-        flex:1;
-        border: #d2d2d2 solid 1px;
-        border-right:none;
-        border-top:none;
-        padding:10px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow:hidden;
         display: flex;
-        min-height:40px;
+        overflow: hidden;
+        //max-width: 90%; fix bug 327139
+      }
 
-        &:last-child {
-            border-right:#d2d2d2 solid 1px;
-        }
+      .property-description-icon {
+        float: right;
+        margin-top: 4px;
+        margin-left: 15px;
+        flex: 0 0 auto;
+      }
+    }
 
-        // Column: Property Name
-        &.col1 {
-            flex: 1 0 190px;
-            max-width:300px;
-            display: flex;
-            @media @smaller-screen { flex: 0 0 25%;}
-
-            .attribute-name {
-                flex: 1;
-                display: flex;
-                overflow: hidden;
-                //max-width: 90%; fix bug 327139
-            }
-
-            .property-description-icon {
-                float: right;
-                margin-top: 4px;
-                margin-left: 15px;
-                flex: 0 0 auto;
-            }
-        }
+    // Column: Type
+    &.col2 {
+      flex: 0 0 150px;
+      max-width: 150px;
+      @media @smaller-screen {
+        flex: 0 0 20%;
+      }
+    }
 
-        // Column: Type
-        &.col2 {
-            flex: 0 0 150px;
-            max-width:150px;
-            @media @smaller-screen { flex: 0 0 20%;}
-        }
+    // Column: ES
+    &.col3 {
+      flex: 0 0 120px;
+      max-width: 120px;
+      @media @smaller-screen {
+        flex: 0 0 15%;
+      }
+    }
 
-        // Column: ES
-        &.col3 {
-            flex:0 0 120px;
-            max-width:120px;
-            @media @smaller-screen { flex: 0 0 15%;}
-        }
+    // Column: Value
+    &.valueCol {
+      flex: 2 0 250px;
+      display: flex;
+      @media @smaller-screen {
+        flex: 1 0 40%;
+      }
+    }
 
-        // Column: Value
-        &.valueCol {
-            flex: 2 0 250px;
-            display: flex;
-            @media @smaller-screen { flex: 1 0 40%;}
-        }
 
+    /deep/ .checkbox-container {
+      margin-right: 10px;
+    }
 
-        /deep/ .checkbox-container {
-            margin-right: 10px;
+    /deep/ &.round-checkbox {
+      .checkbox-container input[type=checkbox].checkbox-hidden {
+        &:checked ~ .checkbox-icon::before {
+          .sprite-new;
+          .round-checked-icon;
         }
 
-        /deep/ &.round-checkbox {
-            .checkbox-container input[type=checkbox].checkbox-hidden {
-                &:checked ~ .checkbox-icon::before {
-                    .sprite-new;
-                    .round-checked-icon;
-                }
-                &[disabled] ~ .checkbox-icon::before {
-                    .sprite-new;
-                    .round-checked-icon.disabled;
-                    background-color:inherit;
-                    border:none;
-                    //animation: addDisabledCheck 4s linear;
-                }
-            }
+        &[disabled] ~ .checkbox-icon::before {
+          .sprite-new;
+          .round-checked-icon.disabled;
+          background-color: inherit;
+          border: none;
+          //animation: addDisabledCheck 4s linear;
         }
+      }
     }
+  }
 
-    .delete-button-container {
-        max-height: 24px;
-        cursor: pointer;
+  .delete-button-container {
+    max-height: 24px;
+    cursor: pointer;
+  }
+
+  .filtered {
+    /deep/ .checkbox-label-content {
+      background-color: yellow;
     }
+  }
 
-    .filtered {
-        /deep/ .checkbox-label-content{
-            background-color: yellow;
-        }
+  .dynamic-property {
+    width: 100%;
+
+    &:last-child /deep/ .dynamic-property-row {
+      border-bottom: none;
     }
+  }
 
-    dynamic-property {
-        width:100%;
-        &:last-child /deep/ .dynamic-property-row {
-            border-bottom:none;
-        }
+  .table-row {
+    /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+      padding-left: 1em;
     }
 
-    .table-row {
-        /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #ffffff 80%);
-            padding-left: 1em;
-        }
+    &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+      padding-left: 1em;
+    }
 
-        &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
-            padding-left: 1em;
-        }
+    &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+      padding-left: 1em;
+    }
 
-        &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-            padding-left: 1em;
-        }
+    &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+      padding-left: 1em;
+    }
+  }
 
-        &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-            padding-left: 1em;
-        }
+  .prop-instance-icon {
+    vertical-align: middle;
+    margin-right: 7px;
+
+    &.defaulticon.small {
+      background-color: @main_color_q;
+      border-radius: 14px;
     }
 
-    .prop-instance-icon {
-        vertical-align: middle;
-        margin-right: 7px;
-        &.defaulticon.small {
-            background-color: @main_color_q;
-            border-radius:14px;
-        }
-        // square icons
-        &.icon-group {
-            .square-icon();
-            background-color: @main_color_a;
-
-            &::before {
-                content: "G";
-            }
-        }
-        &.icon-policy {
-            .square-icon();
-            background-color: @main_color_r;
+    // square icons
+    &.icon-group {
+      .square-icon();
+      background-color: @main_color_a;
 
-            &::before {
-                content: "P";
-            }
-        }
+      &::before {
+        content: "G";
+      }
+    }
 
+    &.icon-policy {
+      .square-icon();
+      background-color: @main_color_r;
+
+      &::before {
+        content: "P";
+      }
     }
+
+  }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
index fd572b0f2d..38339bdb8e 100644
--- a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
@@ -1,82 +1,92 @@
 @import '../../../../../../assets/styles/variables.less';
+
 .flat-children-container {
-    .dynamic-property-row {
-        /*create nested left border classes for up to 10 levels of nesting*/
-        .nested-border-loop(@i) when (@i > 0) {
-            @size: (@i - 1) *2;
-            &.nested-level-@{i} .table-cell:first-child {
-                border-left: ~"solid @{size}px #009fdb";
-            }
-            .nested-border-loop(@i - 1)
-        }
-        .nested-border-loop(10);
+  .dynamic-property-row {
+    /*create nested left border classes for up to 10 levels of nesting*/
+    .nested-border-loop(@i) when (@i > 0) {
+      @size: (@i - 1) *2;
+      &.nested-level-@{i} .table-cell:first-child {
+        border-left: ~"solid @{size}px #009fdb";
+      }
+      .nested-border-loop(@i - 1)
     }
-    dynamic-property {
-        &:first-child .dynamic-property-row.with-top-border {
-            border-top:solid 1px #d2d2d2;
-        }
-        &:not(:last-child) .dynamic-property-row {
-            border-bottom:solid 1px #d2d2d2;
-        }
+    .nested-border-loop(10);
+  }
+
+  .dynamic-property {
+    &:first-child .dynamic-property-row.with-top-border {
+      border-top: solid 1px #d2d2d2;
     }
+
+    &:not(:last-child) .dynamic-property-row {
+      border-bottom: solid 1px #d2d2d2;
+    }
+  }
 }
+
 .dynamic-property-row {
-    display:flex;
-    flex-direction:row;
-    align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 
-    &.readonly{
-        background-color: @tlv_color_t;
-        cursor: auto;
-    }
-    //for the case that the parent is disabled but the child is enabled
-    &:not(.readonly){
-        background-color: @main_color_p;
-    }
+  &.readonly {
+    background-color: @tlv_color_t;
+    cursor: auto;
+  }
+
+  //for the case that the parent is disabled but the child is enabled
+  &:not(.readonly) {
+    background-color: @main_color_p;
+  }
+
+  .table-cell {
+    flex: 1;
+    padding: 9px;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-    .table-cell {
-        flex: 1;
-        padding:9px;
-        justify-content: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    &:first-child {
+      flex: 0 0 50%;
+      border-right: #d2d2d2 solid 1px;
 
-        &:first-child {
-            flex: 0 0 50%;
-            border-right:#d2d2d2 solid 1px;
-            &:only-of-type {
-                flex: 1 1 100%;
-                border-right:none;
-            }
-        }
-        &.empty {
-            height:40px;
-        }
+      &:only-of-type {
+        flex: 1 1 100%;
+        border-right: none;
+      }
     }
-    .property-icon {
-        flex: 0 0 auto;
-        margin-right:10px;
-        align-self:center;
-        cursor:pointer;
+
+    &.empty {
+      height: 40px;
     }
+  }
+
+  .property-icon {
+    flex: 0 0 auto;
+    margin-right: 10px;
+    align-self: center;
+    cursor: pointer;
+  }
 }
 
 .filtered {
-    /deep/ .checkbox-label-content{
-        background-color: yellow;
-    }
+  /deep/ .checkbox-label-content {
+    background-color: yellow;
+  }
 }
-.inner-cell-div{
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inline;
-    padding-left: 8px;
+
+.inner-cell-div {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inline;
+  padding-left: 8px;
 }
+
 .error {
-    border: solid 1px @func_color_q;
-    color: @func_color_q;
-    outline: none;
-    box-sizing: border-box;
+  border: solid 1px @func_color_q;
+  color: @func_color_q;
+  outline: none;
+  box-sizing: border-box;
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 1007292854..601aaae2f9 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,84 +1,94 @@
 @import '../../../../../../assets/styles/variables.less';
+
 .flat-children-container {
-    .dynamic-property-row {
-        /*create nested left border classes for up to 10 levels of nesting*/
-        .nested-border-loop(@i) when (@i > 0) {
-            @size: (@i - 1) *2;
-            &.nested-level-@{i} .table-cell:first-child {
-                border-left: ~"solid @{size}px #009fdb";
-            }
-            .nested-border-loop(@i - 1)
-        }
-        .nested-border-loop(10);
+  .dynamic-property-row {
+    /*create nested left border classes for up to 10 levels of nesting*/
+    .nested-border-loop(@i) when (@i > 0) {
+      @size: (@i - 1) *2;
+      &.nested-level-@{i} .table-cell:first-child {
+        border-left: ~"solid @{size}px #009fdb";
+      }
+      .nested-border-loop(@i - 1)
     }
-    dynamic-property {
-        &:first-child .dynamic-property-row.with-top-border {
-            border-top:solid 1px #d2d2d2;
-        }
-        &:not(:last-child) .dynamic-property-row {
-            border-bottom:solid 1px #d2d2d2;
-        }
+    .nested-border-loop(10);
+  }
+
+  .dynamic-property {
+    &:first-child .dynamic-property-row.with-top-border {
+      border-top: solid 1px #d2d2d2;
     }
+
+    &:not(:last-child) .dynamic-property-row {
+      border-bottom: solid 1px #d2d2d2;
+    }
+  }
 }
+
 .dynamic-property-row {
-    display:flex;
-    flex-direction:row;
-    align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 
-    &.readonly{
-        background-color: @tlv_color_t;
-        cursor: auto;
-    }
-    //for the case that the parent is disabled but the child is enabled
-    &:not(.readonly){
-        background-color: @main_color_p;
-    }
+  &.readonly {
+    background-color: @tlv_color_t;
+    cursor: auto;
+  }
+
+  //for the case that the parent is disabled but the child is enabled
+  &:not(.readonly) {
+    background-color: @main_color_p;
+  }
+
+  .table-cell {
+    flex: 1;
+    padding: 9px;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:first-child {
+      flex: 0 0 50%;
+      border-right: #d2d2d2 solid 1px;
 
-    .table-cell {
-        flex: 1;
-        padding:9px;
-        justify-content: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &:first-child {
-            flex: 0 0 50%;
-            border-right:#d2d2d2 solid 1px;
-            &:only-of-type {
-                flex: 1 1 100%;
-                border-right:none;
-            }
-        }
-        &.empty {
-            height:40px;
-        }
+      &:only-of-type {
+        flex: 1 1 100%;
+        border-right: none;
+      }
     }
-    .property-icon {
-        flex: 0 0 auto;
-        margin-right:10px;
-        align-self:center;
-        cursor:pointer;
+
+    &.empty {
+      height: 40px;
     }
-    
+  }
+
+  .property-icon {
+    flex: 0 0 auto;
+    margin-right: 10px;
+    align-self: center;
+    cursor: pointer;
+  }
+
 }
 
 .filtered {
-    /deep/ .checkbox-label-content{
-        background-color: yellow;
-    }
+  /deep/ .checkbox-label-content {
+    background-color: yellow;
+  }
 }
-.inner-cell-div{
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inline;
-    padding-left: 8px;
+
+.inner-cell-div {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inline;
+  padding-left: 8px;
 }
+
 .error {
-    border: solid 1px @func_color_q;
-    color: @func_color_q;
-    outline: none;
-    box-sizing: border-box;
+  border: solid 1px @func_color_q;
+  color: @func_color_q;
+  outline: none;
+  box-sizing: border-box;
 }
 
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 8c2c6ce940..ed5db0bc64 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -1,265 +1,293 @@
 @import './../../../../../assets/styles/mixins.less';
 @import '../../../../../assets/styles/sprite';
+
 @smaller-screen: ~"only screen and (max-width: 1580px)";
 
-:host /deep/ input { width:100%;}
+:host /deep/ input {
+  width: 100%;
+}
 
 .properties-table {
-    display:flex;
-    flex-direction:column;
-    flex: 1;
-    height:100%;
-    text-align:left;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  text-align: left;
+
+
+  .inner-cell-div {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 20px;
+  }
+
+  .inner-cell-div-multiline {
+    max-width: 100%;
+  }
+
+  .table-header {
+    display: flex;
+    flex-direction: row;
+    flex: 0 0 auto;
+    font-weight: bold;
+    border-top: #d2d2d2 solid 1px;
+    background-color: #f2f2f2;
 
+    .table-cell {
+      color: #191919;
+      font-size: 13px;
+
+      .table-header-sort-arrow {
+        display: inline-block;
+        background-color: transparent;
+        border: none;
+        color: #AAA;
+        margin: 8px 0 0 5px;
+
+        &.up {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom: 5px solid;
+          height: 5px;
+        }
 
-    .inner-cell-div {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        height: 20px;
+        &.down {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 5px solid;
+        }
+      }
     }
+  }
 
-    .inner-cell-div-multiline {
-        max-width: 100%;
+  .table-rows-header {
+    border: #d2d2d2 solid 1px;
+    border-top: none;
+    display: flex;
+    align-items: center;
+
+    .archive-label {
+      margin-left: 10px;
     }
+  }
 
-    .table-header {
-        display: flex;
-        flex-direction:row;
-        flex: 0 0 auto;
-        font-weight:bold;
-        border-top: #d2d2d2 solid 1px;
-        background-color: #f2f2f2;
-
-        .table-cell {
-            color:#191919;
-            font-size:13px;
-            .table-header-sort-arrow {
-                display: inline-block;
-                background-color: transparent;
-                border: none;
-                color: #AAA;
-                margin: 8px 0 0 5px;
-                &.up {
-                    border-left: 5px solid transparent;
-                    border-right: 5px solid transparent;
-                    border-bottom: 5px solid;
-                    height:5px;
-                }
-                &.down {
-                    border-left: 5px solid transparent;
-                    border-right: 5px solid transparent;
-                    border-top: 5px solid;                    
-                }
-            }
-        }
+  .table-body {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    flex: 1;
+    background-color: @main_color_p;
+
+    .no-data {
+      border: #d2d2d2 solid 1px;
+      border-top: none;
+      text-align: center;
+      height: 100%;
+      padding: 20px;
     }
 
-    .table-rows-header {
-        border: #d2d2d2 solid 1px;
-        border-top:none;
-        display: flex;
-        align-items: center;
-        .archive-label{
-            margin-left: 10px;
-        }
+    /deep/ .selected {
+      background-color: #e6f6fb;
+      color: #009fdb;
     }
 
-    .table-body {
-        display:flex;
-        flex-direction: column;
-        overflow-y:auto;
-        flex: 1;
-        background-color: @main_color_p;
-
-        .no-data {
-            border: #d2d2d2 solid 1px;
-            border-top:none;
-            text-align: center;
-            height: 100%;
-            padding: 20px;
-        }
-        /deep/.selected{
-            background-color: #e6f6fb;
-            color:  #009fdb;
-        }
-        &.view-mode{
-            /deep/ .dynamic-property-row:not(.selected){
-                background-color:#f8f8f8;
-            }
-        }
-        .table-row {
-            display: flex;
-            flex-direction:row;
-            flex: 0 0 auto;
-            &.readonly{
-                background-color: #f8f8f8;
-                cursor: auto;
-            }
-
-            &:hover:not(.selected){
-                background-color:#f8f8f8; cursor:pointer;
-                /deep/ .dynamic-property-row:not(.selected){
-                    background-color:#f8f8f8; cursor:pointer;
-                }
-            }
-
-            .selected-row {
-                background-color:#e6f6fb;
-            }
-
-            .table-cell.valueCol {
-                padding:0px;
-
-            }
+    &.view-mode {
+      /deep/ .dynamic-property-row:not(.selected) {
+        background-color: #f8f8f8;
+      }
+    }
+
+    .table-row {
+      display: flex;
+      flex-direction: row;
+      flex: 0 0 auto;
+
+      &.readonly {
+        background-color: #f8f8f8;
+        cursor: auto;
+      }
+
+      &:hover:not(.selected) {
+        background-color: #f8f8f8;
+        cursor: pointer;
+
+        /deep/ .dynamic-property-row:not(.selected) {
+          background-color: #f8f8f8;
+          cursor: pointer;
         }
+      }
+
+      .selected-row {
+        background-color: #e6f6fb;
+      }
+
+      .table-cell.valueCol {
+        padding: 0px;
+
+      }
     }
-    .table-cell {
-        font-size:13px;
-        flex:1;
-        border: #d2d2d2 solid 1px;
-        border-right:none;
-        border-top:none;
-        padding:10px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow:hidden;
+  }
+
+  .table-cell {
+    font-size: 13px;
+    flex: 1;
+    border: #d2d2d2 solid 1px;
+    border-right: none;
+    border-top: none;
+    padding: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: flex;
+    min-height: 40px;
+
+    &:last-child {
+      border-right: #d2d2d2 solid 1px;
+    }
+
+    // Column: Property Name
+    &.col1 {
+      flex: 1 0 190px;
+      max-width: 300px;
+      display: flex;
+      @media @smaller-screen {
+        flex: 0 0 25%;
+      }
+
+      .property-name {
+        flex: 1;
         display: flex;
-        min-height:40px;
+        overflow: hidden;
+        //max-width: 90%; fix bug 327139
+      }
 
-        &:last-child {
-            border-right:#d2d2d2 solid 1px;
-        }
+      .property-description-icon {
+        float: right;
+        margin-top: 4px;
+        margin-left: 15px;
+        flex: 0 0 auto;
+      }
+    }
 
-        // Column: Property Name
-        &.col1 {
-            flex: 1 0 190px;
-            max-width:300px;
-            display: flex;            
-            @media @smaller-screen { flex: 0 0 25%;}
-
-            .property-name {
-                flex: 1;
-                display: flex;
-                overflow: hidden;
-                //max-width: 90%; fix bug 327139
-            }
-
-            .property-description-icon {
-                float: right;
-                margin-top: 4px;
-                margin-left: 15px;
-                flex: 0 0 auto;
-            }
-        }
+    // Column: Type
+    &.col2 {
+      flex: 0 0 150px;
+      max-width: 150px;
+      @media @smaller-screen {
+        flex: 0 0 20%;
+      }
+    }
 
-        // Column: Type
-        &.col2 {
-            flex: 0 0 150px;
-            max-width:150px;
-            @media @smaller-screen { flex: 0 0 20%;}
-        }
+    // Column: ES
+    &.col3 {
+      flex: 0 0 120px;
+      max-width: 120px;
+      @media @smaller-screen {
+        flex: 0 0 15%;
+      }
+    }
 
-        // Column: ES
-        &.col3 {
-            flex:0 0 120px;
-            max-width:120px;
-            @media @smaller-screen { flex: 0 0 15%;}
-        }
+    // Column: Value
+    &.valueCol {
+      flex: 2 0 250px;
+      display: flex;
+      @media @smaller-screen {
+        flex: 1 0 40%;
+      }
+    }
 
-        // Column: Value
-        &.valueCol {
-            flex: 2 0 250px;
-            display: flex;
-            @media @smaller-screen { flex: 1 0 40%;}
-        }
 
+    /deep/ .checkbox-container {
+      margin-right: 10px;
+    }
 
-        /deep/ .checkbox-container {
-            margin-right: 10px;
+    /deep/ &.round-checkbox {
+      .checkbox-container input[type=checkbox].checkbox-hidden {
+        &:checked ~ .checkbox-icon::before {
+          .sprite-new;
+          .round-checked-icon;
         }
 
-        /deep/ &.round-checkbox {
-            .checkbox-container input[type=checkbox].checkbox-hidden {
-                &:checked ~ .checkbox-icon::before {
-                    .sprite-new;
-                    .round-checked-icon;
-                }
-                &[disabled] ~ .checkbox-icon::before {
-                    .sprite-new;
-                    .round-checked-icon.disabled;
-                    background-color:inherit;
-                    border:none;
-                    //animation: addDisabledCheck 4s linear;
-                }
-            }
+        &[disabled] ~ .checkbox-icon::before {
+          .sprite-new;
+          .round-checked-icon.disabled;
+          background-color: inherit;
+          border: none;
+          //animation: addDisabledCheck 4s linear;
         }
+      }
     }
+  }
 
-    .delete-button-container {
-        max-height: 24px;
-        cursor: pointer;
+  .delete-button-container {
+    max-height: 24px;
+    cursor: pointer;
+  }
+
+  .filtered {
+    /deep/ .checkbox-label-content {
+      background-color: yellow;
     }
+  }
 
-    .filtered {
-        /deep/ .checkbox-label-content{
-            background-color: yellow;
-        }
+  .dynamic-property {
+    width: 100%;
+
+    &:last-child /deep/ .dynamic-property-row {
+      border-bottom: none;
     }
+  }
 
-    dynamic-property {
-        width:100%;
-        &:last-child /deep/ .dynamic-property-row {
-            border-bottom:none;
-        }
+  .table-row {
+    /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+      padding-left: 1em;
     }
 
-    .table-row {
-        /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #ffffff 80%);
-            padding-left: 1em;
-        }
+    &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+      padding-left: 1em;
+    }
 
-        &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
-            padding-left: 1em;
-        }
+    &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+      padding-left: 1em;
+    }
 
-        &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-            padding-left: 1em;
-        }
+    &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+      padding-left: 1em;
+    }
+  }
 
-        &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-            padding-left: 1em;
-        }
+  .prop-instance-icon {
+    vertical-align: middle;
+    margin-right: 7px;
+
+    &.defaulticon.small {
+      background-color: @main_color_q;
+      border-radius: 14px;
     }
 
-    .prop-instance-icon {
-        vertical-align: middle;
-        margin-right: 7px;
-        &.defaulticon.small {
-            background-color: @main_color_q;
-            border-radius:14px;           
-        }
-        // square icons
- 
-        &.icon-group {
-            .square-icon();
-            background-color: @main_color_a;
-
-            &::before {
-                content: "G";
-            }
-        }
-        &.icon-policy {
-            .square-icon();
-            background-color: @main_color_r;
+    // square icons
 
-            &::before {
-                content: "P";
-            }
-        }
+    &.icon-group {
+      .square-icon();
+      background-color: @main_color_a;
 
+      &::before {
+        content: "G";
+      }
     }
+
+    &.icon-policy {
+      .square-icon();
+      background-color: @main_color_r;
+
+      &::before {
+        content: "P";
+      }
+    }
+
+  }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
index edcb87db3d..df3797e069 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
@@ -1,76 +1,94 @@
 @import './../../../../../assets/styles/variables.less';
 @import './../../../../../assets/styles/mixins.less';
-.main-container{
+
+.main-container {
   color: @main_color_m;
 }
+
 .select-req-or-cap-span {
   float: left;
   margin-right: 15px;
   font-size: 13px;
 }
-.select-type-label{
+
+.select-type-label {
   .m_12_m;
   margin-bottom: 2px;
 }
-.select-type{
+
+.select-type {
   display: flex;
   margin-bottom: 10px;
-  ui-element-dropdown{
+
+  .ui-element-dropdown {
     width: 40%;
     font-size: 13px;
-    /deep/ select{
+
+    /deep/ select {
       height: 31px;
     }
   }
 }
-.table-and-list-container{
+
+.table-and-list-container {
   display: flex;
   padding-top: 10px;
-  .inner-container{
+
+  .inner-container {
     height: 300px;
     overflow-y: auto;
     border: @main_color_o solid 1px;
   }
-  .inner-container:not(:last-of-type){
+
+  .inner-container:not(:last-of-type) {
     border-right: none;
   }
+
   .requirements-or-capabilities-container {
     width: 40%;
-    &.empty-list{
+
+    &.empty-list {
       background-color: @tlv_color_t;
       text-align: center;
-      &:before{
+
+      &:before {
         content: 'Select "type" above';
         line-height: 298px;
       }
     }
-    .req-or-cap-item{
+
+    .req-or-cap-item {
       border-bottom: @main_color_o solid 1px;
       padding: 10px;
       font-size: 13px;
-      &:hover:not(.selected){
-        background-color:@tlv_color_t; cursor:pointer;
+
+      &:hover:not(.selected) {
+        background-color: @tlv_color_t;
+        cursor: pointer;
       }
     }
   }
-  .properties-table-container{
+
+  .properties-table-container {
     width: 60%;
     display: flex;
-    &.cap-selected{
+
+    &.cap-selected {
       background-color: @tlv_color_t;
       border: @main_color_a solid 1px;
-      -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
-      -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
-      box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+      -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
+      -moz-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
+      box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
     }
-    properties-table{
+
+    .properties-table {
       margin: 15px;
       width: 100%;
     }
   }
 }
 
-.selected{
+.selected {
   color: @main_color_a;
   background-color: @tlv_color_v;
   border-left: @main_color_a solid 4px;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index 9b1535864e..f854f809d8 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -12,22 +12,26 @@
     color: @main_color_a;
     box-shadow: 0 2px 7px @main_color_o;
     border-bottom: 1px solid @main_color_o;
+
     .checkbox-label {
       margin-top: 14px;
+
       .checkbox-label-content {
         font-size: 14px;
       }
     }
+
     .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content {
       opacity: 0.5;
     }
+
     .delete-btn {
       background-position: -137px -415px;
       width: 24px;
       height: 24px
     }
 
-    loader {
+    .loader {
       top: 20px;
     }
   }
@@ -50,19 +54,24 @@
         justify-content: space-between;
         margin-left: 5px;
         width: 180px;
+
         .delete-icon {
           visibility: hidden;
         }
+
         &:not(.readonly):hover {
           .a_1;
         }
-        &:hover .delete-icon{
+
+        &:hover .delete-icon {
           visibility: visible;
         }
+
         &.readonly {
           opacity: 0.5;
         }
       }
+
       .filter-desc {
         .sdc-ellipsis;
         width: 220px;
@@ -72,19 +81,21 @@
 
     }
   }
+
   .w-sdc-designer-sidebar-section-node-filter-footer {
     margin-top: 10px;
     margin-bottom: 10px;
     text-align: center;
     width: 100%;
   }
+
   .w-sdc-designer-sidebar-section-node-filter-footer-action {
     width: 180px;
     margin-top: 10px;
   }
 }
 
-/deep/.sdc-accordion {
+/deep/ .sdc-accordion {
   margin-bottom: 0;
   display: grid;
 
@@ -104,11 +115,12 @@
   .sdc-accordion-body.open {
     padding-left: 0;
     padding-top: 0;
+
     .sdc-accordion-header { /*Second level - nested accordion */
       background-color: #f8f8f8;
       padding: 4px 20px 4px 37px;
       border-bottom: 1px solid #d2d2d2;
-      border-left:none;
+      border-left: none;
       height: 30px;
     }
   }
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
index e219d49aa4..bbefbcb4b2 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
@@ -1,3 +1,3 @@
-dynamic-element {
+.dynamic-element {
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
index ea3e35140e..d1291d6c2c 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
@@ -1,11 +1,11 @@
 @import '../../../../../../assets/styles/variables';
 
-/deep/ ui-element-dropdown {
+/deep/ .ui-element-dropdown {
 
-    select {
-        text-indent: 6px;
-        border: solid 1px @main_color_o;
-        width: 100%;
-    }
+  select {
+    text-indent: 6px;
+    border: solid 1px @main_color_o;
+    width: 100%;
+  }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
index d320c7ff8b..4c9d31463b 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
@@ -1,17 +1,17 @@
 @import '../../../../../../assets/styles/variables';
 
-/deep/ ui-element-input {
+/deep/ .ui-element-input {
 
-    input {
-        text-indent: 6px;
-        border: solid 1px @main_color_o;
-    }
+  input {
+    text-indent: 6px;
+    border: solid 1px @main_color_o;
+  }
 
-    .error {
-        border: solid 1px @func_color_q;
-        color: @func_color_q;
-        outline: none;
-        box-sizing: border-box;
-    }
+  .error {
+    border: solid 1px @func_color_q;
+    color: @func_color_q;
+    outline: none;
+    box-sizing: border-box;
+  }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
index 8073c3858e..e0e748d16a 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
@@ -1,17 +1,17 @@
 @import '../../../../../../assets/styles/variables';
 
-/deep/ ui-element-integer-input {
+/deep/ .ui-element-integer-input {
 
-    input {
-        text-indent: 6px;
-        border: solid 1px @main_color_o;
-    }
+  input {
+    text-indent: 6px;
+    border: solid 1px @main_color_o;
+  }
 
-    .error {
-        border: solid 1px @func_color_q;
-        color: @func_color_q;
-        outline: none;
-        box-sizing: border-box;
-    }
+  .error {
+    border: solid 1px @func_color_q;
+    color: @func_color_q;
+    outline: none;
+    box-sizing: border-box;
+  }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
index 5be443f7b6..545fe65cfb 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
@@ -1,36 +1,36 @@
 @import '../../../../../../assets/styles/variables';
 
 .popover-input-wrapper {
-    display: flex;
+  display: flex;
 }
 
-/deep/ ui-element-popover-input {
+/deep/ .ui-element-popover-input {
 
-    .popover {
-        max-width: 350px;
-        width: 350px;
-    }
-
-    .edit-subnet-wrapper {
-        padding: 12px;
+  .popover {
+    max-width: 350px;
+    width: 350px;
+  }
 
-        .subnet-value {
-            width: 100%;
-            resize: none;
-        }
-    }
-
-    input {
-        padding-right: 6px;
-        padding-left: 6px;
-        border: solid 1px @main_color_o;
-    }
+  .edit-subnet-wrapper {
+    padding: 12px;
 
-    .error {
-        border: solid 1px @func_color_q;
-        color: @func_color_q;
-        outline: none;
-        box-sizing: border-box;
+    .subnet-value {
+      width: 100%;
+      resize: none;
     }
+  }
+
+  input {
+    padding-right: 6px;
+    padding-left: 6px;
+    border: solid 1px @main_color_o;
+  }
+
+  .error {
+    border: solid 1px @func_color_q;
+    color: @func_color_q;
+    outline: none;
+    box-sizing: border-box;
+  }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
index 03b2a70667..75cfb95e86 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
@@ -1,145 +1,147 @@
 @import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/mixins';
 @import '../../../../../assets/styles/sprite-old';
-/deep/ modal {
-    display: none;
+
+/deep/ .modal {
+  display: none;
 }
 
 .custom-modal {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 15007;
-    overflow: visible;
-    margin: auto;
-    display: flex;
-    align-items: center;
-
-    .ng2-modal-content {
-        background: #fff;
-        width: 100%;
-        box-shadow: 0 5px 15px rgba(0,0,0,.5);
-        border-radius: 4px;
-
-
-        .ng2-modal-body{
-            padding: 20px;
-        }
-
-        .ng2-modal-header{
-            .m_18_r;
-            font-weight: bold;
-
-            -webkit-box-flex: 1;
-            -ms-flex-positive: 1;
-            flex-grow: 1;
-
-            height: 50px;
-            line-height: 50px;
-            margin: 0px 20px;
-
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-
-            text-align: left;
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-
-            &.ng-draggable {
-                cursor: move;
-                user-select: none;
-            }
-
-            &.modal-type-standard {
-                border-bottom: solid 3px @main_color_a;
-            }
-
-            &.modal-type-error {
-                border-bottom: solid 3px @func_color_q;
-            }
-
-            &.modal-type-alert{
-                border-bottom: solid 3px @main_color_h;
-            }
-
-            .title{
-                .s_18_r;
-                -webkit-box-flex: 999;
-                -ms-flex-positive: 999;
-                flex-grow: 999;
-            }
-            .close-button{
-                .sprite;
-                .sprite.x-btn-black;
-                cursor: pointer;
-            }
-        }
-
-        .ng2-modal-footer{
-            background-color: @tlv_color_t;
-            padding: 17px 30px;
-            clear: both;
-            -webkit-box-flex: 1;
-            -ms-flex-positive: 1;
-            flex-grow: 1;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-            -webkit-box-pack: end;
-            -ms-flex-pack: end;
-            justify-content: flex-end;
-            border-radius: 4px;
-            button{
-                margin: 0 12px 0 6px;
-            }
-        }
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15007;
+  overflow: visible;
+  margin: auto;
+  display: flex;
+  align-items: center;
+
+  .ng2-modal-content {
+    background: #fff;
+    width: 100%;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+    border-radius: 4px;
+
+
+    .ng2-modal-body {
+      padding: 20px;
     }
-}
 
-.modal-background {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: #000;
-    opacity: 0.5;
-    z-index: 900;
-
-    &.transparent {
-        background-color: transparent;
+    .ng2-modal-header {
+      .m_18_r;
+      font-weight: bold;
+
+      -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+      flex-grow: 1;
+
+      height: 50px;
+      line-height: 50px;
+      margin: 0px 20px;
+
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+
+      text-align: left;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+
+      &.ng-draggable {
+        cursor: move;
+        user-select: none;
+      }
+
+      &.modal-type-standard {
+        border-bottom: solid 3px @main_color_a;
+      }
+
+      &.modal-type-error {
+        border-bottom: solid 3px @func_color_q;
+      }
+
+      &.modal-type-alert {
+        border-bottom: solid 3px @main_color_h;
+      }
+
+      .title {
+        .s_18_r;
+        -webkit-box-flex: 999;
+        -ms-flex-positive: 999;
+        flex-grow: 999;
+      }
+
+      .close-button {
+        .sprite;
+        .sprite.x-btn-black;
+        cursor: pointer;
+      }
     }
+
+    .ng2-modal-footer {
+      background-color: @tlv_color_t;
+      padding: 17px 30px;
+      clear: both;
+      -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+      flex-grow: 1;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-pack: end;
+      -ms-flex-pack: end;
+      justify-content: flex-end;
+      border-radius: 4px;
+
+      button {
+        margin: 0 12px 0 6px;
+      }
+    }
+  }
 }
 
+.modal-background {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 900;
+
+  &.transparent {
+    background-color: transparent;
+  }
+}
 
 
 .xl {
-    width: 1200px;
+  width: 1200px;
 }
 
 .l {
-    width: 875px;
+  width: 875px;
 }
 
 .md {
-    width: 650px;
+  width: 650px;
 }
 
 .sm {
-    width: 552px;
+  width: 552px;
 }
 
 .xsm {
-    width: 432px;
+  width: 432px;
 }
 
 body.modal-open {
-    overflow: hidden;
+  overflow: hidden;
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
index 3a2168aeb0..959a99663a 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
@@ -2,52 +2,59 @@
 
 @circle_size: 13px;
 
-.custom-modal{
+.custom-modal {
   font-family: @font-opensans-regular;
 }
 
-/deep/ multi-steps-wizard {
+/deep/ .multi-steps-wizard {
   display: none;
 }
 
-.ng2-modal-header{
+.ng2-modal-header {
   border: none !important;
 }
 
-.ng2-modal-body{
+.ng2-modal-body {
   padding-top: 0 !important;
 }
 
-header{
+header {
   margin-bottom: 10px;
-  .dynamic-header-container{
+
+  .dynamic-header-container {
     position: relative;
     top: -9px;
   }
-  .steps-header{
+
+  .steps-header {
     display: flex;
-    .step-title{
+
+    .step-title {
       flex: 1;
-      .title-text{
+
+      .title-text {
         width: 100%;
         text-align: center;
         line-height: 40px;
         background-color: @tlv_color_u;
         font-size: 13px;
       }
-      .line{
+
+      .line {
         width: calc(~'100% - @{circle_size}');
         position: relative;
         left: calc(~'(100% - @{circle_size})/2 * (-1)');
         float: left;
         height: 2px;
-        .inner-line{
+
+        .inner-line {
           background-color: @main_color_a;
           height: 100%;
         }
       }
-      .circle{
-        margin:0 auto;
+
+      .circle {
+        margin: 0 auto;
         border: @main_color_o solid 1px;
         height: @circle_size;
         width: @circle_size;
@@ -57,14 +64,17 @@ header{
         background-color: @main_color_p;
         z-index: 1;
       }
-      .full-circle{
+
+      .full-circle {
         border-color: @main_color_a;
         background-color: @main_color_a;
       }
-      &.active{
+
+      &.active {
         color: @main_color_a;
         font-family: @font-opensans-medium;
-        .circle{
+
+        .circle {
           border-color: @main_color_a;
         }
       }
@@ -72,17 +82,21 @@ header{
   }
 }
 
-.navigation-buttons{
+.navigation-buttons {
   padding-left: 6px;
   border-left: 1px solid @main_color_a;
-  .navigation-button{
+
+  .navigation-button {
     padding: 0 8px;
-    .navigation-icon{
+
+    .navigation-icon {
       margin: 3px 0;
-      &.blue-arrow-back{
+
+      &.blue-arrow-back {
         float: left;
       }
-      &.white-arrow-next{
+
+      &.white-arrow-next {
         float: right;
       }
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
index f7b18b1cc8..8f666bd2a5 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
@@ -1,85 +1,86 @@
 @import '../../../../../assets/styles/variables';
 
-tab {
-    height: 100%;
+.tab {
+  height: 100%;
 }
 
 .tabs {
-    display:flex;
-    flex: 0 0 auto;
-    flex-direction:row;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
 }
 
 .tab {
-    flex: 1 0 auto;
-    cursor: pointer;
-    padding: .5em;
+  flex: 1 0 auto;
+  cursor: pointer;
+  padding: .5em;
 }
 
 .tab-content-container {
-    flex: 1;
-    width:100%;
-    overflow-y:hidden;
-    overflow-x:hidden;
+  flex: 1;
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 .tab-content {
-    height:100%;
+  height: 100%;
 }
 
 /*Tab styles*/
-.tabs{
-    &.round-tabs .tab{
-        background-color: #f8f8f8;
-        color: #959595;
-        border: solid 1px #d2d2d2;
-        border-bottom:none;
-        border-left:none;
-        position:relative;
+.tabs {
+  &.round-tabs .tab {
+    background-color: #f8f8f8;
+    color: #959595;
+    border: solid 1px #d2d2d2;
+    border-bottom: none;
+    border-left: none;
+    position: relative;
 
-        &:first-child {
-            border-left:solid 1px #d2d2d2;
-        }
+    &:first-child {
+      border-left: solid 1px #d2d2d2;
+    }
 
-        &.active {
-            background-color:#009fdb;
-            color:#e9e9e9;
-            border-color:#009fdb;
-        }
+    &.active {
+      background-color: #009fdb;
+      color: #e9e9e9;
+      border-color: #009fdb;
+    }
 
-        .tab-indication {
-            position: absolute;
-            top: -10px;
-            background-color: #009fdb;
-            right: 10px;
-            padding: 2px 0;
-            border-radius: 15px;
-            border: solid 1px #d2d2d2;
-            color:white;
-            width: 25px;
-            height: 25px;
-            text-align: center;
+    .tab-indication {
+      position: absolute;
+      top: -10px;
+      background-color: #009fdb;
+      right: 10px;
+      padding: 2px 0;
+      border-radius: 15px;
+      border: solid 1px #d2d2d2;
+      color: white;
+      width: 25px;
+      height: 25px;
+      text-align: center;
 
-        }
     }
+  }
+
+  &.simple-tabs .tab {
+    font-size: 12px;
+    color: @main_color_n;
 
-    &.simple-tabs .tab {
-        font-size: 12px;
-        color: @main_color_n;
+    &:after {
+      display: block;
+      content: '';
+      border-bottom: 2px solid @main_color_a;
+      transform: scaleX(0);
+      transition: transform 200ms ease-in-out;
+    }
 
-        &:after {
-            display:block;
-            content: '';
-            border-bottom: 2px solid @main_color_a;
-            transform: scaleX(0);
-            transition: transform 200ms ease-in-out;
-        }
+    &.active {
+      color: @main_color_a;
 
-        &.active {
-            color: @main_color_a;
-            &:after {
-                transform: scaleX(1.2);
-            }
-        }
+      &:after {
+        transform: scaleX(1.2);
+      }
     }
+  }
 }
diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
index 386d243976..9cce0a51c6 100644
--- a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
@@ -17,7 +17,7 @@
   height: 100%;
 }
 
-/deep/ tabs {
+/deep/ .tabs {
   display: flex;
   flex-direction: column;
   height: 100%;
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
index 188fb7b5ef..4ceb43ef5d 100644
--- a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
@@ -14,6 +14,7 @@
 
   .i-sdc-form-item {
     width: 250px;
+
     &.operation {
       width: 60px;
     }
@@ -22,20 +23,25 @@
   .rule-builder-content {
     display: flex;
     align-items: flex-end;
+
     .rule-input-field {
       flex: 1;
+
       &:not(:last-of-type) {
         margin-right: 20px;
       }
-      &.operator{
+
+      &.operator {
         width: 55px;
         flex: 0 1 auto;
       }
+
       &.assigned-value-field {
         margin-bottom: 10px;
       }
-      /deep/ ui-element-dropdown select,
-      /deep/ ui-element-input input {
+
+      /deep/ .ui-element-dropdown select,
+      /deep/ .ui-element-input input {
         height: 30px;
       }
     }
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
index b3e5ef3a0c..aebea3bea6 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
@@ -1,4 +1,4 @@
-:host(composition-graph) {
+:host(.composition-graph) {
   flex: 1;
   padding-top: 53px;
 }
@@ -34,7 +34,7 @@
     right: 310px;
   }
 
-  ng2-zone-container {
+  .ng2-zone-container {
     display: flex;
     margin-left: 10px;
   }
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
index 07f9aa2135..87e9ae1e03 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
@@ -1,4 +1,4 @@
-connection-wizard-header {
-    display: block;
-    margin-bottom: 15px;
+.connection-wizard-header {
+  display: block;
+  margin-bottom: 15px;
 }
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less
index 316d49e406..2d77d9ae4a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less
@@ -24,7 +24,7 @@
   align-items: center;
   justify-content: center;
 
-  svg-icon {
+  .svg-icon {
     position: relative;
     right: -3px;
 
@@ -34,7 +34,6 @@
   }
 }
 
-
 .cell {
   min-height: 50px;
   padding: 10px;
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less
index 4c7f8aba48..4c72281626 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less
@@ -44,7 +44,7 @@
       height: 38px;
       line-height: 35px;
 
-      svg-icon {
+      .svg-icon {
         margin: 13px 6px;
       }
     }
@@ -142,11 +142,13 @@
         position: relative;
         top: 2px;
       }
+
       /deep/ .tooltip-inner {
         padding: 2px;
         max-width: 270px;
         font-size: 11px;
       }
+
       &.remove {
         padding: 10px;
         font-size: 10px;
@@ -204,7 +206,8 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    sdc-button {
+
+    .sdc-button {
       margin: 0 5px;
     }
   }
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less
index 12eacc6473..55fb59c526 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less
@@ -21,52 +21,52 @@
 @import '../../../../../../../assets/styles/variables.less';
 
 .remove {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    svg-icon {
-        position: relative;
-        right: -3px;
+  .svg-icon {
+    position: relative;
+    right: -3px;
 
-        &:hover {
-            cursor: pointer;
-        }
+    &:hover {
+      cursor: pointer;
     }
+  }
 }
 
 .cell {
-    min-height: 50px;
-    padding: 10px;
-    display: flex;
-    align-items: center;
+  min-height: 50px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
 
-    > * {
-        flex-basis: 100%;
-    }
+  > * {
+    flex-basis: 100%;
+  }
 
-    /deep/ select {
-        height: 30px;
-    }
+  /deep/ select {
+    height: 30px;
+  }
 
-    input {
-        height: 30px;
-        border: none;
-        padding-left: 10px;
-    }
+  input {
+    height: 30px;
+    border: none;
+    padding-left: 10px;
+  }
 
-    select {
-        width: 100%;
-    }
+  select {
+    width: 100%;
+  }
 
-    &.field-property {
-        &:last-child {
-            flex: 1;
-        }
+  &.field-property {
+    &:last-child {
+      flex: 1;
+    }
 
-        .no-properties-error {
-            color: @func_color_q;
-            font-style: italic;
-        }
+    .no-properties-error {
+      color: @func_color_q;
+      font-style: italic;
     }
+  }
 }
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
index 8bbed9de02..3d44cad740 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
@@ -22,179 +22,181 @@
 @import '../../../../../../assets/styles/override.less';
 
 .operation-handler {
-    font-family: @font-opensans-regular;
-    user-select: none;
-    padding-top: 12px;
-    padding-bottom: 20px;
-
-    .i-sdc-form-label {
-        font-size: 12px;
-    }
-
-    .w-sdc-form .i-sdc-form-item {
-        margin-bottom: 15px;
-    }
-
-    textarea {
-        min-height: 74px;
-        margin-bottom: 18px;
-    }
-
-    /deep/ .sdc-dropdown__component-container {
-        .sdc-dropdown__header {
-            height: 38px;
-            line-height: 35px;
-
-            svg-icon {
-                margin: 13px 6px;
-            }
-        }
+  font-family: @font-opensans-regular;
+  user-select: none;
+  padding-top: 12px;
+  padding-bottom: 20px;
+
+  .i-sdc-form-label {
+    font-size: 12px;
+  }
+
+  .w-sdc-form .i-sdc-form-item {
+    margin-bottom: 15px;
+  }
+
+  textarea {
+    min-height: 74px;
+    margin-bottom: 18px;
+  }
+
+  /deep/ .sdc-dropdown__component-container {
+    .sdc-dropdown__header {
+      height: 38px;
+      line-height: 35px;
+
+      .svg-icon {
+        margin: 13px 6px;
+      }
     }
+  }
 
-    /deep/ .sdc-input {
-        margin-bottom: 0;
+  /deep/ .sdc-input {
+    margin-bottom: 0;
 
-        .sdc-input__input {
-            height: 38px;
-        }
+    .sdc-input__input {
+      height: 38px;
     }
+  }
 
-    .side-by-side {
-        display: flex;
-
-        .form-item {
-            flex: 1;
+  .side-by-side {
+    display: flex;
 
-            &:first-child {
-                margin-right: 14px;
-                flex-basis: 37%;
-                flex-grow: 0;
-                flex-shrink: 0;
-            }
+    .form-item {
+      flex: 1;
 
-            &:nth-child(3) {
-                margin-left: 14px;
-                flex: 0.4;
-            }
+      &:first-child {
+        margin-right: 14px;
+        flex-basis: 37%;
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
 
-            .i-sdc-form-file-upload {
-                height: 37px;
-                margin-bottom: 0;
+      &:nth-child(3) {
+        margin-left: 14px;
+        flex: 0.4;
+      }
 
-                .i-sdc-form-file-name {
-                    padding: 8px 10px;
-                }
+      .i-sdc-form-file-upload {
+        height: 37px;
+        margin-bottom: 0;
 
-                .i-sdc-form-file-upload-x-btn {
-                    top: 13px;
-                }
+        .i-sdc-form-file-name {
+          padding: 8px 10px;
+        }
 
-                .file-upload-browse-btn {
-                    height: 100%;
-                    padding: 7px 6px;
-                    z-index: 1;
-                }
-            }
+        .i-sdc-form-file-upload-x-btn {
+          top: 13px;
+        }
 
+        .file-upload-browse-btn {
+          height: 100%;
+          padding: 7px 6px;
+          z-index: 1;
         }
-    }
+      }
 
-    .archive-warning {
-        font-family: @font-opensans-bold;
-        color: @main_color_i;
     }
-
-    .no-workflow-warning {
-        font-family: @font-opensans-bold;
-        color: @sdcui_color_red;
-        float: right;
+  }
+
+  .archive-warning {
+    font-family: @font-opensans-bold;
+    color: @main_color_i;
+  }
+
+  .no-workflow-warning {
+    font-family: @font-opensans-bold;
+    color: @sdcui_color_red;
+    float: right;
+  }
+
+  .input-param-title {
+    font-size: 16px;
+    text-transform: uppercase;
+  }
+
+  .separator-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .add-param-link {
+      &:not(.disabled):hover {
+        cursor: pointer;
+      }
     }
 
-    .input-param-title {
-        font-size: 16px;
-        text-transform: uppercase;
+    .tab {
+      width: 84px;
+      text-align: center;
     }
+  }
 
-    .separator-buttons {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 10px;
+  .generic-table {
+    max-height: 244px;
+    min-height: 91px;
+    background: @main_color_p;
+
+    .header-row .header-cell {
+      .info-icon {
+        float: right;
+        position: relative;
+        top: 2px;
+      }
+
+      /deep/ .tooltip-inner {
+        padding: 2px;
+        max-width: 270px;
+        font-size: 11px;
+      }
+
+      &.remove {
+        padding: 10px;
+        font-size: 10px;
+      }
+    }
 
-        .add-param-link {
-            &:not(.disabled):hover {
-                cursor: pointer;
-            }
+    .data-row {
+      &.empty-msg {
+        .bold-message {
+          font-family: @font-opensans-bold;
         }
 
-        .tab {
-            width: 84px;
-            text-align: center;
+        :first-child {
+          &:not(:only-child) {
+            margin: 6px 0;
+          }
         }
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 14px;
+      }
     }
 
-    .generic-table {
-        max-height: 244px;
-        min-height: 91px;
-        background: @main_color_p;
-
-        .header-row .header-cell {
-            .info-icon {
-                float: right;
-                position: relative;
-                top: 2px;
-            }
-            /deep/ .tooltip-inner {
-                padding: 2px;
-                max-width: 270px;
-                font-size: 11px;
-            }
-            &.remove {
-                padding: 10px;
-                font-size: 10px;
-            }
-        }
+    /deep/ .cell {
+      &.field-input-name, &.field-input-value {
+        flex: 1;
+      }
 
-        .data-row {
-            &.empty-msg {
-                .bold-message {
-                    font-family: @font-opensans-bold;
-                }
-
-                :first-child {
-                    &:not(:only-child) {
-                        margin: 6px 0;
-                    }
-                }
-
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                padding: 14px;
-            }
+      &.field-property {
+        &, &:last-child {
+          flex: 1;
         }
+      }
 
-        /deep/ .cell {
-            &.field-input-name, &.field-input-value{
-                flex: 1;
-            }
-
-            &.field-property {
-                &, &:last-child {
-                    flex: 1;
-                }
-            }
-
-            &.field-mandatory {
-                flex: 0.5;
-                text-align: center;
-            }
-
-            &.remove {
-                min-width: 40px;
-                max-width: 40px;
-            }
-        }
+      &.field-mandatory {
+        flex: 0.5;
+        text-align: center;
+      }
 
+      &.remove {
+        min-width: 40px;
+        max-width: 40px;
+      }
     }
+
+  }
 }
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
index 37461ba1c5..b7533cc664 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
@@ -1,19 +1,20 @@
 @import "./../../../../../assets/styles/override";
 
-:host(composition-palette) {
-  display:flex;
+:host(.composition-palette) {
+  display: flex;
   flex: 0 0 244px;
 }
 
-sdc-loader.inactive {
-  display:none;
+.sdc-loader.inactive {
+  display: none;
 }
 
 :host ::ng-deep .sdc-filter-bar .sdc-input {
-  margin-bottom:0px;
+  margin-bottom: 0px;
 }
+
 :host ::ng-deep .sdc-loader-wrapper {
-  position:static; 
+  position: static;
 }
 
 .composition-palette-component {
@@ -22,7 +23,7 @@ sdc-loader.inactive {
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  position:relative;
+  position: relative;
   width: 244px;
   box-shadow: 7px -3px 6px -8px @sdcui_color_gray;
 
@@ -31,6 +32,7 @@ sdc-loader.inactive {
     line-height: 40px;
     padding: 0 17px;
     color: @sdcui_color_white;
+
     .palette-elements-count-value {
       float: right;
     }
@@ -41,19 +43,23 @@ sdc-loader.inactive {
     .no-elements-found {
       padding-left: 40px;
     }
+
     /deep/ .palette-category {
       display: flex;
       margin: 0px;
+
       .sdc-accordion-header {
         background-color: @sdcui_color_silver;
         margin: 0px;
         line-height: 40px;
         padding: 0px 10px;
       }
+
       .sdc-accordion-body {
         padding: 0px;
       }
     }
+
     .palette-subcategory {
       padding: 0 10px;
       background-color: @sdcui_color_lighter-silver;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
index 124d606079..9a39871e7a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
@@ -2,27 +2,28 @@
 @import '../../../../../assets/styles/mixins_old';
 
 :host ::ng-deep .sdc-loader-wrapper {
-    position:static; 
+  position: static;
 }
 
 .component-details-panel-tabs {
-    flex: 1;
-    display:flex;
-    overflow:hidden;
-  }
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
 
-.component-details-panel-tabs /deep/ sdc-tabs {
-    display:flex;
-    flex-direction:column;
-    width: 100%;
+.component-details-panel-tabs /deep/ .sdc-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
-    /deep/ sdc-tab {
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-    }
-    .svg-icon-wrapper.label-placement-left .svg-icon-label {
-        margin-right: 0;
-    }
+  /deep/ .sdc-tab {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .svg-icon-wrapper.label-placement-left .svg-icon-label {
+    margin-right: 0;
+  }
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.less b/catalog-ui/src/app/ng2/pages/home/home.component.less
index c5b73748ba..687b06674d 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.component.less
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.less
@@ -1,5 +1,6 @@
 @import '../../../../assets/styles/mixins_old';
 @import '../../../../assets/styles/sprite';
+
 .w-sdc-left-sidebar-nav {
   margin-top: 46px;
 }
@@ -27,11 +28,13 @@
   font-weight: bold;
 }
 
-.i-sdc-left-sidebar-item{
+.i-sdc-left-sidebar-item {
   display: flex;
-  &.category-title .title-text, sdc-checkbox{
+
+  &.category-title .title-text, .sdc-checkbox {
     flex-grow: 1;
   }
+
   &:not(.category-title).i-sdc-left-sidebar-item-state-count {
     line-height: 14px;
   }
@@ -96,28 +99,31 @@
 
   width: 140px;
 
-  sdc-button, 
-  sdc-button-file-opener {
+  .sdc-button,
+  .sdc-button-file-opener {
     padding-bottom: 5px;
-    &:last-child{
+
+    &:last-child {
       padding-bottom: 0;
     }
   }
-  
-  .import-file{
+
+  .import-file {
     position: relative;
-    file-opener{
+
+    .file-opener {
       position: absolute;
       top: 0;
+
       /deep/ input[type="file"] {
-          .hand;
-          filter: alpha(opacity=0);
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 140px;
-          height: 36px;
+        .hand;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 140px;
+        height: 36px;
       }
     }
   }
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index 2721d300c4..084744ad68 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -2,179 +2,181 @@
 @import '../../../../../assets/styles/override.less';
 
 .operation-creator {
-    font-family: @font-opensans-regular;
-    user-select: none;
-    padding-top: 12px;
-    padding-bottom: 20px;
-
-    .i-sdc-form-label {
-        font-size: 12px;
-    }
-
-    .w-sdc-form .i-sdc-form-item {
-        margin-bottom: 15px;
-    }
-
-    textarea {
-        min-height: 74px;
-        margin-bottom: 18px;
-    }
-
-    /deep/ .sdc-dropdown__component-container {
-        .sdc-dropdown__header {
-            height: 38px;
-            line-height: 35px;
-
-            svg-icon {
-                margin: 13px 6px;
-            }
-        }
+  font-family: @font-opensans-regular;
+  user-select: none;
+  padding-top: 12px;
+  padding-bottom: 20px;
+
+  .i-sdc-form-label {
+    font-size: 12px;
+  }
+
+  .w-sdc-form .i-sdc-form-item {
+    margin-bottom: 15px;
+  }
+
+  textarea {
+    min-height: 74px;
+    margin-bottom: 18px;
+  }
+
+  /deep/ .sdc-dropdown__component-container {
+    .sdc-dropdown__header {
+      height: 38px;
+      line-height: 35px;
+
+      .svg-icon {
+        margin: 13px 6px;
+      }
     }
+  }
 
-    /deep/ .sdc-input {
-        margin-bottom: 0;
+  /deep/ .sdc-input {
+    margin-bottom: 0;
 
-        .sdc-input__input {
-            height: 38px;
-        }
+    .sdc-input__input {
+      height: 38px;
     }
+  }
 
-    .side-by-side {
-        display: flex;
-
-        .form-item {
-            flex: 1;
+  .side-by-side {
+    display: flex;
 
-            &:first-child {
-                margin-right: 14px;
-                flex-basis: 37%;
-                flex-grow: 0;
-                flex-shrink: 0;
-            }
+    .form-item {
+      flex: 1;
 
-            &:nth-child(3) {
-                margin-left: 14px;
-                flex: 0.4;
-            }
+      &:first-child {
+        margin-right: 14px;
+        flex-basis: 37%;
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
 
-            .i-sdc-form-file-upload {
-                height: 37px;
-                margin-bottom: 0;
+      &:nth-child(3) {
+        margin-left: 14px;
+        flex: 0.4;
+      }
 
-                .i-sdc-form-file-name {
-                    padding: 8px 10px;
-                }
+      .i-sdc-form-file-upload {
+        height: 37px;
+        margin-bottom: 0;
 
-                .i-sdc-form-file-upload-x-btn {
-                    top: 13px;
-                }
+        .i-sdc-form-file-name {
+          padding: 8px 10px;
+        }
 
-                .file-upload-browse-btn {
-                    height: 100%;
-                    padding: 7px 6px;
-                    z-index: 1;
-                }
-            }
+        .i-sdc-form-file-upload-x-btn {
+          top: 13px;
+        }
 
+        .file-upload-browse-btn {
+          height: 100%;
+          padding: 7px 6px;
+          z-index: 1;
         }
-    }
+      }
 
-    .archive-warning {
-        font-family: @font-opensans-bold;
-        color: @main_color_i;
     }
-
-    .no-workflow-warning {
-        font-family: @font-opensans-bold;
-        color: @sdcui_color_red;
-        float: right;
+  }
+
+  .archive-warning {
+    font-family: @font-opensans-bold;
+    color: @main_color_i;
+  }
+
+  .no-workflow-warning {
+    font-family: @font-opensans-bold;
+    color: @sdcui_color_red;
+    float: right;
+  }
+
+  .input-param-title {
+    font-size: 16px;
+    text-transform: uppercase;
+  }
+
+  .separator-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .add-param-link {
+      &:not(.disabled):hover {
+        cursor: pointer;
+      }
     }
 
-    .input-param-title {
-        font-size: 16px;
-        text-transform: uppercase;
+    .tab {
+      width: 84px;
+      text-align: center;
     }
+  }
 
-    .separator-buttons {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 10px;
+  .generic-table {
+    max-height: 244px;
+    min-height: 91px;
+    background: @main_color_p;
+
+    .header-row .header-cell {
+      .info-icon {
+        float: right;
+        position: relative;
+        top: 2px;
+      }
+
+      /deep/ .tooltip-inner {
+        padding: 2px;
+        max-width: 270px;
+        font-size: 11px;
+      }
+
+      &.remove {
+        padding: 10px;
+        font-size: 10px;
+      }
+    }
 
-        .add-param-link {
-            &:not(.disabled):hover {
-                cursor: pointer;
-            }
+    .data-row {
+      &.empty-msg {
+        .bold-message {
+          font-family: @font-opensans-bold;
         }
 
-        .tab {
-            width: 84px;
-            text-align: center;
+        :first-child {
+          &:not(:only-child) {
+            margin: 6px 0;
+          }
         }
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 14px;
+      }
     }
 
-    .generic-table {
-        max-height: 244px;
-        min-height: 91px;
-        background: @main_color_p;
-
-        .header-row .header-cell {
-            .info-icon {
-                float: right;
-                position: relative;
-                top: 2px;
-            }
-            /deep/ .tooltip-inner {
-                padding: 2px;
-                max-width: 270px;
-                font-size: 11px;
-            }
-            &.remove {
-                padding: 10px;
-                font-size: 10px;
-            }
-        }
+    /deep/ .cell {
+      &.field-name, &.field-type {
+        flex: 1;
+      }
 
-        .data-row {
-            &.empty-msg {
-                .bold-message {
-                    font-family: @font-opensans-bold;
-                }
-
-                :first-child {
-                    &:not(:only-child) {
-                        margin: 6px 0;
-                    }
-                }
-
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                padding: 14px;
-            }
+      &.field-property {
+        &, &:last-child {
+          flex: 1;
         }
+      }
 
-        /deep/ .cell {
-            &.field-name, &.field-type {
-                flex: 1;
-            }
-
-            &.field-property {
-                &, &:last-child {
-                    flex: 1;
-                }
-            }
-
-            &.field-mandatory {
-                flex: 0.5;
-                text-align: center;
-            }
-
-            &.remove {
-                min-width: 40px;
-                max-width: 40px;
-            }
-        }
+      &.field-mandatory {
+        flex: 0.5;
+        text-align: center;
+      }
 
+      &.remove {
+        min-width: 40px;
+        max-width: 40px;
+      }
     }
+
+  }
 }
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index 5447fe532b..76cc79e5e7 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -1,53 +1,53 @@
 @import '../../../../../../assets/styles/variables.less';
 
 .remove {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    svg-icon {
-        position: relative;
-        right: -3px;
+  .svg-icon {
+    position: relative;
+    right: -3px;
 
-        &:hover {
-            cursor: pointer;
-        }
+    &:hover {
+      cursor: pointer;
     }
+  }
 }
 
 
 .cell {
-    min-height: 50px;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-
-    > * {
-        flex-basis: 100%;
-    }
-
-    /deep/ select {
-        height: 30px;
-    }
-
-    input {
-        height: 30px;
-        border: none;
-        padding-left: 10px;
-    }
-
-    select {
-        width: 100%;
+  min-height: 50px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+
+  > * {
+    flex-basis: 100%;
+  }
+
+  /deep/ select {
+    height: 30px;
+  }
+
+  input {
+    height: 30px;
+    border: none;
+    padding-left: 10px;
+  }
+
+  select {
+    width: 100%;
+  }
+
+  &.field-property {
+    &:last-child {
+      flex: 1;
     }
 
-    &.field-property {
-        &:last-child {
-            flex: 1;
-        }
-
-        .no-properties-error {
-            color: @func_color_q;
-            font-style: italic;
-        }
+    .no-properties-error {
+      color: @func_color_q;
+      font-style: italic;
     }
+  }
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index a1309aba61..dacc3303f6 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -1,5 +1,6 @@
 @import '../../../../assets/styles/variables';
 @import '../../../../assets/styles/mixins';
+
 @ng2-shadow-gray: #f8f8f8;
 @ng2-light-gray: #eaeaea;
 @ng2-medium-gray: #d2d2d2;
@@ -7,210 +8,227 @@
 @ng2-dark-gray: #5a5a5a;
 @ng2-shadow-blue: #e6f6fb;
 @ng2-bold-blue: #009fdb;
-@ng2-success-green:#4ca90c;
-@ng2-title-font-size:16px;
+@ng2-success-green: #4ca90c;
+@ng2-title-font-size: 16px;
 @ng2-text-font-size: 14px;
 
-:host { display:block; height: 100%; }
-/deep/ tabs {display:flex; flex-direction:column; height:100%; }
+:host {
+  display: block;
+  height: 100%;
+}
+
+/deep/ .tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 
 .properties-assignment-page {
+  height: 100%;
+  font-family: @font-opensans-regular;
+
+  .main-content {
+    display: flex;
+    flex-direction: row;
     height: 100%;
-    font-family: @font-opensans-regular;
+  }
 
-    .main-content {
-        display:flex;
-        flex-direction:row;
-        height: 100%;
-    }
+  .left-column {
+    flex: 1 0 500px;
+    position: relative;
+    min-width: 930px;
 
-    .left-column {
-        flex: 1 0 500px;
-        position: relative;
-	min-width:930px;
+    /deep/ .tabs {
+      width: 33%;
+      text-align: center;
+    }
 
-        /deep/ .tabs {
-            width:33%;
-            text-align:center;
-        }
+    /deep/ .tab {
+      padding: 12px;
+      flex: 1;
+      font-family: @font-opensans-regular;
+
+      &.active {
+        color: #009fdb;
+        border-color: #d2d2d2;
+        border-top: solid 4px #009fdb;
+        background-color: white;
+        padding-top: 9px;
+        font-family: @font-opensans-medium;
+      }
+
+      .tab-indication {
+        background-color: #4ca90c;
+        border: solid 2px #fff;
+        border-radius: 50%;
+        font-size: 12px;
+      }
+    }
 
-        /deep/ .tab {
-            padding: 12px;
-            flex: 1;
-            font-family: @font-opensans-regular;
-
-            &.active {
-                color:#009fdb;
-                border-color: #d2d2d2;
-                border-top: solid 4px #009fdb;
-                background-color: white;
-                padding-top:9px;
-                font-family: @font-opensans-medium;
-            }
-
-            .tab-indication {
-                background-color:#4ca90c;
-                border:solid 2px #fff;
-                border-radius:50%;
-                font-size:12px;
-            }
-        }
+    .header {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+    }
 
-        .header {
-            position:absolute;
-            top:0;
-            right:0;
-            display: flex;
+    .search-filter-container {
+      display: flex;
+      flex-direction: row;
+
+      .search-box {
+        border: 1px solid @ng2-medium-gray;
+        border-radius: 3px;
+        height: 32px;
+        margin: 0;
+        padding: 2px 20px 4px 10px;
+        outline: none;
+        font-style: italic;
+        color: @ng2-med-dark-gray;
+        width: auto;
+
+        &::-moz-placeholder {
+          color: @ng2-med-dark-gray;
         }
 
-        .search-filter-container{
-            display:flex;
-            flex-direction:row;
-
-            .search-box {
-                border: 1px solid @ng2-medium-gray;
-                border-radius: 3px;
-                height: 32px;
-                margin: 0;
-                padding: 2px 20px 4px 10px;
-                outline: none;
-                font-style: italic;
-                color:@ng2-med-dark-gray;
-                width: auto;
-
-                &::-moz-placeholder { color:@ng2-med-dark-gray;}
-                &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
-            }
-
-            .search-icon {
-                background-position: -48px -3137px;
-                width: 14px;
-                height: 14px;
-                position: absolute;
-                left:170px;
-                top: 8px;
-            }
-
-            &.without-filter {
-                margin-right:10px;
-                .search-icon {
-                    right: 4px;
-                }
-            }
-
-        }
-        
-        .clear-filter{
-            cursor: pointer;
-            color:#009fdb;
-            font-family: @font-opensans-medium-italic;
-            text-decoration: underline;
-            padding-right:10px;
-            font-size:12px;
+        &::-webkit-input-placeholder {
+          color: @ng2-med-dark-gray;
         }
-
-        .declare-button{
-            &:not(:last-of-type) {
-                margin-right: 10px;
-            }
+      }
+
+      .search-icon {
+        background-position: -48px -3137px;
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        left: 170px;
+        top: 8px;
+      }
+
+      &.without-filter {
+        margin-right: 10px;
+
+        .search-icon {
+          right: 4px;
         }
+      }
 
-        .main-tabs-section {
-            position: relative;
+    }
 
-            .main-tabs-section-buttons {
-                position: absolute;
-                top: 45px;
-                right: 0;
-                padding: 4px;
-            }
-        }
+    .clear-filter {
+      cursor: pointer;
+      color: #009fdb;
+      font-family: @font-opensans-medium-italic;
+      text-decoration: underline;
+      padding-right: 10px;
+      font-size: 12px;
     }
 
-    .right-column {
-        display:flex;
-        flex:0 0 350px;
-        flex-direction:column;
-        margin: 0px 0 0 1em;
-        overflow-x:auto;
-        .add-btn{
-
-            align-self: flex-end;
-            margin-top: 10px;
-            margin-bottom: 19px;
-        }
-        /deep/ .tabs {
-            border-bottom: solid 1px #d0d0d0;
-        }
+    .declare-button {
+      &:not(:last-of-type) {
+        margin-right: 10px;
+      }
+    }
 
-        /deep/ .tab {
-            flex: none;
-            padding: 8px 20px 0;
-            font-size: 14px;
-            line-height:30px;
-            font-family: @font-opensans-regular;
+    .main-tabs-section {
+      position: relative;
 
-            &.active {
-                font-family: @font-opensans-medium;
-            }
-        }
+      .main-tabs-section-buttons {
+        position: absolute;
+        top: 45px;
+        right: 0;
+        padding: 4px;
+      }
     }
+  }
+
+  .right-column {
+    display: flex;
+    flex: 0 0 350px;
+    flex-direction: column;
+    margin: 0px 0 0 1em;
+    overflow-x: auto;
+
+    .add-btn {
 
-    .hierarchy-tabs {
-        flex: 0 0 40px;
+      align-self: flex-end;
+      margin-top: 10px;
+      margin-bottom: 19px;
     }
 
-    .gray-border {
-        border: 1px solid #ddd;
+    /deep/ .tabs {
+      border-bottom: solid 1px #d0d0d0;
     }
 
-    /deep/ .white-sub-header {
-        background-color:  #fffefe;
-        box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
-        border-bottom: #d2d2d2 solid 1px;
-        font-size:14px;
-        text-align:left;
-        flex:0 0 auto;
-        padding: 10px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        .a_13_r;
-        text-transform: uppercase;
-
-        &.hierarchy-header {
-            padding-left:20px;
-            &.selected {
-                background-color: #e6f6fb;
-            }
-        }
+    /deep/ .tab {
+      flex: none;
+      padding: 8px 20px 0;
+      font-size: 14px;
+      line-height: 30px;
+      font-family: @font-opensans-regular;
 
+      &.active {
+        font-family: @font-opensans-medium;
+      }
     }
-
-    .hierarchy-nav-container {
-        display:flex;
-        flex-direction: column;
-        height: 100%;
+  }
+
+  .hierarchy-tabs {
+    flex: 0 0 40px;
+  }
+
+  .gray-border {
+    border: 1px solid #ddd;
+  }
+
+  /deep/ .white-sub-header {
+    background-color: #fffefe;
+    box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
+    border-bottom: #d2d2d2 solid 1px;
+    font-size: 14px;
+    text-align: left;
+    flex: 0 0 auto;
+    padding: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    .a_13_r;
+    text-transform: uppercase;
+
+    &.hierarchy-header {
+      padding-left: 20px;
+
+      &.selected {
+        background-color: #e6f6fb;
+      }
     }
 
-    .hierarchy-header {
+  }
 
-        span{
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            max-width: 290px;
-        }
-    }
+  .hierarchy-nav-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
 
-    .hierarchy-nav {
-        flex:1;
-        overflow:auto;
-        display: grid;
-        margin-top: 1em;
-        margin-left: 1em;
-        font-size: 12px;
-        padding-top: 1em;
+  .hierarchy-header {
+
+    span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 290px;
     }
+  }
+
+  .hierarchy-nav {
+    flex: 1;
+    overflow: auto;
+    display: grid;
+    margin-top: 1em;
+    margin-left: 1em;
+    font-size: 12px;
+    padding-top: 1em;
+  }
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
index 83481c1d74..6b77b18fcd 100644
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
@@ -7,14 +7,17 @@
   .sdc-modal-top-bar {
     display: flex;
     justify-content: space-between;
+
     .operation-name {
       text-transform: capitalize;
       font-family: @font-opensans-bold;
       font-size: 18px;
     }
   }
+
   .expand-collapse-all {
     display: flex;
+
     .expand-all, .collapse-all {
       color: @main_color_a;
       border-bottom: solid 1px @main_color_a;
@@ -24,6 +27,7 @@
       width: max-content;
       line-height: 24px;
     }
+
     .separator-line {
       border-left: 1px solid @main_color_o;
       margin: 0 7px;
@@ -35,16 +39,20 @@
     padding-top: 10px;
     height: 390px;
     overflow: auto;
+
     &.no-inputs {
       border: 1px solid @main_color_o;
     }
+
     .no-inputs-text {
       text-align: center;
       padding: 30px;
       opacity: 0.7;
     }
+
     .i-sdc-form-content-operation-input-box {
       border: solid 1px @main_color_o;
+
       &:not(:last-of-type) {
         margin-bottom: 17px;
       }
@@ -56,23 +64,28 @@
         padding-left: 10px;
         height: 38px;
         font-size: 14px;
+
         .expand-collapse-icon {
           .sprite-new;
           .expand-collapse-plus-icon;
           vertical-align: middle;
+
           &.expanded {
             .expand-collapse-minus-icon;
           }
         }
+
         .operation-input-name {
           margin-left: 10px;
           margin-right: 7px;
           font-family: @font-opensans-bold
         }
+
         .operation-input-type {
           .type-text {
             font-family: @font-opensans-bold;
           }
+
           .type-val {
             font-family: @font-opensans-regular;
           }
@@ -83,29 +96,34 @@
         &.with-top-border, .separator {
           border-top: 1px solid @main_color_o;
         }
+
         background-color: @tlv_color_t;
         display: flex;
         padding: 19px 20px 12px 19px;
+
         .operation-input-section-col {
           flex: 45%;
+
           &:not(:last-of-type) {
             margin-right: 38px;
           }
+
           .i-sdc-form-label {
             font-size: 12px;
             font-family: @font-opensans-bold;
           }
 
           &.assigned-value {
-          display: flex;
-          flex-direction: column;
+            display: flex;
+            flex-direction: column;
+
             .i-sdc-form-label {
               margin-bottom: 0;
             }
           }
 
-          /deep/ ui-element-dropdown select, select,
-          /deep/ dynamic-element input {
+          /deep/ .ui-element-dropdown select, select,
+          /deep/ .dynamic-element input {
             height: 30px;
           }
 
@@ -120,18 +138,22 @@
       /deep/ .operation-input-complex-type-section {
         background-color: @tlv_color_t;
         padding: 0 20px 12px 19px;
+
         .separator {
           border-top: 1px solid @main_color_o;
           padding-bottom: 19px;
         }
+
         .static-values-title-for-complex-type {
           font-size: 14px;
           font-family: @font-opensans-bold;
           margin-bottom: 10px;
         }
+
         .flat-children-container {
           border: solid 1px @main_color_o;
         }
+
         .dynamic-property {
           .dynamic-property-row {
             background-color: @tlv_color_t;
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
index e03b73c8c0..9d00d86142 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
@@ -13,6 +13,7 @@
 
   .i-sdc-form-item {
     width: 250px;
+
     &.operation {
       width: 60px;
     }
@@ -21,20 +22,25 @@
   .rule-builder-content {
     display: flex;
     align-items: flex-end;
+
     .rule-input-field {
       flex: 1;
+
       &:not(:last-of-type) {
         margin-right: 20px;
       }
-      &.operator{
+
+      &.operator {
         width: 55px;
         flex: 0 1 auto;
       }
+
       &.assigned-value-field {
         margin-bottom: 10px;
       }
-      /deep/ ui-element-dropdown select,
-      /deep/ ui-element-input input {
+
+      /deep/ .ui-element-dropdown select,
+      /deep/ .ui-element-input input {
         height: 30px;
       }
     }
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
index 4845f4f606..ae28aa36ae 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
@@ -1,8 +1,9 @@
 .sdc-filter-bar-wrapper {
-  sdc-filter-bar {
+  .sdc-filter-bar {
     flex: 0 0 30%;
   }
+
   display: flex;
   justify-content: flex-end;
   margin-bottom: 10px;
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
index 4b7a1e7e9f..5213babd9e 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
@@ -1,5 +1,6 @@
 @import './../../../../../assets/styles/variables.less';
 @import './../../../../../assets/styles/override.less';
+
 .deployment-page {
   width: 100%;
   height: 100%;
@@ -7,16 +8,18 @@
   /deep/ .sdc-tabs {
     height: 100%;
   }
+
   /deep/ .sdc-tabs-list {
     position: absolute;
     top: 22px;
     right: 303px;
     background-color: @sdcui_color_silver;
 
-    svg-icon-label {
+    .svg-icon-label {
       vertical-align: middle;
     }
   }
+
   /deep/ .sdc-tab-content {
     height: 100%;
   }
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
index 269ca0aee0..e5415a323b 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
@@ -1,4 +1,5 @@
 @import './../../../../../../../../assets/styles/variables.less';
+
 .sdc-hierarchy-tab {
   padding: 15px 0 0 0;
   background-color: #f8f8f8;
@@ -67,7 +68,7 @@
     }
   }
 
-  sdc-accordion.selected {
+  .sdc-accordion.selected {
     /deep/ .expand-collapse-container {
       .sdc-accordion-header {
         background-color: @main_color_a;
@@ -102,6 +103,7 @@
     border: 1px solid @main_color_a;
     border-top: 4px solid @main_color_a;
     box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32);
+
     .module-data {
       color: @main_color_a;
       padding: 10px 0 10px 0;
@@ -139,7 +141,7 @@
           height: 20px;
           padding-left: 12px;
 
-          svg-icon {
+          .svg-icon {
             padding-top: 3px;
             fill: @main_color_s;
 
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
index b630881fdc..442eb537ec 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
@@ -2,7 +2,8 @@
   .ngx-datatable {
     > div {
       min-height: 500px;
-      datatable-body {
+
+      .datatable-body {
         max-height: max-content;
       }
     }
@@ -18,7 +19,7 @@
     flex-grow: 5;
   }
 
-  .w-sdc-distribution-view-title{
+  .w-sdc-distribution-view-title {
     color: #191919;
     font-family: OpenSans-Regular, sans-serif;
     font-size: 14px;
@@ -38,47 +39,47 @@
   max-height: 150px;
 }
 
-  .distributionIDBlock {
-    display: inline-block;
-  }
+.distributionIDBlock {
+  display: inline-block;
+}
 
-  .expand-collapse-cell {
-    display: inline-block;
-  }
+.expand-collapse-cell {
+  display: inline-block;
+}
 
-  .statusIcon {
-    display: inline-block;
-    margin-right: 10px;
-  }
+.statusIcon {
+  display: inline-block;
+  margin-right: 10px;
+}
 
-  .btnMarkAsDistributed {
-    float: right;
-    background-color: #E5F3FF;
-    border: 1px solid #8DCCD5;
-    width: 55px;
-    height: 21px;
-    text-align: center;
-  }
+.btnMarkAsDistributed {
+  float: right;
+  background-color: #E5F3FF;
+  border: 1px solid #8DCCD5;
+  width: 55px;
+  height: 21px;
+  text-align: center;
+}
 
-  .distributionRowContainer{
-    background-color: #eaeaea;
-    text-align: center;
-  }
+.distributionRowContainer {
+  background-color: #eaeaea;
+  text-align: center;
+}
 
-  .distributionRowLabel {
-    overflow: hidden;
-    padding-top: 10px;
-    color: #000000;
-    font-family: OpenSans-Semibold, sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-  }
+.distributionRowLabel {
+  overflow: hidden;
+  padding-top: 10px;
+  color: #000000;
+  font-family: OpenSans-Semibold, sans-serif;
+  font-size: 12px;
+  font-weight: bold;
+}
 
-  .distributionRowValue {
-    color: #263d4d;
-    font-family: OpenSans-Regular, sans-serif;
-    font-size: 14px;
-  }
+.distributionRowValue {
+  color: #263d4d;
+  font-family: OpenSans-Regular, sans-serif;
+  font-size: 14px;
+}
 
 .ellipsisCell {
   width: 92%;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less
index 3e91ae4689..4d00c8ef4c 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less
@@ -5,7 +5,7 @@
   margin-bottom: 10px;
 }
 
-.add-attr-icon{
+.add-attr-icon {
   cursor: pointer;
 }
 
@@ -26,7 +26,7 @@
   margin-bottom: 10px;
 }
 
-sdc-checkbox {
+.sdc-checkbox {
   margin-top: 20px;
 }