Merge branch 'frontend' into 'master'

Frontend



See merge request !1

+# Created by https://www.gitignore.io/api/node,macos,windows,intellij
+# Edit at https://www.gitignore.io/?templates=node,macos,windows,intellij
+
+### Intellij ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+build
+build/
+.idea
+
+# User-specific stuff
+.idea
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### Intellij Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+.idea/**/sonarlint/
+
+# SonarQube Plugin
+.idea/**/sonarIssues.xml
+
+# Markdown Navigator plugin
+.idea/**/markdown-navigator.xml
+.idea/**/markdown-navigator/
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# rollup.js default build output
+dist/
+
+# Uncomment the public line if your project uses Gatsby
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# https://create-react-app.dev/docs/using-the-public-folder/#docsNav
+# public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Temporary folders
+tmp/
+temp/
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# build
+dist/
+zip/
+public/
+
+# End of https://www.gitignore.io/api/node,macos,windows,intellij

+# 공유 킥보드 서비스 이슈 관리 시스템 프론트엔드
+## 사용 기술
+- React
\ No newline at end of file

+{
+  "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",
+    "moment": "^2.26.0",
+    "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-moment": "^0.9.7",
+    "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",
+    "react-dimensions": "^1.3.1",
+    "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"
+    ]
+  }
+}

+export const empty = require('./empty.png');
+export const mate_logo = require('./mate_logo.png');
+export const search_user = require('./search_user.png');

+.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: 12px 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: 12px 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" style={{fontWeight: 400}}>{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";
+``
+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="http://mate.ryulth.com/admin/kickboard">Home</a>
+              </li>
+              <li>
+                <a href="http://mate.ryulth.com/admin/kickboard">Company</a>
+              </li>
+            </ul>
+          </nav>
+          <p className="copyright pull-right">
+            &copy; {new Date().getFullYear()}{" "}
+            <a href="#">
+              Wico
+            </a>
+          </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;

+import React, {useEffect} from "react";
+import Dimensions from "react-dimensions";
+import res from './res';
+
+let map;
+let markers = [];
+let infoWindow;
+
+const getBatteryUrlStringByBattery = battery => {
+  if (battery >= 0 && battery < 25) {
+    return "0-25";
+  } else if (battery >= 25 && battery < 50) {
+    return "25-50";
+  } else if (battery >= 50 && battery < 75) {
+    return "50-75";
+  }
+  return "75-100";
+};
+
+class GoogleMap extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      kickboards: []
+    };
+  }
+
+  componentDidMount() {
+    // fetch('http://1.201.143.67:5901/kickboard/all')
+    //   .then(r => r.json())
+    //   .then(d => {
+    //     if(!d.success || !d.data.length) return;
+    //
+    //     // console.log(d.data)
+    //     this.setState({
+    //       kickboards: d.data
+    //     })
+    //   })
+    //   .then(d => {
+    //     const { google } = window;
+    //
+    //     infoWindow = new window.google.maps.InfoWindow({});
+    //
+    //     map = new google.maps.Map(document.getElementById("map"), {
+    //       zoom: 11,
+    //       center: {lat: -34.397, lng: 150.644},
+    //       disableDefaultUI: true,
+    //       zoomControl: true
+    //     });
+    //
+    //     google.maps.event.addListenerOnce(map, "idle", () => {
+    //       this.getCurrentLocation();
+    //     });
+    //   })
+    //   .catch(err => console.log(err));
+
+    const response = JSON.parse(res);
+    this.setState({
+      kickboards: response.data
+    });
+
+    const { google } = window;
+    infoWindow = new window.google.maps.InfoWindow({});
+
+    map = new google.maps.Map(document.getElementById("map"), {
+      zoom: 8,
+      center: {lat: -34.397, lng: 150.644},
+      disableDefaultUI: true,
+      zoomControl: true
+    });
+
+    google.maps.event.addListenerOnce(map, "idle", () => {
+      this.getCurrentLocation();
+    });
+  }
+
+  getCurrentLocation() {
+    if (navigator.geolocation) {
+      map.setCenter(
+        new window.google.maps.LatLng({
+          lat: 37.2441088,
+          lng: 127.05054720000001
+        })
+      );
+    } else {
+      map.setCenter(
+        new window.google.maps.LatLng({
+          lat: 37.2441088,
+          lng: 127.05054720000001
+        })
+      );
+    }
+  }
+
+  drawMarkers() {
+    if (map === null) return;
+    // const selectedMarker = new window.google.maps.Marker({});
+
+    markers = this.state.kickboards.map(item => {
+
+      const marker = new window.google.maps.Marker({
+        position: new window.google.maps.LatLng({
+          lat: item.coordinates.y,
+          lng: item.coordinates.x
+        })
+      });
+
+      const markerContent = `
+        <div>
+          <div style="color:black"> 시리얼번호: ${item.serial_number} </div>
+        </div>
+      `;
+
+      marker.item = item;
+
+      this.renderMarker(marker);
+
+      window.google.maps.event.addListener(marker, "click", () => {
+        infoWindow.close();
+        infoWindow.setContent(markerContent);
+        infoWindow.open(map, marker);
+        this.props.setKbId(item.serial_number);
+      });
+
+      window.google.maps.event.addListener(marker, "mouseover", () => {
+        infoWindow.close();
+        infoWindow.setContent(markerContent);
+        infoWindow.open(map, marker);
+        this.highlightMarker(marker);
+      });
+
+      window.google.maps.event.addListener(marker, "mouseout", () => {
+        infoWindow.close();
+        this.renderMarker(marker);
+      });
+
+      marker.setMap(map);
+      return marker;
+    });
+  }
+
+  renderMarker(marker) {
+    const { battery } = marker.item;
+    const batteryString = getBatteryUrlStringByBattery(battery);
+
+    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}.png`);
+    marker.setIcon(iconUrl);
+  }
+
+  highlightMarker(marker) {
+    const { battery } = marker.item;
+    const batteryString = getBatteryUrlStringByBattery(battery);
+
+    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}_selected.png`);
+    marker.setIcon(iconUrl);
+  }
+
+  moveToMarker(kbId) {
+    if (map == null || markers.length === 0) {
+      return;
+    }
+
+    const searchedMarker = markers.find(
+      marker => marker.item.serial_number === kbId
+    );
+
+    if(!searchedMarker) return;
+    const markerContent = `
+      <div>
+        <div style="color:black"> 시리얼번호: ${kbId} </div>
+      </div>
+    `;
+
+    infoWindow.close();
+    infoWindow.setContent(markerContent);
+    infoWindow.open(map, searchedMarker);
+
+    map.setCenter(
+      new window.google.maps.LatLng({
+        lat: searchedMarker.item.coordinates.y,
+        lng: searchedMarker.item.coordinates.x
+      })
+    );
+    map.setZoom(14);
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.moveToMarker(this.props.kbId);
+  }
+
+  render() {
+    this.drawMarkers();
+
+    return (
+      <div id="map" style={{height:this.props.containerWidth}}>
+      </div>
+    )
+  }
+};
+
+export default Dimensions()(GoogleMap) // Enhanced component
\ No newline at end of file

+import React from "react";
+import { Card } from "components/Card/Card.jsx";
+import Dimensions from 'react-dimensions'
+import moment from 'moment';
+import GoogleMap from './GoogleMap';
+import KickboardStatusCard from "./KickboardStatusCard";
+
+const GoogleMapCard = (props) => {
+  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
+
+  return (
+    <Card
+      id="chartActivity"
+      title="서비스 현황"
+      stats={getStats}
+      statsIcon="fa fa-history"
+      content={
+        <GoogleMap kbId={props.kbId} setKbId={props.setKbId}/>
+      }
+    />
+  );
+};
+
+export default GoogleMapCard // Enhanced component
\ No newline at end of file

+import React from "react";
+import {Table} from "react-bootstrap";
+import { Card } from "components/Card/Card.jsx";
+import styled from "styled-components";
+
+const A = styled.a`
+  color: #333;
+  text-decoration: underline;
+  font-weight: 500;
+`;
+
+const UserDataKey = {
+  user_id: '유저ID',
+  rent_datetime: '대여 시각',
+  return_datetime: '반납 시각',
+  rental_time: '대여 시간',
+  rental_distance: '이동 거리',
+  rental_fee: '대여 금액',
+};
+
+function timestampToString(stamp) {
+  if (!stamp) return '';
+  const date = stamp.split('T')[0];
+  const time = stamp.split('T')[1].split('.')[0];
+
+  return `${date} ${time}`;
+}
+
+const KickboardHistoryTable = (props) => {
+  const {kbId, historyData} = props;
+
+  return (
+    <Card
+      title={`${kbId}번 킥보드 사용자 대여 히스토리`}
+      ctTableFullWidth
+      ctTableResponsive
+      content={
+        <Table striped hover>
+          <thead>
+          <tr>
+            {Object.values(UserDataKey).map((prop, key) => {
+              return <th key={key}>{prop}</th>;
+            })}
+          </tr>
+          </thead>
+          <tbody>
+          {historyData.map((data, idx) => {
+            const {user_id, rent_datetime, return_datetime, rental_time, rental_distance, rental_fee} = data;
+            const userHistoryUrl = `http://mate.ryulth.com/admin/user/?userId=${user_id}`;
+
+            return (
+              <tr key={idx}>
+                <td><A href={userHistoryUrl}>{user_id}</A></td>
+                <td>{timestampToString(rent_datetime)}</td>
+                <td>{timestampToString(return_datetime)}</td>
+                <td>{rental_time}분</td>
+                <td>{rental_distance}km</td>
+                <td>{rental_fee}원</td>
+              </tr>
+            );
+          })}
+          </tbody>
+        </Table>
+      }
+    />
+  )
+};
+
+export default KickboardHistoryTable;
+

+import React, {useState, useEffect} from "react";
+import { Card } from "components/Card/Card.jsx";
+import {Col, Row} from "react-bootstrap";
+import styled from "styled-components"
+import moment from "moment";
+
+// border: 1px solid #E3E3E3;
+const KickboardButton = styled.div`
+    font-size: 15px;
+    background-color: #e7e7e7;
+    border-radius: 4px;
+    color: #565656;
+    padding: 8px 12px;
+    height: 40px;
+    box-shadow: none;
+    margin: 0 auto;
+    text-align: center;
+    margin-bottom: 20px;
+    
+    &:hover {
+      background-color: #565656;
+      color: white;
+      cursor: pointer;
+    }
+`;
+
+const KickboardDataList = styled.ul`
+  font-size: 16px;
+`;
+
+const KickboardData = styled.li`
+  padding: 5px 0;
+`;
+
+const kickboardDataKey = {
+  battery: '배터리',
+  coordinates: '킥보드 위치',
+  states: '킥보드 상태',
+  is_good_posture: '킥보드 자세 상태',
+  total_driven_distance: '총 누적 이동 거리',
+  total_driven_time: '총 누적 대여 시간',
+  is_good_gps_signal: 'GPS 신호 양호 여부',
+  connected: '현재 네트워크 연결 여부',
+  updated_coordinates_datetime: '최근 gps 업데이트 시각',
+  connection_updated_datetime: '최근 연결 업데이트 시각',
+  model_name: '모델명',
+  updated_datetime: '최근 업데이트 시각',
+};
+
+// "serial_number":"000165",
+// "coordinates":{"x":126.64504,"y":37.39101},
+// "states":"{}",
+// "model_name":"MA01",
+// "is_good_gps_signal":true,
+// "updated_coordinates_datetime":"2020-04-19T15:27:39.427Z",
+// "connection_updated_datetime":"2020-04-18T12:43:00.393Z",
+// "is_good_posture":true,
+// "connected":true,
+// "total_driven_distance":3534,
+// "total_driven_time":162636,
+// "updated_datetime":"2020-06-12T10:00:28.715Z",
+// "battery":72
+
+function timestampToString(stamp) {
+  if (!stamp) return '';
+  const date = stamp.split('T')[0];
+  const time = stamp.split('T')[1].split('.')[0];
+
+  return `${date} ${time}`;
+}
+
+const KickboardStatusCard = (props) => {
+  const {kbId, kbData} = props;
+  const { battery, coordinates, states, is_good_posture, total_driven_distance,
+    total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime,
+    connection_updated_datetime, model_name, updated_datetime } = kbData;
+  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
+
+  return (
+    <Card
+      title={`${kbId}번 킥보드`}
+      stats={getStats}
+      statsIcon="fa fa-history"
+      content={
+        <Row>
+          <Col md={4} sm={4} xs={4}>
+            <KickboardButton>경적 울리기</KickboardButton>
+          </Col>
+          <Col md={4} sm={4} xs={4}>
+            <KickboardButton>반납하기</KickboardButton>
+          </Col>
+          <Col md={4} sm={4} xs={4}>
+            <KickboardButton>운행 종료하기</KickboardButton>
+          </Col>
+          <KickboardDataList>
+            <KickboardData>{kickboardDataKey.battery} : {battery}%</KickboardData>
+            <KickboardData>{kickboardDataKey.coordinates} : {JSON.stringify(coordinates)}</KickboardData>
+            <KickboardData>{kickboardDataKey.states} : {states}</KickboardData>
+            <KickboardData>{kickboardDataKey.is_good_posture} : {is_good_posture ? '양호' : '불량'}</KickboardData>
+            <KickboardData>{kickboardDataKey.total_driven_distance} : {total_driven_distance}</KickboardData>
+            <KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData>
+            <KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal  ? '양호' : '불량'}</KickboardData>
+            <KickboardData>{kickboardDataKey.connected} : {connected  ? '연결됨' : '연결되지 않음'}</KickboardData>
+            <KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {timestampToString(updated_coordinates_datetime)}</KickboardData>
+            <KickboardData>{kickboardDataKey.connection_updated_datetime} : {timestampToString(connection_updated_datetime)}</KickboardData>
+            <KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData>
+            <KickboardData>{kickboardDataKey.updated_datetime} : {timestampToString(updated_datetime)}</KickboardData>
+          </KickboardDataList>
+        </Row>
+      }
+    />
+  );
+};
+
+export default KickboardStatusCard;
\ No newline at end of file

+import React, {useRef} from "react";
+import styled from "styled-components";
+
+const SearchButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const SearchInput = styled.input`
+  width: 80%;
+`;
+
+const ApplyButton = styled.div`
+  width: 17%;
+  background-color: #e7e7e7;
+  border-radius: 4px;
+  color: #565656;
+  text-align: center;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+  background-color: #565656;
+  color: white;
+  cursor: pointer;
+`;
+
+
+
+const SearchButton = (props) => {
+  const {setKbId} = props;
+  const inputEl = useRef(null);
+
+  const searchKickboard = (e) => {
+    const searchText = inputEl.current.value;
+
+    fetch(`http://1.201.143.67:5901/kickboard/${searchText}`)
+      .then(r => r.json())
+      .then(d => {
+        if(d.success && d.data.length) setKbId(searchText);
+        else window.alert('해당 번호의 킥보드가 존재하지 않습니다!')
+      })
+      .catch(err => console.log(err));
+  };
+
+  return (
+    <SearchButtonWrapper>
+      <SearchInput ref={inputEl} type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
+      <ApplyButton onClick={(e) => searchKickboard(e)}><span>검색</span></ApplyButton>
+    </SearchButtonWrapper>
+  );
+};
+
+export default SearchButton;
+
+

+/*!
+
+=========================================================
+* 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" style={{color: '#333333'}}>{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() {
+    return (
+      <div>
+        <Nav pullRight>
+          <NavItem eventKey={3} href="#">
+            Log out
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+export default AdminNavbarLinks;