Index: resources/assets/sass/app.scss
===================================================================
--- resources/assets/sass/app.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/app.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,65 @@
+// Vars
+@import "core/vars";
+// Mixins
+@import "core/mixins";
+// Components
+@import "components/body";
+@import "components/preloader";
+@import "components/icon-block";
+@import "components/error";
+@import "components/form";
+@import "components/form-wizard";
+@import "components/page-header";
+@import "components/lightbox";
+@import "components/card";
+@import "components/color";
+@import "components/colorpicker";
+@import "components/typography";
+@import "components/button";
+@import "components/progress";
+@import "components/dropdown";
+@import "components/badge";
+@import "components/collapse";
+@import "components/media-object";
+@import "components/accordion";
+@import "components/scrollbar";
+@import "components/gallery";
+@import "components/datepicker";
+@import "components/alert";
+@import "components/breadcrumb";
+@import "components/notification";
+@import "components/pagination";
+@import "components/tour";
+@import "components/sweet-alert";
+@import "components/range-slider";
+@import "components/select2";
+@import "components/modal";
+@import "components/timepicker";
+@import "components/avatar";
+@import "components/file-upload";
+@import "components/authentication";
+@import "components/chat";
+@import "components/table";
+@import "components/pricing-table";
+@import "components/timeline";
+@import "components/calendar";
+@import "components/list-group";
+@import "components/toastr";
+@import "components/nestable";
+@import "components/slick";
+@import "components/webapp";
+@import "components/demo";
+@import "layouts";
+@import "other";
+// Header
+@import "components/header";
+// Navigation
+@import "components/navigation";
+// Footer
+@import "components/footer";
+// Aside
+@import "components/aside";
+// Dark Theme
+@import "dark";
+// Responsive
+@import "responsive";
Index: resources/assets/sass/components/accordion.scss
===================================================================
--- resources/assets/sass/components/accordion.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/accordion.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,229 @@
+.accordion {
+  .card {
+    margin-bottom: 0;
+    border: 1px solid #ebebeb;
+
+    .card-header {
+      display: flex;
+      height: 50px;
+      padding: 0 10px;
+      align-items: center;
+
+      button {
+        display: block;
+      }
+    }
+  }
+
+  &.custom-accordion {
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: hidden;
+
+    .accordion-row {
+      a.accordion-header {
+        color: $color-dark;
+        border-bottom: 1px solid #ebebeb;
+        border-top: 1px solid #ebebeb;
+        padding: 10px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: -1px;
+
+        .accordion-status-icon {
+          &.open {
+            display: none;
+          }
+        }
+
+        &:hover, &:focus {
+          color: $color-primary;
+        }
+      }
+
+      .accordion-body {
+        display: none;
+        padding: 10px 20px;
+      }
+
+      &.open {
+        a.accordion-header {
+          background: white;
+
+          .accordion-status-icon {
+            &.open {
+              display: block;
+            }
+
+            &.close {
+              display: none;
+            }
+          }
+        }
+
+        .accordion-body {
+          display: block;
+        }
+      }
+
+      &:first-child {
+        a.accordion-header {
+          border-top: none;
+        }
+      }
+    }
+
+    &.accordion-primary {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-primary;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-primary;
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.accordion-success {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-success;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-success;
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.accordion-danger {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-danger;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-danger;
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.accordion-secondary {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-secondary;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-secondary;
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.accordion-light {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-dark;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-light;
+            color: $color-dark;
+          }
+        }
+      }
+    }
+
+    &.accordion-warning {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-warning;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-warning;
+            color: $color-dark;
+          }
+        }
+      }
+    }
+
+    &.accordion-info {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-info;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-info;
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.accordion-dark {
+      .accordion-row {
+        &:not(.open) {
+          a.accordion-header {
+            &:hover, &:focus {
+              color: $color-dark;
+            }
+          }
+        }
+
+        &.open {
+          a.accordion-header {
+            background: $color-dark;
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}
Index: resources/assets/sass/components/alert.scss
===================================================================
--- resources/assets/sass/components/alert.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/alert.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,69 @@
+.alert {
+
+   border-color: transparent !important;
+
+   .close {
+      height: 100%;
+      width: 44px;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      display: flex;
+      & > * {
+         font-size: initial;
+         text-shadow: none;
+         line-height: 0;
+      }
+   }
+
+   &.alert-primary {
+      background: $color-primary-bright !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-primary !important;
+      }
+   }
+
+   &.alert-secondary {
+      background: $color-secondary-bright !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-secondary !important;
+      }
+   }
+
+   &.alert-success {
+      background: $color-success-bright !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-success !important;
+      }
+   }
+
+   &.alert-danger {
+      background: $color-danger-bright !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-danger !important;
+      }
+   }
+
+   &.alert-warning {
+      background: $color-warning-bright !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-warning !important;
+      }
+   }
+
+   &.alert-info {
+      background: $color-info-bright !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-info !important;
+      }
+   }
+
+   &.alert-dark {
+      background: $color-dark-bright !important;
+      color: $color-dark !important;
+      &.alert-with-border {
+         border-left: 3px solid $color-dark !important;
+      }
+   }
+
+}
Index: resources/assets/sass/components/aside.scss
===================================================================
--- resources/assets/sass/components/aside.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/aside.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,74 @@
+.sidebar-group {
+    background-color: rgba(0, 0, 0, 0.35);
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1000;
+    transition: all .3s;
+    visibility: hidden;
+
+    &.show {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .card {
+        box-shadow: none;
+    }
+
+    .sidebar {
+        width: $sidebar-width;
+        box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
+        background-color: white;
+        z-index: 1000;
+        transition: all .2s;
+        visibility: hidden;
+        opacity: 0;
+        margin-right: -100px;
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        top: 0;
+
+        &.show {
+            visibility: visible;
+            opacity: 1;
+            margin-right: 0px;
+        }
+
+        & > header {
+            background-color: #ebebeb;
+            padding: 1.5rem;
+            font-size: 16px;
+            line-height: 0;
+            display: flex;
+            align-items: center;
+
+            i {
+                margin-right: 10px;
+            }
+        }
+
+        .tab-content {
+            height: calc(100% - 50px);
+
+            .tab-pane.active {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                .tab-pane-body {
+                    flex: 1;
+                    overflow: auto;
+                }
+
+                .tab-pane-footer {
+                    padding: 20px 0;
+                }
+            }
+        }
+    }
+}
Index: resources/assets/sass/components/authentication.scss
===================================================================
--- resources/assets/sass/components/authentication.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/authentication.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,58 @@
+body.form-membership {
+   background-attachment: fixed;
+   background-size: cover;
+   padding: 3rem 0;
+
+
+   .form-wrapper {
+      background-color: white;
+      box-shadow: 0 3px 10px rgba(62,85,120,.045);
+      padding: 3rem;
+      border-radius: .5rem;
+      width: 430px;
+      margin: 50px auto;
+      text-align: center;
+
+      #logo {
+         margin: 1rem 0 3rem;
+         img:not(.logo) {
+            display: none;
+         }
+      }
+
+      h5 {
+         text-align: center;
+         margin-bottom: 2rem;
+      }
+
+      form {
+         .form-control {
+            margin-bottom: 1.5rem;
+         }
+      }
+
+      hr {
+         margin: 2rem 0;
+      }
+   }
+}
+
+.user-page {
+
+   height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   overflow: auto;
+
+   .card {
+      width: 500px;
+      .card-title {
+
+      }
+      .card-body {
+         padding: 50px;
+      }
+   }
+
+}
Index: resources/assets/sass/components/avatar.scss
===================================================================
--- resources/assets/sass/components/avatar.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/avatar.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,153 @@
+.avatar {
+	display: inline-block;
+	margin-bottom: 0;
+	height: $default-avatar-size;
+	width: $default-avatar-size;
+	border-radius: 50%;
+
+	.avatar-title {
+		background: #d7d7d7;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-transform: uppercase;
+		font-size: $default-font-size + 5;
+	}
+
+	& > a {
+		width: 100%;
+		height: 100%;
+		display: block;
+		transition: color .3s;
+		color: $color-primary;
+
+		&:hover, &:focus {
+			color: $default-text-color;
+		}
+	}
+
+	& > a > img, & > img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	&.avatar-sm {
+		height: $default-avatar-size - 1;
+		width: $default-avatar-size - 1;
+
+		.avatar-title {
+			font-size: $default-font-size
+		}
+
+		&.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
+			&:before {
+				width: .8rem;
+				height: .8rem;
+			}
+		}
+	}
+
+	&.avatar-lg {
+		height: $default-avatar-size + 1.5;
+		width: $default-avatar-size + 1.5;
+
+		.avatar-title {
+			font-size: $default-font-size + 15
+		}
+
+		&.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
+			&:before {
+				width: 1.3rem;
+				height: 1.3rem;
+				right: 4px;
+			}
+		}
+	}
+
+	&.avatar-xl {
+		height: $default-avatar-size + 2.8;
+		width: $default-avatar-size + 2.8;
+
+		.avatar-title {
+			font-size: $default-font-size + 25
+		}
+
+		&.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
+			&:before {
+				width: 1.6rem;
+				height: 1.6rem;
+				top: 3px;
+				right: 3px;
+			}
+		}
+	}
+
+	&.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
+		position: relative;
+
+		&:before {
+			content: "";
+			position: absolute;
+			display: block;
+			width: 1rem;
+			height: 1rem;
+			border-radius: 50%;
+			top: 0px;
+			right: 0px;
+			border: 3px solid white;
+		}
+	}
+
+	&.avatar-state-primary:before {
+		background: $color-primary;
+	}
+
+	&.avatar-state-success:before {
+		background: $color-success;
+	}
+
+	&.avatar-state-danger:before {
+		background: $color-danger;
+	}
+
+	&.avatar-state-warning:before {
+		background: $color-warning;
+	}
+
+	&.avatar-state-info:before {
+		background: $color-info;
+	}
+
+	&.avatar-state-secondary:before {
+		background: $color-secondary;
+	}
+
+	&.avatar-state-light:before {
+		background: $color-light;
+	}
+
+	&.avatar-state-dark:before {
+		background: $color-dark;
+	}
+}
+
+.avatar-group {
+	display: inline-flex;
+
+	.avatar {
+		margin-right: -1rem;
+        border: 2px solid white;
+
+		&:last-child {
+			margin-right: 0;
+		}
+
+		&:hover {
+			position: relative;
+			z-index: 1;
+		}
+	}
+}
Index: resources/assets/sass/components/badge.scss
===================================================================
--- resources/assets/sass/components/badge.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/badge.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,38 @@
+.badge {
+   padding: 5px 10px;
+   font-size: $default-font-size - 3;
+   &.badge-success {
+      background: $color-success;
+   }
+   &.badge-danger {
+      background: $color-danger;
+   }
+   &.badge-secondary {
+      background: $color-secondary;
+   }
+   &.badge-info {
+      background: $color-info;
+   }
+   &.badge-warning {
+      background: $color-warning;
+   }
+   &.badge-dark {
+      background: $color-dark;
+   }
+   &.badge-primary {
+      background: $color-primary;
+   }
+   &.badge-light {
+      background: $color-light;
+   }
+}
+
+.btn {
+   position: relative;
+   .badge {
+      padding: 2px 6px;
+      right: 7px;
+      top: -7px;
+      position: absolute;
+   }
+}
Index: resources/assets/sass/components/body.scss
===================================================================
--- resources/assets/sass/components/body.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/body.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,11 @@
+body {
+    font-family: 'Inter', sans-serif;
+    position: relative;
+    background-color: #f8fafb;
+    font-size: 15px;
+    color: #505050;
+
+    &.no-scroll {
+        overflow: hidden;
+    }
+}
Index: resources/assets/sass/components/breadcrumb.scss
===================================================================
--- resources/assets/sass/components/breadcrumb.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/breadcrumb.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,24 @@
+.breadcrumb {
+    background: none;
+    padding: 0;
+    margin-bottom: 30px;
+
+    .breadcrumb-item {
+        & + .breadcrumb-item::before {
+            font-family: 'themify';
+            content: "\e649";
+            font-size: 10px;
+            margin-right: 0;
+        }
+
+        &:before {
+            font-family: 'themify';
+            content: "\e69b";
+            margin-right: .5rem
+        }
+
+        &.active {
+            color: $color-primary
+        }
+    }
+}
Index: resources/assets/sass/components/button.scss
===================================================================
--- resources/assets/sass/components/button.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/button.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,546 @@
+@mixin btn($color) {
+	background: $color;
+	border-color: $color;
+
+	&:not(:disabled):not(.disabled):hover,
+	&:not(:disabled):not(.disabled):focus,
+	&:not(:disabled):not(.disabled):active {
+		background: darken($color, 10%);
+		border-color: darken($color, 10%);
+	}
+
+	&:not(:disabled):not(.disabled):focus {
+		box-shadow: 0 0 0 0.2rem rgba($color, 0.4) !important;
+	}
+	@include btn-pulse($color);
+}
+
+@mixin btn-gradient($color) {
+	background: linear-gradient(20deg, lighten($color, 15%), darken($color, 10%));
+	border-color: transparent;
+	color: white;
+
+	&:not(:disabled):not(.disabled):hover,
+	&:not(:disabled):not(.disabled):focus,
+	&:not(:disabled):not(.disabled):active {
+		background: linear-gradient(20deg, $color, darken($color, 10%));
+		border-color: transparent;
+	}
+
+	&:not(:disabled):not(.disabled):focus {
+		box-shadow: 0 0 0 0.2rem rgba($color, 0.5);
+	}
+	@include btn-pulse($color);
+}
+
+@mixin btn-outline($color) {
+	background: none;
+	border-color: $color;
+	color: darken($color, 5%);
+	border-width: 1px;
+
+	&:not(:disabled):not(.disabled):hover {
+		background: $color;
+		border-color: $color;
+		color: white;
+	}
+
+	&:not(:disabled):not(.disabled):focus,
+	&:not(:disabled):not(.disabled):active {
+		background: darken($color, 12%);
+		border-color: darken($color, 12%);
+		color: white;
+	}
+	&:not(:disabled):not(.disabled):focus {
+		box-shadow: 0 0 0 0.2rem rgba($color, 0.4);
+	}
+	@include btn-pulse($color);
+}
+
+@mixin btn-light($color) {
+	background: rgba($color, 0.3);
+	border-color: transparent;
+	color: darken($color, 18%);
+
+	&:not(:disabled):not(.disabled):hover,
+	&:not(:disabled):not(.disabled):focus,
+	&:not(:disabled):not(.disabled):active {
+		background: rgba($color, 0.5);
+		border-color: transparent;
+	}
+
+	&:not(:disabled):not(.disabled):focus {
+		box-shadow: 0 0 0 0.2rem rgba($color, 0.2);
+	}
+	@include btn-pulse(rgba($color, 0.3));
+}
+
+@mixin btn-pulse($color) {
+	&.btn-pulse:not(:disabled):not(.disabled) {
+		box-shadow: 0 0 0 0 rgba($color, 0.9) !important;
+		-webkit-animation: pulse 1.5s infinite !important;
+	}
+	&:hover {
+		-webkit-animation: none;
+	}
+}
+
+a {
+	color: lighten(black, 40%);
+	text-decoration: none;
+	transition: color .2s;
+
+	&:hover {
+		color: black;
+		text-decoration: none;
+	}
+
+	&.link-1 {
+		color: $color-primary;
+
+		&:hover, &:focus {
+			color: rgba($color-primary, .8);
+		}
+	}
+
+	&.link-2 {
+		color: black;
+
+		&:hover, &:focus {
+			color: $color-primary
+		}
+	}
+
+	&.link-3 {
+		color: white;
+
+		&:hover, &:focus {
+			color: $color-primary
+		}
+	}
+
+	&:not(.active.list-group-item), &:not(.btn):hover, &:not(.btn):active, &:not(.btn):focus {
+		text-decoration: none !important;
+		color: black;
+		outline: none;
+	}
+
+	&.btn {
+		&:hover, &:active, &:focus {
+			text-decoration: none !important;
+		}
+	}
+
+	&[href="#next"], &[href="#previous"] {
+		@extend .btn-primary
+	}
+}
+
+.page-link {
+	color: $color-primary;
+
+	&:not(:disabled):not(.disabled):focus {
+		box-shadow: 0 0 0 0.2rem rgba($color-primary, .3);
+	}
+}
+
+.btn {
+	font-size: $default-font-size;
+	width: auto;
+	display: inline-flex;
+	font-weight: 600;
+	align-items: center;
+	padding: 10px 15px;
+	line-height: $default-font-size;
+	border-radius: .5rem;
+
+	svg {
+		width: 14px !important;
+		height: 14px !important;
+	}
+
+	&[data-toggle="dropdown"] {
+		align-items: center;
+	}
+
+	&.btn-sm {
+		padding: 5px 10px;
+		font-size: $default-font-size - 1;
+	}
+
+	&.btn-lg {
+		padding: 15px 20px;
+		font-size: $default-font-size + 3;
+	}
+
+	&.btn-block {
+		width: 100%;
+		justify-content: center;
+	}
+
+	&.btn-square {
+		border-radius: 0;
+	}
+
+	&.btn-rounded {
+		border-radius: 50px;
+		padding: 10px 20px;
+
+		&.btn-sm {
+			padding: 5px 15px;
+			font-size: $default-font-size - 1;
+		}
+
+		&.btn-lg {
+			padding: 20px 30px;
+			font-size: $default-font-size + 3;
+		}
+	}
+
+	&.btn-floating {
+		height: 35px;
+		width: 35px;
+		padding: 0;
+		justify-content: center;
+		border-radius: 50%;
+
+		&.btn-sm {
+			height: 30px;
+			width: 30px;
+		}
+
+		&.btn-lg {
+			height: 50px;
+			width: 50px;
+		}
+	}
+
+	&.btn-uppercase {
+		text-transform: uppercase;
+		font-size: $default-font-size - 2;
+		letter-spacing: 1px;
+		align-items: center;
+		font-weight: 600;
+
+		&.btn-sm {
+			font-size: $default-font-size - 3;
+		}
+
+		&.btn-lg {
+			font-size: $default-font-size;
+		}
+	}
+
+	&.btn-shadow {
+		box-shadow: 0px 3px 4px 1px rgba(black, 0.3);
+
+		&:focus,
+		&:active {
+			box-shadow: 0px 4px 6px 1px rgba(black, 0.3) !important;
+		}
+	}
+
+	&.btn-primary {
+		@include btn($color-primary);
+	}
+
+	&.btn-gradient-primary {
+		@include btn-gradient($color-primary);
+	}
+
+	&.btn-light-primary {
+		@include btn-light($color-primary);
+	}
+
+	&.btn-outline-primary {
+		@include btn-outline($color-primary);
+	}
+
+	&.btn-secondary {
+		@include btn($color-secondary);
+	}
+
+	&.btn-gradient-secondary {
+		@include btn-gradient($color-secondary);
+	}
+
+	&.btn-light-secondary {
+		@include btn-light($color-secondary);
+	}
+
+	&.btn-outline-secondary {
+		@include btn-outline($color-secondary);
+	}
+
+	&.btn-success {
+		@include btn($color-success);
+	}
+
+	&.btn-gradient-success {
+		@include btn-gradient($color-success);
+	}
+
+	&.btn-light-success {
+		@include btn-light($color-success);
+	}
+
+	&.btn-outline-success {
+		@include btn-outline($color-success);
+	}
+
+	&.btn-danger {
+		@include btn($color-danger);
+	}
+
+	&.btn-gradient-danger {
+		@include btn-gradient($color-danger);
+	}
+
+	&.btn-light-danger {
+		@include btn-light($color-danger);
+	}
+
+	&.btn-outline-danger {
+		@include btn-outline($color-danger);
+	}
+
+	&.btn-warning {
+		@include btn($color-warning);
+	}
+
+	&.btn-gradient-warning {
+		@include btn-gradient($color-warning);
+		color: #212529;
+	}
+
+	&.btn-light-warning {
+		@include btn-light($color-warning);
+	}
+
+	&.btn-outline-warning {
+		@include btn-outline($color-warning);
+
+		&:not(:disabled):not(.disabled):hover,
+		&:not(:disabled):not(.disabled):focus,
+		&:not(:disabled):not(.disabled):active {
+			color: #212529;
+		}
+	}
+
+	&.btn-info {
+		@include btn($color-info);
+	}
+
+	&.btn-gradient-info {
+		@include btn-gradient($color-info);
+	}
+
+	&.btn-light-info {
+		@include btn-light($color-info);
+	}
+
+	&.btn-outline-info {
+		@include btn-outline($color-info);
+	}
+
+	&.btn-light {
+		@include btn($color-light);
+	}
+
+	&.btn-gradient-light {
+		@include btn-gradient($color-light);
+		color: inherit;
+	}
+
+	&.btn-outline-light {
+		@include btn-outline($color-light);
+		color: #212529;
+
+		&:not(:disabled):not(.disabled):hover,
+		&:not(:disabled):not(.disabled):focus,
+		&:not(:disabled):not(.disabled):active {
+			color: #212529;
+		}
+	}
+
+	&.btn-dark {
+		@include btn($color-dark);
+	}
+
+	&.btn-gradient-dark {
+		@include btn-gradient($color-dark);
+	}
+
+	&.btn-light-dark {
+		@include btn-light($color-dark);
+	}
+
+	&.btn-outline-dark {
+		@include btn-outline($color-dark);
+	}
+
+	&.btn-facebook {
+		@include btn($color-facebook);
+		color: white;
+	}
+
+	&.btn-outline-facebook {
+		@include btn-outline($color-facebook);
+	}
+
+	&.btn-google {
+		@include btn($color-google);
+		color: white;
+	}
+
+	&.btn-outline-google {
+		@include btn-outline($color-google);
+	}
+
+	&.btn-twitter {
+		@include btn($color-twitter);
+		color: white;
+	}
+
+	&.btn-outline-twitter {
+		@include btn-outline($color-twitter);
+	}
+
+	&.btn-linkedin {
+		@include btn($color-linkedin);
+		color: white;
+	}
+
+	&.btn-outline-linkedin {
+		@include btn-outline($color-linkedin);
+	}
+
+	&.btn-whatsapp {
+		@include btn($color-whatsapp);
+		color: white;
+	}
+
+	&.btn-outline-whatsapp {
+		@include btn-outline($color-whatsapp);
+	}
+
+	&.btn-instagram {
+		@include btn($color-instagram);
+		color: white;
+	}
+
+	&.btn-outline-instagram {
+		@include btn-outline($color-instagram);
+	}
+
+	&.btn-dribbble {
+		@include btn($color-dribbble);
+		color: white;
+	}
+
+	&.btn-outline-dribbble {
+		@include btn-outline($color-dribbble);
+	}
+
+	&.btn-youtube {
+		@include btn($color-youtube);
+		color: white;
+	}
+
+	&.btn-outline-youtube {
+		@include btn-outline($color-youtube);
+	}
+
+	&.btn-github {
+		@include btn($color-github);
+		color: white;
+	}
+
+	&.btn-outline-github {
+		@include btn-outline($color-github);
+	}
+
+	&.btn-behance {
+		@include btn($color-behance);
+		color: white;
+	}
+
+	&.btn-outline-behance {
+		@include btn-outline($color-behance);
+	}
+
+	&.btn-skype {
+		@include btn($color-skype);
+		color: white;
+	}
+
+	&.btn-outline-skype {
+		@include btn-outline($color-skype);
+	}
+
+	&.btn-yahoo {
+		@include btn($color-yahoo);
+		color: white;
+	}
+
+	&.btn-outline-yahoo {
+		@include btn-outline($color-yahoo);
+	}
+
+	&.btn-apple,
+	&.btn-google-play {
+		border-radius: 7px;
+
+		img {
+			width: 35px;
+			margin-right: 10px;
+		}
+
+		i {
+			font-size: 40px;
+			margin-right: 10px;
+		}
+
+		& > span {
+			display: flex;
+			flex-direction: column;
+			text-align: left;
+
+			& span:nth-child(2) {
+				font-size: 20px;
+				font-weight: 600;
+				margin-top: 5px;
+			}
+		}
+
+		&:hover,
+		&:active,
+		&:focus {
+			background: #040507;
+			color: white;
+		}
+	}
+
+	&.btn-apple {
+		border: 1px solid #040507;
+		color: #040507;
+	}
+
+	&.btn-google-play {
+		background: #040507;
+		color: white;
+
+		& > span {
+			& span:nth-child(1) {
+				text-transform: uppercase;
+				font-size: $default-font-size - 2;
+			}
+		}
+	}
+}
+
+@keyframes pulse {
+	to {
+		box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
+	}
+}
Index: resources/assets/sass/components/calendar.scss
===================================================================
--- resources/assets/sass/components/calendar.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/calendar.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,133 @@
+#external-events {
+   .fc-event {
+      border: none;
+      background: none;
+      color: $default-text-color;
+      font-size: $default-font-size;
+      cursor: move;
+      i {
+         margin-right: 10px;
+      }
+   }
+}
+
+.fc {
+   .fc-center {
+      h2 {
+         font-weight: 400;
+         font-size: $default-font-size + 5;
+         color: #828282
+      }
+   }
+   .fc-event {
+      background: $color-primary;
+      color:white !important;
+      border: none;
+      border-radius: 0;
+      margin: 0 3px;
+      padding: 0px 4px;
+      font-size: 11px;
+      line-height: normal;
+      &:hover {
+         background: #0151ac;
+      }
+      &.bg-danger {
+         &:hover {
+            background: #eb3030 !important;
+         }
+      }
+      &.bg-success {
+         &:hover {
+            background: #00b43d !important;
+         }
+      }
+      &.bg-info {
+         &:hover {
+            background: #1fa1d1 !important;
+         }
+      }
+      &.bg-warning {
+         &:hover {
+            background: #eba71f !important;
+         }
+      }
+   }
+   .fc-list-table {
+      .fc-list-item {
+         &.bg-danger {
+            &:hover td {
+               background: $color-danger!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+         &.bg-success {
+            &:hover td {
+               background: $color-success!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+         &.bg-info {
+            &:hover td {
+               background: $color-info!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+         &.bg-warning {
+            &:hover td {
+               background: $color-warning!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+         &.bg-primary {
+            &:hover td {
+               background: $color-primary!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+         &.bg-secondary {
+            &:hover td {
+               background: $color-secondary!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+         &.bg-dark {
+            &:hover td {
+               background: $color-dark!important;
+            }
+            .fc-event-dot {
+               background: white!important;
+            }
+         }
+      }
+   }
+   .fc-state-default {
+      @extend .btn-light;
+      background-image: none;
+      border: none;
+      box-shadow: none;
+      text-shadow: none;
+      &.fc-state-active {
+         background: $color-primary;
+         color: white;
+      }
+   }
+   .fc-event-dot {
+      background: #cdcdcd !important;
+   }
+}
+
+.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active {
+   z-index: 2;
+}
Index: resources/assets/sass/components/card.scss
===================================================================
--- resources/assets/sass/components/card.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/card.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,79 @@
+.card {
+    margin-bottom: 1.875rem;
+    position: relative;
+    background-color: white;
+    border-radius: $default-border-radius;
+    border: none;
+    box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
+
+    &.bg-primary .card-header, &.bg-secondary .card-header, &.bg-success .card-header, &.bg-danger .card-header, &.bg-warning .card-header, &.bg-info .card-header, &.bg-dark .card-header {
+        border-bottom: 1px solid rgba(235, 235, 235, 0.40);
+    }
+
+    .card-header, .card-footer {
+        border: none;
+        background: none;
+        font-size: $default-font-size - 1;
+        font-weight: 600;
+        padding: 10px 20px;
+    }
+
+    .card-header {
+        margin-bottom: 0;
+        border-bottom: $border-style;
+    }
+
+    .card-footer {
+        border-top: 1px solid #ebebeb;
+    }
+
+    .card-body {
+        padding: 1.5rem;
+
+        h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.card-title {
+            margin-bottom: 2rem;
+            font-size: 1rem;
+            font-weight: 600;
+
+            .dropdown {
+                & * {
+                    letter-spacing: normal;
+                    text-transform: none;
+                }
+            }
+        }
+    }
+
+    .card-scroll {
+        height: 300px;
+        overflow: auto;
+    }
+
+    &.purple {
+        height: 120px;
+        background: linear-gradient(200deg, #8a8ded, #9c9dc6);
+    }
+
+    &.blue {
+        height: 120px;
+        background: linear-gradient(200deg, #6bc5e7, #bcd7ff);
+    }
+
+    &.green {
+        height: 120px;
+        background: linear-gradient(200deg, #77df75, #b5e7a0);
+    }
+
+    &.orange {
+        height: 120px;
+        background: linear-gradient(200deg, #ffc033, #ffc49d);
+    }
+
+    & > .table-responsive .table td, & > .table-responsive .table th {
+        padding: .75rem 1.5rem;
+    }
+}
+
+.card-group, .card-columns {
+    margin-bottom: 30px;
+}
Index: resources/assets/sass/components/chat.scss
===================================================================
--- resources/assets/sass/components/chat.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/chat.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,177 @@
+.chat-app {
+    overflow: hidden;
+    padding-bottom: 30px;
+
+    .content-footer {
+        display: none;
+    }
+
+    &.horizontal-navigation {
+        .chat-block {
+            height: calc(100vh - #{$header-height + 60px + $header-height - 20px});
+        }
+
+        .layout-wrapper .content-wrapper .content-body .content {
+            padding-top: $header-height + 30px + $header-height - 20px;
+        }
+    }
+}
+
+.chat-block {
+    height: calc(100vh - #{$header-height + 60px});
+    @extend .card;
+    border-radius: $default-border-radius;
+    overflow: hidden;
+    margin-bottom: 0;
+
+    .chat-sidebar {
+        padding: 1.5rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background-color: #f8fafb;
+
+        .chat-sidebar-header {
+            form {
+                margin: 1.5rem 0;
+            }
+        }
+
+        .chat-sidebar-content {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+
+            .list-group {
+                .list-group-item {
+                    background: white;
+                    border-radius: $default-border-radius;
+                    border: 1px solid transparent;
+                    margin-bottom: 1rem;
+
+                    &.active {
+                        color: black;
+                        border-color: $color-primary
+                    }
+                }
+            }
+        }
+    }
+
+    .chat-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .mobile-chat-close-btn {
+            display: none;
+        }
+
+        .chat-header {
+            padding: 1.5rem;
+        }
+
+        .messages {
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            flex: 1;
+            overflow-x: hidden;
+
+            .message-item {
+                margin-bottom: 20px;
+                padding-left: 10px;
+                display: flex;
+                align-items: center;
+                position: relative;
+
+                .time {
+                    margin-left: 1rem;
+                }
+
+                img {
+                    max-width: 30%;
+                    border-radius: .50rem;
+                }
+
+                &:not(.message-media):not(.message-item-divider):before {
+                    content: '';
+                    border: 10px solid transparent;
+                    border-right-color: #f0f0f0;
+                    position: absolute;
+                    top: 8px;
+                    left: -10px;
+                    z-index: 1;
+                }
+
+                .message-item-content {
+                    max-width: 75%;
+                    background-color: #f0f0f0;
+                    padding: 7px 15px;
+                    line-height: 1.5rem;
+                    border-radius: .50rem;
+                    position: relative;
+                    z-index: 2;
+                }
+
+                &.me {
+                    flex-direction: row-reverse;
+                    margin-left: auto;
+                    padding-left: 0px;
+                    padding-right: 10px;
+
+                    .time {
+                        margin-left: 0;
+                        margin-right: 1rem;
+                    }
+
+                    &:not(.message-item-divider):before {
+                        left: auto;
+                        right: -10px;
+                        border-left-color: $color-primary;
+                        border-right-color: transparent;
+
+                    }
+
+                    .message-item-content {
+                        background-color: $color-primary;
+                        color: rgba(white, .9);
+                    }
+                }
+
+                &.message-item-divider {
+                    width: 100%;
+                    display: flex;
+
+                    span {
+                        @extend .small;
+                        @extend .text-muted;
+                        padding: 0 10px;
+                        user-select: none;
+                    }
+
+                    &:before, &:after {
+                        content: '';
+                        display: block;
+                        height: 1px;
+                        background-color: #f0f0f0;
+                        flex: 1;
+                    }
+                }
+            }
+        }
+
+        .chat-footer {
+            padding: 1.5rem;
+
+            .chat-footer-buttons {
+                button {
+                    margin-left: .5rem;
+                }
+            }
+        }
+    }
+}
Index: resources/assets/sass/components/collapse.scss
===================================================================
--- resources/assets/sass/components/collapse.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/collapse.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,6 @@
+.collapse {
+   .card {
+      border: 1px solid #e1e1e1;
+      box-shadow: none;
+   }
+}
Index: resources/assets/sass/components/color.scss
===================================================================
--- resources/assets/sass/components/color.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/color.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,277 @@
+.bg-primary {
+   background: $color-primary !important;
+   color: white !important;
+}
+
+.bg-primary-bright {
+   background: $color-primary-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: rgba(11,91,182,.3) !important;
+      }
+   }
+}
+
+.bg-primary-gradient {
+   background: linear-gradient(230deg, $color-primary, lighten($color-primary, 15%)) !important;
+   color: white !important;
+}
+
+.bg-info {
+   background: $color-info !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-info, 10%) !important;
+      }
+   }
+}
+
+.bg-info-bright {
+   background: $color-info-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-info-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-info-gradient {
+   background: linear-gradient(230deg, $color-info, lighten($color-info, 15%)) !important;
+   color: white !important;
+}
+
+.bg-secondary {
+   background: $color-secondary !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-secondary, 10%) !important;
+      }
+   }
+}
+
+.bg-secondary-bright {
+   background: $color-secondary-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-secondary-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-secondary-gradient {
+   background: linear-gradient(230deg, $color-secondary, lighten($color-secondary, 15%)) !important;
+   color: white !important;
+}
+
+.bg-success {
+   background: $color-success !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-success, 10%) !important;
+      }
+   }
+}
+
+.bg-success-bright {
+   background: $color-success-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-success-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-success-gradient {
+   background: linear-gradient(230deg, $color-success, lighten($color-success, 15%)) !important;
+   color: white !important;
+}
+
+.bg-danger {
+   background: $color-danger !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-danger, 10%) !important;
+      }
+   }
+}
+
+.bg-danger-bright {
+   background: $color-danger-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-danger-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-danger-gradient {
+   background: linear-gradient(230deg, $color-danger, lighten($color-danger, 15%)) !important;
+   color: white !important;
+}
+
+.bg-warning {
+   background: $color-warning !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-warning, 10%) !important;
+      }
+   }
+}
+
+.bg-warning-bright {
+   background: $color-warning-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-warning-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-warning-gradient {
+   background: linear-gradient(230deg, $color-warning, lighten($color-warning, 15%)) !important;
+   color: white !important;
+}
+
+.bg-light {
+   background: $color-light !important;
+}
+
+.bg-dark {
+   background: $color-dark !important;
+   color: white !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: lighten($color-dark, 10%) !important;
+      }
+   }
+}
+
+.bg-dark-bright {
+   background: $color-dark-bright !important;
+   &.bg-hover {
+      transition: background .2s;
+      &:hover {
+         background: darken($color-dark-bright, 5%) !important;
+      }
+   }
+}
+
+.bg-dark-gradient {
+   background: linear-gradient(230deg, $color-dark, lighten($color-dark, 15%)) !important;
+   color: white !important;
+}
+
+.bg-facebook {
+   background: $color-facebook !important;
+   color: white !important;
+}
+
+.bg-twitter {
+   background: $color-twitter !important;
+   color: white !important;
+}
+
+.bg-linkedin {
+   background: $color-linkedin !important;
+   color: white !important;
+}
+
+.bg-whatsapp {
+   background: $color-whatsapp !important;
+   color: white !important;
+}
+
+.bg-instagram {
+   background: $color-instagram !important;
+   color: white !important;
+}
+
+.bg-dribbble {
+   background: $color-dribbble !important;
+   color: white !important;
+}
+
+.bg-google {
+   background: $color-google !important;
+   color: white !important;
+}
+
+.bg-youtube {
+   background: $color-youtube !important;
+   color: white !important;
+}
+
+// texts
+
+.text-primary {
+   color: $color-primary !important;
+}
+
+.text-secondary {
+   color: $color-secondary !important;
+}
+
+.text-info {
+   color: $color-info !important;
+}
+
+.text-success {
+   color: $color-success !important;
+}
+
+.text-danger {
+   color: $color-danger !important;
+}
+
+.text-warning {
+   color: $color-warning !important;
+}
+
+.text-light {
+   color: $color-light!important;
+}
+
+.text-facebook {
+   color: $color-facebook!important;
+}
+
+.text-twitter {
+   color: $color-twitter!important;
+}
+
+.text-google {
+   color: $color-google!important;
+}
+
+.text-linkedin {
+   color: $color-linkedin!important;
+}
+
+.text-instagram {
+   color: $color-instagram!important;
+}
+
+.text-whatsapp {
+   color: $color-whatsapp!important;
+}
+
+.text-dribbble {
+   color: $color-dribbble!important;
+}
Index: resources/assets/sass/components/colorpicker.scss
===================================================================
--- resources/assets/sass/components/colorpicker.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/colorpicker.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,27 @@
+.colorpicker {
+   &.dropdown-menu {
+      visibility: visible;
+      opacity: 1;
+      height: auto;
+   }
+}
+
+.colorpicker-2x .colorpicker-saturation {
+   width: 200px;
+   height: 200px;
+}
+
+.colorpicker-2x .colorpicker-hue,
+.colorpicker-2x .colorpicker-alpha {
+   width: 30px;
+   height: 200px;
+}
+
+.colorpicker-2x .colorpicker-color,
+.colorpicker-2x .colorpicker-color div {
+   height: 30px;
+}
+
+.colorpicker.colorpicker-hidden {
+   display: none !important;
+}
Index: resources/assets/sass/components/datepicker.scss
===================================================================
--- resources/assets/sass/components/datepicker.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/datepicker.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,12 @@
+.daterangepicker {
+   td.active {
+      background: $color-primary;
+      &:hover {
+         background: $color-primary;
+      }
+   }
+}
+
+.daterangepicker .ranges li.active {
+   background: $color-primary;
+}
Index: resources/assets/sass/components/demo.scss
===================================================================
--- resources/assets/sass/components/demo.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/demo.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,70 @@
+.demo-icon-list {
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 25px
+}
+
+@media (max-width: 768px) {
+	.theme-switcher {
+		display: none;
+	}
+}
+
+@media (min-width: 768px) {
+	.theme-switcher {
+		opacity: 0;
+		display: flex;
+		align-items: center;
+		position: fixed;
+		right: -250px;
+		top: 50%;
+		transform: translate(0, -50%);
+		user-select: none;
+		z-index: 9999;
+		transition: right .3s;
+
+		&.open {
+			right: 0;
+		}
+
+		.theme-switcher-button {
+			background-color: $color-primary;
+			color: white;
+			padding: 12px 15px;
+			border-top-left-radius: 5px;
+			border-bottom-left-radius: 5px;
+			cursor: pointer;
+
+			i {
+				font-size: 22px;
+				animation-name: spin;
+				animation-duration: 3000ms;
+				animation-iteration-count: infinite;
+				animation-timing-function: linear;
+			}
+		}
+
+		.theme-switcher-panel {
+			width: 250px;
+
+			.card {
+				margin-bottom: 0;
+				border: 1px solid $color-primary;
+				border-right: none;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+}
Index: resources/assets/sass/components/dropdown.scss
===================================================================
--- resources/assets/sass/components/dropdown.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/dropdown.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,94 @@
+.dropdown {
+	display: inline;
+}
+
+.dropdown-menu {
+	margin-top: -10px;
+	visibility: hidden;
+	opacity: 0;
+	height: 0;
+	display: block !important;
+	transition: margin-top .3s, opacity .3s;
+	border-top: 1px solid #eee !important;
+
+	ul.list-group {
+		max-height: 300px;
+	}
+
+	&.show {
+		margin-top: 0;
+		visibility: visible;
+		opacity: 1;
+		height: auto;
+	}
+}
+
+.dropdown-header {
+	font-size: inherit;
+	padding: 10px 20px;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.dropdown-body {
+	padding: 10px 20px;
+}
+
+.dropdown-menu {
+	border-radius: .5rem;
+	font-size: 14px;
+	border: none;
+	box-shadow: 0px 5px 10px -1px rgba(0, 0, 0, 0.15);
+	overflow: hidden;
+
+	&.dropdown-menu-big {
+		padding: 0;
+		width: 300px;
+	}
+
+	.dropdown-menu-body {
+		max-height: 400px;
+		overflow: auto;
+	}
+
+	.dropdown-menu-title {
+		background-color: $color-primary;
+		padding: 15px 20px;
+		color: white;
+		background-size: cover !important;
+		background-position: center !important;
+	}
+
+	.dropdown-menu-footer {
+		padding: 10px 20px;
+	}
+
+	ul {
+		li {
+			&.dropdown-menu-title {
+				background: red;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				margin: 5px 0;
+				padding: 0px 20px 5px;
+				border-bottom: 1px solid #ebebeb
+			}
+		}
+	}
+
+	.dropdown-item {
+		&:hover, &:focus, &:active {
+			background: #f5f5f5;
+			text-decoration: none;
+			color: $color-primary
+		}
+	}
+}
+
+table {
+	.dropdown {
+		line-height: initial;
+	}
+}
Index: resources/assets/sass/components/error.scss
===================================================================
--- resources/assets/sass/components/error.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/error.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,31 @@
+body.error-page {
+	img {
+		width: 50%;
+		display: table;
+		margin: 50px auto;
+	}
+
+	.display-1 {
+		font-size: 10em
+	}
+}
+
+.error-page {
+	text-align: center;
+	height: calc(100vh - 120px);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.error-page-item {
+		font-size: 14rem;
+		line-height: 14rem;
+		margin-left: -2rem;
+		text-shadow: -5px 1px 0px white;
+
+		&:nth-child(2) {
+			transform: translate(0, 10px);
+			display: inline-block;
+		}
+	}
+}
Index: resources/assets/sass/components/file-upload.scss
===================================================================
--- resources/assets/sass/components/file-upload.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/file-upload.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,4 @@
+.dropzone {
+   border-width: 1px;
+   border-color: $color-primary;
+}
Index: resources/assets/sass/components/footer.scss
===================================================================
--- resources/assets/sass/components/footer.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/footer.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,27 @@
+footer.content-footer {
+    padding: 15px 30px;
+    background-color: white;
+    box-shadow: 0 0 10px -8px rgba(0, 0, 0, 1.501961);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: $navigation-width;
+
+    & * {
+        text-transform: uppercase;
+        letter-spacing: .5px;
+        font-size: 12px;
+    }
+
+    .nav {
+        a {
+            padding: 5px 0;
+            margin-left: 15px;
+
+            &:hover {
+                background: none !important;
+            }
+        }
+    }
+
+}
Index: resources/assets/sass/components/form-wizard.scss
===================================================================
--- resources/assets/sass/components/form-wizard.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/form-wizard.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,66 @@
+.wizard > .content {
+    min-height: auto;
+    margin: 0;
+    margin-bottom: 15px;
+    background: none;
+    padding: 0 !important;
+}
+
+.wizard {
+    .wizard-index {
+        background-color: rgba(black, .4);
+        height: 30px;
+        width: 30px;
+        border-radius: 50%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        margin-right: 0.5rem;
+    }
+
+    .current {
+        .wizard-index {
+            background-color: rgba(white, .2);
+        }
+    }
+}
+
+.wizard > .actions > ul > li {
+    margin: 0;
+    margin-left: 10px;
+}
+
+.wizard > .content > .body {
+    float: none;
+    position: static;
+    width: auto;
+    height: auto;
+}
+
+.wizard > .steps {
+    margin-bottom: 1.5rem;
+}
+
+.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
+    margin: 0;
+    margin-right: 10px;
+}
+
+.wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
+    background: $color-primary;
+}
+
+.wizard > .steps .error a, .wizard > .steps .error a:hover, .wizard > .steps .error a:active {
+    background: $color-danger;
+}
+
+.wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active {
+    background-color: $color-success;
+    color: white;
+}
+
+.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
+    background-color: $color-success;
+    color: white;
+}
Index: resources/assets/sass/components/form.scss
===================================================================
--- resources/assets/sass/components/form.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/form.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,254 @@
+.form-control, .custom-select {
+	font-size: .875rem;
+	border-color: #e1e1e1;
+	border-radius: .50rem;
+
+	&:focus {
+		box-shadow: none;
+		border-color: rgba($color-primary, .8);
+	}
+}
+
+.form-control:not(.form-control-lg):not(.form-control-sm) {
+	height: calc(1.5em + .75rem + 3px)
+}
+
+.form-rounded {
+	border-radius: 50px;
+}
+
+.form-control-lg {
+	font-size: 1.10rem;
+}
+
+.form-control-sm {
+	font-size: .800rem;
+}
+
+.input-group-text {
+	border: none;
+}
+
+textarea {
+	min-height: 100px;
+	max-height: 500px
+}
+
+.custom-file-input:focus ~ .custom-file-label {
+	border-color: lighten($color-primary, 10%);
+	box-shadow: none;
+}
+
+.custom-control-input {
+	right: 0;
+}
+
+.custom-control-label {
+	line-height: 25px;
+}
+
+/* Checkboxes and Radios */
+.custom-checkbox, .custom-radio, .custom-switch {
+
+	.custom-control-input:checked ~ .custom-control-label::before {
+		border-color: $color-primary;
+		background-color: $color-primary;
+	}
+
+	.custom-control-input:focus ~ .custom-control-label::before {
+		box-shadow: 0 0 0 0.2rem rgba($color-primary, .30)
+	}
+
+	& .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+		border-color: lighten($color-primary, 18%);
+		background-color: lighten($color-primary, 18%);
+	}
+
+	&.custom-checkbox-secondary {
+		.custom-control-input:checked ~ .custom-control-label::before {
+			border-color: $color-secondary;
+			background-color: $color-secondary;
+		}
+
+		.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+			border-color: lighten($color-secondary, 18%);
+			background-color: lighten($color-secondary, 18%);
+		}
+
+		.custom-control-input:focus ~ .custom-control-label::before {
+			box-shadow: 0 0 0 0.2rem rgba($color-secondary, .30)
+		}
+	}
+
+	&.custom-checkbox-success {
+		.custom-control-input:checked ~ .custom-control-label::before {
+			border-color: $color-success;
+			background-color: $color-success;
+		}
+
+		.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+			border-color: lighten($color-success, 18%);
+			background-color: lighten($color-success, 18%);
+		}
+
+		.custom-control-input:focus ~ .custom-control-label::before {
+			box-shadow: 0 0 0 0.2rem rgba($color-success, .30)
+		}
+	}
+
+	&.custom-checkbox-danger {
+		.custom-control-input:checked ~ .custom-control-label::before {
+			border-color: $color-danger;
+			background-color: $color-danger;
+		}
+
+		.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+			border-color: lighten($color-danger, 18%);
+			background-color: lighten($color-danger, 18%);
+		}
+
+		.custom-control-input:focus ~ .custom-control-label::before {
+			box-shadow: 0 0 0 0.2rem rgba($color-danger, .30)
+		}
+	}
+
+	&.custom-checkbox-warning {
+		.custom-control-input:checked ~ .custom-control-label::before {
+			border-color: $color-warning;
+			background-color: $color-warning;
+		}
+
+		.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+			border-color: lighten($color-warning, 18%);
+			background-color: lighten($color-warning, 18%);
+		}
+
+		.custom-control-input:focus ~ .custom-control-label::before {
+			box-shadow: 0 0 0 0.2rem rgba($color-warning, .30)
+		}
+	}
+
+	&.custom-checkbox-info {
+		.custom-control-input:checked ~ .custom-control-label::before {
+			border-color: $color-info;
+			background-color: $color-info;
+		}
+
+		.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+			border-color: lighten($color-info, 18%);
+			background-color: lighten($color-info, 18%);
+		}
+
+		.custom-control-input:focus ~ .custom-control-label::before {
+			box-shadow: 0 0 0 0.2rem rgba($color-info, .30)
+		}
+	}
+
+	&.custom-checkbox-dark {
+		.custom-control-input:checked ~ .custom-control-label::before {
+			border-color: $color-dark;
+			background-color: $color-dark;
+		}
+
+		.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+			border-color: lighten($color-dark, 18%);
+			background-color: lighten($color-dark, 18%);
+		}
+
+		.custom-control-input:focus ~ .custom-control-label::before {
+			box-shadow: 0 0 0 0.2rem rgba($color-dark, .30)
+		}
+	}
+}
+
+.custom-checkbox {
+	&.custom-range-danger {
+		&::before {
+			background-color: $color-danger;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-danger, 18%);
+		}
+	}
+}
+
+.custom-range {
+	&::-webkit-slider-thumb {
+		background-color: $color-primary;
+	}
+
+	&::-webkit-slider-thumb:active {
+		background-color: lighten($color-primary, 18%);
+	}
+
+	&.custom-range-danger {
+		&::-webkit-slider-thumb {
+			background-color: $color-danger;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-danger, 18%);
+		}
+	}
+
+	&.custom-range-warning {
+		&::-webkit-slider-thumb {
+			background-color: $color-warning;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-warning, 18%);
+		}
+	}
+
+	&.custom-range-success {
+		&::-webkit-slider-thumb {
+			background-color: $color-success;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-success, 18%);
+		}
+	}
+
+	&.custom-range-secondary {
+		&::-webkit-slider-thumb {
+			background-color: $color-secondary;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-secondary, 18%);
+		}
+	}
+
+	&.custom-range-info {
+		&::-webkit-slider-thumb {
+			background-color: $color-info;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-info, 18%);
+		}
+	}
+
+	&.custom-range-light {
+		&::-webkit-slider-thumb {
+			background-color: $color-light;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-light, 18%);
+		}
+	}
+
+	&.custom-range-dark {
+		&::-webkit-slider-thumb {
+			background-color: $color-dark;
+		}
+
+		&::-webkit-slider-thumb:active {
+			background-color: lighten($color-dark, 18%);
+		}
+	}
+}
Index: resources/assets/sass/components/gallery.scss
===================================================================
--- resources/assets/sass/components/gallery.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/gallery.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,27 @@
+.isotope-item {
+    z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+    pointer-events: none;
+    z-index: 1;
+}
+
+.isotope,
+.isotope .isotope-item {
+    transition-duration: 0.8s;
+}
+
+.isotope {
+    transition-property: height, width;
+}
+
+.isotope .isotope-item {
+    transition-property: transform, opacity;
+}
+
+.gallery-container {
+    img {
+        width: 100%
+    }
+}
Index: resources/assets/sass/components/header.scss
===================================================================
--- resources/assets/sass/components/header.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/header.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,187 @@
+.header {
+    background-color: white;
+    z-index: 999;
+    display: flex;
+    height: $header-height;
+    box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.40);
+    position: fixed;
+    right: 0;
+    left: 0;
+    top: 0;
+
+    .avatar {
+        border-color: transparent;
+
+        &.avatar-state-success {
+            &:before {
+                border-color: $color-primary
+            }
+        }
+    }
+
+    .header-left {
+        width: $navigation-width;
+        padding-left: 30px;
+        display: flex;
+        align-items: center;
+
+        .navigation-toggler {
+            display: none;
+            margin-right: 15px;
+
+            a {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                svg {
+                    height: 30px;
+                    width: 30px;
+                }
+            }
+        }
+    }
+
+    .header-logo {
+        a {
+            height: $header-height;
+            display: flex;
+            align-items: center;
+
+            img:not(.logo) {
+                display: none;
+            }
+        }
+    }
+
+    .header-body {
+        padding: 0 30px;
+        position: relative;
+
+        .page-title {
+            h1, h2, h3, h4, h5, h6 {
+                margin-bottom: 0;
+                line-height: inherit;
+            }
+        }
+
+        display: flex;
+        align-items: center;
+        flex: auto;
+        justify-content: space-between;
+    }
+
+    form {
+        .input-group {
+            position: relative;
+
+            .form-control {
+                border: none;
+                background-color: rgba(white, .1);
+
+                &:focus {
+                    background-color: rgba(white, .2);
+                }
+            }
+
+            .input-group-append {
+                position: absolute;
+                right: 0;
+
+                button.btn {
+                    position: relative;
+                    z-index: 9;
+                    border-top-right-radius: 5px;
+                    border-bottom-right-radius: 5px;
+                    background-color: inherit;
+                    border: none;
+                    @extend a;
+
+                    &:hover {
+                        opacity: .7;
+                    }
+
+                    &:focus, &:active, &:hover {
+                        background-color: inherit;
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .header-toggler {
+        display: none;
+    }
+
+    [data-toggle="fullscreen"] {
+        .minimize {
+            display: none;
+        }
+    }
+
+    .active-fullscreen {
+        .minimize {
+            display: block;
+        }
+
+        .maximize {
+            display: none;
+        }
+    }
+
+    ul.navbar-nav {
+        flex-direction: row;
+        align-items: center;
+
+        li.nav-item {
+
+
+            a.nav-link {
+                line-height: 100%;
+                padding: 10px 15px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &.nav-link-notify {
+                    position: relative;
+
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        width: 6px;
+                        height: 6px;
+                        right: 0;
+                        border-radius: 50%;
+                        top: 3px;
+                        background: $color-danger;
+                        -webkit-animation: notify-pulse 1s infinite
+                    }
+                }
+
+                &:hover, &:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        & + form.search {
+            margin-left: 1.5rem;
+        }
+    }
+
+    .dropdown-menu {
+        position: absolute;
+    }
+}
+
+@keyframes notify-pulse {
+    0% {
+        box-shadow: 0 0 0 0px rgba($color-danger, .7);
+    }
+    100% {
+        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+    }
+}
+
Index: resources/assets/sass/components/icon-block.scss
===================================================================
--- resources/assets/sass/components/icon-block.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/icon-block.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,141 @@
+.icon-block {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: #e1e1e1;
+  border-radius: 3px;
+  text-align: center;
+  color: black;
+  font-size: $default-font-size + 4;
+
+  &.icon-block-outline-white {
+    border: 2px solid white;
+    background: none;
+    color: white !important;
+  }
+
+  &.icon-block-outline-primary {
+    border: 2px solid $color-primary;
+    color: $color-primary !important;
+    background: none;
+  }
+
+  &.icon-block-outline-success {
+    border: 2px solid $color-success;
+    color: $color-success !important;
+    background: none;
+  }
+
+  &.icon-block-outline-danger {
+    border: 2px solid $color-danger;
+    color: $color-danger !important;
+    background: none;
+  }
+
+  &.icon-block-outline-info {
+    border: 2px solid $color-info;
+    color: $color-info !important;
+    background: none;
+  }
+
+  &.icon-block-outline-warning {
+    border: 2px solid $color-warning;
+    color: $color-warning !important;
+    background: none;
+  }
+
+  &.icon-block-outline-dark {
+    border: 2px solid $color-dark;
+    color: $color-dark !important;
+    background: none;
+  }
+
+  &.icon-block-outline-secondary {
+    border: 2px solid $color-secondary;
+    color: $color-secondary !important;
+    background: none;
+  }
+
+  &.icon-block-outline-facebook {
+    border: 2px solid $color-facebook;
+    color: $color-facebook !important;
+    background: none;
+  }
+
+  &.icon-block-outline-twitter {
+    border: 2px solid $color-twitter;
+    color: $color-twitter !important;
+    background: none;
+  }
+
+  &.icon-block-outline-linkedin {
+    border: 2px solid $color-linkedin;
+    color: $color-linkedin !important;
+    background: none;
+  }
+
+  &.icon-block-outline-whatsapp {
+    border: 2px solid $color-whatsapp;
+    color: $color-whatsapp !important;
+    background: none;
+  }
+
+  &.icon-block-outline-instagram {
+    border: 2px solid $color-instagram;
+    color: $color-instagram !important;
+    background: none;
+  }
+
+  &.icon-block-outline-dribbble {
+    border: 2px solid $color-dribbble;
+    color: $color-dribbble !important;
+    background: none;
+  }
+
+  &.icon-block-outline-google {
+    border: 2px solid $color-google;
+    color: $color-google !important;
+    background: none;
+  }
+
+  &.icon-block-outline-youtube {
+    border: 2px solid $color-youtube;
+    color: $color-youtube !important;
+    background: none;
+  }
+
+  &.icon-block-xl {
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    font-size: $default-font-size + 14;
+  }
+
+  &.icon-block-lg {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    font-size: $default-font-size + 8;
+  }
+
+  &.icon-block-sm {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-size: $default-font-size;
+  }
+
+  &.icon-block-xs {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    font-size: $default-font-size - 2;
+  }
+
+  &.icon-block-floating {
+    border-radius: 50%;
+  }
+}
Index: resources/assets/sass/components/lightbox.scss
===================================================================
--- resources/assets/sass/components/lightbox.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/lightbox.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,23 @@
+.mfp-with-zoom .mfp-container,
+.mfp-with-zoom.mfp-bg {
+	opacity: 0;
+	-webkit-backface-visibility: hidden;
+	/* ideally, transition speed should match zoom duration */
+	-webkit-transition: all 0.3s ease-out;
+	-moz-transition: all 0.3s ease-out;
+	-o-transition: all 0.3s ease-out;
+	transition: all 0.3s ease-out;
+}
+
+.mfp-with-zoom.mfp-ready .mfp-container {
+	opacity: 1;
+}
+
+.mfp-with-zoom.mfp-ready.mfp-bg {
+	opacity: 0.8;
+}
+
+.mfp-with-zoom.mfp-removing .mfp-container,
+.mfp-with-zoom.mfp-removing.mfp-bg {
+	opacity: 0;
+}
Index: resources/assets/sass/components/list-group.scss
===================================================================
--- resources/assets/sass/components/list-group.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/list-group.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,81 @@
+.list-group {
+	.list-group-item {
+		&.list-group-item-primary {
+			background: $color-primary !important;
+			color: white !important;
+		}
+
+		&.list-group-item-primary-bright {
+			background: $color-primary-bright !important;
+			color: $color-primary !important;
+		}
+
+		&.list-group-item-secondary {
+			background: $color-secondary !important;
+			color: white !important;
+		}
+
+		&.list-group-item-secondary-bright {
+			background: $color-secondary-bright !important;
+			color: $color-secondary !important;
+		}
+
+		&.list-group-item-success {
+			background: $color-success !important;
+			color: white !important;
+		}
+
+		&.list-group-item-success-bright {
+			background: $color-success-bright !important;
+			color: $color-success !important;
+		}
+
+		&.list-group-item-danger {
+			background: $color-danger !important;
+			color: white !important;
+		}
+
+		&.list-group-item-danger-bright {
+			background: $color-danger-bright !important;
+			color: $color-danger !important;
+		}
+
+		&.list-group-item-warning {
+			background: $color-warning !important;
+			color: white !important;
+		}
+
+		&.list-group-item-warning-bright {
+			background: $color-warning-bright !important;
+			color: $color-warning !important;
+		}
+
+		&.list-group-item-info {
+			background: $color-info !important;
+			color: white !important;
+		}
+
+		&.list-group-item-info-bright {
+			background: $color-info-bright !important;
+			color: $color-info !important;
+		}
+
+		&.list-group-item-light {
+			background: $color-light !important;
+		}
+
+		&.list-group-item-dark {
+			background: $color-dark !important;
+			color: white !important;
+		}
+
+		&.list-group-item-dark-bright {
+			background: $color-dark-bright !important;
+			color: $color-dark !important;
+		}
+	}
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+	background-color: $color-primary;
+}
Index: resources/assets/sass/components/media-object.scss
===================================================================
--- resources/assets/sass/components/media-object.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/media-object.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,5 @@
+.media {
+	& > img, & > a > img {
+		width: 80px;
+	}
+}
Index: resources/assets/sass/components/modal.scss
===================================================================
--- resources/assets/sass/components/modal.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/modal.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,64 @@
+body.modal-open {
+	.modal.fade .modal-dialog {
+		transform: translate(0, 0) scale(.9);
+	}
+
+	.modal.show .modal-dialog {
+		transform: translate(0, 0) scale(1);
+	}
+}
+
+.modal {
+	.modal-dialog {
+		.modal-content {
+			border: none;
+			box-shadow: none;
+			border-radius: .5rem;
+
+			.modal-header {
+				height: 60px;
+				padding: 0 20px;
+				display: flex;
+				align-items: center;
+				background-color: #ebebeb;
+				border-bottom: none;
+
+				.modal-title {
+					font-size: $default-font-size + 3;
+					font-weight: 600;
+				}
+
+				button.close {
+					background-color: white;
+					text-shadow: none;
+					opacity: 1;
+					margin: 0;
+					font-size: 23px;
+					padding: 0;
+					width: 30px;
+					height: 30px;
+					display: flex;
+					border-radius: 50%;
+					align-items: center;
+					justify-content: center;
+
+					&:hover {
+						color: #646464;
+					}
+
+					& > * {
+						font-size: initial;
+					}
+				}
+			}
+
+			.modal-body {
+				padding: 1.5rem;
+			}
+
+			.modal-footer {
+				height: 60px;
+			}
+		}
+	}
+}
Index: resources/assets/sass/components/navigation.scss
===================================================================
--- resources/assets/sass/components/navigation.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/navigation.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,188 @@
+.navigation {
+    background-color: white;
+    z-index: 998;
+    width: $navigation-width;
+    box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
+    position: fixed;
+    display: flex;
+    flex-direction: row;
+    left: 0;
+    bottom:0;
+    top: $header-height;
+
+    .navigation-menu-tab {
+        border-right: 1px solid $border-style-color;
+        width: $navigation-tab-width;
+        display: flex;
+        flex-direction: column;
+        margin-right: 0;
+        padding: 10px;
+
+        .avatar {
+            border: none;
+        }
+
+        ul {
+            li {
+                margin-bottom: 5px;
+
+                a {
+                    display: flex;
+                    height: 50px;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: $default-border-radius;
+                    transition: all .3s;
+
+                    &:hover {
+                        color: $color-primary
+                    }
+
+                    &.active {
+                        color: white;
+                        background-color: $color-primary;
+                        box-shadow: 0px 5px 20px -14px $color-primary;
+                    }
+
+                    svg {
+                        width: 23px;
+                        height: 23px;
+                    }
+                }
+            }
+        }
+    }
+
+    .navigation-menu-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+
+        .navigation-menu-group {
+
+            & > div {
+                display: none;
+
+                &.open {
+                    display: block;
+                }
+            }
+        }
+
+        ul {
+            li {
+
+                &.navigation-divider {
+                    padding: 10px 30px;
+                    text-transform: uppercase;
+                    font-size: 12px;
+                    letter-spacing: .5px;
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+                    color: #a7abc3;
+                }
+
+                & > a {
+                    display: flex;
+                    align-items: center;
+                    padding: 10px 30px;
+                    color: #505050;
+                    font-size: 14px;
+                    transition: all .3s;
+
+                    .nav-link-icon {
+                        margin-right: .8rem;
+                        stroke: rgba(black, .3);
+                        transition: stroke .3s;
+                        width: 20px;
+                        height: 20px;
+                    }
+
+                    &:hover {
+                        color: $color-primary;
+
+                        .nav-link-icon {
+                            stroke: $color-primary;
+                        }
+                    }
+
+                    &.active {
+                        position: relative;
+                        color: $color-primary;
+                        font-weight: 600;
+                        background: rgba($color-primary, .15);
+                        border-radius: $default-border-radius;
+                        margin: 0 1rem;
+
+                        &:before {
+                            content: '';
+                            // position: absolute;
+                            display: block;
+                            border: 6px solid transparent;
+                            border-left-color: $color-primary;
+                            margin-left: -12px;
+                            margin-right: 5px;
+                        }
+                    }
+
+                    .sub-menu-arrow {
+                        margin-left: auto;
+                        font-size: 14px;
+                        transition: transform .3s;
+
+                        &.rotate-in {
+                            transform: rotate(540deg);
+                        }
+                    }
+
+                    .badge {
+                        margin-left: auto;
+                        padding: 3px 7px;
+                    }
+
+                    & + ul {
+                        display: none;
+
+                        li {
+                            margin: 0;
+
+                            a {
+                                padding-left: 50px;
+                            }
+                        }
+
+                        ul {
+                            border-left: none;
+
+                            li {
+                                a {
+                                    padding-left: 70px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &.open {
+                    & > a {
+                        color: $color-primary;
+                        font-weight: 600;
+
+                        .nav-link-icon {
+                            stroke: $color-primary;
+                        }
+                    }
+
+                    & > ul {
+                        display: block;
+
+                        a.active {
+                            background-color: inherit;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
Index: resources/assets/sass/components/nestable.scss
===================================================================
--- resources/assets/sass/components/nestable.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/nestable.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,11 @@
+.dd-handle {
+  font-weight: normal;
+
+  &:hover {
+    color: $color-primary
+  }
+}
+
+.dd3-content {
+  font-weight: normal;
+}
Index: resources/assets/sass/components/notification.scss
===================================================================
--- resources/assets/sass/components/notification.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/notification.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,13 @@
+.notify {
+   .alert {
+      border: none;
+      box-shadow: 0 2px 10px 0 rgba(24,28,33,.04);
+      .alert-heading {
+         font-size: 16px;
+         font-weight: 600;
+      }
+   }
+   &.open {
+      transform: translate(0);
+   }
+}
Index: resources/assets/sass/components/page-header.scss
===================================================================
--- resources/assets/sass/components/page-header.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/page-header.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,44 @@
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    height: 55px;
+
+    h1, h2, h3, h4, h5 {
+        margin: 0;
+    }
+
+    .breadcrumb {
+        background: none;
+        padding: 0;
+        margin: 0;
+
+        a {
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        li.breadcrumb-item {
+            font-size: 14px !important;
+
+            &:first-child:before {
+                font-size: 12px;
+                font-family: themify;
+                content: "\e69b";
+                display: inline-block;
+                margin-right: 8px;
+            }
+
+            @extend .small;
+
+            & + .breadcrumb-item::before {
+                font-size: 10px;
+            }
+
+            &.active {
+                color: $color-primary;
+                font-weight: 600;
+            }
+        }
+    }
+}
Index: resources/assets/sass/components/pagination.scss
===================================================================
--- resources/assets/sass/components/pagination.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/pagination.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,41 @@
+.pagination {
+   .page-item {
+      &.active {
+         .page-link {
+            background: $color-primary;
+            border-color: transparent;
+         }
+      }
+      .page-link {
+         &:hover, &:focus {
+            text-decoration: none;
+         }
+      }
+   }
+   &.pagination-rounded {
+      .page-item {
+         margin: 0 5px;
+         .page-link {
+            border-radius: 50%;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 40px;
+            width: 40px;
+         }
+      }
+      &.pagination-sm {
+         .page-link {
+            height: 30px;
+            width: 30px;
+         }
+      }
+      &.pagination-lg {
+         .page-link {
+            height: 60px;
+            width: 60px;
+         }
+      }
+   }
+}
Index: resources/assets/sass/components/preloader.scss
===================================================================
--- resources/assets/sass/components/preloader.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/preloader.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,39 @@
+.preloader {
+	position: fixed;
+	right: 0;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 1001;
+	background: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+
+	.preloader-icon {
+		border: 5px solid #eeeeee;
+		border-radius: 50%;
+		border-top: 5px solid #3498db;
+		width: 50px;
+		height: 50px;
+		animation: spin .5s linear infinite;
+	}
+
+	/* Safari */
+	@-webkit-keyframes spin {
+		0% { -webkit-transform: rotate(0deg); }
+		100% { -webkit-transform: rotate(360deg); }
+	}
+
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+
+	svg {
+		path {
+			fill: $color-primary;
+		}
+	}
+}
Index: resources/assets/sass/components/pricing-table.scss
===================================================================
--- resources/assets/sass/components/pricing-table.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/pricing-table.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,3 @@
+.pricing-table {
+
+}
Index: resources/assets/sass/components/progress.scss
===================================================================
--- resources/assets/sass/components/progress.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/progress.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,11 @@
+.progress {
+   .progress-bar {
+      &.progress-bar-striped {
+         background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important;
+         background-size: 1rem 1rem !important;
+      }
+      &:not(.progress-bar-striped) {
+         background: $color-primary;
+      }
+   }
+}
Index: resources/assets/sass/components/range-slider.scss
===================================================================
--- resources/assets/sass/components/range-slider.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/range-slider.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,14 @@
+.irs {
+   .irs-single, .irs-to, .irs-from {
+      background: $color-primary;
+      &:before {
+         border-top-color: $color-primary;
+      }
+   }
+   .irs-handle {
+      border-color: $color-primary
+   }
+   .irs-bar {
+      background: $color-primary;
+   }
+}
Index: resources/assets/sass/components/scrollbar.scss
===================================================================
--- resources/assets/sass/components/scrollbar.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/scrollbar.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,10 @@
+.nicescroll-cursors {
+    border: none !important;
+}
+
+body:not(.dark) {
+    .nicescroll-cursors {
+        background-color: rgba($color-dark, .40) !important;
+        width: 3px !important;
+    }
+}
Index: resources/assets/sass/components/select2.scss
===================================================================
--- resources/assets/sass/components/select2.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/select2.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,47 @@
+.select2 {
+	width: 100% !important;
+}
+
+.select2.select2-container {
+	.select2-selection {
+		border: 1px solid #ced4da;
+
+		.select2-selection__placeholder {
+			line-height: calc(2.25rem + 2px);
+		}
+
+		.select2-selection__arrow {
+			height: calc(2.25rem + 2px);
+			width: 30px;
+		}
+
+		.select2-selection__choice {
+			display: flex;
+			align-items: center;
+			border: none;
+
+			.select2-selection__choice__remove {
+				font-size: $default-font-size + 2;
+				padding: 0 5px 0 3px;
+			}
+		}
+
+		&.select2-container--focus {
+			border-color: red;
+		}
+	}
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+	background-color: $color-primary;
+	color: white;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+	border-color: rgba($color-primary, 0.8);
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+	height: calc(2.25rem + 2px);
+	padding: .375rem .75rem;
+}
Index: resources/assets/sass/components/slick.scss
===================================================================
--- resources/assets/sass/components/slick.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/slick.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,35 @@
+.slick-next {
+  right: 5px;
+}
+
+.slick-prev {
+  left: 5px;
+}
+
+.slick-prev, .slick-next {
+  width: 30px;
+  height: 30px;
+  z-index: 1;
+}
+
+.slick-prev:before, .slick-next:before {
+  font-size: 30px;
+}
+
+.slick-slide-item > * {
+  padding: 10px;
+}
+
+.slick-center {
+  transition: transform .3s;
+  transform: scale(1.20);
+}
+
+/* the slides */
+.slick-slide {
+  margin: 0 10px;
+}
+/* the parent */
+.slick-list {
+  margin: 0 -10px;
+}
Index: resources/assets/sass/components/sweet-alert.scss
===================================================================
--- resources/assets/sass/components/sweet-alert.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/sweet-alert.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,39 @@
+.swal-modal {
+	border-radius: .50rem;
+
+	.swal-title {
+		font-size: $default-font-size + 6;
+	}
+
+	.swal-text {
+		text-align: center;
+	}
+
+	.swal-button {
+		padding: .375rem .75rem;
+
+		&.swal-button--confirm {
+			background: $color-primary;
+		}
+
+		&.swal-button--danger {
+			background: $color-danger;
+		}
+
+		&.swal-button--cancel {
+			background: $color-light;
+		}
+	}
+
+	.swal-icon--error {
+		border-color: lighten($color-danger, 18%);
+
+		.swal-icon--error__line {
+			background: lighten($color-danger, 18%);
+		}
+	}
+
+	input.swal-content__input {
+		@extend .form-control
+	}
+}
Index: resources/assets/sass/components/table.scss
===================================================================
--- resources/assets/sass/components/table.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/table.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,55 @@
+.table {
+    &:not(.table-bordered) {
+        thead th {
+            border-top: none;
+            border-bottom-width: 1px;
+            font-weight: 500;
+            text-transform: uppercase;
+            font-size: 11px;
+            letter-spacing: .5px;
+        }
+
+        td {
+            vertical-align: middle;
+            line-height: 1;
+            white-space: nowrap;
+        }
+    }
+
+    .dropdown-menu {
+        margin-top: 0;
+    }
+
+    &.table-lg {
+        td {
+            padding: 1.3rem .75rem;
+        }
+    }
+
+    tr {
+        &.tr-selected {
+            background-color: darken(white, 4%);
+        }
+    }
+
+    &.table-striped tbody tr:nth-of-type(odd) {
+        background-color: rgba(0, 0, 0, .03);
+    }
+}
+
+.table-responsive-stack tr {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+}
+
+.table-responsive-stack td,
+.table-responsive-stack th {
+    display: block;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
Index: resources/assets/sass/components/timeline.scss
===================================================================
--- resources/assets/sass/components/timeline.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/timeline.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,31 @@
+.timeline {
+	.timeline-item {
+		padding-bottom: 20px;
+		position: relative;
+		display: flex;
+
+		& > div:last-child {
+			flex: 1;
+		}
+
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			width: 1px;
+			bottom: 0px;
+			top: 32px;
+			left: 15px;
+			background: #e1e1e1;
+		}
+
+		&:last-child {
+			&::before {
+				display: none;
+			}
+
+			padding-bottom: 0;
+			bottom: 0;
+		}
+	}
+}
Index: resources/assets/sass/components/timepicker.scss
===================================================================
--- resources/assets/sass/components/timepicker.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/timepicker.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,46 @@
+.wickedpicker {
+   border: none;
+   box-shadow: 0 2px 15px 0 rgba(69, 65, 78, .18);
+   width: auto;
+   border-radius: 0;
+   height: auto;
+   .wickedpicker__controls {
+      padding: 10px 15px;
+   }
+   .wickedpicker__controls__control {
+      width: 40px;
+      .wickedpicker__controls__control-up:before {
+         content: "\f077";
+         font: normal normal normal 14px/1 FontAwesome;
+      }
+      .wickedpicker__controls__control-down:after {
+         content: "\f078";
+         font: normal normal normal 14px/1 FontAwesome;
+      }
+      .hover-state {
+         color: $color-primary;
+      }
+   }
+   .wickedpicker__title {
+      display: none;
+   }
+}
+
+.clearable-picker {
+   position: relative;
+   [data-clear-picker] {
+      cursor: pointer;
+      font-size: $default-font-size + 6;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      height: 17px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 17px;
+      color: $default-text-color;
+      margin-top: -(17px / 2);
+      bottom: 0;
+   }
+}
Index: resources/assets/sass/components/toastr.scss
===================================================================
--- resources/assets/sass/components/toastr.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/toastr.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,220 @@
+.toast-title {
+	font-weight: bold;
+}
+
+.toast-message {
+	-ms-word-wrap: break-word;
+	word-wrap: break-word;
+}
+
+.toast-message a,
+.toast-message label {
+	color: #ffffff;
+}
+
+.toast-message a:hover {
+	color: #cccccc;
+	text-decoration: none;
+}
+
+.toast-close-button {
+	position: relative;
+	right: -0.3em;
+	top: -0.3em;
+	float: right;
+	font-size: 20px;
+	font-weight: bold;
+	color: #ffffff;
+	opacity: 0.8;
+	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+	filter: alpha(opacity=80);
+}
+
+.toast-close-button:hover,
+.toast-close-button:focus {
+	color: #000000;
+	text-decoration: none;
+	cursor: pointer;
+	opacity: 0.4;
+	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+	filter: alpha(opacity=40);
+}
+
+/*Additional properties for button version
+ iOS requires the button element instead of an anchor tag.
+ If you want the anchor version, it requires `href="#"`.*/
+button.toast-close-button {
+	padding: 0;
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	-webkit-appearance: none;
+}
+
+.toast-top-center {
+	top: 30px;
+	right: 0;
+	width: 100%;
+}
+
+.toast-bottom-center {
+	bottom: 0;
+	right: 0;
+	width: 100%;
+}
+
+.toast-top-full-width {
+	top: 30px;
+	right: 0;
+	width: 100%;
+}
+
+.toast-bottom-full-width {
+	bottom: 0;
+	right: 0;
+	width: 100%;
+}
+
+.toast-top-left {
+	top: 30px;
+	left: 33px;
+}
+
+.toast-top-right {
+	top: 33px;
+	right: 33px;
+}
+
+.toast-bottom-right {
+	right: 33px;
+	bottom: 33px;
+}
+
+.toast-bottom-left {
+	bottom: 33px;
+	left: 33px;
+}
+
+#toast-container {
+	position: fixed;
+	z-index: 999999;
+	pointer-events: none;
+	/*overrides*/
+
+}
+
+#toast-container * {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#toast-container > div {
+	position: relative;
+	overflow: hidden;
+	margin: 0 0 6px;
+	padding: 15px 15px 15px 50px;
+	width: 300px;
+	border-radius: .25rem;
+	background-position: 15px center;
+	background-repeat: no-repeat;
+	color: #ffffff;
+	opacity: 1;
+
+	&:hover {
+		cursor: pointer;
+	}
+}
+
+#toast-container > .toast-info {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
+}
+
+#toast-container > .toast-error {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+}
+
+#toast-container > .toast-success {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+}
+
+#toast-container > .toast-warning {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+}
+
+#toast-container.toast-top-center > div,
+#toast-container.toast-bottom-center > div {
+	width: 300px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#toast-container.toast-top-full-width > div,
+#toast-container.toast-bottom-full-width > div {
+	width: 96%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.toast {
+	background-color: $color-dark;
+	border: none;
+	box-shadow: none;
+}
+
+.toast-success {
+	background-color: $color-success;
+}
+
+.toast-error {
+	background-color: $color-danger;
+}
+
+.toast-info {
+	background-color: $color-info;
+}
+
+.toast-warning {
+	background-color: $color-warning;
+}
+
+.toast-progress {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	height: 2px;
+	background-color: #000000;
+	opacity: 0.2;
+	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+	filter: alpha(opacity=20);
+}
+
+/*Responsive Design*/
+@media all and (max-width: 240px) {
+	#toast-container > div {
+		padding: 8px 8px 8px 50px;
+		width: 11em;
+	}
+	#toast-container .toast-close-button {
+		right: -0.2em;
+		top: -0.2em;
+	}
+}
+
+@media all and (min-width: 241px) and (max-width: 480px) {
+	#toast-container > div {
+		padding: 8px 8px 8px 50px;
+		width: 18em;
+	}
+	#toast-container .toast-close-button {
+		right: -0.2em;
+		top: -0.2em;
+	}
+}
+
+@media all and (min-width: 481px) and (max-width: 768px) {
+	#toast-container > div {
+		padding: 15px 15px 15px 50px;
+		width: 25em;
+	}
+}
Index: resources/assets/sass/components/tour.scss
===================================================================
--- resources/assets/sass/components/tour.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/tour.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,39 @@
+.tourStep {
+	border: none;
+
+	&.right {
+		margin-left: 10px;
+	}
+
+	&.left {
+		margin-right: 10px;
+	}
+
+	&.top {
+		margin-top: -10px;
+	}
+
+	&.bottom {
+		margin-top: 10px;
+	}
+
+	.popover-navigation {
+		border-top: 1px solid #ddd;
+		padding: .5rem .75rem;
+		display: flex;
+		align-items: center;
+
+		span {
+			font-size: $default-font-size - 2;
+			color: #9b9b9b
+		}
+
+		.popover-navigation-buttons {
+			margin-left: auto;
+
+			.btn {
+				margin-left: 5px;
+			}
+		}
+	}
+}
Index: resources/assets/sass/components/typography.scss
===================================================================
--- resources/assets/sass/components/typography.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/typography.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,133 @@
+ul {
+	&:not(.list-unstyled) {
+		margin: 0;
+		padding: 0;
+
+		li {
+			list-style-type: none;
+
+			a {
+				.icon {
+					color: darken(white, 18%);
+					font-size: $default-font-size;
+					vertical-align: middle;
+				}
+
+				&:hover, &:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+
+	li {
+		a {
+			&:hover, &:focus {
+				text-decoration: none !important;
+			}
+		}
+	}
+
+	&.list-unstyled {
+		li {
+			margin-bottom: 10px;
+
+			ul {
+				margin-left: 30px !important;
+				margin-top: 10px !important;
+				margin-bottom: 10px !important;
+
+				li {
+					list-style-type: disc !important;
+				}
+			}
+		}
+	}
+
+	&.links {
+		a {
+			display: block;
+			padding: 3px 5px;
+			color: lighten(black, 18%);
+
+			&.active {
+				color: $color-primary;
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+.list-group.list-group-sm {
+	.list-group-item {
+		padding: .40rem 1rem;
+	}
+}
+
+.text-uppercase {
+	letter-spacing: .5px;
+}
+
+.bg-none {
+	background-color: inherit !important;
+}
+
+$heading-min-font-size: 13px;
+
+h1 {
+	font-size: $default-font-size + 15
+}
+
+h2 {
+	font-size: $default-font-size + 12
+}
+
+h3 {
+	font-size: $default-font-size + 9
+}
+
+h4 {
+	font-size: $default-font-size + 6
+}
+
+h5 {
+	font-size: $default-font-size + 3
+}
+
+h6 {
+	font-size: $default-font-size
+}
+
+ul.list-inline {
+	li {
+		margin-bottom: .5rem;
+	}
+}
+
+hr {
+	border-color: $border-style-color
+}
+
+.right-0 {
+	right: 0;
+}
+
+.left-0 {
+	left: 0
+}
+
+.top-0 {
+	top: 0;
+}
+
+.bottom-0 {
+	bottom: 0;
+}
+
+.cursor-pointer {
+	cursor: pointer
+}
+
+p {
+	line-height: 1.5rem;
+}
Index: resources/assets/sass/components/webapp.scss
===================================================================
--- resources/assets/sass/components/webapp.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/webapp.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,232 @@
+.stretch-layout {
+    overflow: hidden;
+
+    .app-block {
+        height: calc(100vh - #{$header-height + 30px + 30px});
+    }
+
+    .content-footer {
+        display: none;
+    }
+
+    &:not(.chat-app).right-navigation {
+        &.small-navigation {
+            .layout-wrapper .content-wrapper .content-body .content {
+                padding-left: 30px !important;
+                padding-right: $navigation-tab-width + 30px !important;
+            }
+        }
+    }
+
+    &.hidden-navigation {
+        .layout-wrapper .content-wrapper .content-body .content {
+            padding-right: 30px !important;
+            padding-left: 30px !important;
+        }
+    }
+}
+
+.stretch-layout {
+    &.horizontal-navigation {
+        .app-block {
+            height: calc(100vh - #{$header-height + 30px + 30px + $header-height - 20px});
+        }
+    }
+}
+
+.app-block {
+    .app-sidebar {
+        height: 100%;
+
+        & > .card {
+            height: 100%;
+            margin-bottom: 0;
+
+            .card-body {
+                flex: none;
+            }
+        }
+
+        .app-sidebar-menu {
+            flex: 1;
+
+            .list-group {
+                .list-group-item.active {
+                    background: none;
+                    color: $color-primary;
+                }
+            }
+        }
+    }
+
+    .app-sidebar-menu-button {
+        display: none;
+    }
+
+    .app-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .app-content-overlay {
+            display: none;
+            position: absolute;
+            right: 1rem;
+            border-radius: 8px;
+            left: 1rem;
+            top: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.25);
+            z-index: 8;
+
+            &.show {
+                display: block;
+            }
+        }
+
+        .app-action {
+            display: flex;
+            justify-content: space-between;
+            @extend .card;
+            padding: 1.5rem;
+
+            .action-left, .action-right {
+                display: flex;
+                align-items: center;
+            }
+
+            .action-right {
+                margin-left: 1rem;
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+
+                form {
+                    flex: 1;
+                }
+            }
+        }
+
+        .app-content-body {
+            margin-bottom: 0;
+            flex: 1;
+            padding: 0;
+            height: 100%;
+            position: static;
+            overflow: hidden;
+
+            .app-lists {
+                height: 100%;
+                overflow: auto;
+
+
+                ul.list-group {
+                    li.list-group-item {
+                        padding-top: 15px;
+                        padding-bottom: 15px;
+                        background: none;
+                        display: flex;
+                        align-items: center;
+
+                        &:hover {
+                            cursor: pointer;
+                            background-color: #fafafa;
+                        }
+
+                        &.active {
+                            background-color: #ebebeb;
+
+                            .avatar {
+                                border-color: #ebebeb
+                            }
+
+                            .app-list-title {
+                                color: black;
+                            }
+
+                            &.task-list {
+                                .app-list-title {
+                                    text-decoration: line-through;
+                                    @extend .text-success
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .app-detail {
+                margin-bottom: 0;
+                position: absolute;
+                right: .90rem;
+                top: .50rem;
+                bottom: 0;
+                left: .90rem;
+                z-index: 2;
+                opacity: 0;
+                visibility: hidden;
+                transition: all .3s;
+
+                &.show {
+                    opacity: 1;
+                    visibility: visible;
+                    top: 0;
+                }
+
+                .card-header {
+                    display: flex;
+                    align-items: center;
+                    padding: 1.5rem;
+                    border-bottom: $border-style;
+
+                    .app-detail-action-left {
+                        display: flex;
+                    }
+
+                    .app-detail-action-right {
+                        margin-left: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+
+#compose, .app-block {
+    .ql-toolbar.ql-snow {
+        border: none;
+        padding: 0;
+    }
+
+    .ql-editor {
+        min-height: 70px;
+    }
+}
+
+.app-sortable-handle {
+    cursor: move;
+}
+
+.app-file-list {
+    border: $border-style;
+
+    .app-file-icon {
+        background-color: #f5f5f5;
+        padding: 2rem;
+        text-align: center;
+        font-size: 2rem;
+        border-bottom: $border-style;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+    }
+
+    &:hover {
+        border-color: #d7d7d7;
+    }
+}
+
+body:not(.stretch-layout) {
+    .app-block .app-content .app-content-body {
+        overflow: visible;
+    }
+}
Index: resources/assets/sass/core/mixins.scss
===================================================================
--- resources/assets/sass/core/mixins.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/core/mixins.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,145 @@
+@for $i from 0 through 10 {
+	.m-#{5 * $i} {
+		margin: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.m-t-b-#{5 * $i} {
+		margin-top: 5px * $i !important;
+		margin-bottom: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.m-l-r-#{5 * $i} {
+		margin-left: 5px * $i !important;
+		margin-right: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.m-t-#{5 * $i} {
+		margin-top: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.m-r-#{5 * $i} {
+		margin-right: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.m-b-#{5 * $i} {
+		margin-bottom: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.m-l-#{5 * $i} {
+		margin-left: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 100 {
+	.m-t-#{10 * $i}-minus {
+		margin-top: -10px * $i !important;
+	}
+}
+
+@for $i from 0 through 100 {
+	.m-r-#{10 * $i}-minus {
+		margin-right: -10px * $i !important;
+	}
+}
+
+@for $i from 0 through 100 {
+	.m-b-#{10 * $i}-minus {
+		margin-bottom: -10px * $i !important;
+	}
+}
+
+@for $i from 0 through 100 {
+	.m-l-#{10 * $i}-minus {
+		margin-left: -10px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.p-t-b-#{5 * $i} {
+		padding-top: 5px * $i !important;
+		padding-bottom: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.p-l-r-#{5 * $i} {
+		padding-left: 5px * $i !important;
+		padding-right: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 10 {
+	.p-#{5 * $i} {
+		padding: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 30 {
+	.p-t-#{5 * $i} {
+		padding-top: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 30 {
+	.p-r-#{5 * $i} {
+		padding-right: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 30 {
+	.p-b-#{5 * $i} {
+		padding-bottom: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 30 {
+	.p-l-#{5 * $i} {
+		padding-left: 5px * $i !important;
+	}
+}
+
+@for $i from 0 through 9 {
+	.opacity-#{$i} {
+		opacity: $i / 10 !important;
+	}
+}
+
+@for $i from 10 through 50 {
+	.font-size-#{$i} {
+		font-size: 1px * $i !important;
+	}
+}
+
+@for $i from 0 through 50 {
+	.line-height-#{$i} {
+		line-height: 1px * $i !important;
+	}
+}
+
+@for $i from 10 through 50 {
+	.width-#{$i * 1} {
+		width: #{$i}px !important;
+	}
+}
+
+@for $i from 10 through 50 {
+	.height-#{$i * 1} {
+		height: #{$i}px !important;
+	}
+}
+
+.h-100-vh {
+	height: 100vh;
+}
Index: resources/assets/sass/core/vars.scss
===================================================================
--- resources/assets/sass/core/vars.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/core/vars.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,57 @@
+$header-height: 75px;
+$navigation-width: 320px;
+$navigation-tab-width: 80px;
+$small-navigation-width: 65px;
+$sidebar-width: 330px;
+
+$default-font-size: 14px;
+$default-border-radius: .50rem;
+
+$border-style: 1px solid #ebebeb;
+$border-style-color: darken(white, 10%);
+$dark-border-style: 1px solid rgba(white, .1);
+
+$body-bg-color: #182139;
+$body-bg-color-dark: #04071a;
+$default-dark-text-color: #c7c7c7;
+
+$body-bg-color-dark-light: #313852;
+
+$default-text-color: #646464;
+$default-text-color-dark: #b9b9b9;
+
+$default-avatar-size: 3rem;
+
+$element-focus-outline-opacity: .40;
+
+$color-primary: #0081ff;
+$color-secondary: #aa66cc;
+$color-success: #28c76f;
+$color-info: #33b5e5;
+$color-light: #afb8bd;
+$color-danger: #ea5455;
+$color-warning: #ff9f43;
+$color-dark: #293134;
+
+$color-primary-bright: rgba($color-primary, .3);
+$color-secondary-bright: rgba($color-secondary, .3);
+$color-success-bright: rgba($color-success, .3);
+$color-info-bright: rgba($color-info, .3);
+$color-danger-bright: rgba($color-danger, .3);
+$color-warning-bright: rgba($color-warning, .3);
+$color-dark-bright: #d4d5d8;
+
+$color-facebook: #3b5998;
+$color-twitter: #55acee;
+$color-google: #db4437;
+$color-pinterest: #bd081c;
+$color-linkedin: #0077b5;
+$color-tumblr: #35465c;
+$color-instagram: #3f729b;
+$color-dribbble: #ea4c89;
+$color-youtube: #cd201f;
+$color-whatsapp: #43d854;
+$color-github: #00405d;
+$color-behance: #1769ff;
+$color-skype: #00aff0;
+$color-yahoo: #410093;
Index: resources/assets/sass/dark.scss
===================================================================
--- resources/assets/sass/dark.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/dark.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,1190 @@
+body.dark {
+    background-color: $body-bg-color;
+    color: $default-dark-text-color;
+
+    a:not(.btn):not(.link-1) {
+        color: rgba(white, .5);
+
+        &:hover {
+            color: rgba(white, .8);
+        }
+    }
+
+    .header {
+        background-color: $body-bg-color-dark-light;
+        border-bottom-color: #454c66;
+
+        .header-logo {
+            border-bottom-color: #454c66;
+
+            img {
+                display: block;
+
+                &:not(.logo-light) {
+                    display: none;
+                }
+            }
+        }
+
+        ul {
+            li {
+                a {
+                    color: $default-dark-text-color;
+
+                    &:hover, &:focus {
+                        color: white;
+                    }
+                }
+            }
+        }
+
+        .avatar {
+            border-color: transparent;
+        }
+    }
+
+    .text-divider:after {
+        background-color: #454c66;
+    }
+
+    input::placeholder {
+        color: rgba(white, .5);
+    }
+
+    .border {
+        border-color: #454c66 !important;
+    }
+
+    .border-right {
+        border-left-color: #454c66 !important;
+        border-right-color: #454c66 !important;
+    }
+
+    .border-left {
+        border-left-color: #454c66 !important;
+        border-right-color: #454c66 !important;
+    }
+
+    .border-bottom {
+        border-bottom-color: #454c66 !important;
+    }
+
+    .border-top {
+        border-top-color: #454c66 !important;
+    }
+
+    .preloader {
+        background: $body-bg-color-dark;
+
+        .preloader-icon {
+            border-color: $body-bg-color-dark-light
+        }
+    }
+
+    .nav-tabs {
+        .nav-link {
+            &:hover, &:focus {
+                background-color: $body-bg-color-dark-light !important;
+                border-bottom-color: $body-bg-color-dark-light !important;
+            }
+
+            &.active {
+                background: $body-bg-color-dark-light !important;
+                border-bottom-color: $body-bg-color-dark-light !important;
+            }
+        }
+    }
+
+    .sidebar {
+        header {
+            background-color: #2c2f42;
+        }
+    }
+
+    .navigation {
+        background-color: $body-bg-color-dark-light;
+
+        .navigation-menu-tab {
+            border-right-color: lighten($body-bg-color-dark-light, 10%);
+
+            ul {
+                li {
+                    a {
+                        color: $default-dark-text-color;
+
+                        &.active {
+                            color: white;
+                        }
+
+                        &:not(.active):hover, &:not(.active):focus {
+                            color: $color-primary;
+                        }
+                    }
+                }
+            }
+        }
+
+        .navigation-menu-body {
+
+            ul {
+                li {
+                    &.navigation-divider {
+                        color: #dbdbdb
+                    }
+
+                    a {
+                        color: $default-dark-text-color;
+
+                        .nav-link-icon {
+                            stroke: rgba($default-dark-text-color, .5);
+                        }
+
+                        &:hover, &:focus {
+                            color: white;
+                        }
+
+                        &.active {
+                            color: white;
+                        }
+
+                        & + ul {
+                            li {
+                                a.active {
+                                    color: white
+                                }
+                            }
+                        }
+                    }
+
+                    &.open {
+                        & > a {
+                            color: white;
+                            background-color: #454c66;
+                        }
+                    }
+
+                    .dropdown-divider {
+                        color: $color-primary
+                    }
+                }
+            }
+        }
+    }
+
+    &.boxed-layout {
+        background-color: $body-bg-color-dark;
+
+        .layout-wrapper .content-wrapper .content-body .content {
+            background-color: $body-bg-color;
+        }
+    }
+
+    &.right-navigation {
+        .navigation {
+            .navigation-menu-tab {
+                border-left-color: lighten($body-bg-color-dark-light, 10%)
+            }
+        }
+
+        &.small-navigation {
+            .navigation {
+                .navigation-menu-tab {
+                    border-left-color: transparent;
+                }
+
+                &:hover {
+                    .navigation-menu-tab {
+                        border-left-color: lighten($body-bg-color-dark-light, 10%) !important;
+                    }
+                }
+            }
+        }
+    }
+
+    &.small-navigation {
+        .navigation {
+            &:hover {
+                .navigation-menu-tab {
+                    border-right-color: lighten($body-bg-color-dark-light, 10%) !important;
+                }
+            }
+        }
+    }
+
+    .custom-accordion {
+        .accordion-row {
+            .accordion-header {
+                .close {
+                    text-shadow: none;
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    #vmap_usa_en, #vmap_canada_en, #vmap_world_en {
+        background-color: inherit !important;
+    }
+
+    .table {
+        color: $default-dark-text-color;
+    }
+
+    .table .thead-light th {
+        background-color: #59607a;
+        color: inherit;
+    }
+
+    .table .thead-dark th, .table-dark, .table-dark th, .table-dark td {
+        background-color: $body-bg-color-dark
+    }
+
+    .mark, mark {
+        background-color: #59607a;
+        color: inherit;
+    }
+
+    .page-header {
+        color: rgba(white, .6);
+
+        .breadcrumb li a {
+            color: #b3b3b3;
+
+            &:hover {
+                color: $default-dark-text-color
+            }
+        }
+    }
+
+    .breadcrumb li.breadcrumb-item.active {
+        color: lighten($color-primary, 10%)
+    }
+
+    [data-backround-image]:after {
+        background-color: rgba(0, 0, 0, 0.60);
+    }
+
+    .layout-alert {
+        border-color: #59607a;
+    }
+
+    .alert {
+        color: rgba(white, .6);
+
+        hr {
+            border-color: rgba(white, .1);
+        }
+
+        .close {
+            &:hover, &:focus {
+                opacity: .2;
+                color: inherit;
+            }
+        }
+    }
+
+    .form-control {
+        background: $body-bg-color-dark-light;
+        border-color: #454c66 !important;
+        color: #c3c3c3;
+
+        &:focus {
+            border-color: $color-primary !important;
+        }
+    }
+
+    .timeline .timeline-item::before {
+        background: #59607a;
+    }
+
+    .dropdown-menu {
+        border-top: 1px solid #454c66 !important;
+        color: $default-dark-text-color;
+    }
+
+    .custom-select {
+        background-color: inherit;
+        border-color: rgba(white, .2);
+        color: inherit;
+    }
+
+    .custom-file-label {
+        background-color: inherit;
+        border-color: rgba(white, .2);
+        color: inherit;
+
+        &::after {
+            background-color: #454c66;
+            color: inherit;
+        }
+    }
+
+    .custom-range::-webkit-slider-runnable-track {
+        background-color: #454c66;
+    }
+
+    .custom-control-label::before {
+        background-color: inherit;
+        border-color: #59607a;
+    }
+
+    .custom-control-input:disabled ~ .custom-control-label::before {
+        background-color: #454c66;
+    }
+
+    .form-control-plaintext {
+        color: inherit;
+    }
+
+    .wizard > .content {
+        background-color: #454c66;
+    }
+
+    .wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active {
+        background-color: #454c66;
+    }
+
+    .wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
+        background: #4f5670 !important;
+        border-color: #4f5670 !important;
+
+        &:not(:disabled):not(.disabled):focus {
+            box-shadow: 0 0 0 0.2rem rgba($body-bg-color-dark, .5);
+            outline: none;
+            color: inherit;
+        }
+    }
+
+    .pricing-table {
+        border-color: #59607a;
+    }
+
+    hr {
+        border-color: #454c66;
+    }
+
+    .dropdown-menu {
+        border: none;
+        background-color: #3b425c;
+
+        .dropdown-item {
+            color: #c3c3c3;
+
+            &:hover, &:focus {
+                background: $body-bg-color-dark-light;
+            }
+        }
+    }
+
+
+    .bg-light {
+        background: #59607a !important;
+    }
+
+    .list-group-item {
+        background: none;
+        border-color: rgba(#9b9b9b, .1)
+    }
+
+    a.list-group-item {
+        color: $default-dark-text-color;
+
+        &:hover {
+            color: white;
+        }
+    }
+
+    .card {
+        background: $body-bg-color-dark-light;
+        border-color: lighten($body-bg-color-dark-light, 10%);
+
+        .card-header {
+            border-bottom-color: #2c2f42 !important;
+        }
+
+        .card-footer {
+            border-top-color: #2c2f42
+        }
+    }
+
+    .accordion .card, .accordion.custom-accordion {
+        border-color: rgba(240, 240, 240, 0.12)
+    }
+
+    .accordion.custom-accordion .accordion-row a.accordion-header {
+        border-bottom-color: rgba(240, 240, 240, 0.12);
+        border-top-color: rgba(240, 240, 240, 0.12);
+        color: inherit;
+        background-color: #454c66;
+    }
+
+    .morris-hover.morris-default-style {
+        background-color: #454c66;
+        border-color: #59607a;
+    }
+
+    .apexcharts-yaxis {
+        .apexcharts-yaxis-texts-g {
+            text {
+                fill: rgba(white, .2);
+            }
+        }
+    }
+
+    .apexcharts-grid {
+        .apexcharts-gridlines-horizontal, .apexcharts-gridlines-vertical {
+            line {
+                stroke: rgba(white, .1);
+            }
+        }
+    }
+
+    .apexcharts-toolbar {
+        & > div > svg {
+            fill: rgba(white, .2);
+        }
+    }
+
+    .apexcharts-menu {
+        border: none;
+        background-color: #454c66;
+
+        .apexcharts-menu-item {
+            &:hover {
+                background-color: #59607a;
+            }
+        }
+    }
+
+    .apexcharts-xaxis {
+        .apexcharts-xaxis-texts-g {
+            text {
+                fill: rgba(white, .2);
+            }
+        }
+    }
+
+    .apexcharts-tooltip.light .apexcharts-tooltip-title {
+        background-color: #59607a !important;
+        border-color: #3b425c !important;
+    }
+
+    .apexcharts-xaxistooltip {
+        border-color: #3b425c !important;
+        background-color: #454c66 !important;
+        color: rgba(white, .4);
+    }
+
+    .apexcharts-xaxistooltip-bottom:after, apexcharts-xaxistooltip-bottom:before {
+        border-bottom-color: #454c66 !important;
+    }
+
+    .apexcharts-tooltip {
+        border-color: #3b425c !important;
+        background-color: #454c66 !important;
+    }
+
+    .apexcharts-title-text, .apexcharts-subtitle-text {
+        fill: rgba(white, .4);
+    }
+
+    .apexcharts-legend-text {
+        color: rgba(white, .4) !important;
+    }
+
+    .apexcharts-yaxis-title, .apexcharts-xaxis-title {
+        text {
+            fill: rgba(white, .4);
+        }
+    }
+
+    .demo-code-preview {
+        background-color: $body-bg-color-dark-light;
+        border-color: #4f5670 !important;
+
+        * {
+            text-shadow: none;
+        }
+
+        code[class*="language-"], pre[class*="language-"] {
+            color: white;
+
+            .token.operator {
+                background: none;
+            }
+        }
+
+        .token.tag {
+            color: #e156a3;
+        }
+    }
+
+    .avatar {
+        border-color: $body-bg-color-dark-light;
+
+        &:before {
+            border-color: $body-bg-color-dark-light
+        }
+
+        .avatar-title {
+            background-color: #59607a;
+        }
+    }
+
+    .tourBg {
+        opacity: .7 !important;
+    }
+
+    .dd-handle, .dd3-content {
+        background-color: #454c66;
+        border-color: $body-bg-color-dark-light;
+        color: inherit;
+    }
+
+    .dd3-handle:before {
+        color: inherit;
+    }
+
+    .dd-item {
+        button {
+            color: inherit;
+        }
+    }
+
+    .list-group-item-action {
+        color: inherit;
+
+        &.active {
+            color: white;
+        }
+    }
+
+    .img-thumbnail {
+        border-color: #59607a;
+        background-color: $body-bg-color-dark-light;
+    }
+
+    .progress {
+        background-color: #59607a;
+    }
+
+    .jstree-default .jstree-clicked {
+        color: $body-bg-color-dark
+    }
+
+    .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
+        background-color: inherit;
+    }
+
+    .select2-container--default .select2-selection--multiple .select2-selection__choice {
+        background: #454c66;
+        color: #c3c3c3;
+    }
+
+    .select2.select2-container .select2-selection {
+        border-color: #59607a;
+    }
+
+    .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: $default-text-color;
+    }
+
+    .select2-container .select2-search--inline .select2-search__field {
+        color: inherit;
+    }
+
+    .select2-dropdown {
+        background-color: $body-bg-color-dark-light;
+        border-color: #59607a;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field {
+        background-color: $body-bg-color-dark-light;
+        border-color: #59607a;
+        color: inherit;
+    }
+
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        color: inherit;
+    }
+
+    .select2-container--default .select2-results__option[aria-selected=true] {
+        background-color: $body-bg-color-dark;
+        color: inherit;
+    }
+
+    .irs--round .irs-line {
+        background-color: #59607a;
+    }
+
+    .irs--round .irs-min, .irs--round .irs-max {
+        color: inherit;
+        background-color: #59607a;
+    }
+
+    .daterangepicker {
+        background-color: #3b425c;
+        border-color: #3b425c;
+
+        select {
+            background-color: inherit;
+            color: inherit;
+            border-color: #59607a;
+        }
+
+        &:after, &:before {
+            border-bottom-color: #3b425c;
+        }
+
+        .calendar-table {
+            background-color: #3b425c;
+            border-color: #3b425c;
+        }
+
+        td.in-range {
+            background-color: #59607a;
+            color: inherit;
+        }
+
+        td.end-date {
+            color: white;
+            background-color: $color-primary;
+        }
+
+        .drp-buttons {
+            border-top-color: #3b425c;
+
+            .btn.btn-default {
+                color: inherit;
+            }
+        }
+    }
+
+    .daterangepicker td.off, .daterangepicker td.off.end-date, .daterangepicker td.off.start-date {
+        background-color: inherit;
+        color: #636a84
+    }
+
+    .daterangepicker td.off.in-range {
+        background-color: #59607a;
+        color: #8b92ac
+    }
+
+    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
+        background-color: $color-primary;
+        color: white;
+
+        span {
+            border-color: white;
+        }
+    }
+
+    .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+        border-color: #6d748e;
+    }
+
+    .daterangepicker .ranges li:hover {
+        background-color: #454c66;
+    }
+
+    .popover.clockpicker-popover {
+        overflow: hidden;
+        border: 1px solid #59607a;
+
+        .popover-title {
+            background-color: $body-bg-color-dark-light;
+            color: inherit;
+        }
+
+        .popover-content {
+            background-color: $body-bg-color-dark-light;
+        }
+
+        .clockpicker-plate {
+            border-color: #59607a;
+            background-color: $body-bg-color-dark-light;
+
+            .clockpicker-tick {
+                color: inherit;
+            }
+
+            .clockpicker-canvas-bg {
+                fill: #59607a
+            }
+        }
+    }
+
+    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+        background-color: #59607a;
+        color: inherit;
+        border-color: #59607a
+    }
+
+    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
+        border-color: #3b425c;
+        background-color: #3b425c;
+    }
+
+    .nav-tabs {
+        border-bottom-color: #59607a
+    }
+
+    .figure-caption {
+        color: inherit;
+    }
+
+    .btn-link {
+        color: inherit;
+    }
+
+    .text-muted {
+        color: #9f9f9f !important;
+    }
+
+    .table td, .table th {
+        border-color: rgba(#9b9b9b, .2)
+    }
+
+    .border-bottom {
+        border-bottom-color: rgba(#9b9b9b, .2) !important;
+    }
+
+    .sidebar {
+        background: $body-bg-color-dark-light;
+    }
+
+    .nicescroll-cursors {
+        background-color: rgba(255, 255, 255, 0.15) !important;
+    }
+
+    .chat-block {
+        .chat-content {
+            .messages {
+                .message-item {
+                    &:not(.me) {
+                        &:before {
+                            border-right-color: #454c66
+                        }
+
+                        .message-item-content {
+
+                            background-color: #454c66;
+                        }
+                    }
+
+                    &.message-item-divider {
+                        &:before, &:after {
+                            background-color: #454c66;
+                        }
+                    }
+                }
+            }
+        }
+
+        .chat-sidebar {
+            background-color: lighten($body-bg-color-dark-light, 5%);
+
+            .chat-sidebar-content .list-group .list-group-item {
+                background-color: $body-bg-color-dark-light;
+
+                &.active {
+                    color: white;
+                }
+            }
+        }
+    }
+
+    .app-block {
+        .app-content {
+            .app-content-body {
+                .app-lists {
+                    ul.list-group {
+                        li {
+                            &:hover {
+                                background-color: #3b425c;
+                            }
+
+                            &.list-group-item.active {
+                                background-color: #454c66;
+
+                                .avatar {
+                                    border-color: #454c66;
+                                }
+
+                                .app-list-title {
+                                    color: $default-dark-text-color
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .app-detail {
+                    .card-header {
+                        border-bottom-color: #454c66 !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .app-file-list {
+        border-color: #454c66;
+
+        .app-file-icon {
+            background-color: #454c66;
+            border-bottom-color: #454c66;
+        }
+    }
+
+    .ql-container.ql-snow {
+        border-color: #454c66
+    }
+
+    .ql-editor.ql-blank::before {
+        color: $default-dark-text-color
+    }
+
+    .ql-snow .ql-stroke, .ql-fill {
+        stroke: $default-dark-text-color
+    }
+
+    .text-black-50 {
+        color: rgba(247, 247, 247, 0.43) !important;
+    }
+
+    .table-email-list a {
+        color: inherit;
+    }
+
+    .table-hover tbody tr:hover {
+        color: inherit;
+    }
+
+    .input-group-text {
+        background: #454c66;
+        color: inherit;
+    }
+
+    .dropdown-divider {
+        border-top-color: rgba(240, 240, 240, 0.12)
+    }
+
+    .btn.btn-light, .fc .fc-state-default {
+        background: #454c66;
+        border-color: transparent;
+        color: inherit;
+
+        &:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):focus, &:not(:disabled):not(.disabled):active {
+            background: #4f5670;
+            border-color: #4f5670;
+            color: inherit;
+        }
+
+        &:not(:disabled):not(.disabled):focus {
+            box-shadow: 0 0 0 0.2rem rgba($body-bg-color-dark, .5);
+            outline: none;
+            color: inherit;
+        }
+    }
+
+    .btn.btn-outline-light {
+        border: $dark-border-style;
+        color: $default-dark-text-color;
+
+        &:hover {
+            background: none !important;
+            color: #d6d6d6 !important;
+            border: $dark-border-style !important;
+        }
+    }
+
+    .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
+        border-color: rgba(240, 240, 240, 0.12)
+    }
+
+    .fc-unthemed .fc-list-item:hover td {
+        background: #454c66;
+    }
+
+    .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-popover .fc-header {
+        background: #454c66;
+    }
+
+    .fc-unthemed td.fc-today, .fc-unthemed .fc-list-empty {
+        background: #454c66;
+    }
+
+    #external-events .fc-event {
+        color: inherit;
+    }
+
+    .bootstrap-tagsinput {
+        background-color: inherit;
+        border-color: rgba(white, .2);
+
+        .tag {
+            background: #454c66;
+            color: #c3c3c3;
+        }
+
+        input {
+            color: #c3c3c3;
+        }
+    }
+
+    .dropzone {
+        background-color: $body-bg-color-dark-light;
+        border-color: #454c66
+    }
+
+    .modal-content {
+        background-color: $body-bg-color-dark-light;
+
+        .modal-header {
+            border-bottom-color: rgba(240, 240, 240, 0.12);
+            background-color: #454c66 !important;
+
+            .close {
+                text-shadow: none;
+                opacity: 1;
+                color: inherit;
+                background-color: $body-bg-color-dark-light !important;
+            }
+        }
+
+        .modal-footer {
+            border-top-color: rgba(240, 240, 240, 0.12);
+        }
+    }
+
+    .swal-modal {
+        background-color: $body-bg-color-dark-light;
+
+        .swal-icon--success__hide-corners {
+            background-color: inherit;
+        }
+
+        .swal-icon--success:before, .swal-icon--success:after {
+            background-color: inherit;
+        }
+
+        .swal-title, .swal-text {
+            color: inherit;
+        }
+    }
+
+    .popover {
+        background-color: #454c66;
+
+        .popover-header {
+            background-color: #59607a;
+            border-color: transparent;
+        }
+
+        .popover-body {
+            color: inherit;
+        }
+
+        .popover-navigation {
+            border-top-color: rgba(240, 240, 240, 0.12);
+        }
+    }
+
+    .bs-popover-auto[x-placement^=top] > .arrow::after, .bs-popover-top > .arrow::after {
+        border-top-color: #454c66;
+    }
+
+    .bs-popover-auto[x-placement^=right] > .arrow::after, .bs-popover-right > .arrow::after {
+        border-right-color: #454c66;
+    }
+
+    .bs-popover-auto[x-placement^=bottom] > .arrow::after, .bs-popover-bottom > .arrow::after {
+        border-bottom-color: #454c66;
+    }
+
+    .bs-popover-auto[x-placement^=left] > .arrow::after, .bs-popover-left > .arrow::after {
+        border-left-color: #454c66;
+    }
+
+    ul.links a {
+        color: inherit;
+    }
+
+    .page-link {
+        background-color: inherit;
+        color: inherit;
+        border-color: rgba(240, 240, 240, 0.12)
+    }
+
+    .page-item.disabled .page-link {
+        background-color: #272e48;
+        border-color: rgba(240, 240, 240, 0.12);
+        color: inherit;
+    }
+
+    .nav {
+        a.nav-link {
+            &:not(.active) {
+                color: $default-dark-text-color;
+
+                &:hover, &:active {
+                    background-color: #3b425c;
+                }
+            }
+        }
+    }
+
+    &.form-membership .form-wrapper {
+        background-color: $body-bg-color-dark-light;
+
+        #logo {
+            img {
+                display: block;
+
+                &:not(.logo-light) {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .content-footer {
+        background-color: $body-bg-color-dark-light;
+    }
+
+    .irs--round .irs-handle {
+        background-color: $body-bg-color-dark-light;
+    }
+
+    .table tr.tr-selected {
+        background-color: lighten($body-bg-color-dark-light, 5%);
+    }
+}
+
+body.dark.hidden-navigation {
+    .navigation {
+        background-color: $body-bg-color-dark-light
+    }
+}
+
+body.dark.small-navigation {
+    .navigation-menu-body ul li {
+        &.open {
+            & > a {
+                background-color: #454c66;
+            }
+        }
+
+        ul {
+            background-color: $body-bg-color-dark-light !important;
+            border-left-color: #454c66 !important;
+        }
+
+        &.navigation-divider {
+            &:after {
+                background-color: #454c66 !important;
+            }
+        }
+    }
+}
+
+@media (min-width: 1200px) {
+    body.dark.horizontal-navigation {
+        .horizontal-navigation {
+            background-color: $body-bg-color-dark-light;
+            border-top-color: lighten($body-bg-color-dark-light, 10%);
+
+            ul {
+                & > li {
+                    & > a {
+                        &.active {
+                            background: rgba(black, .25);
+                        }
+
+                        &:hover {
+                            background: rgba(black, .1);
+                        }
+
+                        & + ul {
+                            border-top-color: lighten($body-bg-color-dark-light, 10%)
+                        }
+                    }
+                }
+
+                li {
+                    ul {
+                        background-color: #3b425c;
+
+                        &:before {
+                            border-bottom-color: #3b425c
+                        }
+
+                        li {
+                            a {
+                                color: $default-dark-text-color;
+
+                                &:hover {
+                                    background: none;
+                                    color: lighten($color-primary, 10%)
+                                }
+
+                                &.active {
+                                    background: none;
+                                    color: lighten($color-primary, 10%)
+                                }
+                            }
+
+                            ul {
+                                border-left-color: lighten($body-bg-color-dark-light, 10%)
+                            }
+
+                            &.open {
+                                & > a {
+                                    background: none;
+                                    color: lighten($color-primary, 10%)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    body.dark.navigation-toggle-one.navigation-show .navigation .navigation-menu-body {
+        background-color: $body-bg-color-dark-light;
+    }
+}
+
+@media (max-width: 1200px) {
+    body.dark {
+        .chat-block .chat-content.mobile-open {
+            background-color: $body-bg-color-dark-light;
+        }
+    }
+    body.dark.horizontal-navigation {
+        .horizontal-navigation {
+            background-color: #3b425c;
+
+            ul {
+                li {
+                    a {
+                        &:hover {
+                            color: lighten($color-primary, 10%)
+                        }
+
+                        &.active {
+                            color: lighten($color-primary, 10%)
+                        }
+                    }
+
+                    &.open {
+                        & > a {
+                            color: lighten($color-primary, 10%)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
Index: resources/assets/sass/layouts.scss
===================================================================
--- resources/assets/sass/layouts.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/layouts.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,750 @@
+@media (min-width: 1200px) {
+    body {
+
+        &.boxed-layout {
+            background-color: white;
+
+            .layout-wrapper {
+                background-color: #f8fafb;
+                box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .1);
+                margin: 0 120px;
+
+                .header {
+                    margin: 0 120px;
+                }
+
+                .navigation {
+                    left: 120px
+                }
+            }
+
+            &.right-navigation {
+                .navigation {
+                    left: auto;
+                    right: 120px
+                }
+            }
+
+            &.horizontal-navigation {
+                .horizontal-navigation {
+                    left: 120px;
+                    right: 120px;
+                }
+            }
+        }
+
+        &.small-navigation:not(.hidden-navigation):not(.horizontal-navigation) {
+
+            .navigation {
+                width: $navigation-tab-width;
+                transition: width .3s;
+
+                .navigation-menu-tab {
+                    border-right-color: transparent;
+                }
+
+                .navigation-menu-body {
+                    display: none;
+
+                    & > ul > li > a {
+                        padding: 12px 0;
+                    }
+
+                    ul {
+
+                        li {
+                            position: relative;
+
+                            &:hover > a {
+
+                                .nav-link-icon {
+                                    stroke: $color-primary;
+                                }
+                            }
+
+                            &.open > a {
+                                border-radius: 4px;
+                            }
+
+                            a {
+                                span:not(.badge):not(.avatar-title) {
+                                    display: none;
+                                }
+
+                                .badge {
+                                    position: absolute;
+                                    right: 20px;
+                                    top: 12px;
+                                }
+
+                                .nav-link-icon {
+                                    margin: 0 !important;
+                                }
+                            }
+
+                            &.open {
+                                & > a {
+                                    & + ul {
+                                        li.open > a {
+                                            background: none;
+                                            color: $color-primary
+                                        }
+                                    }
+                                }
+
+                                & > ul {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+
+                    & > ul {
+                        & > li {
+                            &:not(.navigation-divider) {
+                                padding: 0 15px;
+                            }
+
+                            & > a {
+                                display: block;
+
+                                .sub-menu-arrow {
+                                    display: none;
+                                }
+
+                                & + ul {
+                                    li {
+                                        a {
+                                            padding-left: 53px;
+
+                                            & + ul {
+                                                li {
+                                                    a {
+                                                        padding-left: 65px;
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                                &.active {
+                                    border-radius: 5px;
+                                    background-color: $color-primary;
+                                    position: static;
+
+                                    .nav-link-icon {
+                                        stroke: white;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                }
+
+                &:hover {
+                    width: $navigation-width;
+
+                    .navigation-menu-tab {
+                        border-right-color: $border-style-color;
+                    }
+
+                    .navigation-menu-body {
+                        display: flex;
+                        height: calc(100vh - #{$header-height});
+                    }
+
+                    ul {
+
+                        li {
+                            a {
+                                display: flex;
+
+                                & > span, .sub-menu-arrow {
+                                    display: inherit !important;
+                                }
+
+                                .nav-link-icon {
+                                    margin-right: .8rem !important;
+                                }
+                            }
+
+                            &.open {
+                                & > ul {
+                                    display: block;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .layout-wrapper .content-wrapper .content-body .content {
+                padding-left: $navigation-tab-width + 30px;
+            }
+
+            .content-footer {
+                margin-left: $navigation-tab-width;
+            }
+        }
+
+        &.hidden-navigation:not(.small-navigation) {
+
+            .header {
+                .navigation-toggler {
+                    display: block;
+                }
+            }
+
+            .navigation {
+                z-index: 1000;
+                left: -80%;
+                top: 0;
+                bottom: 0;
+                opacity: 0;
+                transition: left .3s;
+                position: fixed !important;
+
+                &.open {
+                    left: 0;
+                    opacity: 1;
+                }
+            }
+
+            &.right-navigation {
+                .navigation {
+                    left: auto;
+                    right: -80%;
+                    transition: right .3s;
+
+                    &.open {
+                        right: 0;
+                        opacity: 1;
+                    }
+                }
+            }
+
+            .layout-wrapper .content-wrapper .content-body .content {
+                padding-left: 30px;
+            }
+
+            .content-footer {
+                margin-left: 0;
+            }
+        }
+
+        &.right-navigation {
+            .navigation {
+                left: auto;
+                right: 0;
+                flex-direction: row-reverse;
+
+                .navigation-menu-tab {
+                    border-right: none;
+                    border-left: 1px solid $border-style-color;
+                }
+            }
+
+            .layout-wrapper .content-wrapper .content-body .content {
+                padding-left: 30px;
+                padding-right: $navigation-width + 30px;
+            }
+
+            .content-footer {
+                margin-left: 0;
+                margin-right: $navigation-width;
+            }
+
+            &.small-navigation {
+                .layout-wrapper .content-wrapper .content-body .content {
+                    padding-left: 30px !important;
+                    padding-right: $navigation-tab-width + 30px;
+                }
+
+                .content-footer {
+                    margin-left: 0 !important;
+                    margin-right: $navigation-tab-width;
+                }
+            }
+
+            &.hidden-navigation {
+                .layout-wrapper .content-wrapper .content-body .content {
+                    padding-left: 30px !important;
+                    padding-right: 30px;
+                }
+            }
+        }
+
+        &.horizontal-navigation {
+
+            .header {
+                box-shadow: none;
+            }
+
+            .horizontal-navigation {
+                border-top: 1px solid $border-style-color;
+                box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.40);
+                position: fixed;
+                top: $header-height;
+                background-color: white;
+                height: $header-height - 20px;
+                right: 0;
+                left: 0;
+                padding: 0 30px;
+                display: flex;
+                align-items: center;
+                z-index: 997;
+
+                & > ul {
+                    height: 100%;
+
+                    & > li {
+                        display: flex;
+                        align-items: center;
+                        margin-right: .5rem;
+
+                        & > a {
+                            border-radius: 100px;
+                            text-transform: uppercase;
+                            letter-spacing: 1px;
+                            font-size: 12px;
+                            padding: 10px 15px !important;
+                            display: flex;
+                            align-items: center;
+
+                            .sub-menu-arrow {
+                                display: none;
+                            }
+
+                            .badge {
+                                margin-left: .5rem;
+                            }
+
+                            & + ul {
+                                border-top: 1px solid $border-style-color;
+                            }
+                        }
+
+                        &:hover {
+                            & > a {
+                                color: $color-primary !important;
+                            }
+                        }
+                    }
+                }
+
+                ul {
+                    display: flex;
+
+                    li {
+                        position: relative;
+
+                        a {
+                            padding: 10px 25px;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .nav-icon {
+                                margin-right: .5rem;
+                            }
+                        }
+
+                        &.open {
+                            & > a {
+                                color: $color-primary
+                            }
+                        }
+
+                        &:hover {
+                            & > ul {
+                                display: block;
+                            }
+                        }
+
+                        ul {
+                            display: none;
+                            position: absolute;
+                            top: $header-height - 20px - 1px;
+                            width: 220px;
+                            background-color: white;
+                            padding: 10px 0;
+                            border-bottom-left-radius: .25rem;
+                            border-bottom-right-radius: .25rem;
+                            box-shadow: 0px 5px 9px -5px rgba(0, 0, 0, 0.30);
+
+                            li {
+                                position: relative;
+
+                                &:hover > a {
+                                    color: $color-primary
+                                }
+
+                                a {
+                                    color: black;
+
+                                    &.active {
+                                        color: $color-primary
+                                    }
+                                }
+
+                                &.open {
+                                    & > a {
+                                        color: $color-primary;
+                                    }
+                                }
+
+                                ul {
+                                    left: 220px;
+                                    top: -12px;
+                                    border-left: 1px solid darken(white, 5%);
+                                    box-shadow: 3px 0px 10px -5px rgba(0, 0, 0, 0.3);
+
+                                    &:before {
+                                        display: none;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .layout-wrapper .content-wrapper .content-body .content {
+                padding-left: 30px;
+                padding-top: $header-height + ($header-height - 20px) + 30px;
+            }
+
+            .content-footer {
+                margin-left: 0;
+            }
+
+        }
+
+        &.sticky-header {
+            .header {
+                position: sticky !important;
+                top: 0;
+            }
+        }
+    }
+
+}
+
+@media (max-width: 1200px) {
+    body {
+        &.horizontal-navigation {
+            .horizontal-navigation {
+                position: fixed;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                height: auto;
+                width: $navigation-width;
+                background-color: white;
+                z-index: 1000;
+                overflow: auto;
+                padding: 15px 0;
+                display: none;
+
+                ul {
+
+                    li {
+                        a {
+                            display: flex;
+                            align-items: center;
+                            padding: 15px 30px;
+
+                            .nav-icon {
+                                margin-right: .5rem;
+                            }
+
+                            &.active {
+                                color: $color-primary;
+                            }
+
+                            .badge, .sub-menu-arrow {
+                                margin-left: auto;
+                            }
+
+                            .sub-menu-arrow {
+                                transform: rotate(90deg);
+                            }
+                        }
+
+                        ul {
+                            display: none;
+
+                            li {
+                                a {
+                                    padding-left: 60px;
+                                }
+
+                                ul {
+                                    li {
+                                        a {
+                                            padding-left: 80px;
+                                        }
+
+                                        ul {
+                                            li {
+                                                a {
+                                                    padding-left: 100px;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        &.open {
+                            & > a {
+                                color: $color-primary;
+                            }
+
+                            & > ul {
+                                display: block !important;
+                            }
+                        }
+                    }
+                }
+
+                &.open {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+body.semi-dark:not(.dark) {
+
+    .nicescroll-cursors {
+        background-color: rgba(255, 255, 255, 0.30) !important;
+    }
+
+    .navigation {
+        background-color: $body-bg-color-dark-light;
+        color: $default-dark-text-color;
+
+        .navigation-menu-tab {
+            border-right-color: lighten($body-bg-color-dark-light, 10%);
+
+            ul {
+                li {
+                    a {
+                        color: $default-dark-text-color;
+
+                        &.active {
+                            color: white;
+                        }
+
+                        &:not(.active):hover, &:not(.active):focus {
+                            color: $color-primary;
+                        }
+                    }
+                }
+            }
+        }
+
+        .navigation-menu-body {
+
+            .avatar {
+                border-color: $body-bg-color-dark-light;
+            }
+
+            .list-group-item {
+                background: none;
+                border-color: #454c66;
+            }
+
+            #navigation-logo {
+                border-color: #454c66;
+
+                img {
+                    display: block;
+
+                    &:not(.logo-light) {
+                        display: none;
+                    }
+                }
+            }
+
+            ul {
+                li {
+                    &.navigation-divider {
+                        color: #dbdbdb
+                    }
+
+                    a {
+                        color: $default-dark-text-color;
+
+                        .nav-link-icon {
+                            stroke: rgba($default-dark-text-color, .5);
+                        }
+
+                        &.active {
+                            color: white;
+
+                            &:after {
+                                background-color: $color-primary;
+                            }
+                        }
+
+                        &:hover, &:focus {
+                            background: none;
+                            color: white;
+                        }
+
+                        & + ul {
+                            li {
+                                a.active {
+                                    color: white
+                                }
+                            }
+                        }
+                    }
+
+                    &.open {
+                        & > a {
+                            color: white;
+                        }
+                    }
+
+                    .dropdown-divider {
+                        color: $color-primary
+                    }
+
+                    ul {
+                        background-color: $body-bg-color-dark-light !important;
+                        border-left-color: #454c66 !important;
+
+                        ul {
+                            border-left-color: #454c66 !important;
+                        }
+                    }
+
+                    &.navigation-divider {
+                        &:after {
+                            background-color: #454c66 !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        .avatar:before {
+            border-color: #2c2f42;
+        }
+    }
+
+    .horizontal-navigation {
+        background-color: $body-bg-color-dark-light;
+
+        & > ul {
+            & > li {
+                & > a {
+                    & + ul {
+                        border-top: 1px solid lighten($body-bg-color-dark-light, 10%);
+                        ul {
+                            border-left: 1px solid lighten($body-bg-color-dark-light, 10%);
+                        }
+                    }
+                }
+                &.open > a {
+                    color: lighten($color-primary, 5%);
+                }
+            }
+        }
+
+        ul {
+            li {
+                a {
+                    color: $default-dark-text-color;
+
+                    &.active {
+                        color: lighten($color-primary, 5%);
+                    }
+
+                    &:not(.active):hover, &:not(.active):focus {
+                        color: lighten($color-primary, 5%);
+                    }
+                }
+                ul {
+                    background-color: $body-bg-color-dark-light;
+                }
+            }
+        }
+
+    }
+
+    &.right-navigation {
+        .navigation {
+            .navigation-menu-tab {
+                border-left-color: lighten($body-bg-color-dark-light, 10%);
+            }
+        }
+    }
+
+    &.small-navigation {
+        .navigation:hover {
+            .navigation-menu-tab {
+                border-right-color: lighten($body-bg-color-dark-light, 10%);
+            }
+        }
+
+        &.right-navigation {
+            .navigation:hover {
+                .navigation-menu-tab {
+                    border-left-color: lighten($body-bg-color-dark-light, 10%);
+                }
+            }
+        }
+    }
+}
+
+body.header-dark:not(.dark) {
+
+    .header {
+        background-color: $body-bg-color-dark-light;
+        color: $default-dark-text-color;
+        border-bottom-color: lighten($body-bg-color-dark-light, 10%);
+
+        .header-logo {
+            a {
+                img {
+                    display: block;
+
+                    &:not(.logo-light) {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .navigation-toggler {
+            a {
+                color: $default-dark-text-color;
+
+                &:hover {
+                    color: white;
+                }
+            }
+        }
+
+        a.nav-link {
+            color: $default-dark-text-color;
+
+            &:hover {
+                color: white;
+            }
+        }
+
+        .dropdown-menu {
+            border-top: none !important;
+        }
+    }
+
+}
Index: resources/assets/sass/other.scss
===================================================================
--- resources/assets/sass/other.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/other.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,453 @@
+*:focus {
+    outline: none;
+}
+
+.sticky {
+    position: sticky !important;
+    top: 0;
+}
+
+.lead {
+    line-height: 2.2rem;
+}
+
+.layout-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    .content-wrapper {
+        flex: 1;
+        display: flex;
+
+        .content-body {
+            width: 0;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            .content {
+                flex: 1;
+                padding: 30px;
+                padding-top: $header-height + 30;
+                padding-left: $navigation-width + 30;
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+
+svg.feather {
+    width: 20px;
+    height: 20px;
+}
+
+.demo-code-preview {
+    border: $border-style;
+    padding: 20px 10px;
+    margin-top: 2rem;
+    position: relative;
+    background-color: white;
+    border-radius: 8px;
+
+    & + * {
+        margin-top: 1.5rem;
+    }
+
+    &:before {
+        content: attr(data-label);
+        display: block;
+        position: absolute;
+        top: -9px;
+        left: 20px;
+        @extend .text-muted;
+        letter-spacing: 1px;
+        background-color: inherit;
+        font-size: 11px;
+        padding: 0 5px;
+    }
+
+    pre {
+        overflow-x: hidden;
+        background: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        max-height: 300px;
+    }
+
+    &:hover {
+        pre {
+            overflow-x: auto;
+        }
+    }
+}
+
+code[class*="language-"], pre[class*="language-"] {
+    font-size: .93em;
+    margin: 0
+}
+
+.text-divider {
+    display: flex;
+    align-items: center;
+
+    &:after {
+        content: '';
+        display: block;
+        height: 1px;
+        background-color: #f0f0f0;
+        flex: 1;
+    }
+
+    span {
+        margin-right: 1rem;
+    }
+}
+
+.row-xs {
+    margin-left: -.5rem;
+    margin-right: -.5rem;
+
+    & > div {
+        padding-left: .5rem;
+        padding-right: .5rem;
+    }
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 999;
+    opacity: 0;
+    background: rgba(0, 0, 0, 0.30);
+    transition: opacity .5s;
+
+    &.show {
+        opacity: 1;
+    }
+}
+
+.tooltip {
+    pointer-events: none;
+    font-family: inherit;
+    font-size: .835rem !important;
+
+    .arrow {
+        display: none;
+    }
+
+    .tooltip-inner {
+        background: rgba(0, 0, 0, 0.70);
+    }
+}
+
+.file-manager-items {
+    display: flex;
+    flex-wrap: wrap;
+
+    .file-manager-item {
+        margin-right: 20px;
+        margin-bottom: 20px;
+
+        span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 135px;
+            height: 115px;
+            font-size: 8.5em;
+            border: 1px solid #e1e1e1;
+            border-radius: 5px;
+            background-size: cover !important;
+            background-position: center !important;
+        }
+
+        &.folder span {
+            color: #cea65b
+        }
+
+        &.image span {
+            &:before {
+                display: none;
+            }
+        }
+    }
+}
+
+.small, small {
+    font-size: 12px;
+}
+
+.list-group {
+    .list-group-item {
+        padding: .75rem 1.5rem;
+
+        &.active {
+            z-index: auto;
+            background: $color-primary;
+        }
+    }
+}
+
+.bring-forward {
+    position: relative;
+    z-index: 1;
+}
+
+.table-email-list {
+    table.table {
+        .dropdown {
+            [data-toggle="dropdown"] {
+                &:after {
+                    display: none;
+                }
+            }
+        }
+
+        .email-subject {
+            max-width: 80%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            a {
+                display: inline-block;
+            }
+        }
+
+        td, .table th {
+            padding: .80rem;
+        }
+    }
+
+    a {
+        color: $default-text-color;
+
+        &:hover, &:focus {
+            color: $color-primary
+        }
+    }
+}
+
+.read-mail-body {
+    img {
+        max-width: 50%;
+    }
+}
+
+.bootstrap-tagsinput {
+    box-shadow: none;
+    width: 100%;
+    border: 1px solid #ced4da;
+    min-height: calc(2.25rem + 2px);
+
+    &.focus {
+        border-color: #3383de;
+    }
+
+    .tag {
+        display: inline-flex;
+        color: black;
+        border-radius: 3px;
+        font-size: 13px;
+        padding: 0 8px;
+        margin: 2px 1px;
+        justify-content: space-between;
+        align-items: center;
+        background: #e1e1e1;
+    }
+}
+
+.list-group {
+    .list-group-item {
+        &.active {
+            background: $color-primary;
+            border-color: transparent;
+        }
+    }
+}
+
+.list-group-flush .list-group-item:first-child {
+    border-top: 0;
+}
+
+.badge {
+    font-weight: 500;
+}
+
+.nav-pills .nav-link.active {
+    background: $color-primary;
+}
+
+.nav-tabs .nav-link.active {
+    color: $color-primary
+}
+
+.text-muted {
+    color: #a7abc3 !important;
+}
+
+.min-width-0 {
+    min-width: 0
+}
+
+.list-group-item {
+    border-color: $border-style-color
+}
+
+.jqstooltip {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.hide-show-toggler {
+    .hide-show-toggler-item {
+        display: none;
+    }
+
+    &:hover, &:focus {
+        .hide-show-toggler-item {
+            display: block;
+        }
+    }
+}
+
+.tooltip {
+    font-size: $default-font-size;
+}
+
+.jqvmap-zoomin, .jqvmap-zoomout {
+    box-sizing: initial;
+}
+
+.apexcharts-canvas {
+    margin: auto;
+}
+
+[data-backround-image] {
+    position: relative;
+    background-size: cover !important;
+    background-position: center !important;
+
+    &:after {
+        content: '';
+        display: block;
+        background: rgba(white, .6);
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+    }
+
+    & > * {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+.dropdown-menu {
+    [data-backround-image]:after {
+        border-radius: 0;
+    }
+}
+
+.jqvmap-region {
+    fill: $color-secondary-bright;
+
+    &:hover {
+
+        fill: $color-secondary;
+    }
+}
+
+.a-0 {
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+}
+
+.font-weight-800 {
+    font-weight: 800;
+}
+
+.circle canvas {
+    vertical-align: top;
+}
+
+.todo-item {
+    user-select: none;
+    margin-bottom: 10px;
+
+    input[type="checkbox"]:checked {
+        & + label {
+            text-decoration: line-through;
+            color: #00961f
+        }
+    }
+}
+
+.border-radius-1 {
+    border-radius: 5px;
+}
+
+.rounded {
+    border-radius: .50rem !important;
+}
+
+.nav-tabs .nav-link {
+    border-top-left-radius: .50rem;
+    border-top-right-radius: .50rem;
+}
+
+.nav-pills .nav-link {
+    border-radius: .50rem;
+}
+
+.apexcharts-legend.position-top.center {
+    justify-content: flex-end !important;
+}
+
+.image-hover {
+    position: relative;
+
+    .image-hover-body {
+        display: flex;
+        align-items: flex-end;
+        opacity: 0;
+        visibility: hidden;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(black, .5);
+        transition: all .3s;
+        color: white;
+        padding: 20px 30px;
+    }
+
+    &:hover {
+        .image-hover-body {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+}
+
+.nav-analiytics-style {
+
+    .nav-link {
+        // border-radius: 0 !important;
+        padding: .5rem 1.5rem;
+    }
+}
+
+.daterangepicker {
+    font-family: 'Inter';
+}
Index: resources/assets/sass/responsive.scss
===================================================================
--- resources/assets/sass/responsive.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/responsive.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,482 @@
+@media (max-width: 1200px) {
+    .header .header-toggler {
+        display: block;
+    }
+
+    .chat-app .layout-wrapper .content-wrapper .content-body .content {
+        padding-left: 0 !important;
+    }
+
+    .chat-block {
+        position: relative;
+
+        .chat-content {
+            display: none;
+
+            .chat-header {
+                padding: .5rem 1.5rem;
+            }
+
+            .mobile-chat-close-btn {
+                display: block;
+            }
+
+            &.chat-mobile-open {
+                display: flex;
+                background-color: white;
+                position: absolute;
+                right: 0;
+                left: 0;
+                max-width: 100%;
+                z-index: 2;
+                bottom: 0;
+            }
+        }
+
+        .chat-sidebar {
+            flex: 1;
+            border-right: none;
+            max-width: 100% !important;
+        }
+    }
+
+    .header {
+        margin: 0;
+
+        .header-left {
+            .navigation-toggler {
+                display: block !important;
+            }
+        }
+
+        div:nth-child(2) {
+
+            ul.navbar-nav:first-child {
+                display: none;
+                background: darken(white, 10%);
+                position: fixed;
+                left: 0;
+                right: 0;
+                top: $header-height;
+
+                li {
+                    a {
+                        color: black;
+                    }
+                }
+
+                &.open {
+                    display: flex;
+                    flex-wrap: wrap;
+                }
+            }
+        }
+
+        .header-search .input-group {
+            background-color: white;
+
+            .btn {
+                color: black
+            }
+
+            input.form-control {
+                &:focus {
+                    color: black;
+                }
+
+                &::placeholder {
+                    color: #9b9b9b
+                }
+            }
+        }
+
+        .navigation-toggler, .navbar-toggler {
+            a {
+                background: none !important;
+            }
+        }
+
+        .navigation-toggler {
+            display: none !important;
+
+            &.mobile-toggler {
+                display: block !important;
+            }
+        }
+
+        .navigation-toggler a:hover {
+            background: none !important;
+        }
+
+        .dropdown {
+            position: static;
+        }
+
+        .dropdown-menu {
+            right: 1rem !important;
+            top: auto !important;
+            left: 1rem !important;
+            margin-top: 10px;
+            width: auto !important;
+            transform: inherit !important;
+        }
+    }
+
+    .layout-wrapper .content-wrapper .content-body .content {
+        padding-left: 30px;
+    }
+
+    .content-footer {
+        margin-left: 0 !important;
+    }
+
+    .navigation {
+        background-color: white;
+        z-index: 1000;
+        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .15);
+        left: -80%;
+        top: 0;
+        bottom: 0;
+        opacity: 0;
+        transition: left .2s;
+        position: fixed !important;
+
+        &.open {
+            left: 0;
+            opacity: 1;
+        }
+
+        header.navigation-header {
+            padding-top: 20px;
+        }
+
+        .navigation-icon-menu {
+            margin: 0;
+            border-radius: 0;
+        }
+
+        .navigation-menu-body {
+            padding: 15px 0;
+        }
+    }
+
+    .page-header {
+        padding: 0;
+        margin-top: 0;
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    .user-page {
+        padding: 20px;
+        height: auto;
+
+        .card {
+            width: auto;
+
+            .card-body {
+                padding: 30px;
+            }
+        }
+    }
+}
+
+@media (max-width: 992px) {
+
+    .app-block {
+        position: relative;
+
+        .app-sidebar-menu-button {
+            display: inline-flex;
+            margin-right: 1rem;
+        }
+
+        .app-sidebar {
+            display: none;
+            position: absolute;
+            left: 0;
+            z-index: 9;
+            flex: 0 0 35%;
+            max-width: 35%;
+            bottom: 0;
+
+            .app-sidebar-menu {
+                overflow: auto;
+            }
+
+            &.show {
+                display: block;
+            }
+
+            & > .card {
+                box-shadow: 3px 0px 15px -10px black;
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        .app-content {
+            flex: 0 0 100%;
+            max-width: 100%;
+
+            .app-action {
+                flex-direction: column-reverse;
+
+                .action-right {
+                    margin-left: 0;
+                    margin-bottom: 1rem;
+                }
+            }
+
+            .app-detail .card-header {
+                flex-direction: column;
+                align-items: stretch !important;
+
+                .app-detail-action-right {
+                    margin-left: 0 !important;
+                    margin-top: 1rem;
+                }
+            }
+        }
+    }
+
+    .card {
+        margin-bottom: 1rem;
+
+        .card-body {
+            padding: 1.2rem;
+        }
+    }
+
+}
+
+@media (max-width: 768px) {
+
+    body.form-membership .form-wrapper {
+        width: 90%;
+        margin: 30px auto;
+    }
+
+    body.horizontal-navigation {
+        .horizontal-navigation.open {
+            width: 80%;
+        }
+    }
+
+    .app-block .app-content .app-action .action-right {
+        form {
+            margin-right: 0 !important;
+        }
+
+        .app-pager {
+            display: none !important;
+        }
+    }
+
+    .app-block {
+        .app-sidebar {
+            flex: 0 0 70%;
+            max-width: 70%;
+        }
+    }
+
+    .chat-block {
+        .chat-sidebar {
+            &.border-right {
+                border-right: none !important;
+            }
+        }
+    }
+
+    .toast-top-right {
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .toast-top-left {
+        top: 1rem;
+        left: 1rem;
+    }
+
+    .header {
+        .header-left {
+            width: auto;
+        }
+
+        .page-title {
+            display: none;
+        }
+    }
+
+    footer {
+        padding: 15px 20px;
+
+        .nav {
+            display: none;
+        }
+    }
+
+    .table-responsive-stack tr {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        border-bottom: 3px solid #ccc;
+        display: block;
+    }
+    /*  IE9 FIX   */
+    .table-responsive-stack td {
+        float: left \9
+    ;
+        width: 100%;
+    }
+
+    .sidebar {
+        & > ul.nav {
+            display: flex;
+
+            li.nav-item {
+                border: none;
+            }
+        }
+    }
+
+    .user-page {
+        padding: 20px;
+        height: auto;
+
+        .card {
+            width: 100%;
+
+            .card-body {
+                padding: 30px;
+            }
+        }
+    }
+
+    .fc {
+        .fc-toolbar {
+            &.fc-header-toolbar {
+                & > div {
+                    float: none !important;
+
+                    .fc-button-group {
+                        float: none !important;
+                    }
+
+                    &.fc-left {
+                        display: flex;
+                        justify-content: center;
+                        margin-bottom: 15px;
+                    }
+
+                    &.fc-right {
+                        margin-bottom: 5px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 414px) {
+
+    .nav {
+        display: block;
+        border: none;
+
+        li.nav-item {
+            margin-bottom: 0;
+
+            &:last-child {
+                border: none;
+            }
+
+            a.nav-link {
+                border: none;
+            }
+        }
+    }
+
+    body:not(.semi-dark):not(.dark) {
+        .nav {
+            li.nav-item {
+                border-bottom: 1px solid #ebebeb;
+            }
+        }
+    }
+
+    .navigation header.navigation-header .nav {
+        display: flex;
+    }
+
+    body.dark {
+        .nav {
+            li.nav-item {
+                border-bottom-color: #6d748e;
+            }
+        }
+    }
+
+    .wizard > .steps > ul > li {
+        float: none;
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .wizard > .content {
+        background: none;
+    }
+
+    .wizard > .content > .body {
+        position: static;
+        padding: 0;
+    }
+
+    .dataTables_wrapper {
+        .dataTables_filter {
+            display: block;
+        }
+    }
+
+    .navigation {
+        width: 75%;
+    }
+
+    .page-header {
+        .breadcrumb {
+            display: none;
+        }
+    }
+}
+
+@media (max-width: 375px) {
+    nav.navbar {
+        .navbar-menu {
+            padding-left: 0;
+        }
+    }
+
+    .navigation {
+        width: 85%;
+    }
+
+}
+
+@media (max-width: 544px) {
+    .text-xs-center {
+        text-align: center !important;
+    }
+    .text-xs-left {
+        text-align: left !important;
+    }
+    .text-xs-right {
+        text-align: right !important;
+    }
+}
+
+@media print {
+    .page-header {
+        display: none;
+    }
+}
