2024-10-10

2024-10-10 12:56:56 +08:00
commit 7b347c848a
2648 changed files with 643965 additions and 0 deletions
--- a/web/bsadmin/assets/sass/badge.scss
+++ b/web/bsadmin/assets/sass/badge.scss
@@ -0,0 +1,40 @@
+@import "variable"; // variable
+.badge {
+    padding: 5px 10px;
+    font-weight: 400;
+    border-radius: 4px;
+}
+
+.badge-primary {
+    background: $primary;
+    color: $white;
+}
+
+.badge-success {
+    background: $success;
+    color: $white;
+}
+.badge-info {
+    background: $info;
+    color: $white;
+}
+
+.badge-warning {
+    background: $warning;
+    color: $white;
+}
+
+.badge-danger {
+    background: $danger;
+    color: $white;
+}
+
+.badge-pink {
+    background: $pink;
+    color: $white;
+}
+
+.badge-dark {
+    background: $dark;
+    color: $white;
+}
--- a/web/bsadmin/assets/sass/booking-system.scss
+++ b/web/bsadmin/assets/sass/booking-system.scss
@@ -0,0 +1,30 @@
+@import "variable"; // variable
+
+.booking-system-feedback{
+  top: 5px !important;
+  right: 15px;
+}
+
+
+.booking-system-top{
+  padding-top: 15px;
+}
+  .media{
+//    padding-top: 20px;
+  }
+
+  .media-body{
+//    padding-top: 9px;
+      vertical-align: middle;
+    span{
+      font-size: 10px;
+      color: $primary;
+    }
+    p{
+      color: $text;
+      line-height: 15px;
+    }
+  }
+
+
+
--- a/web/bsadmin/assets/sass/button.scss
+++ b/web/bsadmin/assets/sass/button.scss
@@ -0,0 +1,165 @@
+@import "variable"; // variable
+
+.btn-default{
+    background: $default;
+    border-color: $default;
+    color: $white;
+    &:hover,&:focus,&.active{
+        background: darken($default,10%);
+        border-color: $default;
+        color: $white;
+        box-shadow: none;
+    }
+}
+.btn-primary {
+    background: $primary;
+    border-color: $primary;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($primary, 10%);
+        border-color: $primary;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-success {
+    background: $success;
+    border-color: $success;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($success, 10%);
+        border-color: $success;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-info {
+    background: $info;
+    border-color: $info;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($info, 10%);
+        border-color: $info;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-warning {
+    background: $warning;
+    border-color: $warning;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($warning, 10%);
+        border-color: $warning;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-danger {
+    background: $danger;
+    border-color: $danger;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($danger, 10%);
+        border-color: $danger;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-pink {
+    background: $pink;
+    border-color: $pink;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($pink, 10%);
+        border-color: $pink;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-dark {
+    background: $dark;
+    border-color: $dark;
+    color: $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($dark, 10%);
+        border-color: $dark;
+        color: $white;
+        box-shadow: none;
+    }
+}
+
+.btn-addon {
+    position: relative;
+    padding-left: 40px;
+    i {
+        background: rgba(0, 0, 0, 0.1);
+        left: -1px;
+        margin-right: 20px;
+        padding: 10px;
+        position: absolute;
+        top: -1px;
+    }
+}
+
+.btn-addon.btn-lg {
+    padding-left: 60px;
+    i {
+        padding: 14px;
+    }
+}
+
+.btn-addon.btn-md {
+    padding-left: 45px;
+    i {
+        padding: 10px;
+    }
+}
+
+.btn-addon.btn-sm {
+    padding-left: 40px;
+    i {
+        padding: 9px;
+    }
+}
+
+.btn-addon.btn-xs {
+    padding-left: 25px;
+    i {
+//        font-size: 8px;
+        padding: 5px;
+    }
+}
+
+.btn-rounded {
+    border-radius: 100px;
+}
+
+.btn-outline {
+    background: transparent;
+    color: $text;
+}
+
+.btn-flat {
+    border-radius: 0px;
+}
--- a/web/bsadmin/assets/sass/calendar.scss
+++ b/web/bsadmin/assets/sass/calendar.scss
@@ -0,0 +1,129 @@
+@import "variable"; // variable
+
+/* Calendar
+================================================== */
+
+
+/* =============
+   Calendar
+============= */
+
+.calendar {
+    float: left;
+    margin-bottom: 0px;
+}
+
+.fc-view {
+    margin-top: 30px;
+}
+
+.none-border .modal-footer {
+    border-top: none;
+}
+
+.fc-toolbar {
+    margin-bottom: 5px;
+    margin-top: 15px;
+}
+
+.fc-toolbar h2 {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 30px;
+    text-transform: uppercase;
+}
+
+.fc-day {
+    background: $white;
+}
+
+.fc-toolbar .fc-state-active,
+.fc-toolbar .ui-state-active,
+.fc-toolbar button:focus,
+.fc-toolbar button:hover,
+.fc-toolbar .ui-state-hover {
+    z-index: 0;
+}
+
+.fc-widget-header {
+    border: 1px solid $border;
+}
+
+.fc-widget-content {
+    border: 1px solid $border;
+}
+
+.fc th.fc-widget-header {
+    background: $border;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 10px 0px;
+    text-transform: uppercase;
+}
+
+.fc-button {
+    background: $white;
+    border: 1px solid $border;
+    color: $text;
+    text-transform: capitalize;
+}
+
+.fc-text-arrow {
+    font-family: inherit;
+    font-size: 16px;
+}
+
+.fc-state-hover {
+    background: $white-light!important;
+}
+
+.fc-state-highlight {
+    background: $white-light!important;
+}
+
+.fc-cell-overlay {
+    background: $white-light!important;
+}
+
+.fc-unthemed .fc-today {
+    background: $white!important;
+}
+
+.fc-event {
+    border-radius: 2px;
+    border: none;
+    cursor: move;
+    font-size: 13px;
+    margin: 5px 7px;
+    padding: 5px 5px;
+    text-align: center;
+}
+
+.external-event {
+    color: $white;
+    cursor: move;
+    margin: 10px 0;
+    padding: 6px 10px;
+}
+
+.fc-basic-view td.fc-week-number span {
+    padding-right: 5px;
+}
+
+.fc-basic-view td.fc-day-number {
+    padding-right: 5px;
+}
+
+#drop-remove {
+    margin: 0px;
+    top: 3px;
+}
+
+#event-modal,
+#add-category {
+    
+        .modal-dialog {
+            max-width: 600px;
+        
+    }
+}
--- a/web/bsadmin/assets/sass/card.scss
+++ b/web/bsadmin/assets/sass/card.scss
@@ -0,0 +1,124 @@
+@import "variable"; // variable
+
+
+
+
+.card-body{
+    background: $white;
+}
+
+
+.card {
+    background: $white;
+    margin: 15px 0px 15px 0px;
+    padding: 20px;
+    border: 0px;
+    border-radius: 0px;
+    box-shadow: 0 0 10px 5px $border;
+}
+
+.card-header { 
+    h4 { 
+        display: inline-block;
+    }
+    p {
+        font-family: $mol;
+        margin-bottom: 12px;
+    }
+}
+.single-card {
+    h4 {
+        font-size:16px;
+    }
+    .sparkline-box {
+        float:right;
+    }
+    .visit-count {
+        float: left;
+        padding-top: 18px;
+        line-height: 10px;
+        font-size: 18px;
+    }
+}
+
+.card-header-right-icon {
+    display: inline-block;
+    float: right;
+    li {
+        float: right;
+        padding-left: 14px;
+        color: $text-light;
+        cursor: pointer;
+        vertical-align: middle;
+        transition: all 0.5s ease-in-out;
+        display: inline-block;
+        .ti-close {
+            font-size: 12px;
+        }
+    }
+}
+
+.card-option {
+    position: relative;
+}
+
+.card-option-dropdown {
+    display: none;
+//    background: $white;
+//    padding: 15px;
+//    position: absolute;
+    left: auto;
+    right: 0;
+//    width: 150px;
+//    font-family: $mol;
+//    border: 1px solid $border;
+//    border-radius: 3px;
+    li {
+        display: block;
+        float: left;
+        width: 100%;
+        padding: 0px; 
+        a {
+            line-height: 25px;
+            font-size: 12px;
+            i {
+                margin-right: 10px;
+            }
+        }
+    }
+}
+
+
+
+.doc-link {
+    float: right;
+    position: relative;
+    transition: all 0.5s ease-in-out;
+    &:hover,
+    &:focus {
+        &:after {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+    &:after {
+        border: 1px solid $border;
+        border-radius: 5px;
+        content: "Documentation";
+        font-size: 12px;
+        padding: 5px 10px;
+        position: absolute;
+        right: -30px;
+        top: -30px;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.5s ease-in-out;
+    }
+}
+
+
+.jqstooltip {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
--- a/web/bsadmin/assets/sass/carousel.scss
+++ b/web/bsadmin/assets/sass/carousel.scss
@@ -0,0 +1,29 @@
+@import "variable"; // variable
+.testimonial-widget-one {
+//    background: $pink;
+    .testimonial-content {
+        text-align: right;
+    }
+    .testimonial-text {
+        margin-bottom: 30px;
+    }
+    .testimonial-author-position {
+        font-family: $mol;
+        margin-right: 75px;
+        position: relative;
+        top: -5px;
+    }
+    .testimonial-author {
+        margin-right: 75px;
+        position: relative;
+        top: -5px;
+    }
+    .testimonial-author-img {
+        height: 50px !important;
+        width: 50px !important;
+        border-radius: 100px;
+        position: absolute;
+        bottom: 0;
+        right: 0
+    }
+}
--- a/web/bsadmin/assets/sass/chart.scss
+++ b/web/bsadmin/assets/sass/chart.scss
@@ -0,0 +1,26 @@
+@import "variable"; // variable
+.cpu-load {
+    width: 100%;
+    height: 272px;
+    font-size: 14px;
+    line-height: 1.2em;
+}
+
+.cpu-load-data-content {
+  font-size: 18px;
+  font-weight: 400;
+    line-height: 40px;
+}
+
+.cpu-load-data {
+    margin-bottom: 30px;
+    li {
+        display: inline-block;
+        width: 32.5%;
+        text-align: center;
+        border-right: 1px solid $border;
+        &:last-child{
+            border-right: 0px;
+        }
+    }
+}
--- a/web/bsadmin/assets/sass/chat.scss
+++ b/web/bsadmin/assets/sass/chat.scss
@@ -0,0 +1,246 @@
+@import "variable"; // variable
+.chat-sidebar {
+    background-color: $white-light;
+    border-left: 1px solid $border;
+    position: fixed;
+    right: -240px;
+    bottom: 0;
+    top: 55px;
+    width: 240px;
+    z-index: 2;
+    -webkit-transition: all 0.5s ease 0s;
+    transition: all 0.5s ease 0s;
+    .user-name {
+        font-family: $mol;
+    }
+    .content {
+        font-family: $mol;
+    }
+    .textarea {
+        font-family: $mol;
+    }
+    .seen {
+        font-family: $mol;
+    }
+}
+
+.chat-sidebar.is-active {
+    right: 0;
+}
+
+.chat-user-search {
+    .input-group-addon {
+        background: $white;
+        border-radius: 0px;
+        border: 0px;
+    }
+    .form-control {
+        border: 0px;
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+
+/*    Home Chat Widget
+---------------------------------*/
+
+.chat-widget {
+    .chat_window {
+        position: relative;
+        width: 100%;
+        //  max-width:800px;
+          height:500px;
+        border-radius: 10px;
+        background-color: #ffffff;
+        background-color: #f8f8f8;
+        //  left:50%;
+        //  top:50%;
+        //  transform:translateX(-50%) translateY(-50%);
+        //  box-shadow:0 10px 20px rgba(0,0,0,0.15);
+        overflow: hidden;
+    }
+//    .top_menu {
+//        background-color: #ffffff;
+//        width: 100%;
+//        padding: 20px 0 15px;
+//        box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
+//        .buttons {
+//            margin: 3px 0 0 20px;
+//            position: absolute;
+//            .button {
+//                width: 16px;
+//                height: 16px;
+//                border-radius: 50%;
+//                display: inline-block;
+//                margin-right: 10px;
+//                position: relative;
+//            }
+//            .button.close {
+//                background-color: #f5886e;
+//            }
+//            .button.minimize {
+//                background-color: #fdbf68;
+//            }
+//            .button.maximize {
+//                background-color: #a3d063;
+//            }
+//        }
+//        .title {
+//            text-align: center;
+//            color: #bcbdc0;
+//            font-size: 20px;
+//        }
+//    }
+    .messages {
+        position: relative;
+        list-style: none;
+        padding: 20px 10px 0 10px;
+        margin: 0;
+        min-height: 350px;
+        overflow: scroll;
+        .message {
+            clear: both;
+            overflow: hidden;
+            margin-bottom: 20px;
+            transition: all 0.5s linear;
+            opacity: 0;
+            .avatar {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                display: inline-block;
+            }
+            .text_wrapper {
+                display: inline-block;
+                padding: 20px;
+                border-radius: 6px;
+                width: #{"calc(100% - 100px)"};
+                min-width: 100px;
+                position: relative;
+                .text {
+                    font-size: 18px;
+                    font-weight: 300;
+                }
+            }
+            .text_wrapper::after {
+                top: 18px;
+                border: solid transparent;
+                content: " ";
+                height: 0;
+                width: 0;
+                position: absolute;
+                pointer-events: none;
+                border-width: 13px;
+                margin-top: 0px;
+            }
+            .text_wrapper:before {
+                top: 18px;
+                border: solid transparent;
+                content: " ";
+                height: 0;
+                width: 0;
+                position: absolute;
+                pointer-events: none;
+            }
+            .text_wrapper::before {
+                border-width: 15px;
+                margin-top: -2px;
+            }
+        }
+        .message.left {
+            .text_wrapper::after,
+            .text_wrapper::before {
+                right: 100%;
+                border-right-color: #ffe6cb;
+            }
+            .avatar {
+                background-color: #f5886e;
+                float: left;
+            }
+            .text_wrapper {
+                background-color: #ffe6cb;
+                margin-left: 20px;
+            }
+            .text {
+                color: #c48843;
+            }
+        }
+        .message.right {
+            .text_wrapper::after,
+            .text_wrapper::before {
+                left: 100%;
+                border-left-color: #c7eafc;
+            }
+            .avatar {
+                background-color: #fdbf68;
+                float: right;
+            }
+            .text_wrapper {
+                background-color: #c7eafc;
+                margin-right: 20px;
+                float: right;
+            }
+            .text {
+                color: #45829b;
+            }
+        }
+        .message.appeared {
+            opacity: 1;
+        }
+    }
+    .bottom_wrapper {
+        position: relative;
+        position: absolute;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 20px 20px;
+        bottom: 0;
+        .message_input_wrapper {
+            display: inline-block;
+            height: 50px;
+            border-radius: 25px;
+            border: 1px solid #bcbdc0;
+            width: #{"calc(100% - 160px)"};
+            position: relative;
+            padding: 0 20px;
+            .message_input {
+                border: none;
+                height: 100%;
+                box-sizing: border-box;
+                width: #{"calc(100% - 45px)"};
+                position: absolute;
+                outline-width: 0;
+                color: gray;
+            }
+        }
+        .send_message {
+            width: 140px;
+            height: 50px;
+            display: inline-block;
+            border-radius: 50px;
+            background-color: #a3d063;
+            border: 2px solid #a3d063;
+            color: #ffffff;
+            cursor: pointer;
+            transition: all 0.2s linear;
+            text-align: center;
+            float: right;
+            .text {
+                font-size: 18px;
+                font-weight: 300;
+                display: inline-block;
+                line-height: 48px;
+            }
+        }
+        .send_message:hover {
+            color: #a3d063;
+            background-color: #ffffff;
+        }
+    }
+    .message_template {
+        display: none;
+    }
+}
--- a/web/bsadmin/assets/sass/compose-email.scss
+++ b/web/bsadmin/assets/sass/compose-email.scss
@@ -0,0 +1,529 @@
+@import "variable"; // variable
+$color_1: $white;
+$color_2: #87e2e7;
+$color_3: #01a7b3;
+$color_4: #6a6a6a;
+$color_5: #5c5c5e;
+$color_6: #9d9f9e;
+$color_7: #8a8a8a;
+$color_8: #f78a09;
+$color_9: #d5d5d5;
+$color_10: #afafaf;
+$color_11: #444;
+$color_12: #777;
+//$font_family_1: "Open Sans",sans-serif;
+.mail-box {
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    aside {
+        display: table-cell;
+        float: none;
+        height: 100%;
+        padding: 0;
+        vertical-align: top;
+    }
+    .sm-side {
+        background: $white;
+        border-radius: 4px 0 0 4px;
+        width: 25%;
+        .user-head {
+            background: $white;
+            border-radius: 4px 0 0;
+            color: $text;
+            min-height: 80px;
+            padding: 10px;
+            //            border-right: 1px solid $border;
+        }
+    }
+    .lg-side {
+        background: none repeat scroll 0 0 $white;
+        border-radius: 0 4px 4px 0;
+        width: 75%;
+    }
+}
+
+.user-head {
+    .inbox-avatar {
+        float: left;
+        width: 65px;
+        img {
+            border-radius: 100px;
+            height: 65px;
+            width: 65px;
+        }
+    }
+    .user-name {
+        display: inline-block;
+        margin: 0 0 0 10px;
+        h5 {
+            font-size: 14px;
+            font-weight: 300;
+            margin-bottom: 0;
+            margin-top: 15px;
+            a {
+                color: $text;
+            }
+        }
+        span {
+            a {
+                color: $text;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+a.mail-dropdown {
+    background: none repeat scroll 0 0 #80d3d9;
+    border-radius: 2px;
+    color: $color_3;
+    font-size: 10px;
+    margin-top: 20px;
+    padding: 3px 5px;
+}
+
+.inbox-body {
+    padding: 20px 0px;
+    .modal {
+        .modal-body {
+            input {
+                border: 1px solid #e6e6e6;
+                box-shadow: none;
+            }
+            textarea {
+                border: 1px solid #e6e6e6;
+                box-shadow: none;
+            }
+        }
+    }
+}
+
+.btn-compose {
+    background: $primary;
+    color: $white;
+    padding: 12px 0;
+    text-align: center;
+    width: 70%;
+    &:hover,
+    &:focus,
+    &.active {
+        background: $primary;
+        color: $white;
+    }
+}
+
+ul.inbox-nav {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    li {
+        display: inline-block;
+        line-height: 45px;
+        width: 100%;
+        a {
+            color: $color_4;
+            display: inline-block;
+            line-height: 45px;
+            padding: 0 20px;
+            width: 100%;
+            font-family: $mol;
+            &:hover {
+                background: $white-light;
+                color: $color_4;
+            }
+            &:focus {
+                background: $white-light;
+                color: $color_4;
+            }
+            i {
+                color: $color_4;
+                font-size: 16px;
+                padding-right: 10px;
+            }
+            span.label {
+                margin-top: 13px;
+            }
+        }
+    }
+    li.active {
+        a {
+            background: $white-light;
+            color: $color_4;
+        }
+    }
+}
+
+.inbox-divider {
+    border-bottom: 1px solid $border;
+}
+
+ul.labels-info {
+    li {
+        h4 {
+            color: $color_5;
+            font-size: 13px;
+            padding-left: 15px;
+            padding-right: 15px;
+            padding-top: 20px;
+            text-transform: uppercase;
+        }
+        margin: 0;
+        a {
+            border-radius: 0;
+            color: $color_4;
+            font-family: $mol;
+            &:hover {
+                background: $white-light;
+                color: $color_4;
+            }
+            &:focus {
+                background: $white-light;
+                color: $color_4;
+            }
+            i {
+                padding-right: 10px;
+            }
+        }
+    }
+}
+
+.nav.nav-pills.nav-stacked.labels-info {
+    p {
+        color: $color_6;
+        font-size: 11px;
+        margin-bottom: 0;
+        padding: 0 22px;
+    }
+}
+
+.inbox-head {
+    background: $white-light;
+    border-radius: 4px 4px 0 0;
+    color: $text;
+    min-height: 80px;
+    padding: 20px;
+    h3 {
+        display: inline-block;
+        font-weight: 300;
+        margin: 0;
+        padding-top: 6px;
+    }
+    .sr-input {
+        border: medium none;
+        border-radius: 4px 0 0 4px;
+        box-shadow: none;
+        color: $color_7;
+        float: left;
+        height: 40px;
+        padding: 0 10px;
+    }
+    .sr-btn {
+        background: $white;
+        border: medium none;
+        border-radius: 0 4px 4px 0;
+        color: $text;
+        height: 40px;
+        padding: 0 20px;
+    }
+}
+
+.table-inbox {
+    border: 1px solid $border;
+    margin-bottom: 0;
+    tr {
+        td {
+            padding: 12px !important;
+            &:hover {
+                cursor: pointer;
+            }
+            .ti-star.inbox-started {
+                color: $warning;
+            }
+            .ti-star {
+                &:hover {
+                    color: $warning;
+                }
+                color: $color_9;
+            }
+        }
+    }
+    tr.unread {
+        td {
+            background: $white-light;
+            //			font-weight: 600;
+        }
+    }
+}
+
+ul.inbox-pagination {
+    float: right;
+    li {
+        float: left;
+    }
+}
+
+.mail-option {
+    display: inline-block;
+    margin: 26px 0;
+    width: 100%;
+    font-size: 12px;
+    .chk-all {
+        margin-right: 5px;
+        background: none repeat scroll 0 0 #fcfcfc;
+        border: 1px solid $border;
+        border-radius: 3px !important;
+        color: $color_10;
+        display: inline-block;
+        padding: 5px 16px;
+        input[type="checkbox"] {
+            margin-top: 0;
+        }
+    }
+    .btn-group {
+        margin-right: 5px;
+        a.btn {
+            background: $white;
+            border: 1px solid $border;
+            border-radius: 3px !important;
+            font-family: $mol;
+            color: $text;
+            display: inline-block;
+            padding: 5px 10px;
+            font-size: 12px;
+        }
+        a.all {
+            border: medium none;
+            padding: 0;
+            margin-left: 5px;
+        }
+        i {
+            margin-left: 5px;
+        }
+    }
+    .card-option-dropdown {
+        left: 0;
+        right: auto;
+    }
+}
+
+.inbox-pagination {
+    a.np-btn {
+        background: none repeat scroll 0 0 #fcfcfc;
+        border: 1px solid $border;
+        border-radius: 3px !important;
+        color: $color_10;
+        display: inline-block;
+        padding: 5px 15px;
+        margin-left: 5px;
+    }
+    li {
+        span {
+            display: inline-block;
+            margin-right: 5px;
+            margin-top: 7px;
+        }
+    }
+}
+
+.fileinput-button {
+    background: none repeat scroll 0 0 #eeeeee;
+    border: 1px solid #e6e6e6;
+    float: left;
+    margin-right: 4px;
+    overflow: hidden;
+    position: relative;
+    input {
+        cursor: pointer;
+        direction: ltr;
+        font-size: 23px;
+        margin: 0;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translate(-300px, 0px) scale(4);
+    }
+}
+
+//.btn-send {
+//    background: none repeat scroll 0 0 #00a8b3;
+//    color: $white;
+//    &:hover {
+//        background: none repeat scroll 0 0 #00a8b3;
+//        color: $white;
+//        background: none repeat scroll 0 0 #009da7;
+//    }
+//}
+.modal-header {
+    h4.modal-title {
+        //		font-family: $font_family_1;
+        font-weight: 300;
+    }
+}
+
+.modal-body {
+    label {
+        //		font-family: $font_family_1;
+        font-weight: 400;
+    }
+}
+
+.heading-inbox {
+    h4 {
+        border-bottom: 1px solid #ddd;
+        color: $color_11;
+        font-size: 18px;
+        margin-top: 20px;
+        padding-bottom: 10px;
+    }
+}
+
+.sender-info {
+    margin-bottom: 20px;
+    img {
+        height: 30px;
+        width: 30px;
+    }
+}
+
+.sender-dropdown {
+    background: none repeat scroll 0 0 #eaeaea;
+    color: $color_12;
+    font-size: 10px;
+    padding: 0 3px;
+}
+
+.view-mail {
+    a {
+        color: $danger;
+    }
+}
+
+.attachment-mail {
+    margin-top: 30px;
+    ul {
+        display: inline-block;
+        margin-bottom: 30px;
+        width: 100%;
+        li {
+            float: left;
+            margin-bottom: 10px;
+            margin-right: 10px;
+            width: 150px;
+            img {
+                width: 100%;
+            }
+            span {
+                float: right;
+            }
+        }
+    }
+    .file-name {
+        float: left;
+    }
+    .links {
+        display: inline-block;
+        width: 100%;
+    }
+}
+
+.fileupload-buttonbar {
+    .btn {
+        margin-bottom: 5px;
+    }
+    .toggle {
+        margin-bottom: 5px;
+    }
+}
+
+.files {
+    .progress {
+        width: 200px;
+    }
+}
+
+.fileupload-processing {
+    .fileupload-loading {
+        display: block;
+    }
+}
+
+* {
+    html {
+        .fileinput-button {
+            line-height: 24px;
+            margin: 1px -3px 0 0;
+        }
+    }
+    &+html {
+        .fileinput-button {
+            margin: 1px 0 0;
+            padding: 2px 15px;
+        }
+    }
+}
+
+ul {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+.inbox-small-cells {
+    text-align: center;
+}
+
+.mail-group-checkbox {
+    position: relative;
+    top: 2px;
+}
+
+.mail-checkbox.mail-group-checkbox {
+    position: relative;
+    top: 2px;
+    left: 2px;
+}
+
+.table-inbox > tbody > tr > td,
+.table > tbody > tr > th,
+.table > tfoot > tr > td,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > thead > tr > th {
+    border-top: 1px solid $border;
+    line-height: 1.42857;
+    padding: 8px;
+    vertical-align: top;
+}
+
+@media (max-width: 767px) {
+    .files {
+        .btn {
+            span {
+                display: none;
+            }
+        }
+        .preview {
+            * {
+                width: 40px;
+            }
+        }
+        .name {
+            * {
+                display: inline-block;
+                width: 80px;
+                word-wrap: break-word;
+            }
+        }
+        .progress {
+            width: 20px;
+        }
+        .delete {
+            width: 60px;
+        }
+    }
+}
--- a/web/bsadmin/assets/sass/data-table.scss
+++ b/web/bsadmin/assets/sass/data-table.scss
@@ -0,0 +1,92 @@
+@import "variable"; // variable
+.bootstrap-data-table-panel {
+    .dataTables_filter {
+        text-align: right;
+        .form-control{
+            margin-left: 10px;
+            &:hover,&:focus{
+                background: transparent;
+            }
+        }
+    }
+}
+
+//[contenteditable]:hover,
+//input:hover,
+//[contenteditable]:focus,
+//input:focus {
+//    background: transparent;
+//    margin-left: 15px;
+//}
+
+.dataTables_length {
+  display: inline-block;
+  float: left;
+  margin-right: 30px;
+}
+
+.dt-buttons {
+    margin-bottom: 15px;
+    .dt-button {
+        background-image: none;
+        background: $white;
+        color: $text;
+        border-color: $border;
+        margin-right: 10px;
+        padding: 7px 20px;
+        border-radius: 0px;
+        &:hover:not(.disabled),
+        &:focus,
+        &.active {
+            background-image: none;
+            background: $primary;
+            color: $white;
+        }
+    }
+}
+
+button.dt-button:hover:not(.disabled),
+div.dt-button:hover:not(.disabled),
+a.dt-button:hover:not(.disabled) {
+    background-color: $primary;
+    background-image: none;
+    border: 1px solid $primary;
+    box-shadow: none;
+    color: $white;
+}
+
+button.dt-button:focus:not(.disabled),
+div.dt-button:focus:not(.disabled),
+a.dt-button:focus:not(.disabled) {
+    background-color: $primary;
+    background-image: none;
+    border: 1px solid $primary;
+    box-shadow: none;
+    color: $white;
+}
+
+button.dt-button:active:hover:not(.disabled):not(.disabled),
+button.dt-button.active:hover:not(.disabled):not(.disabled),
+div.dt-button:active:hover:not(.disabled):not(.disabled),
+div.dt-button.active:hover:not(.disabled):not(.disabled),
+a.dt-button:active:hover:not(.disabled):not(.disabled),
+a.dt-button.active:hover:not(.disabled):not(.disabled) {
+    background-color: $primary;
+    background-image: none;
+    border: 1px solid $primary;
+    box-shadow: none;
+    color: $white;
+}
+
+button.dt-button:active:not(.disabled),
+button.dt-button.active:not(.disabled),
+div.dt-button:active:not(.disabled),
+div.dt-button.active:not(.disabled),
+a.dt-button:active:not(.disabled),
+a.dt-button.active:not(.disabled) {
+    background-color: $primary;
+    background-image: none;
+    border: 1px solid $primary;
+    box-shadow: none;
+    color: $white;
+}
--- a/web/bsadmin/assets/sass/datamap.scss
+++ b/web/bsadmin/assets/sass/datamap.scss
@@ -0,0 +1,16 @@
+@import "variable"; // variable
+
+
+
+
+.datamap-sales-hover-tooltip{
+    background: $dark;
+    font-family: $mol;
+    padding: 5px 10px;
+    color: $white;
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: capitalize;
+    border-radius: 3px;
+}
+
--- a/web/bsadmin/assets/sass/favourite_menu.scss
+++ b/web/bsadmin/assets/sass/favourite_menu.scss
@@ -0,0 +1,41 @@
+@import "variable"; // variable
+
+
+.favourite-menu-details{
+  .table>tbody>tr>td{
+    border-top: none;
+    border-bottom: 1px solid $border;
+  }
+  .favourite-menu-img{
+    border-right: 1px solid $border;
+    margin-bottom: 25px;
+    width: 120px;
+  }
+
+  .favourite-menu-des{
+    margin-top: 40px;
+    margin-right: 465px;
+
+    .product_name{
+      h4{
+        font-weight: 600;
+        text-align: left;
+      }
+    }
+  }
+
+
+
+.favourite-menu-button{
+  margin-top: 40px;
+  .prdt_add_to_curt{
+    padding-top: 10px;
+    button{
+      font-size: 11px;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+  }
+}
+
+}
--- a/web/bsadmin/assets/sass/flot-chart.scss
+++ b/web/bsadmin/assets/sass/flot-chart.scss
@@ -0,0 +1,40 @@
+@import "variable"; // variable
+
+
+
+.flotTip{
+    background: $black;
+    border: 1px solid $black;
+    padding: 5px 15px;
+    color: $white;
+}
+
+
+		.flot-container {
+	box-sizing: border-box;
+	width: 100%;
+	height: 275px;
+	padding: 20px 15px 15px 15px;
+	margin: 15px auto 30px auto;
+	background: $white;
+
+}
+		.flot-pie-container {
+	height: 275px;
+
+}
+		.flotBar-container {
+	height: 275px;
+
+}
+
+.flot-line{
+	width: 100%;
+	height: 100%;
+	font-size: 14px;
+	line-height: 1.2em;
+}
+
+.legend table {
+	border-spacing: 5px;
+}
--- a/web/bsadmin/assets/sass/fonts.scss
+++ b/web/bsadmin/assets/sass/fonts.scss
@@ -0,0 +1,4 @@
+
+@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
+
+ 
--- a/web/bsadmin/assets/sass/forms.scss
+++ b/web/bsadmin/assets/sass/forms.scss
@@ -0,0 +1,271 @@
+@import "variable"; // variable
+
+/*    Input Style
+------------------------*/
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-control {
+    height: 42px;
+    border-radius: 0px;
+    box-shadow: none;
+    border-color: $border;
+    font-family: $mol;
+    &:hover {
+        box-shadow: none;
+        border-color: $border;
+    }
+    &:focus,
+    &.active {
+        box-shadow: none;
+        border-color: $default;
+    }
+}
+
+.input-default {
+    border-radius: 4px;
+}
+
+.input-flat {
+    border-radius: 0px;
+}
+
+.input-rounded {
+    border-radius: 100px;
+}
+
+.input-focus {
+    border-color: $primary;
+    &:focus {
+        border-color: $primary;
+    }
+}
+
+
+/*    Search Box Input Button
+--------------------------------*/
+
+.input-group-btn {
+    .btn {
+        padding: 10px 12px;
+    }
+}
+
+.input-group-default {
+    .form-control {
+        border-radius: 4px;
+    }
+}
+
+.input-group-flat {
+    .form-control {
+        border-radius: 4px;
+    }
+    .btn {
+        border-radius: 0px;
+        border-radius: 0px;
+    }
+}
+
+.input-group-rounded {
+    .form-control {
+        border-radius: 100px;
+    }
+    .btn-group-left {
+        border-top-left-radius: 100px;
+        border-bottom-left-radius: 100px;
+    }
+    .btn-group-right {
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+    }
+}
+
+.input-group-close-icon {
+    background: none;
+    color: $black;
+    border-color: $border;
+    //    border-left: 1px solid $white;
+    &:hover,
+    &:focus,
+    &.active {
+        background: none;
+        border-color: $border;
+        color: $black;
+    }
+}
+
+
+/*    Input States
+-----------------------*/
+
+.has-default,
+.has-success,
+.has-warning,
+.has-error {
+    .form-control {
+        &:hover,
+        &:focus,
+        &.active {
+            box-shadow: none;
+        }
+    }
+}
+
+.has-default {
+    .control-label {
+        color: $default;
+    }
+    .form-control {
+        border-color: $default;
+        &:hover,
+        &:focus,
+        &.active {
+            border-color: $default;
+        }
+    }
+}
+
+.has-success {
+    .control-label {
+        color: $success;
+    }
+    .form-control {
+        border-color: $success;
+        &:hover,
+        &:focus,
+        &.active {
+            border-color: $success;
+        }
+    }
+}
+
+.has-warning {
+    .control-label {
+        color: $warning;
+    }
+    .form-control {
+        border-color: $warning;
+        &:hover,
+        &:focus,
+        &.active {
+            border-color: $warning;
+        }
+    }
+}
+
+.has-error {
+    .control-label {
+        color: $danger;
+    }
+    .form-control {
+        border-color: $danger;
+        &:hover,
+        &:focus,
+        &.active {
+            border-color: $danger;
+        }
+    }
+}
+
+.has-feedback label ~ .form-control-feedback {
+    top: 35px;
+}
+
+.form-horizontal .has-feedback .form-control-feedback {
+  top: 5px;
+}
+
+.has-success {
+    .form-control-feedback {
+        color: $success;
+    }
+}
+
+.has-warning {
+    .form-control-feedback {
+        color: $warning;
+    }
+}
+
+.has-error {
+    .form-control-feedback {
+        color: $danger;
+    }
+}
+
+.has-success .input-group-addon {
+    background-color: lighten($success, 25%);
+    border-color: $success;
+    color: $success;
+}
+
+.has-warning .input-group-addon {
+    background-color: lighten($warning, 25%);
+    border-color: $warning;
+    color: $warning;
+}
+
+.has-error .input-group-addon {
+    background-color: lighten($danger, 25%);
+    border-color: $danger;
+    color: $danger;
+}
+
+
+
+/*    Input Size
+--------------------*/
+.input-sm {
+//  border-radius: 3px;
+  font-size: 12px;
+  height: 30px;
+  line-height: 1.5;
+//  padding: 5px 10px;
+}
+
+.input-lg {
+//  border-radius: 6px;
+  font-size: 18px;
+  height: 46px;
+  line-height: 1.33333;
+//  padding: 10px 16px;
+}
+
+
+/*    Basic form
+----------------------*/
+
+label {
+    font-weight: 400;
+    margin-bottom: 10px;
+}
+
+
+/*    Form Horizontal
+----------------------*/
+
+.form-horizontal {
+    .control-label {
+        padding-top: 12px;
+    }
+}
+
+.form-horizontal {
+    .form-group {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+}
+
+
+
+
+
+
+
+
+
+
--- a/web/bsadmin/assets/sass/global.scss
+++ b/web/bsadmin/assets/sass/global.scss
@@ -0,0 +1,230 @@
+@import "variable"; // variable
+body {
+    font-family: $mont;
+    background:$white-light;
+	color: $text-light;
+}
+
+a,
+button {
+    outline: none!important;
+    text-decoration: none!important;
+    color: $text-light;
+    transition: all 0.2s ease 0s;
+    &:hover,
+    &:focus,
+    &.active {
+        color: $black;
+        outline: none!important;
+        text-decoration: none!important;
+    }
+}
+
+ul {
+    padding: 0px;
+    margin: 0px;
+}
+
+li {
+    list-style: none;
+}
+
+p {
+//    margin-bottom: 0px;
+    font-family: $mol;
+    color: $text-light;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+//    margin: 0px;
+}
+
+.dib {
+    display: inline-block;
+}
+
+.rotate-90 {
+    transform: rotate(90deg);
+}
+
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+.main-content {
+    padding: 15px;
+}
+
+.alert{
+    h4{
+        color: $text;
+    }
+}
+
+
+
+/*    Color Mixins
+-------------------*/
+
+.text-primary,
+.color-primary {
+    color: $primary;
+}
+
+.text-success,
+.color-success {
+    color: $success;
+}
+
+.text-info,
+.color-info {
+    color: $info;
+}
+
+.text-danger,
+.color-danger {
+    color: $danger;
+}
+
+.text-warning,
+.color-warning {
+    color: $warning;
+}
+
+.text-pink,
+.color-pink {
+    color: $pink;
+}
+
+.text-dark,
+.color-dark {
+    color: $dark;
+}
+
+
+/*    Background Mixins
+--------------------------*/
+
+
+.bg-primary {
+    background: $primary;
+    color:$white;
+}
+
+.bg-success {
+    background: $success;
+    color:$white;
+}
+
+.bg-info {
+    background: $info;
+    color:$white;
+}
+
+.bg-danger {
+    background: $danger;
+    color:$white;
+}
+
+.bg-warning {
+    background: $warning;
+    color:$white;
+}
+
+.bg-pink {
+    background: $pink;
+    color:$white;
+}
+
+.bg-dark {
+    background: $dark;
+    color:$white;
+}
+
+.bg-transparent {
+    background: transparent;
+    color: $black;
+}
+
+
+
+
+
+/*    Border Mixins
+--------------------------*/
+
+
+.border-primary {
+    border-color: $primary;
+}
+
+.border-success {
+    border-color: $success;
+}
+
+.border-info {
+    border-color: $info;
+}
+
+.border-danger {
+    border-color: $danger;
+}
+
+.border-warning {
+    border-color: $warning;
+}
+
+.border-pink {
+    border-color: $pink;
+}
+
+.border-dark {
+    border-color: $dark;
+}
+
+.no-border {
+    border: 0px!important;
+}
+
+
+
+
+
+/*    Brand Background
+-----------------------------*/
+
+.bg-facebook{
+    background: $facebook;
+}
+
+.bg-twitter{
+    background: $twitter;
+}
+
+
+
+
+/*    width
+-----------------------------*/
+
+.w10pr{
+    width: 10%
+}
+
+
+.w12pr{
+    width: 12%
+}
+
+
+ 
--- a/web/bsadmin/assets/sass/gmap.scss
+++ b/web/bsadmin/assets/sass/gmap.scss
@@ -0,0 +1,6 @@
+@import "variable"; // variable
+
+.map {
+  width: 100%;
+  height: 400px;
+}
--- a/web/bsadmin/assets/sass/header.scss
+++ b/web/bsadmin/assets/sass/header.scss
@@ -0,0 +1,335 @@
+@import "variable"; // variable
+
+/*    Header
+---------------*/
+
+.header {
+    background: $primary;
+    position: fixed;
+    width: 100%;
+    min-height: 55px;
+    z-index: 999;
+}
+
+.logo {
+    background: $primary;
+    display: inline-block;
+    padding: 0;
+    line-height:50px;
+    text-align: center;
+    width: 250px;
+    transition: width 300ms ease-in-out;
+    img { 
+        height:45px;
+        margin-right: 10px;
+        transition: 300ms ease-in-out;
+    }
+    .small-logo {
+        visibility: hidden;
+        opacify:0;
+        width:0;
+        height:0;
+    }
+    span {
+        color: $white;
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: 3px;
+        padding-left: 20px;
+        text-transform: uppercase;
+    }
+}
+
+.sidebar-hide {
+    .logo {
+        width: 60px;
+        span {
+            display: none;
+        }
+    }
+    .full-logo {
+        visibility: hidden;
+        opacify:0;
+        width:0;
+        height:0;
+    }
+    .small-logo {
+        visibility: visible;
+        opacify:1;
+        width:auto;
+        height:45px;
+    }
+}
+
+.header-icon {
+    font-size: 18px;
+    padding: 12px 15px;
+    color: $white;
+    position: relative;
+    transition: all 0.4s ease-in-out;
+    display: inline-block;
+    vertical-align: middle;
+    float: left;
+    cursor: pointer; 
+     
+    &:hover,
+    &:focus,
+    &.active {
+        background: darken($primary, 3%);
+    }
+    .note-count {
+        position: absolute;
+        right: 3px;
+        top: 3px;
+        font-size: 10px;
+        width: 18px;
+        height: 18px;
+        line-height: 18px; 
+        border-radius: 100%;
+        text-align: center;
+        background: #00a4b9;
+        z-index: 9999;
+        font-weight: 600; 
+        animation-name: noteblink;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-iteration-count: 5;
+    } 
+}
+
+@keyframes noteblink { 
+    0%,30%,36%,45%,52%,100%  {
+        background: #00a4b9;
+        color:white;
+    }
+    31%,35%,46%,51% {
+        background: white;
+        color:#00a4b9;
+    } 
+}
+
+/*    Humberger icon
+--------------------------*/
+
+.hamburger {
+  display: inline-block;
+  left: 10px;
+  position: relative;
+  top: 13px;
+  transition: all 0.3s ease-in-out 0s;
+  width: 37px;
+  z-index: 999;
+  cursor: pointer;
+    >span{    
+        color: white;
+        font-size: 25px;
+    }  
+}  
+.header-icon.active {
+    .drop-down {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0px);
+    }
+}
+
+.drop-down {
+    background: $white;
+    color: $black;
+    visibility: hidden;
+    opacity: 0;
+    width: 320px;
+    position: absolute;
+    right: 0;
+    top: 55px;
+    transform: translateY(50px);
+    transition: all 0.4s ease-in-out;
+    border-top: 0px; 
+    border: 1px solid $border; 
+}
+
+.header-left {
+    .drop-down {
+        left: 0;
+    }
+}
+
+.dropdown-content-heading {
+    padding: 10px 15px; 
+    span {
+        font-size: 13px; 
+        color: $text;
+    }
+    i {
+        position: relative;
+        top: 5px;
+        opacity: 1!important;
+        color: $primary;
+    }
+}
+
+.dropdown-content-body { 
+    li {
+        padding: 15px;
+        border-top: 1px solid $white-light;
+        &:hover,
+        &:focus,
+        &.active {
+            background: $white-light;
+            border-top: 1px solid $white-light;
+        }
+        a { 
+            &:hover,
+            &:focus,
+            &.active {
+                color: $text-light;
+            }
+        }
+        &:last-child {
+            padding: 5px 15px;
+        }
+    }
+}
+
+.notification-heading {
+    font-size: 13px;
+    font-weight: 700;
+    color: $text;
+}
+
+.avatar-img {
+    border-radius: 100px;
+    width: 25px;
+    position: relative;
+    top: -3px;
+}
+.header-icon>.avatar-img {
+        width:24px;
+}
+
+.user-avatar {
+    margin-left: 10px;
+    font-size: 14px;
+    font-weight: 700; 
+}
+@media screen and (max-width:750px) {
+    .header-icon>.avatar-img {  margin-right: 42px; }
+    .header-icon>.user-avatar{ display: none; }
+}
+@media screen and (max-width:450px) {
+    .header-icon>.avatar-img {  margin-right: 22px; } 
+}
+
+.notification-text {
+    font-size: 12px;
+    font-family: $mol;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-top: 3px;
+}
+
+.notification-timestamp {
+    font-size: 11px;
+}
+
+.notification-percentage {
+    font-size: 12px;
+    position: relative;
+    top: 12px;
+}
+
+.notification-unread {
+    background: $white-light;
+    .notification-heading {
+        color: #555;
+    }
+}
+
+.more-link {
+    font-size: 12px;
+    color: $primary;
+    display: inline-block;
+}
+
+.dropdown-profile {
+    width: 200px;
+    .trial-day {
+        font-size: 11px;
+        padding-top: 2px;
+        color: $primary;
+    }
+    li {
+        padding: 7px 15px;
+        a {
+            display: block;
+            color: $text;
+            &:hover,
+            &:focus,
+            &.active {
+                color: $text;
+            }
+            span { 
+                font-size: 14px;
+            }
+            i {
+                margin-right: 5px;
+                font-size: 14px;
+            }
+        }
+        &:last-child {
+            padding: 7px 15px;
+        }
+    }
+}
+
+.header-link {
+    position: relative;
+    top: -3px;
+    font-size: 14px; 
+}
+ 
+.main {
+    .page-header {
+        min-height: 55px;
+        margin: 0px;
+        padding: 0px 15px;
+        background: $white;
+        border-bottom: 0px;
+        h1 {
+            font-size: 18px;
+            padding: 14px 0px;
+            margin: 0px;
+        }
+        .breadcrumb {
+            margin: 0px;
+            padding: 14px 15px;
+            background: $white;
+            li {
+                &:hover,
+                &:focus,
+                &.active {
+                    font-family: $mol;
+                    font-weight: normal;
+                    font-size: 12px;
+                }
+                a {
+                    font-size: 12px;
+                    font-family: $mol;
+                }
+            }
+        }
+    }
+}
+
+.dropdown-task {
+    .progress {
+        height: 5px;
+        margin-bottom: 0px;
+        margin-top: 20px;
+        box-shadow: none;
+    }
+    .progress-bar {
+        box-shadow: none;
+    }
+}
--- a/web/bsadmin/assets/sass/invoice-edit.scss
+++ b/web/bsadmin/assets/sass/invoice-edit.scss
@@ -0,0 +1,262 @@
+@import "variable"; // variable
+[contenteditable] {
+    &:hover,
+    &:focus {
+        background: lighten($primary, 15%);
+    }
+}
+
+.control-bar {
+      position: relative;
+    z-index: 100;
+    background: $primary;
+    color: $white;
+    padding: 15px;
+    margin-bottom: 30px;
+    .slogan {
+        font-weight: bold;
+        font-size: 1.2rem;
+        display: inline-block;
+        margin-right: 2rem;
+    }
+    label {
+        margin: 0px;
+        color: $white;
+    }
+    a {
+        margin: 0;
+        padding: .5em 1em;
+        background: $white;
+        color: $text;
+        &:hover {
+            background: lighten($primary, 15%);
+        }
+    }
+    input {
+        border: none;
+        background: lighten($primary, 15%);
+        max-width: 30px;
+        text-align: center;
+        color: $text;
+        &:hover {
+            background: lighten($primary, 15%);
+        }
+    }
+}
+
+.hidetax {
+    .taxrelated {
+        display: none;
+    }
+}
+
+.showtax {
+    .notaxrelated {
+        display: none;
+    }
+}
+
+.hidedate {
+    .daterelated {
+        display: none;
+    }
+}
+
+.showdate {
+    .notdaterelated {
+        display: none;
+    }
+}
+
+.details {
+    input {
+        display: inline;
+        margin: 0 0 0 .5rem;
+        border: none;
+        width: 55px;
+        min-width: 0;
+        background: transparent;
+        text-align: left;
+    }
+}
+
+// CURRENCY Symbol
+
+.invoice-edit{
+    .rate,
+.price,
+.sum,
+.tax,
+#total_price,
+#total_tax {
+    &:before {
+        content: '€';
+    }
+}
+    .me,
+.info,
+.bank,
+.smallme,
+.client,
+.bill,
+.details {
+    padding: 15px;
+}
+
+
+}
+
+.invoice-logo img {
+    display: block;
+    vertical-align: top;
+    width: 50px;
+}
+
+
+
+/**
+ * INVOICELIST BODY
+ */
+
+.invoicelist-body {
+    margin: 1rem;
+    table {
+        width: 100%;
+    }
+    thead {
+        text-align: left;
+        border-bottom: 2pt solid #666;
+    }
+    td,
+    th {
+        position: relative;
+        padding: 1rem;
+    }
+    tr:nth-child(even) {
+        background: $white-light;
+    }
+    tr {
+        &:hover {
+            .removeRow {
+                display: block;
+            }
+        }
+    }
+    input {
+        display: inline;
+        margin: 0;
+        border: none;
+        width: 80%;
+        min-width: 0;
+        background: transparent;
+        text-align: left;
+    }
+    .control {
+        display: inline-block;
+        color: white;
+        background: $primary;
+        padding: 3px 7px;
+        font-size:  .9rem;
+        text-transform: uppercase;
+        cursor: pointer;
+        &:hover {
+            background: lighten($primary, 5%);
+        }
+    }
+    .newRow {
+        margin: .5rem 0;
+        float: left;
+    }
+    .removeRow {
+        display: none;
+        position: absolute;
+        top:  .1rem;
+        bottom:  .1rem;
+        left: -1.3rem;
+        font-size:  .7rem;
+        border-radius: 3px 0 0 3px;
+        padding:  .5rem;
+    }
+}
+
+
+/**
+ * INVOICE LIST FOOTER
+ */
+
+.invoicelist-footer {
+    margin: 1rem;
+    table {
+        float: right;
+        width: 25%;
+        td {
+            padding: 1rem 2rem 0 1rem;
+            text-align: right;
+        }
+        tr:nth-child(2) {
+            td {
+                padding-top: 0;
+            }
+        }
+        #total_price {
+            font-size: 2rem;
+            color: $primary;
+        }
+    }
+}
+
+
+/**
+ * NOTE
+ */
+
+.note {
+    margin: 75px 15px;
+    .hidenote & {
+        display: none;
+    }
+    h2 {
+        margin: 0;
+        font-size: 12px;
+        font-weight: bold;
+    }
+    p {
+        font-size: 12px;
+        padding: 0px 5px;
+    }
+}
+
+
+/**
+ * FOOTER
+ */
+
+footer {
+    display: block;
+    margin: 1rem 0;
+    padding: 1rem 0 0;
+    p {
+        font-size: 12px;
+    }
+}
+
+
+/**
+ * PRINT STYLE
+ */
+
+@media print {
+    .header,
+    .sidebar,
+    .chat-sidebar,
+    .control,
+    .control-bar {
+        display: none !important;
+    }
+    [contenteditable] {
+        &:hover,
+        &:focus {
+            outline: none;
+        }
+    }
+}
--- a/web/bsadmin/assets/sass/invoice.scss
+++ b/web/bsadmin/assets/sass/invoice.scss
@@ -0,0 +1,156 @@
+@import "variable"; // variable
+
+
+#invoice {
+    position: relative;
+    /*  top: -290px;*/
+    margin-bottom: 120px;
+    /*  width: 700px;*/
+    background: $white;
+    padding: 30px;
+}
+
+#invoice-table {
+    /* Targets all id with 'col-' */
+    border-bottom: 1px solid$border;
+    padding: 30px 0px;
+}
+
+#invoice-top {
+    min-height: 120px;
+}
+
+#invoice-mid {
+    min-height: 120px;
+}
+
+#invoice-bot {
+    min-height: 250px;
+}
+
+.invoice-logo {
+    float: left;
+    height: 60px;
+    width: 60px;
+    background: url(http://michaeltruong.ca/images/logo1.png) no-repeat;
+    background-size: 60px 60px;
+}
+
+.clientlogo {
+    float: left;
+    height: 60px;
+    width: 60px;
+    background: url(http://michaeltruong.ca/images/client.jpg) no-repeat;
+    background-size: 60px 60px;
+    border-radius: 50px;
+}
+
+.invoice-info {
+    display: block;
+    float: left;
+    margin-left: 20px;
+    h2{
+        color: $text;
+        font-size: 14px;
+    }
+    p{
+        font-size: 12px;
+    }
+}
+
+.title {
+    float: right;
+    h4{
+        color: $text;
+        text-align: right;
+    }
+}
+
+.title p {
+    text-align: right;
+    font-size: 12px;
+}
+
+#project {
+    margin-left: 52%;
+    p{
+        font-size: 12px;
+    }
+}
+
+#invoice-table {
+    h2{
+        font-size: 18px;
+    }
+}
+
+.tabletitle {
+    padding: 5px;
+    background:$border;
+}
+
+.service {
+    border: 1px solid$border;
+}
+
+.table-item {
+    width: 50%;
+    
+}
+
+.itemtext {
+    font-size:  .9em;
+}
+
+#legalcopy {
+    margin-top: 30px;
+    p{
+        font-size: 12px;
+    }
+}
+
+//form {
+//    float: right;
+//    margin-top: 30px;
+//    text-align: right;
+//}
+
+.effect2 {
+    position: relative;
+}
+
+.effect2:before,
+.effect2:after {
+    z-index: -1;
+    position: absolute;
+    content: "";
+    bottom: 15px;
+    left: 10px;
+    width: 50%;
+    top: 80%;
+    max-width: 300px;
+    background: #777;
+    -webkit-box-shadow: 0 15px 10px #777;
+    -moz-box-shadow: 0 15px 10px #777;
+    box-shadow: 0 15px 10px #777;
+    -webkit-transform: rotate(-3deg);
+    -moz-transform: rotate(-3deg);
+    -o-transform: rotate(-3deg);
+    -ms-transform: rotate(-3deg);
+    transform: rotate(-3deg);
+}
+
+.effect2:after {
+    -webkit-transform: rotate(3deg);
+    -moz-transform: rotate(3deg);
+    -o-transform: rotate(3deg);
+    -ms-transform: rotate(3deg);
+    transform: rotate(3deg);
+    right: 10px;
+    left: auto;
+}
+
+.legal {
+    width: 70%;
+}
+
--- a/web/bsadmin/assets/sass/login.scss
+++ b/web/bsadmin/assets/sass/login.scss
@@ -0,0 +1,85 @@
+@import "variable"; // variable
+.login-logo {
+    text-align: center;
+    margin-bottom: 15px;
+    span {
+        color: $white;
+        font-size: 24px;
+    }
+    img{
+        height: 75px;
+    }
+}
+
+.login-content {
+    margin: 100px 0;
+}
+
+.login-form {
+    background: $white;
+    padding: 30px 30px 20px;
+    border-radius: 2px;
+    h4 {
+        color: $text;
+        text-align: center;
+        margin-bottom: 50px;
+    }
+    .checkbox {
+        color: $text;
+        label {
+            text-transform: none;
+        }
+    }
+    .btn {
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 14px;
+        padding: 15px;
+        border: 0px;
+        //        font-family: $mol;
+    }
+    label {
+        color: $text;
+        text-transform: uppercase;
+//        font-family: $mol;
+        a{
+            color: $primary;
+        }
+    }
+}
+
+.social-login-content {
+    margin: 0px -30px;
+    border-top: 1px solid $border;
+    border-bottom: 1px solid $border;
+    padding: 30px 0px;
+    background: #fcfcfc;
+}
+
+.social-button {
+    padding: 0 30px;
+    i{
+        padding: 19px;
+    }
+}
+
+
+.register-link{
+    a{
+        color: $primary;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/web/bsadmin/assets/sass/menu-upload.scss
+++ b/web/bsadmin/assets/sass/menu-upload.scss
@@ -0,0 +1,81 @@
+@import "variable"; // variable
+.dark-browse-input-box {
+    //  background: $white;
+    border-radius: 0;
+    -webkit-border-radius: 0 !important;
+    -moz-border-radius: 0 !important;
+    -webkit-box-shadow: none !important;
+    -moz-box-shadow: none !important;
+    box-shadow: none !important;
+    font-size: 12px;
+    color: #000000;
+    border: 1px solid $border;
+    .dark-input-button {
+        border-radius: 0;
+        -webkit-border-radius: 0 !important;
+        -moz-border-radius: 0 !important;
+        background: $white;
+        border: none !important;
+        color: $primary;
+        i {
+            font-weight: bold;
+            font-size: 17px;
+        }
+        &:hover {
+            background: $white;
+            color: $primary;
+            -webkit-transition: all 0.3s;
+            -moz-transition: all 0.3s;
+            transition: all 0.3s;
+            border: none !important;
+        }
+        &:focus {
+            outline: none;
+            border: none !important;
+            background: none !important;
+        }
+    }
+}
+
+.file-input {
+    position: relative;
+    font-size: 14px;
+    //  color: #555;
+}
+
+.file-input label {
+    position: absolute;
+    top: -2px;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    &:focus {
+        outline: none;
+        border: none !important;
+        background: none !important;
+    }
+}
+
+.file-input .btn {
+    position: absolute;
+    right: 6px;
+    top: 7px;
+    bottom: 6px;
+    max-width: 100px;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 12px;
+    line-height: 32px;
+}
+
+.file-input .btn input {
+    width: 0;
+    height: 0;
+}
+
+.file-input .file-name {
+    float: left;
+    width: 100%;
+    border: 0;
+    background: transparent;
+}
--- a/web/bsadmin/assets/sass/modal.scss
+++ b/web/bsadmin/assets/sass/modal.scss
@@ -0,0 +1,20 @@
+@import "variable"; // variable
+.modal-dialog {
+    margin: 30px auto;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%) !important;
+    width: 70%;
+}
+
+.modal-header {
+    .close {
+        font-size: 14px;
+        margin-right: 15px;
+        margin-top: 5px;
+    }
+}
+
+.modal-content {
+  border-radius: 3px;
+}
--- a/web/bsadmin/assets/sass/morris-chart.scss
+++ b/web/bsadmin/assets/sass/morris-chart.scss
@@ -0,0 +1,26 @@
+@import "variable"; // variable
+
+.morris-hover {
+	position:absolute;
+	z-index:1;
+}
+
+.morris-hover.morris-default-style .morris-hover-row-label {
+	font-weight:bold;
+	margin:0.25em 0
+}
+.morris-hover.morris-default-style .morris-hover-point {
+	white-space:nowrap;
+	margin:0.1em 0
+}
+.morris-hover.morris-default-style {
+    border-radius: 2px;
+    padding: 10px 12px;
+    color: #666;
+    background:rgba(0, 0, 0, 0.7);
+    border: none;
+    color: #fff!important ;
+}
+ .morris-hover-point {
+      color: rgba(257, 257, 257, 0.8)!important ;
+   }
--- a/web/bsadmin/assets/sass/nestable.scss
+++ b/web/bsadmin/assets/sass/nestable.scss
@@ -0,0 +1,5 @@
+@import "variable"; // variable
+
+.nestable-cart{
+  overflow: hidden;
+}
--- a/web/bsadmin/assets/sass/order-list.scss
+++ b/web/bsadmin/assets/sass/order-list.scss
@@ -0,0 +1,27 @@
+@import "variable"; // variable
+.order-list-item {
+    table {
+        tbody>tr>td {
+            padding-top: 8px;
+            border-top: 1px solid $border;
+        }
+        thead>tr>th {
+            border-bottom: 1px solid $border;
+        }
+    }
+    thead {
+        background: $primary;
+        text-align: left;
+        th {
+            color: $white;
+            font-weight: bold;
+        }
+    }
+    tbody {
+        background: $white;
+        text-align: left;
+        td {
+            color: #444444;
+        }
+    }
+}
--- a/web/bsadmin/assets/sass/order-progress.scss
+++ b/web/bsadmin/assets/sass/order-progress.scss
@@ -0,0 +1,35 @@
+@import "variable"; // variable
+
+
+.current-progress {
+  margin-top: 15px;
+}
+
+
+
+.progress-content {
+  margin-bottom: 20px;
+}
+
+.progress-content {
+    &:last-child{
+        margin-bottom: 0px;
+    }
+  
+}
+
+
+.current-progressbar{
+    margin-top: 3px;
+    .progress{
+        height: 15px;
+        margin: 0px;
+        box-shadow: none;
+    }
+    .progress-bar{
+        box-shadow: 0px;
+        line-height: 14px;
+        font-size: 11px;
+         box-shadow: none;
+    }
+}
--- a/web/bsadmin/assets/sass/panel.scss
+++ b/web/bsadmin/assets/sass/panel.scss
@@ -0,0 +1,91 @@
+@import "variable"; // variable
+.panel {
+    border-radius: 0;
+    margin: 15px 0;
+}
+
+.panel-body {
+    font-family: $mol;
+}
+
+
+
+//.panel-default{
+//    border-color: inherit;
+//    .panel-heading{
+//        background: inherit;
+//        border-color: inherit;
+//    }
+//    
+//}
+.panel-primary {
+    border-color: $primary;
+    .panel-heading {
+        background: $primary;
+        border-color: $primary;
+        color: $white;
+    }
+}
+
+.panel-success {
+    border-color: $success;
+    .panel-heading {
+        background: $success;
+        border-color: $success;
+        color: $white;
+    }
+}
+
+.panel-info {
+    border-color: $info;
+    .panel-heading {
+        background: $info;
+        border-color: $info;
+        color: $white;
+    }
+}
+
+.panel-danger {
+    border-color: $danger;
+    .panel-heading {
+        background: $danger;
+        border-color: $danger;
+        color: $white;
+    }
+}
+
+.panel-warning {
+    border-color: $warning;
+    .panel-heading {
+        background: $warning;
+        border-color: $warning;
+        color: $white;
+    }
+}
+
+.panel-pink {
+    border-color: $pink;
+    .panel-heading {
+        background: $pink;
+        border-color: $pink;
+        color: $white;
+    }
+}
+
+.panel-dark {
+    border-color: $dark;
+    .panel-heading {
+        background: $dark;
+        border-color: $dark;
+        color: $white;
+    }
+}
+
+.panel-white {
+    border-color: $black;
+    .panel-heading {
+        background: $white;
+        border-color: $black;
+        color: $black;
+    }
+}
--- a/web/bsadmin/assets/sass/products_1.scss
+++ b/web/bsadmin/assets/sass/products_1.scss
@@ -0,0 +1,48 @@
+@import "variable"; // variable
+.products_1 {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    .pr_img_price {
+        position: relative;
+        .product_price {
+            min-width: 50px;
+            min-height: 50px;
+            background: $success;
+            border-radius: 100%;
+            position: absolute;
+            top: 0;
+            right: 0;
+            p {
+                padding-top: 15px;
+                color: $white;
+                font-size: 14px;
+                font-weight: 600;
+            }
+        }
+    }
+    .product_details {
+        .product_name {
+            padding-top: 30px;
+            h4 {
+                //        font-size: 15px;
+                //        font-weight: 600;
+            }
+        }
+        .product_des {
+            //      padding-top: 10px;
+            p {
+                //        font-size: 11px;
+                //        font-style: italic;
+            }
+        }
+        .prdt_add_to_cart {
+            padding-top: 10px;
+            button {
+                //        font-size: 11px;
+                padding: 10px 20px;
+                text-transform: uppercase;
+                font-weight: 600;
+            }
+        }
+    }
+}
--- a/web/bsadmin/assets/sass/products_2.scss
+++ b/web/bsadmin/assets/sass/products_2.scss
@@ -0,0 +1,41 @@
+@import "variable"; // variable
+
+
+.product-2-details{
+  .table>tbody>tr>td{
+    border: none;
+  }
+  .product-2-img{ }
+
+  .product-2-des{
+    margin-top: 25px;
+    .product_name{
+      h4{
+        font-size: 15px;
+        font-weight: 600;
+      }
+    }
+    .product_des{
+      p{
+        font-size: 13px;
+        font-style: italic;
+      }
+    }
+  }
+
+
+
+.product-2-button{
+  border-left: 1px solid $border;
+  margin-top: 25px;
+  .prdt_add_to_curt{
+    padding-top: 10px;
+    button{
+      font-size: 11px;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+  }
+}
+
+}
--- a/web/bsadmin/assets/sass/products_3.scss
+++ b/web/bsadmin/assets/sass/products_3.scss
@@ -0,0 +1,33 @@
+@import "variable"; // variable
+
+.product-3-img{
+  img{
+    width: 100%;
+  }
+}
+
+.product_details_3{
+    padding: 15px 0px;
+  .product_name{
+    h4{
+      font-size: 15px;
+      font-weight: 600;
+    }
+  }
+  .product_des{
+    padding-bottom: 5px;
+    p{
+//      font-size: 11px;
+//      font-style: italic;
+    }
+  }
+
+  .prdt_add_to_curt{
+    padding-top: 10px;
+    button{
+//      font-size: 11px;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+  }
+}
--- a/web/bsadmin/assets/sass/profile.scss
+++ b/web/bsadmin/assets/sass/profile.scss
@@ -0,0 +1,142 @@
+@import "variable"; // variable
+.user-work,
+.user-skill {
+    h4 {
+        font-size: 14px;
+        position: relative;
+        margin-bottom: 15px;
+        padding: 5px 0px;
+        border-bottom: 1px solid $border;
+        font-family: $mol;
+    }
+}
+
+.work-content {
+    margin-bottom: 15px;
+    h3 {
+        font-size: 15px;
+        margin-bottom: 5px;
+    }
+}
+
+.user-skill {
+    li {
+        a {
+            line-height: 25px;
+        }
+    }
+}
+
+.user-profile-name {
+    display: inline-block;
+    font-size: 20px;
+}
+
+.user-Location {
+    display: inline-block;
+    font-size: 12px;
+    margin-left: 10px;
+    font-family: $mol;
+    i {
+        font-size: 14px;
+    }
+}
+
+.user-job-title {
+    font-size: 14px;
+    padding-bottom: 5px;
+    color: $primary;
+}
+
+.ratings {
+    h4 {
+        font-size: 12px;
+        text-transform: uppercase;
+        padding-top: 10px;
+        padding-bottom: 2px;
+    }
+    span {
+        margin-right: 10px;
+    }
+}
+
+.rating-star {
+    margin-bottom: 10px;
+}
+
+.user-send-message {
+    margin-top: 15px;
+}
+
+.user-profile-tab {
+    margin-top: 15px;
+    li {
+        a {
+            padding: 7px 40px 7px 0px;
+        }
+    }
+}
+
+.contact-information,
+.basic-information{
+    margin: 10px 0px;
+    h4 {
+        font-size: 12px;
+        text-transform: uppercase;
+        padding-top: 10px;
+        padding-bottom: 15px;
+        font-family: $mol;
+        
+    }
+}
+
+.contact-title {
+  display: inline-block;
+  padding-bottom: 10px;
+  width: 100px;
+}
+
+
+.phone-number,
+.mail-address,
+.contact-email,
+.contact-website,
+.contact-skype,
+.birth-date,
+.gender{
+    font-family: $mol;
+}
+
+
+
+.profile-widget {
+  margin: 0;
+  text-align: center;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/web/bsadmin/assets/sass/progress-bar.scss
+++ b/web/bsadmin/assets/sass/progress-bar.scss
@@ -0,0 +1,49 @@
+@import "variable"; // variable
+
+
+
+.progress-bar {
+  background-color: $primary;
+}
+
+
+
+.progress-bar-primary {
+  background-color: $primary;
+}
+
+
+
+.progress-bar-success {
+  background-color: $success;
+}
+
+
+
+.progress-bar-info {
+  background-color: $info;
+}
+
+
+
+.progress-bar-danger {
+  background-color: $danger;
+}
+
+
+
+
+.progress-bar-warning {
+  background-color: $warning;
+}
+
+
+
+.progress-bar-pink {
+  background-color: $pink;
+}
+
+
+
+
+
--- a/web/bsadmin/assets/sass/recent-comments.scss
+++ b/web/bsadmin/assets/sass/recent-comments.scss
@@ -0,0 +1,38 @@
+@import "variable"; // variable
+.recent-comment {
+    .media {
+        border-bottom: 1px solid $border;
+        padding-bottom: 10px;
+    }
+    .media-left {
+        padding-right: 25px;
+        img {
+            border-radius: 100px;
+        }
+    }
+    .media-body {
+        h4 {
+            font-size: 16px;
+        }
+        p {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.comment-action {
+    float: left;
+    .badge {
+        text-transform: uppercase;
+        font-family: $mol;
+    }
+    i {
+        padding: 0px 5px;
+    }
+}
+
+.comment-date {
+    float: right;
+    color: $text;
+    font-family: $mol;
+}
--- a/web/bsadmin/assets/sass/recent-message.scss
+++ b/web/bsadmin/assets/sass/recent-message.scss
@@ -0,0 +1,36 @@
+@import "variable"; // variable
+.recent-meaasge {
+    margin-top: 15px;
+    .media {
+        border-bottom: 1px solid $border;
+//        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .media-left {
+        padding-right: 25px;
+        img {
+            border-radius: 100px;
+        }
+    }
+    .media-body {
+        position: relative;
+        h4 {
+            font-size: 16px;
+        }
+        p {
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+    }
+}
+
+
+.meaasge-date {
+    float: right;
+    color: $text;
+//    font-family: $mol;
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 12px;
+}
--- a/web/bsadmin/assets/sass/scrollable.scss
+++ b/web/bsadmin/assets/sass/scrollable.scss
@@ -0,0 +1,19 @@
+@import "variable"; // variable
+.example {
+    overflow: hidden;
+    border: 1px solid $border;
+    -webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
+    -moz-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
+    box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
+    background-color: $white-light;
+    text-align: justify;
+    p {
+        padding: 20px 20px 0px 20px;
+        font-size: 12px;
+    }
+}
+
+.box,
+.simple {
+    height: 300px;
+}
--- a/web/bsadmin/assets/sass/style.scss
+++ b/web/bsadmin/assets/sass/style.scss
@@ -0,0 +1,54 @@
+/*
+    Template: Unix
+    Author: VueJS Admin
+    Url: https://vuejsadmin.com
+    Developer by: VueJS Admin
+
+*/
+
+@import "variable"; // variable
+@import "fonts"; // fonts.scss
+@import "card"; // card.scss
+@import "badge"; // badge.scss
+@import "tab"; // tab.scss
+@import "modal"; // modal.scss
+@import "timeline"; // timeline.scss
+@import "data-table"; // data-tableless
+@import "panel"; // card.scss
+@import "button"; // button.scss
+@import "header"; // home.scss
+@import "gmap"; // gmap.scss
+@import "chat"; // chat.scss
+@import "carousel"; // carousel.scss
+@import "weather"; // weather.scss
+@import "invoice-edit"; // invoice-edit.scss
+@import "invoice"; // invoice.scss
+@import "widget-stat"; // widget-stat.scss
+@import "recent-comments"; // recent-comments.scss
+@import "recent-message"; // recent-message.scss
+@import "forms"; // form.scss
+@import "compose-email"; // compose email.scss
+@import "progress-bar"; // progressbar.scss
+@import "todo-list"; // todo-list.scss
+@import "datamap"; // datamap.scss
+@import "table"; // table.scss
+@import "order-progress"; // order-progress.scss
+@import "login"; // login.scss
+@import "chart"; // chart.scss
+@import "nestable"; // nestable.scss
+@import "profile"; // profile.scss
+@import "ui-element-basic"; // ui-element-basic.scss
+@import "calendar"; // calendar.scss
+@import "flot-chart"; // flot-chart.scss
+@import "morris-chart"; // morris-chart.scss
+@import "products_1"; // fonts.scss
+@import "products_2"; // fonts.scss
+@import "products_3"; // fonts.scss
+@import "favourite_menu"; // fonts.scss
+@import "order-list"; // order-list.scss
+@import "booking-system"; // booking-system.scss
+@import "scrollable"; // scrollable.scss
+@import "vector-map"; // vector-map.scss
+@import "menu-upload"; // menu-upload.scss
+@import "global"; // fonts.scss
+
--- a/web/bsadmin/assets/sass/tab.scss
+++ b/web/bsadmin/assets/sass/tab.scss
@@ -0,0 +1,182 @@
+@import "variable"; // variable
+.nav-tabs > li > a {
+    border-radius: 0px;
+    padding: 7px 24px;
+    margin-right: 0px;
+}
+
+.tab-pane {
+    color: $text;
+    line-height: 26px;
+    padding-top: 15px;
+}
+
+
+/*    Custom Tab
+----------------------*/
+
+.custom-tab {
+    .nav-tabs > li.active > a,
+    .nav-tabs > li.active > a:focus,
+    .nav-tabs > li.active > a:hover {
+        border-color: transparent transparent;
+        color: $primary;
+        position: relative;
+        &:after {
+            background: $primary;
+            bottom: -1px;
+            content: "";
+            height: 2px;
+            left: 0;
+            position: absolute;
+            right: 0;
+            width: 100%;
+            z-index: 999;
+        }
+    }
+    .nav > li > a:focus,
+    .nav > li > a:hover {
+        background-color: transparent;
+        text-decoration: none;
+        border: 1px solid transparent;
+    }
+}
+
+/*    Vertical Tab Left
+----------------------*/
+
+.vertical-tab-left {
+    .nav-tabs {
+        float: left;
+        border-right: 1px solid $border;
+        border-bottom: 0px;
+    }
+    .nav-tabs > li {
+        float: none;
+    }
+    .nav-tabs > li.active > a,
+    .nav-tabs > li.active > a:focus,
+    .nav-tabs > li.active > a:hover {
+        background: $primary;
+        color: $white;
+        border-color: transparent transparent;
+    }
+    .nav > li > a:focus,
+    .nav > li > a:hover {
+        background-color: transparent;
+        text-decoration: none;
+        border: 1px solid transparent;
+    }
+    .tab-pane {
+//  padding-left: 115px;
+  padding-top: 0;
+}
+}
+
+
+/*    Vertical Tab Right
+----------------------*/
+
+.vertical-tab-right {
+    .nav-tabs {
+        float: right;
+        border-left: 1px solid $border;
+        border-bottom: 0px;
+    }
+    .nav-tabs > li {
+        float: none;
+    }
+    .nav-tabs > li.active > a,
+    .nav-tabs > li.active > a:focus,
+    .nav-tabs > li.active > a:hover {
+        background: $primary;
+        color: $white;
+        border-color: transparent transparent;
+    }
+    .nav > li > a:focus,
+    .nav > li > a:hover {
+        background-color: transparent;
+        text-decoration: none;
+        border: 1px solid transparent;
+    }
+    .tab-pane {
+//  padding-left: 115px;
+  padding-top: 0;
+}
+}
+
+
+
+
+
+
+
+//
+//
+//.tabs-left, .tabs-right {
+//  border-bottom: none;
+//  padding-top: 2px;
+//}
+//.tabs-left {
+//  border-right: 1px solid $border;
+//}
+//.tabs-right {
+//  border-left: 1px solid $border;
+//}
+//.tabs-left>li, .tabs-right>li {
+//  float: none;
+//  margin-bottom: 2px;
+//}
+//.tabs-left>li {
+//  margin-right: -1px;
+//}
+//.tabs-right>li {
+//  margin-left: -1px;
+//}
+//.tabs-left>li.active>a,
+//.tabs-left>li.active>a:hover,
+//.tabs-left>li.active>a:focus {
+//  border-bottom-color: $border;
+//  border-right-color: transparent;
+//}
+//
+//.tabs-right>li.active>a,
+//.tabs-right>li.active>a:hover,
+//.tabs-right>li.active>a:focus {
+//  border-bottom: 1px solid $border;
+//  border-left-color: transparent;
+//}
+//.tabs-left>li>a {
+//  border-radius: 4px 0 0 4px;
+//  margin-right: 0;
+//  display:block;
+//}
+//.tabs-right>li>a {
+//  border-radius: 0 4px 4px 0;
+//  margin-right: 0;
+//}
+//
+//
+//
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/web/bsadmin/assets/sass/table.scss
+++ b/web/bsadmin/assets/sass/table.scss
@@ -0,0 +1,54 @@
+@import "variable"; // variable
+thead {
+    tr {
+        th {
+            color: $text;
+            font-weight: normal;
+//            font-family: $mol;
+            text-transform: uppercase;
+            &:last-child{
+                text-align: right;
+            }
+        }
+    }
+}
+
+tbody {
+    tr {
+        th {
+            color: $text;
+            font-family: $mol;
+            font-weight: normal;
+            
+        }
+        td {
+            font-family: $mol;
+            color: $text-light;
+            &:last-child{
+                text-align: right;
+            }
+        }
+    }
+}
+
+.table > tbody > tr > td,
+.table > tbody > tr > th,
+.table > tfoot > tr > td,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > thead > tr > th {
+//    border-top: 1px solid $border;
+//    padding: 8px;
+    line-height: 32px;
+    vertical-align: top;
+}
+
+.table > thead > tr > th {
+    border-bottom: 1px solid $border;
+}
+
+.table {
+    .badge {
+        text-transform: uppercase;
+    }
+}
--- a/web/bsadmin/assets/sass/timeline.scss
+++ b/web/bsadmin/assets/sass/timeline.scss
@@ -0,0 +1,111 @@
+@import "variable"; // variable
+
+.timeline {
+  list-style: none;
+  padding: 20px 0 20px;
+  position: relative;
+}
+
+.timeline:before {
+  top: 20px;
+  bottom: 0;
+  position: absolute;
+  content: " ";
+  width: 3px;
+  background-color: $border;
+  left: 25px;
+  margin-right: -1.5px;
+}
+
+.timeline > li {
+  margin-bottom: 5px;
+  position: relative;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+  content: " ";
+  display: table;
+}
+
+.timeline > li:after {
+  clear: both;
+}
+
+.timeline > li > .timeline-panel {
+  width: #{"calc(100% - 70px)"};
+  float: right;
+  border: 1px solid $border;
+  border-radius: 2px;
+  padding: 5px 20px;
+  position: relative;
+//  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+//  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+}
+
+.timeline > li > .timeline-panel:before {
+  position: absolute;
+  top: 26px;
+  left: -15px;
+  display: inline-block;
+  border-top: 15px solid transparent;
+  border-right: 15px solid $border;
+  border-left: 0 solid $border;
+  border-bottom: 15px solid transparent;
+  content: " ";
+}
+
+.timeline > li > .timeline-panel:after {
+  position: absolute;
+  top: 27px;
+  left: -14px;
+  display: inline-block;
+  border-top: 14px solid transparent;
+  border-right: 14px solid$white;
+  border-left: 0 solid$white;
+  border-bottom: 14px solid transparent;
+  content: " ";
+}
+
+.timeline > li > .timeline-badge {
+  color:$white;
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+  font-size: 1.4em;
+  text-align: center;
+  position: absolute;
+  top: 25px;
+  left: 8px;
+  margin-right: -25px;
+  background-color: $pink;
+  z-index: 100;
+  border-top-right-radius: 50%;
+  border-top-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+
+.timeline-body > p {
+  font-size: 12px;
+}
+
+.timeline-badge.primary {
+  background-color: $primary !important;
+}
+
+.timeline-badge.success {
+  background-color: $success !important;
+}
+
+.timeline-badge.warning {
+  background-color: $warning !important;
+}
+
+.timeline-badge.danger {
+  background-color: $danger !important;
+}
+
+.timeline-badge.info {
+  background-color: $info !important;
+}
--- a/web/bsadmin/assets/sass/todo-list.scss
+++ b/web/bsadmin/assets/sass/todo-list.scss
@@ -0,0 +1,144 @@
+@import "variable"; // variable
+
+
+/* TO DO LIST
+================================================== */
+
+
+/* WebKit browsers */
+
+
+/* Mozilla Firefox 4 to 18 */
+
+
+/* Mozilla Firefox 19+ */
+
+
+/* Internet Explorer 10+ */
+
+//@keyframes "collapseItem" {
+//    0% {
+//        -ms-transform: perspective(500px) rotateX(0deg);
+//        transform: perspective(500px) rotateX(0deg);
+//    }
+//    100% {
+//        -ms-transform: perspective(500px) rotateX(-90deg);
+//        transform: perspective(500px) rotateX(-90deg);
+//    }
+//}
+//
+//@-webkit-keyframes "collapseItem" {
+//    0% {
+//        -webkit-transform: perspective(500px) rotateX(0deg);
+//    }
+//    100% {
+//        -webkit-transform: perspective(500px) rotateX(-90deg);
+//    }
+//}
+
+.tdl-holder {
+    margin: 0px auto;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    li {
+        background-color: $white;
+        border-bottom: 1px solid $border;
+        color: $text-light;
+        list-style: outside none none;
+        margin: 0;
+        padding: 0;
+        span {
+            margin-left: 30px;
+            font-family: $mol;
+            vertical-align: middle;
+            -webkit-transition: all .2s linear;
+            -moz-transition: all .2s linear;
+            -o-transition: all .2s linear;
+            transition: all .2s linear;
+        }
+    }
+    label {
+        cursor: pointer;
+        display: block;
+        line-height: 52px;
+        padding: 0 15px;
+        position: relative;
+        margin: 0px!important;
+        &:hover {
+            background-color: $white-light;
+            color: $text-light;
+            a {
+                display: block;
+            }
+        }
+        a {
+//            background-color: $background_color_1;
+            border-radius: 50%;
+            color: $text-light;
+            display: none;
+            float: right;
+            font-weight: bold;
+            line-height: normal;
+            height: 16px;
+            margin-top: 20px;
+            text-align: center;
+            text-decoration: none;
+            width: 16px;
+            -webkit-transition: all .2s linear;
+            -moz-transition: all .2s linear;
+            -o-transition: all .2s linear;
+            transition: all .2s linear;
+            &:hover {
+//                background-color: $background_color_4;
+//                color: $color_4;
+            }
+        }
+    }
+    input[type="checkbox"] {
+        cursor: pointer;
+        opacity: 0;
+        position: absolute;
+        &+i {
+            background-color: $white;
+            border: 1px solid $border;
+            display: block;
+            height: 18px;
+            position: absolute;
+            top: 20px;
+            width: 18px;
+            z-index: 1;
+        }
+        &:checked {
+            &+i {
+                &::after {
+//                    background-color: #777;
+//                    border-radius: 50%;
+                    content: "\e64c";
+                    font-family: 'themify';
+                    display: block;
+//                    height: 8px;
+                    left: 0px;
+                    position: absolute;
+                    top: -20px;
+//                    width: 8px;
+                    z-index: 2;
+                }
+            }
+            &~span {
+                color: $text-light;
+                text-decoration: line-through;
+            }
+        }
+    }
+    input[type="text"] {
+        background-color: $white-light;
+        height: 50px;
+        margin-top: 40px;
+    }
+
+}
+
--- a/web/bsadmin/assets/sass/ui-element-basic.scss
+++ b/web/bsadmin/assets/sass/ui-element-basic.scss
@@ -0,0 +1,101 @@
+@import "variable"; // variable
+
+
+/*Aleart
+-------------*/
+
+.alert-primary {
+  background-color: lighten($primary,18%);
+  border-color: lighten($primary,18%);
+  color: $primary;
+}
+
+.alert-success {
+  background-color: lighten($success,25%);
+  border-color: lighten($success,25%);
+  color: $success;
+}
+
+
+
+.alert-warning {
+  background-color: lighten($warning,25%);
+  border-color: lighten($warning,25%);
+  color: $warning;
+}
+
+
+.alert-danger {
+  background-color: lighten($danger,25%);
+  border-color: lighten($danger,25%);
+  color: $danger;
+}
+.alert-pink {
+  background-color: lighten($pink,15%);
+  border-color: lighten($pink,15%);
+  color: $pink;
+}
+
+.alert-dismissable .close, .alert-dismissible .close {
+  color: rgba(0,0,0,0.8);
+}
+
+
+
+/*    Labels
+------------------*/
+
+.label-default {
+  background-color: $default;
+}
+
+
+.label-primary {
+  background-color: $primary;
+}
+
+
+.label-success {
+  background-color: $success;
+}
+
+
+.label-info {
+  background-color: $info;
+}
+
+
+.label-danger {
+  background-color: $danger;
+}
+
+
+.label-warning {
+  background-color: $warning;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/web/bsadmin/assets/sass/variable.scss
+++ b/web/bsadmin/assets/sass/variable.scss
@@ -0,0 +1,35 @@
+//    Font Variable 
+$mont:'Quicksand', sans-serif;
+$mol: 'Quicksand', sans-serif;
+
+
+
+
+//    Color Variable 
+$primary:#f96332;
+$success:#87de75;
+$info:#03a9f4;
+$danger:#e74c3c;
+$warning:#f39c12;
+$pink:#e6a1f2;
+$dark:#252525;
+$default:#878787;
+$text:#878787;
+$text-light:#878787;
+$border:#eee;
+
+
+
+//   Solid Color 
+$white:#fff;
+$white-light:#f5f5f5;
+$black:#252525;
+$border:#e7e7e7;
+
+
+
+
+
+//    Brand color 
+$facebook:#3b5998;
+$twitter:#1da1f2;
--- a/web/bsadmin/assets/sass/vector-map.scss
+++ b/web/bsadmin/assets/sass/vector-map.scss
@@ -0,0 +1,6 @@
+@import "variable"; // Variable.sass
+
+.vmap{
+  width: 100%;
+  height: 400px;
+}
--- a/web/bsadmin/assets/sass/weather.scss
+++ b/web/bsadmin/assets/sass/weather.scss
@@ -0,0 +1,34 @@
+@import "variable"; // variable
+/*
+
+Weather
+-------------------------------------------------*/
+.weather-one, .weather-box{ 
+    position: relative;
+    i {
+        font-size: 80px;
+        position: relative;
+        top: 5px;
+    }
+    h2 {
+        display: inline-block;
+        float: right;
+        font-size: 48px;
+    }
+    .city {
+        position: absolute;
+        text-align: right;
+        top: 0px;
+        right:0;
+    }
+    .currently {
+        font-size: 16px;
+        font-weight: 400;
+        position: relative;
+        top: 25px;
+    }
+    .celcious {
+        text-align: right;
+        font-size: 20px;
+    }
+}
--- a/web/bsadmin/assets/sass/widget-stat.scss
+++ b/web/bsadmin/assets/sass/widget-stat.scss
@@ -0,0 +1,199 @@
+@import "variable"; // variable
+/*
+
+Widget list
+-------------------------------------------------*/
+
+/*    Widget One
+---------------------------*/
+
+.stat-widget-one {
+    overflow:hidden;
+    .stat-icon {
+        vertical-align: top; 
+        float:left;
+        i {
+            font-size: 30px; 
+            border-width: 3px;
+            border-style: solid;
+            border-radius: 100px;
+            padding: 15px;
+            font-weight: 900;
+            display: inline-block;
+        }
+    }
+    .stat-content {
+        margin-left: 15px;
+        margin-top: 7px;
+        float:left;
+    }
+    .stat-text {
+        font-size: 14px;
+        color: $text-light;
+    }
+    .stat-digit {
+        font-size: 24px;
+        color: $text;
+    }
+}
+
+
+/*    Widget Two
+---------------------------*/
+
+.stat-widget-two {
+    text-align: left;
+    position: relative;
+    .stat-digit {
+        font-size: 16px;
+        font-weight: 600;
+        color: $text;
+        i {
+            margin-right: 2px;
+        }
+    }
+    .stat-text {
+        font-size: 14px;
+        margin-bottom: 5px;
+        color: $text-light;
+    }
+    .progress {
+        height: 5px;
+        margin-bottom: 0px;
+        margin-top: 10px;
+        box-shadow: none;
+    }
+    .progress-bar {
+        box-shadow: none;
+    }
+    .widget-icon {
+        position: absolute;
+        right: -5px;
+        top: -10px;
+        font-size: 20px;
+    }
+}
+
+
+
+
+
+/*    Widget Three
+---------------------------*/
+
+.stat-widget-three {
+    .stat-icon {
+        display: inline-block;
+        //        background: $primary;
+        padding: 33px;
+        position: absolute;
+        line-height: 21px;
+        i {
+            font-size: 30px;
+            color: $white;
+        }
+    }
+    .stat-content {
+        //        display: inline-block;
+        text-align: center;
+        padding: 15px;
+        margin-left: 90px;
+    }
+    .stat-digit {
+        font-size: 30px;
+    }
+    .stat-text {
+        padding-top: 7px;
+    }
+}
+
+//widget four close here
+.stat-widget-four {
+    position: relative;
+    .stat-icon {
+        display: inline-block;
+        position: absolute;
+        top: 5px;
+    }
+    i {
+        display: block;
+        font-size: 36px;
+    }
+    .stat-content {
+        margin-left: 40px;
+        text-align: center;
+    }
+    .stat-heading {
+        font-size: 20px;
+    }
+}
+
+//widget five start here
+.stat-widget-five {
+    .stat-icon {
+        border-radius: 100px;
+        display: inline-block;
+        position: absolute;
+    }
+    i {
+        border-radius: 100px; 
+        display: block;
+        font-size: 30px; 
+        padding:20px;
+    }
+    .stat-content {
+        margin-left: 84px;
+        padding: 15px 0;
+        position: relative;
+        text-align: right;
+        vertical-align: middle;
+    }
+    .stat-heading {
+        text-align: right; 
+        font-size: 17px; 
+        font-weight: 200;
+    }
+}
+
+//widget six cloe here
+.stat-widget-six {
+    position: relative;
+    .stat-icon {
+        display: inline-block;
+        position: absolute;
+        top: 5px;
+    }
+    i {
+        display: block;
+        font-size: 36px;
+    }
+    .stat-content {
+        margin-left: 40px;
+        text-align: center;
+    }
+    .stat-heading {
+        font-size: 20px;
+    }
+}
+//widget six start here
+
+//widget close here
+.stat-widget-seven {
+    position: relative;
+    .stat-icon {
+        display: inline-block;
+        position: absolute;
+        top: 5px;
+    }
+    i {
+        display: block;
+        font-size: 36px;
+    }
+    .stat-content {
+        margin-left: 40px;
+        text-align: center;
+    }
+    .stat-heading {
+        font-size: 20px;
+    }
+}
				`@@ -0,0 +1,4 @@`

				`@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');`