[CORD-1043] Fine-grained service graph first draft

Change-Id: I16566b0c38dda64fa920120ce16ea699ca157279
diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.scss b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
new file mode 100644
index 0000000..425b1bf
--- /dev/null
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
@@ -0,0 +1,55 @@
+@import './../../../style/vars.scss';
+@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+
+xos-fine-grained-tenancy-graph {
+  display: block;
+  // background: $color-accent;
+
+  svg {
+    height: 800px;
+    width: 100%;
+    background-color: $panel-filled-bg;
+    border-radius: 3px;
+  }
+
+  .node-group {
+
+    .node {
+      cursor: pointer;
+    }
+
+    .node {
+      rect, circle {
+        stroke: $color-accent;
+        fill: $background-color;
+      }
+
+      &.network > circle{
+        stroke: blue;
+      }
+
+      &.tenant > rect{
+        stroke: green;
+      }
+
+      &.subscriber > rect{
+        stroke: red;
+      }
+    }
+
+    .node > text {
+      fill: #fff;
+      font-size: 20px;
+    }
+  }
+
+  .link-group {
+    line {
+      stroke: $color-accent;
+    }
+  }
+  .arrow-marker {
+    stroke: $color-accent;
+    fill: $color-accent;
+  }
+}
\ No newline at end of file