project done before

assets/scss/paper-dashboard/_alerts.scss

@@ -0,0 +1,74 @@
+.alert{
+    border: 0;
+    border-radius: $border-radius-small;
+    color: $white-color;
+    padding-top: .9rem;
+    padding-bottom: .9rem;
+    position: relative;
+
+    &.alert-success{
+        background-color: lighten($success-color, 5%);
+    }
+
+    &.alert-danger{
+        background-color: lighten($danger-color, 5%);
+    }
+
+    &.alert-warning{
+        background-color: lighten($warning-color, 5%);
+    }
+
+    &.alert-info{
+        background-color: lighten($info-color, 5%);
+    }
+
+    &.alert-primary{
+        background-color: lighten($primary-color, 5%);
+    }
+
+    .close{
+      color: $white-color;
+      opacity: .9;
+      text-shadow: none;
+      line-height: 0;
+      outline: 0;
+
+      i.fa,
+      i.nc-icon{
+          font-size: 14px !important;
+      }
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    span[data-notify="icon"]{
+        font-size: 27px;
+        display: block;
+        left: 19px;
+        position: absolute;
+        top: 50%;
+        margin-top: -11px;
+    }
+
+    button.close{
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        margin-top: -13px;
+        width: 25px;
+        height: 25px;
+        padding: 3px;
+    }
+
+    .close ~ span{
+        display: block;
+        max-width: 89%;
+    }
+
+    &.alert-with-icon{
+        padding-left: 65px;
+    }
+}

assets/scss/paper-dashboard/_animated-buttons.scss

@@ -0,0 +1,71 @@
+//animations
+
+.icon-property{
+    @include transition($slow-transition-time, $transition-bezier);
+    position: relative;
+    display: inline-block;
+}
+
+#animated-buttons{
+    .btn{
+        i{
+            position: relative;
+            top: 3px;
+            margin-top: -3px;
+        }
+    }
+}
+
+.btn-rotate{
+    i{
+        @extend .icon-property;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include rotate-53();
+        }
+    }
+}
+
+.btn-magnify{
+    i{
+        @extend .icon-property;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include transform-scale(1.22);
+        }
+    }
+}
+
+.btn-move-left{
+    i{
+        @extend .icon-property;
+        margin-right: 0;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include transform-translate-x(-5px);
+        }
+    }
+}
+
+.btn-move-right{
+    i{
+        @extend .icon-property;
+        margin-right: 0;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include transform-translate-x(5px);
+        }
+    }
+}

assets/scss/paper-dashboard/_buttons.scss

@@ -0,0 +1,234 @@
+.btn,
+.navbar .navbar-nav > a.btn{
+    border-width: $border-thick;
+    font-weight: $font-weight-semi;
+    font-size: $font-size-small;
+    line-height: $line-height;
+    text-transform: uppercase;
+    border: none;
+    margin: 10px 1px;
+    border-radius: $border-radius-small;
+    padding: $padding-btn-vertical $padding-btn-horizontal;
+    cursor: pointer;
+
+    @include btn-styles($default-color, $default-states-color);
+    @include transition($fast-transition-time, linear);
+
+    &:hover,
+    &:focus{
+        @include opacity(1);
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+
+    .badge{
+      margin: 0;
+    }
+
+    &.btn-icon {
+        // see above for color variations
+        height: $btn-icon-size-regular;
+        min-width: $btn-icon-size-regular;
+        width: $btn-icon-size-regular;
+        padding: 0;
+        font-size: $btn-icon-font-size-regular;
+        overflow: hidden;
+        position: relative;
+        line-height: normal;
+
+        &.btn-simple{
+            padding: 0;
+        }
+
+        &.btn-sm{
+            height: $btn-icon-size-small;
+            min-width: $btn-icon-size-small;
+            width: $btn-icon-size-small;
+
+            .fa,
+            .far,
+            .fas,
+            .nc-icon{
+                font-size: $btn-icon-font-size-small;
+            }
+        }
+
+        &.btn-lg{
+            height: $btn-icon-size-lg;
+            min-width: $btn-icon-size-lg;
+            width: $btn-icon-size-lg;
+
+            .fa,
+            .far,
+            .fas,
+            .nc-icon{
+                font-size: $btn-icon-font-size-lg;
+            }
+        }
+
+        &:not(.btn-footer) .nc-icon,
+        &:not(.btn-footer) .fa,
+        &:not(.btn-footer) .far,
+        &:not(.btn-footer) .fas{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-12px, -12px);
+            line-height: 1.5626rem;
+            width: 24px;
+        }
+
+        &.btn-neutral {
+          font-size: 20px;
+        }
+    }
+
+    &:not(.btn-icon) .nc-icon{
+        position: relative;
+        top: 1px;
+    }
+}
+
+// Apply the mixin to the buttons
+// .btn-default { @include btn-styles($default-color, $default-states-color); }
+.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
+.btn-success { @include btn-styles($success-color, $success-states-color); }
+.btn-info    { @include btn-styles($info-color, $info-states-color); }
+.btn-warning { @include btn-styles($warning-color, $warning-states-color); }
+.btn-danger  { @include btn-styles($danger-color, $danger-states-color); }
+// .btn-neutral { @include btn-styles($white-color, $white-color); }
+
+.btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); }
+.btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); }
+.btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); }
+.btn-outline-info    { @include btn-outline-styles($info-color, $info-states-color); }
+.btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); }
+.btn-outline-danger  { @include btn-outline-styles($danger-color, $danger-states-color); }
+.btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color);
+    &:hover,
+    &:focus{
+        color: $default-states-color;
+        background-color: $white-color;
+    }
+}
+.btn-neutral {
+    @include btn-styles($white-color, $white-color);
+    color: $default-color;
+    &:hover,
+    &:focus{
+        color: $default-states-color;
+    }
+
+    &.btn-border{
+        &:hover,
+        &:focus{
+            color: $default-color;
+        }
+
+        &:active,
+        &.active,
+        .open > &.dropdown-toggle{
+             background-color: $white-color;
+             color: $default-color;
+        }
+    }
+
+    &.btn-link:active,
+    &.btn-link.active{
+        background-color: transparent;
+    }
+}
+
+.btn{
+     &:disabled,
+     &[disabled],
+     &.disabled{
+        @include opacity(.5);
+        pointer-events: none;
+    }
+}
+.btn-simple{
+    border: $border;
+    border-color: $default-color;
+    padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
+    background-color: $transparent-bg;
+}
+
+.btn-simple,
+.btn-link{
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background-color: $transparent-bg;
+        }
+    }
+}
+
+.btn-link{
+  border: $none;
+  padding: $padding-base-vertical $padding-base-horizontal;
+  background-color: $transparent-bg;
+}
+
+.btn-lg{
+   @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
+}
+.btn-sm{
+    @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);
+}
+
+.btn-wd {
+    min-width: 140px;
+}
+.btn-group.select{
+    width: 100%;
+}
+.btn-group.select .btn{
+    text-align: left;
+}
+.btn-group.select .caret{
+    position: absolute;
+    top: 50%;
+    margin-top: -1px;
+    right: 8px;
+}
+.btn-group {
+  .btn + .btn {
+    margin-left: -3px;
+  }
+  .btn {
+    &:focus {
+      background-color: $info-color !important;
+    }
+  }
+}
+
+
+.btn-round{
+    border-width: $border-thin;
+    border-radius: $btn-round-radius;
+    padding-right: $padding-round-horizontal;
+    padding-left: $padding-round-horizontal;
+
+    &.btn-simple{
+        padding: $padding-btn-vertical - 1  $padding-round-horizontal - 1;
+    }
+}
+
+.no-caret {
+  &.dropdown-toggle::after {
+    display: none;
+  }
+}

assets/scss/paper-dashboard/_cards.scss

@@ -0,0 +1,140 @@
+.card{
+  border-radius: $border-radius-extreme;
+  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
+  background-color: #FFFFFF;
+  color: $card-black-color;
+  margin-bottom: 20px;
+  position: relative;
+  border: 0 none;
+
+  -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+
+    .card-body{
+        padding: 15px 15px 10px 15px;
+
+        &.table-full-width{
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    .card-header{
+      &:not([data-background-color]){
+        background-color: transparent;
+      }
+      padding: 15px 15px 0;
+      border: 0;
+
+      .card-title{
+          margin-top: 10px;
+      }
+    }
+
+    .map{
+        border-radius: $border-radius-small;
+
+        &.map-big{
+          height: 400px;
+        }
+    }
+
+    &[data-background-color="orange"]{
+        background-color: $primary-color;
+
+        .card-header{
+            background-color: $primary-color;
+        }
+
+        .card-footer{
+            .stats{
+                color: $white-color;
+            }
+        }
+    }
+
+    &[data-background-color="red"]{
+        background-color: $danger-color;
+    }
+
+    &[data-background-color="yellow"]{
+        background-color: $warning-color;
+    }
+
+    &[data-background-color="blue"]{
+        background-color: $info-color;
+    }
+
+    &[data-background-color="green"]{
+        background-color: $success-color;
+    }
+
+    .image{
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+    }
+
+    .avatar{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-bottom: 15px;
+    }
+
+    .numbers {
+      font-size: 2em;
+    }
+
+    .big-title {
+      font-size: 12px;
+      text-align: center;
+      font-weight: 500;
+      padding-bottom: 15px;
+    }
+
+    label{
+        font-size: $font-size-small;
+        margin-bottom: 5px;
+        color: $dark-gray;
+    }
+
+    .card-footer{
+        background-color: transparent;
+        border: 0;
+
+
+        .stats{
+            i{
+                margin-right: 5px;
+                position: relative;
+                top: 0px;
+                color: $default-color;
+            }
+        }
+
+        .btn{
+            margin: 0;
+        }
+    }
+
+    &.card-plain{
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 0;
+
+
+        .card-body{
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+
+        img{
+            border-radius: $border-radius-extreme;
+        }
+    }
+}

assets/scss/paper-dashboard/_checkboxes-radio.scss

@@ -0,0 +1,142 @@
+.from-check,
+.form-check-radio {
+    margin-bottom: 12px;
+    position: relative;
+}
+
+.form-check {
+  padding-left: 0;
+  margin-bottom: .5rem;
+
+    .form-check-label{
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        padding-left: 35px;
+        line-height: 26px;
+        margin-bottom: 0;
+    }
+
+    .form-check-sign::before,
+    .form-check-sign::after {
+        content: " ";
+        display: inline-block;
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        left: 0;
+        cursor: pointer;
+        border-radius: 6px;
+        top: 0;
+        background-color: #AAA7A4;
+        -webkit-transition: opacity 0.3s linear;
+        -moz-transition: opacity 0.3s linear;
+        -o-transition: opacity 0.3s linear;
+        -ms-transition: opacity 0.3s linear;
+        transition: opacity 0.3s linear;
+    }
+    .form-check-sign::after {
+        font-family: 'FontAwesome';
+        content: "\f00c";
+        top: -1px;
+        text-align: center;
+        font-size: 15px;
+        opacity: 0;
+        color: #FFF;
+        border: 0;
+        background-color: inherit;
+    }
+    &.disabled{
+        .form-check-label{
+            color: $dark-gray;
+            opacity: .5;
+            cursor: not-allowed;
+        }
+    }
+
+}
+
+.form-check.disabled .form-check-label,
+.form-check.disabled .form-check-label {
+
+}
+
+.form-check input[type="checkbox"],
+.form-check-radio input[type="radio"]{
+    opacity: 0;
+    position: absolute;
+    visibility: hidden;
+}
+.form-check input[type="checkbox"]:checked + .form-check-sign::after{
+    opacity: 1;
+}
+
+.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
+.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
+    cursor: not-allowed;
+}
+
+.form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign{
+    pointer-events: none !important;
+}
+
+.form-check-radio{
+  margin-left: -3px;
+
+    .form-check-label{
+        padding-left: 2rem;
+    }
+    &.disabled{
+        .form-check-label{
+            color: $dark-gray;
+            opacity: .5;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.form-check-radio .form-check-sign::before{
+    font-family: 'FontAwesome';
+    content: "\f10c";
+    font-size: 22px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    position: absolute;
+    opacity: .50;
+    left: 5px;
+    top: -5px;
+}
+
+.form-check-label input[type="checkbox"]:checked + .form-check-sign:before{
+    background-color: #66615B;
+}
+
+.form-check-radio input[type="radio"] + .form-check-sign:after,
+.form-check-radio input[type="radio"] {
+    opacity: 0;
+    @include transition-opacity(0.3s, linear);
+    content:" ";
+    display: block;
+}
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
+    font-family: 'FontAwesome';
+    content: "\f192";
+    top: -5px;
+    position: absolute;
+    left: 5px;
+    opacity: 1;
+    font-size: 22px;
+}
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
+    opacity: 1;
+}
+
+
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
+    color: $dark-gray;
+}

assets/scss/paper-dashboard/_dropdown.scss

@@ -0,0 +1,480 @@
+.dropdown,
+.dropup,
+.bootstrap-select{
+    .dropdown-menu{
+        display: block;
+        @include opacity(0);
+        @include box-shadow($dropdown-shadow);
+        visibility: hidden;
+        position: absolute;
+        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+
+        &[x-placement="top-start"]{
+            @include transform-translate-y-dropdown(0px);
+
+        }
+        &[x-placement="bottom-start"]{
+            @include transform-translate-y-dropdown(0px);
+        }
+    }
+
+    &.show .dropdown-menu{
+        @include opacity(1);
+        visibility: visible;
+
+        &[x-placement="top-start"]{
+            @include transform-translate-y-dropdown(-50px);
+            top: auto !important;
+            bottom: 0 !important;
+
+        }
+        &[x-placement="bottom-start"]{
+            @include transform-translate-y-dropdown(50px);
+            bottom: auto !important;
+            top: 0 !important;
+        }
+    }
+
+}
+
+.dropup .dropdown-menu,
+.dropdown-btn .dropdown-menu{
+    @include transform-translate-y-dropdown(0px);
+    top: auto !important;
+    bottom: 0 !important;
+
+}
+
+.dropup.show .dropdown-menu,
+.dropdown-btn.show .dropdown-menu{
+    opacity: 1;
+    visibility: visible;
+
+    .dropdown-menu.inner{
+      @include transform-translate-y(0px);
+    }
+}
+
+.bootstrap-select.show{
+  .dropdown-menu.show{
+    &[x-placement="top-start"]{
+        @include transform-translate-y-dropdown(-60px);
+        top: auto !important;
+        bottom: 0 !important;
+    }
+
+    li:last-child {
+      a:hover{
+        border-radius: 0 0 12px 12px;
+      }
+    }
+  }
+}
+
+.bootstrap-select.dropup.show{
+  &:before {
+    top: -1px !important;
+  }
+
+  &:after {
+    top: -2px !important;
+  }
+}
+.dropdown-menu{
+    background-color: $white-color;
+    border: 0 none;
+    border-radius: $border-radius-extreme;
+    margin-top: 10px;
+    padding: 0px;
+
+    .divider{
+        background-color: $medium-pale-bg;
+        margin: 0px;
+    }
+
+    .dropdown-header{
+        color: $dark-gray;
+        font-size: $font-size-small;
+        padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
+    }
+
+    .no-notification{
+        color: #9A9A9A;
+        font-size: 1.2em;
+        padding: 30px 30px;
+        text-align: center;
+    }
+
+    .dropdown-item{
+        color: $font-color;
+        font-size: $font-size-base;
+        padding: 10px 45px 10px 15px;
+        clear: both;
+        white-space: nowrap;
+        width: 100%;
+        display: block;
+
+       img{
+           margin-top: -3px;
+       }
+
+    }
+    .dropdown-item:focus{
+        outline: 0 !important;
+    }
+
+    .btn-group.select &{
+        min-width: 100%;
+    }
+
+    .dropdown-item:first-child{
+       border-top-left-radius: $border-radius-extreme;
+       border-top-right-radius: $border-radius-extreme;
+    }
+
+    .dropdown-item:last-child{
+        border-bottom-left-radius: $border-radius-extreme;
+        border-bottom-right-radius: $border-radius-extreme;
+    }
+
+    .select & .dropdown-item:first-child{
+        border-radius: 0;
+        border-bottom: 0 none;
+    }
+
+    .dropdown-item:hover,
+    .dropdown-item:focus{
+        color: $white-color !important;
+        opacity: 1;
+        text-decoration: none;
+
+    }
+    .dropdown-item:hover,
+    .dropdown-item:focus{
+        background-color: $default-color;
+    }
+
+    &.dropdown-primary .dropdown-item:hover,
+    &.dropdown-primary .dropdown-item:focus{
+        background-color: $bg-primary;
+    }
+    &.dropdown-info .dropdown-item:hover,
+    &.dropdown-info .dropdown-item:focus{
+        background-color: $bg-info;
+    }
+    &.dropdown-success .dropdown-item:hover,
+    &.dropdown-success .dropdown-item:focus{
+        background-color: $bg-success;
+    }
+    &.dropdown-warning .dropdown-item:hover,
+    &.dropdown-warning .dropdown-item:focus{
+        background-color: $bg-warning;
+    }
+    &.dropdown-danger .dropdown-item:hover,
+    &.dropdown-danger .dropdown-item:focus{
+        background-color: $bg-danger;
+    }
+
+}
+.dropdown-divider{
+    margin: 0 !important;
+}
+
+//fix bug for the select items in btn-group
+.btn-group.select{
+    // overflow: hidden;
+}
+.btn-group.select.open{
+    overflow: visible;
+}
+.dropdown-menu-right{
+    right: -2px;
+    left: auto;
+}
+
+.navbar-nav .dropdown-menu:before,
+.dropdown .dropdown-menu[x-placement="bottom-start"]:before,
+.dropdown .dropdown-menu[x-placement="bottom-end"]:before,
+.card.card-just-text .dropdown .dropdown-menu:before,
+.card-just-text .dropdown .dropdown-menu:before,
+.dropdown-btn .dropdown-menu:before{
+    border-bottom: 11px solid $medium-pale-bg;
+    border-left: 11px solid rgba(0, 0, 0, 0);
+    border-right: 11px solid rgba(0, 0, 0, 0);
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    top: -12px;
+}
+
+.navbar-nav .dropdown-menu:after,
+.dropdown .dropdown-menu[x-placement="bottom-start"]:after,
+.dropdown .dropdown-menu[x-placement="bottom-end"]:after,
+.card.card-just-text .dropdown .dropdown-menu:after,
+.card-just-text .dropdown .dropdown-menu:after,
+.dropdown-btn .dropdown-menu:after{
+    border-bottom: 11px solid $white-color;
+    border-left: 11px solid rgba(0, 0, 0, 0);
+    border-right: 11px solid rgba(0, 0, 0, 0);
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    top: -11px;
+}
+
+.dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:before,
+.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before{
+    left: 30px !important;
+    right: auto;
+}
+.dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:after,
+.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after{
+    left: 30px !important;
+    right: auto;
+}
+//  the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
+//  code from _responsive.scss
+
+@media screen and (min-width: 768px){
+    .navbar-form {
+      margin-top: 21px;
+      margin-bottom: 21px;
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+    .navbar-search-form{
+      display: none;
+    }
+    .navbar-nav .dropdown-item .dropdown-menu,
+    .dropdown .dropdown-menu,
+    .dropdown-btn .dropdown-menu{
+      transform: translate3d(0px, -40px, 0px);
+      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+    }
+    .navbar-nav .dropdown-item.show .dropdown-menu,
+    .dropdown.show .dropdown-menu,
+    .dropdown-btn.show .dropdown-menu{
+      transform: translate3d(0px, 0px, 0px);
+      visibility: visible !important;
+    }
+    .bootstrap-select .dropdown-menu{
+      -webkit-transition: all 150ms linear;
+      -moz-transition: all 150ms linear;
+      -o-transition: all 150ms linear;
+      -ms-transition: all 150ms linear;
+      transition: all 150ms linear;
+    }
+    .bootstrap-datetimepicker-widget{
+      visibility: visible !important;
+    }
+
+    .bootstrap-select .show .dropdown-menu{
+      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+      transform: translate3d(0px, 0px, 0px);
+    }
+
+    .navbar-nav.navbar-right li .dropdown-menu:before,
+    .navbar-nav.navbar-right li .dropdown-menu:after{
+        left: auto;
+        right: 12px;
+    }
+
+
+    .footer:not(.footer-big){
+        nav ul{
+           li:first-child{
+             margin-left: 0;
+           }
+        }
+    }
+
+// no dragging the others navs in page
+    body > .navbar-collapse.collapse{
+        display: none !important;
+    }
+}
+
+.dropdown-sharing{
+    .dropup-item{
+        color: $font-color;
+        font-size: $font-size-base;
+
+        .social-line{
+            line-height: 28px;
+            padding: 10px 20px 5px 20px !important;
+
+            [class*="icon-"]{
+                font-size: 20px;
+            }
+        }
+        &:last-child{
+            margin: 0 13px;
+            display: block;
+        }
+        .btn{
+            margin: 10px;
+        }
+    }
+
+    .dropup-item:hover,
+    .dropup-item:focus{
+        .social-line,
+        .action-line{
+            background-color: $white-color;
+            color: $font-color;
+            opacity: 1;
+            text-decoration: none;
+        }
+    }
+}
+.show .dropdown-sharing,
+.show .dropdown-actions{
+    margin-bottom: 1px;
+}
+
+.dropdown-actions{
+    .dropdown-item{
+        margin: -15px 35px;
+        .action-line{
+            padding: 5px 10px;
+            line-height: 24px;
+            font-weight: bold;
+            [class*="icon-"]{
+                font-size: 24px;
+            }
+            .col-sm-9{
+                line-height: 34px;
+            }
+        }
+        .link-danger{
+            color: $danger-color;
+            &:hover, &:active, &:focus{
+                color: $danger-color;
+            }
+        }
+    }
+    li:hover,
+    li:focus{
+        a{
+            color: $font-color;
+            opacity: 1;
+            text-decoration: none;
+        }
+    }
+    .action-line{
+        .icon-simple{
+            margin-left: -15px;
+        }
+    }
+}
+.dropdown .dropdown-menu[x-placement="top-start"]:before,
+.dropdown .dropdown-menu[x-placement="top-end"]:before,
+.dropup .dropdown-menu:before{
+    border-top: 11px solid #DCD9D1;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    bottom: -12px;
+}
+
+.dropdown .dropdown-menu[x-placement="top-start"]:after,
+.dropdown .dropdown-menu[x-placement="top-end"]:after,
+.dropup .dropdown-menu:after{
+    border-top: 11px solid #FFF;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    bottom: -11px;
+}
+
+.dropup,
+.dropdown{
+    .dropdown-toggle:after{
+        margin-left: 0;
+    }
+}
+
+.dropdown-notification{
+    .dropdown-notification-list{
+            .notification-item{
+                border-bottom: 1px solid #F1EAE0;
+                font-size: 16px;
+                color: #66615b;
+
+                .notification-text{
+                    padding-left: 40px;
+                    position: relative;
+                    min-width: 330px;
+                    min-height: 70px;
+                    white-space: normal;
+
+
+                    .label{
+                        display: block;
+                        position: absolute;
+                        top: 50%;
+                        margin-top: -12px;
+                        left: 7px;
+                    }
+                    .message{
+                        font-size: 0.9em;
+                        line-height: 0.7;
+                        margin-left: 10px;
+                    }
+                    .time{
+                        color: #9A9A9A;
+                        font-size: 0.7em;
+                        margin-left: 10px;
+                    }
+                }
+                .read-notification{
+                    font-size: 12px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 5px;
+                    top: 50%;
+                    margin-top: -12px;
+                }
+                &:hover{
+                    text-decoration: none;
+
+                    .notification-text{
+                        color: #66615b;
+                        background-color: #F0EFEB !important;
+                    }
+                    .read-notification{
+                        opacity: 1 !important;
+                    }
+                }
+            }
+
+    }
+    .dropdown-footer{
+        background-color: #E8E7E3;
+        border-radius: 0 0 8px 8px;
+
+        .dropdown-footer-menu{
+            list-style: outside none none;
+            padding: 0px 5px;
+            li{
+                display: inline-block;
+                text-align: left;
+                padding: 0 10px;
+
+                a{
+                    color: #9C9B99;
+                    font-size: 0.9em;
+                    line-height: 35px;
+                }
+            }
+        }
+    }
+}

assets/scss/paper-dashboard/_fixed-plugin.scss

@@ -0,0 +1,342 @@
+.fixed-plugin{
+    position: fixed;
+    right: 0;
+    width: 64px;
+    background: rgba(0,0,0,.3);
+    z-index: 1031;
+    border-radius: 8px 0 0 8px;
+    text-align: center;
+    top: 120px;
+
+    li > a,
+    .badge{
+        transition: all .34s;
+        -webkit-transition: all .34s;
+        -moz-transition: all .34s;
+    }
+
+    .fa-cog{
+        color: #FFFFFF;
+        padding: 10px;
+        border-radius: 0 0 6px 6px;
+        width: auto;
+    }
+
+    .dropdown-menu{
+        right: 80px;
+        left: auto !important;
+        top: -52px !important;
+        width: 290px;
+        border-radius: 10px;
+        padding: 0 10px;
+    }
+
+    .dropdown .dropdown-menu .nc-icon{
+      top: 2px;
+      right: 10px;
+      font-size: 14px;
+    }
+
+    .dropdown-menu:after,
+    .dropdown-menu:before{
+        right: 10px;
+        margin-left: auto;
+        left: auto;
+    }
+
+    .fa-circle-thin{
+        color: #FFFFFF;
+    }
+
+    .active .fa-circle-thin{
+        color: #00bbff;
+    }
+
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus{
+        color: #777777;
+        text-align: center;
+    }
+
+    img{
+        border-radius: 0;
+        width: 100%;
+        height: 100px;
+        margin: 0 auto;
+    }
+
+    .dropdown-menu li > a:hover,
+    .dropdown-menu li > a:focus{
+        box-shadow: none;
+    }
+
+    .badge{
+        border: 3px solid #FFFFFF;
+        border-radius: 50%;
+        cursor: pointer;
+        display: inline-block;
+        height: 23px;
+        margin-right: 5px;
+        position: relative;
+        width: 23px;
+
+      &.badge-light {
+        border: 1px solid $light-gray;
+
+        &.active,
+        &:hover {
+          border: 3px solid #0bf;
+        }
+      }
+    }
+
+    .badge.active,
+    .badge:hover{
+        border-color: #00bbff;
+    }
+
+    .badge-blue{
+        background-color: $brand-info;
+    }
+    .badge-green{
+        background-color: $brand-success;
+    }
+    .badge-orange{
+        background-color: $brand-primary;
+    }
+    .badge-yellow{
+        background-color: $brand-warning;
+    }
+    .badge-red{
+        background-color: $brand-danger;
+    }
+
+    h5{
+        font-size: 14px;
+        margin: 10px;
+    }
+
+    .dropdown-menu li{
+        display: block;
+        padding: 15px 2px;
+        width: 25%;
+        float: left;
+    }
+
+    li.adjustments-line,
+    li.header-title,
+    li.button-container{
+        width: 100%;
+        height: 35px;
+        min-height: inherit;
+    }
+
+    li.button-container{
+        height: auto;
+
+        div{
+            margin-bottom: 5px;
+        }
+    }
+
+    #sharrreTitle{
+        text-align: center;
+        padding: 10px 0;
+        height: 50px;
+    }
+
+    li.header-title{
+        height: 30px;
+        line-height: 25px;
+        font-size: 12px;
+        font-weight: 600;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    .adjustments-line{
+        p{
+            float: left;
+            display: inline-block;
+            margin-bottom: 0;
+            font-size: 1em;
+            color: #3C4858;
+        }
+
+        a{
+            color: transparent;
+
+            .badge-colors{
+                position: relative;
+                top: -2px;
+            }
+
+            a:hover,
+            a:focus{
+                color: transparent;
+            }
+        }
+
+        .togglebutton{
+            text-align: center;
+
+            .label-switch{
+              position: relative;
+              left: -10px;
+              font-size: $font-size-mini;
+              color: $default-color;
+
+              &.label-right{
+                left: 10px;
+              }
+            }
+
+            .toggle{
+                margin-right: 0;
+            }
+        }
+
+        .dropdown-menu > li.adjustments-line > a{
+              padding-right: 0;
+              padding-left: 0;
+              border-bottom: 1px solid #ddd;
+              border-radius: 0;
+              margin: 0;
+        }
+    }
+
+
+
+    .dropdown-menu{
+        > li{
+            & > a.img-holder{
+                  font-size: 16px;
+                  text-align: center;
+                  border-radius: 10px;
+                  background-color: #FFF;
+                  border: 3px solid #FFF;
+                  padding-left: 0;
+                  padding-right: 0;
+                  opacity: 1;
+                  cursor: pointer;
+                  display: block;
+                  max-height: 100px;
+                  overflow: hidden;
+                  padding: 0;
+
+                  img{
+                     margin-top: auto;
+                  }
+            }
+
+            a.switch-trigger:hover,
+            & > a.switch-trigger:focus{
+                background-color: transparent;
+            }
+
+            &:hover,
+            &:focus{
+                > a.img-holder{
+                    border-color: rgba(0, 187, 255, 0.53);;
+                }
+            }
+        }
+
+        > .active > a.img-holder,
+        > .active > a.img-holder{
+            border-color: #00bbff;
+            background-color: #FFFFFF;
+        }
+
+    }
+
+    .btn-social{
+        width: 50%;
+        display: block;
+        width: 48%;
+        float: left;
+        font-weight: 600;
+    }
+
+    .btn-social{
+        i{
+            margin-right: 5px;
+        }
+
+        &:first-child{
+            margin-right: 2%;
+        }
+    }
+
+    .dropdown{
+        .dropdown-menu{
+          transform-origin: 0 0;
+
+          &:before{
+             border-bottom: 16px solid rgba(0, 0, 0, 0);
+             border-left: 16px solid rgba(0,0,0,0.2);
+             border-top: 16px solid rgba(0,0,0,0);
+             right: -27px;
+             bottom: 425px;
+          }
+
+          &:after{
+             border-bottom: 16px solid rgba(0, 0, 0, 0);
+             border-left: 16px solid #FFFFFF;
+             border-top: 16px solid rgba(0,0,0,0);
+             right: -26px;
+             bottom: 425px;
+          }
+
+          &:before,
+          &:after{
+             content: "";
+             display: inline-block;
+             position: absolute;
+             width: 16px;
+             transform: translateY(-50px);
+             -webkit-transform: translateY(-50px);
+             -moz-transform: translateY(-50px);
+          }
+        }
+
+      &.show-dropdown .show{
+        .dropdown-menu .show{
+          transform: translate3d(0, -60px, 0)!important;
+          bottom: auto!important;
+          top: 0!important;
+        }
+      }
+    }
+
+    .bootstrap-switch{
+        margin:0;
+    }
+}
+
+.fixed-plugin {
+  .show-dropdown {
+    .dropdown-menu[x-placement=bottom-start] {
+      @include transform-translate-y-fixed-plugin (-100px);
+
+      &:before,
+      &:after {
+        top: 100px;
+      }
+    }
+    .dropdown-menu[x-placement=top-start] {
+      @include transform-translate-y-fixed-plugin (100px);
+    }
+
+    &.show {
+      .dropdown-menu.show[x-placement=bottom-start] {
+        @include transform-translate-y-fixed-plugin (-60px);
+      }
+
+      .dropdown-menu.show[x-placement=top-start] {
+        @include transform-translate-y-fixed-plugin (470px);
+      }
+    }
+  }
+}

assets/scss/paper-dashboard/_footers.scss

@@ -0,0 +1,46 @@
+.footer{
+    padding: 24px 0;
+
+    &.footer-default{
+        background-color: #f2f2f2;
+    }
+
+    nav{
+        display: inline-block;
+        float: left;
+        padding-left: 0;
+    }
+
+    ul{
+        margin-bottom: 0;
+        padding: 0;
+        list-style: none;
+
+        li{
+            display: inline-block;
+
+            a{
+                color: inherit;
+                padding: $padding-base-vertical;
+                font-size: $font-size-small;
+                text-transform: uppercase;
+                text-decoration: none;
+
+                &:hover{
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .copyright{
+        font-size: $font-size-small;
+        line-height: 1.8;
+    }
+
+    &:after{
+        display: table;
+        clear: both;
+        content: " ";
+    }
+}

assets/scss/paper-dashboard/_images.scss

@@ -0,0 +1,7 @@
+img{
+    max-width: 100%;
+    border-radius: $border-radius-small;
+}
+.img-raised{
+    box-shadow: $box-shadow-raised;
+}

assets/scss/paper-dashboard/_inputs.scss

@@ -0,0 +1,403 @@
+@include placeholder() {
+  color: $dark-gray;
+};
+
+
+.form-control {
+    background-color: $white-color;
+    border: 1px solid $medium-gray;
+    border-radius: $border-radius-base;
+    color: $font-color;
+    line-height: normal;
+    font-size: $font-size-base;
+    @include transition-input-focus-color();
+    @include box-shadow(none);
+
+
+
+    &:focus{
+        border: 1px solid $dark-gray;
+        @include box-shadow(none);
+        outline: 0 !important;
+        color: $default-color;
+
+        & + .input-group-append .input-group-text,
+        & ~ .input-group-append .input-group-text,
+        & + .input-group-prepend .input-group-text,
+        & ~ .input-group-prepend .input-group-text{
+            border: 1px solid #ccc;
+            border-left: none;
+            background-color: $transparent-bg;
+        }
+    }
+
+    .has-success &,
+    .has-error &,
+    .has-success &:focus,
+    .has-error &:focus{
+        @include box-shadow(none);
+    }
+
+    .has-success &{
+        border: 1px solid $table-line-color;
+        color: $font-color;
+
+        &.form-control-success{
+            padding-right: 2.5em !important;
+        }
+    }
+    .has-success &:focus{
+        border: 1px solid $success-color;
+        color: $success-color;
+    }
+    .has-danger &{
+        background-color: $danger-input-bg;
+        border: 1px solid $danger-color;
+        color: $danger-color;
+
+        &.form-control-danger{
+            padding-right: 2.5em !important;
+        }
+    }
+    .has-danger &:focus{
+        background-color: $white-color;
+        border: 1px solid $danger-color;
+    }
+
+    & + .form-control-feedback{
+        border-radius: $border-radius-large;
+        font-size: $font-size-base;
+        margin-top: -7px;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        vertical-align: middle;
+    }
+
+    .open &{
+        border-radius: $border-radius-large $border-radius-large 0 0;
+        border-bottom-color: transparent;
+    }
+
+    & + .input-group-append .input-group-text,
+    & + .input-group-prepend .input-group-text{
+        background-color: $white-bg;
+    }
+}
+
+
+@include form-control-lg-padding($padding-large-vertical, $padding-input-horizontal);
+@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
+
+.input-group {
+  &.has-success {
+    .input-group-prepend,
+    .input-group-append {
+      .input-group-text {
+        border: 1px solid $table-line-color;
+        color: $font-color;
+        background-color: $white-color;
+        border-right: none;
+      }
+    }
+  }
+}
+
+.form-group.no-border,
+.input-group.no-border{
+    .form-control,
+    .form-control + .input-group-prepend .input-group-text,
+    .form-control + .input-group-append .input-group-text{
+        background-color: $opacity-gray-3;
+        border: medium none;
+        &:focus,
+        &:active,
+        &:active{
+            border: medium none;
+            background-color: $opacity-gray-5;
+        }
+    }
+
+    .form-control{
+        &:focus{
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                background-color: $opacity-gray-5;
+            }
+        }
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $opacity-gray-3;
+        border: none;
+    }
+}
+
+.has-error{
+    .form-control-feedback, .control-label{
+        color: $danger-color;
+    }
+}
+.has-success{
+    .form-control-feedback, .control-label{
+        color: $success-color;
+    }
+}
+
+.input-group.has-danger {
+  .input-group-prepend {
+    border-radius: $border-radius-base;
+    .input-group-text {
+      border: 1px solid $danger-color;
+      border-right: none;
+    }
+  }
+  .error {
+    display: block;
+    width: 100%;
+    color: $danger-color;
+    margin-top: 3px;
+  }
+}
+
+.input-group.has-success {
+  .input-group-prepend {
+    border-radius: $border-radius-base;
+    .input-group-text {
+      // border: 1px solid $success-color;
+      border-right: none;
+    }
+  }
+}
+
+
+.input-group-focus{
+  .input-group-prepend .input-group-text,
+  .input-group-append .input-group-text{
+    background-color: $white-bg;
+    border-color: $dark-gray;
+  }
+
+  &.no-border{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+      background-color: $opacity-gray-5;
+    }
+  }
+
+  &.has-danger {
+    .input-group-append,
+    .input-group-prepend {
+      .input-group-text {
+        background-color: $danger-input-bg;
+      }
+    }
+  }
+
+  &.has-success {
+    .input-group-append,
+    .input-group-prepend {
+      .input-group-text {
+        background-color: $success-input-bg;
+        border: 1px solid $success-color;
+        border-right: none;
+      }
+    }
+  }
+}
+
+.input-group-append .input-group-text,
+.input-group-prepend .input-group-text {
+    background-color: transparent;
+    border: 1px solid $light-gray;
+    color: $default-color;
+    border-top-right-radius: $border-radius-base;
+    border-bottom-right-radius: $border-radius-base;
+
+    & i{
+      opacity: .5;
+    }
+
+    @include transition-input-focus-color();
+
+    .has-danger &{
+      background-color: $danger-input-bg;
+    }
+    .has-success &{
+      background-color: $success-input-bg;
+    }
+    .has-danger.input-group-focus &{
+      background-color: $white-color;
+      color: $danger-color;
+    }
+    .has-success.input-group-focus &{
+      background-color: $white-color;
+      color: $success-color;
+    }
+    .has-danger .form-control:focus + &{
+      color: $danger-color;
+    }
+    .has-success .form-control:focus + &{
+      color: $success-color;
+    }
+
+    & + .form-control,
+    & ~ .form-control{
+        @include input-size($padding-base-vertical - 1, $padding-base-horizontal);
+        padding-left: 18px;
+    }
+
+    i{
+        width: 17px;
+    }
+}
+
+.input-group-append,
+.input-group-prepend{
+  margin: 0;
+}
+
+
+.input-group-append .input-group-text{
+  border-left: none;
+}
+.input-group-prepend .input-group-text{
+  border-right: none;
+}
+
+.input-group,
+.form-group{
+    margin-bottom: 10px;
+    position: relative;
+
+    .form-control-static{
+        margin-top: 9px;
+    }
+    &.has-danger {
+      .error {
+        color: $danger-color;
+      }
+    }
+}
+.input-group[disabled]{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $light-gray;
+    }
+}
+
+.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){
+    border-radius: $border-radius-base;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0 none;
+}
+
+.input-group .form-control:first-child,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+.input-group .form-control:last-child,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+    border-left: 0 none;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: $light-gray;
+    color: $default-color;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn{
+    border-width: $border-thin;
+    padding: $padding-btn-vertical  $padding-base-horizontal;
+}
+.input-group-btn .btn-default:not(.btn-fill){
+    border-color: $medium-gray;
+}
+
+.input-group-btn:last-child > .btn{
+    margin-left: 0;
+}
+textarea.form-control{
+    max-width: 100%;
+    max-height: 80px;
+    padding: 10px 10px 0 0;
+    resize: none;
+    border: none;
+    border: 1px solid $light-gray;
+    border-radius: $border-radius-base;
+    line-height: 2;
+}
+
+.has-success,
+.has-danger{
+
+    &.form-group .form-control,
+    &.form-group.no-border .form-control{
+        padding-right: $padding-input-horizontal + 21;
+    }
+}
+
+.form.form-newsletter .form-group{
+    float: left;
+    width: 78%;
+    margin-right: 2%;
+    margin-top: 9px;
+}
+
+.input-group .input-group-btn{
+    padding: 0 12px;
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+.form-text{
+    font-size: $font-size-small;
+}
+
+.form-control-lg{
+    padding: 0;
+    font-size: inherit;
+    line-height: 0;
+    border-radius: 0;
+}
+
+.form-horizontal{
+    .col-form-label,
+    .label-on-right{
+        padding: 10px 5px 0 15px;
+        text-align: right;
+        max-width: 180px;
+    }
+
+    .checkbox-radios{
+        margin-bottom: 15px;
+
+        .form-check:first-child{
+           margin-top: 8px;
+       }
+    }
+
+    .label-on-right{
+        text-align: left;
+        padding: 10px 15px 0 5px;
+    }
+
+    .form-check-inline{
+        margin-top: 6px;
+    }
+}

assets/scss/paper-dashboard/_misc.scss

@@ -0,0 +1,150 @@
+body{
+    color: $black-color;
+    font-size: $font-size-base;
+    font-family: $sans-serif-family;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+.main{
+    position: relative;
+    background: $white-color;
+}
+/* Animations */
+.nav-pills .nav-link,
+.navbar,
+.nav-tabs .nav-link,
+.sidebar .nav a,
+.sidebar .nav a i,
+.animation-transition-general,
+.tag,
+.tag [data-role="remove"],
+.animation-transition-general{
+    @include transition($general-transition-time, $transition-ease);
+}
+
+//transition for dropdown caret
+.dropdown-toggle:after,
+.bootstrap-switch-label:before,
+.caret{
+    @include transition($fast-transition-time, $transition-ease);
+}
+
+.dropdown-toggle[aria-expanded="true"]:after,
+a[data-toggle="collapse"][aria-expanded="true"] .caret,
+.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
+.card-collapse .card a[data-toggle="collapse"].expanded i{
+    @include rotate-180();
+}
+
+.button-bar{
+    display: block;
+    position: relative;
+    width: 22px;
+    height: 1px;
+    border-radius: 1px;
+    background: $white-bg;
+
+    & + .button-bar{
+        margin-top: 7px;
+    }
+
+    &:nth-child(2){
+        width: 17px;
+    }
+}
+
+.caret{
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 2px;
+    vertical-align: middle;
+    border-top: 4px dashed;
+    border-top: 4px solid\9;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+
+.pull-left{
+  float: left;
+}
+.pull-right{
+  float: right;
+}
+
+
+.offline-doc {
+  .navbar.navbar-transparent{
+    padding-top: 25px;
+    border-bottom: none;
+
+    .navbar-minimize {
+      display: none;
+    }
+    .navbar-brand,
+    .collapse .navbar-nav .nav-link {
+      color: $white-color !important;
+    }
+  }
+  .footer {
+    z-index: 3 !important;
+  }
+  .page-header{
+    .container {
+      z-index: 3;
+    }
+    &:after {
+      background-color: rgba(0, 0, 0, 0.5);
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 2;
+    }
+  }
+}
+
+.fixed-plugin {
+  .dropdown-menu li {
+    padding: 2px !important;
+  }
+}
+
+// badge color
+
+.badge{
+  &.badge-default{
+      @include badge-color($default-color);
+  }
+  &.badge-primary{
+      @include badge-color($primary-color);
+  }
+  &.badge-info{
+      @include badge-color($info-color);
+  }
+  &.badge-success{
+      @include badge-color($success-color);
+  }
+  &.badge-warning{
+      @include badge-color($warning-color);
+  }
+  &.badge-danger{
+      @include badge-color($danger-color);
+  }
+  &.badge-neutral{
+      @include badge-color($white-color);
+      color: inherit;
+  }
+}
+
+.card-user {
+  form {
+    .form-group {
+      margin-bottom: 20px;
+    }
+  }
+}

assets/scss/paper-dashboard/_mixins.scss

@@ -0,0 +1,8 @@
+//Components
+@import "mixins/buttons";
+@import "mixins/vendor-prefixes";
+@import "mixins/inputs";
+@import "mixins/page-header";
+@import "mixins/dropdown";
+@import "mixins/cards";
+@import "mixins/transparency";

assets/scss/paper-dashboard/_navbar.scss

@@ -0,0 +1,310 @@
+.navbar{
+    padding-top: $navbar-padding-base;
+    padding-bottom: $navbar-padding-base;
+    min-height: 53px;
+    margin-bottom: 20px;
+
+    a{
+        vertical-align: middle;
+
+        &:not(.btn):not(.dropdown-item){
+            color: $white-color;
+        }
+
+        &.dropdown-item{
+            color: $default-color;
+        }
+    }
+
+
+
+    &.bg-white{
+      .input-group .form-control,
+      .input-group.no-border .form-control{
+        color: $default-color;
+
+        @include placeholder(){
+          color: $default-color;
+        };
+      }
+      .input-group-prepend .input-group-text i,
+      .input-group-append .input-group-text i{
+        color: $default-color;
+        opacity: .5;
+      }
+    }
+
+    .form-group,
+    .input-group{
+      margin: 0;
+      margin-left: -3px;
+      margin-right: 5px;
+
+      .form-group-addon,
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text{
+        color: $default-color;
+
+        i {
+          opacity: 1;
+        }
+      }
+
+      &.no-border{
+        .form-control{
+          color: $default-color;
+
+          @include placeholder(){
+            color: $default-color;
+          };
+        }
+      }
+    }
+
+    p{
+        display: inline-block;
+        margin: 0;
+        line-height: 1.8em;
+        font-size: 1em;
+        font-weight: 400;
+    }
+
+    &.navbar-absolute{
+        position: absolute;
+        width: 100%;
+        padding-top: 10px;
+        z-index: 1029;
+    }
+
+    .documentation &{
+        &.fixed-top{
+            left: 0;
+            width: initial;
+        }
+    }
+
+    .navbar-wrapper{
+        display: inline-flex;
+        align-items: center;
+
+        .navbar-minimize{
+            padding-right: 10px;
+
+            .btn{
+                margin: 0;
+            }
+        }
+
+        .navbar-toggle{
+            .navbar-toggler{
+                padding-left: 0;
+            }
+
+            &:hover{
+                & .navbar-toggler-bar.bar2{
+                    width: 22px;
+                }
+            }
+        }
+    }
+
+
+
+    .navbar-nav{
+        &.navbar-logo{
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            width: 49px;
+            top: -4px;
+        }
+
+        .nav-link.btn{
+            padding: $padding-btn-vertical $padding-btn-horizontal;
+            &.btn-lg{
+                padding: $padding-large-vertical $padding-large-horizontal;
+            }
+            &.btn-sm{
+                padding: $padding-small-vertical $padding-small-horizontal;
+            }
+        }
+
+        .nav-link{
+            text-transform: uppercase;
+            font-size: $font-size-mini;
+            padding: $padding-base-vertical $padding-base-horizontal;
+            line-height: $line-height-nav-link;
+            margin-right: 3px;
+
+            i.fa + p,
+            i.nc-icon + p{
+                margin-left: 3px;
+            }
+
+            i.fa,
+            i.nc-icon{
+                font-size: 18px;
+                position: relative;
+                top: 3px;
+                text-align: center;
+                width: 21px;
+            }
+
+            i.nc-icon{
+                top: 4px;
+                font-size: 16px;
+            }
+
+            &.profile-photo{
+                .profile-photo-small{
+                    width: 27px;
+                    height: 27px;
+                }
+            }
+
+            &.disabled{
+                opacity: .5;
+                color: $white-color;
+            }
+        }
+
+        .nav-item.active .nav-link:not(.btn),
+        .nav-item .nav-link:not(.btn):focus,
+        .nav-item .nav-link:not(.btn):hover,
+        .nav-item .nav-link:not(.btn):active{
+            border-radius: $border-radius-small;
+            color: $default-color;
+        }
+    }
+
+    .logo-container{
+        width: 27px;
+        height: 27px;
+        overflow: hidden;
+        margin: 0 auto;
+        border-radius: 50%;
+        border: 1px solid transparent;
+    }
+
+    .navbar-brand{
+        text-transform: capitalize;
+        font-size: $font-size-large-navbar;
+        padding-top: $padding-base-vertical;
+        padding-bottom: $padding-base-vertical;
+        line-height: $line-height-nav-link;
+    }
+
+    .navbar-toggler{
+        width: 37px;
+        height: 27px;
+        vertical-align: middle;
+        outline: 0;
+        cursor: pointer;
+
+        & .navbar-toggler-bar.navbar-kebab{
+            width: 3px;
+            height: 3px;
+            border-radius: 50%;
+            margin: 0 auto;
+        }
+    }
+
+    .button-dropdown{
+        .navbar-toggler-bar:nth-child(2){
+            width: 17px;
+        }
+    }
+
+    &.navbar-transparent{
+      background-color: $transparent-bg !important;
+      box-shadow: none;
+      border-bottom: 1px solid #ddd;
+
+      a:not(.dropdown-item):not(.btn){
+        color: $default-color;
+
+        &.disabled{
+          opacity: .5;
+          color: $default-color;
+         }
+       }
+
+       .button-bar{
+           background: $default-color;
+       }
+
+      .nav-item .nav-link:not(.btn){
+        color: $default-color;
+      }
+      .nav-item.active .nav-link:not(.btn),
+      .nav-item .nav-link:not(.btn):focus,
+      .nav-item .nav-link:not(.btn):hover,
+      .nav-item .nav-link:not(.btn):focus:hover,
+      .nav-item .nav-link:not(.btn):active {
+        color: $primary-color;
+      }
+    }
+
+    &.bg-white {
+        a:not(.dropdown-item):not(.btn){
+            color: $default-color;
+
+            &.disabled{
+                opacity: .5;
+                color: $default-color;
+            }
+        }
+
+        .button-bar{
+            background: $default-color;
+        }
+
+        .nav-item.active .nav-link:not(.btn),
+        .nav-item .nav-link:not(.btn):focus,
+        .nav-item .nav-link:not(.btn):hover,
+        .nav-item .nav-link:not(.btn):active{
+            color: $info-color;
+        }
+
+        .logo-container{
+            border: 1px solid $default-color;
+        }
+    }
+
+    .navbar-collapse {
+      .nav-item {
+        a {
+          font-size: $font-size-base;
+        }
+      }
+    }
+}
+
+.bg-default{
+    background-color: $default-color !important;
+}
+
+.bg-primary{
+    background-color: $primary-color !important;
+}
+
+.bg-info{
+    background-color: $info-color !important;
+}
+
+.bg-success{
+    background-color: $success-color !important;
+}
+
+.bg-danger{
+    background-color: $danger-color !important;
+}
+
+.bg-warning{
+    background-color: $warning-color !important;
+}
+
+.bg-white{
+    background-color: $white-color !important;
+}

assets/scss/paper-dashboard/_nucleo-outline.scss

@@ -0,0 +1,566 @@
+/*--------------------------------
+
+nucleo-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: 'nucleo-icons';
+  src: url('../fonts/nucleo-icons.eot');
+  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+/*------------------------
+	base class definition
+-------------------------*/
+.nc-icon {
+  display: inline-block;
+  font: normal normal normal 14px/1 'nucleo-icons';
+  font-size: inherit;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*------------------------
+  change icon size
+-------------------------*/
+.nc-icon.lg {
+  font-size: 1.33333333em;
+  vertical-align: -16%;
+}
+.nc-icon.x2 {
+  font-size: 2em;
+}
+.nc-icon.x3 {
+  font-size: 3em;
+}
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.nc-icon.square,
+.nc-icon.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+.nc-icon.circle {
+  border-radius: 50%;
+}
+/*------------------------
+  list icons
+-------------------------*/
+.nc-icon-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.nc-icon-ul > li {
+  position: relative;
+}
+.nc-icon-ul > li > .nc-icon {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.nc-icon-ul > li > .nc-icon.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+.nc-icon-ul > li > .nc-icon.circle,
+.nc-icon-ul > li > .nc-icon.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+/*------------------------
+  spinning icons
+-------------------------*/
+.nc-icon.spin {
+  -webkit-animation: nc-icon-spin 2s infinite linear;
+  -moz-animation: nc-icon-spin 2s infinite linear;
+  animation: nc-icon-spin 2s infinite linear;
+}
+@-webkit-keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes nc-icon-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.nc-icon.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.nc-icon.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.nc-icon.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.nc-icon.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.nc-icon.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+/*------------------------
+	font icons
+-------------------------*/
+
+.nc-air-baloon::before {
+    content: "\ea01";
+}
+
+.nc-album-2::before {
+    content: "\ea02";
+}
+
+.nc-alert-circle-i::before {
+    content: "\ea04";
+}
+
+.nc-align-center::before {
+    content: "\ea03";
+}
+
+.nc-align-left-2::before {
+    content: "\ea05";
+}
+
+.nc-ambulance::before {
+    content: "\ea06";
+}
+
+.nc-app::before {
+    content: "\ea07";
+}
+
+.nc-atom::before {
+    content: "\ea08";
+}
+
+.nc-badge::before {
+    content: "\ea09";
+}
+
+.nc-bag-16::before {
+    content: "\ea0a";
+}
+
+.nc-bank::before {
+    content: "\ea0b";
+}
+
+.nc-basket::before {
+    content: "\ea0c";
+}
+
+.nc-bell-55::before {
+    content: "\ea0d";
+}
+
+.nc-bold::before {
+    content: "\ea0e";
+}
+
+.nc-book-bookmark::before {
+    content: "\ea0f";
+}
+
+.nc-bookmark-2::before {
+    content: "\ea10";
+}
+
+.nc-box-2::before {
+    content: "\ea11";
+}
+
+.nc-box::before {
+    content: "\ea12";
+}
+
+.nc-briefcase-24::before {
+    content: "\ea13";
+}
+
+.nc-bulb-63::before {
+    content: "\ea14";
+}
+
+.nc-bullet-list-67::before {
+    content: "\ea15";
+}
+
+.nc-bus-front-12::before {
+    content: "\ea16";
+}
+
+.nc-button-pause::before {
+    content: "\ea17";
+}
+
+.nc-button-play::before {
+    content: "\ea18";
+}
+
+.nc-button-power::before {
+    content: "\ea19";
+}
+
+.nc-calendar-60::before {
+    content: "\ea1a";
+}
+
+.nc-camera-compact::before {
+    content: "\ea1b";
+}
+
+.nc-caps-small::before {
+    content: "\ea1c";
+}
+
+.nc-cart-simple::before {
+    content: "\ea1d";
+}
+
+.nc-chart-bar-32::before {
+    content: "\ea1e";
+}
+
+.nc-chart-pie-36::before {
+    content: "\ea1f";
+}
+
+.nc-chat-33::before {
+    content: "\ea20";
+}
+
+.nc-check-2::before {
+    content: "\ea21";
+}
+
+.nc-circle-10::before {
+    content: "\ea22";
+}
+
+.nc-cloud-download-93::before {
+    content: "\ea23";
+}
+
+.nc-cloud-upload-94::before {
+    content: "\ea24";
+}
+
+.nc-compass-05::before {
+    content: "\ea25";
+}
+
+.nc-controller-modern::before {
+    content: "\ea26";
+}
+
+.nc-credit-card::before {
+    content: "\ea27";
+}
+
+.nc-delivery-fast::before {
+    content: "\ea28";
+}
+
+.nc-diamond::before {
+    content: "\ea29";
+}
+
+.nc-email-85::before {
+    content: "\ea2a";
+}
+
+.nc-favourite-28::before {
+    content: "\ea2b";
+}
+
+.nc-glasses-2::before {
+    content: "\ea2c";
+}
+
+.nc-globe-2::before {
+    content: "\ea2d";
+}
+
+.nc-globe::before {
+    content: "\ea2e";
+}
+
+.nc-hat-3::before {
+    content: "\ea2f";
+}
+
+.nc-headphones::before {
+    content: "\ea30";
+}
+
+.nc-html5::before {
+    content: "\ea31";
+}
+
+.nc-image::before {
+    content: "\ea32";
+}
+
+.nc-istanbul::before {
+    content: "\ea33";
+}
+
+.nc-key-25::before {
+    content: "\ea34";
+}
+
+.nc-laptop::before {
+    content: "\ea35";
+}
+
+.nc-layout-11::before {
+    content: "\ea36";
+}
+
+.nc-lock-circle-open::before {
+    content: "\ea37";
+}
+
+.nc-map-big::before {
+    content: "\ea38";
+}
+
+.nc-minimal-down::before {
+    content: "\ea39";
+}
+
+.nc-minimal-left::before {
+    content: "\ea3a";
+}
+
+.nc-minimal-right::before {
+    content: "\ea3b";
+}
+
+.nc-minimal-up::before {
+    content: "\ea3c";
+}
+
+.nc-mobile::before {
+    content: "\ea3d";
+}
+
+.nc-money-coins::before {
+    content: "\ea3e";
+}
+
+.nc-note-03::before {
+    content: "\ea3f";
+}
+
+.nc-palette::before {
+    content: "\ea40";
+}
+
+.nc-paper::before {
+    content: "\ea41";
+}
+
+.nc-pin-3::before {
+    content: "\ea42";
+}
+
+.nc-planet::before {
+    content: "\ea43";
+}
+
+.nc-refresh-69::before {
+    content: "\ea44";
+}
+
+.nc-ruler-pencil::before {
+    content: "\ea45";
+}
+
+.nc-satisfied::before {
+    content: "\ea46";
+}
+
+.nc-scissors::before {
+    content: "\ea47";
+}
+
+.nc-send::before {
+    content: "\ea48";
+}
+
+.nc-settings-gear-65::before {
+    content: "\ea49";
+}
+
+.nc-settings::before {
+    content: "\ea4a";
+}
+
+.nc-share-66::before {
+    content: "\ea4b";
+}
+
+.nc-shop::before {
+    content: "\ea4c";
+}
+
+.nc-simple-add::before {
+    content: "\ea4d";
+}
+
+.nc-simple-delete::before {
+    content: "\ea4e";
+}
+
+.nc-simple-remove::before {
+    content: "\ea4f";
+}
+
+.nc-single-02::before {
+    content: "\ea50";
+}
+
+.nc-single-copy-04::before {
+    content: "\ea51";
+}
+
+.nc-sound-wave::before {
+    content: "\ea52";
+}
+
+.nc-spaceship::before {
+    content: "\ea53";
+}
+
+.nc-sun-fog-29::before {
+    content: "\ea54";
+}
+
+.nc-support-17::before {
+    content: "\ea55";
+}
+
+.nc-tablet-2::before {
+    content: "\ea56";
+}
+
+.nc-tag-content::before {
+    content: "\ea57";
+}
+
+.nc-tap-01::before {
+    content: "\ea58";
+}
+
+.nc-tie-bow::before {
+    content: "\ea59";
+}
+
+.nc-tile-56::before {
+    content: "\ea5a";
+}
+
+.nc-time-alarm::before {
+    content: "\ea5b";
+}
+
+.nc-touch-id::before {
+    content: "\ea5c";
+}
+
+.nc-trophy::before {
+    content: "\ea5d";
+}
+
+.nc-tv-2::before {
+    content: "\ea5e";
+}
+
+.nc-umbrella-13::before {
+    content: "\ea5f";
+}
+
+.nc-user-run::before {
+    content: "\ea60";
+}
+
+.nc-vector::before {
+    content: "\ea61";
+}
+
+.nc-watch-time::before {
+    content: "\ea62";
+}
+
+.nc-world-2::before {
+    content: "\ea63";
+}
+
+.nc-zoom-split::before {
+    content: "\ea64";
+}
+
+
+/* all icon font classes list here */

assets/scss/paper-dashboard/_page-header.scss

@@ -0,0 +1,85 @@
+.page-header{
+    min-height: 100vh;
+    max-height: 1000px;
+    padding: 0;
+    color: $white-color;
+    position: relative;
+
+    .page-header-image{
+        position: absolute;
+        background-size: cover;
+        background-position: center center;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+    }
+
+    .content-center{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 2;
+        -ms-transform: translate(-50%, -50%);
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        text-align: center;
+        color: #FFFFFF;
+        padding: 0 15px;
+        width: 100%;
+        max-width: 880px;
+
+    }
+
+    footer{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .container{
+        height: 100%;
+        z-index: 1;
+    }
+
+    .category,
+    .description{
+        color: $opacity-8;
+    }
+
+    &.page-header-small{
+        min-height: 60vh;
+        max-height: 440px;
+    }
+
+    &.page-header-mini{
+        min-height: 40vh;
+        max-height: 340px;
+    }
+
+    .title{
+        margin-bottom: 15px;
+    }
+    .title + h4{
+        margin-top: 10px;
+    }
+
+    &:after,
+    &:before{
+        position: absolute;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        left: 0;
+        top: 0;
+        content: "";
+    }
+
+    &:before{
+        background-color: rgba(0,0,0,.3);
+    }
+
+    &[filter-color="orange"]{
+        @include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
+    }
+}

assets/scss/paper-dashboard/_responsive.scss

@@ -0,0 +1,550 @@
+@media screen and (max-width: 991px){
+
+  .navbar {
+    padding: 0;
+
+    &.navbar-absolute {
+      padding-top: 0;
+    }
+
+    .navbar-brand {
+      font-size: 16px;
+      margin-right: 0;
+    }
+  }
+
+    .profile-photo .profile-photo-small{
+        margin-left: -2px;
+    }
+
+    .button-dropdown{
+        display: none;
+    }
+
+    #minimizeSidebar{
+        display: none;
+    }
+
+    .navbar{
+        .container-fluid{
+            padding-right: 15px;
+            padding-left: 15px;
+        }
+
+        .navbar-collapse{
+          .input-group{
+            margin: 0;
+            margin-top: 5px;
+          }
+        }
+
+        .navbar-nav{
+            .nav-item:first-child{
+              margin-top: 10px;
+            }
+            .nav-item:not(:last-child){
+                margin-bottom: 10px;
+            }
+        }
+
+        .dropdown.show .dropdown-menu{
+            display: block;
+        }
+
+        .dropdown .dropdown-menu{
+            display: none;
+        }
+
+        .dropdown.show .dropdown-menu,
+        .dropdown .dropdown-menu{
+            border: 0;
+            transition: none;
+            -webkit-box-shadow: none;
+            width: auto;
+            margin: 0px 1rem;
+            margin-top: 0px;
+            box-shadow: none;
+            position: static;
+            padding-left: 10px;
+
+            &:before{
+                display: none;
+            }
+        }
+
+        .dropdown-menu .dropdown-item:focus,
+        .dropdown-menu .dropdown-item:hover{
+            color: $white-color;
+        }
+
+        &.bg-white .dropdown-menu .dropdown-item:focus,
+        &.bg-white .dropdown-menu .dropdown-item:hover{
+            color: $default-color;
+        }
+
+        .navbar-toggler-bar{
+            display: block;
+            position: relative;
+            width: 22px;
+            height: 1px;
+            border-radius: 1px;
+            background: $default-color;
+
+            & + .navbar-toggler-bar{
+                margin-top: 7px;
+            }
+
+            & + .navbar-toggler-bar.navbar-kebab{
+                margin-top: 3px;
+            }
+
+            &.bar2{
+                width: 17px;
+                transition: width .2s linear;
+            }
+        }
+
+        &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
+            background-color: $default-color;
+        }
+
+        & .toggled .navbar-toggler-bar{
+            width: 24px;
+
+            & + .navbar-toggler-bar{
+                margin-top: 5px;
+            }
+        }
+
+    }
+
+    .wrapper{
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    }
+
+    .nav-open{
+        .main-panel{
+            right: 0;
+            @include transform-translate-x(260px);
+        }
+
+        .sidebar{
+            @include transform-translate-x(0px);
+        }
+
+        body{
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        .menu-on-right{
+            .main-panel{
+                @include transform-translate-x(-260px);
+            }
+
+            .navbar-collapse,
+            .sidebar{
+                @include transform-translate-x(0px);
+            }
+
+            .navbar-translate{
+                @include transform-translate-x(-300px);
+            }
+
+            #bodyClick{
+                right: 260px;
+                left: auto;
+            }
+        }
+    }
+
+    .menu-on-right{
+        .sidebar{
+            left: auto;
+            right:0;
+            @include transform-translate-x(260px);
+        }
+    }
+
+    .bar1,
+    .bar2,
+    .bar3 {
+      outline: 1px solid transparent;
+    }
+    .bar1 {
+      top: 0px;
+      @include bar-animation($topbar-back);
+    }
+    .bar2 {
+      opacity: 1;
+    }
+    .bar3 {
+      bottom: 0px;
+      @include bar-animation($bottombar-back);
+    }
+    .toggled .bar1 {
+      top: 6px;
+      @include bar-animation($topbar-x);
+    }
+    .toggled .bar2 {
+      opacity: 0;
+    }
+    .toggled .bar3 {
+      bottom: 6px;
+      @include bar-animation($bottombar-x);
+    }
+
+    @include topbar-x-rotation();
+    @include topbar-back-rotation();
+    @include bottombar-x-rotation();
+    @include bottombar-back-rotation();
+
+    @-webkit-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @-moz-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+
+    #bodyClick{
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 1;
+        top: 0;
+        right: 0;
+        left: 260px;
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+        background-color: transparent;
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    }
+
+    .footer{
+        .copyright{
+            text-align: right;
+        }
+    }
+
+    .section-nucleo-icons .icons-container{
+        margin-top: 65px;
+    }
+
+    .navbar-nav{
+        .nav-link{
+            i.fa,
+            i.nc-icon{
+                opacity: .5;
+            }
+        }
+    }
+
+    .sidebar,
+    .bootstrap-navbar {
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100%;
+        width: 260px;
+        right: auto;
+        left: 0;
+        z-index: 1032;
+        visibility: visible;
+        overflow-y: visible;
+        padding: 0;
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+        @include transform-translate-x(-260px);
+    }
+
+
+
+    .main-panel{
+      width: 100%;
+    }
+
+    .timeline{
+      &:before{
+          left: 5% !important;
+      }
+
+      > li > .timeline-badge{
+          left: 5% !important;
+      }
+
+      > li > .timeline-panel{
+          float: right !important;
+          width: 82% !important;
+
+          &:before{
+              border-left-width: 0 !important;
+              border-right-width: 15px !important;
+              left: -15px !important;
+              right: auto !important;
+          }
+
+          &:after{
+              border-left-width: 0 !important;
+              border-right-width: 14px !important;
+              left: -14px !important;
+              right: auto !important;
+          }
+      }
+  }
+
+}
+@media (max-width: 991px) and (min-width: 768px){
+  .nav-tabs-navigation.verical-navs {
+    padding: 0px 2px;
+  }
+}
+
+@media screen and (min-width: 768px){
+  .footer {
+    .footer-nav {
+      padding-left: 21px;
+    }
+
+    .credits {
+      padding-right: 15px;
+    }
+  }
+}
+
+@media screen and (min-width: 992px){
+    .navbar-collapse{
+        background: none !important;
+    }
+
+    .navbar .navbar-toggle{
+        display: none;
+    }
+
+    .navbar-nav{
+        .nav-link{
+            &.profile-photo{
+                padding: 0;
+                margin: 7px $padding-base-horizontal;
+            }
+        }
+    }
+
+    .section-nucleo-icons .icons-container{
+        margin: 0 0 0 auto;
+    }
+
+    .dropdown-menu .dropdown-item{
+        color: inherit;
+    }
+
+    .footer{
+        .copyright{
+            float: right;
+            padding-right: 15px;
+        }
+    }
+
+    .sidebar{
+      .sidebar-wrapper{
+        li.active{
+          > a:not([data-toggle="collapse"]),
+          > [data-toggle="collapse"] + div .nav li {
+            &:before{
+              border-right: 17px solid $medium-gray;
+              border-top: 17px solid transparent;
+              border-bottom: 17px solid transparent;
+              content: "";
+              display: inline-block;
+              position: absolute;
+              right: -16px;
+              opacity: 1;
+              top: 7px;
+              transition: opacity 150ms ease-in;
+            }
+
+            &:after{
+              border-right: 17px solid $default-body-bg;
+              border-top: 17px solid transparent;
+              border-bottom: 17px solid transparent;
+              content: "";
+              display: inline-block;
+              position: absolute;
+              right: -17px;
+              opacity: 1;
+              top: 7px;
+              transition: opacity 150ms ease-in;
+            }
+          }
+          >[data-toggle="collapse"] + div .nav li {
+            a{
+              &:before,
+              &:after {
+                top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+}
+
+@media screen and (max-width: 768px){
+  .card-stats [class*="col-"] .statistics::after {
+    display: none;
+  }
+
+  .main-panel .content {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+    .footer{
+        nav{
+            display: block;
+            margin-bottom: 5px;
+            float: none;
+        }
+    }
+
+    .landing-page .section-story-overview .image-container:nth-child(2){
+        margin-left: 0;
+        margin-bottom: 30px;
+    }
+
+    .card {
+      .form-horizontal {
+        .col-md-3.col-form-label {
+          text-align: left;
+        }
+      }
+    }
+
+}
+
+@media screen and (max-width: 767px){
+  .nav-tabs-navigation.verical-navs{
+    padding: 0 28px;
+  }
+
+  .typography-line {
+    padding-left: 23% !important;
+
+    span {
+      width: 60px !important;
+    }
+  }
+
+  .login-page,
+  .lock-page,
+  .register-page {
+    .navbar{
+      padding: .5rem 1rem;
+    }
+  }
+
+  .footer {
+    .footer-nav,
+    .credits {
+      margin: 0 auto !important;
+    }
+
+    .footer-nav {
+      margin-bottom: 10px !important;
+    }
+  }
+
+  .register-page {
+    .content {
+      padding-top: 5vh;
+    }
+    .footer {
+      position: relative;
+    }
+    .info-area.info-horizontal {
+      margin-top: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 374px){
+  .login-page {
+    .content {
+      padding-top: 10vh;
+    }
+  }
+}
+
+@media screen and (max-width: 413px){
+  .fixed-plugin {
+    .dropdown.show-dropdown.show{
+      .dropdown-menu.show {
+        width: 225px !important;
+
+        &[x-placement=top-start] {
+          transform: translate3d(0,400px,0)!important;
+        }
+
+        &:before,
+        &:after {
+          bottom: 360px !important;
+        }
+      }
+    }
+  }
+
+}
+
+
+@media screen and (max-width: 576px){
+    .navbar[class*='navbar-toggleable-'] .container{
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .card-contributions .card-stats{
+      flex-direction: column;
+
+      .bootstrap-switch{
+        margin-bottom: 15px;
+      }
+    }
+
+    .footer{
+        .copyright{
+            text-align: center;
+        }
+    }
+
+    .section-nucleo-icons{
+        .icons-container{
+            i{
+                font-size: 30px;
+
+                &:nth-child(6){
+                    font-size: 48px;
+                }
+            }
+        }
+    }
+
+    .page-header{
+        .container h6.category-absolute{
+            width: 90%;
+        }
+    }
+
+    .card-timeline .timeline {
+      .timeline-panel {
+        width: 38%;
+        padding: 15px;
+      }
+    }
+}

assets/scss/paper-dashboard/_sidebar-and-main-panel.scss

@@ -0,0 +1,361 @@
+.wrapper{
+    position: relative;
+    top: 0;
+    height: 100vh;
+
+    &.wrapper-full-page{
+        min-height: 100vh;
+        height: auto;
+    }
+}
+
+.sidebar,
+.off-canvas-sidebar{
+    position: fixed;
+    top: 0;
+    height: 100%;
+    bottom: 0;
+    width: 260px;
+    left: 0;
+    z-index: 1030;
+    border-right: 1px solid #ddd;
+
+    .sidebar-wrapper{
+        position: relative;
+        height: calc(100vh - 75px);
+        overflow: auto;
+        width: 260px;
+        z-index: 4;
+        padding-bottom: 100px;
+
+        .dropdown .dropdown-backdrop{
+          display: none !important;
+        }
+
+        .navbar-form{
+            border: none;
+        }
+    }
+
+    .navbar-minimize{
+      position: absolute;
+      right: 20px;
+      top: 2px;
+      opacity: 1;
+
+      @extend .animation-transition-general;
+    }
+    .logo-tim{
+      border-radius: 50%;
+      border: 1px solid #333;
+      display: block;
+      height: 61px;
+      width: 61px;
+      float: left;
+      overflow: hidden;
+
+      img{
+          width: 60px;
+          height: 60px;
+      }
+    }
+
+    .nav{
+        margin-top: 20px;
+        display: block;
+
+        .caret{
+            top: 14px;
+            position: absolute;
+            right: 10px;
+        }
+
+        li{
+            > a + div .nav li > a{
+                margin-top: 7px;
+            }
+
+            > a{
+                margin: 10px 15px 0;
+                color: $white-color;
+                display: block;
+                text-decoration: none;
+                position: relative;
+                text-transform: uppercase;
+                cursor: pointer;
+                font-size: 12px;
+                padding: 10px 8px;
+                line-height: 30px;
+                opacity: .7;
+            }
+
+            .nav > li > a{
+              padding: 5px 8px;
+            }
+
+            &.active > a,
+            &.active > a > i {
+              opacity: 1;
+            }
+
+            &:hover:not(.active) > a,
+            &:focus:not(.active) > a {
+                opacity: 1;
+            }
+        }
+
+        i{
+            font-size: 24px;
+            float: left;
+            margin-right: 12px;
+            line-height: 30px;
+            width: 34px;
+            text-align: center;
+            color: $opacity-5;
+            position: relative;
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+
+        .collapse,
+        .collapsing {
+          .nav {
+            margin-top: 0;
+          }
+        }
+    }
+
+    .sidebar-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+
+        &:after{
+            position: absolute;
+            z-index: 3;
+            width: 100%;
+            height: 100%;
+            content: "";
+            display: block;
+            background: #FFFFFF;
+            opacity: 1;
+        }
+    }
+
+    .logo{
+        position: relative;
+        padding: 7px $padding-base-horizontal;
+        z-index: 4;
+
+        a.logo-mini,
+        a.logo-normal{
+            @extend .animation-transition-general;
+        }
+
+        a.logo-mini{
+            opacity: 1;
+            float: left;
+            width: 34px;
+            text-align: center;
+            margin-left: 10px;
+            margin-right: 12px;
+        }
+
+        a.logo-normal{
+            display: block;
+            opacity: 1;
+            padding: 11px 0 8px;
+            @include transform-translate-x(0px);
+        }
+
+        &:after{
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 15px;
+            height: 1px;
+            width: calc(100% - 30px);
+            background-color: $opacity-5;
+
+        }
+
+        p{
+            float: left;
+            font-size: 20px;
+            margin: 10px 10px;
+            color: $white-color;
+            line-height: 20px;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        .simple-text{
+            text-transform: uppercase;
+            padding: $padding-base-vertical 0;
+            display: block;
+            white-space: nowrap;
+            font-size: $font-size-large;
+            color: $white-color;
+            text-decoration: none;
+            font-weight: $font-weight-normal;
+            line-height: 30px;
+            overflow: hidden;
+        }
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    &:before,
+    &:after{
+        display: block;
+        content: "";
+        opacity: 1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    &:after{
+        @include icon-gradient($default-color);
+        z-index: 3;
+    }
+
+    &[data-color="white"]{
+      @include sidebar-color($white-color);
+      @include sidebar-text-color($default-color);
+    }
+    &[data-color="black"]{
+      @include sidebar-color($dark-color);
+    }
+
+
+    // Active color changing
+
+    &[data-active-color="primary"]{
+        @include sidebar-active-color($primary-color);
+    }
+    &[data-active-color="info"]{
+        @include sidebar-active-color($info-color);
+    }
+    &[data-active-color="success"]{
+        @include sidebar-active-color($success-color);
+    }
+    &[data-active-color="warning"]{
+        @include sidebar-active-color($warning-color);
+    }
+    &[data-active-color="danger"]{
+        @include sidebar-active-color($danger-color);
+    }
+}
+
+.visible-on-sidebar-regular{
+    display: inline-block !important;
+}
+.visible-on-sidebar-mini{
+    display: none !important;
+}
+
+.off-canvas-sidebar{
+    .nav {
+        > li > a,
+        > li > a:hover{
+            color: $white-color;
+        }
+
+        > li > a:focus{
+            background: rgba(200, 200, 200, 0.2);
+        }
+    }
+}
+
+
+.main-panel{
+    position: relative;
+    float: right;
+    width: $sidebar-width;
+    background-color: #f4f3ef;;
+
+
+    @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+    > .content{
+        padding: 0 30px 30px;
+        min-height: calc(100vh - 123px);
+        margin-top: 93px;
+    }
+
+    > .navbar{
+        margin-bottom: 0;
+    }
+
+
+    .header{
+        margin-bottom: 50px;
+    }
+}
+
+
+.perfect-scrollbar-on{
+  .sidebar,
+  .main-panel{
+      height: 100%;
+      max-height: 100%;
+  }
+}
+
+.panel-header {
+  height: 260px;
+  padding-top: 80px;
+  padding-bottom: 45px;
+  background: #141E30;  /* fallback for old browsers */
+  background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788));
+  background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
+  position: relative;
+  overflow: hidden;
+
+  .header{
+    .title{
+      color: $white-color;
+    }
+    .category{
+      max-width: 600px;
+      color: $opacity-5;
+      margin: 0 auto;
+      font-size: 13px;
+
+      a{
+        color: $white-color;
+      }
+    }
+  }
+}
+
+.panel-header-sm{
+  height: 135px;
+}
+
+.panel-header-lg{
+  height: 380px
+}

assets/scss/paper-dashboard/_tables.scss

@@ -0,0 +1,173 @@
+.table{
+
+    .img-wrapper{
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 auto;
+    }
+
+    .img-row{
+      max-width: 60px;
+      width: 60px;
+    }
+
+    .form-check{
+        margin: 0;
+
+        & label .form-check-sign::before,
+        & label .form-check-sign::after{
+            top: -17px;
+            left: 4px;
+        }
+    }
+
+    .btn{
+        margin: 0;
+    }
+
+    small,.small{
+      font-weight: 300;
+    }
+
+    .card-tasks .card-body &{
+        margin-bottom: 0;
+
+        > thead > tr > th,
+        > tbody > tr > th,
+        > tfoot > tr > th,
+        > thead > tr > td,
+        > tbody > tr > td,
+        > tfoot > tr > td{
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
+
+   > thead > tr > th{
+       font-size: 14px;
+       font-weight: $font-weight-bold;
+       padding-bottom: 0;
+       text-transform: uppercase;
+       border: 0;
+   }
+
+   .radio,
+   .checkbox{
+       margin-top: 0;
+       margin-bottom: 0;
+       padding: 0;
+       width: 15px;
+
+       .icons{
+           position: relative;
+       }
+
+        label{
+            &:after,
+            &:before{
+                top: -17px;
+                left: -3px;
+            }
+        }
+   }
+   > thead > tr > th,
+   > tbody > tr > th,
+   > tfoot > tr > th,
+   > thead > tr > td,
+   > tbody > tr > td,
+   > tfoot > tr > td{
+       padding: 12px 7px;
+       vertical-align: middle;
+   }
+
+   .th-description{
+       max-width: 150px;
+   }
+   .td-price{
+       font-size: 26px;
+       font-weight: $font-weight-light;
+       margin-top: 5px;
+       position: relative;
+       top: 4px;
+       text-align: right;
+   }
+   .td-total{
+        font-weight: $font-weight-bold;
+        font-size: $font-size-h5;
+        padding-top: 20px;
+        text-align: right;
+    }
+
+   .td-actions .btn{
+    margin: 0px;
+    }
+
+    > tbody > tr{
+        position: relative;
+    }
+}
+
+.table-shopping{
+    > thead > tr > th{
+        font-size: $font-size-h6;
+        text-transform: uppercase;
+    }
+    > tbody > tr > td{
+        font-size: $font-paragraph;
+
+        b{
+            display: block;
+            margin-bottom: 5px;
+        }
+    }
+    .td-name{
+        font-weight: $font-weight-normal;
+        font-size: 1.5em;
+        small{
+            color: $dark-gray;
+            font-size: 0.75em;
+            font-weight: $font-weight-light;
+        }
+    }
+    .td-number{
+       font-weight: $font-weight-light;
+       font-size: $font-size-h4;
+   }
+    .td-name{
+        min-width: 200px;
+    }
+    .td-number{
+        text-align: right;
+        min-width: 170px;
+
+        small{
+            margin-right: 3px;
+        }
+    }
+
+    .img-container{
+        width: 120px;
+        max-height: 160px;
+        overflow: hidden;
+        display: block;
+
+        img{
+            width: 100%;
+        }
+    }
+}
+
+.table-responsive{
+  overflow: scroll;
+  padding-bottom: 10px;
+}
+
+#tables .table-responsive{
+    margin-bottom: 30px;
+}
+
+.table-hover>tbody>tr:hover{
+  background-color: #f5f5f5;
+}

assets/scss/paper-dashboard/_typography.scss

@@ -0,0 +1,173 @@
+button,
+input,
+optgroup,
+select,
+textarea{
+    font-family: $sans-serif-family;
+}
+h1,h2,h3,h4,h5,h6{
+    font-weight: $font-weight-normal;
+}
+
+a{
+    color: $primary-color;
+    &:hover,
+    &:focus{
+        color: $primary-color;
+    }
+}
+h1, .h1 {
+    font-size: $font-size-h1;
+    line-height: 1.15;
+    margin-bottom: $margin-base-vertical * 2;
+
+    small{
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+        opacity: .8;
+    }
+}
+h2, .h2{
+    font-size: $font-size-h2;
+    margin-bottom: $margin-base-vertical * 2;
+}
+h3, .h3{
+    font-size: $font-size-h3;
+    margin-bottom: $margin-base-vertical * 2;
+    line-height: 1.4em;
+}
+h4, .h4{
+    font-size: $font-size-h4;
+    line-height: 1.45em;
+    margin-top: $margin-base-vertical * 2;
+    margin-bottom: $margin-base-vertical;
+
+    & + .category,
+    &.title + .category{
+        margin-top: -10px;
+    }
+}
+h5, .h5 {
+    font-size: $font-size-h5;
+    line-height: 1.4em;
+    margin-bottom: 15px;
+}
+h6, .h6{
+    font-size: $font-size-h6;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+}
+p{
+    &.description{
+        font-size: 1.14em;
+    }
+}
+
+// i.fa{
+//     font-size: 18px;
+//     position: relative;
+//     top: 1px;
+// }
+
+.title{
+    font-weight: $font-weight-bold;
+
+    &.title-up{
+        text-transform: uppercase;
+
+        a{
+            color: $black-color;
+            text-decoration: none;
+        }
+    }
+    & + .category{
+        margin-top: -10px;
+    }
+}
+
+.description,
+.card-description,
+.footer-big p,
+.card .footer .stats{
+    color: $dark-gray;
+    font-weight: $font-weight-light;
+}
+.category,
+.card-category{
+    text-transform: capitalize;
+    font-weight: $font-weight-normal;
+    color: $dark-gray;
+    font-size: $font-size-mini;
+}
+
+.card-category{
+    font-size: $font-size-h6;
+}
+
+.text-primary,
+a.text-primary:focus, a.text-primary:hover {
+  color: $brand-primary !important;
+}
+.text-info,
+a.text-info:focus, a.text-info:hover {
+  color: $brand-info !important;
+}
+.text-success,
+a.text-success:focus, a.text-success:hover {
+  color: $brand-success !important;
+}
+.text-warning,
+a.text-warning:focus, a.text-warning:hover {
+  color: $brand-warning !important;
+}
+.text-danger,
+a.text-danger:focus, a.text-danger:hover {
+  color: $brand-danger !important;
+}
+
+.text-gray,
+a.text-gray:focus, a.text-gray:hover{
+    color: $light-gray !important;
+}
+
+
+.blockquote{
+    border-left: none;
+    border: 1px solid $default-color;
+    padding: 20px;
+    font-size: $font-size-blockquote;
+    line-height: 1.8;
+
+    small{
+        color: $default-color;
+        font-size: $font-size-small;
+        text-transform: uppercase;
+    }
+
+    &.blockquote-primary{
+        border-color: $primary-color;
+        color: $primary-color;
+
+        small{
+            color: $primary-color;
+        }
+    }
+
+    &.blockquote-danger{
+        border-color: $danger-color;
+        color: $danger-color;
+
+        small{
+            color: $danger-color;
+        }
+    }
+
+    &.blockquote-white{
+        border-color: $opacity-8;
+        color: $white-color;
+
+        small{
+            color: $opacity-8;
+        }
+    }
+}

assets/scss/paper-dashboard/_variables.scss

@@ -0,0 +1,404 @@
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$font-color:                 #66615b !default;
+$fill-font-color:            rgba(255, 255, 255, 0.8);
+$font-family-sans-serif:     'Montserrat', "Helvetica", Arial, sans-serif;
+$sans-serif-family:          'Montserrat', 'Helvetica Neue',  Arial, sans-serif;
+
+
+$none:                       0   !default;
+$border-thin:                1px !default;
+$border-thick:               2px !default;
+
+$white-color:                #FFFFFF !default;
+$white-bg:                   #FFFFFF !default;
+$orange-bg:                  #e95e38 !default;
+
+$smoke-bg:                   #F5F5F5 !default;
+$light-black:                #444    !default;
+
+$black-bg:                   rgba(30,30,30,.97) !default;
+
+$black-color:                #2c2c2c !default;
+$black-hr:                   #444444 !default;
+
+$hr-line:                    rgba(0,0,0, .1) !default;
+
+$light-gray:                 #E3E3E3 !default;
+$medium-gray:                #DDDDDD !default;
+$dark-gray:                  #9A9A9A !default;
+
+$table-line-color:           #ccc !default;
+$muted-color:                #a49e93 !default;
+
+$opacity-gray-3:             rgba(222,222,222, .3) !default;
+$opacity-gray-5:             rgba(222,222,222, .5) !default;
+$opacity-gray-8:             rgba(222,222,222, .8) !default;
+
+
+$opacity-5:                  rgba(255,255,255, .5) !default;
+$opacity-8:                  rgba(255,255,255, .8) !default;
+
+$datepicker-color-days:             rgba(255,255,255, .8)  !default;
+$datepicker-color-old-new-days:     rgba(255,255,255, .4)  !default;
+
+
+$opacity-1:                  rgba(255,255,255, .1) !default;
+$opacity-2:                  rgba(255,255,255, .2) !default;
+
+$transparent-bg:             transparent !default;
+$dark-background:            #555555 !default;
+
+$gray-input-bg:              #fffcf5 !default;
+$danger-input-bg:            #FFC0A4 !default;
+$success-input-bg:           #ABF3CB !default;
+$other-medium-gray:          #A49E93 !default;
+$transparent-bg:             transparent !default;
+
+$placeholder-gray:           rgba(210, 210, 210, 1)  !default;
+
+$default-color:              #66615B !default;
+$default-bg:                 #66615B !default;
+$default-states-color:       #403D39 !default;
+
+$smoke-bg:                   #F5F5F5 !default;
+$pale-bg:                    #FFFCF5 !default;
+$medium-pale-bg:             #F1EAE0 !default;
+$default-body-bg:                 #f4f3ef !default;
+
+$primary-color:              #51cbce !default;
+$primary-states-color:       darken($primary-color, 10%) !default;
+
+$success-color:              #6bd098 !default;
+$success-states-color:       darken($success-color, 10%) !default;
+
+$info-color:                 #51bcda !default;
+$info-states-color:          darken($info-color, 10%) !default;
+
+$warning-color:              #fbc658 !default;
+$warning-states-color:       darken($warning-color, 10%) !default;
+
+$danger-color:               #ef8157 !default;
+$danger-states-color:        darken($danger-color, 8%) !default;
+
+$link-disabled-color:        #666666 !default;
+
+$purple-color:               #c178c1 !default;
+$purple-states-color:        darken($purple-color, 8%) !default;
+
+$medium-pale-bg:             #F1EAE0 !default;
+
+$brown-color:                #dcb285 !default;
+$default-color-opacity:      rgba(182, 182, 182, .6) !default;
+$primary-color-opacity:      rgba(249, 99, 50, .3) !default;
+$success-color-opacity:      rgba(24, 206, 15, .3) !default;
+$info-color-opacity:         rgba(44, 168, 255, .3) !default;
+$warning-color-opacity:      rgba(255, 178, 54, .3) !default;
+$danger-color-opacity:       rgba(255, 54, 54, .3) !default;
+
+$new-blue:            #1DC7EA;
+$new-purple:          #9368E9;
+$new-red:             #FB404B;
+$new-green:           #87CB16;
+$new-orange:          #FFA534;
+$new-dark-blue:       #1F77D0;
+$new-black:           #5e5e5e;
+
+$orange-color:               #f96332 !default;
+$color-red-error: rgb(185, 74, 72) !default;
+$color-grey-arrow: rgba(204, 204, 204, 0.2) !default;
+
+$bg-nude:               #FFFCF5 !default;
+$bg-primary:            lighten($primary-color, 7%) !default;
+$bg-info:               lighten($info-color, 7%) !default;
+$bg-success:            lighten($success-color, 7%) !default;
+$bg-warning:            lighten($warning-color, 7%) !default;
+$bg-danger:             lighten($danger-color, 7%) !default;
+$bg-brown:              lighten($brown-color, 7%) !default;
+$bg-purple:             lighten($purple-color, 7%) !default;
+
+//     brand Colors
+$brand-primary:              $primary-color !default;
+$brand-info:                 $info-color !default;
+$brand-success:              $success-color !default;
+$brand-warning:              $warning-color !default;
+$brand-danger:               $danger-color !default;
+$brand-inverse:              $black-color !default;
+
+$link-disabled-color:        #666666 !default;
+$dark-color:                 #212120 !default;
+//     light colors
+$light-blue:                 rgba($primary-color, .2);
+$light-azure:                rgba($info-color, .2);
+$light-green:                rgba($success-color, .2);
+$light-orange:               rgba($warning-color, .2);
+$light-red:                  rgba($danger-color, .2);
+
+// padding for links inside dropdown menu
+$padding-dropdown-vertical:     10px !default;
+$padding-dropdown-horizontal:   15px !default;
+
+$margin-large-vertical:        30px !default;
+$margin-base-vertical:         15px !default;
+
+// border radius for buttons
+$border-radius-none:             0px !default;
+$border-radius-btn-small:      26px !default;
+$border-radius-btn-base:       20px !default;
+$border-radius-btn-large:      50px !default;
+
+
+$margin-bottom:                0 0 10px 0 !default;
+$border-radius-small:           3px !default;
+$border-radius-base:            4px !default;
+$border-radius-large:           6px !default;
+$border-radius-x-large:         8px !default;
+$border-radius-extreme:         12px !default;
+
+//variables used in cards
+$card-black-color:          #252422 !default;
+$card-muted-color:          #ccc5b9 !default;
+
+$card-background-blue:      #b8d8d8 !default;
+$card-font-blue:            #506568 !default;
+$card-subtitle-blue:        #7a9e9f !default;
+
+$card-background-green:      #d5e5a3 !default;
+$card-font-green:            #60773d !default;
+$card-subtitle-green:        #92ac56 !default;
+
+$card-background-yellow:      #ffe28c !default;
+$card-font-yellow:            #b25825 !default;
+$card-subtitle-yellow:        #d88715 !default;
+
+$card-background-brown:      #d6c1ab !default;
+$card-font-brown:            #75442e !default;
+$card-subtitle-brown:        #a47e65 !default;
+
+$card-background-purple:      #baa9ba !default;
+$card-font-purple:            #3a283d !default;
+$card-subtitle-purple:        #5a283d !default;
+
+$card-background-orange:      #ff8f5e !default;
+$card-font-orange:            #772510 !default;
+$card-subtitle-orange:        #e95e37 !default;
+
+
+
+//== Components
+//
+
+$padding-input-vertical:        11px !default;
+$padding-input-horizontal:      11px !default;
+
+$padding-btn-vertical:         11px !default;
+$padding-btn-horizontal:       22px !default;
+
+$padding-base-vertical:        .5rem !default;
+$padding-base-horizontal:      .7rem !default;
+
+$padding-round-horizontal:     23px !default;
+
+$padding-simple-vertical:      10px !default;
+$padding-simple-horizontal:    17px !default;
+
+$padding-large-vertical:       15px !default;
+$padding-large-horizontal:     48px !default;
+
+$padding-small-vertical:        5px !default;
+$padding-small-horizontal:     15px !default;
+
+// $padding-xs-vertical:           1px !default;
+// $padding-xs-horizontal:         5px !default;
+
+$padding-label-vertical:        2px !default;
+$padding-label-horizontal:     12px !default;
+
+$margin-large-vertical:        30px !default;
+$margin-base-vertical:         15px !default;
+
+$margin-base-horizontal:       15px !default;
+
+$margin-bottom:                 10px        !default;
+$border:                        1px solid   !default;
+$border-radius-extra-small:     0.125rem    !default;
+$border-radius-small:           0.1875rem   !default;
+$border-radius-large:           0.25rem     !default;
+$border-radius-extreme:         0.875rem    !default;
+
+$border-radius-large-top:      $border-radius-large $border-radius-large 0 0 !default;
+$border-radius-large-bottom:   0 0 $border-radius-large $border-radius-large !default;
+
+$btn-round-radius:             30px         !default;
+
+$height-base:                  40px         !default;
+
+$btn-icon-size:                 3.5rem       !default;
+$btn-icon-size-regular:         2.375rem      !default;
+$btn-icon-font-size-regular:    0.9375rem     !default;
+$btn-icon-font-size-small:      0.6875rem      !default;
+$btn-icon-size-small:           1.875rem     !default;
+$btn-icon-font-size-lg:         1.325rem     !default;
+$btn-icon-size-lg:              3.6rem         !default;
+
+$font-size-h1:                 3.5em        !default; // ~ 49px
+$font-size-h2:                 2.5em        !default; // ~ 35px
+$font-size-h3:                 2em          !default; // ~ 28px
+$font-size-h4:                 1.714em      !default; // ~ 24px
+$font-size-h5:                 1.57em       !default; // ~ 22px
+$font-size-h6:                 1em          !default; // ~ 14px
+
+$font-paragraph:               1em          !default;
+$font-size-navbar:             1em          !default;
+$font-size-mini:               0.7142em     !default;
+$font-size-small:              0.8571em     !default;
+$font-size-base:               14px         !default;
+$font-size-large:              1rem         !default;
+$font-size-large-navbar:       20px         !default;
+$font-size-blockquote:         1.1em        !default; // ~ 15px
+$font-size-medium:             16px         !default;
+$font-size-xs:                 12px         !default;
+
+$font-weight-light:             300         !default;
+$font-weight-normal:            400         !default;
+$font-weight-semi:              600         !default;
+$font-weight-bold:              700         !default;
+
+$line-height-general:        1.5            !default;
+$line-height-nav-link:       1.625rem       !default;
+$btn-icon-line-height:       2.4em          !default;
+$line-height:                1.35em         !default;
+$line-height-lg:             54px           !default;
+
+
+$border-radius-top:        10px 10px 0 0     !default;
+$border-radius-bottom:     0 0 10px 10px     !default;
+
+$dropdown-shadow:          1px 2px 7px 1px rgba(0,0,0,.125);
+$box-shadow-raised:        0px 10px 25px 0px rgba(0, 0, 0, 0.3);
+$box-shadow:               0 2px 2px rgba(204, 197, 185, 0.5);
+$sidebar-box-shadow:       0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
+
+$general-transition-time:  300ms             !default;
+
+$slow-transition-time:           370ms       !default;
+$dropdown-coordinates:      29px -50px       !default;
+
+$fast-transition-time:           150ms       !default;
+$select-coordinates:         50% -40px       !default;
+
+$transition-linear:         linear           !default;
+$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease:           ease 0s;
+
+
+//$navbar-padding-a:               9px 13px;
+$navbar-margin-a:                15px 0px;
+
+$padding-social-a:               10px 5px;
+
+$navbar-margin-a-btn:            15px 0px;
+$navbar-margin-a-btn-round:      16px 0px;
+
+$navbar-padding-a-icons:         6px 15px;
+$navbar-margin-a-icons:          6px  3px;
+
+$navbar-padding-base:            0.625rem;
+//$navbar-margin-brand:             5px  0px;
+
+$navbar-margin-brand-icons:      12px auto;
+$navbar-margin-btn:              15px  3px;
+
+$height-icon-sm:				 32px;
+$width-icon-sm:					 32px;
+$padding-icon-sm:			     4px;
+$border-radius-icon-sm:			 7px;
+
+$height-icon-message:			 40px;
+$width-icon-message:			 40px;
+
+$height-icon-message-sm: 		 20px;
+$width-icon-message-sm:			 20px;
+
+$white-navbar:                  rgba(#FFFFFF, .96);
+$primary-navbar:                rgba(#34ACDC, .98);
+$info-navbar:                   rgba(#5BCAFF, .98);
+$success-navbar:                rgba(#4CD964, .98);
+$warning-navbar:                rgba(#FF9500, .98);
+$danger-navbar:                 rgba(#FF4C40, .98);
+
+$topbar-x:             topbar-x !default;
+$topbar-back:          topbar-back !default;
+$bottombar-x:          bottombar-x !default;
+$bottombar-back:       bottombar-back !default;
+
+//Nucleo Icons
+
+$nc-font-path:        '../fonts' !default;
+$nc-font-size-base:   14px !default;
+$nc-css-prefix:       nc !default;
+$nc-background-color:     #eee !default;
+$nc-li-width:         (30em / 14) !default;
+$nc-padding-width:    (1em/3) !default;
+
+// Social icons color
+$social-twitter:                   #55acee !default;
+$social-twitter-state-color:       darken(#55acee, 5%) !default;
+
+$social-facebook: 			       #3b5998 !default;
+$social-facebook-state-color:      darken(#3b5998, 5%) !default;
+
+$social-google: 			       #dd4b39 !default;
+$social-google-state-color:        darken(#dd4b39, 5%) !default;
+
+$social-linkedin: 			         #0077B5 !default;
+$social-linkedin-state-color:        darken(#0077B5, 5%) !default;
+
+// Sidebar variables
+$sidebar-width:              calc(100% - 260px) !default;
+$sidebar-mini-width:         calc(100% - 80px) !default;
+
+
+// Social icons color
+$social-twitter:                   #55acee !default;
+$social-twitter-state-color:       lighten(#55acee, 6%) !default;
+
+$social-facebook: 			       #3b5998 !default;
+$social-facebook-state-color:      lighten(#3b5998, 6%) !default;
+
+$social-google: 			       #dd4b39 !default;
+$social-google-state-color:        lighten(#dd4b39, 6%) !default;
+
+$social-linkedin: 			       #0077B5 !default;
+$social-linkedin-state-color:      lighten(#0077B5, 6%) !default;
+
+$social-pinterest: 			       #cc2127 !default;
+$social-pinterest-state-color:     lighten(#cc2127, 6%) !default;
+
+$social-dribbble: 		           #ea4c89 !default;
+$social-dribbble-state-color:      lighten(#ea4c89, 6%) !default;
+
+$social-github: 		      	   #333333 !default;
+$social-github-state-color:        lighten(#333333, 6%) !default;
+
+$social-youtube: 		    	   #e52d27 !default;
+$social-youtube-state-color:       lighten(#e52d27, 6%) !default;
+
+$social-instagram: 		           #125688 !default;
+$social-instagram-state-color:     lighten(#125688, 6%) !default;
+
+$social-reddit: 		  	       #ff4500 !default;
+$social-reddit-state-color:        lighten(#ff4500, 6%) !default;
+
+$social-tumblr: 			       #35465c !default;
+$social-tumblr-state-color:        lighten(#35465c, 6%) !default;
+
+$social-behance: 			       #1769ff !default;
+$social-behance-state-color:       lighten(#1769ff, 6%) !default;
+
+// Placeholder text color
+$input-color-placeholder: #999 !default;
+
+$zindex-select-dropdown: 1060 !default; // must be higher than a modal background (1050)

assets/scss/paper-dashboard/cards/_card-chart.scss

@@ -0,0 +1,48 @@
+.card-chart {
+  .card-header{
+    .card-title{
+      margin-top: 10px;
+      margin-bottom: 0;
+    }
+    .card-category{
+      margin-bottom: 5px;
+    }
+  }
+
+  .table{
+    margin-bottom: 0;
+
+    td{
+      border-top: none;
+      border-bottom: 1px solid #e9ecef;
+    }
+  }
+
+  .card-progress {
+    margin-top: 30px;
+  }
+
+  .chart-area {
+    height: 190px;
+    width: calc(100% + 30px);
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .card-footer {
+    margin-top: 15px;
+
+    .stats{
+      color: $dark-gray;
+    }
+  }
+
+  .dropdown{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+
+    .btn{
+      margin: 0;
+    }
+  }
+}

assets/scss/paper-dashboard/cards/_card-map.scss

@@ -0,0 +1,3 @@
+.map{
+    height: 500px;
+}

assets/scss/paper-dashboard/cards/_card-plain.scss

@@ -0,0 +1,17 @@
+
+.card-plain{
+    background: transparent;
+    box-shadow: none;
+
+    .card-header,
+    .card-footer{
+        margin-left: 0;
+        margin-right: 0;
+        background-color: transparent;
+    }
+
+    &:not(.card-subcategories).card-body{
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

assets/scss/paper-dashboard/cards/_card-stats.scss

@@ -0,0 +1,48 @@
+%card-stats{
+  hr{
+    margin: 5px 15px;
+  }
+}
+
+
+.card-stats{
+    .card-body{
+        padding: 15px 15px 0px;
+
+        .numbers{
+          text-align: right;
+          font-size: 2em;
+
+            p{
+                margin-bottom: 0;
+            }
+            .card-category {
+              color: $dark-gray;
+              font-size: 16px;
+              line-height: 1.4em;
+            }
+        }
+    }
+    .card-footer{
+        padding: 0px 15px 15px;
+
+        .stats{
+          color: $dark-gray;
+        }
+
+        hr{
+          margin-top: 10px;
+          margin-bottom: 15px;
+        }
+    }
+    .icon-big {
+        font-size: 3em;
+        min-height: 64px;
+
+        i{
+            line-height: 59px;
+        }
+    }
+
+
+}

assets/scss/paper-dashboard/cards/_card-user.scss

@@ -0,0 +1,50 @@
+.card-user{
+    .image{
+        height: 130px;
+
+      img {
+        border-radius: 12px;
+      }
+    }
+
+    .author{
+        text-align: center;
+        text-transform: none;
+        margin-top: -77px;
+
+        a +  p.description{
+            margin-top: -7px;
+        }
+    }
+
+    .avatar{
+        width: 124px;
+        height: 124px;
+        border: 1px solid $white-color;
+        position: relative;
+    }
+
+    .card-body{
+        min-height: 240px;
+    }
+
+    hr{
+        margin: 5px 15px 15px;
+    }
+
+    .card-body + .card-footer {
+      padding-top: 0;
+    }
+
+    .card-footer {
+      h5 {
+        font-size: 1.25em;
+        margin-bottom: 0;
+      }
+    }
+
+    .button-container{
+        margin-bottom: 6px;
+        text-align: center;
+    }
+}

assets/scss/paper-dashboard/mixins/_buttons.scss

@@ -0,0 +1,212 @@
+// Mixin for generating new styles
+@mixin btn-styles($btn-color, $btn-states-color) {
+    background-color: $btn-color;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:focus,
+    &:active:hover,
+    &.active:focus,
+    &.active:hover,
+    .show > &.dropdown-toggle,
+    .show > &.dropdown-toggle:focus,
+    .show > &.dropdown-toggle:hover {
+        background-color: $btn-states-color !important;
+        color: $white-color !important;
+        box-shadow: none !important;
+    }
+
+    &:not([data-action]):hover{
+        box-shadow:  none;
+    }
+
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background-color: $btn-color;
+            border-color: $btn-color;
+        }
+    }
+
+    // btn-neutral style
+    @if $btn-color == $white-color{
+        color: $primary-color;
+
+        &.btn-danger{
+            color: $danger-color;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $danger-states-color !important;
+            }
+        }
+
+        &.btn-info{
+            color: $info-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $info-states-color !important;
+            }
+        }
+
+        &.btn-warning{
+            color: $warning-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $warning-states-color !important;
+            }
+        }
+
+        &.btn-success{
+            color: $success-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $success-states-color !important;
+            }
+        }
+
+        &.btn-default{
+            color: $default-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $default-states-color !important;
+            }
+        }
+
+        &.active,
+        &:active,
+        &:active:focus,
+        &:active:hover,
+        &.active:focus,
+        &.active:hover,
+        .show > &.dropdown-toggle,
+        .show > &.dropdown-toggle:focus,
+        .show > &.dropdown-toggle:hover {
+            background-color: $white-color !important;
+            color: $primary-states-color !important;
+            box-shadow: none !important;
+        }
+
+        &:hover,
+        &:focus{
+            color: $primary-states-color !important;
+
+            &:not(.nav-link){
+                box-shadow: none;
+            }
+
+        }
+
+    } @else {
+        color: $white-color;
+    }
+
+    &.btn-simple{
+        color: $btn-color;
+        border-color: $btn-color;
+
+        &:hover,
+        &:focus,
+        &:active{
+            background-color: $transparent-bg;
+            color: $btn-states-color;
+            border-color: $btn-states-color;
+            box-shadow: none;
+        }
+    }
+
+    &.btn-link{
+        color: $btn-color;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:active:focus {
+            background-color: $transparent-bg;
+            color: $btn-states-color;
+            text-decoration: none;
+            box-shadow: none;
+        }
+    }
+}
+
+@mixin btn-outline-styles($btn-color, $btn-states-color){
+    background: $transparent-bg;
+    border: 2px solid $btn-color !important;
+    color: $btn-color;
+    @include opacity(1);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      background-color: $btn-color !important;
+      color: $fill-font-color !important;
+      border-color: $btn-color !important;
+      .caret{
+          border-top-color: $fill-font-color !important;
+      }
+    }
+
+    .caret{
+        border-top-color: $white-color !important;
+    }
+
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+      &,
+      &:hover,
+      &:focus,
+      &.focus,
+      &:active,
+      &.active {
+        background-color: $transparent-bg !important;
+        border-color: $btn-color !important;
+      }
+    }
+}
+
+@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
+   font-size: $font-size;
+   border-radius: $border;
+   padding: $padding-vertical $padding-horizontal;
+
+   &.btn-simple{
+       padding: $padding-vertical - 1 $padding-horizontal - 1;
+   }
+
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}

assets/scss/paper-dashboard/mixins/_cards.scss

@@ -0,0 +1,4 @@
+@mixin icon-color($color) {
+    box-shadow:  0px 9px 30px -6px $color;
+    color: $color;
+}

assets/scss/paper-dashboard/mixins/_dropdown.scss

@@ -0,0 +1,24 @@
+@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
+    background-color: $brand-color;
+
+    &:before{
+        color: $brand-color;
+    }
+
+    .dropdown-header:not([href]):not([tabindex]){
+        color: $dropdown-header-color;
+    }
+
+    .dropdown-item{
+        color: $dropdown-color;
+
+        &:hover,
+        &:focus{
+            background-color: $background-color;
+        }
+    }
+
+    .dropdown-divider{
+        background-color: $background-color;
+    }
+}

assets/scss/paper-dashboard/mixins/_inputs.scss

@@ -0,0 +1,232 @@
+@mixin input-size($padding-vertical, $padding-horizontal){
+    padding: $padding-vertical $padding-horizontal;
+}
+
+@mixin form-control-placeholder($color, $opacity){
+   .form-control::-moz-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control:-moz-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control::-webkit-input-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control:-ms-input-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+}
+
+@mixin placeholder() {
+  &::-moz-placeholder {@content; } // Firefox
+  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
+}
+
+@mixin light-form(){
+    border-radius: 0;
+    border:0;
+    padding: 0;
+    background-color: transparent;
+
+}
+
+
+@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {
+    .form-group.no-border.form-control-lg,
+    .input-group.no-border.form-control-lg{
+        .input-group-append .input-group-text{
+            padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+        }
+
+        .form-control{
+            padding: $padding-vertical $padding-horizontal;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+            }
+        }
+    }
+
+    .form-group.form-control-lg,
+    .input-group.form-control-lg{
+        .form-control{
+            padding: $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
+
+            & + .form-control{
+                padding: $padding-vertical  $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
+            }
+        }
+    }
+}
+
+
+
+@mixin input-base-padding($padding-vertical, $padding-horizontal) {
+    .form-group.no-border,
+    .input-group.no-border{
+        .form-control{
+            padding: $padding-vertical $padding-horizontal;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+        }
+    }
+
+    .form-group,
+    .input-group{
+        .form-control{
+            padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .form-control,
+            & ~ .form-control{
+                padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
+            }
+        }
+    }
+}
+
+
+//color1 = $opacity-5
+//color2 = $opacity-8
+//color3 = $white-color
+//color4 = $transparent-bg
+//color5 = $opacity-1
+//color6 = $opacity-2
+
+
+@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
+    @include form-control-placeholder(darken($color2, 8%), 1);
+
+    .form-control{
+        border-color: $color1;
+        color: $color2;
+
+        &:focus{
+            border-color: $color3;
+            background-color: $color4;
+            color: $color3;
+        }
+    }
+
+    .has-success,
+    .has-danger{
+        &:after{
+            color: $color3;
+        }
+    }
+
+    .has-danger{
+        .form-control{
+            background-color: $color4;
+        }
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $color4;
+        border-color: $color1;
+        color: $color2;
+    }
+
+    .input-group-focus{
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: $color4;
+            border-color: $color3;
+            color: $color3;
+        }
+    }
+
+    .form-group.no-border,
+    .input-group.no-border{
+        .form-control{
+            background-color: $color5;
+            color: $color2;
+
+            &:focus,
+            &:active,
+            &:active{
+                background-color: $color6;
+                color: $color3;
+            }
+        }
+
+        .form-control + .input-group-prepend .input-group-text,
+        .form-control + .input-group-append .input-group-text{
+            background-color: $color5;
+
+            &:focus,
+            &:active,
+            &:active{
+                background-color: $color6;
+                color: $color3;
+            }
+        }
+
+        .form-control{
+            &:focus{
+                & + .input-group-prepend .input-group-text,
+                & + .input-group-append .input-group-text{
+                    background-color: $color6;
+                    color: $color3;
+                }
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: $color5;
+            border: none;
+            color: $color2;
+        }
+
+        &.input-group-focus{
+            .input-group-prepend .input-group-text,
+            .input-group-append .input-group-text{
+                background-color: $color6;
+                color: $color3;
+            }
+        }
+    }
+}
+
+@mixin transition-input-focus-color() {
+    -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+}

assets/scss/paper-dashboard/mixins/_page-header.scss

@@ -0,0 +1,7 @@
+@mixin linear-gradient($color1, $color2){
+    background: $color1; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
+}

assets/scss/paper-dashboard/mixins/_transparency.scss

@@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}

assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss

@@ -0,0 +1,228 @@
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+@mixin transition($time, $type){
+    -webkit-transition: all $time $type;
+    -moz-transition: all $time $type;
+    -o-transition: all $time $type;
+    -ms-transition: all $time $type;
+    transition: all $time $type;
+}
+
+
+@mixin sidebar-color($color){
+  &:after{
+    background: $color;
+  }
+}
+
+@mixin bar-animation($type){
+     -webkit-animation: $type 500ms linear 0s;
+     -moz-animation: $type 500ms linear 0s;
+     animation: $type 500ms 0s;
+     -webkit-animation-fill-mode: forwards;
+     -moz-animation-fill-mode: forwards;
+     animation-fill-mode: forwards;
+}
+
+@mixin sidebar-active-color($font-color){
+    .nav {
+        li {
+          &.active > a,
+          &.active > a i,
+          &.active > a[data-toggle="collapse"],
+          &.active > a[data-toggle="collapse"] i,
+          &.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon,
+          &.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
+            color: $font-color;
+            opacity: 1;
+          }
+        }
+    }
+}
+
+@mixin transition-opacity($time, $type){
+    -webkit-transition: opacity $time $type;
+    -moz-transition: opacity $time $type;
+    -o-transition: opacity $time $type;
+    -ms-transition: opacity $time $type;
+    transition: opacity $time $type;
+}
+
+@mixin transform-translate-y-dropdown($value) {
+    -webkit-transform:  translate3d(-20px,$value,0) !important;
+       -moz-transform: translate3d(-20px,$value,0) !important;
+       -o-transform: translate3d(-20px,$value,0) !important;
+       -ms-transform: translate3d(-20px,$value,0) !important;
+       transform: translate3d(-20px,$value,0) !important;
+}
+
+@mixin transform-translate-x($value){
+     -webkit-transform:  translate3d($value, 0, 0);
+        -moz-transform: translate3d($value, 0, 0);
+        -o-transform: translate3d($value, 0, 0);
+        -ms-transform: translate3d($value, 0, 0);
+        transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-translate-y($value){
+     -webkit-transform:  translate3d(0,$value,0) !important;
+        -moz-transform: translate3d(0,$value,0) !important;
+        -o-transform: translate3d(0,$value,0) !important;
+        -ms-transform: translate3d(0,$value,0) !important;
+        transform: translate3d(0,$value,0) !important;
+}
+
+@mixin transform-translate-y-fixed-plugin($value){
+     -webkit-transform:  translate3d(0,$value,0) !important;
+        -moz-transform: translate3d(0,$value,0) !important;
+        -o-transform: translate3d(0,$value,0) !important;
+        -ms-transform: translate3d(0,$value,0) !important;
+        transform: translate3d(0,$value,0) !important;
+}
+
+@mixin icon-gradient($color, $bottomColor: #000){
+    background: $color;
+    background: -webkit-linear-gradient($color 0%, $bottomColor 80%);
+    background: -o-linear-gradient($color 0%, $bottomColor 80%);
+    background: -moz-linear-gradient($color 0%, $bottomColor 80%);
+    background: linear-gradient($color 0%, $bottomColor 80%);
+}
+
+@mixin topbar-x-rotation(){
+    @keyframes topbar-x {
+      0% {top: 0px; transform: rotate(0deg); }
+      45% {top: 6px; transform: rotate(145deg); }
+      75% {transform: rotate(130deg); }
+      100% {transform: rotate(135deg); }
+    }
+    @-webkit-keyframes topbar-x {
+      0% {top: 0px; -webkit-transform: rotate(0deg); }
+      45% {top: 6px; -webkit-transform: rotate(145deg); }
+      75% {-webkit-transform: rotate(130deg); }
+      100% { -webkit-transform: rotate(135deg); }
+    }
+    @-moz-keyframes topbar-x {
+      0% {top: 0px; -moz-transform: rotate(0deg); }
+      45% {top: 6px; -moz-transform: rotate(145deg); }
+      75% {-moz-transform: rotate(130deg); }
+      100% { -moz-transform: rotate(135deg); }
+    }
+}
+
+
+@mixin topbar-back-rotation(){
+    @keyframes topbar-back {
+      0% { top: 6px; transform: rotate(135deg); }
+      45% { transform: rotate(-10deg); }
+      75% { transform: rotate(5deg); }
+      100% { top: 0px; transform: rotate(0); }
+    }
+
+    @-webkit-keyframes topbar-back {
+      0% { top: 6px; -webkit-transform: rotate(135deg); }
+      45% { -webkit-transform: rotate(-10deg); }
+      75% { -webkit-transform: rotate(5deg); }
+      100% { top: 0px; -webkit-transform: rotate(0); }
+    }
+
+    @-moz-keyframes topbar-back {
+      0% { top: 6px; -moz-transform: rotate(135deg); }
+      45% { -moz-transform: rotate(-10deg); }
+      75% { -moz-transform: rotate(5deg); }
+      100% { top: 0px; -moz-transform: rotate(0); }
+    }
+}
+
+@mixin bottombar-x-rotation(){
+    @keyframes bottombar-x {
+      0% {bottom: 0px; transform: rotate(0deg);}
+      45% {bottom: 6px; transform: rotate(-145deg);}
+      75% {transform: rotate(-130deg);}
+      100% {transform: rotate(-135deg);}
+    }
+    @-webkit-keyframes bottombar-x {
+      0% {bottom: 0px; -webkit-transform: rotate(0deg);}
+      45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
+      75% {-webkit-transform: rotate(-130deg);}
+      100% {-webkit-transform: rotate(-135deg);}
+    }
+    @-moz-keyframes bottombar-x {
+      0% {bottom: 0px; -moz-transform: rotate(0deg);}
+      45% {bottom: 6px; -moz-transform: rotate(-145deg);}
+      75% {-moz-transform: rotate(-130deg);}
+      100% {-moz-transform: rotate(-135deg);}
+    }
+}
+
+@mixin bottombar-back-rotation{
+    @keyframes bottombar-back {
+      0% { bottom: 6px;transform: rotate(-135deg);}
+      45% { transform: rotate(10deg);}
+      75% { transform: rotate(-5deg);}
+      100% { bottom: 0px;transform: rotate(0);}
+    }
+    @-webkit-keyframes bottombar-back {
+      0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
+      45% {-webkit-transform: rotate(10deg);}
+      75% {-webkit-transform: rotate(-5deg);}
+      100% {bottom: 0px;-webkit-transform: rotate(0);}
+    }
+    @-moz-keyframes bottombar-back {
+      0% {bottom: 6px;-moz-transform: rotate(-135deg);}
+      45% {-moz-transform: rotate(10deg);}
+      75% {-moz-transform: rotate(-5deg);}
+      100% {bottom: 0px;-moz-transform: rotate(0);}
+    }
+
+}
+
+@mixin sidebar-text-color($text-color){
+    .nav {
+      li {
+        a,
+        a i,
+        a[data-toggle="collapse"],
+        a[data-toggle="collapse"] i,
+        a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon,
+        a[data-toggle="collapse"] ~ div > ul > li > a {
+          color: $text-color;
+          opacity: .7;
+        }
+
+        &:hover:not(.active) > a,
+        &:focus:not(.active) > a {
+            opacity: 1;
+        }
+      }
+    }
+
+    .logo {
+      .simple-text {
+        color: $text-color;
+      }
+      &:after {
+        background-color: $text-color;
+        opacity: .4;
+      }
+    }
+
+    .user {
+      .info a span,
+      .nav .sidebar-mini-icon,
+      .nav .sidebar-normal {
+        color: $text-color !important;
+      }
+      &:after {
+        background-color: $text-color;
+        opacity: .4;
+      }
+    }
+}
+
+@mixin badge-color($color) {
+    border-color: $color;
+    background-color: $color;
+}

assets/scss/paper-dashboard/plugins/_plugin-animate-bootstrap-notify.scss

@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@charset "UTF-8";
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2015 Daniel Eden
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+
+
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}

assets/scss/paper-dashboard/plugins/_plugin-perfect-scrollbar.scss

@@ -0,0 +1,113 @@
+/* perfect-scrollbar v0.6.13 */
+.ps-container {
+  -ms-touch-action: auto;
+  touch-action: auto;
+  overflow: hidden !important;
+  -ms-overflow-style: none; }
+  @supports (-ms-overflow-style: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+  .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent; }
+  .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px; }
+    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      bottom: 2px;
+      /* there must be 'bottom' for ps-scrollbar-x */
+      height: 6px; }
+    .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+      height: 11px; }
+  .ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px; }
+    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      right: 2px;
+      /* there must be 'right' for ps-scrollbar-y */
+      width: 6px; }
+    .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+      width: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container:hover > .ps-scrollbar-x-rail,
+  .ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6; }
+  .ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+      background-color: #999; }