react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

77 files changed, 5478 insertions, 5655 deletions

diff --git a/openecomp-ui/resources/scss/_common.scss b/openecomp-ui/resources/scss/_common.scss
index 6ade0abfe5..6d6a68512e 100644
--- a/openecomp-ui/resources/scss/_common.scss
+++ b/openecomp-ui/resources/scss/_common.scss
@@ -1,6 +1,5 @@
-@import "common/variables";
-@import "common/typography";
-@import "common/base";
-@import "common/layout";
-@import "common/utils";
-
+@import 'common/variables';
+@import 'common/typography';
+@import 'common/base';
+@import 'common/layout';
+@import 'common/utils';
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 7bd90100e2..5458cbc411 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -1,102 +1,100 @@
-@import "components/forms";
-@import "components/validationForm";
-@import "components/dualListBox";
-@import "components/listEditorView";
-@import "components/toggleInput";
-@import "components/notifications";
-@import "components/inputOptions";
-@import "components/progressBar";
-@import "components/versionController";
-@import "components/sequenceDiagram";
-@import "components/navigationSideBar";
-@import "components/loader";
-@import "components/dropzone";
-@import "components/submitErrorResponse";
-@import "components/expandableInput";
-@import "components/grid";
-@import "components/activityLog";
-@import "components/selectActionTable";
-@import "components/datepicker";
-@import "components/tree";
-@import "components/commitModal";
-@import "components/userNotifications";
-@import "components/overlay";
-@import "components/vspDetailsVendorSelect";
-@import "components/vnfBrowse";
+@import 'components/forms';
+@import 'components/validationForm';
+@import 'components/dualListBox';
+@import 'components/listEditorView';
+@import 'components/toggleInput';
+@import 'components/inputOptions';
+@import 'components/progressBar';
+@import 'components/versionController';
+@import 'components/sequenceDiagram';
+@import 'components/navigationSideBar';
+@import 'components/loader';
+@import 'components/dropzone';
+@import 'components/submitErrorResponse';
+@import 'components/expandableInput';
+@import 'components/grid';
+@import 'components/activityLog';
+@import 'components/selectActionTable';
+@import 'components/datepicker';
+@import 'components/tree';
+@import 'components/commitModal';
+@import 'components/userNotifications';
+@import 'components/overlay';
+@import 'components/vspDetailsVendorSelect';
+@import 'components/vnfBrowse';
 
 %noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .clickable {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .no-padding {
-  padding: 0;
+    padding: 0;
 }
 
 .next-to-icon-label {
-  $margin: 10px;
-  margin-left: $margin;
-  &.right {
-    margin-left: 0;
-    margin-right: $margin;
-  }
+    $margin: 10px;
+    margin-left: $margin;
+    &.right {
+        margin-left: 0;
+        margin-right: $margin;
+    }
 }
 
 .search-wrapper {
-  display: flex;
-  .search-input-control {
-    flex: 1 1;
-    margin: 0;
-    .form-control {
-      font-style: italic;
+    display: flex;
+    .search-input-control {
+        flex: 1 1;
+        margin: 0;
+        .form-control {
+            font-style: italic;
+        }
+    }
+    .search-icon {
+        position: relative;
+        left: -23px;
+        align-self: center;
+        width: 0;
+        color: $dark-gray;
+    }
+    .filter-icon {
+        position: relative;
+        left: -20px;
+        align-self: center;
+        width: 0;
+        background-color: $white;
     }
-  }
-  .search-icon {
-    position: relative;
-    left: -23px;
-    align-self: center;
-    width: 0;
-    color: $dark-gray;
-  }
-  .filter-icon {
-    position: relative;
-    left: -20px;
-    align-self: center;
-    width: 0;
-    background-color: $white;
-  }
 }
 
-
 .chevron::before {
-  border-style: solid;
-  border-width: 0.15em 0.15em 0 0;
-  content: '';
-  display: inline-block;
-  height: 0.8em;
-  left: 0.15em;
-  position: relative;
-  top: 0.15em;
-  vertical-align: top;
-  width: 0.8em;
+    border-style: solid;
+    border-width: 0.15em 0.15em 0 0;
+    content: '';
+    display: inline-block;
+    height: 0.8em;
+    left: 0.15em;
+    position: relative;
+    top: 0.15em;
+    vertical-align: top;
+    width: 0.8em;
 }
 .chevron.right:before {
-  left: 0;
-  transform: rotate(45deg);
+    left: 0;
+    transform: rotate(45deg);
 }
 .chevron.down:before {
-  transform: rotate(135deg);
+    transform: rotate(135deg);
 }
 .chevron.left:before {
-  transform: rotate(-135deg);
+    transform: rotate(-135deg);
 }
 .chevron.top:before {
-  transform: rotate(-45deg);
+    transform: rotate(-45deg);
 }
diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index 6fe6e30ab6..ad33275b6d 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -1,30 +1,29 @@
-@import "modules/licenseModelOverview";
-@import "modules/licenseModelLimits";
-@import "modules/licenseAgreement";
-@import "modules/featureGroup";
-@import "modules/entitlementPools";
-@import "modules/licenseKeyGroup";
-@import "modules/softwareProductLandingPage";
-@import "modules/softwareProductCreatePage";
-@import "modules/_softwareProductAttachmentPage";
-@import "modules/_softwareProductProcessesPage";
-@import "modules/_vspComponentQuestionnaire";
-@import "modules/_softwareProductComponentNetwork";
-@import "modules/_softwareProductComponentGeneral";
-@import "modules/_softwareproductComponentLoadBalancing";
-@import "modules/_softwareProductComponentProcessesPage";
-@import "modules/_softwareProductComponentImage";
-@import "modules/softwareProductComponentCompute";
-@import "modules/vspComponentCompute";
-@import "modules/vspComponentMonitoring";
-@import "modules/licenseModel";
-@import "modules/onboardingCatalog";
-@import "modules/workflows";
-@import "modules/uploadScreen";
-@import "modules/vspHeatSetup";
-@import "modules/softwareProductDependencies";
-@import "modules/_permissions.scss";
-@import "modules/_revisions.scss";
-@import "modules/softwareProductDeployment";
-@import "modules/versionsPage";
-@import "modules/mergeEditor";
+@import 'modules/licenseModelOverview';
+@import 'modules/licenseModelLimits';
+@import 'modules/licenseAgreement';
+@import 'modules/featureGroup';
+@import 'modules/entitlementPools';
+@import 'modules/licenseKeyGroup';
+@import 'modules/softwareProductLandingPage';
+@import 'modules/softwareProductCreatePage';
+@import 'modules/_softwareProductAttachmentPage';
+@import 'modules/_softwareProductProcessesPage';
+@import 'modules/_vspComponentQuestionnaire';
+@import 'modules/_softwareProductComponentNetwork';
+@import 'modules/_softwareProductComponentGeneral';
+@import 'modules/_softwareproductComponentLoadBalancing';
+@import 'modules/_softwareProductComponentProcessesPage';
+@import 'modules/_softwareProductComponentImage';
+@import 'modules/softwareProductComponentCompute';
+@import 'modules/vspComponentMonitoring';
+@import 'modules/licenseModel';
+@import 'modules/onboardingCatalog';
+@import 'modules/workflows';
+@import 'modules/uploadScreen';
+@import 'modules/vspHeatSetup';
+@import 'modules/softwareProductDependencies';
+@import 'modules/_permissions.scss';
+@import 'modules/_revisions.scss';
+@import 'modules/softwareProductDeployment';
+@import 'modules/versionsPage';
+@import 'modules/mergeEditor';
diff --git a/openecomp-ui/resources/scss/bootstrap.scss b/openecomp-ui/resources/scss/bootstrap.scss
index 32890b35f0..7b6fed7509 100644
--- a/openecomp-ui/resources/scss/bootstrap.scss
+++ b/openecomp-ui/resources/scss/bootstrap.scss
@@ -1,55 +1,43 @@
 // DOX CORE
-@import "common/variables";
-@import "common/typography";
+@import 'common/variables';
+@import 'common/typography';
 
 // Core variables and mixins
-@import "bootstrap-cust/variables";
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-// Reset and dependencies
-//@import "bootstrap/normalize";
-//@import "bootstrap/print";
-//@import "bootstrap/glyphicons";
+@import 'bootstrap-cust/variables';
+@import 'bootstrap/variables';
+@import 'bootstrap/mixins';
 
-// Core CSS
-//@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap-cust/tables";
-@import "bootstrap/forms";
-@import "bootstrap-cust/forms";
+@import 'bootstrap/type';
+@import 'bootstrap/code';
+@import 'bootstrap/grid';
+@import 'bootstrap/tables';
+@import 'bootstrap-cust/tables';
+@import 'bootstrap/forms';
+@import 'bootstrap-cust/forms';
 // Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap-cust/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-// @import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap-cust/list-group";
-@import "bootstrap/panels";
-@import "bootstrap-cust/panels";
-// @import "bootstrap/responsive-embed";
-//@import "bootstrap/wells";
-@import "bootstrap/close";
-@import "bootstrap-cust/close";
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap-cust/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-// @import "bootstrap/carousel";
-// Utility classes
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
+@import 'bootstrap/component-animations';
+@import 'bootstrap/dropdowns';
+@import 'bootstrap-cust/dropdowns';
+@import 'bootstrap/button-groups';
+@import 'bootstrap/input-groups';
+@import 'bootstrap/breadcrumbs';
+@import 'bootstrap/pagination';
+@import 'bootstrap/pager';
+@import 'bootstrap/labels';
+@import 'bootstrap/badges';
+@import 'bootstrap/jumbotron';
+@import 'bootstrap/alerts';
+@import 'bootstrap/progress-bars';
+@import 'bootstrap/media';
+@import 'bootstrap/list-group';
+@import 'bootstrap-cust/list-group';
+@import 'bootstrap/panels';
+@import 'bootstrap-cust/panels';
+@import 'bootstrap/close';
+@import 'bootstrap-cust/close';
+@import 'bootstrap/modals';
+@import 'bootstrap-cust/modals';
+@import 'bootstrap/tooltip';
+@import 'bootstrap/popovers';
+@import 'bootstrap/utilities';
+@import 'bootstrap/responsive-utilities';
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index e4aa23f876..b9cfd7906a 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -1,6 +1,6 @@
 html {
-  font-size: 100%;
-  height: 100%;
+    font-size: 100%;
+    height: 100%;
 }
 
 body {
@@ -16,65 +16,70 @@ $scrollbar-height: 8px;
 $ff-scrollbar-width: 17px;
 /* scrollbar styling for Google Chrome | Safari | Opera */
 ::-webkit-scrollbar {
-  width: $scrollbar-width;
-  height: $scrollbar-height;
+    width: $scrollbar-width;
+    height: $scrollbar-height;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 10px;
+    background-color: transparent;
+    border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: $light-gray;
-  border-right: 2px solid $content-background-color;
+    border-radius: 10px;
+    background-color: $light-gray;
+    border-right: 2px solid $content-background-color;
 }
 
 /* Mozilla Firefox currently doesn't support scrollbar styling */
 
 ul {
-  list-style: none;
+    list-style: none;
 }
 
-h1, h2, h3, h4, h5, h6, ul {
-  margin: 0;
-  padding: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul {
+    margin: 0;
+    padding: 0;
 }
 
 input {
-
-  padding: 7px 10px;
+    padding: 7px 10px;
 }
 
 .disabled {
-  opacity: 0.7 !important;
+    opacity: 0.7 !important;
 }
 
 fieldset {
-  border: none;
+    border: none;
 }
 
 fieldset {
-  label {
-	display: inline-block;
-  }
+    label {
+        display: inline-block;
+    }
 }
 
 .nav-tabs > li > a:focus,
 .btn:focus,
 .btn:active:focus,
 .btn.active:focus {
-  outline: none;
+    outline: none;
 }
 
 .box-hover {
-  border: 1px solid $light-blue;
+    border: 1px solid $light-blue;
 }
 /* monkey patch */
 .sdc-button.sdc-button__link.sdc-button.sdc-button__link {
-  width: initial;
-  &:focus {
-    border: none;
-  }
+    width: initial;
+    &:focus {
+        border: none;
+    }
 }
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
index 6c6a0cf165..58ed1227ce 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -1,35 +1,53 @@
 .sdc-app {
-  height: 100%;
-
+    height: 100%;
 }
 .flex {
-  display: flex;
-  flex: 1;
+    display: flex;
+    flex: 1;
 }
 
 .flex-column {
-  @extend .flex;
-  flex-direction: column;
+    @extend .flex;
+    flex-direction: column;
 }
 
 .content-area {
-  padding: 30px 60px 70px 60px;
-  overflow-y: auto;
-	overflow-x: hidden;
-  height: 100%;
-  &.no-padding-content-area {
-    padding: 0;
-  }
+    padding: 30px 60px 70px 60px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    &.no-padding-content-area {
+        padding: 0;
+    }
 }
 
-.onborading-modal {
-  .modal-title {
-    text-transform: uppercase;
-  }
-}
 .page-title {
-  @extend .heading-1;
-  @extend .text-uppercase !optional;
-  margin-bottom: 20px;
-  color: $blue;
+    @extend .heading-1;
+    @extend .text-uppercase !optional;
+    margin-bottom: 20px;
+    color: $blue;
+}
+.sdc-modal {
+    .sdc-modal__wrapper.sdc-modal-type-custom {
+        .sdc-modal__content {
+            padding: 0;
+            .entitlement-pools-modal,
+            .license-key-groups-modal,
+            .manage-permissions-page {
+                .validation-form-content {
+                    overflow-y: visible;
+                }
+            }
+            .validation-form-content {
+                padding: 20px 40px;
+                overflow-y: auto;
+                .no-bottom-margin {
+                    margin-bottom: 0;
+                    .customized-date-picker {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index c4ae856b5f..230881022f 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,23 +1,24 @@
 /* Fonts */
 
 @mixin base-font-regular() {
-  font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif;
+    font-family: OpenSans, OpenSans-Regular, 'Open Sans', omnes-regular, Arial,
+        sans-serif;
 }
 
 @mixin base-font-light() {
-  font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
+    font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
 }
 
-@mixin base-font-italic(){
-  font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
+@mixin base-font-italic() {
+    font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
 }
 
 @mixin base-font-semibold() {
-  font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
+    font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
 }
 
 @mixin base-font-bold() {
-  font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
+    font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
 }
 
 $heading-font-1: 28px;
@@ -34,109 +35,107 @@ $body-font-4: 10px;
 $icon-font-size: 10px;
 $icon-font-family: Arial;
 
-
 .heading-1 {
-  @include base-font-light;
-  font-size: $heading-font-1;
+    @include base-font-light;
+    font-size: $heading-font-1;
 }
 
 .heading-2 {
-  @include base-font-light;
-  font-size: $heading-font-2;
+    @include base-font-light;
+    font-size: $heading-font-2;
 }
 
 .heading-3-light {
-  @include base-font-light;
-  font-size: $heading-font-3;
-  @extend .text-uppercase !optional;
+    @include base-font-light;
+    font-size: $heading-font-3;
+    @extend .text-uppercase !optional;
 }
 
 .heading-3 {
-  @include base-font-regular;
-  font-size: $heading-font-3;
-  @extend .text-uppercase !optional;
+    @include base-font-regular;
+    font-size: $heading-font-3;
+    @extend .text-uppercase !optional;
 }
 
 .heading-3-semibold {
-  @include base-font-semibold;
-  font-size: $heading-font-3;
-  @extend .text-uppercase !optional;
+    @include base-font-semibold;
+    font-size: $heading-font-3;
+    @extend .text-uppercase !optional;
 }
 
 .heading-4 {
-  @include base-font-regular;
-  font-size: $heading-font-4;
+    @include base-font-regular;
+    font-size: $heading-font-4;
 }
 
 .heading-4-semibold {
-  @include base-font-semibold;
-  font-size: $heading-font-4;
+    @include base-font-semibold;
+    font-size: $heading-font-4;
 }
 
 .heading-5 {
-  @include base-font-regular;
-  font-size: $heading-font-5;
+    @include base-font-regular;
+    font-size: $heading-font-5;
 }
 
 .heading-5-semibold {
-  @include base-font-semibold;
-  font-size: $heading-font-5;
+    @include base-font-semibold;
+    font-size: $heading-font-5;
 }
 
 .body-1 {
-  @include base-font-regular;
-  font-size: $body-font-1;
+    @include base-font-regular;
+    font-size: $body-font-1;
 }
 
 .body-1-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-1;
+    @include base-font-semibold;
+    font-size: $body-font-1;
 }
 
 .body-1-light {
-  @include base-font-light;
-  font-size: $body-font-1;
+    @include base-font-light;
+    font-size: $body-font-1;
 }
 
 .body-2 {
-  @include base-font-regular;
-  font-size: $body-font-2;
+    @include base-font-regular;
+    font-size: $body-font-2;
 }
 
 .body-2-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-2;
+    @include base-font-semibold;
+    font-size: $body-font-2;
 }
 
 .body-3 {
-  @include base-font-regular;
-  font-size: $body-font-3;
+    @include base-font-regular;
+    font-size: $body-font-3;
 }
 
 .body-3-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-3;
+    @include base-font-semibold;
+    font-size: $body-font-3;
 }
 
 .body-4 {
-  @include base-font-regular;
-  font-size: $body-font-4;
+    @include base-font-regular;
+    font-size: $body-font-4;
 }
 
 .body-4-semibold {
-  @include base-font-semibold;
-  font-size: $body-font-4;
+    @include base-font-semibold;
+    font-size: $body-font-4;
 }
 
 .body-3-light {
-  @include base-font-light;
-  font-size: $body-font-3;
+    @include base-font-light;
+    font-size: $body-font-3;
 }
 
-
 .warning-text {
-  color: $yellow;
+    color: $yellow;
 }
 .error-text {
-  color: $red;
+    color: $red;
 }
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 99b1ff5d9a..aa1c0b6ff0 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -1,5 +1,3 @@
-
-
 /* Prefix */
 
 $box-sizing-prefix: webkit moz spec;
@@ -14,163 +12,166 @@ $flex-prefix: webkit spec;
 $browserPrefixes: webkit moz o ms;
 
 @mixin prefix($property, $value, $prefixeslist: 'all') {
-  @if $prefixeslist == all {
-    -webkit-#{$property}: $value;
-    -moz-#{$property}: $value;
-    -ms-#{$property}: $value;
-    -o-#{$property}: $value;
-    #{$property}: $value;
-  } @else {
-    @each $prefix in $prefixeslist {
-      @if $prefix == webkit {
+    @if $prefixeslist == all {
         -webkit-#{$property}: $value;
-      } @else if $prefix == moz {
         -moz-#{$property}: $value;
-      } @else if $prefix == ms {
         -ms-#{$property}: $value;
-      } @else if $prefix == o {
         -o-#{$property}: $value;
-      } @else if $prefix == spec {
         #{$property}: $value;
-      } @else {
-        @warn "No such prefix: #{$prefix}";
-      }
+    } @else {
+        @each $prefix in $prefixeslist {
+            @if $prefix == webkit {
+                -webkit-#{$property}: $value;
+            } @else if $prefix == moz {
+                -moz-#{$property}: $value;
+            } @else if $prefix == ms {
+                -ms-#{$property}: $value;
+            } @else if $prefix == o {
+                -o-#{$property}: $value;
+            } @else if $prefix == spec {
+                #{$property}: $value;
+            } @else {
+                @warn "No such prefix: #{$prefix}";
+            }
+        }
     }
-  }
 }
 
 /* Value Prefix*/
 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
-
-  @if $prefixeslist == all {
-    #{property} : -webkit-#{$valuesuffix}($from, $to);
-    #{property} : -moz-#{$valuesuffix}($from, $to);
-    #{property} : -o-#{$valuesuffix}($from, $to);
-    #{property} : -ms-#{$valuesuffix}($from, $to);
-
-  } @else {
-    @each $prefix in $prefixeslist {
-      @if $prefix == webkit {
-        #{property} : -webkit-#{$valuesuffix}($from, $to);
-      } @else if $prefix == moz {
-        #{property} : -moz-#{$valuesuffix}($from, $to);
-      } @else if $prefix == ms {
-        #{property} : -ms-#{$valuesuffix}($from, $to);
-      } @else if $prefix == o {
-        #{property} : -o-#{$valuesuffix}($from, $to);
-      } @else {
-        @warn "No such prefix: #{$prefix}";
-      }
+    @if $prefixeslist == all {
+        #{property}: -webkit-#{$valuesuffix}($from, $to);
+        #{property}: -moz-#{$valuesuffix}($from, $to);
+        #{property}: -o-#{$valuesuffix}($from, $to);
+        #{property}: -ms-#{$valuesuffix}($from, $to);
+    } @else {
+        @each $prefix in $prefixeslist {
+            @if $prefix == webkit {
+                #{property}: -webkit-#{$valuesuffix}($from, $to);
+            } @else if $prefix == moz {
+                #{property}: -moz-#{$valuesuffix}($from, $to);
+            } @else if $prefix == ms {
+                #{property}: -ms-#{$valuesuffix}($from, $to);
+            } @else if $prefix == o {
+                #{property}: -o-#{$valuesuffix}($from, $to);
+            } @else {
+                @warn "No such prefix: #{$prefix}";
+            }
+        }
     }
-  }
 }
 
 /* Box sizing */
 @mixin box-sizing($value: border-box) {
-  @include prefix(box-sizing, $value, $box-sizing-prefix);
+    @include prefix(box-sizing, $value, $box-sizing-prefix);
 }
 
 /* Borders & Shadows */
 @mixin box-shadow($value) {
-  @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
+    @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
 }
 
 @mixin text-shadow($value) {
-  @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
+    @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
 }
 
 @mixin border-radius($value, $positions: all) {
-  @if ($positions == all) {
-    @include prefix(border-radius, $value, $border-radius-prefix);
-  } @else {
-    @each $position in $positions {
-      @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+    @if ($positions == all) {
+        @include prefix(border-radius, $value, $border-radius-prefix);
+    } @else {
+        @each $position in $positions {
+            @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+        }
     }
-  }
-
 }
 
 @mixin transition($value) {
-  @include prefix(transition, $value, $transition-prefix);
+    @include prefix(transition, $value, $transition-prefix);
 }
 
 /* Opacity */
 @mixin opacity($alpha) {
-  $ie-opacity: round($alpha * 100);
-  opacity: $alpha;
-  filter: unquote("alpha(opacity = #{$ie-opacity})");
+    $ie-opacity: round($alpha * 100);
+    opacity: $alpha;
+    filter: unquote('alpha(opacity = #{$ie-opacity})');
 }
 
 /* Ellipsis */
 @mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: $width;
-  white-space: nowrap;
-  display: $display;
-  max-width: $max-width;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: $width;
+    white-space: nowrap;
+    display: $display;
+    max-width: $max-width;
 }
 
-@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
-  overflow: hidden;
-  position: relative;
-  line-height: $lineHeight;
-  max-height: $lineHeight * $lineCount;
-  text-align: justify;
-  word-break: break-all;
-  // margin-right: -1em;
-  padding-right: 1em;
-  &:before {
-    content: '...';
-    position: absolute;
-    right: 3px;
-    bottom: 0;
-  }
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 1em;
-    height: 1em;
-    margin-top: 0.2em;
-    background: $bgColor;
-  }
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white) {
+    overflow: hidden;
+    position: relative;
+    line-height: $lineHeight;
+    max-height: $lineHeight * $lineCount;
+    text-align: justify;
+    word-break: break-all;
+    // margin-right: -1em;
+    padding-right: 1em;
+    &:before {
+        content: '...';
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+    }
+    &:after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1em;
+        height: 1em;
+        margin-top: 0.2em;
+        background: $bgColor;
+    }
 }
 
 @mixin gradient($from, $to) {
-  /* fallback/image non-cover color */
-  background-color: $from;
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
-  @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
+    /* fallback/image non-cover color */
+    background-color: $from;
+    background-image: -webkit-gradient(
+        linear,
+        0% 0%,
+        0% 100%,
+        from($from),
+        to($to)
+    );
+    @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
 }
 
 /* Vertical placement of multuple lines of text */
 @mixin vertical-text($height) {
-  position: absolute;
-  top: 50%;
-  margin-top: -$height/2;
+    position: absolute;
+    top: 50%;
+    margin-top: -$height/2;
 }
 
 @mixin text-vertical-align($align: middle) {
-  display: table;
-  width: 100%;
+    display: table;
+    width: 100%;
 
-  & > * {
-    vertical-align: $align;
-    display: table-cell;
-  }
+    & > * {
+        vertical-align: $align;
+        display: table-cell;
+    }
 }
 
 @mixin center-element($width) {
-  width: $width;
-  margin-left: auto;
-  margin-right: auto;
+    width: $width;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 @mixin center-content($width) {
-  & > * {
-    @include center-element($width);
-  }
+    & > * {
+        @include center-element($width);
+    }
 }
 
 /* transform-rotate */
@@ -179,9 +180,9 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $deg - angle in degrees
 @mixin transform-rotate($deg) {
-  transform: rotate($deg + deg); /* IE10 and Mozilla */
-  -ms-transform: rotate($deg + deg); /* IE 9 */
-  -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
+    transform: rotate($deg + deg); /* IE10 and Mozilla */
+    -ms-transform: rotate($deg + deg); /* IE 9 */
+    -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
 }
 
 /* transform-translate */
@@ -190,9 +191,9 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $deg - angle in degrees
 @mixin transform-translate($x, $y) {
-  transform: translate($x, $y); /* IE10 and Mozilla */
-  -ms-transform: translate($x, $y); /* IE 9 */
-  -webkit-transform: translate($x, $y); /* Safari and Chrome */
+    transform: translate($x, $y); /* IE10 and Mozilla */
+    -ms-transform: translate($x, $y); /* IE 9 */
+    -webkit-transform: translate($x, $y); /* Safari and Chrome */
 }
 
 /* transform-scale */
@@ -203,104 +204,102 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $height - height
 @mixin transform-scale($width, $height) {
-  transform: scale($width, $height); /* IE10 and Mozilla */
-  -ms-transform: scale($width, $height); /* IE 9 */
-  -webkit-transform: scale($width, $height); /* Safari and Chrome */
+    transform: scale($width, $height); /* IE10 and Mozilla */
+    -ms-transform: scale($width, $height); /* IE 9 */
+    -webkit-transform: scale($width, $height); /* Safari and Chrome */
 }
 
 @mixin scrollable() {
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
 }
 
 @mixin create-circle($size, $bgcolor) {
-  border-radius: 50%;
-  width: $size;
-  height: $size;
-  background: $bgcolor;
-	border: 3px solid $bgcolor;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    border-radius: 50%;
+    width: $size;
+    height: $size;
+    background: $bgcolor;
+    border: 3px solid $bgcolor;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /**/
 @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
-
-  @keyframes #{$animationType} {
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @keyframes #{$animationType} {
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-  }
-  @-moz-keyframes #{$animationType}{
-    /* Firefox */
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @-moz-keyframes #{$animationType} {
+        /* Firefox */
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @-webkit-keyframes #{$animationType} {
+        /* Safari and Chrome */
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-  }
-  @-webkit-keyframes #{$animationType} {
-    /* Safari and Chrome */
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
+    @-o-keyframes #{$animationType} {
+        /* Opera */
+        from {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($fromValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
+        to {
+            $startIndex: 1;
+            @each $property in $properties {
+                #{$property}: nth($toValue, $startIndex);
+                $startIndex: $startIndex + 1;
+            }
+        }
     }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-  }
-  @-o-keyframes #{$animationType} {
-    /* Opera */
-    from {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($fromValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-    to {
-      $startIndex: 1;
-      @each $property in $properties {
-        #{$property}: nth($toValue, $startIndex);
-        $startIndex: $startIndex + 1;
-      }
-    }
-  }
 }
 
-
 /**/
 @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
-  @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+    @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
 }
 
 /* percent-plus-value */
@@ -308,6 +307,6 @@ $browserPrefixes: webkit moz o ms;
 //     Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
 //     to a percentage of container height/width
 @mixin percent-plus-value($property, $value, $percent: 100%) {
-  $string: 'calc(' + $percent + ' + ' + $value + ')';
-  #{$property}: unquote($string);
+    $string: 'calc(' + $percent + ' + ' + $value + ')';
+    #{$property}: unquote($string);
 }
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 6ea204aa76..48d9f4b68e 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -1,4 +1,3 @@
-
 // primary colors
 $blue: #009fdb;
 $dark-blue: #0568ae;
@@ -29,7 +28,7 @@ $tlv-gray: #f8f8f8;
 $tlv-light-gray: #eaeaea;
 $tlv-hover: #e6f6fb;
 $highlight-gray: #eceff3;
-$transparent-black: rgba(0,0,0,.3);
+$transparent-black: rgba(0, 0, 0, 0.3);
 
 $content-background-color: $white;
 
@@ -44,8 +43,9 @@ $tablet-max-width: 1024px;
 $laptop-min-width: 1224px;
 $desktop-min-width: 1824px;
 
+$loader-background: #e1e4e6;
 
-
-
-
-
+$action-button-active-bg: #0091c7;
+$action-button-active-border: #006186;
+$action-button-hover-bg: #1ec2ff;
+$action-button-hover-border: #0091c8;
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 7a5b77b58c..dbe805f215 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -1,101 +1,98 @@
 $message-info-icon-size: 16px;
 
 @mixin status-icon-class {
-  @extend .body-1-light;
-  width: $message-info-icon-size;
-  height: $message-info-icon-size;
-  margin-left: 8px;
-  color: $white;
-  border-radius: $message-info-icon-size / 2;
-  display: inline-block;
-  text-align: center;
+    @extend .body-1-light;
+    width: $message-info-icon-size;
+    height: $message-info-icon-size;
+    margin-left: 8px;
+    color: $white;
+    border-radius: $message-info-icon-size / 2;
+    display: inline-block;
+    text-align: center;
 }
 
 .activity-log-view {
+    .list-editor-view .list-editor-view-header {
+        border: none;
+        .list-editor-view-title {
+            @extend .heading-1;
+            color: $blue;
+        }
+    }
+    .list-editor-view-list {
+        border: 1px solid $light-gray;
+        border-bottom: none;
+        overflow-y: hidden;
+    }
+    .activity-list-item {
+        display: flex;
+        height: 36px;
+        @extend .body-1;
+        &.header {
+            @extend .body-1-semibold;
+            background-color: $tlv-light-gray;
+            color: $text-black;
+        }
+    }
 
-  .list-editor-view .list-editor-view-header {
-	border: none;
-	.list-editor-view-title {
-	  @extend .heading-1;
-	  color: $blue;
-	}
-  }
-  .list-editor-view-list {
-	border: 1px solid $light-gray;
-	border-bottom: none;
-	overflow-y: hidden;
-  }
-  .activity-list-item {
-	display: flex;
-	height: 36px;
-	@extend .body-1;
-	&.header {
-	  @extend .body-1-semibold;
-	  background-color: $tlv-light-gray;
-	  color: $text-black;
-	}
-  }
+    .activity-status {
+        .svg-icon-wrapper {
+            float: right;
+        }
 
-  .activity-status {
-	.svg-icon-wrapper {
-	  float: right;
-	}
+        .status-icon.false:after {
+            @include status-icon-class;
+            float: right;
+            background-color: $red;
+            content: '!';
+        }
+    }
 
-	.status-icon.false:after {
-	  @include status-icon-class;
-	  float: right;
-	  background-color: $red;
-	  content: "!";
-	}
-  }
+    .message-further-info-icon {
+        @include status-icon-class;
+        background-color: $gray;
+    }
 
-  .message-further-info-icon {
-	@include status-icon-class;
-	background-color: $gray;
-  }
+    .table-cell {
+        border-right: 1px solid $light-gray;
+        border-bottom: 1px solid $light-gray;
+        &:last-child {
+            border-right: none;
+        }
+        flex-basis: 20%;
+        display: flex;
+        padding: 0 20px;
+        justify-content: center;
+        flex-direction: column;
+        &.activity-comment {
+            min-width: 0;
+            span {
+                @include ellipsis(100%);
+            }
+        }
+    }
 
-  .table-cell {
-	border-right: 1px solid $light-gray;
-	border-bottom: 1px solid $light-gray;
-	&:last-child {
-	  border-right: none;
-	}
-	flex-basis: 20%;
-	display: flex;
-	padding: 0 20px;
-	justify-content: center;
-	flex-direction: column;
-	&.activity-comment {
-	  min-width: 0;
-	  span {
-		@include ellipsis(100%);
-	  }
-	}
-  }
-
-  .date-header {
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	.header-sort-arrow {
-	  width: 0;
-	  height: 0;
-	  border-left: 5px solid transparent;
-	  border-right: 5px solid transparent;
-	  margin-left: 9px;
-	  &.up {
-		border-bottom: 5px solid $black;
-	  }
-	  &.down {
-		border-top: 5px solid $black;
-	  }
-
-	}
-  }
-
-  .date-cell {
-	display: flex;
-	justify-content: space-between;
-  }
+    .date-header {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        .header-sort-arrow {
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            margin-left: 9px;
+            &.up {
+                border-bottom: 5px solid $black;
+            }
+            &.down {
+                border-top: 5px solid $black;
+            }
+        }
+    }
 
+    .date-cell {
+        display: flex;
+        justify-content: space-between;
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_commitModal.scss b/openecomp-ui/resources/scss/components/_commitModal.scss
index e7f5d28933..47036ea22c 100644
--- a/openecomp-ui/resources/scss/components/_commitModal.scss
+++ b/openecomp-ui/resources/scss/components/_commitModal.scss
@@ -1,10 +1,9 @@
-
 .comment-commit-form {
-  .commit-modal-text {
-    padding-bottom: 30px;
-  }
-  .validation-buttons .sdc-button-default{
-    min-width: 94px;
-    width: auto;
-  }
-}
\ No newline at end of file
+    .commit-modal-text {
+        padding-bottom: 30px;
+    }
+    .validation-buttons .sdc-button-default {
+        min-width: 94px;
+        width: auto;
+    }
+}
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index d51a1b690e..e9c0f40425 100644
--- a/openecomp-ui/resources/scss/components/_datepicker.scss
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -1,67 +1,163 @@
 .customized-date-picker {
-	margin-bottom: 24px;
-	display: flex;
-	.date-picker-label {
-		&.required {
-			&:before {
-				content: "*";
-				color: $red;
-				margin: 0 4px 0 0;
-			}
-		}
+    margin-bottom: 24px;
+    display: flex;
+    > div:first-child {
+        flex: 1;
+        display: flex;
+    }
+    .react-datepicker-wrapper {
+        display: flex;
+        flex: 1;
+    }
+    .date-picker-label {
+        &.required {
+            &:before {
+                content: '*';
+                color: $red;
+                margin: 0 4px 0 0;
+            }
+        }
 
-		@extend .body-2-semibold;
-		color: $dark-gray;
-		margin-bottom: 8px;
-	}
-	.react-datepicker__input-container {
-		flex: 1;
-		cursor: pointer;
-	}
-	.datepicker-custom-input {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 30px;
-		border-radius: 2px;
-		color: $dark-gray;
-		border: 1px solid $light-gray;
-		padding: 6px 8px 6px 12px;
-		.clear-input {
-				margin-left: auto;
-				margin-right: 8px;
-				.svg-icon {
-					fill: transparent;
-					height: 8px;
-					width: 8px;
-				}
-			}
-		&:hover {
-			border-color: $gray;
-			.clear-input {
-				.svg-icon {
-					fill: initial;
-				}
-			}
-		}
-		.datepicker-text {
-			cursor: pointer;
-			@extend .body-1;
-			&.placeholder {
-				color: $light-gray;
-			}
+        @extend .body-2-semibold;
+        color: $dark-gray;
+        margin-bottom: 8px;
+    }
+    .react-datepicker__input-container {
+        flex: 1;
+        cursor: pointer;
+    }
+    .datepicker-custom-input {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 30px;
+        border-radius: 2px;
+        color: $dark-gray;
+        border: 1px solid $light-gray;
+        padding: 6px 8px 6px 12px;
+        .clear-input {
+            margin-left: auto;
+            margin-right: 8px;
+            .svg-icon {
+                fill: transparent;
+                height: 8px;
+                width: 8px;
+            }
+        }
+        &:hover {
+            border-color: $gray;
+            .clear-input {
+                .svg-icon {
+                    fill: initial;
+                }
+            }
+        }
+        .datepicker-text {
+            cursor: pointer;
+            @extend .body-1;
+            &.placeholder {
+                color: $light-gray;
+            }
+        }
+        .calendar-input {
+            fill: $light-gray;
+        }
+        .svg-icon-wrapper.calendar {
+            .svg-icon {
+                fill: $dark-gray;
+                width: 17px;
+                height: 17px;
+            }
+        }
+    }
+    /* Out of namespace context for datepicker */
+    div.customized-date-picker-calendar {
+        @import 'common/variables';
+        @import 'common/typography';
+        border-color: $light-gray;
+        //margin-top: -8px;
+        color: $black;
+        .react-datepicker__triangle {
+            margin-top: 0px;
+            display: none;
+        }
 
-		}
-		.calendar-input {
-			fill: $light-gray;
-		}
-		.svg-icon-wrapper.calendar {
-			.svg-icon {
-				fill: $dark-gray;
-				width: 17px;
-				height: 17px;
-			}
-		}
-	}
-}
+        .react-datepicker__navigation--previous::before,
+        .react-datepicker__navigation--next::before {
+            width: 8px;
+            height: 8px;
+            display: inline-block;
+            position: absolute;
+            top: -4px;
+        }
+        .react-datepicker__navigation--previous::before {
+            left: 0;
+            content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
+        }
+        .react-datepicker__navigation--next::before {
+            right: 0;
+            content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
+        }
+
+        .react-datepicker__navigation--previous,
+        .react-datepicker__navigation--next {
+            border: none;
+        }
+
+        .react-datepicker__month-container {
+            .react-datepicker__header {
+                background-color: $background-gray;
+                border-bottom: none;
+                .react-datepicker__current-month {
+                    @extend .body-1-semibold;
+                    background-color: $background-gray;
+                    margin-bottom: 10px;
+                }
+                .react-datepicker__day-names {
+                    @extend .body-1;
+                    background-color: $white;
+                }
+            }
+            .react-datepicker__day--selected,
+            .react-datepicker__day--keyboard-selected {
+                @extend .body-1;
+                background-color: $blue;
+                color: $white;
+            }
+            .react-datepicker__day {
+                border-radius: 0px;
+                margin: 0;
+                flex: 1;
+                @extend .body-1;
+            }
 
+            .react-datepicker__day--in-range,
+            .react-datepicker__day--in-selecting-range {
+                background-color: $tlv-hover;
+                color: $black;
+                &.react-datepicker__day--selected,
+                &.react-datepicker__day--keyboard-selected,
+                &.react-datepicker__day--range-start,
+                &.react-datepicker__day--range-end {
+                    background-color: $blue;
+                    color: $white;
+                }
+                &.react-datepicker__day--selecting-range-start,
+                &.react-datepicker__day--selecting-range-end {
+                    background-color: lighten($blue, 40%);
+                    color: $black;
+                }
+                &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
+                &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
+                &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
+                    background-color: $blue;
+                    color: $white;
+                }
+            }
+
+            .react-datepicker__week {
+                display: flex;
+            }
+        }
+    }
+}
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
index 2479ae7f0c..31a67d9e6b 100644
--- a/openecomp-ui/resources/scss/components/_dropzone.scss
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -1,31 +1,30 @@
-
 .active-dragging {
-  border: 3px dashed $dark-blue;
-  border-radius: 20px;
-  .draggable-wrapper {
-    opacity: 0.5;
-  }
+    border: 3px dashed $dark-blue;
+    border-radius: 20px;
+    .draggable-wrapper {
+        opacity: 0.5;
+    }
 }
 .file-upload-box {
-  @extend .body-1;
-  display: flex;
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  border: 2px dashed $light-gray;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  width: 382px;
-  align-items: center;
-  .upload-btn {
-    padding: 4px 20px;
-  }
-  .drag-text {
-    color: $blue;
-    @extend .body-1-semibold;
-  }
-  .or-text {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
+    @extend .body-1;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    border: 2px dashed $light-gray;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    width: 382px;
+    align-items: center;
+    .upload-btn {
+        padding: 4px 20px;
+    }
+    .drag-text {
+        color: $blue;
+        @extend .body-1-semibold;
+    }
+    .or-text {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 0c7d82e31c..65702df88a 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -1,53 +1,53 @@
 .dual-list-box {
-  display: flex;
-  margin: 25px 0 10px 0;
-	.svg-icon.search {
-		height: 14px;
-		width: 14px;
-	}
+    display: flex;
+    margin: 25px 0 10px 0;
+    .svg-icon.search {
+        height: 14px;
+        width: 14px;
+    }
 
-  .dual-search-multi-select-section {
-    flex: 1;
+    .dual-search-multi-select-section {
+        flex: 1;
 
-    .dual-text-box-search {
-      margin: 5px 0 30px 0;
-    }
-    .dual-list-box-multi-select {
-      flex: 1 1;
-      display: flex;
-      height: 166px;
-      margin-bottom: 0;
-      select {
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        overflow-y: scroll;
-        height: inherit;
-        option {
-          padding: 4px 0 4px 10px;
+        .dual-text-box-search {
+            margin: 5px 0 30px 0;
+        }
+        .dual-list-box-multi-select {
+            flex: 1 1;
+            display: flex;
+            height: 166px;
+            margin-bottom: 0;
+            select {
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                overflow-y: scroll;
+                height: inherit;
+                option {
+                    padding: 4px 0 4px 10px;
+                }
+            }
+            option:checked {
+                background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
+            }
         }
-      }
-      option:checked {
-        background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
-      }
     }
-  }
-  .dual-list-options-bar {
-    margin: 62px 54px 27px 54px;
-    padding-top: 23px;
-		.svg-icon {
-			width: 14px;
-			height: 14px;
-		}
-    .dual-list-option {
-      text-align: center;
-      line-height: 10px;
-      font-size: 25px;
-      width: 20px;
-      height: 15px;
-      cursor: pointer;
-      margin-top: 20px;
-      fill: $blue;
+    .dual-list-options-bar {
+        margin: 62px 54px 27px 54px;
+        padding-top: 23px;
+        .svg-icon {
+            width: 14px;
+            height: 14px;
+        }
+        .dual-list-option {
+            text-align: center;
+            line-height: 10px;
+            font-size: 25px;
+            width: 20px;
+            height: 15px;
+            cursor: pointer;
+            margin-top: 20px;
+            fill: $blue;
+        }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 2484a73e8a..0508facbf4 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,56 +1,55 @@
 .expandable-input-top {
-	display: flex;
-	height: 22px;
-	.expandable-input-wrapper {
-		display: flex;
-		&.closed {
-			.svg-icon
-			{
-				&.__search {
-					height: 17px;
-					width: 17px;
-					transition: fill 0.5s ease-in;
-					fill: $blue;
-					cursor: pointer;
-					&:hover {
-						transition: fill 0.5s ease-in;
-						fill: $dark-blue;
-					}
-				}
-			}
-		}
-		&.opened {
-			.svg-icon-wrapper {
-				margin-left: 3px;
-			}
-			.svg-icon {
-				&.__search {
-					height: 17px;
-					width: 17px;
-					fill: $dark-blue;
-				}
-			}
-			.svg-icon {
-				&.__close {
-					margin-left: 7px;
-					opacity: 0.6;
-					fill: $dark-gray;
-					&:hover {
-						opacity: 1;
-					}
-				}
-			}
-		}
-		.expandable-input-control {
-			.form-control {
-				border: none;
-				background-color: transparent;
-				border-radius: 0;
-				border-bottom: 1px solid $gray;
-				height: 22px;
-				padding: 0 5px;
-			}
-			margin: 0;
-		}
-	}
+    display: flex;
+    height: 22px;
+    .expandable-input-wrapper {
+        display: flex;
+        &.closed {
+            .svg-icon {
+                &.__search {
+                    height: 17px;
+                    width: 17px;
+                    transition: fill 0.5s ease-in;
+                    fill: $blue;
+                    cursor: pointer;
+                    &:hover {
+                        transition: fill 0.5s ease-in;
+                        fill: $dark-blue;
+                    }
+                }
+            }
+        }
+        &.opened {
+            .svg-icon-wrapper {
+                margin-left: 3px;
+            }
+            .svg-icon {
+                &.__search {
+                    height: 17px;
+                    width: 17px;
+                    fill: $dark-blue;
+                }
+            }
+            .svg-icon {
+                &.__close {
+                    margin-left: 7px;
+                    opacity: 0.6;
+                    fill: $dark-gray;
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        .expandable-input-control {
+            .form-control {
+                border: none;
+                background-color: transparent;
+                border-radius: 0;
+                border-bottom: 1px solid $gray;
+                height: 22px;
+                padding: 0 5px;
+            }
+            margin: 0;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 58e843047f..40c1aa16c4 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,76 +1,76 @@
 .section-title {
-  @extend .heading-3-semibold;
-  padding: 50px 0 20px 0;
-  &:first-child {
-    padding-top: 0;
-  }
+    @extend .heading-3-semibold;
+    padding: 50px 0 20px 0;
+    &:first-child {
+        padding-top: 0;
+    }
 }
 
 .validation-form-content {
-	fieldset[disabled] {
-		.form-group {
-			opacity: 0.7;
-			cursor: auto;
-			pointer-events: none;
-			.dropdown-multi-select {
-				.form-group {
-					opacity: 1;
-				}
-				.Select-control {
-					background-color: $tlv-light-gray;
-				}
-			}
-		}
-	}
+    fieldset[disabled] {
+        .form-group {
+            opacity: 0.7;
+            cursor: auto;
+            pointer-events: none;
+            .dropdown-multi-select {
+                .form-group {
+                    opacity: 1;
+                }
+                .Select-control {
+                    background-color: $tlv-light-gray;
+                }
+            }
+        }
+    }
 }
 
 .dropdown-multi-select {
-  .Select {
-    display: block;
-    width: 100%;
-		.Select-menu-outer {
-			.Select-option {
-				&:hover {
-					background-color: $blue;
-					color: $white;
-				}
-			}
-		}
-    .Select-control {
-      height: 28px;
-      border-radius: 2px;
-      .Select-input {
-        height: 28px;
-        input {
-          height: 28px;
-          padding: 0;
+    .Select {
+        display: block;
+        width: 100%;
+        .Select-menu-outer {
+            .Select-option {
+                &:hover {
+                    background-color: $blue;
+                    color: $white;
+                }
+            }
+        }
+        .Select-control {
+            height: 28px;
+            border-radius: 2px;
+            .Select-input {
+                height: 28px;
+                input {
+                    height: 28px;
+                    padding: 0;
+                }
+            }
+            .Select-placeholder {
+                line-height: 30px;
+            }
+        }
+        &.Select--multi {
+            .Select-value {
+                color: $text-black;
+                background-color: $background-gray;
+                border: none;
+                margin: 3px 0 3px 10px;
+                border-radius: 10px;
+                padding-left: 8px;
+                padding-right: 6px;
+            }
+            .Select-value-icon {
+                border: none;
+                float: right;
+                &:hover {
+                    background-color: inherit;
+                    color: inherit;
+                }
+            }
+            .Select-arrow-zone {
+                padding-top: 4px;
+            }
         }
-      }
-      .Select-placeholder {
-        line-height: 30px;
-      }
-    }
-    &.Select--multi {
-      .Select-value {
-        color: $text-black;
-        background-color: $background-gray;
-				border: none;
-				margin: 3px 0 3px 10px;
-        border-radius: 10px;
-				padding-left: 8px;
-				padding-right: 6px;
-      }
-      .Select-value-icon {
-        border: none;
-				float: right;
-				&:hover {
-					background-color: inherit;
-					color: inherit;
-				}
-      }
-      .Select-arrow-zone {
-				padding-top: 4px;
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index f210b64df6..595b0cde4d 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,71 +1,71 @@
 .grid-section {
-  $gridItemSpace: 15%;
+    $gridItemSpace: 15%;
 
-  @mixin gridCol($numOfCols, $flexBasis) {
-    .#{grid-col- + $numOfCols} {
-      @extend %grid-col-base;
-      flex-basis:  $flexBasis;
-      &:not(.last-col-in-row):after {
-        flex-basis: $gridItemSpace / $numOfCols;
-        content: ' ';
-      }
+    @mixin gridCol($numOfCols, $flexBasis) {
+        .#{grid-col- + $numOfCols} {
+            @extend %grid-col-base;
+            flex-basis: $flexBasis;
+            &:not(.last-col-in-row):after {
+                flex-basis: $gridItemSpace / $numOfCols;
+                content: ' ';
+            }
+        }
     }
-  }
 
-  @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
-    .#{grid-col- + $numOfCols} {
-      @extend %grid-col-base;
-      &:not(.last-col-in-row) {
-        flex-basis:  $flexBasis;
-        margin-right: 5%;
-      }
-      &.last-col-in-row {
-        flex-basis:  $flexBasisLast;
-      }
+    @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+        .#{grid-col- + $numOfCols} {
+            @extend %grid-col-base;
+            &:not(.last-col-in-row) {
+                flex-basis: $flexBasis;
+                margin-right: 5%;
+            }
+            &.last-col-in-row {
+                flex-basis: $flexBasisLast;
+            }
+        }
     }
-  }
 
-  &:not(:last-of-type) {
-    padding-bottom: 30px;
-  }
+    &:not(:last-of-type) {
+        padding-bottom: 30px;
+    }
 
-  .grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
+    .grid-items {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 
-  %grid-col-base {
-    flex-shrink: 0;
-    display: flex;
-  }
+    %grid-col-base {
+        flex-shrink: 0;
+        display: flex;
+    }
 
-  .grid-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
+    .grid-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
 
-  .grid-item-stretch {
-    @extend .grid-item;
-    & *:last-child {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
+    .grid-item-stretch {
+        @extend .grid-item;
+        & *:last-child {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
     }
-  }
 
-  &.has-last-col-set {
-    @include gridColWithLastColumn(1, 21%, 22%);
-    @include gridColWithLastColumn(2, 47%, 48%);
-    @include gridColWithLastColumn(3, 73%, 74%);
-    @include gridColWithLastColumn(4, 100%, 100%);
-  }
+    &.has-last-col-set {
+        @include gridColWithLastColumn(1, 21%, 22%);
+        @include gridColWithLastColumn(2, 47%, 48%);
+        @include gridColWithLastColumn(3, 73%, 74%);
+        @include gridColWithLastColumn(4, 100%, 100%);
+    }
 
-  &:not(.has-last-col-set) {
-    @include gridCol(1, 25%);
-    @include gridCol(2, 50%);
-    @include gridCol(3, 75%);
-    @include gridCol(4, 100%);
-  }
+    &:not(.has-last-col-set) {
+        @include gridCol(1, 25%);
+        @include gridCol(2, 50%);
+        @include gridCol(3, 75%);
+        @include gridCol(4, 100%);
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index face03d64d..eb0fe79ea6 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -1,85 +1,84 @@
 .disabled {
-	.Select-control {
-		background-color: $tlv-light-gray;
-		.Select-placeholder {
-			color: $dark-gray;
-		}
-	}
+    .Select-control {
+        background-color: $tlv-light-gray;
+        .Select-placeholder {
+            color: $dark-gray;
+        }
+    }
 }
 
 .input-options {
-  display: flex;
-  border: 1px solid $light-gray;
-  border-radius: 2px;
-  height: 30px;
-  &:hover {
-    border-color: $gray;
-  }
-  .input-options-select {
-    float: left;
-    border: none;
-    transition-property: width;
-    transition-duration: 300ms;
-    padding-top:0px;
-    padding-bottom: 0px;
-    height:28px;
-
-  }
-
-  .input-options-other{
-    float: left;
+    display: flex;
+    border: 1px solid $light-gray;
+    border-radius: 2px;
     height: 30px;
-    border: none;
-    padding-top:0px;
-    padding-bottom: 0px;
-    height:28px;
-  }
-  .input-options-separator {
-    width: 1px;
-    height: 24px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    border:1px solid $light-gray;
-  }
+    &:hover {
+        border-color: $gray;
+    }
+    .input-options-select {
+        float: left;
+        border: none;
+        transition-property: width;
+        transition-duration: 300ms;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        height: 28px;
+    }
+
+    .input-options-other {
+        float: left;
+        height: 30px;
+        border: none;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        height: 28px;
+    }
+    .input-options-separator {
+        width: 1px;
+        height: 24px;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        border: 1px solid $light-gray;
+    }
 }
 
 .input-options.has-error {
-   border-color: $crimson;
+    border-color: $crimson;
 }
 
 .bootstrap-input-options {
-  display: flex;
-  flex-direction: column;
-  .input-options-select {
-	border: 1px solid $light-gray;
-	border-radius: 2px;
-	height: 30px;
-	float: left;
-	transition-property: width;
-	transition-duration: 300ms;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	width: 100%;
-	&:hover {
-	  border-color: $gray;
-	}
-  }
-  .input-options-other {
-	float: left;
-	height: 30px;
-	border: none;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	height: 28px;
-  }
-  .input-options-separator {
-	width: 1px;
-	height: 24px;
-	margin-top: 2px;
-	margin-bottom: 2px;
-	border: 1px solid $light-gray;
-  }
-  &.has-error {
-	border-color: $crimson;
-  }
+    display: flex;
+    flex-direction: column;
+    .input-options-select {
+        border: 1px solid $light-gray;
+        border-radius: 2px;
+        height: 30px;
+        float: left;
+        transition-property: width;
+        transition-duration: 300ms;
+        padding-top: 0;
+        padding-bottom: 0;
+        width: 100%;
+        &:hover {
+            border-color: $gray;
+        }
+    }
+    .input-options-other {
+        float: left;
+        height: 30px;
+        border: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 28px;
+    }
+    .input-options-separator {
+        width: 1px;
+        height: 24px;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        border: 1px solid $light-gray;
+    }
+    &.has-error {
+        border-color: $crimson;
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 354a6a1f70..9bda78e007 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -1,162 +1,160 @@
 .list-editor-view {
-  @extend .flex-column;
-  background-color: $content-background-color;
-
-  .expandble-search-wrapper {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
-  }
-
-  .list-editor-view-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    border-bottom: 1px solid $light-gray;
-    padding-bottom: 5px;
-    .list-editor-view-title {
-      @extend .heading-3-semibold;
-    }
-  }
-
-  .list-editor-view-list-scroller {
-    @extend .flex;
-    overflow: auto;
-    margin: 18px 0 30px 0;
-  }
-
-  .list-editor-view-list {
     @extend .flex-column;
+    background-color: $content-background-color;
 
-    .list-editor-item-view {
-      margin: 8px 0;
-      border: 1px solid $light-gray;
-      background-color: $white;
-      display: flex;
-      min-height: 100px;
-      overflow: hidden;
-      .list-editor-item-view-content {
-        padding: 10px 28px;
+    .expandble-search-wrapper {
         display: flex;
-        flex: 1 1;
-        .list-editor-item-view-field {
-          flex: 1 1;
-          color: $black;
-          padding: 0;
-          @include ellipsis;
-          overflow-wrap: break-word;
-          white-space: initial;
-
+        justify-content: flex-end;
+        margin-top: 10px;
+    }
 
-          .number-field {
-            align-content: center;
-          }
-          .title {
-            @extend .body-1;
-            padding-bottom: 5px;
-            &:not(:first-child) {
-              line-height: 0.9;
-            }
-          }
-          .description {
-            @include multiline-ellipsis(1.3em, 3);
-          }
-          .text {
-            @extend .body-1;
-          }
-          .textEllipses {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            padding-right: 5px;
-          }
-        }
-      }
-      .list-editor-item-view-controller {
+    .list-editor-view-header {
         display: flex;
-        flex-basis: 5%;
-        align-self: center;
-        justify-content: center;
-        flex-direction: column;
-        .svg-icon-wrapper {
-          &:first-child {
-            margin-bottom: 10px;
-          }
-        }
-        .svg-icon {
-          margin-top: 5px;
-          transition: fill .3s;
-          fill: $white;
-        }
-      }
-      &.selectable:hover{
-        @extend .box-hover;
-        cursor: pointer;
-        .list-editor-item-view-controller {
-          .svg-icon {
-            fill: $dark-gray;
-            &:hover {
-              fill: $black;
-            }
-          }
+        justify-content: space-between;
+        align-items: flex-end;
+        border-bottom: 1px solid $light-gray;
+        padding-bottom: 5px;
+        .list-editor-view-title {
+            @extend .heading-3-semibold;
         }
-      }
     }
-    &.two-columns {
 
-      flex-direction: row;
-      flex-wrap: wrap;
+    .list-editor-view-list-scroller {
+        @extend .flex;
+        overflow: auto;
+        margin: 18px 0 30px 0;
+    }
+
+    .list-editor-view-list {
+        @extend .flex-column;
 
-      .list-editor-item-view {
-        .list-editor-item-view-content {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          padding: 10px 18px 10px 0;
-          .list-editor-item-view-field {
-            flex: 0.3 1;
+        .list-editor-item-view {
+            margin: 8px 0;
+            border: 1px solid $light-gray;
+            background-color: $white;
             display: flex;
-            justify-content: center;
-            flex-direction: column;
-            height: 100%;
-            border-right : 1px solid $light-gray;
-            margin-left: 18px;
-            &:last-child{
-              border: none;
-              flex: 1;
-            }
-            .details{
-              display: flex;
-              flex-direction: row;
-              .title {
-                padding: 0;
-                margin-right: 5px;
-              }
-            }
+            min-height: 100px;
+            overflow: hidden;
+            .list-editor-item-view-content {
+                padding: 10px 28px;
+                display: flex;
+                flex: 1 1;
+                .list-editor-item-view-field {
+                    flex: 1 1;
+                    color: $black;
+                    padding: 0;
+                    @include ellipsis;
+                    overflow-wrap: break-word;
+                    white-space: initial;
 
-            .details-col{
-              flex-direction: column;
-              .title {
-                padding-bottom: 0;
-              }
+                    .number-field {
+                        align-content: center;
+                    }
+                    .title {
+                        @extend .body-1;
+                        padding-bottom: 5px;
+                        &:not(:first-child) {
+                            line-height: 0.9;
+                        }
+                    }
+                    .description {
+                        @include multiline-ellipsis(1.3em, 3);
+                    }
+                    .text {
+                        @extend .body-1;
+                    }
+                    .textEllipses {
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        padding-right: 5px;
+                    }
+                }
             }
-
-            .description {
-              @extend .body-1;
-              @include multiline-ellipsis(1.3em, 3);
+            .list-editor-item-view-controller {
+                display: flex;
+                flex-basis: 5%;
+                align-self: center;
+                justify-content: center;
+                flex-direction: column;
+                .svg-icon-wrapper {
+                    &:first-child {
+                        margin-bottom: 10px;
+                    }
+                }
+                .svg-icon {
+                    margin-top: 5px;
+                    transition: fill 0.3s;
+                    fill: $white;
+                }
+            }
+            &.selectable:hover {
+                @extend .box-hover;
+                cursor: pointer;
+                .list-editor-item-view-controller {
+                    .svg-icon {
+                        fill: $dark-gray;
+                        &:hover {
+                            fill: $black;
+                        }
+                    }
+                }
             }
-          }
         }
+        &.two-columns {
+            flex-direction: row;
+            flex-wrap: wrap;
 
-        &:nth-child(odd){
-          flex: 0 0 48.5%;
-          margin-right: 50px;
-        }
-        &:nth-child(even) {
-          flex: 1;
-          margin-right: 0;
+            .list-editor-item-view {
+                .list-editor-item-view-content {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    padding: 10px 18px 10px 0;
+                    .list-editor-item-view-field {
+                        flex: 0.3 1;
+                        display: flex;
+                        justify-content: center;
+                        flex-direction: column;
+                        height: 100%;
+                        border-right: 1px solid $light-gray;
+                        margin-left: 18px;
+                        &:last-child {
+                            border: none;
+                            flex: 1;
+                        }
+                        .details {
+                            display: flex;
+                            flex-direction: row;
+                            .title {
+                                padding: 0;
+                                margin-right: 5px;
+                            }
+                        }
+
+                        .details-col {
+                            flex-direction: column;
+                            .title {
+                                padding-bottom: 0;
+                            }
+                        }
+
+                        .description {
+                            @extend .body-1;
+                            @include multiline-ellipsis(1.3em, 3);
+                        }
+                    }
+                }
+
+                &:nth-child(odd) {
+                    flex: 0 0 48.5%;
+                    margin-right: 50px;
+                }
+                &:nth-child(even) {
+                    flex: 1;
+                    margin-right: 0;
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss
index ddff9af6e3..ee7f6f372d 100644
--- a/openecomp-ui/resources/scss/components/_loader.scss
+++ b/openecomp-ui/resources/scss/components/_loader.scss
@@ -1,159 +1,159 @@
 .onboarding-loader {
-  .onboarding-loader-backdrop {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    background-color: #E1E4E6;
-    opacity: 0.5;
-  }
-  .tlv-loader {
-    height: 63px;
-    width: 63px;
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    margin-top: -10.5px;
-    margin-left: -10.5px;
-  }
-  .tlv-loader.large {
-    transform: scale(1);
-  }
-  .tlv-loader::before {
-    background-color: $gray;
-    border-radius: 50%;
-    box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
-    content: '';
-    display: block;
-    height: 21px;
-    width: 21px;
-    position: absolute;
-    left: 50%;
-    margin-left: -10.5px;
-  }
-  .tlv-loader::after {
-    border-radius: 50%;
-    content: '';
-    display: block;
-    position: absolute;
-    height: 21px;
-    width: 21px;
-    animation: dot-move-2 4.5s infinite ease-in;
-  }
-  @keyframes dot-move {
-    0% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
+    .onboarding-loader-backdrop {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        background-color: $loader-background;
+        opacity: 0.5;
+    }
+    .tlv-loader {
+        height: 63px;
+        width: 63px;
+        position: absolute;
+        top: 30%;
+        left: 50%;
+        margin-top: -10.5px;
+        margin-left: -10.5px;
+    }
+    .tlv-loader.large {
+        transform: scale(1);
+    }
+    .tlv-loader::before {
+        background-color: $gray;
+        border-radius: 50%;
+        box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray,
+            -21px 21px 0px 0px $gray;
+        content: '';
+        display: block;
+        height: 21px;
+        width: 21px;
+        position: absolute;
+        left: 50%;
+        margin-left: -10.5px;
+    }
+    .tlv-loader::after {
+        border-radius: 50%;
+        content: '';
+        display: block;
+        position: absolute;
+        height: 21px;
+        width: 21px;
+        animation: dot-move-2 4.5s infinite ease-in;
+    }
+    @keyframes dot-move {
+        0% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
+        25% {
+            background-color: $orange;
+            left: 42px;
+            top: 21px;
+        }
+        50% {
+            background-color: $light-purple;
+            left: 21px;
+            top: 42px;
+        }
+        75% {
+            background-color: $light-green;
+            left: 0;
+            top: 21px;
+        }
+        100% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
+    }
+    @keyframes dot-move-2 {
+        0% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
+        6.25% {
+            background-color: $blue;
+            left: 42px;
+            top: 21px;
+        }
+        12.5% {
+            background-color: $blue;
+            left: 21px;
+            top: 42px;
+        }
+        18.75% {
+            background-color: $blue;
+            left: 0;
+            top: 21px;
+        }
+        25% {
+            background-color: $orange;
+            left: 21px;
+            top: 0;
+        }
+        31.25% {
+            background-color: $orange;
+            left: 42px;
+            top: 21px;
+        }
+        37.5% {
+            background-color: $orange;
+            left: 21px;
+            top: 42px;
+        }
+        43.75% {
+            background-color: $orange;
+            left: 0;
+            top: 21px;
+        }
+        50% {
+            background-color: $light-purple;
+            left: 21px;
+            top: 0;
+        }
+        56.25% {
+            background-color: $light-purple;
+            left: 42px;
+            top: 21px;
+        }
+        62.5% {
+            background-color: $light-purple;
+            left: 21px;
+            top: 42px;
+        }
+        68.75% {
+            background-color: $light-purple;
+            left: 0;
+            top: 21px;
+        }
+        75% {
+            background-color: $light-green;
+            left: 21px;
+            top: 0;
+        }
+        81.25% {
+            background-color: $light-green;
+            left: 42px;
+            top: 21px;
+        }
+        87.5% {
+            background-color: $light-green;
+            left: 21px;
+            top: 42px;
+        }
+        93.75% {
+            background-color: $light-green;
+            left: 0;
+            top: 21px;
+        }
+        100% {
+            background-color: $blue;
+            left: 21px;
+            top: 0;
+        }
     }
-    25% {
-      background-color: $orange;
-      left: 42px;
-      top: 21px;
-    }
-    50% {
-      background-color: $light-purple;
-      left: 21px;
-      top: 42px;
-    }
-    75% {
-      background-color: $light-green;
-      left: 0;
-      top: 21px;
-    }
-    100% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
-    }
-  }
-  @keyframes dot-move-2 {
-    0% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
-    }
-    6.25% {
-      background-color: $blue;
-      left: 42px;
-      top: 21px;
-    }
-    12.5% {
-      background-color: $blue;
-      left: 21px;
-      top: 42px;
-    }
-    18.75% {
-      background-color: $blue;
-      left: 0;
-      top: 21px;
-    }
-    25% {
-      background-color: $orange;
-      left: 21px;
-      top: 0;
-    }
-    31.25% {
-      background-color: $orange;
-      left: 42px;
-      top: 21px;
-    }
-    37.5% {
-      background-color: $orange;
-      left: 21px;
-      top: 42px;
-    }
-    43.75% {
-      background-color: $orange;
-      left: 0;
-      top: 21px;
-    }
-    50% {
-      background-color: $light-purple;
-      left: 21px;
-      top: 0;
-    }
-    56.25% {
-      background-color: $light-purple;
-      left: 42px;
-      top: 21px;
-    }
-    62.5% {
-      background-color: $light-purple;
-      left: 21px;
-      top: 42px;
-    }
-    68.75% {
-      background-color: $light-purple;
-      left: 0;
-      top: 21px;
-    }
-    75% {
-      background-color: $light-green;
-      left: 21px;
-      top: 0;
-    }
-    81.25% {
-      background-color: $light-green;
-      left: 42px;
-      top: 21px;
-    }
-    87.5% {
-      background-color: $light-green;
-      left: 21px;
-      top: 42px;
-    }
-    93.75% {
-      background-color: $light-green;
-      left: 0;
-      top: 21px;
-    }
-    100% {
-      background-color: $blue;
-      left: 21px;
-      top: 0;
-    }
-  }
 }
-
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index ab4d15fd90..adb3688e5f 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -1,63 +1,63 @@
 .software-product-navigation-side-bar {
-  width: 245px;
-  height: 100%;
-  background-color: $white;
-  border-right: 1px solid $light-gray;
-  @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
-  border-bottom: 0;
-
-  .navigation-side-content {
-    overflow: hidden;
+    width: 245px;
     height: 100%;
+    background-color: $white;
+    border-right: 1px solid $light-gray;
+    @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
+    border-bottom: 0;
 
-    .navigation-group {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      background-color: $tlv-gray;
-      .group-name {
-        @extend .heading-4-semibold;
-        @include ellipsis;
-        min-height: 70px;
-        display: block;
-        height: 70px;
-        padding: 24px 12px 13px 40px;
-        background-color: $white;
-        border-bottom: 1px solid $tlv-light-gray;
-      }
-    }
+    .navigation-side-content {
+        overflow: hidden;
+        height: 100%;
 
-    .navigation-group-items {
-      padding-left: 20px;
-      overflow-y: auto;
+        .navigation-group {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            background-color: $tlv-gray;
+            .group-name {
+                @extend .heading-4-semibold;
+                @include ellipsis;
+                min-height: 70px;
+                display: block;
+                height: 70px;
+                padding: 24px 12px 13px 40px;
+                background-color: $white;
+                border-bottom: 1px solid $tlv-light-gray;
+            }
+        }
 
-      .navigation-group-item {
-        @extend .body-1;
-        cursor: pointer;
-        margin: 18px 0;
-        padding-left: 20px;
-        color: $dark-gray;
-        line-height: 17px;
-        &.selected-item {
-          padding-left: 0;
-          .collapse.in {
+        .navigation-group-items {
             padding-left: 20px;
-          }
-        }
-        .navigation-group-item-name {
-          @include ellipsis;
-          white-space: normal;
-          &.selected {
-            @extend .body-1-semibold;
-            border-left: 4px solid $blue;
-            padding-left: 18px;
-            color: $blue;
-          }
-          &.bold-name {
-            @extend .body-1-semibold;
-          }
+            overflow-y: auto;
+
+            .navigation-group-item {
+                @extend .body-1;
+                cursor: pointer;
+                margin: 18px 0;
+                padding-left: 20px;
+                color: $dark-gray;
+                line-height: 17px;
+                &.selected-item {
+                    padding-left: 0;
+                    .collapse.in {
+                        padding-left: 20px;
+                    }
+                }
+                .navigation-group-item-name {
+                    @include ellipsis;
+                    white-space: normal;
+                    &.selected {
+                        @extend .body-1-semibold;
+                        border-left: 4px solid $blue;
+                        padding-left: 18px;
+                        color: $blue;
+                    }
+                    &.bold-name {
+                        @extend .body-1-semibold;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
deleted file mode 100644
index 5b10dee0ee..0000000000
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.notification-modal {
-
-  .modal-content {
-    .modal-header {
-      padding: 15px 10px 10px;
-      .modal-title {
-        @extend .heading-5-semibold;
-      }
-    }
-    .modal-body {
-      padding: 30px 15px;
-      @extend .body-1-semibold;
-    }
-  }
-
-  &.danger {
-    .modal-content .modal-header {
-      border-top: 3px solid $red;
-    }
-	}
-	
-	&.negative {
-    .modal-content .modal-header {
-      border-top: 3px solid $red;
-    }
-  }
-
-  &.warning {
-    .modal-content .modal-header {
-      border-top: 3px solid $yellow;
-    }
-  }
-
-}
diff --git a/openecomp-ui/resources/scss/components/_overlay.scss b/openecomp-ui/resources/scss/components/_overlay.scss
index 7c310bf1a6..3d2d0bbaae 100644
--- a/openecomp-ui/resources/scss/components/_overlay.scss
+++ b/openecomp-ui/resources/scss/components/_overlay.scss
@@ -1,26 +1,26 @@
 .onboarding-overlay {
-  z-index: 1000;
-  border: 1px solid $light-gray;
-  position: absolute;
-  background-color: $white;
-  border-radius: 2px;
-  box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin-top: 5px;
-  margin-left: -86px;
-  .arrow-up {
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    background-color: transparent;
-    border-bottom: 5px solid $blue;
-    margin-left: 114px;
-    margin-top: -5px;
-  }
-  .arrow-border {
-    border-top: 5px solid $blue;
-  }
-}
\ No newline at end of file
+    z-index: 1000;
+    border: 1px solid $light-gray;
+    position: absolute;
+    background-color: $white;
+    border-radius: 2px;
+    box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    margin-top: 5px;
+    margin-left: -86px;
+    .arrow-up {
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        background-color: transparent;
+        border-bottom: 5px solid $blue;
+        margin-left: 114px;
+        margin-top: -5px;
+    }
+    .arrow-border {
+        border-top: 5px solid $blue;
+    }
+}
diff --git a/openecomp-ui/resources/scss/components/_progressBar.scss b/openecomp-ui/resources/scss/components/_progressBar.scss
index 040c8cefd7..5529a550c5 100644
--- a/openecomp-ui/resources/scss/components/_progressBar.scss
+++ b/openecomp-ui/resources/scss/components/_progressBar.scss
@@ -1,24 +1,24 @@
- .progress-bar-view {
+.progress-bar-view {
     display: -webkit-box;
     padding: 5px;
     .progress-bar-outside {
-      display: flex;
-      width: 90%;
-      justify-content: space-between;
-      background-color: lightgray;
-      border-radius: 15px;
-      height: 10px;
-      .progress-bar-inside {
-        display: block;
-        border: 1px solid gainsboro;
-        background-color: #4faa39;
-        border-radius: inherit;
-      }
+        display: flex;
+        width: 90%;
+        justify-content: space-between;
+        background-color: lightgray;
+        border-radius: 15px;
+        height: 10px;
+        .progress-bar-inside {
+            display: block;
+            border: 1px solid gainsboro;
+            background-color: #4faa39;
+            border-radius: inherit;
+        }
     }
     .progress-bar-view-label {
-      margin-right: -30px;
-      margin-top: -2px;
-      margin-left: 10px;
-      color: black;
-     }
-  }
+        margin-right: -30px;
+        margin-top: -2px;
+        margin-left: 10px;
+        color: black;
+    }
+}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index fa8eb3110c..90b45a5a49 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,145 +1,146 @@
 .select-action-table-view {
-	.svg-icon-wrapper {
-		flex-direction: row;
-		.svg-icon {
-			&:not(.__plus) {
-				margin-left: 5px;
-				margin-right: 5px;
-				width:16px;
-				height:16px;
-			}
-		}
-	}
-	.dummy-icon {
-		background-color: $white;
-		fill: $white;
-		.locked {
-			fill: $white;
-		}
-	}
+    .svg-icon-wrapper {
+        flex-direction: row;
+        .svg-icon {
+            &:not(.__plus) {
+                margin-left: 5px;
+                margin-right: 5px;
+                width: 16px;
+                height: 16px;
+            }
+        }
+    }
+    .dummy-icon {
+        background-color: $white;
+        fill: $white;
+        .locked {
+            fill: $white;
+        }
+    }
 
-	.select-action-table-controllers {
-		display: flex;
-		.svg-icon-wrapper {
-			&:hover {
-				cursor: pointer;
-			}
-			&:first-child {
-				margin-left: auto;
-			}
-		}
-	}
-	.select-action-table {
-		display: flex;
-		flex-direction: column;
-		border-color: $light-gray;
+    .select-action-table-controllers {
+        display: flex;
+        .svg-icon-wrapper {
+            &:hover {
+                cursor: pointer;
+            }
+            &:first-child {
+                margin-left: auto;
+            }
+        }
+    }
+    .select-action-table {
+        display: flex;
+        flex-direction: column;
+        border-color: $light-gray;
 
-		.select-action-table-headers {
-			display: flex;
-			background-color: $tlv-light-gray;
-			border-color: inherit;
-			.select-action-table-header {
-				@extend .body-1-semibold;
-				flex: 1;
-				border-top: 1px solid;
-				border-right: 1px solid;
-				border-color: inherit;
-				padding: 8px 0 7px 20px;
-				&:first-child {
-					border-left: 1px solid;
-					border-color: inherit;
-				}
-			}
-		}
-		.select-action-table-row-wrapper {
-			display: flex;
-			flex-direction: row;
-    		margin-bottom: 14px;
-			.svg-icon-wrapper.hideDelete {
-				.svg-icon {
-					fill: $white;
-				}
-			}
-			.select-action-table-row {
-				display: flex;
-				flex: 1;
-				border: 1px solid;
-				border-color: $light-gray;
-				&.has-error {
-					border-color: $red;
-				}
+        .select-action-table-headers {
+            display: flex;
+            background-color: $tlv-light-gray;
+            border-color: inherit;
+            .select-action-table-header {
+                @extend .body-1-semibold;
+                flex: 1;
+                border-top: 1px solid;
+                border-right: 1px solid;
+                border-color: inherit;
+                padding: 8px 0 7px 20px;
+                &:first-child {
+                    border-left: 1px solid;
+                    border-color: inherit;
+                }
+            }
+        }
+        .select-action-table-row-wrapper {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 14px;
+            .svg-icon-wrapper.hideDelete {
+                .svg-icon {
+                    fill: $white;
+                }
+            }
+            .select-action-table-row {
+                display: flex;
+                flex: 1;
+                border: 1px solid;
+                border-color: $light-gray;
+                &.has-error {
+                    border-color: $red;
+                }
 
-				.select-action-table-cell {
-					flex: 1;
-					border-right: 1px solid;
-					border-color: $light-gray;
-					@extend .body-1;
-					.dropdown-multi-select {
-						.form-group {
-							.Select{
-								&.is-open {
-									border: 1px solid $blue;
-								}
-							}
-						}
-					}
-					.form-group {
-						margin: 0;
-						.Select-control {
-							height:36px;
-							border: none;
-							.is-open {
-								border-left-color: $blue;
-								border-right-color: $blue;
-							}
-							.Select-value, .Select-placeholder, .Select-input {
-								padding-left: 20px;
-								padding-right: 50px;
-								padding-top: 4px;
-
-							}
-							.Select-placeholder {
-								color: $dark-gray;
-							}
-							.Select-arrow-zone {
-								padding-right: 15px;
-							}
-						}
-					}
-					&:last-child {
-						border-right: none;
-					}
-				}
-				.Select-menu-outer {
-						border-left: 1px solid $blue;
-						border-right: 1px solid $blue;
-						border-bottom: 1px solid $blue;
-						overflow: auto;
-						.Select-menu {
-							.Select-option {
-								overflow: hidden;
-								text-overflow: ellipsis;
-								border-bottom: 1px solid $light-gray;
-								&:hover {
-									background-color: $blue;
-									color: $white;
-									&.is-focused {
-										background-color: $blue;
-									}
-									&.is-focused {
-										background-color: $blue;
-									}
-								}
-								&.is-selected {
-									background-color: transparent;
-								}
-								&.is-focused {
-									background-color: transparent;
-								}
-							}
-						}
-					}
-			}
-		}
-	}
+                .select-action-table-cell {
+                    flex: 1;
+                    border-right: 1px solid;
+                    border-color: $light-gray;
+                    @extend .body-1;
+                    .dropdown-multi-select {
+                        .form-group {
+                            .Select {
+                                &.is-open {
+                                    border: 1px solid $blue;
+                                }
+                            }
+                        }
+                    }
+                    .form-group {
+                        margin: 0;
+                        .Select-control {
+                            height: 36px;
+                            border: none;
+                            .is-open {
+                                border-left-color: $blue;
+                                border-right-color: $blue;
+                            }
+                            .Select-value,
+                            .Select-placeholder,
+                            .Select-input {
+                                padding-left: 20px;
+                                padding-right: 50px;
+                                padding-top: 4px;
+                            }
+                            .Select-placeholder {
+                                color: $dark-gray;
+                            }
+                            .Select-arrow-zone {
+                                padding-right: 15px;
+                            }
+                        }
+                    }
+                    &:last-child {
+                        border-right: none;
+                    }
+                }
+                .Select-menu-outer {
+                    border-left: 1px solid $blue;
+                    border-right: 1px solid $blue;
+                    border-bottom: 1px solid $blue;
+                    overflow: auto;
+                    .Select-menu {
+                        .Select-option {
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            border-bottom: 1px solid $light-gray;
+                            &:hover {
+                                background-color: $blue;
+                                color: $white;
+                                &.is-focused {
+                                    background-color: $blue;
+                                }
+                                &.is-focused {
+                                    background-color: $blue;
+                                }
+                            }
+                            &.is-selected {
+                                background-color: transparent;
+                            }
+                            &.is-focused {
+                                background-color: transparent;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
index d89c342d47..f567e07667 100644
--- a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
+++ b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
@@ -1,18 +1,18 @@
 .sequence-diagram {
-  .sequence-diagram-sequencer {
-	.asdcs-diagram {
-	  overflow: auto;
-	  max-height: 60vh;
-	}
-	.asdcs-editor {
-	  height: 60vh;
-	}
-  }
-  .sequence-diagram-action-buttons {
-	margin-left: 20px;
-	margin-top: 20px;
-	button:first-of-type {
-	  margin-right: 20px;
-	}
-  }
+    .sequence-diagram-sequencer {
+        .asdcs-diagram {
+            overflow: auto;
+            max-height: 60vh;
+        }
+        .asdcs-editor {
+            height: 60vh;
+        }
+    }
+    .sequence-diagram-action-buttons {
+        margin-left: 20px;
+        margin-top: 20px;
+        button:first-of-type {
+            margin-right: 20px;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index cd5284059d..e2e7b1bca9 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -1,65 +1,63 @@
 .submit-error-response-view {
-  max-height: 500px;
-  overflow: auto;
-  .list-group-item {
-    border-top: none;
-  }
-  .panel-title {
-    a {
-      &:after {
-        content: "(details)";
-        color: $link-blue;
-        float: right;
-
-      }
-      &:hover {
-        color: $blue;
-        text-decoration: underline;
-      }
+    max-height: 500px;
+    overflow: auto;
+    .list-group-item {
+        border-top: none;
     }
-  }
-  .error-block {
-    margin: 10px 0;
-    .error-block-header {
-      background-color: $tlv-gray;
-      padding: 5px;
-      cursor: pointer;
-      .svg-icon {
-        &.__chevronDown {
-          margin-right: 10px;
-        }
-      }
-      .collapse-right {
-        .svg-icon {
-          &.__chevronDown {
-            transform: rotate(270deg);
-          }
+    .panel-title {
+        a {
+            &:after {
+                content: '(details)';
+                color: $link-blue;
+                float: right;
+            }
+            &:hover {
+                color: $blue;
+                text-decoration: underline;
+            }
         }
-      }
-
-    }
-    .error-code-list-item {
-      display: flex;
-      justify-content: flex-start;
-      .icon-label {
-        @extend .body-1;
-        color: $dark-gray;
-        margin-left: 10px;
-      }
-      .icon-component {
-        align-items: baseline;
-      }
-    }
-    .list-group-item {
-      .error-item-text {
-        margin-top:-2px;
-        max-width: 100px;
-      }
     }
-    .component-name-header {
-      margin-left: 45px;
-      margin-top: 10px;
-      @extend .heading-5-semibold;
+    .error-block {
+        margin: 10px 0;
+        .error-block-header {
+            background-color: $tlv-gray;
+            padding: 5px;
+            cursor: pointer;
+            .svg-icon {
+                &.__chevronDown {
+                    margin-right: 10px;
+                }
+            }
+            .collapse-right {
+                .svg-icon {
+                    &.__chevronDown {
+                        transform: rotate(270deg);
+                    }
+                }
+            }
+        }
+        .error-code-list-item {
+            display: flex;
+            justify-content: flex-start;
+            .icon-label {
+                @extend .body-1;
+                color: $dark-gray;
+                margin-left: 10px;
+            }
+            .icon-component {
+                align-items: baseline;
+            }
+        }
+        .list-group-item {
+            .error-item-text {
+                margin-top: -2px;
+                max-width: 100px;
+            }
+        }
+        .component-name-header {
+            margin-left: 45px;
+            margin-top: 10px;
+            @extend .heading-5-semibold;
+        }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss
index fcf0902adf..6bcf3a359b 100644
--- a/openecomp-ui/resources/scss/components/_toggleInput.scss
+++ b/openecomp-ui/resources/scss/components/_toggleInput.scss
@@ -1,62 +1,63 @@
 .toggle-input-wrapper {
-  $toggle-width: 40px;
-  $toggle-height: 20px;
-  display: table;
-  .toggle-switch, .toggle-input-label {
-    display: table-cell;
-    vertical-align: middle;
-    padding-left: 10px;
-  }
-  .toggle {
-    position: absolute;
-    margin-left: -9999px;
-    visibility: hidden;
-  }
-  .toggle + label {
-    @extend %noselect;
-    display: block;
-    position: relative;
-    cursor: pointer;
-    outline: none;
-  }
+    $toggle-width: 40px;
+    $toggle-height: 20px;
+    display: table;
+    .toggle-switch,
+    .toggle-input-label {
+        display: table-cell;
+        vertical-align: middle;
+        padding-left: 10px;
+    }
+    .toggle {
+        position: absolute;
+        margin-left: -9999px;
+        visibility: hidden;
+    }
+    .toggle + label {
+        @extend %noselect;
+        display: block;
+        position: relative;
+        cursor: pointer;
+        outline: none;
+    }
 
-  input.toggle-round-flat + label {
-    padding: 1px;
-    width: $toggle-width;
-    height: $toggle-height;
-    background-color: $dark-gray;
-    border-radius: $toggle-height;
-    transition: background 0.4s;
-  }
-  input.toggle-round-flat + label:before,
-  input.toggle-round-flat + label:after {
-    display: block;
-    position: absolute;
-    content: "";
-  }
-  input.toggle-round-flat + label:before {
-    top: 1px;
-    left: 1px;
-    bottom: 1px;
-    right: 1px;
-    background-color: $white;
-    border-radius: $toggle-height;
-    transition: background 0.4s;
-  }
-  input.toggle-round-flat + label:after {
-    top: 4px;
-    left: 4px;
-    bottom: 4px;
-    width: $toggle-height - 8;
-    background-color: $dark-gray;
-    border-radius: $toggle-height - 8;
-    transition: margin 0.4s, background 0.4s;
-  }
-  input.toggle-round-flat:checked + label {
-    background-color: $link-blue;
-  }
-  input.toggle-round-flat:checked + label:after {
-    margin-left: $toggle-height;
-    background-color: $link-blue;
-  }
+    input.toggle-round-flat + label {
+        padding: 1px;
+        width: $toggle-width;
+        height: $toggle-height;
+        background-color: $dark-gray;
+        border-radius: $toggle-height;
+        transition: background 0.4s;
+    }
+    input.toggle-round-flat + label:before,
+    input.toggle-round-flat + label:after {
+        display: block;
+        position: absolute;
+        content: '';
+    }
+    input.toggle-round-flat + label:before {
+        top: 1px;
+        left: 1px;
+        bottom: 1px;
+        right: 1px;
+        background-color: $white;
+        border-radius: $toggle-height;
+        transition: background 0.4s;
+    }
+    input.toggle-round-flat + label:after {
+        top: 4px;
+        left: 4px;
+        bottom: 4px;
+        width: $toggle-height - 8;
+        background-color: $dark-gray;
+        border-radius: $toggle-height - 8;
+        transition: margin 0.4s, background 0.4s;
+    }
+    input.toggle-round-flat:checked + label {
+        background-color: $link-blue;
+    }
+    input.toggle-round-flat:checked + label:after {
+        margin-left: $toggle-height;
+        background-color: $link-blue;
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_tree.scss b/openecomp-ui/resources/scss/components/_tree.scss
index e03594ee64..380fb64aec 100644
--- a/openecomp-ui/resources/scss/components/_tree.scss
+++ b/openecomp-ui/resources/scss/components/_tree.scss
@@ -1,56 +1,53 @@
-
 .tree-view {
-	overflow: hidden;
-
-	&.scrollable {
-		overflow: auto;
-	}
-
-	.node {
-		text-shadow: none;
-		stroke: none;
-
-		.outer-circle {
-			stroke: $blue;
-			stroke-width: 2px;
-			fill: $white;
-		}
-
-		.inner-circle {
-			fill: $blue;
-		}
-
-		text {
-			text-anchor: end;
-			@extend .body-2-semibold;
-			fill: $blue;
-		}
-
-		&.clickable {
-			cursor: pointer;
-		}
-
-		&.selectedNode {
-			.outer-circle {
-				fill: $blue;
-			}
-
-			.inner-circle {
-				fill: $blue;
-			}
-
-			text {
-				fill: $blue;
-			}
-		}
-	}
-
-
-	.link {
-		fill: none;
-		stroke: $dark-gray;
-		stroke-opacity: 0.4;
-		stroke-width: 1.5px;
-	}
-
+    overflow: hidden;
+
+    &.scrollable {
+        overflow: auto;
+    }
+
+    .node {
+        text-shadow: none;
+        stroke: none;
+
+        .outer-circle {
+            stroke: $blue;
+            stroke-width: 2px;
+            fill: $white;
+        }
+
+        .inner-circle {
+            fill: $blue;
+        }
+
+        text {
+            text-anchor: end;
+            @extend .body-2-semibold;
+            fill: $blue;
+        }
+
+        &.clickable {
+            cursor: pointer;
+        }
+
+        &.selectedNode {
+            .outer-circle {
+                fill: $blue;
+            }
+
+            .inner-circle {
+                fill: $blue;
+            }
+
+            text {
+                fill: $blue;
+            }
+        }
+    }
+
+    .link {
+        fill: none;
+        stroke: $dark-gray;
+        stroke-opacity: 0.4;
+        stroke-width: 1.5px;
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_userNotifications.scss b/openecomp-ui/resources/scss/components/_userNotifications.scss
index 74cafae438..649e636541 100644
--- a/openecomp-ui/resources/scss/components/_userNotifications.scss
+++ b/openecomp-ui/resources/scss/components/_userNotifications.scss
@@ -1,123 +1,122 @@
-
 .onboarding-notifications {
-  margin-left: 10px;
-  .notifications-icon {
-    display: flex;
-    @extend .clickable;
-    .notifications-count {
-      color: $white;
-      font-size: 11px;
-      text-align: center;
-      width: 16px;
-      height: 16px;
-      background-color: $orange;
-      border-radius: 50%;
-      position: relative;
-      right: 7px;
-      top: -2px;
-      &.hidden-count {
-        background-color: transparent;
-        color: transparent;
-      }
-    }
-  }
-  .onboarding-overlay {
-    width: 520px;
-    right: 39px;
-    margin-top: 18px;
-    .arrow-up {
-      margin-left: 487px;
+    margin-left: 10px;
+    .notifications-icon {
+        display: flex;
+        @extend .clickable;
+        .notifications-count {
+            color: $white;
+            font-size: 11px;
+            text-align: center;
+            width: 16px;
+            height: 16px;
+            background-color: $orange;
+            border-radius: 50%;
+            position: relative;
+            right: 7px;
+            top: -2px;
+            &.hidden-count {
+                background-color: transparent;
+                color: transparent;
+            }
+        }
     }
+    .onboarding-overlay {
+        width: 520px;
+        right: 39px;
+        margin-top: 18px;
+        .arrow-up {
+            margin-left: 487px;
+        }
 
-    .user-notifications {
-      .notifications-title {
-        color: $blue;
-        @extend .heading-5-semibold;
-        @extend .text-uppercase !optional;
-        padding: 13px 20px 10px 20px;
-        border-bottom: 1px solid $tlv-light-gray;
-      }
-      .notifications-list {
-        max-height: 600px;
-        overflow-y: auto;
-        .notification {
-          border-bottom: 1px solid $tlv-light-gray;
-          padding: 16px 20px 18px 20px;
-          display: flex;
-          &.unread {
-            background-color: lighten($gray, 38%);
-            .item-name {
-              display: flex;
-              @include base-font-bold;
-            }
-            .unread-circle-icon {
-              width: 8px;
-              height: 8px;
-              border-radius: 50%;
-              background-color: $blue;
-              align-self: center;
-              margin-bottom: 3px;
-              margin-left: 9px;
-            }
-          }
-          .notification-data {
-            width: 366px;
-            margin-right: 30px;
-            color: $dark-gray;
-            .item-name {
-              @extend .body-2-semibold;
-              @extend .text-uppercase !optional;
-              margin-bottom: 6px;
-            }
-            .flex-items {
-              display: flex;
-              margin: 6px 0 11px 0;
-              @extend .body-3;
-              line-height: 20px;
-              @extend .text-uppercase !optional;
-              color: $gray;
-              .separator {
-                border-left: 1px solid $dark-gray;
-                margin: 5px 8px;
-              }
-            }
-            .description {
-              @extend .body-3;
-              margin: 11px 0 8px 0;
-              .more-less {
-                font-size: $icon-font-size;
+        .user-notifications {
+            .notifications-title {
                 color: $blue;
-              }
-            }
-            .date {
-              font-size: $icon-font-size;
-              @include base-font-regular;
-              color: $gray;
-              margin-top: 8px;
+                @extend .heading-5-semibold;
+                @extend .text-uppercase !optional;
+                padding: 13px 20px 10px 20px;
+                border-bottom: 1px solid $tlv-light-gray;
             }
-          }
+            .notifications-list {
+                max-height: 600px;
+                overflow-y: auto;
+                .notification {
+                    border-bottom: 1px solid $tlv-light-gray;
+                    padding: 16px 20px 18px 20px;
+                    display: flex;
+                    &.unread {
+                        background-color: lighten($gray, 38%);
+                        .item-name {
+                            display: flex;
+                            @include base-font-bold;
+                        }
+                        .unread-circle-icon {
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 50%;
+                            background-color: $blue;
+                            align-self: center;
+                            margin-bottom: 3px;
+                            margin-left: 9px;
+                        }
+                    }
+                    .notification-data {
+                        width: 366px;
+                        margin-right: 30px;
+                        color: $dark-gray;
+                        .item-name {
+                            @extend .body-2-semibold;
+                            @extend .text-uppercase !optional;
+                            margin-bottom: 6px;
+                        }
+                        .flex-items {
+                            display: flex;
+                            margin: 6px 0 11px 0;
+                            @extend .body-3;
+                            line-height: 20px;
+                            @extend .text-uppercase !optional;
+                            color: $gray;
+                            .separator {
+                                border-left: 1px solid $dark-gray;
+                                margin: 5px 8px;
+                            }
+                        }
+                        .description {
+                            @extend .body-3;
+                            margin: 11px 0 8px 0;
+                            .more-less {
+                                font-size: $icon-font-size;
+                                color: $blue;
+                            }
+                        }
+                        .date {
+                            font-size: $icon-font-size;
+                            @include base-font-regular;
+                            color: $gray;
+                            margin-top: 8px;
+                        }
+                    }
 
-          .notification-action .action-button {
-            @extend .clickable;
-            width: 74px;
-            height: 28px;
-            color: $white;
-            background-color: $blue;
-            border-radius: 2px;
-            text-align: center;
-            line-height: 2;
-            margin-top: 4px;
-            &.active {
-              background-color: #0091c7;
-              border: solid 1px #006186;
-            }
-            &:hover {
-              background-color: #1ec2ff;
-              border: solid 1px #0091c8;
+                    .notification-action .action-button {
+                        @extend .clickable;
+                        width: 74px;
+                        height: 28px;
+                        color: $white;
+                        background-color: $blue;
+                        border-radius: 2px;
+                        text-align: center;
+                        line-height: 2;
+                        margin-top: 4px;
+                        &.active {
+                            background-color: $action-button-active-bg;
+                            border: solid 1px $action-button-active-border;
+                        }
+                        &:hover {
+                            background-color: $action-button-hover-bg;
+                            border: solid 1px $action-button-hover-border;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 52408f5952..9f708c4c2a 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -1,118 +1,110 @@
 form {
-  .validation-form-content {
-    .validation-input-wrapper {
-      position: relative;
-      flex: 1;
-    }
-    .validation-radio-wrapper {
-      position: relative;
-    }
-    .sdc-tabs {
-      position: relative;
-      .invalid-tab:not(.sdc-tab-active) {
-          color: $red;
-      }
-    }
-    .validation-error-message {
-      &.bottom {
-        .tooltip-arrow {
-          border-bottom-color: $red;
+    .validation-form-content {
+        .validation-input-wrapper {
+            position: relative;
+            flex: 1;
         }
-      }
-      &.right {
-        .tooltip-arrow {
-          border-right-color: $red;
+        .validation-radio-wrapper {
+            position: relative;
         }
-      }
-      &.left {
-        .tooltip-arrow {
-          border-left-color: $red;
+        .sdc-tabs {
+            position: relative;
+            .invalid-tab:not(.sdc-tab-active) {
+                color: $red;
+            }
         }
-      }
-      .tooltip-inner {
-        background-color: $red;
-      }
-    }
-    .input-row {
-      padding-bottom: 32px;
-      &:only-child {
-        padding-bottom: 0;
-      }
-      &:last-child {
-        padding-bottom: 0;
-      }
-      .form-group {
-        margin-bottom: 0;
-      }
-    }
-
-    .rows-section {
-      .row-flex-components {
-        display: flex;
-      }
-      .validation-input-wrapper {
-        flex: 1;
-      }
-      .empty-col {
-        flex: 1.2;
-        content: ' ';
-      }
-      .empty-two-col {
-        flex: 2.4;
-        content: ' ';
-      }
-
-      .two-col {
-        flex: 2.2;
-      }
-      .three-col {
-        flex: 3.4;
-      }
-      .single-col {
-        flex: 1.2;
-        display: flex;
-        &:after {
-          flex: 0.2;
-          content: ' ';
+        .validation-error-message {
+            &.bottom {
+                .tooltip-arrow {
+                    border-bottom-color: $red;
+                }
+            }
+            &.right {
+                .tooltip-arrow {
+                    border-right-color: $red;
+                }
+            }
+            &.left {
+                .tooltip-arrow {
+                    border-left-color: $red;
+                }
+            }
+            .tooltip-inner {
+                background-color: $red;
+            }
         }
-        @media (min-width: 1389px) {
-          &.add-line-break {
-            .control-label {
-              &:after {
-                content: "\00a0";
-                display: block;
-              }
+        .input-row {
+            padding-bottom: 32px;
+            &:only-child {
+                padding-bottom: 0;
+            }
+            &:last-child {
+                padding-bottom: 0;
+            }
+            .form-group {
+                margin-bottom: 0;
             }
-          }
         }
 
-      }
-    }
-  }
+        .rows-section {
+            .row-flex-components {
+                display: flex;
+            }
+            .validation-input-wrapper {
+                flex: 1;
+            }
+            .empty-col {
+                flex: 1.2;
+                content: ' ';
+            }
+            .empty-two-col {
+                flex: 2.4;
+                content: ' ';
+            }
 
-  .validation-buttons {
-    padding: 20px 0;
-    text-align: right;
-    button:first-child {
-      margin-right: 15px;
-      min-width: 120px;
+            .two-col {
+                flex: 2.2;
+            }
+            .three-col {
+                flex: 3.4;
+            }
+            .single-col {
+                flex: 1.2;
+                display: flex;
+                &:after {
+                    flex: 0.2;
+                    content: ' ';
+                }
+                @media (min-width: 1389px) {
+                    &.add-line-break {
+                        .control-label {
+                            &:after {
+                                content: '\00a0';
+                                display: block;
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
-		.svg-icon {
-			height: 14px;
-			width: 14px;
-		}
-		.svg-icon.check {
-			fill: $white;
-		}
-		.svg-icon.close {
-			fill: $blue;
-		}
-  }
-}
 
-.modal-body {
-  .validation-buttons {
-    padding: 20px 15px;
-    background-color: $tlv-gray;
-  }
+    .validation-buttons {
+        padding: 20px 0;
+        text-align: right;
+        button:first-child {
+            margin-right: 15px;
+            min-width: 120px;
+        }
+        .svg-icon {
+            height: 14px;
+            width: 14px;
+        }
+        .svg-icon.check {
+            fill: $white;
+        }
+        .svg-icon.close {
+            fill: $blue;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 98771f1dbd..cc839995cb 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,281 +1,294 @@
 .version-controller-bar {
-	display: flex;
-	min-height: 70px;
-	border-bottom: 1px solid $tlv-light-gray;
-	background-color: transparent;
+    display: flex;
+    min-height: 70px;
+    border-bottom: 1px solid $tlv-light-gray;
+    background-color: transparent;
 
-	.vc-container {
-		display: flex;
-		flex: 1;
-		align-self: center;
-		background-color: transparent;
-		justify-content: space-between;
-		align-items: center;
-		padding-left: 16px;
-		padding-right: 40px;
+    .vc-container {
+        display: flex;
+        flex: 1;
+        align-self: center;
+        background-color: transparent;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 16px;
+        padding-right: 40px;
 
-		.vc-separator {
-			border-left: 1px solid $tlv-light-gray;
-			height: 37px;
-			margin-left: 5px;
-			margin-right: 5px;
-		}
+        .vc-separator {
+            border-left: 1px solid $tlv-light-gray;
+            height: 37px;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
 
-		.version-status-container {
-			display: flex;
-			height: 30px;
+        .version-status-container {
+            display: flex;
+            height: 30px;
 
-			.version-selector-more-versions {
-				color: $blue;
-				cursor: pointer;
-			}
+            .version-selector-more-versions {
+                color: $blue;
+                cursor: pointer;
+            }
 
-			.version-selector {
-				margin-top: 0px;
-				padding-right: 10px;
-				margin-right: 15px;
-				margin-left: 10px;
-				border-color: $light-gray;
-				border-radius: 2px;
-				width: 243px;
-				height: 30px;
-				@extend .body-1;
-			}
+            .version-selector {
+                margin-top: 0px;
+                padding-right: 10px;
+                margin-right: 15px;
+                margin-left: 10px;
+                border-color: $light-gray;
+                border-radius: 2px;
+                width: 243px;
+                height: 30px;
+                @extend .body-1;
+            }
 
-			.version-section {
-				.form-group {
-					margin-right: 20px;
+            .version-section {
+                .form-group {
+                    margin-right: 20px;
 
-					.input-options {
-						border: none;
+                    .input-options {
+                        border: none;
 
-						.input-options-select {
-							padding-top: 4px;
-						}
-					}
-				}
-			}
+                        .input-options-select {
+                            padding-top: 4px;
+                        }
+                    }
+                }
+            }
 
-			.vc-status {
-				display: flex;
-				padding-left: 20px;
-				border-left: $light-gray thin solid;
+            .vc-status {
+                display: flex;
+                padding-left: 20px;
+                border-left: $light-gray thin solid;
 
-				.status-text {
-					align-self: center;
-					margin-top: 2px;
-					@extend .heading-5;
-					color: $dark-gray;
-				}
-			}
-			.depricated-item-status {
-				@extend .body-3;
-				color: $white;
-				background-color: $dark-purple;
-				margin-left: 10px;
-				padding: 1px 10px;
-				align-self: center;
-				border-radius: 3px; 
-			}
-		}
+                .status-text {
+                    align-self: center;
+                    margin-top: 2px;
+                    @extend .heading-5;
+                    color: $dark-gray;
+                }
+            }
+            .depricated-item-status {
+                @extend .body-3;
+                color: $white;
+                background-color: $dark-purple;
+                margin-left: 10px;
+                padding: 1px 10px;
+                align-self: center;
+                border-radius: 3px;
+            }
+        }
 
-		.save-submit-cancel-container {
-			display: flex;
-			align-items: center;
-			height: 100%;
+        .save-submit-cancel-container {
+            display: flex;
+            align-items: center;
+            height: 100%;
 
-			.action-buttons, .collaborator-action-buttons, .vc-save-section, .vc-submit-section {
-				display: flex;
-				align-items: center;
-				height: 100%;
+            .action-buttons,
+            .collaborator-action-buttons,
+            .vc-save-section,
+            .vc-submit-section {
+                display: flex;
+                align-items: center;
+                height: 100%;
 
-				.vc-submit-button {
-					border: 1px solid $dark-gray;
-					width: 94px;
-					height: 30px;
-					border-radius: 2px;
-					padding-top: 5px;
-					padding-left: 10px;
-					margin-left: 10px;
-					margin-right: 10px;
+                .vc-submit-button {
+                    border: 1px solid $dark-gray;
+                    width: 94px;
+                    height: 30px;
+                    border-radius: 2px;
+                    padding-top: 5px;
+                    padding-left: 10px;
+                    margin-left: 10px;
+                    margin-right: 10px;
 
-					&:hover:not(.disabled) {
-						cursor: pointer;
-						background-color: $tlv-light-gray;
-					}
+                    &:hover:not(.disabled) {
+                        cursor: pointer;
+                        background-color: $tlv-light-gray;
+                    }
 
-					&.disabled {
-						border-color: $light-gray;
-					}
+                    &.disabled {
+                        border-color: $light-gray;
+                    }
 
-					.vc-v-submit {
-						width: 11px;
-						height: 8px;
-						margin-right: 10px;
-						position: relative;
-						top: -1px;
-					}
-				}
+                    .vc-v-submit {
+                        width: 11px;
+                        height: 8px;
+                        margin-right: 10px;
+                        position: relative;
+                        top: -1px;
+                    }
+                }
 
-				.version-control-buttons {
-					display: flex;
-				}
+                .version-control-buttons {
+                    display: flex;
+                }
 
-				.action-button-wrapper {
-					display: flex;
-					align-items: center;
-					height: 70px;
+                .action-button-wrapper {
+                    display: flex;
+                    align-items: center;
+                    height: 70px;
 
-					&:hover:not(.disabled) {
-						background-color: $tlv-light-gray;
-					}
+                    &:hover:not(.disabled) {
+                        background-color: $tlv-light-gray;
+                    }
 
-					&:active:not(.disabled) {
-						background-color: $light-gray;
-					}
+                    &:active:not(.disabled) {
+                        background-color: $light-gray;
+                    }
 
-					.action-buttons-svg {
-						padding-left: 10px;
-						padding-right: 10px;
+                    .action-buttons-svg {
+                        padding-left: 10px;
+                        padding-right: 10px;
 
-						.svg-icon {
-							fill: $text-black;
-							height: 20px;
+                        .svg-icon {
+                            fill: $text-black;
+                            height: 20px;
 
-							&, &.__version-controller-save { width: 20px; }
-							&.__version-controller-permissions { width: 32px; }
-							&.__version-controller-undo, &.__version-controller-revert { width: 20px; }
-							&.__version-controller-sync, &.__version-controller-commit { width: 28px; }
-						}
-					}
+                            &,
+                            &.__version-controller-save {
+                                width: 20px;
+                            }
+                            &.__version-controller-permissions {
+                                width: 32px;
+                            }
+                            &.__version-controller-undo,
+                            &.__version-controller-revert {
+                                width: 20px;
+                            }
+                            &.__version-controller-sync,
+                            &.__version-controller-commit {
+                                width: 28px;
+                            }
+                        }
+                    }
 
-					.version-controller-permissions {
-						width: 32px;
-						height: 20px;
-						fill: $dark-gray;
-					}
-				}
+                    .version-controller-permissions {
+                        width: 32px;
+                        height: 20px;
+                        fill: $dark-gray;
+                    }
+                }
 
-				.action-button-label {
-					display: block;
-					font-size: $icon-font-size;
-					font-family: $icon-font-family;
-					height: 1em;
-					margin-top: 5px;
-					margin-bottom: 0;
-				}
+                .action-button-label {
+                    display: block;
+                    font-size: $icon-font-size;
+                    font-family: $icon-font-family;
+                    height: 1em;
+                    margin-top: 5px;
+                    margin-bottom: 0;
+                }
 
-				.onboarding-overlay {
-					margin-top: -6px;
-					.permissions-overlay {
-						width: 237px;
+                .onboarding-overlay {
+                    margin-top: -6px;
+                    .permissions-overlay {
+                        width: 237px;
 
-						.permissions-overlay-header {
-							text-align: left;
-							color: $blue;
-							padding-bottom: 15px;
-							padding-top: 15px;
-							border-bottom: 1px solid $light-gray;
-							.permissions-overlay-header-title {
-								margin-left: 20px;
-							}
-						}
-						.permissions-overlay-content {
-							max-height: 290px;
-							overflow-y: auto;
-							padding-left: 10px;
-							padding-right: 10px;
-							.contributor {
-								&:last-child {
-									border-bottom: none;
-								}
-								border-bottom: 1px solid $tlv-light-gray;
-								.contributor-content {
-									padding-top: 12px;
-									padding-bottom: 10px;
-									margin-left: 10px;
-									display: flex;
-									.contributor-icon-circle {
-										&.selected {
-											border: 1px solid $blue;
-										}
+                        .permissions-overlay-header {
+                            text-align: left;
+                            color: $blue;
+                            padding-bottom: 15px;
+                            padding-top: 15px;
+                            border-bottom: 1px solid $light-gray;
+                            .permissions-overlay-header-title {
+                                margin-left: 20px;
+                            }
+                        }
+                        .permissions-overlay-content {
+                            max-height: 290px;
+                            overflow-y: auto;
+                            padding-left: 10px;
+                            padding-right: 10px;
+                            .contributor {
+                                &:last-child {
+                                    border-bottom: none;
+                                }
+                                border-bottom: 1px solid $tlv-light-gray;
+                                .contributor-content {
+                                    padding-top: 12px;
+                                    padding-bottom: 10px;
+                                    margin-left: 10px;
+                                    display: flex;
+                                    .contributor-icon-circle {
+                                        &.selected {
+                                            border: 1px solid $blue;
+                                        }
 
-										border-radius: 65px;
-										padding: 2px;
-										width: 32px;
-										height: 32px;
-										margin-top: 4px;
-										.contributer-icon {
-											width: 26px;
-											border-radius: 50px;
-											height: 26px;
-											margin-top: 0px;
-											.__user {
-												height: 18px;
-												width: 16px;
-												stroke: $blue;
-												fill: transparent;
-												margin-left: 5px;
-												margin-top: 3px;
-											}
-											&.selected {
-												border: 1px solid $blue;
-												background-color: $blue;
-												.__user {
-													stroke: $white;
-													margin-left: 4px;
-												}
-											}
-										}
-									}
+                                        border-radius: 65px;
+                                        padding: 2px;
+                                        width: 32px;
+                                        height: 32px;
+                                        margin-top: 4px;
+                                        .contributer-icon {
+                                            width: 26px;
+                                            border-radius: 50px;
+                                            height: 26px;
+                                            margin-top: 0px;
+                                            .__user {
+                                                height: 18px;
+                                                width: 16px;
+                                                stroke: $blue;
+                                                fill: transparent;
+                                                margin-left: 5px;
+                                                margin-top: 3px;
+                                            }
+                                            &.selected {
+                                                border: 1px solid $blue;
+                                                background-color: $blue;
+                                                .__user {
+                                                    stroke: $white;
+                                                    margin-left: 4px;
+                                                }
+                                            }
+                                        }
+                                    }
 
-									.contributer-info {
-										padding-left: 11px;
-										.contributer-name {
-											@extend .body-2-semibold;
-											text-transform: uppercase;
-											color: $dark-gray;
-										}
-										.contributer-role {
-											@extend .body-3;
-											color: $gray;
-											display: flex;
-											text-transform: lowercase;
-											p:first-letter {
-												text-transform: uppercase;
-											}
-											justify-content: space-between;
-										}
-									}
-								}
-							}
-						}
-						.permissions-overlay-footer {
-							.manage-permissions-btn {
-								@extend .body-2-semibold;
-								margin-top: 20px;
-								padding-top: 10px;
-								padding-bottom: 10px;
-								color: $blue;
-								text-align: center;
-								cursor: pointer;
-								background-color: $tlv-gray;
-							}
-						}
-
-					}
-				}
-			}
-		}
-		.vc-nav-item-close {
-			display: flex;
-			padding-left: 18px;
-			padding-top: 3px;
-			align-self: center;
-			@extend .body-1;
-			color: $gray;
-			cursor: pointer;
-			border-left: $gray thin solid;
-		}
-	}
+                                    .contributer-info {
+                                        padding-left: 11px;
+                                        .contributer-name {
+                                            @extend .body-2-semibold;
+                                            text-transform: uppercase;
+                                            color: $dark-gray;
+                                        }
+                                        .contributer-role {
+                                            @extend .body-3;
+                                            color: $gray;
+                                            display: flex;
+                                            text-transform: lowercase;
+                                            p:first-letter {
+                                                text-transform: uppercase;
+                                            }
+                                            justify-content: space-between;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        .permissions-overlay-footer {
+                            .manage-permissions-btn {
+                                @extend .body-2-semibold;
+                                margin-top: 20px;
+                                padding-top: 10px;
+                                padding-bottom: 10px;
+                                color: $blue;
+                                text-align: center;
+                                cursor: pointer;
+                                background-color: $tlv-gray;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .vc-nav-item-close {
+            display: flex;
+            padding-left: 18px;
+            padding-top: 3px;
+            align-self: center;
+            @extend .body-1;
+            color: $gray;
+            cursor: pointer;
+            border-left: $gray thin solid;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/components/_vnfBrowse.scss b/openecomp-ui/resources/scss/components/_vnfBrowse.scss
index 7e0085af8a..f47b736ce2 100644
--- a/openecomp-ui/resources/scss/components/_vnfBrowse.scss
+++ b/openecomp-ui/resources/scss/components/_vnfBrowse.scss
@@ -1,109 +1,107 @@
 $message-info-icon-size: 16px;
 
 .vnf-creation-page {
-	.list-editor-view-header {
-		border-bottom: none;
-	}
-	.vnfBrowse-list-item {
-		display: flex;
-		height: 36px;
-		@extend .body-1;
-		&.header {
-			@extend .body-1-semibold;
-			background-color: $tlv-light-gray;
-			color: $text-black;
-		}
-		&.selectedRow {
-			background-color: $blue;
-			color: $white;
-			.svg-icon-wrapper {
-				&.__positive {
-					fill: $white;
-					color: $white;
-				}
-			}
-		}
-		.svg-icon-wrapper {
-			&.__positive {
-				fill: $dark-gray;
-				color: $dark-gray;
-			}
-		}
-	}
+    .list-editor-view-header {
+        border-bottom: none;
+    }
+    .vnfBrowse-list-item {
+        display: flex;
+        height: 36px;
+        @extend .body-1;
+        &.header {
+            @extend .body-1-semibold;
+            background-color: $tlv-light-gray;
+            color: $text-black;
+        }
+        &.selectedRow {
+            background-color: $blue;
+            color: $white;
+            .svg-icon-wrapper {
+                &.__positive {
+                    fill: $white;
+                    color: $white;
+                }
+            }
+        }
+        .svg-icon-wrapper {
+            &.__positive {
+                fill: $dark-gray;
+                color: $dark-gray;
+            }
+        }
+    }
 
-  	.activity-action {
-		.svg-icon-wrapper {
-			float: left;
-		}
-  	}
+    .activity-action {
+        .svg-icon-wrapper {
+            float: left;
+        }
+    }
 
-	.message-further-info-icon {
-		background-color: $gray;
-	}
+    .message-further-info-icon {
+        background-color: $gray;
+    }
 
-	.table-cell {
-	border-right: 1px solid $light-gray;
-	border-bottom: 1px solid $light-gray;
-	&:last-child {
-  		border-right: none;
-	}
-	flex-basis: 22%;
-	display: flex;
-	padding: 0 20px;
-	justify-content: center;
-	flex-direction: column;
+    .table-cell {
+        border-right: 1px solid $light-gray;
+        border-bottom: 1px solid $light-gray;
+        &:last-child {
+            border-right: none;
+        }
+        flex-basis: 22%;
+        display: flex;
+        padding: 0 20px;
+        justify-content: center;
+        flex-direction: column;
 
-	&.vnftable-action {
-		flex-basis: 12%;
-		span {
-			margin: auto;
-		}
-	}
-}
-
-  .vnf-table-header {
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	.header-sort-arrow {
-	  width: 0;
-	  height: 0;
-	  border-left: 5px solid transparent;
-	  border-right: 5px solid transparent;
-	  margin-left: 9px;
-	  &.up {
-		border-bottom: 5px solid $black;
-	  }
-	  &.down {
-		border-top: 5px solid $black;
-	  }
+        &.vnftable-action {
+            flex-basis: 12%;
+            span {
+                margin: auto;
+            }
+        }
+    }
 
-	}
-  }
+    .vnf-table-header {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        .header-sort-arrow {
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            margin-left: 9px;
+            &.up {
+                border-bottom: 5px solid $black;
+            }
+            &.down {
+                border-top: 5px solid $black;
+            }
+        }
+    }
 
-  .vnf-table-cell {
-	display: flex;
-	justify-content: space-between;
-	span {
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-  } 
-  .vnftable-name {
-  	max-width: 22%;
-  }
+    .vnf-table-cell {
+        display: flex;
+        justify-content: space-between;
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .vnftable-name {
+        max-width: 22%;
+    }
 
-  .vnf-grid-section {
-  	margin: 20px 20px 20px 50px;
-  }
+    .vnf-grid-section {
+        margin: 20px 20px 20px 50px;
+    }
 
-  .vnf-modal {
-  	text-align: right;
-  	margin-top: 22px;
-  }
- 
-  .vnf-submit {
-  	margin-right: 15px;
-  }
+    .vnf-modal {
+        text-align: right;
+        margin-top: 22px;
+    }
 
-}
\ No newline at end of file
+    .vnf-submit {
+        margin-right: 15px;
+    }
+}
diff --git a/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss b/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
index 294fd817b9..5938dc2808 100644
--- a/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
+++ b/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
@@ -1,4 +1,4 @@
-.vsp-details-vendor-select {   
+.vsp-details-vendor-select {
     .validation-form-content {
         padding-top: 20px;
         .vendor-selector-modal-title {
@@ -9,5 +9,5 @@
             margin-top: 10px;
             margin-bottom: 20px;
         }
-    }        
-}
\ No newline at end of file
+    }
+}
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index 06ef4d21fd..736927fb51 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,37 +1,37 @@
-
-.entitlement-pools-list-editor {  
+.entitlement-pools-list-editor {
     .list-editor-item-view-field {
-
-      .entitlement-pools-count {
-        @extend .heading-1;
-      color: $purple;
+        .entitlement-pools-count {
+            @extend .heading-1;
+            color: $purple;
+        }
     }
-  }
 }
 
 .entitlement-pools-modal {
-  .entitlement-pools-form {
-    .threshold-section, .date-section {
-			display: flex;
-			justify-content: space-between;
-			.validation-input-wrapper {
-				flex: 0 0 46%;
-			}
-    }
-    .uuid-row-wrapper {
-      display: flex;
-      .separator{
-        margin-left: 30px;
-        margin-right: 30px;
-        height: 35px;
-        border: 1px solid $tlv-light-gray;
-      }
-      .uuid-container {
-        .uuid-value {
-          @extend .body-3;
-          user-select: text;
+    .entitlement-pools-form {
+        .threshold-section,
+        .date-section {
+            display: flex;
+            justify-content: space-between;
+            .validation-input-wrapper {
+                flex: 0 0 46%;
+            }
+        }
+        .uuid-row-wrapper {
+            display: flex;
+            margin-top: 20px;
+            .separator {
+                margin-left: 30px;
+                margin-right: 30px;
+                height: 35px;
+                border: 1px solid $tlv-light-gray;
+            }
+            .uuid-container {
+                .uuid-value {
+                    @extend .body-3;
+                    user-select: text;
+                }
+            }
         }
-      }
     }
-		}
 }
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index cf681b8758..375bb2c08e 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -1,41 +1,38 @@
 .feature-groups-list-editor {
-  .list-editor-view{
-    .list-editor-view-list {
-      .list-editor-item-view {
-        min-height: 110px;
-        height: 110px;
-      }
-      .list-editor-item-view-content {
-        .list-editor-item-view-field {
-          &.smaller-field {
-            flex: 0.35;
-          }
-          .feature-groups-count-field {
-            display: inline-block;
-            &:first-child {
-              margin-right: 95px;
+    .list-editor-view {
+        .list-editor-view-list {
+            .list-editor-item-view {
+                min-height: 110px;
+                height: 110px;
+            }
+            .list-editor-item-view-content {
+                .list-editor-item-view-field {
+                    &.smaller-field {
+                        flex: 0.35;
+                    }
+                    .feature-groups-count-field {
+                        display: inline-block;
+                        &:first-child {
+                            margin-right: 95px;
+                        }
+                    }
+                    .feature-groups-count-ep {
+                        @extend .heading-1;
+                        color: $light-blue;
+                    }
+                    .feature-groups-mrn-ep {
+                        @extend .body-1;
+                        color: $light-blue;
+                    }
+                    .feature-groups-count-lk {
+                        @extend .heading-1;
+                        color: $light-green;
+                    }
+                    .title-no-wrap {
+                        white-space: nowrap;
+                    }
+                }
             }
-          }
-          .feature-groups-count-ep {
-            @extend .heading-1;
-            color: $light-blue;
-          }
-          .feature-groups-mrn-ep {
-            @extend .body-1;
-            color: $light-blue;
-          }
-          .feature-groups-count-lk {
-            @extend .heading-1;
-            color: $light-green;
-          }
-          .title-no-wrap {
-            white-space: nowrap;
-          }
         }
-      }
     }
-  }
 }
-
-
-
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
index 579e9bab2b..acde2edcb8 100644
--- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -1,26 +1,24 @@
-
 .license-agreement-list-editor {
-
-  .list-editor-view-list {
-    .list-editor-item-view-field {
-      .list-editor-item-view-field-tight {
-        vertical-align: top;
-        display: inline-block;
-        &:first-child {
-          @include ellipsis;
-          margin-right: 95px;
-          width: 20%;
-          overflow-wrap: break-word;
+    .list-editor-view-list {
+        .list-editor-item-view-field {
+            .list-editor-item-view-field-tight {
+                vertical-align: top;
+                display: inline-block;
+                &:first-child {
+                    @include ellipsis;
+                    margin-right: 95px;
+                    width: 20%;
+                    overflow-wrap: break-word;
+                }
+            }
+            .feature-groups-count,
+            .type {
+                color: $light-green;
+            }
+            .feature-groups-count {
+                @extend .heading-1;
+                padding-top: 2px;
+            }
         }
-      }
-      .feature-groups-count, .type {
-        color: $light-green;
-      }
-      .feature-groups-count {
-        @extend .heading-1;
-        padding-top: 2px;
-      }
-
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index b7681fef9d..d873c3998c 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -1,31 +1,32 @@
 .license-key-groups-list-editor {
-  .list-editor-view-list {
-    .list-editor-item-view-field {
-
-      .operational-scope, .type {
-        color: $orange;
-      }
-      .operational-scope {
-        @include ellipsis;
-      }
+    .list-editor-view-list {
+        .list-editor-item-view-field {
+            .operational-scope,
+            .type {
+                color: $orange;
+            }
+            .operational-scope {
+                @include ellipsis;
+            }
+        }
     }
-  }
 }
 
 .license-keygroup-editor {
-  .uuid-row-wrapper {
-    display: flex;
-    .separator{
-      margin-left: 30px;
-      margin-right: 30px;
-      height: 35px;
-      border: 1px solid $tlv-light-gray;
-    }
-    .uuid-container {
-      .uuid-value {
-        @extend .body-3;
-        user-select: text;
-      }
+    .uuid-row-wrapper {
+        display: flex;
+        margin-top: 20px;
+        .separator {
+            margin-left: 30px;
+            margin-right: 30px;
+            height: 35px;
+            border: 1px solid $tlv-light-gray;
+        }
+        .uuid-container {
+            .uuid-value {
+                @extend .body-3;
+                user-select: text;
+            }
+        }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index e93ea989fd..da43e3e3cf 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -1,55 +1,42 @@
 .license-model-modal {
-  .modal-body {
-    padding: 0;
-  }
-	.modal-header {
-		border-bottom: none;
-		padding-bottom: 30px;
-	}
-	.sdc-tabs-list {
-		padding-left: 50px;
-		border-bottom: 1px solid $tlv-light-gray;
-		display: flex;
-		align-items: baseline;
-	}
-	.sdc-tab-content {
-		margin-top: 0;
-	}
-	.add-limit-button {
-		margin-left: auto;
-		margin-right: 50px;
-		padding-right: 0;
-		text-align: end;
-	}
-	.license-model-form {
-		.validation-form-content, .validation-buttons {
-      padding: 20px 50px;
+    .sdc-tabs {
+        margin-top: 20px;
     }
-		&.license-agreement-form, &.feature-group-form {
-			.validation-form-content {
-				padding: 0;
-			}
-			.sdc-tab-content {
-				padding: 20px 50px;
-			}
-		}
-	}
-	.license-model-modal-buttons {
-		padding: 21px 50px;
-    display: flex;
-    justify-content: flex-end;
-		background-color: $tlv-gray;
-		margin-top: 2px;
-    .sdc-button {
-      margin-left: 20px;
+    .sdc-tabs-list {
+        padding-left: 40px;
+        border-bottom: 1px solid $tlv-light-gray;
+        display: flex;
+        align-items: baseline;
+    }
+    .sdc-tab-content {
+        margin-top: 0;
+    }
+    .add-limit-button {
+        margin-left: auto;
+        margin-right: 50px;
+        padding-right: 0;
+        text-align: end;
+    }
+    .license-model-form {
+        &.license-agreement-form,
+        &.feature-group-form {
+            .validation-form-content {
+                padding: 0;
+            }
+            .sdc-tab-content {
+                padding: 20px 40px;
+                .dual-list-box {
+                    margin: 0;
+                }
+            }
+        }
     }
-	}
 }
 .license-model-list-editor {
-	.list-editor-view-list {
-		.list-editor-item-view {
-			min-height: 110px;
-			height: 110px;
-		}
-	}
+    .list-editor-view-list {
+        .list-editor-item-view {
+            min-height: 110px;
+            height: 110px;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
index 16b6af7cf9..794ed388e4 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
@@ -1,133 +1,132 @@
 .license-model-limits-view {
-	max-height: 490px;
-	overflow: auto;
-
-	.limit-editor-title {
-		padding: 10px 50px;
-		background-color: $blue;
-		color: $white;
-
-	}
-	.list-editor-view-add-title {
-		margin-right: 20px;
-	}
-
-	.no-limits-text {
-		padding-left: 50px;
-	}
-
-	.list-editor-view {
-		.list-editor-view-header {
-			border-bottom: none;
-			padding-top: 30px;
-			padding-bottom: 0;
-		}
-
-		.list-editor-view-list-scroller {
-			margin-top: 0;
-			margin-bottom: 30px;
-		}
-		.list-editor-view-list {
-			width: 100%;
-			.list-editor-item-view {
-				min-height: 50px;
-				height: 50px;
-				background-color: $tlv-light-gray;
-				border-color: transparent;
-				margin: 1px 0;
-				.list-editor-item-view-content {
-					padding-left: 0;
-				}
-
-				.svg-icon {
-					margin-top: 10px;
-					margin-right: 50px;
-					fill: $gray;
-					&:hover {
-							fill: $dark-gray;
-						}
-				}
-
-				&.selectable {
-					&:hover {
-						.list-editor-item-view-field {
-							.text.description, .text-name {
-								&:after {
-									background-color: darken($tlv-light-gray, 4%);
-								}
-							}
-
-						}
-						background-color: darken($tlv-light-gray, 4%);
-						cursor: pointer;
-					}
-
-				}
-				&:hover {
-					border-color: transparent;
-					cursor: default;
-				}
-				.list-editor-item-view-content {
-					.list-editor-item-view-field {
-						display: flex;
-    				align-items: center;
-						white-space: nowrap;
-
-						&.limit-name {
-							.text.name {
-								@extend .body-1-semibold;
-								color: $blue;
-								text-transform: uppercase;
-								margin-left : 45px;
-							}
-							
-							border-right: 1px solid $light-gray;
-							margin-right: 22px;
-							flex: 0.4;
-							display: flex;
-							justify-content: left;
-						}
-
-						&.limit-description {
-							max-width: 300px;
-							margin-right: 22px;
-						}
-
-						&.limit-metric-details {
-							max-width: 300px;
-						}
-
-
-						.text.description, .text.name {
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-							&:after {
-								background: $tlv-light-gray;
-							}
-
-						}
-					}
-
-				}			
-			}
-		}
-	}
-	.limit-editor{
-		.limit-editor-form {
-			.limit-editor-form-grid-section {
-				padding-bottom: 0;
-			}
-			.validation-form-content {
-				padding: 21px 45px;
-			}
-			.limit-editor-buttons {			
-				display: flex;
-				justify-content: flex-end;
-				.sdc-button {
-				margin-left: 20px;
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
+    max-height: 490px;
+    overflow: auto;
+
+    .limit-editor-title {
+        padding: 10px 50px;
+        background-color: $blue;
+        color: $white;
+    }
+    .list-editor-view-add-title {
+        margin-right: 20px;
+    }
+
+    .no-limits-text {
+        padding-left: 50px;
+    }
+
+    .list-editor-view {
+        .list-editor-view-header {
+            border-bottom: none;
+            padding-top: 30px;
+            padding-bottom: 0;
+        }
+
+        .list-editor-view-list-scroller {
+            margin-top: 0;
+            margin-bottom: 30px;
+        }
+        .list-editor-view-list {
+            width: 100%;
+            .list-editor-item-view {
+                min-height: 50px;
+                height: 50px;
+                background-color: $tlv-light-gray;
+                border-color: transparent;
+                margin: 1px 0;
+                .list-editor-item-view-content {
+                    padding-left: 0;
+                }
+
+                .svg-icon {
+                    margin-top: 10px;
+                    margin-right: 50px;
+                    fill: $gray;
+                    &:hover {
+                        fill: $dark-gray;
+                    }
+                }
+
+                &.selectable {
+                    &:hover {
+                        .list-editor-item-view-field {
+                            .text.description,
+                            .text-name {
+                                &:after {
+                                    background-color: darken(
+                                        $tlv-light-gray,
+                                        4%
+                                    );
+                                }
+                            }
+                        }
+                        background-color: darken($tlv-light-gray, 4%);
+                        cursor: pointer;
+                    }
+                }
+                &:hover {
+                    border-color: transparent;
+                    cursor: default;
+                }
+                .list-editor-item-view-content {
+                    .list-editor-item-view-field {
+                        display: flex;
+                        align-items: center;
+                        white-space: nowrap;
+
+                        &.limit-name {
+                            .text.name {
+                                @extend .body-1-semibold;
+                                color: $blue;
+                                text-transform: uppercase;
+                                margin-left: 45px;
+                            }
+
+                            border-right: 1px solid $light-gray;
+                            margin-right: 22px;
+                            flex: 0.4;
+                            display: flex;
+                            justify-content: left;
+                        }
+
+                        &.limit-description {
+                            max-width: 300px;
+                            margin-right: 22px;
+                        }
+
+                        &.limit-metric-details {
+                            max-width: 300px;
+                        }
+
+                        .text.description,
+                        .text.name {
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            &:after {
+                                background: $tlv-light-gray;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .limit-editor {
+        .limit-editor-form {
+            .limit-editor-form-grid-section {
+                padding-bottom: 0;
+            }
+            .validation-form-content {
+                padding: 21px 45px;
+            }
+            .limit-editor-buttons {
+                display: flex;
+                justify-content: flex-end;
+                .sdc-button {
+                    margin-left: 20px;
+                }
+            }
+        }
+    }
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 21c5bd8007..eca87b6962 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -4,236 +4,233 @@ $icon-margin: 30px;
 $arrow-element-width: 30px;
 $list-item-padding: 15px;
 
-
-
 $la-color: $dark-blue;
 $fg-color: $blue;
 $lkg-ep-color: $light-blue;
 @mixin overview-tile-shadow() {
-  @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+    @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
 }
 
 .license-model-overview {
-  .overview-top-section {
-    .overview-title{
-      @extend .heading-1;
-      @extend .text-uppercase !optional;
-      margin-bottom: 20px;
-      color: $blue;
-    }
-    .license-model-overview-top {
-      display: flex;
-      justify-content: flex-start;
-      flex-direction: row;
-      padding-bottom: 10px;
-      min-height: 155px;
-      .separator {
-        width: 1px;
-        border-right: 1px solid $tlv-light-gray;
-        margin-left: 20px;
-      }
-      .vendor-data-view {
-        @extend .flex-column;
-        background-color: $tlv-gray;
-        padding: 13px 30px;
-        border: 1px solid $tlv-light-gray;
-        @include overview-tile-shadow();
-        .vendor-title {
-          margin-top:5px;
+    .overview-top-section {
+        .overview-title {
+            @extend .heading-1;
+            @extend .text-uppercase !optional;
+            margin-bottom: 20px;
+            color: $blue;
         }
-        .vendor-name {
-          @extend .heading-4-semibold;
-          text-transform: none;
-          padding-bottom: 10px;
-          border-bottom: 1px solid $tlv-light-gray;
-        }
-        .vendor-description, .vendor-description-readonly {
-          @extend .flex;
-          @extend .body-1;
-          justify-content: space-between;
-          overflow: hidden;
-					position: relative;
-					flex: initial;
-        }
-
-        &:not(.read-only) .vendor-description {
-          border: 1px solid transparent;
-          width: 100%;
-          padding: 2px 0 2px 6px;
-          margin-top: 10px;
-          position: relative;
-          .svg-icon-wrapper {
-            position: absolute;;
-            right:0;
-            top:0;
-            opacity: 0;
-          }
-          $hover-padding-right: 16px;
-          @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
-          &:hover {
-            padding-right: $hover-padding-right;
-            border: 1px solid $light-gray;
-            cursor: pointer;
-
-            background-color: $white;
-            .svg-icon-wrapper {
-              opacity: 1;
-              z-index: 10;
-            }
-            .description-data:after {
-              background: white;
-            }
-            .description-data {
-              width: 100%;
+        .license-model-overview-top {
+            display: flex;
+            justify-content: flex-start;
+            flex-direction: row;
+            padding-bottom: 10px;
+            min-height: 155px;
+            .separator {
+                width: 1px;
+                border-right: 1px solid $tlv-light-gray;
+                margin-left: 20px;
             }
-          }
-        }
+            .vendor-data-view {
+                @extend .flex-column;
+                background-color: $tlv-gray;
+                padding: 13px 30px;
+                border: 1px solid $tlv-light-gray;
+                @include overview-tile-shadow();
+                .vendor-title {
+                    margin-top: 5px;
+                }
+                .vendor-name {
+                    @extend .heading-4-semibold;
+                    text-transform: none;
+                    padding-bottom: 10px;
+                    border-bottom: 1px solid $tlv-light-gray;
+                }
+                .vendor-description,
+                .vendor-description-readonly {
+                    @extend .flex;
+                    @extend .body-1;
+                    justify-content: space-between;
+                    overflow: hidden;
+                    position: relative;
+                    flex: initial;
+                }
 
-        .vendor-description-readonly {
-          margin-top: 16px;
-        }
+                &:not(.read-only) .vendor-description {
+                    border: 1px solid transparent;
+                    width: 100%;
+                    padding: 2px 0 2px 6px;
+                    margin-top: 10px;
+                    position: relative;
+                    .svg-icon-wrapper {
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                        opacity: 0;
+                    }
+                    $hover-padding-right: 16px;
+                    @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
+                    &:hover {
+                        padding-right: $hover-padding-right;
+                        border: 1px solid $light-gray;
+                        cursor: pointer;
 
-				.description-data {
-					@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
-					flex: initial;
-				}
+                        background-color: $white;
+                        .svg-icon-wrapper {
+                            opacity: 1;
+                            z-index: 10;
+                        }
+                        .description-data:after {
+                            background: white;
+                        }
+                        .description-data {
+                            width: 100%;
+                        }
+                    }
+                }
 
-        .vendor-description-edit {
-          @extend .flex;
-          flex-direction: column;
-          border: none;
-          margin-top: 10px;
-          position: relative;
-          left: -6px;
-          width: 101%;
-          textarea {
-            padding-left: 6px;
-            resize: vertical;
-          }
-          .buttons-row {
-            @extend .flex;
-            justify-content: flex-end;
-            flex-direction: row;
-            margin-top: -25px;
-            .buttons-wrapper {
-              @extend .flex;
-              @extend .body-3;
-              border: 1px solid $light-gray;
-              width: 95px;
-              height: 19px;
-              background-color: $tlv-light-gray;
-              border-radius: 2px;
-              position: relative;
-              flex: 0 1 auto;
-              text-align: center;
-              .description-button {
-                cursor: pointer;
-                flex: 1;
-                &:hover {
-                  background-color: $white;
+                .vendor-description-readonly {
+                    margin-top: 16px;
                 }
-              }
-              .description-save {
-                cursor: pointer;
-                flex: 1;
-                color:$blue;
-                &:hover {
-                  background-color: $white;
+
+                .description-data {
+                    @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+                    flex: initial;
                 }
-              }
-            }
-          }
-          .description-edit-textarea {
-            height:67px;
-            border: 1px solid $tlv-light-gray;
-            resize: none;
-            position: relative;
-            left: -12px;
-          }
-          .validation-error-message.tooltip {
-            z-index: 1000;
-            .tooltip-inner {
-              background-color: $red;
-            }
-          }
-        }
-      }
-      .summary-count-list {
-        @extend .flex-column;
-        flex: 0.6;
-        margin-left: 20px;
-        justify-content: space-between;
-        border: 1px solid $tlv-light-gray;
-        @include overview-tile-shadow();
-        background-color: $tlv-gray;
-        .summary-count-item {
-          @extend .flex;
-					@extend .heading-5-semibold;
-					align-items: center;
-          padding-left: 45px;
-          padding-right: 45px;
-          border-bottom: 1px solid $tlv-light-gray;
-          &:last-child { border-bottom: none; }
-          .item-count {
-            flex-grow: 2;
-            margin-left: 5px;
-          }
-          .summary-name-and-count {
-            width: 100%;
-          }
-          .svg-icon-wrapper {
-            .svg-icon {
-              &.__plusCircle {
-                margin-top: 3px;
-                margin-left: auto;
-                fill: $dark-gray;
-                &:hover {
-                  fill: $blue;
+
+                .vendor-description-edit {
+                    @extend .flex;
+                    flex-direction: column;
+                    border: none;
+                    margin-top: 10px;
+                    position: relative;
+                    left: -6px;
+                    width: 101%;
+                    textarea {
+                        padding-left: 6px;
+                        resize: vertical;
+                    }
+                    .buttons-row {
+                        @extend .flex;
+                        justify-content: flex-end;
+                        flex-direction: row;
+                        margin-top: -25px;
+                        .buttons-wrapper {
+                            @extend .flex;
+                            @extend .body-3;
+                            border: 1px solid $light-gray;
+                            width: 95px;
+                            height: 19px;
+                            background-color: $tlv-light-gray;
+                            border-radius: 2px;
+                            position: relative;
+                            flex: 0 1 auto;
+                            text-align: center;
+                            .description-button {
+                                cursor: pointer;
+                                flex: 1;
+                                &:hover {
+                                    background-color: $white;
+                                }
+                            }
+                            .description-save {
+                                cursor: pointer;
+                                flex: 1;
+                                color: $blue;
+                                &:hover {
+                                    background-color: $white;
+                                }
+                            }
+                        }
+                    }
+                    .description-edit-textarea {
+                        height: 67px;
+                        border: 1px solid $tlv-light-gray;
+                        resize: none;
+                        position: relative;
+                        left: -12px;
+                    }
+                    .validation-error-message.tooltip {
+                        z-index: 1000;
+                        .tooltip-inner {
+                            background-color: $red;
+                        }
+                    }
                 }
-              }
             }
+            .summary-count-list {
+                @extend .flex-column;
+                flex: 0.6;
+                margin-left: 20px;
+                justify-content: space-between;
+                border: 1px solid $tlv-light-gray;
+                @include overview-tile-shadow();
+                background-color: $tlv-gray;
+                .summary-count-item {
+                    @extend .flex;
+                    @extend .heading-5-semibold;
+                    align-items: center;
+                    padding-left: 45px;
+                    padding-right: 45px;
+                    border-bottom: 1px solid $tlv-light-gray;
+                    &:last-child {
+                        border-bottom: none;
+                    }
+                    .item-count {
+                        flex-grow: 2;
+                        margin-left: 5px;
+                    }
+                    .summary-name-and-count {
+                        width: 100%;
+                    }
+                    .svg-icon-wrapper {
+                        .svg-icon {
+                            &.__plusCircle {
+                                margin-top: 3px;
+                                margin-left: auto;
+                                fill: $dark-gray;
+                                &:hover {
+                                    fill: $blue;
+                                }
+                            }
+                        }
+                    }
 
-          }
-
-          .summary-name-and-count {
-            &:hover {
-              cursor: pointer;
-              color: $blue;
+                    .summary-name-and-count {
+                        &:hover {
+                            cursor: pointer;
+                            color: $blue;
+                        }
+                    }
+                }
+            }
+            .plus-icon {
+                font-size: $icon-font-size;
+                border-radius: 50%;
+                border: 1px solid $black;
+                color: $black;
+                height: 16px;
+                width: 16px;
+                padding: 2px 2px 2px 3px;
             }
-          }
-
-
         }
-      }
-      .plus-icon {
-        font-size: $icon-font-size;
-        border-radius: 50%;
-        border: 1px solid $black;
-        color: $black;
-        height: 16px;
-        width: 16px;
-        padding: 2px 2px 2px 3px;
-      }
-    }
-  }
-  .vlm-list-tab-panel {
-
-		@extend .flex;
-		margin-bottom: 7px;
-    .section-title {
-      flex: 1;
     }
-    .overview-buttons-section {
-      margin-top: 20px;
-      display: flex;
-      justify-content: flex-start;
-      .button-vlm-list-view {
-        height: 32px;
-        width: 34px;
-        margin-left:10px;
-        cursor: pointer;
-      }
-      /**
+    .vlm-list-tab-panel {
+        @extend .flex;
+        margin-bottom: 7px;
+        .section-title {
+            flex: 1;
+        }
+        .overview-buttons-section {
+            margin-top: 20px;
+            display: flex;
+            justify-content: flex-start;
+            .button-vlm-list-view {
+                height: 32px;
+                width: 34px;
+                margin-left: 10px;
+                cursor: pointer;
+            }
+            /**
       .vlm-list-icon {
         background-size: 32px;
         background-repeat: no-repeat;
@@ -251,262 +248,253 @@ $lkg-ep-color: $light-blue;
         }
       }
       **/
-    }
-  }
-
-  .overview-list-section {
-    @extend .flex-column;
-    margin-top: 35px;
-    .section-title {
-      @extend .heading-2;
-      padding-top: 20px;
-      margin-bottom: 15px;
-      padding-bottom: 0px;
-    }
-    &.overview-list-orphans {
-      .chevron::before
-      {
-        display: none;
-      }
-      .vlm-list-view {
-        .vlm-list {
-          .vlm-list-item.orphan-list-item {
-						@include overview-tile-shadow();
-						margin-left: 0;
-
-						.vlm-list-item-title {
-
-							.item-name {
-								color: $dark-gray;
-							}
-						}
-						.list-item-icon-col {
-							.overview-list-icon {
-								background-color: $gray;
-								border-color: $gray;
-							}
-						}
-						.list-item-section {
-							&:first-child {
-								display: flex;
-								color: $white;
-								min-width: $arrow-element-width;
-							}
-							&.list-item-icon-col {
-								margin-left: 65px;
-								margin-right: 65px - $list-item-padding;
-							}
-						}
-          }
         }
-      }
     }
-    .vlm-list-view {
-      flex: 1;
-      .vlm-list {
-        @extend .flex;
-        flex-direction: column;
-        .vlm-list-item {
-          @include border-shadow();
-          min-height: 90px;
-          height: 90px;
-          background-color: $tlv-gray;
-          @extend .flex;
-          border: 1px solid $tlv-light-gray;
-          margin-bottom: 0px;
-          .clickable {
-						cursor: pointer;
-					}
 
-          .list-item-section {
-						.count-value {
-							@extend .body-3;
-						}
-						&.list-item-icon-col {
-							display: flex;
-							flex-direction: column;
-							justify-content: center;
-							align-items: center;
-							padding: 0;
-							margin-right: 40px - $list-item-padding;
-							margin-left: $icon-margin;
-							.overview-list-icon {
-								@extend .body-2;
-							}
-						}
-						padding: 15px;
-						&.list-item-arrow-col {
-							padding: 0;
-						}
-            .children-count {
-              @extend .body-1;
-              color: $gray;
-              padding-left: 5px;
-              .count-value {
-                padding: 0 5px;
-              }
-            }
-            .additional-data {
-							padding-left: 60px;
-							display: flex;
-							flex-direction: column;
-							justify-content: space-between;
-							*:last-child {
-								margin-top: 20px;
-							}
-							*:only-child {
-								margin-top: 0;
-							}
-              .additional-data-name {
-                @extend .body-2-semibold;
-              }
-            }
-            .additional-data-col-border {
-              border-left: 1px solid $tlv-light-gray;
-              min-height: 100%;
-              height: 100%;
-            }
-          }
-          .list-item-additional-data-col {
-            @extend .body-2;
-            @extend .flex;
-            align-items: stretch;
-						flex: 0.8;
-						margin-left: 30px;
-						padding-top: 17px;
-						padding-bottom: 11px;
-          }
-          .arrow-icon {
-						align-self: center;
-
-          }
-          .vlm-item-info {
-            flex: 1;
-          }
-          .vlm-list-item-title {
-						@extend .flex;
-						align-items: baseline;
-            .item-name {
-              @extend .heading-5-semibold;
-              flex: 0 1 auto;
-							margin-bottom: 4px;
-							text-transform: uppercase;
-            }
-          }
-          .vlm-list-item-description {
-            @extend .body-1;
-						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
-            max-height: 38px;
-          }
-          &.vlm-list-item-la {
-            margin-top: 10px;
-            .la-icon {
-              @include create-circle($circle-icon-size, $la-color);
-              color: $white;
-						}
-						.vlm-list-item-title {
-							.item-name {
-								color: $la-color;
-							}
-						}
-            .list-item-section {
-
-              &:first-child {
-                display: flex;
-                color: $la-color;
-                min-width: $arrow-element-width;
-              }
-            }
-            .list-item-arrow-col {
-              flex: 0.01;
-							margin-left: $arrow-margin;
-							justify-content: center;
+    .overview-list-section {
+        @extend .flex-column;
+        margin-top: 35px;
+        .section-title {
+            @extend .heading-2;
+            padding-top: 20px;
+            margin-bottom: 15px;
+            padding-bottom: 0px;
+        }
+        &.overview-list-orphans {
+            .chevron::before {
+                display: none;
             }
-          }
-          &.vlm-list-item-fg {
-            margin-left: $list-indentation;
-						margin-top: 10px;
-						.fg-pipeline-separator {
-							color: $dark-gray;
-							padding: 0 5px;
-						}
-						.list-item-icon-col {
-							margin-left: 29px;
-						}
-            .fg-icon {
-              @include create-circle($circle-icon-size, $fg-color);
-              color: $white;
-						}
-
-						.vlm-list-item-title {
-							.item-name {
-								color: $fg-color;
-							}
-						}
-            .list-item-section {
-              &:first-child {
-                display: flex;
-                color: $fg-color;
-                min-width: $arrow-element-width;
+            .vlm-list-view {
+                .vlm-list {
+                    .vlm-list-item.orphan-list-item {
+                        @include overview-tile-shadow();
+                        margin-left: 0;
 
-              }
-            }
-            .list-item-arrow-col {
-              flex: 0.01;
-							margin-left: $arrow-margin - $list-indentation;
-							padding-left: $list-indentation;
-            }
-          }
-          &.vlm-list-item-ep {
-            margin-left: $list-indentation * 2;
-            margin-top: 10px;
-            cursor: default;
-            .ep-icon {
-              @include create-circle($circle-icon-size, $lkg-ep-color);
-              color: $white;
-						}
-						.vlm-list-item-title {
-							.item-name {
-								color: $lkg-ep-color;
-							}
-						}
-            .list-item-section {
-              &:first-child {
-                display: none;
-							}
-							&.list-item-icon-col {
-								margin-left: 52px;
-							}
+                        .vlm-list-item-title {
+                            .item-name {
+                                color: $dark-gray;
+                            }
+                        }
+                        .list-item-icon-col {
+                            .overview-list-icon {
+                                background-color: $gray;
+                                border-color: $gray;
+                            }
+                        }
+                        .list-item-section {
+                            &:first-child {
+                                display: flex;
+                                color: $white;
+                                min-width: $arrow-element-width;
+                            }
+                            &.list-item-icon-col {
+                                margin-left: 65px;
+                                margin-right: 65px - $list-item-padding;
+                            }
+                        }
+                    }
+                }
             }
+        }
+        .vlm-list-view {
+            flex: 1;
+            .vlm-list {
+                @extend .flex;
+                flex-direction: column;
+                .vlm-list-item {
+                    @include border-shadow();
+                    min-height: 90px;
+                    height: 90px;
+                    background-color: $tlv-gray;
+                    @extend .flex;
+                    border: 1px solid $tlv-light-gray;
+                    margin-bottom: 0px;
+                    .clickable {
+                        cursor: pointer;
+                    }
 
-          }
-          &.vlm-list-item-lkg {
-            margin-top: 10px;
-            margin-left: $list-indentation * 2;
-            cursor: default;
-            .lkg-icon {
-              @include create-circle($circle-icon-size, $lkg-ep-color);
-              color: $white;
-						}
-						.vlm-list-item-title {
-							.item-name {
-								color: $lkg-ep-color;
-							}
-						}
-            .list-item-section {
-              &:first-child {
-                display: none;
-							}
-							&.list-item-icon-col {
-								margin-left: 52px;
-							}
+                    .list-item-section {
+                        .count-value {
+                            @extend .body-3;
+                        }
+                        &.list-item-icon-col {
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+                            padding: 0;
+                            margin-right: 40px - $list-item-padding;
+                            margin-left: $icon-margin;
+                            .overview-list-icon {
+                                @extend .body-2;
+                            }
+                        }
+                        padding: 15px;
+                        &.list-item-arrow-col {
+                            padding: 0;
+                        }
+                        .children-count {
+                            @extend .body-1;
+                            color: $gray;
+                            padding-left: 5px;
+                            .count-value {
+                                padding: 0 5px;
+                            }
+                        }
+                        .additional-data {
+                            padding-left: 60px;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-between;
+                            *:last-child {
+                                margin-top: 20px;
+                            }
+                            *:only-child {
+                                margin-top: 0;
+                            }
+                            .additional-data-name {
+                                @extend .body-2-semibold;
+                            }
+                        }
+                        .additional-data-col-border {
+                            border-left: 1px solid $tlv-light-gray;
+                            min-height: 100%;
+                            height: 100%;
+                        }
+                    }
+                    .list-item-additional-data-col {
+                        @extend .body-2;
+                        @extend .flex;
+                        align-items: stretch;
+                        flex: 0.8;
+                        margin-left: 30px;
+                        padding-top: 17px;
+                        padding-bottom: 11px;
+                    }
+                    .arrow-icon {
+                        align-self: center;
+                    }
+                    .vlm-item-info {
+                        flex: 1;
+                    }
+                    .vlm-list-item-title {
+                        @extend .flex;
+                        align-items: baseline;
+                        .item-name {
+                            @extend .heading-5-semibold;
+                            flex: 0 1 auto;
+                            margin-bottom: 4px;
+                            text-transform: uppercase;
+                        }
+                    }
+                    .vlm-list-item-description {
+                        @extend .body-1;
+                        @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+                        max-height: 38px;
+                    }
+                    &.vlm-list-item-la {
+                        margin-top: 10px;
+                        .la-icon {
+                            @include create-circle($circle-icon-size, $la-color);
+                            color: $white;
+                        }
+                        .vlm-list-item-title {
+                            .item-name {
+                                color: $la-color;
+                            }
+                        }
+                        .list-item-section {
+                            &:first-child {
+                                display: flex;
+                                color: $la-color;
+                                min-width: $arrow-element-width;
+                            }
+                        }
+                        .list-item-arrow-col {
+                            flex: 0.01;
+                            margin-left: $arrow-margin;
+                            justify-content: center;
+                        }
+                    }
+                    &.vlm-list-item-fg {
+                        margin-left: $list-indentation;
+                        margin-top: 10px;
+                        .fg-pipeline-separator {
+                            color: $dark-gray;
+                            padding: 0 5px;
+                        }
+                        .list-item-icon-col {
+                            margin-left: 29px;
+                        }
+                        .fg-icon {
+                            @include create-circle($circle-icon-size, $fg-color);
+                            color: $white;
+                        }
 
+                        .vlm-list-item-title {
+                            .item-name {
+                                color: $fg-color;
+                            }
+                        }
+                        .list-item-section {
+                            &:first-child {
+                                display: flex;
+                                color: $fg-color;
+                                min-width: $arrow-element-width;
+                            }
+                        }
+                        .list-item-arrow-col {
+                            flex: 0.01;
+                            margin-left: $arrow-margin - $list-indentation;
+                            padding-left: $list-indentation;
+                        }
+                    }
+                    &.vlm-list-item-ep {
+                        margin-left: $list-indentation * 2;
+                        margin-top: 10px;
+                        cursor: default;
+                        .ep-icon {
+                            @include create-circle($circle-icon-size, $lkg-ep-color);
+                            color: $white;
+                        }
+                        .vlm-list-item-title {
+                            .item-name {
+                                color: $lkg-ep-color;
+                            }
+                        }
+                        .list-item-section {
+                            &:first-child {
+                                display: none;
+                            }
+                            &.list-item-icon-col {
+                                margin-left: 52px;
+                            }
+                        }
+                    }
+                    &.vlm-list-item-lkg {
+                        margin-top: 10px;
+                        margin-left: $list-indentation * 2;
+                        cursor: default;
+                        .lkg-icon {
+                            @include create-circle($circle-icon-size, $lkg-ep-color);
+                            color: $white;
+                        }
+                        .vlm-list-item-title {
+                            .item-name {
+                                color: $lkg-ep-color;
+                            }
+                        }
+                        .list-item-section {
+                            &:first-child {
+                                display: none;
+                            }
+                            &.list-item-icon-col {
+                                margin-left: 52px;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-
-      }
     }
-  }
-
 }
diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
index 96648dd20f..000e42d5b4 100644
--- a/openecomp-ui/resources/scss/modules/_mergeEditor.scss
+++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
@@ -5,203 +5,201 @@ $selected-width: 1px;
 $selected-color: $blue;
 
 @mixin levels {
-	@for $i from 1 to 6 {
-		.level-#{$i} {
-			padding-left: 18px + 10 * $i;
-		}
-	}
+    @for $i from 1 to 6 {
+        .level-#{$i} {
+            padding-left: 18px + 10 * $i;
+        }
+    }
 }
 
 .merge-editor-modal {
-	.modal-lg {
-		width: 1300px;
-	}
+    .modal-lg {
+        width: 1300px;
+    }
 }
 
 .merge-editor {
-	margin: 30px 40px;
-	max-height: 600px;
-	border: 1px solid $light-gray;
-	.grid-section {
-		&.conflict-titles-section {
-			@extend .body-1;
-			background-color: $blue;
-			height: 33px;
-			padding-top: 6px;
-			padding-bottom: 3px;
-			color: $white;
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			border-bottom: 1px solid $tlv-light-gray;
-			.grid-item {
-				padding-left: 10px;
-			}
-			.form-group {
-				margin-bottom: 0;
-				.checkbox {
-					label {
-						margin-right: 0;
-					}
-
-					text-align: right;
-
-					input[type="checkbox"] {
-						cursor: pointer;
-						margin-top: 1px;
-					}
-				}
-			}
-		}
-	}
-	.merge-editor-body {
-		max-height: 500px;
-		overflow-y: scroll;
-		padding: 10px;
-		.conflict-section {
-			margin-bottom: 0;
-			border-left: 0;
-			border-right: 0;
-			padding: 5px 0;
-
-			.conflict-resolve-btn {
-				align-self: flex-end;
-			}
-
-			.grid-items {
-				align-items: center;
-
-				input[type="radio"]:not(:checked) {
-					cursor: pointer;
-				}
-			}
-		}
-
-		.collapsible-section {
-			display: flex;
-			cursor: pointer;
-
-			.conflict-title {
-				@extend .heading-5-semibold;
-				text-transform: uppercase;
-			}
-		}
-
-		.merge-chevron {
-			margin-right: 7px;
-			&.right {
-				transform: rotate(90deg);
-			}
-		}
-
-		.grid-section .grid-items .field-col:not(.grid-col-title) {
-			&.grid-col-yours {
-				border-top: $selected-width solid $yours-bg-color;
-				border-bottom: $selected-width solid $yours-bg-color;
-			}
-
-			&.theirs-color {
-				border-top: $selected-width solid $theirs-bg-color;
-				border-bottom: $selected-width solid $theirs-bg-color;
-			}
-		}
-
-		.merge-editor-text-field {
-			display: flex;
-			justify-content: space-between;
-			// margin: 0 0 10px 0;
-			margin: 0;
-
-			.field {
-				color: $text-black;
-
-				&.field-name:not(.field-object-name) {
-					color: $gray;
-				}
-			}
-
-			&.diff {
-				.field {
-					color: $red;
-				}
-			}
-
-			&.grid-section {
-				padding-bottom: 0;
-
-				.grid-items {
-					flex: 1;
-
-
-					.field-col {
-						padding: 7px 0;
-						height: 100%;
-
-						&:not(:first-child) {
-							padding-left: 8px;
-						}
-
-						&.grid-col-yours {
-							background-color: $yours-bg-color;
-						}
-
-						&.grid-col-theirs {
-							background-color: $theirs-bg-color;
-						}
-
-						@include levels;
-
-
-						.field {
-							@extend .body-1;
-							flex: 2;
-							min-width: 0;
-
-							&.field-name {
-								@include multiline-ellipsis($bgColor: white);
-								&.diff {
-									color: $red;
-								}
-								text-transform: uppercase;
-								&.field-object-name {
-									@extend .body-1-semibold;
-									margin-bottom: 5px;
-									margin-top: 10px;
-
-								}
-							}
-
-							&.field-yours {
-								@include multiline-ellipsis($bgColor: $yours-bg-color);
-							}
-
-							&.field-theirs {
-								@include multiline-ellipsis($bgColor: $theirs-bg-color);
-							}
-							&.field-name, &.field.field-yours, &.field.field-theirs {
-								word-break: break-word;
-								text-align: initial;
-							}
-							&.empty-field {
-								padding-top: 2px;
-							}
-						}
-
-						*::after {
-							bottom: 0;
-						}
-					}
-				}
-			}
-
-			&.field-error {
-				@extend .body-1;
-				color: $error-text-color;
-				min-width: 0;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-	}
+    margin: 30px 40px;
+    max-height: 600px;
+    border: 1px solid $light-gray;
+    .grid-section {
+        &.conflict-titles-section {
+            @extend .body-1;
+            background-color: $blue;
+            height: 33px;
+            padding-top: 6px;
+            padding-bottom: 3px;
+            color: $white;
+            position: sticky;
+            top: 0;
+            z-index: 2;
+            border-bottom: 1px solid $tlv-light-gray;
+            .grid-item {
+                padding-left: 10px;
+            }
+            .form-group {
+                margin-bottom: 0;
+                .checkbox {
+                    label {
+                        margin-right: 0;
+                    }
+
+                    text-align: right;
+
+                    input[type='checkbox'] {
+                        cursor: pointer;
+                        margin-top: 1px;
+                    }
+                }
+            }
+        }
+    }
+    .merge-editor-body {
+        max-height: 500px;
+        overflow-y: scroll;
+        padding: 10px;
+        .conflict-section {
+            margin-bottom: 0;
+            border-left: 0;
+            border-right: 0;
+            padding: 5px 0;
+
+            .conflict-resolve-btn {
+                align-self: flex-end;
+            }
+
+            .grid-items {
+                align-items: center;
+
+                input[type='radio']:not(:checked) {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .collapsible-section {
+            display: flex;
+            cursor: pointer;
+
+            .conflict-title {
+                @extend .heading-5-semibold;
+                text-transform: uppercase;
+            }
+        }
+
+        .merge-chevron {
+            margin-right: 7px;
+            &.right {
+                transform: rotate(90deg);
+            }
+        }
+
+        .grid-section .grid-items .field-col:not(.grid-col-title) {
+            &.grid-col-yours {
+                border-top: $selected-width solid $yours-bg-color;
+                border-bottom: $selected-width solid $yours-bg-color;
+            }
+
+            &.theirs-color {
+                border-top: $selected-width solid $theirs-bg-color;
+                border-bottom: $selected-width solid $theirs-bg-color;
+            }
+        }
+
+        .merge-editor-text-field {
+            display: flex;
+            justify-content: space-between;
+            margin: 0;
+
+            .field {
+                color: $text-black;
+
+                &.field-name:not(.field-object-name) {
+                    color: $gray;
+                }
+            }
+
+            &.diff {
+                .field {
+                    color: $red;
+                }
+            }
+
+            &.grid-section {
+                padding-bottom: 0;
+
+                .grid-items {
+                    flex: 1;
+
+                    .field-col {
+                        padding: 7px 0;
+                        height: 100%;
+
+                        &:not(:first-child) {
+                            padding-left: 8px;
+                        }
+
+                        &.grid-col-yours {
+                            background-color: $yours-bg-color;
+                        }
+
+                        &.grid-col-theirs {
+                            background-color: $theirs-bg-color;
+                        }
+
+                        @include levels;
+
+                        .field {
+                            @extend .body-1;
+                            flex: 2;
+                            min-width: 0;
+
+                            &.field-name {
+                                @include multiline-ellipsis($bgColor: white);
+                                &.diff {
+                                    color: $red;
+                                }
+                                text-transform: uppercase;
+                                &.field-object-name {
+                                    @extend .body-1-semibold;
+                                    margin-bottom: 5px;
+                                    margin-top: 10px;
+                                }
+                            }
+
+                            &.field-yours {
+                                @include multiline-ellipsis($bgColor: $yours-bg-color);
+                            }
+
+                            &.field-theirs {
+                                @include multiline-ellipsis($bgColor: $theirs-bg-color);
+                            }
+                            &.field-name,
+                            &.field.field-yours,
+                            &.field.field-theirs {
+                                word-break: break-word;
+                                text-align: initial;
+                            }
+                            &.empty-field {
+                                padding-top: 2px;
+                            }
+                        }
+
+                        *::after {
+                            bottom: 0;
+                        }
+                    }
+                }
+            }
+
+            &.field-error {
+                @extend .body-1;
+                color: $error-text-color;
+                min-width: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 39f7636e79..bf0c14649e 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -1,63 +1,63 @@
 $transitionLength: 0.6s;
 
 .catalog-view {
-	background-color: $background-gray;
-	overflow: hidden;
-	height: 100%;
-	display: flex;
-	@import "onboardingCatalog/catalogFilter.scss";
-	.catalog-parts {
-		width: 100%;
-		@import "onboardingCatalog/onboardHeader";
-		@import "onboardingCatalog/catalogHeader";
-	}	
-	@import "onboardingCatalog/vendorPageHeader";
-	@import "onboardingCatalog/catalogList";
-	@import "onboardingCatalog/vspOverlay";
-	.catalog-wrapper {
-		height: 100%;
-		overflow: auto;
-		.tab-separator {
-		  content: '';
-		  height: 25px;
-		  border-right: 1px solid $dark-gray;
-		}
-		.catalog-list {
-			overflow: hidden;
-			height: auto;
-			.sdc-tile {
-				margin: 9px;
-				.sdc-tile-header {
-					position: initial;
-					display: block;
-					flex-shrink: initial;
-					align-items: initial;
-					flex-direction: initial;
-				}
-				.sdc-tile-content {
-					position: initial;
-					flex: initial;
-					display: flex;
-					align-items: initial;
-					flex-direction: column;
-					justify-content: space-between;
-					overflow: initial;
-					.sdc-tile-info-line {
-						.with-overlay {
-							line-height: 1.2em;
-							@include ellipsis($width: initial, $max-width: 100%);
-						}
-					}
-				}
-				.sdc-tile-footer {
-					position: initial;
-					flex-shrink: initial;
-					display: flex;
-					align-items: center;
-					flex-direction: row;
-					text-transform: none;
-				}
-			}
-		}
-	}
+    background-color: $background-gray;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    @import 'onboardingCatalog/catalogFilter.scss';
+    .catalog-parts {
+        width: 100%;
+        @import 'onboardingCatalog/onboardHeader';
+        @import 'onboardingCatalog/catalogHeader';
+    }
+    @import 'onboardingCatalog/vendorPageHeader';
+    @import 'onboardingCatalog/catalogList';
+    @import 'onboardingCatalog/vspOverlay';
+    .catalog-wrapper {
+        height: 100%;
+        overflow: auto;
+        .tab-separator {
+            content: '';
+            height: 25px;
+            border-right: 1px solid $dark-gray;
+        }
+        .catalog-list {
+            overflow: hidden;
+            height: auto;
+            .sdc-tile {
+                margin: 9px;
+                .sdc-tile-header {
+                    position: initial;
+                    display: block;
+                    flex-shrink: initial;
+                    align-items: initial;
+                    flex-direction: initial;
+                }
+                .sdc-tile-content {
+                    position: initial;
+                    flex: initial;
+                    display: flex;
+                    align-items: initial;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    overflow: initial;
+                    .sdc-tile-info-line {
+                        .with-overlay {
+                            line-height: 1.2em;
+                            @include ellipsis($width: initial, $max-width: 100%);
+                        }
+                    }
+                }
+                .sdc-tile-footer {
+                    position: initial;
+                    flex-shrink: initial;
+                    display: flex;
+                    align-items: center;
+                    flex-direction: row;
+                    text-transform: none;
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss
index e652d9d82f..5f83dc2fe9 100644
--- a/openecomp-ui/resources/scss/modules/_permissions.scss
+++ b/openecomp-ui/resources/scss/modules/_permissions.scss
@@ -1,55 +1,50 @@
-.modal-content {
-	.modal-body {
-		.manage-permissions-page {
-			.validation-form-content {
-				overflow-y: visible;
-			}
+.manage-permissions-page {
+    .validation-form-content {
+        overflow-y: visible;
+    }
 
-			.manage-permissions-title {
-				@extend .body-1-semibold;
-				margin-bottom: 10px;
-			}
-			.owner-details {
-				@extend .body-2;
-				display: flex;
-				margin-bottom: 30px;
-				.change-owner {
-					margin-left: auto;
-					color: $blue;
-					cursor: pointer;
-					&:hover {
-						color: $dark-blue;
-					}
-				}
-			}
-			.change-owner-wrapper {
-				.form-group {
-					margin-bottom: 30px;
-				}
-
-			}
-			.change-owner-title {
-				display: flex;
-				align-items: center;
-				margin-bottom: 10px;
-				.manage-permissions-title {
-					margin-bottom: 0;
-				}
-				.svg-icon-wrapper {
-					margin-left: 5px;
-					.svg-icon {
-						width: 13px;
-						height: 13px;
-						fill: $dark-gray;
-					}
-				}
-			}
-			.contributors-select {
-				.Select-menu {
-					max-height: 150px;
-					overflow-y: auto
-				}
-			}
-		}
-	}
+    .manage-permissions-title {
+        @extend .body-1-semibold;
+        margin-bottom: 10px;
+    }
+    .owner-details {
+        @extend .body-2;
+        display: flex;
+        margin-bottom: 30px;
+        .change-owner {
+            margin-left: auto;
+            color: $blue;
+            cursor: pointer;
+            &:hover {
+                color: $dark-blue;
+            }
+        }
+    }
+    .change-owner-wrapper {
+        .form-group {
+            margin-bottom: 30px;
+        }
+    }
+    .change-owner-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        .manage-permissions-title {
+            margin-bottom: 0;
+        }
+        .svg-icon-wrapper {
+            margin-left: 5px;
+            .svg-icon {
+                width: 13px;
+                height: 13px;
+                fill: $dark-gray;
+            }
+        }
+    }
+    .contributors-select {
+        .Select-menu {
+            max-height: 150px;
+            overflow-y: auto;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_revisions.scss b/openecomp-ui/resources/scss/modules/_revisions.scss
index 2b196c132c..619fe7e53e 100644
--- a/openecomp-ui/resources/scss/modules/_revisions.scss
+++ b/openecomp-ui/resources/scss/modules/_revisions.scss
@@ -1,86 +1,68 @@
 .manage-revisions-modal {
-  .modal-dialog {
-    width: 700px;
-  }
-  .modal-content {
-    .modal-body {
-      .validation-form-content {
-        padding-top: 30px;
-      }
-      //.selected {
-      //  .selectable {
-      //    border-color: $light-blue;
-      //  }
-      //  .selectable:hover{
-      //    border-color: hotpink;
-      //  }
-      //}
-
-      .revision-list-item {
+    .revision-list-item {
         &.selected {
-          .selectable, .selectable:hover {
-            border-width: 2px;
-            border-color: $light-blue;
-          }
+            .selectable,
+            .selectable:hover {
+                border-width: 2px;
+                border-color: $light-blue;
+            }
         }
-        .selectable:hover{
-          border-color: $gray;
+        .selectable:hover {
+            border-color: $gray;
         }
         .selectable:active {
-          border-color: $light-blue;
+            border-color: $light-blue;
         }
-      }
+    }
 
-      .list-editor-view-list-scroller {
-        margin-top : 0px;
-      }
+    .list-editor-view-list-scroller {
+        margin-top: 0px;
+    }
 
-      .list-editor-view-header {
+    .list-editor-view-header {
         border-bottom: none;
         .list-editor-view-title {
-          @extend .heading-5;
-          text-transform: none;
-          color: $blue;
+            @extend .heading-5;
+            text-transform: none;
+            color: $blue;
         }
-      }
+    }
 
-      .list-editor-item-view-content {
+    .list-editor-item-view-content {
         background-color: $background-gray;
-      }
-      .revision-list-item-fields {
+    }
+    .revision-list-item-fields {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         .revision-user {
-          flex-basis: 50%;
-          fill: transparent;
-          stroke: $blue;
-          .svg-icon-label {
-            margin-left: 13px;
-          }
+            flex-basis: 50%;
+            fill: transparent;
+            stroke: $blue;
+            .svg-icon-label {
+                margin-left: 13px;
+            }
         }
 
         .revision-date {
-          flex-basis: 50%;
-          text-align: right;
-          @extend .body-3;
-          color: $gray;
-          .revision-time {
-            margin-left: 5px;
-          }
+            flex-basis: 50%;
+            text-align: right;
+            @extend .body-3;
+            color: $gray;
+            .revision-time {
+                margin-left: 5px;
+            }
         }
 
         .revision-message {
-          flex-basis: 100%;
-          margin-top: 5px;
-          @extend .body-2;
-          .more-less {
-            @extend .body-3;
-            color: $blue;
-            margin-left: 5px;
-          }
+            flex-basis: 100%;
+            margin-top: 5px;
+            @extend .body-2;
+            .more-less {
+                @extend .body-3;
+                color: $blue;
+                margin-left: 5px;
+            }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 81a109c97f..f24198cf59 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,267 +1,262 @@
-
 .vsp-attachments-view {
-  position: relative;
-  .attachments-tabs {
-    .sdc-tabs-list {
-      padding-left: 28px;
-      background-color: $tlv-gray;
-      box-shadow: none;
-      border-bottom: 1px solid $light-gray;
-      .sdc-tab {
-          @extend .heading-2;
-        padding-top: 10px;
-        margin-top: 0;
-        &.sdc-tab-active {
-          color: $blue;
-          font-weight: bold;
+    position: relative;
+    .attachments-tabs {
+        .sdc-tabs-list {
+            padding-left: 28px;
+            background-color: $tlv-gray;
+            box-shadow: none;
+            border-bottom: 1px solid $light-gray;
+            .sdc-tab {
+                @extend .heading-2;
+                padding-top: 10px;
+                margin-top: 0;
+                &.sdc-tab-active {
+                    color: $blue;
+                    font-weight: bold;
+                }
+            }
+        }
+        .sdc-tab-content {
+            margin-top: 0;
         }
-      }
-    }
-    .sdc-tab-content {
-      margin-top: 0;
     }
-  }
-  .attachments-view-controllers {
-    position: absolute;
-    right: 40px;
-    top: 10px;
-    display: flex;
+    .attachments-view-controllers {
+        position: absolute;
+        right: 40px;
+        top: 10px;
+        display: flex;
 
-    
-    .icon-component {
-      margin-right: 30px;      
-    }
+        .icon-component {
+            margin-right: 30px;
+        }
 
-    input[type="file"] {
-      visibility: hidden;
-      width: 1px;
-      padding: 0;
-      margin-left: -1px;
-    }
+        input[type='file'] {
+            visibility: hidden;
+            width: 1px;
+            padding: 0;
+            margin-left: -1px;
+        }
 
-    .proceed-to-validation-btn {
-      margin-right: 30px;
-    }
-    .go-to-overview-btn {
-      width: 191px;
-      margin-right: 36px;
-      height: 36px;
-    }
-    .separator {
-      height: 27px;
-      border: 1px solid $light-gray;
-      margin-right: 31px;
-      margin-left: 0px; 
-      margin-top: 3px;
+        .proceed-to-validation-btn {
+            margin-right: 30px;
+        }
+        .go-to-overview-btn {
+            width: 191px;
+            margin-right: 36px;
+            height: 36px;
+        }
+        .separator {
+            height: 27px;
+            border: 1px solid $light-gray;
+            margin-right: 31px;
+            margin-left: 0px;
+            margin-top: 3px;
+        }
+        .abort-btn {
+            fill: $blue;
+            color: $blue;
+            &:hover {
+                color: $light-blue;
+                fill: $light-blue;
+            }
+        }
     }
-    .abort-btn {      
-      fill: $blue;
-      color: $blue;
-      &:hover {
-        color: $light-blue;
-        fill: $light-blue;
-      }
-    }      
-  }
 }
 
 .vsp-attachments-heat-validation {
-  @extend .body-1;
-  display: flex;
-  .svg-icon.exclamationTriangleFull {
-    fill: $orange;
-    width: 15px;
-    height: 15px;
-    &.large {
-      width: 20px;
-      height: 20px;
-    }
-  }
-  .validation-tree-section {
+    @extend .body-1;
     display: flex;
-    width: 400px;
-    justify-content: space-between;
-  }
-  .vsp-attachments-heat-validation-tree {
-    @extend .flex-column;
-    margin: 0;
-    overflow: auto;
-    height: 100%;
-    .attachments-tree-header {
-      display: flex;
-      justify-content: space-between;
-      height: 55px;
-      align-items: center;
-      &.header-selected {
-        background: $tlv-gray;
-      }
-      .header-icon {
-        top: -3px;
-        position: relative;
-        margin-left: 20px;
-      }
-      .tree-header-title-text {
-        @extend .heading-4-semibold;
-        padding-left: 32px;
-        cursor: pointer;
-        &.tree-header-title-selected{
-          color: $blue;
+    .svg-icon.exclamationTriangleFull {
+        fill: $orange;
+        width: 15px;
+        height: 15px;
+        &.large {
+            width: 20px;
+            height: 20px;
         }
-      }
-      .tree-header-title {
-        display: flex;
-      }
     }
-    .counters {
-      display: flex;
-      justify-content: space-between;
-      z-index: 1;
-      padding-right: 20px;
-      .counter {
-        .svg-icon {
-          &.__exclamationTriangleLine {
-            fill: $orange;
-          }
-        }
+    .validation-tree-section {
         display: flex;
-        &:first-child {
-          margin-right: 20px;
-        }
-        &:only-child {
-          margin-right: 0;
-        }
-        .svg-icon-wrapper {
-          margin-right: 5px;
-        }
-        .counter-icon {
-          margin-right: 5px;
-        }
-        .error-text, .warning-text {
-          @extend .body-3;
-          &.large {
-            @extend .heading-4-semibold;
-          }
-        }
-      }
+        width: 400px;
+        justify-content: space-between;
     }
-    .tree-wrapper {
-      flex: 1 1;
-      position: relative;
-      padding-bottom: 10px;
-
-      @-moz-document url-prefix() {
-        .tree-block-inside {
-          top: 0;
-          position: relative;
+    .vsp-attachments-heat-validation-tree {
+        @extend .flex-column;
+        margin: 0;
+        overflow: auto;
+        height: 100%;
+        .attachments-tree-header {
+            display: flex;
+            justify-content: space-between;
+            height: 55px;
+            align-items: center;
+            &.header-selected {
+                background: $tlv-gray;
+            }
+            .header-icon {
+                top: -3px;
+                position: relative;
+                margin-left: 20px;
+            }
+            .tree-header-title-text {
+                @extend .heading-4-semibold;
+                padding-left: 32px;
+                cursor: pointer;
+                &.tree-header-title-selected {
+                    color: $blue;
+                }
+            }
+            .tree-header-title {
+                display: flex;
+            }
         }
-      }
-      .tree-block-inside {
-        padding-left: 20px;
-        .tree-node-row {
-          cursor: default;
-          white-space: nowrap;
-          display: flex;
-          justify-content: space-between;
-          height: 40px;
-          align-items: center;
-          .svg-icon {
-            &.__chevronUp, &.__chevronDown {
-              height: 10px;
-              width: 10px;
+        .counters {
+            display: flex;
+            justify-content: space-between;
+            z-index: 1;
+            padding-right: 20px;
+            .counter {
+                .svg-icon {
+                    &.__exclamationTriangleLine {
+                        fill: $orange;
+                    }
+                }
+                display: flex;
+                &:first-child {
+                    margin-right: 20px;
+                }
+                &:only-child {
+                    margin-right: 0;
+                }
+                .svg-icon-wrapper {
+                    margin-right: 5px;
+                }
+                .counter-icon {
+                    margin-right: 5px;
+                }
+                .error-text,
+                .warning-text {
+                    @extend .body-3;
+                    &.large {
+                        @extend .heading-4-semibold;
+                    }
+                }
             }
-          }
+        }
+        .tree-wrapper {
+            flex: 1 1;
+            position: relative;
+            padding-bottom: 10px;
 
-          &:after {
-            border-top: 1px solid $tlv-gray;
-            height: 40px;
-            position: absolute;
-            left: 0;
-            right: 0;
-            content: ' ';
-          }
-          @-moz-document url-prefix() {
-            &:after {
-              top: 0;
+            @-moz-document url-prefix() {
+                .tree-block-inside {
+                    top: 0;
+                    position: relative;
+                }
             }
-          }
-          &.tree-node-selected::before {
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 20px;
-            display: inline-block;
-            content: ' ';
-            background-color: $tlv-gray;
-            color: $blue;
-          }
+            .tree-block-inside {
+                padding-left: 20px;
+                .tree-node-row {
+                    cursor: default;
+                    white-space: nowrap;
+                    display: flex;
+                    justify-content: space-between;
+                    height: 40px;
+                    align-items: center;
+                    .svg-icon {
+                        &.__chevronUp,
+                        &.__chevronDown {
+                            height: 10px;
+                            width: 10px;
+                        }
+                    }
 
-          &.tree-node-clicked {
-            color: $blue;
-            &:after {
-              background: $tlv-gray;
-              height: 40px;
-              position: absolute;
-              left: 0;
-              right: 0;
-              content: ' ';
+                    &:after {
+                        border-top: 1px solid $tlv-gray;
+                        height: 40px;
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        content: ' ';
+                    }
+                    @-moz-document url-prefix() {
+                        &:after {
+                            top: 0;
+                        }
+                    }
+                    &.tree-node-selected::before {
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        height: 20px;
+                        display: inline-block;
+                        content: ' ';
+                        background-color: $tlv-gray;
+                        color: $blue;
+                    }
+
+                    &.tree-node-clicked {
+                        color: $blue;
+                        &:after {
+                            background: $tlv-gray;
+                            height: 40px;
+                            position: absolute;
+                            left: 0;
+                            right: 0;
+                            content: ' ';
+                        }
+                    }
+                    .tree-node-name {
+                        cursor: pointer;
+                    }
+                    .name-section {
+                        z-index: 1;
+                        flex: 1;
+                        @include ellipsis(auto);
+                    }
+                    .tree-node-expander {
+                        position: relative;
+                        display: inline-block;
+                        cursor: pointer;
+                    }
+                    .tree-node-icon {
+                        margin: 0 7px;
+                    }
+                }
             }
-          }
-          .tree-node-name {
-            cursor: pointer;
-          }
-          .name-section {
-            z-index: 1;
-            flex: 1;
-            @include ellipsis(auto);
-          }
-          .tree-node-expander {
-            position: relative;
-            display: inline-block;
-            cursor: pointer;
-          }
-          .tree-node-icon {
-            margin: 0 7px;
-          }
         }
-      }
     }
-  }
-  .vsp-attachments-heat-validation-separator {
-    border-left: 1px solid $tlv-light-gray;
-    height: 100%;
-    width: 5px;
-    cursor: e-resize;
-  }
+    .vsp-attachments-heat-validation-separator {
+        border-left: 1px solid $tlv-light-gray;
+        height: 100%;
+        width: 5px;
+        cursor: e-resize;
+    }
 
-  .message-board-section {
-    @extend .flex-column;
-    padding-left: 25px;
-    padding-top: 10px;
-    padding-right: 60px;
-    overflow: auto;
-    margin-bottom: 70px;
-    .error-item {
-      display: flex;
-      margin: 10px 0;
-      .large {
-        .svg-icon {
-          width: 20px;
-          height: 20px;
-          fill: $orange;
+    .message-board-section {
+        @extend .flex-column;
+        padding-left: 25px;
+        padding-top: 10px;
+        padding-right: 60px;
+        overflow: auto;
+        margin-bottom: 70px;
+        .error-item {
+            display: flex;
+            margin: 10px 0;
+            .large {
+                .svg-icon {
+                    width: 20px;
+                    height: 20px;
+                    fill: $orange;
+                }
+            }
+            .error-item-file-type {
+                margin-left: 15px;
+            }
+            .error-file-name {
+                @extend .body-1-semibold;
+                margin-right: 5px;
+            }
         }
-      }
-      .error-item-file-type {
-        margin-left: 15px;
-      }
-      .error-file-name {
-        @extend .body-1-semibold;
-        margin-right: 5px;
-      }
-
-
-
     }
-
-  }
-
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
index 164e3bc261..83941c002a 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
@@ -1,3 +1,3 @@
-.section-title.software-product-compute-number-of-vms{
-  text-transform: initial;
-}
\ No newline at end of file
+.section-title.software-product-compute-number-of-vms {
+    text-transform: initial;
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index d31c7f0b92..f50e342304 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -1,13 +1,13 @@
 .vsp-components-general {
-  .general-data {
-    .one-line-textarea {
-      height: 30px;
+    .general-data {
+        .one-line-textarea {
+            height: 30px;
+        }
+        .multi-line-textarea {
+            height: calc(100% - 25px);
+            textarea {
+                height: inherit;
+            }
+        }
     }
-    .multi-line-textarea {
-      height: calc(100% - 25px);
-      textarea {
-        height: inherit;
-      }
-    }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index b67c448b54..409b686814 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -1,67 +1,51 @@
-.image-modal-new {
-  .modal-dialog {
-    width: 600px;
-  }
-  .image-filename {
-    width: 480px;
-  }
-}
-
-.image-modal-edit {
-  .modal-dialog {
-    width: 910px;
-  }
-  .image-filename {
-    width: 550px;
-  }
-}
-
 .vsp-components-image-editor {
-  .note-text {
-    color: $red;
-  }
+    .note-text {
+        color: $red;
+    }
 }
 
-.image-modal-edit, .image-modal-new {
-  .vsp-components-image-editor {
-
-    .image-format, .image-md5, .image-version {
-      width: 200px;
-    }
-    .image-version {
-      padding-left: 30px;
-    }
-    .section-title {
-      text-transform: uppercase;
-      font-size: 18px;
+.image-modal-edit,
+.image-modal-new {
+    .vsp-components-image-editor {
+        .image-format,
+        .image-md5,
+        .image-version {
+            width: 200px;
+        }
+        .image-version {
+            padding-left: 30px;
+        }
+        .section-title {
+            text-transform: uppercase;
+            font-size: 18px;
+        }
     }
-  }
 }
 
 .vsp-components-image {
-  .list-editor-view {
-    margin-top: 50px;
-    .manual-title {
-      @extend .body-1-semibold;
+    .list-editor-view {
+        margin-top: 50px;
+        .manual-title {
+            @extend .body-1-semibold;
+        }
+    }
+    .list-editor-item-view-content {
+        flex: 1;
+        min-width: 0;
+    }
+    .list-editor-item-view-controller {
+        padding-top: 5px;
     }
-  }
-  .list-editor-item-view-content {
-    flex:1;
-    min-width: 0;
-  }
-  .list-editor-item-view-controller {
-    padding-top: 5px;
-  }
-  .image-filename-cell {
-    display: flex;
-    .image-filename {
-      white-space: nowrap;
-      overflow: hidden;
-      display: inline-block;
-      text-overflow: ellipsis;
-       span {
-        @include ellipsis(100%);
-      }
+    .image-filename-cell {
+        display: flex;
+        .image-filename {
+            white-space: nowrap;
+            overflow: hidden;
+            display: inline-block;
+            text-overflow: ellipsis;
+             span {
+                @include ellipsis(100%);
+            }
+        }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index eaba47acb4..464ef98d11 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -1,87 +1,85 @@
 .vsp-components-network {
-  .network-data {
-    .single-col {
-      .validation-input-wrapper {
-        label {
-          max-width: 230px;
+    .network-data {
+        .single-col {
+            .validation-input-wrapper {
+                label {
+                    max-width: 230px;
+                }
+            }
         }
-      }
     }
-  }
-  .list-editor-view {
-    margin-top: 50px;
-    .manual-title {
-      @extend .body-1-semibold;
+    .list-editor-view {
+        margin-top: 50px;
+        .manual-title {
+            @extend .body-1-semibold;
+        }
     }
-  }
 }
 .network-nic-modal-create {
-	.network-type-radio {
-		display: flex;
-	}
+    .network-type-radio {
+        display: flex;
+        .validation-radio-wrapper:first-child {
+            padding-right: 20px;
+        }
+    }
 }
 
-.network-nic-modal-edit {
-    .modal-dialog {
-		width: 900px;
-    }
-  .vsp-components-network-editor {
+.vsp-components-network-editor {
     .editor-data {
-      height: 500px;
-      .grid-section {
-        padding-bottom: 15px;
-        .section-title {
-          @extend .heading-5;
-          padding-bottom: 10px;
-          padding-left: 0;
+        height: 500px;
+        .grid-section {
+            padding-bottom: 15px;
+            .section-title {
+                @extend .heading-5;
+                padding-bottom: 10px;
+                padding-left: 0;
+            }
         }
-      }
-      .part-title {
-        @extend .heading-5;
-        padding-bottom: 10px;
-        padding-left: 14px;
-      }
-      .part-title-small {
-        @extend .heading-3;
-        padding-bottom: 10px;
-        padding-left: 0;
-      }
-      .network-radio label {
-        font-size: 15px;
-      }
-
-      .packets-bytes-gen {
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        .top-row {
-          display: flex;
-          .part-title-small {
+        .part-title {
+            @extend .heading-5;
+            padding-bottom: 10px;
+            padding-left: 14px;
+        }
+        .part-title-small {
+            @extend .heading-3;
+            padding-bottom: 10px;
             padding-left: 0;
-            &.packets {
-              flex: 0 0 52%;
-            }
-            &.bytes {
-              flex: 0 0 48%;
-            }
-          }
         }
-        .bottom-row {
-          display: flex;
-          justify-content: space-between;
-          flex-direction: row;
-          flex: 1;
-          .inputs-wrapper {
+        .network-radio label {
+            font-size: 15px;
+        }
+
+        .packets-bytes-gen {
             display: flex;
-            flex-direction: row;
             justify-content: space-between;
-            flex: 1;
-            .validation-input-wrapper {
-              flex: 0 0 22%;
+            flex-direction: column;
+            .top-row {
+                display: flex;
+                .part-title-small {
+                    padding-left: 0;
+                    &.packets {
+                        flex: 0 0 52%;
+                    }
+                    &.bytes {
+                        flex: 0 0 48%;
+                    }
+                }
+            }
+            .bottom-row {
+                display: flex;
+                justify-content: space-between;
+                flex-direction: row;
+                flex: 1;
+                .inputs-wrapper {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    flex: 1;
+                    .validation-input-wrapper {
+                        flex: 0 0 22%;
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
index 9476d7043d..b3c4800492 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -1,9 +1,9 @@
 .edit-process-modal {
-  .component-process-description > textarea {
-    height: 113px;
-  }
+    .component-process-description > textarea {
+        height: 113px;
+    }
 }
 
 .software-product-landing-view-right-side.vsp-components-processes-page {
-	overflow-y: initial;
-}
\ No newline at end of file
+    overflow-y: initial;
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
index b788a86e44..8b13789179 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
@@ -1,39 +1 @@
-.software-product-type-modal {
-  .modal-dialog {
-    @extend .modal-lg !optional;
-    .modal-body {
-      padding: 0;
-    }
-    .validation-form-content {
-      padding: 50px;
-      .software-product-form-row {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 20px;
-        .software-product-inline-section {
-          padding: 0 20px;
-          flex: 45%;
-          .validation-input-wrapper {
-            .field-section {
-              @extend .body-2-semibold;
-              margin-bottom: 23px;
-              color: $black;
-            }
-            textarea {
-              height: 191px;
-            }
-            select optgroup[label] {
-              color: $dark-blue;
-            }
-            option {
-              color: black;
-            }
-          }
-        }
-      }
-    }
-    .validation-buttons {
-      padding: 20px 50px;
-    }
-  }
-}
+
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
index 65c558fa0e..5358e7c51b 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -2,22 +2,22 @@
     .software-product-dependencies-title {
         @extend .heading-1;
         @extend .text-uppercase !optional;
-			position: sticky;
-			top: -30px;
-			z-index: 1;
-			background: $white;
+        position: sticky;
+        top: -30px;
+        z-index: 1;
+        background: $white;
         margin-bottom: 20px;
         color: $blue;
     }
     .select-action-table-controllers {
-			position: sticky;
-			top: 4px;
-			z-index: 1;
-			background: $white;
+        position: sticky;
+        top: 4px;
+        z-index: 1;
+        background: $white;
         justify-content: flex-end;
         cursor: pointer;
         color: $blue;
-			padding-right: 27px;
+        padding-right: 27px;
         margin-bottom: 3px;
         &:hover {
             color: $dark-blue;
@@ -26,23 +26,24 @@
     .select-action-table-view {
         min-width: 770px;
     }
-	.select-action-table-headers {
-		position: sticky;
-		top: 27px;
-		z-index: 1;
-    .select-action-table-header {
-        @extend .body-1-semibold;
-        color: $text-black;
-		}
-	}
-	.select-action-table-row-wrapper {
-		.svg-icon {
-			&.__trashO, &.__plusCircle {
-				fill: $dark-gray;
-				&:hover {
-					fill: $black;
+    .select-action-table-headers {
+        position: sticky;
+        top: 27px;
+        z-index: 1;
+        .select-action-table-header {
+            @extend .body-1-semibold;
+            color: $text-black;
+        }
+    }
+    .select-action-table-row-wrapper {
+        .svg-icon {
+            &.__trashO,
+            &.__plusCircle {
+                fill: $dark-gray;
+                &:hover {
+                    fill: $black;
+                }
+            }
+        }
     }
-			}
-		}
-	}
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
index b5f9a546d9..85eea9c742 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
@@ -1,46 +1,38 @@
 .deployment-flavor-editor {
-	.modal-dialog {
-		width: 780px;
-	}
-	.deployment-feature-groups-section.no-feature-groups {
-		padding-bottom: 0;
-		.form-group {
-			margin-bottom: 5px;
-		}
-	}
-	.deployment-feature-group-warning-section {
-			padding-bottom: 30px;
-			span {
-				@extend .body-2;
-				color: $red;
-			}
-	}
-	.grid-section.vfc-table {
-		.section-title {
-			padding-bottom: 10px;
-		}
-	}
-	.modal-content {
-		.modal-body {
-			.validation-form-content {
-				overflow-y: visible;
-				.grid-col-1 {
-					flex-basis: 30%;
-				}
+    .deployment-feature-groups-section.no-feature-groups {
+        padding-bottom: 0;
+        .form-group {
+            margin-bottom: 5px;
+        }
+    }
+    .deployment-feature-group-warning-section {
+        padding-bottom: 30px;
+        span {
+            @extend .body-2;
+            color: $red;
+        }
+    }
+    .grid-section.vfc-table {
+        .section-title {
+            padding-bottom: 10px;
+        }
+    }
+    &.sdc-modal__content {
+        .validation-form-content {
+            .grid-col-1 {
+                flex-basis: 30%;
+            }
 
+            .grid-section.vfc-table {
+                padding-bottom: 50px;
+                .Select-menu {
+                    max-height: 100px;
+                }
+            }
 
-				.grid-section.vfc-table {
-					padding-bottom: 50px;
-					.Select-menu {
-						max-height: 100px;
-					}
-
-				}
-
-				.grid-col-3 {
-					flex-basis: 65%;
-				}
-			}
-		}
-	}
+            .grid-col-3 {
+                flex-basis: 65%;
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index 8d124c3b40..8f0803f6d0 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -1,276 +1,273 @@
 .upload-modal-body-content {
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-bottom: 10px;
-  .title {
-    @extend .body-1-semibold;
-  }
-  .file-name {
-    padding-left: 5px;
-    @extend .body-1-semibold;
-  }
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 10px;
+    .title {
+        @extend .body-1-semibold;
+    }
+    .file-name {
+        padding-left: 5px;
+        @extend .body-1-semibold;
+    }
 }
 
-
 .software-product-view {
-  display: flex;
-  height:100%;
+    display: flex;
+    height: 100%;
 
-  .description {
-    @extend .body-1;
-    padding-right: 20px;
+    .description {
+        @extend .body-1;
+        padding-right: 20px;
 
-    .missing-license {
-      display: flex;
-      align-items: baseline;
-      .svg-icon{
-        margin-right: 7px;
-        margin-left: 3px;
-        &.__exclamationTriangleFull {
-          fill: $orange;
-            width: 17px;
-            height: 17px;
+        .missing-license {
+            display: flex;
+            align-items: baseline;
+            .svg-icon {
+                margin-right: 7px;
+                margin-left: 3px;
+                &.__exclamationTriangleFull {
+                    fill: $orange;
+                    width: 17px;
+                    height: 17px;
+                }
+            }
+            .warning-text {
+                position: relative;
+                top: -2px;
+            }
         }
-      }
-      .warning-text {
-        position: relative;
-        top: -2px;
-      }
     }
-  }
-  .name {
-    @extend .body-1-semibold;
-  }
-  .software-product-landing-view-right-side {
-    @extend .flex;
-    overflow-y: hidden;
-    .list-editor-view {
-      .list-editor-view-title {
-        margin-bottom: 0;
-      }
+    .name {
+        @extend .body-1-semibold;
     }
-  }
-  .software-product-landing-view {
-    padding-bottom: 50px;
-
-
-    .software-product-landing-view-top {
-      .details-container {
-        @extend .flex-column;
-
-        .single-detail-section {
-
-          @extend  .flex-column;
-          &.title-section {
-            flex: 0.8;
-            @extend .heading-5-semibold;
-          }
-          &.title-text {
-            margin-bottom: 24px;
-          }
-          .description {
-              @include multiline-ellipsis();
-          }
-        }
-        .title {
-          @extend .body-3;
-          color: $gray;
-          &.extra-large {
-            min-width: 130px;
-          }
-        }
-        .details-section {
-          display: flex;
-        }
-        .multiple-details-section {
-          @extend .flex-column;
-          justify-content: space-between;
-          .detail-col {
-            padding-bottom: 10px;
-          }
-        }
-      }
-      .row {
-        margin: 0;
-        display: flex;
-        .details-panel {
-          flex: 1;
-          margin-right: 50px;
-          &:last-child {
-            margin-right: 0;
-          }
-          .software-product-landing-view-top-block-col-upl  {
-            height: 215px;
-            width: initial;
-          }
+    .software-product-landing-view-right-side {
+        @extend .flex;
+        overflow-y: hidden;
+        .list-editor-view {
+            .list-editor-view-title {
+                margin-bottom: 0;
+            }
         }
-        .col-md-6 {
-          padding: 0;
+    }
+    .software-product-landing-view {
+        padding-bottom: 50px;
 
-          overflow-wrap: break-word;
-          &:first-child {
-            padding-right: 25px;
-          }
-          &:last-child {
-            padding-left: 25px;
-          }
-        }
-        .title {
-          @extend .body-1-semibold;
-        }
-        .software-product-landing-view-heading-title {
-          @extend .section-title;
-          color: $dark-gray;
-          padding-bottom: 20px;
-          &:first-child {
-            padding-bottom: 20px;
-          }
-        }
-        .software-product-landing-view-top-block {
-          &.clickable {
-          cursor: pointer;
-            &:hover {
-              @extend .box-hover;
-            }
-          }
-          border: 1px solid $light-gray;
-          padding: 20px 18px 0 18px;
-          height: 215px;
-          display: flex;
-          justify-content: space-between;
-          background-color: $white;
+        .software-product-landing-view-top {
+            .details-container {
+                @extend .flex-column;
 
-          .col-md-6 {
-            @extend .body-1;
-          }
-          .software-product-landing-view-top-block-col {
-            @extend .body-1;
-            flex: 0.8;
-            display: flex;
-            justify-content: space-between;
-            flex-direction: column;
-            .description {
-              overflow: hidden;
-              padding-right: 20px;
-            }
-            .attachment-details {
-              padding-bottom: 10px;
-            }
-            .attachment-details-count {
-              color: $light-blue;
+                .single-detail-section {
+                    @extend .flex-column;
+                    &.title-section {
+                        flex: 0.8;
+                        @extend .heading-5-semibold;
+                    }
+                    &.title-text {
+                        margin-bottom: 24px;
+                    }
+                    .description {
+                        @include multiline-ellipsis();
+                    }
+                }
+                .title {
+                    @extend .body-3;
+                    color: $gray;
+                    &.extra-large {
+                        min-width: 130px;
+                    }
+                }
+                .details-section {
+                    display: flex;
+                }
+                .multiple-details-section {
+                    @extend .flex-column;
+                    justify-content: space-between;
+                    .detail-col {
+                        padding-bottom: 10px;
+                    }
+                }
             }
-          }
-        }
+            .row {
+                margin: 0;
+                display: flex;
+                .details-panel {
+                    flex: 1;
+                    margin-right: 50px;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                    .software-product-landing-view-top-block-col-upl {
+                        height: 215px;
+                        width: initial;
+                    }
+                }
+                .col-md-6 {
+                    padding: 0;
 
-        .software-product-landing-view-top-block-col-upl {
-          @extend .flex;
-          height: 215px;
-          text-align: center;
-          flex-direction: column;
-          justify-content: center;
-          border: 2px dashed $light-gray;
-          margin-bottom: 20px;
-          @extend .body-1;
-          align-items: center;
-          .upload-btn {
-            padding: 15px 55px;
+                    overflow-wrap: break-word;
+                    &:first-child {
+                        padding-right: 25px;
+                    }
+                    &:last-child {
+                        padding-left: 25px;
+                    }
+                }
+                .title {
+                    @extend .body-1-semibold;
+                }
+                .software-product-landing-view-heading-title {
+                    @extend .section-title;
+                    color: $dark-gray;
+                    padding-bottom: 20px;
+                    &:first-child {
+                        padding-bottom: 20px;
+                    }
+                }
+                .software-product-landing-view-top-block {
+                    &.clickable {
+                        cursor: pointer;
+                        &:hover {
+                            @extend .box-hover;
+                        }
+                    }
+                    border: 1px solid $light-gray;
+                    padding: 20px 18px 0 18px;
+                    height: 215px;
+                    display: flex;
+                    justify-content: space-between;
+                    background-color: $white;
 
-          }
-          .drag-text {
-            color: $blue;
-            @extend .body-1-semibold;
-          }
-          .or-text {
-            margin-top: 10px;
-            margin-bottom: 10px;
-            color: $light-gray;
-          }
-          .upload {
-            width: 50%;
-            border : 0px !important;
-          }
-          .vnfRepo {
-            width: 50%;
-            cursor: pointer;
-            .searchRepo-text {
-              color: $blue;
-              @extend .body-1-semibold;
-              width: 72px;
-              line-height: 24px;
-              margin-left: auto;
-              margin-right: auto;
-            }
-            .svg-icon-wrapper {
-              .svg-icon.__search {
-                width: 34px;
-                height: 34px;
-                margin-top: 10px;
-              }
-              &.__positive {
-                fill: $blue;
-                color: $blue;
-              }
+                    .col-md-6 {
+                        @extend .body-1;
+                    }
+                    .software-product-landing-view-top-block-col {
+                        @extend .body-1;
+                        flex: 0.8;
+                        display: flex;
+                        justify-content: space-between;
+                        flex-direction: column;
+                        .description {
+                            overflow: hidden;
+                            padding-right: 20px;
+                        }
+                        .attachment-details {
+                            padding-bottom: 10px;
+                        }
+                        .attachment-details-count {
+                            color: $light-blue;
+                        }
+                    }
+                }
+
+                .software-product-landing-view-top-block-col-upl {
+                    @extend .flex;
+                    height: 215px;
+                    text-align: center;
+                    flex-direction: column;
+                    justify-content: center;
+                    border: 2px dashed $light-gray;
+                    margin-bottom: 20px;
+                    @extend .body-1;
+                    align-items: center;
+                    .upload-btn {
+                        padding: 15px 55px;
+                    }
+                    .drag-text {
+                        color: $blue;
+                        @extend .body-1-semibold;
+                    }
+                    .or-text {
+                        margin-top: 10px;
+                        margin-bottom: 10px;
+                        color: $light-gray;
+                    }
+                    .upload {
+                        width: 50%;
+                        border: 0px !important;
+                    }
+                    .vnfRepo {
+                        width: 50%;
+                        cursor: pointer;
+                        .searchRepo-text {
+                            color: $blue;
+                            @extend .body-1-semibold;
+                            width: 72px;
+                            line-height: 24px;
+                            margin-left: auto;
+                            margin-right: auto;
+                        }
+                        .svg-icon-wrapper {
+                            .svg-icon.__search {
+                                width: 34px;
+                                height: 34px;
+                                margin-top: 10px;
+                            }
+                            &.__positive {
+                                fill: $blue;
+                                color: $blue;
+                            }
+                        }
+                    }
+                    .verticalLine {
+                        height: 90%;
+                        border-left: 1px solid $light-gray;
+                    }
+                }
+                .showVnf {
+                    flex-direction: row;
+                }
             }
-          }
-          .verticalLine {
-            height: 90%;
-            border-left: 1px solid $light-gray;
-          }
-        }
-        .showVnf {
-          flex-direction: row;
         }
-      }
     }
-  }
 }
 
 .vsp-details-page {
-  .grid-section-general {
-    padding-bottom: 30px;
-  }
-  .vsp-general-tab {
-    .validation-form-content {
-      margin: 0;
+    .grid-section-general {
+        padding-bottom: 30px;
     }
-    .validation-buttons {
-      margin: 43px 0;
-      padding: 0 52px;
-    }
-    .validation-form-content {
-      .vsp-general-tab-inline-section {
-        display: flex;
-
-        .vsp-general-tab-sub-section:not(:last-of-type) {
-          margin-right: 40px;
+    .vsp-general-tab {
+        .validation-form-content {
+            margin: 0;
         }
-        .field-section {
-          width: 440px;
+        .validation-buttons {
+            margin: 43px 0;
+            padding: 0 52px;
         }
-        .form-group textarea {
-          height: 192px;
-        }
-        select optgroup[label] {
-          color: $dark-blue;
+        .validation-form-content {
+            .vsp-general-tab-inline-section {
+                display: flex;
+
+                .vsp-general-tab-sub-section:not(:last-of-type) {
+                    margin-right: 40px;
+                }
+                .field-section {
+                    width: 440px;
+                }
+                .form-group textarea {
+                    height: 192px;
+                }
+                select optgroup[label] {
+                    color: $dark-blue;
+                }
+                option {
+                    color: $dark-gray;
+                }
+                .Select,
+                .input-options {
+                    width: 440px;
+                }
+            }
         }
-        option {
-          color: $dark-gray;
+        .validation-buttons {
+            position: fixed;
+            display: block;
+            bottom: 0;
+            width: 66%;
         }
-        .Select, .input-options {
-          width: 440px;
+        .validation-input-wrapper {
+            select.form-control {
+                width: 100%;
+            }
         }
-      }
-    }
-    .validation-buttons {
-      position: fixed;
-      display: block;
-      bottom: 0;
-      width: 66%;
-    }
-    .validation-input-wrapper {
-      select.form-control {
-        width: 100%;
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 3f2a2f9a69..9ec074f09f 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -1,60 +1,60 @@
 .edit-process-modal {
-  height: 100%;
-  .vsp-processes-editor {
-    padding-left: 0;
-    padding-right: 0;
-    .editor-title {
-      @extend .heading-2;
-      color: $dark-gray;
-      padding-bottom: 50px;
-    }
-    .file-upload-box {
-      @extend .body-1;
-      display: flex;
-      text-align: center;
-      flex-direction: column;
-      justify-content: center;
-      border: 2px dashed $light-gray;
-      padding-top: 20px;
-      padding-bottom: 20px;
+    height: 100%;
+    .vsp-processes-editor {
+        padding-left: 0;
+        padding-right: 0;
+        .editor-title {
+            @extend .heading-2;
+            color: $dark-gray;
+            padding-bottom: 50px;
+        }
+        .file-upload-box {
+            @extend .body-1;
+            display: flex;
+            text-align: center;
+            flex-direction: column;
+            justify-content: center;
+            border: 2px dashed $light-gray;
+            padding-top: 20px;
+            padding-bottom: 20px;
 
-      .process-type {
-        width: 100%;
-      }
-    }
-    .vsp-processes-editor-data {
-      .validation-input-wrapper {
-        .form-group.vsp-process-description > textarea {
-            height: 113px;
+            .process-type {
+                width: 100%;
+            }
+        }
+        .vsp-processes-editor-data {
+            .validation-input-wrapper {
+                .form-group.vsp-process-description > textarea {
+                    height: 113px;
+                }
+            }
+            .process-type {
+                width: 100%;
+            }
+            .process-editor-file-box {
+                width: 380px;
+            }
         }
-      }
-      .process-type {
-        width: 100%;
-      }
-      .process-editor-file-box {
-        width: 380px;
-      }
     }
-  }
 }
 
 .software-product-landing-view-right-side.vsp-processes-page {
-	overflow-y: initial;
-  .processes-list {
-    @extend .flex-column;
-  }
-  .list-editor-view {
-    .list-editor-view-list {
-      .list-editor-item-view {
-        .list-editor-item-view-content {
-          .list-editor-item-view-field {
-            .artifact-name {
-              @extend .body-1;
-              color: $light-green;
+    overflow-y: initial;
+    .processes-list {
+        @extend .flex-column;
+    }
+    .list-editor-view {
+        .list-editor-view-list {
+            .list-editor-item-view {
+                .list-editor-item-view-content {
+                    .list-editor-item-view-field {
+                        .artifact-name {
+                            @extend .body-1;
+                            color: $light-green;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 440b2424df..00f3ae4567 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,35 +1,35 @@
 .vsp-components-load-balancing {
-  .svg-icon-wrapper {
-	position: relative;
-	top: -4px;
-  }
+    .svg-icon-wrapper {
+        position: relative;
+        top: -4px;
+    }
 
-  .halb-data {
-	.question {
-	  padding-top: 10px;
-	  &:first-child {
-		padding-top: 0;
-	  }
-	}
-	.title {
-	  @extend .body-1-semibold;
-	  margin-bottom: 8px;
-	  cursor: pointer;
-	  .svg-icon {
-		@include transition(transform 0.3s);
-		margin-right: 5px;
-		position: relative;
-		top: 4px;
-	  }
-	}
-	.add-padding {
-	  padding-bottom: 20px;
-	}
-	.new-line {
-	  margin-left: 16px;
-	}
-	textarea.form-control {
-	  height: 90px;
-	}
-  }
+    .halb-data {
+        .question {
+            padding-top: 10px;
+            &:first-child {
+                padding-top: 0;
+            }
+        }
+        .title {
+            @extend .body-1-semibold;
+            margin-bottom: 8px;
+            cursor: pointer;
+            .svg-icon {
+                @include transition(transform 0.3s);
+                margin-right: 5px;
+                position: relative;
+                top: 4px;
+            }
+        }
+        .add-padding {
+            padding-bottom: 20px;
+        }
+        .new-line {
+            margin-left: 16px;
+        }
+        textarea.form-control {
+            height: 90px;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
index 23f41c8816..1c3ed2ada1 100644
--- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss
+++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
@@ -1,32 +1,32 @@
 .heat-validation-stand-alone {
-  .upload-screen {
-    margin-top: 100px;
-    .title {
-      text-align: center;
-      margin-bottom: 50px;
+    .upload-screen {
+        margin-top: 100px;
+        .title {
+            text-align: center;
+            margin-bottom: 50px;
+        }
     }
-  }
 
-  .attachments-screen {
-    .back-button {
-      z-index: 1000;
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      width: 200px;
-    }
-    .software-product-attachments {
-      display: block;
-      .software-product-view {
-        display: block;
-        .software-product-landing-view-right-side {
-          display: block;
-          .software-product-attachments-main {
-            display: flex;
-            height: 100vh;
-          }
+    .attachments-screen {
+        .back-button {
+            z-index: 1000;
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 200px;
+        }
+        .software-product-attachments {
+            display: block;
+            .software-product-view {
+                display: block;
+                .software-product-landing-view-right-side {
+                    display: block;
+                    .software-product-attachments-main {
+                        display: flex;
+                        height: 100vh;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
index 5651c89032..c29230198a 100644
--- a/openecomp-ui/resources/scss/modules/_versionsPage.scss
+++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss
@@ -1,360 +1,361 @@
 .dox-ui-punch-out {
-  background-color: $content-background-color;
+    background-color: $content-background-color;
 }
 
 .dox-ui-punch-out.dox-ui-punch-out-full-page {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
 }
 
 @mixin version-page-box-shadow() {
-	box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
+    box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
 }
 
-@mixin version-page-sub-title(){
-	color: $text-black;
-	text-transform: uppercase;
-	background-color: $white;
-	border-bottom: 1px solid $light-gray;
-	padding: 12px 0 10px 23px;
+@mixin version-page-sub-title() {
+    color: $text-black;
+    text-transform: uppercase;
+    background-color: $white;
+    border-bottom: 1px solid $light-gray;
+    padding: 12px 0 10px 23px;
 }
 
 .versions-tree-modal {
-	.modal-dialog {
-		width: 800px;
-	}
-
-	.tree-view {
-		display: flex;
-    align-items: center;
-	}
+    .tree-view {
+        display: flex;
+        align-items: center;
+    }
 }
 
 .versions-page-view {
-	height: 100%;
-	background-color: $background-gray;
-	overflow: auto;
-	padding: 35px 50px 20px 50px;
-
-	.svg-icon-wrapper {
-		justify-content: flex-start;
-	}
-	.version-page-header {
-		display: flex;
-		justify-content: space-between;
-		.versions-page-title {
-			@extend .heading-1;
-			text-transform: uppercase;
-			margin-bottom: 29px;
-			color: $blue;
-			display: flex;
-			.archived-title {
-				@extend .body-3;
-				color: $white;
-				background-color: $dark-purple;
-				margin-left: 20px;
-				border-radius: 3px;
-				padding: 1px 10px;
-				align-self: center;
-				text-transform: none;
-			}
-		}
-		.deprecate-btn-wrapper {
-			display: flex;
-			justify-content: flex-end;
-			margin-bottom: 10px;
-			align-self: center;
-			.svg-icon-wrapper {
-				&:hover {
-					fill: $light-blue;
-				}
-				.svg-icon {
-					width: 24px;
-					height: 24px;
-				}
-			}
-		}
-	}		
-	.versions-page-permissions-view-wrapper {
-		@extend .body-1-semibold;
-		@include version-page-box-shadow();
-
-		.permissions-view-wrapper-title {
-			@include version-page-sub-title();
-		}
-
-		.svg-icon-wrapper.user-view {
-			fill: transparent;
-			stroke: $blue;
-			.svg-icon {
-				height: 18px;
-				width: 16px;
-				margin: 0 7px;
-			}
-			&.current-user {
-				.svg-icon {
-					background-color: $blue;
-					stroke: $white;
-					padding-top: 5px;
-					padding-bottom: 3px;
-					height: 29px;
-					width: 29px;
-					border-radius: 20px;
-					border: 1px solid $blue;
-					box-shadow: inset 0px 0px 0px 2px $white;
-					margin: 0;
-				}
-				.svg-icon-label {
-					margin-left: 7px;
-				}
-			}
-			.svg-icon-label {
-				@extend .body-2;
-				color: $dark-gray;
-				margin-left: 6px;
-			}
-		}
-
-		.permissions-view-content {
-			padding: 20px 40px 20px 25px;
-			background-color: $white;
-
-			height: 120px;
-			display: flex;
-		}
-
-		.permissions-view {
-			display: flex;
-			flex: 1;
-			flex-direction: column;
-			justify-content: space-around;
-
-			.permissions-view-title {
-				text-transform: uppercase;
-				color: $dark-gray;
-			}
-
-			.contributors-view, .owner-view {
-				display: flex;
-				height: 16px;
-				@extend .body-1-semibold;
-
-				.permissions-view-title {
-					width: 130px;
-					line-height: 16px;
-				}
-
-				.extra-contributors {
-					border-radius: 30px;
-					background-color: $gray;
-					width: 26px;
-					height: 26px;
-					padding-right: 2px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					color: $white;
-					cursor: default;
-					&:hover {
-						background-color: $dark-gray;
-					}
-				}
-
-				.user-view {
-					margin-right: 38px;
-				}
-
-				.manage-permissions {
-					color: $blue;
-					margin-left: auto;
-					cursor: pointer;
-
-					&:hover {
-						color: $dark-blue;
-					}
-				}
-			}
-		}
-	}
-
-	.versions-page-list-and-tree {
-		display: flex;
-		margin-top: 20px;
-
-		.version-tree-wrapper {
-			display: flex;
-			flex-direction: column;
-			margin-right:10px;
-			transition: all 1s ease;
-			@include version-page-box-shadow();
-
-			.version-tree-title-container {
-				display: flex;
-				align-items: center;
-				height: 40px;
-				@include version-page-sub-title();
-				padding-right: 10px;
-
-				.version-tree-full-screen {
-					margin-left: auto;
-				}
-			}
-
-			.tree-view {
-				background-color: $white;
-				flex: 1;
-
-				.node:not(.selectedNode):hover {
-					.outer-circle, .inner-circle {
-						transform: scale(1.1);
-					}
-				}
-			}
-		}
-	}
-
-	.version-list {
-		flex: 1;
-		@extend .body-1-semibold;
-		color: $text-black;
-		display: flex;
-		flex-direction: column;
-
-		.version-list-items {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-
-			.version-item-row {
-				border-bottom: 1px solid $tlv-light-gray;
-
-				&:last-child {
-					border-bottom: none;
-				}
-			}
-		}
-
-		.version-item-row {
-			$row-hover-color: lighten($blue, 54%);
-			$row-active-color: lighten($blue, 51%);
-
-			display: flex;
-			align-items: center;
-			padding: 15px 30px;
-			@include version-page-box-shadow();
-			background-color: $white;
-			height: 70px;
-
-			&:hover {
-				background-color: $row-hover-color;
-			}
-
-			&.selected {
-				box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
-				background-color: $row-active-color;
-
-				&:hover {
-					box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
-				}
-			}
-
-			&.header-row {
-				height: 40px;
-
-				@extend .body-1-semibold;
-				@include version-page-sub-title();
-				padding: 15px 27px;
-
-				&:hover {
-					background-color: $white;
-					pointer-events: none;
-					&:active {
-						background-color: $white;
-						@include version-page-box-shadow();
-					}
-				}
-				.header-field.actions {
-					margin-right: 57px;
-				}
-			}
-
-			.version-item-field {
-				flex: 1;
-				display: flex;
-				margin-right: 10px;
-
-				&.item-version, &.item-status {
-					flex: 0 1 10%;
-					@extend .body-1-semibold;
-					color: $text-black;
-				}
-
-				&.item-description, &.item-last-edited {
-					@extend .body-1;
-					color: $dark-gray;
-				}
-
-				&.item-description, &.header-description {
-					flex: 2 1 0;
-				}
-
-				&.item-description > .description-text {
-					margin-right: 10px;
-					@include ellipsis($max-width: 300px);
-					width: initial;
-				}
-
-				&.item-actions {
-					display: flex;
-					flex: 1 1 3%;
-					justify-content: space-between;
-				}
-
-				&.item-select, &.item-create {
-					@extend .body-1;
-					flex: 0 1 auto;
-					margin-right: 0;
-
-					.svg-icon-wrapper {
-						fill: $blue;
-						color: $blue;
-
-						&[disabled] {
-							cursor: default;
-						}
-
-						.svg-icon {
-							width: 16px;
-							height: 16px;
-						}
-
-						&:hover:not([disabled]) {
-							fill: $dark-blue;
-							color: $dark-blue;
-						}
-					}
-				}
-
-			}
-
-			/* To keep ellipsis hider's background the same color as row background */
-			&:not(.selected):hover .item-description > .description-text:after {
-				background: $row-hover-color;
-			}
-
-			&:hover:active .item-description > .description-text:after {
-				background: $row-active-color;
-			}
-
-		}
-
-	}
-
-	&.clickable {
-		cursor: pointer;
-	}
+    height: 100%;
+    background-color: $background-gray;
+    overflow: auto;
+    padding: 35px 50px 20px 50px;
+
+    .svg-icon-wrapper {
+        justify-content: flex-start;
+    }
+    .version-page-header {
+        display: flex;
+        justify-content: space-between;
+        .versions-page-title {
+            @extend .heading-1;
+            text-transform: uppercase;
+            margin-bottom: 29px;
+            color: $blue;
+            display: flex;
+            .archived-title {
+                @extend .body-3;
+                color: $white;
+                background-color: $dark-purple;
+                margin-left: 20px;
+                border-radius: 3px;
+                padding: 1px 10px;
+                align-self: center;
+                text-transform: none;
+            }
+        }
+        .deprecate-btn-wrapper {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 10px;
+            align-self: center;
+            .svg-icon-wrapper {
+                &:hover {
+                    fill: $light-blue;
+                }
+                .svg-icon {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+    }
+    .versions-page-permissions-view-wrapper {
+        @extend .body-1-semibold;
+        @include version-page-box-shadow();
+
+        .permissions-view-wrapper-title {
+            @include version-page-sub-title();
+        }
+
+        .svg-icon-wrapper.user-view {
+            fill: transparent;
+            stroke: $blue;
+            .svg-icon {
+                height: 18px;
+                width: 16px;
+                margin: 0 7px;
+            }
+            &.current-user {
+                .svg-icon {
+                    background-color: $blue;
+                    stroke: $white;
+                    padding-top: 5px;
+                    padding-bottom: 3px;
+                    height: 29px;
+                    width: 29px;
+                    border-radius: 20px;
+                    border: 1px solid $blue;
+                    box-shadow: inset 0px 0px 0px 2px $white;
+                    margin: 0;
+                }
+                .svg-icon-label {
+                    margin-left: 7px;
+                }
+            }
+            .svg-icon-label {
+                @extend .body-2;
+                color: $dark-gray;
+                margin-left: 6px;
+            }
+        }
+
+        .permissions-view-content {
+            padding: 20px 40px 20px 25px;
+            background-color: $white;
+
+            height: 120px;
+            display: flex;
+        }
+
+        .permissions-view {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .permissions-view-title {
+                text-transform: uppercase;
+                color: $dark-gray;
+            }
+
+            .contributors-view,
+            .owner-view {
+                display: flex;
+                height: 16px;
+                @extend .body-1-semibold;
+
+                .permissions-view-title {
+                    width: 130px;
+                    line-height: 16px;
+                }
+
+                .extra-contributors {
+                    border-radius: 30px;
+                    background-color: $gray;
+                    width: 26px;
+                    height: 26px;
+                    padding-right: 2px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: $white;
+                    cursor: default;
+                    &:hover {
+                        background-color: $dark-gray;
+                    }
+                }
+
+                .user-view {
+                    margin-right: 38px;
+                }
+
+                .manage-permissions {
+                    color: $blue;
+                    margin-left: auto;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: $dark-blue;
+                    }
+                }
+            }
+        }
+    }
+
+    .versions-page-list-and-tree {
+        display: flex;
+        margin-top: 20px;
+
+        .version-tree-wrapper {
+            display: flex;
+            flex-direction: column;
+            margin-right: 10px;
+            transition: all 1s ease;
+            @include version-page-box-shadow();
+
+            .version-tree-title-container {
+                display: flex;
+                align-items: center;
+                height: 40px;
+                @include version-page-sub-title();
+                padding-right: 10px;
+
+                .version-tree-full-screen {
+                    margin-left: auto;
+                }
+            }
+
+            .tree-view {
+                background-color: $white;
+                flex: 1;
+
+                .node:not(.selectedNode):hover {
+                    .outer-circle,
+                    .inner-circle {
+                        transform: scale(1.1);
+                    }
+                }
+            }
+        }
+    }
+
+    .version-list {
+        flex: 1;
+        @extend .body-1-semibold;
+        color: $text-black;
+        display: flex;
+        flex-direction: column;
+
+        .version-list-items {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            .version-item-row {
+                border-bottom: 1px solid $tlv-light-gray;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+
+        .version-item-row {
+            $row-hover-color: lighten($blue, 54%);
+            $row-active-color: lighten($blue, 51%);
+
+            display: flex;
+            align-items: center;
+            padding: 15px 30px;
+            @include version-page-box-shadow();
+            background-color: $white;
+            height: 70px;
+
+            &:hover {
+                background-color: $row-hover-color;
+            }
+
+            &.selected {
+                box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+                    inset 5px 0 0 0 $blue;
+                background-color: $row-active-color;
+
+                &:hover {
+                    box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+                        inset 5px 0 0 0 lighten($blue, 35%);
+                }
+            }
+
+            &.header-row {
+                height: 40px;
+
+                @extend .body-1-semibold;
+                @include version-page-sub-title();
+                padding: 15px 27px;
+
+                &:hover {
+                    background-color: $white;
+                    pointer-events: none;
+                    &:active {
+                        background-color: $white;
+                        @include version-page-box-shadow();
+                    }
+                }
+                .header-field.actions {
+                    margin-right: 57px;
+                }
+            }
+
+            .version-item-field {
+                flex: 1;
+                display: flex;
+                margin-right: 10px;
+
+                &.item-version,
+                &.item-status {
+                    flex: 0 1 10%;
+                    @extend .body-1-semibold;
+                    color: $text-black;
+                }
+
+                &.item-description,
+                &.item-last-edited {
+                    @extend .body-1;
+                    color: $dark-gray;
+                }
+
+                &.item-description,
+                &.header-description {
+                    flex: 2 1 0;
+                }
+
+                &.item-description > .description-text {
+                    margin-right: 10px;
+                    @include ellipsis($max-width: 300px);
+                    width: initial;
+                }
+
+                &.item-actions {
+                    display: flex;
+                    flex: 1 1 3%;
+                    justify-content: space-between;
+                }
+
+                &.item-select,
+                &.item-create {
+                    @extend .body-1;
+                    flex: 0 1 auto;
+                    margin-right: 0;
+
+                    .svg-icon-wrapper {
+                        fill: $blue;
+                        color: $blue;
+
+                        &[disabled] {
+                            cursor: default;
+                        }
+
+                        .svg-icon {
+                            width: 16px;
+                            height: 16px;
+                        }
+
+                        &:hover:not([disabled]) {
+                            fill: $dark-blue;
+                            color: $dark-blue;
+                        }
+                    }
+                }
+            }
+
+            /* To keep ellipsis hider's background the same color as row background */
+            &:not(.selected):hover .item-description > .description-text:after {
+                background: $row-hover-color;
+            }
+
+            &:hover:active .item-description > .description-text:after {
+                background: $row-active-color;
+            }
+        }
+    }
+
+    &.clickable {
+        cursor: pointer;
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
deleted file mode 100644
index 9f88e94393..0000000000
--- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-.compute-flavor-editor-modal-edit {
-  .modal-lg {
-    width: 1182px;
-  }
-}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index 14bad18179..867749d8e9 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,24 +1,22 @@
-
 .vsp-component-monitoring {
-  .dropzone {
-    &:not(:last-child) {
-      padding-bottom: 50px;
-    }
+    .dropzone {
+        &:not(:last-child) {
+            padding-bottom: 50px;
+        }
 
-    .monitoring-file {
-      display: flex;
-      .filename {
-        opacity: 1;
-        width: auto;
-        border-right-style: none;
-      }
-      .delete {
-        display: flex;
-        width: 30px;
-        justify-content: center;
-        align-items: center;
-      }
+        .monitoring-file {
+            display: flex;
+            .filename {
+                opacity: 1;
+                width: auto;
+                border-right-style: none;
+            }
+            .delete {
+                display: flex;
+                width: 30px;
+                justify-content: center;
+                align-items: center;
+            }
+        }
     }
-  }
-
 }
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index 2a99263285..8a7575fd97 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -1,48 +1,47 @@
-
 .vsp-component-questionnaire-view {
-  input[type='checkbox'] {
-    &:before {
-      border: 1px solid $dark-gray;
-      cursor: pointer;
-    }
-    &:checked:before {
-      border: 1px solid $blue;
-    }
-  }
-  .component-questionnaire-validation-form {
-
-    .section-field {
-      textarea {
-        height: 80px;
-      }
+    input[type='checkbox'] {
+        &:before {
+            border: 1px solid $dark-gray;
+            cursor: pointer;
+        }
+        &:checked:before {
+            border: 1px solid $blue;
+        }
     }
-
-    .rows-section, .grid-items {
-      .row-flex-components {
-        display: flex;
-      }
-
-      .vertical-flex {
-        flex-direction: column;
-        .control-label {
-          @extend .body-2-semibold;
+    .component-questionnaire-validation-form {
+        .section-field {
+            textarea {
+                height: 80px;
+            }
         }
-        .radio-options-content-row {
-          display: flex;
-          margin-top: -4px;
-          .validation-radio-wrapper {
-            margin-right: 20px;
 
-            & > .form-group {
-              display: flex;
+        .rows-section,
+        .grid-items {
+            .row-flex-components {
+                display: flex;
             }
-            .form-group .sdc-radio {
-              width: auto;
-              margin-right: 0;
+
+            .vertical-flex {
+                flex-direction: column;
+                .control-label {
+                    @extend .body-2-semibold;
+                }
+                .radio-options-content-row {
+                    display: flex;
+                    margin-top: -4px;
+                    .validation-radio-wrapper {
+                        margin-right: 20px;
+
+                        & > .form-group {
+                            display: flex;
+                        }
+                        .form-group .sdc-radio {
+                            width: auto;
+                            margin-right: 0;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index bd216c794b..e50ad2ddd7 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -1,282 +1,278 @@
 @mixin modules-and-artifacts-list-items {
-	background-color: $tlv-gray;
-	margin-bottom: 12px;
-	border: 1px solid $light-gray;
-	border-left-width: 18px;
-	border-left-color: $blue;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-  padding: 10px 20px 0 20px;
+    background-color: $tlv-gray;
+    margin-bottom: 12px;
+    border: 1px solid $light-gray;
+    border-left-width: 18px;
+    border-left-color: $blue;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 10px 20px 0 20px;
 }
 
 .heat-setup-view {
-	margin-top: 20px;
-	display: flex;
-	justify-content: space-between;
-  padding: 0 60px 0 36px;
-
-	.heat-setup-view-modules-and-artifacts {
-		margin-right: 20px;
-		flex: 1;
-		.heat-setup-module-icon {
-		  margin: 0 6px 0 0;
-		  position: relative;
-		  top: -2px;
-		}
-
-		.modules-list-wrapper {
-			&.modules-list-wrapper-divider {
-				border-bottom: 1px solid $tlv-light-gray;
-			}
-
-			ul {
-				.undefined-dragging {
-					opacity: 0.5;
-				}
-				.modules-list-item-selectors {
-					display: flex;
-					justify-content: space-between;
-					flex-wrap: wrap;
-					padding-bottom: 3px;
-					.Select-value-label {
-						@include ellipsis(85%);
-					}
-
-					.validation-input-wrapper {
-						flex-basis: 48%;
-					}
-
-					.control-label {
-						margin-bottom: 4px;
-					}
-
-					.form-group {
-						margin-bottom: 12px;
-					}
-				}
-			}
-
-			.modules-list-item-controllers {
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: 7px;
-
-				.btn {
-					min-width: 0;
-				}
-
-				.svg-icon {
-					&.__trashO {
-						fill: $dark-gray;
-						&:hover {
-							fill: $black;
-						}
-					}
-				}
-
-				.module-title-by-type {
-					@extend .heading-5-semibold;
-					margin-right: 3px;
-				}
-				.modules-list-item-filename {
-					display: flex;
-					align-items: center;
-
-					.svg-icon {
-						&.__pencil {
-							margin-left: 3px;
-							opacity: 0;
-						}
-					}
-
-
-
-					.filename-text {
-						@extend .heading-5-semibold;
-
-					}
-
-					.text-and-icon {
-						padding: 5px;
-						border: 1px solid transparent;
-						display: flex;
-						align-items: center;
-						height: 35px;
-						&.in-edit {
-							padding: 0;
-							.name-edit {
-								padding: 4px;
-								@extend .heading-5-semibold;
-								height: 100%;
-								border: 1px solid $light-gray;
-								width: 400px;
-							}
-						}
-					}
-
-					input[disabled] {
-						border: none;
-					}
-					&:hover {
-						.text-and-icon {
-							border-color: $light-gray;
-							background-color: $white;
-
-							&.in-edit {
-								border-color: transparent;
-							}
-						}
-						.svg-icon {
-							&.__pencil {
-								margin-left: 10px;
-								opacity: 1;
-								.svg-icon {
-									stroke: $dark-gray;
-									&:hover {
-										stroke: $black;
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-
-			.modules-list-item {
-				@include modules-and-artifacts-list-items;
-				position: relative;
-				.Select-option {
-					@extend .body-1;
-					&.is-selected {
-						@extend .body-1-semibold;
-						background-color: $white;
-					}
-					&.is-focused {
-						background-color: $blue;
-						color: $white;
-					}
-				}
-				.add-or-delete-volumes {
-					margin-right: 8px;
-					margin-bottom: 11px;
-				}
-				&:before {
-					content: "\00B7\00B7\00B7\00B7\00B7\00B7";
-					color: $white;
-					position: absolute;
-					left: -27px;
-					top: 56%;
-					font-size: 27px;
-					width: 75px;
-					@include transform-rotate(90);
-					height: 0;
-					letter-spacing: 1px;
-				}
-			}
-		}
-
-		.artifact-files {
-			@include modules-and-artifacts-list-items;
-			&.with-list-items {
-				margin-top: 10px;
-			}
-
-			&.nested {
-				.nested-list {
-					display: flex;
-					flex-wrap: wrap;
-					margin-bottom: 18px;
-				}
-
-				.nested-list-item {
-					border-radius: 15px;
-					background-color: $tlv-light-gray;
-					padding: 4px 15px;
-					margin: 2px 10px 2px 0;
-				}
-			}
-
-			.artifact-files-header {
-				@extend .heading-5-semibold;
-				display: flex;
-				margin-bottom: 10px;
-				justify-content: space-between;
-				.image-icon.artifacts {
-					margin-right: 10px;
-				}
-
-				span {
-					display: flex;
-				}
-
-			}
-		}
-	}
-
-	.modules-list-header {
-		height: 30px;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: flex-end;
-		align-items: baseline;
-	}
-
-	.unassigned-files {
-		border: 1px solid $light-gray;
-		background-color: $white;
-		height: 250px;
-		width: 250px;
-
-		// Will work in chrome from chrome 56
-		position: sticky;
-		top: 10px;
-
-		.unassigned-files-title {
-			@extend .heading-5-semibold;
-			background-color: $tlv-gray;
-			padding: 11px 0 9px 15px;
-		}
-
-		.unassigned-files-list {
-			height: 207px;
-    	overflow-y: auto;
-    	padding-bottom: 5px;
-
-			.go-to-validation-button-wrapper {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				margin-top: 70px;
-				.all-files-assigned {
-					@extend .heading-4;
-					margin-bottom: 10px;
-				}
-				.svg-icon-wrapper {
-					margin-bottom: 10px;
-					.svg-icon {
-						&.__angleRight {
-							width: 10px;
-							height: 10px;
-						}
-					}
-				}
-			}
-
-			.unassigned-files-list-item {
-				@include ellipsis();
-				border-bottom: 1px solid $tlv-light-gray;
-				padding: 0 5px 5px 15px;
-				&:first-child {
-					padding-top: 5px;
-				}
-				&:last-child {
-					border-bottom: none;
-					padding-bottom: 0;
-				}
-			}
-		}
-	}
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 60px 0 36px;
+
+    .heat-setup-view-modules-and-artifacts {
+        margin-right: 20px;
+        flex: 1;
+        .heat-setup-module-icon {
+            margin: 0 6px 0 0;
+            position: relative;
+            top: -2px;
+        }
+
+        .modules-list-wrapper {
+            &.modules-list-wrapper-divider {
+                border-bottom: 1px solid $tlv-light-gray;
+            }
+
+            ul {
+                .undefined-dragging {
+                    opacity: 0.5;
+                }
+                .modules-list-item-selectors {
+                    display: flex;
+                    justify-content: space-between;
+                    flex-wrap: wrap;
+                    padding-bottom: 3px;
+                    .Select-value-label {
+                        @include ellipsis(85%);
+                    }
+
+                    .validation-input-wrapper {
+                        flex-basis: 48%;
+                    }
+
+                    .control-label {
+                        margin-bottom: 4px;
+                    }
+
+                    .form-group {
+                        margin-bottom: 12px;
+                    }
+                }
+            }
+
+            .modules-list-item-controllers {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 7px;
+
+                .btn {
+                    min-width: 0;
+                }
+
+                .svg-icon {
+                    &.__trashO {
+                        fill: $dark-gray;
+                        &:hover {
+                            fill: $black;
+                        }
+                    }
+                }
+
+                .module-title-by-type {
+                    @extend .heading-5-semibold;
+                    margin-right: 3px;
+                }
+                .modules-list-item-filename {
+                    display: flex;
+                    align-items: center;
+
+                    .svg-icon {
+                        &.__pencil {
+                            margin-left: 3px;
+                            opacity: 0;
+                        }
+                    }
+
+                    .filename-text {
+                        @extend .heading-5-semibold;
+                    }
+
+                    .text-and-icon {
+                        padding: 5px;
+                        border: 1px solid transparent;
+                        display: flex;
+                        align-items: center;
+                        height: 35px;
+                        &.in-edit {
+                            padding: 0;
+                            .name-edit {
+                                padding: 4px;
+                                @extend .heading-5-semibold;
+                                height: 100%;
+                                border: 1px solid $light-gray;
+                                width: 400px;
+                            }
+                        }
+                    }
+
+                    input[disabled] {
+                        border: none;
+                    }
+                    &:hover {
+                        .text-and-icon {
+                            border-color: $light-gray;
+                            background-color: $white;
+
+                            &.in-edit {
+                                border-color: transparent;
+                            }
+                        }
+                        .svg-icon {
+                            &.__pencil {
+                                margin-left: 10px;
+                                opacity: 1;
+                                .svg-icon {
+                                    stroke: $dark-gray;
+                                    &:hover {
+                                        stroke: $black;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .modules-list-item {
+                @include modules-and-artifacts-list-items;
+                position: relative;
+                .Select-option {
+                    @extend .body-1;
+                    &.is-selected {
+                        @extend .body-1-semibold;
+                        background-color: $white;
+                    }
+                    &.is-focused {
+                        background-color: $blue;
+                        color: $white;
+                    }
+                }
+                .add-or-delete-volumes {
+                    margin-right: 8px;
+                    margin-bottom: 11px;
+                }
+                &:before {
+                    content: '\00B7\00B7\00B7\00B7\00B7\00B7';
+                    color: $white;
+                    position: absolute;
+                    left: -27px;
+                    top: 56%;
+                    font-size: 27px;
+                    width: 75px;
+                    @include transform-rotate(90);
+                    height: 0;
+                    letter-spacing: 1px;
+                }
+            }
+        }
+
+        .artifact-files {
+            @include modules-and-artifacts-list-items;
+            &.with-list-items {
+                margin-top: 10px;
+            }
+
+            &.nested {
+                .nested-list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-bottom: 18px;
+                }
+
+                .nested-list-item {
+                    border-radius: 15px;
+                    background-color: $tlv-light-gray;
+                    padding: 4px 15px;
+                    margin: 2px 10px 2px 0;
+                }
+            }
+
+            .artifact-files-header {
+                @extend .heading-5-semibold;
+                display: flex;
+                margin-bottom: 10px;
+                justify-content: space-between;
+                .image-icon.artifacts {
+                    margin-right: 10px;
+                }
+
+                span {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    .modules-list-header {
+        height: 30px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        align-items: baseline;
+    }
+
+    .unassigned-files {
+        border: 1px solid $light-gray;
+        background-color: $white;
+        height: 250px;
+        width: 250px;
+
+        // Will work in chrome from chrome 56
+        position: sticky;
+        top: 10px;
+
+        .unassigned-files-title {
+            @extend .heading-5-semibold;
+            background-color: $tlv-gray;
+            padding: 11px 0 9px 15px;
+        }
+
+        .unassigned-files-list {
+            height: 207px;
+            overflow-y: auto;
+            padding-bottom: 5px;
+
+            .go-to-validation-button-wrapper {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                margin-top: 70px;
+                .all-files-assigned {
+                    @extend .heading-4;
+                    margin-bottom: 10px;
+                }
+                .svg-icon-wrapper {
+                    margin-bottom: 10px;
+                    .svg-icon {
+                        &.__angleRight {
+                            width: 10px;
+                            height: 10px;
+                        }
+                    }
+                }
+            }
+
+            .unassigned-files-list-item {
+                @include ellipsis();
+                border-bottom: 1px solid $tlv-light-gray;
+                padding: 0 5px 5px 15px;
+                &:first-child {
+                    padding-top: 5px;
+                }
+                &:last-child {
+                    border-bottom: none;
+                    padding-bottom: 0;
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/_workflows.scss b/openecomp-ui/resources/scss/modules/_workflows.scss
index 894b6e7973..c7ce4521f5 100644
--- a/openecomp-ui/resources/scss/modules/_workflows.scss
+++ b/openecomp-ui/resources/scss/modules/_workflows.scss
@@ -1,27 +1,19 @@
-
 .workflows {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  top: 0;
-
-  background-color: $background-gray;
-  .list-editor-view-list .list-editor-item-view .list-editor-item-view-content .list-editor-item-view-field:last-child {
-    flex: 2 1;
-  }
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    top: 0;
 
-  .list-editor-view {
-    padding: 30px 50px;
-  }
-
-}
+    background-color: $background-gray;
+    .list-editor-view-list
+        .list-editor-item-view
+        .list-editor-item-view-content
+        .list-editor-item-view-field:last-child {
+        flex: 2 1;
+    }
 
-.workflows-editor-modal {
-  .modal-body {
-    padding: 0;
-  }
-  .validation-form-content {
-    padding: 15px;
-  }
+    .list-editor-view {
+        padding: 30px 50px;
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
index e3fc6a9143..1b6459a429 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -13,7 +13,7 @@
         height: 34px;
         color: $blue;
         font-weight: bolder;
-        text-transform: uppercase;        
+        text-transform: uppercase;
     }
     .sdc-accordion {
         padding-left: 18px;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
index 0a234a5a96..429d6cc3d3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -1,33 +1,33 @@
 .catalog-header {
-  margin: 34px 0 29px 50px;
-  display: flex;
-  flex-direction: row;
-  .expandable-input-top {
-	margin-right: 60px;
-  }
-  &.workspace-header {
-	@extend .heading-1;
-	color: $blue;
-  }
-  .catalog-header-tabs {
-	display: flex;
-	flex-direction: row;
-	.tab-separator {
-	  position: relative;
-	  top: 8px;
-	}
-	.catalog-header-tab {
-	  @extend .heading-1;
-	  cursor: pointer;
-	  padding: 0 15px 0 15px;
-	  display: flex;
-	  align-items: center;
-	  &.active {
-		color: $blue;
-	  }
-	  &:first-child {
-		padding-left: 0;
-	  }
-	}
-  }
+    margin: 34px 0 29px 50px;
+    display: flex;
+    flex-direction: row;
+    .expandable-input-top {
+        margin-right: 60px;
+    }
+    &.workspace-header {
+        @extend .heading-1;
+        color: $blue;
+    }
+    .catalog-header-tabs {
+        display: flex;
+        flex-direction: row;
+        .tab-separator {
+            position: relative;
+            top: 8px;
+        }
+        .catalog-header-tab {
+            @extend .heading-1;
+            cursor: pointer;
+            padding: 0 15px 0 15px;
+            display: flex;
+            align-items: center;
+            &.active {
+                color: $blue;
+            }
+            &:first-child {
+                padding-left: 0;
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
index 11a739d004..c632beb382 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -1,39 +1,37 @@
 .catalog-list {
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px 0 42px;
-  .catalog-title {
-	@extend .heading-1;
-	color: $blue;
-	margin:0 0 12px 18px;
-  }
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0 10px 0 42px;
+    .catalog-title {
+        @extend .heading-1;
+        color: $blue;
+        margin: 0 0 12px 18px;
+    }
 
-  .catalog-items {
-	display: flex;
-	flex-wrap: wrap;
-	@import "tile";
-	@import "createItemTile";
-	@import "catalogTile";
-	@import "vendorTile";
-	@import "vlmTile";
-	&:after {
-	  content: " ";
-	  height: 250px;
-	  display: block;
-	  width: 100%;
-	}
-	.venodor-tile-btn {
-		border: 1px solid $light-gray;
-		color: $black;
-		line-height: 20px;
-		&:hover {
-				background-color: $light-gray;
-		}
-	}
-  }
-
-  // Bottom spacing - cross browser solution
+    .catalog-items {
+        display: flex;
+        flex-wrap: wrap;
+        @import 'tile';
+        @import 'createItemTile';
+        @import 'catalogTile';
+        @import 'vendorTile';
+        &:after {
+            content: ' ';
+            height: 250px;
+            display: block;
+            width: 100%;
+        }
+        .venodor-tile-btn {
+            border: 1px solid $light-gray;
+            color: $black;
+            line-height: 20px;
+            &:hover {
+                background-color: $light-gray;
+            }
+        }
+    }
 
+    // Bottom spacing - cross browser solution
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 612ec495cd..a2c7997266 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,147 +1,144 @@
 .catalog-tile {
-  &:hover {
-	box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-	border: 1px solid $light-gray;
-  }
-  .catalog-tile-top {
-	position: relative;
-	flex: 1;
-	display: flex;
-	padding-top: 29px;
-	padding-left: 10px;
-	align-items: flex-start;
-	flex-direction: column;
-	.catalog-tile-content {
-	  margin-top: auto;
-	  width: 180px;
-	}
-
-	.catalog-tile-type {
-	  display: block;
-	  margin-top: -25px;
-	  font-size: $heading-font-5;
-	  &.license-model-type {
-		color: $purple;
-	  }
-	  &.software-product-type {
-		color: $blue;
-	  }
-	}
-	.catalog-tile-entity-details {
-	  margin-top: 20px;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		flex: 0.8;
-	  .catalog-tile-version-info {
-		display: flex;
-		justify-content: space-between;
-
-		.catalog-tile-item-version {
-		  @extend .body-2;
-		  line-height: 6px;
-		}
-	  }
-	  .catalog-tile-vendor-name {
-		@extend .body-3;
-		flex: 0.4;
-		align-self: baseline;
-		color: $gray;
-		line-height: 10px;
-		&:first-letter {
-      text-transform: capitalize;
+    &:hover {
+        box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+        border: 1px solid $light-gray;
     }
-		@include ellipsis(auto, inline-block, 178px);
-	  }
-
-	}
-	.catalog-tile-item-name {
-	  @extend .heading-5-semibold;
-	  color: $black;
-	  @include ellipsis(auto, inline-block, 175px);
-		line-height: inherit;
-		&:first-letter {
-			text-transform: capitalize;
-		}
-	}
-  }
-  .catalog-tile-icon {
+    .catalog-tile-top {
+        position: relative;
+        flex: 1;
+        display: flex;
+        padding-top: 29px;
+        padding-left: 10px;
+        align-items: flex-start;
+        flex-direction: column;
+        .catalog-tile-content {
+            margin-top: auto;
+            width: 180px;
+        }
 
-	width: 58px;
-	height: 58px;
-	text-align: center;
-	justify-content: center;
-	display: flex;
+        .catalog-tile-type {
+            display: block;
+            margin-top: -25px;
+            font-size: $heading-font-5;
+            &.license-model-type {
+                color: $purple;
+            }
+            &.software-product-type {
+                color: $blue;
+            }
+        }
+        .catalog-tile-entity-details {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            flex: 0.8;
+            .catalog-tile-version-info {
+                display: flex;
+                justify-content: space-between;
 
-	.icon {
-	  align-self: center;
-	  height: 58px;
-	  width: 58px;
-	  margin-left: 122px;
-	  background-repeat: no-repeat;
-	  .svg-icon {
-		&.__vendor {
-			fill: $dark-gray;
-			&:hover {
-			  fill: $dark-gray;
-			}
-		  margin-top: 22px;
-		}
-		&.__vsp {
-			fill: $light-blue;
-		  }
-		  margin-top: 18px;
-		  margin-left: 3px;
-		&.__vlm {
-		  margin-top: 18px;
-			fill: $purple;
-		}
-	  }
-	}
-  }
-  .catalog-tile-content {
-	border-top: 1px solid $background-gray;
-	padding-top: 5px;
-	display: flex;
-	justify-content: space-between;
-	margin-top: 2px;
-	padding-bottom: 3px;
-	@extend .body-2-semibold;
-	.svg-icon {
-	  &.__plus {
-		  width: 20px;
-		  height: 20px;
-		  fill: $blue;
-	  }
-	}
-	.catalog-tile-item-details {
-	  overflow: hidden;
-	}
+                .catalog-tile-item-version {
+                    @extend .body-2;
+                    line-height: 6px;
+                }
+            }
+            .catalog-tile-vendor-name {
+                @extend .body-3;
+                flex: 0.4;
+                align-self: baseline;
+                color: $gray;
+                line-height: 10px;
+                &:first-letter {
+                    text-transform: capitalize;
+                }
+                @include ellipsis(auto, inline-block, 178px);
+            }
+        }
+        .catalog-tile-item-name {
+            @extend .heading-5-semibold;
+            color: $black;
+            @include ellipsis(auto, inline-block, 175px);
+            line-height: inherit;
+            &:first-letter {
+                text-transform: capitalize;
+            }
+        }
+    }
+    .catalog-tile-icon {
+        width: 58px;
+        height: 58px;
+        text-align: center;
+        justify-content: center;
+        display: flex;
 
-	.catalog-tile-add-new-vsp {
-	  color: $blue;
-		.svg-icon {
-			&.__plus {
-				width: 20px;
-				height: 20px;
+        .icon {
+            align-self: center;
+            height: 58px;
+            width: 58px;
+            margin-left: 122px;
+            background-repeat: no-repeat;
+            .svg-icon {
+                &.__vendor {
+                    fill: $dark-gray;
+                    &:hover {
+                        fill: $dark-gray;
+                    }
+                    margin-top: 22px;
+                }
+                &.__vsp {
+                    fill: $light-blue;
+                }
+                margin-top: 18px;
+                margin-left: 3px;
+                &.__vlm {
+                    margin-top: 18px;
+                    fill: $purple;
+                }
+            }
+        }
+    }
+    .catalog-tile-content {
+        border-top: 1px solid $background-gray;
+        padding-top: 5px;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 2px;
+        padding-bottom: 3px;
+        @extend .body-2-semibold;
+        .svg-icon {
+            &.__plus {
+                width: 20px;
+                height: 20px;
+                fill: $blue;
+            }
+        }
+        .catalog-tile-item-details {
+            overflow: hidden;
+        }
 
-			}
-		}
-	  margin-left: 40px;
-	}
-	.catalog-tile-locking-user-name {
-	  @extend .body-2;
-	  @include ellipsis(auto, inline-block, 180px);
-	}
-	.catalog-tile-check-in-status {
-	  .svg-icon {
-		&.__locked {
-			fill: $gray;
-		}
-		&.__unlocked {
-			fill: $gray;
-		}
-	  }
-	}
-  }
+        .catalog-tile-add-new-vsp {
+            color: $blue;
+            .svg-icon {
+                &.__plus {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            margin-left: 40px;
+        }
+        .catalog-tile-locking-user-name {
+            @extend .body-2;
+            @include ellipsis(auto, inline-block, 180px);
+        }
+        .catalog-tile-check-in-status {
+            .svg-icon {
+                &.__locked {
+                    fill: $gray;
+                }
+                &.__unlocked {
+                    fill: $gray;
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index d17dcdd685..9838e65b10 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -1,73 +1,77 @@
 .create-catalog-item-wrapper {
-  width: 204px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  margin: 9px;
+    width: 204px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    margin: 9px;
 
-  .tile.create-catalog-item {
-	margin: 9px 0 9px 0;
-	display: flex;
-	background-color: $white;
-	&:first-child{margin-top: 0;}
-	&:last-child{margin-bottom: 0;}
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	&.disabled {
-	  color: $gray;
-	  .create-item-plus-icon {
-		fill: $gray;
-	  }
-	}
-	&:hover {
-		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+    .tile.create-catalog-item {
+        margin: 9px 0 9px 0;
+        display: flex;
+        background-color: $white;
+        &:first-child {
+            margin-top: 0;
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        &.disabled {
+            color: $gray;
+            .create-item-plus-icon {
+                fill: $gray;
+            }
+        }
+        &:hover {
+            box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
 
-		border: 1px solid $light-gray;
-	}
-	&:only-child {
-	  text-align: center;
-	  flex-direction: column;
-	  justify-content: center;
-	  .create-item-plus-icon {
-		margin: 0 0 15px 0;
-	  }
-	  .create-item-text {
-		@extend .heading-4-semibold;
-	  }
-	}
-	.create-item-plus-icon{
-		margin: -5px 12px 0 0;
-		height: 19px;
-		width: 19px;
-		.svg-icon {
-			&.__plus {
-				width: 19px;
-				height: 19px;
-			}
-		}
-	}
-	&.vlm-type {
-	  .create-item-text {
-		color: $purple;
-	  }
+            border: 1px solid $light-gray;
+        }
+        &:only-child {
+            text-align: center;
+            flex-direction: column;
+            justify-content: center;
+            .create-item-plus-icon {
+                margin: 0 0 15px 0;
+            }
+            .create-item-text {
+                @extend .heading-4-semibold;
+            }
+        }
+        .create-item-plus-icon {
+            margin: -5px 12px 0 0;
+            height: 19px;
+            width: 19px;
+            .svg-icon {
+                &.__plus {
+                    width: 19px;
+                    height: 19px;
+                }
+            }
+        }
+        &.vlm-type {
+            .create-item-text {
+                color: $purple;
+            }
 
-	  .create-item-plus-icon {
-		fill: $purple;
-	  }
-	}
-	&.vsp-type {
-	  .create-item-text {
-		color: $blue;
-	  }
+            .create-item-plus-icon {
+                fill: $purple;
+            }
+        }
+        &.vsp-type {
+            .create-item-text {
+                color: $blue;
+            }
 
-	  .create-item-plus-icon {
-		fill: $blue;
-	  }
-	}
-	.create-item-text {
-	  width: 140px;
-	  @extend .heading-5-semibold;
-	}
-  }
+            .create-item-plus-icon {
+                fill: $blue;
+            }
+        }
+        .create-item-text {
+            width: 140px;
+            @extend .heading-5-semibold;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index f97641cbe3..5f8446b9ff 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -1,32 +1,32 @@
 .onboard-header {
-  padding-top: 8px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  background-color: $tlv-light-gray;
-  margin-bottom: 2px;
-  padding-left: 60px;
-  padding-right: 40px;
-  @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
-  .expandable-input-top {
-	margin-right: 20px;
-	margin-left: auto;
-  }
-  .onboard-header-tabs {
-	display: flex;
-	flex-direction: row;
-	.onboard-header-tab {
-	  @extend .body-1-semibold;
-	  margin-right: 40px;
-	  cursor: pointer;
-	  display: flex;
-	  padding-bottom: 5px;
-	  align-items: flex-end;
-	  &.active {
-		color: $blue;
-		padding-bottom: 2px;
-		border-bottom: 3px solid $blue;
-	  }
-	}
-  }
+    padding-top: 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    background-color: $tlv-light-gray;
+    margin-bottom: 2px;
+    padding-left: 60px;
+    padding-right: 40px;
+    @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+    .expandable-input-top {
+        margin-right: 20px;
+        margin-left: auto;
+    }
+    .onboard-header-tabs {
+        display: flex;
+        flex-direction: row;
+        .onboard-header-tab {
+            @extend .body-1-semibold;
+            margin-right: 40px;
+            cursor: pointer;
+            display: flex;
+            padding-bottom: 5px;
+            align-items: flex-end;
+            &.active {
+                color: $blue;
+                padding-bottom: 2px;
+                border-bottom: 3px solid $blue;
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
index 217098fb97..fa513fb44d 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -1,14 +1,14 @@
 .tile {
-  background-color: $white;
-  margin: 9px;
-  width: 204px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border: 1px solid $tlv-light-gray;
-  @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
-  &:active {
-	border: 1px solid $light-blue;
-  }
+    background-color: $white;
+    margin: 9px;
+    width: 204px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    border: 1px solid $tlv-light-gray;
+    @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+    &:active {
+        border: 1px solid $light-blue;
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
index f1af28a0a0..a741764727 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -1,21 +1,21 @@
 .vendor-page-header {
-  display: flex;
-  align-items: center;
-  margin-top: 34px;
-  margin-left: 9px;
-  margin-bottom: 29px;
-  .vendor-name {
-	@extend .heading-1;
-	color: $blue;
-	margin-left: 20px;
-	text-transform: uppercase;
-  }
-  .svg-icon-wrapper {
-	padding: 5px 18px 5px 0;
-	.svg-icon.back {
-	  height: 25px;
-	  width: 25px;
-	  fill: $blue;
-	}
-  }
+    display: flex;
+    align-items: center;
+    margin-top: 34px;
+    margin-left: 9px;
+    margin-bottom: 29px;
+    .vendor-name {
+        @extend .heading-1;
+        color: $blue;
+        margin-left: 20px;
+        text-transform: uppercase;
+    }
+    .svg-icon-wrapper {
+        padding: 5px 18px 5px 0;
+        .svg-icon.back {
+            height: 25px;
+            width: 25px;
+            fill: $blue;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index d490fd6e1c..63fb236ec3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,91 +1,91 @@
 @mixin flipOverlayDirection($itemsInRow) {
-  &:nth-child(#{$itemsInRow}n) {
-	.vsp-overlay-wrapper {
-	  right: 74%;
-	  left: inherit;
-	  .vsp-overlay-arrow {
-		border-right-color: transparent;
-		border-left-color: $tlv-light-gray;
-		border-right-width: 2px;
-		border-left-width: 6px;
-		left: 100%;
-		&:after {
-		  border-left-color: $white;
-		  border-right-color: transparent;
-		  left: -11px;
-		}
-	  }
-	}
-  }
+    &:nth-child(#{$itemsInRow}n) {
+        .vsp-overlay-wrapper {
+            right: 74%;
+            left: inherit;
+            .vsp-overlay-arrow {
+                border-right-color: transparent;
+                border-left-color: $tlv-light-gray;
+                border-right-width: 2px;
+                border-left-width: 6px;
+                left: 100%;
+                &:after {
+                    border-left-color: $white;
+                    border-right-color: transparent;
+                    left: -11px;
+                }
+            }
+        }
+    }
 }
 
 .catalog-tile.vendor-type {
-  position: relative;
-  .catalog-tile-top {
-	.catalog-tile-item-name {
-	  margin-top: 21px;
-		line-height: inherit;
-		&:first-letter {
-      text-transform: capitalize;
-    }	
-	}
-	.catalog-tile-vsp-count {
-	  @extend .body-3-semibold;
-	  margin-top: 8px;
-	  margin-left: 54px;
-	  margin-bottom: 9px;
-	  color: $dark-gray;
-	  border: 1px solid $dark-gray;
-	  padding: 0 15px 0 15px;
-	  border-radius: 15px;
+    position: relative;
+    .catalog-tile-top {
+        .catalog-tile-item-name {
+            margin-top: 21px;
+            line-height: inherit;
+            &:first-letter {
+                text-transform: capitalize;
+            }
+        }
+        .catalog-tile-vsp-count {
+            @extend .body-3-semibold;
+            margin-top: 8px;
+            margin-left: 54px;
+            margin-bottom: 9px;
+            color: $dark-gray;
+            border: 1px solid $dark-gray;
+            padding: 0 15px 0 15px;
+            border-radius: 15px;
 
-	  &.clickable {
-		&:hover {
-		  background-color: #eceff3;
-		  color: $dark-gray;
-		}
-	  }
-	  &.active {
-		background-color: $white;
-		color: $dark-gray;
-	  }
-	}
-  }
+            &.clickable {
+                &:hover {
+                    background-color: #eceff3;
+                    color: $dark-gray;
+                }
+            }
+            &.active {
+                background-color: $white;
+                color: $dark-gray;
+            }
+        }
+    }
 
-  .catalog-tile-content {
-	flex-basis: auto;
-	max-height: 31px;
-	height: 31px;
-	text-align: center;
-	color: $blue;
-	display: block;
-	background-color: $white;
-	margin-bottom: 7px;
-	padding-bottom: 0px;
-	.create-new-vsp-button {
-	  margin-top: 1px;
-	}
-	&:hover {
-	  color: $dark-blue;
-	  .svg-icon.plus {
-		fill: $dark-blue;
-	  }
-	}
-	&.disabled {
-	  cursor: default;
-	}
-  }
-  @media (min-width: 1900px) {
-	@include flipOverlayDirection($itemsInRow: 8);
-  }
-  @media (min-width: 1586px) and (max-width: 1899px) {
-	@include flipOverlayDirection($itemsInRow: 7);
-  }
-  @media (min-width: 1368px) and (max-width: 1585px) {
-	@include flipOverlayDirection($itemsInRow: 6);
-  }
-  @media (max-width: 1367px) {
-	@include flipOverlayDirection($itemsInRow: 5);
-  }
-  @import "vspOverlay";
+    .catalog-tile-content {
+        flex-basis: auto;
+        max-height: 31px;
+        height: 31px;
+        text-align: center;
+        color: $blue;
+        display: block;
+        background-color: $white;
+        margin-bottom: 7px;
+        padding-bottom: 0px;
+        .create-new-vsp-button {
+            margin-top: 1px;
+        }
+        &:hover {
+            color: $dark-blue;
+            .svg-icon.plus {
+                fill: $dark-blue;
+            }
+        }
+        &.disabled {
+            cursor: default;
+        }
+    }
+    @media (min-width: 1900px) {
+        @include flipOverlayDirection($itemsInRow: 8);
+    }
+    @media (min-width: 1586px) and (max-width: 1899px) {
+        @include flipOverlayDirection($itemsInRow: 7);
+    }
+    @media (min-width: 1368px) and (max-width: 1585px) {
+        @include flipOverlayDirection($itemsInRow: 6);
+    }
+    @media (max-width: 1367px) {
+        @include flipOverlayDirection($itemsInRow: 5);
+    }
+    @import 'vspOverlay';
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
deleted file mode 100644
index 721a4f3f22..0000000000
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.catalog-tile.license-model-type {
-  .catalog-tile-top {
-    &:hover {
-      //background-color: $purple;
-      //color: $white;
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index e0b72bf9ff..e2617b8b04 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -1,74 +1,73 @@
-.vsp-overlay-wrapper{
-  display:flex;
-  align-items: center;
-  position:absolute;
-  left: 68%;
-  top: 14%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 100;
-  .vsp-overlay-list {
-	padding: 0 20px;
-  }
-  .vsp-overlay-arrow {
-	border-style: solid;
-	position: relative;
-	bottom: -18px;
-	border-width: 6px;
-	border-left-width: 2px;
-	border-color: transparent;
-	border-right-color: $light-gray;
-	&:after {
-	  position: absolute;
-	  border-style: solid;
-	  bottom: -10px;
-	  left: -9px;
-	  border-width: 10px;
-	  border-color: transparent;
-	  border-right-color: $white;
-	  content:' ';
-	}
-  }
-  .vsp-overlay {
-	pointer-events: all;
-	width: 205px;
-	cursor: default;
-	background-color: $white;
-	@include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
-	border-radius: 6px;
-	padding: 0 0 10px 0;
-	display: flex;
-	flex-direction: column;
-	margin: 10px 0 10px 0;
-	.vsp-overlay-title {
-	  @extend .heading-5-semibold;
-	  margin-bottom: 15px;
-	  padding: 10px 20px 10px 20px;
-	  background: $highlight-gray;
-		color: $text-black;
-	  text-transform: uppercase;
-	  border-radius: 6px 6px 0 0;
-	}
-	.vsp-overlay-detail{
-	  @extend .body-2;
-	  &:hover {
-		color: $blue;
-	  }
-	  text-transform: none;
-	  @include ellipsis(auto, block);
-	  border-bottom: 1px solid $tlv-light-gray;
-	  cursor: pointer;
-	  padding: 5px 0 5px 0;
-	  &:last-child {
-		border-bottom: none;
-	  }
-	}
-	.vsp-overlay-see-more{
-	  color: $blue;
-	  cursor: pointer;
-	  margin-top: 12px;
-	  align-self:center;
-	}
-
-  }
+.vsp-overlay-wrapper {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 68%;
+    top: 14%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 100;
+    .vsp-overlay-list {
+        padding: 0 20px;
+    }
+    .vsp-overlay-arrow {
+        border-style: solid;
+        position: relative;
+        bottom: -18px;
+        border-width: 6px;
+        border-left-width: 2px;
+        border-color: transparent;
+        border-right-color: $light-gray;
+        &:after {
+            position: absolute;
+            border-style: solid;
+            bottom: -10px;
+            left: -9px;
+            border-width: 10px;
+            border-color: transparent;
+            border-right-color: $white;
+            content: ' ';
+        }
+    }
+    .vsp-overlay {
+        pointer-events: all;
+        width: 205px;
+        cursor: default;
+        background-color: $white;
+        @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+        border-radius: 6px;
+        padding: 0 0 10px 0;
+        display: flex;
+        flex-direction: column;
+        margin: 10px 0 10px 0;
+        .vsp-overlay-title {
+            @extend .heading-5-semibold;
+            margin-bottom: 15px;
+            padding: 10px 20px 10px 20px;
+            background: $highlight-gray;
+            color: $text-black;
+            text-transform: uppercase;
+            border-radius: 6px 6px 0 0;
+        }
+        .vsp-overlay-detail {
+            @extend .body-2;
+            &:hover {
+                color: $blue;
+            }
+            text-transform: none;
+            @include ellipsis(auto, block);
+            border-bottom: 1px solid $tlv-light-gray;
+            cursor: pointer;
+            padding: 5px 0 5px 0;
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+        .vsp-overlay-see-more {
+            color: $blue;
+            cursor: pointer;
+            margin-top: 12px;
+            align-self: center;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index c38809cd07..da0c8b704f 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -1,234 +1,157 @@
-.dox-ui {
-  @import "bootstrap";
-  @import "~react-select/dist/react-select.min.css";
-  @import "~react-datepicker/dist/react-datepicker.min.css";
-
-  @import "common";
-  @import "components";
-  @import "modules";
-
-  &.dox-ui-punch-out {
-    background-color: $content-background-color;
-    &.dox-ui-punch-out-full-page {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      overflow-y: auto;
-    }
-  }
-}
-
-/* Out of namespace context for datepicker */
-div[data-reactroot].customized-date-picker-calendar {
-  @import "common/variables";
-  @import "common/typography";
-  border-color: $light-gray;
-  margin-top: -8px;
-	color: $black;
-  .react-datepicker__triangle {
-      margin-top: 0px;
-  }
-  .react-datepicker__navigation--previous::before, .react-datepicker__navigation--next::before {
-    width: 8px;
-    height: 8px;
-    display: inline-block;
-    position: absolute;
-    top: -4px;
-  }
-  .react-datepicker__navigation--previous::before {
-    left: 0;
-    content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
-  }
-  .react-datepicker__navigation--next::before {
-    right: 0;
-    content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
-  }
-
-  .react-datepicker__navigation--previous, .react-datepicker__navigation--next {
-      border: none;
-  }
-
-
-  .react-datepicker__month-container {
-		.react-datepicker__header {
-			background-color: $background-gray;
-      border-bottom: none;
-      .react-datepicker__current-month {
-        @extend .body-1-semibold;
-        background-color: $background-gray;
-        margin-bottom: 10px;
-      }
-      .react-datepicker__day-names {
-        @extend .body-1;
-        background-color: $white;
-      }
-		}
-    .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
-      @extend .body-1;
-      background-color: $blue;
-			color: $white;
-    }
-    .react-datepicker__day {
-			border-radius: 0px;
-			margin: 0;
-			flex: 1;
-      @extend .body-1;
-    }
-
-		.react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
-			background-color: $tlv-hover;
-			color: $black;
-			&.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end  {
-				background-color: $blue;
-				color: $white;
-			}
-			&.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
-				background-color: lighten($blue, 40%);
-				color: $black;
-			}
-			&.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
-			&.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
-			&.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
-				background-color: $blue;
-				color: $white;
-			}
-		}
-
-		.react-datepicker__week {
-			display: flex;
+.dox-ui,
+.onap-sdc-portal {
+    @import 'bootstrap';
+    @import '~react-select/dist/react-select.min.css';
+    @import '~react-datepicker/dist/react-datepicker.min.css';
+
+    @import 'common';
+    @import 'components';
+    @import 'modules';
+
+    .sdc-alert__header,
+    .sdc-error__header,
+    .sdc-info__header {
+        box-sizing: content-box;
+    }
+    &.dox-ui-punch-out {
+        background-color: $content-background-color;
+        &.dox-ui-punch-out-full-page {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            overflow-y: auto;
+        }
     }
-	}
 }
 
 /* Out of namespace context for tooltips */
-div[data-reactroot].tooltip {
-  @import "common/variables";
-  @import "common/typography";
-
-  &.in {
-  	opacity: 1;
-  }
-  &.validation-error-message {
+div[data-onboardingroot].tooltip {
+    @import 'common/variables';
+    @import 'common/typography';
+
+    &.in {
+        opacity: 1;
+    }
+    &.validation-error-message {
+        &.bottom {
+            .tooltip-arrow {
+                border-bottom-color: $red !important;
+            }
+        }
+        &.left {
+            .tooltip-arrow {
+                border-left-color: $red !important;
+            }
+        }
+        &.right {
+            .tooltip-arrow {
+                border-right-color: $red !important;
+            }
+        }
+        &.top {
+            .tooltip-arrow {
+                border-top-color: $red !important;
+            }
+        }
+    }
     &.bottom {
-      .tooltip-arrow {
-      border-bottom-color: $red !important;
-      }
+        .tooltip-arrow {
+            border-bottom-color: $dark-gray !important;
+        }
     }
-    &.left {
-      .tooltip-arrow {
-        border-left-color: $red !important;
-      }
+    &.top {
+        .tooltip-arrow {
+            border-top-color: $dark-gray !important;
+        }
     }
     &.right {
-      .tooltip-arrow {
-        border-right-color: $red !important;
-      }
+        .tooltip-arrow {
+            border-right-color: $dark-gray !important;
+        }
     }
-    &.top {
-      .tooltip-arrow {
-        border-top-color: $red !important;
-      }
-    }
-  }
-  &.bottom {
-    .tooltip-arrow {
-      border-bottom-color: $dark-gray !important;
-    }
-  }
-  &.top {
-    .tooltip-arrow {
-      border-top-color: $dark-gray !important;
-    }
-  }
-  &.right {
-    .tooltip-arrow {
-      border-right-color: $dark-gray !important;
-    }
-  }
-  &.left {
-    .tooltip-arrow {
-      border-left-color: $dark-gray !important;
-    }
-  }
-  .tooltip-inner {
-    @extend .body-1;
-    max-width: 100%;
-    background-color: $dark-gray;
-    padding: 6px 9px;
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-
-  // activity log tooltip
-  &.activity-log-message-tooltip {
-	  @include base-font-regular;
-    font-size: $body-font-2;
-    .message-block {
-      text-align: left;
-      padding: 3px 12px;
-    }
-  }
-  // manage permisions modal
-  &.manage-permissions-owner-tooltip {
-    .tooltip-inner {
-      width: 400px;
+    &.left {
+        .tooltip-arrow {
+            border-left-color: $dark-gray !important;
+        }
     }
-  }
-  // WS/Catalog Tile
-  &.tile-super-info {
     .tooltip-inner {
-      font-size: $body-font-3;
-    }
-  }
-  //dependency table error tooltip
-  &.select-action-table-error-tooltip{
-    @include base-font-regular;
-    margin-right: 5px;
-    font-size: $body-font-2;
-    .message-block {
-      text-align: left;
-      padding: 3px 12px;
-    }
-    .tooltip-arrow {
-           border-bottom-color: $red !important;
-	  }
-
-    .tooltip-inner {
-      background-color: $red;
-      padding: 6px 8px;
-      font-size: $body-font-2;
-    }
-  }
-
-  // for read-only mode, vendor description in VLM overview
-  &.vendor-description-tooltip {
-    .tooltip-inner {
-      max-width: 600px;
+        @extend .body-1;
+        max-width: 100%;
+        background-color: $dark-gray;
+        padding: 6px 9px;
+        &:first-letter {
+            text-transform: capitalize;
+        }
+    }
+
+    // activity log tooltip
+    &.activity-log-message-tooltip {
+        @include base-font-regular;
+        font-size: $body-font-2;
+        .message-block {
+            text-align: left;
+            padding: 3px 12px;
+        }
+    }
+    // manage permisions modal
+    &.manage-permissions-owner-tooltip {
+        .tooltip-inner {
+            width: 400px;
+        }
+    }
+    // WS/Catalog Tile
+    &.tile-super-info {
+        .tooltip-inner {
+            font-size: $body-font-3;
+        }
+    }
+    //dependency table error tooltip
+    &.select-action-table-error-tooltip {
+        @include base-font-regular;
+        margin-right: 5px;
+        font-size: $body-font-2;
+        .message-block {
+            text-align: left;
+            padding: 3px 12px;
+        }
+        .tooltip-arrow {
+            border-bottom-color: $red !important;
+        }
+
+        .tooltip-inner {
+            background-color: $red;
+            padding: 6px 8px;
+            font-size: $body-font-2;
+        }
+    }
+
+    // for read-only mode, vendor description in VLM overview
+    &.vendor-description-tooltip {
+        .tooltip-inner {
+            max-width: 600px;
+        }
     }
-  }
 }
 
 /* Out of namespace context for notifications */
 .onboarding-notifications-container {
-  position: absolute;
-  &.position-top-right {
-    right: 30px;
-    top: 50px;
-  }
+    position: absolute;
+    &.position-top-right {
+        right: 30px;
+        top: 50px;
+    }
 }
 
-
 .onboarding-loader {
-  .onboarding-loader-backdrop {
-    @import "common/variables";
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    background-color: $transparent-black;
-  }
+    .onboarding-loader-backdrop {
+        @import 'common/variables';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        background-color: $transparent-black;
+    }
 }
diff --git a/openecomp-ui/resources/scss/style.scss b/openecomp-ui/resources/scss/style.scss
index ac020219ad..ba22cf6bd8 100644
--- a/openecomp-ui/resources/scss/style.scss
+++ b/openecomp-ui/resources/scss/style.scss
@@ -1,3 +1,3 @@
-@import "common";
-@import "components";
-@import "modules";
+@import 'common';
+@import 'components';
+@import 'modules';