Merge branch 'master' into skeleton

2025-12-22 21:07:07 +00:00 · 2018-06-17 14:30:19 +03:00 · 2018-06-15 18:42:25 +03:00 · 2018-06-15 18:36:24 +03:00 · 2018-05-09 18:18:30 +03:00 · 2018-05-06 14:47:26 +03:00
1440 changed files with 18270 additions and 97848 deletions
--- a/16
+++ b/16
@@ -1,16 +0,0 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Image/Vector/Icon Credits
 // -----------------------------------------------------------------------------------------------------
 Avatars - https://uifaces.co/
 Flag icons - http://www.famfamfam.com/lab/icons/flags/
 Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
 A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
 Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
 Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
 Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
 Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
 Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
 Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
 Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
 Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
 First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4
--- a/3
+++ b/3
@@ -1,2 +1 @@
-This project is protected by Envato's Regular License. For more information,
+https://themeforest.net/licenses/terms/regular
 check the official license page at https://themeforest.net/licenses/terms/regular
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Fuse - Angular
-Material Design Admin Template with Angular 8 and Angular Material
+Material Design Admin Template with Angular 6+ and Angular Material
 ## The Community
--- a/angular.json
+++ b/angular.json
@@ -4,34 +4,32 @@
    "newProjectRoot": "projects",
    "projects": {
        "fuse": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
-                        "outputPath": "dist/fuse",
+                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "tsconfig.app.json",
+                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
-                            "src/assets",
+                            "src/assets"
                            "src/app/main/angular-material-elements"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
-                        "scripts": [],
+                        "scripts": []
                        "showCircularDependencies": false
                    },
                    "configurations": {
                        "production": {
@@ -49,26 +47,7 @@
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
-                            "buildOptimizer": true,
+                            "buildOptimizer": true
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "4mb",
                                    "maximumError": "6mb"
                                }
                            ]
                        },
                        "ec": {
                            "sourceMap": true,
                            "extractCss": true
                        },
                        "hmr": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.hmr.ts"
                                }
                            ]
                        }
                    }
                },
@@ -83,10 +62,12 @@
                        },
                        "hmr": {
                            "hmr": true,
-                            "browserTarget": "fuse:build:hmr"
+                            "fileReplacements": [
-                        },
+                                {
-                        "ec": {
+                                    "replace": "src/environments/environment.ts",
-                            "browserTarget": "fuse:build:ec"
+                                    "with": "src/environments/environment.hmr.ts"
                                }
                            ]
                        }
                    }
                },
@@ -101,43 +82,50 @@
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "tsconfig.spec.json",
+                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "karma.conf.js",
+                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                            "styles.scss"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
-                        ],
+                        ]
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
-                            "tsconfig.app.json",
+                            "src/tsconfig.app.json",
-                            "tsconfig.spec.json",
+                            "src/tsconfig.spec.json"
                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
-                            "**/node_modules/**",
+                            "**/node_modules/**"
                            "**/src/app/fake-db/**/*",
                            "**/src/assets/angular-material-examples/**/*"
                        ]
                    }
                }
            }
        },
        "fuse-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "fuse:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "fuse:serve:production"
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
--- a/12
+++ b/12
@@ -1,12 +0,0 @@
 # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
 not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@@ -1,12 +1,8 @@
 // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 const {SpecReporter} = require('jasmine-spec-reporter');
 /**
 * @type { import("protractor").Config }
 */
 exports.config = {
    allScriptsTimeout: 11000,
    specs            : [
@@ -28,7 +24,7 @@ exports.config = {
    onPrepare()
    {
        require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.json')
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
        });
        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
    }
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@@ -1,23 +1,14 @@
-import { FusePage } from './app.po';
+import { Fuse2Page } from './app.po';
 import { browser, logging } from 'protractor';
-describe('Fuse App', () => {
+describe('Fuse2 App', () => {
-    let page: FusePage;
+    let page: Fuse2Page;
    beforeEach(() => {
-        page = new FusePage();
+        page = new Fuse2Page();
    });
    it('should display welcome message', () => {
        page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
    });
    afterEach(async () => {
        // Assert that there are no errors emitted from the browser
        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
        expect(logs).not.toContain(jasmine.objectContaining({
            level: logging.Level.SEVERE
        } as logging.Entry));
    });
 });
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@@ -1,14 +1,11 @@
 import { browser, by, element } from 'protractor';
-export class FusePage
+export class Fuse2Page {
-{
+    navigateTo() {
-    navigateTo(): Promise<any>
+        return browser.get('/');
    {
        return browser.get('/') as Promise<any>;
    }
-    getParagraphText(): Promise<string>
+    getParagraphText() {
-    {
+        return element(by.css('app-root h1')).getText();
        return element(by.css('app #main')).getText() as Promise<string>;
    }
 }
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@@ -1,13 +0,0 @@
 {
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/e2e",
        "module": "commonjs",
        "target": "es5",
        "types": [
            "jasmine",
            "jasminewd2",
            "node"
        ]
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
  "name": "fuse",
-    "version": "8.1.1",
+  "version": "6.1.1",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
-        "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+    "start-hmr": "ng serve --configuration hmr -sm=false",
-        "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
+    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
@@ -18,71 +18,71 @@
  },
  "private": true,
  "dependencies": {
-        "@agm/core": "1.0.0-beta.5",
+    "@agm/core": "1.0.0-beta.3",
-        "@angular/animations": "8.1.0",
+    "@angular/animations": "6.0.5",
-        "@angular/cdk": "8.0.2",
+    "@angular/cdk": "6.2.1",
-        "@angular/common": "8.1.0",
+    "@angular/common": "6.0.5",
-        "@angular/compiler": "8.1.0",
+    "@angular/compiler": "6.0.5",
-        "@angular/core": "8.1.0",
+    "@angular/core": "6.0.5",
-        "@angular/flex-layout": "8.0.0-beta.26",
+    "@angular/flex-layout": "6.0.0-beta.16",
-        "@angular/forms": "8.1.0",
+    "@angular/forms": "6.0.5",
-        "@angular/material": "8.0.2",
+    "@angular/http": "6.0.5",
-        "@angular/material-moment-adapter": "8.0.2",
+    "@angular/material": "6.2.1",
-        "@angular/platform-browser": "8.1.0",
+    "@angular/material-moment-adapter": "6.2.1",
-        "@angular/platform-browser-dynamic": "8.1.0",
+    "@angular/platform-browser": "6.0.5",
-        "@angular/router": "8.1.0",
+    "@angular/platform-browser-dynamic": "6.0.5",
-        "@ngrx/effects": "8.0.1",
+    "@angular/router": "6.0.5",
-        "@ngrx/router-store": "8.0.1",
+    "@ngrx/effects": "6.0.1",
-        "@ngrx/store": "8.0.1",
+    "@ngrx/router-store": "6.0.1",
-        "@ngrx/store-devtools": "8.0.1",
+    "@ngrx/store": "6.0.1",
-        "@ngx-translate/core": "11.0.1",
+    "@ngrx/store-devtools": "6.0.1",
-        "@swimlane/dragula": "3.8.0",
+    "@ngx-translate/core": "10.0.2",
-        "@swimlane/ngx-charts": "12.0.1",
+    "@swimlane/ngx-charts": "8.1.0",
-        "@swimlane/ngx-datatable": "15.0.2",
+    "@swimlane/ngx-datatable": "13.0.1",
-        "@swimlane/ngx-dnd": "8.0.0",
+    "@swimlane/ngx-dnd": "4.0.0",
-        "@types/prismjs": "1.16.0",
+    "@types/prismjs": "1.9.0",
-        "angular-calendar": "0.27.12",
+    "angular-calendar": "0.25.2",
-        "angular-in-memory-web-api": "0.8.0",
+    "angular-in-memory-web-api": "0.6.0",
-        "chart.js": "2.8.0",
+    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
-        "d3": "5.9.7",
+    "core-js": "2.5.7",
-        "date-fns": "1.30.1",
+    "d3": "5.4.0",
    "hammerjs": "2.0.8",
-        "lodash": "4.17.11",
+    "lodash": "4.17.10",
-        "moment": "2.24.0",
+    "moment": "2.22.2",
-        "ng2-charts": "2.3.0",
+    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
-        "ngx-color-picker": "8.0.1",
+    "ngx-color-picker": "6.3.3",
-        "ngx-cookie-service": "2.2.0",
+    "ngx-cookie-service": "1.0.10",
    "perfect-scrollbar": "1.4.0",
-        "prismjs": "1.16.0",
+    "prismjs": "1.14.0",
-        "rxjs": "6.5.2",
+    "rxjs": "6.2.1",
-        "web-animations-js": "2.3.2",
+    "rxjs-compat": "6.2.1",
-        "zone.js": "0.9.1"
+    "web-animations-js": "2.3.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
-        "@angular/cli": "8.1.0",
+    "@angular/cli": "6.0.8",
-        "@angular/compiler-cli": "8.1.0",
+    "@angular/compiler-cli": "6.0.5",
-        "@angular/language-service": "8.1.0",
+    "@angular/language-service": "6.0.5",
-        "@angular-devkit/build-angular": "0.801.0",
+    "@angular-devkit/build-angular": "0.6.8",
    "@angularclass/hmr": "2.1.3",
-        "@types/jasmine": "3.3.13",
+    "@types/jasmine": "2.8.8",
-        "@types/jasminewd2": "2.0.6",
+    "@types/jasminewd2": "2.0.3",
-        "@types/lodash": "4.14.135",
+    "@types/lodash": "4.14.109",
    "@types/node": "8.9.5",
-        "codelyzer": "5.1.0",
+    "codelyzer": "4.2.1",
-        "jasmine-core": "3.4.0",
+    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
-        "karma": "4.1.0",
+    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
-        "karma-coverage-istanbul-reporter": "2.0.5",
+    "karma-coverage-istanbul-reporter": "2.0.1",
-        "karma-jasmine": "2.0.1",
+    "karma-jasmine": "1.1.2",
-        "karma-jasmine-html-reporter": "1.4.2",
+    "karma-jasmine-html-reporter": "0.2.2",
-        "protractor": "5.4.2",
+    "protractor": "5.3.2",
-        "ts-node": "7.0.1",
+    "ts-node": "5.0.1",
-        "tslib": "1.10.0",
+    "tslint": "5.9.1",
-        "tslint": "5.15.0",
+    "typescript": "2.7.2",
-        "typescript": "3.4.5",
+    "webpack-bundle-analyzer": "2.13.1"
        "webpack-bundle-analyzer": "3.3.2"
  }
 }
--- a/src/@fuse/animations/index.ts
+++ b/src/@fuse/animations/index.ts
@@ -51,23 +51,26 @@ export const fuseAnimations = [
    ]),
    trigger('fadeInOut', [
-        state('0, void', style({
+        state('0', style({
            display: 'none',
            opacity: 0
        })),
-        state('1, *', style({
+        state('1', style({
            display: 'block',
            opacity: 1
        })),
        transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in')),
+        transition('0 => 1', animate('300ms ease-in'))
        transition('void <=> *', animate('300ms ease-in'))
    ]),
    trigger('slideInOut', [
        state('0', style({
-            height: '0px'
+            height : '0px',
            display: 'none'
        })),
        state('1', style({
-            height: '*'
+            height : '*',
            display: 'block'
        })),
        transition('1 => 0', animate('300ms ease-out')),
        transition('0 => 1', animate('300ms ease-in'))
@@ -117,15 +120,17 @@ export const fuseAnimations = [
                    })
                )
            ]
-        )
+        ),
    ]),
    trigger('slideInLeft', [
        state('void', style({
            transform: 'translateX(-100%)',
            display  : 'none'
        })),
        state('*', style({
            transform: 'translateX(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -134,9 +139,11 @@ export const fuseAnimations = [
    trigger('slideInRight', [
        state('void', style({
            transform: 'translateX(100%)',
            display  : 'none'
        })),
        state('*', style({
            transform: 'translateX(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -145,9 +152,11 @@ export const fuseAnimations = [
    trigger('slideInTop', [
        state('void', style({
            transform: 'translateY(-100%)',
            display  : 'none'
        })),
        state('*', style({
            transform: 'translateY(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
@@ -157,9 +166,11 @@ export const fuseAnimations = [
        state('void',
            style({
                transform: 'translateY(100%)',
                display  : 'none'
            })),
        state('*', style({
            transform: 'translateY(0)',
            display  : 'flex'
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material';
@Component({
    selector   : 'fuse-confirm-dialog',
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatDialogModule } from '@angular/material';
 import { MatDialogModule } from '@angular/material/dialog';
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
--- a/src/@fuse/components/countdown/countdown.component.scss
+++ b/src/@fuse/components/countdown/countdown.component.scss
@@ -1,4 +1,4 @@
-fuse-countdown {
+:host {
    display: flex;
    flex-direction: row;
    align-items: center;
--- a/src/@fuse/components/countdown/countdown.component.ts
+++ b/src/@fuse/components/countdown/countdown.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { interval, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import * as moment from 'moment';
@@ -6,8 +6,7 @@ import * as moment from 'moment';
@Component({
    selector   : 'fuse-countdown',
    templateUrl: './countdown.component.html',
-    styleUrls    : ['./countdown.component.scss'],
+    styleUrls  : ['./countdown.component.scss']
    encapsulation: ViewEncapsulation.None
 })
 export class FuseCountdownComponent implements OnInit, OnDestroy
 {
@@ -49,13 +48,9 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
        const currDate = moment();
        const eventDate = moment(this.eventDate);
-        // Get the difference in between the current date and event date in seconds
+        // Get the difference in between the current date and event date
        let diff = eventDate.diff(currDate, 'seconds');
        // Calculate the remaining time for the first time so there will be no
        // delay on the countdown
        this.countdown = this._secondsToRemaining(diff);
        // Create a subscribable interval
        const countDown = interval(1000)
            .pipe(
@@ -63,7 +58,14 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
                    return diff = diff - 1;
                }),
                map(value => {
-                    return this._secondsToRemaining(value);
+                    const timeLeft = moment.duration(value, 'seconds');
                    return {
                        days   : timeLeft.asDays().toFixed(0),
                        hours  : timeLeft.hours(),
                        minutes: timeLeft.minutes(),
                        seconds: timeLeft.seconds()
                    };
                })
            );
@@ -84,27 +86,4 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Private methods
    // -----------------------------------------------------------------------------------------------------
    /**
     * Converts given seconds to a remaining time
     *
     * @param seconds
     * @private
     */
    private _secondsToRemaining(seconds): any
    {
        const timeLeft = moment.duration(seconds, 'seconds');
        return {
            days   : timeLeft.asDays().toFixed(0),
            hours  : timeLeft.hours(),
            minutes: timeLeft.minutes(),
            seconds: timeLeft.seconds()
        };
    }
 }
--- a/src/@fuse/components/countdown/countdown.theme.scss
+++ b/src/@fuse/components/countdown/countdown.theme.scss
@@ -1,17 +0,0 @@
@mixin fuse-countdown-theme($theme) {
    $foreground: map-get($theme, foreground);
    fuse-countdown {
        .fuse-countdown {
            .time {
                .title {
                    color: map-get($foreground, secondary-text);
                }
            }
        }
    }
 }
--- a/src/@fuse/components/demo/demo-content/demo-content.component.html
+++ b/src/@fuse/components/demo/demo-content/demo-content.component.html
@@ -1,8 +1,10 @@
 <!-- DEMO CONTENT -->
-<div class="demo-content line-height-1.75">
+<div class="demo-content">
-    <h1 class="m-0">Early Sunrise in Winter</h1>
+    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
-    <h4 class="mt-0 secondary-text">Demo Content</h4>
+
    <h1>Early Sunrise</h1>
    <h4 class="secondary-text">Demo Content</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
@@ -10,7 +12,7 @@
        vestibulum. Suspendisse euismod in urna eu posuere.
    </p>
-    <blockquote class="my-24">
+    <blockquote>
        <p>
            Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
            et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
@@ -22,12 +24,16 @@
    </blockquote>
    <p>
-        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
+        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
-        <b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
+        elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
-        Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
+        nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
-        gravida. In hac habitasse platea dictumst. In et placerat eros, eu tempor turpis. Curabitur ac felis finibus,
+        habitasse platea dictumst.
-        elementum lectus vitae, venenatis est. Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel
+    </p>
-        erat condimentum tristique vel vel mi. Nulla id euismod mi, et mollis tellus.
+
    <p>
        In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
        Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
        Nulla id euismod mi, et mollis tellus.
    </p>
    <p>
@@ -37,12 +43,6 @@
        velit.
    </p>
    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
    <p class="mt-8 mb-24 secondary-text">
        <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>
    </p>
    <p>
        Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
        in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
@@ -52,18 +52,10 @@
    <p>
        Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
        ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
-        sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
+        sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
-        Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
+        fringilla nulla, sit amet congue felis dignissim at.
    </p>
    <ul>
        <li>Orci varius</li>
        <li>Magnis dis</li>
        <li>Conubia nostra</li>
        <li>Semper urna</li>
        <li>Donec viverra</li>
    </ul>
    <p>
        Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
        eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
@@ -77,7 +69,7 @@
        Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
        lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
        id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
-        viverra augue dolor, a venenatis tellus consectetur sit amet.
+        viverra augue dolor, a venenatis tellus consectetur sit amet...
    </p>
 </div>
 <!-- / DEMO CONTENT -->
--- a/src/@fuse/components/demo/demo.module.ts
+++ b/src/@fuse/components/demo/demo.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatDividerModule } from '@angular/material/divider';
+import { MatDividerModule, MatListModule } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
--- a/src/@fuse/components/highlight/highlight.component.scss
+++ b/src/@fuse/components/highlight/highlight.component.scss
@@ -1,9 +1,7 @@
 :host {
    display: block;
    width: 100%;
    padding: 8px;
    background: #263238;
    cursor: text;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
 }
--- a/src/@fuse/components/highlight/highlight.component.ts
+++ b/src/@fuse/components/highlight/highlight.component.ts
@@ -13,7 +13,7 @@ import '@fuse/components/highlight/prism-languages';
 export class FuseHighlightComponent implements OnInit, OnDestroy
 {
    // Source
-    @ContentChild('source', {static: true})
+    @ContentChild('source')
    source: ElementRef;
    // Lang
--- a/src/@fuse/components/index.ts
+++ b/src/@fuse/components/index.ts
@@ -4,7 +4,6 @@ export * from './demo/demo.module';
 export * from './highlight/highlight.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
 export * from './progress-bar/progress-bar.module';
 export * from './search-bar/search-bar.module';
 export * from './shortcuts/shortcuts.module';
 export * from './sidebar/sidebar.module';
--- a/src/@fuse/components/material-color-picker/material-color-picker.component.html
+++ b/src/@fuse/components/material-color-picker/material-color-picker.component.html
@@ -1,20 +1,20 @@
 <button mat-icon-button
        type="button"
        class="mat-elevation-z1"
        [matMenuTriggerFor]="colorMenu"
        (menuOpened)="onMenuOpen()"
-        [ngClass]="selectedPalette + '-' + selectedHue">
+        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
    <mat-icon>palette</mat-icon>
 </button>
-<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu mat-elevation-z8">
+<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
-    <header [ngClass]="selectedColor?.class || 'accent'" class="mat-elevation-z4"
+    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4"
            fxLayout="row" fxLayoutAlign="space-between center">
        <button mat-icon-button
                class="secondary-text"
                [style.visibility]="view==='hues'?'visible':'hidden'"
-                (click)="goToPalettesView($event)" aria-label="Palette">
+                (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
            <mat-icon class="s-20">arrow_back</mat-icon>
        </button>
@@ -23,40 +23,45 @@
        </span>
        <span *ngIf="!selectedColor?.palette">
-            Select a Color
+            Select Color
        </span>
        <button mat-icon-button
-                class="remove-color-button secondary-text"
+                class="remove-color-button"
-                (click)="removeColor($event)"
+                (click)="$event.stopPropagation();removeColor()"
-                aria-label="Remove color"
+                aria-label="Remove Color">
                matTooltip="Remove color">
            <mat-icon class="s-20">delete</mat-icon>
        </button>
    </header>
    <div [ngSwitch]="view" class="views">
        <div class="view" *ngSwitchCase="'palettes'">
            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color" fxLayout="row" fxLayoutAlign="center center"
+                <div class="color"
                     [ngClass]="'mat-'+color.key+'-bg'"
                     *ngFor="let color of (colors | keys)"
-                     [ngClass]="color.key"
+                     (click)="$event.stopPropagation();selectPalette(color.key)"
-                     [class.selected]="selectedPalette === color.key"
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                     (click)="selectPalette($event, color.key)">
+                    <span class="label">
                        {{color.key}}
                    </span>
                </div>
            </div>
        </div>
        <div class="view" *ngSwitchCase="'hues'" >
            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color" fxLayout="row" fxLayoutAlign="center center"
+                <div class="color" *ngFor="let hue of hues"
-                     *ngFor="let hue of hues"
+                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
-                     [fxHide]="selectedPalette === 'fuse-white' && hue !== '500' || selectedPalette === 'fuse-black' && hue !== '500'"
+                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
-                     [ngClass]="selectedPalette + '-' + hue"
+                     (click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                     [class.selected]="selectedHue === hue"
+                    <span class="label">
-                     (click)="selectHue($event, hue)">
+                        {{hue}}
                    </span>
                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
                </div>
            </div>
        </div>
--- a/src/@fuse/components/material-color-picker/material-color-picker.component.scss
+++ b/src/@fuse/components/material-color-picker/material-color-picker.component.scss
@@ -1,5 +1,5 @@
 .fuse-material-color-picker-menu {
-    width: 245px;
+    width: 208px;
    .mat-menu-content {
        padding: 0;
@@ -7,29 +7,44 @@
        .views {
            display: flex;
            flex-direction: column;
-            min-height: 165px;
+            position: relative;
            overflow: hidden;
            min-height: 258px;
            height: 308px;
            background-color: #F7F7F7;
            .view {
-                overflow: hidden;
+                position: absolute;
                width: 208px;
                height: 100%;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                .colors {
-                    padding: 1px 0 0 0;
+                    position: relative;
-                    margin-left: -1px;
+                    padding: 4px;
                    .color {
-                        width: 40px;
+                        position: relative;
-                        height: 40px;
+                        width: 46px;
-                        margin: 0 0 1px 1px;
+                        height: 46px;
                        margin: 2px;
                        border-radius: 0;
                        cursor: pointer;
                        transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
-                        &:hover {
+                        .label {
-                            border-radius: 20%;
+                            padding: 2px;
                            font-size: 10px;
                        }
-                        &.selected {
+                        mat-icon {
-                            border-radius: 50% !important;
+                            position: absolute;
                            top: 2px;
                            right: 2px;
                            font-size: 16px;
                            opacity: 0.7;
                        }
                    }
                }
--- a/src/@fuse/components/material-color-picker/material-color-picker.component.ts
+++ b/src/@fuse/components/material-color-picker/material-color-picker.component.ts
@@ -1,40 +1,55 @@
-import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 import { fuseAnimations } from '@fuse/animations';
 import { MatColors } from '@fuse/mat-colors';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR: any = {
    provide    : NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => FuseMaterialColorPickerComponent),
    multi      : true
 };
@Component({
    selector     : 'fuse-material-color-picker',
    templateUrl  : './material-color-picker.component.html',
    styleUrls    : ['./material-color-picker.component.scss'],
    animations   : fuseAnimations,
-    encapsulation: ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None
    providers    : [FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR]
 })
-export class FuseMaterialColorPickerComponent implements ControlValueAccessor
+export class FuseMaterialColorPickerComponent implements OnChanges
 {
    colors: any;
    hues: string[];
    view: string;
    selectedColor: any;
    view: string;
    @Input()
    selectedPalette: string;
    @Input()
    selectedHue: string;
-    // Color changed
+    @Input()
    selectedFg: string;
    @Input()
    value: any;
    @Output()
-    colorChanged: EventEmitter<any>;
+    onValueChange: EventEmitter<any>;
    @Output()
    selectedPaletteChange: EventEmitter<any>;
    @Output()
    selectedHueChange: EventEmitter<any>;
    @Output()
    selectedClassChange: EventEmitter<any>;
    @Output()
    selectedBgChange: EventEmitter<any>;
    @Output()
    selectedFgChange: EventEmitter<any>;
    // Private
-    private _color: string;
+    _selectedClass: string;
-    private _modelChange: (value: any) => void;
+    _selectedBg: string;
    private _modelTouched: (value: any) => void;
    /**
     * Constructor
@@ -42,18 +57,23 @@ export class FuseMaterialColorPickerComponent implements ControlValueAccessor
    constructor()
    {
        // Set the defaults
        this.colorChanged = new EventEmitter();
        this.colors = MatColors.all;
        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
-        this.selectedHue = '500';
+        this.selectedFg = '';
        this.selectedHue = '';
        this.selectedPalette = '';
        this.view = 'palettes';
        this.onValueChange = new EventEmitter();
        this.selectedPaletteChange = new EventEmitter();
        this.selectedHueChange = new EventEmitter();
        this.selectedClassChange = new EventEmitter();
        this.selectedBgChange = new EventEmitter();
        this.selectedFgChange = new EventEmitter();
        // Set the private defaults
-        this._color = '';
+        this._selectedClass = '';
-        this._modelChange = () => {
+        this._selectedBg = '';
        };
        this._modelTouched = () => {
        };
    }
    // -----------------------------------------------------------------------------------------------------
@@ -66,77 +86,89 @@ export class FuseMaterialColorPickerComponent implements ControlValueAccessor
     * @param value
     */
    @Input()
-    set color(value)
+    set selectedClass(value)
    {
-        if ( !value || value === '' || this._color === value )
+        if ( value && value !== '' && this._selectedClass !== value )
        {
-            return;
+            const color = value.split('-');
            if ( color.length >= 5 )
            {
                this.selectedPalette = color[1] + '-' + color[2];
                this.selectedHue = color[3];
            }
            else
            {
                this.selectedPalette = color[1];
                this.selectedHue = color[2];
            }
        }
        this._selectedClass = value;
    }
-        // Split the color value (red-400, blue-500, fuse-navy-700 etc.)
+    get selectedClass(): string
-        const colorParts = value.split('-');
+    {
-
+        return this._selectedClass;
        // Take the very last part as the selected hue value
        this.selectedHue = colorParts[colorParts.length - 1];
        // Remove the last part
        colorParts.pop();
        // Rejoin the remaining parts as the selected palette name
        this.selectedPalette = colorParts.join('-');
        // Store the color value
        this._color = value;
    }
-    get color(): string
+    /**
     * Selected bg
     *
     * @param value
     */
    @Input()
    set selectedBg(value)
    {
-        return this._color;
+        if ( value && value !== '' && this._selectedBg !== value )
        {
            for ( const palette in this.colors )
            {
                if ( !this.colors.hasOwnProperty(palette) )
                {
                    continue;
                }
                for ( const hue of this.hues )
                {
                    if ( this.colors[palette][hue] === value )
                    {
                        this.selectedPalette = palette;
                        this.selectedHue = hue;
                        break;
                    }
                }
            }
        }
        this._selectedBg = value;
    }
    get selectedBg(): string
    {
        return this._selectedBg;
    }
    // -----------------------------------------------------------------------------------------------------
-    // @ Control Value Accessor implementation
+    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
-     * Register on change function
+     * On changes
     *
-     * @param fn
+     * @param changes
     */
-    registerOnChange(fn: any): void
+    ngOnChanges(changes: any): void
    {
-        this._modelChange = fn;
+        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
-    }
+            changes.selectedClass && changes.selectedClass.currentValue === '' ||
-
+            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
    /**
     * Register on touched function
     *
     * @param fn
     */
    registerOnTouched(fn: any): void
    {
        this._modelTouched = fn;
    }
    /**
     * Write value to the view from model
     *
     * @param color
     */
    writeValue(color: any): void
    {
        // Return if null
        if ( !color )
        {
            this.removeColor();
            return;
        }
-
+        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
-        // Set the color
+        {
        this.color = color;
        // Update the selected color
            this.updateSelectedColor();
        }
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
@@ -145,61 +177,35 @@ export class FuseMaterialColorPickerComponent implements ControlValueAccessor
    /**
     * Select palette
     *
     * @param event
     * @param palette
     */
-    selectPalette(event, palette): void
+    selectPalette(palette): void
    {
        // Stop propagation
        event.stopPropagation();
        // Go to 'hues' view
        this.view = 'hues';
        // Update the selected palette
        this.selectedPalette = palette;
        // Update the selected color
        this.updateSelectedColor();
        this.view = 'hues';
    }
    /**
     * Select hue
     *
     * @param event
     * @param hue
     */
-    selectHue(event, hue): void
+    selectHue(hue): void
    {
        // Stop propagation
        event.stopPropagation();
        // Update the selected huse
        this.selectedHue = hue;
        // Update the selected color
        this.updateSelectedColor();
    }
    /**
     * Remove color
     *
     * @param event
     */
-    removeColor(event): void
+    removeColor(): void
    {
        // Stop propagation
        event.stopPropagation();
        // Return to the 'palettes' view
        this.view = 'palettes';
        // Clear the selected palette and hue
        this.selectedPalette = '';
        this.selectedHue = '';
        // Update the selected color
        this.updateSelectedColor();
        this.view = 'palettes';
    }
    /**
@@ -207,40 +213,49 @@ export class FuseMaterialColorPickerComponent implements ControlValueAccessor
     */
    updateSelectedColor(): void
    {
-        if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
+        setTimeout(() => {
            if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
            {
                return;
            }
-        // Set the selected color object
+            if ( this.selectedPalette !== '' && this.selectedHue !== '' )
            {
                this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
                this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
            }
            else
            {
                this.selectedBg = '';
                this.selectedFg = '';
            }
            this.selectedColor = {
                palette: this.selectedPalette,
                hue    : this.selectedHue,
-            class  : this.selectedPalette + '-' + this.selectedHue,
+                class  : this.selectedClass,
-            bg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
+                bg     : this.selectedBg,
-            fg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
+                fg     : this.selectedFg
            };
-        // Emit the color changed event
+            this.selectedPaletteChange.emit(this.selectedPalette);
-        this.colorChanged.emit(this.selectedColor);
+            this.selectedHueChange.emit(this.selectedHue);
            this.selectedClassChange.emit(this.selectedClass);
            this.selectedBgChange.emit(this.selectedBg);
            this.selectedFgChange.emit(this.selectedFg);
-        // Mark the model as touched
+            this.value = this.selectedColor;
-        this._modelTouched(this.selectedColor.class);
+            this.onValueChange.emit(this.selectedColor);
-
+        });
        // Update the model
        this._modelChange(this.selectedColor.class);
    }
    /**
-     * Go to palettes view
+     * Go back to palette selection
     *
     * @param event
     */
-    goToPalettesView(event): void
+    backToPaletteSelection(): void
    {
        // Stop propagation
        event.stopPropagation();
        this.view = 'palettes';
    }
--- a/src/@fuse/components/material-color-picker/material-color-picker.module.ts
+++ b/src/@fuse/components/material-color-picker/material-color-picker.module.ts
@@ -1,10 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FusePipesModule } from '@fuse/pipes/pipes.module';
@@ -22,7 +19,7 @@ import { FuseMaterialColorPickerComponent } from '@fuse/components/material-colo
        MatButtonModule,
        MatIconModule,
        MatMenuModule,
-        MatTooltipModule,
+        MatRippleModule,
        FusePipesModule
    ],
--- a/src/@fuse/components/material-color-picker/material-color-picker.theme.scss
+++ b/src/@fuse/components/material-color-picker/material-color-picker.theme.scss
@@ -1,14 +0,0 @@
@mixin fuse-material-color-picker-theme($theme) {
    $background: map-get($theme, background);
    .fuse-material-color-picker-menu {
        .mat-menu-content {
            .views {
                background: #303030;
            }
        }
    }
 }
--- a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
@@ -1,42 +1,26 @@
 <ng-container *ngIf="!item.hidden">
    <!-- normal collapse -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
+    <a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.url -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+    <a class="nav-link" *ngIf="item.url && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
       [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl -->
    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.function -->
-    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
          (click)="item.function()">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>
    <!-- item.url && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
-       (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl && item.function -->
    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
       (click)="item.function()"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
@@ -52,7 +36,7 @@
    <div class="children" [ngClass]="{'open': isOpen}">
-        <div class="{{fuseConfig.layout.navbar.primaryBackground}}">
+        <div class="{{fuseConfig.layout.navbar.background}}">
            <ng-container *ngFor="let item of item.children">
                <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
--- a/src/@fuse/components/navigation/horizontal/item/item.component.html
+++ b/src/@fuse/components/navigation/horizontal/item/item.component.html
@@ -1,38 +1,20 @@
 <ng-container *ngIf="!item.hidden">
    <!-- item.url -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
       [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl -->
    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.function -->
-    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
          (click)="item.function()">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>
    <!-- item.url && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
-       (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
       [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl && item.function -->
    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
       (click)="item.function()"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
--- a/src/@fuse/components/navigation/navigation.component.html
+++ b/src/@fuse/components/navigation/navigation.component.html
@@ -1,4 +1,5 @@
-<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
+<div id="main-navigation" class="nav"
     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
    <!-- Vertical Navigation Layout -->
    <ng-container *ngIf="layout === 'vertical'">
@@ -6,8 +7,7 @@
        <ng-container *ngFor="let item of navigation">
            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapsable>
                                           [item]="item"></fuse-nav-vertical-collapsable>
            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
        </ng-container>
@@ -21,8 +21,7 @@
        <ng-container *ngFor="let item of navigation">
            <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
-            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapsable>
                                             [item]="item"></fuse-nav-horizontal-collapsable>
            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
        </ng-container>
--- a/src/@fuse/components/navigation/navigation.component.scss
+++ b/src/@fuse/components/navigation/navigation.component.scss
@@ -4,7 +4,7 @@ fuse-navigation {
    display: flex;
    flex: 1 0 auto;
-    > .nav {
+    #main-navigation {
        margin: 0;
        padding: 0;
        width: 100%;
--- a/src/@fuse/components/navigation/navigation.component.ts
+++ b/src/@fuse/components/navigation/navigation.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { merge, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -8,8 +8,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
    selector     : 'fuse-navigation',
    templateUrl  : './navigation.component.html',
    styleUrls    : ['./navigation.component.scss'],
-    encapsulation  : ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None
    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseNavigationComponent implements OnInit
 {
@@ -23,12 +22,9 @@ export class FuseNavigationComponent implements OnInit
    private _unsubscribeAll: Subject<any>;
    /**
-     *
+     * Constructor
     * @param {ChangeDetectorRef} _changeDetectorRef
     * @param {FuseNavigationService} _fuseNavigationService
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService
    )
    {
@@ -52,24 +48,7 @@ export class FuseNavigationComponent implements OnInit
        this._fuseNavigationService.onNavigationChanged
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
                // Load the navigation
                this.navigation = this._fuseNavigationService.getCurrentNavigation();
                // Mark for check
                this._changeDetectorRef.markForCheck();
            });
        // Subscribe to navigation item
        merge(
            this._fuseNavigationService.onNavigationItemAdded,
            this._fuseNavigationService.onNavigationItemUpdated,
            this._fuseNavigationService.onNavigationItemRemoved
        ).pipe(takeUntil(this._unsubscribeAll))
         .subscribe(() => {
             // Mark for check
             this._changeDetectorRef.markForCheck();
            });
    }
 }
--- a/src/@fuse/components/navigation/navigation.module.ts
+++ b/src/@fuse/components/navigation/navigation.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule, MatRippleModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -1,14 +1,11 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import * as _ from 'lodash';
-import { FuseNavigationItem } from '@fuse/types';
+@Injectable()
@Injectable({
    providedIn: 'root'
 })
 export class FuseNavigationService
 {
    flatNavigation: any[] = [];
    onItemCollapsed: Subject<any>;
    onItemCollapseToggled: Subject<any>;
@@ -16,9 +13,6 @@ export class FuseNavigationService
    private _onNavigationChanged: BehaviorSubject<any>;
    private _onNavigationRegistered: BehaviorSubject<any>;
    private _onNavigationUnregistered: BehaviorSubject<any>;
    private _onNavigationItemAdded: BehaviorSubject<any>;
    private _onNavigationItemUpdated: BehaviorSubject<any>;
    private _onNavigationItemRemoved: BehaviorSubject<any>;
    private _currentNavigationKey: string;
    private _registry: { [key: string]: any } = {};
@@ -37,9 +31,6 @@ export class FuseNavigationService
        this._onNavigationChanged = new BehaviorSubject(null);
        this._onNavigationRegistered = new BehaviorSubject(null);
        this._onNavigationUnregistered = new BehaviorSubject(null);
        this._onNavigationItemAdded = new BehaviorSubject(null);
        this._onNavigationItemUpdated = new BehaviorSubject(null);
        this._onNavigationItemRemoved = new BehaviorSubject(null);
    }
    // -----------------------------------------------------------------------------------------------------
@@ -76,36 +67,6 @@ export class FuseNavigationService
        return this._onNavigationUnregistered.asObservable();
    }
    /**
     * Get onNavigationItemAdded
     *
     * @returns {Observable<any>}
     */
    get onNavigationItemAdded(): Observable<any>
    {
        return this._onNavigationItemAdded.asObservable();
    }
    /**
     * Get onNavigationItemUpdated
     *
     * @returns {Observable<any>}
     */
    get onNavigationItemUpdated(): Observable<any>
    {
        return this._onNavigationItemUpdated.asObservable();
    }
    /**
     * Get onNavigationItemRemoved
     *
     * @returns {Observable<any>}
     */
    get onNavigationItemRemoved(): Observable<any>
    {
        return this._onNavigationItemRemoved.asObservable();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------
@@ -177,30 +138,39 @@ export class FuseNavigationService
     * Get flattened navigation array
     *
     * @param navigation
     * @param flatNavigation
     * @returns {any[]}
     */
-    getFlatNavigation(navigation, flatNavigation: FuseNavigationItem[] = []): any
+    getFlatNavigation(navigation): any
    {
-        for ( const item of navigation )
+        for ( const navItem of navigation )
        {
-            if ( item.type === 'item' )
+            if ( navItem.type === 'item' )
            {
-                flatNavigation.push(item);
+                this.flatNavigation.push({
                    id        : navItem.id || null,
                    title     : navItem.title || null,
                    translate : navItem.translate || null,
                    type      : navItem.type,
                    icon      : navItem.icon || null,
                    url       : navItem.url || null,
                    function  : navItem.function || null,
                    exactMatch: navItem.exactMatch || false,
                    badge     : navItem.badge || null
                });
                continue;
            }
-            if ( item.type === 'collapsable' || item.type === 'group' )
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
            {
-                if ( item.children )
+                if ( navItem.children )
                {
-                    this.getFlatNavigation(item.children, flatNavigation);
+                    this.getFlatNavigation(navItem.children);
                }
            }
        }
-        return flatNavigation;
+        return this.flatNavigation;
    }
    /**
@@ -332,9 +302,6 @@ export class FuseNavigationService
        {
            navigation.push(item);
            // Trigger the observable
            this._onNavigationItemAdded.next(true);
            return;
        }
@@ -342,11 +309,6 @@ export class FuseNavigationService
        if ( id === 'start' )
        {
            navigation.unshift(item);
            // Trigger the observable
            this._onNavigationItemAdded.next(true);
            return;
        }
        // Add it to a specific location
@@ -364,33 +326,6 @@ export class FuseNavigationService
            // Add the item
            parent.children.push(item);
        }
        // Trigger the observable
        this._onNavigationItemAdded.next(true);
    }
    /**
     * Update navigation item with the given id
     *
     * @param id
     * @param properties
     */
    updateNavigationItem(id, properties): void
    {
        // Get the navigation item
        const navigationItem = this.getNavigationItem(id);
        // If there is no navigation with the give id, return
        if ( !navigationItem )
        {
            return;
        }
        // Merge the navigation properties
        _.merge(navigationItem, properties);
        // Trigger the observable
        this._onNavigationItemUpdated.next(true);
    }
    /**
@@ -418,8 +353,5 @@ export class FuseNavigationService
        // Remove the item
        parent.splice(parent.indexOf(item), 1);
        // Trigger the observable
        this._onNavigationItemRemoved.next(true);
    }
 }
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
@@ -1,45 +1,42 @@
 <ng-container *ngIf="!item.hidden">
-    <!-- normal collapsable -->
+    <!-- normal collapse -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
+    <a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
       (click)="toggleOpen($event)">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.url -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
-       (click)="toggleOpen($event)"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'">
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)"
-       (click)="toggleOpen($event)"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.function -->
-    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+    <span class="nav-link" *ngIf="!item.url && item.function"
-          (click)="toggleOpen($event);item.function()">
+          (click)="toggleOpen($event);item.function()" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>
    <!-- item.url && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
       (click)="toggleOpen($event);item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && item.function"
       (click)="toggleOpen($event);item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts
+++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { merge, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { FuseNavigationItem } from '@fuse/types';
@@ -30,12 +30,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
    /**
     * Constructor
     *
     * @param {ChangeDetectorRef} _changeDetectorRef
     * @param {FuseNavigationService} _fuseNavigationService
     * @param {Router} _router
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService,
        private _router: Router
    )
@@ -113,18 +111,6 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
        {
            this.collapse();
        }
        // Subscribe to navigation item
        merge(
            this._fuseNavigationService.onNavigationItemAdded,
            this._fuseNavigationService.onNavigationItemUpdated,
            this._fuseNavigationService.onNavigationItemRemoved
        ).pipe(takeUntil(this._unsubscribeAll))
         .subscribe(() => {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });
    }
    /**
@@ -168,10 +154,6 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
        }
        this.isOpen = true;
        // Mark for check
        this._changeDetectorRef.markForCheck();
        this._fuseNavigationService.onItemCollapseToggled.next();
    }
@@ -186,10 +168,6 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
        }
        this.isOpen = false;
        // Mark for check
        this._changeDetectorRef.markForCheck();
        this._fuseNavigationService.onItemCollapseToggled.next();
    }
--- a/src/@fuse/components/navigation/vertical/group/group.component.html
+++ b/src/@fuse/components/navigation/vertical/group/group.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="!item.hidden">
-    <div class="group-title" [ngClass]="item.classes">
+    <div class="group-title">
        <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
    </div>
--- a/src/@fuse/components/navigation/vertical/group/group.component.ts
+++ b/src/@fuse/components/navigation/vertical/group/group.component.ts
@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseNavigationItem } from '@fuse/types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
    selector   : 'fuse-nav-vertical-group',
    templateUrl: './group.component.html',
    styleUrls  : ['./group.component.scss']
 })
-export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
+export class FuseNavVerticalGroupComponent
 {
    @HostBinding('class')
    classes = 'nav-group nav-item';
@@ -18,57 +15,11 @@ export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
    @Input()
    item: FuseNavigationItem;
    // Private
    private _unsubscribeAll: Subject<any>;
    /**
     * Constructor
     */
-
+    constructor()
    /**
     *
     * @param {ChangeDetectorRef} _changeDetectorRef
     * @param {FuseNavigationService} _fuseNavigationService
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService
    )
    {
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
     * On init
     */
    ngOnInit(): void
    {
        // Subscribe to navigation item
        merge(
            this._fuseNavigationService.onNavigationItemAdded,
            this._fuseNavigationService.onNavigationItemUpdated,
            this._fuseNavigationService.onNavigationItemRemoved
        ).pipe(takeUntil(this._unsubscribeAll))
         .subscribe(() => {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });
    }
    /**
     * On destroy
     */
    ngOnDestroy(): void
    {
        // Unsubscribe from all subscriptions
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }
 }
--- a/src/@fuse/components/navigation/vertical/item/item.component.html
+++ b/src/@fuse/components/navigation/vertical/item/item.component.html
@@ -1,38 +1,36 @@
 <ng-container *ngIf="!item.hidden">
    <!-- item.url -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'">
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.function -->
-    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+    <span class="nav-link" *ngIf="!item.url && item.function"
-          (click)="item.function()">
+          (click)="item.function()" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>
    <!-- item.url && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
-       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'">
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
    <!-- item.externalUrl && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()"
-       (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
--- a/src/@fuse/components/navigation/vertical/item/item.component.ts
+++ b/src/@fuse/components/navigation/vertical/item/item.component.ts
@@ -1,16 +1,13 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseNavigationItem } from '@fuse/types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
    selector   : 'fuse-nav-vertical-item',
    templateUrl: './item.component.html',
    styleUrls  : ['./item.component.scss']
 })
-export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
+export class FuseNavVerticalItemComponent
 {
    @HostBinding('class')
    classes = 'nav-item';
@@ -18,56 +15,10 @@ export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
    @Input()
    item: FuseNavigationItem;
    // Private
    private _unsubscribeAll: Subject<any>;
    /**
     * Constructor
     */
-
+    constructor()
    /**
     *
     * @param {ChangeDetectorRef} _changeDetectorRef
     * @param {FuseNavigationService} _fuseNavigationService
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService
    )
    {
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
     * On init
     */
    ngOnInit(): void
    {
        // Subscribe to navigation item
        merge(
            this._fuseNavigationService.onNavigationItemAdded,
            this._fuseNavigationService.onNavigationItemUpdated,
            this._fuseNavigationService.onNavigationItemRemoved
        ).pipe(takeUntil(this._unsubscribeAll))
         .subscribe(() => {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });
    }
    /**
     * On destroy
     */
    ngOnDestroy(): void
    {
        // Unsubscribe from all subscriptions
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }
 }
--- a/src/@fuse/components/progress-bar/progress-bar.component.html
+++ b/src/@fuse/components/progress-bar/progress-bar.component.html
@@ -1,5 +0,0 @@
 <ng-container *ngIf="visible">
    <mat-progress-bar color="accent" [bufferValue]="bufferValue" [mode]="mode" [value]="value"></mat-progress-bar>
 </ng-container>
--- a/src/@fuse/components/progress-bar/progress-bar.component.scss
+++ b/src/@fuse/components/progress-bar/progress-bar.component.scss
@@ -1,17 +0,0 @@
@import "src/@fuse/scss/fuse";
 fuse-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99998;
    mat-progress-bar {
        .mat-progress-bar-buffer {
            background-color: #C5C6CB !important;
        }
    }
 }
--- a/src/@fuse/components/progress-bar/progress-bar.component.ts
+++ b/src/@fuse/components/progress-bar/progress-bar.component.ts
@@ -1,93 +0,0 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
@Component({
    selector     : 'fuse-progress-bar',
    templateUrl  : './progress-bar.component.html',
    styleUrls    : ['./progress-bar.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class FuseProgressBarComponent implements OnInit, OnDestroy
 {
    bufferValue: number;
    mode: 'determinate' | 'indeterminate' | 'buffer' | 'query';
    value: number;
    visible: boolean;
    // Private
    private _unsubscribeAll: Subject<any>;
    /**
     * Constructor
     *
     * @param {FuseProgressBarService} _fuseProgressBarService
     */
    constructor(
        private _fuseProgressBarService: FuseProgressBarService
    )
    {
        // Set the defaults
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
     * On init
     */
    ngOnInit(): void
    {
        // Subscribe to the progress bar service properties
        // Buffer value
        this._fuseProgressBarService.bufferValue
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe((bufferValue) => {
                this.bufferValue = bufferValue;
            });
        // Mode
        this._fuseProgressBarService.mode
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe((mode) => {
                this.mode = mode;
            });
        // Value
        this._fuseProgressBarService.value
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe((value) => {
                this.value = value;
            });
        // Visible
        this._fuseProgressBarService.visible
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe((visible) => {
                this.visible = visible;
            });
    }
    /**
     * On destroy
     */
    ngOnDestroy(): void
    {
        // Unsubscribe from all subscriptions
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------
 }
--- a/src/@fuse/components/progress-bar/progress-bar.module.ts
+++ b/src/@fuse/components/progress-bar/progress-bar.module.ts
@@ -1,29 +0,0 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FuseProgressBarComponent } from './progress-bar.component';
@NgModule({
    declarations: [
        FuseProgressBarComponent
    ],
    imports     : [
        CommonModule,
        RouterModule,
        MatButtonModule,
        MatIconModule,
        MatProgressBarModule
    ],
    exports     : [
        FuseProgressBarComponent
    ]
 })
 export class FuseProgressBarModule
 {
 }
--- a/src/@fuse/components/progress-bar/progress-bar.service.ts
+++ b/src/@fuse/components/progress-bar/progress-bar.service.ts
@@ -1,132 +0,0 @@
 import { Injectable } from '@angular/core';
 import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@Injectable({
    providedIn: 'root'
 })
 export class FuseProgressBarService
 {
    // Private
    private _bufferValue: BehaviorSubject<number>;
    private _mode: BehaviorSubject<string>;
    private _value: BehaviorSubject<number>;
    private _visible: BehaviorSubject<boolean>;
    /**
     * Constructor
     *
     * @param {Router} _router
     */
    constructor(
        private _router: Router
    )
    {
        // Initialize the service
        this._init();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Accessors
    // -----------------------------------------------------------------------------------------------------
    /**
     * Buffer value
     */
    get bufferValue(): Observable<any>
    {
        return this._bufferValue.asObservable();
    }
    setBufferValue(value: number): void
    {
        this._bufferValue.next(value);
    }
    /**
     * Mode
     */
    get mode(): Observable<any>
    {
        return this._mode.asObservable();
    }
    setMode(value: 'determinate' | 'indeterminate' | 'buffer' | 'query'): void
    {
        this._mode.next(value);
    }
    /**
     * Value
     */
    get value(): Observable<any>
    {
        return this._value.asObservable();
    }
    setValue(value: number): void
    {
        this._value.next(value);
    }
    /**
     * Visible
     */
    get visible(): Observable<any>
    {
        return this._visible.asObservable();
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Private methods
    // -----------------------------------------------------------------------------------------------------
    /**
     * Initialize
     *
     * @private
     */
    private _init(): void
    {
        // Initialize the behavior subjects
        this._bufferValue = new BehaviorSubject(0);
        this._mode = new BehaviorSubject('indeterminate');
        this._value = new BehaviorSubject(0);
        this._visible = new BehaviorSubject(false);
        // Subscribe to the router events to show/hide the loading bar
        this._router.events
            .pipe(filter((event) => event instanceof NavigationStart))
            .subscribe(() => {
                this.show();
            });
        this._router.events
            .pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
            .subscribe(() => {
                this.hide();
            });
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------
    /**
     * Show the progress bar
     */
    show(): void
    {
        this._visible.next(true);
    }
    /**
     * Hide the progress bar
     */
    hide(): void
    {
        this._visible.next(false);
    }
 }
--- a/src/@fuse/components/search-bar/search-bar.component.html
+++ b/src/@fuse/components/search-bar/search-bar.component.html
@@ -1,12 +1,15 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
-    <div class="fuse-search-bar-content">
+    <div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background">
        <label for="fuse-search-bar-input">
            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                    *ngIf="collapsed">
                <mat-icon class="s-24 secondary-text">search</mat-icon>
            </button>
            <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
            </span>-->
        </label>
        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
--- a/src/@fuse/components/search-bar/search-bar.component.scss
+++ b/src/@fuse/components/search-bar/search-bar.component.scss
@@ -9,7 +9,7 @@
        height: 64px;
        font-size: 13px;
-        @include media-breakpoint('xs') {
+        @include media-breakpoint-down('sm') {
            height: 56px;
        }
@@ -28,7 +28,7 @@
                height: 64px !important;
                line-height: 64px !important;
-                @include media-breakpoint('xs') {
+                @include media-breakpoint-down('sm') {
                    height: 56px !important;
                    line-height: 56px !important;
                }
@@ -39,7 +39,7 @@
                height: 64px !important;
                line-height: 64px !important;
-                @include media-breakpoint('xs') {
+                @include media-breakpoint-down('sm') {
                    height: 56px !important;
                    line-height: 56px !important;
                }
@@ -53,9 +53,8 @@
                display: none;
                flex: 1 0 auto;
                min-height: 64px;
                font-size: 16px;
                background-color: transparent;
-                color: currentColor;
+                font-size: 16px;
            }
        }
--- a/src/@fuse/components/search-bar/search-bar.module.ts
+++ b/src/@fuse/components/search-bar/search-bar.module.ts
@@ -2,8 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatIconModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { FuseSearchBarComponent } from './search-bar.component';
--- a/src/@fuse/components/search-bar/search-bar.theme.scss
+++ b/src/@fuse/components/search-bar/search-bar.theme.scss
@@ -1,11 +0,0 @@
@mixin fuse-search-bar-theme($theme) {
    $background: map-get($theme, background);
    .fuse-search-bar {
        &.expanded {
            background-color: map-get($background, background);
        }
    }
 }
--- a/src/@fuse/components/shortcuts/shortcuts.component.html
+++ b/src/@fuse/components/shortcuts/shortcuts.component.html
@@ -7,7 +7,7 @@
        </button>
    </div>
-    <div class="shortcuts" fxLayout="row" fxHide fxShow.gt-sm>
+    <div class="shortcuts" fxHide fxShow.gt-sm>
        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
--- a/src/@fuse/components/shortcuts/shortcuts.component.scss
+++ b/src/@fuse/components/shortcuts/shortcuts.component.scss
@@ -2,7 +2,7 @@
 :host {
-    @include media-breakpoint('lt-md') {
+    @include media-breakpoint-down('sm') {
        #fuse-shortcuts {
@@ -19,10 +19,6 @@
                    display: flex !important;
                    flex: 1;
                    height: 100%;
                    > div {
                        flex: 1 1 auto !important;
                    }
                }
            }
        }
--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { MediaObserver } from '@angular/flex-layout';
+import { ObservableMedia } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -12,7 +12,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
    templateUrl: './shortcuts.component.html',
    styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
+export class FuseShortcutsComponent implements OnInit, OnDestroy
 {
    shortcutItems: any[];
    navigationItems: any[];
@@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
    @Input()
    navigation: any;
-    @ViewChild('searchInput', {static: false})
+    @ViewChild('searchInput')
    searchInputField;
-    @ViewChild('shortcuts', {static: false})
+    @ViewChild('shortcuts')
    shortcutsEl: ElementRef;
    // Private
@@ -35,17 +35,17 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
    /**
     * Constructor
     *
     * @param {Renderer2} _renderer
     * @param {CookieService} _cookieService
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     * @param {Renderer2} _renderer
     */
    constructor(
        private _cookieService: CookieService,
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseNavigationService: FuseNavigationService,
-        private _mediaObserver: MediaObserver,
+        private _observableMedia: ObservableMedia,
        private _renderer: Renderer2
    )
    {
@@ -70,7 +70,9 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
        // Get the navigation items and flatten them
        this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
-        if ( this._cookieService.check('FUSE2.shortcuts') )
+        const cookieExists = this._cookieService.check('FUSE2.shortcuts');
        if ( cookieExists )
        {
            this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
        }
@@ -79,41 +81,36 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
            // User's shortcut items
            this.shortcutItems = [
                {
-                    title: 'Calendar',
+                    'title': 'Calendar',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'today',
+                    'icon' : 'today',
-                    url  : '/apps/calendar'
+                    'url'  : '/apps/calendar'
                },
                {
-                    title: 'Mail',
+                    'title': 'Mail',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'email',
+                    'icon' : 'email',
-                    url  : '/apps/mail'
+                    'url'  : '/apps/mail'
                },
                {
-                    title: 'Contacts',
+                    'title': 'Contacts',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'account_box',
+                    'icon' : 'account_box',
-                    url  : '/apps/contacts'
+                    'url'  : '/apps/contacts'
                },
                {
-                    title: 'To-Do',
+                    'title': 'To-Do',
-                    type : 'item',
+                    'type' : 'item',
-                    icon : 'check_box',
+                    'icon' : 'check_box',
-                    url  : '/apps/todo'
+                    'url'  : '/apps/todo'
                }
            ];
        }
    }
    ngAfterViewInit(): void
    {
        // Subscribe to media changes
        this._fuseMatchMediaService.onMediaChange
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
-                if ( this._mediaObserver.isActive('gt-sm') )
+                if ( this._observableMedia.isActive('gt-sm') )
                {
                    this.hideMobileShortcutsPanel();
                }
--- a/src/@fuse/components/shortcuts/shortcuts.module.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.module.ts
@@ -2,14 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { CookieService } from 'ngx-cookie-service';
 import { FuseShortcutsComponent } from './shortcuts.component';
--- a/src/@fuse/components/shortcuts/shortcuts.theme.scss
+++ b/src/@fuse/components/shortcuts/shortcuts.theme.scss
@@ -1,11 +0,0 @@
@mixin fuse-shortcuts-theme($theme) {
    $background: map-get($theme, background);
    #fuse-shortcuts {
        &.show-mobile-panel {
            background-color: map-get($background, background);
        }
    }
 }
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -1,5 +1,3 @@
@import "src/@fuse/scss/fuse";
 fuse-sidebar {
    display: flex;
    flex-direction: column;
@@ -9,18 +7,12 @@ fuse-sidebar {
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    z-index: 1000;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
-
+    background: white;
    @include media-breakpoint('xs') {
        min-width: 0 !important;
        max-width: 80vw !important;
        width: 80vw !important;
    }
    &.left-positioned {
        left: 0;
@@ -45,6 +37,12 @@ fuse-sidebar {
        position: absolute !important;
        top: 0;
        bottom: 0;
        &:not(.unfolded) {
            width: 64px;
            min-width: 64px;
            max-width: 64px;
        }
    }
    &.animations-enabled {
@@ -61,5 +59,10 @@ fuse-sidebar {
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    &.fuse-sidebar-overlay-invisible {
        background-color: transparent;
    }
 }
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -1,10 +1,8 @@
-import {
+import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { MediaObserver } from '@angular/flex-layout';
+import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/internal/operators';
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@@ -42,14 +40,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @HostBinding('class.locked-open')
    isLockedOpen: boolean;
    // Folded width
    @Input()
    foldedWidth: number;
    // Folded auto trigger on hover
    @Input()
    foldedAutoTriggerOnHover: boolean;
    // Folded unfolded
    @HostBinding('class.unfolded')
    unfolded: boolean;
@@ -58,14 +48,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @Input()
    invisibleOverlay: boolean;
    // Folded changed
    @Output()
    foldedChanged: EventEmitter<boolean>;
    // Opened changed
    @Output()
    openedChanged: EventEmitter<boolean>;
    // Private
    private _folded: boolean;
    private _fuseConfig: any;
@@ -87,7 +69,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     * @param {FuseConfigService} _fuseConfigService
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     * @param {Renderer2} _renderer
     */
    constructor(
@@ -97,16 +79,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        private _fuseConfigService: FuseConfigService,
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseSidebarService: FuseSidebarService,
-        private _mediaObserver: MediaObserver,
+        private _observableMedia: ObservableMedia,
        private _renderer: Renderer2
    )
    {
        // Set the defaults
        this.foldedAutoTriggerOnHover = true;
        this.foldedWidth = 64;
        this.foldedChanged = new EventEmitter();
        this.openedChanged = new EventEmitter();
        this.opened = false;
        // this.folded = false;
        this.position = 'left';
        this.invisibleOverlay = false;
@@ -120,11 +99,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    // @ Accessors
    // -----------------------------------------------------------------------------------------------------
-    /**
+    // Folded
     * Folded
     *
     * @param {boolean} value
     */
    @Input()
    set folded(value: boolean)
    {
@@ -137,23 +112,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            return;
        }
-        // Programmatically add/remove padding to the element
+        // Programmatically add/remove margin to the element
        // that comes after or before based on the position
        let sibling,
            styleRule;
-        const styleValue = this.foldedWidth + 'px';
+        const styleValue = '64px';
        // Get the sibling and set the style rule
        if ( this.position === 'left' )
        {
            sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'padding-left';
+            styleRule = 'margin-left';
        }
        else
        {
            sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'padding-right';
+            styleRule = 'margin-right';
        }
        // If there is no sibling, return...
@@ -168,13 +143,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            // Fold the sidebar
            this.fold();
            // Set the folded width
            this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
            this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
            this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
            // Set the style and class
-            this._renderer.setStyle(sibling, styleRule, styleValue);
+            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
            this._renderer.addClass(this._elementRef.nativeElement, 'folded');
        }
        // If unfolded...
@@ -183,18 +153,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            // Unfold the sidebar
            this.unfold();
            // Remove the folded width
            this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
            this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
            this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
            // Remove the style and class
            this._renderer.removeStyle(sibling, styleRule);
            this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
        }
        // Emit the 'foldedChanged' event
        this.foldedChanged.emit(this.folded);
    }
    get folded(): boolean
@@ -319,7 +281,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            .subscribe(() => {
                // Get the active status
-                const isActive = this._mediaObserver.isActive(this.lockedOpen);
+                const isActive = this._observableMedia.isActive(this.lockedOpen);
                // If the both status are the same, don't act
                if ( this._wasActive === isActive )
@@ -339,9 +301,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                    // Force the the opened status to true
                    this.opened = true;
                    // Emit the 'openedChanged' event
                    this.openedChanged.emit(this.opened);
                    // If the sidebar was folded, forcefully fold it again
                    if ( this._wasFolded )
                    {
@@ -370,9 +329,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                    // Force the the opened status to close
                    this.opened = false;
                    // Emit the 'openedChanged' event
                    this.openedChanged.emit(this.opened);
                    // Hide the sidebar
                    this._hideSidebar();
                }
@@ -401,23 +357,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            return;
        }
-        // Programmatically add/remove padding to the element
+        // Programmatically add/remove margin to the element
        // that comes after or before based on the position
        let sibling,
            styleRule;
-        const styleValue = this.foldedWidth + 'px';
+        const styleValue = '64px';
        // Get the sibling and set the style rule
        if ( this.position === 'left' )
        {
            sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'padding-left';
+            styleRule = 'margin-left';
        }
        else
        {
            sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'padding-right';
+            styleRule = 'margin-right';
        }
        // If there is no sibling, return...
@@ -429,13 +385,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // Fold the sidebar
        this.fold();
        // Set the folded width
        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
        // Set the style and class
-        this._renderer.setStyle(sibling, styleRule, styleValue);
+        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
        this._renderer.addClass(this._elementRef.nativeElement, 'folded');
    }
@@ -607,9 +558,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // Set the opened status
        this.opened = true;
        // Emit the 'openedChanged' event
        this.openedChanged.emit(this.opened);
        // Mark for check
        this._changeDetectorRef.markForCheck();
    }
@@ -633,9 +581,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // Set the opened status
        this.opened = false;
        // Emit the 'openedChanged' event
        this.openedChanged.emit(this.opened);
        // Hide the sidebar
        this._hideSidebar();
@@ -664,13 +609,20 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @HostListener('mouseenter')
    onMouseEnter(): void
    {
-        // Only work if the auto trigger is enabled
+        // Only work if the sidebar is folded
-        if ( !this.foldedAutoTriggerOnHover )
+        if ( !this.folded )
        {
            return;
        }
-        this.unfoldTemporarily();
+        // Enable the animations
        this._enableAnimations();
        // Unfold the sidebar temporarily
        this.unfolded = true;
        // Mark for check
        this._changeDetectorRef.markForCheck();
    }
    /**
@@ -679,13 +631,20 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @HostListener('mouseleave')
    onMouseLeave(): void
    {
-        // Only work if the auto trigger is enabled
+        // Only work if the sidebar is folded
-        if ( !this.foldedAutoTriggerOnHover )
+        if ( !this.folded )
        {
            return;
        }
-        this.foldTemporarily();
+        // Enable the animations
        this._enableAnimations();
        // Fold the sidebar back
        this.unfolded = false;
        // Mark for check
        this._changeDetectorRef.markForCheck();
    }
    /**
@@ -744,58 +703,4 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            this.fold();
        }
    }
    /**
     * Fold the temporarily unfolded sidebar back
     */
    foldTemporarily(): void
    {
        // Only work if the sidebar is folded
        if ( !this.folded )
        {
            return;
        }
        // Enable the animations
        this._enableAnimations();
        // Fold the sidebar back
        this.unfolded = false;
        // Set the folded width
        const styleValue = this.foldedWidth + 'px';
        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
        // Mark for check
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Unfold the sidebar temporarily
     */
    unfoldTemporarily(): void
    {
        // Only work if the sidebar is folded
        if ( !this.folded )
        {
            return;
        }
        // Enable the animations
        this._enableAnimations();
        // Unfold the sidebar temporarily
        this.unfolded = true;
        // Remove the folded width
        this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
        this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
        this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
        // Mark for check
        this._changeDetectorRef.markForCheck();
    }
 }
--- a/src/@fuse/components/sidebar/sidebar.service.ts
+++ b/src/@fuse/components/sidebar/sidebar.service.ts
@@ -2,9 +2,7 @@ import { Injectable } from '@angular/core';
 import { FuseSidebarComponent } from './sidebar.component';
-@Injectable({
+@Injectable()
    providedIn: 'root'
 })
 export class FuseSidebarService
 {
    // Private
--- a/src/@fuse/components/sidebar/sidebar.theme.scss
+++ b/src/@fuse/components/sidebar/sidebar.theme.scss
@@ -1,16 +0,0 @@
@mixin fuse-sidebar-theme($theme) {
    $background: map-get($theme, background);
    fuse-sidebar {
        background: map-get($background, background);
    }
    .fuse-sidebar-overlay {
        background-color: rgba(0, 0, 0, 0.6);
        &.fuse-sidebar-overlay-invisible {
            background-color: transparent;
        }
    }
 }
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -12,20 +12,6 @@
    <form [formGroup]="form">
        <!-- COLOR THEME -->
        <div class="group">
            <h2>Color themes</h2>
            <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
                <mat-radio-button class="mb-12" value="theme-default">Default Light</mat-radio-button>
                <mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
                <mat-radio-button class="mb-12" value="theme-blue-gray-dark">Blue-Gray Dark</mat-radio-button>
                <mat-radio-button class="mb-12" value="theme-pink-dark">Pink Dark</mat-radio-button>
            </mat-radio-group>
        </div>
        <!-- LAYOUT STYLES -->
        <div class="group" formGroupName="layout">
@@ -87,20 +73,6 @@
                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-8">Variant:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-16 mb-8">Primary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="primaryBackground"></fuse-material-color-picker>
                        <h3 class="mt-16 mb-8">Secondary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
                    </div>
                    <!-- TOOLBAR -->
@@ -119,14 +91,6 @@
                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- FOOTER -->
@@ -145,31 +109,6 @@
                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- SIDE PANEL -->
                    <div class="group" formGroupName="sidepanel">
                        <h2>Side Panel</h2>
                        <mat-slide-toggle formControlName="hidden">
                            Hide
                        </mat-slide-toggle>
                        <h3 class="mt-24">Position:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </ng-container>
@@ -207,20 +146,6 @@
                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-8">Variant:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-16 mb-8">Primary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="primaryBackground"></fuse-material-color-picker>
                        <h3 class="mt-16 mb-8">Secondary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
                    </div>
                    <!-- TOOLBAR -->
@@ -239,14 +164,6 @@
                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- FOOTER -->
@@ -265,31 +182,6 @@
                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- SIDE PANEL -->
                    <div class="group" formGroupName="sidepanel">
                        <h2>Side Panel</h2>
                        <mat-slide-toggle formControlName="hidden">
                            Hide
                        </mat-slide-toggle>
                        <h3 class="mt-24">Position:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </ng-container>
@@ -327,20 +219,6 @@
                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-8">Variant:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-16 mb-8">Primary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="primaryBackground"></fuse-material-color-picker>
                        <h3 class="mt-16 mb-8">Secondary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
                    </div>
                    <!-- TOOLBAR -->
@@ -358,14 +236,6 @@
                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- FOOTER -->
@@ -383,31 +253,6 @@
                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- SIDE PANEL -->
                    <div class="group" formGroupName="sidepanel">
                        <h2>Side Panel</h2>
                        <mat-slide-toggle formControlName="hidden">
                            Hide
                        </mat-slide-toggle>
                        <h3 class="mt-24">Position:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </ng-container>
@@ -440,22 +285,6 @@
                            <mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-8">Variant (Vertical):</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                        </mat-radio-group>
                        <h3 class="mt-16 mb-8">Primary background:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="primaryBackground">
                        </fuse-material-color-picker>
                        <h3 class="mt-16 mb-8">Secondary background (Vertical):</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="secondaryBackground">
                        </fuse-material-color-picker>
                    </div>
                    <!-- TOOLBAR -->
@@ -473,14 +302,6 @@
                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- FOOTER -->
@@ -498,31 +319,6 @@
                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
                        </mat-radio-group>
                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
                            Use custom background color
                        </mat-checkbox>
                        <h3 class="mt-24 mb-8">Background color:</h3>
                        <fuse-material-color-picker class="mb-16"
                                                    formControlName="background"></fuse-material-color-picker>
                    </div>
                    <!-- SIDE PANEL -->
                    <div class="group" formGroupName="sidepanel">
                        <h2>Side Panel</h2>
                        <mat-slide-toggle formControlName="hidden">
                            Hide
                        </mat-slide-toggle>
                        <h3 class="mt-24">Position:</h3>
                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </ng-container>
@@ -542,6 +338,35 @@
        </div>
        <!-- COLORS -->
        <div class="group">
            <h2>Colors</h2>
            <div class="colors">
                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                    <h4 class="mr-8">Toolbar Color</h4>
                    <fuse-material-color-picker
                        [(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
                </div>
                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                    <h4 class="mr-8">Navbar Color</h4>
                    <fuse-material-color-picker
                        [(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
                </div>
                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                    <h4 class="mr-8">Footer Color</h4>
                    <fuse-material-color-picker
                        [(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
                </div>
            </div>
        </div>
    </form>
 </div>
--- a/src/@fuse/components/theme-options/theme-options.component.scss
+++ b/src/@fuse/components/theme-options/theme-options.component.scss
@@ -9,7 +9,7 @@
    }
 }
-fuse-theme-options {
+:host {
    display: flex;
    overflow: hidden;
@@ -19,7 +19,6 @@ fuse-theme-options {
        flex: 1 0 auto;
        padding: 40px 24px 24px 24px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        .header {
            display: flex;
@@ -30,7 +29,7 @@ fuse-theme-options {
            .title {
                font-size: 20px;
-                font-weight: 600;
+                font-weight: 500;
                padding-left: 4px;
            }
        }
@@ -45,6 +44,7 @@ fuse-theme-options {
                flex: 1 0 auto;
                flex-direction: column;
                position: relative;
                border: 1px solid rgba(0, 0, 0, 0.12);
                border-radius: 2px;
                padding: 28px 16px 8px 16px;
                margin: 16px 0;
@@ -56,12 +56,15 @@ fuse-theme-options {
                    margin: 0;
                    padding: 0 8px;
                    font-size: 16px;
-                    font-weight: 600;
+                    font-weight: 500;
                    background: white;
                    color: rgba(0, 0, 0, 0.54);
                }
                h3 {
                    font-size: 14px;
-                    font-weight: 600;
+                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.54);
                    margin: 24px 0 16px 0;
                    padding: 0;
@@ -70,6 +73,11 @@ fuse-theme-options {
                    }
                }
            }
            .colors {
                display: block !important;
                width: 100%;
            }
        }
    }
 }
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -1,6 +1,5 @@
-import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -13,7 +12,6 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
    selector   : 'fuse-theme-options',
    templateUrl: './theme-options.component.html',
    styleUrls  : ['./theme-options.component.scss'],
    encapsulation: ViewEncapsulation.None,
    animations : fuseAnimations
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
@@ -30,7 +28,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
    /**
     * Constructor
     *
     * @param {DOCUMENT} document
     * @param {FormBuilder} _formBuilder
     * @param {FuseConfigService} _fuseConfigService
     * @param {FuseNavigationService} _fuseNavigationService
@@ -38,7 +35,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     * @param {Renderer2} _renderer
     */
    constructor(
        @Inject(DOCUMENT) private document: any,
        private _formBuilder: FormBuilder,
        private _fuseConfigService: FuseConfigService,
        private _fuseNavigationService: FuseNavigationService,
@@ -65,36 +61,27 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        // Build the config form
        // noinspection TypeScriptValidateTypes
        this.form = this._formBuilder.group({
            colorTheme      : new FormControl(),
            customScrollbars: new FormControl(),
            layout          : this._formBuilder.group({
                style  : new FormControl(),
                width  : new FormControl(),
                navbar : this._formBuilder.group({
                    primaryBackground  : new FormControl(),
                    secondaryBackground: new FormControl(),
                    folded             : new FormControl(),
                    hidden    : new FormControl(),
                    position  : new FormControl(),
-                    variant            : new FormControl()
+                    folded    : new FormControl(),
                    background: new FormControl()
                }),
                toolbar: this._formBuilder.group({
                    background           : new FormControl(),
                    customBackgroundColor: new FormControl(),
                    hidden    : new FormControl(),
-                    position             : new FormControl()
+                    position  : new FormControl(),
                    background: new FormControl()
                }),
                footer : this._formBuilder.group({
                    background           : new FormControl(),
                    customBackgroundColor: new FormControl(),
                    hidden    : new FormControl(),
-                    position             : new FormControl()
+                    position  : new FormControl(),
                    background: new FormControl()
                })
            }),
-                sidepanel: this._formBuilder.group({
+            customScrollbars: new FormControl()
                    hidden  : new FormControl(),
                    position: new FormControl()
                })
            })
        });
        // Subscribe to the config changes
@@ -118,6 +105,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                // Reset the form values based on the
                // selected layout style
                this._resetFormValues(value);
            });
        // Subscribe to the form value changes
@@ -131,17 +119,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        // Add customize nav item that opens the bar programmatically
        const customFunctionNavItem = {
-            id      : 'custom-function',
+            'id'      : 'custom-function',
-            title   : 'Custom Function',
+            'title'   : 'Custom Function',
-            type    : 'group',
+            'type'    : 'group',
-            icon    : 'settings',
+            'icon'    : 'settings',
-            children: [
+            'children': [
                {
-                    id      : 'customize',
+                    'id'      : 'customize',
-                    title   : 'Customize',
+                    'title'   : 'Customize',
-                    type    : 'item',
+                    'type'    : 'item',
-                    icon    : 'settings',
+                    'icon'    : 'settings',
-                    function: () => {
+                    'function': () => {
                        this.toggleSidebarOpen('themeOptionsPanel');
                    }
                }
@@ -186,28 +174,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
                            primaryBackground  : 'fuse-navy-700',
                            secondaryBackground: 'fuse-navy-900',
                            folded             : false,
                            hidden    : false,
                            position  : 'left',
-                            variant            : 'vertical-style-1'
+                            folded    : false,
                            background: 'mat-fuse-dark-700-bg'
                        },
                        toolbar: {
                            background           : 'fuse-white-500',
                            customBackgroundColor: false,
                            hidden    : false,
-                            position             : 'below-static'
+                            position  : 'below-static',
                            background: 'mat-white-500-bg'
                        },
                        footer : {
                            background           : 'fuse-navy-900',
                            customBackgroundColor: true,
                            hidden    : false,
-                            position             : 'below-static'
+                            position  : 'below-static',
-                        },
+                            background: 'mat-fuse-dark-900-bg'
                        sidepanel: {
                            hidden  : false,
                            position: 'right'
                        }
                    }
                });
@@ -222,28 +202,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
                            primaryBackground  : 'fuse-navy-700',
                            secondaryBackground: 'fuse-navy-900',
                            folded             : false,
                            hidden    : false,
                            position  : 'left',
-                            variant            : 'vertical-style-1'
+                            folded    : false,
                            background: 'mat-fuse-dark-700-bg'
                        },
                        toolbar: {
                            background           : 'fuse-white-500',
                            customBackgroundColor: false,
                            hidden    : false,
-                            position             : 'below'
+                            position  : 'below',
                            background: 'mat-white-500-bg'
                        },
                        footer : {
                            background           : 'fuse-navy-900',
                            customBackgroundColor: true,
                            hidden    : false,
-                            position             : 'below'
+                            position  : 'below',
-                        },
+                            background: 'mat-fuse-dark-900-bg'
                        sidepanel: {
                            hidden  : false,
                            position: 'right'
                        }
                    }
                });
@@ -258,28 +230,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
                            primaryBackground  : 'fuse-navy-700',
                            secondaryBackground: 'fuse-navy-900',
                            folded             : false,
                            hidden    : false,
                            position  : 'left',
-                            layout             : 'vertical-style-1'
+                            folded    : false,
                            background: 'mat-fuse-dark-700-bg'
                        },
                        toolbar: {
                            background           : 'fuse-white-500',
                            customBackgroundColor: false,
                            hidden    : false,
-                            position             : 'above-static'
+                            position  : 'above-static',
                            background: 'mat-white-500-bg'
                        },
                        footer : {
                            background           : 'fuse-navy-900',
                            customBackgroundColor: true,
                            hidden    : false,
-                            position             : 'above-static'
+                            position  : 'above-static',
-                        },
+                            background: 'mat-fuse-dark-900-bg'
                        sidepanel: {
                            hidden  : false,
                            position: 'right'
                        }
                    }
                });
@@ -294,28 +258,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
                            primaryBackground  : 'fuse-navy-700',
                            secondaryBackground: 'fuse-navy-900',
                            folded             : false,
                            hidden    : false,
                            position  : 'top',
-                            variant            : 'vertical-style-1'
+                            folded    : false,
                            background: 'mat-fuse-dark-700-bg'
                        },
                        toolbar: {
                            background           : 'fuse-white-500',
                            customBackgroundColor: false,
                            hidden    : false,
-                            position             : 'above'
+                            position  : 'above',
                            background: 'mat-white-500-bg'
                        },
                        footer : {
                            background           : 'fuse-navy-900',
                            customBackgroundColor: true,
                            hidden    : false,
-                            position             : 'above-fixed'
+                            position  : 'above-fixed',
-                        },
+                            background: 'mat-fuse-dark-900-bg'
                        sidepanel: {
                            hidden  : false,
                            position: 'right'
                        }
                    }
                });
@@ -338,4 +294,5 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
    {
        this._fuseSidebarService.getSidebar(key).toggleOpen();
    }
 }
--- a/src/@fuse/components/theme-options/theme-options.module.ts
+++ b/src/@fuse/components/theme-options/theme-options.module.ts
@@ -2,19 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { FuseDirectivesModule } from '@fuse/directives/directives';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
 import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
 import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
@@ -30,7 +22,6 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
        FlexLayoutModule,
        MatButtonModule,
        MatCheckboxModule,
        MatDividerModule,
        MatFormFieldModule,
        MatIconModule,
--- a/src/@fuse/components/theme-options/theme-options.theme.scss
+++ b/src/@fuse/components/theme-options/theme-options.theme.scss
@@ -1,27 +0,0 @@
@mixin fuse-theme-options-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    fuse-theme-options {
        .theme-options-panel {
            form {
                .group {
                    border: 1px solid map-get($foreground, divider);
                    h2 {
                        background: map-get($background, background);
                        color: map-get($foreground, secondary-text);
                    }
                    h3 {
                        color: map-get($foreground, secondary-text);
                    }
                }
            }
        }
    }
 }
--- a/src/@fuse/components/widget/widget.component.scss
+++ b/src/@fuse/components/widget/widget.component.scss
@@ -20,13 +20,11 @@ fuse-widget {
        width: 100%;
        opacity: 1;
        z-index: 10;
-        border-radius: 8px;
+        border-radius: 2px;
        transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
        transform: rotateY(0deg);
        backface-visibility: hidden;
        border: 1px solid;
    }
    > .fuse-widget-back {
        display: block;
        position: absolute;
@@ -38,11 +36,9 @@ fuse-widget {
        visibility: hidden;
        opacity: 0;
        z-index: 10;
        border-radius: 8px;
        transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
        transform: rotateY(180deg);
        backface-visibility: hidden;
        border: 1px solid;
        [fuseWidgetToggle] {
            position: absolute;
--- a/src/@fuse/components/widget/widget.theme.scss
+++ b/src/@fuse/components/widget/widget.theme.scss
@@ -1,14 +0,0 @@
@mixin fuse-widget-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    fuse-widget {
        > .fuse-widget-front,
        > .fuse-widget-back {
            background: map-get($background, card);
            border-color: map-get($foreground, divider);
        }
    }
 }
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
+++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MatSidenav } from '@angular/material/sidenav';
+import { MatSidenav } from '@angular/material';
-import { MediaObserver } from '@angular/flex-layout';
+import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -15,11 +15,11 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
    @HostBinding('class.mat-is-locked-open')
    isLockedOpen: boolean;
-    @Input()
+    @Input('fuseMatSidenavHelper')
-    fuseMatSidenavHelper: string;
+    id: string;
-    @Input()
+    @Input('mat-is-locked-open')
-    matIsLockedOpen: string;
+    matIsLockedOpenBreakpoint: string;
    // Private
    private _unsubscribeAll: Subject<any>;
@@ -30,13 +30,13 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
     * @param {FuseMatchMediaService} _fuseMatchMediaService
     * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
     * @param {MatSidenav} _matSidenav
-     * @param {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     */
    constructor(
        private _fuseMatchMediaService: FuseMatchMediaService,
        private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
        private _matSidenav: MatSidenav,
-        private _mediaObserver: MediaObserver
+        private _observableMedia: ObservableMedia
    )
    {
        // Set the defaults
@@ -56,9 +56,9 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
    ngOnInit(): void
    {
        // Register the sidenav to the service
-        this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);
+        this._fuseMatSidenavHelperService.setSidenav(this.id, this._matSidenav);
-        if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
+        if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
        {
            this.isLockedOpen = true;
            this._matSidenav.mode = 'side';
@@ -74,7 +74,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
        this._fuseMatchMediaService.onMediaChange
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
-                if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
+                if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
                {
                    this.isLockedOpen = true;
                    this._matSidenav.mode = 'side';
@@ -105,8 +105,8 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 })
 export class FuseMatSidenavTogglerDirective
 {
-    @Input()
+    @Input('fuseMatSidenavToggler')
-    fuseMatSidenavToggler: string;
+    id;
    /**
     * Constructor
@@ -126,8 +126,8 @@ export class FuseMatSidenavTogglerDirective
     * On click
     */
    @HostListener('click')
-    onClick(): void
+    onClick()
    {
-        this._fuseMatSidenavHelperService.getSidenav(this.fuseMatSidenavToggler).toggle();
+        this._fuseMatSidenavHelperService.getSidenav(this.id).toggle();
    }
 }
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
+++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
-import { MatSidenav } from '@angular/material/sidenav';
+import { MatSidenav } from '@angular/material';
-@Injectable({
+@Injectable()
    providedIn: 'root'
 })
 export class FuseMatSidenavHelperService
 {
    sidenavInstances: MatSidenav[];
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -1,24 +1,23 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { fromEvent, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
-import { debounceTime, filter, takeUntil } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
 import PerfectScrollbar from 'perfect-scrollbar';
 import * as _ from 'lodash';
-import { FusePerfectScrollbarGeometry, FusePerfectScrollbarPosition } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces';
+
 import { FuseConfigService } from '@fuse/services/config.service';
@Directive({
    selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
    isInitialized: boolean;
    isMobile: boolean;
-    ps: PerfectScrollbar | any;
+    ps: PerfectScrollbar;
    // Private
    private _animation: number | null;
    private _enabled: boolean | '';
    private _debouncedUpdate: any;
    private _options: any;
@@ -44,7 +43,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
        this.isMobile = false;
        // Set the private defaults
        this._animation = null;
        this._enabled = false;
        this._debouncedUpdate = _.debounce(this.update, 150);
        this._options = {
@@ -67,15 +65,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
    {
        // Merge the options
        this._options = _.merge({}, this._options, value);
        // Destroy and re-init the PerfectScrollbar to update its options
        setTimeout(() => {
            this._destroy();
        });
        setTimeout(() => {
            this._init();
        });
    }
    get fusePerfectScrollbarOptions(): any
@@ -131,24 +120,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
    /**
     * On init
     */
    ngOnInit(): void
    {
        // Subscribe to window resize event
        fromEvent(window, 'resize')
            .pipe(
                takeUntil(this._unsubscribeAll),
                debounceTime(150)
            )
            .subscribe(() => {
                // Update the PerfectScrollbar
                this.update();
            });
    }
    /**
     * After view init
     */
@@ -229,19 +200,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
        this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
            ...this.fusePerfectScrollbarOptions
        });
        // Unbind 'keydown' events of PerfectScrollbar since it causes an extremely
        // high CPU usage on Angular Material inputs.
        // Loop through all the event elements of this PerfectScrollbar instance
        this.ps.event.eventElements.forEach((eventElement) => {
            // If we hit to the element with a 'keydown' event...
            if ( typeof eventElement.handlers['keydown'] !== 'undefined' )
            {
                // Unbind it
                eventElement.element.removeEventListener('keydown', eventElement.handlers['keydown'][0]);
            }
        });
    }
    /**
@@ -321,71 +279,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
        this.ngOnDestroy();
    }
    /**
     * Returns the geometry of the scrollable element
     *
     * @param prefix
     */
    geometry(prefix: string = 'scroll'): FusePerfectScrollbarGeometry
    {
        return new FusePerfectScrollbarGeometry(
            this.elementRef.nativeElement[prefix + 'Left'],
            this.elementRef.nativeElement[prefix + 'Top'],
            this.elementRef.nativeElement[prefix + 'Width'],
            this.elementRef.nativeElement[prefix + 'Height']
        );
    }
    /**
     * Returns the position of the scrollable element
     *
     * @param absolute
     */
    position(absolute: boolean = false): FusePerfectScrollbarPosition
    {
        if ( !absolute && this.ps )
        {
            return new FusePerfectScrollbarPosition(
                this.ps.reach.x || 0,
                this.ps.reach.y || 0
            );
        }
        else
        {
            return new FusePerfectScrollbarPosition(
                this.elementRef.nativeElement.scrollLeft,
                this.elementRef.nativeElement.scrollTop
            );
        }
    }
    /**
     * Scroll to
     *
     * @param x
     * @param y
     * @param speed
     */
    scrollTo(x: number, y?: number, speed?: number): void
    {
        if ( y == null && speed == null )
        {
            this.animateScrolling('scrollTop', x, speed);
        }
        else
        {
            if ( x != null )
            {
                this.animateScrolling('scrollLeft', x, speed);
            }
            if ( y != null )
            {
                this.animateScrolling('scrollTop', y, speed);
            }
        }
    }
    /**
     * Scroll to X
     *
@@ -438,8 +331,9 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     */
    scrollToRight(offset?: number, speed?: number): void
    {
-        const left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth;
+        const width = this.elementRef.nativeElement.scrollWidth;
-        this.animateScrolling('scrollLeft', left - (offset || 0), speed);
+
        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
    }
    /**
@@ -450,64 +344,27 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     */
    scrollToBottom(offset?: number, speed?: number): void
    {
-        const top = this.elementRef.nativeElement.scrollHeight - this.elementRef.nativeElement.clientHeight;
+        const height = this.elementRef.nativeElement.scrollHeight;
        this.animateScrolling('scrollTop', top - (offset || 0), speed);
    }
-    /**
+        this.animateScrolling('scrollTop', height - (offset || 0), speed);
     * Scroll to element
     *
     * @param qs
     * @param offset
     * @param speed
     */
    scrollToElement(qs: string, offset?: number, speed?: number): void
    {
        const element = this.elementRef.nativeElement.querySelector(qs);
        if ( !element )
        {
            return;
        }
        const elementPos = element.getBoundingClientRect();
        const scrollerPos = this.elementRef.nativeElement.getBoundingClientRect();
        if ( this.elementRef.nativeElement.classList.contains('ps--active-x') )
        {
            const currentPos = this.elementRef.nativeElement['scrollLeft'];
            const position = elementPos.left - scrollerPos.left + currentPos;
            this.animateScrolling('scrollLeft', position + (offset || 0), speed);
        }
        if ( this.elementRef.nativeElement.classList.contains('ps--active-y') )
        {
            const currentPos = this.elementRef.nativeElement['scrollTop'];
            const position = elementPos.top - scrollerPos.top + currentPos;
            this.animateScrolling('scrollTop', position + (offset || 0), speed);
        }
    }
    /**
     * Animate scrolling
     *
-     * @param target
+     * @param {string} target
-     * @param value
+     * @param {number} value
-     * @param speed
+     * @param {number} speed
     */
    animateScrolling(target: string, value: number, speed?: number): void
    {
-        if ( this._animation )
+        if ( !speed )
        {
            window.cancelAnimationFrame(this._animation);
            this._animation = null;
        }
        if ( !speed || typeof window === 'undefined' )
        {
            this.elementRef.nativeElement[target] = value;
            // PS has weird event sending order, this is a workaround for that
            this.update();
            this.update();
        }
        else if ( value !== this.elementRef.nativeElement[target] )
        {
@@ -519,8 +376,9 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
            const cosParameter = (oldValue - value) / 2;
-            const step = (newTimestamp: number) => {
+            const step = (newTimestamp) => {
                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
                // Only continue animation if scroll position has not changed
@@ -528,17 +386,20 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
                {
                    if ( scrollCount >= Math.PI )
                    {
-                        this.animateScrolling(target, value, 0);
+                        this.elementRef.nativeElement[target] = value;
                        // PS has weird event sending order, this is a workaround for that
                        this.update();
                        this.update();
                    }
                    else
                    {
-                        this.elementRef.nativeElement[target] = newValue;
+                        this.elementRef.nativeElement[target] = oldValue = newValue;
                        // On a zoomed out page the resulting offset may differ
                        oldValue = this.elementRef.nativeElement[target];
                        oldTimestamp = newTimestamp;
-                        this._animation = window.requestAnimationFrame(step);
+                        window.requestAnimationFrame(step);
                    }
                }
            };
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces.ts
+++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces.ts
@@ -1,28 +0,0 @@
 export class FusePerfectScrollbarGeometry
 {
    public x: number;
    public y: number;
    public w: number;
    public h: number;
    constructor(x: number, y: number, w: number, h: number)
    {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
 }
 export class FusePerfectScrollbarPosition
 {
    public x: number | 'start' | 'end';
    public y: number | 'start' | 'end';
    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end')
    {
        this.x = x;
        this.y = y;
    }
 }
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@@ -1,8 +1,27 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
-import { FUSE_CONFIG } from '@fuse/services/config.service';
+import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
 import { FuseCopierService } from '@fuse/services/copier.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
 import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
-@NgModule()
+@NgModule({
    entryComponents: [],
    providers      : [
        FuseConfigService,
        FuseCopierService,
        FuseMatchMediaService,
        FuseMatSidenavHelperService,
        FuseNavigationService,
        FuseSidebarService,
        FuseSplashScreenService,
        FuseTranslationLoaderService
    ]
 })
 export class FuseModule
 {
    constructor(@Optional() @SkipSelf() parentModule: FuseModule)
--- a/src/@fuse/mat-colors/index.ts
+++ b/src/@fuse/mat-colors/index.ts
@@ -4,7 +4,6 @@ const black12 = 'rgba(black, 0.12)';
 const white12 = 'rgba(white, 0.12)';
 const black6 = 'rgba(black, 0.06)';
 const white6 = 'rgba(white, 0.06)';
 const matColors = {
    'red': {
        50      : '#ffebee',
@@ -636,8 +635,7 @@ const matColors = {
            A700: white87
        }
    },
-
+    'fuse-dark': {
    'fuse-navy': {
        50      : '#ECECEE',
        100     : '#C5C6CB',
        200     : '#9EA1A9',
@@ -669,15 +667,13 @@ const matColors = {
            A700: white87
        }
    },
-
+    white      : {
    'fuse-white': {
        500     : 'white',
        contrast: {
            500: black87
        }
    },
-
+    black      : {
    'fuse-black': {
        500     : 'black',
        contrast: {
            500: 'white'
@@ -687,23 +683,7 @@ const matColors = {
 // tslint:disable-next-line
 const matPresetColors = [
-    '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0',
+    '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64'
    '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8',
    '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7',
    '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f',
    '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1',
    '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
    '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4',
    '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9',
    '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581',
    '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39',
    '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d',
    '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00',
    '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40',
    '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00',
    '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5',
    '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae',
    '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64'
 ];
 /**
@@ -713,15 +693,15 @@ const matPresetColors = [
 export class MatColors
 {
    public static all = matColors;
    public static presets = matPresetColors;
-    public static getColor(colorName): any
+    public static getColor(colorName)
    {
        if ( matColors[colorName] )
        {
            return matColors[colorName];
        }
        return false;
    }
 }
--- a/src/@fuse/scss/core.scss
+++ b/src/@fuse/scss/core.scss
@@ -10,17 +10,21 @@
 // Fuse
@import "fuse";
 // Theme
@import "theme";
 // Include core Angular Material styles
@include mat-core();
 // Setup the typography
@include angular-material-typography($typography);
 // Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);
 // Partials
@import "partials/reset";
@import "partials/normalize";
@import "partials/scrollbars";
@import "partials/helpers";
-@import "partials/general";
+@import "partials/global";
@import "partials/icons";
@import "partials/colors";
@import "partials/material";
@@ -31,6 +35,7 @@
@import "partials/cards";
@import "partials/navigation";
@import "partials/forms";
@import "partials/toolbar";
@import "partials/print";
 // Plugins
--- a/src/@fuse/scss/fuse.scss
+++ b/src/@fuse/scss/fuse.scss
@@ -1,5 +1,5 @@
-// Material theming tools
+// Material theming
-@import '~@angular/material/theming';
+@import "theming";
 // Breakpoint mixins
-@import "partials/breakpoints";
+@import "mixins/breakpoints";
--- a/src/@fuse/scss/mixins/_breakpoints.scss
+++ b/src/@fuse/scss/mixins/_breakpoints.scss
@@ -0,0 +1,126 @@
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
    xs: 'screen and (max-width: 599px)',
    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
    lt-sm: 'screen and (max-width: 599px)',
    lt-md: 'screen and (max-width: 959px)',
    lt-lg: 'screen and (max-width: 1279px)',
    lt-xl: 'screen and (max-width: 1919px)',
    gt-xs: 'screen and (min-width: 600px)',
    gt-sm: 'screen and (min-width: 960px)',
    gt-md: 'screen and (min-width: 1280px)',
    gt-lg: 'screen and (min-width: 1920px)'
 ) !default;
 $grid-breakpoints: (
    xs: 0,
    sm: 600px,
    md: 960px,
    lg: 1280px,
    xl: 1920px
 ) !default;
@mixin media-breakpoint($breakpointName) {
    $mediaQuery: map_get($breakpoints, $breakpointName);
    @if ($mediaQuery != null) {
        @media #{$mediaQuery} {
            @content
        }
    }
 }
 //    >> breakpoint-next(sm)
 //    md
 //    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
    $n: index($breakpoint-names, $name);
    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
    $min: map-get($breakpoints, $name);
    @return if($min != 0, $min, null);
 }
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
    $next: breakpoint-next($name, $breakpoints);
    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
 // Useful for making responsive utilities.
 //
 //    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
 }
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    @if $min {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
 }
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
    $max: breakpoint-max($name, $breakpoints);
    @if $max {
        @media (max-width: $max) {
            @content;
        }
    } @else {
        @content;
    }
 }
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-max($lower, $breakpoints);
    $max: breakpoint-max($upper, $breakpoints);
    @media (min-width: $min) and (max-width: $max) {
        @content;
    }
 }
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    $max: breakpoint-max($name, $breakpoints);
    @media (min-width: $min) and (max-width: $max) {
        @content;
    }
 }
--- a/src/@fuse/scss/partials/_angular-material-fix.scss
+++ b/src/@fuse/scss/partials/_angular-material-fix.scss
@@ -1,31 +1,3 @@
 // Fix: "Remove the cdk-global-scrollblock effects from the HTML"
 // Fuse already blocks the body scroll so it doesn't need this feature. We are disabling it
 // because on Windows, it causes a scrollbar to show up.
 html {
    &.cdk-global-scrollblock {
        position: relative !important;
        overflow: hidden !important;
    }
 }
 // Fix: "Inconsistent button heights due to inconsistent line heights"
 button {
    .mat-button-wrapper {
        line-height: normal;
    }
 }
 .mat-icon {
    // Fix: "Font-weight config affecting the icons"
    font-weight: 400 !important;
    // Fix: "Inconsistent positioning on custom font icons"
    line-height: 1;
 }
 // Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
@@ -34,12 +6,11 @@ button {
    }
 }
-// Fix: "Smooth scrolling for iOS"
+// Fix: "Inconsistent font sizes across elements"
-.mat-dialog-container {
+.mat-form-field-wrapper {
-    -webkit-overflow-scrolling: touch;
+    font-size: 16px;
 }
 // Fix: "Inconsistent font sizes across elements"
 .mat-checkbox {
    font-size: 16px;
 }
@@ -48,14 +19,19 @@ button {
    font-size: 16px;
 }
 .mat-pseudo-checkbox-checked:after {
    width: 14px !important;
    height: 7px !important;
 }
 // Fix: "Input underlines has wrong color opacity value"
 .mat-form-field-underline {
    background-color: rgba(0, 0, 0, 0.12);
 }
 // Fix: "Some idiots using table-cell and inline-table in mat-select"
 .mat-form-field {
    // Fix: "Table-cell and inline-table in mat-select"
    &.mat-form-field-type-mat-select {
        .mat-form-field-infix {
--- a/src/@fuse/scss/partials/_breakpoints.scss
+++ b/src/@fuse/scss/partials/_breakpoints.scss
@@ -1,38 +0,0 @@
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
    xs: 'screen and (max-width: 599px)',
    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
    lt-sm: 'screen and (max-width: 599px)',
    lt-md: 'screen and (max-width: 959px)',
    lt-lg: 'screen and (max-width: 1279px)',
    lt-xl: 'screen and (max-width: 1919px)',
    gt-xs: 'screen and (min-width: 600px)',
    gt-sm: 'screen and (min-width: 960px)',
    gt-md: 'screen and (min-width: 1280px)',
    gt-lg: 'screen and (min-width: 1920px)'
 ) !default;
 // Re-map the breakpoints for the helper classes
 $helper-breakpoints: (
    xs: null,
    sm: 'gt-xs',
    md: 'gt-sm',
    lg: 'gt-md',
    xl: 'gt-lg'
 );
@mixin media-breakpoint($breakpointName) {
    $mediaQuery: map-get($breakpoints, $breakpointName);
    @if ($mediaQuery == null) {
        @content
    } @else {
        @media #{$mediaQuery} {
            @content
        }
    }
 }
--- a/src/@fuse/scss/partials/_cards.scss
+++ b/src/@fuse/scss/partials/_cards.scss
@@ -1,29 +1,9 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Theming
 // -----------------------------------------------------------------------------------------------------
@mixin cards-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    .fuse-card {
        background: map-get($background, card);
        border-color: map-get($foreground, divider);
        .card-divider {
            border-top: 1px solid map-get($foreground, divider);
        }
    }
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Cards
 // -----------------------------------------------------------------------------------------------------
 .fuse-card {
    max-width: 320px;
    min-width: 320px;
-    border-radius: 8px;
+    background: white;
-    border: 1px solid;
+    border-radius: 2px;
    @include mat-elevation(2);
    &.variable-width {
        min-width: 0;
@@ -57,8 +37,13 @@
    // Divider
    .card-divider {
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        margin: 16px;
        &.light {
            border-top-color: rgba(255, 255, 255, 0.12);
        }
        &.full-width {
            margin: 0;
        }
--- a/src/@fuse/scss/partials/_colors.scss
+++ b/src/@fuse/scss/partials/_colors.scss
@@ -1,86 +1,55 @@
-// -----------------------------------------------------------------------------------------------------
+.secondary-text,
 // @ Theming
 // -----------------------------------------------------------------------------------------------------
@mixin colors-theme($theme) {
    $is-dark: map-get($theme, is-dark);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    // Base colors
    & {
        color: map-get($foreground, text);
        // If it's a light theme, use a darker background
        // color other than the default #fafafa
        @if ($is-dark) {
            background: map-get($background, background);
        } @else {
            background: #F5F5F5;
        }
    }
    .secondary-text {
        color: map-get($foreground, secondary-text);
    }
 .icon,
 i {
-        color: map-get($foreground, icon);
+    color: rgba(0, 0, 0, 0.54);
    }
    .hint-text {
        color: map-get($foreground, hint-text);
 }
 .hint-text,
 .disabled-text {
-        color: map-get($foreground, disabled-text);
+    color: rgba(0, 0, 0, 0.38);
 }
    .fade-text,
 .divider {
-        color: map-get($foreground, divider);
+    color: rgba(0, 0, 0, 0.12);
    }
 }
-// -----------------------------------------------------------------------------------------------------
+// Material colors map
-// @ Material colors map
+$matColorsMap: (
-// -----------------------------------------------------------------------------------------------------
+    primary: $primary,
-$matPalettes: (
+    accent: $accent,
-    'red': $mat-red,
+    warn: $warn,
-    'pink': $mat-pink,
+    red: $mat-red,
-    'purple': $mat-purple,
+    pink: $mat-pink,
-    'deep-purple': $mat-deep-purple,
+    purple: $mat-purple,
-    'indigo': $mat-indigo,
+    deep-purple: $mat-deep-purple,
-    'blue': $mat-blue,
+    indigo: $mat-indigo,
-    'light-blue': $mat-light-blue,
+    blue: $mat-blue,
-    'cyan': $mat-cyan,
+    light-blue: $mat-light-blue,
-    'teal': $mat-teal,
+    cyan: $mat-cyan,
-    'green': $mat-green,
+    teal: $mat-teal,
-    'light-green': $mat-light-green,
+    green: $mat-green,
-    'lime': $mat-lime,
+    light-green: $mat-light-green,
-    'yellow': $mat-yellow,
+    lime: $mat-lime,
-    'amber': $mat-amber,
+    yellow: $mat-yellow,
-    'orange': $mat-orange,
+    amber: $mat-amber,
-    'deep-orange': $mat-deep-orange,
+    orange: $mat-orange,
-    'brown': $mat-brown,
+    deep-orange: $mat-deep-orange,
-    'grey': $mat-grey,
+    brown: $mat-brown,
-    'blue-grey': $mat-blue-grey
+    grey: $mat-grey,
    blue-grey: $mat-blue-grey,
    white: $mat-white,
    black: $mat-black,
    fuse-dark: $mat-fusedark
 );
 // Material color hues list
-$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
-// -----------------------------------------------------------------------------------------------------
+// Text color levels generator mixin
-// @ Text color levels generator
+@mixin generateTextColorLevels($baseTextColor) {
 // -----------------------------------------------------------------------------------------------------
@mixin generate-text-color-levels($classes, $contrast) {
-    // If the contrast is dark...
+    // If the base text color is black...
-    @if ($contrast == 'dark') {
+    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
        // Put down the color classes
        #{$classes} {
        i,
        .icon {
@@ -108,18 +77,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
            background: rgba(0, 0, 0, 0.1);
        }
            .adaptive-border-color {
                border-color: rgba(0, 0, 0, 0.12);
            }
        }
    }
        // If the base text color is white...
    @else {
        // Put down the color classes
        #{$classes} {
        i,
        .icon {
            color: rgba(255, 255, 255, 1);
@@ -145,20 +106,12 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
        .mat-ripple-element {
            background: rgba(255, 255, 255, 0.1);
        }
            .adaptive-border-color {
                border-color: rgba(255, 255, 255, 0.12);
            }
        }
    }
 }
-// -----------------------------------------------------------------------------------------------------
+@mixin generateMaterialElementColors($contrastColor) {
 // @ Material element colors generator
 // -----------------------------------------------------------------------------------------------------
@mixin generate-material-element-colors($classes, $contrast) {
-    // If the contrast color is light...
+    // If the contrast color is white...
    $fuseForeground: (
        base: white,
        text: white,
@@ -166,8 +119,8 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
        divider: rgba(white, 0.12),
    );
-    // If the contrast color is dark...
+    // If the contrast color is black...
-    @if ($contrast == 'dark') {
+    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
        $fuseForeground: (
            base: black,
@@ -176,63 +129,65 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
        );
    }
    // Put down the color classes
    #{$classes} {
    // Native Input
    input[type="text"] {
-            color: map-get($fuseForeground, base);
+        color: map_get($fuseForeground, base);
    }
    // Input
    .mat-form-field-label {
-            color: map-get($fuseForeground, hint-text);
+        color: map_get($fuseForeground, hint-text);
    }
    .mat-form-field-underline {
-            background-color: map-get($fuseForeground, divider);
+        background-color: map_get($fuseForeground, divider);
    }
    // Select
    .mat-select-trigger,
    .mat-select-arrow {
-            color: map-get($fuseForeground, hint-text);
+        color: map_get($fuseForeground, hint-text);
    }
    .mat-select-underline {
-            background-color: map-get($fuseForeground, divider);
+        background-color: map_get($fuseForeground, divider);
    }
    .mat-select-disabled .mat-select-value,
    .mat-select-arrow,
    .mat-select-trigger {
-            color: map-get($fuseForeground, hint-text);
+        color: map_get($fuseForeground, hint-text);
    }
    .mat-select-content,
    .mat-select-panel-done-animating {
-            //background: map-get($background, card);
+        background: map_get($background, card);
    }
    .mat-select-value {
-            color: map-get($fuseForeground, text);
+        color: map_get($fuseForeground, text);
        }
    }
 }
-// -----------------------------------------------------------------------------------------------------
+// Color classes generator mixin
-// @ Color classes generator
+@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
 // -----------------------------------------------------------------------------------------------------
@mixin generate-color-classes($colorName, $color, $contrastColor, $hue) {
    .#{$colorName}#{$hue}-bg {
        background-color: $color !important;
    }
-    .#{$colorName}#{$hue} {
+    .mat-#{$colorName}#{$hue}-bg {
        background-color: $color !important;
        color: $contrastColor !important;
        // Generate text color levels
        // based on current contrast color
        @include generateTextColorLevels($contrastColor);
        // Generate material element colors
        // based on current contrast color
        @include generateMaterialElementColors($contrastColor);
        &[disabled] {
            background-color: rgba($color, .12) !important;
            color: rgba($contrastColor, .26) !important;
@@ -241,6 +196,14 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
    .#{$colorName}#{$hue}-fg {
        color: $color !important;
        // Generate text color levels
        // based on current contrast color
        @include generateTextColorLevels($color);
        // Generate material element colors
        // based on current contrast color
        @include generateMaterialElementColors($color);
    }
    .#{$colorName}#{$hue}-border {
@@ -264,98 +227,51 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
    }
 }
-// -----------------------------------------------------------------------------------------------------
+@mixin generateFuseColorClasses($primary, $accent, $warn) {
 // @ Fuse color classes
 // -----------------------------------------------------------------------------------------------------
@mixin fuse-color-classes($palettes) {
-    // Define contrast lists
+    $colorMap: (
-    $light-contrasting-classes: ();
+        primary: $primary,
-    $dark-contrasting-classes: ();
+        accent: $accent,
        warn: $warn
    );
    // Generate the color classes...
-    @each $paletteName, $palette in $palettes {
+    @each $name, $map in $colorMap {
-        // Get the contrasts map
+        @each $hue in $matColorHues {
        $contrasts: map-get($palette, 'contrast');
-        @each $hue in $matHues {
+            $color: map-get($map, $hue);
            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
-            // Get the color and the contrasting color
+            @if ($color != null and $contrastColor != null) {
            $color: map-get($palette, $hue);
            $contrast: map-get($contrasts, $hue);
-            @if ($color != null and $contrast != null) {
+                @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
                // Generate color classes
                @include generate-color-classes($paletteName, $color, $contrast, '-#{$hue}');
                // If the contrast color is dark
                @if (rgba(black, 1) == rgba($contrast, 1)) {
                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
                }
                    // if the contrast color is light
                @else {
                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
                }
                // Run the generator one more time for default values (500)
-                // if we are not working with primary, accent or warn palettes
+                @if ($hue == 500) {
-                @if ($hue == 500 and $paletteName != 'primary' and $paletteName != 'accent' and $paletteName != 'warn') {
+                    @include generateColorClasses($name, $color, $contrastColor, '');
                    // Generate color classes
                    @include generate-color-classes($paletteName, $color, $contrast, '');
                    // Add color to the correct list depending on the contrasting color
                    // If the contrast color is dark
                    @if (rgba(black, 1) == rgba($contrast, 1)) {
                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
                }
                        // if the contrast color is light
                    @else {
                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
            }
        }
    }
 }
-        // Run the generator again for the selected default hue values for
+// Generate the color classes...
-        // primary, accent and warn palettes
+@each $colorName, $colorMap in $matColorsMap {
        //
        // We are doing this because the default hue value can be changed
        // by the user when the Material theme being generated.
        @if ($paletteName == 'primary' or $paletteName == 'accent' or $paletteName == 'warn') {
-            // Get the color and the contrasting color for the selected
+    @each $hue in $matColorHues {
            // default hue
            $color: map-get($palette, 'default');
            $contrast: map-get($palette, 'default-contrast');
-            // Generate color classes
+        $color: map-get($colorMap, $hue);
-            @include generate-color-classes($paletteName, $color, $contrast, '');
+        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
-            // Add color to the correct list depending on the contrasting color
+        @if ($color != null and $contrastColor != null) {
-            // If the contrast color is dark
+            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
-            @if (rgba(black, 1) == rgba($contrast, 1)) {
+
-                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
+            // Run the generator one more time for default values (500)
-            }
+            @if ($hue == 500) {
-                // if the contrast color is light
+                @include generateColorClasses($colorName, $color, $contrastColor, '');
            @else {
                $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
            }
        }
    }
    // Generate contrasting colors
    @include generate-text-color-levels($dark-contrasting-classes, 'dark');
    @include generate-text-color-levels($light-contrasting-classes, 'light');
    @include generate-material-element-colors($dark-contrasting-classes, 'dark');
    @include generate-material-element-colors($light-contrasting-classes, 'light');
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Generate Fuse color classes for default Material palettes
 // -----------------------------------------------------------------------------------------------------
@include fuse-color-classes($matPalettes);
--- a/src/@fuse/scss/partials/_general.scss
+++ b/src/@fuse/scss/partials/_general.scss
@@ -1,70 +0,0 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Body scroll lock
 // -----------------------------------------------------------------------------------------------------
 html,
 body {
    display: flex;
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Boxed body
 // -----------------------------------------------------------------------------------------------------
 body {
    // Boxed
    &.boxed {
        max-width: 1200px;
        margin: 0 auto;
        @include mat-elevation(8);
    }
 }
 /*----------------------------------------------------------------*/
 /*  @ Text rendering & box sizing
 /*----------------------------------------------------------------*/
 * {
    text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    &:before, &:after {
        box-sizing: border-box;
    }
    // Remove focus outline
    &:focus {
        outline: none;
    }
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Responsive images
 // -----------------------------------------------------------------------------------------------------
 img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: none;
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Input
 // -----------------------------------------------------------------------------------------------------
 input {
    border: none;
    padding: 0 16px;
 }
--- a/src/@fuse/scss/partials/_global.scss
+++ b/src/@fuse/scss/partials/_global.scss
@@ -0,0 +1,13 @@
 html,
 body {
    display: flex;
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #F5F5F5;
 }
--- a/src/@fuse/scss/partials/_helpers.scss
+++ b/src/@fuse/scss/partials/_helpers.scss
@@ -1,11 +1,11 @@
-// -----------------------------------------------------------------------------------------------------
+// ######################
-// @ Position helpers
+// POSITION HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ######################
-@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint($materialBreakpoint) {
+    @include media-breakpoint-up($breakpoint) {
-        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .position#{$infix}-relative {
            position: relative;
@@ -21,14 +21,14 @@
    }
 }
-// -----------------------------------------------------------------------------------------------------
+// ####################################
-// @ Absolute position alignment helpers
+// ABSOLUTE POSITION ALIGNMENT HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ####################################
-@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint($materialBreakpoint) {
+    @include media-breakpoint-up($breakpoint) {
-        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .align#{$infix}-top {
            top: 0;
@@ -48,9 +48,9 @@
    }
 }
-// -----------------------------------------------------------------------------------------------------
+// ######################
-// @ Size helpers
+// SIZE HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ######################
@each $prop, $abbrev in (height: h, width: w) {
    @for $index from 0 through 180 {
@@ -75,14 +75,14 @@
    }
 }
-// -----------------------------------------------------------------------------------------------------
+// ######################
-// @ Spacing helpers
+// SPACING HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ######################
-@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint($materialBreakpoint) {
+    @include media-breakpoint-up($breakpoint) {
-        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        @each $prop, $abbrev in (margin: m, padding: p) {
@@ -168,9 +168,9 @@
    }
 }
-// -----------------------------------------------------------------------------------------------------
+// ######################
-// @ Border helpers
+// BORDER HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ######################
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 .border,
@@ -199,7 +199,7 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
 }
 .border-horizontal,
-.bx {
+.b-x {
    border-left: $border-style;
    border-right: $border-style;
 }
@@ -210,9 +210,9 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: $border-style;
 }
-// -----------------------------------------------------------------------------------------------------
+// ######################
-// @ Border radius helpers
+// BORDER RADIUS HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ######################
 .border-radius-100 {
    border-radius: 100%;
 }
@@ -233,9 +233,9 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
 }
-// -----------------------------------------------------------------------------------------------------
+// ######################
-// @ Cursor helpers
+// CURSOR HELPERS
-// -----------------------------------------------------------------------------------------------------
+// ######################
 .cursor-pointer {
    cursor: pointer;
 }
--- a/src/@fuse/scss/partials/_icons.scss
+++ b/src/@fuse/scss/partials/_icons.scss
@@ -7,11 +7,11 @@ mat-icon {
    min-height: 24px;
    line-height: 24px;
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+    @each $breakpoint in map-keys($grid-breakpoints) {
-        @include media-breakpoint($materialBreakpoint) {
+        @include media-breakpoint-up($breakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
            @for $size from 2 through 128 {
--- a/src/@fuse/scss/partials/_material.scss
+++ b/src/@fuse/scss/partials/_material.scss
@@ -1,169 +1,6 @@
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
-// @ Theming
+/*  Avatars
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
@mixin material-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    // -----------------------------------------------------------------------------------------------------
    // @ Avatar
    // -----------------------------------------------------------------------------------------------------
    .avatar {
        color: map-get($foreground, text);
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Forms
    // -----------------------------------------------------------------------------------------------------
    .form-wrapper {
        background-color: map-get($background, card);
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Navigation - Simple
    // -----------------------------------------------------------------------------------------------------
    .navigation-simple {
        .item {
            &.selected {
                background-color: map-get($background, hover);
            }
        }
        .subheader {
            border-top: 1px solid map-get($foreground, divider);
        }
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Pagination - Simple
    // -----------------------------------------------------------------------------------------------------
    .simple-pagination {
        background: map-get($background, card);
        .pagination-item {
            color: map-get($foreground, secondary-text);
            &:hover {
                color: map-get($foreground, text);
            }
            &.disabled {
                color: map-get($foreground, disabled-text);
            }
        }
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Price tables
    // -----------------------------------------------------------------------------------------------------
    .price-tables {
        .price-table {
            background: map-get($background, card);
            &.style-1 {
                .price {
                    .currency {
                        color: map-get($foreground, secondary-text);
                    }
                    .period {
                        color: map-get($foreground, secondary-text);
                    }
                }
            }
            &.style-2 {
                .price {
                    .currency {
                        color: map-get($foreground, secondary-text);
                    }
                }
                .period {
                    color: map-get($foreground, secondary-text);
                }
            }
            &.style-3 {
                .package-type {
                    .subtitle {
                        color: map-get($foreground, secondary-text);
                    }
                }
                .terms {
                    color: map-get($foreground, secondary-text);
                }
                .note {
                    color: map-get($foreground, secondary-text);
                }
            }
        }
    }
    // -------------------------------------------------------------------------------------------------
    // @ Table - Simple
    // -------------------------------------------------------------------------------------------------
    .simple-table-container {
        background: map-get($background, card);
    }
    table {
        &.simple {
            thead {
                tr {
                    th {
                        color: map-get($foreground, secondary-text);
                        border-bottom: 1px solid map-get($foreground, divider);
                    }
                }
            }
            tbody {
                tr {
                    td {
                        border-bottom: 1px solid map-get($foreground, divider);
                    }
                }
            }
            &.clickable {
                tbody {
                    tr {
                        &:hover {
                            background-color: map-get($background, hover);
                        }
                    }
                }
            }
        }
    }
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Avatar
 // -----------------------------------------------------------------------------------------------------
 .avatar {
    width: 40px;
    min-width: 40px;
@@ -172,8 +9,9 @@
    margin: 0 8px 0 0;
    border-radius: 50%;
    font-size: 17px;
-    font-weight: 600;
+    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
    &.square {
        border-radius: 0;
@@ -220,7 +58,6 @@ mat-icon.status {
    &.online {
        color: #4CAF50;
        &:before {
            content: "check_circle";
        }
@@ -228,15 +65,14 @@ mat-icon.status {
    &.do-not-disturb {
        color: #F44336;
        &:before {
-            content: "remove_circle_outline";
+            content: "do_not_disturb_on";
        }
    }
    &.away {
-        color: #FFC107;
+        background-color: #FFC107;
-
+        color: #FFFFFF;
        &:before {
            content: "access_time";
        }
@@ -244,17 +80,18 @@ mat-icon.status {
    &.offline {
        color: #646464;
-
+        background-color: #FFFFFF;
        &:before {
            content: "not_interested";
        }
    }
 }
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
-// @ Forms
+/*  Forms
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
 .form-wrapper {
    background: #FFFFFF;
    padding: 16px;
    .form-title {
@@ -263,9 +100,9 @@ mat-icon.status {
    }
 }
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
-// @ Navigation - Simple
+/*  Navigation - Simple
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
 .navigation-simple {
    .item {
@@ -285,15 +122,24 @@ mat-icon.status {
        .title {
            font-size: 13px;
-            font-weight: 600;
+            font-weight: 500;
            line-height: 1;
        }
        &.selected {
            background-color: rgba(0, 0, 0, 0.06);
        }
    }
    .subheader {
        font-size: 13px;
-        font-weight: 600;
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
        font-weight: 500;
        margin-top: 8px;
        &.light {
            border-top: 1px solid rgba(255, 255, 255, 0.12);
        }
    }
    mat-divider {
@@ -301,16 +147,16 @@ mat-icon.status {
    }
 }
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
-// @ Pagination - Simple
+/*  Pagination
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
 .simple-pagination {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    padding: 0 8px;
    border-radius: 4px;
    @include mat-elevation(1);
    background-color: #FFFFFF;
    padding: 0 8px;
    .pagination-item {
        display: flex;
@@ -322,24 +168,32 @@ mat-icon.status {
        border-radius: 0;
        margin: 0;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.54);
        &:hover {
            color: rgba(0, 0, 0, 0.87);
        }
        &.active {
            cursor: default;
            color: rgba(0, 0, 0, 0.87);
        }
        &.disabled {
            cursor: default;
            color: rgba(0, 0, 0, 0.26);
        }
    }
 }
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
-// @ Price tables
+/*  Price Tables
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
 .price-tables {
    .price-table {
        position: relative;
        background-color: #FFFFFF;
        width: 280px;
        border-radius: 2px;
        margin: 12px;
@@ -363,7 +217,8 @@ mat-icon.status {
                .currency {
                    padding-right: 4px;
                    font-size: 24px;
-                    font-weight: 600;
+                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.54);
                }
                .value {
@@ -375,6 +230,7 @@ mat-icon.status {
                .period {
                    padding: 0 0 5px 4px;
                    font-size: 17px;
                    color: rgba(0, 0, 0, 0.54);
                }
            }
@@ -405,14 +261,14 @@ mat-icon.status {
                left: 50%;
                transform: translateX(-50%);
                font-size: 11px;
-                font-weight: 600;
+                font-weight: 500;
                padding: 6px 8px;
            }
            .package-type {
                padding: 48px 32px 24px 32px;
                font-size: 20px;
-                font-weight: 600;
+                font-weight: 500;
                text-align: center;
            }
@@ -422,7 +278,8 @@ mat-icon.status {
                .currency {
                    padding-right: 4px;
                    font-size: 24px;
-                    font-weight: 600;
+                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.54);
                }
                .value {
@@ -435,7 +292,8 @@ mat-icon.status {
            .period {
                padding: 0 32px;
                font-size: 15px;
-                font-weight: 600;
+                font-weight: 500;
                color: rgba(0, 0, 0, 0.54);
                text-align: center;
            }
@@ -470,7 +328,8 @@ mat-icon.status {
                .subtitle {
                    font-size: 17px;
-                    font-weight: 600;
+                    color: rgba(0, 0, 0, 0.54);
                    font-weight: 500;
                }
            }
@@ -480,7 +339,7 @@ mat-icon.status {
                .currency {
                    padding-right: 4px;
                    font-size: 15px;
-                    font-weight: 600;
+                    font-weight: 500;
                }
                .value {
@@ -498,6 +357,7 @@ mat-icon.status {
            .terms {
                margin: 32px;
                font-size: 15px;
                color: rgba(0, 0, 0, 0.54);
                .term {
                    padding-bottom: 16px;
@@ -515,15 +375,17 @@ mat-icon.status {
            .note {
                padding: 8px 32px 16px 32px;
                text-align: center;
                color: rgba(0, 0, 0, 0.54);
            }
        }
    }
 }
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
-// @ Table - Simple
+/*  Table - Simple
-// -----------------------------------------------------------------------------------------------------
+/*----------------------------------------------------------------*/
 .simple-table-container {
    background: #FFFFFF;
    .table-title {
        font-size: 20px;
@@ -545,7 +407,9 @@ table {
                th {
                    padding: 16px 8px;
-                    font-weight: 600;
+                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.54);
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    white-space: nowrap;
                    &:first-child {
@@ -565,6 +429,7 @@ table {
                td {
                    padding: 16px 8px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    &:first-child {
                        padding-left: 24px;
@@ -590,6 +455,10 @@ table {
                tr {
                    cursor: pointer;
                    &:hover {
                        background: rgba(0, 0, 0, 0.03);
                    }
                }
            }
        }
--- a/src/@fuse/scss/partials/_navigation.scss
+++ b/src/@fuse/scss/partials/_navigation.scss
@@ -4,7 +4,7 @@
        display: flex;
        align-items: center;
        height: 48px;
-        font-weight: 600;
+        font-weight: 500;
        padding-left: 24px;
        margin-top: 8px;
        font-size: 12px;
@@ -19,7 +19,7 @@
            display: flex;
            align-items: center;
            height: 48px;
-            font-weight: 600;
+            font-weight: 500;
            padding-left: 24px;
            margin-top: 8px;
            font-size: 12px;
@@ -53,7 +53,7 @@
                height: 20px;
                padding: 0 7px;
                font-size: 11px;
-                font-weight: 600;
+                font-weight: 500;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
                margin-left: 8px;
@@ -64,11 +64,11 @@
            }
            &:hover {
-                background-color: rgba(0, 0, 0, 0.04);
+                background-color: map-get($background, hover);
            }
            .mat-ripple-element {
-                background-color: rgba(0, 0, 0, 0.04);
+                background-color: map-get($background, hover);
            }
            &.active {
@@ -85,6 +85,7 @@
            .nav-link-icon {
                margin-right: 16px;
                opacity: 0.7;
            }
            .nav-link-icon,
@@ -218,29 +219,4 @@
            }
        }
    }
    // Material 2 style
    &.material2,
    .material2 & {
        .nav-subheader {
            height: 40px;
        }
        .nav-group {
            > .group-title {
                height: 40px;
            }
        }
        .nav-item {
            .nav-link {
                height: 40px;
                padding: 0 12px 0 24px;
                border-radius: 0 20px 20px 0;
                margin-right: 16px;
            }
        }
    }
 }
--- a/src/@fuse/scss/partials/_page-layouts.scss
+++ b/src/@fuse/scss/partials/_page-layouts.scss
@@ -1,91 +1,14 @@
-// -----------------------------------------------------------------------------------------------------
+// Page Layouts
 // @ Theming
 // -----------------------------------------------------------------------------------------------------
@mixin page-layouts-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    .page-layout {
        // Carded layout
        &.carded {
            // Fullwidth
            &.fullwidth {
                > .center {
                    > .content-card {
                        background: map-get($background, card);
                        border-radius: 8px 8px 0 0;
                        > .toolbar {
                            border-bottom-color: map-get($foreground, divider);
                        }
                    }
                }
            }
            // Left / Right sidebar
            &.left-sidebar,
            &.right-sidebar {
                > .center {
                    > .content-card {
                        background: map-get($background, card);
                        border-radius: 8px 8px 0 0;
                        > .toolbar {
                            border-bottom-color: map-get($foreground, divider);
                        }
                    }
                }
            }
        }
        // Simple layout
        &.simple {
            // Left / Right sidebar
            &.left-sidebar,
            &.right-sidebar {
                > .center {
                    > .content {
                        background: map-get($background, card);
                    }
                }
                // Inner sidebar
                &.inner-sidebar {
                    > .content {
                        > .center {
                            > .content {
                                background: map-get($background, card);
                            }
                        }
                    }
                }
            }
        }
    }
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Page Layouts
 // -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
 $carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
 $header-height: 120px !default;
-// Calculate toolbar-less carded header height
+$header-height: 120px !default;
 $header-height-sm: 100px !default;
 // Calculate toolbarless header height
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
 $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 .page-layout {
    position: relative;
@@ -107,6 +30,10 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
            right: 0;
            left: 0;
            height: $carded-header-height;
            @include media-breakpoint-down('sm') {
                height: $carded-header-height-sm;
            }
        }
        // Fullwidth
@@ -123,13 +50,18 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                width: 100%;
                min-width: 0;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                > .header {
                    height: $carded-header-height-without-toolbar !important;
                    min-height: $carded-header-height-without-toolbar !important;
                    max-height: $carded-header-height-without-toolbar !important;
                    @include media-breakpoint-down('sm') {
                        height: $carded-header-height-without-toolbar-sm !important;
                        min-height: $carded-header-height-without-toolbar-sm !important;
                        max-height: $carded-header-height-without-toolbar-sm !important;
                    }
                }
                > .content-card {
@@ -137,13 +69,13 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    flex-direction: column;
                    flex: 1 0 auto;
                    overflow: hidden;
-                    @include mat-elevation(1);
+                    @include mat-elevation(7);
                    > .toolbar {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
-                        border-bottom: 1px solid;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                        height: $carded-toolbar-height;
                        min-height: $carded-toolbar-height;
                        max-height: $carded-toolbar-height;
@@ -173,7 +105,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                            > .mat-tab-group {
                                overflow: hidden;
                                width: 100%;
                                .mat-tab-header {
@@ -212,9 +143,8 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                        flex: 1 1 auto;
                        > .content {
                            flex: 1 1 auto;
                            overflow: auto;
-                            -webkit-overflow-scrolling: touch;
+                            flex: 1 1 auto;
                        }
                    }
                }
@@ -236,7 +166,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                                            .tab-content {
                                                overflow: auto;
                                                -webkit-overflow-scrolling: touch;
                                            }
                                        }
                                    }
@@ -292,6 +221,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    height: $carded-header-height;
                    min-height: $carded-header-height;
                    max-height: $carded-header-height;
                    @include media-breakpoint-down('sm') {
                        height: $carded-header-height-sm;
                        min-height: $carded-header-height-sm;
                        max-height: $carded-header-height-sm;
                    }
                }
                .content {
@@ -309,7 +244,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                z-index: 3;
                margin-left: 32px;
                margin-right: 32px;
                width: 100%;
                min-width: 0;
                > .header {
@@ -317,6 +251,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    height: $carded-header-height-without-toolbar;
                    min-height: $carded-header-height-without-toolbar;
                    max-height: $carded-header-height-without-toolbar;
                    @include media-breakpoint-down('sm') {
                        height: $carded-header-height-without-toolbar-sm;
                        min-height: $carded-header-height-without-toolbar-sm;
                        max-height: $carded-header-height-without-toolbar-sm;
                    }
                }
                > .content-card {
@@ -324,14 +264,14 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    flex-direction: column;
                    flex: 1 1 auto;
                    overflow: hidden;
-                    @include mat-elevation(1);
+                    @include mat-elevation(7);
                    > .toolbar {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex: 1 1 auto;
-                        border-bottom: 1px solid;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                        height: $carded-toolbar-height;
                        min-height: $carded-toolbar-height;
                        max-height: $carded-toolbar-height;
@@ -356,7 +296,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    width: calc(100% - 32px);
                    min-width: 0;
-                    @include media-breakpoint('lt-lg') {
+                    @include media-breakpoint-down('md') {
                        width: calc(100% - 64px);
                    }
@@ -406,7 +346,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    .content {
                        overflow: auto;
                        -webkit-overflow-scrolling: touch;
                    }
                }
@@ -419,7 +358,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                        > .content {
                            flex: 1 1 auto;
                            overflow: auto;
                            -webkit-overflow-scrolling: touch;
                        }
                    }
                }
@@ -441,7 +379,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                                            .tab-content {
                                                overflow: auto;
                                                -webkit-overflow-scrolling: touch;
                                            }
                                        }
                                    }
@@ -542,8 +479,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                flex: 1 1 auto;
                z-index: 3;
                min-width: 0;
-                width: 100%;
+                @include mat-elevation(7);
                @include mat-elevation(1);
                > .header {
                    height: $header-height;
@@ -564,18 +500,16 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                    .content {
                        overflow: auto;
                        -webkit-overflow-scrolling: touch;
                    }
                }
                > .center {
                    flex: 1 1 auto;
                    overflow: auto;
                    -webkit-overflow-scrolling: touch;
                }
            }
-            // Inner sidebar
+            // Inner Sidebar
            &.inner-sidebar {
                flex-direction: column;
                overflow: hidden;
@@ -594,19 +528,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                        .content {
                            overflow: auto;
                            -webkit-overflow-scrolling: touch;
                        }
                    }
                    > .center {
                        flex: 1 1 auto;
                        overflow: auto;
                        -webkit-overflow-scrolling: touch;
                        > .content {
                            border-radius: 8px;
                            @include mat-elevation(1);
                        }
                    }
                }
            }
@@ -667,7 +594,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
        min-height: 100%;
    }
-    @include media-breakpoint('xs') {
+    @include media-breakpoint-down('xs') {
        // Smaller margins
        &.carded {
--- a/src/@fuse/scss/partials/_print.scss
+++ b/src/@fuse/scss/partials/_print.scss
@@ -9,6 +9,7 @@
    .page-break-before {
        display: none;
    }
 }
@media print {
@@ -35,24 +36,17 @@
    /* General styles */
    app {
-        fuse-sidebar,
+        fuse-navbar-vertical,
-        navbar,
+        fuse-navbar-horizontal,
-        toolbar,
+        fuse-toolbar,
-        footer,
+        fuse-footer,
-        .theme-options-button,
+        fuse-quick-panel,
        fuse-theme-options,
        .ps > .ps__rail-x,
        .ps > .ps__rail-y {
            display: none !important;
        }
        #main,
        #container-1,
        #container-2,
        #container-3 {
            padding: 0 !important;
        }
        .ps {
            overflow: visible !important;
        }
--- a/src/@fuse/scss/partials/_reset.scss
+++ b/src/@fuse/scss/partials/_reset.scss
@@ -0,0 +1,83 @@
 /*----------------------------------------------------------------*/
 /*  Reset
 /*----------------------------------------------------------------*/
 * {
    text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    &:before, &:after {
        box-sizing: border-box;
    }
    // Remove focus outline
    &:focus {
        outline: none;
    }
 }
 html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
 }
 // Reset non angular-material input's default browser/os styles
 *:not(mat-form-field) {
    > input {
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }
    > input[type="text"],
    > input[type="tel"],
    > input[type="email"],
    > input[type="search"],
    > input[type="password"],
    > input[type="button"],
    > button,
    > input[type="submit"],
    > input[type="image"],
    > textarea {
        appearance: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }
 }
 *:not(mat-form-field) {
    > input[type="button"],
    > button,
    > input[type="submit"] {
        background: none;
    }
 }
 button {
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
 }
 img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: none;
 }
--- a/src/@fuse/scss/partials/_scrollbars.scss
+++ b/src/@fuse/scss/partials/_scrollbars.scss
@@ -12,12 +12,12 @@ body:not(.is-mobile) {
    ::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
-        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-        border-radius: 12px;
+        border-radius: 24px;
    }
    ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 12px;
+        border-radius: 24px;
    }
 }
--- a/src/@fuse/scss/partials/_toolbar.scss
+++ b/src/@fuse/scss/partials/_toolbar.scss
@@ -0,0 +1,9 @@
 .toolbar {
    .toolbar-separator {
        height: 48px;
        width: 1px;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
        margin: 0 12px;
    }
 }
--- a/src/@fuse/scss/partials/_typography.scss
+++ b/src/@fuse/scss/partials/_typography.scss
@@ -1,47 +1,6 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Theming
 // -----------------------------------------------------------------------------------------------------
@mixin typography-theme($theme) {
    $background: map-get($theme, background);
    $accent: map-get($theme, accent);
    $is-dark: map-get($theme, is-dark);
    a {
        color: map-get($accent, default);
    }
    code {
        &:not(.highlight) {
            background-color: map-get($background, app-bar);
        }
    }
    .changelog {
        .entry {
            background-color: map-get($background, card);
        }
    }
    .text-boxed {
        @if ($is-dark) {
            background-color: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.54);
        } @else {
            background-color: rgba(0, 0, 0, 0.12);
            color: rgba(0, 0, 0, 0.54);
        }
    }
 }
 // -----------------------------------------------------------------------------------------------------
 // @ Typography
 // -----------------------------------------------------------------------------------------------------
 html {
    font-size: 62.5%;
-    font-family: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
+    font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
    line-height: 1.4 !important;
    letter-spacing: -0.1px !important;
 }
@@ -87,9 +46,10 @@ h6, .h6 {
 // Links
 a {
    color: mat-color($accent);
    text-decoration: none;
-    &:not(.mat-button):not(.mat-raised-button):not(.mat-flat-button):not(.mat-stroked-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
+    &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
        &:hover, &:active {
            text-decoration: underline;
@@ -143,10 +103,11 @@ code {
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;;
    &:not(.highlight) {
        background: rgba(0, 0, 0, 0.065);
        color: #106CC8;
        margin: 0 1px;
        padding: 2px 3px;
        border-radius: 2px;
        line-height: 1.7;
    }
 }
@@ -276,7 +237,6 @@ strong {
    line-height: 1.25;
 }
 .line-height-1\.5,
 .line-height-1\.50 {
    line-height: 1.5;
 }
@@ -285,29 +245,24 @@ strong {
    line-height: 1.75;
 }
 // Letter spacing helpers
 .letter-spacing-condensed {
    letter-spacing: -0.02em;
 }
 .letter-spacing-normal {
    letter-spacing: normal;
 }
 .letter-spacing-relaxed {
    letter-spacing: 0.02em;
 }
 // Boxed text
 .text-boxed {
    border-radius: 2px;
    padding: 4px 8px;
    margin: 0 8px;
    font-size: 11px;
-    font-weight: 600;
+    font-weight: 500;
    color: rgba(0, 0, 0, 0.54);
    background-color: rgba(0, 0, 0, 0.12);
    white-space: nowrap;
 }
 // Boxed text light
 .text-boxed-light {
    @extend .text-boxed;
    background-color: rgba(255, 255, 255, 0.7);
 }
 // Truncate
 .text-truncate {
    display: block;
@@ -325,6 +280,7 @@ strong {
 .changelog {
    .entry {
        background: white;
        margin-bottom: 24px;
        padding: 24px 32px;
        @include mat-elevation(2);
@@ -399,10 +355,6 @@ strong {
                li {
                    margin-bottom: 6px;
                    letter-spacing: 0.015em;
                    ul {
                        margin-top: 6px;
                    }
                }
            }
        }
--- a/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
+++ b/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
@@ -0,0 +1,360 @@
 /*@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?81091010');
  src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
  url('../font/fontello.woff2?81091010') format('woff2'),
  url('../font/fontello.woff?81091010') format('woff'),
  url('../font/fontello.ttf?81091010') format('truetype'),
  url('../font/fontello.svg?81091010#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
 }*/
 owl-date-time {
    [class^="icon-"]:before, [class*=" icon-"]:before {
        font-family: "Material Icons";
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: flex;
        align-items: center;
        justify-content: center;
        /* For safety - reset parent styles, that can break glyph codes*/
        font-variant: normal;
        text-transform: none;
        /* Font smoothing. That was taken from TWBS */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-cancel:before {
        content: 'close';
    }
    .icon-up-open:before {
        content: 'keyboard_arrow_up';
    }
    .icon-down-open:before {
        content: 'keyboard_arrow_down';
    }
    .icon-left-open:before {
        content: 'chevron_left';
    }
    .icon-right-open:before {
        content: 'chevron_right';
    }
    $white: #FFFFFF;
    $black: #000000;
    $grey: #DDDDDD;
    $blue: #0070BA;
    .owl-widget,
    .owl-widget * {
        box-sizing: border-box;
    }
    .owl-widget {
        font-size: 1em;
    }
    .owl-state-focus {
    }
    .owl-corner-all {
        border-radius: 2px;
    }
    .owl-corner-top {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }
    .owl-state-default {
        background: #FFFFFF;
        color: rgba(0, 0, 0, 0.87);
    }
    .owl-dateTime-inputWrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .owl-dateTime-input {
            background: none !important;
            padding: 0 !important;
            cursor: pointer;
            .owl-inputtext {
                margin: 0;
                padding: 8px;
                background: none !important;
                color: rgba(0, 0, 0, 0.87);
            }
        }
        .owl-dateTime-cancel {
            position: relative !important;
            right: 0 !important;
            top: 0 !important;
            transform: none !important;
            font-size: 16px !important;
            width: 16px !important;
            height: 16px !important;
            min-width: 16px !important;
            min-height: 16px !important;
            line-height: 16px !important;
            color: rgba(0, 0, 0, 0.54) !important;
        }
    }
    .owl-dateTime {
        position: relative;
        width: 140px;
        &.owl-dateTime-inline {
            width: auto;
            .owl-dateTime-dialog {
                position: relative;
                z-index: auto;
            }
        }
    }
    .owl-dateTime-dialog {
        width: 256px;
        user-select: none;
        z-index: 99999;
        top: 24px !important;
        right: 0 !important;
        left: auto !important;
        @include mat-elevation(4);
    }
    .owl-dateTime-dialogHeader {
        height: 2.5em;
        padding: .25em;
        background-color: rgba(0, 0, 0, .1);
        overflow-y: auto;
    }
    .owl-calendar-wrapper {
        padding: 16px !important;
    }
    .owl-calendar-control {
        .owl-calendar-controlNav {
            display: flex;
            align-items: center;
            justify-content: center;
            .nav-prev,
            .nav-next {
                display: flex;
                &:before {
                    font-family: "Material Icons";
                    position: relative !important;
                    right: 0 !important;
                    top: 0 !important;
                    transform: none !important;
                    font-size: 20px !important;
                    width: 20px !important;
                    height: 20px !important;
                    min-width: 20px !important;
                    min-height: 20px !important;
                    line-height: 20px !important;
                    content: "chevron_left";
                    color: rgba(0, 0, 0, 0.54);
                }
            }
            .nav-next:before {
                content: "chevron_right";
            }
        }
        .owl-calendar-controlContent {
            .month-control,
            .year-control {
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
            .month-control {
                margin-right: 8px;
            }
            .year-control {
            }
        }
    }
    .owl-calendar {
        table {
            border-spacing: 0 !important;
        }
        tbody td {
            &.owl-calendar-selected {
                background-color: $blue;
                color: $white;
            }
            &.owl-calendar-invalid {
                color: #ACACAC;
            }
            &.owl-calendar-outFocus {
                color: $grey;
            }
            &.owl-calendar-hidden {
                visibility: hidden;
            }
            &:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
                background-color: lighten($blue, 50%);
                color: $black;
            }
        }
    }
    .owl-years,
    .owl-months {
        td.owl-year,
        td.owl-month {
            padding: 0;
            font-size: 16px;
            width: 72px;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
        }
    }
    .owl-calendar-yearArrow {
        width: 24px !important;
        height: 24px !important;
        &.left {
            left: -16px !important;
        }
        &.right {
            right: -16px !important;
        }
    }
    .owl-weekdays {
        th.owl-weekday {
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 12px;
            padding: 0;
            color: rgba(0, 0, 0, 0.37);
        }
    }
    .owl-days {
        td.owl-day {
            height: 32px;
            width: 32px;
            line-height: 32px;
            cursor: pointer;
            border-radius: 100%;
            padding: 0;
            &.owl-day-today:before {
                content: '';
                display: block;
                position: absolute;
                right: 2px;
                top: 2px;
                border-top: .5em solid lighten($blue, 20%);
                border-left: .5em solid transparent;
            }
        }
    }
    .owl-timer-wrapper {
        height: 88px;
        padding: 8px !important;
        background-color: rgba(0, 0, 0, 0.06);
        .owl-timer-input {
            background: none;
            width: 100% !important;
            text-align: center;
        }
        .owl-timer-text {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40%;
            font-size: 20px;
        }
        .owl-meridian-btn {
            font-size: .8em;
            color: $blue;
            background-image: none;
            background-color: transparent;
            border-color: $blue;
            &:hover {
                color: $white;
                background-color: $blue;
                border-color: $blue;
            }
        }
    }
    .owl-timer-divider {
        display: inline-block;
        position: absolute;
        width: 8px;
        height: 100%;
        left: -2px;
        .owl-timer-dot {
            display: block;
            background: rgba(0, 0, 0, 0.37);
            width: 3px;
            height: 3px;
            position: absolute;
            left: 50%;
            border-radius: 100%;
            transform: translateX(-50%);
            &.dot-top {
                top: 40%;
            }
            &.dot-bottom {
                bottom: 40%;
            }
        }
    }
 }
--- a/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss
+++ b/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss
@@ -11,7 +11,6 @@
        height: 140px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        > hr {
            display: none;
--- a/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
+++ b/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
@@ -1,76 +1,3 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Theming
 // -----------------------------------------------------------------------------------------------------
@mixin ngx-datatable-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    ngx-datatable {
        &.material {
            background: map-get($background, card);
            color: map-get($foreground, text);
            .datatable-header {
                .datatable-header-cell {
                    color: map-get($foreground, secondary-text);
                }
            }
            .datatable-body {
                .datatable-row-wrapper {
                    border-bottom-color: map-get($foreground, divider);
                    &:first-child {
                        border-top-color: map-get($foreground, divider);
                    }
                    .datatable-body-row {
                        .datatable-body-cell {
                            color: map-get($foreground, text);
                        }
                    }
                }
            }
            .datatable-footer {
                color: map-get($foreground, secondary-text);
                .datatable-pager {
                    a {
                        color: map-get($foreground, secondary-text);
                    }
                }
            }
            &:not(.cell-selection) {
                .datatable-body {
                    .datatable-row-wrapper {
                        .datatable-body-row {
                            &:hover {
                                background-color: map-get($background, hover);
                                .datatable-row-group {
                                    background-color: map-get($background, hover);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
 }
 .ngx-datatable {
    &.material {
@@ -95,11 +22,6 @@
                min-height: 48px;
                font-size: 13px;
                padding: 0 24px;
                .datatable-header-cell-template-wrap {
                    display: inline-flex;
                    align-items: center;
                }
            }
        }
@@ -120,11 +42,12 @@
            }
            .datatable-row-wrapper {
-                border-bottom: 1px solid;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                &:first-child {
-                    border-top: 1px solid;
+                    border-top: 1px solid rgba(0, 0, 0, 0.12);
                }
                .datatable-body-cell {
                    display: inline-flex;
                    align-items: center;
@@ -144,7 +67,7 @@
            .datatable-footer-inner {
                padding: 0 24px;
-                @include media-breakpoint('lt-md') {
+                @include media-breakpoint('sm') {
                    flex-direction: column;
                    padding: 16px 0;
                    height: auto !important;
@@ -166,18 +89,7 @@
                        li {
                            a {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                text-decoration: none !important;
                                i {
                                    width: 20px;
                                    min-width: 20px;
                                    height: 20px;
                                    min-height: 20px;
                                    padding: 0;
                                }
                            }
                        }
                    }
@@ -188,7 +100,7 @@
 }
 [class*="datatable-icon-"] {
-    font-family: 'material-outline-icons';
+    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
@@ -206,63 +118,48 @@
 .datatable-icon-filter:before {
    content: "filter_list";
 }
 .datatable-icon-collapse:before {
    content: "unfold_less";
 }
 .datatable-icon-expand:before {
    content: "unfold_more";
 }
 .datatable-icon-close:before {
    content: "close";
 }
 .datatable-icon-up:before {
-    content: "arrow_drop_up";
+    content: "keyboard_arrow_up";
 }
 .datatable-icon-down:before {
-    content: "arrow_drop_down";
+    content: "keyboard_arrow_down";
 }
 .datatable-icon-sort:before {
    content: "sort";
 }
 .datatable-icon-done:before {
    content: "done";
 }
 .datatable-icon-done-all:before {
    content: "done_all";
 }
 .datatable-icon-search:before {
    content: "search";
 }
 .datatable-icon-pin:before {
    content: "lock";
 }
 .datatable-icon-add:before {
    content: "add";
 }
 .datatable-icon-left:before {
    content: "chevron_left";
 }
 .datatable-icon-right:before {
    content: "chevron_right";
 }
 .datatable-icon-skip:before {
    content: "skip_next";
 }
 .datatable-icon-prev:before {
    content: "skip_previous";
 }
--- a/src/@fuse/scss/theme.scss
+++ b/src/@fuse/scss/theme.scss
@@ -1,30 +0,0 @@
@import "src/@fuse/components/countdown/countdown.theme";
@import "src/@fuse/components/material-color-picker/material-color-picker.theme";
@import "src/@fuse/components/search-bar/search-bar.theme";
@import "src/@fuse/components/shortcuts/shortcuts.theme";
@import "src/@fuse/components/sidebar/sidebar.theme";
@import "src/@fuse/components/theme-options/theme-options.theme";
@import "src/@fuse/components/widget/widget.theme";
@mixin fuse-core-theme($theme) {
    // Theming for Fuse core styles
    @include colors-theme($theme);
    @include cards-theme($theme);
    @include material-theme($theme);
    @include page-layouts-theme($theme);
    @include typography-theme($theme);
    // Theming for Fuse components
    @include fuse-countdown-theme($theme);
    @include fuse-search-bar-theme($theme);
    @include fuse-shortcuts-theme($theme);
    @include fuse-sidebar-theme($theme);
    @include fuse-theme-options-theme($theme);
    @include fuse-material-color-picker-theme($theme);
    @include fuse-widget-theme($theme);
    // Theming for 3rd party components
    @include ngx-datatable-theme($theme);
 }
--- a/src/@fuse/scss/theming.scss
+++ b/src/@fuse/scss/theming.scss
@@ -0,0 +1,66 @@
@import '~@angular/material/theming';
 // Custom color maps
 $mat-white: (
    500: white,
    contrast: (
        500: $black-87-opacity
    )
 );
 $mat-black: (
    500: black,
    contrast: (
        500: white,
    )
 );
 $mat-fusedark: (
    50: #ECECEE,
    100: #C5C6CB,
    200: #9EA1A9,
    300: #7D818C,
    400: #5C616F,
    500: #3C4252,
    600: #353A48,
    700: #2D323E,
    800: #262933,
    900: #1E2129,
    A100: #C5C6CB,
    A200: #9EA1A9,
    A400: #5C616F,
    A700: #2D323E,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: white,
        400: white,
        500: $white-87-opacity,
        600: $white-87-opacity,
        700: $white-87-opacity,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: $white-87-opacity,
        A400: $white-87-opacity,
        A700: $white-87-opacity,
    )
 );
 // Define the Material palettes
 $primary: mat-palette($mat-fusedark);
 $accent: mat-palette($mat-light-blue, 600, 400, 700);
 $warn: mat-palette($mat-red);
 // Create the Material theme object
 $theme: mat-light-theme($primary, $accent, $warn);
 // Store the background and foreground colors for easier access
 $background: map-get($theme, background);
 $foreground: map-get($theme, foreground);
 // Force the input field font sizes to 16px
 $typography: mat-typography-config(
    $input: mat-typography-level(16px, 1.125, 400)
 )
--- a/src/@fuse/services/config.service.ts
+++ b/src/@fuse/services/config.service.ts
@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { ResolveEnd, Router } from '@angular/router';
+import { NavigationStart, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -8,9 +8,7 @@ import * as _ from 'lodash';
 // Create the injection token for the custom settings
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
-@Injectable({
+@Injectable()
    providedIn: 'root'
 })
 export class FuseConfigService
 {
    // Private
@@ -93,18 +91,15 @@ export class FuseConfigService
        // Set the config from the default config
        this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig));
-        // Reload the default layout config on every RoutesRecognized event
+        // Reload the default config on every navigation start if
-        // if the current layout config is different from the default one
+        // the current config is different from the default one
        this._router.events
-            .pipe(filter(event => event instanceof ResolveEnd))
+            .pipe(filter(event => event instanceof NavigationStart))
            .subscribe(() => {
-                if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
+                if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) )
                {
-                    // Clone the current config
+                    // Clone the default config
-                    const config = _.cloneDeep(this._configSubject.getValue());
+                    const config = _.cloneDeep(this._defaultConfig);
                    // Reset the layout from the default config
                    config.layout = _.cloneDeep(this._defaultConfig.layout);
                    // Set the config
                    this._configSubject.next(config);
--- a/src/@fuse/services/copier.service.ts
+++ b/src/@fuse/services/copier.service.ts
@@ -1,15 +1,14 @@
 /**
 * This class is based on the code in the following projects:
- * https://github.com/zenorocha/select
+ *
- * https://github.com/zenorocha/clipboard.js/
+ * - https://github.com/zenorocha/select
 * - https://github.com/zenorocha/clipboard.js/
 *
 * Both released under MIT license - © Zeno Rocha
 */
 import { Injectable } from '@angular/core';
-@Injectable({
+@Injectable()
    providedIn: 'root'
 })
 export class FuseCopierService
 {
    private textarea: HTMLTextAreaElement;
--- a/src/@fuse/services/match-media.service.ts
+++ b/src/@fuse/services/match-media.service.ts
@@ -1,11 +1,8 @@
-import { MediaChange, MediaObserver } from '@angular/flex-layout';
+import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-@Injectable({
+@Injectable()
    providedIn: 'root'
 })
 export class FuseMatchMediaService
 {
    activeMediaQuery: string;
@@ -14,10 +11,10 @@ export class FuseMatchMediaService
    /**
     * Constructor
     *
-     * @param {MediaObserver} _mediaObserver
+     * @param {ObservableMedia} _observableMedia
     */
    constructor(
-        private _mediaObserver: MediaObserver
+        private _observableMedia: ObservableMedia
    )
    {
        // Set the defaults
@@ -39,11 +36,7 @@ export class FuseMatchMediaService
     */
    private _init(): void
    {
-        this._mediaObserver.media$
+        this._observableMedia
            .pipe(
                debounceTime(500),
                distinctUntilChanged()
            )
            .subscribe((change: MediaChange) => {
                if ( this.activeMediaQuery !== change.mqAlias )
                {
--- a/src/@fuse/services/splash-screen.service.ts
+++ b/src/@fuse/services/splash-screen.service.ts
@@ -3,11 +3,7 @@ import { DOCUMENT } from '@angular/common';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { NavigationEnd, Router } from '@angular/router';
-import { filter, take } from 'rxjs/operators';
+@Injectable()
@Injectable({
    providedIn: 'root'
 })
 export class FuseSplashScreenService
 {
    splashScreenEl: any;
@@ -48,16 +44,19 @@ export class FuseSplashScreenService
        if ( this.splashScreenEl )
        {
            // Hide it on the first NavigationEnd event
-            this._router.events
+            const hideOnLoad = this._router.events.subscribe((event) => {
-                .pipe(
+                    if ( event instanceof NavigationEnd )
-                    filter((event => event instanceof NavigationEnd)),
+                    {
                    take(1)
                )
                .subscribe(() => {
                        setTimeout(() => {
                            this.hide();
-                    });
+
-                });
+                            // Unsubscribe from this event so it
                            // won't get triggered again
                            hideOnLoad.unsubscribe();
                        }, 0);
                    }
                }
            );
        }
    }
--- a/src/@fuse/services/translation-loader.service.ts
+++ b/src/@fuse/services/translation-loader.service.ts
@@ -7,9 +7,7 @@ export interface Locale
    data: Object;
 }
-@Injectable({
+@Injectable()
    providedIn: 'root'
 })
 export class FuseTranslationLoaderService
 {
    /**
--- a/Show More
+++ b/Show More
`@@ -1,2 +1 @@`
	`This project is protected by Envato's Regular License. For more information,`	`https://themeforest.net/licenses/terms/regular`
	`check the official license page at https://themeforest.net/licenses/terms/regular`