more filesHEADmaster

30 files changed, 6428 insertions, 0 deletions

diff --git a/src/dashboard/README.md b/src/dashboard/README.md
new file mode 100644
index 0000000..1e2249e
--- /dev/null
+++ b/src/dashboard/README.md
@@ -0,0 +1,25 @@
+# Dashboard Layout
+
+The dashboard has 2 main sections, the navigation sidebar and the main panel.
+
+The main panel uses a card layout to display different views into the data.
+
+![Dashboard Layout](documentation/images/dashboard_layout.jpg)
+
+## Adding a card
+* Create a new card in the ```/templates/cards``` folder.
+* Include the new card to the ```/templates/dashboard.html``` file.
+
+## Adding a new page
+* Create a new page in the ```/templates``` folder. 
+* Follow the exact format as the dashboard.html file.
+* Add new cards in the ```/templates/cards``` folder and include them in the new page.
+* Update the sidebar file ```/templates/includes/sidebar.html``` with a link to the new page.
+
+## Register cronjobs for generating Dashboard reports
+* Register - ```python3 manage.py crontab add```
+* List active cronjbos - ```python3 manage.py crontab show```
+* Remove all active cronjbos - ```python3 manage.py crontab remove```
+* Remove a single active cronjbos - ```python3 manage.py crontab remove <cron id>```
+
+For more info see ![django-crontab](https://github.com/kraiz/django-crontab#readme)
diff --git a/src/dashboard/__init__.py b/src/dashboard/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/dashboard/__init__.py
diff --git a/src/dashboard/apps.py b/src/dashboard/apps.py
new file mode 100644
index 0000000..84fc990
--- /dev/null
+++ b/src/dashboard/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class DashboardConfig(AppConfig):
+    name = 'dashboard'
+
diff --git a/src/dashboard/documentation/images/dashboard_layout.jpg b/src/dashboard/documentation/images/dashboard_layout.jpg
new file mode 100644
index 0000000..a949625
--- /dev/null
+++ b/src/dashboard/documentation/images/dashboard_layout.jpg
diff --git a/src/dashboard/services/caasqueryservice.py b/src/dashboard/services/caasqueryservice.py
new file mode 100644
index 0000000..b367c33
--- /dev/null
+++ b/src/dashboard/services/caasqueryservice.py
@@ -0,0 +1,31 @@
+import json
+from django.apps import apps
+
+
+class CaaSQueryService:
+    def get_clusters(self):
+        wr_install_schedule = apps.get_model('caas', 'WrInstallSchedule')
+        installs = list(wr_install_schedule.objects.select_related('cluster')
+                        .values('cluster__cluster_name',
+                                'date_scheduled',
+                                'date_completed',
+                                'date_last_failed',
+                                'kirke_ticket_number',
+                                'kirke_ticket_status',
+                                'kirke_ticket_completed'))
+        return json.dumps(installs, indent=4, sort_keys=True, default=str)
+
+    def get_firmware_version(self):
+        firmware_schedule = apps.get_model('caas', 'FirmwareUpgradeSchedule')
+        query_set = firmware_schedule.objects.select_related('server').order_by('id', 'date_completed')
+        servers = []
+        for server in query_set:
+            servers.append(
+                {'id': server.id,
+                'oam_hostname': server.server.oam_hostname,
+                'ilo_host_address': server.server.ilo_host_address,
+                'intel_nic_firmware_version': server.server.intel_nic_firmware_version,
+                'date_completed': server.date_completed,
+                'date_last_failed': server.date_last_failed},
+                )
+        return json.dumps(servers, indent=4, sort_keys=True, default=str)
diff --git a/src/dashboard/static/css/styles.css b/src/dashboard/static/css/styles.css
new file mode 100644
index 0000000..7c4a542
--- /dev/null
+++ b/src/dashboard/static/css/styles.css
@@ -0,0 +1,5242 @@
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@-moz-keyframes spin {
+    from {
+        -moz-transform: rotate(0deg);
+    }
+    to {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-ms-keyframes spin {
+    from {
+        -ms-transform: rotate(0deg);
+    }
+    to {
+        -ms-transform: rotate(360deg);
+    }
+}
+
+
+/*           Font Smoothing      */
+
+body,
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6,
+p,
+.navbar,
+.brand,
+.btn-simple,
+.alert,
+a,
+.td-name,
+td,
+button.close {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
+    font-weight: 400;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4 {
+    font-weight: 300;
+    margin: 30px 0 15px;
+}
+
+h1,
+.h1 {
+    font-size: 52px;
+}
+
+h2,
+.h2 {
+    font-size: 36px;
+}
+
+h3,
+.h3 {
+    font-size: 28px;
+    margin: 20px 0 10px;
+}
+
+h4,
+.h4 {
+    font-size: 22px;
+    line-height: 30px;
+}
+
+h5,
+.h5 {
+    font-size: 16px;
+    margin-bottom: 15px;
+}
+
+h6,
+.h6 {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+p {
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small,
+.h1 small,
+.h2 small,
+.h3 small,
+.h4 small,
+.h5 small,
+.h6 small,
+h1 .small,
+h2 .small,
+h3 .small,
+h4 .small,
+h5 .small,
+h6 .small,
+.h1 .small,
+.h2 .small,
+.h3 .small,
+.h4 .small,
+.h5 .small,
+.h6 .small {
+    color: #9A9A9A;
+    font-weight: 300;
+    line-height: 1.5;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h1 .small,
+h2 .small,
+h3 .small {
+    font-size: 60%;
+}
+
+h1 .subtitle {
+    display: block;
+    margin: 0 0 30px;
+}
+
+.text-muted {
+    color: #9A9A9A;
+}
+
+.text-primary,
+.text-primary:hover {
+    color: #1D62F0 !important;
+}
+
+.text-info,
+.text-info:hover {
+    color: #1DC7EA !important;
+}
+
+.text-success,
+.text-success:hover {
+    color: #87CB16 !important;
+}
+
+.text-warning,
+.text-warning:hover {
+    color: #FF9500 !important;
+}
+
+.text-danger,
+.text-danger:hover {
+    color: #FF4A55 !important;
+}
+
+
+/*     General overwrite     */
+
+body,
+.wrapper {
+    min-height: 100vh;
+    position: relative;
+}
+
+a {
+    color: #1DC7EA;
+}
+
+a:hover,
+a:focus {
+    color: #42d0ed;
+    text-decoration: none;
+}
+
+a:focus,
+a:active,
+button::-moz-focus-inner,
+input::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+select::-moz-focus-inner,
+input[type="file"]>input[type="button"]::-moz-focus-inner {
+    outline: 0;
+}
+
+.ui-slider-handle:focus,
+.navbar-toggle,
+input:focus {
+    outline: 0 !important;
+}
+
+
+/*           Animations              */
+
+.form-control,
+.input-group-addon,
+.tagsinput,
+.navbar,
+.navbar .alert {
+    -webkit-transition: all 300ms linear;
+    -moz-transition: all 300ms linear;
+    -o-transition: all 300ms linear;
+    -ms-transition: all 300ms linear;
+    transition: all 300ms linear;
+}
+
+.sidebar .nav a,
+.table>tbody>tr .td-actions .btn {
+    -webkit-transition: all 150ms ease-in;
+    -moz-transition: all 150ms ease-in;
+    -o-transition: all 150ms ease-in;
+    -ms-transition: all 150ms ease-in;
+    transition: all 150ms ease-in;
+}
+
+.btn {
+    -webkit-transition: all 100ms ease-in;
+    -moz-transition: all 100ms ease-in;
+    -o-transition: all 100ms ease-in;
+    -ms-transition: all 100ms ease-in;
+    transition: all 100ms ease-in;
+}
+
+.fa {
+    width: 18px;
+    text-align: center;
+}
+
+.margin-top {
+    margin-top: 50px;
+}
+
+.wrapper {
+    position: relative;
+    top: 0;
+    height: 100vh;
+}
+
+.page-header .page-header-image {
+    background-position: center center;
+    background-size: cover;
+    overflow: hidden;
+    width: 100%;
+    z-index: 1;
+}
+
+.page-header .title-container {
+    color: #fff;
+    position: relative;
+    top: 250px;
+    z-index: 3;
+}
+
+.page-header .filter:after {
+    background: transparent linear-gradient(to bottom, #9368e9 0%, #943bea 100%) repeat scroll 0 0/150% 150%;
+    content: "";
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: 0.77;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+}
+
+.documentation .page-header,
+.documentation .page-header-image,
+.documentation .page-header-image .filter:after {
+    height: 100vh;
+}
+
+.documentation .footer {
+    z-index: 3;
+}
+
+.documentation .wrapper {
+    margin-top: -61px;
+    height: 100vh;
+}
+
+.documentation .navbar {
+    z-index: 21;
+}
+
+.sidebar,
+body>.navbar-collapse {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 200px;
+    display: block;
+    z-index: 1;
+    color: #fff;
+    font-weight: 200;
+    background-size: cover;
+    background-position: center center;
+}
+
+.sidebar .sidebar-wrapper,
+body>.navbar-collapse .sidebar-wrapper {
+    position: relative;
+    max-height: calc(100vh - 75px);
+    min-height: 100%;
+    overflow: auto;
+    width: 200px;
+    z-index: 4;
+    padding-bottom: 100px;
+}
+
+.sidebar .sidebar-background,
+body>.navbar-collapse .sidebar-background {
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    display: block;
+    top: 0;
+    left: 0;
+    background-size: cover;
+    background-position: center center;
+}
+
+.sidebar .logo,
+body>.navbar-collapse .logo {
+    padding: 10px 15px 9px 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    position: relative;
+    z-index: 4;
+    background: #CD040B;
+}
+
+.sidebar .logo p,
+body>.navbar-collapse .logo p {
+    float: left;
+    font-size: 20px;
+    margin: 10px 10px;
+    color: #FFFFFF;
+    line-height: 20px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.sidebar .logo .simple-text,
+body>.navbar-collapse .logo .simple-text {
+    text-transform: uppercase;
+    padding: 2px 0px;
+    display: block;
+    font-size: 18px;
+    color: #FFFFFF;
+    text-align: center;
+    font-weight: 400;
+    line-height: 30px;
+    background: #CD040B;
+}
+
+.sidebar .logo-tim,
+body>.navbar-collapse .logo-tim {
+    border-radius: 50%;
+    border: 1px solid #333;
+    display: block;
+    height: 61px;
+    width: 61px;
+    float: left;
+    overflow: hidden;
+}
+
+.sidebar .logo-tim img,
+body>.navbar-collapse .logo-tim img {
+    width: 60px;
+    height: 60px;
+}
+
+.sidebar .nav,
+body>.navbar-collapse .nav {
+    margin-top: 20px;
+    float: none;
+    display: block;
+}
+
+.sidebar .nav li .nav-link,
+body>.navbar-collapse .nav li .nav-link {
+    color: #000000;
+    margin: 5px 15px;
+    opacity: .86;
+    border-radius: 4px;
+    display: block;
+    padding: 10px 15px;
+}
+
+.sidebar .nav li .nav-link:hover,
+body>.navbar-collapse .nav li .nav-link:hover {
+    background: rgba(255, 255, 255, 0.13);
+    opacity: 1;
+}
+
+.sidebar .nav li .nav-link p,
+body>.navbar-collapse .nav li .nav-link p {
+    margin: 0;
+    line-height: 31px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display: inline-flex;
+}
+
+.sidebar .nav li .nav-link i,
+body>.navbar-collapse .nav li .nav-link i {
+    font-size: 28px;
+    margin-right: 15px;
+    width: 30px;
+    text-align: center;
+    vertical-align: middle;
+    float: left;
+}
+
+.sidebar .nav li:hover .nav-link,
+body>.navbar-collapse .nav li:hover .nav-link {
+    background: rgba(255, 255, 255, 0.13);
+    opacity: 1;
+}
+
+.sidebar .nav li.active .nav-link,
+body>.navbar-collapse .nav li.active .nav-link {
+    color: #FFFFFF;
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.23);
+}
+
+.sidebar .nav li.separator,
+body>.navbar-collapse .nav li.separator {
+    margin: 15px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.sidebar .nav li.separator+.nav-item,
+body>.navbar-collapse .nav li.separator+.nav-item {
+    margin-top: 31px;
+}
+
+.sidebar .nav .caret,
+body>.navbar-collapse .nav .caret {
+    margin-top: 13px;
+    position: absolute;
+    right: 30px;
+}
+
+.sidebar .nav .active-pro,
+body>.navbar-collapse .nav .active-pro {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+}
+
+.sidebar .nav .active-pro a,
+body>.navbar-collapse .nav .active-pro a {
+    color: #FFFFFF !important;
+}
+
+.sidebar .nav .nav-link,
+body>.navbar-collapse .nav .nav-link {
+    color: #FFFFFF;
+    margin: 5px 15px;
+    opacity: .86;
+    border-radius: 4px;
+    text-transform: uppercase;
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.sidebar .logo,
+body>.navbar-collapse .logo {
+    padding: 10px 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.sidebar .logo p,
+body>.navbar-collapse .logo p {
+    float: left;
+    font-size: 20px;
+    margin: 10px 10px;
+    color: #FFFFFF;
+    line-height: 20px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.sidebar .logo .simple-text,
+body>.navbar-collapse .logo .simple-text {
+    text-transform: uppercase;
+    padding: 4px 0px;
+    display: block;
+    font-size: 12px;
+    color: #FFFFFF;
+    text-align: center;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.sidebar .logo-tim,
+body>.navbar-collapse .logo-tim {
+    border-radius: 50%;
+    border: 1px solid #333;
+    display: block;
+    height: 61px;
+    width: 61px;
+    float: left;
+    overflow: hidden;
+}
+
+.sidebar .logo-tim img,
+body>.navbar-collapse .logo-tim img {
+    width: 60px;
+    height: 60px;
+}
+
+.sidebar:after,
+.sidebar:before,
+body>.navbar-collapse:after,
+body>.navbar-collapse:before {
+    display: block;
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 2;
+}
+
+.sidebar:before,
+body>.navbar-collapse:before {
+    opacity: .33;
+    background: #000000;
+}
+
+.sidebar:after,
+body>.navbar-collapse:after {
+    background: #777777;
+    background: -moz-linear-gradient(top, #777777 0%, #777777 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #777777));
+    background: -webkit-linear-gradient(top, #777777 0%, #777777 100%);
+    background: -o-linear-gradient(top, #777777 0%, #777777 100%);
+    background: -ms-linear-gradient(top, #777777 0%, #777777 100%);
+    background: linear-gradient(to bottom, #777777 0%, #777777 100%);
+    background-size: 150% 150%;
+    z-index: 3;
+    opacity: 1;
+}
+
+.sidebar[data-image]:after,
+.sidebar.has-image:after,
+body>.navbar-collapse[data-image]:after,
+body>.navbar-collapse.has-image:after {
+    opacity: .77;
+}
+
+.sidebar[data-color="black"]:after,
+body>.navbar-collapse[data-color="black"]:after {
+    background: #dadada;
+    background: -moz-linear-gradient(top, #dadada 0%, #dadada 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dadada), color-stop(100%, #dadada));
+    background: -webkit-linear-gradient(top, #dadada 0%, #dadada 100%);
+    background: -o-linear-gradient(top, #dadada 0%, #dadada 100%);
+    background: -ms-linear-gradient(top, #dadada 0%, #dadada 100%);
+    background: linear-gradient(to bottom, #dadada 0%, #dadada 100%);
+    background-size: 150% 150%;
+}
+
+.sidebar[data-color="red"]:after,
+body>.navbar-collapse[data-color="red"]:after {
+    background: #CD040B;
+    background: -moz-linear-gradient(top, #CD040B 0%, #CD040B 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CD040B), color-stop(100%, #CD040B));
+    background: -webkit-linear-gradient(top, #CD040B 0%, #CD040B 100%);
+    background: -o-linear-gradient(top, #CD040B 0%, #CD040B 100%);
+    background: -ms-linear-gradient(top, #CD040B 0%, #CD040B 100%);
+    background: linear-gradient(to bottom, #CD040B 0%, #CD040B 100%);
+    background-size: 150% 150%;
+}
+
+.sidebar[data-color="white"]:after,
+body>.navbar-collapse[data-color="red"]:after {
+    background: #FFFFFF;
+    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #FFFFFF));
+    background: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
+    background: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
+    background: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
+    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
+    background-size: 150% 150%;
+}
+
+.main-panel {
+    background: rgba(203, 203, 210, 0.15);
+    position: relative;
+    float: right;
+    width: calc(100% - 200px);
+    min-height: 100%;
+}
+
+.main-panel>.content {
+    padding: 30px 15px;
+    min-height: calc(100% - 123px);
+}
+
+.main-panel>.footer {
+    border-top: 1px solid #e7e7e7;
+}
+
+.main-panel .navbar {
+    margin-bottom: 0;
+    background: #CD040B
+}
+
+.sidebar,
+.main-panel {
+    overflow: auto;
+    max-height: 100%;
+    height: 100%;
+    -webkit-transition-property: top, bottom;
+    transition-property: top, bottom;
+    -webkit-transition-duration: .2s, .2s;
+    transition-duration: .2s, .2s;
+    -webkit-transition-timing-function: linear, linear;
+    transition-timing-function: linear, linear;
+    -webkit-overflow-scrolling: touch;
+}
+
+.fixed-plugin .dropdown .dropdown-menu {
+    -webkit-transform: translate3d(0, -5%, 0) !important;
+    -moz-transform: translate3d(0, -5%, 0) !important;
+    -o-transform: translate3d(0, -5%, 0) !important;
+    -ms-transform: translate3d(0, -5%, 0) !important;
+    transform: translate3d(0, -5%, 0) !important;
+    border-radius: 10px;
+}
+
+.fixed-plugin .dropdown .dropdown-menu li.adjustments-line {
+    border-bottom: 1px solid #ddd;
+}
+
+.fixed-plugin .dropdown .dropdown-menu li {
+    padding: 5px 2px !important;
+}
+
+.fixed-plugin .dropdown .dropdown-menu .button-container a {
+    font-size: 14px;
+}
+
+.fixed-plugin .dropdown .dropdown-menu .button-container.show {
+    -webkit-transform: translate3d(0, 0%, 0) !important;
+    -moz-transform: translate3d(0, 0%, 0) !important;
+    -o-transform: translate3d(0, 0%, 0) !important;
+    -ms-transform: translate3d(0, 0%, 0) !important;
+    transform: translate3d(0, 0%, 0) !important;
+    transform-origin: 0 0;
+    left: -303px !important;
+}
+
+.fixed-plugin .dropdown .dropdown-menu {
+    -webkit-transform: translate3d(0, -5%, 0) !important;
+    -moz-transform: translate3d(0, -5%, 0) !important;
+    -o-transform: translate3d(0, -5%, 0) !important;
+    -ms-transform: translate3d(0, -5%, 0) !important;
+    transform: translate3d(0, -5%, 0) !important;
+    top: -40px !important;
+    opacity: 0;
+    left: -303px !important;
+    transform-origin: 0 0;
+}
+
+.fixed-plugin .dropdown.show .dropdown-menu {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0%, 0) !important;
+    -moz-transform: translate3d(0, 0%, 0) !important;
+    -o-transform: translate3d(0, 0%, 0) !important;
+    -ms-transform: translate3d(0, 0%, 0) !important;
+    transform: translate3d(0, 0%, 0) !important;
+    transform-origin: 0 0;
+    left: -303px !important;
+}
+
+.fixed-plugin .dropdown-menu:before,
+.fixed-plugin .dropdown-menu:after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 65px;
+    width: 16px;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+}
+
+.fixed-plugin .dropdown-menu:before {
+    border-bottom: 16px solid transparent;
+    border-left: 16px solid rgba(0, 0, 0, 0.2);
+    border-top: 16px solid transparent;
+    right: -16px;
+}
+
+.fixed-plugin .dropdown-menu:after {
+    border-bottom: 16px solid transparent;
+    border-left: 16px solid #fff;
+    border-top: 16px solid transparent;
+    right: -15px;
+}
+
+.modal.show .modal-dialog {
+    -webkit-transform: translate(0, 30%);
+    -o-transform: translate(0, 30%);
+    transform: translate(0, 30%);
+}
+
+.modal.modal-mini .modal-dialog {
+    max-width: 255px;
+    margin: 0 auto;
+}
+
+.modal .modal-content .modal-header {
+    border-bottom: none;
+    padding-top: 24px;
+    padding-right: 24px;
+    padding-bottom: 0;
+    padding-left: 24px;
+}
+
+.modal .modal-content .modal-header .modal-profile {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 5.7;
+    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.3);
+}
+
+.modal .modal-content .modal-header .modal-profile i {
+    font-size: 32px;
+    padding-top: 24px;
+}
+
+.modal .modal-content .modal-body {
+    padding-top: 24px;
+    padding-right: 24px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+    line-height: 1.9;
+}
+
+.modal .modal-content .modal-body+.modal-footer {
+    padding-top: 0;
+}
+
+.modal .modal-content .modal-footer {
+    border-top: none;
+    padding-right: 24px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.modal .modal-content .modal-footer .btn {
+    margin: 0;
+    padding-left: 16px;
+    padding-right: 16px;
+    width: auto;
+}
+
+.modal .modal-content .modal-footer .btn:hover,
+.modal .modal-content .modal-footer .btnfocus {
+    text-decoration: none;
+}
+
+.btn {
+    border-width: 2px;
+    background-color: transparent;
+    font-weight: 400;
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+    padding: 8px 16px;
+    border-color: #888888;
+    color: #888888;
+}
+
+.btn:hover,
+.btn:focus,
+.btn:active,
+.btn.active,
+.open>.btn.dropdown-toggle {
+    background-color: transparent;
+    color: #777777;
+    border-color: #777777;
+}
+
+.btn.disabled,
+.btn.disabled:hover,
+.btn.disabled:focus,
+.btn.disabled.focus,
+.btn.disabled:active,
+.btn.disabled.active,
+.btn:disabled,
+.btn:disabled:hover,
+.btn:disabled:focus,
+.btn:disabled.focus,
+.btn:disabled:active,
+.btn:disabled.active,
+.btn[disabled],
+.btn[disabled]:hover,
+.btn[disabled]:focus,
+.btn[disabled].focus,
+.btn[disabled]:active,
+.btn[disabled].active,
+fieldset[disabled] .btn,
+fieldset[disabled] .btn:hover,
+fieldset[disabled] .btn:focus,
+fieldset[disabled] .btn.focus,
+fieldset[disabled] .btn:active,
+fieldset[disabled] .btn.active {
+    background-color: transparent;
+    border-color: #888888;
+}
+
+.btn.btn-fill {
+    color: #FFFFFF;
+    background-color: #888888;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn.btn-fill:hover,
+.btn.btn-fill:focus,
+.btn.btn-fill:active,
+.btn.btn-fill.active,
+.open>.btn.btn-fill.dropdown-toggle {
+    background-color: #777777;
+    color: #FFFFFF;
+}
+
+.btn.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn .caret {
+    border-top-color: #888888;
+}
+
+.btn:hover,
+.btn:focus {
+    opacity: 1;
+    filter: alpha(opacity=100);
+    outline: 0 !important;
+    box-shadow: none;
+}
+
+.btn:active,
+.btn.active,
+.open>.btn.dropdown-toggle {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: 0 !important;
+}
+
+.btn.btn-icon {
+    padding: 8px;
+}
+
+.btn-primary {
+    border-color: #3472F7;
+    color: #3472F7;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open>.btn-primary.dropdown-toggle {
+    background-color: transparent;
+    color: #1D62F0;
+    border-color: #1D62F0;
+}
+
+.btn-primary.disabled,
+.btn-primary.disabled:hover,
+.btn-primary.disabled:focus,
+.btn-primary.disabled.focus,
+.btn-primary.disabled:active,
+.btn-primary.disabled.active,
+.btn-primary:disabled,
+.btn-primary:disabled:hover,
+.btn-primary:disabled:focus,
+.btn-primary:disabled.focus,
+.btn-primary:disabled:active,
+.btn-primary:disabled.active,
+.btn-primary[disabled],
+.btn-primary[disabled]:hover,
+.btn-primary[disabled]:focus,
+.btn-primary[disabled].focus,
+.btn-primary[disabled]:active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-primary:hover,
+fieldset[disabled] .btn-primary:focus,
+fieldset[disabled] .btn-primary.focus,
+fieldset[disabled] .btn-primary:active,
+fieldset[disabled] .btn-primary.active {
+    background-color: transparent;
+    border-color: #3472F7;
+}
+
+.btn-primary.btn-fill {
+    color: #FFFFFF;
+    background-color: #3472F7;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-primary.btn-fill:hover,
+.btn-primary.btn-fill:focus,
+.btn-primary.btn-fill:active,
+.btn-primary.btn-fill.active,
+.open>.btn-primary.btn-fill.dropdown-toggle {
+    background-color: #1D62F0;
+    color: #FFFFFF;
+}
+
+.btn-primary.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-primary .caret {
+    border-top-color: #3472F7;
+}
+
+.btn-success {
+    border-color: #87CB16;
+    color: #87CB16;
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active,
+.btn-success.active,
+.open>.btn-success.dropdown-toggle {
+    background-color: transparent;
+    color: #049F0C;
+    border-color: #049F0C;
+}
+
+.btn-success.disabled,
+.btn-success.disabled:hover,
+.btn-success.disabled:focus,
+.btn-success.disabled.focus,
+.btn-success.disabled:active,
+.btn-success.disabled.active,
+.btn-success:disabled,
+.btn-success:disabled:hover,
+.btn-success:disabled:focus,
+.btn-success:disabled.focus,
+.btn-success:disabled:active,
+.btn-success:disabled.active,
+.btn-success[disabled],
+.btn-success[disabled]:hover,
+.btn-success[disabled]:focus,
+.btn-success[disabled].focus,
+.btn-success[disabled]:active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success,
+fieldset[disabled] .btn-success:hover,
+fieldset[disabled] .btn-success:focus,
+fieldset[disabled] .btn-success.focus,
+fieldset[disabled] .btn-success:active,
+fieldset[disabled] .btn-success.active {
+    background-color: transparent;
+    border-color: #87CB16;
+}
+
+.btn-success.btn-fill {
+    color: #FFFFFF;
+    background-color: #87CB16;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-success.btn-fill:hover,
+.btn-success.btn-fill:focus,
+.btn-success.btn-fill:active,
+.btn-success.btn-fill.active,
+.open>.btn-success.btn-fill.dropdown-toggle {
+    background-color: #049F0C;
+    color: #FFFFFF;
+}
+
+.btn-success.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-success .caret {
+    border-top-color: #87CB16;
+}
+
+.btn-info {
+    border-color: #1DC7EA;
+    color: #1DC7EA;
+}
+
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active,
+.btn-info.active,
+.open>.btn-info.dropdown-toggle {
+    background-color: transparent;
+    color: #42d0ed;
+    border-color: #42d0ed;
+}
+
+.btn-info.disabled,
+.btn-info.disabled:hover,
+.btn-info.disabled:focus,
+.btn-info.disabled.focus,
+.btn-info.disabled:active,
+.btn-info.disabled.active,
+.btn-info:disabled,
+.btn-info:disabled:hover,
+.btn-info:disabled:focus,
+.btn-info:disabled.focus,
+.btn-info:disabled:active,
+.btn-info:disabled.active,
+.btn-info[disabled],
+.btn-info[disabled]:hover,
+.btn-info[disabled]:focus,
+.btn-info[disabled].focus,
+.btn-info[disabled]:active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info,
+fieldset[disabled] .btn-info:hover,
+fieldset[disabled] .btn-info:focus,
+fieldset[disabled] .btn-info.focus,
+fieldset[disabled] .btn-info:active,
+fieldset[disabled] .btn-info.active {
+    background-color: transparent;
+    border-color: #1DC7EA;
+}
+
+.btn-info.btn-fill {
+    color: #FFFFFF;
+    background-color: #1DC7EA;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-info.btn-fill:hover,
+.btn-info.btn-fill:focus,
+.btn-info.btn-fill:active,
+.btn-info.btn-fill.active,
+.open>.btn-info.btn-fill.dropdown-toggle {
+    background-color: #42d0ed;
+    color: #FFFFFF;
+}
+
+.btn-info.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-info .caret {
+    border-top-color: #1DC7EA;
+}
+
+.btn-warning {
+    border-color: #FF9500;
+    color: #FF9500;
+}
+
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active,
+.btn-warning.active,
+.open>.btn-warning.dropdown-toggle {
+    background-color: transparent;
+    color: #ED8D00;
+    border-color: #ED8D00;
+}
+
+.btn-warning.disabled,
+.btn-warning.disabled:hover,
+.btn-warning.disabled:focus,
+.btn-warning.disabled.focus,
+.btn-warning.disabled:active,
+.btn-warning.disabled.active,
+.btn-warning:disabled,
+.btn-warning:disabled:hover,
+.btn-warning:disabled:focus,
+.btn-warning:disabled.focus,
+.btn-warning:disabled:active,
+.btn-warning:disabled.active,
+.btn-warning[disabled],
+.btn-warning[disabled]:hover,
+.btn-warning[disabled]:focus,
+.btn-warning[disabled].focus,
+.btn-warning[disabled]:active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning,
+fieldset[disabled] .btn-warning:hover,
+fieldset[disabled] .btn-warning:focus,
+fieldset[disabled] .btn-warning.focus,
+fieldset[disabled] .btn-warning:active,
+fieldset[disabled] .btn-warning.active {
+    background-color: transparent;
+    border-color: #FF9500;
+}
+
+.btn-warning.btn-fill {
+    color: #FFFFFF;
+    background-color: #FF9500;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-warning.btn-fill:hover,
+.btn-warning.btn-fill:focus,
+.btn-warning.btn-fill:active,
+.btn-warning.btn-fill.active,
+.open>.btn-warning.btn-fill.dropdown-toggle {
+    background-color: #ED8D00;
+    color: #FFFFFF;
+}
+
+.btn-warning.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-warning .caret {
+    border-top-color: #FF9500;
+}
+
+.btn-danger {
+    border-color: #FF4A55;
+    color: #FF4A55;
+}
+
+.btn-danger:hover,
+.btn-danger:focus,
+.btn-danger:active,
+.btn-danger.active,
+.open>.btn-danger.dropdown-toggle {
+    background-color: transparent;
+    color: #EE2D20;
+    border-color: #EE2D20;
+}
+
+.btn-danger.disabled,
+.btn-danger.disabled:hover,
+.btn-danger.disabled:focus,
+.btn-danger.disabled.focus,
+.btn-danger.disabled:active,
+.btn-danger.disabled.active,
+.btn-danger:disabled,
+.btn-danger:disabled:hover,
+.btn-danger:disabled:focus,
+.btn-danger:disabled.focus,
+.btn-danger:disabled:active,
+.btn-danger:disabled.active,
+.btn-danger[disabled],
+.btn-danger[disabled]:hover,
+.btn-danger[disabled]:focus,
+.btn-danger[disabled].focus,
+.btn-danger[disabled]:active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger,
+fieldset[disabled] .btn-danger:hover,
+fieldset[disabled] .btn-danger:focus,
+fieldset[disabled] .btn-danger.focus,
+fieldset[disabled] .btn-danger:active,
+fieldset[disabled] .btn-danger.active {
+    background-color: transparent;
+    border-color: #FF4A55;
+}
+
+.btn-danger.btn-fill {
+    color: #FFFFFF;
+    background-color: #FF4A55;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-danger.btn-fill:hover,
+.btn-danger.btn-fill:focus,
+.btn-danger.btn-fill:active,
+.btn-danger.btn-fill.active,
+.open>.btn-danger.btn-fill.dropdown-toggle {
+    background-color: #EE2D20;
+    color: #FFFFFF;
+}
+
+.btn-danger.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-danger .caret {
+    border-top-color: #FF4A55;
+}
+
+.btn-neutral {
+    border-color: #FFFFFF;
+    color: #FFFFFF;
+}
+
+.btn-neutral:hover,
+.btn-neutral:focus,
+.btn-neutral:active,
+.btn-neutral.active,
+.open>.btn-neutral.dropdown-toggle {
+    background-color: transparent;
+    color: #FFFFFF;
+    border-color: #FFFFFF;
+}
+
+.btn-neutral.disabled,
+.btn-neutral.disabled:hover,
+.btn-neutral.disabled:focus,
+.btn-neutral.disabled.focus,
+.btn-neutral.disabled:active,
+.btn-neutral.disabled.active,
+.btn-neutral:disabled,
+.btn-neutral:disabled:hover,
+.btn-neutral:disabled:focus,
+.btn-neutral:disabled.focus,
+.btn-neutral:disabled:active,
+.btn-neutral:disabled.active,
+.btn-neutral[disabled],
+.btn-neutral[disabled]:hover,
+.btn-neutral[disabled]:focus,
+.btn-neutral[disabled].focus,
+.btn-neutral[disabled]:active,
+.btn-neutral[disabled].active,
+fieldset[disabled] .btn-neutral,
+fieldset[disabled] .btn-neutral:hover,
+fieldset[disabled] .btn-neutral:focus,
+fieldset[disabled] .btn-neutral.focus,
+fieldset[disabled] .btn-neutral:active,
+fieldset[disabled] .btn-neutral.active {
+    background-color: transparent;
+    border-color: #FFFFFF;
+}
+
+.btn-neutral.btn-fill {
+    color: #FFFFFF;
+    background-color: #FFFFFF;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-neutral.btn-fill:hover,
+.btn-neutral.btn-fill:focus,
+.btn-neutral.btn-fill:active,
+.btn-neutral.btn-fill.active,
+.open>.btn-neutral.btn-fill.dropdown-toggle {
+    background-color: #FFFFFF;
+    color: #FFFFFF;
+}
+
+.btn-neutral.btn-fill .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-neutral .caret {
+    border-top-color: #FFFFFF;
+}
+
+.btn-neutral:active,
+.btn-neutral.active,
+.open>.btn-neutral.dropdown-toggle {
+    background-color: #FFFFFF;
+    color: #888888;
+}
+
+.btn-neutral.btn-fill,
+.btn-neutral.btn-fill:hover,
+.btn-neutral.btn-fill:focus {
+    color: #888888;
+}
+
+.btn-neutral.btn-simple:active,
+.btn-neutral.btn-simple.active {
+    background-color: transparent;
+}
+
+.btn:disabled,
+.btn[disabled],
+.btn.disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
+
+.btn-round {
+    border-width: 1px;
+    border-radius: 30px !important;
+    padding: 9px 18px;
+}
+
+.btn-round.btn-icon {
+    padding: 9px;
+}
+
+.btn-simple {
+    border: 0;
+    font-size: 16px;
+    padding: 8px 16px;
+}
+
+.btn-simple.btn-icon {
+    padding: 8px;
+}
+
+.btn-lg {
+    font-size: 18px;
+    border-radius: 6px;
+    padding: 14px 30px;
+    font-weight: 400;
+}
+
+.btn-lg.btn-round {
+    padding: 15px 30px;
+}
+
+.btn-lg.btn-simple {
+    padding: 16px 30px;
+}
+
+.btn-sm {
+    font-size: 12px;
+    border-radius: 3px;
+    padding: 5px 10px;
+}
+
+.btn-sm.btn-round {
+    padding: 6px 10px;
+}
+
+.btn-sm.btn-simple {
+    padding: 7px 10px;
+}
+
+.btn-xs {
+    font-size: 12px;
+    border-radius: 3px;
+    padding: 1px 5px;
+}
+
+.btn-xs.btn-round {
+    padding: 2px 5px;
+}
+
+.btn-xs.btn-simple {
+    padding: 3px 5px;
+}
+
+.btn-wd {
+    min-width: 140px;
+}
+
+.btn-group.select {
+    width: 100%;
+}
+
+.btn-group.select .btn {
+    text-align: left;
+}
+
+.btn-group.select .caret {
+    position: absolute;
+    top: 50%;
+    margin-top: -1px;
+    right: 8px;
+}
+
+.btn-social {
+    opacity: 0.85;
+}
+
+.btn-twitter {
+    border-color: #55acee;
+    color: #55acee;
+}
+
+.btn-twitter:hover {
+    opacity: 1 !important;
+    border-color: #55acee;
+    color: #55acee;
+}
+
+.btn-facebook {
+    border-color: #3b5998;
+    color: #3b5998;
+}
+
+.btn-facebook:hover {
+    opacity: 1 !important;
+    border-color: #3b5998;
+    color: #3b5998;
+}
+
+.form-control::-moz-placeholder {
+    color: #DDDDDD;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.form-control:-moz-placeholder {
+    color: #DDDDDD;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.form-control::-webkit-input-placeholder {
+    color: #DDDDDD;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.form-control:-ms-input-placeholder {
+    color: #DDDDDD;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.form-control {
+    background-color: #FFFFFF;
+    border: 1px solid #E3E3E3;
+    border-radius: 4px;
+    color: #565656;
+    padding: 8px 12px;
+    height: 40px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-control:focus {
+    background-color: #FFFFFF;
+    border: 1px solid #AAAAAA;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: 0 !important;
+    color: #333333;
+}
+
+.has-success .form-control,
+.has-error .form-control,
+.has-success .form-control:focus,
+.has-error .form-control:focus {
+    border-color: #E3E3E3;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.has-success .form-control {
+    color: #87CB16;
+}
+
+.has-success .form-control:focus {
+    border-color: #87CB16;
+}
+
+.has-error .form-control {
+    color: #FF4A55;
+}
+
+.has-error .form-control:focus {
+    border-color: #FF4A55;
+}
+
+.form-control+.form-control-feedback {
+    border-radius: 6px;
+    font-size: 14px;
+    margin-top: -7px;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    vertical-align: middle;
+}
+
+.open .form-control {
+    border-radius: 4px 4px 0 0;
+    border-bottom-color: transparent;
+}
+
+.input-lg {
+    height: 55px;
+    padding: 14px 30px;
+}
+
+.has-error .form-control-feedback {
+    color: #FF4A55;
+}
+
+.has-success .form-control-feedback {
+    color: #87CB16;
+}
+
+.input-group-addon {
+    background-color: #FFFFFF;
+    border: 1px solid #E3E3E3;
+    border-radius: 4px;
+}
+
+.has-success .input-group-addon,
+.has-error .input-group-addon {
+    background-color: #FFFFFF;
+    border: 1px solid #E3E3E3;
+}
+
+.has-error .form-control:focus+.input-group-addon {
+    border-color: #FF4A55;
+    color: #FF4A55;
+}
+
+.has-success .form-control:focus+.input-group-addon {
+    border-color: #87CB16;
+    color: #87CB16;
+}
+
+.form-control:focus+.input-group-addon,
+.form-control:focus~.input-group-addon {
+    background-color: #FFFFFF;
+    border-color: #9A9A9A;
+}
+
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child>.dropdown-toggle,
+.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child>.dropdown-toggle,
+.input-group-btn:first-child>.btn:not(:first-child) {
+    border-left: 0 none;
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+    background-color: #F5F5F5;
+    color: #888888;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn {
+    border-width: 1px;
+    padding: 9px 16px;
+}
+
+.input-group-btn .btn-default:not(.btn-fill) {
+    border-color: #DDDDDD;
+}
+
+.input-group-btn:last-child>.btn {
+    margin-left: 0;
+}
+
+.input-group-focus .input-group-addon {
+    border-color: #9A9A9A;
+}
+
+.alert {
+    border: 0;
+    border-radius: 0;
+    color: #FFFFFF;
+    padding: 10px 15px;
+    font-size: 14px;
+}
+
+.container .alert {
+    border-radius: 4px;
+}
+
+.navbar .alert {
+    border-radius: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 85px;
+    width: 100%;
+    z-index: 3;
+}
+
+.navbar:not(.navbar-transparent) .alert {
+    top: 70px;
+}
+
+.alert span[data-notify="icon"] {
+    font-size: 30px;
+    display: block;
+    left: 15px;
+    position: absolute;
+    top: 50%;
+    margin-top: -15px;
+}
+
+.alert i.nc-simple-remove {
+    font-size: 12px !important;
+    font: bold normal normal 14px/1 'nucleo-icons';
+}
+
+.alert button.close {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -13px;
+    z-index: 1033;
+    background-color: #FFFFFF;
+    display: block;
+    border-radius: 50%;
+    opacity: .4;
+    line-height: 9px;
+    width: 25px;
+    height: 25px;
+    outline: 0 !important;
+    text-align: center;
+    padding: 3px;
+    font-weight: 300;
+}
+
+.alert button.close:hover {
+    opacity: .55;
+}
+
+.alert .close~span {
+    display: block;
+    max-width: 89%;
+}
+
+.alert[data-notify="container"] {
+    padding: 10px 10px 10px 20px;
+    border-radius: 4px;
+}
+
+.alert.alert-with-icon {
+    padding-left: 65px;
+}
+
+.alert-primary {
+    background-color: #4091e2;
+}
+
+.alert-info {
+    background-color: #63d8f1;
+}
+
+.alert-success {
+    background-color: #a1e82c;
+}
+
+.alert-warning {
+    background-color: #ffbc67;
+}
+
+.alert-danger {
+    background-color: #fc727a;
+}
+
+.table .radio,
+.table .checkbox {
+    position: relative;
+    height: 20px;
+    display: block;
+    width: 20px;
+    padding: 0px 0px;
+    margin: 0px 5px;
+    text-align: center;
+}
+
+.table .radio .icons,
+.table .checkbox .icons {
+    left: 5px;
+}
+
+.table>thead>tr>th,
+.table>tbody>tr>th,
+.table>tfoot>tr>th,
+.table>thead>tr>td,
+.table>tbody>tr>td,
+.table>tfoot>tr>td {
+    padding: 12px 8px;
+    vertical-align: middle;
+}
+
+.table>thead>tr>th {
+    border-bottom-width: 1px;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: #9A9A9A;
+    font-weight: 400;
+    padding-bottom: 5px;
+    border-top: none !important;
+    border-bottom: none;
+    text-align: left !important;
+}
+
+.table .td-actions .btn {
+    opacity: 0.36;
+    filter: alpha(opacity=36);
+}
+
+.table .td-actions .btn.btn-xs {
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.table .td-actions {
+    min-width: 90px;
+}
+
+.table>tbody>tr {
+    position: relative;
+}
+
+.table>tbody>tr:hover .td-actions .btn {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.table .btn:focus {
+    box-shadow: none !important;
+}
+
+.table-upgrade .table tr td {
+    width: 100%;
+}
+
+.from-check,
+.form-check-radio {
+    margin-bottom: 12px;
+    position: relative;
+}
+
+.form-check .form-check-label {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    padding-left: 35px;
+    line-height: 26px;
+    margin-bottom: 0;
+}
+
+.form-check .form-check-sign::before,
+.form-check .form-check-sign::after {
+    font-family: 'FontAwesome';
+    content: "\f096";
+    display: inline-block;
+    color: #1DC7EA;
+    position: absolute;
+    width: 19px;
+    height: 19px;
+    margin-top: -12px;
+    margin-left: -23px;
+    font-size: 21px;
+    cursor: pointer;
+    -webkit-transition: opacity 0.3s linear;
+    -moz-transition: opacity 0.3s linear;
+    -o-transition: opacity 0.3s linear;
+    -ms-transition: opacity 0.3s linear;
+    transition: opacity 0.3s linear;
+}
+
+.form-check .form-check-sign::after {
+    font-family: 'FontAwesome';
+    content: "\f046";
+    text-align: center;
+    opacity: 0;
+    color: #1DC7EA;
+    border: 0;
+    background-color: inherit;
+}
+
+.form-check.disabled .form-check-label {
+    color: #9A9A9A;
+    opacity: .5;
+    cursor: not-allowed;
+}
+
+.form-check input[type="checkbox"],
+.form-check-radio input[type="radio"] {
+    opacity: 0;
+    position: absolute;
+    visibility: hidden;
+}
+
+.form-check input[type="checkbox"]:checked+.form-check-sign::after {
+    opacity: 1;
+}
+
+.form-control input[type="checkbox"]:disabled+.form-check-sign::before,
+.checkbox input[type="checkbox"]:disabled+.form-check-sign::after {
+    cursor: not-allowed;
+}
+
+.form-check .form-check-label input[type="checkbox"]:disabled+.form-check-sign,
+.form-check-radio input[type="radio"]:disabled+.form-check-sign {
+    pointer-events: none !important;
+}
+
+.form-check-radio .form-check-label {
+    padding-left: 2rem;
+}
+
+.form-check-radio.disabled .form-check-label {
+    color: #9A9A9A;
+    opacity: .5;
+    cursor: not-allowed;
+}
+
+.form-check-radio .form-check-sign::before {
+    font-family: 'FontAwesome';
+    content: "\f10c";
+    font-size: 22px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    position: absolute;
+    opacity: .50;
+    left: 5px;
+    top: -5px;
+}
+
+.form-check-radio input[type="radio"]+.form-check-sign:after,
+.form-check-radio input[type="radio"] {
+    opacity: 0;
+    -webkit-transition: opacity 0.3s linear;
+    -moz-transition: opacity 0.3s linear;
+    -o-transition: opacity 0.3s linear;
+    -ms-transition: opacity 0.3s linear;
+    transition: opacity 0.3s linear;
+    content: " ";
+    display: block;
+}
+
+.form-check-radio input[type="radio"]:checked+.form-check-sign::after {
+    font-family: 'FontAwesome';
+    content: "\f192";
+    top: -5px;
+    position: absolute;
+    left: 5px;
+    opacity: 1;
+    font-size: 22px;
+}
+
+.form-check-radio input[type="radio"]:checked+.form-check-sign::after {
+    opacity: 1;
+}
+
+.form-check-radio input[type="radio"]:disabled+.form-check-sign::before,
+.form-check-radio input[type="radio"]:disabled+.form-check-sign::after {
+    color: #9A9A9A;
+}
+
+.nav .nav-item .nav-link:hover,
+.nav .nav-item .nav-link:focus {
+    background-color: transparent;
+}
+
+.navbar {
+    border: 0;
+    font-size: 16px;
+    border-radius: 0;
+    min-height: 49px;
+    max-height: 49px;
+    background-color: rgba(255, 255, 255, 0.96);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.navbar .navbar-brand {
+    font-weight: 400;
+    margin: 5px 0px;
+    font-size: 20px;
+    color: #888888;
+}
+
+.navbar .navbar-brand:hover {
+    color: #5e5e5e;
+}
+
+.navbar .navbar-toggler {
+    width: 37px;
+    height: 27px;
+    vertical-align: middle;
+    outline: 0;
+    cursor: pointer;
+}
+
+.navbar .navbar-toggler.navbar-toggler-left {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+
+.navbar .navbar-toggler.navbar-toggler-right {
+    padding-right: 0;
+    top: 18px;
+}
+
+.navbar .navbar-toggler .navbar-toggler-bar {
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    margin: 0 auto;
+}
+
+.navbar .navbar-toggler .burger-lines {
+    display: block;
+    position: relative;
+    background-color: #888;
+    width: 24px;
+    height: 2px;
+    border-radius: 1px;
+    margin: 4px auto;
+}
+
+.navbar .navbar-nav .nav-item .nav-link {
+    color: #FFFFFF;
+    padding: 10px 15px;
+    margin: 10px 3px;
+    position: relative;
+    display: inline-flex;
+    line-height: 40px;
+}
+
+.navbar .navbar-nav .nav-item .nav-link.btn {
+    margin: 15px 3px;
+    padding: 8px 16px;
+}
+
+.navbar .navbar-nav .nav-item .nav-link.btn-round {
+    margin: 16px 3px;
+}
+
+.navbar .navbar-nav .nav-item .nav-link [class^="fa"] {
+    font-size: 19px;
+    position: relative;
+    line-height: 40px;
+    top: 1px;
+}
+
+.navbar .navbar-nav .nav-item .nav-link:hover {
+    color: #1DC7EA;
+}
+
+.navbar .navbar-nav .nav-item .dropdown-menu {
+    border-radius: 10px;
+    margin-top: -5px;
+}
+
+.navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item:last-child {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.navbar .navbar-nav .nav-item .dropdown-menu .divider {
+    height: 1px;
+    margin: 5px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+}
+
+.navbar .navbar-nav .notification {
+    position: absolute;
+    background-color: #FB404B;
+    text-align: center;
+    border-radius: 10px;
+    min-width: 18px;
+    padding: 0 5px;
+    height: 18px;
+    font-size: 12px;
+    color: #FFFFFF;
+    font-weight: bold;
+    line-height: 18px;
+    top: 10px;
+    left: 7px;
+}
+
+.navbar .navbar-nav .dropdown-toggle:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    margin-top: 20px;
+    vertical-align: middle;
+    border-top: 4px dashed;
+    border-top: 4px solid\9;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+
+.navbar .btn {
+    margin: 15px 3px;
+    font-size: 14px;
+}
+
+.navbar .btn-simple {
+    font-size: 16px;
+}
+
+.navbar.fixed {
+    width: calc(100% - $sidebar-width);
+    right: 0;
+    left: auto;
+    border-radius: 0;
+}
+
+.navbar .nc-icon {
+    font-weight: 700;
+    margin-top: 10px;
+}
+
+.navbar-transparent .navbar-brand,
+[class*="navbar-ct"] .navbar-brand {
+    color: #FFFFFF;
+    opacity: 0.9;
+    filter: alpha(opacity=90);
+}
+
+.navbar-transparent .navbar-brand:focus,
+.navbar-transparent .navbar-brand:hover,
+[class*="navbar-ct"] .navbar-brand:focus,
+[class*="navbar-ct"] .navbar-brand:hover {
+    background-color: transparent;
+    opacity: 1;
+    filter: alpha(opacity=100);
+    color: #FFFFFF;
+}
+
+.navbar-transparent .navbar-nav .nav-item .nav-link:not(.btn),
+[class*="navbar-ct"] .navbar-nav .nav-item .nav-link:not(.btn) {
+    color: #FFFFFF;
+    border-color: #FFFFFF;
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+}
+
+.navbar-transparent .navbar-nav .active .nav-link:not(.btn),
+.navbar-transparent .navbar-nav .active .nav-link:hover:not(.btn),
+.navbar-transparent .navbar-nav .active .nav-link:focus:not(.btn),
+.navbar-transparent .navbar-nav .nav-item .nav-link:not(.btn),
+.navbar-transparent .navbar-nav .nav-item .nav-link:hover:not(.btn),
+.navbar-transparent .navbar-nav .nav-item .nav-link:focus:not(.btn),
+[class*="navbar-ct"] .navbar-nav .active .nav-link:not(.btn),
+[class*="navbar-ct"] .navbar-nav .active .nav-link:hover:not(.btn),
+[class*="navbar-ct"] .navbar-nav .active .nav-link:focus:not(.btn),
+[class*="navbar-ct"] .navbar-nav .nav-item .nav-link:not(.btn),
+[class*="navbar-ct"] .navbar-nav .nav-item .nav-link:hover:not(.btn),
+[class*="navbar-ct"] .navbar-nav .nav-item .nav-link:focus:not(.btn) {
+    background-color: transparent;
+    border-radius: 3px;
+    color: #FFFFFF;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.navbar-transparent .navbar-nav .nav .nav-item .nav-link.btn:hover,
+[class*="navbar-ct"] .navbar-nav .nav .nav-item .nav-link.btn:hover {
+    background-color: transparent;
+}
+
+.navbar-transparent .navbar-nav .show .nav-link,
+.navbar-transparent .navbar-nav .show .nav-link:hover,
+.navbar-transparent .navbar-nav .show .nav-link:focus,
+[class*="navbar-ct"] .navbar-nav .show .nav-link,
+[class*="navbar-ct"] .navbar-nav .show .nav-link:hover,
+[class*="navbar-ct"] .navbar-nav .show .nav-link:focus {
+    background-color: transparent;
+    color: #FFFFFF;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.navbar-transparent .btn-default,
+[class*="navbar-ct"] .btn-default {
+    color: #FFFFFF;
+    border-color: #FFFFFF;
+}
+
+.navbar-transparent .btn-default.btn-fill,
+[class*="navbar-ct"] .btn-default.btn-fill {
+    color: #9A9A9A;
+    background-color: #FFFFFF;
+    opacity: 0.9;
+    filter: alpha(opacity=90);
+}
+
+.navbar-transparent .btn-default.btn-fill:hover,
+.navbar-transparent .btn-default.btn-fill:focus,
+.navbar-transparent .btn-default.btn-fill:active,
+.navbar-transparent .btn-default.btn-fill.active,
+.navbar-transparent .show .dropdown-toggle.btn-fill.btn-default,
+[class*="navbar-ct"] .btn-default.btn-fill:hover,
+[class*="navbar-ct"] .btn-default.btn-fill:focus,
+[class*="navbar-ct"] .btn-default.btn-fill:active,
+[class*="navbar-ct"] .btn-default.btn-fill.active,
+[class*="navbar-ct"] .show .dropdown-toggle.btn-fill.btn-default {
+    border-color: #FFFFFF;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.navbar-transparent .dropdown-menu .divider {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.navbar-default {
+    background-color: rgba(255, 255, 255, 0.96);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.navbar-default .navbar-nav .nav-item .nav-link:not(.btn) {
+    color: #9A9A9A;
+}
+
+.navbar-default .navbar-nav .active .nav-link,
+.navbar-default .navbar-nav .active .nav-link:not(.btn):hover,
+.navbar-default .navbar-nav .active .nav-link:not(.btn):focus,
+.navbar-default .navbar-nav .nav-item .nav-link:not(.btn):hover,
+.navbar-default .navbar-nav .nav-item .nav-link:not(.btn):focus {
+    background-color: transparent;
+    border-radius: 3px;
+    color: #1DC7EA;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.navbar-default .navbar-nav .show .nav-link,
+.navbar-default .navbar-nav .show .nav-link:hover,
+.navbar-default .navbar-nav .show .nav-link:focus {
+    background-color: transparent;
+    color: #1DC7EA;
+}
+
+.navbar-default .navbar-nav .navbar-toggle:hover,
+.navbar-default .navbar-nav .navbar-toggle:focus {
+    background-color: transparent;
+}
+
+.navbar-default:not(.navbar-transparent) .btn-default:hover {
+    color: #1DC7EA;
+    border-color: #1DC7EA;
+}
+
+.navbar-default:not(.navbar-transparent) .btn-neutral,
+.navbar-default:not(.navbar-transparent) .btn-neutral:hover,
+.navbar-default:not(.navbar-transparent) .btn-neutral:active {
+    color: #9A9A9A;
+}
+
+
+/*      Navbar with icons            */
+
+.navbar-icons.navbar .navbar-brand {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.navbar-icons .navbar-nav .nav-item .nav-link {
+    text-align: center;
+    padding: 6px 15px;
+    margin: 6px 3px;
+}
+
+.navbar-icons .navbar-nav [class^="pe"] {
+    font-size: 30px;
+    position: relative;
+}
+
+.navbar-icons .navbar-nav p {
+    margin: 3px 0 0;
+}
+
+.navbar-form {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.navbar-form .form-control {
+    border-radius: 0;
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+    height: 22px;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #E3E3E3;
+}
+
+.navbar-transparent .navbar-form .form-control,
+[class*="navbar-ct"] .navbar-form .form-control {
+    color: #FFFFFF;
+    border: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+.navbar-ct-blue {
+    background-color: #4091e2;
+}
+
+.navbar-ct-red {
+    background-color: #fc727a;
+}
+
+.navbar-transparent {
+    padding-top: 15px;
+    background-color: transparent;
+    border-bottom: 1px solid transparent;
+}
+
+.navbar-toggle {
+    margin-top: 19px;
+    margin-bottom: 19px;
+    border: 0;
+}
+
+.navbar-toggle .icon-bar {
+    background-color: #FFFFFF;
+}
+
+.navbar-toggle .navbar-collapse,
+.navbar-toggle .navbar-form {
+    border-color: transparent;
+}
+
+.navbar-toggle.navbar-default .navbar-toggle:hover,
+.navbar-toggle.navbar-default .navbar-toggle:focus {
+    background-color: transparent;
+}
+
+.footer {
+    background-color: #FFFFFF;
+}
+
+.footer .footer-menu {
+    height: 41px;
+}
+
+.footer nav>ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+}
+
+.footer nav>ul a:not(.btn) {
+    color: #9A9A9A;
+    display: block;
+    margin-bottom: 3px;
+}
+
+.footer nav>ul a:not(.btn):hover,
+.footer nav>ul a:not(.btn):focus {
+    color: #777777;
+}
+
+.footer .social-area {
+    padding: 15px 0;
+}
+
+.footer .social-area h5 {
+    padding-bottom: 15px;
+}
+
+.footer .social-area>a:not(.btn) {
+    color: #9A9A9A;
+    display: inline-block;
+    vertical-align: top;
+    padding: 10px 5px;
+    font-size: 20px;
+    font-weight: normal;
+    line-height: 20px;
+    text-align: center;
+}
+
+.footer .social-area>a:not(.btn):hover,
+.footer .social-area>a:not(.btn):focus {
+    color: #777777;
+}
+
+.footer .copyright {
+    color: #777777;
+    padding: 10px 15px;
+    margin: 10px 3px;
+    line-height: 20px;
+    font-size: 14px;
+}
+
+.footer hr {
+    border-color: #DDDDDD;
+}
+
+.footer .title {
+    color: #777777;
+}
+
+.footer-default {
+    background-color: #F5F5F5;
+}
+
+.footer:not(.footer-big) nav>ul {
+    font-size: 14px;
+}
+
+.footer:not(.footer-big) nav>ul li {
+    margin-left: 20px;
+    float: left;
+}
+
+.footer:not(.footer-big) nav>ul a {
+    padding: 10px 0px;
+    margin: 10px 10px 10px 0px;
+}
+
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2015 Daniel Eden
+*/
+
+.animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.animated.infinite {
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
+
+.animated.bounceIn,
+.animated.bounceOut {
+    -webkit-animation-duration: .75s;
+    animation-duration: .75s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY {
+    -webkit-animation-duration: .75s;
+    animation-duration: .75s;
+}
+
+@-webkit-keyframes shake {
+    from,
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        -webkit-transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        -webkit-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+}
+
+@keyframes shake {
+    from,
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        -webkit-transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        -webkit-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+}
+
+.shake {
+    -webkit-animation-name: shake;
+    animation-name: shake;
+}
+
+@-webkit-keyframes fadeInDown {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+.fadeInDown {
+    -webkit-animation-name: fadeInDown;
+    animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes fadeOutDown {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.fadeOutDown {
+    -webkit-animation-name: fadeOutDown;
+    animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+.fadeOutUp {
+    -webkit-animation-name: fadeOutUp;
+    animation-name: fadeOutUp;
+}
+
+.dropdown-menu {
+    visibility: hidden;
+    margin: 0;
+    padding: 0;
+    border-radius: 10px;
+    display: block;
+    z-index: 9000;
+    position: absolute;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
+    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
+}
+
+.show .dropdown-menu {
+    opacity: 1;
+    filter: alpha(opacity=100);
+    visibility: visible;
+}
+
+.select .dropdown-menu {
+    border-radius: 0 0 10px 10px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -webkit-transform-origin: 50% -40px;
+    -moz-transform-origin: 50% -40px;
+    -o-transform-origin: 50% -40px;
+    -ms-transform-origin: 50% -40px;
+    transform-origin: 50% -40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -o-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    -webkit-transition: all 150ms linear;
+    -moz-transition: all 150ms linear;
+    -o-transition: all 150ms linear;
+    -ms-transition: all 150ms linear;
+    transition: all 150ms linear;
+    margin-top: -20px;
+}
+
+.select.show .dropdown-menu {
+    margin-top: -1px;
+}
+
+.dropdown-menu .dropdown-item {
+    padding: 8px 16px;
+    color: #333333;
+}
+
+.dropdown-menu .dropdown-item img {
+    margin-top: -3px;
+}
+
+.dropdown-menu .dropdown-item:focus {
+    outline: 0 !important;
+}
+
+.btn-group.select .dropdown-menu {
+    min-width: 100%;
+}
+
+.dropdown-menu>li:first-child>a {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.dropdown-menu>li:last-child>a {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.select .dropdown-menu>li:first-child>a {
+    border-radius: 0;
+    border-bottom: 0 none;
+}
+
+.dropdown-menu .dropdown-item:hover,
+.dropdown-menu .dropdown-item:focus {
+    background-color: #F5F5F5;
+    color: #333333;
+    opacity: 1;
+    text-decoration: none;
+}
+
+.dropdown-menu.dropdown-blue>li>a:hover,
+.dropdown-menu.dropdown-blue>li>a:focus {
+    background-color: rgba(52, 114, 247, 0.2);
+}
+
+.dropdown-menu.dropdown-red>li>a:hover,
+.dropdown-menu.dropdown-red>li>a:focus {
+    background-color: rgba(255, 74, 85, 0.2);
+}
+
+.dropdown-menu .dropdown-item i[class*="nc-icon"] {
+    font-size: 18px;
+    text-align: center;
+    line-height: 25px;
+    float: left;
+    padding-right: 10px;
+}
+
+.dropdown-menu.dropdown-menu-right:before,
+.dropdown-menu.dropdown-menu-right:after {
+    right: 12px !important;
+    left: auto !important;
+}
+
+.dropdown-with-icons>li>a {
+    padding-left: 0px;
+    line-height: 28px;
+}
+
+.dropdown-with-icons i {
+    text-align: center;
+    line-height: 28px;
+    float: left;
+}
+
+.dropdown-with-icons i[class^="pe-"] {
+    font-size: 14px;
+    width: 46px;
+}
+
+.dropdown-with-icons i[class^="fa"] {
+    font-size: 14px;
+    width: 38px;
+}
+
+.btn-group.select {
+    overflow: hidden;
+}
+
+.btn-group.select.show {
+    overflow: visible;
+}
+
+.card {
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    margin-bottom: 30px;
+}
+
+.card .card-image {
+    width: 100%;
+    overflow: hidden;
+    height: 260px;
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+.card .card-image img {
+    width: 100%;
+}
+
+.card .filter {
+    position: absolute;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.68);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+
+.card .filter .btn {
+    position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.card:hover .filter {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.card .btn-hover {
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+
+.card:hover .btn-hover {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.card .card-body {
+    padding: 15px 15px 10px 15px;
+}
+
+.card .card-body .icon { font-size: 45px; color: #9aa0ac; }
+
+.card .card-header {
+    padding: 15px 15px 0;
+    background-color: #FFFFFF;
+    border-bottom: none !important;
+}
+
+.card .card-category,
+.card label {
+    font-size: 14px;
+    font-weight: 400;
+    color: #9A9A9A;
+    margin-bottom: 0px;
+}
+
+.card .card-category i,
+.card label i {
+    font-size: 16px;
+}
+
+.card label {
+    font-size: 12px;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+}
+
+.card .card-title {
+    margin: 0;
+    color: #333333;
+    font-weight: 300;
+}
+
+.card .avatar {
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+
+.card .description {
+    font-size: 14px;
+    color: #333;
+}
+
+.card .card-footer {
+    padding-top: 0;
+    background-color: transparent;
+    line-height: 30px;
+    border-top: none !important;
+    font-size: 14px;
+}
+
+.card .card-footer .legend {
+    padding: 5px 0;
+}
+
+.card .card-footer hr {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.card .stats {
+    color: #a9a9a9;
+}
+
+.card .card-footer div {
+    display: inline-block;
+}
+
+.card .author {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.card .author i {
+    font-size: 14px;
+}
+
+.card h6 {
+    font-size: 10px;
+    margin: 15;
+}
+
+.card.card-separator:after {
+    height: 100%;
+    right: -15px;
+    top: 0;
+    width: 1px;
+    background-color: #DDDDDD;
+    card-body: "";
+    position: absolute;
+}
+
+.card .ct-chart {
+    margin: 30px 0 30px;
+    height: 245px;
+}
+
+.card .ct-label {
+    font-size: 1rem !important;
+}
+
+.card .table tbody td:first-child,
+.card .table thead th:first-child {
+    padding-left: 15px;
+}
+
+.card .table tbody td:last-child,
+.card .table thead th:last-child {
+    padding-right: 15px;
+    display: inline-flex;
+}
+
+.card .alert {
+    border-radius: 4px;
+    position: relative;
+}
+
+.card .alert.alert-with-icon {
+    padding-left: 65px;
+}
+
+.card-stats .card-body {
+    padding: 15px 15px 0px;
+}
+
+.card-stats .card-body .numbers {
+    font-size: 1.8rem;
+    text-align: right;
+}
+
+.card-stats .card-body .numbers p {
+    margin-bottom: 0;
+}
+
+.card-stats .card-footer {
+    padding: 0px 15px 10px 15px;
+}
+
+.card-stats .icon-big {
+    font-size: 3em;
+    min-height: 64px;
+}
+
+.card-stats .icon-big i {
+    font-weight: 700;
+    line-height: 59px;
+}
+
+.card-user .card-image {
+    height: 110px;
+}
+
+.card-user .card-image-plain {
+    height: 0;
+    margin-top: 110px;
+}
+
+.card-user .author {
+    text-align: center;
+    text-transform: none;
+    margin-top: -70px;
+}
+
+.card-user .avatar {
+    width: 124px;
+    height: 124px;
+    border: 5px solid #FFFFFF;
+    position: relative;
+    margin-bottom: 15px;
+}
+
+.card-user .avatar.border-gray {
+    border-color: #EEEEEE;
+}
+
+.card-user .title {
+    line-height: 24px;
+}
+
+.card-user .card-body {
+    min-height: 240px;
+}
+
+.card-user .card-footer,
+.card-price .card-footer {
+    padding: 5px 15px 10px;
+}
+
+.card-user hr,
+.card-price hr {
+    margin: 5px 15px;
+}
+
+.card-plain {
+    background-color: transparent;
+    box-shadow: none;
+    border-radius: 0;
+}
+
+.card-plain .card-image {
+    border-radius: 4px;
+}
+
+.card.card-plain {
+    border: none !important;
+}
+
+.card.card-plain .card-header {
+    background-color: transparent !important;
+}
+
+.ct-label {
+    fill: rgba(0, 0, 0, 0.4);
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 1.3rem;
+    line-height: 1;
+}
+
+.ct-chart-line .ct-label,
+.ct-chart-bar .ct-label {
+    display: block;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.ct-label.ct-horizontal.ct-start {
+    -webkit-box-align: flex-end;
+    -webkit-align-items: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+    -webkit-box-pack: flex-start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: start;
+}
+
+.ct-label.ct-horizontal.ct-end {
+    -webkit-box-align: flex-start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+    -webkit-box-pack: flex-start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: start;
+}
+
+.ct-label.ct-vertical.ct-start {
+    -webkit-box-align: flex-end;
+    -webkit-align-items: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+    -webkit-box-pack: flex-end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: flex-end;
+    justify-content: flex-end;
+    text-align: right;
+    text-anchor: end;
+}
+
+.ct-label.ct-vertical.ct-end {
+    -webkit-box-align: flex-end;
+    -webkit-align-items: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+    -webkit-box-pack: flex-start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: start;
+}
+
+.ct-chart-bar .ct-label.ct-horizontal.ct-start {
+    -webkit-box-align: flex-end;
+    -webkit-align-items: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    text-align: center;
+    text-anchor: start;
+}
+
+.ct-chart-bar .ct-label.ct-horizontal.ct-end {
+    -webkit-box-align: flex-start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    text-align: center;
+    text-anchor: start;
+}
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
+    -webkit-box-align: flex-end;
+    -webkit-align-items: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+    -webkit-box-pack: flex-start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: start;
+}
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
+    -webkit-box-align: flex-start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+    -webkit-box-pack: flex-start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: start;
+}
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: flex-end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: flex-end;
+    justify-content: flex-end;
+    text-align: right;
+    text-anchor: end;
+}
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: flex-start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    text-anchor: end;
+}
+
+.ct-grid {
+    stroke: rgba(0, 0, 0, 0.2);
+    stroke-width: 1px;
+    stroke-dasharray: 2px;
+}
+
+.ct-point {
+    stroke-width: 8px;
+    stroke-linecap: round;
+}
+
+.ct-line {
+    fill: none;
+    stroke-width: 3px;
+}
+
+.ct-area {
+    stroke: none;
+    fill-opacity: 0.8;
+}
+
+.ct-bar {
+    fill: none;
+    stroke-width: 10px;
+}
+
+.ct-slice-donut {
+    fill: none;
+    stroke-width: 60px;
+}
+
+.ct-series-a .ct-point,
+.ct-series-a .ct-line,
+.ct-series-a .ct-bar,
+.ct-series-a .ct-slice-donut {
+    stroke: #1DC7EA;
+}
+
+.ct-series-a .ct-slice-pie,
+.ct-series-a .ct-area {
+    fill: #1DC7EA;
+}
+
+.ct-series-b .ct-point,
+.ct-series-b .ct-line,
+.ct-series-b .ct-bar,
+.ct-series-b .ct-slice-donut {
+    stroke: #FB404B;
+}
+
+.ct-series-b .ct-slice-pie,
+.ct-series-b .ct-area {
+    fill: #FB404B;
+}
+
+.ct-series-c .ct-point,
+.ct-series-c .ct-line,
+.ct-series-c .ct-bar,
+.ct-series-c .ct-slice-donut {
+    stroke: #FFA534;
+}
+
+.ct-series-c .ct-slice-pie,
+.ct-series-c .ct-area {
+    fill: #FFA534;
+}
+
+.ct-series-d .ct-point,
+.ct-series-d .ct-line,
+.ct-series-d .ct-bar,
+.ct-series-d .ct-slice-donut {
+    stroke: #9368E9;
+}
+
+.ct-series-d .ct-slice-pie,
+.ct-series-d .ct-area {
+    fill: #9368E9;
+}
+
+.ct-series-e .ct-point,
+.ct-series-e .ct-line,
+.ct-series-e .ct-bar,
+.ct-series-e .ct-slice-donut {
+    stroke: #87CB16;
+}
+
+.ct-series-e .ct-slice-pie,
+.ct-series-e .ct-area {
+    fill: #87CB16;
+}
+
+.ct-series-f .ct-point,
+.ct-series-f .ct-line,
+.ct-series-f .ct-bar,
+.ct-series-f .ct-slice-donut {
+    stroke: #1F77D0;
+}
+
+.ct-series-f .ct-slice-pie,
+.ct-series-f .ct-area {
+    fill: #1F77D0;
+}
+
+.ct-series-g .ct-point,
+.ct-series-g .ct-line,
+.ct-series-g .ct-bar,
+.ct-series-g .ct-slice-donut {
+    stroke: #5e5e5e;
+}
+
+.ct-series-g .ct-slice-pie,
+.ct-series-g .ct-area {
+    fill: #5e5e5e;
+}
+
+.ct-series-h .ct-point,
+.ct-series-h .ct-line,
+.ct-series-h .ct-bar,
+.ct-series-h .ct-slice-donut {
+    stroke: #dd4b39;
+}
+
+.ct-series-h .ct-slice-pie,
+.ct-series-h .ct-area {
+    fill: #dd4b39;
+}
+
+.ct-series-i .ct-point,
+.ct-series-i .ct-line,
+.ct-series-i .ct-bar,
+.ct-series-i .ct-slice-donut {
+    stroke: #35465c;
+}
+
+.ct-series-i .ct-slice-pie,
+.ct-series-i .ct-area {
+    fill: #35465c;
+}
+
+.ct-series-j .ct-point,
+.ct-series-j .ct-line,
+.ct-series-j .ct-bar,
+.ct-series-j .ct-slice-donut {
+    stroke: #e52d27;
+}
+
+.ct-series-j .ct-slice-pie,
+.ct-series-j .ct-area {
+    fill: #e52d27;
+}
+
+.ct-series-k .ct-point,
+.ct-series-k .ct-line,
+.ct-series-k .ct-bar,
+.ct-series-k .ct-slice-donut {
+    stroke: #55acee;
+}
+
+.ct-series-k .ct-slice-pie,
+.ct-series-k .ct-area {
+    fill: #55acee;
+}
+
+.ct-series-l .ct-point,
+.ct-series-l .ct-line,
+.ct-series-l .ct-bar,
+.ct-series-l .ct-slice-donut {
+    stroke: #cc2127;
+}
+
+.ct-series-l .ct-slice-pie,
+.ct-series-l .ct-area {
+    fill: #cc2127;
+}
+
+.ct-series-m .ct-point,
+.ct-series-m .ct-line,
+.ct-series-m .ct-bar,
+.ct-series-m .ct-slice-donut {
+    stroke: #1769ff;
+}
+
+.ct-series-m .ct-slice-pie,
+.ct-series-m .ct-area {
+    fill: #1769ff;
+}
+
+.ct-series-n .ct-point,
+.ct-series-n .ct-line,
+.ct-series-n .ct-bar,
+.ct-series-n .ct-slice-donut {
+    stroke: #6188e2;
+}
+
+.ct-series-n .ct-slice-pie,
+.ct-series-n .ct-area {
+    fill: #6188e2;
+}
+
+.ct-series-o .ct-point,
+.ct-series-o .ct-line,
+.ct-series-o .ct-bar,
+.ct-series-o .ct-slice-donut {
+    stroke: #a748ca;
+}
+
+.ct-series-o .ct-slice-pie,
+.ct-series-o .ct-area {
+    fill: #a748ca;
+}
+
+.ct-square {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-square:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 100%;
+}
+
+.ct-square:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-square>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-minor-second {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-minor-second:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 93.75%;
+}
+
+.ct-minor-second:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-minor-second>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-second {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-second:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 88.88889%;
+}
+
+.ct-major-second:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-second>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-minor-third {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-minor-third:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 83.33333%;
+}
+
+.ct-minor-third:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-minor-third>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-third {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-third:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 80%;
+}
+
+.ct-major-third:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-third>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-perfect-fourth {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-perfect-fourth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 75%;
+}
+
+.ct-perfect-fourth:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-perfect-fourth>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-perfect-fifth {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-perfect-fifth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 66.66667%;
+}
+
+.ct-perfect-fifth:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-perfect-fifth>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-minor-sixth {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-minor-sixth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 62.5%;
+}
+
+.ct-minor-sixth:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-minor-sixth>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-golden-section {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-golden-section:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 61.8047%;
+}
+
+.ct-golden-section:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-golden-section>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-sixth {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-sixth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 60%;
+}
+
+.ct-major-sixth:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-sixth>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-minor-seventh {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-minor-seventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 56.25%;
+}
+
+.ct-minor-seventh:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-minor-seventh>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-seventh {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-seventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 53.33333%;
+}
+
+.ct-major-seventh:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-seventh>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-octave {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-octave:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 50%;
+}
+
+.ct-octave:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-octave>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-tenth {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-tenth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 40%;
+}
+
+.ct-major-tenth:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-tenth>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-eleventh {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-eleventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 37.5%;
+}
+
+.ct-major-eleventh:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-eleventh>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-major-twelfth {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-major-twelfth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 33.33333%;
+}
+
+.ct-major-twelfth:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-major-twelfth>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.ct-double-octave {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.ct-double-octave:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 25%;
+}
+
+.ct-double-octave:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ct-double-octave>svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+@media (min-width: 992px) {
+    .navbar-form {
+        margin-top: 21px;
+        margin-bottom: 21px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    .navbar-nav .nav-item .dropdown-menu,
+    .dropdown .dropdown-menu {
+        -webkit-transform: scale(0);
+        -moz-transform: scale(0);
+        -o-transform: scale(0);
+        -ms-transform: scale(0);
+        transform: scale(0);
+        -webkit-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
+        -moz-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
+        -o-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
+        -ms-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
+        transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
+    }
+    .navbar-nav .nav-item.show .dropdown-menu,
+    .dropdown.show .dropdown-menu {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -o-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        -webkit-transform-origin: 29px -50px;
+        -moz-transform-origin: 29px -50px;
+        -o-transform-origin: 29px -50px;
+        -ms-transform-origin: 29px -50px;
+        transform-origin: 29px -50px;
+    }
+    .footer {
+        height: 60px;
+    }
+    .footer .footer-menu {
+        float: left;
+    }
+    .footer .copyright {
+        float: right;
+    }
+    .navbar-nav .nav-item .dropdown-menu:before {
+        border-bottom: 11px solid rgba(0, 0, 0, 0.2);
+        border-left: 11px solid transparent;
+        border-right: 11px solid transparent;
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: 12px;
+        top: -11px;
+    }
+    .navbar-nav .nav-item .dropdown-menu:after {
+        border-bottom: 11px solid #FFFFFF;
+        border-left: 11px solid transparent;
+        border-right: 11px solid transparent;
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: 12px;
+        top: -10px;
+    }
+    .navbar-nav.navbar-right .nav-item .dropdown-menu:before {
+        left: auto;
+        right: 12px;
+    }
+    .navbar-nav.navbar-right .nav-item .dropdown-menu:after {
+        left: auto;
+        right: 12px;
+    }
+    .footer:not(.footer-big) nav>ul li:first-child {
+        margin-left: 0;
+    }
+    .card form [class*="col-"] {
+        padding: 6px;
+    }
+    .card form [class*="col-"]:first-child {
+        padding-left: 15px;
+    }
+    .card form [class*="col-"]:last-child {
+        padding-right: 15px;
+    }
+}
+
+
+/*          Changes for small display      */
+
+@media (max-width: 991px) {
+    .sidebar {
+        right: 0 !important;
+        left: auto;
+        position: absolute;
+        -webkit-transform: translate3d(262px, 0, 0);
+        -moz-transform: translate3d(262px, 0, 0);
+        -o-transform: translate3d(262px, 0, 0);
+        -ms-transform: translate3d(262px, 0, 0);
+        transform: translate3d(262px, 0, 0) !important;
+        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+    .nav-open .main-panel {
+        position: absolute;
+        left: 0;
+        -webkit-transform: translate3d(-250px, 0, 0);
+        -moz-transform: translate3d(-250px, 0, 0);
+        -o-transform: translate3d(-250px, 0, 0);
+        -ms-transform: translate3d(-250px, 0, 0);
+        transform: translate3d(-250px, 0, 0) !important;
+        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+    .nav-open .sidebar {
+        -webkit-transform: translate3d(10px, 0, 0);
+        -moz-transform: translate3d(10px, 0, 0);
+        -o-transform: translate3d(10px, 0, 0);
+        -ms-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0) !important;
+        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+    .main-panel {
+        -webkit-transform: translate3d(0px, 0, 0);
+        -moz-transform: translate3d(0px, 0, 0);
+        -o-transform: translate3d(0px, 0, 0);
+        -ms-transform: translate3d(0px, 0, 0);
+        transform: translate3d(0px, 0, 0) !important;
+        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+    .nav-item.active-pro {
+        position: relative !important;
+    }
+    .nav-mobile-menu {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        margin-bottom: 15px;
+        padding-bottom: 15px;
+        padding-top: 5px;
+    }
+    .nav-mobile-menu .dropdown .dropdown-menu {
+        position: static !important;
+        float: none;
+        width: auto;
+        color: #FFFFFF;
+        margin-top: 0;
+        background-color: transparent;
+        border: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+    .nav-mobile-menu .dropdown .dropdown-menu .dropdown-item {
+        margin: 5px 15px 0px 40px;
+        border-radius: 4px;
+        color: #FFFFFF;
+        opacity: .86;
+        padding: 8px 50px;
+    }
+    .nav-mobile-menu .dropdown .dropdown-menu .dropdown-item:hover {
+        background-color: rgba(255, 255, 255, 0.23);
+    }
+    .nav-mobile-menu .nav-item .nav-link span {
+        display: inline-block !important;
+    }
+    .nav-mobile-menu .nav-item .nav-link .no-icon {
+        padding-left: 50px;
+    }
+    .main-panel {
+        width: 100%;
+    }
+    .navbar-brand {
+        padding: 15px 15px;
+    }
+    .navbar-transparent {
+        padding-top: 15px;
+        background-color: rgba(0, 0, 0, 0.45);
+    }
+    body {
+        position: relative;
+    }
+    .wrapper {
+        left: 0;
+        background-color: white;
+    }
+    .navbar .container {
+        left: 15px;
+        width: 100%;
+        position: relative;
+        top: -10px;
+    }
+    .navbar-nav .nav-item {
+        float: none;
+        position: relative;
+        display: block;
+    }
+    body>.navbar-collapse {
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100%;
+        right: 0;
+        left: auto;
+        z-index: 1032;
+        visibility: visible;
+        background-color: #999;
+        overflow-y: visible;
+        border-top: none;
+        text-align: left;
+        padding: 0;
+        -webkit-transform: translate3d(260px, 0, 0);
+        -moz-transform: translate3d(260px, 0, 0);
+        -o-transform: translate3d(260px, 0, 0);
+        -ms-transform: translate3d(260px, 0, 0);
+        transform: translate3d(260px, 0, 0);
+        -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+        transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+    body>.navbar-collapse>ul {
+        position: relative;
+        z-index: 4;
+        overflow-y: scroll;
+        height: calc(100vh - 61px);
+        width: 100%;
+    }
+    body>.navbar-collapse::before {
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        background-color: #282828;
+        display: block;
+        content: "";
+        z-index: 1;
+    }
+    body>.navbar-collapse .logo {
+        position: relative;
+        z-index: 4;
+    }
+    body>.navbar-collapse .nav li>a {
+        padding: 10px 15px;
+    }
+    .nav-show .navbar-collapse {
+        -webkit-transform: translate3d(0px, 0, 0);
+        -moz-transform: translate3d(0px, 0, 0);
+        -o-transform: translate3d(0px, 0, 0);
+        -ms-transform: translate3d(0px, 0, 0);
+        transform: translate3d(0px, 0, 0);
+    }
+    .nav-show .navbar .container {
+        left: -250px;
+    }
+    .nav-show .wrapper {
+        left: 0;
+        -webkit-transform: translate3d(-260px, 0, 0);
+        -moz-transform: translate3d(-260px, 0, 0);
+        -o-transform: translate3d(-260px, 0, 0);
+        -ms-transform: translate3d(-260px, 0, 0);
+        transform: translate3d(-260px, 0, 0);
+    }
+    .navbar-toggle .icon-bar {
+        display: block;
+        position: relative;
+        background: #fff;
+        width: 24px;
+        height: 2px;
+        border-radius: 1px;
+        margin: 0 auto;
+    }
+    .navbar-header .navbar-toggle {
+        margin: 10px 15px 10px 0;
+        width: 40px;
+        height: 40px;
+    }
+    .bar1,
+    .bar2,
+    .bar3 {
+        outline: 1px solid transparent;
+    }
+    .bar1 {
+        top: 0px;
+        -webkit-animation: topbar-back 500ms linear 0s;
+        -moz-animation: topbar-back 500ms linear 0s;
+        animation: topbar-back 500ms 0s;
+        -webkit-animation-fill-mode: forwards;
+        -moz-animation-fill-mode: forwards;
+        animation-fill-mode: forwards;
+    }
+    .bar2 {
+        opacity: 1;
+    }
+    .bar3 {
+        bottom: 0px;
+        -webkit-animation: bottombar-back 500ms linear 0s;
+        -moz-animation: bottombar-back 500ms linear 0s;
+        animation: bottombar-back 500ms 0s;
+        -webkit-animation-fill-mode: forwards;
+        -moz-animation-fill-mode: forwards;
+        animation-fill-mode: forwards;
+    }
+    .toggled .bar1 {
+        top: 6px;
+        -webkit-animation: topbar-x 500ms linear 0s;
+        -moz-animation: topbar-x 500ms linear 0s;
+        animation: topbar-x 500ms 0s;
+        -webkit-animation-fill-mode: forwards;
+        -moz-animation-fill-mode: forwards;
+        animation-fill-mode: forwards;
+    }
+    .toggled .bar2 {
+        opacity: 0;
+    }
+    .toggled .bar3 {
+        bottom: 6px;
+        -webkit-animation: bottombar-x 500ms linear 0s;
+        -moz-animation: bottombar-x 500ms linear 0s;
+        animation: bottombar-x 500ms 0s;
+        -webkit-animation-fill-mode: forwards;
+        -moz-animation-fill-mode: forwards;
+        animation-fill-mode: forwards;
+    }
+    @keyframes topbar-x {
+        0% {
+            top: 0px;
+            transform: rotate(0deg);
+        }
+        45% {
+            top: 6px;
+            transform: rotate(145deg);
+        }
+        75% {
+            transform: rotate(130deg);
+        }
+        100% {
+            transform: rotate(135deg);
+        }
+    }
+    @-webkit-keyframes topbar-x {
+        0% {
+            top: 0px;
+            -webkit-transform: rotate(0deg);
+        }
+        45% {
+            top: 6px;
+            -webkit-transform: rotate(145deg);
+        }
+        75% {
+            -webkit-transform: rotate(130deg);
+        }
+        100% {
+            -webkit-transform: rotate(135deg);
+        }
+    }
+    @-moz-keyframes topbar-x {
+        0% {
+            top: 0px;
+            -moz-transform: rotate(0deg);
+        }
+        45% {
+            top: 6px;
+            -moz-transform: rotate(145deg);
+        }
+        75% {
+            -moz-transform: rotate(130deg);
+        }
+        100% {
+            -moz-transform: rotate(135deg);
+        }
+    }
+    @keyframes topbar-back {
+        0% {
+            top: 6px;
+            transform: rotate(135deg);
+        }
+        45% {
+            transform: rotate(-10deg);
+        }
+        75% {
+            transform: rotate(5deg);
+        }
+        100% {
+            top: 0px;
+            transform: rotate(0);
+        }
+    }
+    @-webkit-keyframes topbar-back {
+        0% {
+            top: 6px;
+            -webkit-transform: rotate(135deg);
+        }
+        45% {
+            -webkit-transform: rotate(-10deg);
+        }
+        75% {
+            -webkit-transform: rotate(5deg);
+        }
+        100% {
+            top: 0px;
+            -webkit-transform: rotate(0);
+        }
+    }
+    @-moz-keyframes topbar-back {
+        0% {
+            top: 6px;
+            -moz-transform: rotate(135deg);
+        }
+        45% {
+            -moz-transform: rotate(-10deg);
+        }
+        75% {
+            -moz-transform: rotate(5deg);
+        }
+        100% {
+            top: 0px;
+            -moz-transform: rotate(0);
+        }
+    }
+    @keyframes bottombar-x {
+        0% {
+            bottom: 0px;
+            transform: rotate(0deg);
+        }
+        45% {
+            bottom: 6px;
+            transform: rotate(-145deg);
+        }
+        75% {
+            transform: rotate(-130deg);
+        }
+        100% {
+            transform: rotate(-135deg);
+        }
+    }
+    @-webkit-keyframes bottombar-x {
+        0% {
+            bottom: 0px;
+            -webkit-transform: rotate(0deg);
+        }
+        45% {
+            bottom: 6px;
+            -webkit-transform: rotate(-145deg);
+        }
+        75% {
+            -webkit-transform: rotate(-130deg);
+        }
+        100% {
+            -webkit-transform: rotate(-135deg);
+        }
+    }
+    @-moz-keyframes bottombar-x {
+        0% {
+            bottom: 0px;
+            -moz-transform: rotate(0deg);
+        }
+        45% {
+            bottom: 6px;
+            -moz-transform: rotate(-145deg);
+        }
+        75% {
+            -moz-transform: rotate(-130deg);
+        }
+        100% {
+            -moz-transform: rotate(-135deg);
+        }
+    }
+    @keyframes bottombar-back {
+        0% {
+            bottom: 6px;
+            transform: rotate(-135deg);
+        }
+        45% {
+            transform: rotate(10deg);
+        }
+        75% {
+            transform: rotate(-5deg);
+        }
+        100% {
+            bottom: 0px;
+            transform: rotate(0);
+        }
+    }
+    @-webkit-keyframes bottombar-back {
+        0% {
+            bottom: 6px;
+            -webkit-transform: rotate(-135deg);
+        }
+        45% {
+            -webkit-transform: rotate(10deg);
+        }
+        75% {
+            -webkit-transform: rotate(-5deg);
+        }
+        100% {
+            bottom: 0px;
+            -webkit-transform: rotate(0);
+        }
+    }
+    @-moz-keyframes bottombar-back {
+        0% {
+            bottom: 6px;
+            -moz-transform: rotate(-135deg);
+        }
+        45% {
+            -moz-transform: rotate(10deg);
+        }
+        75% {
+            -moz-transform: rotate(-5deg);
+        }
+        100% {
+            bottom: 0px;
+            -moz-transform: rotate(0);
+        }
+    }
+    @-webkit-keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+    @-moz-keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+    .dropdown-menu .divider {
+        background-color: rgba(229, 229, 229, 0.15);
+    }
+    .navbar-nav {
+        margin: 1px 0;
+    }
+    .navbar-nav .show .dropdown-menu .nav-item .nav-link {
+        padding: 10px 15px 10px 60px;
+    }
+    [class*="navbar-"] .navbar-nav>li>a,
+    [class*="navbar-"] .navbar-nav>li>a:hover,
+    [class*="navbar-"] .navbar-nav>li>a:focus,
+    [class*="navbar-"] .navbar-nav .active>a,
+    [class*="navbar-"] .navbar-nav .active>a:hover,
+    [class*="navbar-"] .navbar-nav .active>a:focus,
+    [class*="navbar-"] .navbar-nav .show .dropdown-menu>li>a,
+    [class*="navbar-"] .navbar-nav .show .dropdown-menu>li>a:hover,
+    [class*="navbar-"] .navbar-nav .show .dropdown-menu>li>a:focus,
+    [class*="navbar-"] .navbar-nav .show .dropdown-menu>li>a:active {
+        color: white;
+    }
+    [class*="navbar-"] .navbar-nav>li>a,
+    [class*="navbar-"] .navbar-nav>li>a:hover,
+    [class*="navbar-"] .navbar-nav>li>a:focus {
+        opacity: .7;
+        background-color: transparent;
+        outline: none;
+    }
+    [class*="navbar-"] .navbar-nav .show .dropdown-menu>li>a:hover,
+    [class*="navbar-"] .navbar-nav .show .dropdown-menu>li>a:focus {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    [class*="navbar-"] .navbar-nav.navbar-nav .show .dropdown-menu>li>a:active {
+        opacity: 1;
+    }
+    [class*="navbar-"] .navbar-nav .dropdown>a:hover .caret {
+        border-bottom-color: #fff;
+        border-top-color: #fff;
+    }
+    [class*="navbar-"] .navbar-nav .dropdown>a:active .caret {
+        border-bottom-color: white;
+        border-top-color: white;
+    }
+    .dropdown-menu {
+        display: none;
+    }
+    .navbar-fixed-top {
+        -webkit-backface-visibility: hidden;
+    }
+    #bodyClick {
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 0;
+        top: 0;
+        left: auto;
+        right: 250px;
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+    }
+    .social-line .btn {
+        margin: 0 0 10px 0;
+    }
+    .subscribe-line .form-control {
+        margin: 0 0 10px 0;
+    }
+    .social-line.pull-right {
+        float: none;
+    }
+    .social-area.pull-right {
+        float: none !important;
+    }
+    .form-control+.form-control-feedback {
+        margin-top: -8px;
+    }
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        background-color: transparent !important;
+    }
+    .btn.dropdown-toggle {
+        margin-bottom: 0;
+    }
+    .media-post .author {
+        width: 20%;
+        float: none !important;
+        display: block;
+        margin: 0 auto 10px;
+    }
+    .media-post .media-body {
+        width: 100%;
+    }
+    .navbar-collapse.collapse {
+        height: 100% !important;
+    }
+    .navbar-collapse.collapse.in {
+        display: block;
+    }
+    .navbar-header .collapse,
+    .navbar-toggle {
+        display: block !important;
+    }
+    .navbar-header {
+        float: none;
+    }
+    .navbar-nav .show .dropdown-menu {
+        position: static;
+        float: none;
+        width: auto;
+        margin-top: 0;
+        background-color: transparent;
+        border: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+    .navbar-collapse .navbar-nav p {
+        line-height: 40px !important;
+        margin: 0;
+    }
+    .navbar-collapse [class^="pe-7s-"] {
+        float: left;
+        font-size: 20px;
+        margin-right: 10px;
+    }
+}
+
+@media (min-width: 992px) {
+    .table-full-width {
+        margin-left: -15px;
+        margin-right: -15px;
+    }
+    .table-responsive {
+        overflow: visible;
+    }
+}
+
+@media (max-width: 991px) {
+    .table-responsive {
+        width: 100%;
+        margin-bottom: 15px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+.bootstrap-switch {
+    display: inline-block;
+    direction: ltr;
+    cursor: pointer;
+    border-radius: 30px;
+    border: 0;
+    position: relative;
+    text-align: left;
+    overflow: hidden;
+    margin-bottom: 5px;
+    margin-left: 66px;
+    line-height: 8px;
+    width: 61px !important;
+    height: 26px;
+    outline: none;
+    z-index: 0;
+    margin-right: 1px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.bootstrap-switch .bootstrap-switch-container {
+    display: inline-flex;
+    top: 0;
+    height: 26px;
+    border-radius: 4px;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    width: 100px !important;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block !important;
+    height: 100%;
+    color: #fff;
+    padding: 6px 10px;
+    font-size: 11px;
+    text-indent: -5px;
+    line-height: 15px;
+    -webkit-transition: 0.25s ease-out;
+    transition: 0.25s ease-out;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on i,
+.bootstrap-switch .bootstrap-switch-handle-off i,
+.bootstrap-switch .bootstrap-switch-label i {
+    font-size: 12px;
+    line-height: 14px;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
+    text-align: center;
+    z-index: 1;
+    float: left;
+    width: 50% !important;
+    background-color: #1DC7EA;
+}
+
+.bootstrap-switch .bootstrap-switch-label {
+    text-align: center;
+    z-index: 100;
+    color: #333333;
+    background: #ffffff;
+    width: 22px !important;
+    height: 22px;
+    margin: 2px -11px;
+    border-radius: 12px;
+    position: relative;
+    float: left;
+    padding: 0;
+    background-color: #FFFFFF;
+    box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on {
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off {
+    text-indent: 6px;
+}
+
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    z-index: -1;
+}
+
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+    -webkit-transition: margin-left 0.5s;
+    transition: margin-left 0.5s;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
+    margin-left: -2px !important;
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
+    margin-left: -37px !important;
+}
+
+.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label {
+    width: 26px !important;
+    margin: 2px -15px;
+}
+
+.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label {
+    width: 26px !important;
+    margin: 2px -15px -13px -11px;
+}
+
+
+/*--------------------------------
+
+nucleo-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+
+@font-face {
+    font-family: 'nucleo-icons';
+    src: url("../fonts/nucleo-icons.eot");
+    src: url("../fonts/nucleo-icons.eot") format("embedded-opentype"), url("../fonts/nucleo-icons.woff2") format("woff2"), url("../fonts/nucleo-icons.woff") format("woff"), url("../fonts/nucleo-icons.ttf") format("truetype"), url("../fonts/nucleo-icons.svg") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+/*------------------------
+	base class definition
+-------------------------*/
+
+.nc-icon {
+    display: inline-block;
+    font: normal normal normal 14px/1 'nucleo-icons';
+    font-size: inherit;
+    speak: none;
+    text-transform: none;
+    /* Better Font Rendering */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+
+/*------------------------
+  change icon size
+-------------------------*/
+
+.nc-icon.lg {
+    font-size: 1.33333333em;
+    vertical-align: -16%;
+}
+
+.nc-icon.x2 {
+    font-size: 2em;
+}
+
+.nc-icon.x3 {
+    font-size: 3em;
+}
+
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+
+.nc-icon.square,
+.nc-icon.circle {
+    padding: 0.33333333em;
+    vertical-align: -16%;
+    background-color: #eee;
+}
+
+.nc-icon.circle {
+    border-radius: 50%;
+}
+
+
+/*------------------------
+  list icons
+-------------------------*/
+
+.nc-icon-ul {
+    padding-left: 0;
+    margin-left: 2.14285714em;
+    list-style-type: none;
+}
+
+.nc-icon-ul>li {
+    position: relative;
+}
+
+.nc-icon-ul>li>.nc-icon {
+    position: absolute;
+    left: -1.57142857em;
+    top: 0.14285714em;
+    text-align: center;
+}
+
+.nc-icon-ul>li>.nc-icon.lg {
+    top: 0;
+    left: -1.35714286em;
+}
+
+.nc-icon-ul>li>.nc-icon.circle,
+.nc-icon-ul>li>.nc-icon.square {
+    top: -0.19047619em;
+    left: -1.9047619em;
+}
+
+.all-icons .font-icon-list .font-icon-detail i {
+    font-size: 32px;
+}
+
+
+/*------------------------
+  spinning icons
+-------------------------*/
+
+.nc-icon.spin {
+    -webkit-animation: nc-icon-spin 2s infinite linear;
+    -moz-animation: nc-icon-spin 2s infinite linear;
+    animation: nc-icon-spin 2s infinite linear;
+}
+
+@-webkit-keyframes nc-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@-moz-keyframes nc-icon-spin {
+    0% {
+        -moz-transform: rotate(0deg);
+    }
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@keyframes nc-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+
+.nc-icon.rotate-90 {
+    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.nc-icon.rotate-180 {
+    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.nc-icon.rotate-270 {
+    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    transform: rotate(270deg);
+}
+
+.nc-icon.flip-y {
+    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0);
+    -webkit-transform: scale(-1, 1);
+    -moz-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+}
+
+.nc-icon.flip-x {
+    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: scale(1, -1);
+    -moz-transform: scale(1, -1);
+    -ms-transform: scale(1, -1);
+    -o-transform: scale(1, -1);
+    transform: scale(1, -1);
+}
+
+
+/*------------------------
+	font icons
+-------------------------*/
+
+.nc-air-baloon::before {
+    content: "\ea01";
+}
+
+.nc-album-2::before {
+    content: "\ea02";
+}
+
+.nc-alien-33::before {
+    content: "\ea03";
+}
+
+.nc-align-center::before {
+    content: "\ea04";
+}
+
+.nc-align-left-2::before {
+    content: "\ea05";
+}
+
+.nc-ambulance::before {
+    content: "\ea06";
+}
+
+.nc-android::before {
+    content: "\ea07";
+}
+
+.nc-app::before {
+    content: "\ea08";
+}
+
+.nc-apple::before {
+    content: "\ea09";
+}
+
+.nc-atom::before {
+    content: "\ea0a";
+}
+
+.nc-attach-87::before {
+    content: "\ea0b";
+}
+
+.nc-audio-92::before {
+    content: "\ea0c";
+}
+
+.nc-backpack::before {
+    content: "\ea0d";
+}
+
+.nc-badge::before {
+    content: "\ea0e";
+}
+
+.nc-bag::before {
+    content: "\ea0f";
+}
+
+.nc-bank::before {
+    content: "\ea10";
+}
+
+.nc-battery-81::before {
+    content: "\ea11";
+}
+
+.nc-bell-55::before {
+    content: "\ea12";
+}
+
+.nc-bold::before {
+    content: "\ea13";
+}
+
+.nc-bulb-63::before {
+    content: "\ea14";
+}
+
+.nc-bullet-list-67::before {
+    content: "\ea15";
+}
+
+.nc-bus-front-12::before {
+    content: "\ea16";
+}
+
+.nc-button-pause::before {
+    content: "\ea17";
+}
+
+.nc-button-play::before {
+    content: "\ea18";
+}
+
+.nc-button-power::before {
+    content: "\ea19";
+}
+
+.nc-camera-20::before {
+    content: "\ea1a";
+}
+
+.nc-caps-small::before {
+    content: "\ea1b";
+}
+
+.nc-cart-simple::before {
+    content: "\ea1c";
+}
+
+.nc-cctv::before {
+    content: "\ea1d";
+}
+
+.nc-chart-bar-32::before {
+    content: "\ea1e";
+}
+
+.nc-chart-pie-35::before {
+    content: "\ea1f";
+}
+
+.nc-chart-pie-36::before {
+    content: "\ea20";
+}
+
+.nc-chart::before {
+    content: "\ea21";
+}
+
+.nc-chat-round::before {
+    content: "\ea22";
+}
+
+.nc-check-2::before {
+    content: "\ea23";
+}
+
+.nc-circle-09::before {
+    content: "\ea24";
+}
+
+.nc-circle::before {
+    content: "\ea25";
+}
+
+.nc-cloud-download-93::before {
+    content: "\ea26";
+}
+
+.nc-cloud-upload-94::before {
+    content: "\ea27";
+}
+
+.nc-compass-05::before {
+    content: "\ea28";
+}
+
+.nc-controller-modern::before {
+    content: "\ea29";
+}
+
+.nc-credit-card::before {
+    content: "\ea2a";
+}
+
+.nc-delivery-fast::before {
+    content: "\ea2b";
+}
+
+.nc-email-83::before {
+    content: "\ea2c";
+}
+
+.nc-email-85::before {
+    content: "\ea2d";
+}
+
+.nc-explore-2::before {
+    content: "\ea2e";
+}
+
+.nc-fav-remove::before {
+    content: "\ea2f";
+}
+
+.nc-favourite-28::before {
+    content: "\ea30";
+}
+
+.nc-globe-2::before {
+    content: "\ea31";
+}
+
+.nc-grid-45::before {
+    content: "\ea32";
+}
+
+.nc-headphones-2::before {
+    content: "\ea33";
+}
+
+.nc-html5::before {
+    content: "\ea34";
+}
+
+.nc-istanbul::before {
+    content: "\ea35";
+}
+
+.nc-key-25::before {
+    content: "\ea36";
+}
+
+.nc-layers-3::before {
+    content: "\ea37";
+}
+
+.nc-light-3::before {
+    content: "\ea38";
+}
+
+.nc-lock-circle-open::before {
+    content: "\ea39";
+}
+
+.nc-map-big::before {
+    content: "\ea3a";
+}
+
+.nc-mobile::before {
+    content: "\ea3c";
+}
+
+.nc-money-coins::before {
+    content: "\ea3b";
+}
+
+.nc-note-03::before {
+    content: "\ea3d";
+}
+
+.nc-notes::before {
+    content: "\ea3e";
+}
+
+.nc-notification-70::before {
+    content: "\ea3f";
+}
+
+.nc-palette::before {
+    content: "\ea40";
+}
+
+.nc-paper-2::before {
+    content: "\ea41";
+}
+
+.nc-pin-3::before {
+    content: "\ea42";
+}
+
+.nc-planet::before {
+    content: "\ea43";
+}
+
+.nc-preferences-circle-rotate::before {
+    content: "\ea44";
+}
+
+.nc-puzzle-10::before {
+    content: "\ea45";
+}
+
+.nc-quote::before {
+    content: "\ea46";
+}
+
+.nc-refresh-02::before {
+    content: "\ea47";
+}
+
+.nc-ruler-pencil::before {
+    content: "\ea48";
+}
+
+.nc-satisfied::before {
+    content: "\ea49";
+}
+
+.nc-scissors::before {
+    content: "\ea4a";
+}
+
+.nc-send::before {
+    content: "\ea4b";
+}
+
+.nc-settings-90::before {
+    content: "\ea4c";
+}
+
+.nc-settings-gear-64::before {
+    content: "\ea4d";
+}
+
+.nc-settings-tool-66::before {
+    content: "\ea4e";
+}
+
+.nc-simple-add::before {
+    content: "\ea4f";
+}
+
+.nc-simple-delete::before {
+    content: "\ea50";
+}
+
+.nc-simple-remove::before {
+    content: "\ea51";
+}
+
+.nc-single-02::before {
+    content: "\ea52";
+}
+
+.nc-single-copy-04::before {
+    content: "\ea53";
+}
+
+.nc-spaceship::before {
+    content: "\ea54";
+}
+
+.nc-square-pin::before {
+    content: "\ea55";
+}
+
+.nc-stre-down::before {
+    content: "\ea56";
+}
+
+.nc-stre-left::before {
+    content: "\ea57";
+}
+
+.nc-stre-right::before {
+    content: "\ea58";
+}
+
+.nc-stre-up::before {
+    content: "\ea59";
+}
+
+.nc-sun-fog-29::before {
+    content: "\ea5a";
+}
+
+.nc-support-17::before {
+    content: "\ea5b";
+}
+
+.nc-tablet-2::before {
+    content: "\ea5c";
+}
+
+.nc-tag-content::before {
+    content: "\ea5d";
+}
+
+.nc-tap-01::before {
+    content: "\ea5e";
+}
+
+.nc-time-alarm::before {
+    content: "\ea5f";
+}
+
+.nc-tv-2::before {
+    content: "\ea60";
+}
+
+.nc-umbrella-13::before {
+    content: "\ea61";
+}
+
+.nc-vector::before {
+    content: "\ea62";
+}
+
+.nc-watch-time::before {
+    content: "\ea63";
+}
+
+.nc-zoom-split::before {
+    content: "\ea64";
+}
+
+
+/* all icon font classes list here */
\ No newline at end of file
diff --git a/src/dashboard/static/js/dashboard.js b/src/dashboard/static/js/dashboard.js
new file mode 100644
index 0000000..e171f59
--- /dev/null
+++ b/src/dashboard/static/js/dashboard.js
@@ -0,0 +1,76 @@
+// Setup dxGrid with data from Django
+function initInstallGrid(installs) {
+    $("#gridContainer").dxDataGrid({
+        dataSource: installs,
+        showColumnLines: false,
+        showRowLines: true,
+        rowAlternationEnabled: true,
+        columnAutoWidth: true,
+        showBorders: true,
+        searchPanel: {
+            visible: true,
+            width: 240,
+            placeholder: "Search..."
+        },
+        groupPanel: {
+            visible: true
+        },
+        paging: {
+            pageSize: 50
+        },
+        pager: {
+            showPageSizeSelector: true,
+            allowedPageSizes: [5, 10, 20],
+            showInfo: true
+        },
+        columns: [
+            {
+                dataField: "cluster__cluster_name",
+                dataType: "string",
+                caption: "Cluster Name"
+            },
+            {
+                dataField: "date_completed",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Date Completed"
+            },
+            {
+                dataField: "date_last_failed",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Date Last Failed"
+            },
+            {
+                dataField: "date_scheduled",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Date Scheduled"
+            },
+            {
+                dataField: "kirke_ticket_completed",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Kirke Ticket Completed"
+            },
+            {
+                dataField: "kirke_ticket_number",
+                dataType: "int",
+                caption: "Kirke Ticket Number",
+                cellTemplate: function (container, options) {
+                    $('<a/>').addClass('dx-link')
+                        .text(options.data.kirke_ticket_number)
+                        .on('dxclick', function () {
+                            window.open('https://kirke.verizon.com/changeRequest/' + options.data.kirke_ticket_number)
+                        })
+                        .appendTo(container);
+                }
+            },
+            {
+                dataField: "kirke_ticket_status",
+                dataType: "string",
+                caption: "Kirke Ticket Status"
+            }
+        ]
+    });
+};
\ No newline at end of file
diff --git a/src/dashboard/static/js/firmware_version.js b/src/dashboard/static/js/firmware_version.js
new file mode 100644
index 0000000..e050f57
--- /dev/null
+++ b/src/dashboard/static/js/firmware_version.js
@@ -0,0 +1,60 @@
+// Setup dxGrid with data from Django
+function FirmwareVersionGrid(firmware_versions) {
+    $("#FirmwareGridContainer").dxDataGrid({
+        dataSource: firmware_versions,
+        showColumnLines: false,
+        showRowLines: true,
+        rowAlternationEnabled: true,
+        columnAutoWidth: true,
+        showBorders: true,
+        searchPanel: {
+            visible: true,
+            width: 240,
+            placeholder: "Search..."
+        },
+        groupPanel: {
+            visible: true
+        },
+        paging: {
+            pageSize: 50
+        },
+        pager: {
+            showPageSizeSelector: true,
+            allowedPageSizes: [5, 10, 20],
+            showInfo: true
+        },
+        columns: [{
+                dataField: "id",
+                dataType: "integer",
+                caption: "Server ID"
+            },
+            {
+                dataField: "oam_hostname",
+                dataType: "string",
+                caption: "OAM Hostname"
+            },
+            {
+                dataField: "ilo_host_address",
+                dataType: "string",
+                caption: "ilo Host Address"
+            },
+            {
+                dataField: "intel_nic_firmware_version",
+                dataType: "string",
+                caption: "Firmware Version"
+            },
+            {
+                dataField: "date_completed",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Date Completed"
+            },
+            {
+                dataField: "date_last_failed",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Last failed on"
+            }
+        ]
+    });
+};
\ No newline at end of file
diff --git a/src/dashboard/static/js/orchestration_workflow.js b/src/dashboard/static/js/orchestration_workflow.js
new file mode 100644
index 0000000..b432cb9
--- /dev/null
+++ b/src/dashboard/static/js/orchestration_workflow.js
@@ -0,0 +1,55 @@
+// Setup dxGrid with data from Django
+function OrchestrationGrid(workflows) {
+    console.log(workflows)
+    $("#WorkflowGridContainer").dxDataGrid({
+        dataSource: workflows,
+        showColumnLines: false,
+        showRowLines: true,
+        rowAlternationEnabled: true,
+        columnAutoWidth: true,
+        showBorders: true,
+        searchPanel: {
+            visible: true,
+            width: 240,
+            placeholder: "Search..."
+        },
+        groupPanel: {
+            visible: true
+        },
+        paging: {
+            pageSize: 50
+        },
+        pager: {
+            showPageSizeSelector: true,
+            allowedPageSizes: [5, 10, 20],
+            showInfo: true
+        },
+        columns: [{
+                dataField: "pk",
+                dataType: "integer",
+                caption: "Cluster"
+            },
+            {
+                dataField: "fields.online",
+                dataType: "string",
+                caption: "Online"
+            },
+            {
+                dataField: "fields.bmc",
+                dataType: "boolean",
+                caption: "BMC"
+            },
+            {
+                dataField: "fields.wr_installed",
+                dataType: "boolean",
+                caption: "WR installed"
+            },
+            {
+                dataField: "fields.created_at",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Date Updated"
+            }
+        ]
+    });
+};
\ No newline at end of file
diff --git a/src/dashboard/static/js/playbook_status.js b/src/dashboard/static/js/playbook_status.js
new file mode 100644
index 0000000..9f4d051
--- /dev/null
+++ b/src/dashboard/static/js/playbook_status.js
@@ -0,0 +1,75 @@
+// Setup dxGrid with data from Django
+function PlaybookStatusGrid(query_result) {
+    $("#PlaybookGridContainer").dxDataGrid({
+        dataSource: query_result,
+        showColumnLines: false,
+        showRowLines: true,
+        rowAlternationEnabled: true,
+        columnAutoWidth: true,
+        showBorders: true,
+        searchPanel: {
+            visible: true,
+            width: 240,
+            placeholder: "Search..."
+        },
+        groupPanel: {
+            visible: true
+        },
+        paging: {
+            pageSize: 50
+        },
+        pager: {
+            showPageSizeSelector: true,
+            allowedPageSizes: [5, 10, 20],
+            showInfo: true
+        },
+        columns: [{
+                dataField: "fields.fuze_spm_site_name",
+                dataType: "string",
+                caption: "Fuze Site Name"
+            },
+            {
+                dataField: "fields.fuze_spm_site_id",
+                dataType: "datetime",
+                caption: "Fuze Site Id"
+            },
+            {
+                dataField: "fields.cluster_name",
+                dataType: "datetime",
+                caption: "Cluster Name",
+                cellTemplate: function(container, options) {
+                    $('<a/>').addClass('dx-link')
+                        .text(options.data.fields.cluster_name)
+                        .on('dxclick', function() {
+                            window.open('/dashboard/cluster/' + options.data.fields.cluster_name)
+                        })
+                        .appendTo(container);
+                }
+            },
+            {
+                dataField: "fields.playbook_name",
+                dataType: "datetime",
+                caption: "Playbook",
+                cellTemplate: function(container, options) {
+                    $('<a/>').addClass('dx-link')
+                        .text(options.data.fields.playbook_name)
+                        .on('dxclick', function() {
+                            window.open('/dashboard/playbook/' + options.data.fields.playbook_name)
+                        })
+                        .appendTo(container);
+                }
+            },
+            {
+                dataField: "fields.status",
+                dataType: "datetime",
+                caption: "Status"
+            },
+            {
+                dataField: "fields.created_at",
+                dataType: "datetime",
+                format: "M/d/yyyy, HH:mm",
+                caption: "Update at"
+            }
+        ]
+    });
+};
\ No newline at end of file
diff --git a/src/dashboard/static/js/utils.js b/src/dashboard/static/js/utils.js
new file mode 100644
index 0000000..a5ef815
--- /dev/null
+++ b/src/dashboard/static/js/utils.js
@@ -0,0 +1,14 @@
+function set_navbar_focus(selected_tab){
+    console.log("in set_navbar_focus")
+    console.log(selected_tab)
+    var nav = document.getElementById("nav");
+    var nav_tabs = nav.childNodes;
+
+    for (var i = 0; i < nav_tabs.length; i++) {
+        if (nav_tabs[i].id == selected_tab) {
+            nav_tabs[i].classList.add("active");
+        } else {
+            nav_tabs[i].classList.remove("active");
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/dashboard/static/js/workflow_status.js b/src/dashboard/static/js/workflow_status.js
new file mode 100644
index 0000000..b2224ee
--- /dev/null
+++ b/src/dashboard/static/js/workflow_status.js
@@ -0,0 +1,55 @@
+// Setup dxGrid with data from Django
+function WorkflowGrid(workflows) {
+    console.log(workflows)
+    $("#WorkflowGridContainer").dxDataGrid({
+        dataSource: workflows,
+        showColumnLines: false,
+        showRowLines: true,
+        rowAlternationEnabled: true,
+        columnAutoWidth: true,
+        showBorders: true,
+        searchPanel: {
+            visible: true,
+            width: 240,
+            placeholder: "Search..."
+        },
+        groupPanel: {
+            visible: true
+        },
+        paging: {
+            pageSize: 50
+        },
+        pager: {
+            showPageSizeSelector: true,
+            allowedPageSizes: [5, 10, 20],
+            showInfo: true
+        },
+        columns: [{
+            dataField: "pk",
+            dataType: "integer",
+            caption: "Cluster"
+        },
+        {
+            dataField: "fields.online",
+            dataType: "string",
+            caption: "Online"
+        },
+        {
+            dataField: "fields.bmc",
+            dataType: "boolean",
+            caption: "BMC"
+        },
+        {
+            dataField: "fields.wr_installed",
+            dataType: "boolean",
+            caption: "WR installed"
+        },
+        {
+            dataField: "fields.created_at",
+            dataType: "datetime",
+            format: "M/d/yyyy, HH:mm",
+            caption: "Date Updated"
+        }
+    ]
+    });
+};
\ No newline at end of file
diff --git a/src/dashboard/templates/by_cluster_name.html b/src/dashboard/templates/by_cluster_name.html
new file mode 100644
index 0000000..6715052
--- /dev/null
+++ b/src/dashboard/templates/by_cluster_name.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+
+     <!--   Core JS Files   -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    {% block javascript %}
+        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" crossorigin="anonymous"></script>
+    {%  endblock %}
+
+    <!-- Fonts and icons -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
+
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="../../static/css/styles.css?v=2.0.0 " />
+
+    {% block stylesheet %}
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet"
+          integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
+          crossorigin="anonymous"/>
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet"
+          integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
+          crossorigin="anonymous"/>
+    {% endblock %}
+
+    <title>Far-Edge Ops Middleware</title>
+</head>
+
+<body>
+    <div class="wrapper">
+        {% block content %}
+        <div class="row">
+            {% include 'cards/clusters_by_name.html' %}
+        </div>
+        {% endblock %}
+     </div>
+</body>
+
+</html>
+
+
diff --git a/src/dashboard/templates/by_playbook_name.html b/src/dashboard/templates/by_playbook_name.html
new file mode 100644
index 0000000..d8da7c6
--- /dev/null
+++ b/src/dashboard/templates/by_playbook_name.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+
+     <!--   Core JS Files   -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    {% block javascript %}
+        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ==" crossorigin="anonymous"></script>
+    {%  endblock %}
+
+    <!-- Fonts and icons -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
+
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="../../static/css/styles.css?v=2.0.0 " />
+
+    {% block stylesheet %}
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet"
+          integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
+          crossorigin="anonymous"/>
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet"
+          integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
+          crossorigin="anonymous"/>
+    {% endblock %}
+
+    <title>Far-Edge Ops Middleware</title>
+</head>
+
+<body>
+    <div class="wrapper">
+        {% block content %}
+        <div class="row">
+            {% include 'cards/playbook_by_name.html' %}
+        </div>
+        {% endblock %}
+     </div>
+</body>
+
+</html>
+
+
diff --git a/src/dashboard/templates/cards/clusters.html b/src/dashboard/templates/cards/clusters.html
new file mode 100644
index 0000000..ea23b71
--- /dev/null
+++ b/src/dashboard/templates/cards/clusters.html
@@ -0,0 +1,38 @@
+{% load static %} 
+
+{% block clusters-libraries %}
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
+        crossorigin="anonymous" />
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
+        crossorigin="anonymous" /> {% endblock %} {% block javascript %}
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ=="
+        crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{% static " js/dashboard.js " %}"></script>
+    <script>
+        $(function() {
+            initInstallGrid({{installs|safe }})
+        })
+    </script>
+{% endblock %}
+
+<div class="col-md-12">
+    <div class="card ">
+        <div class="card-header ">
+            <h4 class="card-title">Cluster List</h4>
+            <p class="card-category">Comprehensive list</p>
+        </div>
+        <div class="card-body ">
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">Started</div>
+                <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Done</div>
+                <div class="progress-bar bg-info" role="progressbar" style="width: 30%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Pending</div>
+                <div class="progress-bar bg-danger" role="progressbar" style="width: 51%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Failed</div>
+            </div>
+            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
+                <div class="demo-container">
+                    <div id="gridContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/dashboard/templates/cards/clusters_by_name.html b/src/dashboard/templates/cards/clusters_by_name.html
new file mode 100644
index 0000000..0350daf
--- /dev/null
+++ b/src/dashboard/templates/cards/clusters_by_name.html
@@ -0,0 +1,26 @@
+{% load static %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script>
+    <script>
+        $(function() {
+            PlaybookStatusGrid({{ query_result|safe }})
+        })
+    </script>
+{%  endblock %}
+
+<div class="col-md-12">
+    <div class="card ">
+        <div class="card-header ">
+            <h5 class="card-title" style="color:#326690;">Cluster Name: {{ cluster_name }}</h5>
+        </div>
+        <div class="card-body ">
+            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
+                <div class="demo-container">
+                    <div id="PlaybookGridContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/src/dashboard/templates/cards/firmware_version.html b/src/dashboard/templates/cards/firmware_version.html
new file mode 100644
index 0000000..6ac5ddb
--- /dev/null
+++ b/src/dashboard/templates/cards/firmware_version.html
@@ -0,0 +1,32 @@
+{% load static %}
+
+{% block libraries %}
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
+        crossorigin="anonymous" />
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
+        crossorigin="anonymous" /> {% endblock %} {% block javascript %}
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ=="
+        crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{% static "js/firmware_version.js" %}"></script>
+    <script>
+        $(function() {
+            FirmwareVersionGrid({{ firmware_versions|safe }})
+        })
+    </script>
+{%  endblock %}
+
+<div class="col-md-12">
+    <div class="card ">
+        <div class="card-header ">
+            <h4 class="card-title">Firmware Versions</h4>
+            <p class="card-category">Latest firmware versions per server</p>
+        </div>
+        <div class="card-body ">
+            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
+                <div class="demo-container">
+                    <div id="FirmwareGridContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/dashboard/templates/cards/map.html b/src/dashboard/templates/cards/map.html
new file mode 100644
index 0000000..3f12b59
--- /dev/null
+++ b/src/dashboard/templates/cards/map.html
@@ -0,0 +1,16 @@
+<div class="col-md-6">
+    <div class="card ">
+        <div class="card-header ">
+            <h4 class="card-title">Deployment list</h4>
+        </div>
+        <div class="card-body ">
+           <ul class="list-group list-group-flush">
+              <li class="list-group-item">Cluster 1</li>
+              <li class="list-group-item">Cluster 2</li>
+              <li class="list-group-item">Cluster 3</li>
+              <li class="list-group-item">Cluster 4</li>
+              <li class="list-group-item">Cluster 5</li>
+            </ul>
+        </div>
+    </div>
+</div>
diff --git a/src/dashboard/templates/cards/playbook.html b/src/dashboard/templates/cards/playbook.html
new file mode 100644
index 0000000..c888937
--- /dev/null
+++ b/src/dashboard/templates/cards/playbook.html
@@ -0,0 +1,33 @@
+{% load static %}
+
+{% block playbook-libraries %}
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
+        crossorigin="anonymous" />
+    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
+        crossorigin="anonymous" /> {% endblock %} {% block javascript %}
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ=="
+        crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script>
+    <script>
+        $(function() {
+            PlaybookStatusGrid({{ clusters|safe }})
+        })
+    </script>
+{%  endblock %}
+
+<div class="col-md-12">
+    <div class="card ">
+        <div class="card-header ">
+            <h4 class="card-title">Deployment Workflow</h4>
+            <p class="card-category">Latest status update received for each cluster</p>
+        </div>
+        <div class="card-body ">
+            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
+                <div class="demo-container">
+                    <div id="PlaybookGridContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/src/dashboard/templates/cards/playbook_by_name.html b/src/dashboard/templates/cards/playbook_by_name.html
new file mode 100644
index 0000000..0bc4b20
--- /dev/null
+++ b/src/dashboard/templates/cards/playbook_by_name.html
@@ -0,0 +1,26 @@
+{% load static %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script>
+    <script>
+        $(function() {
+            PlaybookStatusGrid({{ query_result|safe }})
+        })
+    </script>
+{%  endblock %}
+
+<div class="col-md-12">
+    <div class="card ">
+        <div class="card-header ">
+            <h5 class="card-title" style="color:#326690;">Playbook: {{ playbook_name }}</h5>
+        </div>
+        <div class="card-body ">
+            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
+                <div class="demo-container">
+                    <div id="PlaybookGridContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/src/dashboard/templates/cards/summary.html b/src/dashboard/templates/cards/summary.html
new file mode 100644
index 0000000..454b6fd
--- /dev/null
+++ b/src/dashboard/templates/cards/summary.html
@@ -0,0 +1,315 @@
+{% load static %}
+
+<div class="col-md-3">
+    <div class="card ">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Clusters</h6>
+                    <h2>{{ summary.clusters }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-server" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4C14.665 5.474 11.68 6.667 8 6.667 4.318 6.667 1.333 5.473 1.333 4V2.667zm0 3.667v3C1.333 10.805 4.318 12 8 12c3.68 0 6.665-1.193 6.667-2.665V6.334c-.43.32-.931.58-1.458.79C11.81 7.684 9.967 8 8 8c-1.967 0-3.81-.317-5.21-.876a6.508 6.508 0 0 1-1.457-.79zm13.334 5.334c-.43.319-.931.578-1.458.789-1.4.56-3.242.876-5.209.876-1.967 0-3.81-.316-5.21-.876a6.51 6.51 0 0 1-1.457-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/>
+                    </svg>
+                </div>
+            </div>
+            <small class="text-small mt-10 d-block">Last updated at {{ summary.created_at }}</small>
+        </div>
+
+    </div>
+</div>
+<div class="col-md-3">
+    <div class="card ">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Completed Installs</h6>
+                    <h2>{{ summary.completed }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                        <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-success" role="progressbar" style="width: {{ completed_percent }}%;">
+                {{ completed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="col-md-3">
+    <div class="card ">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>In Progress</h6>
+                    <h2>{{ summary.in_progress }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-hourglass-split" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13s-.866-1.299-3-1.48V8.35z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-warning" role="progressbar" style="width: {{ in_progress_percent }}%;">
+                {{ in_progress_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="col-md-3">
+    <div class="card ">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Failed</h6>
+                    <h2>{{ summary.failed }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1.0625em" height="1em" viewBox="0 0 17 16" class="bi bi-exclamation-triangle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
+                        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Break down CaaS workflow -->
+
+<div class="col-md-2">
+    <div class="card">
+        <div class="card-body text-decoration-none">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Ingested</h6>
+                    <h2>{{ summary.ingested }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-2">
+    <div class="card ">
+        <div class="card-body">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=online"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Online</h6>
+                    <h2>{{ summary.online }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-share" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-2">
+    <div class="card ">
+        <div class="card-body">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=firmware_scheduled"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Firmware Scheduled</h6>
+                    <h2>{{ summary.firmware_scheduled }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
+                        <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-2">
+    <div class="card ">
+        <div class="card-body">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=firmware_upgraded"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Firmware updated</h6>
+                    <h2>{{ summary.firmware_upgraded }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                        <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-2">
+    <div class="card ">
+        <div class="card-body">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=wr_scheduled"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>WindRiver Scheduled</h6>
+                    <h2>{{ summary.wr_scheduled }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
+                        <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-2">
+    <div class="card ">
+        <div class="card-body">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=wr_installed"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>WindRiver Installed</h6>
+                    <h2>{{ summary.wr_installed }}</h2>
+                </div>
+                <div class="icon">
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                        <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="progress progress-sm">
+            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
+                {{ failed_percent }}%
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Break down Orchestration workflow -->
+
+<div class="col-md-2">
+    <div class="card">
+        <div class="card-body text-decoration-none">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Namespaces Created</h6>
+                    <h2>{{ orchestration.namespaces }}</h2>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-3">
+    <div class="card">
+        <div class="card-body text-decoration-none">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Service Accounts</h6>
+                    Orchestration: {{ orchestration.orch_service_account }} <br /> Edge Engineering: {{ orchestration.edge_eng_service_account }} <br /> Samsung:{{ orchestration.samsung_service_account }} <br />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-md-3">
+    <div class="card">
+        <div class="card-body text-decoration-none">
+            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="state">
+                    <h6>Kubeconfig's Created</h6>
+                    Orchestration: {{ orchestration.orch_kubeconfig }} <br /> Edge Engineering: {{ orchestration.edge_eng_kubeconfig }} <br /> Samsung: {{ orchestration.samsung_kubeconfig }}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+{% block playbook-libraries %}
+<link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
+    crossorigin="anonymous" />
+<link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
+    crossorigin="anonymous" /> {% endblock %} {% block javascript %}
+<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ=="
+    crossorigin="anonymous"></script>
+<script type="text/javascript" src="{% static " js/workflow_status.js " %}"></script>
+<script>
+    $(function() {
+        WorkflowGrid({
+            {
+                workflow | safe
+            }
+        })
+    })
+</script>
+{% endblock %}
+
+<div class="col-md-12">
+    <div class="card ">
+        <div class="card-header ">
+            <h4 class="card-title">Deployment Workflow</h4>
+            <p class="card-category">Latest status update received for each cluster</p>
+        </div>
+        <div class="card-body ">
+            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
+                <div class="demo-container">
+                    <div id="WorkflowGridContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/dashboard/templates/dashboard.html b/src/dashboard/templates/dashboard.html
new file mode 100644
index 0000000..c7d7e39
--- /dev/null
+++ b/src/dashboard/templates/dashboard.html
@@ -0,0 +1,7 @@
+{% extends 'includes/main-panel.html' %}
+
+{% block content %}
+<div class="row">
+    {% include 'cards/summary.html' %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/dashboard/templates/deployment.html b/src/dashboard/templates/deployment.html
new file mode 100644
index 0000000..a63556d
--- /dev/null
+++ b/src/dashboard/templates/deployment.html
@@ -0,0 +1,7 @@
+{% extends 'includes/main-panel.html' %}
+
+{% block content %}
+<div class="row">
+    {% include 'cards/playbook.html' %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/dashboard/templates/hardware.html b/src/dashboard/templates/hardware.html
new file mode 100644
index 0000000..6d1f992
--- /dev/null
+++ b/src/dashboard/templates/hardware.html
@@ -0,0 +1,7 @@
+{% extends 'includes/main-panel.html' %}
+
+{% block content %}
+<div class="row">
+    {% include 'cards/firmware_version.html' %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/dashboard/templates/includes/base.html b/src/dashboard/templates/includes/base.html
new file mode 100644
index 0000000..751853b
--- /dev/null
+++ b/src/dashboard/templates/includes/base.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+
+     <!--   Core JS Files   -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    {% block javascript %}{% endblock %}
+
+    <!-- Fonts and icons -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
+
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <link rel="stylesheet" href="../../static/css/styles.css?v=2.0.0 " />
+    {% block stylesheet %}{% endblock %}
+
+    <title>Far-Edge Ops Middleware</title>
+</head>
+
+<body>
+    <div class="wrapper">
+        {% include 'includes/sidebar.html' %}
+        {% block main_panel %} {% endblock %}
+     </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/dashboard/templates/includes/main-panel.html b/src/dashboard/templates/includes/main-panel.html
new file mode 100644
index 0000000..5e9aad7
--- /dev/null
+++ b/src/dashboard/templates/includes/main-panel.html
@@ -0,0 +1,17 @@
+{% extends 'includes/base.html' %}
+
+{% block main_panel %}
+<div class="main-panel">
+    <!-- Navbar -->
+    {% include 'includes/top_navbar.html' %}
+    <!-- End Navbar -->
+
+    <!-- Content Section -->
+    <div class="content">
+        <div class="container-fluid">
+            {% block content %} No Content Added Yet {% endblock %}
+        </div>
+    </div>
+    <!-- End Content Section -->
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/dashboard/templates/includes/sidebar.html b/src/dashboard/templates/includes/sidebar.html
new file mode 100644
index 0000000..5997f61
--- /dev/null
+++ b/src/dashboard/templates/includes/sidebar.html
@@ -0,0 +1,26 @@
+<div class="sidebar" data-color="black">
+    <div class="sidebar-wrapper">
+        <div class="logo">
+            <a class="simple-text">
+                VCP Far Edge Dashboard
+            </a>
+        </div>
+        <ul id="nav" class="nav">
+            <li id="dashboard" class="nav-item ">
+                <a class="nav-link" href="{% url 'dashboard' %}">
+                    <p>Dashboard</p>
+                </a>
+            </li>
+            <li id="deployment" class="nav-item ">
+                <a class="nav-link" href="{% url 'deployment' %}">
+                    <p>Deployment</p>
+                </a>
+            </li>
+            <li id="hardware" class="nav-item ">
+                <a class="nav-link" href="{% url 'hardware' %}">
+                    <p>Hardware</p>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/dashboard/templates/includes/top_navbar.html b/src/dashboard/templates/includes/top_navbar.html
new file mode 100644
index 0000000..5765358
--- /dev/null
+++ b/src/dashboard/templates/includes/top_navbar.html
@@ -0,0 +1,13 @@
+<nav class="navbar navbar-expand-lg " color-on-scroll="500">
+    <div class="container-fluid">
+        <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="#pablo">
+                        <span class="no-icon">Log out</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/dashboard/urls.py b/src/dashboard/urls.py
new file mode 100644
index 0000000..d77419a
--- /dev/null
+++ b/src/dashboard/urls.py
@@ -0,0 +1,11 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+        path("dashboard/", view=views.dashboard, name="dashboard"),
+        path("dashboard/deployment/", views.deployment, name="deployment"),
+        path("dashboard/hardware/", views.hardware, name="hardware"),
+        path("dashboard/playbook/<str:playbook_name>/", views.by_playbook_name, name="by_playbook_name"),
+        path("dashboard/cluster/<str:cluster_name>/", views.by_cluster_name, name="by_cluster_name")
+    ]
+
diff --git a/src/dashboard/views.py b/src/dashboard/views.py
new file mode 100644
index 0000000..ca74afc
--- /dev/null
+++ b/src/dashboard/views.py
@@ -0,0 +1,80 @@
+import json
+from django.shortcuts import render
+from automationstatus.models import AutomationStatus, Summary
+from automationstatus.models import DeploymentWorkflow, OrchestrationWorkflow
+from django.core import serializers
+from .services.caasqueryservice import CaaSQueryService
+
+def filter_by(filter):
+    workflow = DeploymentWorkflow.objects.select_related('cluster')
+
+    if (filter == None):
+        return workflow.all()
+    elif (filter == 'online'):
+        return workflow.filter(online=True).all()
+    elif (filter == 'firmware_scheduled'):
+        return workflow.filter(firmware_scheduled=True).filter(firmware_upgraded=False).all()
+    elif (filter == 'firmware_upgraded'):
+        return workflow.filter(firmware_upgraded = True)
+    elif (filter == 'wr_scheduled'):
+        return workflow.filter(wr_scheduled=True).filter(wr_installed=False).all()
+    elif (filter == 'wr_installed'):
+        return workflow.filter(wr_installed = True)
+
+    return workflow.all()
+
+
+def dashboard(request):
+    print("in dashboard with no filter")
+    filter = request.GET.get('filter', None)
+    query_result = Summary.objects.latest('created_at')
+    workflows = filter_by(filter)
+    orchestration = OrchestrationWorkflow.objects.latest('created_at')
+
+
+    context = {
+        "summary": query_result,
+        "completed_percent" : int((query_result.completed * 100)/query_result.clusters),
+        "in_progress_percent" : int((query_result.in_progress * 100)/query_result.clusters),
+        "failed_percent" : int((query_result.failed * 100)/query_result.clusters),
+        "workflow": serializers.serialize("json", workflows),
+        "orchestration": orchestration
+    }
+    return render(request, "dashboard.html", context)
+
+def deployment(request):
+    # Look up playbook status by distinch cluster names
+    query_result = AutomationStatus.objects.all().distinct('cluster_name').order_by('cluster_name', '-created_at')
+    clusters = serializers.serialize("json", query_result)
+
+    # Get full list of clusters
+    # caasqueryservice = CaaSQueryService()
+    context = {
+        "clusters": clusters
+    }
+    return render(request, "deployment.html", context)
+
+def hardware(request):
+    # Get firmware versions
+    caasqueryservice = CaaSQueryService()
+    context = {
+        "firmware_versions": caasqueryservice.get_firmware_version()
+    }
+    return render(request, "hardware.html", context)
+
+def by_playbook_name(request, playbook_name):
+    query_result = AutomationStatus.objects.filter(playbook_name=playbook_name).order_by('-created_at')
+    context = { 
+        "playbook_name": playbook_name,
+        "query_result": serializers.serialize("json", query_result) 
+        }
+    return render(request, "by_playbook_name.html", context)
+
+def by_cluster_name(request, cluster_name):
+    query_result = AutomationStatus.objects.filter(cluster_name=cluster_name).order_by('-created_at')
+    context = { 
+        "cluster_name": cluster_name,
+        "query_result": serializers.serialize("json", query_result) 
+        }
+    return render(request, "by_cluster_name.html", context)
+