Displaying service coarse graph

Change-Id: I88e6c83421d0f9fee1f34595fb640e4987e93514
diff --git a/views/ngXosViews/serviceGrid/src/css/main.css b/views/ngXosViews/serviceGrid/src/css/main.css
index ae13614..c36e56d 100644
--- a/views/ngXosViews/serviceGrid/src/css/main.css
+++ b/views/ngXosViews/serviceGrid/src/css/main.css
@@ -1,3 +1,37 @@
+xos-side-panel .xos-side-panel-content {
+  position: fixed;
+  width: 30%;
+  height: 100%;
+  padding: 25px;
+  background: #fff;
+  overflow: scroll; }
+  xos-side-panel .xos-side-panel-content.right {
+    border-left: 1px solid #555555;
+    top: 0;
+    right: 0;
+    visibility: hidden;
+    box-shadow: -10px 0px 20px -8px rgba(0, 0, 0, 0.75); }
+  xos-side-panel .xos-side-panel-content.right.out {
+    animation: 0.5s slideOutRight ease-in-out;
+    visibility: visible; }
+  xos-side-panel .xos-side-panel-content.right.in {
+    animation: 0.5s slideInRight ease-in-out;
+    visibility: visible; }
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible; }
+  to {
+    transform: translate3d(0, 0, 0); } }
+
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0); }
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0); } }
+
 #xosServiceGrid service-graph {
   display: block;
   width: 100%;