new scrolling

src/index.css

 html{
     width:100%;
     height: 100%;
+    overflow:hidden;
 }
 body {
 width: 100%;

src/styles/containers/layout.scss

@@ -56,6 +56,29 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+/* Turn on custom 8px wide scrollbar */
+.layout-card-container::-webkit-scrollbar {
+    width: 8px; /* 1px wider than Lion. */
+    /* This is more usable for users trying to click it. */
+    background-color: rgba(0,0,0,0);
+    -webkit-border-radius: 100px;
+  }
+  /* hover effect for both scrollbar area, and scrollbar 'thumb' */
+.layout-card-container::-webkit-scrollbar:hover {
+    background-color: rgba(0, 0, 0, 0.09);
+  }
+  
+  /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+.layout-card-container::-webkit-scrollbar-thumb:vertical {
+    /* This is the EXACT color of Mac OS scrollbars. 
+       Yes, I pulled out digital color meter */
+    background: rgba(0,0,0,0.5);
+    -webkit-border-radius: 100px;
+  }
+.layout-card-container::-webkit-scrollbar-thumb:vertical:active {
+    background: rgba(0,0,0,0.61); /* Some darker color when you click it */
+    -webkit-border-radius: 100px;
+  }
 
 @media screen and (max-width: map-get($breakpoints, lg) - 1px) {
   .layout-sidebar-toggle-container {

src/styles/whatsOpen.scss

@@ -16,3 +16,4 @@
 @import './containers/facilityCard';
 @import './containers/layout';
 @import './containers/searchBar';
+