Frontend Initial Commit

+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "*": ["src/*"]
+    }
+  }
+}

+{
+  "name": "light-bootstrap-dashboard-react",
+  "version": "1.3.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "3.3.7",
+    "chartist": "0.10.1",
+    "node-sass": "4.12.0",
+    "react": "16.8.6",
+    "react-bootstrap": "0.32.4",
+    "react-chartist": "0.13.3",
+    "react-dom": "16.8.6",
+    "react-google-maps": "9.4.5",
+    "react-notification-system": "0.2.17",
+    "react-router": "5.0.0",
+    "react-router-dom": "5.0.0",
+    "react-scripts": "3.0.0",
+    "react-toggle": "4.0.2"
+  },
+  "devDependencies": {
+    "@types/googlemaps": "3.30.19",
+    "@types/markerclustererplus": "2.1.33",
+    "@types/react": "16.8.13",
+    "typescript": "3.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
+    "compile-sass": "node-sass src/assets/sass/light-bootstrap-dashboard-react.scss src/assets/css/light-bootstrap-dashboard-react.css",
+    "minify-sass": "node-sass src/assets/sass/light-bootstrap-dashboard-react.scss src/assets/css/light-bootstrap-dashboard-react.min.css --output-style compressed",
+    "map-sass": "node-sass src/assets/sass/light-bootstrap-dashboard-react.scss src/assets/css/light-bootstrap-dashboard-react.css --source-map true"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <circle transform="translate(8 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="translate(16 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="translate(24 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+</svg>

+.alert{
+    border: 0;
+    border-radius: 0;
+    color: #FFFFFF;
+    padding: 10px 15px;
+    font-size: 14px;
+
+    .container &{
+        border-radius: 4px;
+
+    }
+    .navbar &{
+        border-radius: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 85px;
+        width: 100%;
+        z-index: 3;
+    }
+    .navbar:not(.navbar-transparent) &{
+        top: 70px;
+    }
+
+    span[data-notify="icon"]{
+        font-size: 30px;
+        display: block;
+        left: 15px;
+        position: absolute;
+        top: 50%;
+        margin-top: -15px;
+    }
+
+    button.close{
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        margin-top: -13px;
+        z-index: 1033;
+        background-color: #FFFFFF;
+        display: block;
+        border-radius: 50%;
+        opacity: .4;
+        line-height: 20px;
+        font-size: 12px;
+        width: 25px;
+        height: 25px;
+        outline: 0 !important;
+        text-align: center;
+        padding: 3px;
+        font-weight: 300;
+
+        &:hover{
+            opacity: .55;
+        }
+    }
+
+    .close ~ span{
+        display: block;
+        max-width: 89%;
+    }
+
+    &[data-notify="container"]{
+        padding: 10px 10px 10px 20px;
+        border-radius: $border-radius-base;
+    }
+
+    &.alert-with-icon{
+        padding-left: 65px;
+    }
+    a, a:hover, a:focus{
+        text-decoration: underline;
+        color: white;
+    }
+}
+.alert-info{
+     background-color: $azure-navbar;
+}
+.alert-success {
+    background-color: $green-navbar;
+}
+.alert-warning {
+     background-color: $orange-navbar;
+}
+.alert-danger {
+     background-color: $red-navbar;
+}

+.btn{
+    border-width: $border-thick;
+    background-color: $transparent-bg;
+    font-weight: $font-weight-normal;
+    
+    @include opacity(.8);
+    padding: $padding-base-vertical $padding-base-horizontal;
+    
+    @include btn-styles($default-color, $default-states-color);
+    
+    &:hover,
+    &:focus{
+        @include opacity(1);
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+    
+    &.btn-icon{
+        padding: $padding-base-vertical;
+    }
+    
+}
+
+// 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);
+    
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle{
+         background-color: $white-color;
+         color: $default-color;
+    }    
+    
+    &.btn-fill,
+    &.btn-fill:hover,
+    &.btn-fill:focus{
+        color: $default-color;
+    }
+    
+    &.btn-simple:active,
+    &.btn-simple.active{
+        background-color: transparent;
+    }
+}
+
+.btn{
+     &:disabled,
+     &[disabled],
+     &.disabled{
+        @include opacity(.5);
+    }
+}
+.btn-round{
+    border-width: $border-thin;
+    border-radius: $btn-round-radius !important;
+    padding: $padding-round-vertical $padding-round-horizontal;
+    
+    &.btn-icon{
+        padding: $padding-round-vertical;
+    }
+}
+.btn-simple{
+    border: $none;
+    font-size: $font-size-medium;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    
+    &.btn-icon{
+        padding: $padding-base-vertical;
+    }
+}
+.btn-lg{
+   @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
+   font-weight: $font-weight-normal;
+}
+.btn-sm{
+    @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);    
+}
+.btn-xs {
+    @include btn-size($padding-xs-vertical, $padding-xs-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;
+}

+.card{
+    border-radius: $border-radius-base;
+    box-shadow: 0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(63,63,68,.1);
+    background-color: #FFFFFF;
+    margin-bottom: 30px;
+
+    .image{
+        width: 100%;
+        overflow: hidden;
+        height: 260px;
+        border-radius: $border-radius-base $border-radius-base 0 0;
+        position: relative;
+        -webkit-transform-style: preserve-3d;
+        -moz-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+
+        img {
+            width: 100%;
+        }
+    }
+    .filter{
+        position: absolute;
+        z-index: 2;
+        background-color: rgba(0,0,0,.68);
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+
+        @include opacity(0);
+
+        .btn{
+            @include vertical-align();
+        }
+    }
+    &:hover .filter{
+        @include opacity(1);
+    }
+    .btn-hover{
+        @include opacity(0);
+    }
+    &:hover .btn-hover{
+        @include opacity(1);
+    }
+    .content{
+        padding: 15px 15px 10px 15px;
+    }
+    .header{
+        padding: 15px 15px 0;
+    }
+    .category,
+    label{
+        font-size: $font-size-base;
+        font-weight: $font-weight-normal;
+        color: $dark-gray;
+        margin-bottom: 0px;
+
+        i{
+            font-size: $font-paragraph;
+        }
+    }
+
+    label{
+        font-size: $font-size-small;
+        margin-bottom: 5px;
+        text-transform: uppercase;
+    }
+
+    .title{
+        margin: $none;
+        color: $black-color;
+        font-weight: $font-weight-light;
+    }
+    .avatar{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-right: 5px;
+    }
+    .description{
+        font-size: $font-size-base;
+        color: #333;
+    }
+    .footer{
+        padding: 0;
+        background-color: $transparent-bg;
+        line-height: 30px;
+
+        .legend{
+            padding: 5px 0;
+        }
+
+        hr{
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+    }
+    .stats{
+        color: #a9a9a9;
+    }
+    .footer div{
+        display: inline-block;
+    }
+
+    .author{
+        font-size: $font-size-small;
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+    }
+    .author i{
+        font-size: $font-size-base;
+    }
+    h6{
+        font-size: $font-size-small;
+        margin: 0;
+    }
+    &.card-separator:after{
+        height: 100%;
+        right: -15px;
+        top: 0;
+        width: 1px;
+        background-color: $medium-gray;
+        content: "";
+        position: absolute;
+    }
+
+    .ct-chart{
+        margin: 30px 0 30px;
+        height: 245px;
+    }
+
+    .table{
+        tbody td:first-child,
+        thead th:first-child{
+            padding-left: 15px;
+        }
+
+        tbody td:last-child,
+        thead th:last-child{
+            padding-right: 15px;
+        }
+    }
+
+    .alert{
+        border-radius: $border-radius-base;
+        position: relative;
+
+        &.alert-with-icon{
+            padding-left: 65px;
+        }
+    }
+}
+.card-user{
+    .image{
+        height: 110px;
+    }
+    .image-plain{
+        height: 0;
+        margin-top: 110px;
+    }
+    .author{
+        text-align: center;
+        text-transform: none;
+        margin-top: -70px;
+    }
+    .avatar{
+        width: 124px;
+        height: 124px;
+        border: 5px solid #FFFFFF;
+        position: relative;
+        margin-bottom: 15px;
+
+        &.border-gray{
+            border-color: #EEEEEE;
+        }
+    }
+    .title{
+        line-height: 24px;
+    }
+    .content{
+        min-height: 240px;
+    }
+}
+
+.card-user,
+.card-price{
+    .footer{
+        padding: 5px 15px 10px;
+    }
+    hr{
+        margin: 5px 15px;
+    }
+}
+.card-plain{
+    background-color: transparent;
+    box-shadow: none;
+    border-radius: 0;
+
+    .image{
+        border-radius: 4px;
+    }
+}
+
+.card-stats{
+    .icon-big{
+        font-size: 3em;
+        min-height: 64px;
+        i{
+            font-weight: bold;
+            line-height: 59px;
+        }
+    }
+    .numbers{
+        font-size: 2em;
+        text-align: right;
+        p {
+           margin: 0;
+        }
+    }
+}

+@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
+  display: block;
+  position: relative;
+  width: $width;
+
+  &:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: $ratio * 100%;
+  }
+
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
+  -webkit-box-align: $ct-text-align;
+  -webkit-align-items: $ct-text-align;
+  -ms-flex-align: $ct-text-align;
+  align-items: $ct-text-align;
+  -webkit-box-pack: $ct-text-justify;
+  -webkit-justify-content: $ct-text-justify;
+  -ms-flex-pack: $ct-text-justify;
+  justify-content: $ct-text-justify;
+  // Fallback to text-align for non-flex browsers
+  @if($ct-text-justify == 'flex-start') {
+    text-align: left;
+  } @else if ($ct-text-justify == 'flex-end') {
+    text-align: right;
+  } @else {
+    text-align: center;
+  }
+}
+
+@mixin ct-flex() {
+  // Fallback to block
+  display: block;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
+  fill: $ct-text-color;
+  color: $ct-text-color;
+  font-size: $ct-text-size;
+  line-height: $ct-text-line-height;
+}
+
+@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
+  stroke: $ct-grid-color;
+  stroke-width: $ct-grid-width;
+
+  @if ($ct-grid-dasharray) {
+    stroke-dasharray: $ct-grid-dasharray;
+  }
+}
+
+@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
+  stroke-width: $ct-point-size;
+  stroke-linecap: $ct-point-shape;
+}
+
+@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
+  fill: none;
+  stroke-width: $ct-line-width;
+
+  @if ($ct-line-dasharray) {
+    stroke-dasharray: $ct-line-dasharray;
+  }
+}
+
+@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
+  stroke: none;
+  fill-opacity: $ct-area-opacity;
+}
+
+@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
+  fill: none;
+  stroke-width: $ct-bar-width;
+}
+
+@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
+  fill: none;
+  stroke-width: $ct-donut-width;
+}
+
+@mixin ct-chart-series-color($color) {
+  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
+    stroke: $color;
+  }
+
+  .#{$ct-class-slice-pie}, .#{$ct-class-area} {
+    fill: $color;
+  }
+}
+
+@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
+
+  .#{$ct-class-label} {
+    @include ct-chart-label($ct-text-color, $ct-text-size);
+  }
+
+  .#{$ct-class-chart-line} .#{$ct-class-label},
+  .#{$ct-class-chart-bar} .#{$ct-class-label} {
+    @include ct-flex();
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
+    @include ct-align-justify(center, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(center, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-grid} {
+    @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
+  }
+
+  .#{$ct-class-point} {
+    @include ct-chart-point($ct-point-size, $ct-point-shape);
+  }
+
+  .#{$ct-class-line} {
+    @include ct-chart-line($ct-line-width);
+  }
+
+  .#{$ct-class-area} {
+    @include ct-chart-area();
+  }
+
+  .#{$ct-class-bar} {
+    @include ct-chart-bar($ct-bar-width);
+  }
+
+  .#{$ct-class-slice-donut} {
+    @include ct-chart-donut($ct-donut-width);
+  }
+
+  @if $ct-include-colored-series {
+    @for $i from 0 to length($ct-series-names) {
+      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
+        $color: nth($ct-series-colors, $i + 1);
+
+        @include ct-chart-series-color($color);
+      }
+    }
+  }
+}
+
+@if $ct-include-classes {
+  @include ct-chart();
+
+  @if $ct-include-alternative-responsive-containers {
+    @for $i from 0 to length($ct-scales-names) {
+      .#{nth($ct-scales-names, $i + 1)} {
+        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
+      }
+    }
+  }
+}
\ No newline at end of file

+/*      Checkbox and radio         */
+.checkbox,
+.radio {
+  margin-bottom: 12px;
+}
+
+.checkbox label,
+.radio label {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: 24px;
+  margin-bottom: 0;
+}
+
+.checkbox label::before,
+.checkbox label::after{
+  font-family: 'FontAwesome';
+  content: "\f096";
+  display: inline-block;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  left: 0;
+  cursor: pointer;
+  line-height: 19px;
+  font-size: 20px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  top: 1px;
+  color: $medium-gray;
+  transition: color 0.2s linear;
+  padding: 1px;
+}
+
+ .checkbox label::after{
+  content: "";
+  text-align: center;
+  opacity: 1;
+  left: 1px;
+  color: $medium-gray;
+}
+
+.checkbox input[type="checkbox"],
+.radio input[type="radio"] {
+  opacity: 0;
+  margin-left: 0;
+}
+
+.checkbox input[type="checkbox"]:checked + label::after{
+    font-family: 'FontAwesome';
+    content: "\f046";
+}
+
+.checkbox input[type="checkbox"]:checked + label::after{
+    color: $info-color;
+}
+
+.checkbox input[type="checkbox"]:checked + label::before{
+    opacity: 0;
+}
+
+.checkbox input[type="checkbox"]:disabled + label,
+.radio input[type="radio"]:disabled + label,
+.checkbox input[type="checkbox"]:disabled:checked + label::after {
+    color: $medium-gray;
+}
+.checkbox input[type="checkbox"]:disabled + label::before,
+.checkbox input[type="checkbox"]:disabled + label::after{
+    cursor: not-allowed;
+}
+
+.checkbox input[type="checkbox"]:disabled + label,
+.radio input[type="radio"]:disabled + label{
+    cursor: not-allowed;
+}
+
+.checkbox.checkbox-circle label::before {
+  border-radius: 50%;
+}
+
+.checkbox.checkbox-inline {
+  padding-left:0;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::before {
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::after {
+  color: #fff;
+}
+
+.radio label::before,
+.radio label::after {
+  font-family: 'FontAwesome';
+  content: "\f10c";
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  position: absolute;
+  line-height: 19px;
+  left: 0;
+  top: 0;
+  color: $medium-gray;
+  padding: 1px;
+  transition: color 0.2s linear;
+}
+
+.radio input[type="radio"]:checked + label::after {
+    font-family: 'FontAwesome';
+    content: "\f192";
+    color: $medium-gray;
+}
+
+.radio input[type="radio"]:checked + label::after{
+    color: $info-color;
+}
+
+
+.radio input[type="radio"]:disabled + label {
+  color: #ddd;
+}
+
+.radio input[type="radio"]:disabled + label::before,
+.radio input[type="radio"]:disabled + label::after {
+  color: #ddd;
+}
+
+.radio.radio-inline {
+  margin-top: 0;
+}
+
+
+
+
+/**
+  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
+  *
+  * @version v3.3.4
+  * @homepage https://bttstrp.github.io/bootstrap-switch
+  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
+  * @license Apache-2.0
+  */
+
+.bootstrap-switch {
+  display: inline-block;
+  direction: ltr;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: #ccc;
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  line-height: 8px;
+  z-index: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.bootstrap-switch .bootstrap-switch-container {
+  display: inline-block;
+  top: 0;
+  border-radius: 4px;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: table-cell;
+  vertical-align: middle;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 20px;
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
+  text-align: center;
+  z-index: 1;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
+  color: #fff;
+  background: #337ab7;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
+  color: #fff;
+  background: #5bc0de;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
+  color: #fff;
+  background: #5cb85c;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
+  background: #f0ad4e;
+  color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
+  color: #fff;
+  background: #d9534f;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+  color: #000;
+  background: #eeeeee;
+}
+.bootstrap-switch .bootstrap-switch-label {
+  text-align: center;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  z-index: 100;
+  color: #333;
+  background: #fff;
+}
+.bootstrap-switch span::before {
+  content: "\200b";
+}
+.bootstrap-switch .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  margin: 0;
+  z-index: -1;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  visibility: hidden;
+}
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+  padding: 6px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+}
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate {
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+  -webkit-transition: margin-left 0.5s;
+  -o-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}

+.dropdown-menu{
+    visibility: hidden;
+    margin: 0;
+    padding: 0;
+    border-radius: $border-radius-extreme;
+    display: block;
+    z-index: 9000;
+    position: absolute;
+    
+    @include opacity(0); 
+    @include box-shadow($dropdown-shadow);
+        
+    .open &{
+        @include opacity(1);
+        visibility: visible;
+    }    
+    .select &{
+       border-radius: $border-radius-bottom; 
+       @include box-shadow(none);
+       @include transform-origin($select-coordinates);
+       @include transform-scale(1);
+       @include transition($fast-transition-time, $transition-linear);
+       margin-top: -20px;
+    }
+    .select.open &{
+        margin-top: -1px;
+    }
+    
+    > li > a {
+       padding: $padding-base-vertical $padding-base-horizontal;
+       color: #333333;
+       
+       img{
+           margin-top: -3px;
+       }
+    }
+    > li > a:focus{
+        outline: 0 !important;
+    }
+
+    .btn-group.select &{
+        min-width: 100%;
+    }
+    
+    > li:first-child > a{
+       border-top-left-radius: $border-radius-extreme;
+       border-top-right-radius: $border-radius-extreme;
+    }
+    
+    > li:last-child > a{
+        border-bottom-left-radius: $border-radius-extreme;
+        border-bottom-right-radius: $border-radius-extreme;
+    }
+    
+    .select & > li:first-child > a{
+        border-radius: 0;
+        border-bottom: 0 none;
+    }
+    
+    > li > a:hover,
+    > li > a:focus {
+        background-color: $smoke-bg;
+        color: #333333;
+        opacity: 1;
+        text-decoration: none;
+    }
+    
+    &.dropdown-blue > li > a:hover,
+    &.dropdown-blue > li > a:focus{
+        background-color: $light-blue;
+    }
+    &.dropdown-azure > li > a:hover,
+    &.dropdown-azure > li > a:focus{
+        background-color: $light-azure;
+    }
+    &.ct-green > li > a:hover,
+    &.ct-green > li > a:focus{
+        background-color: $light-green;
+    }
+    &.dropdown-orange > li > a:hover,
+    &.dropdown-orange > li > a:focus{
+        background-color: $light-orange;
+    }
+    &.dropdown-red > li > a:hover,
+    &.dropdown-red > li > a:focus{
+        background-color: $light-red;
+    }
+
+}
+
+.dropdown-with-icons{
+    > li > a{
+        padding-left: 0px;
+        line-height: 28px;
+    }
+    i{
+        text-align: center;
+        line-height: 28px;
+        float: left;
+        
+        &[class^="pe-"]{
+             font-size: 24px;
+             width: 46px;
+        }
+        &[class^="fa"]{
+            font-size: 14px;
+            width: 38px;
+        }
+    }
+}
+
+//fix bug for the select items in btn-group 
+.btn-group.select{
+    overflow: hidden;
+}
+.btn-group.select.open{
+    overflow: visible;
+}
+
+

+.footer{    
+    background-color: $white-color;
+    line-height: $line-height;
+    
+    nav > ul{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        font-weight: normal;
+        
+        a:not(.btn){
+            color: $dark-gray;
+            display: block;
+            margin-bottom: 3px;
+            &:hover,
+            &:focus{
+                color: $default-states-color;
+            }
+        }
+    }
+    .social-area{
+        padding: 15px 0;
+        h5{
+            padding-bottom: 15px;
+        }
+    }
+    .social-area > a:not(.btn){
+       color: $dark-gray;
+       display: inline-block;
+       vertical-align: top;
+       padding: $padding-social-a;
+       font-size: $font-size-large-navbar;
+       font-weight: normal;
+       line-height: $line-height;
+       text-align: center;
+       &:hover,
+       &:focus{
+           color: $default-states-color;
+       }
+    }
+    .copyright{
+        color: $default-states-color;
+        padding: 10px 15px;
+        margin: 10px 3px;
+        line-height: 20px;
+        font-size: $font-size-base;
+    }
+    hr{
+        border-color: $medium-gray;
+    }
+    .title{
+        color: $default-states-color;
+    }
+}
+
+.footer-default{
+    background-color: $smoke-bg;
+}
+
+.footer:not(.footer-big){
+    nav > ul{
+       font-size: $font-size-base;
+       li{
+            margin-left: 20px;
+            float: left;
+        }
+        a{
+            padding: 10px 0px;
+            margin: 10px 10px 10px 0px;
+        }
+    }
+}
+
+
+
+
+

+.form-control::-moz-placeholder{
+   @include placeholder($medium-gray,1);
+}
+.form-control:-moz-placeholder{
+   @include placeholder($medium-gray,1);
+}  
+.form-control::-webkit-input-placeholder{
+   @include placeholder($medium-gray,1); 
+} 
+.form-control:-ms-input-placeholder{
+   @include placeholder($medium-gray,1);
+}
+
+.form-control {
+    background-color: $white-bg;
+    border: 1px solid $light-gray;
+    border-radius: $border-radius-base;
+    color: #565656;
+    @include input-size($padding-base-vertical, $padding-base-horizontal - 4, $height-base);
+    @include box-shadow(none);
+    
+    &:focus{
+           background-color: $white-bg;
+           border: 1px solid $medium-dark-gray;
+           @include box-shadow(none);
+           outline: 0 !important;    
+           color: #333333;   
+    }
+    
+    .has-success &,
+    .has-error &,
+    .has-success &:focus,
+    .has-error &:focus{
+        border-color: $light-gray;
+        @include box-shadow(none);
+    }
+    
+    .has-success &{
+        color: $success-color;
+    }
+    .has-success &:focus{
+        border-color: $success-color;
+    }
+    .has-error &{
+        color: $danger-color;
+    }
+    .has-error &:focus{
+        border-color: $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-base $border-radius-base 0 0;
+        border-bottom-color: transparent;
+    }
+}
+
+.input-lg{
+    height: 55px;
+    padding: $padding-large-vertical $padding-large-horizontal;
+}
+
+.has-error{
+    .form-control-feedback{
+        color: $danger-color;
+    }
+}
+.has-success{
+    .form-control-feedback{
+        color: $success-color
+    }
+}
+
+
+.input-group-addon {
+    background-color: $white-color;
+    border: 1px solid $light-gray;
+    border-radius: $border-radius-base;
+    
+    .has-success &,
+    .has-error &{
+        background-color: $white-color;
+        border: 1px solid $light-gray;
+    }
+    .has-error .form-control:focus + &{
+        border-color: $danger-color;
+        color: $danger-color;
+    }
+    .has-success .form-control:focus + &{
+        border-color: $success-color;
+        color: $success-color;
+    }
+    .form-control:focus + &,
+    .form-control:focus ~ &{
+        background-color: $white-color;
+        border-color: $dark-gray;
+    }
+}
+
+.input-group .form-control:first-child, 
+.input-group-addon:first-child,  
+.input-group-btn:first-child > .dropdown-toggle, 
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+.input-group .form-control:last-child, 
+.input-group-addon:last-child,  
+.input-group-btn:last-child > .dropdown-toggle, 
+.input-group-btn:first-child > .btn:not(:first-child) {
+    border-left: 0 none;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: $smoke-bg;
+    color: $default-color;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn{
+    border-width: $border-thin;
+    padding: $padding-round-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;
+}
+
+.input-group-focus .input-group-addon{
+    border-color: $dark-gray;
+}

+/*     General overwrite     */
+body,
+.wrapper{
+    min-height: 100vh;
+    position: relative;
+    background-color: white;
+}
+a{
+  color: $info-color;
+
+  &:hover, &:focus{
+     color: $info-states-color;
+     text-decoration: none;
+  }
+}
+
+a:focus, a:active,
+button::-moz-focus-inner,
+input::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+select::-moz-focus-inner,
+input[type="file"] > input[type="button"]::-moz-focus-inner{
+    outline:0;
+}
+.ui-slider-handle:focus,
+.navbar-toggle,
+input:focus {
+    outline : 0 !important;
+}
+
+/*           Animations              */
+.form-control,
+.input-group-addon,
+.tagsinput,
+.navbar,
+.navbar .alert{
+    @include transition($general-transition-time, $transition-linear);
+}
+
+.sidebar .nav a,
+.table > tbody > tr .td-actions .btn{
+    @include transition($fast-transition-time, $transition-ease-in);
+}
+
+.btn{
+    @include transition($ultra-fast-transition-time, $transition-ease-in);
+}
+.fa{
+    width: 18px;
+    text-align: center;
+}
+.margin-top{
+    margin-top: 50px;
+}
+
+.wrapper{
+    position: relative;
+    top: 0;
+    height: 100vh;
+}

+//Utilities 
+
+@import "mixins/transparency";
+@import "mixins/vendor-prefixes";
+
+
+//Components
+
+@import "mixins/buttons";
+@import "mixins/inputs";
+@import "mixins/labels";
+@import "mixins/tabs";
+
+@import "mixins/navbars";
+@import "mixins/icons";
+@import "mixins/social-buttons";
+
+@import "mixins/morphing-buttons";
+
+@import "mixins/cards";
+
+@import "mixins/chartist";
\ No newline at end of file

+.nav {
+    > li{
+        > a:hover,
+        > a:focus{
+            background-color: transparent;
+        }
+    } 
+}
+.navbar{
+    border: $none;
+    font-size: $font-size-navbar;
+    border-radius: 0;
+    
+    .navbar-brand {
+        font-weight: $font-weight-normal;
+        margin: $navbar-margin-brand;
+        padding: $navbar-padding-brand;
+        font-size: $font-size-large-navbar;
+    }
+    .navbar-nav{
+         > li > a {
+             padding: $navbar-padding-a;
+             margin: $navbar-margin-a;
+             position: relative;
+         }
+         > li > a.btn{
+             margin: $navbar-margin-a-btn;
+             padding: $padding-base-vertical $padding-base-horizontal;
+         }
+         > li > a.btn-round{
+             margin: $navbar-margin-a-btn-round;
+         }
+         > li > a [class^="fa"]{
+             font-size: $font-size-large + 1;   
+             position: relative;
+             line-height: 16px;
+             top: 1px;
+        }
+        
+        .notification{
+            position: absolute;
+            background-color: #FB404B;
+            text-align: center;
+            border-radius: 10px;
+            min-width: 18px;
+            padding: 0 5px;
+            height: 18px;
+            font-size: 12px;
+            color: #FFFFFF;
+            font-weight: bold;
+            line-height: 18px;
+            top: 0px;
+            left: 7px;
+        }
+    }
+    .btn{
+       margin: $navbar-margin-btn;
+       font-size: $font-size-base;
+    }
+    .btn-simple{
+        font-size: $font-size-medium;
+    }
+    .caret{
+       // @include center-item();
+    }
+    
+    &.fixed{
+        width: calc(100% - $sidebar-width);
+        right: 0;
+        left: auto;
+        border-radius: 0;
+    }
+
+}
+
+.navbar-nav > li > .dropdown-menu{
+    border-radius: $border-radius-extreme;
+    margin-top: -5px;
+}
+
+.navbar-transparent, [class*="navbar-ct"]{    
+    .navbar-brand{
+        color: $white-color;
+        @include opacity(.9);
+    
+        &:focus,
+        &:hover{
+            background-color: transparent;
+            @include opacity(1);
+        }
+    }
+
+    .navbar-nav{
+        > li > a:not(.btn){
+            color: $white-color;
+            border-color: $white-color;
+            @include opacity(0.8);
+        }
+        > .active > a:not(.btn),
+        > .active > a:hover:not(.btn),
+        > .active > a:focus:not(.btn),
+        > li > a:hover:not(.btn),
+        > li > a:focus:not(.btn){
+            background-color: transparent;
+            border-radius: 3px;
+            color: $white-color;
+            @include opacity(1);
+        }
+        .nav > li > a.btn:hover{
+            background-color: transparent;
+        }
+        
+        > .dropdown > a .caret,
+        > .dropdown > a:hover .caret,
+        > .dropdown > a:focus .caret{
+            border-bottom-color: $white-color;
+            border-top-color: $white-color;
+        } 
+        
+        > .open > a,
+        > .open > a:hover,
+        > .open > a:focus {
+            background-color: transparent;
+            color: $white-color;
+            @include opacity(1);
+        }
+    }
+    
+    .btn-default{
+        color: $white-color;
+        border-color: $white-color;
+    }
+    .btn-default.btn-fill{
+        color: $dark-gray;
+        background-color: $white-color;
+        @include opacity(.9);
+    }
+    .btn-default.btn-fill:hover, 
+    .btn-default.btn-fill:focus, 
+    .btn-default.btn-fill:active,
+    .btn-default.btn-fill.active, 
+    .open .dropdown-toggle.btn-fill.btn-default{
+        border-color: $white-color;
+        @include opacity(1);
+    }
+    
+}
+.navbar-transparent{
+    .dropdown-menu .divider{
+        background-color: rgba($white-color,.2);
+    }
+}
+
+.nav-open .nav .caret{
+    border-bottom-color: $white-color;
+    border-top-color: $white-color;
+}
+
+.navbar-default {
+    background-color: $white-navbar;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  
+    .navbar-nav{
+        > li > a:not(.btn){
+            color: $dark-gray;
+        }
+        
+        > .active > a, 
+        > .active > a:not(.btn):hover, 
+        > .active > a:not(.btn):focus, 
+        > li > a:not(.btn):hover, 
+        > li > a:not(.btn):focus {
+            background-color: transparent;
+            border-radius: 3px;
+            color: $info-color;
+            @include opacity(1);
+        }
+        
+        > .dropdown > a:hover .caret, 
+        > .dropdown > a:focus .caret {
+            border-bottom-color: $info-color;
+            border-top-color: $info-color;
+            
+        }
+        
+        > .open > a, 
+        > .open > a:hover, 
+        > .open > a:focus{
+            background-color: transparent;
+            color: $info-color;
+        }
+
+        .navbar-toggle:hover,.navbar-toggle:focus {
+            background-color: transparent;
+        }
+        
+    } 
+    
+    &:not(.navbar-transparent) .btn-default:hover{
+        color: $info-color;
+        border-color: $info-color;
+    }
+    &:not(.navbar-transparent) .btn-neutral,
+    &:not(.navbar-transparent) .btn-neutral:hover,
+    &:not(.navbar-transparent) .btn-neutral:active{
+            color: $dark-gray;
+        } 
+}
+
+/*      Navbar with icons            */
+
+.navbar-icons{
+    &.navbar .navbar-brand{
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
+    .navbar-nav{
+        > li > a{
+            text-align: center;
+            padding: $navbar-padding-a-icons;
+            margin: $navbar-margin-a-icons;
+        }
+        
+        [class^="pe"] {
+            font-size: 30px;
+            position: relative;
+        }
+        p {
+            margin: 3px 0 0;
+        }    
+    }    
+}
+
+.navbar-form{
+   @include box-shadow(none);
+   .form-control{
+        @include light-form();       
+        height: 22px;
+        font-size: $font-size-navbar;
+        line-height: $line-height-general;
+        color: $light-gray;
+    }
+    .navbar-transparent & .form-control, 
+    [class*="navbar-ct"] & .form-control{
+        color: $white-color;
+        border: $none;
+        border-bottom: 1px solid rgba($white-color,.6);
+    }
+
+}
+
+.navbar-ct-blue{
+    @include navbar-color($blue-navbar);
+}
+.navbar-ct-azure{
+    @include navbar-color($azure-navbar);
+}
+.navbar-ct-green{
+    @include navbar-color($green-navbar);
+}
+.navbar-ct-orange{
+    @include navbar-color($orange-navbar);
+}
+.navbar-ct-red{
+    @include navbar-color($red-navbar);
+}
+
+.navbar-transparent{
+    padding-top: 15px;
+    background-color: transparent;
+    border-bottom: 1px solid transparent;
+}
+
+.navbar-toggle{
+    margin-top: 19px;
+    margin-bottom: 19px;
+    border: $none;
+    
+    .icon-bar {
+        background-color: $white-color;
+    }
+     .navbar-collapse, 
+     .navbar-form {
+        border-color: transparent;
+    }
+    
+    &.navbar-default .navbar-toggle:hover,
+    &.navbar-default .navbar-toggle:focus {
+        background-color: transparent;
+    }
+}
+
+

+.sidebar{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 260px;
+    display: block;
+    z-index: 1;
+    color: #fff;
+    font-weight: 200;
+    background-size: cover;
+    background-position: center center;
+
+    .sidebar-wrapper{
+        position: relative;
+        height: calc(100vh - 75px);
+        overflow: auto;
+        width: 260px;
+        z-index: 4;
+        padding-bottom: 30px;
+    }
+
+    .sidebar-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+    }
+
+    .logo{
+        padding: 10px 30px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        position: relative;
+        z-index: 4;
+
+        p{
+            float: left;
+            font-size: 20px;
+            margin: 10px 10px;
+            color: $white-color;
+            line-height: 20px;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        a.logo-mini{
+            float: left;
+            text-align: center;
+            width: 30px;
+            margin-right: 15px;
+
+            img{
+                width: 40px;
+                margin-left: -3px;
+                display: block;
+                margin-top: 2px;
+            }
+        }
+
+        a.logo-normal{
+            display: block;
+        }
+
+        .logo-img{
+            width: 34px;
+            display: inline-block;
+            height: 34px;
+            margin-left: -2px;
+            margin-top: -2px;
+            margin-right: 10px;
+            border-radius: 30px;
+            text-align: center;
+        }
+    }
+
+    .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;
+
+        li{
+            > a{
+                color: #FFFFFF;
+                margin: 5px 15px;
+                opacity: .86;
+                border-radius: 4px;
+            }
+
+            &:hover > a,
+            &.open > a,
+            &.open > a:focus,
+            &.open > a:hover{
+                background: rgba(255,255,255,0.13);
+                opacity: 1;
+            }
+
+            &.active > a{
+                color: #FFFFFF;
+                opacity: 1;
+                background: rgba(255,255,255,0.23);
+
+            }
+        }
+
+        p{
+            margin: 0;
+            line-height: 30px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .caret{
+            top: 24px;
+            position: absolute;
+            right: 15px;
+        }
+
+        i{
+            font-size: 28px;
+            float: left;
+            margin-right: 15px;
+            line-height: 30px;
+            width: 30px;
+            text-align: center;
+        }
+    }
+}
+
+
+.sidebar,
+body > .navbar-collapse{
+    .logo{
+        padding: 10px 30px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+
+        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-small-vertical $padding-zero;
+            display: block;
+            font-size: $font-size-large;
+            color: $white-color;
+            font-weight: $font-weight-normal;
+            line-height: 30px;
+        }
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    &:after,
+    &:before{
+        display: block;
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
+
+    &:before{
+        opacity: .33;
+        background: #000000;
+    }
+
+    &:after{
+       @include icon-gradient($black-color-top, $black-color-bottom);
+       z-index: 3;
+       opacity: 1;
+    }
+
+    &[data-image]:after,
+    &.has-image:after{
+        opacity: .77;
+    }
+
+    &[data-color="blue"]:after{
+        @include icon-gradient($new-dark-blue, $blue-color-bottom);
+    }
+    &[data-color="azure"]:after{
+        @include icon-gradient($new-blue, $azure-color-bottom);
+    }
+    &[data-color="green"]:after{
+        @include icon-gradient($new-green, $green-color-bottom);
+    }
+    &[data-color="orange"]:after{
+        @include icon-gradient($new-orange, $orange-color-bottom);
+    }
+    &[data-color="red"]:after{
+        @include icon-gradient($new-red, $red-color-bottom);
+    }
+    &[data-color="purple"]:after{
+        @include icon-gradient($new-purple, $purple-color-bottom);
+    }
+}
+
+
+.main-panel{
+    background: rgba(203,203,210,.15);
+    position: relative;
+    float: right;
+    width: $sidebar-width;
+
+    > .content{
+        padding: 30px 15px;
+        min-height: calc(100% - 123px);
+    }
+
+    > .footer{
+        border-top: 1px solid #e7e7e7;
+    }
+
+    .navbar{
+        margin-bottom: 0;
+    }
+}
+
+.sidebar,
+.main-panel{
+    -webkit-transition-property: top,bottom;
+    transition-property: top,bottom;
+    -webkit-transition-duration: .2s,.2s;
+    transition-duration: .2s,.2s;
+    -webkit-transition-timing-function: linear,linear;
+    transition-timing-function: linear,linear;
+    -webkit-overflow-scrolling: touch;
+}

+.table{
+
+   .radio,
+   .checkbox{
+        position: relative;
+        height: 20px;
+        display: block;
+        width: 20px;
+        padding: 0px 0px;
+        margin: 0px 5px;
+        text-align: center;
+
+        .icons{
+            left: 5px;
+        }
+   }
+   > thead > tr > th,
+   > tbody > tr > th,
+   > tfoot > tr > th,
+   > thead > tr > td,
+   > tbody > tr > td,
+   > tfoot > tr > td{
+       padding: 12px 8px;
+       vertical-align: middle;
+   }
+   // MANU : aici este ceva schimbat!!!
+   > tbody > tr > td{
+       font-size: 14px;
+   }
+    > thead > tr > th{
+        border-bottom-width: 1px;
+        font-size: $font-size-small;
+        text-transform: uppercase;
+        color: $dark-gray;
+        font-weight: $font-weight-normal;
+        padding-bottom: 5px;
+    }
+
+   .td-actions .btn{
+        @include opacity(0.36);
+
+        &.btn-xs{
+            padding-left: 3px;
+            padding-right: 3px;
+        }
+    }
+    .td-actions{
+        min-width: 90px;
+    }
+
+    > tbody > tr{
+        position: relative;
+
+        &:hover{
+            .td-actions .btn{
+                @include opacity(1);
+            }
+        }
+    }
+}

+/*           Font Smoothing      */
+body,
+h1, .h1, 
+h2, .h2, 
+h3, .h3, 
+h4, .h4, 
+h5, .h5, 
+h6, .h6, 
+p, 
+.navbar, 
+.brand, 
+.btn-simple,
+.alert, 
+a, 
+.td-name, 
+td,
+button.close{
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
+    font-weight: $font-weight-normal;
+}
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4{
+    font-weight: $font-weight-light;
+    margin: $margin-large-vertical 0 $margin-base-vertical;
+}
+
+h1, .h1 {
+    font-size: $font-size-h1;
+}
+h2, .h2{
+    font-size: $font-size-h2;
+}
+h3, .h3{
+    font-size: $font-size-h3;
+    margin: 20px 0 10px;
+}
+h4, .h4{
+    font-size: $font-size-h4;
+    line-height: 30px;
+}
+h5, .h5 {
+    font-size: $font-size-h5;
+    margin-bottom: 15px;
+}
+h6, .h6{
+    font-size: $font-size-h6;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+}
+p{
+    font-size: $font-paragraph;
+    line-height: $line-height-general;
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
+    color: $dark-gray;
+    font-weight: $font-weight-light;
+    line-height: $line-height-general;
+}
+
+h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small {
+    font-size: 60%;
+}
+
+h1 .subtitle{
+    display: block;
+    margin: 0 0 $margin-large-vertical;   
+}
+
+.text-muted{
+    color: #9A9A9A;
+}
+.text-primary, .text-primary:hover{
+    color: #1D62F0 !important;
+}
+.text-info, .text-info:hover{
+    color: $info-color !important;
+}
+.text-success, .text-success:hover{
+    color: $success-color !important;
+}
+.text-warning, .text-warning:hover{
+    color: $warning-color !important;
+}
+.text-danger, .text-danger:hover{
+    color: $danger-color !important;
+}
+

+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$none:                       0   !default;
+$border-thin:                1px !default;
+$border-thick:               2px !default;
+
+$white-color:                #FFFFFF !default;
+$white-bg:                   #FFFFFF !default;
+
+$smoke-bg:                   #F5F5F5 !default;
+
+$black-bg:                   rgba(30,30,30,.97) !default;
+
+$black-color:                #333333 !default;
+$black-hr:                   #444444 !default;
+
+$light-gray:                 #E3E3E3 !default;
+$medium-gray:                #DDDDDD !default;
+$medium-dark-gray:           #AAAAAA !default;
+$dark-gray:                  #9A9A9A !default;
+
+$transparent-bg:             transparent !default;
+
+$default-color:              #888888 !default;
+$default-bg:                 #888888 !default;
+$default-states-color:       #777777 !default;
+
+$primary-color:              #3472F7 !default;
+$primary-bg:                 #3472F7 !default;
+$primary-states-color:       #1D62F0 !default;
+
+$success-color:              #87CB16 !default;
+$success-bg:                 #87CB16 !default;
+$success-states-color:       #049F0C !default;
+
+$info-color:                 #1DC7EA !default;
+$info-bg:                    #1DC7EA !default;
+$info-states-color:          lighten($info-color, 8%) !default;
+
+$warning-color:              #FF9500 !default;
+$warning-bg:                 #FF9500 !default;
+$warning-states-color:       #ED8D00 !default;
+
+
+$danger-color:               #FF4A55 !default;
+$danger-bg:                  #FF4A55 !default;
+$danger-states-color:        #EE2D20 !default;
+
+
+
+$link-disabled-color:        #666666 !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);
+
+
+//== Components
+//
+
+$padding-base-vertical:         8px !default;
+$padding-base-horizontal:      16px !default;
+
+$padding-round-vertical:        9px !default;
+$padding-round-horizontal:     18px !default;
+
+$padding-simple-vertical:      10px !default;
+$padding-simple-horizontal:    18px !default;
+
+$padding-large-vertical:       14px !default;
+$padding-large-horizontal:     30px !default;
+
+$padding-small-vertical:        5px !default;
+$padding-small-horizontal:     10px !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;
+
+$padding-zero:                   0px !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-extreme:        10px !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;
+
+$font-size-base:               14px !default;
+$font-size-small:              12px !default;
+$font-size-medium:             16px !default;
+$font-size-large:              18px !default;
+$font-size-large-navbar:       20px !default;
+
+$font-size-h1:                 52px !default;
+$font-size-h2:                 36px !default;
+$font-size-h3:                 28px !default;
+$font-size-h4:                 22px !default;
+$font-size-h5:                 16px !default;
+$font-size-h6:                 14px !default;
+$font-paragraph:               16px !default;
+$font-size-navbar:             16px !default;
+$font-size-small:              12px !default;
+
+$font-weight-light:          300 !default;
+$font-weight-normal:         400 !default;
+$font-weight-semi:           500 !default;
+$font-weight-bold:           600 !default;
+
+$line-height-general:          1.5 !default;
+$line-height:                 20px !default;
+$line-height-lg:              54px !default;
+
+$sidebar-width:               calc(100% - 260px) !default;
+
+
+$border-radius-top:        10px 10px 0 0 !default;
+$border-radius-bottom:     0 0 10px 10px !default;
+
+$dropdown-shadow:          1px 2px 3px rgba(0, 0, 0, 0.125);
+
+$general-transition-time:  300ms !default;
+
+$slow-transition-time:           370ms !default;
+$dropdown-coordinates:      29px -50px !default;
+
+$fast-transition-time:           150ms !default;
+
+$ultra-fast-transition-time:     100ms  !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;
+$transition-ease-in:              ease-in !default;
+$transition-ease-out:             ease-out !default;
+
+
+$navbar-padding-a:               10px 15px;
+$navbar-margin-a:                10px  3px;
+
+$padding-social-a:               10px  5px;
+
+$navbar-margin-a-btn:            15px 3px;
+$navbar-margin-a-btn-round:      16px 3px;
+
+$navbar-padding-a-icons:         6px 15px;
+$navbar-margin-a-icons:          6px  3px;
+
+$navbar-padding-brand:           15px 15px;
+$navbar-margin-brand:             5px  0px;
+
+$navbar-margin-brand-icons:      12px auto;
+
+$navbar-margin-btn:              15px  3px;
+
+$height-icon:					 64px !default;
+$width-icon:					 64px !default;
+$padding-icon:					 12px !default;
+$border-radius-icon:		     15px !default;
+
+$size-icon: 					 64px;
+$size-icon-sm: 					 32px;
+
+
+$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;
+
+$default-color-top:	#d9d9d9 !default;
+$default-color-bottom: #909297 !default;
+
+$blue-color-top: 		            #4087ea;
+$blue-color-bottom: 	            #2632c1;
+
+$azure-color-top:   	            #45c0fd;
+$azure-color-bottom:            	#4091ff;
+
+$green-color-top: 	                #a1eb3a;
+$green-color-bottom: 	            #6dc030;
+
+$orange-color-top: 	                #ffb33b;
+$orange-color-bottom: 	            #ff5221;
+
+$red-color-top: 	                #ff3b30;
+$red-color-bottom: 	                #bb0502;
+
+$purple-color-top: 	                #df55e1;
+$purple-color-bottom: 	            #943bea;
+
+$pink-color-top: 		            #ff2a63;
+$pink-color-bottom: 	            #ff2e2e;
+
+$black-color-top:	 	            #282828;
+$black-color-bottom: 	            #111;
+
+$social-facebook: 			#3b5998;
+$social-twitter: 			#55acee;
+$social-pinterest: 			#cc2127;
+$social-google: 			#dd4b39;
+$social-linkedin: 			#0976b4;
+$social-dribbble: 			#ea4c89;
+$social-github: 			#333333;
+$social-youtube: 			#e52d27;
+$social-stumbleupon: 		#eb4924;
+$social-reddit: 			#ff4500;
+$social-tumblr: 			#35465c;
+$social-behance: 			#1769ff;
+
+
+$filter-blue:         darken($primary-color, 10%);
+$filter-azure:        darken($info-color, 10%);
+$filter-green:        darken($success-color, 10%);
+$filter-orange:       darken($warning-color, 10%);
+$filter-red:          darken($danger-color, 10%);
+
+
+$new-blue:            #1DC7EA;
+$new-purple:          #9368E9;
+$new-red:             #FB404B;
+$new-green:           #87CB16;
+$new-orange:          #FFA534;
+$new-dark-blue:       #1b8dff;
+$new-black:           #5e5e5e;
+
+
+$topbar-x:             topbar-x !default;
+$topbar-back:          topbar-back !default;
+$bottombar-x:          bottombar-x !default;
+$bottombar-back:       bottombar-back !default;
+
+
+$white-navbar:              rgba(#FFFFFF, .96);
+$blue-navbar:               lighten($new-dark-blue, 10%);
+$azure-navbar:              lighten($new-blue, 15%);
+$green-navbar:              lighten($new-green, 10%);
+$orange-navbar:             lighten($new-orange, 10%);
+$red-navbar:                lighten($new-red, 10%);

+// Mixin for generating new styles
+@mixin btn-styles($btn-color, $btn-states-color) {
+  border-color: $btn-color;
+  color: $btn-color;
+  
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-color: $transparent-bg;
+    color: $btn-states-color;
+    border-color: $btn-states-color;
+  }
+  
+  &.disabled,
+  &:disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: $transparent-bg;
+          border-color: $btn-color;
+    }
+  }
+  
+
+  &.btn-fill {
+    color: $white-color;
+    background-color: $btn-color;
+    @include opacity(1);  
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle{
+        background-color: $btn-states-color;
+        color: $white-color;
+    }
+    
+    .caret{
+        border-top-color: $white-color;
+    }
+  }
+  
+  .caret{
+      border-top-color: $btn-color;
+  }
+}
+
+
+@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
+   font-size: $font-size;
+   border-radius: $border;
+   padding: $padding-vertical $padding-horizontal;
+    
+   &.btn-round{
+       padding: $padding-vertical + 1 $padding-horizontal;
+   }
+   
+   &.btn-simple{
+       padding: $padding-vertical + 2 $padding-horizontal; 
+   }
+    
+}
\ No newline at end of file

+@mixin filter($color){
+    @if $color == #FFFFFF{
+         background-color: rgba($color,.91);
+    } @else {
+         background-color: rgba($color,.69);
+    }
+}
+

+// Scales for responsive SVG containers
+$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
+$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
+
+// Class names to be used when generating CSS
+$ct-class-chart: ct-chart !default;
+$ct-class-chart-line: ct-chart-line !default;
+$ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
+$ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
+$ct-class-label: ct-label !default;
+$ct-class-series: ct-series !default;
+$ct-class-line: ct-line !default;
+$ct-class-point: ct-point !default;
+$ct-class-area: ct-area !default;
+$ct-class-bar: ct-bar !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-grid: ct-grid !default;
+$ct-class-vertical: ct-vertical !default;
+$ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
+
+// Container ratio
+$ct-container-ratio: (1/1.618) !default;
+
+// Text styles for labels
+$ct-text-color: rgba(0, 0, 0, 0.4) !default;
+$ct-text-size: 1.3rem !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1;
+
+// Grid styles
+$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
+$ct-grid-dasharray: 2px !default;
+$ct-grid-width: 1px !default;
+
+// Line chart properties
+$ct-line-width: 3px !default;
+$ct-line-dasharray: false !default;
+$ct-point-size: 8px !default;
+// Line chart point, can be either round or square
+$ct-point-shape: round !default;
+// Area fill transparency between 0 and 1
+$ct-area-opacity: 0.8 !default;
+
+// Bar chart bar width
+$ct-bar-width: 10px !default;
+
+// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
+$ct-donut-width: 60px !default;
+
+// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
+// should set this property to false
+$ct-include-classes: true !default;
+
+// If this is set to true the CSS will contain colored series. You can extend or change the color with the
+// properties below
+$ct-include-colored-series: $ct-include-classes !default;
+
+// If set to true this will include all responsive container variations using the scales defined at the top of the script
+$ct-include-alternative-responsive-containers: $ct-include-classes !default;
+
+// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
+$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
+$ct-series-colors: (
+  $new-blue,
+  $new-red,
+  $new-orange,
+  $new-purple,
+  $new-green,
+  $new-dark-blue,
+  $new-black,
+  $social-google,
+  $social-tumblr,
+  $social-youtube,
+  $social-twitter,
+  $social-pinterest,
+  $social-behance,
+  #6188e2,
+  #a748ca
+) !default;
\ No newline at end of file

+@mixin icon-background ($icon-url){
+	background-image : url($icon-url);
+		
+}
+
+@mixin icon-shape ($size, $padding, $border-radius) {
+	height: $size;
+	width: $size;
+	padding: $padding;
+	border-radius: $border-radius;
+	display: inline-table;
+
+}
\ No newline at end of file

+@mixin input-size($padding-vertical, $padding-horizontal, $height){
+    padding: $padding-vertical $padding-horizontal;
+    height: $height;
+}
+
+@mixin placeholder($color, $opacity){
+   color: $color;
+   @include opacity(1);
+}
+
+@mixin light-form(){
+    border-radius: 0;
+    border:0;
+    padding: 0;
+    background-color: transparent;
+
+}
\ No newline at end of file

+@mixin label-style(){
+     padding: $padding-label-vertical $padding-label-horizontal;
+     border: 1px solid $default-color;
+     border-radius: $border-radius-small;
+     color: $default-color;
+     font-weight: $font-weight-semi;
+     font-size: $font-size-small;
+     text-transform: uppercase;
+     display: inline-block;
+     vertical-align: middle;
+}
+
+@mixin label-color($color){
+     border-color: $color;
+     color: $color;
+}
+@mixin label-color-fill($color){
+     border-color: $color;
+     color: $white-color;
+     background-color: $color;
+}
\ No newline at end of file

+$prefixes: ('', '-moz-', '-webkit-', '-ms-') !default;
+
+@mixin circle-animation(){
+   @for $i from 0 to length($prefixes) {
+        @include circle-animation-details(nth($prefixes, $i + 1));
+   }  
+}
+
+@mixin circle-animation-details($name){
+    #{$name}animation-name: spin;
+    #{$name}animation-duration: 1250ms;
+    #{$name}animation-iteration-count: infinite;
+    #{$name}animation-timing-function: linear;
+
+}
+@keyframes spin {
+    from { transform:rotate(0deg); }
+    to { transform:rotate(360deg); }
+}
+
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+}
+
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); }
+    to { -ms-transform: rotate(360deg); }
+}
\ No newline at end of file

+@mixin navbar-color($color){
+    background-color: $color;
+}
+
+@mixin center-item(){
+    left: 0;
+    right: 0;
+    margin-right: auto;
+    margin-left: auto;
+    position: absolute;
+}
\ No newline at end of file

+@mixin social-buttons-color ($color){
+
+  border-color: $color;
+  color: $color;
+  
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-color: $transparent-bg;
+    color: $color;
+    border-color: $color;
+    opacity: 1;
+  }
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    background-color: $transparent-bg;
+    border-color: $color;
+  }
+
+  &.btn-fill {
+    color: $white-color;
+    background-color: $color;
+    opacity: 0.9;
+    
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle{
+        background-color: $color;
+        color: $white-color;
+        opacity: 1;
+    }
+    
+  }
+  
+  
+}
+			
\ No newline at end of file

+@mixin pill-style($color){
+    border: 1px solid $color;
+    color: $color;
+}
\ No newline at end of file

+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
+
+@mixin black-filter($opacity){
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: rgba(17,17,17,$opacity);
+    display: block;
+    content: "";
+    z-index: 1; 
+}
\ No newline at end of file

+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+
+@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 transform-scale($value){
+     -webkit-transform: scale($value);
+        -moz-transform: scale($value);
+        -o-transform: scale($value);
+        -ms-transform: scale($value);
+        transform: scale($value);
+}
+
+@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-origin($coordinates){
+      -webkit-transform-origin: $coordinates;
+        -moz-transform-origin: $coordinates;
+        -o-transform-origin: $coordinates;
+        -ms-transform-origin: $coordinates;
+        transform-origin: $coordinates;
+}
+
+@mixin icon-gradient ($top-color, $bottom-color){
+    background: $top-color;
+    background: -moz-linear-gradient(top,  $top-color 0%, $bottom-color 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
+    background: -webkit-linear-gradient(top,  $top-color 0%,$bottom-color 100%);
+    background: -o-linear-gradient(top,  $top-color 0%,$bottom-color 100%);
+    background: -ms-linear-gradient(top,  $top-color 0%,$bottom-color 100%);
+    background: linear-gradient(to bottom,  $top-color 0%,$bottom-color 100%);
+    background-size: 150% 150%;
+}
+
+@mixin radial-gradient($extern-color, $center-color){
+    background: $extern-color;
+    background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
+    background-size: 550% 450%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+@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 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);}
+    }
+
+}
+
+

+/*!
+
+ =========================================================
+ * Light Bootstrap Dashboard React - v1.3.0
+ * Based on Light Bootstrap Dashboard - v1.3.0
+ =========================================================
+
+ * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard-react
+ * Copyright 2019 Creative Tim (http://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+
+@import "lbd/variables";
+@import "lbd/mixins";
+
+// Core CSS
+@import "lbd/typography";
+@import "lbd/misc";
+@import "lbd/sidebar-and-main-panel";
+@import "lbd/buttons";
+@import "lbd/inputs";
+
+@import "lbd/alerts";
+@import "lbd/tables";
+
+@import "lbd/checkbox-radio-switch";
+@import "lbd/navbars";
+@import "lbd/footers";
+
+// Fancy Stuff
+@import "lbd/dropdown";
+@import "lbd/cards";
+@import "lbd/chartist";
+@import "lbd/responsive";

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+
+export class Card extends Component {
+  render() {
+    return (
+      <div className={"card" + (this.props.plain ? " card-plain" : "")}>
+        <div className={"header" + (this.props.hCenter ? " text-center" : "")}>
+          <h4 className="title">{this.props.title}</h4>
+          <p className="category">{this.props.category}</p>
+        </div>
+        <div
+          className={
+            "content" +
+            (this.props.ctAllIcons ? " all-icons" : "") +
+            (this.props.ctTableFullWidth ? " table-full-width" : "") +
+            (this.props.ctTableResponsive ? " table-responsive" : "") +
+            (this.props.ctTableUpgrade ? " table-upgrade" : "")
+          }
+        >
+          {this.props.content}
+
+          <div className="footer">
+            {this.props.legend}
+            {this.props.stats != null ? <hr /> : ""}
+            <div className="stats">
+              <i className={this.props.statsIcon} /> {this.props.stats}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Card;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Button } from "react-bootstrap";
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+class CustomButton extends Component {
+  render() {
+    const { fill, simple, pullRight, round, block, ...rest } = this.props;
+
+    const btnClasses = cx({
+      "btn-fill": fill,
+      "btn-simple": simple,
+      "pull-right": pullRight,
+      "btn-block": block,
+      "btn-round": round
+    });
+
+    return <Button className={btnClasses} {...rest} />;
+  }
+}
+
+CustomButton.propTypes = {
+  fill: PropTypes.bool,
+  simple: PropTypes.bool,
+  pullRight: PropTypes.bool,
+  block: PropTypes.bool,
+  round: PropTypes.bool
+};
+
+export default CustomButton;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+
+class CustomCheckbox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      is_checked: props.isChecked ? true : false
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState({ is_checked: !this.state.is_checked });
+  }
+  render() {
+    const { isChecked, number, label, inline, ...rest } = this.props;
+    const classes =
+      inline !== undefined ? "checkbox checkbox-inline" : "checkbox";
+    return (
+      <div className={classes}>
+        <input
+          id={number}
+          type="checkbox"
+          onChange={this.handleClick}
+          checked={this.state.is_checked}
+          {...rest}
+        />
+        <label htmlFor={number}>{label}</label>
+      </div>
+    );
+  }
+}
+
+export default CustomCheckbox;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+
+class CustomRadio extends Component {
+  render() {
+    const { number, label, option, name, ...rest } = this.props;
+
+    return (
+      <div className="radio">
+        <input id={number} name={name} type="radio" value={option} {...rest} />
+        <label htmlFor={number}>{label}</label>
+      </div>
+    );
+  }
+}
+
+export default CustomRadio;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+/*eslint-disable*/
+import React, { Component } from "react";
+import Toggle from "react-toggle";
+
+import imagine1 from "assets/img/sidebar-1.jpg";
+import imagine2 from "assets/img/sidebar-2.jpg";
+import imagine3 from "assets/img/sidebar-3.jpg";
+import imagine4 from "assets/img/sidebar-4.jpg";
+
+class FixedPlugin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: "dropdown show-dropdown open",
+      bg_checked: true,
+      bgImage: this.props.bgImage
+    };
+  }
+  handleClick = () => {
+    this.props.handleFixedClick();
+  };
+  onChangeClick = () => {
+    this.props.handleHasImage(!this.state.bg_checked);
+    this.setState({ bg_checked: !this.state.bg_checked });
+  };
+  render() {
+    return (
+      <div className="fixed-plugin">
+        <div id="fixedPluginClasses" className={this.props.fixedClasses}>
+          <div onClick={this.handleClick}>
+            <i className="fa fa-cog fa-2x" />
+          </div>
+          <ul className="dropdown-menu">
+            <li className="header-title">Configuration</li>
+            <li className="adjustments-line">
+              <p className="pull-left">Background Image</p>
+              <div className="pull-right">
+                <Toggle
+                  defaultChecked={this.state.bg_checked}
+                  onChange={this.onChangeClick}
+                />
+              </div>
+              <div className="clearfix" />
+            </li>
+            <li className="adjustments-line">
+              <a className="switch-trigger">
+                <p>Filters</p>
+                <div className="pull-right">
+                  <span
+                    className={
+                      this.props.bgColor === "black"
+                        ? "badge filter active"
+                        : "badge filter"
+                    }
+                    data-color="black"
+                    onClick={() => {
+                      this.props.handleColorClick("black");
+                    }}
+                  />
+                  <span
+                    className={
+                      this.props.bgColor === "azure"
+                        ? "badge filter badge-azure active"
+                        : "badge filter badge-azure"
+                    }
+                    data-color="azure"
+                    onClick={() => {
+                      this.props.handleColorClick("azure");
+                    }}
+                  />
+                  <span
+                    className={
+                      this.props.bgColor === "green"
+                        ? "badge filter badge-green active"
+                        : "badge filter badge-green"
+                    }
+                    data-color="green"
+                    onClick={() => {
+                      this.props.handleColorClick("green");
+                    }}
+                  />
+                  <span
+                    className={
+                      this.props.bgColor === "orange"
+                        ? "badge filter badge-orange active"
+                        : "badge filter badge-orange"
+                    }
+                    data-color="orange"
+                    onClick={() => {
+                      this.props.handleColorClick("orange");
+                    }}
+                  />
+                  <span
+                    className={
+                      this.props.bgColor === "red"
+                        ? "badge filter badge-red active"
+                        : "badge filter badge-red"
+                    }
+                    data-color="red"
+                    onClick={() => {
+                      this.props.handleColorClick("red");
+                    }}
+                  />
+                  <span
+                    className={
+                      this.props.bgColor === "purple"
+                        ? "badge filter badge-purple active"
+                        : "badge filter badge-purple"
+                    }
+                    data-color="purple"
+                    onClick={() => {
+                      this.props.handleColorClick("purple");
+                    }}
+                  />
+                </div>
+                <div className="clearfix" />
+              </a>
+            </li>
+            <li className="header-title">Sidebar Images</li>
+            <li className={this.state["bgImage"] === imagine1 ? "active" : ""}>
+              <a
+                className="img-holder switch-trigger"
+                onClick={() => {
+                  this.setState({ bgImage: imagine1 });
+                  this.props.handleImageClick(imagine1);
+                }}
+              >
+                <img src={imagine1} alt="..." />
+              </a>
+            </li>
+            <li className={this.state["bgImage"] === imagine2 ? "active" : ""}>
+              <a
+                className="img-holder switch-trigger"
+                onClick={() => {
+                  this.setState({ bgImage: imagine2 });
+                  this.props.handleImageClick(imagine2);
+                }}
+              >
+                <img src={imagine2} alt="..." />
+              </a>
+            </li>
+            <li className={this.state["bgImage"] === imagine3 ? "active" : ""}>
+              <a
+                className="img-holder switch-trigger"
+                onClick={() => {
+                  this.setState({ bgImage: imagine3 });
+                  this.props.handleImageClick(imagine3);
+                }}
+              >
+                <img src={imagine3} alt="..." />
+              </a>
+            </li>
+            <li className={this.state["bgImage"] === imagine4 ? "active" : ""}>
+              <a
+                className="img-holder switch-trigger"
+                onClick={() => {
+                  this.setState({ bgImage: imagine4 });
+                  this.props.handleImageClick(imagine4);
+                }}
+              >
+                <img src={imagine4} alt="..." />
+              </a>
+            </li>
+
+            <li className="button-container">
+              <div className="">
+                <a
+                  href="https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-fixed-plugin"
+                  target="_blank"
+                  className="btn btn-success btn-block btn-fill"
+                >
+                  Download free!
+                </a>
+              </div>
+            </li>
+            <li className="button-container">
+              <div className="">
+                <a
+                  href="https://www.creative-tim.com/product/light-bootstrap-dashboard-pro-react?ref=lbdr-fixed-plugin"
+                  target="_blank"
+                  className="btn btn-warning btn-block btn-fill"
+                >
+                  Buy Pro
+                </a>
+              </div>
+            </li>
+            <li className="button-container">
+              <a
+                href="https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/getting-started?ref=lbdr-fixed-plugin"
+                target="_blank"
+                className="btn btn-fill btn-info"
+              >
+                Documentation
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FixedPlugin;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Grid } from "react-bootstrap";
+
+class Footer extends Component {
+  render() {
+    return (
+      <footer className="footer">
+        <Grid fluid>
+          <nav className="pull-left">
+            <ul>
+              <li>
+                <a href="#pablo">Home</a>
+              </li>
+              <li>
+                <a href="#pablo">Company</a>
+              </li>
+              <li>
+                <a href="#pablo">Portfolio</a>
+              </li>
+              <li>
+                <a href="#pablo">Blog</a>
+              </li>
+            </ul>
+          </nav>
+          <p className="copyright pull-right">
+            &copy; {new Date().getFullYear()}{" "}
+            <a href="http://www.creative-tim.com?ref=lbr-footer">
+              Creative Tim
+            </a>
+            , made with love for a better web
+          </p>
+        </Grid>
+      </footer>
+    );
+  }
+}
+
+export default Footer;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { FormGroup, ControlLabel, FormControl, Row } from "react-bootstrap";
+
+function FieldGroup({ label, ...props }) {
+  return (
+    <FormGroup>
+      <ControlLabel>{label}</ControlLabel>
+      <FormControl {...props} />
+    </FormGroup>
+  );
+}
+
+export class FormInputs extends Component {
+  render() {
+    var row = [];
+    for (var i = 0; i < this.props.ncols.length; i++) {
+      row.push(
+        <div key={i} className={this.props.ncols[i]}>
+          <FieldGroup {...this.props.properties[i]} />
+        </div>
+      );
+    }
+    return <Row>{row}</Row>;
+  }
+}
+
+export default FormInputs;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Navbar } from "react-bootstrap";
+
+import AdminNavbarLinks from "./AdminNavbarLinks.jsx";
+
+class Header extends Component {
+  constructor(props) {
+    super(props);
+    this.mobileSidebarToggle = this.mobileSidebarToggle.bind(this);
+    this.state = {
+      sidebarExists: false
+    };
+  }
+  mobileSidebarToggle(e) {
+    if (this.state.sidebarExists === false) {
+      this.setState({
+        sidebarExists: true
+      });
+    }
+    e.preventDefault();
+    document.documentElement.classList.toggle("nav-open");
+    var node = document.createElement("div");
+    node.id = "bodyClick";
+    node.onclick = function() {
+      this.parentElement.removeChild(this);
+      document.documentElement.classList.toggle("nav-open");
+    };
+    document.body.appendChild(node);
+  }
+  render() {
+    return (
+      <Navbar fluid>
+        <Navbar.Header>
+          <Navbar.Brand>
+            <a href="#pablo">{this.props.brandText}</a>
+          </Navbar.Brand>
+          <Navbar.Toggle onClick={this.mobileSidebarToggle} />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          <AdminNavbarLinks />
+        </Navbar.Collapse>
+      </Navbar>
+    );
+  }
+}
+
+export default Header;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { NavItem, Nav, NavDropdown, MenuItem } from "react-bootstrap";
+
+class AdminNavbarLinks extends Component {
+  render() {
+    const notification = (
+      <div>
+        <i className="fa fa-globe" />
+        <b className="caret" />
+        <span className="notification">5</span>
+        <p className="hidden-lg hidden-md">Notification</p>
+      </div>
+    );
+    return (
+      <div>
+        <Nav>
+          <NavItem eventKey={1} href="#">
+            <i className="fa fa-dashboard" />
+            <p className="hidden-lg hidden-md">Dashboard</p>
+          </NavItem>
+          <NavDropdown
+            eventKey={2}
+            title={notification}
+            noCaret
+            id="basic-nav-dropdown"
+          >
+            <MenuItem eventKey={2.1}>Notification 1</MenuItem>
+            <MenuItem eventKey={2.2}>Notification 2</MenuItem>
+            <MenuItem eventKey={2.3}>Notification 3</MenuItem>
+            <MenuItem eventKey={2.4}>Notification 4</MenuItem>
+            <MenuItem eventKey={2.5}>Another notifications</MenuItem>
+          </NavDropdown>
+          <NavItem eventKey={3} href="#">
+            <i className="fa fa-search" />
+            <p className="hidden-lg hidden-md">Search</p>
+          </NavItem>
+        </Nav>
+        <Nav pullRight>
+          <NavItem eventKey={1} href="#">
+            Account
+          </NavItem>
+          <NavDropdown
+            eventKey={2}
+            title="Dropdown"
+            id="basic-nav-dropdown-right"
+          >
+            <MenuItem eventKey={2.1}>Action</MenuItem>
+            <MenuItem eventKey={2.2}>Another action</MenuItem>
+            <MenuItem eventKey={2.3}>Something</MenuItem>
+            <MenuItem eventKey={2.4}>Another action</MenuItem>
+            <MenuItem eventKey={2.5}>Something</MenuItem>
+            <MenuItem divider />
+            <MenuItem eventKey={2.5}>Separated link</MenuItem>
+          </NavDropdown>
+          <NavItem eventKey={3} href="#">
+            Log out
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+export default AdminNavbarLinks;

+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+
+import AdminNavbarLinks from "../Navbars/AdminNavbarLinks.jsx";
+
+import logo from "assets/img/reactlogo.png";
+
+class Sidebar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: window.innerWidth
+    };
+  }
+  activeRoute(routeName) {
+    return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
+  }
+  updateDimensions() {
+    this.setState({ width: window.innerWidth });
+  }
+  componentDidMount() {
+    this.updateDimensions();
+    window.addEventListener("resize", this.updateDimensions.bind(this));
+  }
+  render() {
+    const sidebarBackground = {
+      backgroundImage: "url(" + this.props.image + ")"
+    };
+    return (
+      <div
+        id="sidebar"
+        className="sidebar"
+        data-color={this.props.color}
+        data-image={this.props.image}
+      >
+          {this.props.hasImage ? (
+            <div className="sidebar-background" style={sidebarBackground} />
+          ) : (
+            null
+          )}
+        <div className="logo">
+          <a
+            href="https://www.creative-tim.com?ref=lbd-sidebar"
+            className="simple-text logo-mini"
+          >
+            <div className="logo-img">
+              <img src={logo} alt="logo_image" />
+            </div>
+          </a>
+          <a
+            href="https://www.creative-tim.com?ref=lbd-sidebar"
+            className="simple-text logo-normal"
+          >
+            Creative Tim
+          </a>
+        </div>
+        <div className="sidebar-wrapper">
+          <ul className="nav">
+            {this.state.width <= 991 ? <AdminNavbarLinks /> : null}
+            {this.props.routes.map((prop, key) => {
+              if (!prop.redirect)
+                return (
+                  <li
+                    className={
+                      prop.upgrade
+                        ? "active active-pro"
+                        : this.activeRoute(prop.layout + prop.path)
+                    }
+                    key={key}
+                  >
+                    <NavLink
+                      to={prop.layout + prop.path}
+                      className="nav-link"
+                      activeClassName="active"
+                    >
+                      <i className={prop.icon} />
+                      <p>{prop.name}</p>
+                    </NavLink>
+                  </li>
+                );
+              return null;
+            })}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Sidebar;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Row, Col } from "react-bootstrap";
+
+export class StatsCard extends Component {
+  render() {
+    return (
+      <div className="card card-stats">
+        <div className="content">
+          <Row>
+            <Col xs={5}>
+              <div className="icon-big text-center icon-warning">
+                {this.props.bigIcon}
+              </div>
+            </Col>
+            <Col xs={7}>
+              <div className="numbers">
+                <p>{this.props.statsText}</p>
+                {this.props.statsValue}
+              </div>
+            </Col>
+          </Row>
+          <div className="footer">
+            <hr />
+            <div className="stats">
+              {this.props.statsIcon} {this.props.statsIconText}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatsCard;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Tooltip, OverlayTrigger } from "react-bootstrap";
+import Checkbox from "components/CustomCheckbox/CustomCheckbox.jsx";
+import Button from "components/CustomButton/CustomButton.jsx";
+
+export class Tasks extends Component {
+  handleCheckbox = event => {
+    const target = event.target;
+    console.log(event.target);
+    this.setState({
+      [target.name]: target.checked
+    });
+  };
+  render() {
+    const edit = <Tooltip id="edit_tooltip">Edit Task</Tooltip>;
+    const remove = <Tooltip id="remove_tooltip">Remove</Tooltip>;
+    const tasks_title = [
+      'Sign contract for "What are conference organizers afraid of?"',
+      "Lines From Great Russian Literature? Or E-mails From My Boss?",
+      "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroi",
+      "Create 4 Invisible User Experiences you Never Knew About",
+      'Read "Following makes Medium better"',
+      "Unfollow 5 enemies from twitter"
+    ];
+    var tasks = [];
+    var number;
+    for (var i = 0; i < tasks_title.length; i++) {
+      number = "checkbox" + i;
+      tasks.push(
+        <tr key={i}>
+          <td>
+            <Checkbox
+              number={number}
+              isChecked={i === 1 || i === 2 ? true : false}
+            />
+          </td>
+          <td>{tasks_title[i]}</td>
+          <td className="td-actions text-right">
+            <OverlayTrigger placement="top" overlay={edit}>
+              <Button bsStyle="info" simple type="button" bsSize="xs">
+                <i className="fa fa-edit" />
+              </Button>
+            </OverlayTrigger>
+
+            <OverlayTrigger placement="top" overlay={remove}>
+              <Button bsStyle="danger" simple type="button" bsSize="xs">
+                <i className="fa fa-times" />
+              </Button>
+            </OverlayTrigger>
+          </td>
+        </tr>
+      );
+    }
+    return <tbody>{tasks}</tbody>;
+  }
+}
+
+export default Tasks;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+
+export class UserCard extends Component {
+  render() {
+    return (
+      <div className="card card-user">
+        <div className="image">
+          <img src={this.props.bgImage} alt="..." />
+        </div>
+        <div className="content">
+          <div className="author">
+            <a href="#pablo">
+              <img
+                className="avatar border-gray"
+                src={this.props.avatar}
+                alt="..."
+              />
+              <h4 className="title">
+                {this.props.name}
+                <br />
+                <small>{this.props.userName}</small>
+              </h4>
+            </a>
+          </div>
+          <p className="description text-center">{this.props.description}</p>
+        </div>
+        <hr />
+        <div className="text-center">{this.props.socials}</div>
+      </div>
+    );
+  }
+}
+
+export default UserCard;

+import React from "react";
+import ReactDOM from "react-dom";
+
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./assets/css/animate.min.css";
+import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
+import "./assets/css/demo.css";
+import "./assets/css/pe-icon-7-stroke.css";
+
+import AdminLayout from "layouts/Admin.jsx";
+
+ReactDOM.render(
+  <BrowserRouter>
+    <Switch>
+      <Route path="/admin" render={props => <AdminLayout {...props} />} />
+      <Redirect from="/" to="/admin/dashboard" />
+    </Switch>
+  </BrowserRouter>,
+  document.getElementById("root")
+);

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Route, Switch } from "react-router-dom";
+import NotificationSystem from "react-notification-system";
+
+import AdminNavbar from "components/Navbars/AdminNavbar";
+import Footer from "components/Footer/Footer";
+import Sidebar from "components/Sidebar/Sidebar";
+import FixedPlugin from "components/FixedPlugin/FixedPlugin.jsx";
+
+import { style } from "variables/Variables.jsx";
+
+import routes from "routes.js";
+
+import image from "assets/img/sidebar-3.jpg";
+
+class Admin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      image: image,
+      color: "black",
+      hasImage: true,
+      fixedClasses: "dropdown show-dropdown open"
+    };
+  }
+
+  getRoutes = routes => {
+    return routes.map((prop, key) => {
+      if (prop.layout === "/admin") {
+        return (
+          <Route
+            path={prop.layout + prop.path}
+            render={props => (
+              <prop.component
+                {...props}
+                handleClick={this.handleNotificationClick}
+              />
+            )}
+            key={key}
+          />
+        );
+      } else {
+        return null;
+      }
+    });
+  };
+  getBrandText = path => {
+    for (let i = 0; i < routes.length; i++) {
+      if (
+        this.props.location.pathname.indexOf(
+          routes[i].layout + routes[i].path
+        ) !== -1
+      ) {
+        return routes[i].name;
+      }
+    }
+    return "Brand";
+  };
+
+  componentDidMount() {
+
+  }
+  componentDidUpdate(e) {
+    if (
+      window.innerWidth < 993 &&
+      e.history.location.pathname !== e.location.pathname &&
+      document.documentElement.className.indexOf("nav-open") !== -1
+    ) {
+      document.documentElement.classList.toggle("nav-open");
+    }
+    if (e.history.action === "PUSH") {
+      document.documentElement.scrollTop = 0;
+      document.scrollingElement.scrollTop = 0;
+      this.refs.mainPanel.scrollTop = 0;
+    }
+  }
+  render() {
+    return (
+      <div className="wrapper">
+        <Sidebar {...this.props} routes={routes} image={this.state.image}
+        color={this.state.color}
+        hasImage={this.state.hasImage}/>
+        <div id="main-panel" className="main-panel" ref="mainPanel">
+          <AdminNavbar
+            {...this.props}
+            brandText={this.getBrandText(this.props.location.pathname)}
+          />
+          <Switch>{this.getRoutes(routes)}</Switch>
+          <Footer />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Admin;

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import Dashboard from "views/Dashboard.jsx";
+import UserProfile from "views/UserProfile.jsx";
+import TableList from "views/TableList.jsx";
+import Typography from "views/Typography.jsx";
+import Icons from "views/Icons.jsx";
+import Maps from "views/Maps.jsx";
+import Notifications from "views/Notifications.jsx";
+import Upgrade from "views/Upgrade.jsx";
+
+const dashboardRoutes = [
+  {
+    path: "/dashboard",
+    name: "Dashboard",
+    icon: "pe-7s-graph",
+    component: Dashboard,
+    layout: "/admin"
+  },
+  {
+    path: "/user",
+    name: "User Profile",
+    icon: "pe-7s-user",
+    component: UserProfile,
+    layout: "/admin"
+  },
+  {
+    path: "/table",
+    name: "Table List",
+    icon: "pe-7s-note2",
+    component: TableList,
+    layout: "/admin"
+  },
+  {
+    path: "/typography",
+    name: "Typography",
+    icon: "pe-7s-news-paper",
+    component: Typography,
+    layout: "/admin"
+  },
+  {
+    path: "/icons",
+    name: "Icons",
+    icon: "pe-7s-science",
+    component: Icons,
+    layout: "/admin"
+  },
+  {
+    path: "/maps",
+    name: "Maps",
+    icon: "pe-7s-map-marker",
+    component: Maps,
+    layout: "/admin"
+  },
+  {
+    path: "/notifications",
+    name: "Notifications",
+    icon: "pe-7s-bell",
+    component: Notifications,
+    layout: "/admin"
+  },
+];
+
+export default dashboardRoutes;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import ChartistGraph from "react-chartist";
+import { Grid, Row, Col } from "react-bootstrap";
+
+import { Card } from "components/Card/Card.jsx";
+import { StatsCard } from "components/StatsCard/StatsCard.jsx";
+import { Tasks } from "components/Tasks/Tasks.jsx";
+import {
+  dataPie,
+  legendPie,
+  dataSales,
+  optionsSales,
+  responsiveSales,
+  legendSales,
+  dataBar,
+  optionsBar,
+  responsiveBar,
+  legendBar
+} from "variables/Variables.jsx";
+
+class Dashboard extends Component {
+  createLegend(json) {
+    var legend = [];
+    for (var i = 0; i < json["names"].length; i++) {
+      var type = "fa fa-circle text-" + json["types"][i];
+      legend.push(<i className={type} key={i} />);
+      legend.push(" ");
+      legend.push(json["names"][i]);
+    }
+    return legend;
+  }
+  render() {
+    return (
+      <div className="content">
+        <Grid fluid>
+          <Row>
+            <Col lg={3} sm={6}>
+              <StatsCard
+                bigIcon={<i className="pe-7s-server text-warning" />}
+                statsText="Capacity"
+                statsValue="105GB"
+                statsIcon={<i className="fa fa-refresh" />}
+                statsIconText="Updated now"
+              />
+            </Col>
+            <Col lg={3} sm={6}>
+              <StatsCard
+                bigIcon={<i className="pe-7s-wallet text-success" />}
+                statsText="Revenue"
+                statsValue="$1,345"
+                statsIcon={<i className="fa fa-calendar-o" />}
+                statsIconText="Last day"
+              />
+            </Col>
+            <Col lg={3} sm={6}>
+              <StatsCard
+                bigIcon={<i className="pe-7s-graph1 text-danger" />}
+                statsText="Errors"
+                statsValue="23"
+                statsIcon={<i className="fa fa-clock-o" />}
+                statsIconText="In the last hour"
+              />
+            </Col>
+            <Col lg={3} sm={6}>
+              <StatsCard
+                bigIcon={<i className="fa fa-twitter text-info" />}
+                statsText="Followers"
+                statsValue="+45"
+                statsIcon={<i className="fa fa-refresh" />}
+                statsIconText="Updated now"
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col md={8}>
+              <Card
+                statsIcon="fa fa-history"
+                id="chartHours"
+                title="Users Behavior"
+                category="24 Hours performance"
+                stats="Updated 3 minutes ago"
+                content={
+                  <div className="ct-chart">
+                    <ChartistGraph
+                      data={dataSales}
+                      type="Line"
+                      options={optionsSales}
+                      responsiveOptions={responsiveSales}
+                    />
+                  </div>
+                }
+                legend={
+                  <div className="legend">{this.createLegend(legendSales)}</div>
+                }
+              />
+            </Col>
+            <Col md={4}>
+              <Card
+                statsIcon="fa fa-clock-o"
+                title="Email Statistics"
+                category="Last Campaign Performance"
+                stats="Campaign sent 2 days ago"
+                content={
+                  <div
+                    id="chartPreferences"
+                    className="ct-chart ct-perfect-fourth"
+                  >
+                    <ChartistGraph data={dataPie} type="Pie" />
+                  </div>
+                }
+                legend={
+                  <div className="legend">{this.createLegend(legendPie)}</div>
+                }
+              />
+            </Col>
+          </Row>
+
+          <Row>
+            <Col md={6}>
+              <Card
+                id="chartActivity"
+                title="2014 Sales"
+                category="All products including Taxes"
+                stats="Data information certified"
+                statsIcon="fa fa-check"
+                content={
+                  <div className="ct-chart">
+                    <ChartistGraph
+                      data={dataBar}
+                      type="Bar"
+                      options={optionsBar}
+                      responsiveOptions={responsiveBar}
+                    />
+                  </div>
+                }
+                legend={
+                  <div className="legend">{this.createLegend(legendBar)}</div>
+                }
+              />
+            </Col>
+
+            <Col md={6}>
+              <Card
+                title="Tasks"
+                category="Backend development"
+                stats="Updated 3 minutes ago"
+                statsIcon="fa fa-history"
+                content={
+                  <div className="table-full-width">
+                    <table className="table">
+                      <Tasks />
+                    </table>
+                  </div>
+                }
+              />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default Dashboard;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Grid, Row, Col } from "react-bootstrap";
+
+import Card from "components/Card/Card";
+import { iconsArray } from "variables/Variables.jsx";
+
+class Icons extends Component {
+  render() {
+    return (
+      <div className="content">
+        <Grid fluid>
+          <Row>
+            <Col md={12}>
+              <Card
+                title="202 Awesome Stroke Icons"
+                ctAllIcons
+                category={
+                  <span>
+                    Handcrafted by our friends from{" "}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="http://themes-pixeden.com/font-demos/7-stroke/index.html"
+                    >
+                      Pixeden
+                    </a>
+                  </span>
+                }
+                content={
+                  <Row>
+                    {iconsArray.map((prop, key) => {
+                      return (
+                        <Col
+                          lg={2}
+                          md={3}
+                          sm={4}
+                          xs={6}
+                          className="font-icon-list"
+                          key={key}
+                        >
+                          <div className="font-icon-detail">
+                            <i className={prop} />
+                            <input type="text" defaultValue={prop} />
+                          </div>
+                        </Col>
+                      );
+                    })}
+                  </Row>
+                }
+              />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default Icons;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+// react components used to create a google map
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker
+} from "react-google-maps";
+
+const CustomMap = withScriptjs(
+  withGoogleMap(props => (
+    <GoogleMap
+      defaultZoom={13}
+      defaultCenter={{ lat: 40.748817, lng: -73.985428 }}
+      defaultOptions={{
+        scrollwheel: false,
+        zoomControl: true
+      }}
+    >
+      <Marker position={{ lat: 40.748817, lng: -73.985428 }} />
+    </GoogleMap>
+  ))
+);
+
+function Maps({ ...prop }) {
+  return (
+    <CustomMap
+      googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"
+      loadingElement={<div style={{ height: `100%` }} />}
+      containerElement={<div style={{ height: `100vh` }} />}
+      mapElement={<div style={{ height: `100%` }} />}
+    />
+  );
+}
+
+export default Maps;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Grid, Row, Col, Alert } from "react-bootstrap";
+
+import Button from "components/CustomButton/CustomButton.jsx";
+
+class Notifications extends Component {
+  render() {
+    return (
+      <div className="content">
+        <Grid fluid>
+          <div className="card">
+            <div className="header">
+              <h4 className="title">Notifications</h4>
+              <p className="category">
+                Handcrafted by{" "}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://github.com/igorprado"
+                >
+                  Igor Prado
+                </a>
+                . Please checkout the{" "}
+                <a
+                  href="http://igorprado.com/react-notification-system/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  full documentation.
+                </a>
+              </p>
+            </div>
+            <div className="content">
+              <Row>
+                <Col md={6}>
+                  <h5>Notifications Style</h5>
+                  <Alert bsStyle="info">
+                    <span>This is a plain notification</span>
+                  </Alert>
+                  <Alert bsStyle="info">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span>This is a notification with close button.</span>
+                  </Alert>
+                  <Alert bsStyle="info" className="alert-with-icon">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span data-notify="icon" className="pe-7s-bell" />
+                    <span data-notify="message">
+                      This is a notification with close button and icon.
+                    </span>
+                  </Alert>
+                  <Alert bsStyle="info" className="alert-with-icon">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span data-notify="icon" className="pe-7s-bell" />
+                    <span data-notify="message">
+                      This is a notification with close button and icon and have
+                      many lines. You can see that the icon and the close button
+                      are always vertically aligned. This is a beautiful
+                      notification. So you don't have to worry about the style.
+                    </span>
+                  </Alert>
+                </Col>
+                <Col md={6}>
+                  <h5>Notification states</h5>
+                  <Alert bsStyle="info">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span>
+                      <b> Info - </b> This is a regular notification made with
+                      bsStyle="info"
+                    </span>
+                  </Alert>
+                  <Alert bsStyle="success">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span>
+                      <b> Success - </b> This is a regular notification made
+                      with bsStyle="success"
+                    </span>
+                  </Alert>
+                  <Alert bsStyle="warning">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span>
+                      <b> Warning - </b> This is a regular notification made
+                      with bsStyle="warning"
+                    </span>
+                  </Alert>
+                  <Alert bsStyle="danger">
+                    <button type="button" aria-hidden="true" className="close">
+                      &#x2715;
+                    </button>
+                    <span>
+                      <b> Danger - </b> This is a regular notification made with
+                      bsStyle="danger"
+                    </span>
+                  </Alert>
+                </Col>
+              </Row>
+              <br />
+              <br />
+              <div className="places-buttons">
+                <Row>
+                  <Col md={6} mdOffset={3} className="text-center">
+                    <h5>
+                      Notifications Places
+                      <p className="category">Click to view notifications</p>
+                    </h5>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col md={2} mdOffset={3}>
+                    <Button
+                      bsStyle="default"
+                      block
+                      onClick={() => this.props.handleClick("tl")}
+                    >
+                      Top Left
+                    </Button>
+                  </Col>
+                  <Col md={2}>
+                    <Button
+                      bsStyle="default"
+                      block
+                      onClick={() => this.props.handleClick("tc")}
+                    >
+                      Top Center
+                    </Button>
+                  </Col>
+                  <Col md={2}>
+                    <Button
+                      bsStyle="default"
+                      block
+                      onClick={() => this.props.handleClick("tr")}
+                    >
+                      Top Right
+                    </Button>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col md={2} mdOffset={3}>
+                    <Button
+                      bsStyle="default"
+                      block
+                      onClick={() => this.props.handleClick("bl")}
+                    >
+                      Bottom Left
+                    </Button>
+                  </Col>
+                  <Col md={2}>
+                    <Button
+                      bsStyle="default"
+                      block
+                      onClick={() => this.props.handleClick("bc")}
+                    >
+                      Bottom Center
+                    </Button>
+                  </Col>
+                  <Col md={2}>
+                    <Button
+                      bsStyle="default"
+                      block
+                      onClick={() => this.props.handleClick("br")}
+                    >
+                      Bottom Right
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            </div>
+          </div>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default Notifications;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Grid, Row, Col, Table } from "react-bootstrap";
+
+import Card from "components/Card/Card.jsx";
+import { thArray, tdArray } from "variables/Variables.jsx";
+
+class TableList extends Component {
+  render() {
+    return (
+      <div className="content">
+        <Grid fluid>
+          <Row>
+            <Col md={12}>
+              <Card
+                title="Striped Table with Hover"
+                category="Here is a subtitle for this table"
+                ctTableFullWidth
+                ctTableResponsive
+                content={
+                  <Table striped hover>
+                    <thead>
+                      <tr>
+                        {thArray.map((prop, key) => {
+                          return <th key={key}>{prop}</th>;
+                        })}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {tdArray.map((prop, key) => {
+                        return (
+                          <tr key={key}>
+                            {prop.map((prop, key) => {
+                              return <td key={key}>{prop}</td>;
+                            })}
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </Table>
+                }
+              />
+            </Col>
+
+            <Col md={12}>
+              <Card
+                plain
+                title="Striped Table with Hover"
+                category="Here is a subtitle for this table"
+                ctTableFullWidth
+                ctTableResponsive
+                content={
+                  <Table hover>
+                    <thead>
+                      <tr>
+                        {thArray.map((prop, key) => {
+                          return <th key={key}>{prop}</th>;
+                        })}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {tdArray.map((prop, key) => {
+                        return (
+                          <tr key={key}>
+                            {prop.map((prop, key) => {
+                              return <td key={key}>{prop}</td>;
+                            })}
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </Table>
+                }
+              />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default TableList;

+/*!
+
+=========================================================
+* Light Bootstrap Dashboard React - v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React, { Component } from "react";
+import { Grid, Row, Col } from "react-bootstrap";
+
+import Card from "components/Card/Card.jsx";
+
+class Typography extends Component {
+  render() {
+    return (
+      <div className="content">
+        <Grid fluid>
+          <Row>
+            <Col md={12}>
+              <Card
+                title="Light Bootstrap Table Heading"
+                category="Created using Roboto Font Family"
+                content={
+                  <div>
+                    <div className="typo-line">
+                      <h1>
+                        <p className="category">Header 1</p>Light Bootstrap
+                        Table Heading{" "}
+                      </h1>
+                    </div>
+
+                    <div className="typo-line">
+                      <h2>
+                        <p className="category">Header 2</p>Light Bootstrap
+                        Table Heading
+                      </h2>
+                    </div>
+                    <div className="typo-line">
+                      <h3>
+                        <p className="category">Header 3</p>Light Bootstrap
+                        Table Heading
+                      </h3>
+                    </div>
+                    <div className="typo-line">
+                      <h4>
+                        <p className="category">Header 4</p>Light Bootstrap
+                        Table Heading
+                      </h4>
+                    </div>
+                    <div className="typo-line">
+                      <h5>
+                        <p className="category">Header 5</p>Light Bootstrap
+                        Table Heading
+                      </h5>
+                    </div>
+                    <div className="typo-line">
+                      <h6>
+                        <p className="category">Header 6</p>Light Bootstrap
+                        Table Heading
+                      </h6>
+                    </div>
+                    <div className="typo-line">
+                      <p>
+                        <span className="category">Paragraph</span>Lorem ipsum
+                        dolor sit amet, consectetuer adipiscing elit, sed diam
+                        nonummy nibh euismod tincidunt ut laoreet dolore magna
+                        aliquam erat volutpat. Ut wisi enim ad minim veniam.
+                      </p>
+                    </div>
+                    <div className="typo-line">
+                      <p className="category">Quote</p>
+                      <blockquote>
+                        <p>
+                          Lorem ipsum dolor sit amet, consectetuer adipiscing
+                          elit, sed diam nonummy nibh euismod tincidunt ut
+                          laoreet dolore magna aliquam erat volutpat. Ut wisi
+                          enim ad minim veniam.
+                        </p>
+                        <small>Steve Jobs, CEO Apple</small>
+                      </blockquote>
+                    </div>
+
+                    <div className="typo-line">
+                      <p className="category">Muted Text</p>
+                      <p className="text-muted">
+                        Lorem ipsum dolor sit amet, consectetuer adipiscing
+                        elit, sed diam nonummy nibh euismod tincidunt ut
+                        laoreet.
+                      </p>
+                    </div>
+                    <div className="typo-line">
+                      {/* <!--
+                                             there are also "text-info", "text-success", "text-warning", "text-danger" clases for the text
+                                             --> */}
+                      <p className="category">Coloured Text</p>
+                      <p className="text-primary">
+                        Text Primary - Light Bootstrap Table Heading and complex
+                        bootstrap dashboard you've ever seen on the internet.
+                      </p>
+                      <p className="text-info">
+                        Text Info - Light Bootstrap Table Heading and complex
+                        bootstrap dashboard you've ever seen on the internet.
+                      </p>
+                      <p className="text-success">
+                        Text Success - Light Bootstrap Table Heading and complex
+                        bootstrap dashboard you've ever seen on the internet.
+                      </p>
+                      <p className="text-warning">
+                        Text Warning - Light Bootstrap Table Heading and complex
+                        bootstrap dashboard you've ever seen on the internet.
+                      </p>
+                      <p className="text-danger">
+                        Text Danger - Light Bootstrap Table Heading and complex
+                        bootstrap dashboard you've ever seen on the internet.
+                      </p>
+                    </div>
+
+                    <div className="typo-line">
+                      <h2>
+                        <p className="category">Small Tag</p>Header with small
+                        subtitle <br />
+                        <small>".small" is a tag for the headers</small>{" "}
+                      </h2>
+                    </div>
+                  </div>
+                }
+              />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default Typography;