Updated Sparky to add ECOMP functionality Browse, Specialized Search, BYOQ, and the Builder FE Updates

Issue-ID: AAI-3250
Change-Id: I576e37f77f7e9b40d72e4a5e7de645e9f62bc7d2
Signed-off-by: wr148d <wr148d@att.com>

18 files changed, 1757 insertions, 8 deletions

diff --git a/resources/scss/_browse.scss b/resources/scss/_browse.scss
new file mode 100644
index 0000000..b2941aa
--- /dev/null
+++ b/resources/scss/_browse.scss
@@ -0,0 +1,45 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+ .browse-content {
+   margin: 30px;
+
+   div[class^="col-"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+ }
+
+ .browse-card-content {
+  text-align: left;
+
+  i {
+    margin: 0 auto;
+    cursor: pointer;
+  }
+ }
+
+ .browse-fa {
+    font-size: 96px;
+    font-style: normal;
+    text-align: center;
+    color: #007bff;
+    margin-bottom: 20px !important;
+ }
diff --git a/resources/scss/_custom.scss b/resources/scss/_custom.scss
new file mode 100644
index 0000000..d6b8ffd
--- /dev/null
+++ b/resources/scss/_custom.scss
@@ -0,0 +1,349 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+.model-card {
+	.panel {
+	  background-color: initial;
+	  box-shadow: none;
+	  margin-bottom: 0;
+	}
+  
+	.panel-default > .panel-heading {
+	  padding-left: 0;
+	  border: 0;
+	  padding: 0;
+	  color: #191919;
+	}
+	
+	.panel-default > .panel-heading + .panel-collapse > .panel-body {
+	  overflow-y: scroll;
+	  max-height: 200px;
+	  background-color: #fff;
+	  margin-top: 10px;
+	}
+  }
+
+  .aggregate-card {
+    height: 700px !important;
+    margin: 15px 0;
+
+    .aggregate-card-content {
+      overflow: hidden;
+      margin-left: 12px;
+    }
+
+    .aggregate-attribute {
+      margin-left: 24px;
+    }
+
+    .aggregate-card-content:hover {
+      overflow-y: scroll;
+    }
+
+    .label-default {
+      background-color: #5a5a5a;
+    }
+  }
+  
+  .btn-outline-primary {
+	color: #007bff;
+	background-color: transparent;
+	background-image: none;
+	border-color: #007bff;
+  }
+  
+  .btn-outline-primary:hover {
+	color: #fff;
+	background-color: #007bff;
+	border-color: #007bff;
+  }
+  
+  .btn-outline-primary:focus, .btn-outline-primary.focus {
+	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  }
+  
+  .btn-outline-primary.disabled, .btn-outline-primary:disabled {
+	color: #007bff;
+	background-color: transparent;
+  }
+  
+  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-primary.dropdown-toggle {
+	color: #fff;
+	background-color: #007bff;
+	border-color: #007bff;
+  }
+  
+  .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+  .show > .btn-outline-primary.dropdown-toggle:focus {
+	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  }
+  .model-container .card{
+	height: 400px !important;
+  }
+  .table-header-view th{
+	background: #009fdb;
+	color:#ffffff;
+  }
+  .table-header-view{  
+	color:#ffffff;
+	width:auto !important;
+  }
+  .filter{
+	margin-left:0px !important;
+	margin-right:0px !important;
+  }
+  .filter:last-child {
+	margin-bottom:20px !important;
+  }
+  .react-bootstrap-table table{
+	width:100%;
+	min-width:100%;
+  }
+  .relationshipTable .label-default {
+	background-color: #5a5a5a !important;
+  }
+  .parent-expand-bar {
+	background-color: #81c784;  
+  }
+  .react-bootstrap-table {
+      width: 100%;
+      max-height: 500px;
+      overflow: auto;
+  }
+  .react-bootstrap-table table{
+	font-size:13px;
+  }
+  .react-bootstrap-table table th{
+	word-wrap: break-word;
+	white-space: nowrap;
+  }
+  .filter-label{
+	display:flex;
+	margin-bottom:0px;
+	margin-top:5px;
+  }
+  .nav-tabs > li > a {
+	margin-right: 2px;
+	line-height: 1.42857;
+	border: 1px solid #dfdfdf;
+	border-radius: 10px 10px 0 0px;
+	font-size: 14px;
+	color:#4d6069;
+  }
+  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+	color: #FFFFFF;
+	background-color: #009fdb;
+	border: 1px solid transparent;
+	border-bottom-color: transparent;
+	cursor: default;
+  }
+  .multipleNodes .model-container {
+	margin: 0px;
+	//width: max-content;
+  }
+  .multipleNodes .container-fluid{
+	padding-left:2px;
+  }
+  .nav-tabs {
+	padding:0px;
+	border-bottom: 4px solid #009fdb;
+  }
+  .nav-tabs > li {
+	float: left;
+	margin-bottom: -3px;
+  }
+  .table-striped > tbody > tr:nth-child(2n) > td {
+     background-color: #ffffff;
+  }
+  .table-striped > tbody > tr:nth-child(2n+1) > td {
+     background-color: #dddddd;
+  }
+  .table-striped > tbody > tr:hover td {
+    background-color: #009fdb4d;
+  }
+  .table-striped > thead > tr > th {
+      background-color: #009fdb;
+      color: #FFFFFFFF;
+  }
+  .relationshipTable{
+	background:#ffffff;
+  }
+  .relationshipTable th {
+	padding: 5px;
+  }
+  .relationshipTable ul {
+	max-height: 300px;
+	overflow-y: scroll;
+  }
+  .relationshipTable li{
+	padding:10px 0px 10px 3px;
+	border:1px solid #7c8388
+  }
+ .relationshipTable li:nth-child(2n){
+		background-color: #ffffff;
+ }
+ .relationshipTable li:nth-child(2n+1){
+		background-color: #dddddd;
+ }
+ .relationshipTable li:hover{
+	 background-color: #009fdb4d;
+ }
+ .react-bootstrap-table .table-hover tr:hover {
+   cursor: auto !important;
+}
+.react-bootstrap-table td.expand-cell {
+  cursor: pointer !important;
+}
+
+.react-bootstrap-table td{
+  white-space:pre-wrap !important;
+}
+.pre-wrap-text{
+  white-space: pre-wrap !important;
+}
+#downloadRangeForm .radio{
+  margin-top:10px;
+
+}
+#downloadRangeForm input[type='radio']{
+  margin-top:5px;
+}
+#downloadRangeForm input{
+  padding:5px 0px 0px 5px
+}
+#downloadRangeForm span{
+  margin-left:5px;
+}
+#downloadRangeForm .warning{
+  color:#ffa500;
+  font-weight:bold;
+  margin:0px !important;
+}
+#downloadRangeForm{
+  margin:10px 0px;
+}
+#downloadPagePane h2{
+  margin-bottom: 10px;
+}
+#downloadRangeForm input[type=radio]:checked:before{
+  font-size: 34px;
+  text-align: center;
+  line-height: 12px;
+}
+.modal-backdrop.in{
+  opacity:0.5 !important;
+}
+.spinner{
+  z-index:9999 !important;
+}
+.savedQueryTemplate th{
+  background:#69a8c7 !important;
+  padding:2px !important;
+}
+.tab-content .form-control{
+  height:37px !important;
+}
+.alignFormTwinElements{
+  width:48% !important;
+  float:left;
+  margin:0px 5px 0px 0px !important;
+}
+.btn-space{
+  margin: 5px !important;
+}
+#template .btn {
+  padding: 6px 16px;
+  margin: 0.2em;
+  white-space: normal;
+  box-shadow: 1px 2px #0c88d7;
+}
+#template .dropdownButton {
+  width:100%;
+}
+#template .btn-secondary {
+  background-color: #fdfdfd;
+  border: 1px solid #d7dbf6;
+}
+@media (min-width: 768px){
+  #customDslBuilderModel .modal-dialog{
+    width: 700px !important;
+    margin: 30px auto;
+  }
+}
+.dsl-panel .caret{
+    right: 0px !important;
+    top: 12px;
+    position: absolute;
+}
+.dsl-panel .inputFilter{
+  padding: 5px 5px 0px 5px !important;
+  width: 89% !important;
+  margin:3px 0px 5px 0px;
+}
+.dsl-panel .btn{
+  font-size:12px !important;
+}
+.inputBoxError{
+  border: 1px solid #ec110b;
+  padding:2px;
+  margin:1px;
+}
+.toggleSwitch .btn-success, .toggleSwitch .btn-success:hover{
+  color: #fff;
+  background-color:#aadc1f;
+  border-color: #888888 !important;
+}
+.toggleSwitch{
+  position: fixed !important;
+  float: right;
+  z-index: 999;
+  right: 10px;
+  margin:5px;
+  top:-2px;
+}
+.switch.btn {
+  min-width: 4.7rem !important;  
+}
+.switch-off.btn {
+  padding-left: 1.0rem;
+}
+.toggleSwitch .btn-danger, .toggleSwitch .btn-danger:hover{
+  color: #000;
+  background-color: #e9ecef;
+  border-color: #888888;
+}
+.switch.off .switch-group {
+  left: -100%;
+  transition: left 1s;
+}
+.switch.on .switch-group {
+  transition: left 1s;
+}
+.toggleSwitch .btn{
+  border-radius:5px;
+  width:100px;
+}
+.switch-handle {
+  border-radius:0px;
+}
+.toggleSwitch .btn-light{
+  width:0px;
+}
diff --git a/resources/scss/_customByoq.scss b/resources/scss/_customByoq.scss
new file mode 100644
index 0000000..f885eb9
--- /dev/null
+++ b/resources/scss/_customByoq.scss
@@ -0,0 +1,438 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+.tinkerpop-book {
+  background-repeat: no-repeat;
+  height: 300px !important;
+  width: 700px;
+}
+.fixed-panel {
+  position: absolute;
+  top: 100px;
+  width: 20%;
+  right: 20px;
+}
+
+.customDsl .card {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.addCardFooter {
+  padding-bottom:50px;
+}
+.card-body {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+.dark-modal .modal-content {
+  background-color: white;
+  color: #292b2c;
+}
+.dark-modal .close {
+  color: #292b2c;
+}
+.dsl-hint {
+  font-size: 2rem !important;
+  cursor: pointer;
+  height: 0.5rem;
+}
+.dsl-hint:hover {
+  color: #292b2c;
+  background-color: white;
+  cursor: pointer;
+  border-color: #0062cc;
+}
+
+.dsl-hint:focus, .dsl-hint.focus {
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.card > .list-group:first-child .list-group-item:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.card > .list-group:last-child .list-group-item:last-child {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.card-body {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+
+.card-title {
+  margin-bottom: 0.75rem;
+}
+
+.card-subtitle {
+  margin-top: -0.375rem;
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link:hover {
+  text-decoration: none;
+}
+
+.card-link + .card-link {
+  margin-left: 1.25rem;
+}
+
+.card-header-help {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+}
+
+.card-header {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.card-header:first-child {
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+
+.card-header + .list-group .list-group-item:first-child {
+  border-top: 0;
+}
+
+.card-footer {
+  padding: 0.75rem 1.25rem;
+  background-color: #f2f2f2;
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.cfFormat{
+  position:absolute;
+  bottom:0;
+  width:100%;
+}
+
+.card-footer:last-child {
+  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
+}
+
+.card-header-tabs {
+  margin-right: -0.625rem;
+  margin-bottom: -0.75rem;
+  margin-left: -0.625rem;
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem;
+}
+
+.card-img {
+  width: 100%;
+  border-radius: calc(0.25rem - 1px);
+}
+
+.card-img-top {
+  width: 100%;
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
+}
+
+.card-img-bottom {
+  width: 100%;
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+
+.card-deck {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.card-deck .card {
+  margin-bottom: 15px;
+}
+
+@media (min-width: 576px) {
+  .card-deck {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+  .card-deck .card {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 0%;
+    flex: 1 0 0%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    margin-right: 15px;
+    margin-bottom: 0;
+    margin-left: 15px;
+  }
+}
+
+.card-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.card-group > .card {
+  margin-bottom: 15px;
+}
+
+@media (min-width: 576px) {
+  .card-group {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+  }
+  .card-group > .card {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 0%;
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+  .card-group > .card + .card {
+    margin-left: 0;
+    border-left: 0;
+  }
+  .card-group > .card:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:first-child .card-img-top,
+  .card-group > .card:first-child .card-header {
+    border-top-right-radius: 0;
+  }
+  .card-group > .card:first-child .card-img-bottom,
+  .card-group > .card:first-child .card-footer {
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:last-child .card-img-top,
+  .card-group > .card:last-child .card-header {
+    border-top-left-radius: 0;
+  }
+  .card-group > .card:last-child .card-img-bottom,
+  .card-group > .card:last-child .card-footer {
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:only-child {
+    border-radius: 0.25rem;
+  }
+  .card-group > .card:only-child .card-img-top,
+  .card-group > .card:only-child .card-header {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+  .card-group > .card:only-child .card-img-bottom,
+  .card-group > .card:only-child .card-footer {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
+    border-radius: 0;
+  }
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header,
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
+    border-radius: 0;
+  }
+}
+
+.card-columns .card {
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 576px) {
+  .card-columns {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+    -webkit-column-gap: 1.25rem;
+    -moz-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+  .card-columns .card {
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-white {
+  color: #fff !important;
+}
+.customDsl a.bg-primary:hover, a.bg-primary:focus,
+button.bg-primary:hover,
+button.bg-primary:focus {
+  background-color: #0062cc !important;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+.dsl-hint-form-group {
+  margin-bottom: 1rem;
+  margin-top: 25px;
+}
+
+.customDsl pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.customDsl pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  display: block;
+  padding: 0px;
+  font-size: 13px;
+  line-height: 1.42857;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #191919;
+  background-color: #ffffff;
+  border: none;
+  border-radius: 0;
+}
+.customDsl pre {
+  white-space: pre-wrap !important;
+}
+
+blockquote {
+  border: 1px solid #999;
+  page-break-inside: avoid;
+}
+
+.customDsl [class*="licon-"]::before, .customDsl [class*="icon-"]::after {
+  font-size: 8em;
+  height: 8em;
+}
+.hidden {
+  display:none;
+}
+.show{
+  display:block;
+}
+
+.customDsl .btn i {
+  font-size: 30px;
+  font-style: normal;
+  text-align: center;
+  color: #007bff;
+}
+.node {
+  cursor: pointer;
+}
+
+.node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.node text {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+
+.dsl-panel .panel{
+    margin-bottom: 0px !important;
+}
+.actionsRow {
+    white-space: nowrap;
+}
+
+.toggle-theme.react-toggle--checked .react-toggle-track {
+  background-color: #009fdb;
+}
diff --git a/resources/scss/_spinner.scss b/resources/scss/_spinner.scss
new file mode 100644
index 0000000..3803b65
--- /dev/null
+++ b/resources/scss/_spinner.scss
@@ -0,0 +1,35 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+.spin-container {
+  overflow: hidden;
+  position: relative;
+}
+
+.spinner {
+  position: absolute;
+  z-index: 999;
+  left: 50%;
+  top: 45%;
+}
+
+.spin-content {
+  opacity: 0.2;
+}
diff --git a/resources/scss/_typography.scss b/resources/scss/_typography.scss
new file mode 100644
index 0000000..982c6bd
--- /dev/null
+++ b/resources/scss/_typography.scss
@@ -0,0 +1,27 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+
+$heading-font-2: 20px;
+$heading-font-3: 18px;
+$heading-font-4: 16px;
+
+$body-font-1: 16px;
+$body-font-2: 14px;
diff --git a/resources/scss/_variables.scss b/resources/scss/_variables.scss
new file mode 100644
index 0000000..fd15be9
--- /dev/null
+++ b/resources/scss/_variables.scss
@@ -0,0 +1,41 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+$minimum-application-width: 1000px;
+
+$neutral-gray: #b7bfc3;
+$light-gray: #cfd6d9;
+$very-light-gray: #eff3f3;
+$turquoise-blue: #01afd1;
+$dark-blue: #004b68;
+$darkest: #323b3f;
+$dark-gray: #7c8388;
+$bluish-gray: #72848c;
+$redish-orange: #fe7550;
+$amber: #fab32b;
+$red: #d03d3c;
+
+$border-color7: $amber;
+$border-color10: $red;
+$border-color12: $redish-orange;
+
+
+/* Textures */
+$images-folder-name: "../icons";
diff --git a/resources/scss/bootstrap-cust/_buttons.scss b/resources/scss/bootstrap-cust/_buttons.scss
index 92382aa..c1f2984 100644
--- a/resources/scss/bootstrap-cust/_buttons.scss
+++ b/resources/scss/bootstrap-cust/_buttons.scss
@@ -5,3 +5,37 @@
 .btn-info {
   @include button-variant($text-color1, $background-color12, $text-color7);
 }
+
+.btn-outline-primary {
+    color: #007bff;
+    background-color: transparent;
+    background-image: none;
+    border-color: #007bff;
+}
+
+.btn-outline-primary:hover {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-outline-primary:focus, .btn-outline-primary.focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+    color: #007bff;
+    background-color: transparent;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
diff --git a/resources/scss/bootstrap-cust/_card.scss b/resources/scss/bootstrap-cust/_card.scss
new file mode 100644
index 0000000..815b5e9
--- /dev/null
+++ b/resources/scss/bootstrap-cust/_card.scss
@@ -0,0 +1,262 @@
+.card {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  height: 300px;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.addCardFooter {
+  padding-bottom: 50px;
+}
+
+.card-content {
+  margin: 16px;
+  height: 100%;
+}
+
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.card > .list-group:first-child .list-group-item:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.card > .list-group:last-child .list-group-item:last-child {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.card-body {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+
+.card-subtitle {
+  margin-top: -0.375rem;
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link:hover {
+  text-decoration: none;
+}
+
+.card-link + .card-link {
+  margin-left: 1.25rem;
+}
+
+.card-header-help {
+  padding: 0.75rem 1.25rem;
+  width:100%;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.card-header {
+  padding: 0.75rem 0.75rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.card-header:first-child {
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+
+.card-header + .list-group .list-group-item:first-child {
+  border-top: 0;
+}
+
+.card-footer {
+  padding: 0.75rem 0.75rem;
+  background-color: #f2f2f2;
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.card-footer:last-child {
+  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
+}
+
+.card-header-tabs {
+  margin-right: -0.625rem;
+  margin-bottom: -0.75rem;
+  margin-left: -0.625rem;
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem;
+}
+
+.card-img {
+  width: 100%;
+  border-radius: calc(0.25rem - 1px);
+}
+
+.card-img-top {
+  width: 100%;
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
+}
+
+.card-img-bottom {
+  width: 100%;
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+
+.card-deck {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.card-deck .card {
+  margin-bottom: 15px;
+}
+
+@media (min-width: 576px) {
+  .card-deck {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+  .card-deck .card {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 0%;
+    flex: 1 0 0%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    margin-right: 15px;
+    margin-bottom: 0;
+    margin-left: 15px;
+  }
+}
+
+.card-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.card-group > .card {
+  margin-bottom: 15px;
+}
+
+@media (min-width: 576px) {
+  .card-group {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+  }
+  .card-group > .card {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 0%;
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+  .card-group > .card + .card {
+    margin-left: 0;
+    border-left: 0;
+  }
+  .card-group > .card:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:first-child .card-img-top, .card-group > .card:first-child .card-header {
+    border-top-right-radius: 0;
+  }
+  .card-group > .card:first-child .card-img-bottom, .card-group > .card:first-child .card-footer {
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:last-child .card-img-top, .card-group > .card:last-child .card-header {
+    border-top-left-radius: 0;
+  }
+  .card-group > .card:last-child .card-img-bottom, .card-group > .card:last-child .card-footer {
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:only-child {
+    border-radius: 0.25rem;
+  }
+  .card-group > .card:only-child .card-img-top, .card-group > .card:only-child .card-header {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+  .card-group > .card:only-child .card-img-bottom, .card-group > .card:only-child .card-footer {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
+    border-radius: 0;
+  }
+}
+
+.card-columns .card {
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 576px) {
+  .card-columns {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+    -webkit-column-gap: 1.25rem;
+    -moz-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+  }
+  .card-columns .card {
+    display: inline-block;
+    width: 100%;
+  }
+}
diff --git a/resources/scss/bootstrap-cust/_panels.scss b/resources/scss/bootstrap-cust/_panels.scss
index 9ee5622..74f7424 100644
--- a/resources/scss/bootstrap-cust/_panels.scss
+++ b/resources/scss/bootstrap-cust/_panels.scss
@@ -1,3 +1,25 @@
 .panel {
   border: none;
-}
\ No newline at end of file
+}
+
+.model-card {
+  .panel {
+    background-color: initial;
+    box-shadow: none;
+    margin-bottom: 0;
+  }
+
+  .panel-default > .panel-heading {
+    padding-left: 0;
+    border: 0;
+    padding: 0;
+    color: #191919 !important;
+  }
+  
+  .panel-default > .panel-heading + .panel-collapse > .panel-body {
+    overflow-y: scroll;
+    max-height: 250px;
+    background-color: #fff;
+    margin-top: 15px;
+  }
+}
diff --git a/resources/scss/bootstrap.scss b/resources/scss/bootstrap.scss
index a42e5e7..e3cb012 100644
--- a/resources/scss/bootstrap.scss
+++ b/resources/scss/bootstrap.scss
@@ -21,7 +21,7 @@
 // ONAP CORE
 @import "common/variables";
 
-// Import Typography Section 
+// Import Typography Section
 @import "common/typography";
 
 
@@ -71,6 +71,7 @@
 @import "bootstrap-cust/list-group";
 @import "bootstrap/panels";
 @import "bootstrap-cust/panels";
+@import "bootstrap-cust/card";
 // @import "bootstrap/responsive-embed";
 //@import "bootstrap/wells";
 @import "bootstrap/close";
diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss
index 11265c5..0d826f3 100644
--- a/resources/scss/common/_layout.scss
+++ b/resources/scss/common/_layout.scss
@@ -26,6 +26,7 @@
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
+    overflow:auto;
 }
 
 .view-container {
@@ -38,8 +39,7 @@
 .showContainer {
 }
 
-.spin-container {
-	overflow: hidden;
+.spinner-container {
 	position: relative;
 }
 
@@ -50,6 +50,6 @@
 	top: 49%;
 }
 
-.spin-content {
+.spinner-content {
 	opacity: 0.2;
 }
diff --git a/resources/scss/common/_variables.scss b/resources/scss/common/_variables.scss
index 9c4bddb..87de010 100644
--- a/resources/scss/common/_variables.scss
+++ b/resources/scss/common/_variables.scss
@@ -37,7 +37,7 @@ $acadia-brown: #5a5a5a;
 $light-gray: #cfd6d9;
 $light-gray-2: #d2d2d2;
 $neutral-gray: #b7bfc3;
-$dark-gray: #7c8388;
+$dark-gray: #191919;
 $t-blue: #0396b4;
 $light-green: #d1de42;
 $amber: #fab32b;
diff --git a/resources/scss/customQuery/_customQuery.scss b/resources/scss/customQuery/_customQuery.scss
new file mode 100644
index 0000000..06e8cbd
--- /dev/null
+++ b/resources/scss/customQuery/_customQuery.scss
@@ -0,0 +1,84 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+.addPadding {
+  margin-right: 50px;
+  margin-left: 50px;
+  margin-top: 20px;
+}
+.addPaddingTop {
+  margin-top: 20px;
+}
+.addPaddingSide {
+  margin-left: 20px;
+}
+.addPaddingLeft {
+  margin-left: 5px;
+}
+.my-4 {
+  margin-top: 1.5rem !important;
+}
+.display-2 {
+  font-size: 5.5rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+.lead {
+  color: #191919;
+  font-family: 'Omnes-Regular';
+  font-size: 2.4rem;
+  line-height: 2.8rem;
+  margin-top: 10px;
+  letter-spacing: -0.024rem;
+}
+.jumbotron {
+  padding: 2rem 1rem;
+  margin-bottom: 2rem;
+  background-color: #e9ecef;
+  border-radius: 0.3rem;
+}
+.cardwrap {
+  //word-wrap: break-word;
+  //overflow-wrap: break-word;
+  //word-break: break-all;
+  -ms-word-wrap: break-word;
+  word-wrap: break-word;
+}
+.dropdown-menu {
+  display: flow;
+  min-width: 360px;
+}
+.hidden {
+  display:none;
+}
+.show{
+  display:block;
+}
+.invalid {
+  border: 1px solid red;
+  background-color: #FDA49A;
+  color: white;
+}
+.cardWrapHeaderTxt {
+  font-weight: bold;
+  font-style: italic;
+  text-align: center;
+  color: blue;
+}
diff --git a/resources/scss/filter/_filter.scss b/resources/scss/filter/_filter.scss
new file mode 100644
index 0000000..cdfc983
--- /dev/null
+++ b/resources/scss/filter/_filter.scss
@@ -0,0 +1,135 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+.badgeFilter {
+    color: #31708f;
+    background-color: #fff;
+    display: inline-block;
+    white-space: nowrap;
+    vertical-align: baseline;
+    box-sizing: border-box;
+    border-radius: 1em;
+    border-color: #009fdb;
+    margin: 0.4em 0.4em 0.4em 0em;
+    padding: 1px;
+    box-shadow: 1px 2px #abe0f5;
+    border: 1px solid #7fd6f8;
+    font-size: 0.9em;
+}
+
+.badgeFilter span{
+    float: left;
+    padding: 0.1em 0.2em;
+}
+
+.badgeFilter .close{
+    float:left;
+    color:#363434 !important
+}
+
+.leftNavSelection {
+    color:#ffffff;
+    background-color: #009fdb;
+    box-sizing : border-box;
+    border-radius: 0.2em;
+    border-color: #009fdb;
+}
+
+.leftNavSelection div:hover {
+    color:#000;
+    background-color: #ffffff;    
+}
+.leftNavSelected {
+    color:#ffffff;
+    background-color: #e99b0a;
+    box-sizing : border-box;
+    border-radius: 0.2em;
+    border-color: #f59505;
+}
+#filters {
+    margin:20px 0px 20px 20px;
+}
+.leftNavSelection header {
+    margin:20px 0px 0px 0px;
+    border-bottom:1px solid #fff;
+    font-size: 16px;
+    padding: 0.25em;    
+}
+.mainSectionSelection .panel-primary {
+    border: 1px solid transparent;
+    border-color: #009fdb;
+    border-radius: 1;
+}
+#filterPane .btn {
+    padding: 6px 16px;
+    margin: 0.2em;
+    white-space: normal;
+    box-shadow: 1px 2px #0c88d7;
+}
+#filterPane .dropdownButton {
+    width:100%;
+}
+#filterPane .btn-secondary {
+    background-color: #fdfdfd;
+    border: 1px solid #d7dbf6;
+}
+
+#filterPane .dropdown{
+    width:100%;
+}
+
+#filterPane .caret, #template .caret {
+    right: 0px;
+    top: 12px;
+    position: absolute;
+    margin: 0.2em;
+}
+#filterPane input {
+    padding:5px 5px 7px 5px;
+}
+.topBottomMargin {
+    margin:0.5em 0em;
+}
+#filterPane .label {
+    display: inline-block;
+    padding: 0.9em;
+    margin: 1em 0em;
+}
+.custom-container{
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: 0px;
+    padding-right: 0px;
+    width: inherit;
+}
+.removeLeftPadding{
+    padding-left:0px !important;
+}
+.resultMessage{
+    font-size: 20px;
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 5;
+    color: inherit;
+}
+.badgeFilter i{
+    font-style: italic;
+    font-size: 0.9em !important;
+}
diff --git a/resources/scss/header/_layout.scss b/resources/scss/header/_layout.scss
index 14d90ac..2d63f00 100644
--- a/resources/scss/header/_layout.scss
+++ b/resources/scss/header/_layout.scss
@@ -137,6 +137,11 @@
     margin-bottom: 5px;
   }
 
+  .font-awesome-icon{
+    font-size: 32px;
+    margin-top: 5px;
+  }
+
   .main-menu-button {
     background-color: transparent;
     border: none;
@@ -159,6 +164,22 @@
       background-image: url($icons-folder-path + '/vnfSearchicon.png');
     }
 
+    .browse-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .byoq-ext-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .custom-query-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
+    .specialized-search-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon.png');
+    }
+
     .configurable-view-button-icon {
       background-image: url($icons-folder-path + '/reports.svg');
       -webkit-filter: brightness(500);
@@ -181,6 +202,22 @@
       background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
     }
 
+    .browse-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .byoq-ext-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .custom-query-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
+    .specialized-search-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_hover.png');
+    }
+
     .configurable-view-button-icon {
       background-image: url($icons-folder-path + '/reports.svg');
       -webkit-filter: brightness(1);
@@ -211,6 +248,22 @@
       background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
     }
 
+    .browse-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .byoq-ext-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .custom-query-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
+    .specialized-search-button-icon {
+      background-image: url($icons-folder-path + '/vnfSearchicon_active.png');
+    }
+
     .configurable-view-button-icon {
       background-image: url($icons-folder-path + '/reports.svg');
       -webkit-filter: brightness(0.55);
diff --git a/resources/scss/model/_model.scss b/resources/scss/model/_model.scss
new file mode 100644
index 0000000..a6d8dc8
--- /dev/null
+++ b/resources/scss/model/_model.scss
@@ -0,0 +1,183 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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=========================================================
+ */
+
+.model-container {
+  margin: 30px;
+
+  i {
+    font-size: 30px;
+  }
+}
+
+.model-gallery {
+  padding-left: 15px;
+  padding-right: 15px;
+
+  div[class^="col-"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.model-card {
+  height: 500px !important;
+  margin: 15px 0;
+
+  .model-card-content {
+    overflow: hidden;
+    margin-left: 24px;
+  }
+  
+  .model-card-content:hover {
+    overflow-y: scroll;
+  }
+
+  .label-default {
+    background-color: #5a5a5a;
+  }
+}
+
+.d3-model-card {
+   height: 700px !important;
+   margin: 15px 0;
+
+   .model-card-header{
+     color: #FFFFFF;
+     background-color: #48a9fb;
+   }
+
+   .model-card-content {
+     overflow: hidden;
+     overflow-x: auto;
+     height: 700px !important;
+     margin-left: 24px;
+   }
+
+   .model-card-content:hover {
+     overflow-y: scroll;
+   }
+
+   .label-default {
+     background-color: #5a5a5a;
+   }
+ }
+ .template-textarea {
+    height: 300px !important
+ }
+ .model-template-card {
+   height: 500px !important;
+   margin: 15px 0;
+
+   .model-card-header{
+     color: #FFFFFF;
+     background-color: #48a9fb;
+   }
+
+   .model-card-content {
+     overflow: hidden;
+     height: 500px !important;
+     margin-left: 24px;
+   }
+
+   .model-card-content:hover {
+     overflow-y: scroll;
+   }
+
+   .label-default {
+     background-color: #5a5a5a;
+   }
+ }
+.d3-history-query-card {
+   height: 750px !important;
+   margin: 15px 0;
+
+   .history-query-card-header{
+     color: #FFFFFF;
+     background-color: #48a9fb;
+   }
+
+   .history-query-card-content {
+     overflow: hidden;
+     height: 750px !important;
+     margin-left: 24px;
+   }
+
+   .history-query-card-content:hover {
+     overflow-y: scroll;
+   }
+
+   .label-default {
+     background-color: #5a5a5a;
+   }
+ }
+
+
+.custom-accordion{
+  background-color: white !important;
+  border-radius: 8px;
+}
+
+.modal-override{
+  max-width: 1350 !important;
+  width: 1350px !important;
+}
+.tabIconChosen{
+    color:#FFFFFF !important;
+}
+.tabIconNotChosen{
+    color:#000000 !important;
+}
+.animationControlIcon{
+    font-size: 35px !important;
+}
+i.animationControlIcon:hover {
+  color: #97b0bf !important;
+}
+i.animationControlIcon:active {
+    color: #4f5b67 !important;
+}
+.animationPlayingIcon{
+    font-size: 35px !important;
+    color: #1bd645 !important;
+}
+.animationStoppedIcon{
+    font-size: 35px !important;
+    color: #ff0016 !important;
+}
+.animationPausedIcon{
+    font-size: 35px !important;
+    color: #4f5b67 !important;
+}
+
+.nodeIcon-deleted{
+ background-color: orangered !important;
+ color: white !important;
+ border-radius: 10px;
+}
+.nodeIcon-created{
+ background-color: #8ed422 !important;
+ color: white !important;
+ border-radius: 10px;
+}
+.nodeIcon-modified{
+ background-color: orange !important;
+ color: white !important;
+ border-radius: 10px;
+}
diff --git a/resources/scss/style.scss b/resources/scss/style.scss
index ca81d2f..af239e8 100644
--- a/resources/scss/style.scss
+++ b/resources/scss/style.scss
@@ -18,6 +18,18 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
+
 @import "common";
 @import "components";
 @import "modules";
+@import "_variables";
+@import "_typography";
+@import "_spinner";
+@import "filter/filter.scss";
+@import "bootstrap-cust/card";
+@import "_custom";
+
+@import "browse";
+@import "model/model.scss";
+@import "_customByoq.scss";
+@import "customQuery/customQuery.scss";
diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
index 892d303..fc15371 100644
--- a/resources/scss/tier-support/_search.scss
+++ b/resources/scss/tier-support/_search.scss
@@ -28,8 +28,9 @@
 }
 
 .auto-complete-search-button-group {
-  position: absolute !important;
-  padding-top: 3px;
+  position: inherit !important;
+  display: inline-block !important;
+  vertical-align: bottom !important;
 }
 
 .auto-complete-search input.form-control {
@@ -43,6 +44,13 @@
   border: solid 1px $search-border-color1;
 }
 
+.auto-complete-help-button, .auto-complete-help-button:focus {
+  background-color: $white;
+  width: 45px;
+  height: 30px;
+  border: solid 1px $search-border-color1;
+}
+
 .auto-complete-search button:hover {
   background-color: $search-background-color1;
 }
@@ -53,11 +61,22 @@
   background-color: $search-button-background-color;
 }
 
+.auto-complete-search .fa-question-circle {
+  font-size: 1em;
+  line-height: 1em;
+  background-color: $white;
+}
+
 .auto-complete-search button:hover .fa-search {
   color: $primary-background-color;
   background-color: $search-background-color1;
 }
 
+.auto-complete-search button:hover .fa-question-circle {
+  color: $primary-background-color;
+  background-color: $search-background-color1;
+}
+
 .auto-complete-search .btn-group .auto-complete-clear-button {
   border: none;
   margin-left: -35px !important;
@@ -189,3 +208,12 @@
   background-color:inherit;
   padding: 0px;
 }
+
+.modal-searchable {
+  height: 500px !important;
+  margin: 15px 0;
+  overflow-y: scroll;
+}
+.modal-searchable:hover {
+  overflow-y: scroll;
+}