Updating versions of Sparky FE files

Updating versions of Sparky FE files as previous ones were out-dated

Issue-ID: AAI-543
Change-Id: Idc7d09e0efabaa5ef82db126cf7563fc8370f4f9
Signed-off-by: Shawn Severin <shawn.severin@amdocs.com>

47 files changed, 1011 insertions, 626 deletions

diff --git a/resources/scss/_common.scss b/resources/scss/_common.scss
index 2444892..fa58b3e 100644
--- a/resources/scss/_common.scss
+++ b/resources/scss/_common.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 @import "common/variables";
 @import "common/typography";
 @import "common/base";
diff --git a/resources/scss/_components.scss b/resources/scss/_components.scss
index e76e3f2..882e1cc 100644
--- a/resources/scss/_components.scss
+++ b/resources/scss/_components.scss
@@ -21,22 +21,16 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
-@import "components/punchOut";
-@import "components/buttons";
 @import "components/validationForm";
 @import "components/slidePanel";
 @import "components/toggleInput";
 @import "components/notifications";
-@import "components/inputOptions";
-@import "components/progressBar";
 @import "components/dropdownMultiSelect";
 @import "components/inlineMessage";
-@import "components/dateRange";
-@import "components/dateRangeSelector";
 @import "components/toggleButtonGroup";
 @import "components/titledComponent";
 @import "components/containerPanel";
+@import "components/filterBar";
 
 %noselect {
   -webkit-touch-callout: none;
@@ -69,12 +63,13 @@
     flex: 1 1;
     margin: 0;
   }
-  .search-icon {
+
+.search-icon {
     position: relative;
     left: -20px;
     align-self: center;
     width: 0;
-    color: $dark-gray;
+    color: $background-color2;
   }
 }
 
diff --git a/resources/scss/_modules.scss b/resources/scss/_modules.scss
index d902d53..d2df043 100644
--- a/resources/scss/_modules.scss
+++ b/resources/scss/_modules.scss
@@ -21,12 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 @import "header/layout";
-@import "audit-table/layout";
 @import "visualizations/layout";
 @import "tier-support/search";
 @import "tier-support/selectedNodeDetails";
 @import "tier-support/splitPane";
 @import "d3/_forceDirectedGraph.scss";
 @import "d3/_aggregationMap.scss";
+@import "setAttribute/editAttributeform.scss";
+@import "inventory/inventory.scss";
+@import "vnfSearch/vnfSearch.scss";
diff --git a/resources/scss/audit-table/_layout.scss b/resources/scss/audit-table/_layout.scss
deleted file mode 100644
index ce92c17..0000000
--- a/resources/scss/audit-table/_layout.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *       http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-.audit-table {
-  margin: 10px 20px 0px 20px;
-}
-
-.audit-table td {
-  font-size: 12px;
-}
-
-.notification {
-  font-size: 15px;
-}
-
-.audit-pagination {
-  text-align: center;
-}
-
-.table-column-json-blob{
-  white-space: pre;
-  width: 20%;
-}
diff --git a/resources/scss/bootstrap-cust/_buttons.scss b/resources/scss/bootstrap-cust/_buttons.scss
index 52bcb2e..92382aa 100644
--- a/resources/scss/bootstrap-cust/_buttons.scss
+++ b/resources/scss/bootstrap-cust/_buttons.scss
@@ -3,5 +3,5 @@
 }
 
 .btn-info {
-  @include button-variant($text-black, $tlv-gray, $light-gray);
+  @include button-variant($text-color1, $background-color12, $text-color7);
 }
diff --git a/resources/scss/bootstrap-cust/_forms.scss b/resources/scss/bootstrap-cust/_forms.scss
index cb19964..4353521 100644
--- a/resources/scss/bootstrap-cust/_forms.scss
+++ b/resources/scss/bootstrap-cust/_forms.scss
@@ -5,7 +5,7 @@
   &.required {
     label:before {
       content: "*";
-      color: $red;
+      color: $text-color10;
     }
   }
 }
@@ -17,7 +17,7 @@
     @include box-shadow(none);
   }
   &:hover {
-    border-color: $gray;
+    border-color: $neutral-gray;
   }
 }
 
@@ -47,7 +47,7 @@ input[type="radio"], input[type="checkbox"] {
     left: -1px;
     bottom: -1px;
     background-color: $white;
-    border: 1px solid $blue;
+    border: 1px solid $border-color3;
   }
 }
 
@@ -69,7 +69,7 @@ input[type="radio"], input[type="checkbox"] {
 
 input[type=radio]:checked:before {
   content: "\2022";
-  color: $blue;
+  color: $background-color5;
   font-size: 32px;
   text-align: center;
   line-height: 16px;
@@ -78,7 +78,7 @@ input[type=radio]:checked:before {
 input[type=checkbox]:checked:before {
   content: "\2713";
   font-size: 12px;
-  color: $blue;
+  color: $background-color5;
   text-align: center;
   line-height: 16px;
 }
diff --git a/resources/scss/bootstrap-cust/_modals.scss b/resources/scss/bootstrap-cust/_modals.scss
index 6bc6e46..e074d61 100644
--- a/resources/scss/bootstrap-cust/_modals.scss
+++ b/resources/scss/bootstrap-cust/_modals.scss
@@ -1,6 +1,6 @@
 .modal-content {
   .modal-header {
-    border-top: 3px solid $blue;
+    border-top: 3px solid $border-color3;
     .modal-title {
       @extend .heading-2;
     }
@@ -13,6 +13,6 @@
   .modal-footer {
     padding: 15px;
     border-top: 0;
-    background-color: $tlv-gray;
+    background-color: $background-color12;
   }
 }
diff --git a/resources/scss/bootstrap-cust/_navs.scss b/resources/scss/bootstrap-cust/_navs.scss
index 7b9cff9..a00f3d1 100644
--- a/resources/scss/bootstrap-cust/_navs.scss
+++ b/resources/scss/bootstrap-cust/_navs.scss
@@ -7,14 +7,14 @@
 }
 
 .nav-tabs {
-  @include box-shadow(0px 2px 1px -1px $gray);
+  @include box-shadow(0px 2px 1px -1px $neutral-gray);
   padding: 0 28px;
 
   > li {
     @extend .body-1;
 
     > a {
-      color: $dark-gray;
+      color: $background-color2;
       text-transform: uppercase;
     }
 
@@ -23,7 +23,7 @@
       &:hover,
       &:focus {
         @extend .body-1-medium;
-        border-bottom: 3px solid $blue;
+        border-bottom: 3px solid $border-color3;
       }
     }
   }
diff --git a/resources/scss/bootstrap-cust/_scaffolding.scss b/resources/scss/bootstrap-cust/_scaffolding.scss
new file mode 100644
index 0000000..559216b
--- /dev/null
+++ b/resources/scss/bootstrap-cust/_scaffolding.scss
@@ -0,0 +1,154 @@
+//
+// Scaffolding
+// --------------------------------------------------
+
+// Reset the box-sizing
+//
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing
+* {
+  @include box-sizing(border-box);
+}
+
+*:before,
+*:after {
+  @include box-sizing(border-box);
+}
+
+// Body reset
+
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  font-family: $base-font-regular;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $text-color;
+  background-color: $body-bg;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+// Links
+
+a {
+  color: $link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+	color: $link-hover-color;
+	text-decoration: $link-hover-decoration;
+  }
+
+  &:focus {
+	@include tab-focus;
+  }
+}
+
+// Figures
+//
+// We reset this here because previously Normalize had no `figure` margins. This
+// ensures we don't break anyone's use of the element.
+
+figure {
+  margin: 0;
+}
+
+// Images
+
+img {
+  vertical-align: middle;
+}
+
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+  @include img-responsive;
+}
+
+// Rounded corners
+.img-rounded {
+  border-radius: $border-radius-large;
+}
+
+// Image thumbnails
+//
+// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  line-height: $line-height-base;
+  background-color: $thumbnail-bg;
+  border: 1px solid $thumbnail-border;
+  border-radius: $thumbnail-border-radius;
+  @include transition(all .2s ease-in-out);
+
+  // Keep them at most 100% wide
+  @include img-responsive(inline-block);
+}
+
+// Perfect circle
+.img-circle {
+  border-radius: 50%; // set radius in percents
+}
+
+// Horizontal rules
+
+hr {
+  margin-top: $line-height-computed;
+  margin-bottom: $line-height-computed;
+  border: 0;
+  border-top: 1px solid $hr-border;
+}
+
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+	position: static;
+	width: auto;
+	height: auto;
+	margin: 0;
+	overflow: visible;
+	clip: auto;
+  }
+}
+
+// iOS "clickable elements" fix for role="button"
+//
+// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+// for traditionally non-focusable elements with role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+[role="button"] {
+  cursor: pointer;
+}
diff --git a/resources/scss/bootstrap-cust/_tables.scss b/resources/scss/bootstrap-cust/_tables.scss
index dc2e0c2..cf0288c 100644
--- a/resources/scss/bootstrap-cust/_tables.scss
+++ b/resources/scss/bootstrap-cust/_tables.scss
@@ -18,23 +18,32 @@
   > tbody + tbody {
 	border-top: none;
   }
+	.table {
+		-webkit-border-horizontal-spacing: 0px !important;
+		-webkit-border-vertical-spacing:0px !important;
+	}
 }
 
 .table-striped {
 	> tbody > tr:nth-of-type( odd ) {
-		background-color: $background-gray;
+		background-color: $background-color1;
 	}
 }
 
 .table-striped {
 	> tbody > tr:nth-of-type( even ) {
-		background-color: $gray;
+		background-color: $neutral-gray;
 	}
 }
 
 .table-hover {
 	> tbody > tr:hover {
-		background-color: $tlv-hover;
+		background-color: $background-color12;
 		cursor: pointer;
 	}
 }
+
+table {
+	-webkit-border-horizontal-spacing: 0px !important;
+	-webkit-border-vertical-spacing:0px !important;
+}
diff --git a/resources/scss/bootstrap-cust/_variables.scss b/resources/scss/bootstrap-cust/_variables.scss
index 1623e72..3a5de51 100644
--- a/resources/scss/bootstrap-cust/_variables.scss
+++ b/resources/scss/bootstrap-cust/_variables.scss
@@ -3,32 +3,34 @@
 //
 //## Gray and brand colors for use across Bootstrap.
 
-$gray-darker: $dark-gray;
-$gray-dark: $dark-gray;
-$gray: $gray;
-$gray-light: $light-gray;
-$gray-lighter: $light-gray;
+$gray-darker: $background-color2;
+$gray-dark: $background-color2;
+$gray: $background-color13;
+$gray-light: $text-color7;
+$gray-lighter: $text-color7;
 
-$brand-primary: $blue;
-$brand-success: $green;
-$brand-info: $light-gray;
-$brand-warning: $yellow;
-$brand-danger: $red;
+$brand-primary: $background-color5;
+$brand-success: $background-color11;
+$brand-info: $text-color7;
+$brand-warning: $text-color9;
+$brand-danger: $text-color10;
 
 
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
 
-$body-bg: $white;
-$text-color: $text-black;
-$link-color: $link-blue;
-$link-hover-color: $blue;
+$body-bg: $primary-background-color;
+$text-color: $text-color1;
+$link-color: $border-color11;
+$link-hover-color: $border-color3;
 
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
-
+// This variable never used. Maybe delete!!!!
+$font-family-sans-serif: omnes-regular, "Omnes-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
+//$font-family-base: $font-family-sans-serif !default;
 $font-size-base: $body-font-2;
 $font-size-large: $body-font-1;
 $font-size-small: $body-font-3;
@@ -53,10 +55,10 @@ $border-radius-small: 0;
 
 // $btn-font-weight: normal !default;
 $btn-default-color: $text-color;
-$btn-default-bg: $white;
-$btn-default-border: $light-gray;
+$btn-default-bg: $primary-background-color;
+$btn-default-border: $border-color5;
 
-$btn-success-color: $white;
+$btn-success-color: $primary-background-color;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius-base: 2px;
@@ -65,19 +67,19 @@ $btn-border-radius-small: 2px;
 
 //== Dropdowns
 //
-$dropdown-bg: $white;
-$dropdown-border: $link-blue;
-$dropdown-link-color: $text-black;
+$dropdown-bg: $primary-background-color;
+$dropdown-border: $background-color3;
+$dropdown-link-color: $text-color1;
 $dropdown-divider-bg: $gray;
 //** Hover color for dropdown links.
-$dropdown-link-hover-color: $black;
+$dropdown-link-hover-color: $text-color3;
 //** Hover background for dropdown links.
-$dropdown-link-hover-bg: $tlv-hover;
+$dropdown-link-hover-bg: $background-color12;
 
 //** Active dropdown menu item text color.
-$dropdown-link-active-color: $black;
+$dropdown-link-active-color: $text-color3;
 //** Active dropdown menu item background color.
-$dropdown-link-active-bg: $tlv-hover;
+$dropdown-link-active-bg: $background-color12;
 
 //== Forms
 //
@@ -85,16 +87,16 @@ $dropdown-link-active-bg: $tlv-hover;
 $form-group-margin-bottom: 24px;
 
 
-$input-bg: $white;
-$input-bg-disabled: $tlv-light-gray;
-$input-color: $dark-gray;
-$input-border: $light-gray;
-$input-border-focus: $dark-blue;
+$input-bg: $primary-background-color;
+$input-bg-disabled: $background-color4;
+$input-color:$text-color6;
+$input-border: $text-color7;
+$input-border-focus: $border-color4;
 
 //== Modals
 //
 //##
-$modal-content-bg: $white;
+$modal-content-bg: $primary-background-color;
 $modal-inner-padding: 0 15px;
 $modal-title-padding: 30px 25px 10px 25px;
 
@@ -102,7 +104,7 @@ $modal-title-padding: 30px 25px 10px 25px;
 //== Close
 //
 //##
-$close-color: $tlv-light-gray;
+$close-color: $background-color4;
 
 //== Navs
 //
@@ -116,11 +118,11 @@ $navbar-inverse-bg: $gray;
 $nav-tabs-border-color: transparent;
 $nav-tabs-link-hover-border-color: transparent;
 $nav-tabs-active-link-hover-bg: transparent;
-$nav-tabs-active-link-hover-color: $text-black;
+$nav-tabs-active-link-hover-color: $text-color1;
 $nav-tabs-active-link-hover-border-color: transparent;
 
 
 //== Popovers
 //
 //##
-$popover-bg: $background-gray;
+$popover-bg: $background-color1;
diff --git a/resources/scss/bootstrap.scss b/resources/scss/bootstrap.scss
index 19678b8..7751d1e 100644
--- a/resources/scss/bootstrap.scss
+++ b/resources/scss/bootstrap.scss
@@ -21,22 +21,26 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
-// DOX CORE
+// ONAP CORE
 @import "common/variables";
+
+// Import Typography Section 
 @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/normalize";
 //@import "bootstrap/print";
 //@import "bootstrap/glyphicons";
 
 // Core CSS
-@import "bootstrap/scaffolding";
+@import "bootstrap-cust/scaffolding";
 @import "bootstrap/type";
 @import "bootstrap/code";
 @import "bootstrap/grid";
diff --git a/resources/scss/bootstrap/_normalize.scss b/resources/scss/bootstrap/_normalize.scss
index 9dddf73..3794158 100644
--- a/resources/scss/bootstrap/_normalize.scss
+++ b/resources/scss/bootstrap/_normalize.scss
@@ -7,7 +7,7 @@
 //
 
 html {
-  font-family: sans-serif; // 1
+  font-family: $base-font-regular; // 1
   -ms-text-size-adjust: 100%; // 2
   -webkit-text-size-adjust: 100%; // 2
 }
diff --git a/resources/scss/bootstrap/_scaffolding.scss b/resources/scss/bootstrap/_scaffolding.scss
index 910afd5..559216b 100644
--- a/resources/scss/bootstrap/_scaffolding.scss
+++ b/resources/scss/bootstrap/_scaffolding.scss
@@ -24,7 +24,7 @@ html {
 }
 
 body {
-  font-family: $font-family-base;
+  font-family: $base-font-regular;
   font-size: $font-size-base;
   line-height: $line-height-base;
   color: $text-color;
diff --git a/resources/scss/bootstrap/_variables.scss b/resources/scss/bootstrap/_variables.scss
index 50b8781..8be9076 100644
--- a/resources/scss/bootstrap/_variables.scss
+++ b/resources/scss/bootstrap/_variables.scss
@@ -7,7 +7,7 @@ $bootstrap-sass-asset-helper: false !default;
 //
 //## Gray and brand colors for use across Bootstrap.
 
-$gray-base: #000 !default;
+$gray-base: $darkest !default;
 $gray-darker: lighten($gray-base, 13.5%) !default;
 // #222
 $gray-dark: lighten($gray-base, 20%) !default;
@@ -19,19 +19,19 @@ $gray-light: lighten($gray-base, 46.7%) !default;
 $gray-lighter: lighten($gray-base, 93.5%) !default;
 // #eee
 
-$brand-primary: darken(#428bca, 6.5%) !default;
+$brand-primary: darken($dark-blue, 6.5%) !default;
 // #337ab7
-$brand-success: #5cb85c !default;
-$brand-info: #5bc0de !default;
-$brand-warning: #f0ad4e !default;
-$brand-danger: #d9534f !default;
+$brand-success: $lime-green !default;
+$brand-info: $light-green !default;
+$brand-warning: $amber !default;
+$brand-danger: $red !default;
 
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-$body-bg: #fff !default;
+$body-bg: $white !default;
 //** Global text color on `<body>`.
 $text-color: $gray-dark !default;
 
@@ -46,13 +46,13 @@ $link-hover-decoration: underline !default;
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+$font-family-sans-serif: $base-font-regular !default;
+$font-family-serif: $base-font-regular !default;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-monospace: $base-font-regular !default;
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-base: 14px !default;
+$font-size-base: $body-font-2 !default;
 $font-size-large: ceil(($font-size-base * 1.25)) !default;
 // ~18px
 $font-size-small: ceil(($font-size-base * 0.85)) !default;
@@ -123,7 +123,7 @@ $border-radius-large: 6px !default;
 $border-radius-small: 3px !default;
 
 //** Global color for active items (e.g., navs or dropdowns).
-$component-active-color: #fff !default;
+$component-active-color: $white !default;
 //** Global background color for active items (e.g., navs or dropdowns).
 $component-active-bg: $brand-primary !default;
 
@@ -144,13 +144,13 @@ $table-condensed-cell-padding: 5px !default;
 //** Default background color used for all tables.
 $table-bg: transparent !default;
 //** Background color used for `.table-striped`.
-$table-bg-accent: #f9f9f9 !default;
+$table-bg-accent: $light-gray !default;
 //** Background color used for `.table-hover`.
-$table-bg-hover: #f5f5f5 !default;
+$table-bg-hover: $neutral-gray !default;
 $table-bg-active: $table-bg-hover !default;
 
 //** Border color for table and cell borders.
-$table-border-color: #ddd !default;
+$table-border-color: $dark-gray !default;
 
 //== Buttons
 //
@@ -158,27 +158,27 @@ $table-border-color: #ddd !default;
 
 $btn-font-weight: normal !default;
 
-$btn-default-color: #333 !default;
-$btn-default-bg: #fff !default;
-$btn-default-border: #ccc !default;
+$btn-default-color: $darkest !default;
+$btn-default-bg: $white !default;
+$btn-default-border: $neutral-gray !default;
 
-$btn-primary-color: #fff !default;
+$btn-primary-color: $white !default;
 $btn-primary-bg: $brand-primary !default;
 $btn-primary-border: darken($btn-primary-bg, 5%) !default;
 
-$btn-success-color: #fff !default;
+$btn-success-color: $white !default;
 $btn-success-bg: $brand-success !default;
 $btn-success-border: darken($btn-success-bg, 5%) !default;
 
-$btn-info-color: #fff !default;
+$btn-info-color: $white !default;
 $btn-info-bg: $brand-info !default;
 $btn-info-border: darken($btn-info-bg, 5%) !default;
 
-$btn-warning-color: #fff !default;
+$btn-warning-color: $white !default;
 $btn-warning-bg: $brand-warning !default;
 $btn-warning-border: darken($btn-warning-bg, 5%) !default;
 
-$btn-danger-color: #fff !default;
+$btn-danger-color: $white !default;
 $btn-danger-bg: $brand-danger !default;
 $btn-danger-border: darken($btn-danger-bg, 5%) !default;
 
@@ -194,14 +194,14 @@ $btn-border-radius-small: $border-radius-small !default;
 //##
 
 //** `<input>` background color
-$input-bg: #fff !default;
+$input-bg: $white !default;
 //** `<input disabled>` background color
 $input-bg-disabled: $gray-lighter !default;
 
 //** Text color for `<input>`s
 $input-color: $gray !default;
 //** `<input>` border color
-$input-border: #ccc !default;
+$input-border: $neutral-gray !default;
 
 // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
 //** Default `.form-control` border radius
@@ -213,10 +213,10 @@ $input-border-radius-large: $border-radius-large !default;
 $input-border-radius-small: $border-radius-small !default;
 
 //** Border color for inputs on focus
-$input-border-focus: #66afe9 !default;
+$input-border-focus: $t-blue-link !default;
 
 //** Placeholder text color
-$input-color-placeholder: #999 !default;
+$input-color-placeholder: $neutral-gray !default;
 
 //** Default `.form-control` height
 $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
@@ -229,7 +229,7 @@ $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-s
 $form-group-margin-bottom: 15px !default;
 
 $legend-color: $gray-dark !default;
-$legend-border-color: #e5e5e5 !default;
+$legend-border-color: $light-gray !default;
 
 //** Background color for textual input addons
 $input-group-addon-bg: $gray-lighter !default;
@@ -244,20 +244,20 @@ $cursor-disabled: not-allowed !default;
 //## Dropdown menu container and contents.
 
 //** Background for the dropdown menu.
-$dropdown-bg: #fff !default;
+$dropdown-bg: $white !default;
 //** Dropdown menu `border-color`.
 $dropdown-border: rgba(0, 0, 0, .15) !default;
 //** Dropdown menu `border-color` **for IE8**.
-$dropdown-fallback-border: #ccc !default;
+$dropdown-fallback-border: $neutral-gray !default;
 //** Divider color for between dropdown items.
-$dropdown-divider-bg: #e5e5e5 !default;
+$dropdown-divider-bg: $light-gray !default;
 
 //** Dropdown link text color.
 $dropdown-link-color: $gray-dark !default;
 //** Hover color for dropdown links.
 $dropdown-link-hover-color: darken($gray-dark, 5%) !default;
 //** Hover background for dropdown links.
-$dropdown-link-hover-bg: #f5f5f5 !default;
+$dropdown-link-hover-bg: $very-light-gray !default;
 
 //** Active dropdown menu item text color.
 $dropdown-link-active-color: $component-active-color !default;
@@ -271,7 +271,7 @@ $dropdown-link-disabled-color: $gray-light !default;
 $dropdown-header-color: $gray-light !default;
 
 //** Deprecated `$dropdown-caret-color` as of v3.1.0
-$dropdown-caret-color: #000 !default;
+$dropdown-caret-color: $darkest !default;
 
 //-- Z-index master list
 //
@@ -371,17 +371,17 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
 $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
 $navbar-collapse-max-height: 340px !default;
 
-$navbar-default-color: #777 !default;
+$navbar-default-color: $dark-gray !default;
 $navbar-default-bg: #f8f8f8 !default;
 $navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
 
 // Navbar links
-$navbar-default-link-color: #777 !default;
-$navbar-default-link-hover-color: #333 !default;
+$navbar-default-link-color: $dark-gray !default;
+$navbar-default-link-hover-color: $darkest !default;
 $navbar-default-link-hover-bg: transparent !default;
-$navbar-default-link-active-color: #555 !default;
+$navbar-default-link-active-color: $dark-gray !default;
 $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
-$navbar-default-link-disabled-color: #ccc !default;
+$navbar-default-link-disabled-color: $neutral-gray !default;
 $navbar-default-link-disabled-bg: transparent !default;
 
 // Navbar brand label
@@ -390,14 +390,14 @@ $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !def
 $navbar-default-brand-hover-bg: transparent !default;
 
 // Navbar toggle
-$navbar-default-toggle-hover-bg: #ddd !default;
-$navbar-default-toggle-icon-bar-bg: #888 !default;
-$navbar-default-toggle-border-color: #ddd !default;
+$navbar-default-toggle-hover-bg: $very-light-gray !default;
+$navbar-default-toggle-icon-bar-bg: $neutral-gray !default;
+$navbar-default-toggle-border-color: $very-light-gray !default;
 
 //=== Inverted navbar
 // Reset inverted navbar basics
 $navbar-inverse-color: lighten($gray-light, 15%) !default;
-$navbar-inverse-bg: #222 !default;
+$navbar-inverse-bg: $darkest !default;
 $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
 
 // Inverted navbar links
@@ -406,7 +406,7 @@ $navbar-inverse-link-hover-color: #fff !default;
 $navbar-inverse-link-hover-bg: transparent !default;
 $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
 $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
-$navbar-inverse-link-disabled-color: #444 !default;
+$navbar-inverse-link-disabled-color: $neutral-gray !default;
 $navbar-inverse-link-disabled-bg: transparent !default;
 
 // Inverted navbar brand label
@@ -415,9 +415,9 @@ $navbar-inverse-brand-hover-color: #fff !default;
 $navbar-inverse-brand-hover-bg: transparent !default;
 
 // Inverted navbar toggle
-$navbar-inverse-toggle-hover-bg: #333 !default;
-$navbar-inverse-toggle-icon-bar-bg: #fff !default;
-$navbar-inverse-toggle-border-color: #333 !default;
+$navbar-inverse-toggle-hover-bg: $darkest !default;
+$navbar-inverse-toggle-icon-bar-bg: $white !default;
+$navbar-inverse-toggle-border-color: $darkest !default;
 
 //== Navs
 //
@@ -431,7 +431,7 @@ $nav-disabled-link-color: $gray-light !default;
 $nav-disabled-link-hover-color: $gray-light !default;
 
 //== Tabs
-$nav-tabs-border-color: #ddd !default;
+$nav-tabs-border-color: $neutral-gray !default;
 
 $nav-tabs-link-hover-border-color: $gray-lighter !default;
 
@@ -439,7 +439,7 @@ $nav-tabs-active-link-hover-bg: $body-bg !default;
 $nav-tabs-active-link-hover-color: $gray !default;
 $nav-tabs-active-link-hover-border-color: #ddd !default;
 
-$nav-tabs-justified-link-border-color: #ddd !default;
+$nav-tabs-justified-link-border-color: $neutral-gray !default;
 $nav-tabs-justified-active-link-border-color: $body-bg !default;
 
 //== Pills
@@ -452,20 +452,20 @@ $nav-pills-active-link-hover-color: $component-active-color !default;
 //##
 
 $pagination-color: $link-color !default;
-$pagination-bg: #fff !default;
-$pagination-border: #ddd !default;
+$pagination-bg: $white !default;
+$pagination-border: $neutral-gray !default;
 
 $pagination-hover-color: $link-hover-color !default;
 $pagination-hover-bg: $gray-lighter !default;
-$pagination-hover-border: #ddd !default;
+$pagination-hover-border: $neutral-gray !default;
 
-$pagination-active-color: #fff !default;
+$pagination-active-color: $white !default;
 $pagination-active-bg: $brand-primary !default;
 $pagination-active-border: $brand-primary !default;
 
 $pagination-disabled-color: $gray-light !default;
-$pagination-disabled-bg: #fff !default;
-$pagination-disabled-border: #ddd !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border: $neutral-gray !default;
 
 //== Pager
 //
@@ -497,20 +497,20 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-$state-success-text: #3c763d !default;
-$state-success-bg: #dff0d8 !default;
+$state-success-text: $fern-green !default;
+$state-success-bg: $hint-of-green !default;
 $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
 
-$state-info-text: #31708f !default;
-$state-info-bg: #d9edf7 !default;
+$state-info-text: $astral-blue !default;
+$state-info-bg: $lavender-violet !default;
 $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
 
-$state-warning-text: #8a6d3b !default;
-$state-warning-bg: #fcf8e3 !default;
+$state-warning-text: $mckenzie-orange !default;
+$state-warning-bg: $derby-yellow !default;
 $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
 
-$state-danger-text: #a94442 !default;
-$state-danger-bg: #f2dede !default;
+$state-danger-text: $roof-terracotta-red !default;
+$state-danger-bg: $pale-rode-red !default;
 $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
 
 //== Tooltips
@@ -520,9 +520,9 @@ $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
 //** Tooltip max width
 $tooltip-max-width: 200px !default;
 //** Tooltip text color
-$tooltip-color: #fff !default;
+$tooltip-color: $white !default;
 //** Tooltip background color
-$tooltip-bg: #000 !default;
+$tooltip-bg: $darkest !default;
 $tooltip-opacity: .9 !default;
 
 //** Tooltip arrow width
@@ -535,13 +535,13 @@ $tooltip-arrow-color: $tooltip-bg !default;
 //##
 
 //** Popover body background color
-$popover-bg: #fff !default;
+$popover-bg: $white !default;
 //** Popover maximum width
 $popover-max-width: 276px !default;
 //** Popover border color
 $popover-border-color: rgba(0, 0, 0, .2) !default;
 //** Popover fallback border color
-$popover-fallback-border-color: #ccc !default;
+$popover-fallback-border-color: $neutral-gray !default;
 
 //** Popover title background color
 $popover-title-bg: darken($popover-bg, 3%) !default;
@@ -576,9 +576,9 @@ $label-warning-bg: $brand-warning !default;
 $label-danger-bg: $brand-danger !default;
 
 //** Default label text color
-$label-color: #fff !default;
+$label-color: $white !default;
 //** Default text color of a linked label
-$label-link-hover-color: #fff !default;
+$label-link-hover-color: $white !default;
 
 //== Modals
 //
@@ -593,18 +593,18 @@ $modal-title-padding: 15px !default;
 $modal-title-line-height: $line-height-base !default;
 
 //** Background color of modal content area
-$modal-content-bg: #fff !default;
+$modal-content-bg: $white !default;
 //** Modal content border color
 $modal-content-border-color: rgba(0, 0, 0, .2) !default;
 //** Modal content border color **for IE8**
-$modal-content-fallback-border-color: #999 !default;
+$modal-content-fallback-border-color: $dark-gray !default;
 
 //** Modal backdrop background color
-$modal-backdrop-bg: #000 !default;
+$modal-backdrop-bg: $darkest !default;
 //** Modal backdrop opacity
 $modal-backdrop-opacity: .5 !default;
 //** Modal header border color
-$modal-header-border-color: #e5e5e5 !default;
+$modal-header-border-color: $light-gray !default;
 //** Modal footer border color
 $modal-footer-border-color: $modal-header-border-color !default;
 
@@ -641,9 +641,9 @@ $alert-danger-border: $state-danger-border !default;
 //##
 
 //** Background color of the whole progress component
-$progress-bg: #f5f5f5 !default;
+$progress-bg: $very-light-gray !default;
 //** Progress bar text color
-$progress-bar-color: #fff !default;
+$progress-bar-color: $white !default;
 //** Variable for setting rounded corners on progress bar.
 $progress-border-radius: $border-radius-base !default;
 
@@ -663,14 +663,14 @@ $progress-bar-info-bg: $brand-info !default;
 //##
 
 //** Background color on `.list-group-item`
-$list-group-bg: #fff !default;
+$list-group-bg: $white !default;
 //** `.list-group-item` border color
-$list-group-border: #ddd !default;
+$list-group-border: $light-gray !default;
 //** List group border radius
 $list-group-border-radius: $border-radius-base !default;
 
 //** Background color of single list items on hover
-$list-group-hover-bg: #f5f5f5 !default;
+$list-group-hover-bg: $very-light-gray !default;
 //** Text color of active list items
 $list-group-active-color: $component-active-color !default;
 //** Background color of active list items
@@ -687,29 +687,29 @@ $list-group-disabled-bg: $gray-lighter !default;
 //** Text color for content within disabled list items
 $list-group-disabled-text-color: $list-group-disabled-color !default;
 
-$list-group-link-color: #555 !default;
+$list-group-link-color: $dark-gray !default;
 $list-group-link-hover-color: $list-group-link-color !default;
-$list-group-link-heading-color: #333 !default;
+$list-group-link-heading-color: $darkest !default;
 
 //== Panels
 //
 //##
 
-$panel-bg: #fff !default;
+$panel-bg: $white !default;
 $panel-body-padding: 15px !default;
 $panel-heading-padding: 10px 15px !default;
 $panel-footer-padding: $panel-heading-padding !default;
 $panel-border-radius: $border-radius-base !default;
 
 //** Border color for elements within panels
-$panel-inner-border: #ddd !default;
-$panel-footer-bg: #f5f5f5 !default;
+$panel-inner-border: $light-gray !default;
+$panel-footer-bg: $very-light-gray !default;
 
 $panel-default-text: $gray-dark !default;
-$panel-default-border: #ddd !default;
-$panel-default-heading-bg: #f5f5f5 !default;
+$panel-default-border: $light-gray !default;
+$panel-default-heading-bg: $very-light-gray !default;
 
-$panel-primary-text: #fff !default;
+$panel-primary-text: $white !default;
 $panel-primary-border: $brand-primary !default;
 $panel-primary-heading-bg: $brand-primary !default;
 
@@ -738,7 +738,7 @@ $thumbnail-padding: 4px !default;
 //** Thumbnail background color
 $thumbnail-bg: $body-bg !default;
 //** Thumbnail border color
-$thumbnail-border: #ddd !default;
+$thumbnail-border: $light-gray !default;
 //** Thumbnail border radius
 $thumbnail-border-radius: $border-radius-base !default;
 
@@ -751,22 +751,22 @@ $thumbnail-caption-padding: 9px !default;
 //
 //##
 
-$well-bg: #f5f5f5 !default;
+$well-bg: $very-light-gray !default;
 $well-border: darken($well-bg, 7%) !default;
 
 //== Badges
 //
 //##
 
-$badge-color: #fff !default;
+$badge-color: $white !default;
 //** Linked badge text color on hover
-$badge-link-hover-color: #fff !default;
+$badge-link-hover-color: $white !default;
 $badge-bg: $gray-light !default;
 
 //** Badge text color in active nav link
 $badge-active-color: $link-color !default;
 //** Badge background color in active nav link
-$badge-active-bg: #fff !default;
+$badge-active-bg: $white !default;
 
 $badge-font-weight: bold !default;
 $badge-line-height: 1 !default;
@@ -779,9 +779,9 @@ $badge-border-radius: 10px !default;
 $breadcrumb-padding-vertical: 8px !default;
 $breadcrumb-padding-horizontal: 15px !default;
 //** Breadcrumb background color
-$breadcrumb-bg: #f5f5f5 !default;
+$breadcrumb-bg: $very-light-gray !default;
 //** Breadcrumb text color
-$breadcrumb-color: #ccc !default;
+$breadcrumb-color: $neutral-gray !default;
 //** Text color of current page in the breadcrumb
 $breadcrumb-active-color: $gray-light !default;
 //** Textual separator for between breadcrumb elements
@@ -793,37 +793,37 @@ $breadcrumb-separator: "/" !default;
 
 $carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !default;
 
-$carousel-control-color: #fff !default;
+$carousel-control-color: $white !default;
 $carousel-control-width: 15% !default;
 $carousel-control-opacity: .5 !default;
 $carousel-control-font-size: 20px !default;
 
-$carousel-indicator-active-bg: #fff !default;
-$carousel-indicator-border-color: #fff !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-border-color: $white !default;
 
-$carousel-caption-color: #fff !default;
+$carousel-caption-color: $white !default;
 
 //== Close
 //
 //##
 
 $close-font-weight: bold !default;
-$close-color: #000 !default;
+$close-color: $darkest !default;
 $close-text-shadow: 0 1px 0 #fff !default;
 
 //== Code
 //
 //##
 
-$code-color: #c7254e !default;
-$code-bg: #f9f2f4 !default;
+$code-color: $red !default;
+$code-bg: $light-gray !default;
 
-$kbd-color: #fff !default;
-$kbd-bg: #333 !default;
+$kbd-color: $white !default;
+$kbd-bg: $darkest !default;
 
-$pre-bg: #f5f5f5 !default;
+$pre-bg: $very-light-gray !default;
 $pre-color: $gray-dark !default;
-$pre-border-color: #ccc !default;
+$pre-border-color: $dark-gray !default;
 $pre-scrollable-max-height: 340px !default;
 
 //== Type
diff --git a/resources/scss/common/_base.scss b/resources/scss/common/_base.scss
index ab3756d..f7e3274 100644
--- a/resources/scss/common/_base.scss
+++ b/resources/scss/common/_base.scss
@@ -20,8 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 html {
   font-size: 100%;
   height: 100%;
@@ -31,10 +30,8 @@ body {
   /* scrollbar styling for Internet Explorer */
   scrollbar-face-color: $scroll-bar-color;
   scrollbar-track-color: $scroll-bar-color;
-  height: 100%;
-  min-width: 1280px;
-  overflow-y: auto;
-  //@extend %noselect;
+  height: 100vh;
+  min-width: $minimum-application-width;
 }
 
 /* scrollbar styling for Google Chrome | Safari | Opera */
diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss
index 5f8d459..1c3bf66 100644
--- a/resources/scss/common/_layout.scss
+++ b/resources/scss/common/_layout.scss
@@ -20,8 +20,16 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .hidden {
 	display: none;
 }
+
+.main-app-container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.view-container {
+}
diff --git a/resources/scss/common/_typography.scss b/resources/scss/common/_typography.scss
index 3552f92..020fd7d 100644
--- a/resources/scss/common/_typography.scss
+++ b/resources/scss/common/_typography.scss
@@ -21,22 +21,20 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
+$base-font-regular: "Arial";
+$base-font-light: "Arial";
+$base-font-medium: "Arial";
+$base-font-bold: "Arial";
 
-/* Fonts */
-
-$base-font-regular: Arial;
-$base-font-light: Arial;
-$base-font-medium: Arial;
-$base-font-bold: Arial;
-
-$heading-font-1: 36px;
-$heading-font-2: 24px;
+$heading-font-1: 24px;
+$heading-font-2: 20px;
 $heading-font-3: 18px;
 $heading-font-4: 16px;
 
-$body-font-1: 14px;
-$body-font-2: 13px;
-$body-font-3: 12px;
+$body-font-1: 16px;
+$body-font-2: 14px;
+$body-font-3: 13px;
+$body-font-4: 12px;
 
 $focus-font-1: 55px;
 $focus-font-2: 50px;
diff --git a/resources/scss/common/_utils.scss b/resources/scss/common/_utils.scss
index 5f93c36..f50cea8 100644
--- a/resources/scss/common/_utils.scss
+++ b/resources/scss/common/_utils.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 /* Prefix */
 
 $box-sizing-prefix: webkit moz spec;
diff --git a/resources/scss/common/_variables.scss b/resources/scss/common/_variables.scss
index 43f75bd..e3ba93a 100644
--- a/resources/scss/common/_variables.scss
+++ b/resources/scss/common/_variables.scss
@@ -21,45 +21,149 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
+$minimum-application-width: 1000px;
+$primary-header-height: 47px;
+$secondary-header-height: 42px;
+$total-header-height: $primary-header-height + $secondary-header-height;
 
-// primary colors
-$blue: #009fdb;
-$dark-blue: #0568ae;
-$light-blue: #71c5e8;
-$green: #4ca90c;
-$dark-green: #007a3e;
-$light-green: #b5bd00;
-$orange: #ea7400;
-$yellow: #ffb81c;
-$dark-purple: #702f8a;
-$purple: #9063cd;
-$light-purple: #caa2dd;
-$black: #000000;
-$dark-gray: #5a5a5a;
-$gray: #959595;
-$light-gray: #d2d2d2;
-$white: #ffffff;
-
-// Secondary Colors
-$red: #cf2a2a;
-$background-gray: #f2f2f2;
-$text-black: #191919;
-$link-blue: #056bae;
-$functional-green: #007a3e;
-$functional-yellow: #ffb81c;
-$tlv-gray: #f8f8f8;
-$tlv-light-gray: #eaeaea;
-$di-light-grey: #91a2ae;
-$tlv-hover: #e6f6fb;
+// primary colors: DO NOT USE these out side of this file
+$turquoise-blue: #01afd1;
+$dark-turquoise: #12798e;
+$dark-blue: #004b68;
+$darkest: #323b3f;
+$white: #fff;
+$very-light-gray: #eff2f3;
+$pacific-blue: #009fdb;
+$acadia-brown: #5a5a5a;
 
+// Secondary Colors: DO NOT USE these out side of this file
+$light-gray: #cfd6d9;
+$light-gray-2: #d2d2d2;
+$neutral-gray: #b7bfc3;
+$dark-gray: #7c8388;
+$t-blue: #0396b4;
+$light-green: #d1de42;
+$amber: #fab32b;
+$red: #d03d3c;
+$lime-green: #aadc1f;
+$redish-orange: #fe7550;
+$light-bluish-gray: #dbeaed;
+$bluish-gray: #72848c;
+$dark-bluish-gray: #404f5a;
+$very-light-bluish-gray: #f3f6f6;
+$nero-gray: #191919;
+$derby-yellow: #faebcc;
+$mckenzie-orange: #8a6d3b;
+$fern-green: #3c763d;
+$hint-of-green: #dff0d8;
+$astral-blue: #31708f;
+$lavender-violet: #d9edf7;
+$roof-terracotta-red: #a94442;
+$pale-rode-red: #f2dede;
+
+
+// Variables:
+// still investigate $background-gray: $very-light-gray;
+$background-color1: $very-light-gray;
+$background-header-color1: $pacific-blue;
+$background-header-color2: $very-light-gray;
+$search-background-color3: $very-light-gray;
+
+$text-color1: $acadia-brown;
+$text-color2: $acadia-brown;
+$text-color3: $acadia-brown;
+$text-color4: $pacific-blue;
+$text-color11: $white;
+$border-color1: $acadia-brown;
 
 $scroll-bar-color: $dark-gray;
+$border-color2: $dark-gray;
+$shadow-color1: $dark-gray;
+$background-color2: $dark-gray;
+$graph-border-color1: $dark-gray;
+$graph-background-color1: $dark-gray;
+$search-background-color2: $dark-gray;
+
+//$t-blue-link: $t-blue;
+$background-color3: $t-blue;
+$border-color11: $t-blue;
+
+$background-color4: $very-light-bluish-gray;
+
+//$turquoise-blue
+$background-color5: $pacific-blue;
+$border-color3: $pacific-blue;
+$graph-border-color2: $pacific-blue;
+$graph-background-color2: $pacific-blue;
+$search-background-color1: $pacific-blue;
+$search-text-color1: $pacific-blue;
+$selected-node-details-color1: $pacific-blue;
+
+// $dark-turquoise: #12798e;
+$text-color5: $dark-turquoise;
+$background-color6: $dark-turquoise;
+
+// $dark-blue
+$text-color6: $dark-blue;
+$background-color7: $dark-blue;
+$border-color4: $dark-blue;
+
+
+// $white: #fff;
+$primary-background-color: $white;
+$graph-background-color3: $white;
+$graph-border-color3: $white;
+
+
+//light-gray
+$text-color7: $light-gray-2;
+$background-color8: $light-gray-2;
+$border-color5: $light-gray-2;
+$graph-background-color4: $light-gray-2;
+
+//light-green
+$text-color8: $light-green;
+
+// $neutral-gray
+
+$border-color6: $neutral-gray;
+$search-border-color1: $neutral-gray;
+$graph-border-color4: $neutral-gray;
+
+// $amber: #fab32b;
+$border-color7: $amber;
+$background-color9: $amber;
+$text-color9: $amber;
+
+
+// $red:
+$background-color10: $red;
+$text-color10: $red;
+$border-color10: $red;
+
+
+// $lime-green: #aadc1f;
+$graph-background-color5: $lime-green;
+$background-color11: $lime-green;
+
+// $redish-orange
+$border-color12: $redish-orange;
+
+
+//$light-bluish-gray: #dbeaed;
+$background-color12: $light-bluish-gray;
+
+// $bluish-gray;
+$background-color13: $bluish-gray;
 
 //responsive @media params
 $tablet-max-width: 1024px;
 $laptop-min-width: 1224px;
 $desktop-min-width: 1824px;
 
+// light-gray-2
+$search-button-background-color: $light-gray-2;
+
 /* Textures */
 $images-folder-name: "../images";
 $plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss
index 6aab3e0..dbb684d 100644
--- a/resources/scss/components/_buttons.scss
+++ b/resources/scss/components/_buttons.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 $plus-circle-icon-size: 18px;
 .plus-icon-button {
   background: url($plus-circle-icon) no-repeat;
@@ -38,8 +37,8 @@ $plus-circle-icon-size: 18px;
 
 .primary-btn{
   border: 1px solid;
-  border-color: $blue;
-  color: $blue;
+  border-color: $border-color3;
+  color: $text-color4;
   font-weight: bolder;
   @extend .body-1;
   text-align: center;
@@ -47,23 +46,23 @@ $plus-circle-icon-size: 18px;
   border-radius: 5px;
   cursor: pointer;
   align-self: center;
-  background-color: $white;
+  background-color: $primary-background-color;
   .primary-btn-text {
     width: 100%;
   }
   &:hover {
-    color: $blue;
-    border-color: $blue;
-    background-color: $tlv-hover;
+    color: $background-color5;
+    border-color: $border-color3;
+    background-color: $background-color12;
     &:active {
-      color: $blue;
-      border-color: $blue;
+      color: $background-color5;
+      border-color: $border-color3;
     }
   }
 
   &:focus:not(:hover) {
-    color: $blue;
-    border-color: $blue;
-    background-color: $white;
+    color: $background-color5;
+    border-color: $border-color3;
+    background-color: $primary-background-color;
   }
 }
diff --git a/resources/scss/components/_containerPanel.scss b/resources/scss/components/_containerPanel.scss
index 46bc472..48fc4b9 100644
--- a/resources/scss/components/_containerPanel.scss
+++ b/resources/scss/components/_containerPanel.scss
@@ -28,10 +28,10 @@
 }
 
 .titled-container-boarders {
-  border: solid 1px $black;
-  -webkit-box-shadow: 3px 3px 10px DarkGrey;
-  -moz-box-shadow: 3px 3px 10px DarkGrey;
-  box-shadow: 3px 3px 10px DarkGrey;
+  border: solid 1px $border-color1;
+  -webkit-box-shadow: 3px 3px 10px $shadow-color1;
+  -moz-box-shadow: 3px 3px 10px $shadow-color1;
+  box-shadow: 3px 3px 10px $shadow-color1;
 }
 
 .titled-container-header {
diff --git a/resources/scss/components/_dateRangeSelector.scss b/resources/scss/components/_dateRangeSelector.scss
deleted file mode 100644
index f580cd5..0000000
--- a/resources/scss/components/_dateRangeSelector.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *       http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-.dateRangeSelector {
-  display: inline-block;
-  position: absolute;
-  margin-top: -1px;
-}
-
-.dateRangeSelectorSearchButton span {
-  margin: 0px 10px;
-  font-weight: bold;
-  color: $black;
-}
-
-#dateRangeSelectorPopover .popover-content {
-  padding: 5px;
-}
-
-#dateRangeSelectorPopover li {
-  list-style: none;
-  margin: 5px 0px;
-  padding: 0px;
-  font-size: small;
-  font-weight: bold;
-  min-width: 200px;
-  box-sizing: content-box;
-}
-
-#dateRangeSelectorPopover li a {
-  text-decoration: none;
-  background-color: $white;
-  display: block;
-  color: $dark-gray;
-  border-radius: 8px;
-  padding: 8px 5px 5px 8px;
-  border: solid 1px $tlv-gray;
-}
-
-#dateRangeSelectorPopover li.active a,
-#dateRangeSelectorPopover li a:hover {
-  background-color: $blue;
-  color: $white;
-}
-
-.dateRangeSearchButton {
-  padding: 5px 5px 2px 5px;
-  margin: 5px 0px 0px 0px;
-}
diff --git a/resources/scss/components/_dropdownMultiSelect.scss b/resources/scss/components/_dropdownMultiSelect.scss
index caa0db6..7c9e840 100644
--- a/resources/scss/components/_dropdownMultiSelect.scss
+++ b/resources/scss/components/_dropdownMultiSelect.scss
@@ -20,20 +20,19 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .dropdown-multi-select {
   .Select {
     display: block;
     width: 100%;
     &.Select--multi {
       .Select-value {
-        color: $text-black;
+        color: $text-color1;
         background-color: transparent;
-        border-color: $light-gray;
+        border-color: $border-color5;
       }
       .Select-value-icon {
-        border-right-color: $light-gray;
+        border-right-color: $border-color5;
       }
       .Select-arrow-zone {
         vertical-align: top;
diff --git a/resources/scss/components/_filterBar.scss b/resources/scss/components/_filterBar.scss
new file mode 100644
index 0000000..0e98f32
--- /dev/null
+++ b/resources/scss/components/_filterBar.scss
@@ -0,0 +1,207 @@
+/**
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017 Amdocs
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ *
+ * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ */
+/***** Vertical Filter Bar custom styles ******/
+$title-color: $text-color6;
+$background-color: $background-color8;
+$border-color: $border-color6;
+$main-color: $text-color4;
+$font-family-regular: $base-font-regular;
+$font-family-semibold: $base-font-bold;
+$res-folder: $icons-folder-path + '/filter';
+
+.vfb-filters {
+  font-family: $font-family-semibold;
+  background-color: $background-color;
+  box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09);
+}
+
+.vfb-header {
+  background-color: $main-color;
+  font-size: $heading-font-2;
+  color: $primary-background-color;
+
+  .clear-all{
+    font-size: $body-font-2;
+  }
+}
+
+.filter {
+  border-bottom: 1px solid $border-color;
+  &.expand{
+    .direction{
+      background: url($res-folder + '/expand-filter.svg') no-repeat;
+    }
+  }
+  &.collapse{
+    .direction{
+      background: url($res-folder  +'/collapse-filter.svg') no-repeat;
+    }
+  }
+}
+
+.filter-header {
+  .title {
+    font-family: $font-family-regular;
+    font-size: $heading-font-3;
+    color: $title-color;
+
+    .iconClickArea{
+      .icon{
+        background: url($res-folder + '/filter-small.svg') no-repeat;
+      }
+    }
+  }
+}
+
+.filter-group::-webkit-scrollbar-thumb {
+  background-color: $border-color;
+}
+
+.filter-control {
+  .label{
+    font-family: $font-family-semibold;
+    font-size: $body-font-3;
+    color: $text-color3;
+  }
+}
+
+.dropdown-filter-control {
+  .dropdown-select {
+    font-family: $font-family-semibold;
+    font-size: $body-font-2;
+  }
+}
+
+.filter-input{
+  border: 1px solid $border-color;
+  font-family: $font-family-regular;
+  &:focus {
+    border: 1px solid $main-color;
+  }
+
+  &::-webkit-input-placeholder {
+    font-size: $body-font-3;
+    font-family: $font-family-regular;
+    color: $neutral-gray;
+  }
+}
+
+.date-picker-filter-control{
+  @extend .filter-control;
+  .react-datepicker__input-container{
+    width:100%;
+  }
+  input{
+    @extend .filter-input;
+  }
+}
+
+.date-dropdown {
+  .Select-clear-zone {
+    visibility: visible;
+  }
+}
+
+/*utils*/
+
+/*DATE PICKER*/
+
+.react-datepicker {
+  font-family: $font-family-regular;
+}
+
+.react-datepicker .react-datepicker__day--selected {
+  background-color: $main-color;
+}
+.react-datepicker .react-datepicker__day--selected:hover {
+  background-color: $main-color;
+}
+
+.react-datepicker__day--today {
+  color: $text-color5;
+}
+
+.date-picker-filter-control input[value=""] {
+  background: #fff url($res-folder + '/calendar-icon.svg') no-repeat 97% center;
+  background-size: 13px 14px;
+}
+
+.date-picker-filter-control input:not([value=""]) {
+  background: #fff url($res-folder + '/calendar-icon-hover.svg') no-repeat 97% center;
+  background-size: 13px 14px;
+}
+
+
+
+/***** Collapsible Panel Custom Styles *******/
+.collapsible-sliding-panel {
+  min-width: 323px;
+  background-color: $background-color;
+  border-right: solid 1px #000;
+  margin-left: -25px;
+  transition: min-width 0.22s linear;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.collapsible-sliding-panel-main-content {
+  width: 100%;
+}
+
+.collapsible-sliding-panel.collapsible-sliding-panel-is-closed {
+  min-width: 0px;
+  transition: min-width 0.28s linear;
+  border: none;
+  div {
+    display: none;
+  }
+}
+
+.collapsible-sliding-panel-expander {
+  min-width: 25px;
+  height: 30px;
+  z-index: 2;
+  position: relative;
+  top: 0px;
+  left: 323px;
+  transition:left 0.22s linear;
+
+  background: $background-color6 url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat center;
+  background-size: 5px;
+  border-top-right-radius: 25px;
+  border-bottom-right-radius: 25px;
+  cursor: pointer;
+}
+
+.collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed {
+  min-width: 27px;
+  left: 0px;
+  transition: left 0.28s linear;
+  background: url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat 7px center,
+  url($icons-folder-path + '/collapsible-sliding-panel-expander-modified.svg') no-repeat 16px center $background-color6;
+  background-size: 5px;
+}
+
+.main-panel-class {
+  padding: 10px;
+}
diff --git a/resources/scss/components/_inlineMessage.scss b/resources/scss/components/_inlineMessage.scss
index afc1e51..283c0d7 100644
--- a/resources/scss/components/_inlineMessage.scss
+++ b/resources/scss/components/_inlineMessage.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .inline-message-alert {
   padding: 5px;
   margin: 5px 0px 5px 0px;
diff --git a/resources/scss/components/_inputOptions.scss b/resources/scss/components/_inputOptions.scss
index ee0f86e..1851d14 100644
--- a/resources/scss/components/_inputOptions.scss
+++ b/resources/scss/components/_inputOptions.scss
@@ -21,14 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .input-options {
   display: flex;
-  border: 1px solid $light-gray;
+  border: 1px solid $border-color5;
   border-radius: 2px;
   height: 30px;
   &:hover {
-    border-color: $gray;
+    border-color: $border-color6;
   }
   .input-options-select {
     float: left;
@@ -53,11 +52,11 @@
     height: 24px;
     margin-top: 2px;
     margin-bottom: 2px;
-    border:1px solid $light-gray;
+    border:1px solid $border-color5;
   }
 }
 
 .input-options.has-error {
-   border-color: #A94442;
+   border-color: $red;
 }
 
diff --git a/resources/scss/components/_notifications.scss b/resources/scss/components/_notifications.scss
index 871d682..8a6363a 100644
--- a/resources/scss/components/_notifications.scss
+++ b/resources/scss/components/_notifications.scss
@@ -20,8 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .notification-modal {
 
   .modal-content {
@@ -45,7 +44,7 @@
 
   &.warning {
     .modal-content .modal-header {
-      border-top: 3px solid $yellow;
+      border-top: 3px solid $border-color7;
     }
   }
 
diff --git a/resources/scss/components/_progressBar.scss b/resources/scss/components/_progressBar.scss
deleted file mode 100644
index 0755e68..0000000
--- a/resources/scss/components/_progressBar.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *       http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-.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;
-      }
-    }
-    .progress-bar-view-label {
-      margin-right: -30px;
-      margin-top: -2px;
-      margin-left: 10px;
-      color: black;
-     }
-  }
diff --git a/resources/scss/components/_punchOut.scss b/resources/scss/components/_punchOut.scss
deleted file mode 100644
index f99d8af..0000000
--- a/resources/scss/components/_punchOut.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *       http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
- */
-
-
-&.dox-ui-punch-out {
-  background-color: $background-gray;
-}
-
-&.dox-ui-punch-out.dox-ui-punch-out-full-page {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-}
diff --git a/resources/scss/components/_slidePanel.scss b/resources/scss/components/_slidePanel.scss
index e36b163..9eaddcd 100644
--- a/resources/scss/components/_slidePanel.scss
+++ b/resources/scss/components/_slidePanel.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .slide-panel {
   transition: left .5s,right .5s;
 
@@ -38,10 +37,10 @@
       @extend .body-2;
       text-align: center;
       width: 100%;
-      color: $text-black;
+      color: $text-color1;
     }
     .collapse-double-icon {
-      color: $text-black;
+      color: $text-color1;
       cursor: pointer;
     }
   }
diff --git a/resources/scss/components/_titledComponent.scss b/resources/scss/components/_titledComponent.scss
index ca1bebf..20c7a2c 100644
--- a/resources/scss/components/_titledComponent.scss
+++ b/resources/scss/components/_titledComponent.scss
@@ -21,35 +21,34 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .dep-titled-container {
-  border: solid 1px $black;
-  -webkit-box-shadow: 3px 3px 10px $dark-gray;
-  -moz-box-shadow: 3px 3px 10px $dark-gray;
-  box-shadow: 3px 3px 10px $dark-gray;
+  border: solid 1px $border-color1;
+  -webkit-box-shadow: 3px 3px 10px $shadow-color1;
+  -moz-box-shadow: 3px 3px 10px $shadow-color1;
+  box-shadow: 3px 3px 10px $shadow-color1;
   border-radius: 0px 0px 5px 5px;
   margin: 20px 5px;
 
   .header {
-    border-bottom: solid 1px $black;
+    border-bottom: solid 1px $border-color1;
     padding: 5px;
-    background-color: $light-gray;
+    background-color: $background-color8;
     font-weight: bold;
     font-size: $heading-font-3;
 
     .toggle-visibility-button, .toggle-visibility-button:focus {
       float: right;
-      background-color: $light-gray;
+      background-color: $background-color8;
       border: none;
       margin-top: -2px;
     }
 
     .toggle-visibility-button:hover {
-      background-color: $light-gray;
+      background-color: $background-color8;
       border: none;
 
       .fa {
-        color: $black;
+        color: $text-color3;
       }
     }
 
diff --git a/resources/scss/components/_toggleButtonGroup.scss b/resources/scss/components/_toggleButtonGroup.scss
index 008b656..01fdc70 100644
--- a/resources/scss/components/_toggleButtonGroup.scss
+++ b/resources/scss/components/_toggleButtonGroup.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .displayOptionButtons {
   float: right;
 }
diff --git a/resources/scss/components/_toggleInput.scss b/resources/scss/components/_toggleInput.scss
index 3401631..59c2058 100644
--- a/resources/scss/components/_toggleInput.scss
+++ b/resources/scss/components/_toggleInput.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .toggle-input-wrapper {
   $toggle-width: 40px;
   $toggle-height: 20px;
@@ -48,7 +47,7 @@
     padding: 1px;
     width: $toggle-width;
     height: $toggle-height;
-    background-color: $dark-gray;
+    background-color: $background-color2;
     border-radius: $toggle-height;
     transition: background 0.4s;
   }
@@ -63,7 +62,7 @@
     left: 1px;
     bottom: 1px;
     right: 1px;
-    background-color: $white;
+    background-color: $primary-background-color;
     border-radius: $toggle-height;
     transition: background 0.4s;
   }
@@ -72,15 +71,15 @@
     left: 4px;
     bottom: 4px;
     width: $toggle-height - 8;
-    background-color: $dark-gray;
+    background-color: $background-color2;
     border-radius: $toggle-height - 8;
     transition: margin 0.4s, background 0.4s;
   }
   input.toggle-round-flat:checked + label {
-    background-color: $link-blue;
+    background-color: $background-color3;
   }
   input.toggle-round-flat:checked + label:after {
     margin-left: $toggle-height;
-    background-color: $link-blue;
+    background-color: $background-color3;
   }
 }
diff --git a/resources/scss/components/_validationForm.scss b/resources/scss/components/_validationForm.scss
index 020c5eb..686b9f1 100644
--- a/resources/scss/components/_validationForm.scss
+++ b/resources/scss/components/_validationForm.scss
@@ -20,8 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 form {
   .validation-form-content {
     .validation-input-wrapper {
@@ -68,6 +67,6 @@ form {
 .modal-body {
   .validation-buttons {
     padding: 20px 15px;
-    background-color: $tlv-gray;
+    background-color: $background-color12;
   }
 }
diff --git a/resources/scss/audit/_layout.scss b/resources/scss/customViews.scss
index 8d32c10..cebdb4b 100644
--- a/resources/scss/audit/_layout.scss
+++ b/resources/scss/customViews.scss
@@ -20,8 +20,4 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
-#audit-report-ui {
-  min-width: 1280px;
-}
+$extendedApps: "../../node_modules";
diff --git a/resources/scss/d3/_aggregationMap.scss b/resources/scss/d3/_aggregationMap.scss
index a22e5a4..85ec34a 100644
--- a/resources/scss/d3/_aggregationMap.scss
+++ b/resources/scss/d3/_aggregationMap.scss
@@ -21,19 +21,18 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .land-features {
-	fill: $light-gray;
+	fill: $background-color8;
 }
 
 .boundary-mesh {
 	fill: none;
-	stroke: $black;
+	stroke: $text-color3;
 	stroke-width: 0.75;
 	stroke-linejoin: round;
 	stroke-linecap: round;
 }
 
 .plot-point {
-	fill: $blue;
+	fill: $background-color5;
 }
diff --git a/resources/scss/d3/_forceDirectedGraph.scss b/resources/scss/d3/_forceDirectedGraph.scss
index 1bb1c69..e08d576 100644
--- a/resources/scss/d3/_forceDirectedGraph.scss
+++ b/resources/scss/d3/_forceDirectedGraph.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .ts-force-selected-graph {
   padding: 0px;
   -webkit-user-select: none;  /* Chrome all / Safari all */
@@ -31,119 +30,119 @@
 }
 
 .aai-entity-node{
-  font-family: Arial;
-  font-size: 12px;
-  line-height: 14px;
+  font-family: $base-font-regular;
+  font-size: $body-font-4;
+  line-height: $body-font-2;
   text-anchor: middle;
 }
 
 .aai-entity-node > .id-type-label {
-  fill:#404f5a;
+  fill: $text-color1;
   font-weight: bold;
 }
 
 .aai-entity-node > .id-value-label {
-  fill:#8b9399;
+  fill: $background-color2;
 }
 
 .aai-entity-link {
-  stroke: #d9dada;
+  stroke: $graph-border-color4;
   stroke-width: 2px;
 }
 
 .general-node > .inner {
-  fill: #626668;
+  fill: $background-color2;
 }
 
 .general-node > .outer {
-  fill: #ffffff;
-  stroke: #009fdb;
+  fill: $graph-background-color3;
+  stroke: $graph-border-color2;
   stroke-width: 2px;
 }
 
 .search-node > .inner {
-  fill: #009fdb;
+  fill: $graph-background-color1;
 }
 
 .search-node > .outer {
-  fill: #ffffff;
-  stroke: #009fdb;
+  fill: $graph-background-color3;
+  stroke: $graph-border-color2;
   stroke-width: 2px;
 }
 
 .selected-node > .inner {
-  fill: #626668;
+  fill: $graph-background-color1;
 }
 
 .selected-node > .outer {
-  fill: #d9dada;
-  stroke: #009fdb;
+  fill: $graph-background-color4;
+  stroke: $graph-border-color2;
   stroke-width: 3px;
   filter: url(#selected-node-drop-shadow);
 }
 
 .selected-search-node > .inner {
-  fill: #009fdb;
+  fill: $border-color3;
 }
 
 .selected-search-node > .outer {
-  fill: #d9dada;
-  stroke: #009fdb;
+  fill: $graph-background-color4;
+  stroke: $graph-border-color2;
   stroke-width: 3px;
   filter: url(#selected-node-drop-shadow);
 }
 
 @-moz-document url-prefix() {
   .selected-search-node > .outer {
-    fill: #d9dada;
-    stroke: #009fdb;
+    fill: $graph-background-color4;
+    stroke: $graph-border-color2;
     stroke-width: 3px;
     filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5));
   }
 
   .selected-node > .outer {
-    fill: #d9dada;
-    stroke: #009fdb;
+    fill: $graph-background-color4;
+    stroke: $graph-border-color2;
     stroke-width: 3px;
     filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5));
   }
 }
 
 .background-unselected {
-  fill: #626668;
+  fill: $background-color2;
 }
 
 .background-selected {
-  fill: #009fdb;
+  fill: $graph-border-color2;
 }
 
 .ellipses-ellipse {
-  fill: #FFFFFF;
+  fill: $graph-background-color3;
 }
 
 .triangle-warning {
-  fill: #FFFFFF;
+  fill: $graph-background-color3;
   fill-rule: evenodd;
 }
 
 .icon_tick_circle{
-  fill: #9DC742;
+  fill: $graph-background-color5;
 }
 
 .icon_tick_path {
   fill-rule: evenodd;
-  fill: #FFFFFF;
-  stroke: #FFFFFF;
+  fill: $graph-background-color3;
+  stroke: $graph-border-color3;
   strokeWidth: 0.8;
 }
 
 .icon_warning_circle{
-  fill: #FF0000;
+  fill: $red;
 }
 
 .icon_warning_path {
   fill-rule: evenodd;
-  fill: #FFFFFF;
-  stroke: #FFFFFF;
+  fill: $graph-background-color3;
+  stroke: $graph-border-color3;
   strokeWidth: 0.5;
 }
diff --git a/resources/scss/header/_layout.scss b/resources/scss/header/_layout.scss
index e641f4b..fc52d04 100644
--- a/resources/scss/header/_layout.scss
+++ b/resources/scss/header/_layout.scss
@@ -20,15 +20,13 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .header {
-  padding: 0px;
-  background-color: $blue;
+  background-color: $background-header-color1;
   //display: flex;
   align-items: center;
   margin: 0px;
-  padding: 5px 5px 1px 5px;
+  padding: 5px 0px 0px 0px;
 
   .dropdown-toggle {
     border: none;
@@ -39,57 +37,75 @@
 
   .application-title {
     font-size: $heading-font-1;
-    color: $white;
+    color: $text-color11;
     width: 127px;
-    height: 45px;
     margin-right: 20px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding: 2px 20px 0 20px;
-    border-right: solid 1px $light-gray;
+    padding: 2px 20px 0 10px;
+    border-right: solid 1px $border-color5;
+  }
+
+  .data-integrity-search-bar-wrapper {
+    display: flex;
+    align-items: center;
+    .inline-message-alert {
+      padding: 0;
+      margin: 0 0 0 10px;
+      height: 32px;
+    }
   }
 }
 
 .secondary-header {
-  background-color: $tlv-light-gray;
+  background-color: $background-header-color2;
   margin: 0px;
   padding: 10px 20px 5px 20px;
-  border-top: solid 2px $light-gray;
-  border-bottom: solid 2px $light-gray;
+  border-top: solid 2px $border-color5;
+  border-bottom: solid 2px $border-color5;
+  width: 100%;
 
   .secondary-title {
-    color: $black;
-    font-size: $heading-font-2;
+    color: $text-color2;
+    font-size: $heading-font-3;
+    font-weight: bold;
     padding: 5px 20px 0px 0px;
-    border-right: solid 1px $light-gray;
+    border-right: solid 1px $border-color5;
     margin: 0px 25px 0px 0px;
   }
 }
 
 .toggle-view-button {
-  color: $white;
+  color: $text-color11;
   background-color: transparent;
   font-size: 20px;
-  padding: 10px 15px;
+  padding: 2px 5px;
+  margin-left: 10px;
   border: none;
   vertical-align: text-bottom;
 }
 
-.toggle-view-button:hover, .toggle-view-button:focus {
-  color: #3C4143;
+.toggle-view-button:hover {
+  color: $text-color3;
+  outline: none;
+}
+
+.toggle-view-button:focus {
+  color: $primary-background-color;
+  outline: none;
 }
 
 .toggle-view-button-active {
-  color: $blue;
-  background-color: $white;
+  color: $text-color11;
+  background-color: transparent;
   font-size: 20px;
-  padding: 10px 15px;
+  padding: 2px 5px;
+  margin-left: 10px;
+  outline: none;
   border: none;
   vertical-align: text-bottom;
 }
 
  .modal {
-   top: 56px;
+   top: 43px;
  }
 
 .modal-backdrop.in{
@@ -107,7 +123,7 @@
   .modal-content {
     height: 100%;
     box-shadow: none;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: $background-color2;
 
     .modal-body {
       margin: 0px;
@@ -127,7 +143,7 @@
   .main-menu-button {
     background-color: transparent;
     border: none;
-    color: #F8F8F8;
+    color: $primary-background-color;
     font-size: 16px;
     line-height: 13px;
     width: 100%;
@@ -148,7 +164,7 @@
   }
 
   .main-menu-button:hover, .main-menu-button:focus {
-    color: $blue;
+    color: $text-color4;
     modal-backdrop.in
     .view-inspect-button-icon {
       background-image: url($icons-folder-path + '/binocularicon_hover.png');
@@ -164,9 +180,9 @@
   }
 
   .main-menu-button-active {
-    background-color: $blue;
+    background-color: $turquoise-blue;
     border: none;
-    color: #3C4143;
+    color: $text-color3;
     font-size: 16px;
     line-height: 13px;
     width: 100%;
diff --git a/resources/scss/inventory/_inventory.scss b/resources/scss/inventory/_inventory.scss
index ddac3a1..67adff5 100644
--- a/resources/scss/inventory/_inventory.scss
+++ b/resources/scss/inventory/_inventory.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .inventory-pane {
   padding: 5px;
 }
diff --git a/resources/scss/setAttribute/_editAttributeform.scss b/resources/scss/setAttribute/_editAttributeform.scss
new file mode 100644
index 0000000..d069a8c
--- /dev/null
+++ b/resources/scss/setAttribute/_editAttributeform.scss
@@ -0,0 +1,122 @@
+/**
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017 Amdocs
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ *
+ * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ */
+
+html {
+  font-family: $base-font-regular;
+}
+
+form {
+  margin: 50px 20px 20px 20px;
+  font-size: $body-font-1;
+}
+
+div.attribute-field, div.centre {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  margin: 10px 5px;
+}
+
+form > div > h2,
+div.centre > span.error-message{
+  min-width: 550px;
+  margin: 15px 0px 5px 0px;
+}
+
+div.attribute-field > label {
+  font-weight: bold;
+  margin-right: 10px;
+  min-width: 170px;
+  text-align: right;
+  padding: 6px 9px;
+}
+
+div.attribute-field > div {
+  flex: 1;
+  max-width: 500px;
+  display: flex;
+  flex-flow: column;
+  position: relative;
+}
+
+div.attribute-field > div > * {
+  flex: 1;
+  padding: 5px 8px;
+  border: solid 1px $border-color5;
+}
+
+div.attribute-field > div > select {
+  min-height: 30px;
+}
+
+div > span.error-message {
+  font-weight: bold;
+  color: $background-color10;
+  border: none;
+}
+
+div > span.error-message:before {
+  display: inline-block;
+  text-rendering: auto;
+  content: '\F06A';
+  margin-right: 5px;
+  font: normal normal normal 14px/1 FontAwesome;
+}
+
+form > div > button {
+  margin: 10px;
+  border-radius: 5px;
+  padding: 10px 5px 5px 5px;
+  font-weight: bold;
+  font-size: $heading-font-3;
+}
+
+form > div > button[type=submit] {
+  color: $primary-background-color;
+  background-image: linear-gradient($background-color12, $background-color5);
+  border: solid 1px $border-color3;
+}
+
+form > div > button[type=submit]:before {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  text-rendering: auto;
+  content: '\F1D8';
+  margin-right: 5px;
+}
+
+form>div button[type=submit][disabled] {
+  opacity: .6;
+  cursor: not-allowed;
+}
+
+form > div > button[type=button] {
+  color: $text-color3;
+  background-image: linear-gradient($primary-background-color, $background-color8);
+  border: solid 1px $border-color5;
+}
+
+form>div button[type=button][disabled] {
+  opacity: .6;
+  cursor: not-allowed;
+}
diff --git a/resources/scss/style.scss b/resources/scss/style.scss
index d8fa260..aa0c54d 100644
--- a/resources/scss/style.scss
+++ b/resources/scss/style.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 @import "common";
 @import "components";
 @import "modules";
diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
index 6c349af..b65cb57 100644
--- a/resources/scss/tier-support/_search.scss
+++ b/resources/scss/tier-support/_search.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .auto-complete-search {
   display: inline-block;
   vertical-align: text-bottom;
@@ -31,9 +30,9 @@
   float: left;
 }
 
-.auto-complete-search-button-group{
-  position: absolute;
-  width: 90px;
+.auto-complete-search-button-group {
+  position: absolute !important;
+  padding-top: 3px;
 }
 
 .auto-complete-search input.form-control {
@@ -41,36 +40,35 @@
 }
 
 .auto-complete-search-button, .auto-complete-search-button:focus {
-  background-color: $light-gray;
-  padding-bottom: 8px;
+  background-color: $search-button-background-color;
   width: 45px;
   height: 30px;
-  border: solid 1px $gray;
+  border: solid 1px $search-border-color1;
 }
 
 .auto-complete-search button:hover {
-  background-color: $blue;
+  background-color: $search-background-color1;
 }
 
 .auto-complete-search .fa-lg {
   font-size: 1em;
   line-height: 1em;
-  background-color: $light-gray;
+  background-color: $search-button-background-color;
 }
 
 .auto-complete-search button:hover .fa-search {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
 }
 
 .auto-complete-search .btn-group .auto-complete-clear-button {
   border: none;
-  margin-left: -35px;
-  margin-top: 2px;
-  padding: 5px 12px 8px 12px;
+  margin-left: -35px !important;
+  height: 30px;
+  background-color: transparent;
 
   i {
-    color: #009fdb;
+    color: $search-text-color1;
     opacity: 0.3;
     filter: alpha(opacity=30);
     background-color: transparent;
@@ -81,26 +79,28 @@
   background-color: transparent;
 
   i.fa-times {
-    color: #009fdb;
+    color: $search-text-color1;
     opacity: 1;
     background-color: transparent;
   }
 }
 
 .auto-complete-search button:hover .fa-times {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
 }
 
 .react-autosuggest__container {
   display: inline-block;
   position: relative;
+  padding-top: 3px;
 }
 
-.react-autosuggest__input{
+.react-autosuggest__input {
   width: 655px;
   height: 30px;
   display: inline-block;
+  padding-top: 10px;
 }
 
 .react-autosuggest__input:focus {
@@ -117,20 +117,19 @@
   overflow-y: scroll;
   height: 200px;
   border:1px ;
-
 }
 
-.react-autosuggest__suggestions-containerCopy{
+.react-autosuggest__suggestions-containerCopy {
   display: none;
   display: block;
   position: absolute;
   top: 30px;
   width: 655px;
-  border: 1px solid #aaa;
-  background-color: #fff;
+  border: 1px solid $search-border-color1;
+  background-color: $primary-background-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  z-index: 2;
+  z-index: 90;
   overflow-y: hidden;
 }
 
@@ -139,11 +138,11 @@
   position: absolute;
   top: 30px;
   width: 655px;
-  border: 1px solid #aaa;
-  background-color: #fff;
+  border: 1px solid $search-border-color1;
+  background-color: $primary-background-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  z-index: 2;
+  z-index: 99;
   overflow-x: hidden;
 }
 
@@ -161,14 +160,14 @@
 }
 
 .react-autosuggest__suggestion--focused {
-  background-color: #ddd;
+  background-color: $search-background-color3;
 }
 
 .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
   font-size: 12px;
-  color: #777;
-  border-top: 1px dashed #ccc;
+  color: $search-background-color2;
+  border-top: 1px dashed $search-border-color1;
 }
 
 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
@@ -185,10 +184,11 @@
   flex: 20;
 }
 
-.suggestionColumnTwo{
+.suggestionColumnTwo {
   flex: 80;
 }
-.highlight{
+
+.highlight {
   font-weight: bolder;
   background-color:inherit;
   padding: 0px;
diff --git a/resources/scss/tier-support/_selectedNodeDetails.scss b/resources/scss/tier-support/_selectedNodeDetails.scss
index 0532319..ec4798c 100644
--- a/resources/scss/tier-support/_selectedNodeDetails.scss
+++ b/resources/scss/tier-support/_selectedNodeDetails.scss
@@ -21,14 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .ts-selected-node-details {
   padding: 20px;
-  color: $dark-gray;
+  color: $border-color2;
   font-family: $body-font-1;
 
   h1 {
-    color: $blue;
+    color: $selected-node-details-color1;
     font-size: $heading-font-2;
     margin-bottom: 5px;
   }
@@ -40,7 +39,7 @@
   margin-top: 15px;
 
   th {
-    color: $gray;
+    color: $border-color2;
   }
 
   td {
@@ -49,14 +48,14 @@
 
   .left-column-cell {
     padding: 7px 5px 5px 0px;
-    border-bottom: solid 1px $light-gray;
-    border-right: solid 1px $light-gray;
+    border-bottom: solid 1px $border-color5;
+    border-right: solid 1px $border-color5;
     width: 50%;
   }
 
   .right-column-cell {
     padding: 7px 5px 5px 15px;
-    border-bottom: solid 1px $light-gray;
+    border-bottom: solid 1px $border-color5;
   }
 }
 
diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss
index db0770e..dc07be0 100644
--- a/resources/scss/tier-support/_splitPane.scss
+++ b/resources/scss/tier-support/_splitPane.scss
@@ -21,15 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .SplitPane {
-  min-width: 1280px;
-  //108 is the height of the header in tsui
-  height: calc(100% - 108px) !important;
+  min-width: $minimum-application-width;
+  height: calc(100% - #{$total-header-height}) !important;
 }
 
 .Resizer {
-  background: #000;
+  background: $border-color1;
   opacity: .2;
   z-index: 1;
   -moz-box-sizing: border-box;
@@ -48,28 +46,28 @@
 .Resizer.horizontal {
   height: 11px;
   margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
   cursor: row-resize;
   width: 100%;
 }
 
 .Resizer.horizontal:hover {
-  border-top: 5px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+  border-top: 5px solid $border-color2;
+  border-bottom: 5px solid $border-color2;
 }
 
 .Resizer.vertical {
   width: 11px;
   margin: 0 -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
   cursor: col-resize;
 }
 
 .Resizer.vertical:hover {
-  border-left: 5px solid rgba(0, 0, 0, 0.5);
-  border-right: 5px solid rgba(0, 0, 0, 0.5);
+  border-left: 5px solid $border-color2;
+  border-right: $border-color2;
 }
 Resizer.disabled {
   cursor: not-allowed;
@@ -79,7 +77,7 @@ Resizer.disabled:hover {
 }
 
 .Pane2 {
-  background-color: $tlv-light-gray;
-  border-left: solid 2px $light-gray;
-  overflow: hidden;
+  background-color: $background-color4;
+  border-left: solid 2px $border-color5;
+  overflow: auto;
 }
diff --git a/resources/scss/visualizations/_layout.scss b/resources/scss/visualizations/_layout.scss
index 74d15f1..fa756f5 100644
--- a/resources/scss/visualizations/_layout.scss
+++ b/resources/scss/visualizations/_layout.scss
@@ -21,9 +21,8 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 #audit-visualizations {
-  padding: 10px;
+  padding: 0px 10px 10px 25px;
 }
 
 #visualization-violation-severities {
@@ -31,24 +30,24 @@
 }
 
 #visualization-severity-minor {
-  border: solid 2px $yellow;
+  border: solid 2px $border-color7;
   font-size: 14px;
   margin: 0px 10px;
-  padding: 6px 10px 0px 10px;
+  padding: 3px 10px;
 }
 
 #visualization-severity-major {
-  border: solid 2px $orange;
+  border: solid 2px $border-color12;
   font-size: 14px;
   margin: 0px 10px;
-  padding: 6px 10px 0px 10px;
+  padding: 3px 10px;
 }
 
 #visualization-severity-critical {
-  border: solid 2px $red;
+  border: solid 2px $border-color10;
   font-size: 14px;
-  margin: 10px 14px;
-  padding: 9px 10px 0px 10px;
+  margin: 0px 10px;
+  padding: 3px 10px;
 }
 
 .visualization-title {
@@ -56,6 +55,14 @@
   margin-bottom: 15px;
 }
 
+.visualization-violation-count {
+  margin-bottom: 15px;
+}
+
+.visualization-charts {
+  margin-top: 0px;
+}
+
 .visualization-chart-side-by-side {
   width: 50%;
   float: left;
diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/vnfSearch/_vnfSearch.scss
index 0f63fcb..7dbe809 100644
--- a/resources/scss/components/_dateRange.scss
+++ b/resources/scss/vnfSearch/_vnfSearch.scss
@@ -20,21 +20,3 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
-.date-range {
-  display: block;
-}
-
-.date-range label {
-  margin: 5px 0px;
-  min-width: 70px;
-}
-
-.date-input {
-
-}
-
-.date-input input {
-  padding: 3px 2px 2px 4px;
-}