Theming the scrollbar of the body

src/app/app.component.html

@@ -47,6 +47,6 @@
 	</div>
 </header>
 
-<main >
+<main>
 	<router-outlet></router-outlet>
 </main>

src/app/app.component.scss

@@ -20,13 +20,13 @@
 
 .link
 {
-  outline: none;
-  color: inherit;
-  
-  &:hover
-  {
-	text-decoration: none !important;
-  }
+	outline: none;
+	color: inherit;
+	
+	&:hover
+	{
+		text-decoration: none !important;
+	}
 }
 
 .nav-link
@@ -107,4 +107,33 @@ input::-webkit-search-cancel-button
 .dropButton
 {
 	outline: none;
-}
+}
+
+main
+{
+	max-height: calc(100vh - 68px) !important;
+
+	&:last-child
+	{
+		display: block;
+		overflow-y: auto;
+
+		scrollbar-color: #999 transparent;
+
+		&::-webkit-scrollbar
+		{
+			width: 8px;
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb
+		{
+			background-color: #999;
+
+			&:host-context(.hoverEnabled) &:hover
+			{
+				background-color: rgb(134, 127, 127);
+			}
+		}
+	}
+}

src/styles.scss

@@ -107,5 +107,5 @@ mat-icon
 
 .cdk-overlay-container
 {
-  z-index: 2000 !important;
+	z-index: 2000 !important;
 }