Home Explore Help
Sign In
dagarcos
/
FlaskWebSample
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

base code

dagarcos 4 months ago
commit
404a246123
100 changed files with 82541 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      __pycache__/app.cpython-35.pyc
  2. 24 0
      app.py
  3. BIN
      controllers/__pycache__/mainController.cpython-311.pyc
  4. BIN
      controllers/__pycache__/mainController.cpython-35.pyc
  5. BIN
      controllers/__pycache__/mainController.cpython-37.pyc
  6. BIN
      controllers/__pycache__/usersController.cpython-35.pyc
  7. BIN
      controllers/__pycache__/usersController.cpython-37.pyc
  8. 16 0
      controllers/mainController.py
  9. BIN
      models/__pycache__/db.cpython-35.pyc
  10. BIN
      models/__pycache__/db.cpython-37.pyc
  11. BIN
      models/__pycache__/user.cpython-35.pyc
  12. BIN
      models/__pycache__/user.cpython-37.pyc
  13. 12 0
      models/db.py
  14. 1 0
      passwd.txt
  15. BIN
      services/__pycache__/userService.cpython-35.pyc
  16. BIN
      services/__pycache__/userService.cpython-37.pyc
  17. 712 0
      static/base/breadcrumb.html
  18. 1009 0
      static/base/cards.html
  19. 824 0
      static/base/carousel.html
  20. 790 0
      static/base/collapse.html
  21. 1744 0
      static/base/forms.html
  22. 712 0
      static/base/jumbotron.html
  23. 907 0
      static/base/list-group.html
  24. 1029 0
      static/base/navs.html
  25. 900 0
      static/base/pagination.html
  26. 702 0
      static/base/popovers.html
  27. 786 0
      static/base/progress.html
  28. 770 0
      static/base/scrollspy.html
  29. 1343 0
      static/base/switches.html
  30. 1087 0
      static/base/tables.html
  31. 778 0
      static/base/tabs.html
  32. 701 0
      static/base/tooltips.html
  33. 1523 0
      static/buttons/brand-buttons.html
  34. 849 0
      static/buttons/button-group.html
  35. 1290 0
      static/buttons/buttons.html
  36. 1028 0
      static/buttons/dropdowns.html
  37. 0 0
      static/css/flag-icon.min.css
  38. 3 0
      static/css/font-awesome.min.css
  39. 6 0
      static/css/icons.min.css
  40. 0 0
      static/css/simple-line-icons.css
  41. 16396 0
      static/css/style.css
  42. 0 0
      static/css/style.css.map
  43. 11 0
      static/css/style.min.css
  44. 0 0
      static/css/style.min.css.map
  45. BIN
      static/fonts/fontawesome-webfont.ttf
  46. BIN
      static/fonts/fontawesome-webfont.woff
  47. BIN
      static/fonts/fontawesome-webfont.woff2
  48. 1084 0
      static/icons/coreui-icons.html
  49. 1678 0
      static/icons/flags.html
  50. 3694 0
      static/icons/font-awesome.html
  51. 1046 0
      static/icons/simple-line-icons.html
  52. BIN
      static/img/avatars/1.jpg
  53. BIN
      static/img/avatars/2.jpg
  54. BIN
      static/img/avatars/3.jpg
  55. BIN
      static/img/avatars/4.jpg
  56. BIN
      static/img/avatars/5.jpg
  57. BIN
      static/img/avatars/6.jpg
  58. BIN
      static/img/avatars/7.jpg
  59. BIN
      static/img/avatars/8.jpg
  60. 53 0
      static/img/brand/logo.svg
  61. 17 0
      static/img/brand/sygnet.svg
  62. BIN
      static/img/favicon.ico
  63. 5 0
      static/js/bootstrap.min.js
  64. 141 0
      static/js/charts.js
  65. 0 0
      static/js/charts.js.map
  66. 15 0
      static/js/colors.js
  67. 1 0
      static/js/colors.js.map
  68. 4 0
      static/js/core.min.js
  69. 1 0
      static/js/dash.all.min.js
  70. 1 0
      static/js/jquery.min.js
  71. 340 0
      static/js/main.js
  72. 0 0
      static/js/main.js.map
  73. 1 0
      static/js/pace.min.js
  74. 5 0
      static/js/perfect-scrollbar.min.js
  75. 13 0
      static/js/popovers.js
  76. 1 0
      static/js/popovers.js.map
  77. 3 0
      static/js/popper.min.js
  78. 150 0
      static/js/src/charts.js
  79. 25 0
      static/js/src/colors.js
  80. 358 0
      static/js/src/main.js
  81. 13 0
      static/js/src/popovers.js
  82. 10 0
      static/js/src/tooltips.js
  83. 480 0
      static/js/src/widgets.js
  84. 10 0
      static/js/tooltips.js
  85. 1 0
      static/js/tooltips.js.map
  86. 449 0
      static/js/widgets.js
  87. 0 0
      static/js/widgets.js.map
  88. 760 0
      static/notifications/alerts.html
  89. 761 0
      static/notifications/badge.html
  90. 869 0
      static/notifications/modals.html
  91. 1 0
      static/scss/_custom.scss
  92. 1 0
      static/scss/_variables.scss
  93. 8 0
      static/scss/style.scss
  94. 4 0
      static/scss/vendors/_variables.scss
  95. 128 0
      static/scss/vendors/pace-progress/pace.scss
  96. 19288 0
      static/vendors/chart.js/Chart.bundle.js
  97. 6 0
      static/vendors/chart.js/Chart.bundle.min.js
  98. 14680 0
      static/vendors/chart.js/Chart.js
  99. 6 0
      static/vendors/chart.js/Chart.min.js
  100. 477 0
      static/vendors/datepicker/bootstrap-datepicker.css

BIN
__pycache__/app.cpython-35.pyc
View File


+ 24 - 0
app.py
View File 

@@ -0,0 +1,24 @@
 
+#!/usr/bin/env python3
 
+# -*- coding: utf-8 -*-
 
+"""
 
+Created on Sun Jul 14 11:50:51 2019
 
+
 
+@author: dagarcos
 
+"""
 
+
 
+import os
 
+from flask import Flask, flash, render_template, redirect, request, url_for
 
+from controllers.mainController import mainController
 
+
 
+app = Flask(__name__)
 
+app.secret_key = os.urandom(12)
 
+
 
+@app.route('/')
 
+def index():
 
+	return redirect(url_for('mainController.main'))
 
+
 
+
 
+app.register_blueprint(mainController)
 
+
 
+if __name__ == '__main__':
 
+	app.run(host='0.0.0.0', debug=True)

BIN
controllers/__pycache__/mainController.cpython-311.pyc
View File


BIN
controllers/__pycache__/mainController.cpython-35.pyc
View File


BIN
controllers/__pycache__/mainController.cpython-37.pyc
View File


BIN
controllers/__pycache__/usersController.cpython-35.pyc
View File


BIN
controllers/__pycache__/usersController.cpython-37.pyc
View File


+ 16 - 0
controllers/mainController.py
View File 

@@ -0,0 +1,16 @@
 
+#!/usr/bin/env python3
 
+# -*- coding: utf-8 -*-
 
+"""
 
+Created on Sun Jul 14 11:50:51 2019
 
+
 
+@author: dagarcos
 
+"""
 
+
 
+from flask import render_template, Blueprint, url_for, redirect
 
+
 
+mainController = Blueprint('mainController', __name__)
 
+
 
+
 
+@mainController.route('/main')
 
+def main():
 
+    return render_template('index.html')

BIN
models/__pycache__/db.cpython-35.pyc
View File


BIN
models/__pycache__/db.cpython-37.pyc
View File


BIN
models/__pycache__/user.cpython-35.pyc
View File


BIN
models/__pycache__/user.cpython-37.pyc
View File


+ 12 - 0
models/db.py
View File 

@@ -0,0 +1,12 @@
 
+#!/usr/bin/env python3
 
+# -*- coding: utf-8 -*-
 
+"""
 
+Created on Sun Jul 14 11:50:51 2019
 
+
 
+@author: dagarcos
 
+"""
 
+
 
+
 
+from flask_sqlalchemy import SQLAlchemy
 
+
 
+db = SQLAlchemy()

+ 1 - 0
passwd.txt
View File 

@@ -0,0 +1 @@
 
+sha256$SKYgWXzL$d52c99aa790bf72441e5347b6d58be731bd136b6e584cd1549be8ecb1d29a236

BIN
services/__pycache__/userService.cpython-35.pyc
View File


BIN
services/__pycache__/userService.cpython-37.pyc
View File


+ 712 - 0
static/base/breadcrumb.html
View File 

@@ -0,0 +1,712 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item"><a href="#">Admin</a></li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-lg-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Breadcrumb
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-breadcrumb/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <nav aria-label="breadcrumb" role="navigation">
 
+                      <ol class="breadcrumb">
 
+                        <li class="breadcrumb-item active" aria-current="page">Home</li>
 
+                      </ol>
 
+                    </nav>
 
+                    <nav aria-label="breadcrumb" role="navigation">
 
+                      <ol class="breadcrumb">
 
+                        <li class="breadcrumb-item">
 
+                          <a href="#">Home</a>
 
+                        </li>
 
+                        <li class="breadcrumb-item active" aria-current="page">Library</li>
 
+                      </ol>
 
+                    </nav>
 
+                    <nav aria-label="breadcrumb" role="navigation">
 
+                      <ol class="breadcrumb">
 
+                        <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                        <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                        <li class="breadcrumb-item active" aria-current="page">Data</li>
 
+                      </ol>
 
+                    </nav>
 
+                    <nav class="breadcrumb">
 
+                      <a class="breadcrumb-item" href="#">Home</a>
 
+                      <a class="breadcrumb-item" href="#">Library</a>
 
+                      <a class="breadcrumb-item" href="#">Data</a>
 
+                      <span class="breadcrumb-item active">Bootstrap</span>
 
+                    </nav>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1009 - 0
static/base/cards.html
View File 

@@ -0,0 +1,1009 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-header">Card title</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                  <div class="card-footer">Card footer</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-check"></i>Card with icon</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-header">Card with switch
 
+                    <div class="card-header-actions" style="height: 21px;">
 
+                      <label class="switch switch-sm switch-label switch-info" tabindex="0">
 
+                        <input type="checkbox" class="switch-input" checked>
 
+                        <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                      </label>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-header">Card with label
 
+                    <div class="card-header-actions" style="height: 21px;">
 
+                      <span class="badge badge-success">Success</span>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-header">Card with label
 
+                    <div class="card-header-actions" style="height: 21px;">
 
+                      <span class="badge badge-pill badge-danger">42</span>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card border-primary">
 
+                  <div class="card-header">Card outline</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card border-secondary">
 
+                  <div class="card-header">Card outline</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card border-success">
 
+                  <div class="card-header">Card outline</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card border-info">
 
+                  <div class="card-header">Card outline</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card border-warning">
 
+                  <div class="card-header">Card outline</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card border-danger">
 
+                  <div class="card-header">Card outline</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card card-accent-primary">
 
+                  <div class="card-header">Card with accent</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card card-accent-secondary">
 
+                  <div class="card-header">Card with accent</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card card-accent-success">
 
+                  <div class="card-header">Card with accent</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card card-accent-info">
 
+                  <div class="card-header">Card with accent</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card card-accent-warning">
 
+                  <div class="card-header">Card with accent</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card card-accent-danger">
 
+                  <div class="card-header">Card with accent</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-primary text-center">
 
+                  <div class="card-body">
 
+                    <blockquote class="card-bodyquote">
 
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
+                      <footer>Someone famous in
 
+                        <cite title="Source Title">Source Title</cite>
 
+                      </footer>
 
+                    </blockquote>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-success text-center">
 
+                  <div class="card-body">
 
+                    <blockquote class="card-bodyquote">
 
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
+                      <footer>Someone famous in
 
+                        <cite title="Source Title">Source Title</cite>
 
+                      </footer>
 
+                    </blockquote>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-info text-center">
 
+                  <div class="card-body">
 
+                    <blockquote class="card-bodyquote">
 
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
+                      <footer>Someone famous in
 
+                        <cite title="Source Title">Source Title</cite>
 
+                      </footer>
 
+                    </blockquote>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-warning text-center">
 
+                  <div class="card-body">
 
+                    <blockquote class="card-bodyquote">
 
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
+                      <footer>Someone famous in
 
+                        <cite title="Source Title">Source Title</cite>
 
+                      </footer>
 
+                    </blockquote>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-danger text-center">
 
+                  <div class="card-body">
 
+                    <blockquote class="card-bodyquote">
 
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
+                      <footer>Someone famous in
 
+                        <cite title="Source Title">Source Title</cite>
 
+                      </footer>
 
+                    </blockquote>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-primary text-center">
 
+                  <div class="card-body">
 
+                    <blockquote class="card-bodyquote">
 
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
+                      <footer>Someone famous in
 
+                        <cite title="Source Title">Source Title</cite>
 
+                      </footer>
 
+                    </blockquote>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-primary">
 
+                  <div class="card-header">Card title</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-success">
 
+                  <div class="card-header">Card title</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-info">
 
+                  <div class="card-header">Card title</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-warning">
 
+                  <div class="card-header">Card title</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card text-white bg-danger">
 
+                  <div class="card-header">Card title</div>
 
+                  <div class="card-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
 
+                    ut aliquip ex ea commodo consequat.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6 col-md-4">
 
+                <div class="card">
 
+                  <div class="card-header">Card actions
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action btn-setting" href="#">
 
+                        <i class="icon-settings"></i>
 
+                      </a>
 
+                      <a class="card-header-action btn-minimize" href="#" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true">
 
+                        <i class="icon-arrow-up"></i>
 
+                      </a>
 
+                      <a class="card-header-action btn-close" href="#">
 
+                        <i class="icon-close"></i>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="collapse show" id="collapseExample">
 
+                    <div class="card-body">
 
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
 
+                      ea commodo consequat.
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+              <div class="modal-dialog" role="document">
 
+                <div class="modal-content">
 
+                  <div class="modal-header">
 
+                    <h4 class="modal-title">Modal title</h4>
 
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                      <span aria-hidden="true">×</span>
 
+                    </button>
 
+                  </div>
 
+                  <div class="modal-body">
 
+                    <p>One fine body…</p>
 
+                  </div>
 
+                  <div class="modal-footer">
 
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                    <button class="btn btn-primary" type="button">Save changes</button>
 
+                  </div>
 
+                </div>
 
+                <!-- /.modal-content-->
 
+              </div>
 
+              <!-- /.modal-dialog-->
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 824 - 0
static/base/carousel.html
View File 

@@ -0,0 +1,824 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Carousel
 
+                    <small>slides only</small>
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-carousel/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="carousel slide" id="carouselExampleSlidesOnly" data-ride="carousel">
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9266%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9266%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9269%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9269%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.75625%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c926a%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c926a%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277.0078125%22%20y%3D%22217.75625%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Carousel
 
+                    <small>with controls</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="carousel slide" id="carouselExampleControls" data-ride="carousel">
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c926c%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c926c%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c926e%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c926e%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.75625%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c926f%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c926f%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277.0078125%22%20y%3D%22217.75625%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                      </div>
 
+                      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
 
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 
+                        <span class="sr-only">Previous</span>
 
+                      </a>
 
+                      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
 
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
 
+                        <span class="sr-only">Next</span>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Carousel
 
+                    <small>with indicators</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="carousel slide" id="carouselExampleIndicators" data-ride="carousel">
 
+                      <ol class="carousel-indicators">
 
+                        <li class="active" data-target="#carouselExampleIndicators" data-slide-to="0"></li>
 
+                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
 
+                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 
+                      </ol>
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9270%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9270%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9272%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9272%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.75625%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9273%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9273%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277.0078125%22%20y%3D%22217.75625%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                        </div>
 
+                      </div>
 
+                      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
 
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 
+                        <span class="sr-only">Previous</span>
 
+                      </a>
 
+                      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
 
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
 
+                        <span class="sr-only">Next</span>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Carousel
 
+                    <small>with captions</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="carousel slide" id="carouselExampleCaptions" data-ride="carousel">
 
+                      <ol class="carousel-indicators">
 
+                        <li class="active" data-target="#carouselExampleCaptions" data-slide-to="0"></li>
 
+                        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
 
+                        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
 
+                      </ol>
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9274%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9274%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                          <div class="carousel-caption d-none d-md-block">
 
+                            <h3>First slide label</h3>
 
+                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 
+                          </div>
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9275%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9275%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.75625%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                          <div class="carousel-caption d-none d-md-block">
 
+                            <h3>Second slide label</h3>
 
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
+                          </div>
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_160549c9277%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_160549c9277%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277.0078125%22%20y%3D%22217.75625%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
 
+                            data-holder-rendered="true">
 
+                          <div class="carousel-caption d-none d-md-block">
 
+                            <h3>Third slide label</h3>
 
+                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
 
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 
+                        <span class="sr-only">Previous</span>
 
+                      </a>
 
+                      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
 
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
 
+                        <span class="sr-only">Next</span>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 790 - 0
static/base/collapse.html
View File 

@@ -0,0 +1,790 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Collapse
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-collapse/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <p>
 
+                      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
 
+                      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
 
+                    </p>
 
+                    <div class="collapse" id="collapseExample">
 
+                      <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Collapse
 
+                    <small>multiple targets</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <p>
 
+                      <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
 
+                      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button>
 
+                      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
 
+                    </p>
 
+                    <div class="row">
 
+                      <div class="col-sm-12 col-md-6">
 
+                        <div class="collapse multi-collapse" id="multiCollapseExample1">
 
+                          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="col-sm-12 col-md-6">
 
+                        <div class="collapse multi-collapse" id="multiCollapseExample2">
 
+                          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Collapse
 
+                    <small>accordion</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div id="accordion" role="tablist">
 
+                      <div class="card mb-0">
 
+                        <div class="card-header" id="headingOne" role="tab">
 
+                          <h5 class="mb-0">
 
+                            <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</a>
 
+                          </h5>
 
+                        </div>
 
+                        <div class="collapse show" id="collapseOne" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
 
+                          <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
 
+                            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
 
+                            Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="card mb-0">
 
+                        <div class="card-header" id="headingTwo" role="tab">
 
+                          <h5 class="mb-0">
 
+                            <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a>
 
+                          </h5>
 
+                        </div>
 
+                        <div class="collapse" id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
 
+                          <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
 
+                            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
 
+                            Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="card mb-0">
 
+                        <div class="card-header" id="headingThree" role="tab">
 
+                          <h5 class="mb-0">
 
+                            <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a>
 
+                          </h5>
 
+                        </div>
 
+                        <div class="collapse" id="collapseThree" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
 
+                          <div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
 
+                            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
 
+                            Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Collapse
 
+                    <small>custom accordion</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div id="exampleAccordion" data-children=".item">
 
+                      <div class="item">
 
+                        <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">Toggle item</a>
 
+                        <div class="collapse show" id="exampleAccordion1" role="tabpanel">
 
+                          <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.</p>
 
+                        </div>
 
+                      </div>
 
+                      <div class="item">
 
+                        <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">Toggle item 2</a>
 
+                        <div class="collapse" id="exampleAccordion2" role="tabpanel">
 
+                          <p class="mb-3">Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis
 
+                            dis parturient montes, nascetur ridiculus mus.</p>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1744 - 0
static/base/forms.html
View File 

@@ -0,0 +1,1744 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Credit Card</strong>
 
+                    <small>Form</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="row">
 
+                      <div class="col-sm-12">
 
+                        <div class="form-group">
 
+                          <label for="name">Name</label>
 
+                          <input class="form-control" id="name" type="text" placeholder="Enter your name">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /.row-->
 
+                    <div class="row">
 
+                      <div class="col-sm-12">
 
+                        <div class="form-group">
 
+                          <label for="ccnumber">Credit Card Number</label>
 
+                          <input class="form-control" id="ccnumber" type="text" placeholder="0000 0000 0000 0000">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /.row-->
 
+                    <div class="row">
 
+                      <div class="form-group col-sm-4">
 
+                        <label for="ccmonth">Month</label>
 
+                        <select class="form-control" id="ccmonth">
 
+                          <option>1</option>
 
+                          <option>2</option>
 
+                          <option>3</option>
 
+                          <option>4</option>
 
+                          <option>5</option>
 
+                          <option>6</option>
 
+                          <option>7</option>
 
+                          <option>8</option>
 
+                          <option>9</option>
 
+                          <option>10</option>
 
+                          <option>11</option>
 
+                          <option>12</option>
 
+                        </select>
 
+                      </div>
 
+                      <div class="form-group col-sm-4">
 
+                        <label for="ccyear">Year</label>
 
+                        <select class="form-control" id="ccyear">
 
+                          <option>2014</option>
 
+                          <option>2015</option>
 
+                          <option>2016</option>
 
+                          <option>2017</option>
 
+                          <option>2018</option>
 
+                          <option>2019</option>
 
+                          <option>2020</option>
 
+                          <option>2021</option>
 
+                          <option>2022</option>
 
+                          <option>2023</option>
 
+                          <option>2024</option>
 
+                          <option>2025</option>
 
+                        </select>
 
+                      </div>
 
+                      <div class="col-sm-4">
 
+                        <div class="form-group">
 
+                          <label for="cvv">CVV/CVC</label>
 
+                          <input class="form-control" id="cvv" type="text" placeholder="123">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /.row-->
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Company</strong>
 
+                    <small>Form</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="form-group">
 
+                      <label for="company">Company</label>
 
+                      <input class="form-control" id="company" type="text" placeholder="Enter your company name">
 
+                    </div>
 
+                    <div class="form-group">
 
+                      <label for="vat">VAT</label>
 
+                      <input class="form-control" id="vat" type="text" placeholder="PL1234567890">
 
+                    </div>
 
+                    <div class="form-group">
 
+                      <label for="street">Street</label>
 
+                      <input class="form-control" id="street" type="text" placeholder="Enter street name">
 
+                    </div>
 
+                    <div class="row">
 
+                      <div class="form-group col-sm-8">
 
+                        <label for="city">City</label>
 
+                        <input class="form-control" id="city" type="text" placeholder="Enter your city">
 
+                      </div>
 
+                      <div class="form-group col-sm-4">
 
+                        <label for="postal-code">Postal Code</label>
 
+                        <input class="form-control" id="postal-code" type="text" placeholder="Postal Code">
 
+                      </div>
 
+                    </div>
 
+                    <!-- /.row-->
 
+                    <div class="form-group">
 
+                      <label for="country">Country</label>
 
+                      <input class="form-control" id="country" type="text" placeholder="Country name">
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Basic Form</strong> Elements</div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label">Static</label>
 
+                        <div class="col-md-9">
 
+                          <p class="form-control-static">Username</p>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="text-input">Text Input</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="text-input" type="text" name="text-input" placeholder="Text">
 
+                          <span class="help-block">This is a help text</span>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="email-input">Email Input</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="email-input" type="email" name="email-input" placeholder="Enter Email">
 
+                          <span class="help-block">Please enter your email</span>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="password-input">Password</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="password-input" type="password" name="password-input" placeholder="Password">
 
+                          <span class="help-block">Please enter a complex password</span>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="date-input">Date Input</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="date-input" type="date" name="date-input" placeholder="date">
 
+                          <span class="help-block">Please enter a valid date</span>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="disabled-input">Disabled Input</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="disabled-input" type="text" name="disabled-input" placeholder="Disabled" disabled="">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="textarea-input">Textarea</label>
 
+                        <div class="col-md-9">
 
+                          <textarea class="form-control" id="textarea-input" name="textarea-input" rows="9" placeholder="Content.."></textarea>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="select1">Select</label>
 
+                        <div class="col-md-9">
 
+                          <select class="form-control" id="select1" name="select1">
 
+                            <option value="0">Please select</option>
 
+                            <option value="1">Option #1</option>
 
+                            <option value="2">Option #2</option>
 
+                            <option value="3">Option #3</option>
 
+                          </select>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="select2">Select Large</label>
 
+                        <div class="col-md-9">
 
+                          <select class="form-control form-control-lg" id="select2" name="select2">
 
+                            <option value="0">Please select</option>
 
+                            <option value="1">Option #1</option>
 
+                            <option value="2">Option #2</option>
 
+                            <option value="3">Option #3</option>
 
+                          </select>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="select3">Select Small</label>
 
+                        <div class="col-md-9">
 
+                          <select class="form-control form-control-sm" id="select3" name="select3">
 
+                            <option value="0">Please select</option>
 
+                            <option value="1">Option #1</option>
 
+                            <option value="2">Option #2</option>
 
+                            <option value="3">Option #3</option>
 
+                          </select>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="disabledSelect">Disabled Select</label>
 
+                        <div class="col-md-9">
 
+                          <select class="form-control" id="disabledSelect" disabled="">
 
+                            <option value="0">Please select</option>
 
+                            <option value="1">Option #1</option>
 
+                            <option value="2">Option #2</option>
 
+                            <option value="3">Option #3</option>
 
+                          </select>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="multiple-select">Multiple select</label>
 
+                        <div class="col-md-9">
 
+                          <select class="form-control" id="multiple-select" name="multiple-select" size="5" multiple="">
 
+                            <option value="1">Option #1</option>
 
+                            <option value="2">Option #2</option>
 
+                            <option value="3">Option #3</option>
 
+                            <option value="4">Option #4</option>
 
+                            <option value="5">Option #5</option>
 
+                            <option value="6">Option #6</option>
 
+                            <option value="7">Option #7</option>
 
+                            <option value="8">Option #8</option>
 
+                            <option value="9">Option #9</option>
 
+                            <option value="10">Option #10</option>
 
+                          </select>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label">Radios</label>
 
+                        <div class="col-md-9 col-form-label">
 
+                          <div class="form-check">
 
+                            <input class="form-check-input" id="radio1" type="radio" value="radio1" name="radios">
 
+                            <label class="form-check-label" for="radio1">Option 1</label>
 
+                          </div>
 
+                          <div class="form-check">
 
+                            <input class="form-check-input" id="radio2" type="radio" value="radio2" name="radios">
 
+                            <label class="form-check-label" for="radio2">Option 2</label>
 
+                          </div>
 
+                          <div class="form-check">
 
+                            <input class="form-check-input" id="radio3" type="radio" value="radio2" name="radios">
 
+                            <label class="form-check-label" for="radio3">Option 3</label>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label">Inline Radios</label>
 
+                        <div class="col-md-9 col-form-label">
 
+                          <div class="form-check form-check-inline mr-1">
 
+                            <input class="form-check-input" id="inline-radio1" type="radio" value="option1" name="inline-radios">
 
+                            <label class="form-check-label" for="inline-radio1">One</label>
 
+                          </div>
 
+                          <div class="form-check form-check-inline mr-1">
 
+                            <input class="form-check-input" id="inline-radio2" type="radio" value="option2" name="inline-radios">
 
+                            <label class="form-check-label" for="inline-radio2">Two</label>
 
+                          </div>
 
+                          <div class="form-check form-check-inline mr-1">
 
+                            <input class="form-check-input" id="inline-radio3" type="radio" value="option3" name="inline-radios">
 
+                            <label class="form-check-label" for="inline-radio3">Three</label>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label">Checkboxes</label>
 
+                        <div class="col-md-9 col-form-label">
 
+                          <div class="form-check checkbox">
 
+                            <input class="form-check-input" id="check1" type="checkbox" value="">
 
+                            <label class="form-check-label" for="check1">Option 1</label>
 
+                          </div>
 
+                          <div class="form-check checkbox">
 
+                            <input class="form-check-input" id="check2" type="checkbox" value="">
 
+                            <label class="form-check-label" for="check2">Option 2</label>
 
+                          </div>
 
+                          <div class="form-check checkbox">
 
+                            <input class="form-check-input" id="check3" type="checkbox" value="">
 
+                            <label class="form-check-label" for="check3">Option 3</label>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label">Inline Checkboxes</label>
 
+                        <div class="col-md-9 col-form-label">
 
+                          <div class="form-check form-check-inline mr-1">
 
+                            <input class="form-check-input" id="inline-checkbox1" type="checkbox" value="check1">
 
+                            <label class="form-check-label" for="inline-checkbox1">One</label>
 
+                          </div>
 
+                          <div class="form-check form-check-inline mr-1">
 
+                            <input class="form-check-input" id="inline-checkbox2" type="checkbox" value="check2">
 
+                            <label class="form-check-label" for="inline-checkbox2">Two</label>
 
+                          </div>
 
+                          <div class="form-check form-check-inline mr-1">
 
+                            <input class="form-check-input" id="inline-checkbox3" type="checkbox" value="check3">
 
+                            <label class="form-check-label" for="inline-checkbox3">Three</label>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="file-input">File input</label>
 
+                        <div class="col-md-9">
 
+                          <input id="file-input" type="file" name="file-input">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="file-multiple-input">Multiple File input</label>
 
+                        <div class="col-md-9">
 
+                          <input id="file-multiple-input" type="file" name="file-multiple-input" multiple="">
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Inline</strong> Form</div>
 
+                  <div class="card-body">
 
+                    <form class="form-inline" action="" method="post">
 
+                      <div class="form-group">
 
+                        <label for="exampleInputName2">Name</label>
 
+                        <input class="form-control" id="exampleInputName2" type="text" placeholder="Jane Doe">
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <label for="exampleInputEmail2">Email</label>
 
+                        <input class="form-control" id="exampleInputEmail2" type="email" placeholder="jane.doe@example.com">
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Horizontal</strong> Form</div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="hf-email">Email</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="hf-email" type="email" name="hf-email" placeholder="Enter Email..">
 
+                          <span class="help-block">Please enter your email</span>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-md-3 col-form-label" for="hf-password">Password</label>
 
+                        <div class="col-md-9">
 
+                          <input class="form-control" id="hf-password" type="password" name="hf-password" placeholder="Enter Password..">
 
+                          <span class="help-block">Please enter your password</span>
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Normal</strong> Form</div>
 
+                  <div class="card-body">
 
+                    <form action="" method="post">
 
+                      <div class="form-group">
 
+                        <label for="nf-email">Email</label>
 
+                        <input class="form-control" id="nf-email" type="email" name="nf-email" placeholder="Enter Email..">
 
+                        <span class="help-block">Please enter your email</span>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <label for="nf-password">Password</label>
 
+                        <input class="form-control" id="nf-password" type="password" name="nf-password" placeholder="Enter Password..">
 
+                        <span class="help-block">Please enter your password</span>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">Input
 
+                    <strong>Grid</strong>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-3">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-3">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-4">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-4">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-5">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-5">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-6">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-6">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-7">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-7">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-8">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-8">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-9">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-9">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-10">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-10">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-11">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-11">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-sm-12">
 
+                          <input class="form-control" type="text" placeholder=".col-sm-12">
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">
 
+                      <i class="fa fa-user"></i> Login</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">Input
 
+                    <strong>Sizes</strong>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <label class="col-sm-5 col-form-label" for="input-small">Small Input</label>
 
+                        <div class="col-sm-6">
 
+                          <input class="form-control form-control-sm" id="input-small" type="text" name="input-small" placeholder=".form-control-sm">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-sm-5 col-form-label" for="input-normal">Normal Input</label>
 
+                        <div class="col-sm-6">
 
+                          <input class="form-control" id="input-normal" type="text" name="input-normal" placeholder="Normal">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <label class="col-sm-5 col-form-label" for="input-large">Large Input</label>
 
+                        <div class="col-sm-6">
 
+                          <input class="form-control form-control-lg" id="input-large" type="text" name="input-large" placeholder=".form-control-lg">
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Validation states</strong> Form</div>
 
+                  <div class="card-body">
 
+                    <div class="form-group">
 
+                      <label class="form-col-form-label" for="inputSuccess1">Input with success</label>
 
+                      <input class="form-control is-valid" id="inputSuccess1" type="text">
 
+                    </div>
 
+                    <div class="form-group">
 
+                      <label class="form-col-form-label" for="inputError1">Input with error</label>
 
+                      <input class="form-control is-invalid" id="inputError1" type="text">
 
+                      <div class="invalid-feedback">Please provide a valid informations.</div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-sm-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Validation</strong>
 
+                    <code>was-validated</code>
 
+                  </div>
 
+                  <div class="card-body was-validated">
 
+                    <div class="form-group">
 
+                      <label class="form-col-form-label" for="inputSuccess2">Input with success</label>
 
+                      <input class="form-control is-valid" id="inputSuccess2" type="text">
 
+                    </div>
 
+                    <div class="form-group">
 
+                      <label class="form-col-form-label" for="inputError2">Input required</label>
 
+                      <input class="form-control is-invalid" id="inputError2" type="text" required="">
 
+                      <div class="invalid-feedback">Please provide a valid informations.</div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-sm-4">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Icon/Text</strong> Groups</div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <div class="input-group-prepend">
 
+                              <span class="input-group-text">
 
+                                <i class="fa fa-user"></i>
 
+                              </span>
 
+                            </div>
 
+                            <input class="form-control" id="input1-group1" type="text" name="input1-group1" placeholder="Username">
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <input class="form-control" id="input2-group1" type="email" name="input2-group1" placeholder="Email">
 
+                            <div class="input-group-append">
 
+                              <span class="input-group-text">
 
+                                <i class="fa fa-envelope-o"></i>
 
+                              </span>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <div class="input-group-prepend">
 
+                              <span class="input-group-text">
 
+                                <i class="fa fa-euro"></i>
 
+                              </span>
 
+                            </div>
 
+                            <input class="form-control" id="input3-group1" type="text" name="input3-group1" placeholder="..">
 
+                            <div class="input-group-append">
 
+                              <span class="input-group-text">.00</span>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-success" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-4">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Buttons</strong> Groups</div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <span class="input-group-prepend">
 
+                              <button class="btn btn-primary" type="button">
 
+                                <i class="fa fa-search"></i> Search</button>
 
+                            </span>
 
+                            <input class="form-control" id="input1-group2" type="text" name="input1-group2" placeholder="Username">
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <input class="form-control" id="input2-group2" type="email" name="input2-group2" placeholder="Email">
 
+                            <span class="input-group-append">
 
+                              <button class="btn btn-primary" type="button">Submit</button>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <span class="input-group-prepend">
 
+                              <button class="btn btn-primary" type="button">
 
+                                <i class="fa fa-facebook"></i>
 
+                              </button>
 
+                            </span>
 
+                            <input class="form-control" id="input3-group2" type="text" name="input3-group2" placeholder="Search">
 
+                            <span class="input-group-append">
 
+                              <button class="btn btn-primary" type="button">
 
+                                <i class="fa fa-twitter"></i>
 
+                              </button>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-success" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-4">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Dropdowns</strong> Groups</div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <div class="input-group-prepend">
 
+                              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Action
 
+                                <span class="caret"></span>
 
+                              </button>
 
+                              <div class="dropdown-menu">
 
+                                <a class="dropdown-item" href="#">Action</a>
 
+                                <a class="dropdown-item" href="#">Another action</a>
 
+                                <a class="dropdown-item" href="#">Something else here</a>
 
+                                <div class="dropdown-divider" role="separator"></div>
 
+                                <a class="dropdown-item" href="#">Separated link</a>
 
+                              </div>
 
+                            </div>
 
+                            <input class="form-control" id="input1-group3" type="text" name="input1-group3" placeholder="Username">
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <input class="form-control" id="input2-group3" type="email" name="input2-group3" placeholder="Email">
 
+                            <div class="input-group-append">
 
+                              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Action
 
+                                <span class="caret"></span>
 
+                              </button>
 
+                              <div class="dropdown-menu dropdown-menu-right">
 
+                                <a class="dropdown-item" href="#">Action</a>
 
+                                <a class="dropdown-item" href="#">Another action</a>
 
+                                <a class="dropdown-item" href="#">Something else here</a>
 
+                                <div class="dropdown-divider" role="separator"></div>
 
+                                <a class="dropdown-item" href="#">Separated link</a>
 
+                              </div>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="row">
 
+                        <div class="col-md-12">
 
+                          <div class="input-group">
 
+                            <div class="input-group-prepend">
 
+                              <button class="btn btn-primary" type="button">Action</button>
 
+                              <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown">
 
+                                <span class="caret"></span>
 
+                              </button>
 
+                              <div class="dropdown-menu">
 
+                                <a class="dropdown-item" href="#">Action</a>
 
+                                <a class="dropdown-item" href="#">Another action</a>
 
+                                <a class="dropdown-item" href="#">Something else here</a>
 
+                                <div class="dropdown-divider" role="separator"></div>
 
+                                <a class="dropdown-item" href="#">Separated link</a>
 
+                              </div>
 
+                            </div>
 
+                            <input class="form-control" id="input3-group3" type="text" name="input3-group3" placeholder="..">
 
+                            <div class="input-group-append">
 
+                              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
 
+                                <span class="caret"></span>
 
+                              </button>
 
+                              <div class="dropdown-menu dropdown-menu-right">
 
+                                <a class="dropdown-item" href="#">Action</a>
 
+                                <a class="dropdown-item" href="#">Another action</a>
 
+                                <a class="dropdown-item" href="#">Something else here</a>
 
+                                <div class="dropdown-divider" role="separator"></div>
 
+                                <a class="dropdown-item" href="#">Separated link</a>
 
+                              </div>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-success" type="submit">
 
+                      <i class="fa fa-dot-circle-o"></i> Submit</button>
 
+                    <button class="btn btn-sm btn-danger" type="reset">
 
+                      <i class="fa fa-ban"></i> Reset</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Use the grid for big devices!
 
+                    <small>
 
+                      <code>.col-lg-*</code>
 
+                      <code>.col-md-*</code>
 
+                      <code>.col-sm-*</code>
 
+                    </small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <div class="col-md-8">
 
+                          <input class="form-control" type="text" placeholder=".col-md-8">
 
+                        </div>
 
+                        <div class="col-md-4">
 
+                          <input class="form-control" type="text" placeholder=".col-md-4">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-7">
 
+                          <input class="form-control" type="text" placeholder=".col-md-7">
 
+                        </div>
 
+                        <div class="col-md-5">
 
+                          <input class="form-control" type="text" placeholder=".col-md-5">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-6">
 
+                          <input class="form-control" type="text" placeholder=".col-md-6">
 
+                        </div>
 
+                        <div class="col-md-6">
 
+                          <input class="form-control" type="text" placeholder=".col-md-6">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-5">
 
+                          <input class="form-control" type="text" placeholder=".col-md-5">
 
+                        </div>
 
+                        <div class="col-md-7">
 
+                          <input class="form-control" type="text" placeholder=".col-md-7">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-md-4">
 
+                          <input class="form-control" type="text" placeholder=".col-md-4">
 
+                        </div>
 
+                        <div class="col-md-8">
 
+                          <input class="form-control" type="text" placeholder=".col-md-8">
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">Action</button>
 
+                    <button class="btn btn-sm btn-danger" type="button">Action</button>
 
+                    <button class="btn btn-sm btn-warning" type="button">Action</button>
 
+                    <button class="btn btn-sm btn-info" type="button">Action</button>
 
+                    <button class="btn btn-sm btn-success" type="button">Action</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Input Grid for small devices!
 
+                    <small>
 
+                      <code>.col-*</code>
 
+                    </small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal" action="" method="post">
 
+                      <div class="form-group row">
 
+                        <div class="col-4">
 
+                          <input class="form-control" type="text" placeholder=".col-4">
 
+                        </div>
 
+                        <div class="col-8">
 
+                          <input class="form-control" type="text" placeholder=".col-8">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-5">
 
+                          <input class="form-control" type="text" placeholder=".col-5">
 
+                        </div>
 
+                        <div class="col-7">
 
+                          <input class="form-control" type="text" placeholder=".col-7">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-6">
 
+                          <input class="form-control" type="text" placeholder=".col-6">
 
+                        </div>
 
+                        <div class="col-6">
 
+                          <input class="form-control" type="text" placeholder=".col-6">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-7">
 
+                          <input class="form-control" type="text" placeholder=".col-5">
 
+                        </div>
 
+                        <div class="col-5">
 
+                          <input class="form-control" type="text" placeholder=".col-5">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group row">
 
+                        <div class="col-8">
 
+                          <input class="form-control" type="text" placeholder=".col-8">
 
+                        </div>
 
+                        <div class="col-4">
 
+                          <input class="form-control" type="text" placeholder=".col-4">
 
+                        </div>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-sm btn-primary" type="submit">Action</button>
 
+                    <button class="btn btn-sm btn-danger" type="button">Action</button>
 
+                    <button class="btn btn-sm btn-warning" type="button">Action</button>
 
+                    <button class="btn btn-sm btn-info" type="button">Action</button>
 
+                    <button class="btn btn-sm btn-success" type="button">Action</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-sm-4">
 
+                <div class="card">
 
+                  <div class="card-header">Example Form</div>
 
+                  <div class="card-body">
 
+                    <form action="" method="post">
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <div class="input-group-prepend">
 
+                            <span class="input-group-text">Username</span>
 
+                          </div>
 
+                          <input class="form-control" id="username3" type="text" name="username3">
 
+                          <div class="input-group-append">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-user"></i>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <div class="input-group-prepend">
 
+                            <span class="input-group-text">Email</span>
 
+                          </div>
 
+                          <input class="form-control" id="email3" type="email" name="email3">
 
+                          <div class="input-group-append">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-envelope"></i>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <div class="input-group-prepend">
 
+                            <span class="input-group-text">Password</span>
 
+                          </div>
 
+                          <input class="form-control" id="password3" type="password" name="password3">
 
+                          <div class="input-group-append">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-asterisk"></i>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group form-actions">
 
+                        <button class="btn btn-sm btn-primary" type="submit">Submit</button>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-4">
 
+                <div class="card">
 
+                  <div class="card-header">Example Form</div>
 
+                  <div class="card-body">
 
+                    <form action="" method="post">
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <input class="form-control" id="username2" type="text" name="username2" placeholder="Username">
 
+                          <div class="input-group-append">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-user"></i>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <input class="form-control" id="email2" type="email" name="email2" placeholder="Email">
 
+                          <div class="input-group-append">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-envelope"></i>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <input class="form-control" id="password2" type="password" name="password2" placeholder="Password">
 
+                          <div class="input-group-append">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-asterisk"></i>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group form-actions">
 
+                        <button class="btn btn-sm btn-secondary" type="submit">Submit</button>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-4">
 
+                <div class="card">
 
+                  <div class="card-header">Example Form</div>
 
+                  <div class="card-body">
 
+                    <form action="" method="post">
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <div class="input-group-prepend">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-user"></i>
 
+                            </span>
 
+                          </div>
 
+                          <input class="form-control" id="username" type="text" name="username" placeholder="Username">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <div class="input-group-prepend">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-envelope"></i>
 
+                            </span>
 
+                          </div>
 
+                          <input class="form-control" id="email" type="email" name="email" placeholder="Email">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <div class="input-group">
 
+                          <div class="input-group-prepend">
 
+                            <span class="input-group-text">
 
+                              <i class="fa fa-asterisk"></i>
 
+                            </span>
 
+                          </div>
 
+                          <input class="form-control" id="password" type="password" name="password" placeholder="Password">
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group form-actions">
 
+                        <button class="btn btn-sm btn-success" type="submit">Submit</button>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-lg-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-edit"></i>Form Elements</div>
 
+                  <div class="card-body">
 
+                    <form class="form-horizontal">
 
+                      <div class="form-group">
 
+                        <label class="col-form-label" for="prependedInput">Prepended text</label>
 
+                        <div class="controls">
 
+                          <div class="input-prepend input-group">
 
+                            <div class="input-group-prepend">
 
+                              <span class="input-group-text">@</span>
 
+                            </div>
 
+                            <input class="form-control" id="prependedInput" size="16" type="text">
 
+                          </div>
 
+                          <p class="help-block">Here's some help text</p>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <label class="col-form-label" for="appendedInput">Appended text</label>
 
+                        <div class="controls">
 
+                          <div class="input-group">
 
+                            <input class="form-control" id="appendedInput" size="16" type="text">
 
+                            <div class="input-group-append">
 
+                              <span class="input-group-text">.00</span>
 
+                            </div>
 
+                          </div>
 
+                          <span class="help-block">Here's more help text</span>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <label class="col-form-label" for="appendedPrependedInput">Append and prepend</label>
 
+                        <div class="controls">
 
+                          <div class="input-prepend input-group">
 
+                            <div class="input-group-prepend">
 
+                              <span class="input-group-text">$</span>
 
+                            </div>
 
+                            <input class="form-control" id="appendedPrependedInput" size="16" type="text">
 
+                            <div class="input-group-append">
 
+                              <span class="input-group-text">.00</span>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <label class="col-form-label" for="appendedInputButton">Append with button</label>
 
+                        <div class="controls">
 
+                          <div class="input-group">
 
+                            <input class="form-control" id="appendedInputButton" size="16" type="text">
 
+                            <span class="input-group-append">
 
+                              <button class="btn btn-secondary" type="button">Go!</button>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-group">
 
+                        <label class="col-form-label" for="appendedInputButtons">Two-button append</label>
 
+                        <div class="controls">
 
+                          <div class="input-group">
 
+                            <input class="form-control" id="appendedInputButtons" size="16" type="text">
 
+                            <span class="input-group-append">
 
+                              <button class="btn btn-secondary" type="button">Search</button>
 
+                              <button class="btn btn-secondary" type="button">Options</button>
 
+                            </span>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="form-actions">
 
+                        <button class="btn btn-primary" type="submit">Save changes</button>
 
+                        <button class="btn btn-secondary" type="button">Cancel</button>
 
+                      </div>
 
+                    </form>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 712 - 0
static/base/jumbotron.html
View File 

@@ -0,0 +1,712 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Jumbotron
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-jumbotron/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="jumbotron">
 
+                      <h1 class="display-3">Hello, world!</h1>
 
+                      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
 
+                      <hr class="my-4">
 
+                      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
 
+                      <p class="lead">
 
+                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
 
+                      </p>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Jumbotron
 
+                    <small>fluid</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="jumbotron jumbotron-fluid">
 
+                      <div class="container">
 
+                        <h1 class="display-3">Fluid jumbotron</h1>
 
+                        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 907 - 0
static/base/list-group.html
View File 

@@ -0,0 +1,907 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-list-group/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="list-group">
 
+                      <li class="list-group-item">Cras justo odio</li>
 
+                      <li class="list-group-item">Dapibus ac facilisis in</li>
 
+                      <li class="list-group-item">Morbi leo risus</li>
 
+                      <li class="list-group-item">Porta ac consectetur ac</li>
 
+                      <li class="list-group-item">Vestibulum at eros</li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>active items</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="list-group">
 
+                      <li class="list-group-item active">Cras justo odio</li>
 
+                      <li class="list-group-item">Dapibus ac facilisis in</li>
 
+                      <li class="list-group-item">Morbi leo risus</li>
 
+                      <li class="list-group-item">Porta ac consectetur ac</li>
 
+                      <li class="list-group-item">Vestibulum at eros</li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>links with disabled items</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="list-group">
 
+                      <a class="list-group-item active" href="#">Cras justo odio</a>
 
+                      <a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
 
+                      <a class="list-group-item list-group-item-action" href="#">Morbi leo risus</a>
 
+                      <a class="list-group-item list-group-item-action" href="#">Porta ac consectetur ac</a>
 
+                      <a class="list-group-item list-group-item-action disabled" href="#">Vestibulum at eros</a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>buttons with disabled items</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="list-group">
 
+                      <button class="list-group-item list-group-item-action active" type="button">Cras justo odio</button>
 
+                      <button class="list-group-item list-group-item-action" type="button">Dapibus ac facilisis in</button>
 
+                      <button class="list-group-item list-group-item-action" type="button">Morbi leo risus</button>
 
+                      <button class="list-group-item list-group-item-action" type="button">Porta ac consectetur ac</button>
 
+                      <button class="list-group-item list-group-item-action" type="button" disabled="">Vestibulum at eros</button>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>contextual classes</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="list-group">
 
+                      <li class="list-group-item">Dapibus ac facilisis in</li>
 
+                      <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
 
+                      <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
 
+                      <li class="list-group-item list-group-item-success">This is a success list group item</li>
 
+                      <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
 
+                      <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
 
+                      <li class="list-group-item list-group-item-info">This is a info list group item</li>
 
+                      <li class="list-group-item list-group-item-light">This is a light list group item</li>
 
+                      <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>contextual with
 
+                      <code>.action</code>
 
+                    </small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="list-group">
 
+                      <a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-primary" href="#">
 
+                        This is a primary list group item</a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-secondary" href="#">
 
+                        This is a secondary list group item</a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-success" href="#">
 
+                        This is a success list group item</a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-danger" href="#">
 
+                        This is a danger list group item</a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-warning" href="#">
 
+                        This is a warning list group item</a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-info" href="#">
 
+                        This is a info list group item
 
+                      </a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-light" href="#">
 
+                        This is a light list group item
 
+                      </a>
 
+                      <a class="list-group-item list-group-item-action list-group-item-dark" href="#">
 
+                        This is a dark list group item
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>with badges</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="list-group">
 
+                      <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">Cras justo odio
 
+                        <span class="badge badge-primary badge-pill">14</span>
 
+                      </li>
 
+                      <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">Dapibus ac facilisis in
 
+                        <span class="badge badge-primary badge-pill">2</span>
 
+                      </li>
 
+                      <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">Morbi leo risus
 
+                        <span class="badge badge-primary badge-pill">1</span>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>custom content</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="list-group">
 
+                      <a class="list-group-item list-group-item-action flex-column align-items-start active" href="#">
 
+                        <div class="d-flex w-100 justify-content-between">
 
+                          <h5 class="mb-1">List group item heading</h5>
 
+                          <small>3 days ago</small>
 
+                        </div>
 
+                        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
 
+                        <small>Donec id elit non mi porta.</small>
 
+                      </a>
 
+                      <a class="list-group-item list-group-item-action flex-column align-items-start" href="#">
 
+                        <div class="d-flex w-100 justify-content-between">
 
+                          <h5 class="mb-1">List group item heading</h5>
 
+                          <small class="text-muted">3 days ago</small>
 
+                        </div>
 
+                        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
 
+                        <small class="text-muted">Donec id elit non mi porta.</small>
 
+                      </a>
 
+                      <a class="list-group-item list-group-item-action flex-column align-items-start" href="#">
 
+                        <div class="d-flex w-100 justify-content-between">
 
+                          <h5 class="mb-1">List group item heading</h5>
 
+                          <small class="text-muted">3 days ago</small>
 
+                        </div>
 
+                        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
 
+                        <small class="text-muted">Donec id elit non mi porta.</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> List group
 
+                    <small>tab Javascript plugin</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="row">
 
+                      <div class="col-4">
 
+                        <div class="list-group" id="list-tab" role="tablist">
 
+                          <a class="list-group-item list-group-item-action" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home" aria-selected="false">Home</a>
 
+                          <a class="list-group-item list-group-item-action active" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile" aria-selected="true">Profile</a>
 
+                          <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
 
+                          <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
 
+                        </div>
 
+                      </div>
 
+                      <div class="col-8">
 
+                        <div class="tab-content" id="nav-tabContent">
 
+                          <div class="tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
 
+                            <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
 
+                              tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
 
+                          </div>
 
+                          <div class="tab-pane fade active show" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
 
+                            <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
 
+                              anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
 
+                          </div>
 
+                          <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
 
+                            <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
 
+                              est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
 
+                              laborum elit adipisicing pariatur cillum.</p>
 
+                          </div>
 
+                          <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
 
+                            <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
 
+                              aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
 
+                              eiusmod eu pariatur culpa mollit in irure.</p>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1029 - 0
static/base/navs.html
View File 

@@ -0,0 +1,1029 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-navs/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                    <hr>
 
+                    <nav class="nav">
 
+                      <a class="nav-link active" href="#">Active</a>
 
+                      <a class="nav-link" href="#">Link</a>
 
+                      <a class="nav-link" href="#">Link</a>
 
+                      <a class="nav-link disabled" href="#">Disabled</a>
 
+                    </nav>
 
+                    <hr>
 
+                    <ul class="nav justify-content-center">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                    <hr>
 
+                    <ul class="nav justify-content-end">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-3">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>vertical</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <nav class="nav flex-column">
 
+                      <a class="nav-link active" href="#">Active</a>
 
+                      <a class="nav-link" href="#">Link</a>
 
+                      <a class="nav-link" href="#">Link</a>
 
+                      <a class="nav-link disabled" href="#">Disabled</a>
 
+                    </nav>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-3">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>vertical</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav flex-column">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>tabs</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav nav-tabs">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-12 col-xl-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>pills</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav nav-pills">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>fill and justify</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav nav-pills nav-fill">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Longer nav link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                    <hr>
 
+                    <nav class="nav nav-pills nav-fill">
 
+                      <a class="nav-item nav-link active" href="#">Active</a>
 
+                      <a class="nav-item nav-link" href="#">Link</a>
 
+                      <a class="nav-item nav-link" href="#">Link</a>
 
+                      <a class="nav-item nav-link disabled" href="#">Disabled</a>
 
+                    </nav>
 
+                    <hr>
 
+                    <nav class="nav nav-pills nav-justified">
 
+                      <a class="nav-link active" href="#">Active</a>
 
+                      <a class="nav-link" href="#">Longer nav link</a>
 
+                      <a class="nav-link" href="#">Link</a>
 
+                      <a class="nav-link disabled" href="#">Disabled</a>
 
+                    </nav>
 
+                    <hr>
 
+                    <nav class="nav nav-pills nav-justified">
 
+                      <a class="nav-item nav-link active" href="#">Active</a>
 
+                      <a class="nav-item nav-link" href="#">Link</a>
 
+                      <a class="nav-item nav-link" href="#">Link</a>
 
+                      <a class="nav-item nav-link disabled" href="#">Disabled</a>
 
+                    </nav>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>with flex</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <nav class="nav nav-pills flex-column flex-sm-row">
 
+                      <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
 
+                      <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
 
+                      <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
 
+                      <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
 
+                    </nav>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>tabs with dropdowns</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav nav-tabs">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item dropdown">
 
+                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>pills with dropdowns</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav nav-pills">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#">Active</a>
 
+                      </li>
 
+                      <li class="nav-item dropdown">
 
+                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#">Link</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link disabled" href="#">Disabled</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Navs
 
+                    <small>with tab JavaScript plugin</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <ul class="nav nav-tabs" id="myTab1" role="tablist">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
 
+                      </li>
 
+                    </ul>
 
+                    <div class="tab-content" id="myTab1Content">
 
+                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
 
+                        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater
 
+                        eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
 
+                      </div>
 
+                      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
 
+                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
 
+                        enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny
 
+                        pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
 
+                      </div>
 
+                      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
 
+                        Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
 
+                        hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't
 
+                        heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="row">
 
+                      <div class="col">
 
+                        <ul class="nav nav-pills mb-1" id="pills-tab" role="tablist">
 
+                          <li class="nav-item">
 
+                            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
 
+                          </li>
 
+                          <li class="nav-item">
 
+                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
 
+                          </li>
 
+                          <li class="nav-item">
 
+                            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
 
+                          </li>
 
+                        </ul>
 
+                        <div class="tab-content" id="pills-tabContent">
 
+                          <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
 
+                            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater
 
+                            eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
 
+                          </div>
 
+                          <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
 
+                            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
 
+                            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan
 
+                            fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
 
+                          </div>
 
+                          <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
 
+                            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
 
+                            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
 
+                            haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 900 - 0
static/base/pagination.html
View File 

@@ -0,0 +1,900 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Pagination
 
+                <div class="card-header-actions">
 
+                  <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-pagination/" target="_blank">
 
+                    <small class="text-muted">docs</small>
 
+                  </a>
 
+                </div>
 
+              </div>
 
+              <div class="card-body">
 
+                <nav aria-label="Page navigation example">
 
+                  <ul class="pagination">
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Pagination
 
+                <small>with icons</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <nav aria-label="Page navigation example">
 
+                  <ul class="pagination">
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#" aria-label="Previous">
 
+                        <span aria-hidden="true">«</span>
 
+                        <span class="sr-only">Previous</span>
 
+                      </a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#" aria-label="Next">
 
+                        <span aria-hidden="true">»</span>
 
+                        <span class="sr-only">Next</span>
 
+                      </a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Pagination
 
+                <small>disabled and active</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <nav aria-label="...">
 
+                  <ul class="pagination">
 
+                    <li class="page-item disabled">
 
+                      <a class="page-link" href="#" tabindex="-1">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item active">
 
+                      <a class="page-link" href="#">2
 
+                        <span class="sr-only">(current)</span>
 
+                      </a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+                <hr>
 
+                <nav aria-label="...">
 
+                  <ul class="pagination">
 
+                    <li class="page-item disabled">
 
+                      <span class="page-link">Previous</span>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item active">
 
+                      <span class="page-link">2
 
+                        <span class="sr-only">(current)</span>
 
+                      </span>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Pagination
 
+                <small>sizing</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <nav aria-label="...">
 
+                  <ul class="pagination pagination-lg">
 
+                    <li class="page-item disabled">
 
+                      <a class="page-link" href="#" tabindex="-1">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+                <hr>
 
+                <nav aria-label="...">
 
+                  <ul class="pagination pagination-sm">
 
+                    <li class="page-item disabled">
 
+                      <a class="page-link" href="#" tabindex="-1">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Pagination
 
+                <small>alignment</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <nav aria-label="Page navigation example">
 
+                  <ul class="pagination justify-content-start">
 
+                    <li class="page-item disabled">
 
+                      <a class="page-link" href="#" tabindex="-1">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+                <hr>
 
+                <nav aria-label="Page navigation example">
 
+                  <ul class="pagination justify-content-center">
 
+                    <li class="page-item disabled">
 
+                      <a class="page-link" href="#" tabindex="-1">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+                <hr>
 
+                <nav aria-label="Page navigation example">
 
+                  <ul class="pagination justify-content-end">
 
+                    <li class="page-item disabled">
 
+                      <a class="page-link" href="#" tabindex="-1">Previous</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">1</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">2</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">3</a>
 
+                    </li>
 
+                    <li class="page-item">
 
+                      <a class="page-link" href="#">Next</a>
 
+                    </li>
 
+                  </ul>
 
+                </nav>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 702 - 0
static/base/popovers.html
View File 

@@ -0,0 +1,702 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Popovers
 
+                <div class="card-header-actions">
 
+                  <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-popover/popovers.html" target="_blank">
 
+                    <small class="text-muted">docs</small>
 
+                  </a>
 
+                </div>
 
+              </div>
 
+              <div class="card-body">
 
+                <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 
+                <hr>
 
+                <a class="btn btn-lg btn-danger" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">
 
+                  Dismissible popover
 
+                </a>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-align-justify"></i> Popovers
 
+                <small>directions</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
 
+                <button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
 
+                <button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
 
+                <button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+    <!-- Plugins and scripts required by this view-->
 
+    <script src="js/popovers.js"></script>
 
+  </body>
 
+</html>

+ 786 - 0
static/base/progress.html
View File 

@@ -0,0 +1,786 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <div class="card-header-actions">
 
+                  <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-popover/popovers.html" target="_blank">
 
+                    <small class="text-muted">docs</small>
 
+                  </a>
 
+                </div>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <small>labels</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
 
+                </div>
 
+                <div class="progress">
 
+                  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <small>height</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress mb-3" style="height: 3px;">
 
+                  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress" style="height: 30px;">
 
+                  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <small>backgrounds</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress">
 
+                  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <small>multiple bars</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress">
 
+                  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
 
+                  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
 
+                  <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <small>striped</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+                <div class="progress mb-3">
 
+                  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Progress
 
+                <small>animated</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="progress">
 
+                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 770 - 0
static/base/scrollspy.html
View File 

@@ -0,0 +1,770 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">Scrollspy
 
+                <div class="card-header-actions">
 
+                  <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-scrollspy/" target="_blank">
 
+                    <small class="text-muted">docs</small>
 
+                  </a>
 
+                </div>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="scrollspy-example1">
 
+                  <nav class="navbar navbar-light bg-light" id="navbar-example1" style="padding: .5rem 1rem;">
 
+                    <a class="navbar-brand" href="#">Navbar</a>
 
+                    <ul class="nav nav-pills" role="tablist">
 
+                      <li class="nav-item">
 
+                        <a class="nav-link active" href="#fat">@fat</a>
 
+                      </li>
 
+                      <li class="nav-item">
 
+                        <a class="nav-link" href="#mdo">@mdo</a>
 
+                      </li>
 
+                      <li class="nav-item dropdown">
 
+                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#one" target="_top">one</a>
 
+                          <a class="dropdown-item" href="#two" target="_top">two</a>
 
+                          <div class="dropdown-divider" role="separator"></div>
 
+                          <a class="dropdown-item" href="#three" target="_top">three</a>
 
+                        </div>
 
+                      </li>
 
+                    </ul>
 
+                  </nav>
 
+                  <div id="spy-example1" data-spy="scroll" data-target="#navbar-example1" data-offset="65" style="position: relative; height: 200px; overflow: auto; margin-top: .5rem; overflow-y: scroll;">
 
+                    <h4 id="fat">@fat</h4>
 
+                    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
 
+                      Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
 
+                      consequat.</p>
 
+                    <h4 id="mdo">@mdo</h4>
 
+                    <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non
 
+                      freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
 
+                    <h4 id="one">one</h4>
 
+                    <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis
 
+                      aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
 
+                    <h4 id="two">two</h4>
 
+                    <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat
 
+                      terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea
 
+                      portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
 
+                    <h4 id="three">three</h4>
 
+                    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.
 
+                      Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
 
+                      consequat.</p>
 
+                    <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip.
 
+                      Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
 
+                      minim commodo ullamco thundercats.</p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">Scrollspy
 
+                <small>with list-group</small>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="row bd-example2">
 
+                  <div class="col-4">
 
+                    <div class="list-group" id="list-example">
 
+                      <a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
 
+                      <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
 
+                      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
 
+                      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="col-8">
 
+                    <div id="spy-example2" data-spy="scroll" data-target="#list-example" data-offset="0" style="height: 200px; overflow: auto">
 
+                      <h4 id="list-item-1">Item 1</h4>
 
+                      <p>
 
+                        Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident.
 
+                        Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non
 
+                        fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
 
+                      </p>
 
+                      <h4 id="list-item-2">Item 2</h4>
 
+                      <p>
 
+                        Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt
 
+                        veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat
 
+                        ex est consectetur ipsum commodo tempor sunt in proident.
 
+                      </p>
 
+                      <h4 id="list-item-3">Item 3</h4>
 
+                      <p>
 
+                        Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa
 
+                        irure ullamco est ex ullamco excepteur.
 
+                      </p>
 
+                      <h4 id="list-item-4">Item 4</h4>
 
+                      <p>
 
+                        Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa
 
+                        irure ullamco est ex ullamco excepteur.
 
+                      </p>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1343 - 0
static/base/switches.html
View File 

@@ -0,0 +1,1343 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-md-12">
 
+                <div class="card">
 
+                  <div class="card-header">3d Switch</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-3d switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="" disabled="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-3d switch-primary">
 
+                      <input class="switch-input" type="checkbox" disabled>
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch default</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch default - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-pill switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch outline</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-outline-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch outline - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-pill switch-outline-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch outline alternative</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-outline-primary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-secondary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-success-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-warning-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-info-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-outline-danger-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch outline alternative - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-pill switch-outline-primary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-secondary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-success-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-warning-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-info-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                    <label class="switch switch-pill switch-outline-danger-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with text</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with text - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-pill switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with text outline</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-outline-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with text outline - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-pill switch-outline-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with text outline alternative</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-outline-primary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-secondary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-success-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-warning-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-info-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-danger-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with text outline alternative - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-pill switch-outline-primary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-secondary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-success-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-warning-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-info-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-danger-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with icon</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with icon - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-pill switch-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with icon outline</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-outline-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with icon outline - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-pill switch-outline-primary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-secondary">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-success">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-warning">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-info">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-danger">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with icon outline alternative</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-outline-primary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-secondary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-success-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-warning-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-info-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-outline-danger-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Switch with icon outline alternative - pills</div>
 
+                  <div class="card-body">
 
+                    <label class="switch switch-label switch-pill switch-outline-primary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-secondary-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-success-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-warning-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-info-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                    <label class="switch switch-label switch-pill switch-outline-danger-alt">
 
+                      <input class="switch-input" type="checkbox" checked="">
 
+                      <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
 
+                    </label>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-12">
 
+                <div class="card">
 
+                  <div class="card-header">Sizes</div>
 
+                  <div class="card-body p-0">
 
+                    <table class="table table-hover table-striped table-align-middle mb-0">
 
+                      <thead>
 
+                        <tr>
 
+                          <th>Size</th>
 
+                          <th>Example</th>
 
+                          <th>CSS Class</th>
 
+                        </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                        <tr>
 
+                          <td>Large</td>
 
+                          <td>
 
+                            <label class="switch switch-lg switch-3d switch-primary">
 
+                              <input class="switch-input" type="checkbox" checked="">
 
+                              <span class="switch-slider"></span>
 
+                            </label>
 
+                          </td>
 
+                          <td>Add following class
 
+                            <code>.switch-lg</code>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Normal</td>
 
+                          <td>
 
+                            <label class="switch switch-3d switch-primary">
 
+                              <input class="switch-input" type="checkbox" checked="">
 
+                              <span class="switch-slider"></span>
 
+                            </label>
 
+                          </td>
 
+                          <td>-</td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Small</td>
 
+                          <td>
 
+                            <label class="switch switch-sm switch-3d switch-primary">
 
+                              <input class="switch-input" type="checkbox" checked="">
 
+                              <span class="switch-slider"></span>
 
+                            </label>
 
+                          </td>
 
+                          <td>Add following class
 
+                            <code>.switch-sm</code>
 
+                          </td>
 
+                        </tr>
 
+                      </tbody>
 
+                    </table>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1087 - 0
static/base/tables.html
View File 

@@ -0,0 +1,1087 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Simple Table</div>
 
+                  <div class="card-body">
 
+                    <table class="table table-responsive-sm">
 
+                      <thead>
 
+                        <tr>
 
+                          <th>Username</th>
 
+                          <th>Date registered</th>
 
+                          <th>Role</th>
 
+                          <th>Status</th>
 
+                        </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                        <tr>
 
+                          <td>Samppa Nori</td>
 
+                          <td>2012/01/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Estavan Lykos</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-danger">Banned</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Chetan Mohamed</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Admin</td>
 
+                          <td>
 
+                            <span class="badge badge-secondary">Inactive</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Derick Maximinus</td>
 
+                          <td>2012/03/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-warning">Pending</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Friderik Dávid</td>
 
+                          <td>2012/01/21</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                      </tbody>
 
+                    </table>
 
+                    <ul class="pagination">
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Prev</a>
 
+                      </li>
 
+                      <li class="page-item active">
 
+                        <a class="page-link" href="#">1</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">2</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">3</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">4</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Next</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Striped Table</div>
 
+                  <div class="card-body">
 
+                    <table class="table table-responsive-sm table-striped">
 
+                      <thead>
 
+                        <tr>
 
+                          <th>Username</th>
 
+                          <th>Date registered</th>
 
+                          <th>Role</th>
 
+                          <th>Status</th>
 
+                        </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                        <tr>
 
+                          <td>Yiorgos Avraamu</td>
 
+                          <td>2012/01/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Avram Tarasios</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-danger">Banned</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Quintin Ed</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Admin</td>
 
+                          <td>
 
+                            <span class="badge badge-secondary">Inactive</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Enéas Kwadwo</td>
 
+                          <td>2012/03/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-warning">Pending</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Agapetus Tadeáš</td>
 
+                          <td>2012/01/21</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                      </tbody>
 
+                    </table>
 
+                    <ul class="pagination">
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Prev</a>
 
+                      </li>
 
+                      <li class="page-item active">
 
+                        <a class="page-link" href="#">1</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">2</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">3</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">4</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Next</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Condensed Table</div>
 
+                  <div class="card-body">
 
+                    <table class="table table-responsive-sm table-sm">
 
+                      <thead>
 
+                        <tr>
 
+                          <th>Username</th>
 
+                          <th>Date registered</th>
 
+                          <th>Role</th>
 
+                          <th>Status</th>
 
+                        </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                        <tr>
 
+                          <td>Carwyn Fachtna</td>
 
+                          <td>2012/01/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Nehemiah Tatius</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-danger">Banned</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Ebbe Gemariah</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Admin</td>
 
+                          <td>
 
+                            <span class="badge badge-secondary">Inactive</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Eustorgios Amulius</td>
 
+                          <td>2012/03/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-warning">Pending</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Leopold Gáspár</td>
 
+                          <td>2012/01/21</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                      </tbody>
 
+                    </table>
 
+                    <ul class="pagination">
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Prev</a>
 
+                      </li>
 
+                      <li class="page-item active">
 
+                        <a class="page-link" href="#">1</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">2</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">3</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">4</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Next</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bordered Table</div>
 
+                  <div class="card-body">
 
+                    <table class="table table-responsive-sm table-bordered">
 
+                      <thead>
 
+                        <tr>
 
+                          <th>Username</th>
 
+                          <th>Date registered</th>
 
+                          <th>Role</th>
 
+                          <th>Status</th>
 
+                        </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                        <tr>
 
+                          <td>Pompeius René</td>
 
+                          <td>2012/01/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Paĉjo Jadon</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-danger">Banned</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Micheal Mercurius</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Admin</td>
 
+                          <td>
 
+                            <span class="badge badge-secondary">Inactive</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Ganesha Dubhghall</td>
 
+                          <td>2012/03/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-warning">Pending</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Hiroto Šimun</td>
 
+                          <td>2012/01/21</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                      </tbody>
 
+                    </table>
 
+                    <ul class="pagination">
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Prev</a>
 
+                      </li>
 
+                      <li class="page-item active">
 
+                        <a class="page-link" href="#">1</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">2</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">3</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">4</a>
 
+                      </li>
 
+                      <li class="page-item">
 
+                        <a class="page-link" href="#">Next</a>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-lg-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Combined All Table</div>
 
+                  <div class="card-body">
 
+                    <table class="table table-responsive-sm table-bordered table-striped table-sm">
 
+                      <thead>
 
+                        <tr>
 
+                          <th>Username</th>
 
+                          <th>Date registered</th>
 
+                          <th>Role</th>
 
+                          <th>Status</th>
 
+                        </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                        <tr>
 
+                          <td>Vishnu Serghei</td>
 
+                          <td>2012/01/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Zbyněk Phoibos</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-danger">Banned</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Einar Randall</td>
 
+                          <td>2012/02/01</td>
 
+                          <td>Admin</td>
 
+                          <td>
 
+                            <span class="badge badge-secondary">Inactive</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Félix Troels</td>
 
+                          <td>2012/03/01</td>
 
+                          <td>Member</td>
 
+                          <td>
 
+                            <span class="badge badge-warning">Pending</span>
 
+                          </td>
 
+                        </tr>
 
+                        <tr>
 
+                          <td>Aulus Agmundr</td>
 
+                          <td>2012/01/21</td>
 
+                          <td>Staff</td>
 
+                          <td>
 
+                            <span class="badge badge-success">Active</span>
 
+                          </td>
 
+                        </tr>
 
+                      </tbody>
 
+                    </table>
 
+                    <nav>
 
+                      <ul class="pagination">
 
+                        <li class="page-item">
 
+                          <a class="page-link" href="#">Prev</a>
 
+                        </li>
 
+                        <li class="page-item active">
 
+                          <a class="page-link" href="#">1</a>
 
+                        </li>
 
+                        <li class="page-item">
 
+                          <a class="page-link" href="#">2</a>
 
+                        </li>
 
+                        <li class="page-item">
 
+                          <a class="page-link" href="#">3</a>
 
+                        </li>
 
+                        <li class="page-item">
 
+                          <a class="page-link" href="#">4</a>
 
+                        </li>
 
+                        <li class="page-item">
 
+                          <a class="page-link" href="#">Next</a>
 
+                        </li>
 
+                      </ul>
 
+                    </nav>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 778 - 0
static/base/tabs.html
View File 

@@ -0,0 +1,778 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-md-6 mb-4">
 
+                <ul class="nav nav-tabs" role="tablist">
 
+                  <li class="nav-item">
 
+                    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
 
+                  </li>
 
+                </ul>
 
+                <div class="tab-content">
 
+                  <div class="tab-pane active" id="home" role="tabpanel">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="profile" role="tabpanel">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="messages" role="tabpanel">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6 mb-4">
 
+                <ul class="nav nav-tabs" role="tablist">
 
+                  <li class="nav-item">
 
+                    <a class="nav-link active" data-toggle="tab" href="#home2" role="tab" aria-controls="home">
 
+                      <i class="icon-calculator"></i>
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#profile2" role="tab" aria-controls="profile">
 
+                      <i class="icon-basket-loaded"></i>
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#messages2" role="tab" aria-controls="messages">
 
+                      <i class="icon-pie-chart"></i>
 
+                    </a>
 
+                  </li>
 
+                </ul>
 
+                <div class="tab-content">
 
+                  <div class="tab-pane active" id="home2" role="tabpanel">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="profile2" role="tabpanel">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="messages2" role="tabpanel">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6 mb-4">
 
+                <ul class="nav nav-tabs" role="tablist">
 
+                  <li class="nav-item">
 
+                    <a class="nav-link active" data-toggle="tab" href="#home3" role="tab" aria-controls="home">
 
+                      <i class="icon-calculator"></i> Calculator</a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile">
 
+                      <i class="icon-basket-loaded"></i> Shoping cart</a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#messages3" role="tab" aria-controls="messages">
 
+                      <i class="icon-pie-chart"></i> Charts</a>
 
+                  </li>
 
+                </ul>
 
+                <div class="tab-content">
 
+                  <div class="tab-pane active" id="home3" role="tabpanel">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="profile3" role="tabpanel">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="messages3" role="tabpanel">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6 mb-4">
 
+                <ul class="nav nav-tabs" role="tablist">
 
+                  <li class="nav-item">
 
+                    <a class="nav-link active" data-toggle="tab" href="#home4" role="tab" aria-controls="home">
 
+                      <i class="icon-calculator"></i> Calculator
 
+                      <span class="badge badge-success">New</span>
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#profile4" role="tab" aria-controls="profile">
 
+                      <i class="icon-basket-loaded"></i> Shoping cart
 
+                      <span class="badge badge-pill badge-danger">29</span>
 
+                    </a>
 
+                  </li>
 
+                  <li class="nav-item">
 
+                    <a class="nav-link" data-toggle="tab" href="#messages4" role="tab" aria-controls="messages">
 
+                      <i class="icon-pie-chart"></i> Charts</a>
 
+                  </li>
 
+                </ul>
 
+                <div class="tab-content">
 
+                  <div class="tab-pane active" id="home4" role="tabpanel">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="profile4" role="tabpanel">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                  <div class="tab-pane" id="messages4" role="tabpanel">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 701 - 0
static/base/tooltips.html
View File 

@@ -0,0 +1,701 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">Tooltips
 
+                <div class="card-header-actions">
 
+                  <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-tooltips/" target="_blank">
 
+                    <small class="text-muted">docs</small>
 
+                  </a>
 
+                </div>
 
+              </div>
 
+              <div class="card-body">
 
+                <p class="text-muted">Hover over the links below to see tooltips:</p>
 
+                <div class="bd-example tooltip-demo">
 
+                  <p class="muted">Tight pants next level keffiyeh
 
+                    <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
 
+                    <a href="#" data-toggle="tooltip" title=""
 
+                      data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan
 
+                    <a href="#" data-toggle="tooltip"
 
+                      title="" data-original-title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin
 
+                    <a href="#" data-toggle="tooltip" title="" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
 
+                </div>
 
+              </div>
 
+              <div class="card-footer">
 
+                <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
 
+                <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 
+                <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
 
+                <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
 
+                <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-html="true" title="" data-original-title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">Tooltip with HTML</button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+    <!-- Plugins and scripts required by this view-->
 
+    <script src="js/tooltips.js"></script>
 
+  </body>
 
+</html>

+ 1523 - 0
static/buttons/brand-buttons.html
View File 

@@ -0,0 +1,1523 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Brand Buttons</strong>
 
+                    <small>Usage ex.</small>
 
+                    <code style="text-transform:lowercase">
 
+                      <button class="btn btn-brand btn-facebook">
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                    </code>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <h6>Size Small
 
+                      <small>Add this class
 
+                        <code>.btn-sm</code>
 
+                      </small>
 
+                    </h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-sm btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-facebook"></i>
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-twitter"></i>
 
+                        <span>Twitter</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-linkedin"></i>
 
+                        <span>LinkedIn</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-flickr"></i>
 
+                        <span>Flickr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-tumblr"></i>
 
+                        <span>Tumblr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-xing"></i>
 
+                        <span>Xing</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-github" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-github"></i>
 
+                        <span>Github</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-html5"></i>
 
+                        <span>HTML5</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-openid"></i>
 
+                        <span>OpenID</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-stack-overflow"></i>
 
+                        <span>StackOverflow</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-css3"></i>
 
+                        <span>CSS3</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-youtube"></i>
 
+                        <span>YouTube</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dribbble"></i>
 
+                        <span>Dribbble</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-google-plus"></i>
 
+                        <span>Google+</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-instagram"></i>
 
+                        <span>Instagram</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-pinterest"></i>
 
+                        <span>Pinterest</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vk"></i>
 
+                        <span>VK</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-yahoo"></i>
 
+                        <span>Yahoo</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-behance"></i>
 
+                        <span>Behance</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dropbox"></i>
 
+                        <span>Dropbox</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-reddit"></i>
 
+                        <span>Reddit</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-spotify"></i>
 
+                        <span>Spotify</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vine"></i>
 
+                        <span>Vine</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-foursquare"></i>
 
+                        <span>Forsquare</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vimeo"></i>
 
+                        <span>Vimeo</span>
 
+                      </button>
 
+                    </p>
 
+                    <h6>Size Normal</h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-facebook"></i>
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-twitter"></i>
 
+                        <span>Twitter</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-linkedin"></i>
 
+                        <span>LinkedIn</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-flickr"></i>
 
+                        <span>Flickr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-tumblr"></i>
 
+                        <span>Tumblr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-xing"></i>
 
+                        <span>Xing</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-github" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-github"></i>
 
+                        <span>Github</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-html5"></i>
 
+                        <span>HTML5</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-openid"></i>
 
+                        <span>OpenID</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-stack-overflow"></i>
 
+                        <span>StackOverflow</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-css3"></i>
 
+                        <span>CSS3</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-youtube"></i>
 
+                        <span>YouTube</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dribbble"></i>
 
+                        <span>Dribbble</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-google-plus"></i>
 
+                        <span>Google+</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-instagram"></i>
 
+                        <span>Instagram</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-pinterest"></i>
 
+                        <span>Pinterest</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vk"></i>
 
+                        <span>VK</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-yahoo"></i>
 
+                        <span>Yahoo</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-behance"></i>
 
+                        <span>Behance</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dropbox"></i>
 
+                        <span>Dropbox</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-reddit"></i>
 
+                        <span>Reddit</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-spotify"></i>
 
+                        <span>Spotify</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vine"></i>
 
+                        <span>Vine</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-foursquare"></i>
 
+                        <span>Forsquare</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vimeo"></i>
 
+                        <span>Vimeo</span>
 
+                      </button>
 
+                    </p>
 
+                    <h6>Size Large
 
+                      <small>Add this class
 
+                        <code>.btn-lg</code>
 
+                      </small>
 
+                    </h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-lg btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-facebook"></i>
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-twitter"></i>
 
+                        <span>Twitter</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-linkedin"></i>
 
+                        <span>LinkedIn</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-flickr"></i>
 
+                        <span>Flickr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-tumblr"></i>
 
+                        <span>Tumblr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-xing"></i>
 
+                        <span>Xing</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-github" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-github"></i>
 
+                        <span>Github</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-html5"></i>
 
+                        <span>HTML5</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-openid"></i>
 
+                        <span>OpenID</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-stack-overflow"></i>
 
+                        <span>StackOverflow</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-css3"></i>
 
+                        <span>CSS3</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-youtube"></i>
 
+                        <span>YouTube</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dribbble"></i>
 
+                        <span>Dribbble</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-google-plus"></i>
 
+                        <span>Google+</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-instagram"></i>
 
+                        <span>Instagram</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-pinterest"></i>
 
+                        <span>Pinterest</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vk"></i>
 
+                        <span>VK</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-yahoo"></i>
 
+                        <span>Yahoo</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-behance"></i>
 
+                        <span>Behance</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dropbox"></i>
 
+                        <span>Dropbox</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-reddit"></i>
 
+                        <span>Reddit</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-spotify"></i>
 
+                        <span>Spotify</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vine"></i>
 
+                        <span>Vine</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-foursquare"></i>
 
+                        <span>Forsquare</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vimeo"></i>
 
+                        <span>Vimeo</span>
 
+                      </button>
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Brand Buttons</strong>
 
+                    <small>Only icons. Usage ex.</small>
 
+                    <code style="text-transform:lowercase">
 
+                      <button class="btn btn-brand btn-facebook">
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                    </code>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <h6>Size Small
 
+                      <small>Add this class
 
+                        <code>.btn-sm</code>
 
+                      </small>
 
+                    </h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-sm btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-facebook"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-twitter"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-linkedin"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-flickr"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-tumblr"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-xing"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-github" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-github"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-html5"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-openid"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-stack-overflow"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-css3"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-youtube"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dribbble"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-google-plus"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-instagram"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-pinterest"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vk"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-yahoo"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-behance"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dropbox"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-reddit"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-spotify"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vine"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-foursquare"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vimeo"></i>
 
+                      </button>
 
+                    </p>
 
+                    <h6>Size Normal</h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-facebook"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-twitter"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-linkedin"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-flickr"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-tumblr"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-xing"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-github" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-github"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-html5"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-openid"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-stack-overflow"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-css3"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-youtube"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dribbble"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-google-plus"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-instagram"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-pinterest"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vk"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-yahoo"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-behance"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dropbox"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-reddit"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-spotify"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vine"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-foursquare"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vimeo"></i>
 
+                      </button>
 
+                    </p>
 
+                    <h6>Size Large
 
+                      <small>Add this class
 
+                        <code>.btn-lg</code>
 
+                      </small>
 
+                    </h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-lg btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-facebook"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-twitter"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-linkedin"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-flickr"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-tumblr"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-xing"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-github" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-github"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-html5"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-openid"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-stack-overflow"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-css3"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-youtube"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dribbble"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-google-plus"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-instagram"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-pinterest"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vk"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-yahoo"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-behance"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-dropbox"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-reddit"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-spotify"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vine"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-foursquare"></i>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <i class="fa fa-vimeo"></i>
 
+                      </button>
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Brand Buttons</strong>
 
+                    <small>Only text. Usage ex.</small>
 
+                    <code style="text-transform:lowercase">
 
+                      <button class="btn btn-brand btn-facebook text">
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                    </code>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <h6>Size Small
 
+                      <small>Add this class
 
+                        <code>.btn-sm</code>
 
+                      </small>
 
+                    </h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-sm btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <span>Twitter</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <span>LinkedIn</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <span>Flickr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <span>Tumblr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <span>Xing</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-github" type="button" style="margin-bottom: 4px">
 
+                        <span>Github</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <span>HTML5</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <span>OpenID</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <span>StackOverflow</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <span>CSS3</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <span>YouTube</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <span>Dribbble</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <span>Google+</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <span>Instagram</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <span>Pinterest</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <span>VK</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <span>Yahoo</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <span>Behance</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <span>Dropbox</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <span>Reddit</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <span>Spotify</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <span>Vine</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <span>Forsquare</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-sm btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <span>Vimeo</span>
 
+                      </button>
 
+                    </p>
 
+                    <h6>Size Normal</h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <span>Twitter</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <span>LinkedIn</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <span>Flickr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <span>Tumblr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <span>Xing</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-github" type="button" style="margin-bottom: 4px">
 
+                        <span>Github</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <span>HTML5</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <span>OpenID</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <span>StackOverflow</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <span>CSS3</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <span>YouTube</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <span>Dribbble</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <span>Google+</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <span>Instagram</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <span>Pinterest</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <span>VK</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <span>Yahoo</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <span>Behance</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <span>Dropbox</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <span>Reddit</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <span>Spotify</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <span>Vine</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <span>Forsquare</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <span>Vimeo</span>
 
+                      </button>
 
+                    </p>
 
+                    <h6>Size Large
 
+                      <small>Add this class
 
+                        <code>.btn-lg</code>
 
+                      </small>
 
+                    </h6>
 
+                    <p>
 
+                      <button class="btn btn-brand btn-lg btn-facebook" type="button" style="margin-bottom: 4px">
 
+                        <span>Facebook</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-twitter" type="button" style="margin-bottom: 4px">
 
+                        <span>Twitter</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-linkedin" type="button" style="margin-bottom: 4px">
 
+                        <span>LinkedIn</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-flickr" type="button" style="margin-bottom: 4px">
 
+                        <span>Flickr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-tumblr" type="button" style="margin-bottom: 4px">
 
+                        <span>Tumblr</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-xing" type="button" style="margin-bottom: 4px">
 
+                        <span>Xing</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-github" type="button" style="margin-bottom: 4px">
 
+                        <span>Github</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-html5" type="button" style="margin-bottom: 4px">
 
+                        <span>HTML5</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-openid" type="button" style="margin-bottom: 4px">
 
+                        <span>OpenID</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-stack-overflow" type="button" style="margin-bottom: 4px">
 
+                        <span>StackOverflow</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-css3" type="button" style="margin-bottom: 4px">
 
+                        <span>CSS3</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-youtube" type="button" style="margin-bottom: 4px">
 
+                        <span>YouTube</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-dribbble" type="button" style="margin-bottom: 4px">
 
+                        <span>Dribbble</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-google-plus" type="button" style="margin-bottom: 4px">
 
+                        <span>Google+</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-instagram" type="button" style="margin-bottom: 4px">
 
+                        <span>Instagram</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-pinterest" type="button" style="margin-bottom: 4px">
 
+                        <span>Pinterest</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vk" type="button" style="margin-bottom: 4px">
 
+                        <span>VK</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-yahoo" type="button" style="margin-bottom: 4px">
 
+                        <span>Yahoo</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-behance" type="button" style="margin-bottom: 4px">
 
+                        <span>Behance</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-dropbox" type="button" style="margin-bottom: 4px">
 
+                        <span>Dropbox</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-reddit" type="button" style="margin-bottom: 4px">
 
+                        <span>Reddit</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-spotify" type="button" style="margin-bottom: 4px">
 
+                        <span>Spotify</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vine" type="button" style="margin-bottom: 4px">
 
+                        <span>Vine</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-foursquare" type="button" style="margin-bottom: 4px">
 
+                        <span>Forsquare</span>
 
+                      </button>
 
+                      <button class="btn btn-brand btn-lg btn-vimeo" type="button" style="margin-bottom: 4px">
 
+                        <span>Vimeo</span>
 
+                      </button>
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 849 - 0
static/buttons/button-group.html
View File 

@@ -0,0 +1,849 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Button group</strong>
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-button-group/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="btn-group" role="group" aria-label="Basic example">
 
+                      <button class="btn btn-secondary" type="button">Left</button>
 
+                      <button class="btn btn-secondary" type="button">Middle</button>
 
+                      <button class="btn btn-secondary" type="button">Right</button>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">Button group
 
+                    <small>toolbar</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
 
+                      <div class="btn-group mr-2" role="group" aria-label="First group">
 
+                        <button class="btn btn-secondary" type="button">1</button>
 
+                        <button class="btn btn-secondary" type="button">2</button>
 
+                        <button class="btn btn-secondary" type="button">3</button>
 
+                        <button class="btn btn-secondary" type="button">4</button>
 
+                      </div>
 
+                      <div class="btn-group mr-2" role="group" aria-label="Second group">
 
+                        <button class="btn btn-secondary" type="button">5</button>
 
+                        <button class="btn btn-secondary" type="button">6</button>
 
+                        <button class="btn btn-secondary" type="button">7</button>
 
+                      </div>
 
+                      <div class="btn-group" role="group" aria-label="Third group">
 
+                        <button class="btn btn-secondary" type="button">8</button>
 
+                      </div>
 
+                    </div>
 
+                    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
 
+                      <div class="btn-group mr-2" role="group" aria-label="First group">
 
+                        <button class="btn btn-secondary" type="button">1</button>
 
+                        <button class="btn btn-secondary" type="button">2</button>
 
+                        <button class="btn btn-secondary" type="button">3</button>
 
+                        <button class="btn btn-secondary" type="button">4</button>
 
+                      </div>
 
+                      <div class="input-group">
 
+                        <div class="input-group-prepend">
 
+                          <span class="input-group-text" id="btnGroupAddon">@</span>
 
+                        </div>
 
+                        <input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
 
+                      </div>
 
+                    </div>
 
+                    <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
 
+                      <div class="btn-group" role="group" aria-label="First group">
 
+                        <button class="btn btn-secondary" type="button">1</button>
 
+                        <button class="btn btn-secondary" type="button">2</button>
 
+                        <button class="btn btn-secondary" type="button">3</button>
 
+                        <button class="btn btn-secondary" type="button">4</button>
 
+                      </div>
 
+                      <div class="input-group">
 
+                        <div class="input-group-prepend">
 
+                          <span class="input-group-text" id="btnGroupAddon2">@</span>
 
+                        </div>
 
+                        <input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Button group
 
+                    <small>sizing</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="btn-group btn-group-lg mb-3" role="group" aria-label="Large button group">
 
+                      <button class="btn btn-secondary" type="button">Left</button>
 
+                      <button class="btn btn-secondary" type="button">Middle</button>
 
+                      <button class="btn btn-secondary" type="button">Right</button>
 
+                    </div>
 
+                    <br>
 
+                    <div class="btn-group mb-3" role="group" aria-label="Default button group">
 
+                      <button class="btn btn-secondary" type="button">Left</button>
 
+                      <button class="btn btn-secondary" type="button">Middle</button>
 
+                      <button class="btn btn-secondary" type="button">Right</button>
 
+                    </div>
 
+                    <br>
 
+                    <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
 
+                      <button class="btn btn-secondary" type="button">Left</button>
 
+                      <button class="btn btn-secondary" type="button">Middle</button>
 
+                      <button class="btn btn-secondary" type="button">Right</button>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">Button group
 
+                    <small>nesting</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
 
+                      <button class="btn btn-secondary" type="button">1</button>
 
+                      <button class="btn btn-secondary" type="button">2</button>
 
+                      <div class="btn-group" role="group">
 
+                        <button class="btn btn-secondary dropdown-toggle" id="btnGroupDrop1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
 
+                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Button group
 
+                    <small>vertical variation</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">Button group
 
+                    <small>vertical variation</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <div class="btn-group" role="group">
 
+                        <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
 
+                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                        </div>
 
+                      </div>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <button class="btn btn-secondary" type="button">Button</button>
 
+                      <div class="btn-group" role="group">
 
+                        <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
 
+                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                        </div>
 
+                      </div>
 
+                      <div class="btn-group" role="group">
 
+                        <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
 
+                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                        </div>
 
+                      </div>
 
+                      <div class="btn-group" role="group">
 
+                        <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
 
+                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                          <a class="dropdown-item" href="#">Dropdown link</a>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1290 - 0
static/buttons/buttons.html
View File 

@@ -0,0 +1,1290 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>Standard Buttons</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="row align-items-center">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Normal</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-primary" type="button">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-secondary" type="button">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-success" type="button">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-warning" type="button">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-danger" type="button">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-info" type="button">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-light" type="button">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-dark" type="button">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-link" type="button">Link</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Active State</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-primary active" type="button" aria-pressed="true">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-secondary active" type="button" aria-pressed="true">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-success active" type="button" aria-pressed="true">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-warning active" type="button" aria-pressed="true">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-danger active" type="button" aria-pressed="true">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-info active" type="button" aria-pressed="true">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-light active" type="button" aria-pressed="true">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-dark active" type="button" aria-pressed="true">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-link active" type="button" aria-pressed="true">Link</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Disabled</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-primary" type="button" disabled="">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-secondary" type="button" disabled="">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-success" type="button" disabled="">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-warning" type="button" disabled="">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-danger" type="button" disabled="">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-info" type="button" disabled="">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-light" type="button" disabled="">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-dark" type="button" disabled="">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-link" type="button" disabled="">Link</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>Outline Buttons</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <p>Use
 
+                  <code>.btn-outline-*</code> class for outline buttons.</p>
 
+                <div class="row align-items-center">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Normal</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-primary" type="button">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-secondary" type="button">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-success" type="button">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-warning" type="button">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-danger" type="button">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-info" type="button">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-light" type="button">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-dark" type="button">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Active State</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-primary active" type="button" aria-pressed="true">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-secondary active" type="button" aria-pressed="true">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-success active" type="button" aria-pressed="true">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-warning active" type="button" aria-pressed="true">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-danger active" type="button" aria-pressed="true">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-info active" type="button" aria-pressed="true">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-light active" type="button" aria-pressed="true">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-dark active" type="button" aria-pressed="true">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Disabled</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-primary" type="button" disabled="">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-secondary" type="button" disabled="">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-success" type="button" disabled="">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-warning" type="button" disabled="">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-danger" type="button" disabled="">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-info" type="button" disabled="">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-light" type="button" disabled="">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-outline-dark" type="button" disabled="">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>Ghost Buttons</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <p>Use
 
+                  <code>.btn-ghost-*</code> class for ghost buttons.</p>
 
+                <div class="row align-items-center">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Normal</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-primary" type="button">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-secondary" type="button">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-success" type="button">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-warning" type="button">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-danger" type="button">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-info" type="button">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-light" type="button">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-dark" type="button">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Active State</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-primary active" type="button" aria-pressed="true">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-secondary active" type="button" aria-pressed="true">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-success active" type="button" aria-pressed="true">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-warning active" type="button" aria-pressed="true">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-danger active" type="button" aria-pressed="true">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-info active" type="button" aria-pressed="true">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-light active" type="button" aria-pressed="true">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-dark active" type="button" aria-pressed="true">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Disabled</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-primary" type="button" disabled="">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-secondary" type="button" disabled="">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-success" type="button" disabled="">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-warning" type="button" disabled="">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-danger" type="button" disabled="">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-info" type="button" disabled="">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-light" type="button" disabled="">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-block btn-ghost-dark" type="button" disabled="">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>Square Buttons</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <p>Use
 
+                  <code>.btn-square</code> class for square buttons.</p>
 
+                <div class="row align-items-center">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Normal</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-primary" type="button">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-secondary" type="button">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-success" type="button">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-warning" type="button">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-danger" type="button">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-info" type="button">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-light" type="button">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-dark" type="button">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-link" type="button">Link</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Active State</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-primary active" type="button" aria-pressed="true">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-secondary active" type="button" aria-pressed="true">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-success active" type="button" aria-pressed="true">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-warning active" type="button" aria-pressed="true">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-danger active" type="button" aria-pressed="true">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-info active" type="button" aria-pressed="true">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-light active" type="button" aria-pressed="true">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-dark active" type="button" aria-pressed="true">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-link active" type="button" aria-pressed="true">Link</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Disabled</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-primary" type="button" disabled="">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-secondary" type="button" disabled="">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-success" type="button" disabled="">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-warning" type="button" disabled="">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-danger" type="button" disabled="">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-info" type="button" disabled="">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-light" type="button" disabled="">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-dark" type="button" disabled="">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-square btn-block btn-link" type="button" disabled="">Link</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>Pill Buttons</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <p>Use
 
+                  <code>.btn-pill</code> class for pill buttons.</p>
 
+                <div class="row align-items-center">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Normal</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-primary" type="button">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-secondary" type="button">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-success" type="button">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-warning" type="button">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-danger" type="button">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-info" type="button">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-light" type="button">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-dark" type="button">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-link" type="button">Link</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Active State</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-primary active" type="button" aria-pressed="true">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-secondary active" type="button" aria-pressed="true">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-success active" type="button" aria-pressed="true">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-warning active" type="button" aria-pressed="true">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-danger active" type="button" aria-pressed="true">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-info active" type="button" aria-pressed="true">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-light active" type="button" aria-pressed="true">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-dark active" type="button" aria-pressed="true">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-link active" type="button" aria-pressed="true">Link</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Disabled</div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-primary" type="button" disabled="">Primary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-secondary" type="button" disabled="">Secondary</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-success" type="button" disabled="">Success</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-warning" type="button" disabled="">Warning</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-danger" type="button" disabled="">Danger</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-info" type="button" disabled="">Info</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-light" type="button" disabled="">Light</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-dark" type="button" disabled="">Dark</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
 
+                    <button class="btn btn-pill btn-block btn-link" type="button" disabled="">Link</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>Sizes</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <p>Fancy larger or smaller buttons? Add
 
+                  <code>.btn-lg</code> or
 
+                  <code>.btn-sm</code> for additional sizes.</p>
 
+                <div class="row align-items-center">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Small add
 
+                    <code>.btn-sm</code>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-sm btn-primary" type="button">Standard Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-sm btn-outline-secondary" type="button">Outline Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-sm btn-ghost-success" type="button">Ghost Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-sm btn-square btn-warning" type="button">Square Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-sm btn-pill btn-danger" type="button">Pill Button</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Normal</div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-primary" type="button">Standard Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-outline-secondary" type="button">Outline Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-ghost-success" type="button">Ghost Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-square btn-warning" type="button">Square Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-pill btn-danger" type="button">Pill Button</button>
 
+                  </div>
 
+                </div>
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-12 col-xl mb-3 mb-xl-0">Large add
 
+                    <code>.btn-lg</code>.</div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-lg btn-primary" type="button">Standard Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-lg btn-outline-secondary" type="button">Outline Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-lg btn-ghost-success" type="button">Ghost Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-lg btn-square btn-warning" type="button">Square Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-lg btn-pill btn-danger" type="button">Pill Button</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <strong>With Icons</strong>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="row align-items-center mt-3">
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-primary" type="button">
 
+                      <i class="fa fa-lightbulb-o"></i> Standard Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-outline-secondary" type="button">
 
+                      <i class="fa fa-lightbulb-o"></i> Outline Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-ghost-success" type="button">
 
+                      <i class="fa fa-lightbulb-o"></i> Ghost Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-square btn-warning" type="button">
 
+                      <i class="fa fa-lightbulb-o"></i> Square Button</button>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center">
 
+                    <button class="btn btn-pill btn-danger" type="button">
 
+                      <i class="fa fa-lightbulb-o"></i> Pill Button</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Block Level Buttons</strong>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <p>Add this class
 
+                      <code>.btn-block</code>
 
+                    </p>
 
+                    <button class="btn btn-secondary btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-primary btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-success btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-info btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-warning btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-danger btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-link btn-lg btn-block" type="button">Block level button</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <strong>Block Level Buttons</strong>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <p>Add this class
 
+                      <code>.btn-block</code>
 
+                    </p>
 
+                    <button class="btn btn-outline-secondary btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-outline-primary btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-outline-success btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-outline-info btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-outline-warning btn-lg btn-block" type="button">Block level button</button>
 
+                    <button class="btn btn-outline-danger btn-lg btn-block" type="button">Block level button</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1028 - 0
static/buttons/dropdowns.html
View File 

@@ -0,0 +1,1028 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Dropdowns
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-dropdowns/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="row">
 
+                      <div class="col">
 
+                        <div class="btn-group">
 
+                          <div class="dropdown">
 
+                            <button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
 
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
+                              <a class="dropdown-item" href="#">Action</a>
 
+                              <a class="dropdown-item" href="#">Another action</a>
 
+                              <a class="dropdown-item" href="#">Something else here</a>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                        <div class="btn-group">
 
+                          <div class="dropdown show">
 
+                            <a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
 
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
 
+                              <a class="dropdown-item" href="#">Action</a>
 
+                              <a class="dropdown-item" href="#">Another action</a>
 
+                              <a class="dropdown-item" href="#">Something else here</a>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <hr>
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-primary" type="button">Primary</button>
 
+                      <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                        <span class="sr-only">Toggle Dropdown</span>
 
+                      </button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(71px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-secondary" type="button">Secondary</button>
 
+                      <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                        <span class="sr-only">Toggle Dropdown</span>
 
+                      </button>
 
+                      <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(89px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-success" type="button">Success</button>
 
+                      <button class="btn btn-success dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                        <span class="sr-only">Toggle Dropdown</span>
 
+                      </button>
 
+                      <div class="dropdown-menu">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-info" type="button">Info</button>
 
+                      <button class="btn btn-info dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                        <span class="sr-only">Toggle Dropdown</span>
 
+                      </button>
 
+                      <div class="dropdown-menu">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-warning" type="button">Warning</button>
 
+                      <button class="btn btn-warning dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                        <span class="sr-only">Toggle Dropdown</span>
 
+                      </button>
 
+                      <div class="dropdown-menu">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-danger" type="button">Danger</button>
 
+                      <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                        <span class="sr-only">Toggle Dropdown</span>
 
+                      </button>
 
+                      <div class="dropdown-menu">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <!-- /btn-group-->
 
+                    <hr>
 
+                    <div class="btn-toolbar" role="toolbar">
 
+                      <div class="btn-group">
 
+                        <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button</button>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </div>
 
+                      <!-- /btn-group-->
 
+                      <div class="btn-group ml-2">
 
+                        <button class="btn btn-lg btn-secondary" type="button">Large split button</button>
 
+                        <button class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                          <span class="sr-only">Toggle Dropdown</span>
 
+                        </button>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </div>
 
+                      <!-- /btn-group-->
 
+                    </div>
 
+                    <!-- /btn-toolbar-->
 
+                    <hr>
 
+                    <div class="btn-toolbar" role="toolbar">
 
+                      <div class="btn-group">
 
+                        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Small button</button>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </div>
 
+                      <!-- /btn-group-->
 
+                      <div class="btn-group ml-2">
 
+                        <button class="btn btn-sm btn-secondary" type="button">Small split button</button>
 
+                        <button class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                          <span class="sr-only">Toggle Dropdown</span>
 
+                        </button>
 
+                        <div class="dropdown-menu">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </div>
 
+                      <!-- /btn-group-->
 
+                    </div>
 
+                    <!-- /btn-toolbar-->
 
+                    <hr>
 
+                    <div class="bd-example">
 
+                      <div class="btn-group dropup">
 
+                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
 
+                        <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -2px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </div>
 
+                      <div class="btn-group dropup">
 
+                        <button class="btn btn-secondary" type="button">Split dropup</button>
 
+                        <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
+                          <span class="sr-only">Toggle Dropdown</span>
 
+                        </button>
 
+                        <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(101px, -188px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                          <a class="dropdown-item" href="#">Action</a>
 
+                          <a class="dropdown-item" href="#">Another action</a>
 
+                          <a class="dropdown-item" href="#">Something else here</a>
 
+                          <div class="dropdown-divider"></div>
 
+                          <a class="dropdown-item" href="#">Separated link</a>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="row">
 
+              <div class="col">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Menus</div>
 
+                  <div class="card-body">
 
+                    <div class="dropdown">
 
+                      <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
 
+                      <div class="dropdown-menu" aria-labelledby="dropdownMenu2" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
 
+                        <button class="dropdown-item" type="button">Action</button>
 
+                        <button class="dropdown-item" type="button">Another action</button>
 
+                        <button class="dropdown-item" type="button">Something else here</button>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="btn-group">
 
+                      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">This dropdown's menu is right-aligned</button>
 
+                      <div class="dropdown-menu dropdown-menu-right">
 
+                        <button class="dropdown-item" type="button">Action</button>
 
+                        <button class="dropdown-item" type="button">Another action</button>
 
+                        <button class="dropdown-item" type="button">Something else here</button>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="dropdown">
 
+                      <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu header</button>
 
+                      <div class="dropdown-menu">
 
+                        <h6 class="dropdown-header">Dropdown header</h6>
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="dropdown">
 
+                      <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu divider</button>
 
+                      <div class="dropdown-menu">
 
+                        <a class="dropdown-item" href="#">Action</a>
 
+                        <a class="dropdown-item" href="#">Another action</a>
 
+                        <a class="dropdown-item" href="#">Something else here</a>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">Separated link</a>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="dropdown">
 
+                      <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu forms</button>
 
+                      <div class="dropdown-menu">
 
+                        <form class="px-4 py-3">
 
+                          <div class="form-group">
 
+                            <label for="exampleDropdownFormEmail1">Email address</label>
 
+                            <input class="form-control" id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com">
 
+                          </div>
 
+                          <div class="form-group">
 
+                            <label for="exampleDropdownFormPassword1">Password</label>
 
+                            <input class="form-control" id="exampleDropdownFormPassword1" type="password" placeholder="Password">
 
+                          </div>
 
+                          <div class="form-check">
 
+                            <label class="form-check-label">
 
+                              <input class="form-check-input" type="checkbox"> Remember me
 
+                            </label>
 
+                          </div>
 
+                          <button class="btn btn-primary" type="submit">Sign in</button>
 
+                        </form>
 
+                        <div class="dropdown-divider"></div>
 
+                        <a class="dropdown-item" href="#">New around here? Sign up</a>
 
+                        <a class="dropdown-item" href="#">Forgot password?</a>
 
+                      </div>
 
+                    </div>
 
+                    <hr>
 
+                    <div class="dropdown">
 
+                      <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Disabled item</button>
 
+                      <div class="dropdown-menu">
 
+                        <a class="dropdown-item" href="#">Regular link</a>
 
+                        <a class="dropdown-item disabled" href="#">Disabled link</a>
 
+                        <a class="dropdown-item" href="#">Another link</a>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

File diff suppressed because it is too large
+ 0 - 0
static/css/flag-icon.min.css


File diff suppressed because it is too large
+ 3 - 0
static/css/font-awesome.min.css


File diff suppressed because it is too large
+ 6 - 0
static/css/icons.min.css


File diff suppressed because it is too large
+ 0 - 0
static/css/simple-line-icons.css


+ 16396 - 0
static/css/style.css
View File 

@@ -0,0 +1,16396 @@
 
+@charset "UTF-8";
 
+/*!
 
+ * CoreUI - Open Source Dashboard UI Kit
 
+ * @version v2.1.12
 
+ * @link https://coreui.io
 
+ * Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ */
 
+/*!
 
+ * Bootstrap v4.3.1 (https://getbootstrap.com/)
 
+ * Copyright 2011-2019 The Bootstrap Authors
 
+ * Copyright 2011-2019 Twitter, Inc.
 
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 
+ */
 
+:root {
 
+  --blue: #20a8d8;
 
+  --indigo: #6610f2;
 
+  --purple: #6f42c1;
 
+  --pink: #e83e8c;
 
+  --red: #f86c6b;
 
+  --orange: #f8cb00;
 
+  --yellow: #ffc107;
 
+  --green: #4dbd74;
 
+  --teal: #20c997;
 
+  --cyan: #17a2b8;
 
+  --white: #fff;
 
+  --gray: #73818f;
 
+  --gray-dark: #2f353a;
 
+  --light-blue: #63c2de;
 
+  --primary: #20a8d8;
 
+  --secondary: #c8ced3;
 
+  --success: #4dbd74;
 
+  --info: #63c2de;
 
+  --warning: #ffc107;
 
+  --danger: #f86c6b;
 
+  --light: #f0f3f5;
 
+  --dark: #2f353a;
 
+  --breakpoint-xs: 0;
 
+  --breakpoint-sm: 576px;
 
+  --breakpoint-md: 768px;
 
+  --breakpoint-lg: 992px;
 
+  --breakpoint-xl: 1200px;
 
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
+}
 
+
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
+html {
 
+  font-family: sans-serif;
 
+  line-height: 1.15;
 
+  -webkit-text-size-adjust: 100%;
 
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+}
 
+
 
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
 
+  display: block;
 
+}
 
+
 
+body {
 
+  margin: 0;
 
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+  font-size: 0.875rem;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  color: #23282c;
 
+  text-align: left;
 
+  background-color: #e4e5e6;
 
+}
 
+
 
+[tabindex="-1"]:focus {
 
+  outline: 0 !important;
 
+}
 
+
 
+hr {
 
+  box-sizing: content-box;
 
+  height: 0;
 
+  overflow: visible;
 
+}
 
+
 
+h1, h2, h3, h4, h5, h6 {
 
+  margin-top: 0;
 
+  margin-bottom: 0.5rem;
 
+}
 
+
 
+p {
 
+  margin-top: 0;
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+abbr[title],
 
+abbr[data-original-title] {
 
+  text-decoration: underline;
 
+  -webkit-text-decoration: underline dotted;
 
+  text-decoration: underline dotted;
 
+  cursor: help;
 
+  border-bottom: 0;
 
+  -webkit-text-decoration-skip-ink: none;
 
+  text-decoration-skip-ink: none;
 
+}
 
+
 
+address {
 
+  margin-bottom: 1rem;
 
+  font-style: normal;
 
+  line-height: inherit;
 
+}
 
+
 
+ol,
 
+ul,
 
+dl {
 
+  margin-top: 0;
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+ol ol,
 
+ul ul,
 
+ol ul,
 
+ul ol {
 
+  margin-bottom: 0;
 
+}
 
+
 
+dt {
 
+  font-weight: 700;
 
+}
 
+
 
+dd {
 
+  margin-bottom: .5rem;
 
+  margin-left: 0;
 
+}
 
+
 
+blockquote {
 
+  margin: 0 0 1rem;
 
+}
 
+
 
+b,
 
+strong {
 
+  font-weight: bolder;
 
+}
 
+
 
+small {
 
+  font-size: 80%;
 
+}
 
+
 
+sub,
 
+sup {
 
+  position: relative;
 
+  font-size: 75%;
 
+  line-height: 0;
 
+  vertical-align: baseline;
 
+}
 
+
 
+sub {
 
+  bottom: -.25em;
 
+}
 
+
 
+sup {
 
+  top: -.5em;
 
+}
 
+
 
+a {
 
+  color: #20a8d8;
 
+  text-decoration: none;
 
+  background-color: transparent;
 
+}
 
+
 
+a:hover {
 
+  color: #167495;
 
+  text-decoration: underline;
 
+}
 
+
 
+a:not([href]):not([tabindex]) {
 
+  color: inherit;
 
+  text-decoration: none;
 
+}
 
+
 
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
 
+  color: inherit;
 
+  text-decoration: none;
 
+}
 
+
 
+a:not([href]):not([tabindex]):focus {
 
+  outline: 0;
 
+}
 
+
 
+pre,
 
+code,
 
+kbd,
 
+samp {
 
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
+  font-size: 1em;
 
+}
 
+
 
+pre {
 
+  margin-top: 0;
 
+  margin-bottom: 1rem;
 
+  overflow: auto;
 
+}
 
+
 
+figure {
 
+  margin: 0 0 1rem;
 
+}
 
+
 
+img {
 
+  vertical-align: middle;
 
+  border-style: none;
 
+}
 
+
 
+svg {
 
+  overflow: hidden;
 
+  vertical-align: middle;
 
+}
 
+
 
+table {
 
+  border-collapse: collapse;
 
+}
 
+
 
+caption {
 
+  padding-top: 0.75rem;
 
+  padding-bottom: 0.75rem;
 
+  color: #73818f;
 
+  text-align: left;
 
+  caption-side: bottom;
 
+}
 
+
 
+th {
 
+  text-align: inherit;
 
+}
 
+
 
+label {
 
+  display: inline-block;
 
+  margin-bottom: 0.5rem;
 
+}
 
+
 
+button {
 
+  border-radius: 0;
 
+}
 
+
 
+button:focus {
 
+  outline: 1px dotted;
 
+  outline: 5px auto -webkit-focus-ring-color;
 
+}
 
+
 
+input,
 
+button,
 
+select,
 
+optgroup,
 
+textarea {
 
+  margin: 0;
 
+  font-family: inherit;
 
+  font-size: inherit;
 
+  line-height: inherit;
 
+}
 
+
 
+button,
 
+input {
 
+  overflow: visible;
 
+}
 
+
 
+button,
 
+select {
 
+  text-transform: none;
 
+}
 
+
 
+select {
 
+  word-wrap: normal;
 
+}
 
+
 
+button,
 
+[type="button"],
 
+[type="reset"],
 
+[type="submit"] {
 
+  -webkit-appearance: button;
 
+}
 
+
 
+button:not(:disabled),
 
+[type="button"]:not(:disabled),
 
+[type="reset"]:not(:disabled),
 
+[type="submit"]:not(:disabled) {
 
+  cursor: pointer;
 
+}
 
+
 
+button::-moz-focus-inner,
 
+[type="button"]::-moz-focus-inner,
 
+[type="reset"]::-moz-focus-inner,
 
+[type="submit"]::-moz-focus-inner {
 
+  padding: 0;
 
+  border-style: none;
 
+}
 
+
 
+input[type="radio"],
 
+input[type="checkbox"] {
 
+  box-sizing: border-box;
 
+  padding: 0;
 
+}
 
+
 
+input[type="date"],
 
+input[type="time"],
 
+input[type="datetime-local"],
 
+input[type="month"] {
 
+  -webkit-appearance: listbox;
 
+}
 
+
 
+textarea {
 
+  overflow: auto;
 
+  resize: vertical;
 
+}
 
+
 
+fieldset {
 
+  min-width: 0;
 
+  padding: 0;
 
+  margin: 0;
 
+  border: 0;
 
+}
 
+
 
+legend {
 
+  display: block;
 
+  width: 100%;
 
+  max-width: 100%;
 
+  padding: 0;
 
+  margin-bottom: .5rem;
 
+  font-size: 1.5rem;
 
+  line-height: inherit;
 
+  color: inherit;
 
+  white-space: normal;
 
+}
 
+
 
+progress {
 
+  vertical-align: baseline;
 
+}
 
+
 
+[type="number"]::-webkit-inner-spin-button,
 
+[type="number"]::-webkit-outer-spin-button {
 
+  height: auto;
 
+}
 
+
 
+[type="search"] {
 
+  outline-offset: -2px;
 
+  -webkit-appearance: none;
 
+}
 
+
 
+[type="search"]::-webkit-search-decoration {
 
+  -webkit-appearance: none;
 
+}
 
+
 
+::-webkit-file-upload-button {
 
+  font: inherit;
 
+  -webkit-appearance: button;
 
+}
 
+
 
+output {
 
+  display: inline-block;
 
+}
 
+
 
+summary {
 
+  display: list-item;
 
+  cursor: pointer;
 
+}
 
+
 
+template {
 
+  display: none;
 
+}
 
+
 
+[hidden] {
 
+  display: none !important;
 
+}
 
+
 
+h1, h2, h3, h4, h5, h6,
 
+.h1, .h2, .h3, .h4, .h5, .h6 {
 
+  margin-bottom: 0.5rem;
 
+  font-weight: 500;
 
+  line-height: 1.2;
 
+}
 
+
 
+h1, .h1 {
 
+  font-size: 2.1875rem;
 
+}
 
+
 
+h2, .h2 {
 
+  font-size: 1.75rem;
 
+}
 
+
 
+h3, .h3 {
 
+  font-size: 1.53125rem;
 
+}
 
+
 
+h4, .h4 {
 
+  font-size: 1.3125rem;
 
+}
 
+
 
+h5, .h5 {
 
+  font-size: 1.09375rem;
 
+}
 
+
 
+h6, .h6 {
 
+  font-size: 0.875rem;
 
+}
 
+
 
+.lead {
 
+  font-size: 1.09375rem;
 
+  font-weight: 300;
 
+}
 
+
 
+.display-1 {
 
+  font-size: 6rem;
 
+  font-weight: 300;
 
+  line-height: 1.2;
 
+}
 
+
 
+.display-2 {
 
+  font-size: 5.5rem;
 
+  font-weight: 300;
 
+  line-height: 1.2;
 
+}
 
+
 
+.display-3 {
 
+  font-size: 4.5rem;
 
+  font-weight: 300;
 
+  line-height: 1.2;
 
+}
 
+
 
+.display-4 {
 
+  font-size: 3.5rem;
 
+  font-weight: 300;
 
+  line-height: 1.2;
 
+}
 
+
 
+hr {
 
+  margin-top: 1rem;
 
+  margin-bottom: 1rem;
 
+  border: 0;
 
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+small,
 
+.small {
 
+  font-size: 80%;
 
+  font-weight: 400;
 
+}
 
+
 
+mark,
 
+.mark {
 
+  padding: 0.2em;
 
+  background-color: #fcf8e3;
 
+}
 
+
 
+.list-unstyled {
 
+  padding-left: 0;
 
+  list-style: none;
 
+}
 
+
 
+.list-inline {
 
+  padding-left: 0;
 
+  list-style: none;
 
+}
 
+
 
+.list-inline-item {
 
+  display: inline-block;
 
+}
 
+
 
+.list-inline-item:not(:last-child) {
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.initialism {
 
+  font-size: 90%;
 
+  text-transform: uppercase;
 
+}
 
+
 
+.blockquote {
 
+  margin-bottom: 1rem;
 
+  font-size: 1.09375rem;
 
+}
 
+
 
+.blockquote-footer {
 
+  display: block;
 
+  font-size: 80%;
 
+  color: #73818f;
 
+}
 
+
 
+.blockquote-footer::before {
 
+  content: "\2014\00A0";
 
+}
 
+
 
+.img-fluid {
 
+  max-width: 100%;
 
+  height: auto;
 
+}
 
+
 
+.img-thumbnail {
 
+  padding: 0.25rem;
 
+  background-color: #e4e5e6;
 
+  border: 1px solid #c8ced3;
 
+  border-radius: 0.25rem;
 
+  max-width: 100%;
 
+  height: auto;
 
+}
 
+
 
+.figure {
 
+  display: inline-block;
 
+}
 
+
 
+.figure-img {
 
+  margin-bottom: 0.5rem;
 
+  line-height: 1;
 
+}
 
+
 
+.figure-caption {
 
+  font-size: 90%;
 
+  color: #73818f;
 
+}
 
+
 
+code {
 
+  font-size: 87.5%;
 
+  color: #e83e8c;
 
+  word-break: break-word;
 
+}
 
+
 
+a > code {
 
+  color: inherit;
 
+}
 
+
 
+kbd {
 
+  padding: 0.2rem 0.4rem;
 
+  font-size: 87.5%;
 
+  color: #fff;
 
+  background-color: #23282c;
 
+  border-radius: 0.2rem;
 
+}
 
+
 
+kbd kbd {
 
+  padding: 0;
 
+  font-size: 100%;
 
+  font-weight: 700;
 
+}
 
+
 
+pre {
 
+  display: block;
 
+  font-size: 87.5%;
 
+  color: #23282c;
 
+}
 
+
 
+pre code {
 
+  font-size: inherit;
 
+  color: inherit;
 
+  word-break: normal;
 
+}
 
+
 
+.pre-scrollable {
 
+  max-height: 340px;
 
+  overflow-y: scroll;
 
+}
 
+
 
+.container {
 
+  width: 100%;
 
+  padding-right: 15px;
 
+  padding-left: 15px;
 
+  margin-right: auto;
 
+  margin-left: auto;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .container {
 
+    max-width: 540px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .container {
 
+    max-width: 720px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .container {
 
+    max-width: 960px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .container {
 
+    max-width: 1140px;
 
+  }
 
+}
 
+
 
+.container-fluid {
 
+  width: 100%;
 
+  padding-right: 15px;
 
+  padding-left: 15px;
 
+  margin-right: auto;
 
+  margin-left: auto;
 
+}
 
+
 
+.row {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  margin-right: -15px;
 
+  margin-left: -15px;
 
+}
 
+
 
+.no-gutters {
 
+  margin-right: 0;
 
+  margin-left: 0;
 
+}
 
+
 
+.no-gutters > .col,
 
+.no-gutters > [class*="col-"] {
 
+  padding-right: 0;
 
+  padding-left: 0;
 
+}
 
+
 
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 
+.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
 
+.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
 
+.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
 
+.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
 
+.col-xl-auto {
 
+  position: relative;
 
+  width: 100%;
 
+  padding-right: 15px;
 
+  padding-left: 15px;
 
+}
 
+
 
+.col {
 
+  -ms-flex-preferred-size: 0;
 
+  flex-basis: 0;
 
+  -ms-flex-positive: 1;
 
+  flex-grow: 1;
 
+  max-width: 100%;
 
+}
 
+
 
+.col-auto {
 
+  -ms-flex: 0 0 auto;
 
+  flex: 0 0 auto;
 
+  width: auto;
 
+  max-width: 100%;
 
+}
 
+
 
+.col-1 {
 
+  -ms-flex: 0 0 8.333333%;
 
+  flex: 0 0 8.333333%;
 
+  max-width: 8.333333%;
 
+}
 
+
 
+.col-2 {
 
+  -ms-flex: 0 0 16.666667%;
 
+  flex: 0 0 16.666667%;
 
+  max-width: 16.666667%;
 
+}
 
+
 
+.col-3 {
 
+  -ms-flex: 0 0 25%;
 
+  flex: 0 0 25%;
 
+  max-width: 25%;
 
+}
 
+
 
+.col-4 {
 
+  -ms-flex: 0 0 33.333333%;
 
+  flex: 0 0 33.333333%;
 
+  max-width: 33.333333%;
 
+}
 
+
 
+.col-5 {
 
+  -ms-flex: 0 0 41.666667%;
 
+  flex: 0 0 41.666667%;
 
+  max-width: 41.666667%;
 
+}
 
+
 
+.col-6 {
 
+  -ms-flex: 0 0 50%;
 
+  flex: 0 0 50%;
 
+  max-width: 50%;
 
+}
 
+
 
+.col-7 {
 
+  -ms-flex: 0 0 58.333333%;
 
+  flex: 0 0 58.333333%;
 
+  max-width: 58.333333%;
 
+}
 
+
 
+.col-8 {
 
+  -ms-flex: 0 0 66.666667%;
 
+  flex: 0 0 66.666667%;
 
+  max-width: 66.666667%;
 
+}
 
+
 
+.col-9 {
 
+  -ms-flex: 0 0 75%;
 
+  flex: 0 0 75%;
 
+  max-width: 75%;
 
+}
 
+
 
+.col-10 {
 
+  -ms-flex: 0 0 83.333333%;
 
+  flex: 0 0 83.333333%;
 
+  max-width: 83.333333%;
 
+}
 
+
 
+.col-11 {
 
+  -ms-flex: 0 0 91.666667%;
 
+  flex: 0 0 91.666667%;
 
+  max-width: 91.666667%;
 
+}
 
+
 
+.col-12 {
 
+  -ms-flex: 0 0 100%;
 
+  flex: 0 0 100%;
 
+  max-width: 100%;
 
+}
 
+
 
+.order-first {
 
+  -ms-flex-order: -1;
 
+  order: -1;
 
+}
 
+
 
+.order-last {
 
+  -ms-flex-order: 13;
 
+  order: 13;
 
+}
 
+
 
+.order-0 {
 
+  -ms-flex-order: 0;
 
+  order: 0;
 
+}
 
+
 
+.order-1 {
 
+  -ms-flex-order: 1;
 
+  order: 1;
 
+}
 
+
 
+.order-2 {
 
+  -ms-flex-order: 2;
 
+  order: 2;
 
+}
 
+
 
+.order-3 {
 
+  -ms-flex-order: 3;
 
+  order: 3;
 
+}
 
+
 
+.order-4 {
 
+  -ms-flex-order: 4;
 
+  order: 4;
 
+}
 
+
 
+.order-5 {
 
+  -ms-flex-order: 5;
 
+  order: 5;
 
+}
 
+
 
+.order-6 {
 
+  -ms-flex-order: 6;
 
+  order: 6;
 
+}
 
+
 
+.order-7 {
 
+  -ms-flex-order: 7;
 
+  order: 7;
 
+}
 
+
 
+.order-8 {
 
+  -ms-flex-order: 8;
 
+  order: 8;
 
+}
 
+
 
+.order-9 {
 
+  -ms-flex-order: 9;
 
+  order: 9;
 
+}
 
+
 
+.order-10 {
 
+  -ms-flex-order: 10;
 
+  order: 10;
 
+}
 
+
 
+.order-11 {
 
+  -ms-flex-order: 11;
 
+  order: 11;
 
+}
 
+
 
+.order-12 {
 
+  -ms-flex-order: 12;
 
+  order: 12;
 
+}
 
+
 
+.offset-1 {
 
+  margin-left: 8.333333%;
 
+}
 
+
 
+.offset-2 {
 
+  margin-left: 16.666667%;
 
+}
 
+
 
+.offset-3 {
 
+  margin-left: 25%;
 
+}
 
+
 
+.offset-4 {
 
+  margin-left: 33.333333%;
 
+}
 
+
 
+.offset-5 {
 
+  margin-left: 41.666667%;
 
+}
 
+
 
+.offset-6 {
 
+  margin-left: 50%;
 
+}
 
+
 
+.offset-7 {
 
+  margin-left: 58.333333%;
 
+}
 
+
 
+.offset-8 {
 
+  margin-left: 66.666667%;
 
+}
 
+
 
+.offset-9 {
 
+  margin-left: 75%;
 
+}
 
+
 
+.offset-10 {
 
+  margin-left: 83.333333%;
 
+}
 
+
 
+.offset-11 {
 
+  margin-left: 91.666667%;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .col-sm {
 
+    -ms-flex-preferred-size: 0;
 
+    flex-basis: 0;
 
+    -ms-flex-positive: 1;
 
+    flex-grow: 1;
 
+    max-width: 100%;
 
+  }
 
+  .col-sm-auto {
 
+    -ms-flex: 0 0 auto;
 
+    flex: 0 0 auto;
 
+    width: auto;
 
+    max-width: 100%;
 
+  }
 
+  .col-sm-1 {
 
+    -ms-flex: 0 0 8.333333%;
 
+    flex: 0 0 8.333333%;
 
+    max-width: 8.333333%;
 
+  }
 
+  .col-sm-2 {
 
+    -ms-flex: 0 0 16.666667%;
 
+    flex: 0 0 16.666667%;
 
+    max-width: 16.666667%;
 
+  }
 
+  .col-sm-3 {
 
+    -ms-flex: 0 0 25%;
 
+    flex: 0 0 25%;
 
+    max-width: 25%;
 
+  }
 
+  .col-sm-4 {
 
+    -ms-flex: 0 0 33.333333%;
 
+    flex: 0 0 33.333333%;
 
+    max-width: 33.333333%;
 
+  }
 
+  .col-sm-5 {
 
+    -ms-flex: 0 0 41.666667%;
 
+    flex: 0 0 41.666667%;
 
+    max-width: 41.666667%;
 
+  }
 
+  .col-sm-6 {
 
+    -ms-flex: 0 0 50%;
 
+    flex: 0 0 50%;
 
+    max-width: 50%;
 
+  }
 
+  .col-sm-7 {
 
+    -ms-flex: 0 0 58.333333%;
 
+    flex: 0 0 58.333333%;
 
+    max-width: 58.333333%;
 
+  }
 
+  .col-sm-8 {
 
+    -ms-flex: 0 0 66.666667%;
 
+    flex: 0 0 66.666667%;
 
+    max-width: 66.666667%;
 
+  }
 
+  .col-sm-9 {
 
+    -ms-flex: 0 0 75%;
 
+    flex: 0 0 75%;
 
+    max-width: 75%;
 
+  }
 
+  .col-sm-10 {
 
+    -ms-flex: 0 0 83.333333%;
 
+    flex: 0 0 83.333333%;
 
+    max-width: 83.333333%;
 
+  }
 
+  .col-sm-11 {
 
+    -ms-flex: 0 0 91.666667%;
 
+    flex: 0 0 91.666667%;
 
+    max-width: 91.666667%;
 
+  }
 
+  .col-sm-12 {
 
+    -ms-flex: 0 0 100%;
 
+    flex: 0 0 100%;
 
+    max-width: 100%;
 
+  }
 
+  .order-sm-first {
 
+    -ms-flex-order: -1;
 
+    order: -1;
 
+  }
 
+  .order-sm-last {
 
+    -ms-flex-order: 13;
 
+    order: 13;
 
+  }
 
+  .order-sm-0 {
 
+    -ms-flex-order: 0;
 
+    order: 0;
 
+  }
 
+  .order-sm-1 {
 
+    -ms-flex-order: 1;
 
+    order: 1;
 
+  }
 
+  .order-sm-2 {
 
+    -ms-flex-order: 2;
 
+    order: 2;
 
+  }
 
+  .order-sm-3 {
 
+    -ms-flex-order: 3;
 
+    order: 3;
 
+  }
 
+  .order-sm-4 {
 
+    -ms-flex-order: 4;
 
+    order: 4;
 
+  }
 
+  .order-sm-5 {
 
+    -ms-flex-order: 5;
 
+    order: 5;
 
+  }
 
+  .order-sm-6 {
 
+    -ms-flex-order: 6;
 
+    order: 6;
 
+  }
 
+  .order-sm-7 {
 
+    -ms-flex-order: 7;
 
+    order: 7;
 
+  }
 
+  .order-sm-8 {
 
+    -ms-flex-order: 8;
 
+    order: 8;
 
+  }
 
+  .order-sm-9 {
 
+    -ms-flex-order: 9;
 
+    order: 9;
 
+  }
 
+  .order-sm-10 {
 
+    -ms-flex-order: 10;
 
+    order: 10;
 
+  }
 
+  .order-sm-11 {
 
+    -ms-flex-order: 11;
 
+    order: 11;
 
+  }
 
+  .order-sm-12 {
 
+    -ms-flex-order: 12;
 
+    order: 12;
 
+  }
 
+  .offset-sm-0 {
 
+    margin-left: 0;
 
+  }
 
+  .offset-sm-1 {
 
+    margin-left: 8.333333%;
 
+  }
 
+  .offset-sm-2 {
 
+    margin-left: 16.666667%;
 
+  }
 
+  .offset-sm-3 {
 
+    margin-left: 25%;
 
+  }
 
+  .offset-sm-4 {
 
+    margin-left: 33.333333%;
 
+  }
 
+  .offset-sm-5 {
 
+    margin-left: 41.666667%;
 
+  }
 
+  .offset-sm-6 {
 
+    margin-left: 50%;
 
+  }
 
+  .offset-sm-7 {
 
+    margin-left: 58.333333%;
 
+  }
 
+  .offset-sm-8 {
 
+    margin-left: 66.666667%;
 
+  }
 
+  .offset-sm-9 {
 
+    margin-left: 75%;
 
+  }
 
+  .offset-sm-10 {
 
+    margin-left: 83.333333%;
 
+  }
 
+  .offset-sm-11 {
 
+    margin-left: 91.666667%;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .col-md {
 
+    -ms-flex-preferred-size: 0;
 
+    flex-basis: 0;
 
+    -ms-flex-positive: 1;
 
+    flex-grow: 1;
 
+    max-width: 100%;
 
+  }
 
+  .col-md-auto {
 
+    -ms-flex: 0 0 auto;
 
+    flex: 0 0 auto;
 
+    width: auto;
 
+    max-width: 100%;
 
+  }
 
+  .col-md-1 {
 
+    -ms-flex: 0 0 8.333333%;
 
+    flex: 0 0 8.333333%;
 
+    max-width: 8.333333%;
 
+  }
 
+  .col-md-2 {
 
+    -ms-flex: 0 0 16.666667%;
 
+    flex: 0 0 16.666667%;
 
+    max-width: 16.666667%;
 
+  }
 
+  .col-md-3 {
 
+    -ms-flex: 0 0 25%;
 
+    flex: 0 0 25%;
 
+    max-width: 25%;
 
+  }
 
+  .col-md-4 {
 
+    -ms-flex: 0 0 33.333333%;
 
+    flex: 0 0 33.333333%;
 
+    max-width: 33.333333%;
 
+  }
 
+  .col-md-5 {
 
+    -ms-flex: 0 0 41.666667%;
 
+    flex: 0 0 41.666667%;
 
+    max-width: 41.666667%;
 
+  }
 
+  .col-md-6 {
 
+    -ms-flex: 0 0 50%;
 
+    flex: 0 0 50%;
 
+    max-width: 50%;
 
+  }
 
+  .col-md-7 {
 
+    -ms-flex: 0 0 58.333333%;
 
+    flex: 0 0 58.333333%;
 
+    max-width: 58.333333%;
 
+  }
 
+  .col-md-8 {
 
+    -ms-flex: 0 0 66.666667%;
 
+    flex: 0 0 66.666667%;
 
+    max-width: 66.666667%;
 
+  }
 
+  .col-md-9 {
 
+    -ms-flex: 0 0 75%;
 
+    flex: 0 0 75%;
 
+    max-width: 75%;
 
+  }
 
+  .col-md-10 {
 
+    -ms-flex: 0 0 83.333333%;
 
+    flex: 0 0 83.333333%;
 
+    max-width: 83.333333%;
 
+  }
 
+  .col-md-11 {
 
+    -ms-flex: 0 0 91.666667%;
 
+    flex: 0 0 91.666667%;
 
+    max-width: 91.666667%;
 
+  }
 
+  .col-md-12 {
 
+    -ms-flex: 0 0 100%;
 
+    flex: 0 0 100%;
 
+    max-width: 100%;
 
+  }
 
+  .order-md-first {
 
+    -ms-flex-order: -1;
 
+    order: -1;
 
+  }
 
+  .order-md-last {
 
+    -ms-flex-order: 13;
 
+    order: 13;
 
+  }
 
+  .order-md-0 {
 
+    -ms-flex-order: 0;
 
+    order: 0;
 
+  }
 
+  .order-md-1 {
 
+    -ms-flex-order: 1;
 
+    order: 1;
 
+  }
 
+  .order-md-2 {
 
+    -ms-flex-order: 2;
 
+    order: 2;
 
+  }
 
+  .order-md-3 {
 
+    -ms-flex-order: 3;
 
+    order: 3;
 
+  }
 
+  .order-md-4 {
 
+    -ms-flex-order: 4;
 
+    order: 4;
 
+  }
 
+  .order-md-5 {
 
+    -ms-flex-order: 5;
 
+    order: 5;
 
+  }
 
+  .order-md-6 {
 
+    -ms-flex-order: 6;
 
+    order: 6;
 
+  }
 
+  .order-md-7 {
 
+    -ms-flex-order: 7;
 
+    order: 7;
 
+  }
 
+  .order-md-8 {
 
+    -ms-flex-order: 8;
 
+    order: 8;
 
+  }
 
+  .order-md-9 {
 
+    -ms-flex-order: 9;
 
+    order: 9;
 
+  }
 
+  .order-md-10 {
 
+    -ms-flex-order: 10;
 
+    order: 10;
 
+  }
 
+  .order-md-11 {
 
+    -ms-flex-order: 11;
 
+    order: 11;
 
+  }
 
+  .order-md-12 {
 
+    -ms-flex-order: 12;
 
+    order: 12;
 
+  }
 
+  .offset-md-0 {
 
+    margin-left: 0;
 
+  }
 
+  .offset-md-1 {
 
+    margin-left: 8.333333%;
 
+  }
 
+  .offset-md-2 {
 
+    margin-left: 16.666667%;
 
+  }
 
+  .offset-md-3 {
 
+    margin-left: 25%;
 
+  }
 
+  .offset-md-4 {
 
+    margin-left: 33.333333%;
 
+  }
 
+  .offset-md-5 {
 
+    margin-left: 41.666667%;
 
+  }
 
+  .offset-md-6 {
 
+    margin-left: 50%;
 
+  }
 
+  .offset-md-7 {
 
+    margin-left: 58.333333%;
 
+  }
 
+  .offset-md-8 {
 
+    margin-left: 66.666667%;
 
+  }
 
+  .offset-md-9 {
 
+    margin-left: 75%;
 
+  }
 
+  .offset-md-10 {
 
+    margin-left: 83.333333%;
 
+  }
 
+  .offset-md-11 {
 
+    margin-left: 91.666667%;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .col-lg {
 
+    -ms-flex-preferred-size: 0;
 
+    flex-basis: 0;
 
+    -ms-flex-positive: 1;
 
+    flex-grow: 1;
 
+    max-width: 100%;
 
+  }
 
+  .col-lg-auto {
 
+    -ms-flex: 0 0 auto;
 
+    flex: 0 0 auto;
 
+    width: auto;
 
+    max-width: 100%;
 
+  }
 
+  .col-lg-1 {
 
+    -ms-flex: 0 0 8.333333%;
 
+    flex: 0 0 8.333333%;
 
+    max-width: 8.333333%;
 
+  }
 
+  .col-lg-2 {
 
+    -ms-flex: 0 0 16.666667%;
 
+    flex: 0 0 16.666667%;
 
+    max-width: 16.666667%;
 
+  }
 
+  .col-lg-3 {
 
+    -ms-flex: 0 0 25%;
 
+    flex: 0 0 25%;
 
+    max-width: 25%;
 
+  }
 
+  .col-lg-4 {
 
+    -ms-flex: 0 0 33.333333%;
 
+    flex: 0 0 33.333333%;
 
+    max-width: 33.333333%;
 
+  }
 
+  .col-lg-5 {
 
+    -ms-flex: 0 0 41.666667%;
 
+    flex: 0 0 41.666667%;
 
+    max-width: 41.666667%;
 
+  }
 
+  .col-lg-6 {
 
+    -ms-flex: 0 0 50%;
 
+    flex: 0 0 50%;
 
+    max-width: 50%;
 
+  }
 
+  .col-lg-7 {
 
+    -ms-flex: 0 0 58.333333%;
 
+    flex: 0 0 58.333333%;
 
+    max-width: 58.333333%;
 
+  }
 
+  .col-lg-8 {
 
+    -ms-flex: 0 0 66.666667%;
 
+    flex: 0 0 66.666667%;
 
+    max-width: 66.666667%;
 
+  }
 
+  .col-lg-9 {
 
+    -ms-flex: 0 0 75%;
 
+    flex: 0 0 75%;
 
+    max-width: 75%;
 
+  }
 
+  .col-lg-10 {
 
+    -ms-flex: 0 0 83.333333%;
 
+    flex: 0 0 83.333333%;
 
+    max-width: 83.333333%;
 
+  }
 
+  .col-lg-11 {
 
+    -ms-flex: 0 0 91.666667%;
 
+    flex: 0 0 91.666667%;
 
+    max-width: 91.666667%;
 
+  }
 
+  .col-lg-12 {
 
+    -ms-flex: 0 0 100%;
 
+    flex: 0 0 100%;
 
+    max-width: 100%;
 
+  }
 
+  .order-lg-first {
 
+    -ms-flex-order: -1;
 
+    order: -1;
 
+  }
 
+  .order-lg-last {
 
+    -ms-flex-order: 13;
 
+    order: 13;
 
+  }
 
+  .order-lg-0 {
 
+    -ms-flex-order: 0;
 
+    order: 0;
 
+  }
 
+  .order-lg-1 {
 
+    -ms-flex-order: 1;
 
+    order: 1;
 
+  }
 
+  .order-lg-2 {
 
+    -ms-flex-order: 2;
 
+    order: 2;
 
+  }
 
+  .order-lg-3 {
 
+    -ms-flex-order: 3;
 
+    order: 3;
 
+  }
 
+  .order-lg-4 {
 
+    -ms-flex-order: 4;
 
+    order: 4;
 
+  }
 
+  .order-lg-5 {
 
+    -ms-flex-order: 5;
 
+    order: 5;
 
+  }
 
+  .order-lg-6 {
 
+    -ms-flex-order: 6;
 
+    order: 6;
 
+  }
 
+  .order-lg-7 {
 
+    -ms-flex-order: 7;
 
+    order: 7;
 
+  }
 
+  .order-lg-8 {
 
+    -ms-flex-order: 8;
 
+    order: 8;
 
+  }
 
+  .order-lg-9 {
 
+    -ms-flex-order: 9;
 
+    order: 9;
 
+  }
 
+  .order-lg-10 {
 
+    -ms-flex-order: 10;
 
+    order: 10;
 
+  }
 
+  .order-lg-11 {
 
+    -ms-flex-order: 11;
 
+    order: 11;
 
+  }
 
+  .order-lg-12 {
 
+    -ms-flex-order: 12;
 
+    order: 12;
 
+  }
 
+  .offset-lg-0 {
 
+    margin-left: 0;
 
+  }
 
+  .offset-lg-1 {
 
+    margin-left: 8.333333%;
 
+  }
 
+  .offset-lg-2 {
 
+    margin-left: 16.666667%;
 
+  }
 
+  .offset-lg-3 {
 
+    margin-left: 25%;
 
+  }
 
+  .offset-lg-4 {
 
+    margin-left: 33.333333%;
 
+  }
 
+  .offset-lg-5 {
 
+    margin-left: 41.666667%;
 
+  }
 
+  .offset-lg-6 {
 
+    margin-left: 50%;
 
+  }
 
+  .offset-lg-7 {
 
+    margin-left: 58.333333%;
 
+  }
 
+  .offset-lg-8 {
 
+    margin-left: 66.666667%;
 
+  }
 
+  .offset-lg-9 {
 
+    margin-left: 75%;
 
+  }
 
+  .offset-lg-10 {
 
+    margin-left: 83.333333%;
 
+  }
 
+  .offset-lg-11 {
 
+    margin-left: 91.666667%;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .col-xl {
 
+    -ms-flex-preferred-size: 0;
 
+    flex-basis: 0;
 
+    -ms-flex-positive: 1;
 
+    flex-grow: 1;
 
+    max-width: 100%;
 
+  }
 
+  .col-xl-auto {
 
+    -ms-flex: 0 0 auto;
 
+    flex: 0 0 auto;
 
+    width: auto;
 
+    max-width: 100%;
 
+  }
 
+  .col-xl-1 {
 
+    -ms-flex: 0 0 8.333333%;
 
+    flex: 0 0 8.333333%;
 
+    max-width: 8.333333%;
 
+  }
 
+  .col-xl-2 {
 
+    -ms-flex: 0 0 16.666667%;
 
+    flex: 0 0 16.666667%;
 
+    max-width: 16.666667%;
 
+  }
 
+  .col-xl-3 {
 
+    -ms-flex: 0 0 25%;
 
+    flex: 0 0 25%;
 
+    max-width: 25%;
 
+  }
 
+  .col-xl-4 {
 
+    -ms-flex: 0 0 33.333333%;
 
+    flex: 0 0 33.333333%;
 
+    max-width: 33.333333%;
 
+  }
 
+  .col-xl-5 {
 
+    -ms-flex: 0 0 41.666667%;
 
+    flex: 0 0 41.666667%;
 
+    max-width: 41.666667%;
 
+  }
 
+  .col-xl-6 {
 
+    -ms-flex: 0 0 50%;
 
+    flex: 0 0 50%;
 
+    max-width: 50%;
 
+  }
 
+  .col-xl-7 {
 
+    -ms-flex: 0 0 58.333333%;
 
+    flex: 0 0 58.333333%;
 
+    max-width: 58.333333%;
 
+  }
 
+  .col-xl-8 {
 
+    -ms-flex: 0 0 66.666667%;
 
+    flex: 0 0 66.666667%;
 
+    max-width: 66.666667%;
 
+  }
 
+  .col-xl-9 {
 
+    -ms-flex: 0 0 75%;
 
+    flex: 0 0 75%;
 
+    max-width: 75%;
 
+  }
 
+  .col-xl-10 {
 
+    -ms-flex: 0 0 83.333333%;
 
+    flex: 0 0 83.333333%;
 
+    max-width: 83.333333%;
 
+  }
 
+  .col-xl-11 {
 
+    -ms-flex: 0 0 91.666667%;
 
+    flex: 0 0 91.666667%;
 
+    max-width: 91.666667%;
 
+  }
 
+  .col-xl-12 {
 
+    -ms-flex: 0 0 100%;
 
+    flex: 0 0 100%;
 
+    max-width: 100%;
 
+  }
 
+  .order-xl-first {
 
+    -ms-flex-order: -1;
 
+    order: -1;
 
+  }
 
+  .order-xl-last {
 
+    -ms-flex-order: 13;
 
+    order: 13;
 
+  }
 
+  .order-xl-0 {
 
+    -ms-flex-order: 0;
 
+    order: 0;
 
+  }
 
+  .order-xl-1 {
 
+    -ms-flex-order: 1;
 
+    order: 1;
 
+  }
 
+  .order-xl-2 {
 
+    -ms-flex-order: 2;
 
+    order: 2;
 
+  }
 
+  .order-xl-3 {
 
+    -ms-flex-order: 3;
 
+    order: 3;
 
+  }
 
+  .order-xl-4 {
 
+    -ms-flex-order: 4;
 
+    order: 4;
 
+  }
 
+  .order-xl-5 {
 
+    -ms-flex-order: 5;
 
+    order: 5;
 
+  }
 
+  .order-xl-6 {
 
+    -ms-flex-order: 6;
 
+    order: 6;
 
+  }
 
+  .order-xl-7 {
 
+    -ms-flex-order: 7;
 
+    order: 7;
 
+  }
 
+  .order-xl-8 {
 
+    -ms-flex-order: 8;
 
+    order: 8;
 
+  }
 
+  .order-xl-9 {
 
+    -ms-flex-order: 9;
 
+    order: 9;
 
+  }
 
+  .order-xl-10 {
 
+    -ms-flex-order: 10;
 
+    order: 10;
 
+  }
 
+  .order-xl-11 {
 
+    -ms-flex-order: 11;
 
+    order: 11;
 
+  }
 
+  .order-xl-12 {
 
+    -ms-flex-order: 12;
 
+    order: 12;
 
+  }
 
+  .offset-xl-0 {
 
+    margin-left: 0;
 
+  }
 
+  .offset-xl-1 {
 
+    margin-left: 8.333333%;
 
+  }
 
+  .offset-xl-2 {
 
+    margin-left: 16.666667%;
 
+  }
 
+  .offset-xl-3 {
 
+    margin-left: 25%;
 
+  }
 
+  .offset-xl-4 {
 
+    margin-left: 33.333333%;
 
+  }
 
+  .offset-xl-5 {
 
+    margin-left: 41.666667%;
 
+  }
 
+  .offset-xl-6 {
 
+    margin-left: 50%;
 
+  }
 
+  .offset-xl-7 {
 
+    margin-left: 58.333333%;
 
+  }
 
+  .offset-xl-8 {
 
+    margin-left: 66.666667%;
 
+  }
 
+  .offset-xl-9 {
 
+    margin-left: 75%;
 
+  }
 
+  .offset-xl-10 {
 
+    margin-left: 83.333333%;
 
+  }
 
+  .offset-xl-11 {
 
+    margin-left: 91.666667%;
 
+  }
 
+}
 
+
 
+.table {
 
+  width: 100%;
 
+  margin-bottom: 1rem;
 
+  color: #23282c;
 
+}
 
+
 
+.table th,
 
+.table td {
 
+  padding: 0.75rem;
 
+  vertical-align: top;
 
+  border-top: 1px solid #c8ced3;
 
+}
 
+
 
+.table thead th {
 
+  vertical-align: bottom;
 
+  border-bottom: 2px solid #c8ced3;
 
+}
 
+
 
+.table tbody + tbody {
 
+  border-top: 2px solid #c8ced3;
 
+}
 
+
 
+.table-sm th,
 
+.table-sm td {
 
+  padding: 0.3rem;
 
+}
 
+
 
+.table-bordered {
 
+  border: 1px solid #c8ced3;
 
+}
 
+
 
+.table-bordered th,
 
+.table-bordered td {
 
+  border: 1px solid #c8ced3;
 
+}
 
+
 
+.table-bordered thead th,
 
+.table-bordered thead td {
 
+  border-bottom-width: 2px;
 
+}
 
+
 
+.table-borderless th,
 
+.table-borderless td,
 
+.table-borderless thead th,
 
+.table-borderless tbody + tbody {
 
+  border: 0;
 
+}
 
+
 
+.table-striped tbody tr:nth-of-type(odd) {
 
+  background-color: rgba(0, 0, 0, 0.05);
 
+}
 
+
 
+.table-hover tbody tr:hover {
 
+  color: #23282c;
 
+  background-color: rgba(0, 0, 0, 0.075);
 
+}
 
+
 
+.table-primary,
 
+.table-primary > th,
 
+.table-primary > td {
 
+  background-color: #c1e7f4;
 
+}
 
+
 
+.table-primary th,
 
+.table-primary td,
 
+.table-primary thead th,
 
+.table-primary tbody + tbody {
 
+  border-color: #8bd2eb;
 
+}
 
+
 
+.table-hover .table-primary:hover {
 
+  background-color: #abdff0;
 
+}
 
+
 
+.table-hover .table-primary:hover > td,
 
+.table-hover .table-primary:hover > th {
 
+  background-color: #abdff0;
 
+}
 
+
 
+.table-secondary,
 
+.table-secondary > th,
 
+.table-secondary > td {
 
+  background-color: #f0f1f3;
 
+}
 
+
 
+.table-secondary th,
 
+.table-secondary td,
 
+.table-secondary thead th,
 
+.table-secondary tbody + tbody {
 
+  border-color: #e2e6e8;
 
+}
 
+
 
+.table-hover .table-secondary:hover {
 
+  background-color: #e2e4e8;
 
+}
 
+
 
+.table-hover .table-secondary:hover > td,
 
+.table-hover .table-secondary:hover > th {
 
+  background-color: #e2e4e8;
 
+}
 
+
 
+.table-success,
 
+.table-success > th,
 
+.table-success > td {
 
+  background-color: #cdedd8;
 
+}
 
+
 
+.table-success th,
 
+.table-success td,
 
+.table-success thead th,
 
+.table-success tbody + tbody {
 
+  border-color: #a2ddb7;
 
+}
 
+
 
+.table-hover .table-success:hover {
 
+  background-color: #bae6c9;
 
+}
 
+
 
+.table-hover .table-success:hover > td,
 
+.table-hover .table-success:hover > th {
 
+  background-color: #bae6c9;
 
+}
 
+
 
+.table-info,
 
+.table-info > th,
 
+.table-info > td {
 
+  background-color: #d3eef6;
 
+}
 
+
 
+.table-info th,
 
+.table-info td,
 
+.table-info thead th,
 
+.table-info tbody + tbody {
 
+  border-color: #aedfee;
 
+}
 
+
 
+.table-hover .table-info:hover {
 
+  background-color: #bee6f2;
 
+}
 
+
 
+.table-hover .table-info:hover > td,
 
+.table-hover .table-info:hover > th {
 
+  background-color: #bee6f2;
 
+}
 
+
 
+.table-warning,
 
+.table-warning > th,
 
+.table-warning > td {
 
+  background-color: #ffeeba;
 
+}
 
+
 
+.table-warning th,
 
+.table-warning td,
 
+.table-warning thead th,
 
+.table-warning tbody + tbody {
 
+  border-color: #ffdf7e;
 
+}
 
+
 
+.table-hover .table-warning:hover {
 
+  background-color: #ffe8a1;
 
+}
 
+
 
+.table-hover .table-warning:hover > td,
 
+.table-hover .table-warning:hover > th {
 
+  background-color: #ffe8a1;
 
+}
 
+
 
+.table-danger,
 
+.table-danger > th,
 
+.table-danger > td {
 
+  background-color: #fdd6d6;
 
+}
 
+
 
+.table-danger th,
 
+.table-danger td,
 
+.table-danger thead th,
 
+.table-danger tbody + tbody {
 
+  border-color: #fbb3b2;
 
+}
 
+
 
+.table-hover .table-danger:hover {
 
+  background-color: #fcbebe;
 
+}
 
+
 
+.table-hover .table-danger:hover > td,
 
+.table-hover .table-danger:hover > th {
 
+  background-color: #fcbebe;
 
+}
 
+
 
+.table-light,
 
+.table-light > th,
 
+.table-light > td {
 
+  background-color: #fbfcfc;
 
+}
 
+
 
+.table-light th,
 
+.table-light td,
 
+.table-light thead th,
 
+.table-light tbody + tbody {
 
+  border-color: #f7f9fa;
 
+}
 
+
 
+.table-hover .table-light:hover {
 
+  background-color: #ecf1f1;
 
+}
 
+
 
+.table-hover .table-light:hover > td,
 
+.table-hover .table-light:hover > th {
 
+  background-color: #ecf1f1;
 
+}
 
+
 
+.table-dark,
 
+.table-dark > th,
 
+.table-dark > td {
 
+  background-color: #c5c6c8;
 
+}
 
+
 
+.table-dark th,
 
+.table-dark td,
 
+.table-dark thead th,
 
+.table-dark tbody + tbody {
 
+  border-color: #939699;
 
+}
 
+
 
+.table-hover .table-dark:hover {
 
+  background-color: #b8b9bc;
 
+}
 
+
 
+.table-hover .table-dark:hover > td,
 
+.table-hover .table-dark:hover > th {
 
+  background-color: #b8b9bc;
 
+}
 
+
 
+.table-active,
 
+.table-active > th,
 
+.table-active > td {
 
+  background-color: rgba(0, 0, 0, 0.075);
 
+}
 
+
 
+.table-hover .table-active:hover {
 
+  background-color: rgba(0, 0, 0, 0.075);
 
+}
 
+
 
+.table-hover .table-active:hover > td,
 
+.table-hover .table-active:hover > th {
 
+  background-color: rgba(0, 0, 0, 0.075);
 
+}
 
+
 
+.table .thead-dark th {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #40484f;
 
+}
 
+
 
+.table .thead-light th {
 
+  color: #5c6873;
 
+  background-color: #e4e7ea;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.table-dark {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+}
 
+
 
+.table-dark th,
 
+.table-dark td,
 
+.table-dark thead th {
 
+  border-color: #40484f;
 
+}
 
+
 
+.table-dark.table-bordered {
 
+  border: 0;
 
+}
 
+
 
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+}
 
+
 
+.table-dark.table-hover tbody tr:hover {
 
+  color: #fff;
 
+  background-color: rgba(255, 255, 255, 0.075);
 
+}
 
+
 
+@media (max-width: 575.98px) {
 
+  .table-responsive-sm {
 
+    display: block;
 
+    width: 100%;
 
+    overflow-x: auto;
 
+    -webkit-overflow-scrolling: touch;
 
+  }
 
+  .table-responsive-sm > .table-bordered {
 
+    border: 0;
 
+  }
 
+}
 
+
 
+@media (max-width: 767.98px) {
 
+  .table-responsive-md {
 
+    display: block;
 
+    width: 100%;
 
+    overflow-x: auto;
 
+    -webkit-overflow-scrolling: touch;
 
+  }
 
+  .table-responsive-md > .table-bordered {
 
+    border: 0;
 
+  }
 
+}
 
+
 
+@media (max-width: 991.98px) {
 
+  .table-responsive-lg {
 
+    display: block;
 
+    width: 100%;
 
+    overflow-x: auto;
 
+    -webkit-overflow-scrolling: touch;
 
+  }
 
+  .table-responsive-lg > .table-bordered {
 
+    border: 0;
 
+  }
 
+}
 
+
 
+@media (max-width: 1199.98px) {
 
+  .table-responsive-xl {
 
+    display: block;
 
+    width: 100%;
 
+    overflow-x: auto;
 
+    -webkit-overflow-scrolling: touch;
 
+  }
 
+  .table-responsive-xl > .table-bordered {
 
+    border: 0;
 
+  }
 
+}
 
+
 
+.table-responsive {
 
+  display: block;
 
+  width: 100%;
 
+  overflow-x: auto;
 
+  -webkit-overflow-scrolling: touch;
 
+}
 
+
 
+.table-responsive > .table-bordered {
 
+  border: 0;
 
+}
 
+
 
+.form-control {
 
+  display: block;
 
+  width: 100%;
 
+  height: calc(1.5em + 0.75rem + 2px);
 
+  padding: 0.375rem 0.75rem;
 
+  font-size: 0.875rem;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  color: #5c6873;
 
+  background-color: #fff;
 
+  background-clip: padding-box;
 
+  border: 1px solid #e4e7ea;
 
+  border-radius: 0.25rem;
 
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .form-control {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.form-control::-ms-expand {
 
+  background-color: transparent;
 
+  border: 0;
 
+}
 
+
 
+.form-control:focus {
 
+  color: #5c6873;
 
+  background-color: #fff;
 
+  border-color: #8ad4ee;
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.form-control::-webkit-input-placeholder {
 
+  color: #73818f;
 
+  opacity: 1;
 
+}
 
+
 
+.form-control::-moz-placeholder {
 
+  color: #73818f;
 
+  opacity: 1;
 
+}
 
+
 
+.form-control:-ms-input-placeholder {
 
+  color: #73818f;
 
+  opacity: 1;
 
+}
 
+
 
+.form-control::-ms-input-placeholder {
 
+  color: #73818f;
 
+  opacity: 1;
 
+}
 
+
 
+.form-control::placeholder {
 
+  color: #73818f;
 
+  opacity: 1;
 
+}
 
+
 
+.form-control:disabled, .form-control[readonly] {
 
+  background-color: #e4e7ea;
 
+  opacity: 1;
 
+}
 
+
 
+select.form-control:focus::-ms-value {
 
+  color: #5c6873;
 
+  background-color: #fff;
 
+}
 
+
 
+.form-control-file,
 
+.form-control-range {
 
+  display: block;
 
+  width: 100%;
 
+}
 
+
 
+.col-form-label {
 
+  padding-top: calc(0.375rem + 1px);
 
+  padding-bottom: calc(0.375rem + 1px);
 
+  margin-bottom: 0;
 
+  font-size: inherit;
 
+  line-height: 1.5;
 
+}
 
+
 
+.col-form-label-lg {
 
+  padding-top: calc(0.5rem + 1px);
 
+  padding-bottom: calc(0.5rem + 1px);
 
+  font-size: 1.09375rem;
 
+  line-height: 1.5;
 
+}
 
+
 
+.col-form-label-sm {
 
+  padding-top: calc(0.25rem + 1px);
 
+  padding-bottom: calc(0.25rem + 1px);
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+}
 
+
 
+.form-control-plaintext {
 
+  display: block;
 
+  width: 100%;
 
+  padding-top: 0.375rem;
 
+  padding-bottom: 0.375rem;
 
+  margin-bottom: 0;
 
+  line-height: 1.5;
 
+  color: #23282c;
 
+  background-color: transparent;
 
+  border: solid transparent;
 
+  border-width: 1px 0;
 
+}
 
+
 
+.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
 
+  padding-right: 0;
 
+  padding-left: 0;
 
+}
 
+
 
+.form-control-sm {
 
+  height: calc(1.5em + 0.5rem + 2px);
 
+  padding: 0.25rem 0.5rem;
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.2rem;
 
+}
 
+
 
+.form-control-lg {
 
+  height: calc(1.5em + 1rem + 2px);
 
+  padding: 0.5rem 1rem;
 
+  font-size: 1.09375rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.3rem;
 
+}
 
+
 
+select.form-control[size], select.form-control[multiple] {
 
+  height: auto;
 
+}
 
+
 
+textarea.form-control {
 
+  height: auto;
 
+}
 
+
 
+.form-group {
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+.form-text {
 
+  display: block;
 
+  margin-top: 0.25rem;
 
+}
 
+
 
+.form-row {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  margin-right: -5px;
 
+  margin-left: -5px;
 
+}
 
+
 
+.form-row > .col,
 
+.form-row > [class*="col-"] {
 
+  padding-right: 5px;
 
+  padding-left: 5px;
 
+}
 
+
 
+.form-check {
 
+  position: relative;
 
+  display: block;
 
+  padding-left: 1.25rem;
 
+}
 
+
 
+.form-check-input {
 
+  position: absolute;
 
+  margin-top: 0.3rem;
 
+  margin-left: -1.25rem;
 
+}
 
+
 
+.form-check-input:disabled ~ .form-check-label {
 
+  color: #73818f;
 
+}
 
+
 
+.form-check-label {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.form-check-inline {
 
+  display: -ms-inline-flexbox;
 
+  display: inline-flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  padding-left: 0;
 
+  margin-right: 0.75rem;
 
+}
 
+
 
+.form-check-inline .form-check-input {
 
+  position: static;
 
+  margin-top: 0;
 
+  margin-right: 0.3125rem;
 
+  margin-left: 0;
 
+}
 
+
 
+.valid-feedback {
 
+  display: none;
 
+  width: 100%;
 
+  margin-top: 0.25rem;
 
+  font-size: 80%;
 
+  color: #4dbd74;
 
+}
 
+
 
+.valid-tooltip {
 
+  position: absolute;
 
+  top: 100%;
 
+  z-index: 5;
 
+  display: none;
 
+  max-width: 100%;
 
+  padding: 0.25rem 0.5rem;
 
+  margin-top: .1rem;
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+  color: #fff;
 
+  background-color: rgba(77, 189, 116, 0.9);
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.was-validated .form-control:valid, .form-control.is-valid {
 
+  border-color: #4dbd74;
 
+  padding-right: calc(1.5em + 0.75rem);
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
 
+  background-repeat: no-repeat;
 
+  background-position: center right calc(0.375em + 0.1875rem);
 
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 
+}
 
+
 
+.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
 
+  border-color: #4dbd74;
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25);
 
+}
 
+
 
+.was-validated .form-control:valid ~ .valid-feedback,
 
+.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
 
+.form-control.is-valid ~ .valid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
 
+  padding-right: calc(1.5em + 0.75rem);
 
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
 
+}
 
+
 
+.was-validated .custom-select:valid, .custom-select.is-valid {
 
+  border-color: #4dbd74;
 
+  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
 
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234dbd74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 
+}
 
+
 
+.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
 
+  border-color: #4dbd74;
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25);
 
+}
 
+
 
+.was-validated .custom-select:valid ~ .valid-feedback,
 
+.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback,
 
+.custom-select.is-valid ~ .valid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .form-control-file:valid ~ .valid-feedback,
 
+.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback,
 
+.form-control-file.is-valid ~ .valid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
 
+  color: #4dbd74;
 
+}
 
+
 
+.was-validated .form-check-input:valid ~ .valid-feedback,
 
+.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
 
+.form-check-input.is-valid ~ .valid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
 
+  color: #4dbd74;
 
+}
 
+
 
+.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.was-validated .custom-control-input:valid ~ .valid-feedback,
 
+.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback,
 
+.custom-control-input.is-valid ~ .valid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
 
+  border-color: #72cb91;
 
+  background-color: #72cb91;
 
+}
 
+
 
+.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25);
 
+}
 
+
 
+.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.was-validated .custom-file-input:valid ~ .valid-feedback,
 
+.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback,
 
+.custom-file-input.is-valid ~ .valid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
 
+  border-color: #4dbd74;
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.25);
 
+}
 
+
 
+.invalid-feedback {
 
+  display: none;
 
+  width: 100%;
 
+  margin-top: 0.25rem;
 
+  font-size: 80%;
 
+  color: #f86c6b;
 
+}
 
+
 
+.invalid-tooltip {
 
+  position: absolute;
 
+  top: 100%;
 
+  z-index: 5;
 
+  display: none;
 
+  max-width: 100%;
 
+  padding: 0.25rem 0.5rem;
 
+  margin-top: .1rem;
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+  color: #fff;
 
+  background-color: rgba(248, 108, 107, 0.9);
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.was-validated .form-control:invalid, .form-control.is-invalid {
 
+  border-color: #f86c6b;
 
+  padding-right: calc(1.5em + 0.75rem);
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
 
+  background-repeat: no-repeat;
 
+  background-position: center right calc(0.375em + 0.1875rem);
 
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 
+}
 
+
 
+.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
 
+  border-color: #f86c6b;
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25);
 
+}
 
+
 
+.was-validated .form-control:invalid ~ .invalid-feedback,
 
+.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback,
 
+.form-control.is-invalid ~ .invalid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
 
+  padding-right: calc(1.5em + 0.75rem);
 
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
 
+}
 
+
 
+.was-validated .custom-select:invalid, .custom-select.is-invalid {
 
+  border-color: #f86c6b;
 
+  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
 
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 
+}
 
+
 
+.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
 
+  border-color: #f86c6b;
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25);
 
+}
 
+
 
+.was-validated .custom-select:invalid ~ .invalid-feedback,
 
+.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback,
 
+.custom-select.is-invalid ~ .invalid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .form-control-file:invalid ~ .invalid-feedback,
 
+.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback,
 
+.form-control-file.is-invalid ~ .invalid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
 
+  color: #f86c6b;
 
+}
 
+
 
+.was-validated .form-check-input:invalid ~ .invalid-feedback,
 
+.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
 
+.form-check-input.is-invalid ~ .invalid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
 
+  color: #f86c6b;
 
+}
 
+
 
+.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.was-validated .custom-control-input:invalid ~ .invalid-feedback,
 
+.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback,
 
+.custom-control-input.is-invalid ~ .invalid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
 
+  border-color: #fa9c9c;
 
+  background-color: #fa9c9c;
 
+}
 
+
 
+.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25);
 
+}
 
+
 
+.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.was-validated .custom-file-input:invalid ~ .invalid-feedback,
 
+.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback,
 
+.custom-file-input.is-invalid ~ .invalid-tooltip {
 
+  display: block;
 
+}
 
+
 
+.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
 
+  border-color: #f86c6b;
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.25);
 
+}
 
+
 
+.form-inline {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-flow: row wrap;
 
+  flex-flow: row wrap;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+}
 
+
 
+.form-inline .form-check {
 
+  width: 100%;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .form-inline label {
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    -ms-flex-pack: center;
 
+    justify-content: center;
 
+    margin-bottom: 0;
 
+  }
 
+  .form-inline .form-group {
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -ms-flex: 0 0 auto;
 
+    flex: 0 0 auto;
 
+    -ms-flex-flow: row wrap;
 
+    flex-flow: row wrap;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    margin-bottom: 0;
 
+  }
 
+  .form-inline .form-control {
 
+    display: inline-block;
 
+    width: auto;
 
+    vertical-align: middle;
 
+  }
 
+  .form-inline .form-control-plaintext {
 
+    display: inline-block;
 
+  }
 
+  .form-inline .input-group,
 
+  .form-inline .custom-select {
 
+    width: auto;
 
+  }
 
+  .form-inline .form-check {
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    -ms-flex-pack: center;
 
+    justify-content: center;
 
+    width: auto;
 
+    padding-left: 0;
 
+  }
 
+  .form-inline .form-check-input {
 
+    position: relative;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    margin-top: 0;
 
+    margin-right: 0.25rem;
 
+    margin-left: 0;
 
+  }
 
+  .form-inline .custom-control {
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    -ms-flex-pack: center;
 
+    justify-content: center;
 
+  }
 
+  .form-inline .custom-control-label {
 
+    margin-bottom: 0;
 
+  }
 
+}
 
+
 
+.btn {
 
+  display: inline-block;
 
+  font-weight: 400;
 
+  color: #23282c;
 
+  text-align: center;
 
+  vertical-align: middle;
 
+  -webkit-user-select: none;
 
+  -moz-user-select: none;
 
+  -ms-user-select: none;
 
+  user-select: none;
 
+  background-color: transparent;
 
+  border: 1px solid transparent;
 
+  padding: 0.375rem 0.75rem;
 
+  font-size: 0.875rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.25rem;
 
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .btn {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.btn:hover {
 
+  color: #23282c;
 
+  text-decoration: none;
 
+}
 
+
 
+.btn:focus, .btn.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.btn.disabled, .btn:disabled {
 
+  opacity: 0.65;
 
+}
 
+
 
+a.btn.disabled,
 
+fieldset:disabled a.btn {
 
+  pointer-events: none;
 
+}
 
+
 
+.btn-primary {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-primary:hover {
 
+  color: #fff;
 
+  background-color: #1b8eb7;
 
+  border-color: #1985ac;
 
+}
 
+
 
+.btn-primary:focus, .btn-primary.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(65, 181, 222, 0.5);
 
+}
 
+
 
+.btn-primary.disabled, .btn-primary:disabled {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
 
+.show > .btn-primary.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #1985ac;
 
+  border-color: #187da0;
 
+}
 
+
 
+.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-primary.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(65, 181, 222, 0.5);
 
+}
 
+
 
+.btn-secondary {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-secondary:hover {
 
+  color: #23282c;
 
+  background-color: #b3bbc2;
 
+  border-color: #acb5bc;
 
+}
 
+
 
+.btn-secondary:focus, .btn-secondary.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(175, 181, 186, 0.5);
 
+}
 
+
 
+.btn-secondary.disabled, .btn-secondary:disabled {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
 
+.show > .btn-secondary.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #acb5bc;
 
+  border-color: #a5aeb7;
 
+}
 
+
 
+.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-secondary.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(175, 181, 186, 0.5);
 
+}
 
+
 
+.btn-success {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-success:hover {
 
+  color: #fff;
 
+  background-color: #3ea662;
 
+  border-color: #3a9d5d;
 
+}
 
+
 
+.btn-success:focus, .btn-success.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(104, 199, 137, 0.5);
 
+}
 
+
 
+.btn-success.disabled, .btn-success:disabled {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
 
+.show > .btn-success.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #3a9d5d;
 
+  border-color: #379457;
 
+}
 
+
 
+.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-success.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(104, 199, 137, 0.5);
 
+}
 
+
 
+.btn-info {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-info:hover {
 
+  color: #23282c;
 
+  background-color: #43b6d7;
 
+  border-color: #39b2d5;
 
+}
 
+
 
+.btn-info:focus, .btn-info.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(89, 171, 195, 0.5);
 
+}
 
+
 
+.btn-info.disabled, .btn-info:disabled {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
 
+.show > .btn-info.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #39b2d5;
 
+  border-color: #2eadd3;
 
+}
 
+
 
+.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-info.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(89, 171, 195, 0.5);
 
+}
 
+
 
+.btn-warning {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-warning:hover {
 
+  color: #23282c;
 
+  background-color: #e0a800;
 
+  border-color: #d39e00;
 
+}
 
+
 
+.btn-warning:focus, .btn-warning.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(222, 170, 13, 0.5);
 
+}
 
+
 
+.btn-warning.disabled, .btn-warning:disabled {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
 
+.show > .btn-warning.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #d39e00;
 
+  border-color: #c69500;
 
+}
 
+
 
+.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-warning.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(222, 170, 13, 0.5);
 
+}
 
+
 
+.btn-danger {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-danger:hover {
 
+  color: #fff;
 
+  background-color: #f64846;
 
+  border-color: #f63c3a;
 
+}
 
+
 
+.btn-danger:focus, .btn-danger.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(249, 130, 129, 0.5);
 
+}
 
+
 
+.btn-danger.disabled, .btn-danger:disabled {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
 
+.show > .btn-danger.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #f63c3a;
 
+  border-color: #f5302e;
 
+}
 
+
 
+.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-danger.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(249, 130, 129, 0.5);
 
+}
 
+
 
+.btn-light {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-light:hover {
 
+  color: #23282c;
 
+  background-color: #d9e1e6;
 
+  border-color: #d1dbe1;
 
+}
 
+
 
+.btn-light:focus, .btn-light.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(209, 213, 215, 0.5);
 
+}
 
+
 
+.btn-light.disabled, .btn-light:disabled {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
 
+.show > .btn-light.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #d1dbe1;
 
+  border-color: #cad4dc;
 
+}
 
+
 
+.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-light.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(209, 213, 215, 0.5);
 
+}
 
+
 
+.btn-dark {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-dark:hover {
 
+  color: #fff;
 
+  background-color: #1e2225;
 
+  border-color: #181b1e;
 
+}
 
+
 
+.btn-dark:focus, .btn-dark.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(78, 83, 88, 0.5);
 
+}
 
+
 
+.btn-dark.disabled, .btn-dark:disabled {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
 
+.show > .btn-dark.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #181b1e;
 
+  border-color: #121517;
 
+}
 
+
 
+.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-dark.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(78, 83, 88, 0.5);
 
+}
 
+
 
+.btn-outline-primary {
 
+  color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-outline-primary:hover {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-outline-primary:focus, .btn-outline-primary.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
 
+  color: #20a8d8;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-primary.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-primary.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.btn-outline-secondary {
 
+  color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-outline-secondary:hover {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-outline-secondary:focus, .btn-outline-secondary.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5);
 
+}
 
+
 
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
 
+  color: #c8ced3;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-secondary.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-secondary.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5);
 
+}
 
+
 
+.btn-outline-success {
 
+  color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-outline-success:hover {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-outline-success:focus, .btn-outline-success.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5);
 
+}
 
+
 
+.btn-outline-success.disabled, .btn-outline-success:disabled {
 
+  color: #4dbd74;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-success.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-success.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5);
 
+}
 
+
 
+.btn-outline-info {
 
+  color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-outline-info:hover {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-outline-info:focus, .btn-outline-info.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5);
 
+}
 
+
 
+.btn-outline-info.disabled, .btn-outline-info:disabled {
 
+  color: #63c2de;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-info.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-info.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5);
 
+}
 
+
 
+.btn-outline-warning {
 
+  color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-outline-warning:hover {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-outline-warning:focus, .btn-outline-warning.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
 
+}
 
+
 
+.btn-outline-warning.disabled, .btn-outline-warning:disabled {
 
+  color: #ffc107;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-warning.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-warning.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
 
+}
 
+
 
+.btn-outline-danger {
 
+  color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-outline-danger:hover {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-outline-danger:focus, .btn-outline-danger.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5);
 
+}
 
+
 
+.btn-outline-danger.disabled, .btn-outline-danger:disabled {
 
+  color: #f86c6b;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-danger.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-danger.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5);
 
+}
 
+
 
+.btn-outline-light {
 
+  color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-outline-light:hover {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-outline-light:focus, .btn-outline-light.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5);
 
+}
 
+
 
+.btn-outline-light.disabled, .btn-outline-light:disabled {
 
+  color: #f0f3f5;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-light.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-light.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5);
 
+}
 
+
 
+.btn-outline-dark {
 
+  color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-outline-dark:hover {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-outline-dark:focus, .btn-outline-dark.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5);
 
+}
 
+
 
+.btn-outline-dark.disabled, .btn-outline-dark:disabled {
 
+  color: #2f353a;
 
+  background-color: transparent;
 
+}
 
+
 
+.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
 
+.show > .btn-outline-dark.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-outline-dark.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5);
 
+}
 
+
 
+.btn-link {
 
+  font-weight: 400;
 
+  color: #20a8d8;
 
+  text-decoration: none;
 
+}
 
+
 
+.btn-link:hover {
 
+  color: #167495;
 
+  text-decoration: underline;
 
+}
 
+
 
+.btn-link:focus, .btn-link.focus {
 
+  text-decoration: underline;
 
+  box-shadow: none;
 
+}
 
+
 
+.btn-link:disabled, .btn-link.disabled {
 
+  color: #73818f;
 
+  pointer-events: none;
 
+}
 
+
 
+.btn-lg, .btn-group-lg > .btn {
 
+  padding: 0.5rem 1rem;
 
+  font-size: 1.09375rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.3rem;
 
+}
 
+
 
+.btn-sm, .btn-group-sm > .btn {
 
+  padding: 0.25rem 0.5rem;
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.2rem;
 
+}
 
+
 
+.btn-block {
 
+  display: block;
 
+  width: 100%;
 
+}
 
+
 
+.btn-block + .btn-block {
 
+  margin-top: 0.5rem;
 
+}
 
+
 
+input[type="submit"].btn-block,
 
+input[type="reset"].btn-block,
 
+input[type="button"].btn-block {
 
+  width: 100%;
 
+}
 
+
 
+.fade {
 
+  transition: opacity 0.15s linear;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .fade {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.fade:not(.show) {
 
+  opacity: 0;
 
+}
 
+
 
+.collapse:not(.show) {
 
+  display: none;
 
+}
 
+
 
+.collapsing {
 
+  position: relative;
 
+  height: 0;
 
+  overflow: hidden;
 
+  transition: height 0.35s ease;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .collapsing {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.dropup,
 
+.dropright,
 
+.dropdown,
 
+.dropleft {
 
+  position: relative;
 
+}
 
+
 
+.dropdown-toggle {
 
+  white-space: nowrap;
 
+}
 
+
 
+.dropdown-toggle::after {
 
+  display: inline-block;
 
+  margin-left: 0.255em;
 
+  vertical-align: 0.255em;
 
+  content: "";
 
+  border-top: 0.3em solid;
 
+  border-right: 0.3em solid transparent;
 
+  border-bottom: 0;
 
+  border-left: 0.3em solid transparent;
 
+}
 
+
 
+.dropdown-toggle:empty::after {
 
+  margin-left: 0;
 
+}
 
+
 
+.dropdown-menu {
 
+  position: absolute;
 
+  top: 100%;
 
+  left: 0;
 
+  z-index: 1000;
 
+  display: none;
 
+  float: left;
 
+  min-width: 10rem;
 
+  padding: 0 0;
 
+  margin: 0.125rem 0 0;
 
+  font-size: 0.875rem;
 
+  color: #23282c;
 
+  text-align: left;
 
+  list-style: none;
 
+  background-color: #fff;
 
+  background-clip: padding-box;
 
+  border: 1px solid #c8ced3;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.dropdown-menu-left {
 
+  right: auto;
 
+  left: 0;
 
+}
 
+
 
+.dropdown-menu-right {
 
+  right: 0;
 
+  left: auto;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .dropdown-menu-sm-left {
 
+    right: auto;
 
+    left: 0;
 
+  }
 
+  .dropdown-menu-sm-right {
 
+    right: 0;
 
+    left: auto;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .dropdown-menu-md-left {
 
+    right: auto;
 
+    left: 0;
 
+  }
 
+  .dropdown-menu-md-right {
 
+    right: 0;
 
+    left: auto;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .dropdown-menu-lg-left {
 
+    right: auto;
 
+    left: 0;
 
+  }
 
+  .dropdown-menu-lg-right {
 
+    right: 0;
 
+    left: auto;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .dropdown-menu-xl-left {
 
+    right: auto;
 
+    left: 0;
 
+  }
 
+  .dropdown-menu-xl-right {
 
+    right: 0;
 
+    left: auto;
 
+  }
 
+}
 
+
 
+.dropup .dropdown-menu {
 
+  top: auto;
 
+  bottom: 100%;
 
+  margin-top: 0;
 
+  margin-bottom: 0.125rem;
 
+}
 
+
 
+.dropup .dropdown-toggle::after {
 
+  display: inline-block;
 
+  margin-left: 0.255em;
 
+  vertical-align: 0.255em;
 
+  content: "";
 
+  border-top: 0;
 
+  border-right: 0.3em solid transparent;
 
+  border-bottom: 0.3em solid;
 
+  border-left: 0.3em solid transparent;
 
+}
 
+
 
+.dropup .dropdown-toggle:empty::after {
 
+  margin-left: 0;
 
+}
 
+
 
+.dropright .dropdown-menu {
 
+  top: 0;
 
+  right: auto;
 
+  left: 100%;
 
+  margin-top: 0;
 
+  margin-left: 0.125rem;
 
+}
 
+
 
+.dropright .dropdown-toggle::after {
 
+  display: inline-block;
 
+  margin-left: 0.255em;
 
+  vertical-align: 0.255em;
 
+  content: "";
 
+  border-top: 0.3em solid transparent;
 
+  border-right: 0;
 
+  border-bottom: 0.3em solid transparent;
 
+  border-left: 0.3em solid;
 
+}
 
+
 
+.dropright .dropdown-toggle:empty::after {
 
+  margin-left: 0;
 
+}
 
+
 
+.dropright .dropdown-toggle::after {
 
+  vertical-align: 0;
 
+}
 
+
 
+.dropleft .dropdown-menu {
 
+  top: 0;
 
+  right: 100%;
 
+  left: auto;
 
+  margin-top: 0;
 
+  margin-right: 0.125rem;
 
+}
 
+
 
+.dropleft .dropdown-toggle::after {
 
+  display: inline-block;
 
+  margin-left: 0.255em;
 
+  vertical-align: 0.255em;
 
+  content: "";
 
+}
 
+
 
+.dropleft .dropdown-toggle::after {
 
+  display: none;
 
+}
 
+
 
+.dropleft .dropdown-toggle::before {
 
+  display: inline-block;
 
+  margin-right: 0.255em;
 
+  vertical-align: 0.255em;
 
+  content: "";
 
+  border-top: 0.3em solid transparent;
 
+  border-right: 0.3em solid;
 
+  border-bottom: 0.3em solid transparent;
 
+}
 
+
 
+.dropleft .dropdown-toggle:empty::after {
 
+  margin-left: 0;
 
+}
 
+
 
+.dropleft .dropdown-toggle::before {
 
+  vertical-align: 0;
 
+}
 
+
 
+.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
 
+  right: auto;
 
+  bottom: auto;
 
+}
 
+
 
+.dropdown-divider {
 
+  height: 0;
 
+  margin: 0.5rem 0;
 
+  overflow: hidden;
 
+  border-top: 1px solid #e4e7ea;
 
+}
 
+
 
+.dropdown-item {
 
+  display: block;
 
+  width: 100%;
 
+  padding: 0.25rem 1.5rem;
 
+  clear: both;
 
+  font-weight: 400;
 
+  color: #23282c;
 
+  text-align: inherit;
 
+  white-space: nowrap;
 
+  background-color: transparent;
 
+  border: 0;
 
+}
 
+
 
+.dropdown-item:first-child {
 
+  border-top-left-radius: calc(0.25rem - 1px);
 
+  border-top-right-radius: calc(0.25rem - 1px);
 
+}
 
+
 
+.dropdown-item:last-child {
 
+  border-bottom-right-radius: calc(0.25rem - 1px);
 
+  border-bottom-left-radius: calc(0.25rem - 1px);
 
+}
 
+
 
+.dropdown-item:hover, .dropdown-item:focus {
 
+  color: #181b1e;
 
+  text-decoration: none;
 
+  background-color: #f0f3f5;
 
+}
 
+
 
+.dropdown-item.active, .dropdown-item:active {
 
+  color: #fff;
 
+  text-decoration: none;
 
+  background-color: #20a8d8;
 
+}
 
+
 
+.dropdown-item.disabled, .dropdown-item:disabled {
 
+  color: #73818f;
 
+  pointer-events: none;
 
+  background-color: transparent;
 
+}
 
+
 
+.dropdown-menu.show {
 
+  display: block;
 
+}
 
+
 
+.dropdown-header {
 
+  display: block;
 
+  padding: 0 1.5rem;
 
+  margin-bottom: 0;
 
+  font-size: 0.765625rem;
 
+  color: #73818f;
 
+  white-space: nowrap;
 
+}
 
+
 
+.dropdown-item-text {
 
+  display: block;
 
+  padding: 0.25rem 1.5rem;
 
+  color: #23282c;
 
+}
 
+
 
+.btn-group,
 
+.btn-group-vertical {
 
+  position: relative;
 
+  display: -ms-inline-flexbox;
 
+  display: inline-flex;
 
+  vertical-align: middle;
 
+}
 
+
 
+.btn-group > .btn,
 
+.btn-group-vertical > .btn {
 
+  position: relative;
 
+  -ms-flex: 1 1 auto;
 
+  flex: 1 1 auto;
 
+}
 
+
 
+.btn-group > .btn:hover,
 
+.btn-group-vertical > .btn:hover {
 
+  z-index: 1;
 
+}
 
+
 
+.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
 
+.btn-group-vertical > .btn:focus,
 
+.btn-group-vertical > .btn:active,
 
+.btn-group-vertical > .btn.active {
 
+  z-index: 1;
 
+}
 
+
 
+.btn-toolbar {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  -ms-flex-pack: start;
 
+  justify-content: flex-start;
 
+}
 
+
 
+.btn-toolbar .input-group {
 
+  width: auto;
 
+}
 
+
 
+.btn-group > .btn:not(:first-child),
 
+.btn-group > .btn-group:not(:first-child) {
 
+  margin-left: -1px;
 
+}
 
+
 
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
 
+.btn-group > .btn-group:not(:last-child) > .btn {
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+.btn-group > .btn:not(:first-child),
 
+.btn-group > .btn-group:not(:first-child) > .btn {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.dropdown-toggle-split {
 
+  padding-right: 0.5625rem;
 
+  padding-left: 0.5625rem;
 
+}
 
+
 
+.dropdown-toggle-split::after,
 
+.dropup .dropdown-toggle-split::after,
 
+.dropright .dropdown-toggle-split::after {
 
+  margin-left: 0;
 
+}
 
+
 
+.dropleft .dropdown-toggle-split::before {
 
+  margin-right: 0;
 
+}
 
+
 
+.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
 
+  padding-right: 0.375rem;
 
+  padding-left: 0.375rem;
 
+}
 
+
 
+.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
 
+  padding-right: 0.75rem;
 
+  padding-left: 0.75rem;
 
+}
 
+
 
+.btn-group-vertical {
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  -ms-flex-align: start;
 
+  align-items: flex-start;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+}
 
+
 
+.btn-group-vertical > .btn,
 
+.btn-group-vertical > .btn-group {
 
+  width: 100%;
 
+}
 
+
 
+.btn-group-vertical > .btn:not(:first-child),
 
+.btn-group-vertical > .btn-group:not(:first-child) {
 
+  margin-top: -1px;
 
+}
 
+
 
+.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
 
+.btn-group-vertical > .btn-group:not(:last-child) > .btn {
 
+  border-bottom-right-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.btn-group-vertical > .btn:not(:first-child),
 
+.btn-group-vertical > .btn-group:not(:first-child) > .btn {
 
+  border-top-left-radius: 0;
 
+  border-top-right-radius: 0;
 
+}
 
+
 
+.btn-group-toggle > .btn,
 
+.btn-group-toggle > .btn-group > .btn {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.btn-group-toggle > .btn input[type="radio"],
 
+.btn-group-toggle > .btn input[type="checkbox"],
 
+.btn-group-toggle > .btn-group > .btn input[type="radio"],
 
+.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
 
+  position: absolute;
 
+  clip: rect(0, 0, 0, 0);
 
+  pointer-events: none;
 
+}
 
+
 
+.input-group {
 
+  position: relative;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  -ms-flex-align: stretch;
 
+  align-items: stretch;
 
+  width: 100%;
 
+}
 
+
 
+.input-group > .form-control,
 
+.input-group > .form-control-plaintext,
 
+.input-group > .custom-select,
 
+.input-group > .custom-file {
 
+  position: relative;
 
+  -ms-flex: 1 1 auto;
 
+  flex: 1 1 auto;
 
+  width: 1%;
 
+  margin-bottom: 0;
 
+}
 
+
 
+.input-group > .form-control + .form-control,
 
+.input-group > .form-control + .custom-select,
 
+.input-group > .form-control + .custom-file,
 
+.input-group > .form-control-plaintext + .form-control,
 
+.input-group > .form-control-plaintext + .custom-select,
 
+.input-group > .form-control-plaintext + .custom-file,
 
+.input-group > .custom-select + .form-control,
 
+.input-group > .custom-select + .custom-select,
 
+.input-group > .custom-select + .custom-file,
 
+.input-group > .custom-file + .form-control,
 
+.input-group > .custom-file + .custom-select,
 
+.input-group > .custom-file + .custom-file {
 
+  margin-left: -1px;
 
+}
 
+
 
+.input-group > .form-control:focus,
 
+.input-group > .custom-select:focus,
 
+.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
 
+  z-index: 3;
 
+}
 
+
 
+.input-group > .custom-file .custom-file-input:focus {
 
+  z-index: 4;
 
+}
 
+
 
+.input-group > .form-control:not(:last-child),
 
+.input-group > .custom-select:not(:last-child) {
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+.input-group > .form-control:not(:first-child),
 
+.input-group > .custom-select:not(:first-child) {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.input-group > .custom-file {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+}
 
+
 
+.input-group > .custom-file:not(:last-child) .custom-file-label,
 
+.input-group > .custom-file:not(:last-child) .custom-file-label::after {
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+.input-group > .custom-file:not(:first-child) .custom-file-label {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.input-group-prepend,
 
+.input-group-append {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+
 
+.input-group-prepend .btn,
 
+.input-group-append .btn {
 
+  position: relative;
 
+  z-index: 2;
 
+}
 
+
 
+.input-group-prepend .btn:focus,
 
+.input-group-append .btn:focus {
 
+  z-index: 3;
 
+}
 
+
 
+.input-group-prepend .btn + .btn,
 
+.input-group-prepend .btn + .input-group-text,
 
+.input-group-prepend .input-group-text + .input-group-text,
 
+.input-group-prepend .input-group-text + .btn,
 
+.input-group-append .btn + .btn,
 
+.input-group-append .btn + .input-group-text,
 
+.input-group-append .input-group-text + .input-group-text,
 
+.input-group-append .input-group-text + .btn {
 
+  margin-left: -1px;
 
+}
 
+
 
+.input-group-prepend {
 
+  margin-right: -1px;
 
+}
 
+
 
+.input-group-append {
 
+  margin-left: -1px;
 
+}
 
+
 
+.input-group-text {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  padding: 0.375rem 0.75rem;
 
+  margin-bottom: 0;
 
+  font-size: 0.875rem;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  color: #5c6873;
 
+  text-align: center;
 
+  white-space: nowrap;
 
+  background-color: #f0f3f5;
 
+  border: 1px solid #e4e7ea;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.input-group-text input[type="radio"],
 
+.input-group-text input[type="checkbox"] {
 
+  margin-top: 0;
 
+}
 
+
 
+.input-group-lg > .form-control:not(textarea),
 
+.input-group-lg > .custom-select {
 
+  height: calc(1.5em + 1rem + 2px);
 
+}
 
+
 
+.input-group-lg > .form-control,
 
+.input-group-lg > .custom-select,
 
+.input-group-lg > .input-group-prepend > .input-group-text,
 
+.input-group-lg > .input-group-append > .input-group-text,
 
+.input-group-lg > .input-group-prepend > .btn,
 
+.input-group-lg > .input-group-append > .btn {
 
+  padding: 0.5rem 1rem;
 
+  font-size: 1.09375rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.3rem;
 
+}
 
+
 
+.input-group-sm > .form-control:not(textarea),
 
+.input-group-sm > .custom-select {
 
+  height: calc(1.5em + 0.5rem + 2px);
 
+}
 
+
 
+.input-group-sm > .form-control,
 
+.input-group-sm > .custom-select,
 
+.input-group-sm > .input-group-prepend > .input-group-text,
 
+.input-group-sm > .input-group-append > .input-group-text,
 
+.input-group-sm > .input-group-prepend > .btn,
 
+.input-group-sm > .input-group-append > .btn {
 
+  padding: 0.25rem 0.5rem;
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+  border-radius: 0.2rem;
 
+}
 
+
 
+.input-group-lg > .custom-select,
 
+.input-group-sm > .custom-select {
 
+  padding-right: 1.75rem;
 
+}
 
+
 
+.input-group > .input-group-prepend > .btn,
 
+.input-group > .input-group-prepend > .input-group-text,
 
+.input-group > .input-group-append:not(:last-child) > .btn,
 
+.input-group > .input-group-append:not(:last-child) > .input-group-text,
 
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+.input-group > .input-group-append > .btn,
 
+.input-group > .input-group-append > .input-group-text,
 
+.input-group > .input-group-prepend:not(:first-child) > .btn,
 
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
 
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.custom-control {
 
+  position: relative;
 
+  display: block;
 
+  min-height: 1.3125rem;
 
+  padding-left: 1.5rem;
 
+}
 
+
 
+.custom-control-inline {
 
+  display: -ms-inline-flexbox;
 
+  display: inline-flex;
 
+  margin-right: 1rem;
 
+}
 
+
 
+.custom-control-input {
 
+  position: absolute;
 
+  z-index: -1;
 
+  opacity: 0;
 
+}
 
+
 
+.custom-control-input:checked ~ .custom-control-label::before {
 
+  color: #fff;
 
+  border-color: #20a8d8;
 
+  background-color: #20a8d8;
 
+}
 
+
 
+.custom-control-input:focus ~ .custom-control-label::before {
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
 
+  border-color: #8ad4ee;
 
+}
 
+
 
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
 
+  color: #fff;
 
+  background-color: #b6e4f4;
 
+  border-color: #b6e4f4;
 
+}
 
+
 
+.custom-control-input:disabled ~ .custom-control-label {
 
+  color: #73818f;
 
+}
 
+
 
+.custom-control-input:disabled ~ .custom-control-label::before {
 
+  background-color: #e4e7ea;
 
+}
 
+
 
+.custom-control-label {
 
+  position: relative;
 
+  margin-bottom: 0;
 
+  vertical-align: top;
 
+}
 
+
 
+.custom-control-label::before {
 
+  position: absolute;
 
+  top: 0.15625rem;
 
+  left: -1.5rem;
 
+  display: block;
 
+  width: 1rem;
 
+  height: 1rem;
 
+  pointer-events: none;
 
+  content: "";
 
+  background-color: #fff;
 
+  border: #8f9ba6 solid 1px;
 
+}
 
+
 
+.custom-control-label::after {
 
+  position: absolute;
 
+  top: 0.15625rem;
 
+  left: -1.5rem;
 
+  display: block;
 
+  width: 1rem;
 
+  height: 1rem;
 
+  content: "";
 
+  background: no-repeat 50% / 50% 50%;
 
+}
 
+
 
+.custom-checkbox .custom-control-label::before {
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
 
+}
 
+
 
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
 
+  border-color: #20a8d8;
 
+  background-color: #20a8d8;
 
+}
 
+
 
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
 
+}
 
+
 
+.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
 
+  background-color: rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
 
+  background-color: rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.custom-radio .custom-control-label::before {
 
+  border-radius: 50%;
 
+}
 
+
 
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 
+}
 
+
 
+.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
 
+  background-color: rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.custom-switch {
 
+  padding-left: 2.25rem;
 
+}
 
+
 
+.custom-switch .custom-control-label::before {
 
+  left: -2.25rem;
 
+  width: 1.75rem;
 
+  pointer-events: all;
 
+  border-radius: 0.5rem;
 
+}
 
+
 
+.custom-switch .custom-control-label::after {
 
+  top: calc(0.15625rem + 2px);
 
+  left: calc(-2.25rem + 2px);
 
+  width: calc(1rem - 4px);
 
+  height: calc(1rem - 4px);
 
+  background-color: #8f9ba6;
 
+  border-radius: 0.5rem;
 
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
 
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .custom-switch .custom-control-label::after {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
 
+  background-color: #fff;
 
+  -webkit-transform: translateX(0.75rem);
 
+  transform: translateX(0.75rem);
 
+}
 
+
 
+.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
 
+  background-color: rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.custom-select {
 
+  display: inline-block;
 
+  width: 100%;
 
+  height: calc(1.5em + 0.75rem + 2px);
 
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
 
+  font-size: 0.875rem;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  color: #5c6873;
 
+  vertical-align: middle;
 
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232f353a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
 
+  background-color: #fff;
 
+  border: 1px solid #e4e7ea;
 
+  border-radius: 0.25rem;
 
+  -webkit-appearance: none;
 
+  -moz-appearance: none;
 
+  appearance: none;
 
+}
 
+
 
+.custom-select:focus {
 
+  border-color: #8ad4ee;
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.custom-select:focus::-ms-value {
 
+  color: #5c6873;
 
+  background-color: #fff;
 
+}
 
+
 
+.custom-select[multiple], .custom-select[size]:not([size="1"]) {
 
+  height: auto;
 
+  padding-right: 0.75rem;
 
+  background-image: none;
 
+}
 
+
 
+.custom-select:disabled {
 
+  color: #73818f;
 
+  background-color: #e4e7ea;
 
+}
 
+
 
+.custom-select::-ms-expand {
 
+  display: none;
 
+}
 
+
 
+.custom-select-sm {
 
+  height: calc(1.5em + 0.5rem + 2px);
 
+  padding-top: 0.25rem;
 
+  padding-bottom: 0.25rem;
 
+  padding-left: 0.5rem;
 
+  font-size: 0.765625rem;
 
+}
 
+
 
+.custom-select-lg {
 
+  height: calc(1.5em + 1rem + 2px);
 
+  padding-top: 0.5rem;
 
+  padding-bottom: 0.5rem;
 
+  padding-left: 1rem;
 
+  font-size: 1.09375rem;
 
+}
 
+
 
+.custom-file {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 100%;
 
+  height: calc(1.5em + 0.75rem + 2px);
 
+  margin-bottom: 0;
 
+}
 
+
 
+.custom-file-input {
 
+  position: relative;
 
+  z-index: 2;
 
+  width: 100%;
 
+  height: calc(1.5em + 0.75rem + 2px);
 
+  margin: 0;
 
+  opacity: 0;
 
+}
 
+
 
+.custom-file-input:focus ~ .custom-file-label {
 
+  border-color: #8ad4ee;
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.custom-file-input:disabled ~ .custom-file-label {
 
+  background-color: #e4e7ea;
 
+}
 
+
 
+.custom-file-input:lang(en) ~ .custom-file-label::after {
 
+  content: "Browse";
 
+}
 
+
 
+.custom-file-input ~ .custom-file-label[data-browse]::after {
 
+  content: attr(data-browse);
 
+}
 
+
 
+.custom-file-label {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  left: 0;
 
+  z-index: 1;
 
+  height: calc(1.5em + 0.75rem + 2px);
 
+  padding: 0.375rem 0.75rem;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  color: #5c6873;
 
+  background-color: #fff;
 
+  border: 1px solid #e4e7ea;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.custom-file-label::after {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  z-index: 3;
 
+  display: block;
 
+  height: calc(1.5em + 0.75rem);
 
+  padding: 0.375rem 0.75rem;
 
+  line-height: 1.5;
 
+  color: #5c6873;
 
+  content: "Browse";
 
+  background-color: #f0f3f5;
 
+  border-left: inherit;
 
+  border-radius: 0 0.25rem 0.25rem 0;
 
+}
 
+
 
+.custom-range {
 
+  width: 100%;
 
+  height: calc(1rem + 0.4rem);
 
+  padding: 0;
 
+  background-color: transparent;
 
+  -webkit-appearance: none;
 
+  -moz-appearance: none;
 
+  appearance: none;
 
+}
 
+
 
+.custom-range:focus {
 
+  outline: none;
 
+}
 
+
 
+.custom-range:focus::-webkit-slider-thumb {
 
+  box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.custom-range:focus::-moz-range-thumb {
 
+  box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.custom-range:focus::-ms-thumb {
 
+  box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.custom-range::-moz-focus-outer {
 
+  border: 0;
 
+}
 
+
 
+.custom-range::-webkit-slider-thumb {
 
+  width: 1rem;
 
+  height: 1rem;
 
+  margin-top: -0.25rem;
 
+  background-color: #20a8d8;
 
+  border: 0;
 
+  border-radius: 1rem;
 
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+  -webkit-appearance: none;
 
+  appearance: none;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .custom-range::-webkit-slider-thumb {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.custom-range::-webkit-slider-thumb:active {
 
+  background-color: #b6e4f4;
 
+}
 
+
 
+.custom-range::-webkit-slider-runnable-track {
 
+  width: 100%;
 
+  height: 0.5rem;
 
+  color: transparent;
 
+  cursor: pointer;
 
+  background-color: #c8ced3;
 
+  border-color: transparent;
 
+  border-radius: 1rem;
 
+}
 
+
 
+.custom-range::-moz-range-thumb {
 
+  width: 1rem;
 
+  height: 1rem;
 
+  background-color: #20a8d8;
 
+  border: 0;
 
+  border-radius: 1rem;
 
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+  -moz-appearance: none;
 
+  appearance: none;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .custom-range::-moz-range-thumb {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.custom-range::-moz-range-thumb:active {
 
+  background-color: #b6e4f4;
 
+}
 
+
 
+.custom-range::-moz-range-track {
 
+  width: 100%;
 
+  height: 0.5rem;
 
+  color: transparent;
 
+  cursor: pointer;
 
+  background-color: #c8ced3;
 
+  border-color: transparent;
 
+  border-radius: 1rem;
 
+}
 
+
 
+.custom-range::-ms-thumb {
 
+  width: 1rem;
 
+  height: 1rem;
 
+  margin-top: 0;
 
+  margin-right: 0.2rem;
 
+  margin-left: 0.2rem;
 
+  background-color: #20a8d8;
 
+  border: 0;
 
+  border-radius: 1rem;
 
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+  appearance: none;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .custom-range::-ms-thumb {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.custom-range::-ms-thumb:active {
 
+  background-color: #b6e4f4;
 
+}
 
+
 
+.custom-range::-ms-track {
 
+  width: 100%;
 
+  height: 0.5rem;
 
+  color: transparent;
 
+  cursor: pointer;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+  border-width: 0.5rem;
 
+}
 
+
 
+.custom-range::-ms-fill-lower {
 
+  background-color: #c8ced3;
 
+  border-radius: 1rem;
 
+}
 
+
 
+.custom-range::-ms-fill-upper {
 
+  margin-right: 15px;
 
+  background-color: #c8ced3;
 
+  border-radius: 1rem;
 
+}
 
+
 
+.custom-range:disabled::-webkit-slider-thumb {
 
+  background-color: #8f9ba6;
 
+}
 
+
 
+.custom-range:disabled::-webkit-slider-runnable-track {
 
+  cursor: default;
 
+}
 
+
 
+.custom-range:disabled::-moz-range-thumb {
 
+  background-color: #8f9ba6;
 
+}
 
+
 
+.custom-range:disabled::-moz-range-track {
 
+  cursor: default;
 
+}
 
+
 
+.custom-range:disabled::-ms-thumb {
 
+  background-color: #8f9ba6;
 
+}
 
+
 
+.custom-control-label::before,
 
+.custom-file-label,
 
+.custom-select {
 
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .custom-control-label::before,
 
+  .custom-file-label,
 
+  .custom-select {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.nav {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  padding-left: 0;
 
+  margin-bottom: 0;
 
+  list-style: none;
 
+}
 
+
 
+.nav-link {
 
+  display: block;
 
+  padding: 0.5rem 1rem;
 
+}
 
+
 
+.nav-link:hover, .nav-link:focus {
 
+  text-decoration: none;
 
+}
 
+
 
+.nav-link.disabled {
 
+  color: #73818f;
 
+  pointer-events: none;
 
+  cursor: default;
 
+}
 
+
 
+.nav-tabs {
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+.nav-tabs .nav-item {
 
+  margin-bottom: -1px;
 
+}
 
+
 
+.nav-tabs .nav-link {
 
+  border: 1px solid transparent;
 
+  border-top-left-radius: 0.25rem;
 
+  border-top-right-radius: 0.25rem;
 
+}
 
+
 
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
 
+  border-color: #e4e7ea #e4e7ea #c8ced3;
 
+}
 
+
 
+.nav-tabs .nav-link.disabled {
 
+  color: #73818f;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.nav-tabs .nav-link.active,
 
+.nav-tabs .nav-item.show .nav-link {
 
+  color: #5c6873;
 
+  background-color: #e4e5e6;
 
+  border-color: #c8ced3 #c8ced3 #e4e5e6;
 
+}
 
+
 
+.nav-tabs .dropdown-menu {
 
+  margin-top: -1px;
 
+  border-top-left-radius: 0;
 
+  border-top-right-radius: 0;
 
+}
 
+
 
+.nav-pills .nav-link {
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.nav-pills .nav-link.active,
 
+.nav-pills .show > .nav-link {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+}
 
+
 
+.nav-fill .nav-item {
 
+  -ms-flex: 1 1 auto;
 
+  flex: 1 1 auto;
 
+  text-align: center;
 
+}
 
+
 
+.nav-justified .nav-item {
 
+  -ms-flex-preferred-size: 0;
 
+  flex-basis: 0;
 
+  -ms-flex-positive: 1;
 
+  flex-grow: 1;
 
+  text-align: center;
 
+}
 
+
 
+.tab-content > .tab-pane {
 
+  display: none;
 
+}
 
+
 
+.tab-content > .active {
 
+  display: block;
 
+}
 
+
 
+.navbar {
 
+  position: relative;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: justify;
 
+  justify-content: space-between;
 
+  padding: 0.5rem 1rem;
 
+}
 
+
 
+.navbar > .container,
 
+.navbar > .container-fluid {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: justify;
 
+  justify-content: space-between;
 
+}
 
+
 
+.navbar-brand {
 
+  display: inline-block;
 
+  padding-top: 0.335938rem;
 
+  padding-bottom: 0.335938rem;
 
+  margin-right: 1rem;
 
+  font-size: 1.09375rem;
 
+  line-height: inherit;
 
+  white-space: nowrap;
 
+}
 
+
 
+.navbar-brand:hover, .navbar-brand:focus {
 
+  text-decoration: none;
 
+}
 
+
 
+.navbar-nav {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  padding-left: 0;
 
+  margin-bottom: 0;
 
+  list-style: none;
 
+}
 
+
 
+.navbar-nav .nav-link {
 
+  padding-right: 0;
 
+  padding-left: 0;
 
+}
 
+
 
+.navbar-nav .dropdown-menu {
 
+  position: static;
 
+  float: none;
 
+}
 
+
 
+.navbar-text {
 
+  display: inline-block;
 
+  padding-top: 0.5rem;
 
+  padding-bottom: 0.5rem;
 
+}
 
+
 
+.navbar-collapse {
 
+  -ms-flex-preferred-size: 100%;
 
+  flex-basis: 100%;
 
+  -ms-flex-positive: 1;
 
+  flex-grow: 1;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+}
 
+
 
+.navbar-toggler {
 
+  padding: 0.25rem 0.75rem;
 
+  font-size: 1.09375rem;
 
+  line-height: 1;
 
+  background-color: transparent;
 
+  border: 1px solid transparent;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.navbar-toggler:hover, .navbar-toggler:focus {
 
+  text-decoration: none;
 
+}
 
+
 
+.navbar-toggler-icon {
 
+  display: inline-block;
 
+  width: 1.5em;
 
+  height: 1.5em;
 
+  vertical-align: middle;
 
+  content: "";
 
+  background: no-repeat center center;
 
+  background-size: 100% 100%;
 
+}
 
+
 
+@media (max-width: 575.98px) {
 
+  .navbar-expand-sm > .container,
 
+  .navbar-expand-sm > .container-fluid {
 
+    padding-right: 0;
 
+    padding-left: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .navbar-expand-sm {
 
+    -ms-flex-flow: row nowrap;
 
+    flex-flow: row nowrap;
 
+    -ms-flex-pack: start;
 
+    justify-content: flex-start;
 
+  }
 
+  .navbar-expand-sm .navbar-nav {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
 
+    position: absolute;
 
+  }
 
+  .navbar-expand-sm .navbar-nav .nav-link {
 
+    padding-right: 0.5rem;
 
+    padding-left: 0.5rem;
 
+  }
 
+  .navbar-expand-sm > .container,
 
+  .navbar-expand-sm > .container-fluid {
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+  }
 
+  .navbar-expand-sm .navbar-collapse {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto;
 
+  }
 
+  .navbar-expand-sm .navbar-toggler {
 
+    display: none;
 
+  }
 
+}
 
+
 
+@media (max-width: 767.98px) {
 
+  .navbar-expand-md > .container,
 
+  .navbar-expand-md > .container-fluid {
 
+    padding-right: 0;
 
+    padding-left: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .navbar-expand-md {
 
+    -ms-flex-flow: row nowrap;
 
+    flex-flow: row nowrap;
 
+    -ms-flex-pack: start;
 
+    justify-content: flex-start;
 
+  }
 
+  .navbar-expand-md .navbar-nav {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .navbar-expand-md .navbar-nav .dropdown-menu {
 
+    position: absolute;
 
+  }
 
+  .navbar-expand-md .navbar-nav .nav-link {
 
+    padding-right: 0.5rem;
 
+    padding-left: 0.5rem;
 
+  }
 
+  .navbar-expand-md > .container,
 
+  .navbar-expand-md > .container-fluid {
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+  }
 
+  .navbar-expand-md .navbar-collapse {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto;
 
+  }
 
+  .navbar-expand-md .navbar-toggler {
 
+    display: none;
 
+  }
 
+}
 
+
 
+@media (max-width: 991.98px) {
 
+  .navbar-expand-lg > .container,
 
+  .navbar-expand-lg > .container-fluid {
 
+    padding-right: 0;
 
+    padding-left: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .navbar-expand-lg {
 
+    -ms-flex-flow: row nowrap;
 
+    flex-flow: row nowrap;
 
+    -ms-flex-pack: start;
 
+    justify-content: flex-start;
 
+  }
 
+  .navbar-expand-lg .navbar-nav {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
 
+    position: absolute;
 
+  }
 
+  .navbar-expand-lg .navbar-nav .nav-link {
 
+    padding-right: 0.5rem;
 
+    padding-left: 0.5rem;
 
+  }
 
+  .navbar-expand-lg > .container,
 
+  .navbar-expand-lg > .container-fluid {
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+  }
 
+  .navbar-expand-lg .navbar-collapse {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto;
 
+  }
 
+  .navbar-expand-lg .navbar-toggler {
 
+    display: none;
 
+  }
 
+}
 
+
 
+@media (max-width: 1199.98px) {
 
+  .navbar-expand-xl > .container,
 
+  .navbar-expand-xl > .container-fluid {
 
+    padding-right: 0;
 
+    padding-left: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .navbar-expand-xl {
 
+    -ms-flex-flow: row nowrap;
 
+    flex-flow: row nowrap;
 
+    -ms-flex-pack: start;
 
+    justify-content: flex-start;
 
+  }
 
+  .navbar-expand-xl .navbar-nav {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
 
+    position: absolute;
 
+  }
 
+  .navbar-expand-xl .navbar-nav .nav-link {
 
+    padding-right: 0.5rem;
 
+    padding-left: 0.5rem;
 
+  }
 
+  .navbar-expand-xl > .container,
 
+  .navbar-expand-xl > .container-fluid {
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+  }
 
+  .navbar-expand-xl .navbar-collapse {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto;
 
+  }
 
+  .navbar-expand-xl .navbar-toggler {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.navbar-expand {
 
+  -ms-flex-flow: row nowrap;
 
+  flex-flow: row nowrap;
 
+  -ms-flex-pack: start;
 
+  justify-content: flex-start;
 
+}
 
+
 
+.navbar-expand > .container,
 
+.navbar-expand > .container-fluid {
 
+  padding-right: 0;
 
+  padding-left: 0;
 
+}
 
+
 
+.navbar-expand .navbar-nav {
 
+  -ms-flex-direction: row;
 
+  flex-direction: row;
 
+}
 
+
 
+.navbar-expand .navbar-nav .dropdown-menu {
 
+  position: absolute;
 
+}
 
+
 
+.navbar-expand .navbar-nav .nav-link {
 
+  padding-right: 0.5rem;
 
+  padding-left: 0.5rem;
 
+}
 
+
 
+.navbar-expand > .container,
 
+.navbar-expand > .container-fluid {
 
+  -ms-flex-wrap: nowrap;
 
+  flex-wrap: nowrap;
 
+}
 
+
 
+.navbar-expand .navbar-collapse {
 
+  display: -ms-flexbox !important;
 
+  display: flex !important;
 
+  -ms-flex-preferred-size: auto;
 
+  flex-basis: auto;
 
+}
 
+
 
+.navbar-expand .navbar-toggler {
 
+  display: none;
 
+}
 
+
 
+.navbar-light .navbar-brand {
 
+  color: rgba(0, 0, 0, 0.9);
 
+}
 
+
 
+.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
 
+  color: rgba(0, 0, 0, 0.9);
 
+}
 
+
 
+.navbar-light .navbar-nav .nav-link {
 
+  color: rgba(0, 0, 0, 0.5);
 
+}
 
+
 
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
 
+  color: rgba(0, 0, 0, 0.7);
 
+}
 
+
 
+.navbar-light .navbar-nav .nav-link.disabled {
 
+  color: rgba(0, 0, 0, 0.3);
 
+}
 
+
 
+.navbar-light .navbar-nav .show > .nav-link,
 
+.navbar-light .navbar-nav .active > .nav-link,
 
+.navbar-light .navbar-nav .nav-link.show,
 
+.navbar-light .navbar-nav .nav-link.active {
 
+  color: rgba(0, 0, 0, 0.9);
 
+}
 
+
 
+.navbar-light .navbar-toggler {
 
+  color: rgba(0, 0, 0, 0.5);
 
+  border-color: rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.navbar-light .navbar-toggler-icon {
 
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 
+}
 
+
 
+.navbar-light .navbar-text {
 
+  color: rgba(0, 0, 0, 0.5);
 
+}
 
+
 
+.navbar-light .navbar-text a {
 
+  color: rgba(0, 0, 0, 0.9);
 
+}
 
+
 
+.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
 
+  color: rgba(0, 0, 0, 0.9);
 
+}
 
+
 
+.navbar-dark .navbar-brand {
 
+  color: #fff;
 
+}
 
+
 
+.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
 
+  color: #fff;
 
+}
 
+
 
+.navbar-dark .navbar-nav .nav-link {
 
+  color: rgba(255, 255, 255, 0.5);
 
+}
 
+
 
+.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
 
+  color: rgba(255, 255, 255, 0.75);
 
+}
 
+
 
+.navbar-dark .navbar-nav .nav-link.disabled {
 
+  color: rgba(255, 255, 255, 0.25);
 
+}
 
+
 
+.navbar-dark .navbar-nav .show > .nav-link,
 
+.navbar-dark .navbar-nav .active > .nav-link,
 
+.navbar-dark .navbar-nav .nav-link.show,
 
+.navbar-dark .navbar-nav .nav-link.active {
 
+  color: #fff;
 
+}
 
+
 
+.navbar-dark .navbar-toggler {
 
+  color: rgba(255, 255, 255, 0.5);
 
+  border-color: rgba(255, 255, 255, 0.1);
 
+}
 
+
 
+.navbar-dark .navbar-toggler-icon {
 
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 
+}
 
+
 
+.navbar-dark .navbar-text {
 
+  color: rgba(255, 255, 255, 0.5);
 
+}
 
+
 
+.navbar-dark .navbar-text a {
 
+  color: #fff;
 
+}
 
+
 
+.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
 
+  color: #fff;
 
+}
 
+
 
+.card {
 
+  position: relative;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  min-width: 0;
 
+  word-wrap: break-word;
 
+  background-color: #fff;
 
+  background-clip: border-box;
 
+  border: 1px solid #c8ced3;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.card > hr {
 
+  margin-right: 0;
 
+  margin-left: 0;
 
+}
 
+
 
+.card > .list-group:first-child .list-group-item:first-child {
 
+  border-top-left-radius: 0.25rem;
 
+  border-top-right-radius: 0.25rem;
 
+}
 
+
 
+.card > .list-group:last-child .list-group-item:last-child {
 
+  border-bottom-right-radius: 0.25rem;
 
+  border-bottom-left-radius: 0.25rem;
 
+}
 
+
 
+.card-body {
 
+  -ms-flex: 1 1 auto;
 
+  flex: 1 1 auto;
 
+  padding: 1.25rem;
 
+}
 
+
 
+.card-title {
 
+  margin-bottom: 0.75rem;
 
+}
 
+
 
+.card-subtitle {
 
+  margin-top: -0.375rem;
 
+  margin-bottom: 0;
 
+}
 
+
 
+.card-text:last-child {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.card-link:hover {
 
+  text-decoration: none;
 
+}
 
+
 
+.card-link + .card-link {
 
+  margin-left: 1.25rem;
 
+}
 
+
 
+.card-header {
 
+  padding: 0.75rem 1.25rem;
 
+  margin-bottom: 0;
 
+  background-color: #f0f3f5;
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+.card-header:first-child {
 
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
 
+}
 
+
 
+.card-header + .list-group .list-group-item:first-child {
 
+  border-top: 0;
 
+}
 
+
 
+.card-footer {
 
+  padding: 0.75rem 1.25rem;
 
+  background-color: #f0f3f5;
 
+  border-top: 1px solid #c8ced3;
 
+}
 
+
 
+.card-footer:last-child {
 
+  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
 
+}
 
+
 
+.card-header-tabs {
 
+  margin-right: -0.625rem;
 
+  margin-bottom: -0.75rem;
 
+  margin-left: -0.625rem;
 
+  border-bottom: 0;
 
+}
 
+
 
+.card-header-pills {
 
+  margin-right: -0.625rem;
 
+  margin-left: -0.625rem;
 
+}
 
+
 
+.card-img-overlay {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  padding: 1.25rem;
 
+}
 
+
 
+.card-img {
 
+  width: 100%;
 
+  border-radius: calc(0.25rem - 1px);
 
+}
 
+
 
+.card-img-top {
 
+  width: 100%;
 
+  border-top-left-radius: calc(0.25rem - 1px);
 
+  border-top-right-radius: calc(0.25rem - 1px);
 
+}
 
+
 
+.card-img-bottom {
 
+  width: 100%;
 
+  border-bottom-right-radius: calc(0.25rem - 1px);
 
+  border-bottom-left-radius: calc(0.25rem - 1px);
 
+}
 
+
 
+.card-deck {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+}
 
+
 
+.card-deck .card {
 
+  margin-bottom: 15px;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .card-deck {
 
+    -ms-flex-flow: row wrap;
 
+    flex-flow: row wrap;
 
+    margin-right: -15px;
 
+    margin-left: -15px;
 
+  }
 
+  .card-deck .card {
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -ms-flex: 1 0 0%;
 
+    flex: 1 0 0%;
 
+    -ms-flex-direction: column;
 
+    flex-direction: column;
 
+    margin-right: 15px;
 
+    margin-bottom: 0;
 
+    margin-left: 15px;
 
+  }
 
+}
 
+
 
+.card-group {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+}
 
+
 
+.card-group > .card {
 
+  margin-bottom: 15px;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .card-group {
 
+    -ms-flex-flow: row wrap;
 
+    flex-flow: row wrap;
 
+  }
 
+  .card-group > .card {
 
+    -ms-flex: 1 0 0%;
 
+    flex: 1 0 0%;
 
+    margin-bottom: 0;
 
+  }
 
+  .card-group > .card + .card {
 
+    margin-left: 0;
 
+    border-left: 0;
 
+  }
 
+  .card-group > .card:not(:last-child) {
 
+    border-top-right-radius: 0;
 
+    border-bottom-right-radius: 0;
 
+  }
 
+  .card-group > .card:not(:last-child) .card-img-top,
 
+  .card-group > .card:not(:last-child) .card-header {
 
+    border-top-right-radius: 0;
 
+  }
 
+  .card-group > .card:not(:last-child) .card-img-bottom,
 
+  .card-group > .card:not(:last-child) .card-footer {
 
+    border-bottom-right-radius: 0;
 
+  }
 
+  .card-group > .card:not(:first-child) {
 
+    border-top-left-radius: 0;
 
+    border-bottom-left-radius: 0;
 
+  }
 
+  .card-group > .card:not(:first-child) .card-img-top,
 
+  .card-group > .card:not(:first-child) .card-header {
 
+    border-top-left-radius: 0;
 
+  }
 
+  .card-group > .card:not(:first-child) .card-img-bottom,
 
+  .card-group > .card:not(:first-child) .card-footer {
 
+    border-bottom-left-radius: 0;
 
+  }
 
+}
 
+
 
+.card-columns .card {
 
+  margin-bottom: 0.75rem;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .card-columns {
 
+    -webkit-column-count: 3;
 
+    -moz-column-count: 3;
 
+    column-count: 3;
 
+    -webkit-column-gap: 1.25rem;
 
+    -moz-column-gap: 1.25rem;
 
+    column-gap: 1.25rem;
 
+    orphans: 1;
 
+    widows: 1;
 
+  }
 
+  .card-columns .card {
 
+    display: inline-block;
 
+    width: 100%;
 
+  }
 
+}
 
+
 
+.accordion > .card {
 
+  overflow: hidden;
 
+}
 
+
 
+.accordion > .card:not(:first-of-type) .card-header:first-child {
 
+  border-radius: 0;
 
+}
 
+
 
+.accordion > .card:not(:first-of-type):not(:last-of-type) {
 
+  border-bottom: 0;
 
+  border-radius: 0;
 
+}
 
+
 
+.accordion > .card:first-of-type {
 
+  border-bottom: 0;
 
+  border-bottom-right-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.accordion > .card:last-of-type {
 
+  border-top-left-radius: 0;
 
+  border-top-right-radius: 0;
 
+}
 
+
 
+.accordion > .card .card-header {
 
+  margin-bottom: -1px;
 
+}
 
+
 
+.breadcrumb {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  padding: 0.75rem 1rem;
 
+  margin-bottom: 1.5rem;
 
+  list-style: none;
 
+  background-color: #fff;
 
+  border-radius: 0;
 
+}
 
+
 
+.breadcrumb-item + .breadcrumb-item {
 
+  padding-left: 0.5rem;
 
+}
 
+
 
+.breadcrumb-item + .breadcrumb-item::before {
 
+  display: inline-block;
 
+  padding-right: 0.5rem;
 
+  color: #73818f;
 
+  content: "/";
 
+}
 
+
 
+.breadcrumb-item + .breadcrumb-item:hover::before {
 
+  text-decoration: underline;
 
+}
 
+
 
+.breadcrumb-item + .breadcrumb-item:hover::before {
 
+  text-decoration: none;
 
+}
 
+
 
+.breadcrumb-item.active {
 
+  color: #73818f;
 
+}
 
+
 
+.pagination {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  padding-left: 0;
 
+  list-style: none;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.page-link {
 
+  position: relative;
 
+  display: block;
 
+  padding: 0.5rem 0.75rem;
 
+  margin-left: -1px;
 
+  line-height: 1.25;
 
+  color: #20a8d8;
 
+  background-color: #fff;
 
+  border: 1px solid #c8ced3;
 
+}
 
+
 
+.page-link:hover {
 
+  z-index: 2;
 
+  color: #167495;
 
+  text-decoration: none;
 
+  background-color: #e4e7ea;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.page-link:focus {
 
+  z-index: 2;
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
 
+}
 
+
 
+.page-item:first-child .page-link {
 
+  margin-left: 0;
 
+  border-top-left-radius: 0.25rem;
 
+  border-bottom-left-radius: 0.25rem;
 
+}
 
+
 
+.page-item:last-child .page-link {
 
+  border-top-right-radius: 0.25rem;
 
+  border-bottom-right-radius: 0.25rem;
 
+}
 
+
 
+.page-item.active .page-link {
 
+  z-index: 1;
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.page-item.disabled .page-link {
 
+  color: #73818f;
 
+  pointer-events: none;
 
+  cursor: auto;
 
+  background-color: #fff;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.pagination-lg .page-link {
 
+  padding: 0.75rem 1.5rem;
 
+  font-size: 1.09375rem;
 
+  line-height: 1.5;
 
+}
 
+
 
+.pagination-lg .page-item:first-child .page-link {
 
+  border-top-left-radius: 0.3rem;
 
+  border-bottom-left-radius: 0.3rem;
 
+}
 
+
 
+.pagination-lg .page-item:last-child .page-link {
 
+  border-top-right-radius: 0.3rem;
 
+  border-bottom-right-radius: 0.3rem;
 
+}
 
+
 
+.pagination-sm .page-link {
 
+  padding: 0.25rem 0.5rem;
 
+  font-size: 0.765625rem;
 
+  line-height: 1.5;
 
+}
 
+
 
+.pagination-sm .page-item:first-child .page-link {
 
+  border-top-left-radius: 0.2rem;
 
+  border-bottom-left-radius: 0.2rem;
 
+}
 
+
 
+.pagination-sm .page-item:last-child .page-link {
 
+  border-top-right-radius: 0.2rem;
 
+  border-bottom-right-radius: 0.2rem;
 
+}
 
+
 
+.badge {
 
+  display: inline-block;
 
+  padding: 0.25em 0.4em;
 
+  font-size: 75%;
 
+  font-weight: 700;
 
+  line-height: 1;
 
+  text-align: center;
 
+  white-space: nowrap;
 
+  vertical-align: baseline;
 
+  border-radius: 0.25rem;
 
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .badge {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+a.badge:hover, a.badge:focus {
 
+  text-decoration: none;
 
+}
 
+
 
+.badge:empty {
 
+  display: none;
 
+}
 
+
 
+.btn .badge {
 
+  position: relative;
 
+  top: -1px;
 
+}
 
+
 
+.badge-pill {
 
+  padding-right: 0.6em;
 
+  padding-left: 0.6em;
 
+  border-radius: 10rem;
 
+}
 
+
 
+.badge-primary {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+}
 
+
 
+a.badge-primary:hover, a.badge-primary:focus {
 
+  color: #fff;
 
+  background-color: #1985ac;
 
+}
 
+
 
+a.badge-primary:focus, a.badge-primary.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.badge-secondary {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+}
 
+
 
+a.badge-secondary:hover, a.badge-secondary:focus {
 
+  color: #23282c;
 
+  background-color: #acb5bc;
 
+}
 
+
 
+a.badge-secondary:focus, a.badge-secondary.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5);
 
+}
 
+
 
+.badge-success {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+}
 
+
 
+a.badge-success:hover, a.badge-success:focus {
 
+  color: #fff;
 
+  background-color: #3a9d5d;
 
+}
 
+
 
+a.badge-success:focus, a.badge-success.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5);
 
+}
 
+
 
+.badge-info {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+}
 
+
 
+a.badge-info:hover, a.badge-info:focus {
 
+  color: #23282c;
 
+  background-color: #39b2d5;
 
+}
 
+
 
+a.badge-info:focus, a.badge-info.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5);
 
+}
 
+
 
+.badge-warning {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+}
 
+
 
+a.badge-warning:hover, a.badge-warning:focus {
 
+  color: #23282c;
 
+  background-color: #d39e00;
 
+}
 
+
 
+a.badge-warning:focus, a.badge-warning.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
 
+}
 
+
 
+.badge-danger {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+}
 
+
 
+a.badge-danger:hover, a.badge-danger:focus {
 
+  color: #fff;
 
+  background-color: #f63c3a;
 
+}
 
+
 
+a.badge-danger:focus, a.badge-danger.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5);
 
+}
 
+
 
+.badge-light {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+}
 
+
 
+a.badge-light:hover, a.badge-light:focus {
 
+  color: #23282c;
 
+  background-color: #d1dbe1;
 
+}
 
+
 
+a.badge-light:focus, a.badge-light.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5);
 
+}
 
+
 
+.badge-dark {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+}
 
+
 
+a.badge-dark:hover, a.badge-dark:focus {
 
+  color: #fff;
 
+  background-color: #181b1e;
 
+}
 
+
 
+a.badge-dark:focus, a.badge-dark.focus {
 
+  outline: 0;
 
+  box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5);
 
+}
 
+
 
+.jumbotron {
 
+  padding: 2rem 1rem;
 
+  margin-bottom: 2rem;
 
+  background-color: #e4e7ea;
 
+  border-radius: 0.3rem;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .jumbotron {
 
+    padding: 4rem 2rem;
 
+  }
 
+}
 
+
 
+.jumbotron-fluid {
 
+  padding-right: 0;
 
+  padding-left: 0;
 
+  border-radius: 0;
 
+}
 
+
 
+.alert {
 
+  position: relative;
 
+  padding: 0.75rem 1.25rem;
 
+  margin-bottom: 1rem;
 
+  border: 1px solid transparent;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.alert-heading {
 
+  color: inherit;
 
+}
 
+
 
+.alert-link {
 
+  font-weight: 700;
 
+}
 
+
 
+.alert-dismissible {
 
+  padding-right: 3.8125rem;
 
+}
 
+
 
+.alert-dismissible .close {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  padding: 0.75rem 1.25rem;
 
+  color: inherit;
 
+}
 
+
 
+.alert-primary {
 
+  color: #115770;
 
+  background-color: #d2eef7;
 
+  border-color: #c1e7f4;
 
+}
 
+
 
+.alert-primary hr {
 
+  border-top-color: #abdff0;
 
+}
 
+
 
+.alert-primary .alert-link {
 
+  color: #0a3544;
 
+}
 
+
 
+.alert-secondary {
 
+  color: #686b6e;
 
+  background-color: #f4f5f6;
 
+  border-color: #f0f1f3;
 
+}
 
+
 
+.alert-secondary hr {
 
+  border-top-color: #e2e4e8;
 
+}
 
+
 
+.alert-secondary .alert-link {
 
+  color: #4f5254;
 
+}
 
+
 
+.alert-success {
 
+  color: #28623c;
 
+  background-color: #dbf2e3;
 
+  border-color: #cdedd8;
 
+}
 
+
 
+.alert-success hr {
 
+  border-top-color: #bae6c9;
 
+}
 
+
 
+.alert-success .alert-link {
 
+  color: #193e26;
 
+}
 
+
 
+.alert-info {
 
+  color: #336573;
 
+  background-color: #e0f3f8;
 
+  border-color: #d3eef6;
 
+}
 
+
 
+.alert-info hr {
 
+  border-top-color: #bee6f2;
 
+}
 
+
 
+.alert-info .alert-link {
 
+  color: #234650;
 
+}
 
+
 
+.alert-warning {
 
+  color: #856404;
 
+  background-color: #fff3cd;
 
+  border-color: #ffeeba;
 
+}
 
+
 
+.alert-warning hr {
 
+  border-top-color: #ffe8a1;
 
+}
 
+
 
+.alert-warning .alert-link {
 
+  color: #533f03;
 
+}
 
+
 
+.alert-danger {
 
+  color: #813838;
 
+  background-color: #fee2e1;
 
+  border-color: #fdd6d6;
 
+}
 
+
 
+.alert-danger hr {
 
+  border-top-color: #fcbebe;
 
+}
 
+
 
+.alert-danger .alert-link {
 
+  color: #5d2929;
 
+}
 
+
 
+.alert-light {
 
+  color: #7d7e7f;
 
+  background-color: #fcfdfd;
 
+  border-color: #fbfcfc;
 
+}
 
+
 
+.alert-light hr {
 
+  border-top-color: #ecf1f1;
 
+}
 
+
 
+.alert-light .alert-link {
 
+  color: #646565;
 
+}
 
+
 
+.alert-dark {
 
+  color: #181c1e;
 
+  background-color: #d5d7d8;
 
+  border-color: #c5c6c8;
 
+}
 
+
 
+.alert-dark hr {
 
+  border-top-color: #b8b9bc;
 
+}
 
+
 
+.alert-dark .alert-link {
 
+  color: #010202;
 
+}
 
+
 
+@-webkit-keyframes progress-bar-stripes {
 
+  from {
 
+    background-position: 1rem 0;
 
+  }
 
+  to {
 
+    background-position: 0 0;
 
+  }
 
+}
 
+
 
+@keyframes progress-bar-stripes {
 
+  from {
 
+    background-position: 1rem 0;
 
+  }
 
+  to {
 
+    background-position: 0 0;
 
+  }
 
+}
 
+
 
+.progress {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  height: 1rem;
 
+  overflow: hidden;
 
+  font-size: 0.65625rem;
 
+  background-color: #f0f3f5;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.progress-bar {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  color: #fff;
 
+  text-align: center;
 
+  white-space: nowrap;
 
+  background-color: #20a8d8;
 
+  transition: width 0.6s ease;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .progress-bar {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.progress-bar-striped {
 
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
+  background-size: 1rem 1rem;
 
+}
 
+
 
+.progress-bar-animated {
 
+  -webkit-animation: progress-bar-stripes 1s linear infinite;
 
+  animation: progress-bar-stripes 1s linear infinite;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .progress-bar-animated {
 
+    -webkit-animation: none;
 
+    animation: none;
 
+  }
 
+}
 
+
 
+.media {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: start;
 
+  align-items: flex-start;
 
+}
 
+
 
+.media-body {
 
+  -ms-flex: 1;
 
+  flex: 1;
 
+}
 
+
 
+.list-group {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  padding-left: 0;
 
+  margin-bottom: 0;
 
+}
 
+
 
+.list-group-item-action {
 
+  width: 100%;
 
+  color: #5c6873;
 
+  text-align: inherit;
 
+}
 
+
 
+.list-group-item-action:hover, .list-group-item-action:focus {
 
+  z-index: 1;
 
+  color: #5c6873;
 
+  text-decoration: none;
 
+  background-color: #f0f3f5;
 
+}
 
+
 
+.list-group-item-action:active {
 
+  color: #23282c;
 
+  background-color: #e4e7ea;
 
+}
 
+
 
+.list-group-item {
 
+  position: relative;
 
+  display: block;
 
+  padding: 0.75rem 1.25rem;
 
+  margin-bottom: -1px;
 
+  background-color: #fff;
 
+  border: 1px solid rgba(0, 0, 0, 0.125);
 
+}
 
+
 
+.list-group-item:first-child {
 
+  border-top-left-radius: 0.25rem;
 
+  border-top-right-radius: 0.25rem;
 
+}
 
+
 
+.list-group-item:last-child {
 
+  margin-bottom: 0;
 
+  border-bottom-right-radius: 0.25rem;
 
+  border-bottom-left-radius: 0.25rem;
 
+}
 
+
 
+.list-group-item.disabled, .list-group-item:disabled {
 
+  color: #73818f;
 
+  pointer-events: none;
 
+  background-color: #fff;
 
+}
 
+
 
+.list-group-item.active {
 
+  z-index: 2;
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.list-group-horizontal {
 
+  -ms-flex-direction: row;
 
+  flex-direction: row;
 
+}
 
+
 
+.list-group-horizontal .list-group-item {
 
+  margin-right: -1px;
 
+  margin-bottom: 0;
 
+}
 
+
 
+.list-group-horizontal .list-group-item:first-child {
 
+  border-top-left-radius: 0.25rem;
 
+  border-bottom-left-radius: 0.25rem;
 
+  border-top-right-radius: 0;
 
+}
 
+
 
+.list-group-horizontal .list-group-item:last-child {
 
+  margin-right: 0;
 
+  border-top-right-radius: 0.25rem;
 
+  border-bottom-right-radius: 0.25rem;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .list-group-horizontal-sm {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .list-group-horizontal-sm .list-group-item {
 
+    margin-right: -1px;
 
+    margin-bottom: 0;
 
+  }
 
+  .list-group-horizontal-sm .list-group-item:first-child {
 
+    border-top-left-radius: 0.25rem;
 
+    border-bottom-left-radius: 0.25rem;
 
+    border-top-right-radius: 0;
 
+  }
 
+  .list-group-horizontal-sm .list-group-item:last-child {
 
+    margin-right: 0;
 
+    border-top-right-radius: 0.25rem;
 
+    border-bottom-right-radius: 0.25rem;
 
+    border-bottom-left-radius: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .list-group-horizontal-md {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .list-group-horizontal-md .list-group-item {
 
+    margin-right: -1px;
 
+    margin-bottom: 0;
 
+  }
 
+  .list-group-horizontal-md .list-group-item:first-child {
 
+    border-top-left-radius: 0.25rem;
 
+    border-bottom-left-radius: 0.25rem;
 
+    border-top-right-radius: 0;
 
+  }
 
+  .list-group-horizontal-md .list-group-item:last-child {
 
+    margin-right: 0;
 
+    border-top-right-radius: 0.25rem;
 
+    border-bottom-right-radius: 0.25rem;
 
+    border-bottom-left-radius: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .list-group-horizontal-lg {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .list-group-horizontal-lg .list-group-item {
 
+    margin-right: -1px;
 
+    margin-bottom: 0;
 
+  }
 
+  .list-group-horizontal-lg .list-group-item:first-child {
 
+    border-top-left-radius: 0.25rem;
 
+    border-bottom-left-radius: 0.25rem;
 
+    border-top-right-radius: 0;
 
+  }
 
+  .list-group-horizontal-lg .list-group-item:last-child {
 
+    margin-right: 0;
 
+    border-top-right-radius: 0.25rem;
 
+    border-bottom-right-radius: 0.25rem;
 
+    border-bottom-left-radius: 0;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .list-group-horizontal-xl {
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+  }
 
+  .list-group-horizontal-xl .list-group-item {
 
+    margin-right: -1px;
 
+    margin-bottom: 0;
 
+  }
 
+  .list-group-horizontal-xl .list-group-item:first-child {
 
+    border-top-left-radius: 0.25rem;
 
+    border-bottom-left-radius: 0.25rem;
 
+    border-top-right-radius: 0;
 
+  }
 
+  .list-group-horizontal-xl .list-group-item:last-child {
 
+    margin-right: 0;
 
+    border-top-right-radius: 0.25rem;
 
+    border-bottom-right-radius: 0.25rem;
 
+    border-bottom-left-radius: 0;
 
+  }
 
+}
 
+
 
+.list-group-flush .list-group-item {
 
+  border-right: 0;
 
+  border-left: 0;
 
+  border-radius: 0;
 
+}
 
+
 
+.list-group-flush .list-group-item:last-child {
 
+  margin-bottom: -1px;
 
+}
 
+
 
+.list-group-flush:first-child .list-group-item:first-child {
 
+  border-top: 0;
 
+}
 
+
 
+.list-group-flush:last-child .list-group-item:last-child {
 
+  margin-bottom: 0;
 
+  border-bottom: 0;
 
+}
 
+
 
+.list-group-item-primary {
 
+  color: #115770;
 
+  background-color: #c1e7f4;
 
+}
 
+
 
+.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
 
+  color: #115770;
 
+  background-color: #abdff0;
 
+}
 
+
 
+.list-group-item-primary.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #115770;
 
+  border-color: #115770;
 
+}
 
+
 
+.list-group-item-secondary {
 
+  color: #686b6e;
 
+  background-color: #f0f1f3;
 
+}
 
+
 
+.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
 
+  color: #686b6e;
 
+  background-color: #e2e4e8;
 
+}
 
+
 
+.list-group-item-secondary.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #686b6e;
 
+  border-color: #686b6e;
 
+}
 
+
 
+.list-group-item-success {
 
+  color: #28623c;
 
+  background-color: #cdedd8;
 
+}
 
+
 
+.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
 
+  color: #28623c;
 
+  background-color: #bae6c9;
 
+}
 
+
 
+.list-group-item-success.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #28623c;
 
+  border-color: #28623c;
 
+}
 
+
 
+.list-group-item-info {
 
+  color: #336573;
 
+  background-color: #d3eef6;
 
+}
 
+
 
+.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
 
+  color: #336573;
 
+  background-color: #bee6f2;
 
+}
 
+
 
+.list-group-item-info.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #336573;
 
+  border-color: #336573;
 
+}
 
+
 
+.list-group-item-warning {
 
+  color: #856404;
 
+  background-color: #ffeeba;
 
+}
 
+
 
+.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
 
+  color: #856404;
 
+  background-color: #ffe8a1;
 
+}
 
+
 
+.list-group-item-warning.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #856404;
 
+  border-color: #856404;
 
+}
 
+
 
+.list-group-item-danger {
 
+  color: #813838;
 
+  background-color: #fdd6d6;
 
+}
 
+
 
+.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
 
+  color: #813838;
 
+  background-color: #fcbebe;
 
+}
 
+
 
+.list-group-item-danger.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #813838;
 
+  border-color: #813838;
 
+}
 
+
 
+.list-group-item-light {
 
+  color: #7d7e7f;
 
+  background-color: #fbfcfc;
 
+}
 
+
 
+.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
 
+  color: #7d7e7f;
 
+  background-color: #ecf1f1;
 
+}
 
+
 
+.list-group-item-light.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #7d7e7f;
 
+  border-color: #7d7e7f;
 
+}
 
+
 
+.list-group-item-dark {
 
+  color: #181c1e;
 
+  background-color: #c5c6c8;
 
+}
 
+
 
+.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
 
+  color: #181c1e;
 
+  background-color: #b8b9bc;
 
+}
 
+
 
+.list-group-item-dark.list-group-item-action.active {
 
+  color: #fff;
 
+  background-color: #181c1e;
 
+  border-color: #181c1e;
 
+}
 
+
 
+.close {
 
+  float: right;
 
+  font-size: 1.3125rem;
 
+  font-weight: 700;
 
+  line-height: 1;
 
+  color: #000;
 
+  text-shadow: 0 1px 0 #fff;
 
+  opacity: .5;
 
+}
 
+
 
+.close:hover {
 
+  color: #000;
 
+  text-decoration: none;
 
+}
 
+
 
+.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
 
+  opacity: .75;
 
+}
 
+
 
+button.close {
 
+  padding: 0;
 
+  background-color: transparent;
 
+  border: 0;
 
+  -webkit-appearance: none;
 
+  -moz-appearance: none;
 
+  appearance: none;
 
+}
 
+
 
+a.close.disabled {
 
+  pointer-events: none;
 
+}
 
+
 
+.toast {
 
+  max-width: 350px;
 
+  overflow: hidden;
 
+  font-size: 0.875rem;
 
+  background-color: rgba(255, 255, 255, 0.85);
 
+  background-clip: padding-box;
 
+  border: 1px solid rgba(0, 0, 0, 0.1);
 
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
 
+  -webkit-backdrop-filter: blur(10px);
 
+  backdrop-filter: blur(10px);
 
+  opacity: 0;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.toast:not(:last-child) {
 
+  margin-bottom: 0.75rem;
 
+}
 
+
 
+.toast.showing {
 
+  opacity: 1;
 
+}
 
+
 
+.toast.show {
 
+  display: block;
 
+  opacity: 1;
 
+}
 
+
 
+.toast.hide {
 
+  display: none;
 
+}
 
+
 
+.toast-header {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  padding: 0.25rem 0.75rem;
 
+  color: #73818f;
 
+  background-color: rgba(255, 255, 255, 0.85);
 
+  background-clip: padding-box;
 
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
+}
 
+
 
+.toast-body {
 
+  padding: 0.75rem;
 
+}
 
+
 
+.modal-open {
 
+  overflow: hidden;
 
+}
 
+
 
+.modal-open .modal {
 
+  overflow-x: hidden;
 
+  overflow-y: auto;
 
+}
 
+
 
+.modal {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  z-index: 1050;
 
+  display: none;
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: hidden;
 
+  outline: 0;
 
+}
 
+
 
+.modal-dialog {
 
+  position: relative;
 
+  width: auto;
 
+  margin: 0.5rem;
 
+  pointer-events: none;
 
+}
 
+
 
+.modal.fade .modal-dialog {
 
+  transition: -webkit-transform 0.3s ease-out;
 
+  transition: transform 0.3s ease-out;
 
+  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
 
+  -webkit-transform: translate(0, -50px);
 
+  transform: translate(0, -50px);
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .modal.fade .modal-dialog {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.modal.show .modal-dialog {
 
+  -webkit-transform: none;
 
+  transform: none;
 
+}
 
+
 
+.modal-dialog-scrollable {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  max-height: calc(100% - 1rem);
 
+}
 
+
 
+.modal-dialog-scrollable .modal-content {
 
+  max-height: calc(100vh - 1rem);
 
+  overflow: hidden;
 
+}
 
+
 
+.modal-dialog-scrollable .modal-header,
 
+.modal-dialog-scrollable .modal-footer {
 
+  -ms-flex-negative: 0;
 
+  flex-shrink: 0;
 
+}
 
+
 
+.modal-dialog-scrollable .modal-body {
 
+  overflow-y: auto;
 
+}
 
+
 
+.modal-dialog-centered {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  min-height: calc(100% - 1rem);
 
+}
 
+
 
+.modal-dialog-centered::before {
 
+  display: block;
 
+  height: calc(100vh - 1rem);
 
+  content: "";
 
+}
 
+
 
+.modal-dialog-centered.modal-dialog-scrollable {
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  height: 100%;
 
+}
 
+
 
+.modal-dialog-centered.modal-dialog-scrollable .modal-content {
 
+  max-height: none;
 
+}
 
+
 
+.modal-dialog-centered.modal-dialog-scrollable::before {
 
+  content: none;
 
+}
 
+
 
+.modal-content {
 
+  position: relative;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  width: 100%;
 
+  pointer-events: auto;
 
+  background-color: #fff;
 
+  background-clip: padding-box;
 
+  border: 1px solid rgba(0, 0, 0, 0.2);
 
+  border-radius: 0.3rem;
 
+  outline: 0;
 
+}
 
+
 
+.modal-backdrop {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  z-index: 1040;
 
+  width: 100vw;
 
+  height: 100vh;
 
+  background-color: #000;
 
+}
 
+
 
+.modal-backdrop.fade {
 
+  opacity: 0;
 
+}
 
+
 
+.modal-backdrop.show {
 
+  opacity: 0.5;
 
+}
 
+
 
+.modal-header {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: start;
 
+  align-items: flex-start;
 
+  -ms-flex-pack: justify;
 
+  justify-content: space-between;
 
+  padding: 1rem 1rem;
 
+  border-bottom: 1px solid #c8ced3;
 
+  border-top-left-radius: 0.3rem;
 
+  border-top-right-radius: 0.3rem;
 
+}
 
+
 
+.modal-header .close {
 
+  padding: 1rem 1rem;
 
+  margin: -1rem -1rem -1rem auto;
 
+}
 
+
 
+.modal-title {
 
+  margin-bottom: 0;
 
+  line-height: 1.5;
 
+}
 
+
 
+.modal-body {
 
+  position: relative;
 
+  -ms-flex: 1 1 auto;
 
+  flex: 1 1 auto;
 
+  padding: 1rem;
 
+}
 
+
 
+.modal-footer {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: end;
 
+  justify-content: flex-end;
 
+  padding: 1rem;
 
+  border-top: 1px solid #c8ced3;
 
+  border-bottom-right-radius: 0.3rem;
 
+  border-bottom-left-radius: 0.3rem;
 
+}
 
+
 
+.modal-footer > :not(:first-child) {
 
+  margin-left: .25rem;
 
+}
 
+
 
+.modal-footer > :not(:last-child) {
 
+  margin-right: .25rem;
 
+}
 
+
 
+.modal-scrollbar-measure {
 
+  position: absolute;
 
+  top: -9999px;
 
+  width: 50px;
 
+  height: 50px;
 
+  overflow: scroll;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .modal-dialog {
 
+    max-width: 500px;
 
+    margin: 1.75rem auto;
 
+  }
 
+  .modal-dialog-scrollable {
 
+    max-height: calc(100% - 3.5rem);
 
+  }
 
+  .modal-dialog-scrollable .modal-content {
 
+    max-height: calc(100vh - 3.5rem);
 
+  }
 
+  .modal-dialog-centered {
 
+    min-height: calc(100% - 3.5rem);
 
+  }
 
+  .modal-dialog-centered::before {
 
+    height: calc(100vh - 3.5rem);
 
+  }
 
+  .modal-sm {
 
+    max-width: 300px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .modal-lg,
 
+  .modal-xl {
 
+    max-width: 800px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .modal-xl {
 
+    max-width: 1140px;
 
+  }
 
+}
 
+
 
+.tooltip {
 
+  position: absolute;
 
+  z-index: 1070;
 
+  display: block;
 
+  margin: 0;
 
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  text-align: left;
 
+  text-align: start;
 
+  text-decoration: none;
 
+  text-shadow: none;
 
+  text-transform: none;
 
+  letter-spacing: normal;
 
+  word-break: normal;
 
+  word-spacing: normal;
 
+  white-space: normal;
 
+  line-break: auto;
 
+  font-size: 0.765625rem;
 
+  word-wrap: break-word;
 
+  opacity: 0;
 
+}
 
+
 
+.tooltip.show {
 
+  opacity: 0.9;
 
+}
 
+
 
+.tooltip .arrow {
 
+  position: absolute;
 
+  display: block;
 
+  width: 0.8rem;
 
+  height: 0.4rem;
 
+}
 
+
 
+.tooltip .arrow::before {
 
+  position: absolute;
 
+  content: "";
 
+  border-color: transparent;
 
+  border-style: solid;
 
+}
 
+
 
+.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
 
+  padding: 0.4rem 0;
 
+}
 
+
 
+.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
 
+  bottom: 0;
 
+}
 
+
 
+.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
 
+  top: 0;
 
+  border-width: 0.4rem 0.4rem 0;
 
+  border-top-color: #000;
 
+}
 
+
 
+.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
 
+  padding: 0 0.4rem;
 
+}
 
+
 
+.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
 
+  left: 0;
 
+  width: 0.4rem;
 
+  height: 0.8rem;
 
+}
 
+
 
+.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
 
+  right: 0;
 
+  border-width: 0.4rem 0.4rem 0.4rem 0;
 
+  border-right-color: #000;
 
+}
 
+
 
+.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
 
+  padding: 0.4rem 0;
 
+}
 
+
 
+.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
 
+  top: 0;
 
+}
 
+
 
+.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
 
+  bottom: 0;
 
+  border-width: 0 0.4rem 0.4rem;
 
+  border-bottom-color: #000;
 
+}
 
+
 
+.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
 
+  padding: 0 0.4rem;
 
+}
 
+
 
+.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
 
+  right: 0;
 
+  width: 0.4rem;
 
+  height: 0.8rem;
 
+}
 
+
 
+.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
 
+  left: 0;
 
+  border-width: 0.4rem 0 0.4rem 0.4rem;
 
+  border-left-color: #000;
 
+}
 
+
 
+.tooltip-inner {
 
+  max-width: 200px;
 
+  padding: 0.25rem 0.5rem;
 
+  color: #fff;
 
+  text-align: center;
 
+  background-color: #000;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.popover {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  z-index: 1060;
 
+  display: block;
 
+  max-width: 276px;
 
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  line-height: 1.5;
 
+  text-align: left;
 
+  text-align: start;
 
+  text-decoration: none;
 
+  text-shadow: none;
 
+  text-transform: none;
 
+  letter-spacing: normal;
 
+  word-break: normal;
 
+  word-spacing: normal;
 
+  white-space: normal;
 
+  line-break: auto;
 
+  font-size: 0.765625rem;
 
+  word-wrap: break-word;
 
+  background-color: #fff;
 
+  background-clip: padding-box;
 
+  border: 1px solid rgba(0, 0, 0, 0.2);
 
+  border-radius: 0.3rem;
 
+}
 
+
 
+.popover .arrow {
 
+  position: absolute;
 
+  display: block;
 
+  width: 1rem;
 
+  height: 0.5rem;
 
+  margin: 0 0.3rem;
 
+}
 
+
 
+.popover .arrow::before, .popover .arrow::after {
 
+  position: absolute;
 
+  display: block;
 
+  content: "";
 
+  border-color: transparent;
 
+  border-style: solid;
 
+}
 
+
 
+.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
 
+  margin-bottom: 0.5rem;
 
+}
 
+
 
+.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
 
+  bottom: calc((0.5rem + 1px) * -1);
 
+}
 
+
 
+.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
 
+  bottom: 0;
 
+  border-width: 0.5rem 0.5rem 0;
 
+  border-top-color: rgba(0, 0, 0, 0.25);
 
+}
 
+
 
+.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
 
+  bottom: 1px;
 
+  border-width: 0.5rem 0.5rem 0;
 
+  border-top-color: #fff;
 
+}
 
+
 
+.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
 
+  margin-left: 0.5rem;
 
+}
 
+
 
+.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
 
+  left: calc((0.5rem + 1px) * -1);
 
+  width: 0.5rem;
 
+  height: 1rem;
 
+  margin: 0.3rem 0;
 
+}
 
+
 
+.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
 
+  left: 0;
 
+  border-width: 0.5rem 0.5rem 0.5rem 0;
 
+  border-right-color: rgba(0, 0, 0, 0.25);
 
+}
 
+
 
+.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
 
+  left: 1px;
 
+  border-width: 0.5rem 0.5rem 0.5rem 0;
 
+  border-right-color: #fff;
 
+}
 
+
 
+.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
 
+  margin-top: 0.5rem;
 
+}
 
+
 
+.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
 
+  top: calc((0.5rem + 1px) * -1);
 
+}
 
+
 
+.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
 
+  top: 0;
 
+  border-width: 0 0.5rem 0.5rem 0.5rem;
 
+  border-bottom-color: rgba(0, 0, 0, 0.25);
 
+}
 
+
 
+.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
 
+  top: 1px;
 
+  border-width: 0 0.5rem 0.5rem 0.5rem;
 
+  border-bottom-color: #fff;
 
+}
 
+
 
+.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 50%;
 
+  display: block;
 
+  width: 1rem;
 
+  margin-left: -0.5rem;
 
+  content: "";
 
+  border-bottom: 1px solid #f7f7f7;
 
+}
 
+
 
+.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
 
+  right: calc((0.5rem + 1px) * -1);
 
+  width: 0.5rem;
 
+  height: 1rem;
 
+  margin: 0.3rem 0;
 
+}
 
+
 
+.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
 
+  right: 0;
 
+  border-width: 0.5rem 0 0.5rem 0.5rem;
 
+  border-left-color: rgba(0, 0, 0, 0.25);
 
+}
 
+
 
+.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
 
+  right: 1px;
 
+  border-width: 0.5rem 0 0.5rem 0.5rem;
 
+  border-left-color: #fff;
 
+}
 
+
 
+.popover-header {
 
+  padding: 0.5rem 0.75rem;
 
+  margin-bottom: 0;
 
+  font-size: 0.875rem;
 
+  background-color: #f7f7f7;
 
+  border-bottom: 1px solid #ebebeb;
 
+  border-top-left-radius: calc(0.3rem - 1px);
 
+  border-top-right-radius: calc(0.3rem - 1px);
 
+}
 
+
 
+.popover-header:empty {
 
+  display: none;
 
+}
 
+
 
+.popover-body {
 
+  padding: 0.5rem 0.75rem;
 
+  color: #23282c;
 
+}
 
+
 
+.carousel {
 
+  position: relative;
 
+}
 
+
 
+.carousel.pointer-event {
 
+  -ms-touch-action: pan-y;
 
+  touch-action: pan-y;
 
+}
 
+
 
+.carousel-inner {
 
+  position: relative;
 
+  width: 100%;
 
+  overflow: hidden;
 
+}
 
+
 
+.carousel-inner::after {
 
+  display: block;
 
+  clear: both;
 
+  content: "";
 
+}
 
+
 
+.carousel-item {
 
+  position: relative;
 
+  display: none;
 
+  float: left;
 
+  width: 100%;
 
+  margin-right: -100%;
 
+  -webkit-backface-visibility: hidden;
 
+  backface-visibility: hidden;
 
+  transition: -webkit-transform 0.6s ease-in-out;
 
+  transition: transform 0.6s ease-in-out;
 
+  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .carousel-item {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.carousel-item.active,
 
+.carousel-item-next,
 
+.carousel-item-prev {
 
+  display: block;
 
+}
 
+
 
+.carousel-item-next:not(.carousel-item-left),
 
+.active.carousel-item-right {
 
+  -webkit-transform: translateX(100%);
 
+  transform: translateX(100%);
 
+}
 
+
 
+.carousel-item-prev:not(.carousel-item-right),
 
+.active.carousel-item-left {
 
+  -webkit-transform: translateX(-100%);
 
+  transform: translateX(-100%);
 
+}
 
+
 
+.carousel-fade .carousel-item {
 
+  opacity: 0;
 
+  transition-property: opacity;
 
+  -webkit-transform: none;
 
+  transform: none;
 
+}
 
+
 
+.carousel-fade .carousel-item.active,
 
+.carousel-fade .carousel-item-next.carousel-item-left,
 
+.carousel-fade .carousel-item-prev.carousel-item-right {
 
+  z-index: 1;
 
+  opacity: 1;
 
+}
 
+
 
+.carousel-fade .active.carousel-item-left,
 
+.carousel-fade .active.carousel-item-right {
 
+  z-index: 0;
 
+  opacity: 0;
 
+  transition: 0s 0.6s opacity;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .carousel-fade .active.carousel-item-left,
 
+  .carousel-fade .active.carousel-item-right {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.carousel-control-prev,
 
+.carousel-control-next {
 
+  position: absolute;
 
+  top: 0;
 
+  bottom: 0;
 
+  z-index: 1;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  width: 15%;
 
+  color: #fff;
 
+  text-align: center;
 
+  opacity: 0.5;
 
+  transition: opacity 0.15s ease;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .carousel-control-prev,
 
+  .carousel-control-next {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.carousel-control-prev:hover, .carousel-control-prev:focus,
 
+.carousel-control-next:hover,
 
+.carousel-control-next:focus {
 
+  color: #fff;
 
+  text-decoration: none;
 
+  outline: 0;
 
+  opacity: 0.9;
 
+}
 
+
 
+.carousel-control-prev {
 
+  left: 0;
 
+}
 
+
 
+.carousel-control-next {
 
+  right: 0;
 
+}
 
+
 
+.carousel-control-prev-icon,
 
+.carousel-control-next-icon {
 
+  display: inline-block;
 
+  width: 20px;
 
+  height: 20px;
 
+  background: no-repeat 50% / 100% 100%;
 
+}
 
+
 
+.carousel-control-prev-icon {
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
 
+}
 
+
 
+.carousel-control-next-icon {
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
 
+}
 
+
 
+.carousel-indicators {
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: 15;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  padding-left: 0;
 
+  margin-right: 15%;
 
+  margin-left: 15%;
 
+  list-style: none;
 
+}
 
+
 
+.carousel-indicators li {
 
+  box-sizing: content-box;
 
+  -ms-flex: 0 1 auto;
 
+  flex: 0 1 auto;
 
+  width: 30px;
 
+  height: 3px;
 
+  margin-right: 3px;
 
+  margin-left: 3px;
 
+  text-indent: -999px;
 
+  cursor: pointer;
 
+  background-color: #fff;
 
+  background-clip: padding-box;
 
+  border-top: 10px solid transparent;
 
+  border-bottom: 10px solid transparent;
 
+  opacity: .5;
 
+  transition: opacity 0.6s ease;
 
+}
 
+
 
+@media (prefers-reduced-motion: reduce) {
 
+  .carousel-indicators li {
 
+    transition: none;
 
+  }
 
+}
 
+
 
+.carousel-indicators .active {
 
+  opacity: 1;
 
+}
 
+
 
+.carousel-caption {
 
+  position: absolute;
 
+  right: 15%;
 
+  bottom: 20px;
 
+  left: 15%;
 
+  z-index: 10;
 
+  padding-top: 20px;
 
+  padding-bottom: 20px;
 
+  color: #fff;
 
+  text-align: center;
 
+}
 
+
 
+@-webkit-keyframes spinner-border {
 
+  to {
 
+    -webkit-transform: rotate(360deg);
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+
 
+@keyframes spinner-border {
 
+  to {
 
+    -webkit-transform: rotate(360deg);
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+
 
+.spinner-border {
 
+  display: inline-block;
 
+  width: 2rem;
 
+  height: 2rem;
 
+  vertical-align: text-bottom;
 
+  border: 0.25em solid currentColor;
 
+  border-right-color: transparent;
 
+  border-radius: 50%;
 
+  -webkit-animation: spinner-border .75s linear infinite;
 
+  animation: spinner-border .75s linear infinite;
 
+}
 
+
 
+.spinner-border-sm {
 
+  width: 1rem;
 
+  height: 1rem;
 
+  border-width: 0.2em;
 
+}
 
+
 
+@-webkit-keyframes spinner-grow {
 
+  0% {
 
+    -webkit-transform: scale(0);
 
+    transform: scale(0);
 
+  }
 
+  50% {
 
+    opacity: 1;
 
+  }
 
+}
 
+
 
+@keyframes spinner-grow {
 
+  0% {
 
+    -webkit-transform: scale(0);
 
+    transform: scale(0);
 
+  }
 
+  50% {
 
+    opacity: 1;
 
+  }
 
+}
 
+
 
+.spinner-grow {
 
+  display: inline-block;
 
+  width: 2rem;
 
+  height: 2rem;
 
+  vertical-align: text-bottom;
 
+  background-color: currentColor;
 
+  border-radius: 50%;
 
+  opacity: 0;
 
+  -webkit-animation: spinner-grow .75s linear infinite;
 
+  animation: spinner-grow .75s linear infinite;
 
+}
 
+
 
+.spinner-grow-sm {
 
+  width: 1rem;
 
+  height: 1rem;
 
+}
 
+
 
+.align-baseline {
 
+  vertical-align: baseline !important;
 
+}
 
+
 
+.align-top {
 
+  vertical-align: top !important;
 
+}
 
+
 
+.align-middle {
 
+  vertical-align: middle !important;
 
+}
 
+
 
+.align-bottom {
 
+  vertical-align: bottom !important;
 
+}
 
+
 
+.align-text-bottom {
 
+  vertical-align: text-bottom !important;
 
+}
 
+
 
+.align-text-top {
 
+  vertical-align: text-top !important;
 
+}
 
+
 
+.bg-primary {
 
+  background-color: #20a8d8 !important;
 
+}
 
+
 
+a.bg-primary:hover, a.bg-primary:focus,
 
+button.bg-primary:hover,
 
+button.bg-primary:focus {
 
+  background-color: #1985ac !important;
 
+}
 
+
 
+.bg-secondary {
 
+  background-color: #c8ced3 !important;
 
+}
 
+
 
+a.bg-secondary:hover, a.bg-secondary:focus,
 
+button.bg-secondary:hover,
 
+button.bg-secondary:focus {
 
+  background-color: #acb5bc !important;
 
+}
 
+
 
+.bg-success {
 
+  background-color: #4dbd74 !important;
 
+}
 
+
 
+a.bg-success:hover, a.bg-success:focus,
 
+button.bg-success:hover,
 
+button.bg-success:focus {
 
+  background-color: #3a9d5d !important;
 
+}
 
+
 
+.bg-info {
 
+  background-color: #63c2de !important;
 
+}
 
+
 
+a.bg-info:hover, a.bg-info:focus,
 
+button.bg-info:hover,
 
+button.bg-info:focus {
 
+  background-color: #39b2d5 !important;
 
+}
 
+
 
+.bg-warning {
 
+  background-color: #ffc107 !important;
 
+}
 
+
 
+a.bg-warning:hover, a.bg-warning:focus,
 
+button.bg-warning:hover,
 
+button.bg-warning:focus {
 
+  background-color: #d39e00 !important;
 
+}
 
+
 
+.bg-danger {
 
+  background-color: #f86c6b !important;
 
+}
 
+
 
+a.bg-danger:hover, a.bg-danger:focus,
 
+button.bg-danger:hover,
 
+button.bg-danger:focus {
 
+  background-color: #f63c3a !important;
 
+}
 
+
 
+.bg-light {
 
+  background-color: #f0f3f5 !important;
 
+}
 
+
 
+a.bg-light:hover, a.bg-light:focus,
 
+button.bg-light:hover,
 
+button.bg-light:focus {
 
+  background-color: #d1dbe1 !important;
 
+}
 
+
 
+.bg-dark {
 
+  background-color: #2f353a !important;
 
+}
 
+
 
+a.bg-dark:hover, a.bg-dark:focus,
 
+button.bg-dark:hover,
 
+button.bg-dark:focus {
 
+  background-color: #181b1e !important;
 
+}
 
+
 
+.bg-white {
 
+  background-color: #fff !important;
 
+}
 
+
 
+.bg-transparent {
 
+  background-color: transparent !important;
 
+}
 
+
 
+.border {
 
+  border: 1px solid #c8ced3 !important;
 
+}
 
+
 
+.border-top {
 
+  border-top: 1px solid #c8ced3 !important;
 
+}
 
+
 
+.border-right {
 
+  border-right: 1px solid #c8ced3 !important;
 
+}
 
+
 
+.border-bottom {
 
+  border-bottom: 1px solid #c8ced3 !important;
 
+}
 
+
 
+.border-left {
 
+  border-left: 1px solid #c8ced3 !important;
 
+}
 
+
 
+.border-0 {
 
+  border: 0 !important;
 
+}
 
+
 
+.border-top-0 {
 
+  border-top: 0 !important;
 
+}
 
+
 
+.border-right-0 {
 
+  border-right: 0 !important;
 
+}
 
+
 
+.border-bottom-0 {
 
+  border-bottom: 0 !important;
 
+}
 
+
 
+.border-left-0 {
 
+  border-left: 0 !important;
 
+}
 
+
 
+.border-primary {
 
+  border-color: #20a8d8 !important;
 
+}
 
+
 
+.border-secondary {
 
+  border-color: #c8ced3 !important;
 
+}
 
+
 
+.border-success {
 
+  border-color: #4dbd74 !important;
 
+}
 
+
 
+.border-info {
 
+  border-color: #63c2de !important;
 
+}
 
+
 
+.border-warning {
 
+  border-color: #ffc107 !important;
 
+}
 
+
 
+.border-danger {
 
+  border-color: #f86c6b !important;
 
+}
 
+
 
+.border-light {
 
+  border-color: #f0f3f5 !important;
 
+}
 
+
 
+.border-dark {
 
+  border-color: #2f353a !important;
 
+}
 
+
 
+.border-white {
 
+  border-color: #fff !important;
 
+}
 
+
 
+.rounded-sm {
 
+  border-radius: 0.2rem !important;
 
+}
 
+
 
+.rounded {
 
+  border-radius: 0.25rem !important;
 
+}
 
+
 
+.rounded-top {
 
+  border-top-left-radius: 0.25rem !important;
 
+  border-top-right-radius: 0.25rem !important;
 
+}
 
+
 
+.rounded-right {
 
+  border-top-right-radius: 0.25rem !important;
 
+  border-bottom-right-radius: 0.25rem !important;
 
+}
 
+
 
+.rounded-bottom {
 
+  border-bottom-right-radius: 0.25rem !important;
 
+  border-bottom-left-radius: 0.25rem !important;
 
+}
 
+
 
+.rounded-left {
 
+  border-top-left-radius: 0.25rem !important;
 
+  border-bottom-left-radius: 0.25rem !important;
 
+}
 
+
 
+.rounded-lg {
 
+  border-radius: 0.3rem !important;
 
+}
 
+
 
+.rounded-circle {
 
+  border-radius: 50% !important;
 
+}
 
+
 
+.rounded-pill {
 
+  border-radius: 50rem !important;
 
+}
 
+
 
+.rounded-0 {
 
+  border-radius: 0 !important;
 
+}
 
+
 
+.clearfix::after {
 
+  display: block;
 
+  clear: both;
 
+  content: "";
 
+}
 
+
 
+.d-none {
 
+  display: none !important;
 
+}
 
+
 
+.d-inline {
 
+  display: inline !important;
 
+}
 
+
 
+.d-inline-block {
 
+  display: inline-block !important;
 
+}
 
+
 
+.d-block {
 
+  display: block !important;
 
+}
 
+
 
+.d-table {
 
+  display: table !important;
 
+}
 
+
 
+.d-table-row {
 
+  display: table-row !important;
 
+}
 
+
 
+.d-table-cell {
 
+  display: table-cell !important;
 
+}
 
+
 
+.d-flex {
 
+  display: -ms-flexbox !important;
 
+  display: flex !important;
 
+}
 
+
 
+.d-inline-flex {
 
+  display: -ms-inline-flexbox !important;
 
+  display: inline-flex !important;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .d-sm-none {
 
+    display: none !important;
 
+  }
 
+  .d-sm-inline {
 
+    display: inline !important;
 
+  }
 
+  .d-sm-inline-block {
 
+    display: inline-block !important;
 
+  }
 
+  .d-sm-block {
 
+    display: block !important;
 
+  }
 
+  .d-sm-table {
 
+    display: table !important;
 
+  }
 
+  .d-sm-table-row {
 
+    display: table-row !important;
 
+  }
 
+  .d-sm-table-cell {
 
+    display: table-cell !important;
 
+  }
 
+  .d-sm-flex {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+  }
 
+  .d-sm-inline-flex {
 
+    display: -ms-inline-flexbox !important;
 
+    display: inline-flex !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .d-md-none {
 
+    display: none !important;
 
+  }
 
+  .d-md-inline {
 
+    display: inline !important;
 
+  }
 
+  .d-md-inline-block {
 
+    display: inline-block !important;
 
+  }
 
+  .d-md-block {
 
+    display: block !important;
 
+  }
 
+  .d-md-table {
 
+    display: table !important;
 
+  }
 
+  .d-md-table-row {
 
+    display: table-row !important;
 
+  }
 
+  .d-md-table-cell {
 
+    display: table-cell !important;
 
+  }
 
+  .d-md-flex {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+  }
 
+  .d-md-inline-flex {
 
+    display: -ms-inline-flexbox !important;
 
+    display: inline-flex !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .d-lg-none {
 
+    display: none !important;
 
+  }
 
+  .d-lg-inline {
 
+    display: inline !important;
 
+  }
 
+  .d-lg-inline-block {
 
+    display: inline-block !important;
 
+  }
 
+  .d-lg-block {
 
+    display: block !important;
 
+  }
 
+  .d-lg-table {
 
+    display: table !important;
 
+  }
 
+  .d-lg-table-row {
 
+    display: table-row !important;
 
+  }
 
+  .d-lg-table-cell {
 
+    display: table-cell !important;
 
+  }
 
+  .d-lg-flex {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+  }
 
+  .d-lg-inline-flex {
 
+    display: -ms-inline-flexbox !important;
 
+    display: inline-flex !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .d-xl-none {
 
+    display: none !important;
 
+  }
 
+  .d-xl-inline {
 
+    display: inline !important;
 
+  }
 
+  .d-xl-inline-block {
 
+    display: inline-block !important;
 
+  }
 
+  .d-xl-block {
 
+    display: block !important;
 
+  }
 
+  .d-xl-table {
 
+    display: table !important;
 
+  }
 
+  .d-xl-table-row {
 
+    display: table-row !important;
 
+  }
 
+  .d-xl-table-cell {
 
+    display: table-cell !important;
 
+  }
 
+  .d-xl-flex {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+  }
 
+  .d-xl-inline-flex {
 
+    display: -ms-inline-flexbox !important;
 
+    display: inline-flex !important;
 
+  }
 
+}
 
+
 
+@media print {
 
+  .d-print-none {
 
+    display: none !important;
 
+  }
 
+  .d-print-inline {
 
+    display: inline !important;
 
+  }
 
+  .d-print-inline-block {
 
+    display: inline-block !important;
 
+  }
 
+  .d-print-block {
 
+    display: block !important;
 
+  }
 
+  .d-print-table {
 
+    display: table !important;
 
+  }
 
+  .d-print-table-row {
 
+    display: table-row !important;
 
+  }
 
+  .d-print-table-cell {
 
+    display: table-cell !important;
 
+  }
 
+  .d-print-flex {
 
+    display: -ms-flexbox !important;
 
+    display: flex !important;
 
+  }
 
+  .d-print-inline-flex {
 
+    display: -ms-inline-flexbox !important;
 
+    display: inline-flex !important;
 
+  }
 
+}
 
+
 
+.embed-responsive {
 
+  position: relative;
 
+  display: block;
 
+  width: 100%;
 
+  padding: 0;
 
+  overflow: hidden;
 
+}
 
+
 
+.embed-responsive::before {
 
+  display: block;
 
+  content: "";
 
+}
 
+
 
+.embed-responsive .embed-responsive-item,
 
+.embed-responsive iframe,
 
+.embed-responsive embed,
 
+.embed-responsive object,
 
+.embed-responsive video {
 
+  position: absolute;
 
+  top: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  border: 0;
 
+}
 
+
 
+.embed-responsive-21by9::before {
 
+  padding-top: 42.857143%;
 
+}
 
+
 
+.embed-responsive-16by9::before {
 
+  padding-top: 56.25%;
 
+}
 
+
 
+.embed-responsive-4by3::before {
 
+  padding-top: 75%;
 
+}
 
+
 
+.embed-responsive-1by1::before {
 
+  padding-top: 100%;
 
+}
 
+
 
+.embed-responsive-21by9::before {
 
+  padding-top: 42.857143%;
 
+}
 
+
 
+.embed-responsive-16by9::before {
 
+  padding-top: 56.25%;
 
+}
 
+
 
+.embed-responsive-4by3::before {
 
+  padding-top: 75%;
 
+}
 
+
 
+.embed-responsive-1by1::before {
 
+  padding-top: 100%;
 
+}
 
+
 
+.flex-row {
 
+  -ms-flex-direction: row !important;
 
+  flex-direction: row !important;
 
+}
 
+
 
+.flex-column {
 
+  -ms-flex-direction: column !important;
 
+  flex-direction: column !important;
 
+}
 
+
 
+.flex-row-reverse {
 
+  -ms-flex-direction: row-reverse !important;
 
+  flex-direction: row-reverse !important;
 
+}
 
+
 
+.flex-column-reverse {
 
+  -ms-flex-direction: column-reverse !important;
 
+  flex-direction: column-reverse !important;
 
+}
 
+
 
+.flex-wrap {
 
+  -ms-flex-wrap: wrap !important;
 
+  flex-wrap: wrap !important;
 
+}
 
+
 
+.flex-nowrap {
 
+  -ms-flex-wrap: nowrap !important;
 
+  flex-wrap: nowrap !important;
 
+}
 
+
 
+.flex-wrap-reverse {
 
+  -ms-flex-wrap: wrap-reverse !important;
 
+  flex-wrap: wrap-reverse !important;
 
+}
 
+
 
+.flex-fill {
 
+  -ms-flex: 1 1 auto !important;
 
+  flex: 1 1 auto !important;
 
+}
 
+
 
+.flex-grow-0 {
 
+  -ms-flex-positive: 0 !important;
 
+  flex-grow: 0 !important;
 
+}
 
+
 
+.flex-grow-1 {
 
+  -ms-flex-positive: 1 !important;
 
+  flex-grow: 1 !important;
 
+}
 
+
 
+.flex-shrink-0 {
 
+  -ms-flex-negative: 0 !important;
 
+  flex-shrink: 0 !important;
 
+}
 
+
 
+.flex-shrink-1 {
 
+  -ms-flex-negative: 1 !important;
 
+  flex-shrink: 1 !important;
 
+}
 
+
 
+.justify-content-start {
 
+  -ms-flex-pack: start !important;
 
+  justify-content: flex-start !important;
 
+}
 
+
 
+.justify-content-end {
 
+  -ms-flex-pack: end !important;
 
+  justify-content: flex-end !important;
 
+}
 
+
 
+.justify-content-center {
 
+  -ms-flex-pack: center !important;
 
+  justify-content: center !important;
 
+}
 
+
 
+.justify-content-between {
 
+  -ms-flex-pack: justify !important;
 
+  justify-content: space-between !important;
 
+}
 
+
 
+.justify-content-around {
 
+  -ms-flex-pack: distribute !important;
 
+  justify-content: space-around !important;
 
+}
 
+
 
+.align-items-start {
 
+  -ms-flex-align: start !important;
 
+  align-items: flex-start !important;
 
+}
 
+
 
+.align-items-end {
 
+  -ms-flex-align: end !important;
 
+  align-items: flex-end !important;
 
+}
 
+
 
+.align-items-center {
 
+  -ms-flex-align: center !important;
 
+  align-items: center !important;
 
+}
 
+
 
+.align-items-baseline {
 
+  -ms-flex-align: baseline !important;
 
+  align-items: baseline !important;
 
+}
 
+
 
+.align-items-stretch {
 
+  -ms-flex-align: stretch !important;
 
+  align-items: stretch !important;
 
+}
 
+
 
+.align-content-start {
 
+  -ms-flex-line-pack: start !important;
 
+  align-content: flex-start !important;
 
+}
 
+
 
+.align-content-end {
 
+  -ms-flex-line-pack: end !important;
 
+  align-content: flex-end !important;
 
+}
 
+
 
+.align-content-center {
 
+  -ms-flex-line-pack: center !important;
 
+  align-content: center !important;
 
+}
 
+
 
+.align-content-between {
 
+  -ms-flex-line-pack: justify !important;
 
+  align-content: space-between !important;
 
+}
 
+
 
+.align-content-around {
 
+  -ms-flex-line-pack: distribute !important;
 
+  align-content: space-around !important;
 
+}
 
+
 
+.align-content-stretch {
 
+  -ms-flex-line-pack: stretch !important;
 
+  align-content: stretch !important;
 
+}
 
+
 
+.align-self-auto {
 
+  -ms-flex-item-align: auto !important;
 
+  align-self: auto !important;
 
+}
 
+
 
+.align-self-start {
 
+  -ms-flex-item-align: start !important;
 
+  align-self: flex-start !important;
 
+}
 
+
 
+.align-self-end {
 
+  -ms-flex-item-align: end !important;
 
+  align-self: flex-end !important;
 
+}
 
+
 
+.align-self-center {
 
+  -ms-flex-item-align: center !important;
 
+  align-self: center !important;
 
+}
 
+
 
+.align-self-baseline {
 
+  -ms-flex-item-align: baseline !important;
 
+  align-self: baseline !important;
 
+}
 
+
 
+.align-self-stretch {
 
+  -ms-flex-item-align: stretch !important;
 
+  align-self: stretch !important;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .flex-sm-row {
 
+    -ms-flex-direction: row !important;
 
+    flex-direction: row !important;
 
+  }
 
+  .flex-sm-column {
 
+    -ms-flex-direction: column !important;
 
+    flex-direction: column !important;
 
+  }
 
+  .flex-sm-row-reverse {
 
+    -ms-flex-direction: row-reverse !important;
 
+    flex-direction: row-reverse !important;
 
+  }
 
+  .flex-sm-column-reverse {
 
+    -ms-flex-direction: column-reverse !important;
 
+    flex-direction: column-reverse !important;
 
+  }
 
+  .flex-sm-wrap {
 
+    -ms-flex-wrap: wrap !important;
 
+    flex-wrap: wrap !important;
 
+  }
 
+  .flex-sm-nowrap {
 
+    -ms-flex-wrap: nowrap !important;
 
+    flex-wrap: nowrap !important;
 
+  }
 
+  .flex-sm-wrap-reverse {
 
+    -ms-flex-wrap: wrap-reverse !important;
 
+    flex-wrap: wrap-reverse !important;
 
+  }
 
+  .flex-sm-fill {
 
+    -ms-flex: 1 1 auto !important;
 
+    flex: 1 1 auto !important;
 
+  }
 
+  .flex-sm-grow-0 {
 
+    -ms-flex-positive: 0 !important;
 
+    flex-grow: 0 !important;
 
+  }
 
+  .flex-sm-grow-1 {
 
+    -ms-flex-positive: 1 !important;
 
+    flex-grow: 1 !important;
 
+  }
 
+  .flex-sm-shrink-0 {
 
+    -ms-flex-negative: 0 !important;
 
+    flex-shrink: 0 !important;
 
+  }
 
+  .flex-sm-shrink-1 {
 
+    -ms-flex-negative: 1 !important;
 
+    flex-shrink: 1 !important;
 
+  }
 
+  .justify-content-sm-start {
 
+    -ms-flex-pack: start !important;
 
+    justify-content: flex-start !important;
 
+  }
 
+  .justify-content-sm-end {
 
+    -ms-flex-pack: end !important;
 
+    justify-content: flex-end !important;
 
+  }
 
+  .justify-content-sm-center {
 
+    -ms-flex-pack: center !important;
 
+    justify-content: center !important;
 
+  }
 
+  .justify-content-sm-between {
 
+    -ms-flex-pack: justify !important;
 
+    justify-content: space-between !important;
 
+  }
 
+  .justify-content-sm-around {
 
+    -ms-flex-pack: distribute !important;
 
+    justify-content: space-around !important;
 
+  }
 
+  .align-items-sm-start {
 
+    -ms-flex-align: start !important;
 
+    align-items: flex-start !important;
 
+  }
 
+  .align-items-sm-end {
 
+    -ms-flex-align: end !important;
 
+    align-items: flex-end !important;
 
+  }
 
+  .align-items-sm-center {
 
+    -ms-flex-align: center !important;
 
+    align-items: center !important;
 
+  }
 
+  .align-items-sm-baseline {
 
+    -ms-flex-align: baseline !important;
 
+    align-items: baseline !important;
 
+  }
 
+  .align-items-sm-stretch {
 
+    -ms-flex-align: stretch !important;
 
+    align-items: stretch !important;
 
+  }
 
+  .align-content-sm-start {
 
+    -ms-flex-line-pack: start !important;
 
+    align-content: flex-start !important;
 
+  }
 
+  .align-content-sm-end {
 
+    -ms-flex-line-pack: end !important;
 
+    align-content: flex-end !important;
 
+  }
 
+  .align-content-sm-center {
 
+    -ms-flex-line-pack: center !important;
 
+    align-content: center !important;
 
+  }
 
+  .align-content-sm-between {
 
+    -ms-flex-line-pack: justify !important;
 
+    align-content: space-between !important;
 
+  }
 
+  .align-content-sm-around {
 
+    -ms-flex-line-pack: distribute !important;
 
+    align-content: space-around !important;
 
+  }
 
+  .align-content-sm-stretch {
 
+    -ms-flex-line-pack: stretch !important;
 
+    align-content: stretch !important;
 
+  }
 
+  .align-self-sm-auto {
 
+    -ms-flex-item-align: auto !important;
 
+    align-self: auto !important;
 
+  }
 
+  .align-self-sm-start {
 
+    -ms-flex-item-align: start !important;
 
+    align-self: flex-start !important;
 
+  }
 
+  .align-self-sm-end {
 
+    -ms-flex-item-align: end !important;
 
+    align-self: flex-end !important;
 
+  }
 
+  .align-self-sm-center {
 
+    -ms-flex-item-align: center !important;
 
+    align-self: center !important;
 
+  }
 
+  .align-self-sm-baseline {
 
+    -ms-flex-item-align: baseline !important;
 
+    align-self: baseline !important;
 
+  }
 
+  .align-self-sm-stretch {
 
+    -ms-flex-item-align: stretch !important;
 
+    align-self: stretch !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .flex-md-row {
 
+    -ms-flex-direction: row !important;
 
+    flex-direction: row !important;
 
+  }
 
+  .flex-md-column {
 
+    -ms-flex-direction: column !important;
 
+    flex-direction: column !important;
 
+  }
 
+  .flex-md-row-reverse {
 
+    -ms-flex-direction: row-reverse !important;
 
+    flex-direction: row-reverse !important;
 
+  }
 
+  .flex-md-column-reverse {
 
+    -ms-flex-direction: column-reverse !important;
 
+    flex-direction: column-reverse !important;
 
+  }
 
+  .flex-md-wrap {
 
+    -ms-flex-wrap: wrap !important;
 
+    flex-wrap: wrap !important;
 
+  }
 
+  .flex-md-nowrap {
 
+    -ms-flex-wrap: nowrap !important;
 
+    flex-wrap: nowrap !important;
 
+  }
 
+  .flex-md-wrap-reverse {
 
+    -ms-flex-wrap: wrap-reverse !important;
 
+    flex-wrap: wrap-reverse !important;
 
+  }
 
+  .flex-md-fill {
 
+    -ms-flex: 1 1 auto !important;
 
+    flex: 1 1 auto !important;
 
+  }
 
+  .flex-md-grow-0 {
 
+    -ms-flex-positive: 0 !important;
 
+    flex-grow: 0 !important;
 
+  }
 
+  .flex-md-grow-1 {
 
+    -ms-flex-positive: 1 !important;
 
+    flex-grow: 1 !important;
 
+  }
 
+  .flex-md-shrink-0 {
 
+    -ms-flex-negative: 0 !important;
 
+    flex-shrink: 0 !important;
 
+  }
 
+  .flex-md-shrink-1 {
 
+    -ms-flex-negative: 1 !important;
 
+    flex-shrink: 1 !important;
 
+  }
 
+  .justify-content-md-start {
 
+    -ms-flex-pack: start !important;
 
+    justify-content: flex-start !important;
 
+  }
 
+  .justify-content-md-end {
 
+    -ms-flex-pack: end !important;
 
+    justify-content: flex-end !important;
 
+  }
 
+  .justify-content-md-center {
 
+    -ms-flex-pack: center !important;
 
+    justify-content: center !important;
 
+  }
 
+  .justify-content-md-between {
 
+    -ms-flex-pack: justify !important;
 
+    justify-content: space-between !important;
 
+  }
 
+  .justify-content-md-around {
 
+    -ms-flex-pack: distribute !important;
 
+    justify-content: space-around !important;
 
+  }
 
+  .align-items-md-start {
 
+    -ms-flex-align: start !important;
 
+    align-items: flex-start !important;
 
+  }
 
+  .align-items-md-end {
 
+    -ms-flex-align: end !important;
 
+    align-items: flex-end !important;
 
+  }
 
+  .align-items-md-center {
 
+    -ms-flex-align: center !important;
 
+    align-items: center !important;
 
+  }
 
+  .align-items-md-baseline {
 
+    -ms-flex-align: baseline !important;
 
+    align-items: baseline !important;
 
+  }
 
+  .align-items-md-stretch {
 
+    -ms-flex-align: stretch !important;
 
+    align-items: stretch !important;
 
+  }
 
+  .align-content-md-start {
 
+    -ms-flex-line-pack: start !important;
 
+    align-content: flex-start !important;
 
+  }
 
+  .align-content-md-end {
 
+    -ms-flex-line-pack: end !important;
 
+    align-content: flex-end !important;
 
+  }
 
+  .align-content-md-center {
 
+    -ms-flex-line-pack: center !important;
 
+    align-content: center !important;
 
+  }
 
+  .align-content-md-between {
 
+    -ms-flex-line-pack: justify !important;
 
+    align-content: space-between !important;
 
+  }
 
+  .align-content-md-around {
 
+    -ms-flex-line-pack: distribute !important;
 
+    align-content: space-around !important;
 
+  }
 
+  .align-content-md-stretch {
 
+    -ms-flex-line-pack: stretch !important;
 
+    align-content: stretch !important;
 
+  }
 
+  .align-self-md-auto {
 
+    -ms-flex-item-align: auto !important;
 
+    align-self: auto !important;
 
+  }
 
+  .align-self-md-start {
 
+    -ms-flex-item-align: start !important;
 
+    align-self: flex-start !important;
 
+  }
 
+  .align-self-md-end {
 
+    -ms-flex-item-align: end !important;
 
+    align-self: flex-end !important;
 
+  }
 
+  .align-self-md-center {
 
+    -ms-flex-item-align: center !important;
 
+    align-self: center !important;
 
+  }
 
+  .align-self-md-baseline {
 
+    -ms-flex-item-align: baseline !important;
 
+    align-self: baseline !important;
 
+  }
 
+  .align-self-md-stretch {
 
+    -ms-flex-item-align: stretch !important;
 
+    align-self: stretch !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .flex-lg-row {
 
+    -ms-flex-direction: row !important;
 
+    flex-direction: row !important;
 
+  }
 
+  .flex-lg-column {
 
+    -ms-flex-direction: column !important;
 
+    flex-direction: column !important;
 
+  }
 
+  .flex-lg-row-reverse {
 
+    -ms-flex-direction: row-reverse !important;
 
+    flex-direction: row-reverse !important;
 
+  }
 
+  .flex-lg-column-reverse {
 
+    -ms-flex-direction: column-reverse !important;
 
+    flex-direction: column-reverse !important;
 
+  }
 
+  .flex-lg-wrap {
 
+    -ms-flex-wrap: wrap !important;
 
+    flex-wrap: wrap !important;
 
+  }
 
+  .flex-lg-nowrap {
 
+    -ms-flex-wrap: nowrap !important;
 
+    flex-wrap: nowrap !important;
 
+  }
 
+  .flex-lg-wrap-reverse {
 
+    -ms-flex-wrap: wrap-reverse !important;
 
+    flex-wrap: wrap-reverse !important;
 
+  }
 
+  .flex-lg-fill {
 
+    -ms-flex: 1 1 auto !important;
 
+    flex: 1 1 auto !important;
 
+  }
 
+  .flex-lg-grow-0 {
 
+    -ms-flex-positive: 0 !important;
 
+    flex-grow: 0 !important;
 
+  }
 
+  .flex-lg-grow-1 {
 
+    -ms-flex-positive: 1 !important;
 
+    flex-grow: 1 !important;
 
+  }
 
+  .flex-lg-shrink-0 {
 
+    -ms-flex-negative: 0 !important;
 
+    flex-shrink: 0 !important;
 
+  }
 
+  .flex-lg-shrink-1 {
 
+    -ms-flex-negative: 1 !important;
 
+    flex-shrink: 1 !important;
 
+  }
 
+  .justify-content-lg-start {
 
+    -ms-flex-pack: start !important;
 
+    justify-content: flex-start !important;
 
+  }
 
+  .justify-content-lg-end {
 
+    -ms-flex-pack: end !important;
 
+    justify-content: flex-end !important;
 
+  }
 
+  .justify-content-lg-center {
 
+    -ms-flex-pack: center !important;
 
+    justify-content: center !important;
 
+  }
 
+  .justify-content-lg-between {
 
+    -ms-flex-pack: justify !important;
 
+    justify-content: space-between !important;
 
+  }
 
+  .justify-content-lg-around {
 
+    -ms-flex-pack: distribute !important;
 
+    justify-content: space-around !important;
 
+  }
 
+  .align-items-lg-start {
 
+    -ms-flex-align: start !important;
 
+    align-items: flex-start !important;
 
+  }
 
+  .align-items-lg-end {
 
+    -ms-flex-align: end !important;
 
+    align-items: flex-end !important;
 
+  }
 
+  .align-items-lg-center {
 
+    -ms-flex-align: center !important;
 
+    align-items: center !important;
 
+  }
 
+  .align-items-lg-baseline {
 
+    -ms-flex-align: baseline !important;
 
+    align-items: baseline !important;
 
+  }
 
+  .align-items-lg-stretch {
 
+    -ms-flex-align: stretch !important;
 
+    align-items: stretch !important;
 
+  }
 
+  .align-content-lg-start {
 
+    -ms-flex-line-pack: start !important;
 
+    align-content: flex-start !important;
 
+  }
 
+  .align-content-lg-end {
 
+    -ms-flex-line-pack: end !important;
 
+    align-content: flex-end !important;
 
+  }
 
+  .align-content-lg-center {
 
+    -ms-flex-line-pack: center !important;
 
+    align-content: center !important;
 
+  }
 
+  .align-content-lg-between {
 
+    -ms-flex-line-pack: justify !important;
 
+    align-content: space-between !important;
 
+  }
 
+  .align-content-lg-around {
 
+    -ms-flex-line-pack: distribute !important;
 
+    align-content: space-around !important;
 
+  }
 
+  .align-content-lg-stretch {
 
+    -ms-flex-line-pack: stretch !important;
 
+    align-content: stretch !important;
 
+  }
 
+  .align-self-lg-auto {
 
+    -ms-flex-item-align: auto !important;
 
+    align-self: auto !important;
 
+  }
 
+  .align-self-lg-start {
 
+    -ms-flex-item-align: start !important;
 
+    align-self: flex-start !important;
 
+  }
 
+  .align-self-lg-end {
 
+    -ms-flex-item-align: end !important;
 
+    align-self: flex-end !important;
 
+  }
 
+  .align-self-lg-center {
 
+    -ms-flex-item-align: center !important;
 
+    align-self: center !important;
 
+  }
 
+  .align-self-lg-baseline {
 
+    -ms-flex-item-align: baseline !important;
 
+    align-self: baseline !important;
 
+  }
 
+  .align-self-lg-stretch {
 
+    -ms-flex-item-align: stretch !important;
 
+    align-self: stretch !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .flex-xl-row {
 
+    -ms-flex-direction: row !important;
 
+    flex-direction: row !important;
 
+  }
 
+  .flex-xl-column {
 
+    -ms-flex-direction: column !important;
 
+    flex-direction: column !important;
 
+  }
 
+  .flex-xl-row-reverse {
 
+    -ms-flex-direction: row-reverse !important;
 
+    flex-direction: row-reverse !important;
 
+  }
 
+  .flex-xl-column-reverse {
 
+    -ms-flex-direction: column-reverse !important;
 
+    flex-direction: column-reverse !important;
 
+  }
 
+  .flex-xl-wrap {
 
+    -ms-flex-wrap: wrap !important;
 
+    flex-wrap: wrap !important;
 
+  }
 
+  .flex-xl-nowrap {
 
+    -ms-flex-wrap: nowrap !important;
 
+    flex-wrap: nowrap !important;
 
+  }
 
+  .flex-xl-wrap-reverse {
 
+    -ms-flex-wrap: wrap-reverse !important;
 
+    flex-wrap: wrap-reverse !important;
 
+  }
 
+  .flex-xl-fill {
 
+    -ms-flex: 1 1 auto !important;
 
+    flex: 1 1 auto !important;
 
+  }
 
+  .flex-xl-grow-0 {
 
+    -ms-flex-positive: 0 !important;
 
+    flex-grow: 0 !important;
 
+  }
 
+  .flex-xl-grow-1 {
 
+    -ms-flex-positive: 1 !important;
 
+    flex-grow: 1 !important;
 
+  }
 
+  .flex-xl-shrink-0 {
 
+    -ms-flex-negative: 0 !important;
 
+    flex-shrink: 0 !important;
 
+  }
 
+  .flex-xl-shrink-1 {
 
+    -ms-flex-negative: 1 !important;
 
+    flex-shrink: 1 !important;
 
+  }
 
+  .justify-content-xl-start {
 
+    -ms-flex-pack: start !important;
 
+    justify-content: flex-start !important;
 
+  }
 
+  .justify-content-xl-end {
 
+    -ms-flex-pack: end !important;
 
+    justify-content: flex-end !important;
 
+  }
 
+  .justify-content-xl-center {
 
+    -ms-flex-pack: center !important;
 
+    justify-content: center !important;
 
+  }
 
+  .justify-content-xl-between {
 
+    -ms-flex-pack: justify !important;
 
+    justify-content: space-between !important;
 
+  }
 
+  .justify-content-xl-around {
 
+    -ms-flex-pack: distribute !important;
 
+    justify-content: space-around !important;
 
+  }
 
+  .align-items-xl-start {
 
+    -ms-flex-align: start !important;
 
+    align-items: flex-start !important;
 
+  }
 
+  .align-items-xl-end {
 
+    -ms-flex-align: end !important;
 
+    align-items: flex-end !important;
 
+  }
 
+  .align-items-xl-center {
 
+    -ms-flex-align: center !important;
 
+    align-items: center !important;
 
+  }
 
+  .align-items-xl-baseline {
 
+    -ms-flex-align: baseline !important;
 
+    align-items: baseline !important;
 
+  }
 
+  .align-items-xl-stretch {
 
+    -ms-flex-align: stretch !important;
 
+    align-items: stretch !important;
 
+  }
 
+  .align-content-xl-start {
 
+    -ms-flex-line-pack: start !important;
 
+    align-content: flex-start !important;
 
+  }
 
+  .align-content-xl-end {
 
+    -ms-flex-line-pack: end !important;
 
+    align-content: flex-end !important;
 
+  }
 
+  .align-content-xl-center {
 
+    -ms-flex-line-pack: center !important;
 
+    align-content: center !important;
 
+  }
 
+  .align-content-xl-between {
 
+    -ms-flex-line-pack: justify !important;
 
+    align-content: space-between !important;
 
+  }
 
+  .align-content-xl-around {
 
+    -ms-flex-line-pack: distribute !important;
 
+    align-content: space-around !important;
 
+  }
 
+  .align-content-xl-stretch {
 
+    -ms-flex-line-pack: stretch !important;
 
+    align-content: stretch !important;
 
+  }
 
+  .align-self-xl-auto {
 
+    -ms-flex-item-align: auto !important;
 
+    align-self: auto !important;
 
+  }
 
+  .align-self-xl-start {
 
+    -ms-flex-item-align: start !important;
 
+    align-self: flex-start !important;
 
+  }
 
+  .align-self-xl-end {
 
+    -ms-flex-item-align: end !important;
 
+    align-self: flex-end !important;
 
+  }
 
+  .align-self-xl-center {
 
+    -ms-flex-item-align: center !important;
 
+    align-self: center !important;
 
+  }
 
+  .align-self-xl-baseline {
 
+    -ms-flex-item-align: baseline !important;
 
+    align-self: baseline !important;
 
+  }
 
+  .align-self-xl-stretch {
 
+    -ms-flex-item-align: stretch !important;
 
+    align-self: stretch !important;
 
+  }
 
+}
 
+
 
+.float-left {
 
+  float: left !important;
 
+}
 
+
 
+.float-right {
 
+  float: right !important;
 
+}
 
+
 
+.float-none {
 
+  float: none !important;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .float-sm-left {
 
+    float: left !important;
 
+  }
 
+  .float-sm-right {
 
+    float: right !important;
 
+  }
 
+  .float-sm-none {
 
+    float: none !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .float-md-left {
 
+    float: left !important;
 
+  }
 
+  .float-md-right {
 
+    float: right !important;
 
+  }
 
+  .float-md-none {
 
+    float: none !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .float-lg-left {
 
+    float: left !important;
 
+  }
 
+  .float-lg-right {
 
+    float: right !important;
 
+  }
 
+  .float-lg-none {
 
+    float: none !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .float-xl-left {
 
+    float: left !important;
 
+  }
 
+  .float-xl-right {
 
+    float: right !important;
 
+  }
 
+  .float-xl-none {
 
+    float: none !important;
 
+  }
 
+}
 
+
 
+.overflow-auto {
 
+  overflow: auto !important;
 
+}
 
+
 
+.overflow-hidden {
 
+  overflow: hidden !important;
 
+}
 
+
 
+.position-static {
 
+  position: static !important;
 
+}
 
+
 
+.position-relative {
 
+  position: relative !important;
 
+}
 
+
 
+.position-absolute {
 
+  position: absolute !important;
 
+}
 
+
 
+.position-fixed {
 
+  position: fixed !important;
 
+}
 
+
 
+.position-sticky {
 
+  position: -webkit-sticky !important;
 
+  position: sticky !important;
 
+}
 
+
 
+.fixed-top {
 
+  position: fixed;
 
+  top: 0;
 
+  right: 0;
 
+  left: 0;
 
+  z-index: 1030;
 
+}
 
+
 
+.fixed-bottom {
 
+  position: fixed;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: 1030;
 
+}
 
+
 
+@supports ((position: -webkit-sticky) or (position: sticky)) {
 
+  .sticky-top {
 
+    position: -webkit-sticky;
 
+    position: sticky;
 
+    top: 0;
 
+    z-index: 1020;
 
+  }
 
+}
 
+
 
+.sr-only {
 
+  position: absolute;
 
+  width: 1px;
 
+  height: 1px;
 
+  padding: 0;
 
+  overflow: hidden;
 
+  clip: rect(0, 0, 0, 0);
 
+  white-space: nowrap;
 
+  border: 0;
 
+}
 
+
 
+.sr-only-focusable:active, .sr-only-focusable:focus {
 
+  position: static;
 
+  width: auto;
 
+  height: auto;
 
+  overflow: visible;
 
+  clip: auto;
 
+  white-space: normal;
 
+}
 
+
 
+.shadow-sm {
 
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 
+}
 
+
 
+.shadow {
 
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 
+}
 
+
 
+.shadow-lg {
 
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
 
+}
 
+
 
+.shadow-none {
 
+  box-shadow: none !important;
 
+}
 
+
 
+.w-25 {
 
+  width: 25% !important;
 
+}
 
+
 
+.w-50 {
 
+  width: 50% !important;
 
+}
 
+
 
+.w-75 {
 
+  width: 75% !important;
 
+}
 
+
 
+.w-100 {
 
+  width: 100% !important;
 
+}
 
+
 
+.w-auto {
 
+  width: auto !important;
 
+}
 
+
 
+.h-25 {
 
+  height: 25% !important;
 
+}
 
+
 
+.h-50 {
 
+  height: 50% !important;
 
+}
 
+
 
+.h-75 {
 
+  height: 75% !important;
 
+}
 
+
 
+.h-100 {
 
+  height: 100% !important;
 
+}
 
+
 
+.h-auto {
 
+  height: auto !important;
 
+}
 
+
 
+.mw-100 {
 
+  max-width: 100% !important;
 
+}
 
+
 
+.mh-100 {
 
+  max-height: 100% !important;
 
+}
 
+
 
+.min-vw-100 {
 
+  min-width: 100vw !important;
 
+}
 
+
 
+.min-vh-100 {
 
+  min-height: 100vh !important;
 
+}
 
+
 
+.vw-100 {
 
+  width: 100vw !important;
 
+}
 
+
 
+.vh-100 {
 
+  height: 100vh !important;
 
+}
 
+
 
+.stretched-link::after {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: 1;
 
+  pointer-events: auto;
 
+  content: "";
 
+  background-color: rgba(0, 0, 0, 0);
 
+}
 
+
 
+.m-0 {
 
+  margin: 0 !important;
 
+}
 
+
 
+.mt-0,
 
+.my-0 {
 
+  margin-top: 0 !important;
 
+}
 
+
 
+.mr-0,
 
+.mx-0 {
 
+  margin-right: 0 !important;
 
+}
 
+
 
+.mb-0,
 
+.my-0 {
 
+  margin-bottom: 0 !important;
 
+}
 
+
 
+.ml-0,
 
+.mx-0 {
 
+  margin-left: 0 !important;
 
+}
 
+
 
+.m-1 {
 
+  margin: 0.25rem !important;
 
+}
 
+
 
+.mt-1,
 
+.my-1 {
 
+  margin-top: 0.25rem !important;
 
+}
 
+
 
+.mr-1,
 
+.mx-1 {
 
+  margin-right: 0.25rem !important;
 
+}
 
+
 
+.mb-1,
 
+.my-1 {
 
+  margin-bottom: 0.25rem !important;
 
+}
 
+
 
+.ml-1,
 
+.mx-1 {
 
+  margin-left: 0.25rem !important;
 
+}
 
+
 
+.m-2 {
 
+  margin: 0.5rem !important;
 
+}
 
+
 
+.mt-2,
 
+.my-2 {
 
+  margin-top: 0.5rem !important;
 
+}
 
+
 
+.mr-2,
 
+.mx-2 {
 
+  margin-right: 0.5rem !important;
 
+}
 
+
 
+.mb-2,
 
+.my-2 {
 
+  margin-bottom: 0.5rem !important;
 
+}
 
+
 
+.ml-2,
 
+.mx-2 {
 
+  margin-left: 0.5rem !important;
 
+}
 
+
 
+.m-3 {
 
+  margin: 1rem !important;
 
+}
 
+
 
+.mt-3,
 
+.my-3 {
 
+  margin-top: 1rem !important;
 
+}
 
+
 
+.mr-3,
 
+.mx-3 {
 
+  margin-right: 1rem !important;
 
+}
 
+
 
+.mb-3,
 
+.my-3 {
 
+  margin-bottom: 1rem !important;
 
+}
 
+
 
+.ml-3,
 
+.mx-3 {
 
+  margin-left: 1rem !important;
 
+}
 
+
 
+.m-4 {
 
+  margin: 1.5rem !important;
 
+}
 
+
 
+.mt-4,
 
+.my-4 {
 
+  margin-top: 1.5rem !important;
 
+}
 
+
 
+.mr-4,
 
+.mx-4 {
 
+  margin-right: 1.5rem !important;
 
+}
 
+
 
+.mb-4,
 
+.my-4 {
 
+  margin-bottom: 1.5rem !important;
 
+}
 
+
 
+.ml-4,
 
+.mx-4 {
 
+  margin-left: 1.5rem !important;
 
+}
 
+
 
+.m-5 {
 
+  margin: 3rem !important;
 
+}
 
+
 
+.mt-5,
 
+.my-5 {
 
+  margin-top: 3rem !important;
 
+}
 
+
 
+.mr-5,
 
+.mx-5 {
 
+  margin-right: 3rem !important;
 
+}
 
+
 
+.mb-5,
 
+.my-5 {
 
+  margin-bottom: 3rem !important;
 
+}
 
+
 
+.ml-5,
 
+.mx-5 {
 
+  margin-left: 3rem !important;
 
+}
 
+
 
+.p-0 {
 
+  padding: 0 !important;
 
+}
 
+
 
+.pt-0,
 
+.py-0 {
 
+  padding-top: 0 !important;
 
+}
 
+
 
+.pr-0,
 
+.px-0 {
 
+  padding-right: 0 !important;
 
+}
 
+
 
+.pb-0,
 
+.py-0 {
 
+  padding-bottom: 0 !important;
 
+}
 
+
 
+.pl-0,
 
+.px-0 {
 
+  padding-left: 0 !important;
 
+}
 
+
 
+.p-1 {
 
+  padding: 0.25rem !important;
 
+}
 
+
 
+.pt-1,
 
+.py-1 {
 
+  padding-top: 0.25rem !important;
 
+}
 
+
 
+.pr-1,
 
+.px-1 {
 
+  padding-right: 0.25rem !important;
 
+}
 
+
 
+.pb-1,
 
+.py-1 {
 
+  padding-bottom: 0.25rem !important;
 
+}
 
+
 
+.pl-1,
 
+.px-1 {
 
+  padding-left: 0.25rem !important;
 
+}
 
+
 
+.p-2 {
 
+  padding: 0.5rem !important;
 
+}
 
+
 
+.pt-2,
 
+.py-2 {
 
+  padding-top: 0.5rem !important;
 
+}
 
+
 
+.pr-2,
 
+.px-2 {
 
+  padding-right: 0.5rem !important;
 
+}
 
+
 
+.pb-2,
 
+.py-2 {
 
+  padding-bottom: 0.5rem !important;
 
+}
 
+
 
+.pl-2,
 
+.px-2 {
 
+  padding-left: 0.5rem !important;
 
+}
 
+
 
+.p-3 {
 
+  padding: 1rem !important;
 
+}
 
+
 
+.pt-3,
 
+.py-3 {
 
+  padding-top: 1rem !important;
 
+}
 
+
 
+.pr-3,
 
+.px-3 {
 
+  padding-right: 1rem !important;
 
+}
 
+
 
+.pb-3,
 
+.py-3 {
 
+  padding-bottom: 1rem !important;
 
+}
 
+
 
+.pl-3,
 
+.px-3 {
 
+  padding-left: 1rem !important;
 
+}
 
+
 
+.p-4 {
 
+  padding: 1.5rem !important;
 
+}
 
+
 
+.pt-4,
 
+.py-4 {
 
+  padding-top: 1.5rem !important;
 
+}
 
+
 
+.pr-4,
 
+.px-4 {
 
+  padding-right: 1.5rem !important;
 
+}
 
+
 
+.pb-4,
 
+.py-4 {
 
+  padding-bottom: 1.5rem !important;
 
+}
 
+
 
+.pl-4,
 
+.px-4 {
 
+  padding-left: 1.5rem !important;
 
+}
 
+
 
+.p-5 {
 
+  padding: 3rem !important;
 
+}
 
+
 
+.pt-5,
 
+.py-5 {
 
+  padding-top: 3rem !important;
 
+}
 
+
 
+.pr-5,
 
+.px-5 {
 
+  padding-right: 3rem !important;
 
+}
 
+
 
+.pb-5,
 
+.py-5 {
 
+  padding-bottom: 3rem !important;
 
+}
 
+
 
+.pl-5,
 
+.px-5 {
 
+  padding-left: 3rem !important;
 
+}
 
+
 
+.m-n1 {
 
+  margin: -0.25rem !important;
 
+}
 
+
 
+.mt-n1,
 
+.my-n1 {
 
+  margin-top: -0.25rem !important;
 
+}
 
+
 
+.mr-n1,
 
+.mx-n1 {
 
+  margin-right: -0.25rem !important;
 
+}
 
+
 
+.mb-n1,
 
+.my-n1 {
 
+  margin-bottom: -0.25rem !important;
 
+}
 
+
 
+.ml-n1,
 
+.mx-n1 {
 
+  margin-left: -0.25rem !important;
 
+}
 
+
 
+.m-n2 {
 
+  margin: -0.5rem !important;
 
+}
 
+
 
+.mt-n2,
 
+.my-n2 {
 
+  margin-top: -0.5rem !important;
 
+}
 
+
 
+.mr-n2,
 
+.mx-n2 {
 
+  margin-right: -0.5rem !important;
 
+}
 
+
 
+.mb-n2,
 
+.my-n2 {
 
+  margin-bottom: -0.5rem !important;
 
+}
 
+
 
+.ml-n2,
 
+.mx-n2 {
 
+  margin-left: -0.5rem !important;
 
+}
 
+
 
+.m-n3 {
 
+  margin: -1rem !important;
 
+}
 
+
 
+.mt-n3,
 
+.my-n3 {
 
+  margin-top: -1rem !important;
 
+}
 
+
 
+.mr-n3,
 
+.mx-n3 {
 
+  margin-right: -1rem !important;
 
+}
 
+
 
+.mb-n3,
 
+.my-n3 {
 
+  margin-bottom: -1rem !important;
 
+}
 
+
 
+.ml-n3,
 
+.mx-n3 {
 
+  margin-left: -1rem !important;
 
+}
 
+
 
+.m-n4 {
 
+  margin: -1.5rem !important;
 
+}
 
+
 
+.mt-n4,
 
+.my-n4 {
 
+  margin-top: -1.5rem !important;
 
+}
 
+
 
+.mr-n4,
 
+.mx-n4 {
 
+  margin-right: -1.5rem !important;
 
+}
 
+
 
+.mb-n4,
 
+.my-n4 {
 
+  margin-bottom: -1.5rem !important;
 
+}
 
+
 
+.ml-n4,
 
+.mx-n4 {
 
+  margin-left: -1.5rem !important;
 
+}
 
+
 
+.m-n5 {
 
+  margin: -3rem !important;
 
+}
 
+
 
+.mt-n5,
 
+.my-n5 {
 
+  margin-top: -3rem !important;
 
+}
 
+
 
+.mr-n5,
 
+.mx-n5 {
 
+  margin-right: -3rem !important;
 
+}
 
+
 
+.mb-n5,
 
+.my-n5 {
 
+  margin-bottom: -3rem !important;
 
+}
 
+
 
+.ml-n5,
 
+.mx-n5 {
 
+  margin-left: -3rem !important;
 
+}
 
+
 
+.m-auto {
 
+  margin: auto !important;
 
+}
 
+
 
+.mt-auto,
 
+.my-auto {
 
+  margin-top: auto !important;
 
+}
 
+
 
+.mr-auto,
 
+.mx-auto {
 
+  margin-right: auto !important;
 
+}
 
+
 
+.mb-auto,
 
+.my-auto {
 
+  margin-bottom: auto !important;
 
+}
 
+
 
+.ml-auto,
 
+.mx-auto {
 
+  margin-left: auto !important;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .m-sm-0 {
 
+    margin: 0 !important;
 
+  }
 
+  .mt-sm-0,
 
+  .my-sm-0 {
 
+    margin-top: 0 !important;
 
+  }
 
+  .mr-sm-0,
 
+  .mx-sm-0 {
 
+    margin-right: 0 !important;
 
+  }
 
+  .mb-sm-0,
 
+  .my-sm-0 {
 
+    margin-bottom: 0 !important;
 
+  }
 
+  .ml-sm-0,
 
+  .mx-sm-0 {
 
+    margin-left: 0 !important;
 
+  }
 
+  .m-sm-1 {
 
+    margin: 0.25rem !important;
 
+  }
 
+  .mt-sm-1,
 
+  .my-sm-1 {
 
+    margin-top: 0.25rem !important;
 
+  }
 
+  .mr-sm-1,
 
+  .mx-sm-1 {
 
+    margin-right: 0.25rem !important;
 
+  }
 
+  .mb-sm-1,
 
+  .my-sm-1 {
 
+    margin-bottom: 0.25rem !important;
 
+  }
 
+  .ml-sm-1,
 
+  .mx-sm-1 {
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  .m-sm-2 {
 
+    margin: 0.5rem !important;
 
+  }
 
+  .mt-sm-2,
 
+  .my-sm-2 {
 
+    margin-top: 0.5rem !important;
 
+  }
 
+  .mr-sm-2,
 
+  .mx-sm-2 {
 
+    margin-right: 0.5rem !important;
 
+  }
 
+  .mb-sm-2,
 
+  .my-sm-2 {
 
+    margin-bottom: 0.5rem !important;
 
+  }
 
+  .ml-sm-2,
 
+  .mx-sm-2 {
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  .m-sm-3 {
 
+    margin: 1rem !important;
 
+  }
 
+  .mt-sm-3,
 
+  .my-sm-3 {
 
+    margin-top: 1rem !important;
 
+  }
 
+  .mr-sm-3,
 
+  .mx-sm-3 {
 
+    margin-right: 1rem !important;
 
+  }
 
+  .mb-sm-3,
 
+  .my-sm-3 {
 
+    margin-bottom: 1rem !important;
 
+  }
 
+  .ml-sm-3,
 
+  .mx-sm-3 {
 
+    margin-left: 1rem !important;
 
+  }
 
+  .m-sm-4 {
 
+    margin: 1.5rem !important;
 
+  }
 
+  .mt-sm-4,
 
+  .my-sm-4 {
 
+    margin-top: 1.5rem !important;
 
+  }
 
+  .mr-sm-4,
 
+  .mx-sm-4 {
 
+    margin-right: 1.5rem !important;
 
+  }
 
+  .mb-sm-4,
 
+  .my-sm-4 {
 
+    margin-bottom: 1.5rem !important;
 
+  }
 
+  .ml-sm-4,
 
+  .mx-sm-4 {
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  .m-sm-5 {
 
+    margin: 3rem !important;
 
+  }
 
+  .mt-sm-5,
 
+  .my-sm-5 {
 
+    margin-top: 3rem !important;
 
+  }
 
+  .mr-sm-5,
 
+  .mx-sm-5 {
 
+    margin-right: 3rem !important;
 
+  }
 
+  .mb-sm-5,
 
+  .my-sm-5 {
 
+    margin-bottom: 3rem !important;
 
+  }
 
+  .ml-sm-5,
 
+  .mx-sm-5 {
 
+    margin-left: 3rem !important;
 
+  }
 
+  .p-sm-0 {
 
+    padding: 0 !important;
 
+  }
 
+  .pt-sm-0,
 
+  .py-sm-0 {
 
+    padding-top: 0 !important;
 
+  }
 
+  .pr-sm-0,
 
+  .px-sm-0 {
 
+    padding-right: 0 !important;
 
+  }
 
+  .pb-sm-0,
 
+  .py-sm-0 {
 
+    padding-bottom: 0 !important;
 
+  }
 
+  .pl-sm-0,
 
+  .px-sm-0 {
 
+    padding-left: 0 !important;
 
+  }
 
+  .p-sm-1 {
 
+    padding: 0.25rem !important;
 
+  }
 
+  .pt-sm-1,
 
+  .py-sm-1 {
 
+    padding-top: 0.25rem !important;
 
+  }
 
+  .pr-sm-1,
 
+  .px-sm-1 {
 
+    padding-right: 0.25rem !important;
 
+  }
 
+  .pb-sm-1,
 
+  .py-sm-1 {
 
+    padding-bottom: 0.25rem !important;
 
+  }
 
+  .pl-sm-1,
 
+  .px-sm-1 {
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  .p-sm-2 {
 
+    padding: 0.5rem !important;
 
+  }
 
+  .pt-sm-2,
 
+  .py-sm-2 {
 
+    padding-top: 0.5rem !important;
 
+  }
 
+  .pr-sm-2,
 
+  .px-sm-2 {
 
+    padding-right: 0.5rem !important;
 
+  }
 
+  .pb-sm-2,
 
+  .py-sm-2 {
 
+    padding-bottom: 0.5rem !important;
 
+  }
 
+  .pl-sm-2,
 
+  .px-sm-2 {
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  .p-sm-3 {
 
+    padding: 1rem !important;
 
+  }
 
+  .pt-sm-3,
 
+  .py-sm-3 {
 
+    padding-top: 1rem !important;
 
+  }
 
+  .pr-sm-3,
 
+  .px-sm-3 {
 
+    padding-right: 1rem !important;
 
+  }
 
+  .pb-sm-3,
 
+  .py-sm-3 {
 
+    padding-bottom: 1rem !important;
 
+  }
 
+  .pl-sm-3,
 
+  .px-sm-3 {
 
+    padding-left: 1rem !important;
 
+  }
 
+  .p-sm-4 {
 
+    padding: 1.5rem !important;
 
+  }
 
+  .pt-sm-4,
 
+  .py-sm-4 {
 
+    padding-top: 1.5rem !important;
 
+  }
 
+  .pr-sm-4,
 
+  .px-sm-4 {
 
+    padding-right: 1.5rem !important;
 
+  }
 
+  .pb-sm-4,
 
+  .py-sm-4 {
 
+    padding-bottom: 1.5rem !important;
 
+  }
 
+  .pl-sm-4,
 
+  .px-sm-4 {
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  .p-sm-5 {
 
+    padding: 3rem !important;
 
+  }
 
+  .pt-sm-5,
 
+  .py-sm-5 {
 
+    padding-top: 3rem !important;
 
+  }
 
+  .pr-sm-5,
 
+  .px-sm-5 {
 
+    padding-right: 3rem !important;
 
+  }
 
+  .pb-sm-5,
 
+  .py-sm-5 {
 
+    padding-bottom: 3rem !important;
 
+  }
 
+  .pl-sm-5,
 
+  .px-sm-5 {
 
+    padding-left: 3rem !important;
 
+  }
 
+  .m-sm-n1 {
 
+    margin: -0.25rem !important;
 
+  }
 
+  .mt-sm-n1,
 
+  .my-sm-n1 {
 
+    margin-top: -0.25rem !important;
 
+  }
 
+  .mr-sm-n1,
 
+  .mx-sm-n1 {
 
+    margin-right: -0.25rem !important;
 
+  }
 
+  .mb-sm-n1,
 
+  .my-sm-n1 {
 
+    margin-bottom: -0.25rem !important;
 
+  }
 
+  .ml-sm-n1,
 
+  .mx-sm-n1 {
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  .m-sm-n2 {
 
+    margin: -0.5rem !important;
 
+  }
 
+  .mt-sm-n2,
 
+  .my-sm-n2 {
 
+    margin-top: -0.5rem !important;
 
+  }
 
+  .mr-sm-n2,
 
+  .mx-sm-n2 {
 
+    margin-right: -0.5rem !important;
 
+  }
 
+  .mb-sm-n2,
 
+  .my-sm-n2 {
 
+    margin-bottom: -0.5rem !important;
 
+  }
 
+  .ml-sm-n2,
 
+  .mx-sm-n2 {
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  .m-sm-n3 {
 
+    margin: -1rem !important;
 
+  }
 
+  .mt-sm-n3,
 
+  .my-sm-n3 {
 
+    margin-top: -1rem !important;
 
+  }
 
+  .mr-sm-n3,
 
+  .mx-sm-n3 {
 
+    margin-right: -1rem !important;
 
+  }
 
+  .mb-sm-n3,
 
+  .my-sm-n3 {
 
+    margin-bottom: -1rem !important;
 
+  }
 
+  .ml-sm-n3,
 
+  .mx-sm-n3 {
 
+    margin-left: -1rem !important;
 
+  }
 
+  .m-sm-n4 {
 
+    margin: -1.5rem !important;
 
+  }
 
+  .mt-sm-n4,
 
+  .my-sm-n4 {
 
+    margin-top: -1.5rem !important;
 
+  }
 
+  .mr-sm-n4,
 
+  .mx-sm-n4 {
 
+    margin-right: -1.5rem !important;
 
+  }
 
+  .mb-sm-n4,
 
+  .my-sm-n4 {
 
+    margin-bottom: -1.5rem !important;
 
+  }
 
+  .ml-sm-n4,
 
+  .mx-sm-n4 {
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  .m-sm-n5 {
 
+    margin: -3rem !important;
 
+  }
 
+  .mt-sm-n5,
 
+  .my-sm-n5 {
 
+    margin-top: -3rem !important;
 
+  }
 
+  .mr-sm-n5,
 
+  .mx-sm-n5 {
 
+    margin-right: -3rem !important;
 
+  }
 
+  .mb-sm-n5,
 
+  .my-sm-n5 {
 
+    margin-bottom: -3rem !important;
 
+  }
 
+  .ml-sm-n5,
 
+  .mx-sm-n5 {
 
+    margin-left: -3rem !important;
 
+  }
 
+  .m-sm-auto {
 
+    margin: auto !important;
 
+  }
 
+  .mt-sm-auto,
 
+  .my-sm-auto {
 
+    margin-top: auto !important;
 
+  }
 
+  .mr-sm-auto,
 
+  .mx-sm-auto {
 
+    margin-right: auto !important;
 
+  }
 
+  .mb-sm-auto,
 
+  .my-sm-auto {
 
+    margin-bottom: auto !important;
 
+  }
 
+  .ml-sm-auto,
 
+  .mx-sm-auto {
 
+    margin-left: auto !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .m-md-0 {
 
+    margin: 0 !important;
 
+  }
 
+  .mt-md-0,
 
+  .my-md-0 {
 
+    margin-top: 0 !important;
 
+  }
 
+  .mr-md-0,
 
+  .mx-md-0 {
 
+    margin-right: 0 !important;
 
+  }
 
+  .mb-md-0,
 
+  .my-md-0 {
 
+    margin-bottom: 0 !important;
 
+  }
 
+  .ml-md-0,
 
+  .mx-md-0 {
 
+    margin-left: 0 !important;
 
+  }
 
+  .m-md-1 {
 
+    margin: 0.25rem !important;
 
+  }
 
+  .mt-md-1,
 
+  .my-md-1 {
 
+    margin-top: 0.25rem !important;
 
+  }
 
+  .mr-md-1,
 
+  .mx-md-1 {
 
+    margin-right: 0.25rem !important;
 
+  }
 
+  .mb-md-1,
 
+  .my-md-1 {
 
+    margin-bottom: 0.25rem !important;
 
+  }
 
+  .ml-md-1,
 
+  .mx-md-1 {
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  .m-md-2 {
 
+    margin: 0.5rem !important;
 
+  }
 
+  .mt-md-2,
 
+  .my-md-2 {
 
+    margin-top: 0.5rem !important;
 
+  }
 
+  .mr-md-2,
 
+  .mx-md-2 {
 
+    margin-right: 0.5rem !important;
 
+  }
 
+  .mb-md-2,
 
+  .my-md-2 {
 
+    margin-bottom: 0.5rem !important;
 
+  }
 
+  .ml-md-2,
 
+  .mx-md-2 {
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  .m-md-3 {
 
+    margin: 1rem !important;
 
+  }
 
+  .mt-md-3,
 
+  .my-md-3 {
 
+    margin-top: 1rem !important;
 
+  }
 
+  .mr-md-3,
 
+  .mx-md-3 {
 
+    margin-right: 1rem !important;
 
+  }
 
+  .mb-md-3,
 
+  .my-md-3 {
 
+    margin-bottom: 1rem !important;
 
+  }
 
+  .ml-md-3,
 
+  .mx-md-3 {
 
+    margin-left: 1rem !important;
 
+  }
 
+  .m-md-4 {
 
+    margin: 1.5rem !important;
 
+  }
 
+  .mt-md-4,
 
+  .my-md-4 {
 
+    margin-top: 1.5rem !important;
 
+  }
 
+  .mr-md-4,
 
+  .mx-md-4 {
 
+    margin-right: 1.5rem !important;
 
+  }
 
+  .mb-md-4,
 
+  .my-md-4 {
 
+    margin-bottom: 1.5rem !important;
 
+  }
 
+  .ml-md-4,
 
+  .mx-md-4 {
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  .m-md-5 {
 
+    margin: 3rem !important;
 
+  }
 
+  .mt-md-5,
 
+  .my-md-5 {
 
+    margin-top: 3rem !important;
 
+  }
 
+  .mr-md-5,
 
+  .mx-md-5 {
 
+    margin-right: 3rem !important;
 
+  }
 
+  .mb-md-5,
 
+  .my-md-5 {
 
+    margin-bottom: 3rem !important;
 
+  }
 
+  .ml-md-5,
 
+  .mx-md-5 {
 
+    margin-left: 3rem !important;
 
+  }
 
+  .p-md-0 {
 
+    padding: 0 !important;
 
+  }
 
+  .pt-md-0,
 
+  .py-md-0 {
 
+    padding-top: 0 !important;
 
+  }
 
+  .pr-md-0,
 
+  .px-md-0 {
 
+    padding-right: 0 !important;
 
+  }
 
+  .pb-md-0,
 
+  .py-md-0 {
 
+    padding-bottom: 0 !important;
 
+  }
 
+  .pl-md-0,
 
+  .px-md-0 {
 
+    padding-left: 0 !important;
 
+  }
 
+  .p-md-1 {
 
+    padding: 0.25rem !important;
 
+  }
 
+  .pt-md-1,
 
+  .py-md-1 {
 
+    padding-top: 0.25rem !important;
 
+  }
 
+  .pr-md-1,
 
+  .px-md-1 {
 
+    padding-right: 0.25rem !important;
 
+  }
 
+  .pb-md-1,
 
+  .py-md-1 {
 
+    padding-bottom: 0.25rem !important;
 
+  }
 
+  .pl-md-1,
 
+  .px-md-1 {
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  .p-md-2 {
 
+    padding: 0.5rem !important;
 
+  }
 
+  .pt-md-2,
 
+  .py-md-2 {
 
+    padding-top: 0.5rem !important;
 
+  }
 
+  .pr-md-2,
 
+  .px-md-2 {
 
+    padding-right: 0.5rem !important;
 
+  }
 
+  .pb-md-2,
 
+  .py-md-2 {
 
+    padding-bottom: 0.5rem !important;
 
+  }
 
+  .pl-md-2,
 
+  .px-md-2 {
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  .p-md-3 {
 
+    padding: 1rem !important;
 
+  }
 
+  .pt-md-3,
 
+  .py-md-3 {
 
+    padding-top: 1rem !important;
 
+  }
 
+  .pr-md-3,
 
+  .px-md-3 {
 
+    padding-right: 1rem !important;
 
+  }
 
+  .pb-md-3,
 
+  .py-md-3 {
 
+    padding-bottom: 1rem !important;
 
+  }
 
+  .pl-md-3,
 
+  .px-md-3 {
 
+    padding-left: 1rem !important;
 
+  }
 
+  .p-md-4 {
 
+    padding: 1.5rem !important;
 
+  }
 
+  .pt-md-4,
 
+  .py-md-4 {
 
+    padding-top: 1.5rem !important;
 
+  }
 
+  .pr-md-4,
 
+  .px-md-4 {
 
+    padding-right: 1.5rem !important;
 
+  }
 
+  .pb-md-4,
 
+  .py-md-4 {
 
+    padding-bottom: 1.5rem !important;
 
+  }
 
+  .pl-md-4,
 
+  .px-md-4 {
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  .p-md-5 {
 
+    padding: 3rem !important;
 
+  }
 
+  .pt-md-5,
 
+  .py-md-5 {
 
+    padding-top: 3rem !important;
 
+  }
 
+  .pr-md-5,
 
+  .px-md-5 {
 
+    padding-right: 3rem !important;
 
+  }
 
+  .pb-md-5,
 
+  .py-md-5 {
 
+    padding-bottom: 3rem !important;
 
+  }
 
+  .pl-md-5,
 
+  .px-md-5 {
 
+    padding-left: 3rem !important;
 
+  }
 
+  .m-md-n1 {
 
+    margin: -0.25rem !important;
 
+  }
 
+  .mt-md-n1,
 
+  .my-md-n1 {
 
+    margin-top: -0.25rem !important;
 
+  }
 
+  .mr-md-n1,
 
+  .mx-md-n1 {
 
+    margin-right: -0.25rem !important;
 
+  }
 
+  .mb-md-n1,
 
+  .my-md-n1 {
 
+    margin-bottom: -0.25rem !important;
 
+  }
 
+  .ml-md-n1,
 
+  .mx-md-n1 {
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  .m-md-n2 {
 
+    margin: -0.5rem !important;
 
+  }
 
+  .mt-md-n2,
 
+  .my-md-n2 {
 
+    margin-top: -0.5rem !important;
 
+  }
 
+  .mr-md-n2,
 
+  .mx-md-n2 {
 
+    margin-right: -0.5rem !important;
 
+  }
 
+  .mb-md-n2,
 
+  .my-md-n2 {
 
+    margin-bottom: -0.5rem !important;
 
+  }
 
+  .ml-md-n2,
 
+  .mx-md-n2 {
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  .m-md-n3 {
 
+    margin: -1rem !important;
 
+  }
 
+  .mt-md-n3,
 
+  .my-md-n3 {
 
+    margin-top: -1rem !important;
 
+  }
 
+  .mr-md-n3,
 
+  .mx-md-n3 {
 
+    margin-right: -1rem !important;
 
+  }
 
+  .mb-md-n3,
 
+  .my-md-n3 {
 
+    margin-bottom: -1rem !important;
 
+  }
 
+  .ml-md-n3,
 
+  .mx-md-n3 {
 
+    margin-left: -1rem !important;
 
+  }
 
+  .m-md-n4 {
 
+    margin: -1.5rem !important;
 
+  }
 
+  .mt-md-n4,
 
+  .my-md-n4 {
 
+    margin-top: -1.5rem !important;
 
+  }
 
+  .mr-md-n4,
 
+  .mx-md-n4 {
 
+    margin-right: -1.5rem !important;
 
+  }
 
+  .mb-md-n4,
 
+  .my-md-n4 {
 
+    margin-bottom: -1.5rem !important;
 
+  }
 
+  .ml-md-n4,
 
+  .mx-md-n4 {
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  .m-md-n5 {
 
+    margin: -3rem !important;
 
+  }
 
+  .mt-md-n5,
 
+  .my-md-n5 {
 
+    margin-top: -3rem !important;
 
+  }
 
+  .mr-md-n5,
 
+  .mx-md-n5 {
 
+    margin-right: -3rem !important;
 
+  }
 
+  .mb-md-n5,
 
+  .my-md-n5 {
 
+    margin-bottom: -3rem !important;
 
+  }
 
+  .ml-md-n5,
 
+  .mx-md-n5 {
 
+    margin-left: -3rem !important;
 
+  }
 
+  .m-md-auto {
 
+    margin: auto !important;
 
+  }
 
+  .mt-md-auto,
 
+  .my-md-auto {
 
+    margin-top: auto !important;
 
+  }
 
+  .mr-md-auto,
 
+  .mx-md-auto {
 
+    margin-right: auto !important;
 
+  }
 
+  .mb-md-auto,
 
+  .my-md-auto {
 
+    margin-bottom: auto !important;
 
+  }
 
+  .ml-md-auto,
 
+  .mx-md-auto {
 
+    margin-left: auto !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .m-lg-0 {
 
+    margin: 0 !important;
 
+  }
 
+  .mt-lg-0,
 
+  .my-lg-0 {
 
+    margin-top: 0 !important;
 
+  }
 
+  .mr-lg-0,
 
+  .mx-lg-0 {
 
+    margin-right: 0 !important;
 
+  }
 
+  .mb-lg-0,
 
+  .my-lg-0 {
 
+    margin-bottom: 0 !important;
 
+  }
 
+  .ml-lg-0,
 
+  .mx-lg-0 {
 
+    margin-left: 0 !important;
 
+  }
 
+  .m-lg-1 {
 
+    margin: 0.25rem !important;
 
+  }
 
+  .mt-lg-1,
 
+  .my-lg-1 {
 
+    margin-top: 0.25rem !important;
 
+  }
 
+  .mr-lg-1,
 
+  .mx-lg-1 {
 
+    margin-right: 0.25rem !important;
 
+  }
 
+  .mb-lg-1,
 
+  .my-lg-1 {
 
+    margin-bottom: 0.25rem !important;
 
+  }
 
+  .ml-lg-1,
 
+  .mx-lg-1 {
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  .m-lg-2 {
 
+    margin: 0.5rem !important;
 
+  }
 
+  .mt-lg-2,
 
+  .my-lg-2 {
 
+    margin-top: 0.5rem !important;
 
+  }
 
+  .mr-lg-2,
 
+  .mx-lg-2 {
 
+    margin-right: 0.5rem !important;
 
+  }
 
+  .mb-lg-2,
 
+  .my-lg-2 {
 
+    margin-bottom: 0.5rem !important;
 
+  }
 
+  .ml-lg-2,
 
+  .mx-lg-2 {
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  .m-lg-3 {
 
+    margin: 1rem !important;
 
+  }
 
+  .mt-lg-3,
 
+  .my-lg-3 {
 
+    margin-top: 1rem !important;
 
+  }
 
+  .mr-lg-3,
 
+  .mx-lg-3 {
 
+    margin-right: 1rem !important;
 
+  }
 
+  .mb-lg-3,
 
+  .my-lg-3 {
 
+    margin-bottom: 1rem !important;
 
+  }
 
+  .ml-lg-3,
 
+  .mx-lg-3 {
 
+    margin-left: 1rem !important;
 
+  }
 
+  .m-lg-4 {
 
+    margin: 1.5rem !important;
 
+  }
 
+  .mt-lg-4,
 
+  .my-lg-4 {
 
+    margin-top: 1.5rem !important;
 
+  }
 
+  .mr-lg-4,
 
+  .mx-lg-4 {
 
+    margin-right: 1.5rem !important;
 
+  }
 
+  .mb-lg-4,
 
+  .my-lg-4 {
 
+    margin-bottom: 1.5rem !important;
 
+  }
 
+  .ml-lg-4,
 
+  .mx-lg-4 {
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  .m-lg-5 {
 
+    margin: 3rem !important;
 
+  }
 
+  .mt-lg-5,
 
+  .my-lg-5 {
 
+    margin-top: 3rem !important;
 
+  }
 
+  .mr-lg-5,
 
+  .mx-lg-5 {
 
+    margin-right: 3rem !important;
 
+  }
 
+  .mb-lg-5,
 
+  .my-lg-5 {
 
+    margin-bottom: 3rem !important;
 
+  }
 
+  .ml-lg-5,
 
+  .mx-lg-5 {
 
+    margin-left: 3rem !important;
 
+  }
 
+  .p-lg-0 {
 
+    padding: 0 !important;
 
+  }
 
+  .pt-lg-0,
 
+  .py-lg-0 {
 
+    padding-top: 0 !important;
 
+  }
 
+  .pr-lg-0,
 
+  .px-lg-0 {
 
+    padding-right: 0 !important;
 
+  }
 
+  .pb-lg-0,
 
+  .py-lg-0 {
 
+    padding-bottom: 0 !important;
 
+  }
 
+  .pl-lg-0,
 
+  .px-lg-0 {
 
+    padding-left: 0 !important;
 
+  }
 
+  .p-lg-1 {
 
+    padding: 0.25rem !important;
 
+  }
 
+  .pt-lg-1,
 
+  .py-lg-1 {
 
+    padding-top: 0.25rem !important;
 
+  }
 
+  .pr-lg-1,
 
+  .px-lg-1 {
 
+    padding-right: 0.25rem !important;
 
+  }
 
+  .pb-lg-1,
 
+  .py-lg-1 {
 
+    padding-bottom: 0.25rem !important;
 
+  }
 
+  .pl-lg-1,
 
+  .px-lg-1 {
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  .p-lg-2 {
 
+    padding: 0.5rem !important;
 
+  }
 
+  .pt-lg-2,
 
+  .py-lg-2 {
 
+    padding-top: 0.5rem !important;
 
+  }
 
+  .pr-lg-2,
 
+  .px-lg-2 {
 
+    padding-right: 0.5rem !important;
 
+  }
 
+  .pb-lg-2,
 
+  .py-lg-2 {
 
+    padding-bottom: 0.5rem !important;
 
+  }
 
+  .pl-lg-2,
 
+  .px-lg-2 {
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  .p-lg-3 {
 
+    padding: 1rem !important;
 
+  }
 
+  .pt-lg-3,
 
+  .py-lg-3 {
 
+    padding-top: 1rem !important;
 
+  }
 
+  .pr-lg-3,
 
+  .px-lg-3 {
 
+    padding-right: 1rem !important;
 
+  }
 
+  .pb-lg-3,
 
+  .py-lg-3 {
 
+    padding-bottom: 1rem !important;
 
+  }
 
+  .pl-lg-3,
 
+  .px-lg-3 {
 
+    padding-left: 1rem !important;
 
+  }
 
+  .p-lg-4 {
 
+    padding: 1.5rem !important;
 
+  }
 
+  .pt-lg-4,
 
+  .py-lg-4 {
 
+    padding-top: 1.5rem !important;
 
+  }
 
+  .pr-lg-4,
 
+  .px-lg-4 {
 
+    padding-right: 1.5rem !important;
 
+  }
 
+  .pb-lg-4,
 
+  .py-lg-4 {
 
+    padding-bottom: 1.5rem !important;
 
+  }
 
+  .pl-lg-4,
 
+  .px-lg-4 {
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  .p-lg-5 {
 
+    padding: 3rem !important;
 
+  }
 
+  .pt-lg-5,
 
+  .py-lg-5 {
 
+    padding-top: 3rem !important;
 
+  }
 
+  .pr-lg-5,
 
+  .px-lg-5 {
 
+    padding-right: 3rem !important;
 
+  }
 
+  .pb-lg-5,
 
+  .py-lg-5 {
 
+    padding-bottom: 3rem !important;
 
+  }
 
+  .pl-lg-5,
 
+  .px-lg-5 {
 
+    padding-left: 3rem !important;
 
+  }
 
+  .m-lg-n1 {
 
+    margin: -0.25rem !important;
 
+  }
 
+  .mt-lg-n1,
 
+  .my-lg-n1 {
 
+    margin-top: -0.25rem !important;
 
+  }
 
+  .mr-lg-n1,
 
+  .mx-lg-n1 {
 
+    margin-right: -0.25rem !important;
 
+  }
 
+  .mb-lg-n1,
 
+  .my-lg-n1 {
 
+    margin-bottom: -0.25rem !important;
 
+  }
 
+  .ml-lg-n1,
 
+  .mx-lg-n1 {
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  .m-lg-n2 {
 
+    margin: -0.5rem !important;
 
+  }
 
+  .mt-lg-n2,
 
+  .my-lg-n2 {
 
+    margin-top: -0.5rem !important;
 
+  }
 
+  .mr-lg-n2,
 
+  .mx-lg-n2 {
 
+    margin-right: -0.5rem !important;
 
+  }
 
+  .mb-lg-n2,
 
+  .my-lg-n2 {
 
+    margin-bottom: -0.5rem !important;
 
+  }
 
+  .ml-lg-n2,
 
+  .mx-lg-n2 {
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  .m-lg-n3 {
 
+    margin: -1rem !important;
 
+  }
 
+  .mt-lg-n3,
 
+  .my-lg-n3 {
 
+    margin-top: -1rem !important;
 
+  }
 
+  .mr-lg-n3,
 
+  .mx-lg-n3 {
 
+    margin-right: -1rem !important;
 
+  }
 
+  .mb-lg-n3,
 
+  .my-lg-n3 {
 
+    margin-bottom: -1rem !important;
 
+  }
 
+  .ml-lg-n3,
 
+  .mx-lg-n3 {
 
+    margin-left: -1rem !important;
 
+  }
 
+  .m-lg-n4 {
 
+    margin: -1.5rem !important;
 
+  }
 
+  .mt-lg-n4,
 
+  .my-lg-n4 {
 
+    margin-top: -1.5rem !important;
 
+  }
 
+  .mr-lg-n4,
 
+  .mx-lg-n4 {
 
+    margin-right: -1.5rem !important;
 
+  }
 
+  .mb-lg-n4,
 
+  .my-lg-n4 {
 
+    margin-bottom: -1.5rem !important;
 
+  }
 
+  .ml-lg-n4,
 
+  .mx-lg-n4 {
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  .m-lg-n5 {
 
+    margin: -3rem !important;
 
+  }
 
+  .mt-lg-n5,
 
+  .my-lg-n5 {
 
+    margin-top: -3rem !important;
 
+  }
 
+  .mr-lg-n5,
 
+  .mx-lg-n5 {
 
+    margin-right: -3rem !important;
 
+  }
 
+  .mb-lg-n5,
 
+  .my-lg-n5 {
 
+    margin-bottom: -3rem !important;
 
+  }
 
+  .ml-lg-n5,
 
+  .mx-lg-n5 {
 
+    margin-left: -3rem !important;
 
+  }
 
+  .m-lg-auto {
 
+    margin: auto !important;
 
+  }
 
+  .mt-lg-auto,
 
+  .my-lg-auto {
 
+    margin-top: auto !important;
 
+  }
 
+  .mr-lg-auto,
 
+  .mx-lg-auto {
 
+    margin-right: auto !important;
 
+  }
 
+  .mb-lg-auto,
 
+  .my-lg-auto {
 
+    margin-bottom: auto !important;
 
+  }
 
+  .ml-lg-auto,
 
+  .mx-lg-auto {
 
+    margin-left: auto !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .m-xl-0 {
 
+    margin: 0 !important;
 
+  }
 
+  .mt-xl-0,
 
+  .my-xl-0 {
 
+    margin-top: 0 !important;
 
+  }
 
+  .mr-xl-0,
 
+  .mx-xl-0 {
 
+    margin-right: 0 !important;
 
+  }
 
+  .mb-xl-0,
 
+  .my-xl-0 {
 
+    margin-bottom: 0 !important;
 
+  }
 
+  .ml-xl-0,
 
+  .mx-xl-0 {
 
+    margin-left: 0 !important;
 
+  }
 
+  .m-xl-1 {
 
+    margin: 0.25rem !important;
 
+  }
 
+  .mt-xl-1,
 
+  .my-xl-1 {
 
+    margin-top: 0.25rem !important;
 
+  }
 
+  .mr-xl-1,
 
+  .mx-xl-1 {
 
+    margin-right: 0.25rem !important;
 
+  }
 
+  .mb-xl-1,
 
+  .my-xl-1 {
 
+    margin-bottom: 0.25rem !important;
 
+  }
 
+  .ml-xl-1,
 
+  .mx-xl-1 {
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  .m-xl-2 {
 
+    margin: 0.5rem !important;
 
+  }
 
+  .mt-xl-2,
 
+  .my-xl-2 {
 
+    margin-top: 0.5rem !important;
 
+  }
 
+  .mr-xl-2,
 
+  .mx-xl-2 {
 
+    margin-right: 0.5rem !important;
 
+  }
 
+  .mb-xl-2,
 
+  .my-xl-2 {
 
+    margin-bottom: 0.5rem !important;
 
+  }
 
+  .ml-xl-2,
 
+  .mx-xl-2 {
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  .m-xl-3 {
 
+    margin: 1rem !important;
 
+  }
 
+  .mt-xl-3,
 
+  .my-xl-3 {
 
+    margin-top: 1rem !important;
 
+  }
 
+  .mr-xl-3,
 
+  .mx-xl-3 {
 
+    margin-right: 1rem !important;
 
+  }
 
+  .mb-xl-3,
 
+  .my-xl-3 {
 
+    margin-bottom: 1rem !important;
 
+  }
 
+  .ml-xl-3,
 
+  .mx-xl-3 {
 
+    margin-left: 1rem !important;
 
+  }
 
+  .m-xl-4 {
 
+    margin: 1.5rem !important;
 
+  }
 
+  .mt-xl-4,
 
+  .my-xl-4 {
 
+    margin-top: 1.5rem !important;
 
+  }
 
+  .mr-xl-4,
 
+  .mx-xl-4 {
 
+    margin-right: 1.5rem !important;
 
+  }
 
+  .mb-xl-4,
 
+  .my-xl-4 {
 
+    margin-bottom: 1.5rem !important;
 
+  }
 
+  .ml-xl-4,
 
+  .mx-xl-4 {
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  .m-xl-5 {
 
+    margin: 3rem !important;
 
+  }
 
+  .mt-xl-5,
 
+  .my-xl-5 {
 
+    margin-top: 3rem !important;
 
+  }
 
+  .mr-xl-5,
 
+  .mx-xl-5 {
 
+    margin-right: 3rem !important;
 
+  }
 
+  .mb-xl-5,
 
+  .my-xl-5 {
 
+    margin-bottom: 3rem !important;
 
+  }
 
+  .ml-xl-5,
 
+  .mx-xl-5 {
 
+    margin-left: 3rem !important;
 
+  }
 
+  .p-xl-0 {
 
+    padding: 0 !important;
 
+  }
 
+  .pt-xl-0,
 
+  .py-xl-0 {
 
+    padding-top: 0 !important;
 
+  }
 
+  .pr-xl-0,
 
+  .px-xl-0 {
 
+    padding-right: 0 !important;
 
+  }
 
+  .pb-xl-0,
 
+  .py-xl-0 {
 
+    padding-bottom: 0 !important;
 
+  }
 
+  .pl-xl-0,
 
+  .px-xl-0 {
 
+    padding-left: 0 !important;
 
+  }
 
+  .p-xl-1 {
 
+    padding: 0.25rem !important;
 
+  }
 
+  .pt-xl-1,
 
+  .py-xl-1 {
 
+    padding-top: 0.25rem !important;
 
+  }
 
+  .pr-xl-1,
 
+  .px-xl-1 {
 
+    padding-right: 0.25rem !important;
 
+  }
 
+  .pb-xl-1,
 
+  .py-xl-1 {
 
+    padding-bottom: 0.25rem !important;
 
+  }
 
+  .pl-xl-1,
 
+  .px-xl-1 {
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  .p-xl-2 {
 
+    padding: 0.5rem !important;
 
+  }
 
+  .pt-xl-2,
 
+  .py-xl-2 {
 
+    padding-top: 0.5rem !important;
 
+  }
 
+  .pr-xl-2,
 
+  .px-xl-2 {
 
+    padding-right: 0.5rem !important;
 
+  }
 
+  .pb-xl-2,
 
+  .py-xl-2 {
 
+    padding-bottom: 0.5rem !important;
 
+  }
 
+  .pl-xl-2,
 
+  .px-xl-2 {
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  .p-xl-3 {
 
+    padding: 1rem !important;
 
+  }
 
+  .pt-xl-3,
 
+  .py-xl-3 {
 
+    padding-top: 1rem !important;
 
+  }
 
+  .pr-xl-3,
 
+  .px-xl-3 {
 
+    padding-right: 1rem !important;
 
+  }
 
+  .pb-xl-3,
 
+  .py-xl-3 {
 
+    padding-bottom: 1rem !important;
 
+  }
 
+  .pl-xl-3,
 
+  .px-xl-3 {
 
+    padding-left: 1rem !important;
 
+  }
 
+  .p-xl-4 {
 
+    padding: 1.5rem !important;
 
+  }
 
+  .pt-xl-4,
 
+  .py-xl-4 {
 
+    padding-top: 1.5rem !important;
 
+  }
 
+  .pr-xl-4,
 
+  .px-xl-4 {
 
+    padding-right: 1.5rem !important;
 
+  }
 
+  .pb-xl-4,
 
+  .py-xl-4 {
 
+    padding-bottom: 1.5rem !important;
 
+  }
 
+  .pl-xl-4,
 
+  .px-xl-4 {
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  .p-xl-5 {
 
+    padding: 3rem !important;
 
+  }
 
+  .pt-xl-5,
 
+  .py-xl-5 {
 
+    padding-top: 3rem !important;
 
+  }
 
+  .pr-xl-5,
 
+  .px-xl-5 {
 
+    padding-right: 3rem !important;
 
+  }
 
+  .pb-xl-5,
 
+  .py-xl-5 {
 
+    padding-bottom: 3rem !important;
 
+  }
 
+  .pl-xl-5,
 
+  .px-xl-5 {
 
+    padding-left: 3rem !important;
 
+  }
 
+  .m-xl-n1 {
 
+    margin: -0.25rem !important;
 
+  }
 
+  .mt-xl-n1,
 
+  .my-xl-n1 {
 
+    margin-top: -0.25rem !important;
 
+  }
 
+  .mr-xl-n1,
 
+  .mx-xl-n1 {
 
+    margin-right: -0.25rem !important;
 
+  }
 
+  .mb-xl-n1,
 
+  .my-xl-n1 {
 
+    margin-bottom: -0.25rem !important;
 
+  }
 
+  .ml-xl-n1,
 
+  .mx-xl-n1 {
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  .m-xl-n2 {
 
+    margin: -0.5rem !important;
 
+  }
 
+  .mt-xl-n2,
 
+  .my-xl-n2 {
 
+    margin-top: -0.5rem !important;
 
+  }
 
+  .mr-xl-n2,
 
+  .mx-xl-n2 {
 
+    margin-right: -0.5rem !important;
 
+  }
 
+  .mb-xl-n2,
 
+  .my-xl-n2 {
 
+    margin-bottom: -0.5rem !important;
 
+  }
 
+  .ml-xl-n2,
 
+  .mx-xl-n2 {
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  .m-xl-n3 {
 
+    margin: -1rem !important;
 
+  }
 
+  .mt-xl-n3,
 
+  .my-xl-n3 {
 
+    margin-top: -1rem !important;
 
+  }
 
+  .mr-xl-n3,
 
+  .mx-xl-n3 {
 
+    margin-right: -1rem !important;
 
+  }
 
+  .mb-xl-n3,
 
+  .my-xl-n3 {
 
+    margin-bottom: -1rem !important;
 
+  }
 
+  .ml-xl-n3,
 
+  .mx-xl-n3 {
 
+    margin-left: -1rem !important;
 
+  }
 
+  .m-xl-n4 {
 
+    margin: -1.5rem !important;
 
+  }
 
+  .mt-xl-n4,
 
+  .my-xl-n4 {
 
+    margin-top: -1.5rem !important;
 
+  }
 
+  .mr-xl-n4,
 
+  .mx-xl-n4 {
 
+    margin-right: -1.5rem !important;
 
+  }
 
+  .mb-xl-n4,
 
+  .my-xl-n4 {
 
+    margin-bottom: -1.5rem !important;
 
+  }
 
+  .ml-xl-n4,
 
+  .mx-xl-n4 {
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  .m-xl-n5 {
 
+    margin: -3rem !important;
 
+  }
 
+  .mt-xl-n5,
 
+  .my-xl-n5 {
 
+    margin-top: -3rem !important;
 
+  }
 
+  .mr-xl-n5,
 
+  .mx-xl-n5 {
 
+    margin-right: -3rem !important;
 
+  }
 
+  .mb-xl-n5,
 
+  .my-xl-n5 {
 
+    margin-bottom: -3rem !important;
 
+  }
 
+  .ml-xl-n5,
 
+  .mx-xl-n5 {
 
+    margin-left: -3rem !important;
 
+  }
 
+  .m-xl-auto {
 
+    margin: auto !important;
 
+  }
 
+  .mt-xl-auto,
 
+  .my-xl-auto {
 
+    margin-top: auto !important;
 
+  }
 
+  .mr-xl-auto,
 
+  .mx-xl-auto {
 
+    margin-right: auto !important;
 
+  }
 
+  .mb-xl-auto,
 
+  .my-xl-auto {
 
+    margin-bottom: auto !important;
 
+  }
 
+  .ml-xl-auto,
 
+  .mx-xl-auto {
 
+    margin-left: auto !important;
 
+  }
 
+}
 
+
 
+.text-monospace {
 
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
 
+}
 
+
 
+.text-justify {
 
+  text-align: justify !important;
 
+}
 
+
 
+.text-wrap {
 
+  white-space: normal !important;
 
+}
 
+
 
+.text-nowrap {
 
+  white-space: nowrap !important;
 
+}
 
+
 
+.text-truncate {
 
+  overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  white-space: nowrap;
 
+}
 
+
 
+.text-left {
 
+  text-align: left !important;
 
+}
 
+
 
+.text-right {
 
+  text-align: right !important;
 
+}
 
+
 
+.text-center {
 
+  text-align: center !important;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .text-sm-left {
 
+    text-align: left !important;
 
+  }
 
+  .text-sm-right {
 
+    text-align: right !important;
 
+  }
 
+  .text-sm-center {
 
+    text-align: center !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  .text-md-left {
 
+    text-align: left !important;
 
+  }
 
+  .text-md-right {
 
+    text-align: right !important;
 
+  }
 
+  .text-md-center {
 
+    text-align: center !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .text-lg-left {
 
+    text-align: left !important;
 
+  }
 
+  .text-lg-right {
 
+    text-align: right !important;
 
+  }
 
+  .text-lg-center {
 
+    text-align: center !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  .text-xl-left {
 
+    text-align: left !important;
 
+  }
 
+  .text-xl-right {
 
+    text-align: right !important;
 
+  }
 
+  .text-xl-center {
 
+    text-align: center !important;
 
+  }
 
+}
 
+
 
+.text-lowercase {
 
+  text-transform: lowercase !important;
 
+}
 
+
 
+.text-uppercase {
 
+  text-transform: uppercase !important;
 
+}
 
+
 
+.text-capitalize {
 
+  text-transform: capitalize !important;
 
+}
 
+
 
+.font-weight-light {
 
+  font-weight: 300 !important;
 
+}
 
+
 
+.font-weight-lighter {
 
+  font-weight: lighter !important;
 
+}
 
+
 
+.font-weight-normal {
 
+  font-weight: 400 !important;
 
+}
 
+
 
+.font-weight-bold {
 
+  font-weight: 700 !important;
 
+}
 
+
 
+.font-weight-bolder {
 
+  font-weight: bolder !important;
 
+}
 
+
 
+.font-italic {
 
+  font-style: italic !important;
 
+}
 
+
 
+.text-white {
 
+  color: #fff !important;
 
+}
 
+
 
+.text-primary {
 
+  color: #20a8d8 !important;
 
+}
 
+
 
+a.text-primary:hover, a.text-primary:focus {
 
+  color: #167495 !important;
 
+}
 
+
 
+.text-secondary {
 
+  color: #c8ced3 !important;
 
+}
 
+
 
+a.text-secondary:hover, a.text-secondary:focus {
 
+  color: #9ea8b1 !important;
 
+}
 
+
 
+.text-success {
 
+  color: #4dbd74 !important;
 
+}
 
+
 
+a.text-success:hover, a.text-success:focus {
 
+  color: #338a52 !important;
 
+}
 
+
 
+.text-info {
 
+  color: #63c2de !important;
 
+}
 
+
 
+a.text-info:hover, a.text-info:focus {
 
+  color: #2ba6ca !important;
 
+}
 
+
 
+.text-warning {
 
+  color: #ffc107 !important;
 
+}
 
+
 
+a.text-warning:hover, a.text-warning:focus {
 
+  color: #ba8b00 !important;
 
+}
 
+
 
+.text-danger {
 
+  color: #f86c6b !important;
 
+}
 
+
 
+a.text-danger:hover, a.text-danger:focus {
 
+  color: #f52322 !important;
 
+}
 
+
 
+.text-light {
 
+  color: #f0f3f5 !important;
 
+}
 
+
 
+a.text-light:hover, a.text-light:focus {
 
+  color: #c2ced6 !important;
 
+}
 
+
 
+.text-dark {
 
+  color: #2f353a !important;
 
+}
 
+
 
+a.text-dark:hover, a.text-dark:focus {
 
+  color: #0d0e10 !important;
 
+}
 
+
 
+.text-body {
 
+  color: #23282c !important;
 
+}
 
+
 
+.text-muted {
 
+  color: #73818f !important;
 
+}
 
+
 
+.text-black-50 {
 
+  color: rgba(0, 0, 0, 0.5) !important;
 
+}
 
+
 
+.text-white-50 {
 
+  color: rgba(255, 255, 255, 0.5) !important;
 
+}
 
+
 
+.text-hide {
 
+  font: 0/0 a;
 
+  color: transparent;
 
+  text-shadow: none;
 
+  background-color: transparent;
 
+  border: 0;
 
+}
 
+
 
+.text-decoration-none {
 
+  text-decoration: none !important;
 
+}
 
+
 
+.text-break {
 
+  word-break: break-word !important;
 
+  overflow-wrap: break-word !important;
 
+}
 
+
 
+.text-reset {
 
+  color: inherit !important;
 
+}
 
+
 
+.visible {
 
+  visibility: visible !important;
 
+}
 
+
 
+.invisible {
 
+  visibility: hidden !important;
 
+}
 
+
 
+@media print {
 
+  *,
 
+  *::before,
 
+  *::after {
 
+    text-shadow: none !important;
 
+    box-shadow: none !important;
 
+  }
 
+  a:not(.btn) {
 
+    text-decoration: underline;
 
+  }
 
+  abbr[title]::after {
 
+    content: " (" attr(title) ")";
 
+  }
 
+  pre {
 
+    white-space: pre-wrap !important;
 
+  }
 
+  pre,
 
+  blockquote {
 
+    border: 1px solid #8f9ba6;
 
+    page-break-inside: avoid;
 
+  }
 
+  thead {
 
+    display: table-header-group;
 
+  }
 
+  tr,
 
+  img {
 
+    page-break-inside: avoid;
 
+  }
 
+  p,
 
+  h2,
 
+  h3 {
 
+    orphans: 3;
 
+    widows: 3;
 
+  }
 
+  h2,
 
+  h3 {
 
+    page-break-after: avoid;
 
+  }
 
+  @page {
 
+    size: a3;
 
+  }
 
+  body {
 
+    min-width: 992px !important;
 
+  }
 
+  .container {
 
+    min-width: 992px !important;
 
+  }
 
+  .navbar {
 
+    display: none;
 
+  }
 
+  .badge {
 
+    border: 1px solid #000;
 
+  }
 
+  .table {
 
+    border-collapse: collapse !important;
 
+  }
 
+  .table td,
 
+  .table th {
 
+    background-color: #fff !important;
 
+  }
 
+  .table-bordered th,
 
+  .table-bordered td {
 
+    border: 1px solid #c8ced3 !important;
 
+  }
 
+  .table-dark {
 
+    color: inherit;
 
+  }
 
+  .table-dark th,
 
+  .table-dark td,
 
+  .table-dark thead th,
 
+  .table-dark tbody + tbody {
 
+    border-color: #c8ced3;
 
+  }
 
+  .table .thead-dark th {
 
+    color: inherit;
 
+    border-color: #c8ced3;
 
+  }
 
+}
 
+
 
+.animated {
 
+  -webkit-animation-duration: 1s;
 
+  animation-duration: 1s;
 
+}
 
+
 
+.animated.infinite {
 
+  -webkit-animation-iteration-count: infinite;
 
+  animation-iteration-count: infinite;
 
+}
 
+
 
+.animated.hinge {
 
+  -webkit-animation-duration: 2s;
 
+  animation-duration: 2s;
 
+}
 
+
 
+@-webkit-keyframes fadeIn {
 
+  from {
 
+    opacity: 0;
 
+  }
 
+  to {
 
+    opacity: 1;
 
+  }
 
+}
 
+
 
+@keyframes fadeIn {
 
+  from {
 
+    opacity: 0;
 
+  }
 
+  to {
 
+    opacity: 1;
 
+  }
 
+}
 
+
 
+.fadeIn {
 
+  -webkit-animation-name: fadeIn;
 
+  animation-name: fadeIn;
 
+}
 
+
 
+.ps {
 
+  overflow: hidden !important;
 
+  -ms-touch-action: auto;
 
+  touch-action: auto;
 
+  -ms-overflow-style: none;
 
+  overflow-anchor: none;
 
+}
 
+
 
+.ps__rail-x {
 
+  position: absolute;
 
+  bottom: 0;
 
+  display: none;
 
+  height: 15px;
 
+  opacity: 0;
 
+  transition: background-color .2s linear, opacity .2s linear;
 
+}
 
+
 
+.ps__rail-y {
 
+  position: absolute;
 
+  right: 0;
 
+  display: none;
 
+  width: 15px;
 
+  opacity: 0;
 
+  transition: background-color .2s linear, opacity .2s linear;
 
+}
 
+
 
+.ps--active-x > .ps__rail-x,
 
+.ps--active-y > .ps__rail-y {
 
+  display: block;
 
+  background-color: transparent;
 
+}
 
+
 
+.ps:hover > .ps__rail-x,
 
+.ps:hover > .ps__rail-y,
 
+.ps--focus > .ps__rail-x,
 
+.ps--focus > .ps__rail-y,
 
+.ps--scrolling-x > .ps__rail-x,
 
+.ps--scrolling-y > .ps__rail-y {
 
+  opacity: .6;
 
+}
 
+
 
+.ps__rail-x:hover,
 
+.ps__rail-y:hover,
 
+.ps__rail-x:focus,
 
+.ps__rail-y:focus {
 
+  background-color: #eee;
 
+  opacity: .9;
 
+}
 
+
 
+/*
 
+ * Scrollbar thumb styles
 
+ */
 
+.ps__thumb-x {
 
+  position: absolute;
 
+  bottom: 2px;
 
+  height: 6px;
 
+  background-color: #aaa;
 
+  border-radius: 6px;
 
+  transition: background-color .2s linear, height .2s ease-in-out;
 
+}
 
+
 
+.ps__thumb-y {
 
+  position: absolute;
 
+  right: 2px;
 
+  width: 6px;
 
+  background-color: #aaa;
 
+  border-radius: 6px;
 
+  transition: background-color .2s linear, width .2s ease-in-out;
 
+}
 
+
 
+.ps__rail-x:hover > .ps__thumb-x,
 
+.ps__rail-x:focus > .ps__thumb-x {
 
+  height: 11px;
 
+  background-color: #999;
 
+}
 
+
 
+.ps__rail-y:hover > .ps__thumb-y,
 
+.ps__rail-y:focus > .ps__thumb-y {
 
+  width: 11px;
 
+  background-color: #999;
 
+}
 
+
 
+@supports (-ms-overflow-style: none) {
 
+  .ps {
 
+    overflow: auto !important;
 
+  }
 
+}
 
+
 
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 
+  .ps {
 
+    overflow: auto !important;
 
+  }
 
+}
 
+
 
+.aside-menu {
 
+  z-index: 1019;
 
+  width: 250px;
 
+  color: #2f353a;
 
+  background: #fff;
 
+  border-left: 1px solid #c8ced3;
 
+}
 
+
 
+.aside-menu .nav-tabs {
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.aside-menu .nav-tabs .nav-link {
 
+  padding: 0.75rem 1rem;
 
+  color: #23282c;
 
+  border-top: 0;
 
+  border-radius: 0;
 
+}
 
+
 
+.aside-menu .nav-tabs .nav-link.active {
 
+  color: #20a8d8;
 
+  border-right-color: #c8ced3;
 
+  border-left-color: #c8ced3;
 
+}
 
+
 
+.aside-menu .nav-tabs .nav-item:first-child .nav-link {
 
+  border-left: 0;
 
+}
 
+
 
+.aside-menu .tab-content {
 
+  position: relative;
 
+  overflow-x: hidden;
 
+  overflow-y: auto;
 
+  border: 0;
 
+  border-top: 1px solid #c8ced3;
 
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 
+}
 
+
 
+.aside-menu .tab-content::-webkit-scrollbar {
 
+  width: 10px;
 
+  margin-left: -10px;
 
+  -webkit-appearance: none;
 
+  appearance: none;
 
+}
 
+
 
+.aside-menu .tab-content::-webkit-scrollbar-track {
 
+  background-color: white;
 
+  border-right: 1px solid #f2f2f2;
 
+  border-left: 1px solid #f2f2f2;
 
+}
 
+
 
+.aside-menu .tab-content::-webkit-scrollbar-thumb {
 
+  height: 50px;
 
+  background-color: #e6e6e6;
 
+  background-clip: content-box;
 
+  border-color: transparent;
 
+  border-style: solid;
 
+  border-width: 1px 2px;
 
+}
 
+
 
+.aside-menu .tab-content .tab-pane {
 
+  padding: 0;
 
+}
 
+
 
+.avatar {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 36px;
 
+  height: 36px;
 
+}
 
+
 
+.avatar .avatar-status {
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 0;
 
+  display: block;
 
+  width: 10px;
 
+  height: 10px;
 
+  border: 1px solid #fff;
 
+  border-radius: 50em;
 
+}
 
+
 
+.avatar > img {
 
+  vertical-align: initial;
 
+}
 
+
 
+.avatar-lg {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 72px;
 
+  height: 72px;
 
+}
 
+
 
+.avatar-lg .avatar-status {
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 0;
 
+  display: block;
 
+  width: 12px;
 
+  height: 12px;
 
+  border: 1px solid #fff;
 
+  border-radius: 50em;
 
+}
 
+
 
+.avatar-sm {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 24px;
 
+  height: 24px;
 
+}
 
+
 
+.avatar-sm .avatar-status {
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 0;
 
+  display: block;
 
+  width: 8px;
 
+  height: 8px;
 
+  border: 1px solid #fff;
 
+  border-radius: 50em;
 
+}
 
+
 
+.avatar-xs {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 20px;
 
+  height: 20px;
 
+}
 
+
 
+.avatar-xs .avatar-status {
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 0;
 
+  display: block;
 
+  width: 8px;
 
+  height: 8px;
 
+  border: 1px solid #fff;
 
+  border-radius: 50em;
 
+}
 
+
 
+.avatars-stack .avatar {
 
+  margin-right: -18px;
 
+  transition: margin-right 0.25s;
 
+}
 
+
 
+.avatars-stack .avatar:hover {
 
+  margin-right: 0;
 
+}
 
+
 
+.avatars-stack .avatar-lg {
 
+  margin-right: -36px;
 
+}
 
+
 
+.avatars-stack .avatar-sm {
 
+  margin-right: -12px;
 
+}
 
+
 
+.avatars-stack .avatar-xs {
 
+  margin-right: -10px;
 
+}
 
+
 
+.badge-pill {
 
+  border-radius: 10rem;
 
+}
 
+
 
+.breadcrumb-menu {
 
+  margin-left: auto;
 
+}
 
+
 
+.breadcrumb-menu::before {
 
+  display: none;
 
+}
 
+
 
+.breadcrumb-menu .btn-group {
 
+  vertical-align: top;
 
+}
 
+
 
+.breadcrumb-menu .btn {
 
+  padding: 0 0.75rem;
 
+  color: #73818f;
 
+  vertical-align: top;
 
+  border: 0;
 
+}
 
+
 
+.breadcrumb-menu .btn:hover, .breadcrumb-menu .btn.active {
 
+  color: #23282c;
 
+  background: transparent;
 
+}
 
+
 
+.breadcrumb-menu .open .btn {
 
+  color: #23282c;
 
+  background: transparent;
 
+}
 
+
 
+.breadcrumb-menu .dropdown-menu {
 
+  min-width: 180px;
 
+  line-height: 1.5;
 
+}
 
+
 
+*[dir="rtl"] .breadcrumb-menu {
 
+  margin-right: auto;
 
+  margin-left: initial;
 
+}
 
+
 
+.breadcrumb {
 
+  position: relative;
 
+  border-radius: 0;
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+*[dir="rtl"] .breadcrumb-item::before {
 
+  padding-right: 0;
 
+  padding-left: 0.5rem;
 
+}
 
+
 
+*[dir="rtl"] .breadcrumb-item {
 
+  padding-right: 0.5rem;
 
+  padding-left: 0;
 
+}
 
+
 
+.brand-card {
 
+  position: relative;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  min-width: 0;
 
+  margin-bottom: 1.5rem;
 
+  word-wrap: break-word;
 
+  background-color: #fff;
 
+  background-clip: border-box;
 
+  border: 1px solid #c8ced3;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.brand-card-header {
 
+  position: relative;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  height: 6rem;
 
+  border-radius: 0.25rem 0.25rem 0 0;
 
+}
 
+
 
+.brand-card-header i {
 
+  font-size: 2rem;
 
+  color: #fff;
 
+}
 
+
 
+.brand-card-header .chart-wrapper {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.brand-card-body {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: row;
 
+  flex-direction: row;
 
+  padding: 0.75rem 0;
 
+  text-align: center;
 
+}
 
+
 
+.brand-card-body > * {
 
+  -ms-flex: 1;
 
+  flex: 1;
 
+  padding: 0.1875rem 0;
 
+}
 
+
 
+.brand-card-body > *:not(:last-child) {
 
+  border-right: 1px solid #c8ced3;
 
+}
 
+
 
+*[dir="rtl"] .brand-card-body > *:not(:last-child) {
 
+  border-right: 0;
 
+  border-left: 1px solid #c8ced3;
 
+}
 
+
 
+.btn-brand {
 
+  border: 0;
 
+}
 
+
 
+.btn-brand i {
 
+  display: inline-block;
 
+  width: 2.0625rem;
 
+  margin: -0.375rem -0.75rem;
 
+  line-height: 2.0625rem;
 
+  text-align: center;
 
+  background-color: rgba(0, 0, 0, 0.2);
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.btn-brand i + span {
 
+  margin-left: 1.5rem;
 
+}
 
+
 
+.btn-brand.btn-lg i, .btn-group-lg > .btn-brand.btn i {
 
+  width: 2.640625rem;
 
+  margin: -0.5rem -1rem;
 
+  line-height: 2.640625rem;
 
+  border-radius: 0.3rem;
 
+}
 
+
 
+.btn-brand.btn-lg i + span, .btn-group-lg > .btn-brand.btn i + span {
 
+  margin-left: 2rem;
 
+}
 
+
 
+.btn-brand.btn-sm i, .btn-group-sm > .btn-brand.btn i {
 
+  width: 1.648438rem;
 
+  margin: -0.25rem -0.5rem;
 
+  line-height: 1.648438rem;
 
+  border-radius: 0.2rem;
 
+}
 
+
 
+.btn-brand.btn-sm i + span, .btn-group-sm > .btn-brand.btn i + span {
 
+  margin-left: 1rem;
 
+}
 
+
 
+.btn-brand.btn-square i {
 
+  border-radius: 0;
 
+}
 
+
 
+.btn-facebook {
 
+  color: #fff;
 
+  background-color: #3b5998;
 
+  border-color: #3b5998;
 
+}
 
+
 
+.btn-facebook:hover {
 
+  color: #fff;
 
+  background-color: #30497c;
 
+  border-color: #2d4373;
 
+}
 
+
 
+.btn-facebook:focus, .btn-facebook.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5);
 
+}
 
+
 
+.btn-facebook.disabled, .btn-facebook:disabled {
 
+  color: #fff;
 
+  background-color: #3b5998;
 
+  border-color: #3b5998;
 
+}
 
+
 
+.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
 
+.show > .btn-facebook.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #2d4373;
 
+  border-color: #293e6a;
 
+}
 
+
 
+.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-facebook.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5);
 
+}
 
+
 
+.btn-twitter {
 
+  color: #fff;
 
+  background-color: #00aced;
 
+  border-color: #00aced;
 
+}
 
+
 
+.btn-twitter:hover {
 
+  color: #fff;
 
+  background-color: #0090c7;
 
+  border-color: #0087ba;
 
+}
 
+
 
+.btn-twitter:focus, .btn-twitter.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(38, 184, 240, 0.5);
 
+}
 
+
 
+.btn-twitter.disabled, .btn-twitter:disabled {
 
+  color: #fff;
 
+  background-color: #00aced;
 
+  border-color: #00aced;
 
+}
 
+
 
+.btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active,
 
+.show > .btn-twitter.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #0087ba;
 
+  border-color: #007ead;
 
+}
 
+
 
+.btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-twitter.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(38, 184, 240, 0.5);
 
+}
 
+
 
+.btn-linkedin {
 
+  color: #fff;
 
+  background-color: #4875b4;
 
+  border-color: #4875b4;
 
+}
 
+
 
+.btn-linkedin:hover {
 
+  color: #fff;
 
+  background-color: #3d6399;
 
+  border-color: #395d90;
 
+}
 
+
 
+.btn-linkedin:focus, .btn-linkedin.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 138, 191, 0.5);
 
+}
 
+
 
+.btn-linkedin.disabled, .btn-linkedin:disabled {
 
+  color: #fff;
 
+  background-color: #4875b4;
 
+  border-color: #4875b4;
 
+}
 
+
 
+.btn-linkedin:not(:disabled):not(.disabled):active, .btn-linkedin:not(:disabled):not(.disabled).active,
 
+.show > .btn-linkedin.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #395d90;
 
+  border-color: #365786;
 
+}
 
+
 
+.btn-linkedin:not(:disabled):not(.disabled):active:focus, .btn-linkedin:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-linkedin.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 138, 191, 0.5);
 
+}
 
+
 
+.btn-google-plus {
 
+  color: #fff;
 
+  background-color: #d34836;
 
+  border-color: #d34836;
 
+}
 
+
 
+.btn-google-plus:hover {
 
+  color: #fff;
 
+  background-color: #ba3929;
 
+  border-color: #b03626;
 
+}
 
+
 
+.btn-google-plus:focus, .btn-google-plus.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(218, 99, 84, 0.5);
 
+}
 
+
 
+.btn-google-plus.disabled, .btn-google-plus:disabled {
 
+  color: #fff;
 
+  background-color: #d34836;
 
+  border-color: #d34836;
 
+}
 
+
 
+.btn-google-plus:not(:disabled):not(.disabled):active, .btn-google-plus:not(:disabled):not(.disabled).active,
 
+.show > .btn-google-plus.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #b03626;
 
+  border-color: #a53324;
 
+}
 
+
 
+.btn-google-plus:not(:disabled):not(.disabled):active:focus, .btn-google-plus:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-google-plus.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(218, 99, 84, 0.5);
 
+}
 
+
 
+.btn-flickr {
 
+  color: #fff;
 
+  background-color: #ff0084;
 
+  border-color: #ff0084;
 
+}
 
+
 
+.btn-flickr:hover {
 
+  color: #fff;
 
+  background-color: #d90070;
 
+  border-color: #cc006a;
 
+}
 
+
 
+.btn-flickr:focus, .btn-flickr.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 38, 150, 0.5);
 
+}
 
+
 
+.btn-flickr.disabled, .btn-flickr:disabled {
 
+  color: #fff;
 
+  background-color: #ff0084;
 
+  border-color: #ff0084;
 
+}
 
+
 
+.btn-flickr:not(:disabled):not(.disabled):active, .btn-flickr:not(:disabled):not(.disabled).active,
 
+.show > .btn-flickr.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #cc006a;
 
+  border-color: #bf0063;
 
+}
 
+
 
+.btn-flickr:not(:disabled):not(.disabled):active:focus, .btn-flickr:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-flickr.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 38, 150, 0.5);
 
+}
 
+
 
+.btn-tumblr {
 
+  color: #fff;
 
+  background-color: #32506d;
 
+  border-color: #32506d;
 
+}
 
+
 
+.btn-tumblr:hover {
 
+  color: #fff;
 
+  background-color: #263d53;
 
+  border-color: #22364a;
 
+}
 
+
 
+.btn-tumblr:focus, .btn-tumblr.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(81, 106, 131, 0.5);
 
+}
 
+
 
+.btn-tumblr.disabled, .btn-tumblr:disabled {
 
+  color: #fff;
 
+  background-color: #32506d;
 
+  border-color: #32506d;
 
+}
 
+
 
+.btn-tumblr:not(:disabled):not(.disabled):active, .btn-tumblr:not(:disabled):not(.disabled).active,
 
+.show > .btn-tumblr.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #22364a;
 
+  border-color: #1e3041;
 
+}
 
+
 
+.btn-tumblr:not(:disabled):not(.disabled):active:focus, .btn-tumblr:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-tumblr.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(81, 106, 131, 0.5);
 
+}
 
+
 
+.btn-xing {
 
+  color: #fff;
 
+  background-color: #026466;
 
+  border-color: #026466;
 
+}
 
+
 
+.btn-xing:hover {
 
+  color: #fff;
 
+  background-color: #013f40;
 
+  border-color: #013334;
 
+}
 
+
 
+.btn-xing:focus, .btn-xing.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(40, 123, 125, 0.5);
 
+}
 
+
 
+.btn-xing.disabled, .btn-xing:disabled {
 
+  color: #fff;
 
+  background-color: #026466;
 
+  border-color: #026466;
 
+}
 
+
 
+.btn-xing:not(:disabled):not(.disabled):active, .btn-xing:not(:disabled):not(.disabled).active,
 
+.show > .btn-xing.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #013334;
 
+  border-color: #012727;
 
+}
 
+
 
+.btn-xing:not(:disabled):not(.disabled):active:focus, .btn-xing:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-xing.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(40, 123, 125, 0.5);
 
+}
 
+
 
+.btn-github {
 
+  color: #fff;
 
+  background-color: #4183c4;
 
+  border-color: #4183c4;
 
+}
 
+
 
+.btn-github:hover {
 
+  color: #fff;
 
+  background-color: #3570aa;
 
+  border-color: #3269a0;
 
+}
 
+
 
+.btn-github:focus, .btn-github.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(94, 150, 205, 0.5);
 
+}
 
+
 
+.btn-github.disabled, .btn-github:disabled {
 
+  color: #fff;
 
+  background-color: #4183c4;
 
+  border-color: #4183c4;
 
+}
 
+
 
+.btn-github:not(:disabled):not(.disabled):active, .btn-github:not(:disabled):not(.disabled).active,
 
+.show > .btn-github.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #3269a0;
 
+  border-color: #2f6397;
 
+}
 
+
 
+.btn-github:not(:disabled):not(.disabled):active:focus, .btn-github:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-github.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(94, 150, 205, 0.5);
 
+}
 
+
 
+.btn-html5 {
 
+  color: #fff;
 
+  background-color: #e34f26;
 
+  border-color: #e34f26;
 
+}
 
+
 
+.btn-html5:hover {
 
+  color: #fff;
 
+  background-color: #c9401a;
 
+  border-color: #be3c18;
 
+}
 
+
 
+.btn-html5:focus, .btn-html5.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(231, 105, 71, 0.5);
 
+}
 
+
 
+.btn-html5.disabled, .btn-html5:disabled {
 
+  color: #fff;
 
+  background-color: #e34f26;
 
+  border-color: #e34f26;
 
+}
 
+
 
+.btn-html5:not(:disabled):not(.disabled):active, .btn-html5:not(:disabled):not(.disabled).active,
 
+.show > .btn-html5.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #be3c18;
 
+  border-color: #b23917;
 
+}
 
+
 
+.btn-html5:not(:disabled):not(.disabled):active:focus, .btn-html5:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-html5.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(231, 105, 71, 0.5);
 
+}
 
+
 
+.btn-openid {
 
+  color: #23282c;
 
+  background-color: #f78c40;
 
+  border-color: #f78c40;
 
+}
 
+
 
+.btn-openid:hover {
 
+  color: #fff;
 
+  background-color: #f5761b;
 
+  border-color: #f56f0f;
 
+}
 
+
 
+.btn-openid:focus, .btn-openid.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(215, 125, 61, 0.5);
 
+}
 
+
 
+.btn-openid.disabled, .btn-openid:disabled {
 
+  color: #23282c;
 
+  background-color: #f78c40;
 
+  border-color: #f78c40;
 
+}
 
+
 
+.btn-openid:not(:disabled):not(.disabled):active, .btn-openid:not(:disabled):not(.disabled).active,
 
+.show > .btn-openid.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #f56f0f;
 
+  border-color: #ed680a;
 
+}
 
+
 
+.btn-openid:not(:disabled):not(.disabled):active:focus, .btn-openid:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-openid.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(215, 125, 61, 0.5);
 
+}
 
+
 
+.btn-stack-overflow {
 
+  color: #fff;
 
+  background-color: #fe7a15;
 
+  border-color: #fe7a15;
 
+}
 
+
 
+.btn-stack-overflow:hover {
 
+  color: #fff;
 
+  background-color: #ec6701;
 
+  border-color: #df6101;
 
+}
 
+
 
+.btn-stack-overflow:focus, .btn-stack-overflow.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(254, 142, 56, 0.5);
 
+}
 
+
 
+.btn-stack-overflow.disabled, .btn-stack-overflow:disabled {
 
+  color: #fff;
 
+  background-color: #fe7a15;
 
+  border-color: #fe7a15;
 
+}
 
+
 
+.btn-stack-overflow:not(:disabled):not(.disabled):active, .btn-stack-overflow:not(:disabled):not(.disabled).active,
 
+.show > .btn-stack-overflow.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #df6101;
 
+  border-color: #d25c01;
 
+}
 
+
 
+.btn-stack-overflow:not(:disabled):not(.disabled):active:focus, .btn-stack-overflow:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-stack-overflow.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(254, 142, 56, 0.5);
 
+}
 
+
 
+.btn-youtube {
 
+  color: #fff;
 
+  background-color: #b00;
 
+  border-color: #b00;
 
+}
 
+
 
+.btn-youtube:hover {
 
+  color: #fff;
 
+  background-color: #950000;
 
+  border-color: #880000;
 
+}
 
+
 
+.btn-youtube:focus, .btn-youtube.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5);
 
+}
 
+
 
+.btn-youtube.disabled, .btn-youtube:disabled {
 
+  color: #fff;
 
+  background-color: #b00;
 
+  border-color: #b00;
 
+}
 
+
 
+.btn-youtube:not(:disabled):not(.disabled):active, .btn-youtube:not(:disabled):not(.disabled).active,
 
+.show > .btn-youtube.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #880000;
 
+  border-color: #7b0000;
 
+}
 
+
 
+.btn-youtube:not(:disabled):not(.disabled):active:focus, .btn-youtube:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-youtube.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5);
 
+}
 
+
 
+.btn-css3 {
 
+  color: #fff;
 
+  background-color: #0170ba;
 
+  border-color: #0170ba;
 
+}
 
+
 
+.btn-css3:hover {
 
+  color: #fff;
 
+  background-color: #015994;
 
+  border-color: #015187;
 
+}
 
+
 
+.btn-css3:focus, .btn-css3.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(39, 133, 196, 0.5);
 
+}
 
+
 
+.btn-css3.disabled, .btn-css3:disabled {
 
+  color: #fff;
 
+  background-color: #0170ba;
 
+  border-color: #0170ba;
 
+}
 
+
 
+.btn-css3:not(:disabled):not(.disabled):active, .btn-css3:not(:disabled):not(.disabled).active,
 
+.show > .btn-css3.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #015187;
 
+  border-color: #014a7b;
 
+}
 
+
 
+.btn-css3:not(:disabled):not(.disabled):active:focus, .btn-css3:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-css3.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(39, 133, 196, 0.5);
 
+}
 
+
 
+.btn-dribbble {
 
+  color: #fff;
 
+  background-color: #ea4c89;
 
+  border-color: #ea4c89;
 
+}
 
+
 
+.btn-dribbble:hover {
 
+  color: #fff;
 
+  background-color: #e62a72;
 
+  border-color: #e51e6b;
 
+}
 
+
 
+.btn-dribbble:focus, .btn-dribbble.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(237, 103, 155, 0.5);
 
+}
 
+
 
+.btn-dribbble.disabled, .btn-dribbble:disabled {
 
+  color: #fff;
 
+  background-color: #ea4c89;
 
+  border-color: #ea4c89;
 
+}
 
+
 
+.btn-dribbble:not(:disabled):not(.disabled):active, .btn-dribbble:not(:disabled):not(.disabled).active,
 
+.show > .btn-dribbble.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #e51e6b;
 
+  border-color: #dc1a65;
 
+}
 
+
 
+.btn-dribbble:not(:disabled):not(.disabled):active:focus, .btn-dribbble:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-dribbble.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(237, 103, 155, 0.5);
 
+}
 
+
 
+.btn-instagram {
 
+  color: #fff;
 
+  background-color: #517fa4;
 
+  border-color: #517fa4;
 
+}
 
+
 
+.btn-instagram:hover {
 
+  color: #fff;
 
+  background-color: #446b8a;
 
+  border-color: #406582;
 
+}
 
+
 
+.btn-instagram:focus, .btn-instagram.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(107, 146, 178, 0.5);
 
+}
 
+
 
+.btn-instagram.disabled, .btn-instagram:disabled {
 
+  color: #fff;
 
+  background-color: #517fa4;
 
+  border-color: #517fa4;
 
+}
 
+
 
+.btn-instagram:not(:disabled):not(.disabled):active, .btn-instagram:not(:disabled):not(.disabled).active,
 
+.show > .btn-instagram.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #406582;
 
+  border-color: #3c5e79;
 
+}
 
+
 
+.btn-instagram:not(:disabled):not(.disabled):active:focus, .btn-instagram:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-instagram.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(107, 146, 178, 0.5);
 
+}
 
+
 
+.btn-pinterest {
 
+  color: #fff;
 
+  background-color: #cb2027;
 
+  border-color: #cb2027;
 
+}
 
+
 
+.btn-pinterest:hover {
 
+  color: #fff;
 
+  background-color: #aa1b21;
 
+  border-color: #9f191f;
 
+}
 
+
 
+.btn-pinterest:focus, .btn-pinterest.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(211, 65, 71, 0.5);
 
+}
 
+
 
+.btn-pinterest.disabled, .btn-pinterest:disabled {
 
+  color: #fff;
 
+  background-color: #cb2027;
 
+  border-color: #cb2027;
 
+}
 
+
 
+.btn-pinterest:not(:disabled):not(.disabled):active, .btn-pinterest:not(:disabled):not(.disabled).active,
 
+.show > .btn-pinterest.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #9f191f;
 
+  border-color: #94171c;
 
+}
 
+
 
+.btn-pinterest:not(:disabled):not(.disabled):active:focus, .btn-pinterest:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-pinterest.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(211, 65, 71, 0.5);
 
+}
 
+
 
+.btn-vk {
 
+  color: #fff;
 
+  background-color: #45668e;
 
+  border-color: #45668e;
 
+}
 
+
 
+.btn-vk:hover {
 
+  color: #fff;
 
+  background-color: #385474;
 
+  border-color: #344d6c;
 
+}
 
+
 
+.btn-vk:focus, .btn-vk.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(97, 125, 159, 0.5);
 
+}
 
+
 
+.btn-vk.disabled, .btn-vk:disabled {
 
+  color: #fff;
 
+  background-color: #45668e;
 
+  border-color: #45668e;
 
+}
 
+
 
+.btn-vk:not(:disabled):not(.disabled):active, .btn-vk:not(:disabled):not(.disabled).active,
 
+.show > .btn-vk.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #344d6c;
 
+  border-color: #304763;
 
+}
 
+
 
+.btn-vk:not(:disabled):not(.disabled):active:focus, .btn-vk:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-vk.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(97, 125, 159, 0.5);
 
+}
 
+
 
+.btn-yahoo {
 
+  color: #fff;
 
+  background-color: #400191;
 
+  border-color: #400191;
 
+}
 
+
 
+.btn-yahoo:hover {
 
+  color: #fff;
 
+  background-color: #2f016b;
 
+  border-color: #2a015e;
 
+}
 
+
 
+.btn-yahoo:focus, .btn-yahoo.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(93, 39, 162, 0.5);
 
+}
 
+
 
+.btn-yahoo.disabled, .btn-yahoo:disabled {
 
+  color: #fff;
 
+  background-color: #400191;
 
+  border-color: #400191;
 
+}
 
+
 
+.btn-yahoo:not(:disabled):not(.disabled):active, .btn-yahoo:not(:disabled):not(.disabled).active,
 
+.show > .btn-yahoo.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #2a015e;
 
+  border-color: #240152;
 
+}
 
+
 
+.btn-yahoo:not(:disabled):not(.disabled):active:focus, .btn-yahoo:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-yahoo.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(93, 39, 162, 0.5);
 
+}
 
+
 
+.btn-behance {
 
+  color: #fff;
 
+  background-color: #1769ff;
 
+  border-color: #1769ff;
 
+}
 
+
 
+.btn-behance:hover {
 
+  color: #fff;
 
+  background-color: #0055f0;
 
+  border-color: #0050e3;
 
+}
 
+
 
+.btn-behance:focus, .btn-behance.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(58, 128, 255, 0.5);
 
+}
 
+
 
+.btn-behance.disabled, .btn-behance:disabled {
 
+  color: #fff;
 
+  background-color: #1769ff;
 
+  border-color: #1769ff;
 
+}
 
+
 
+.btn-behance:not(:disabled):not(.disabled):active, .btn-behance:not(:disabled):not(.disabled).active,
 
+.show > .btn-behance.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #0050e3;
 
+  border-color: #004cd6;
 
+}
 
+
 
+.btn-behance:not(:disabled):not(.disabled):active:focus, .btn-behance:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-behance.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(58, 128, 255, 0.5);
 
+}
 
+
 
+.btn-dropbox {
 
+  color: #fff;
 
+  background-color: #007ee5;
 
+  border-color: #007ee5;
 
+}
 
+
 
+.btn-dropbox:hover {
 
+  color: #fff;
 
+  background-color: #0069bf;
 
+  border-color: #0062b2;
 
+}
 
+
 
+.btn-dropbox:focus, .btn-dropbox.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(38, 145, 233, 0.5);
 
+}
 
+
 
+.btn-dropbox.disabled, .btn-dropbox:disabled {
 
+  color: #fff;
 
+  background-color: #007ee5;
 
+  border-color: #007ee5;
 
+}
 
+
 
+.btn-dropbox:not(:disabled):not(.disabled):active, .btn-dropbox:not(:disabled):not(.disabled).active,
 
+.show > .btn-dropbox.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #0062b2;
 
+  border-color: #005ba5;
 
+}
 
+
 
+.btn-dropbox:not(:disabled):not(.disabled):active:focus, .btn-dropbox:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-dropbox.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(38, 145, 233, 0.5);
 
+}
 
+
 
+.btn-reddit {
 
+  color: #fff;
 
+  background-color: #ff4500;
 
+  border-color: #ff4500;
 
+}
 
+
 
+.btn-reddit:hover {
 
+  color: #fff;
 
+  background-color: #d93b00;
 
+  border-color: #cc3700;
 
+}
 
+
 
+.btn-reddit:focus, .btn-reddit.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 97, 38, 0.5);
 
+}
 
+
 
+.btn-reddit.disabled, .btn-reddit:disabled {
 
+  color: #fff;
 
+  background-color: #ff4500;
 
+  border-color: #ff4500;
 
+}
 
+
 
+.btn-reddit:not(:disabled):not(.disabled):active, .btn-reddit:not(:disabled):not(.disabled).active,
 
+.show > .btn-reddit.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #cc3700;
 
+  border-color: #bf3400;
 
+}
 
+
 
+.btn-reddit:not(:disabled):not(.disabled):active:focus, .btn-reddit:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-reddit.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 97, 38, 0.5);
 
+}
 
+
 
+.btn-spotify {
 
+  color: #fff;
 
+  background-color: #7ab800;
 
+  border-color: #7ab800;
 
+}
 
+
 
+.btn-spotify:hover {
 
+  color: #fff;
 
+  background-color: #619200;
 
+  border-color: #588500;
 
+}
 
+
 
+.btn-spotify:focus, .btn-spotify.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(142, 195, 38, 0.5);
 
+}
 
+
 
+.btn-spotify.disabled, .btn-spotify:disabled {
 
+  color: #fff;
 
+  background-color: #7ab800;
 
+  border-color: #7ab800;
 
+}
 
+
 
+.btn-spotify:not(:disabled):not(.disabled):active, .btn-spotify:not(:disabled):not(.disabled).active,
 
+.show > .btn-spotify.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #588500;
 
+  border-color: #507800;
 
+}
 
+
 
+.btn-spotify:not(:disabled):not(.disabled):active:focus, .btn-spotify:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-spotify.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(142, 195, 38, 0.5);
 
+}
 
+
 
+.btn-vine {
 
+  color: #fff;
 
+  background-color: #00bf8f;
 
+  border-color: #00bf8f;
 
+}
 
+
 
+.btn-vine:hover {
 
+  color: #fff;
 
+  background-color: #009972;
 
+  border-color: #008c69;
 
+}
 
+
 
+.btn-vine:focus, .btn-vine.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(38, 201, 160, 0.5);
 
+}
 
+
 
+.btn-vine.disabled, .btn-vine:disabled {
 
+  color: #fff;
 
+  background-color: #00bf8f;
 
+  border-color: #00bf8f;
 
+}
 
+
 
+.btn-vine:not(:disabled):not(.disabled):active, .btn-vine:not(:disabled):not(.disabled).active,
 
+.show > .btn-vine.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #008c69;
 
+  border-color: #007f5f;
 
+}
 
+
 
+.btn-vine:not(:disabled):not(.disabled):active:focus, .btn-vine:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-vine.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(38, 201, 160, 0.5);
 
+}
 
+
 
+.btn-foursquare {
 
+  color: #fff;
 
+  background-color: #1073af;
 
+  border-color: #1073af;
 
+}
 
+
 
+.btn-foursquare:hover {
 
+  color: #fff;
 
+  background-color: #0d5c8c;
 
+  border-color: #0c5480;
 
+}
 
+
 
+.btn-foursquare:focus, .btn-foursquare.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(52, 136, 187, 0.5);
 
+}
 
+
 
+.btn-foursquare.disabled, .btn-foursquare:disabled {
 
+  color: #fff;
 
+  background-color: #1073af;
 
+  border-color: #1073af;
 
+}
 
+
 
+.btn-foursquare:not(:disabled):not(.disabled):active, .btn-foursquare:not(:disabled):not(.disabled).active,
 
+.show > .btn-foursquare.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #0c5480;
 
+  border-color: #0b4d75;
 
+}
 
+
 
+.btn-foursquare:not(:disabled):not(.disabled):active:focus, .btn-foursquare:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-foursquare.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(52, 136, 187, 0.5);
 
+}
 
+
 
+.btn-vimeo {
 
+  color: #23282c;
 
+  background-color: #aad450;
 
+  border-color: #aad450;
 
+}
 
+
 
+.btn-vimeo:hover {
 
+  color: #23282c;
 
+  background-color: #9bcc32;
 
+  border-color: #93c130;
 
+}
 
+
 
+.btn-vimeo:focus, .btn-vimeo.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(150, 186, 75, 0.5);
 
+}
 
+
 
+.btn-vimeo.disabled, .btn-vimeo:disabled {
 
+  color: #23282c;
 
+  background-color: #aad450;
 
+  border-color: #aad450;
 
+}
 
+
 
+.btn-vimeo:not(:disabled):not(.disabled):active, .btn-vimeo:not(:disabled):not(.disabled).active,
 
+.show > .btn-vimeo.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #93c130;
 
+  border-color: #8bb72d;
 
+}
 
+
 
+.btn-vimeo:not(:disabled):not(.disabled):active:focus, .btn-vimeo:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-vimeo.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(150, 186, 75, 0.5);
 
+}
 
+
 
+*[dir="rtl"] .btn-group > .btn:not(:first-child),
 
+*[dir="rtl"] .btn-group > .btn-group:not(:first-child) {
 
+  margin-right: -1px;
 
+}
 
+
 
+*[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
 
+*[dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn {
 
+  border-radius: 0.25rem;
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .btn-group > .btn:not(:first-child),
 
+*[dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn {
 
+  border-radius: 0.25rem;
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+.btn-transparent {
 
+  color: #fff;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn [class^="icon-"],
 
+.btn [class*=" icon-"] {
 
+  display: inline-block;
 
+  margin-top: -2px;
 
+  vertical-align: middle;
 
+}
 
+
 
+.btn-pill {
 
+  border-radius: 50em;
 
+}
 
+
 
+.btn-square {
 
+  border-radius: 0;
 
+}
 
+
 
+.btn-ghost-primary {
 
+  color: #20a8d8;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-primary:hover {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-ghost-primary:focus, .btn-ghost-primary.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.btn-ghost-primary.disabled, .btn-ghost-primary:disabled {
 
+  color: #20a8d8;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-primary:not(:disabled):not(.disabled):active, .btn-ghost-primary:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-primary.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.btn-ghost-primary:not(:disabled):not(.disabled):active:focus, .btn-ghost-primary:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-primary.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.5);
 
+}
 
+
 
+.btn-ghost-secondary {
 
+  color: #c8ced3;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-secondary:hover {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-ghost-secondary:focus, .btn-ghost-secondary.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5);
 
+}
 
+
 
+.btn-ghost-secondary.disabled, .btn-ghost-secondary:disabled {
 
+  color: #c8ced3;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-secondary:not(:disabled):not(.disabled):active, .btn-ghost-secondary:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-secondary.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.btn-ghost-secondary:not(:disabled):not(.disabled):active:focus, .btn-ghost-secondary:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-secondary.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(200, 206, 211, 0.5);
 
+}
 
+
 
+.btn-ghost-success {
 
+  color: #4dbd74;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-success:hover {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-ghost-success:focus, .btn-ghost-success.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5);
 
+}
 
+
 
+.btn-ghost-success.disabled, .btn-ghost-success:disabled {
 
+  color: #4dbd74;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-success:not(:disabled):not(.disabled):active, .btn-ghost-success:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-success.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.btn-ghost-success:not(:disabled):not(.disabled):active:focus, .btn-ghost-success:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-success.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(77, 189, 116, 0.5);
 
+}
 
+
 
+.btn-ghost-info {
 
+  color: #63c2de;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-info:hover {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-ghost-info:focus, .btn-ghost-info.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5);
 
+}
 
+
 
+.btn-ghost-info.disabled, .btn-ghost-info:disabled {
 
+  color: #63c2de;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-info:not(:disabled):not(.disabled):active, .btn-ghost-info:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-info.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.btn-ghost-info:not(:disabled):not(.disabled):active:focus, .btn-ghost-info:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-info.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(99, 194, 222, 0.5);
 
+}
 
+
 
+.btn-ghost-warning {
 
+  color: #ffc107;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-warning:hover {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-ghost-warning:focus, .btn-ghost-warning.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
 
+}
 
+
 
+.btn-ghost-warning.disabled, .btn-ghost-warning:disabled {
 
+  color: #ffc107;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-warning:not(:disabled):not(.disabled):active, .btn-ghost-warning:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-warning.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.btn-ghost-warning:not(:disabled):not(.disabled):active:focus, .btn-ghost-warning:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-warning.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
 
+}
 
+
 
+.btn-ghost-danger {
 
+  color: #f86c6b;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-danger:hover {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-ghost-danger:focus, .btn-ghost-danger.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5);
 
+}
 
+
 
+.btn-ghost-danger.disabled, .btn-ghost-danger:disabled {
 
+  color: #f86c6b;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-danger:not(:disabled):not(.disabled):active, .btn-ghost-danger:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-danger.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.btn-ghost-danger:not(:disabled):not(.disabled):active:focus, .btn-ghost-danger:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-danger.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(248, 108, 107, 0.5);
 
+}
 
+
 
+.btn-ghost-light {
 
+  color: #f0f3f5;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-light:hover {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-ghost-light:focus, .btn-ghost-light.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5);
 
+}
 
+
 
+.btn-ghost-light.disabled, .btn-ghost-light:disabled {
 
+  color: #f0f3f5;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-light:not(:disabled):not(.disabled):active, .btn-ghost-light:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-light.dropdown-toggle {
 
+  color: #23282c;
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.btn-ghost-light:not(:disabled):not(.disabled):active:focus, .btn-ghost-light:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-light.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(240, 243, 245, 0.5);
 
+}
 
+
 
+.btn-ghost-dark {
 
+  color: #2f353a;
 
+  background-color: transparent;
 
+  background-image: none;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-dark:hover {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-ghost-dark:focus, .btn-ghost-dark.focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5);
 
+}
 
+
 
+.btn-ghost-dark.disabled, .btn-ghost-dark:disabled {
 
+  color: #2f353a;
 
+  background-color: transparent;
 
+  border-color: transparent;
 
+}
 
+
 
+.btn-ghost-dark:not(:disabled):not(.disabled):active, .btn-ghost-dark:not(:disabled):not(.disabled).active,
 
+.show > .btn-ghost-dark.dropdown-toggle {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.btn-ghost-dark:not(:disabled):not(.disabled):active:focus, .btn-ghost-dark:not(:disabled):not(.disabled).active:focus,
 
+.show > .btn-ghost-dark.dropdown-toggle:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(47, 53, 58, 0.5);
 
+}
 
+
 
+.callout {
 
+  position: relative;
 
+  padding: 0 1rem;
 
+  margin: 1rem 0;
 
+  border-left: 4px solid #c8ced3;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.callout .chart-wrapper {
 
+  position: absolute;
 
+  top: 10px;
 
+  left: 50%;
 
+  float: right;
 
+  width: 50%;
 
+}
 
+
 
+.callout-bordered {
 
+  border: 1px solid #c8ced3;
 
+  border-left-width: 4px;
 
+}
 
+
 
+.callout code {
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.callout h4 {
 
+  margin-top: 0;
 
+  margin-bottom: .25rem;
 
+}
 
+
 
+.callout p:last-child {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.callout + .callout {
 
+  margin-top: -0.25rem;
 
+}
 
+
 
+.callout-primary {
 
+  border-left-color: #20a8d8;
 
+}
 
+
 
+.callout-primary h4 {
 
+  color: #20a8d8;
 
+}
 
+
 
+.callout-secondary {
 
+  border-left-color: #c8ced3;
 
+}
 
+
 
+.callout-secondary h4 {
 
+  color: #c8ced3;
 
+}
 
+
 
+.callout-success {
 
+  border-left-color: #4dbd74;
 
+}
 
+
 
+.callout-success h4 {
 
+  color: #4dbd74;
 
+}
 
+
 
+.callout-info {
 
+  border-left-color: #63c2de;
 
+}
 
+
 
+.callout-info h4 {
 
+  color: #63c2de;
 
+}
 
+
 
+.callout-warning {
 
+  border-left-color: #ffc107;
 
+}
 
+
 
+.callout-warning h4 {
 
+  color: #ffc107;
 
+}
 
+
 
+.callout-danger {
 
+  border-left-color: #f86c6b;
 
+}
 
+
 
+.callout-danger h4 {
 
+  color: #f86c6b;
 
+}
 
+
 
+.callout-light {
 
+  border-left-color: #f0f3f5;
 
+}
 
+
 
+.callout-light h4 {
 
+  color: #f0f3f5;
 
+}
 
+
 
+.callout-dark {
 
+  border-left-color: #2f353a;
 
+}
 
+
 
+.callout-dark h4 {
 
+  color: #2f353a;
 
+}
 
+
 
+*[dir="rtl"] .callout {
 
+  border-right: 4px solid #c8ced3;
 
+  border-left: 0;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-primary {
 
+  border-right-color: #20a8d8;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-secondary {
 
+  border-right-color: #c8ced3;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-success {
 
+  border-right-color: #4dbd74;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-info {
 
+  border-right-color: #63c2de;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-warning {
 
+  border-right-color: #ffc107;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-danger {
 
+  border-right-color: #f86c6b;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-light {
 
+  border-right-color: #f0f3f5;
 
+}
 
+
 
+*[dir="rtl"] .callout.callout-dark {
 
+  border-right-color: #2f353a;
 
+}
 
+
 
+*[dir="rtl"] .callout .chart-wrapper {
 
+  left: 0;
 
+  float: left;
 
+}
 
+
 
+.card {
 
+  margin-bottom: 1.5rem;
 
+}
 
+
 
+.card.bg-primary {
 
+  border-color: #187da0;
 
+}
 
+
 
+.card.bg-primary .card-header {
 
+  background-color: #1e9ecb;
 
+  border-color: #187da0;
 
+}
 
+
 
+.card.bg-secondary {
 
+  border-color: #a5aeb7;
 
+}
 
+
 
+.card.bg-secondary .card-header {
 
+  background-color: #c0c6cc;
 
+  border-color: #a5aeb7;
 
+}
 
+
 
+.card.bg-success {
 
+  border-color: #379457;
 
+}
 
+
 
+.card.bg-success .card-header {
 
+  background-color: #44b76c;
 
+  border-color: #379457;
 
+}
 
+
 
+.card.bg-info {
 
+  border-color: #2eadd3;
 
+}
 
+
 
+.card.bg-info .card-header {
 
+  background-color: #56bddb;
 
+  border-color: #2eadd3;
 
+}
 
+
 
+.card.bg-warning {
 
+  border-color: #c69500;
 
+}
 
+
 
+.card.bg-warning .card-header {
 
+  background-color: #f7b900;
 
+  border-color: #c69500;
 
+}
 
+
 
+.card.bg-danger {
 
+  border-color: #f5302e;
 
+}
 
+
 
+.card.bg-danger .card-header {
 
+  background-color: #f75d5c;
 
+  border-color: #f5302e;
 
+}
 
+
 
+.card.bg-light {
 
+  border-color: #cad4dc;
 
+}
 
+
 
+.card.bg-light .card-header {
 
+  background-color: #e7ecef;
 
+  border-color: #cad4dc;
 
+}
 
+
 
+.card.bg-dark {
 
+  border-color: #121517;
 
+}
 
+
 
+.card.bg-dark .card-header {
 
+  background-color: #282d32;
 
+  border-color: #121517;
 
+}
 
+
 
+.card.drag,
 
+.card .drag {
 
+  cursor: move;
 
+}
 
+
 
+.card-placeholder {
 
+  background: rgba(0, 0, 0, 0.025);
 
+  border: 1px dashed #c8ced3;
 
+}
 
+
 
+.card-header > i {
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.card-header .nav-tabs {
 
+  margin-top: -0.75rem;
 
+  margin-bottom: -0.75rem;
 
+  border-bottom: 0;
 
+}
 
+
 
+.card-header .nav-tabs .nav-item {
 
+  border-top: 0;
 
+}
 
+
 
+.card-header .nav-tabs .nav-link {
 
+  padding: 0.75rem 0.625rem;
 
+  color: #73818f;
 
+  border-top: 0;
 
+}
 
+
 
+.card-header .nav-tabs .nav-link.active {
 
+  color: #23282c;
 
+  background: #fff;
 
+}
 
+
 
+*[dir="rtl"] .card-header > i {
 
+  margin-right: 0;
 
+  margin-left: 0.5rem;
 
+}
 
+
 
+.card-header-icon-bg {
 
+  display: inline-block;
 
+  width: 2.8125rem;
 
+  padding: 0.75rem 0;
 
+  margin: -0.75rem 1.25rem -0.75rem -1.25rem;
 
+  line-height: inherit;
 
+  color: #23282c;
 
+  text-align: center;
 
+  background: transparent;
 
+  border-right: 1px solid #c8ced3;
 
+}
 
+
 
+.card-header-actions {
 
+  display: inline-block;
 
+  float: right;
 
+  margin-right: -0.25rem;
 
+}
 
+
 
+*[dir="rtl"] .card-header-actions {
 
+  float: left;
 
+  margin-right: auto;
 
+  margin-left: -0.25rem;
 
+}
 
+
 
+.card-header-action {
 
+  padding: 0 0.25rem;
 
+  color: #73818f;
 
+}
 
+
 
+.card-header-action:hover {
 
+  color: #23282c;
 
+  text-decoration: none;
 
+}
 
+
 
+.card-accent-primary {
 
+  border-top-color: #20a8d8;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-secondary {
 
+  border-top-color: #c8ced3;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-success {
 
+  border-top-color: #4dbd74;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-info {
 
+  border-top-color: #63c2de;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-warning {
 
+  border-top-color: #ffc107;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-danger {
 
+  border-top-color: #f86c6b;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-light {
 
+  border-top-color: #f0f3f5;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-accent-dark {
 
+  border-top-color: #2f353a;
 
+  border-top-width: 2px;
 
+}
 
+
 
+.card-full {
 
+  margin-top: -1rem;
 
+  margin-right: -15px;
 
+  margin-left: -15px;
 
+  border: 0;
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  .card-columns.cols-2 {
 
+    -webkit-column-count: 2;
 
+    -moz-column-count: 2;
 
+    column-count: 2;
 
+  }
 
+}
 
+
 
+.chart-wrapper canvas {
 
+  width: 100%;
 
+}
 
+
 
+base-chart.chart {
 
+  display: block;
 
+}
 
+
 
+canvas {
 
+  -webkit-user-select: none;
 
+  -moz-user-select: none;
 
+  -ms-user-select: none;
 
+  user-select: none;
 
+}
 
+
 
+.chartjs-tooltip {
 
+  position: absolute;
 
+  z-index: 1021;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  padding: 0.25rem 0.5rem;
 
+  color: #fff;
 
+  pointer-events: none;
 
+  background: rgba(0, 0, 0, 0.7);
 
+  opacity: 0;
 
+  transition: all 0.25s ease;
 
+  -webkit-transform: translate(-50%, 0);
 
+  transform: translate(-50%, 0);
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.chartjs-tooltip .tooltip-header {
 
+  margin-bottom: 0.5rem;
 
+}
 
+
 
+.chartjs-tooltip .tooltip-header-item {
 
+  font-size: 0.765625rem;
 
+  font-weight: 700;
 
+}
 
+
 
+.chartjs-tooltip .tooltip-body-item {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  font-size: 0.765625rem;
 
+  white-space: nowrap;
 
+}
 
+
 
+.chartjs-tooltip .tooltip-body-item-color {
 
+  display: inline-block;
 
+  width: 0.875rem;
 
+  height: 0.875rem;
 
+  margin-right: 0.875rem;
 
+}
 
+
 
+.chartjs-tooltip .tooltip-body-item-value {
 
+  padding-left: 1rem;
 
+  margin-left: auto;
 
+  font-weight: 700;
 
+}
 
+
 
+.dropdown-item {
 
+  position: relative;
 
+  padding: 10px 20px;
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+.dropdown-item:last-child {
 
+  border-bottom: 0;
 
+}
 
+
 
+.dropdown-item i {
 
+  display: inline-block;
 
+  width: 20px;
 
+  margin-right: 10px;
 
+  margin-left: -10px;
 
+  color: #c8ced3;
 
+  text-align: center;
 
+}
 
+
 
+.dropdown-item .badge {
 
+  position: absolute;
 
+  right: 10px;
 
+  margin-top: 2px;
 
+}
 
+
 
+.dropdown-header {
 
+  padding: 8px 20px;
 
+  background: #e4e7ea;
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+.dropdown-header .btn {
 
+  margin-top: -7px;
 
+  color: #73818f;
 
+}
 
+
 
+.dropdown-header .btn:hover {
 
+  color: #23282c;
 
+}
 
+
 
+.dropdown-header .btn.pull-right {
 
+  margin-right: -20px;
 
+}
 
+
 
+.dropdown-menu-lg {
 
+  width: 250px;
 
+}
 
+
 
+.app-header .navbar-nav .dropdown-menu {
 
+  position: absolute;
 
+}
 
+
 
+.app-header .navbar-nav .dropdown-menu-right {
 
+  right: 0;
 
+  left: auto;
 
+}
 
+
 
+.app-header .navbar-nav .dropdown-menu-left {
 
+  right: auto;
 
+  left: 0;
 
+}
 
+
 
+*[dir="rtl"] .dropdown-toggle::before {
 
+  margin-right: 0;
 
+  margin-left: 0.255em;
 
+}
 
+
 
+*[dir="rtl"] .dropdown-toggle::after {
 
+  margin-right: 0.255em;
 
+  margin-left: 0;
 
+}
 
+
 
+.app-footer {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-wrap: wrap;
 
+  flex-wrap: wrap;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  padding: 0 1rem;
 
+  color: #23282c;
 
+  background: #f0f3f5;
 
+  border-top: 1px solid #c8ced3;
 
+}
 
+
 
+.row.row-equal {
 
+  padding-right: 7.5px;
 
+  padding-left: 7.5px;
 
+  margin-right: -15px;
 
+  margin-left: -15px;
 
+}
 
+
 
+.row.row-equal [class*="col-"] {
 
+  padding-right: 7.5px;
 
+  padding-left: 7.5px;
 
+}
 
+
 
+.main .container-fluid {
 
+  padding: 0 30px;
 
+}
 
+
 
+.app-header {
 
+  position: relative;
 
+  -ms-flex-direction: row;
 
+  flex-direction: row;
 
+  height: 55px;
 
+  padding: 0;
 
+  margin: 0;
 
+  background-color: #fff;
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+.app-header .navbar-brand {
 
+  display: -ms-inline-flexbox;
 
+  display: inline-flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  width: 155px;
 
+  height: 55px;
 
+  padding: 0;
 
+  margin-right: 0;
 
+  background-color: transparent;
 
+}
 
+
 
+.app-header .navbar-brand .navbar-brand-minimized {
 
+  display: none;
 
+}
 
+
 
+.app-header .navbar-toggler {
 
+  min-width: 50px;
 
+  padding: 0.25rem 0;
 
+}
 
+
 
+.app-header .navbar-toggler:hover .navbar-toggler-icon {
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 
+}
 
+
 
+.app-header .navbar-toggler-icon {
 
+  height: 23px;
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 
+}
 
+
 
+.app-header .navbar-nav {
 
+  -ms-flex-direction: row;
 
+  flex-direction: row;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+}
 
+
 
+.app-header .nav-item {
 
+  position: relative;
 
+  min-width: 50px;
 
+  margin: 0;
 
+  text-align: center;
 
+}
 
+
 
+.app-header .nav-item button {
 
+  margin: 0 auto;
 
+}
 
+
 
+.app-header .nav-item .nav-link {
 
+  padding-top: 0;
 
+  padding-bottom: 0;
 
+  background: 0;
 
+  border: 0;
 
+}
 
+
 
+.app-header .nav-item .nav-link .badge {
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  margin-top: -16px;
 
+  margin-left: 0;
 
+}
 
+
 
+.app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
 
+  height: 35px;
 
+  margin: 0 10px;
 
+}
 
+
 
+.app-header .dropdown-menu {
 
+  padding-bottom: 0;
 
+  line-height: 1.5;
 
+}
 
+
 
+.app-header .dropdown-item {
 
+  min-width: 180px;
 
+}
 
+
 
+.navbar-nav .nav-link {
 
+  color: #73818f;
 
+}
 
+
 
+.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
 
+  color: #2f353a;
 
+}
 
+
 
+.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus,
 
+.navbar-nav .active > .nav-link,
 
+.navbar-nav .active > .nav-link:hover,
 
+.navbar-nav .active > .nav-link:focus,
 
+.navbar-nav .nav-link.open,
 
+.navbar-nav .nav-link.open:hover,
 
+.navbar-nav .nav-link.open:focus,
 
+.navbar-nav .nav-link.active,
 
+.navbar-nav .nav-link.active:hover,
 
+.navbar-nav .nav-link.active:focus {
 
+  color: #2f353a;
 
+}
 
+
 
+.navbar-divider {
 
+  background-color: rgba(0, 0, 0, 0.075);
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .brand-minimized .app-header .navbar-brand {
 
+    width: 50px;
 
+    background-color: transparent;
 
+  }
 
+  .brand-minimized .app-header .navbar-brand .navbar-brand-full {
 
+    display: none;
 
+  }
 
+  .brand-minimized .app-header .navbar-brand .navbar-brand-minimized {
 
+    display: block;
 
+  }
 
+}
 
+
 
+.input-group-prepend,
 
+.input-group-append {
 
+  white-space: nowrap;
 
+  vertical-align: middle;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .form-control,
 
+*[dir="rtl"] .input-group > .custom-select {
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .form-control:not(:last-child),
 
+*[dir="rtl"] .input-group > .custom-select:not(:last-child) {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .form-control:not(:first-child),
 
+*[dir="rtl"] .input-group > .custom-select:not(:first-child) {
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .input-group-prepend {
 
+  margin-left: -1px;
 
+}
 
+
 
+*[dir="rtl"] .input-group-append {
 
+  margin-right: -1px;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .input-group-prepend > .btn,
 
+*[dir="rtl"] .input-group > .input-group-prepend > .input-group-text,
 
+*[dir="rtl"] .input-group > .input-group-append:not(:last-child) > .btn,
 
+*[dir="rtl"] .input-group > .input-group-append:not(:last-child) > .input-group-text,
 
+*[dir="rtl"] .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 
+*[dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
 
+  border-radius: 0.25rem;
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 
+*[dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .input-group-append > .btn,
 
+*[dir="rtl"] .input-group > .input-group-append > .input-group-text,
 
+*[dir="rtl"] .input-group > .input-group-prepend:not(:first-child) > .btn,
 
+*[dir="rtl"] .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
 
+*[dir="rtl"] .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 
+*[dir="rtl"] .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
 
+  border-radius: 0.25rem;
 
+  border-top-right-radius: 0;
 
+  border-bottom-right-radius: 0;
 
+}
 
+
 
+*[dir="rtl"] .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 
+*[dir="rtl"] .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
 
+  border-top-left-radius: 0;
 
+  border-bottom-left-radius: 0;
 
+}
 
+
 
+.img-avatar, .avatar > img,
 
+.img-circle {
 
+  max-width: 100%;
 
+  height: auto;
 
+  border-radius: 50em;
 
+}
 
+
 
+.list-group-accent .list-group-item {
 
+  margin-bottom: 1px;
 
+  border-top: 0;
 
+  border-right: 0;
 
+  border-bottom: 0;
 
+  border-radius: 0;
 
+}
 
+
 
+.list-group-accent .list-group-item.list-group-item-divider {
 
+  position: relative;
 
+}
 
+
 
+.list-group-accent .list-group-item.list-group-item-divider::before {
 
+  position: absolute;
 
+  bottom: -1px;
 
+  left: 5%;
 
+  width: 90%;
 
+  height: 1px;
 
+  content: "";
 
+  background-color: #e4e7ea;
 
+}
 
+
 
+.list-group-item-accent-primary {
 
+  border-left: 4px solid #20a8d8;
 
+}
 
+
 
+.list-group-item-accent-secondary {
 
+  border-left: 4px solid #c8ced3;
 
+}
 
+
 
+.list-group-item-accent-success {
 
+  border-left: 4px solid #4dbd74;
 
+}
 
+
 
+.list-group-item-accent-info {
 
+  border-left: 4px solid #63c2de;
 
+}
 
+
 
+.list-group-item-accent-warning {
 
+  border-left: 4px solid #ffc107;
 
+}
 
+
 
+.list-group-item-accent-danger {
 
+  border-left: 4px solid #f86c6b;
 
+}
 
+
 
+.list-group-item-accent-light {
 
+  border-left: 4px solid #f0f3f5;
 
+}
 
+
 
+.list-group-item-accent-dark {
 
+  border-left: 4px solid #2f353a;
 
+}
 
+
 
+.modal-primary .modal-content {
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.modal-primary .modal-header {
 
+  color: #fff;
 
+  background-color: #20a8d8;
 
+}
 
+
 
+.modal-secondary .modal-content {
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.modal-secondary .modal-header {
 
+  color: #fff;
 
+  background-color: #c8ced3;
 
+}
 
+
 
+.modal-success .modal-content {
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.modal-success .modal-header {
 
+  color: #fff;
 
+  background-color: #4dbd74;
 
+}
 
+
 
+.modal-info .modal-content {
 
+  border-color: #63c2de;
 
+}
 
+
 
+.modal-info .modal-header {
 
+  color: #fff;
 
+  background-color: #63c2de;
 
+}
 
+
 
+.modal-warning .modal-content {
 
+  border-color: #ffc107;
 
+}
 
+
 
+.modal-warning .modal-header {
 
+  color: #fff;
 
+  background-color: #ffc107;
 
+}
 
+
 
+.modal-danger .modal-content {
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.modal-danger .modal-header {
 
+  color: #fff;
 
+  background-color: #f86c6b;
 
+}
 
+
 
+.modal-light .modal-content {
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.modal-light .modal-header {
 
+  color: #fff;
 
+  background-color: #f0f3f5;
 
+}
 
+
 
+.modal-dark .modal-content {
 
+  border-color: #2f353a;
 
+}
 
+
 
+.modal-dark .modal-header {
 
+  color: #fff;
 
+  background-color: #2f353a;
 
+}
 
+
 
+.nav-tabs .nav-link {
 
+  color: #73818f;
 
+}
 
+
 
+.nav-tabs .nav-link:hover {
 
+  cursor: pointer;
 
+}
 
+
 
+.nav-tabs .nav-link.active {
 
+  color: #2f353a;
 
+  background: #fff;
 
+  border-color: #c8ced3;
 
+  border-bottom-color: #fff;
 
+}
 
+
 
+.nav-tabs .nav-link.active:focus {
 
+  background: #fff;
 
+  border-color: #c8ced3;
 
+  border-bottom-color: #fff;
 
+}
 
+
 
+.tab-content {
 
+  margin-top: -1px;
 
+  background: #fff;
 
+  border: 1px solid #c8ced3;
 
+}
 
+
 
+.tab-content .tab-pane {
 
+  padding: 1rem;
 
+}
 
+
 
+.card-block .tab-content {
 
+  margin-top: 0;
 
+  border: 0;
 
+}
 
+
 
+.nav-fill .nav-link {
 
+  background-color: #fff;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.nav-fill .nav-link + .nav-link {
 
+  margin-left: -1px;
 
+}
 
+
 
+.nav-fill .nav-link.active {
 
+  margin-top: -1px;
 
+  border-top: 2px solid #20a8d8;
 
+}
 
+
 
+*[dir="rtl"] .nav {
 
+  padding-right: 0;
 
+}
 
+
 
+.progress-xs {
 
+  height: 4px;
 
+}
 
+
 
+.progress-sm {
 
+  height: 8px;
 
+}
 
+
 
+.progress-white {
 
+  background-color: rgba(255, 255, 255, 0.2);
 
+}
 
+
 
+.progress-white .progress-bar {
 
+  background-color: #fff;
 
+}
 
+
 
+.progress-group {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-flow: row wrap;
 
+  flex-flow: row wrap;
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+.progress-group-prepend {
 
+  -ms-flex: 0 0 100px;
 
+  flex: 0 0 100px;
 
+  -ms-flex-item-align: center;
 
+  align-self: center;
 
+}
 
+
 
+.progress-group-icon {
 
+  margin: 0 1rem 0 0.25rem;
 
+  font-size: 1.09375rem;
 
+}
 
+
 
+.progress-group-text {
 
+  font-size: 0.765625rem;
 
+  color: #73818f;
 
+}
 
+
 
+.progress-group-header {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-preferred-size: 100%;
 
+  flex-basis: 100%;
 
+  -ms-flex-align: end;
 
+  align-items: flex-end;
 
+  margin-bottom: 0.25rem;
 
+}
 
+
 
+.progress-group-bars {
 
+  -ms-flex-positive: 1;
 
+  flex-grow: 1;
 
+  -ms-flex-item-align: center;
 
+  align-self: center;
 
+}
 
+
 
+.progress-group-bars .progress:not(:last-child) {
 
+  margin-bottom: 2px;
 
+}
 
+
 
+.progress-group-header + .progress-group-bars {
 
+  -ms-flex-preferred-size: 100%;
 
+  flex-basis: 100%;
 
+}
 
+
 
+.sidebar {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  padding: 0;
 
+  color: #fff;
 
+  background: #2f353a;
 
+}
 
+
 
+.sidebar .sidebar-close {
 
+  position: absolute;
 
+  right: 0;
 
+  display: none;
 
+  padding: 0 1rem;
 
+  font-size: 24px;
 
+  font-weight: 800;
 
+  line-height: 55px;
 
+  color: #fff;
 
+  background: 0;
 
+  border: 0;
 
+  opacity: .8;
 
+}
 
+
 
+.sidebar .sidebar-close:hover {
 
+  opacity: 1;
 
+}
 
+
 
+.sidebar .sidebar-header {
 
+  -ms-flex: 0 0 auto;
 
+  flex: 0 0 auto;
 
+  padding: 0.75rem 1rem;
 
+  text-align: center;
 
+  background: rgba(0, 0, 0, 0.2);
 
+}
 
+
 
+.sidebar .sidebar-form .form-control {
 
+  color: #fff;
 
+  background: #181b1e;
 
+  border: 0;
 
+}
 
+
 
+.sidebar .sidebar-form .form-control::-webkit-input-placeholder {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .sidebar-form .form-control::-moz-placeholder {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .sidebar-form .form-control:-ms-input-placeholder {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .sidebar-form .form-control::-ms-input-placeholder {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .sidebar-form .form-control::placeholder {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .sidebar-scroll {
 
+  position: relative;
 
+  -ms-flex: 1;
 
+  flex: 1;
 
+  overflow-x: hidden;
 
+  overflow-y: auto;
 
+  width: 200px;
 
+}
 
+
 
+.sidebar .sidebar-nav {
 
+  position: relative;
 
+  -ms-flex: 1;
 
+  flex: 1;
 
+  width: 200px;
 
+}
 
+
 
+.sidebar > .sidebar-nav {
 
+  overflow-x: hidden;
 
+  overflow-y: auto;
 
+}
 
+
 
+.sidebar .nav {
 
+  width: 200px;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  min-height: 100%;
 
+  padding: 0;
 
+}
 
+
 
+.sidebar .nav-title {
 
+  padding: 0.75rem 1rem;
 
+  font-size: 80%;
 
+  font-weight: 700;
 
+  color: #e4e7ea;
 
+  text-transform: uppercase;
 
+}
 
+
 
+.sidebar .nav-divider {
 
+  height: 10px;
 
+}
 
+
 
+.sidebar .nav-item {
 
+  position: relative;
 
+  margin: 0;
 
+  transition: background .3s ease-in-out;
 
+}
 
+
 
+.sidebar .nav-dropdown-items {
 
+  max-height: 0;
 
+  padding: 0;
 
+  margin: 0;
 
+  overflow-y: hidden;
 
+  transition: max-height .3s ease-in-out;
 
+}
 
+
 
+.sidebar .nav-dropdown-items .nav-item {
 
+  padding: 0;
 
+  list-style: none;
 
+}
 
+
 
+.sidebar .nav-link {
 
+  display: block;
 
+  padding: 0.75rem 1rem;
 
+  color: #fff;
 
+  text-decoration: none;
 
+  background: transparent;
 
+}
 
+
 
+.sidebar .nav-link .nav-icon {
 
+  display: inline-block;
 
+  width: 1.09375rem;
 
+  margin: 0 0.5rem 0 0;
 
+  font-size: 0.875rem;
 
+  color: #73818f;
 
+  text-align: center;
 
+}
 
+
 
+.sidebar .nav-link .badge {
 
+  float: right;
 
+  margin-top: 2px;
 
+}
 
+
 
+.sidebar .nav-link.active {
 
+  color: #fff;
 
+  background: #3a4248;
 
+}
 
+
 
+.sidebar .nav-link.active .nav-icon {
 
+  color: #20a8d8;
 
+}
 
+
 
+.sidebar .nav-link:hover {
 
+  color: #fff;
 
+  background: #20a8d8;
 
+}
 
+
 
+.sidebar .nav-link:hover .nav-icon {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link:hover.nav-dropdown-toggle::before {
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 
+}
 
+
 
+.sidebar .nav-link.disabled {
 
+  color: #b3b3b3;
 
+  cursor: default;
 
+  background: transparent;
 
+}
 
+
 
+.sidebar .nav-link.disabled .nav-icon {
 
+  color: #73818f;
 
+}
 
+
 
+.sidebar .nav-link.disabled:hover {
 
+  color: #b3b3b3;
 
+}
 
+
 
+.sidebar .nav-link.disabled:hover .nav-icon {
 
+  color: #73818f;
 
+}
 
+
 
+.sidebar .nav-link.disabled:hover.nav-dropdown-toggle::before {
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 
+}
 
+
 
+.sidebar .nav-link.nav-link-primary {
 
+  background: #20a8d8;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-primary .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-primary:hover {
 
+  background: #1d97c2;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-primary:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-secondary {
 
+  background: #c8ced3;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-secondary .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-secondary:hover {
 
+  background: #bac1c8;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-secondary:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-success {
 
+  background: #4dbd74;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-success .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-success:hover {
 
+  background: #41af67;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-success:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-info {
 
+  background: #63c2de;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-info .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-info:hover {
 
+  background: #4ebada;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-info:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-warning {
 
+  background: #ffc107;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-warning .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-warning:hover {
 
+  background: #edb100;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-warning:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-danger {
 
+  background: #f86c6b;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-danger .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-danger:hover {
 
+  background: #f75453;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-danger:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-light {
 
+  background: #f0f3f5;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-light .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-light:hover {
 
+  background: #e1e7eb;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-light:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-dark {
 
+  background: #2f353a;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-dark .nav-icon {
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+
 
+.sidebar .nav-link.nav-link-dark:hover {
 
+  background: #24282c;
 
+}
 
+
 
+.sidebar .nav-link.nav-link-dark:hover i {
 
+  color: #fff;
 
+}
 
+
 
+.sidebar .nav-dropdown-toggle {
 
+  position: relative;
 
+}
 
+
 
+.sidebar .nav-dropdown-toggle::before {
 
+  position: absolute;
 
+  top: 50%;
 
+  right: 1rem;
 
+  display: block;
 
+  width: 8px;
 
+  height: 8px;
 
+  padding: 0;
 
+  margin-top: -4px;
 
+  content: "";
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  transition: -webkit-transform .3s;
 
+  transition: transform .3s;
 
+  transition: transform .3s, -webkit-transform .3s;
 
+}
 
+
 
+.sidebar .nav-dropdown-toggle .badge {
 
+  margin-right: 16px;
 
+}
 
+
 
+.sidebar .nav-dropdown.open {
 
+  background: rgba(0, 0, 0, 0.2);
 
+}
 
+
 
+.sidebar .nav-dropdown.open > .nav-dropdown-items {
 
+  max-height: 1500px;
 
+}
 
+
 
+.sidebar .nav-dropdown.open .nav-link {
 
+  color: #fff;
 
+  border-left: 0;
 
+}
 
+
 
+.sidebar .nav-dropdown.open .nav-link.disabled {
 
+  color: #b3b3b3;
 
+  background: transparent;
 
+}
 
+
 
+.sidebar .nav-dropdown.open .nav-link.disabled:hover {
 
+  color: #b3b3b3;
 
+}
 
+
 
+.sidebar .nav-dropdown.open .nav-link.disabled:hover .nav-icon {
 
+  color: #73818f;
 
+}
 
+
 
+.sidebar .nav-dropdown.open > .nav-dropdown-toggle::before {
 
+  -webkit-transform: rotate(-90deg);
 
+  transform: rotate(-90deg);
 
+}
 
+
 
+.sidebar .nav-dropdown.open .nav-dropdown.open {
 
+  border-left: 0;
 
+}
 
+
 
+.sidebar .nav-label {
 
+  display: block;
 
+  padding: 0.09375rem 1rem;
 
+  color: #e4e7ea;
 
+}
 
+
 
+.sidebar .nav-label:hover {
 
+  color: #fff;
 
+  text-decoration: none;
 
+}
 
+
 
+.sidebar .nav-label .nav-icon {
 
+  width: 20px;
 
+  margin: -3px 0.5rem 0 0;
 
+  font-size: 10px;
 
+  color: #73818f;
 
+  text-align: center;
 
+  vertical-align: middle;
 
+}
 
+
 
+.sidebar .progress {
 
+  background-color: #515c64 !important;
 
+}
 
+
 
+.sidebar .sidebar-footer {
 
+  -ms-flex: 0 0 auto;
 
+  flex: 0 0 auto;
 
+  padding: 0.75rem 1rem;
 
+  background: rgba(0, 0, 0, 0.2);
 
+}
 
+
 
+.sidebar .sidebar-minimizer {
 
+  position: relative;
 
+  -ms-flex: 0 0 50px;
 
+  flex: 0 0 50px;
 
+  cursor: pointer;
 
+  background-color: rgba(0, 0, 0, 0.2);
 
+  border: 0;
 
+}
 
+
 
+.sidebar .sidebar-minimizer::before {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  width: 50px;
 
+  height: 50px;
 
+  content: "";
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%2373818f' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  background-size: 12.5px;
 
+  transition: .3s;
 
+}
 
+
 
+.sidebar .sidebar-minimizer:focus, .sidebar .sidebar-minimizer.focus {
 
+  outline: 0;
 
+}
 
+
 
+.sidebar .sidebar-minimizer:hover {
 
+  background-color: rgba(0, 0, 0, 0.3);
 
+}
 
+
 
+.sidebar .sidebar-minimizer:hover::before {
 
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .sidebar-compact .sidebar .sidebar-nav {
 
+    width: 150px;
 
+  }
 
+  .sidebar-compact .sidebar .nav {
 
+    width: 150px;
 
+  }
 
+  .sidebar-compact .sidebar .d-compact-none {
 
+    display: none;
 
+  }
 
+  .sidebar-compact .sidebar .nav-title {
 
+    text-align: center;
 
+  }
 
+  .sidebar-compact .sidebar .nav-item {
 
+    width: 150px;
 
+    border-left: 0;
 
+  }
 
+  .sidebar-compact .sidebar .nav-link {
 
+    text-align: center;
 
+  }
 
+  .sidebar-compact .sidebar .nav-link .nav-icon {
 
+    display: block;
 
+    width: 100%;
 
+    margin: 0.25rem 0;
 
+    font-size: 24px;
 
+  }
 
+  .sidebar-compact .sidebar .nav-link .badge {
 
+    position: absolute;
 
+    top: 18px;
 
+    right: 10px;
 
+  }
 
+  .sidebar-compact .sidebar .nav-link.nav-dropdown-toggle::before {
 
+    top: 30px;
 
+  }
 
+  .sidebar-minimized .sidebar {
 
+    z-index: 1019;
 
+  }
 
+  .sidebar-minimized .sidebar .sidebar-scroll {
 
+    overflow: visible;
 
+    width: 50px;
 
+  }
 
+  .sidebar-minimized .sidebar .sidebar-nav {
 
+    overflow: visible;
 
+    width: 50px;
 
+  }
 
+  .sidebar-minimized .sidebar .nav {
 
+    width: 50px;
 
+  }
 
+  .sidebar-minimized .sidebar .d-minimized-none,
 
+  .sidebar-minimized .sidebar .nav-divider,
 
+  .sidebar-minimized .sidebar .nav-label,
 
+  .sidebar-minimized .sidebar .nav-title,
 
+  .sidebar-minimized .sidebar .sidebar-footer,
 
+  .sidebar-minimized .sidebar .sidebar-form,
 
+  .sidebar-minimized .sidebar .sidebar-header {
 
+    display: none;
 
+  }
 
+  .sidebar-minimized .sidebar .sidebar-minimizer {
 
+    position: fixed;
 
+    bottom: 0;
 
+    width: 50px;
 
+    height: 50px;
 
+    background-color: #24282c;
 
+  }
 
+  .sidebar-minimized .sidebar .sidebar-nav {
 
+    padding-bottom: 50px;
 
+  }
 
+  .sidebar-minimized .sidebar .sidebar-minimizer::before {
 
+    width: 100%;
 
+    -webkit-transform: rotate(-180deg);
 
+    transform: rotate(-180deg);
 
+  }
 
+  .sidebar-minimized .sidebar .nav-item {
 
+    width: 50px;
 
+    overflow: hidden;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-item:hover {
 
+    width: 250px;
 
+    overflow: visible;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-item:hover > .nav-link {
 
+    background: #20a8d8;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon {
 
+    color: #fff;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled,
 
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled {
 
+    background: #2f353a;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled .nav-icon,
 
+  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled .nav-icon {
 
+    color: #73818f;
 
+  }
 
+  .sidebar-minimized .sidebar section :not(.nav-dropdown-items) > .nav-item:last-child::after {
 
+    display: block;
 
+    margin-bottom: 50px;
 
+    content: "";
 
+  }
 
+  .sidebar-minimized .sidebar .nav-link {
 
+    position: relative;
 
+    padding-left: 0;
 
+    margin: 0;
 
+    white-space: nowrap;
 
+    border-left: 0;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-link .nav-icon {
 
+    display: block;
 
+    float: left;
 
+    width: 50px;
 
+    font-size: 18px;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-link .badge {
 
+    position: absolute;
 
+    right: 15px;
 
+    display: none;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-link:hover {
 
+    width: 250px;
 
+    background: #20a8d8;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-link:hover .badge {
 
+    display: inline;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-link.nav-dropdown-toggle::before {
 
+    display: none;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-dropdown-items .nav-item {
 
+    width: 200px;
 
+  }
 
+  .sidebar-minimized .sidebar .nav-dropdown-items .nav-item .nav-link {
 
+    width: 200px;
 
+  }
 
+  .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items {
 
+    display: none;
 
+    max-height: 1000px;
 
+    background: #2f353a;
 
+  }
 
+  .sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
 
+    background: #20a8d8;
 
+  }
 
+  .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
 
+    position: absolute;
 
+    left: 50px;
 
+    display: inline;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav {
 
+    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav .divider {
 
+    height: 0;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before {
 
+    width: 100%;
 
+    -webkit-transform: rotate(0deg);
 
+    transform: rotate(0deg);
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link {
 
+    padding-right: 0;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon {
 
+    float: right;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge {
 
+    right: auto;
 
+    left: 15px;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link:hover .badge {
 
+    display: inline;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items {
 
+    display: none;
 
+    max-height: 1000px;
 
+    background: #2f353a;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
 
+    background: #20a8d8;
 
+  }
 
+  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
 
+    position: absolute;
 
+    left: 0;
 
+    display: inline;
 
+  }
 
+}
 
+
 
+*[dir="rtl"] .sidebar .nav-dropdown-toggle::before {
 
+  position: absolute;
 
+  right: auto;
 
+  left: 1rem;
 
+  -webkit-transform: rotate(180deg);
 
+  transform: rotate(180deg);
 
+}
 
+
 
+*[dir="rtl"] .sidebar .nav-dropdown.open > .nav-dropdown-toggle::before {
 
+  -webkit-transform: rotate(270deg);
 
+  transform: rotate(270deg);
 
+}
 
+
 
+*[dir="rtl"] .sidebar .nav-link .nav-icon {
 
+  margin: 0 0 0 0.5rem;
 
+}
 
+
 
+*[dir="rtl"] .sidebar .nav-link .badge {
 
+  float: left;
 
+  margin-top: 2px;
 
+}
 
+
 
+*[dir="rtl"] .sidebar .nav-link.nav-dropdown-toggle .badge {
 
+  margin-right: auto;
 
+  margin-left: 16px;
 
+}
 
+
 
+*[dir="rtl"] .sidebar .sidebar-minimizer::before {
 
+  right: auto;
 
+  left: 0;
 
+  -webkit-transform: rotate(180deg);
 
+  transform: rotate(180deg);
 
+}
 
+
 
+*[dir="rtl"] .sidebar-toggler {
 
+  margin-right: 0 !important;
 
+}
 
+
 
+.switch {
 
+  display: inline-block;
 
+  width: 40px;
 
+  height: 26px;
 
+}
 
+
 
+.switch-input {
 
+  display: none;
 
+}
 
+
 
+.switch-slider {
 
+  position: relative;
 
+  display: block;
 
+  height: inherit;
 
+  cursor: pointer;
 
+  background-color: #fff;
 
+  border: 1px solid #c8ced3;
 
+  transition: .15s ease-out;
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.switch-slider::before {
 
+  position: absolute;
 
+  top: 2px;
 
+  left: 2px;
 
+  box-sizing: border-box;
 
+  width: 20px;
 
+  height: 20px;
 
+  content: "";
 
+  background-color: #fff;
 
+  border: 1px solid #c8ced3;
 
+  transition: .15s ease-out;
 
+  border-radius: 0.125rem;
 
+}
 
+
 
+.switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(14px);
 
+  transform: translateX(14px);
 
+}
 
+
 
+.switch-input:disabled ~ .switch-slider {
 
+  cursor: not-allowed;
 
+  opacity: .5;
 
+}
 
+
 
+.switch-lg {
 
+  width: 48px;
 
+  height: 30px;
 
+}
 
+
 
+.switch-lg .switch-slider {
 
+  font-size: 12px;
 
+}
 
+
 
+.switch-lg .switch-slider::before {
 
+  width: 24px;
 
+  height: 24px;
 
+}
 
+
 
+.switch-lg .switch-slider::after {
 
+  font-size: 12px;
 
+}
 
+
 
+.switch-lg .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(18px);
 
+  transform: translateX(18px);
 
+}
 
+
 
+.switch-sm {
 
+  width: 32px;
 
+  height: 22px;
 
+}
 
+
 
+.switch-sm .switch-slider {
 
+  font-size: 8px;
 
+}
 
+
 
+.switch-sm .switch-slider::before {
 
+  width: 16px;
 
+  height: 16px;
 
+}
 
+
 
+.switch-sm .switch-slider::after {
 
+  font-size: 8px;
 
+}
 
+
 
+.switch-sm .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(10px);
 
+  transform: translateX(10px);
 
+}
 
+
 
+.switch-label {
 
+  width: 48px;
 
+}
 
+
 
+.switch-label .switch-slider::before {
 
+  z-index: 2;
 
+}
 
+
 
+.switch-label .switch-slider::after {
 
+  position: absolute;
 
+  top: 50%;
 
+  right: 1px;
 
+  z-index: 1;
 
+  width: 50%;
 
+  margin-top: -.5em;
 
+  font-size: 10px;
 
+  font-weight: 600;
 
+  line-height: 1;
 
+  color: #c8ced3;
 
+  text-align: center;
 
+  text-transform: uppercase;
 
+  content: attr(data-unchecked);
 
+  transition: inherit;
 
+}
 
+
 
+.switch-label .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(22px);
 
+  transform: translateX(22px);
 
+}
 
+
 
+.switch-label .switch-input:checked ~ .switch-slider::after {
 
+  left: 1px;
 
+  color: #fff;
 
+  content: attr(data-checked);
 
+}
 
+
 
+.switch-label.switch-lg {
 
+  width: 56px;
 
+  height: 30px;
 
+}
 
+
 
+.switch-label.switch-lg .switch-slider {
 
+  font-size: 12px;
 
+}
 
+
 
+.switch-label.switch-lg .switch-slider::before {
 
+  width: 24px;
 
+  height: 24px;
 
+}
 
+
 
+.switch-label.switch-lg .switch-slider::after {
 
+  font-size: 12px;
 
+}
 
+
 
+.switch-label.switch-lg .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(26px);
 
+  transform: translateX(26px);
 
+}
 
+
 
+.switch-label.switch-sm {
 
+  width: 40px;
 
+  height: 22px;
 
+}
 
+
 
+.switch-label.switch-sm .switch-slider {
 
+  font-size: 8px;
 
+}
 
+
 
+.switch-label.switch-sm .switch-slider::before {
 
+  width: 16px;
 
+  height: 16px;
 
+}
 
+
 
+.switch-label.switch-sm .switch-slider::after {
 
+  font-size: 8px;
 
+}
 
+
 
+.switch-label.switch-sm .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(18px);
 
+  transform: translateX(18px);
 
+}
 
+
 
+.switch-3d .switch-slider {
 
+  background-color: #f0f3f5;
 
+  border-radius: 50em;
 
+}
 
+
 
+.switch-3d .switch-slider::before {
 
+  top: -1px;
 
+  left: -1px;
 
+  width: 26px;
 
+  height: 26px;
 
+  border: 0;
 
+  border-radius: 50em;
 
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 
+}
 
+
 
+.switch-3d.switch-lg {
 
+  width: 48px;
 
+  height: 30px;
 
+}
 
+
 
+.switch-3d.switch-lg .switch-slider::before {
 
+  width: 30px;
 
+  height: 30px;
 
+}
 
+
 
+.switch-3d.switch-lg .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(18px);
 
+  transform: translateX(18px);
 
+}
 
+
 
+.switch-3d.switch-sm {
 
+  width: 32px;
 
+  height: 22px;
 
+}
 
+
 
+.switch-3d.switch-sm .switch-slider::before {
 
+  width: 22px;
 
+  height: 22px;
 
+}
 
+
 
+.switch-3d.switch-sm .switch-input:checked ~ .switch-slider::before {
 
+  -webkit-transform: translateX(10px);
 
+  transform: translateX(10px);
 
+}
 
+
 
+.switch-primary .switch-input:checked + .switch-slider {
 
+  background-color: #20a8d8;
 
+  border-color: #1985ac;
 
+}
 
+
 
+.switch-primary .switch-input:checked + .switch-slider::before {
 
+  border-color: #1985ac;
 
+}
 
+
 
+.switch-outline-primary .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.switch-outline-primary .switch-input:checked + .switch-slider::before {
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.switch-outline-primary .switch-input:checked + .switch-slider::after {
 
+  color: #20a8d8;
 
+}
 
+
 
+.switch-outline-primary-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.switch-outline-primary-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #20a8d8;
 
+  border-color: #20a8d8;
 
+}
 
+
 
+.switch-outline-primary-alt .switch-input:checked + .switch-slider::after {
 
+  color: #20a8d8;
 
+}
 
+
 
+.switch-secondary .switch-input:checked + .switch-slider {
 
+  background-color: #c8ced3;
 
+  border-color: #acb5bc;
 
+}
 
+
 
+.switch-secondary .switch-input:checked + .switch-slider::before {
 
+  border-color: #acb5bc;
 
+}
 
+
 
+.switch-outline-secondary .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.switch-outline-secondary .switch-input:checked + .switch-slider::before {
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.switch-outline-secondary .switch-input:checked + .switch-slider::after {
 
+  color: #c8ced3;
 
+}
 
+
 
+.switch-outline-secondary-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.switch-outline-secondary-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #c8ced3;
 
+  border-color: #c8ced3;
 
+}
 
+
 
+.switch-outline-secondary-alt .switch-input:checked + .switch-slider::after {
 
+  color: #c8ced3;
 
+}
 
+
 
+.switch-success .switch-input:checked + .switch-slider {
 
+  background-color: #4dbd74;
 
+  border-color: #3a9d5d;
 
+}
 
+
 
+.switch-success .switch-input:checked + .switch-slider::before {
 
+  border-color: #3a9d5d;
 
+}
 
+
 
+.switch-outline-success .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.switch-outline-success .switch-input:checked + .switch-slider::before {
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.switch-outline-success .switch-input:checked + .switch-slider::after {
 
+  color: #4dbd74;
 
+}
 
+
 
+.switch-outline-success-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.switch-outline-success-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #4dbd74;
 
+  border-color: #4dbd74;
 
+}
 
+
 
+.switch-outline-success-alt .switch-input:checked + .switch-slider::after {
 
+  color: #4dbd74;
 
+}
 
+
 
+.switch-info .switch-input:checked + .switch-slider {
 
+  background-color: #63c2de;
 
+  border-color: #39b2d5;
 
+}
 
+
 
+.switch-info .switch-input:checked + .switch-slider::before {
 
+  border-color: #39b2d5;
 
+}
 
+
 
+.switch-outline-info .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.switch-outline-info .switch-input:checked + .switch-slider::before {
 
+  border-color: #63c2de;
 
+}
 
+
 
+.switch-outline-info .switch-input:checked + .switch-slider::after {
 
+  color: #63c2de;
 
+}
 
+
 
+.switch-outline-info-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.switch-outline-info-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #63c2de;
 
+  border-color: #63c2de;
 
+}
 
+
 
+.switch-outline-info-alt .switch-input:checked + .switch-slider::after {
 
+  color: #63c2de;
 
+}
 
+
 
+.switch-warning .switch-input:checked + .switch-slider {
 
+  background-color: #ffc107;
 
+  border-color: #d39e00;
 
+}
 
+
 
+.switch-warning .switch-input:checked + .switch-slider::before {
 
+  border-color: #d39e00;
 
+}
 
+
 
+.switch-outline-warning .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.switch-outline-warning .switch-input:checked + .switch-slider::before {
 
+  border-color: #ffc107;
 
+}
 
+
 
+.switch-outline-warning .switch-input:checked + .switch-slider::after {
 
+  color: #ffc107;
 
+}
 
+
 
+.switch-outline-warning-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.switch-outline-warning-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #ffc107;
 
+  border-color: #ffc107;
 
+}
 
+
 
+.switch-outline-warning-alt .switch-input:checked + .switch-slider::after {
 
+  color: #ffc107;
 
+}
 
+
 
+.switch-danger .switch-input:checked + .switch-slider {
 
+  background-color: #f86c6b;
 
+  border-color: #f63c3a;
 
+}
 
+
 
+.switch-danger .switch-input:checked + .switch-slider::before {
 
+  border-color: #f63c3a;
 
+}
 
+
 
+.switch-outline-danger .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.switch-outline-danger .switch-input:checked + .switch-slider::before {
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.switch-outline-danger .switch-input:checked + .switch-slider::after {
 
+  color: #f86c6b;
 
+}
 
+
 
+.switch-outline-danger-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.switch-outline-danger-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #f86c6b;
 
+  border-color: #f86c6b;
 
+}
 
+
 
+.switch-outline-danger-alt .switch-input:checked + .switch-slider::after {
 
+  color: #f86c6b;
 
+}
 
+
 
+.switch-light .switch-input:checked + .switch-slider {
 
+  background-color: #f0f3f5;
 
+  border-color: #d1dbe1;
 
+}
 
+
 
+.switch-light .switch-input:checked + .switch-slider::before {
 
+  border-color: #d1dbe1;
 
+}
 
+
 
+.switch-outline-light .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.switch-outline-light .switch-input:checked + .switch-slider::before {
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.switch-outline-light .switch-input:checked + .switch-slider::after {
 
+  color: #f0f3f5;
 
+}
 
+
 
+.switch-outline-light-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.switch-outline-light-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #f0f3f5;
 
+  border-color: #f0f3f5;
 
+}
 
+
 
+.switch-outline-light-alt .switch-input:checked + .switch-slider::after {
 
+  color: #f0f3f5;
 
+}
 
+
 
+.switch-dark .switch-input:checked + .switch-slider {
 
+  background-color: #2f353a;
 
+  border-color: #181b1e;
 
+}
 
+
 
+.switch-dark .switch-input:checked + .switch-slider::before {
 
+  border-color: #181b1e;
 
+}
 
+
 
+.switch-outline-dark .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.switch-outline-dark .switch-input:checked + .switch-slider::before {
 
+  border-color: #2f353a;
 
+}
 
+
 
+.switch-outline-dark .switch-input:checked + .switch-slider::after {
 
+  color: #2f353a;
 
+}
 
+
 
+.switch-outline-dark-alt .switch-input:checked + .switch-slider {
 
+  background-color: #fff;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.switch-outline-dark-alt .switch-input:checked + .switch-slider::before {
 
+  background-color: #2f353a;
 
+  border-color: #2f353a;
 
+}
 
+
 
+.switch-outline-dark-alt .switch-input:checked + .switch-slider::after {
 
+  color: #2f353a;
 
+}
 
+
 
+.switch-pill .switch-slider {
 
+  border-radius: 50em;
 
+}
 
+
 
+.switch-pill .switch-slider::before {
 
+  border-radius: 50em;
 
+}
 
+
 
+.table-outline {
 
+  border: 1px solid #c8ced3;
 
+}
 
+
 
+.table-outline td {
 
+  vertical-align: middle;
 
+}
 
+
 
+.table-align-middle td {
 
+  vertical-align: middle;
 
+}
 
+
 
+.table-clear td {
 
+  border: 0;
 
+}
 
+
 
+@media all and (-ms-high-contrast: none) {
 
+  html {
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -ms-flex-direction: column;
 
+    flex-direction: column;
 
+  }
 
+}
 
+
 
+.app,
 
+app-dashboard,
 
+app-root {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: column;
 
+  flex-direction: column;
 
+  min-height: 100vh;
 
+}
 
+
 
+.app-header {
 
+  -ms-flex: 0 0 55px;
 
+  flex: 0 0 55px;
 
+}
 
+
 
+.app-footer {
 
+  -ms-flex: 0 0 50px;
 
+  flex: 0 0 50px;
 
+}
 
+
 
+.app-body {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-direction: row;
 
+  flex-direction: row;
 
+  -ms-flex-positive: 1;
 
+  flex-grow: 1;
 
+  overflow-x: hidden;
 
+}
 
+
 
+.app-body .main {
 
+  -ms-flex: 1;
 
+  flex: 1;
 
+  min-width: 0;
 
+}
 
+
 
+.app-body .sidebar {
 
+  -ms-flex: 0 0 200px;
 
+  flex: 0 0 200px;
 
+  -ms-flex-order: -1;
 
+  order: -1;
 
+}
 
+
 
+.app-body .aside-menu {
 
+  -ms-flex: 0 0 250px;
 
+  flex: 0 0 250px;
 
+}
 
+
 
+html:not([dir="rtl"]) .sidebar {
 
+  margin-left: -200px;
 
+}
 
+
 
+html:not([dir="rtl"]) .aside-menu {
 
+  right: 0;
 
+  margin-right: -250px;
 
+}
 
+
 
+html[dir="rtl"] .sidebar {
 
+  margin-right: -200px;
 
+}
 
+
 
+html[dir="rtl"] .aside-menu {
 
+  left: 0;
 
+  margin-left: -250px;
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  .header-fixed .app-header {
 
+    position: fixed;
 
+    z-index: 1020;
 
+    width: 100%;
 
+  }
 
+  .header-fixed .app-body {
 
+    margin-top: 55px;
 
+  }
 
+  .sidebar-fixed .sidebar {
 
+    position: fixed;
 
+    z-index: 1019;
 
+    width: 200px;
 
+    height: 100vh;
 
+  }
 
+  .sidebar-fixed .app-header + .app-body .sidebar {
 
+    height: calc(100vh - 55px);
 
+  }
 
+  .sidebar-compact .sidebar {
 
+    -ms-flex: 0 0 150px;
 
+    flex: 0 0 150px;
 
+  }
 
+  .sidebar-compact.sidebar-fixed .sidebar {
 
+    width: 150px;
 
+  }
 
+  .sidebar-compact .sidebar-minimizer {
 
+    display: none;
 
+  }
 
+  .sidebar-minimized .sidebar {
 
+    -ms-flex: 0 0 50px;
 
+    flex: 0 0 50px;
 
+  }
 
+  .sidebar-minimized.sidebar-fixed .sidebar {
 
+    width: 50px;
 
+  }
 
+  .sidebar-off-canvas .sidebar {
 
+    position: fixed;
 
+    z-index: 1019;
 
+    height: 100%;
 
+  }
 
+  .sidebar-off-canvas .app-header + .app-body .sidebar {
 
+    height: calc(100vh - 55px);
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-compact .sidebar {
 
+    margin-left: -150px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-minimized .sidebar {
 
+    margin-left: -50px;
 
+  }
 
+  html[dir="rtl"] .sidebar-compact .sidebar {
 
+    margin-right: -150px;
 
+  }
 
+  html[dir="rtl"] .sidebar-minimized .sidebar {
 
+    margin-right: -50px;
 
+  }
 
+  .aside-menu-fixed .aside-menu {
 
+    position: fixed;
 
+    height: 100%;
 
+  }
 
+  .aside-menu-fixed .aside-menu .tab-content {
 
+    height: calc(100vh - 2.375rem - 55px);
 
+  }
 
+  .aside-menu-fixed .app-header + .app-body .aside-menu {
 
+    height: calc(100vh - 55px);
 
+  }
 
+  .aside-menu-off-canvas .aside-menu {
 
+    position: fixed;
 
+    z-index: 1019;
 
+    height: 100%;
 
+  }
 
+  .aside-menu-off-canvas .app-header + .app-body .aside-menu {
 
+    height: calc(100vh - 55px);
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-fixed .aside-menu,
 
+  html:not([dir="rtl"]) .aside-menu-off-canvas .aside-menu {
 
+    right: 0;
 
+  }
 
+  html[dir="rtl"] .aside-menu-fixed .aside-menu,
 
+  html[dir="rtl"] .aside-menu-off-canvas .aside-menu {
 
+    left: 0;
 
+  }
 
+}
 
+
 
+.breadcrumb-fixed .main {
 
+  padding-top: 3.875rem;
 
+}
 
+
 
+.breadcrumb-fixed .breadcrumb {
 
+  position: fixed;
 
+  top: 55px;
 
+  right: 0;
 
+  left: 0;
 
+  z-index: 1017;
 
+}
 
+
 
+html:not([dir="rtl"]) .sidebar-show .sidebar,
 
+html:not([dir="rtl"]) .sidebar-show .sidebar {
 
+  margin-left: 0;
 
+}
 
+
 
+html:not([dir="rtl"]) .aside-menu-show .aside-menu,
 
+html:not([dir="rtl"]) .aside-menu-show .aside-menu {
 
+  margin-right: 0;
 
+}
 
+
 
+html[dir="rtl"] .sidebar-show .sidebar,
 
+html[dir="rtl"] .sidebar-show .sidebar {
 
+  margin-right: 0;
 
+}
 
+
 
+html[dir="rtl"] .aside-menu-show .aside-menu,
 
+html[dir="rtl"] .aside-menu-show .aside-menu {
 
+  margin-left: 0;
 
+}
 
+
 
+@-webkit-keyframes opacity {
 
+  0% {
 
+    opacity: 0;
 
+  }
 
+  100% {
 
+    opacity: 1;
 
+  }
 
+}
 
+
 
+@keyframes opacity {
 
+  0% {
 
+    opacity: 0;
 
+  }
 
+  100% {
 
+    opacity: 1;
 
+  }
 
+}
 
+
 
+@media (max-width: 575.98px) {
 
+  .sidebar-show .main,
 
+  .aside-menu-show .main {
 
+    position: relative;
 
+  }
 
+  .sidebar-show .main::before,
 
+  .aside-menu-show .main::before {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    z-index: 1018;
 
+    width: 100%;
 
+    height: 100%;
 
+    content: "";
 
+    background: rgba(0, 0, 0, 0.7);
 
+    -webkit-animation: opacity 0.25s;
 
+    animation: opacity 0.25s;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  html:not([dir="rtl"]) .sidebar-sm-show .sidebar,
 
+  html:not([dir="rtl"]) .sidebar-show .sidebar {
 
+    margin-left: 0;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-left: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) and (max-width: 991.98px) {
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) and (min-width: 992px) {
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    left: 150px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    left: 50px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
 
+  html:not([dir="rtl"]) .aside-menu-sm-show .aside-menu {
 
+    margin-right: 0;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .app-footer {
 
+    margin-right: 250px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .aside-menu-sm-show.breadcrumb-fixed .breadcrumb {
 
+    right: 250px;
 
+  }
 
+  html[dir="rtl"] .sidebar-sm-show .sidebar,
 
+  html[dir="rtl"] .sidebar-show .sidebar {
 
+    margin-right: 0;
 
+  }
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-right: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) and (max-width: 991.98px) {
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) and (min-width: 992px) {
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    right: 150px;
 
+  }
 
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    right: 50px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show .aside-menu,
 
+  html[dir="rtl"] .aside-menu-sm-show .aside-menu {
 
+    margin-left: 0;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .app-footer {
 
+    margin-left: 250px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .aside-menu-sm-show.breadcrumb-fixed .breadcrumb {
 
+    left: 250px;
 
+  }
 
+  @-webkit-keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+  @keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  html:not([dir="rtl"]) .sidebar-md-show .sidebar,
 
+  html:not([dir="rtl"]) .sidebar-show .sidebar {
 
+    margin-left: 0;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-left: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) and (max-width: 991.98px) {
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) and (min-width: 992px) {
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    left: 150px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    left: 50px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
 
+  html:not([dir="rtl"]) .aside-menu-md-show .aside-menu {
 
+    margin-right: 0;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .app-footer {
 
+    margin-right: 250px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .aside-menu-md-show.breadcrumb-fixed .breadcrumb {
 
+    right: 250px;
 
+  }
 
+  html[dir="rtl"] .sidebar-md-show .sidebar,
 
+  html[dir="rtl"] .sidebar-show .sidebar {
 
+    margin-right: 0;
 
+  }
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-right: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) and (max-width: 991.98px) {
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) and (min-width: 992px) {
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    right: 150px;
 
+  }
 
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    right: 50px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show .aside-menu,
 
+  html[dir="rtl"] .aside-menu-md-show .aside-menu {
 
+    margin-left: 0;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .app-footer {
 
+    margin-left: 250px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .aside-menu-md-show.breadcrumb-fixed .breadcrumb {
 
+    left: 250px;
 
+  }
 
+  @-webkit-keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+  @keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  html:not([dir="rtl"]) .sidebar-lg-show .sidebar,
 
+  html:not([dir="rtl"]) .sidebar-show .sidebar {
 
+    margin-left: 0;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-left: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) and (max-width: 991.98px) {
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) and (min-width: 992px) {
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    left: 150px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    left: 50px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
 
+  html:not([dir="rtl"]) .aside-menu-lg-show .aside-menu {
 
+    margin-right: 0;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .app-footer {
 
+    margin-right: 250px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .aside-menu-lg-show.breadcrumb-fixed .breadcrumb {
 
+    right: 250px;
 
+  }
 
+  html[dir="rtl"] .sidebar-lg-show .sidebar,
 
+  html[dir="rtl"] .sidebar-show .sidebar {
 
+    margin-right: 0;
 
+  }
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-right: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) and (max-width: 991.98px) {
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) and (min-width: 992px) {
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    right: 150px;
 
+  }
 
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    right: 50px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show .aside-menu,
 
+  html[dir="rtl"] .aside-menu-lg-show .aside-menu {
 
+    margin-left: 0;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .app-footer {
 
+    margin-left: 250px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .aside-menu-lg-show.breadcrumb-fixed .breadcrumb {
 
+    left: 250px;
 
+  }
 
+  @-webkit-keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+  @keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  html:not([dir="rtl"]) .sidebar-xl-show .sidebar,
 
+  html:not([dir="rtl"]) .sidebar-show .sidebar {
 
+    margin-left: 0;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-left: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) and (max-width: 991.98px) {
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) and (min-width: 992px) {
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-left: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    left: 200px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    left: 150px;
 
+  }
 
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    left: 50px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
 
+  html:not([dir="rtl"]) .aside-menu-xl-show .aside-menu {
 
+    margin-right: 0;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .main,
 
+  html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .app-footer {
 
+    margin-right: 250px;
 
+  }
 
+  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html:not([dir="rtl"]) .aside-menu-xl-show.breadcrumb-fixed .breadcrumb {
 
+    right: 250px;
 
+  }
 
+  html[dir="rtl"] .sidebar-xl-show .sidebar,
 
+  html[dir="rtl"] .sidebar-show .sidebar {
 
+    margin-right: 0;
 
+  }
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
 
+    margin-right: 150px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) and (max-width: 991.98px) {
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 200px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) and (min-width: 992px) {
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
 
+  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
 
+    margin-right: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
 
+    right: 200px;
 
+  }
 
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
 
+    right: 150px;
 
+  }
 
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
 
+  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
 
+    right: 50px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show .aside-menu,
 
+  html[dir="rtl"] .aside-menu-xl-show .aside-menu {
 
+    margin-left: 0;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
 
+  html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .main,
 
+  html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .app-footer {
 
+    margin-left: 250px;
 
+  }
 
+  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
 
+  html[dir="rtl"] .aside-menu-xl-show.breadcrumb-fixed .breadcrumb {
 
+    left: 250px;
 
+  }
 
+  @-webkit-keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+  @keyframes opacity {
 
+    0% {
 
+      opacity: 0;
 
+    }
 
+    100% {
 
+      opacity: 1;
 
+    }
 
+  }
 
+}
 
+
 
+.footer-fixed .app-footer {
 
+  position: fixed;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: 1020;
 
+  height: 50px;
 
+}
 
+
 
+.footer-fixed .app-body {
 
+  margin-bottom: 50px;
 
+}
 
+
 
+.app-header,
 
+.app-footer,
 
+.sidebar,
 
+.main,
 
+.aside-menu {
 
+  transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s;
 
+  transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s, -ms-flex 0.25s;
 
+}
 
+
 
+.sidebar-nav {
 
+  transition: width 0.25s;
 
+}
 
+
 
+.breadcrumb {
 
+  transition: left 0.25s, right 0.25s, width 0.25s;
 
+}
 
+
 
+@media (max-width: 991.98px) {
 
+  .app-header {
 
+    position: fixed;
 
+    z-index: 1020;
 
+    width: 100%;
 
+    text-align: center;
 
+    background-color: #fff;
 
+  }
 
+  .app-header .navbar-toggler {
 
+    color: #fff;
 
+  }
 
+  .app-header .navbar-brand {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 50%;
 
+    margin-left: -77.5px;
 
+  }
 
+  .app-body {
 
+    margin-top: 55px;
 
+  }
 
+  .sidebar {
 
+    position: fixed;
 
+    z-index: 1019;
 
+    width: 200px;
 
+    height: calc(100vh - 55px);
 
+  }
 
+  .sidebar-minimizer {
 
+    display: none;
 
+  }
 
+  .aside-menu {
 
+    position: fixed;
 
+    height: 100%;
 
+  }
 
+}
 
+
 
+hr.transparent {
 
+  border-top: 1px solid transparent;
 
+}
 
+
 
+.bg-primary,
 
+.bg-success,
 
+.bg-info,
 
+.bg-warning,
 
+.bg-danger,
 
+.bg-dark {
 
+  color: #fff;
 
+}
 
+
 
+.bg-facebook {
 
+  background-color: #3b5998 !important;
 
+}
 
+
 
+a.bg-facebook:hover, a.bg-facebook:focus,
 
+button.bg-facebook:hover,
 
+button.bg-facebook:focus {
 
+  background-color: #2d4373 !important;
 
+}
 
+
 
+.bg-twitter {
 
+  background-color: #00aced !important;
 
+}
 
+
 
+a.bg-twitter:hover, a.bg-twitter:focus,
 
+button.bg-twitter:hover,
 
+button.bg-twitter:focus {
 
+  background-color: #0087ba !important;
 
+}
 
+
 
+.bg-linkedin {
 
+  background-color: #4875b4 !important;
 
+}
 
+
 
+a.bg-linkedin:hover, a.bg-linkedin:focus,
 
+button.bg-linkedin:hover,
 
+button.bg-linkedin:focus {
 
+  background-color: #395d90 !important;
 
+}
 
+
 
+.bg-google-plus {
 
+  background-color: #d34836 !important;
 
+}
 
+
 
+a.bg-google-plus:hover, a.bg-google-plus:focus,
 
+button.bg-google-plus:hover,
 
+button.bg-google-plus:focus {
 
+  background-color: #b03626 !important;
 
+}
 
+
 
+.bg-flickr {
 
+  background-color: #ff0084 !important;
 
+}
 
+
 
+a.bg-flickr:hover, a.bg-flickr:focus,
 
+button.bg-flickr:hover,
 
+button.bg-flickr:focus {
 
+  background-color: #cc006a !important;
 
+}
 
+
 
+.bg-tumblr {
 
+  background-color: #32506d !important;
 
+}
 
+
 
+a.bg-tumblr:hover, a.bg-tumblr:focus,
 
+button.bg-tumblr:hover,
 
+button.bg-tumblr:focus {
 
+  background-color: #22364a !important;
 
+}
 
+
 
+.bg-xing {
 
+  background-color: #026466 !important;
 
+}
 
+
 
+a.bg-xing:hover, a.bg-xing:focus,
 
+button.bg-xing:hover,
 
+button.bg-xing:focus {
 
+  background-color: #013334 !important;
 
+}
 
+
 
+.bg-github {
 
+  background-color: #4183c4 !important;
 
+}
 
+
 
+a.bg-github:hover, a.bg-github:focus,
 
+button.bg-github:hover,
 
+button.bg-github:focus {
 
+  background-color: #3269a0 !important;
 
+}
 
+
 
+.bg-html5 {
 
+  background-color: #e34f26 !important;
 
+}
 
+
 
+a.bg-html5:hover, a.bg-html5:focus,
 
+button.bg-html5:hover,
 
+button.bg-html5:focus {
 
+  background-color: #be3c18 !important;
 
+}
 
+
 
+.bg-openid {
 
+  background-color: #f78c40 !important;
 
+}
 
+
 
+a.bg-openid:hover, a.bg-openid:focus,
 
+button.bg-openid:hover,
 
+button.bg-openid:focus {
 
+  background-color: #f56f0f !important;
 
+}
 
+
 
+.bg-stack-overflow {
 
+  background-color: #fe7a15 !important;
 
+}
 
+
 
+a.bg-stack-overflow:hover, a.bg-stack-overflow:focus,
 
+button.bg-stack-overflow:hover,
 
+button.bg-stack-overflow:focus {
 
+  background-color: #df6101 !important;
 
+}
 
+
 
+.bg-youtube {
 
+  background-color: #b00 !important;
 
+}
 
+
 
+a.bg-youtube:hover, a.bg-youtube:focus,
 
+button.bg-youtube:hover,
 
+button.bg-youtube:focus {
 
+  background-color: #880000 !important;
 
+}
 
+
 
+.bg-css3 {
 
+  background-color: #0170ba !important;
 
+}
 
+
 
+a.bg-css3:hover, a.bg-css3:focus,
 
+button.bg-css3:hover,
 
+button.bg-css3:focus {
 
+  background-color: #015187 !important;
 
+}
 
+
 
+.bg-dribbble {
 
+  background-color: #ea4c89 !important;
 
+}
 
+
 
+a.bg-dribbble:hover, a.bg-dribbble:focus,
 
+button.bg-dribbble:hover,
 
+button.bg-dribbble:focus {
 
+  background-color: #e51e6b !important;
 
+}
 
+
 
+.bg-instagram {
 
+  background-color: #517fa4 !important;
 
+}
 
+
 
+a.bg-instagram:hover, a.bg-instagram:focus,
 
+button.bg-instagram:hover,
 
+button.bg-instagram:focus {
 
+  background-color: #406582 !important;
 
+}
 
+
 
+.bg-pinterest {
 
+  background-color: #cb2027 !important;
 
+}
 
+
 
+a.bg-pinterest:hover, a.bg-pinterest:focus,
 
+button.bg-pinterest:hover,
 
+button.bg-pinterest:focus {
 
+  background-color: #9f191f !important;
 
+}
 
+
 
+.bg-vk {
 
+  background-color: #45668e !important;
 
+}
 
+
 
+a.bg-vk:hover, a.bg-vk:focus,
 
+button.bg-vk:hover,
 
+button.bg-vk:focus {
 
+  background-color: #344d6c !important;
 
+}
 
+
 
+.bg-yahoo {
 
+  background-color: #400191 !important;
 
+}
 
+
 
+a.bg-yahoo:hover, a.bg-yahoo:focus,
 
+button.bg-yahoo:hover,
 
+button.bg-yahoo:focus {
 
+  background-color: #2a015e !important;
 
+}
 
+
 
+.bg-behance {
 
+  background-color: #1769ff !important;
 
+}
 
+
 
+a.bg-behance:hover, a.bg-behance:focus,
 
+button.bg-behance:hover,
 
+button.bg-behance:focus {
 
+  background-color: #0050e3 !important;
 
+}
 
+
 
+.bg-dropbox {
 
+  background-color: #007ee5 !important;
 
+}
 
+
 
+a.bg-dropbox:hover, a.bg-dropbox:focus,
 
+button.bg-dropbox:hover,
 
+button.bg-dropbox:focus {
 
+  background-color: #0062b2 !important;
 
+}
 
+
 
+.bg-reddit {
 
+  background-color: #ff4500 !important;
 
+}
 
+
 
+a.bg-reddit:hover, a.bg-reddit:focus,
 
+button.bg-reddit:hover,
 
+button.bg-reddit:focus {
 
+  background-color: #cc3700 !important;
 
+}
 
+
 
+.bg-spotify {
 
+  background-color: #7ab800 !important;
 
+}
 
+
 
+a.bg-spotify:hover, a.bg-spotify:focus,
 
+button.bg-spotify:hover,
 
+button.bg-spotify:focus {
 
+  background-color: #588500 !important;
 
+}
 
+
 
+.bg-vine {
 
+  background-color: #00bf8f !important;
 
+}
 
+
 
+a.bg-vine:hover, a.bg-vine:focus,
 
+button.bg-vine:hover,
 
+button.bg-vine:focus {
 
+  background-color: #008c69 !important;
 
+}
 
+
 
+.bg-foursquare {
 
+  background-color: #1073af !important;
 
+}
 
+
 
+a.bg-foursquare:hover, a.bg-foursquare:focus,
 
+button.bg-foursquare:hover,
 
+button.bg-foursquare:focus {
 
+  background-color: #0c5480 !important;
 
+}
 
+
 
+.bg-vimeo {
 
+  background-color: #aad450 !important;
 
+}
 
+
 
+a.bg-vimeo:hover, a.bg-vimeo:focus,
 
+button.bg-vimeo:hover,
 
+button.bg-vimeo:focus {
 
+  background-color: #93c130 !important;
 
+}
 
+
 
+.bg-blue {
 
+  background-color: #20a8d8 !important;
 
+}
 
+
 
+a.bg-blue:hover, a.bg-blue:focus,
 
+button.bg-blue:hover,
 
+button.bg-blue:focus {
 
+  background-color: #1985ac !important;
 
+}
 
+
 
+.bg-indigo {
 
+  background-color: #6610f2 !important;
 
+}
 
+
 
+a.bg-indigo:hover, a.bg-indigo:focus,
 
+button.bg-indigo:hover,
 
+button.bg-indigo:focus {
 
+  background-color: #510bc4 !important;
 
+}
 
+
 
+.bg-purple {
 
+  background-color: #6f42c1 !important;
 
+}
 
+
 
+a.bg-purple:hover, a.bg-purple:focus,
 
+button.bg-purple:hover,
 
+button.bg-purple:focus {
 
+  background-color: #59339d !important;
 
+}
 
+
 
+.bg-pink {
 
+  background-color: #e83e8c !important;
 
+}
 
+
 
+a.bg-pink:hover, a.bg-pink:focus,
 
+button.bg-pink:hover,
 
+button.bg-pink:focus {
 
+  background-color: #d91a72 !important;
 
+}
 
+
 
+.bg-red {
 
+  background-color: #f86c6b !important;
 
+}
 
+
 
+a.bg-red:hover, a.bg-red:focus,
 
+button.bg-red:hover,
 
+button.bg-red:focus {
 
+  background-color: #f63c3a !important;
 
+}
 
+
 
+.bg-orange {
 
+  background-color: #f8cb00 !important;
 
+}
 
+
 
+a.bg-orange:hover, a.bg-orange:focus,
 
+button.bg-orange:hover,
 
+button.bg-orange:focus {
 
+  background-color: #c5a100 !important;
 
+}
 
+
 
+.bg-yellow {
 
+  background-color: #ffc107 !important;
 
+}
 
+
 
+a.bg-yellow:hover, a.bg-yellow:focus,
 
+button.bg-yellow:hover,
 
+button.bg-yellow:focus {
 
+  background-color: #d39e00 !important;
 
+}
 
+
 
+.bg-green {
 
+  background-color: #4dbd74 !important;
 
+}
 
+
 
+a.bg-green:hover, a.bg-green:focus,
 
+button.bg-green:hover,
 
+button.bg-green:focus {
 
+  background-color: #3a9d5d !important;
 
+}
 
+
 
+.bg-teal {
 
+  background-color: #20c997 !important;
 
+}
 
+
 
+a.bg-teal:hover, a.bg-teal:focus,
 
+button.bg-teal:hover,
 
+button.bg-teal:focus {
 
+  background-color: #199d76 !important;
 
+}
 
+
 
+.bg-cyan {
 
+  background-color: #17a2b8 !important;
 
+}
 
+
 
+a.bg-cyan:hover, a.bg-cyan:focus,
 
+button.bg-cyan:hover,
 
+button.bg-cyan:focus {
 
+  background-color: #117a8b !important;
 
+}
 
+
 
+.bg-white {
 
+  background-color: #fff !important;
 
+}
 
+
 
+a.bg-white:hover, a.bg-white:focus,
 
+button.bg-white:hover,
 
+button.bg-white:focus {
 
+  background-color: #e6e6e6 !important;
 
+}
 
+
 
+.bg-gray {
 
+  background-color: #73818f !important;
 
+}
 
+
 
+a.bg-gray:hover, a.bg-gray:focus,
 
+button.bg-gray:hover,
 
+button.bg-gray:focus {
 
+  background-color: #5c6873 !important;
 
+}
 
+
 
+.bg-gray-dark {
 
+  background-color: #2f353a !important;
 
+}
 
+
 
+a.bg-gray-dark:hover, a.bg-gray-dark:focus,
 
+button.bg-gray-dark:hover,
 
+button.bg-gray-dark:focus {
 
+  background-color: #181b1e !important;
 
+}
 
+
 
+.bg-light-blue {
 
+  background-color: #63c2de !important;
 
+}
 
+
 
+a.bg-light-blue:hover, a.bg-light-blue:focus,
 
+button.bg-light-blue:hover,
 
+button.bg-light-blue:focus {
 
+  background-color: #39b2d5 !important;
 
+}
 
+
 
+.bg-gray-100 {
 
+  background-color: #f0f3f5 !important;
 
+}
 
+
 
+a.bg-gray-100:hover, a.bg-gray-100:focus,
 
+button.bg-gray-100:hover,
 
+button.bg-gray-100:focus {
 
+  background-color: #d1dbe1 !important;
 
+}
 
+
 
+.bg-gray-200 {
 
+  background-color: #e4e7ea !important;
 
+}
 
+
 
+a.bg-gray-200:hover, a.bg-gray-200:focus,
 
+button.bg-gray-200:hover,
 
+button.bg-gray-200:focus {
 
+  background-color: #c7ced4 !important;
 
+}
 
+
 
+.bg-gray-300 {
 
+  background-color: #c8ced3 !important;
 
+}
 
+
 
+a.bg-gray-300:hover, a.bg-gray-300:focus,
 
+button.bg-gray-300:hover,
 
+button.bg-gray-300:focus {
 
+  background-color: #acb5bc !important;
 
+}
 
+
 
+.bg-gray-400 {
 
+  background-color: #acb4bc !important;
 
+}
 
+
 
+a.bg-gray-400:hover, a.bg-gray-400:focus,
 
+button.bg-gray-400:hover,
 
+button.bg-gray-400:focus {
 
+  background-color: #909ba5 !important;
 
+}
 
+
 
+.bg-gray-500 {
 
+  background-color: #8f9ba6 !important;
 
+}
 
+
 
+a.bg-gray-500:hover, a.bg-gray-500:focus,
 
+button.bg-gray-500:hover,
 
+button.bg-gray-500:focus {
 
+  background-color: #73828f !important;
 
+}
 
+
 
+.bg-gray-600 {
 
+  background-color: #73818f !important;
 
+}
 
+
 
+a.bg-gray-600:hover, a.bg-gray-600:focus,
 
+button.bg-gray-600:hover,
 
+button.bg-gray-600:focus {
 
+  background-color: #5c6873 !important;
 
+}
 
+
 
+.bg-gray-700 {
 
+  background-color: #5c6873 !important;
 
+}
 
+
 
+a.bg-gray-700:hover, a.bg-gray-700:focus,
 
+button.bg-gray-700:hover,
 
+button.bg-gray-700:focus {
 
+  background-color: #454e57 !important;
 
+}
 
+
 
+.bg-gray-800 {
 
+  background-color: #2f353a !important;
 
+}
 
+
 
+a.bg-gray-800:hover, a.bg-gray-800:focus,
 
+button.bg-gray-800:hover,
 
+button.bg-gray-800:focus {
 
+  background-color: #181b1e !important;
 
+}
 
+
 
+.bg-gray-900 {
 
+  background-color: #23282c !important;
 
+}
 
+
 
+a.bg-gray-900:hover, a.bg-gray-900:focus,
 
+button.bg-gray-900:hover,
 
+button.bg-gray-900:focus {
 
+  background-color: #0c0e10 !important;
 
+}
 
+
 
+.bg-box {
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
+  -ms-flex-pack: center;
 
+  justify-content: center;
 
+  width: 2.5rem;
 
+  height: 2.5rem;
 
+}
 
+
 
+.b-a-0 {
 
+  border: 0 !important;
 
+}
 
+
 
+.b-t-0 {
 
+  border-top: 0 !important;
 
+}
 
+
 
+.b-r-0 {
 
+  border-right: 0 !important;
 
+}
 
+
 
+.b-b-0 {
 
+  border-bottom: 0 !important;
 
+}
 
+
 
+.b-l-0 {
 
+  border-left: 0 !important;
 
+}
 
+
 
+.b-a-1 {
 
+  border: 1px solid #c8ced3;
 
+}
 
+
 
+.b-t-1 {
 
+  border-top: 1px solid #c8ced3;
 
+}
 
+
 
+.b-r-1 {
 
+  border-right: 1px solid #c8ced3;
 
+}
 
+
 
+.b-b-1 {
 
+  border-bottom: 1px solid #c8ced3;
 
+}
 
+
 
+.b-l-1 {
 
+  border-left: 1px solid #c8ced3;
 
+}
 
+
 
+.b-a-2 {
 
+  border: 2px solid #c8ced3;
 
+}
 
+
 
+.b-t-2 {
 
+  border-top: 2px solid #c8ced3;
 
+}
 
+
 
+.b-r-2 {
 
+  border-right: 2px solid #c8ced3;
 
+}
 
+
 
+.b-b-2 {
 
+  border-bottom: 2px solid #c8ced3;
 
+}
 
+
 
+.b-l-2 {
 
+  border-left: 2px solid #c8ced3;
 
+}
 
+
 
+@media (max-width: 575.98px) {
 
+  .d-down-none {
 
+    display: none !important;
 
+  }
 
+}
 
+
 
+@media (max-width: 767.98px) {
 
+  .d-sm-down-none {
 
+    display: none !important;
 
+  }
 
+}
 
+
 
+@media (max-width: 991.98px) {
 
+  .d-md-down-none {
 
+    display: none !important;
 
+  }
 
+}
 
+
 
+@media (max-width: 1199.98px) {
 
+  .d-lg-down-none {
 
+    display: none !important;
 
+  }
 
+}
 
+
 
+.d-xl-down-none {
 
+  display: none !important;
 
+}
 
+
 
+body {
 
+  -moz-osx-font-smoothing: grayscale;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+
 
+.font-xs {
 
+  font-size: .75rem !important;
 
+}
 
+
 
+.font-sm {
 
+  font-size: .85rem !important;
 
+}
 
+
 
+.font-lg {
 
+  font-size: 1rem !important;
 
+}
 
+
 
+.font-xl {
 
+  font-size: 1.25rem !important;
 
+}
 
+
 
+.font-2xl {
 
+  font-size: 1.5rem !important;
 
+}
 
+
 
+.font-3xl {
 
+  font-size: 1.75rem !important;
 
+}
 
+
 
+.font-4xl {
 
+  font-size: 2rem !important;
 
+}
 
+
 
+.font-5xl {
 
+  font-size: 2.5rem !important;
 
+}
 
+
 
+.text-value {
 
+  font-size: 1.3125rem;
 
+  font-weight: 600;
 
+}
 
+
 
+.text-value-sm {
 
+  font-size: 1.09375rem;
 
+  font-weight: 600;
 
+}
 
+
 
+.text-value-lg {
 
+  font-size: 1.53125rem;
 
+  font-weight: 600;
 
+}
 
+
 
+.text-white .text-muted {
 
+  color: rgba(255, 255, 255, 0.6) !important;
 
+}
 
+
 
+*[dir="rtl"] {
 
+  direction: rtl;
 
+  unicode-bidi: embed;
 
+}
 
+
 
+*[dir="rtl"] body {
 
+  text-align: right;
 
+}
 
+
 
+*[dir="rtl"] .dropdown-item {
 
+  text-align: right;
 
+}
 
+
 
+*[dir="rtl"] .dropdown-item i {
 
+  margin-right: -10px;
 
+  margin-left: 10px;
 
+}
 
+
 
+*[dir="rtl"] .dropdown-item .badge {
 
+  right: auto;
 
+  left: 10px;
 
+}
 
+
 
+*[dir="rtl"] .float-left {
 
+  float: right !important;
 
+}
 
+
 
+*[dir="rtl"] .float-right {
 
+  float: left !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-0,
 
+*[dir="rtl"] .mx-0 {
 
+  margin-right: 0 !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-0,
 
+*[dir="rtl"] .mx-0 {
 
+  margin-right: 0 !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-1,
 
+*[dir="rtl"] .mx-1 {
 
+  margin-right: 0 !important;
 
+  margin-left: 0.25rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-1,
 
+*[dir="rtl"] .mx-1 {
 
+  margin-right: 0.25rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-2,
 
+*[dir="rtl"] .mx-2 {
 
+  margin-right: 0 !important;
 
+  margin-left: 0.5rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-2,
 
+*[dir="rtl"] .mx-2 {
 
+  margin-right: 0.5rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-3,
 
+*[dir="rtl"] .mx-3 {
 
+  margin-right: 0 !important;
 
+  margin-left: 1rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-3,
 
+*[dir="rtl"] .mx-3 {
 
+  margin-right: 1rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-4,
 
+*[dir="rtl"] .mx-4 {
 
+  margin-right: 0 !important;
 
+  margin-left: 1.5rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-4,
 
+*[dir="rtl"] .mx-4 {
 
+  margin-right: 1.5rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-5,
 
+*[dir="rtl"] .mx-5 {
 
+  margin-right: 0 !important;
 
+  margin-left: 3rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-5,
 
+*[dir="rtl"] .mx-5 {
 
+  margin-right: 3rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pr-0,
 
+*[dir="rtl"] .px-0 {
 
+  padding-right: 0 !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pl-0,
 
+*[dir="rtl"] .px-0 {
 
+  padding-right: 0 !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pr-1,
 
+*[dir="rtl"] .px-1 {
 
+  padding-right: 0 !important;
 
+  padding-left: 0.25rem !important;
 
+}
 
+
 
+*[dir="rtl"] .pl-1,
 
+*[dir="rtl"] .px-1 {
 
+  padding-right: 0.25rem !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pr-2,
 
+*[dir="rtl"] .px-2 {
 
+  padding-right: 0 !important;
 
+  padding-left: 0.5rem !important;
 
+}
 
+
 
+*[dir="rtl"] .pl-2,
 
+*[dir="rtl"] .px-2 {
 
+  padding-right: 0.5rem !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pr-3,
 
+*[dir="rtl"] .px-3 {
 
+  padding-right: 0 !important;
 
+  padding-left: 1rem !important;
 
+}
 
+
 
+*[dir="rtl"] .pl-3,
 
+*[dir="rtl"] .px-3 {
 
+  padding-right: 1rem !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pr-4,
 
+*[dir="rtl"] .px-4 {
 
+  padding-right: 0 !important;
 
+  padding-left: 1.5rem !important;
 
+}
 
+
 
+*[dir="rtl"] .pl-4,
 
+*[dir="rtl"] .px-4 {
 
+  padding-right: 1.5rem !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .pr-5,
 
+*[dir="rtl"] .px-5 {
 
+  padding-right: 0 !important;
 
+  padding-left: 3rem !important;
 
+}
 
+
 
+*[dir="rtl"] .pl-5,
 
+*[dir="rtl"] .px-5 {
 
+  padding-right: 3rem !important;
 
+  padding-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-n1,
 
+*[dir="rtl"] .mx-n1 {
 
+  margin-right: 0 !important;
 
+  margin-left: -0.25rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-n1,
 
+*[dir="rtl"] .mx-n1 {
 
+  margin-right: -0.25rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-n2,
 
+*[dir="rtl"] .mx-n2 {
 
+  margin-right: 0 !important;
 
+  margin-left: -0.5rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-n2,
 
+*[dir="rtl"] .mx-n2 {
 
+  margin-right: -0.5rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-n3,
 
+*[dir="rtl"] .mx-n3 {
 
+  margin-right: 0 !important;
 
+  margin-left: -1rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-n3,
 
+*[dir="rtl"] .mx-n3 {
 
+  margin-right: -1rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-n4,
 
+*[dir="rtl"] .mx-n4 {
 
+  margin-right: 0 !important;
 
+  margin-left: -1.5rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-n4,
 
+*[dir="rtl"] .mx-n4 {
 
+  margin-right: -1.5rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-n5,
 
+*[dir="rtl"] .mx-n5 {
 
+  margin-right: 0 !important;
 
+  margin-left: -3rem !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-n5,
 
+*[dir="rtl"] .mx-n5 {
 
+  margin-right: -3rem !important;
 
+  margin-left: 0 !important;
 
+}
 
+
 
+*[dir="rtl"] .mr-auto,
 
+*[dir="rtl"] .mx-auto {
 
+  margin-left: auto !important;
 
+}
 
+
 
+*[dir="rtl"] .ml-auto,
 
+*[dir="rtl"] .mx-auto {
 
+  margin-right: auto !important;
 
+}
 
+
 
+@media (min-width: 576px) {
 
+  *[dir="rtl"] .mr-sm-0,
 
+  *[dir="rtl"] .mx-sm-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-0,
 
+  *[dir="rtl"] .mx-sm-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-1,
 
+  *[dir="rtl"] .mx-sm-1 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-1,
 
+  *[dir="rtl"] .mx-sm-1 {
 
+    margin-right: 0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-2,
 
+  *[dir="rtl"] .mx-sm-2 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-2,
 
+  *[dir="rtl"] .mx-sm-2 {
 
+    margin-right: 0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-3,
 
+  *[dir="rtl"] .mx-sm-3 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-3,
 
+  *[dir="rtl"] .mx-sm-3 {
 
+    margin-right: 1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-4,
 
+  *[dir="rtl"] .mx-sm-4 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-4,
 
+  *[dir="rtl"] .mx-sm-4 {
 
+    margin-right: 1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-5,
 
+  *[dir="rtl"] .mx-sm-5 {
 
+    margin-right: 0 !important;
 
+    margin-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-5,
 
+  *[dir="rtl"] .mx-sm-5 {
 
+    margin-right: 3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-sm-0,
 
+  *[dir="rtl"] .px-sm-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pl-sm-0,
 
+  *[dir="rtl"] .px-sm-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-sm-1,
 
+  *[dir="rtl"] .px-sm-1 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-sm-1,
 
+  *[dir="rtl"] .px-sm-1 {
 
+    padding-right: 0.25rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-sm-2,
 
+  *[dir="rtl"] .px-sm-2 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-sm-2,
 
+  *[dir="rtl"] .px-sm-2 {
 
+    padding-right: 0.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-sm-3,
 
+  *[dir="rtl"] .px-sm-3 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-sm-3,
 
+  *[dir="rtl"] .px-sm-3 {
 
+    padding-right: 1rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-sm-4,
 
+  *[dir="rtl"] .px-sm-4 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-sm-4,
 
+  *[dir="rtl"] .px-sm-4 {
 
+    padding-right: 1.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-sm-5,
 
+  *[dir="rtl"] .px-sm-5 {
 
+    padding-right: 0 !important;
 
+    padding-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-sm-5,
 
+  *[dir="rtl"] .px-sm-5 {
 
+    padding-right: 3rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-n1,
 
+  *[dir="rtl"] .mx-sm-n1 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-n1,
 
+  *[dir="rtl"] .mx-sm-n1 {
 
+    margin-right: -0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-n2,
 
+  *[dir="rtl"] .mx-sm-n2 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-n2,
 
+  *[dir="rtl"] .mx-sm-n2 {
 
+    margin-right: -0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-n3,
 
+  *[dir="rtl"] .mx-sm-n3 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-n3,
 
+  *[dir="rtl"] .mx-sm-n3 {
 
+    margin-right: -1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-n4,
 
+  *[dir="rtl"] .mx-sm-n4 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-n4,
 
+  *[dir="rtl"] .mx-sm-n4 {
 
+    margin-right: -1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-n5,
 
+  *[dir="rtl"] .mx-sm-n5 {
 
+    margin-right: 0 !important;
 
+    margin-left: -3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-n5,
 
+  *[dir="rtl"] .mx-sm-n5 {
 
+    margin-right: -3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-sm-auto,
 
+  *[dir="rtl"] .mx-sm-auto {
 
+    margin-left: auto !important;
 
+  }
 
+  *[dir="rtl"] .ml-sm-auto,
 
+  *[dir="rtl"] .mx-sm-auto {
 
+    margin-right: auto !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 768px) {
 
+  *[dir="rtl"] .mr-md-0,
 
+  *[dir="rtl"] .mx-md-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-0,
 
+  *[dir="rtl"] .mx-md-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-1,
 
+  *[dir="rtl"] .mx-md-1 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-1,
 
+  *[dir="rtl"] .mx-md-1 {
 
+    margin-right: 0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-2,
 
+  *[dir="rtl"] .mx-md-2 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-2,
 
+  *[dir="rtl"] .mx-md-2 {
 
+    margin-right: 0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-3,
 
+  *[dir="rtl"] .mx-md-3 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-3,
 
+  *[dir="rtl"] .mx-md-3 {
 
+    margin-right: 1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-4,
 
+  *[dir="rtl"] .mx-md-4 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-4,
 
+  *[dir="rtl"] .mx-md-4 {
 
+    margin-right: 1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-5,
 
+  *[dir="rtl"] .mx-md-5 {
 
+    margin-right: 0 !important;
 
+    margin-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-5,
 
+  *[dir="rtl"] .mx-md-5 {
 
+    margin-right: 3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-md-0,
 
+  *[dir="rtl"] .px-md-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pl-md-0,
 
+  *[dir="rtl"] .px-md-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-md-1,
 
+  *[dir="rtl"] .px-md-1 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-md-1,
 
+  *[dir="rtl"] .px-md-1 {
 
+    padding-right: 0.25rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-md-2,
 
+  *[dir="rtl"] .px-md-2 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-md-2,
 
+  *[dir="rtl"] .px-md-2 {
 
+    padding-right: 0.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-md-3,
 
+  *[dir="rtl"] .px-md-3 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-md-3,
 
+  *[dir="rtl"] .px-md-3 {
 
+    padding-right: 1rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-md-4,
 
+  *[dir="rtl"] .px-md-4 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-md-4,
 
+  *[dir="rtl"] .px-md-4 {
 
+    padding-right: 1.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-md-5,
 
+  *[dir="rtl"] .px-md-5 {
 
+    padding-right: 0 !important;
 
+    padding-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-md-5,
 
+  *[dir="rtl"] .px-md-5 {
 
+    padding-right: 3rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-n1,
 
+  *[dir="rtl"] .mx-md-n1 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-n1,
 
+  *[dir="rtl"] .mx-md-n1 {
 
+    margin-right: -0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-n2,
 
+  *[dir="rtl"] .mx-md-n2 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-n2,
 
+  *[dir="rtl"] .mx-md-n2 {
 
+    margin-right: -0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-n3,
 
+  *[dir="rtl"] .mx-md-n3 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-n3,
 
+  *[dir="rtl"] .mx-md-n3 {
 
+    margin-right: -1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-n4,
 
+  *[dir="rtl"] .mx-md-n4 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-n4,
 
+  *[dir="rtl"] .mx-md-n4 {
 
+    margin-right: -1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-n5,
 
+  *[dir="rtl"] .mx-md-n5 {
 
+    margin-right: 0 !important;
 
+    margin-left: -3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-n5,
 
+  *[dir="rtl"] .mx-md-n5 {
 
+    margin-right: -3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-md-auto,
 
+  *[dir="rtl"] .mx-md-auto {
 
+    margin-left: auto !important;
 
+  }
 
+  *[dir="rtl"] .ml-md-auto,
 
+  *[dir="rtl"] .mx-md-auto {
 
+    margin-right: auto !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 992px) {
 
+  *[dir="rtl"] .mr-lg-0,
 
+  *[dir="rtl"] .mx-lg-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-0,
 
+  *[dir="rtl"] .mx-lg-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-1,
 
+  *[dir="rtl"] .mx-lg-1 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-1,
 
+  *[dir="rtl"] .mx-lg-1 {
 
+    margin-right: 0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-2,
 
+  *[dir="rtl"] .mx-lg-2 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-2,
 
+  *[dir="rtl"] .mx-lg-2 {
 
+    margin-right: 0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-3,
 
+  *[dir="rtl"] .mx-lg-3 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-3,
 
+  *[dir="rtl"] .mx-lg-3 {
 
+    margin-right: 1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-4,
 
+  *[dir="rtl"] .mx-lg-4 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-4,
 
+  *[dir="rtl"] .mx-lg-4 {
 
+    margin-right: 1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-5,
 
+  *[dir="rtl"] .mx-lg-5 {
 
+    margin-right: 0 !important;
 
+    margin-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-5,
 
+  *[dir="rtl"] .mx-lg-5 {
 
+    margin-right: 3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-lg-0,
 
+  *[dir="rtl"] .px-lg-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pl-lg-0,
 
+  *[dir="rtl"] .px-lg-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-lg-1,
 
+  *[dir="rtl"] .px-lg-1 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-lg-1,
 
+  *[dir="rtl"] .px-lg-1 {
 
+    padding-right: 0.25rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-lg-2,
 
+  *[dir="rtl"] .px-lg-2 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-lg-2,
 
+  *[dir="rtl"] .px-lg-2 {
 
+    padding-right: 0.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-lg-3,
 
+  *[dir="rtl"] .px-lg-3 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-lg-3,
 
+  *[dir="rtl"] .px-lg-3 {
 
+    padding-right: 1rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-lg-4,
 
+  *[dir="rtl"] .px-lg-4 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-lg-4,
 
+  *[dir="rtl"] .px-lg-4 {
 
+    padding-right: 1.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-lg-5,
 
+  *[dir="rtl"] .px-lg-5 {
 
+    padding-right: 0 !important;
 
+    padding-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-lg-5,
 
+  *[dir="rtl"] .px-lg-5 {
 
+    padding-right: 3rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-n1,
 
+  *[dir="rtl"] .mx-lg-n1 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-n1,
 
+  *[dir="rtl"] .mx-lg-n1 {
 
+    margin-right: -0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-n2,
 
+  *[dir="rtl"] .mx-lg-n2 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-n2,
 
+  *[dir="rtl"] .mx-lg-n2 {
 
+    margin-right: -0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-n3,
 
+  *[dir="rtl"] .mx-lg-n3 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-n3,
 
+  *[dir="rtl"] .mx-lg-n3 {
 
+    margin-right: -1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-n4,
 
+  *[dir="rtl"] .mx-lg-n4 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-n4,
 
+  *[dir="rtl"] .mx-lg-n4 {
 
+    margin-right: -1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-n5,
 
+  *[dir="rtl"] .mx-lg-n5 {
 
+    margin-right: 0 !important;
 
+    margin-left: -3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-n5,
 
+  *[dir="rtl"] .mx-lg-n5 {
 
+    margin-right: -3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-lg-auto,
 
+  *[dir="rtl"] .mx-lg-auto {
 
+    margin-left: auto !important;
 
+  }
 
+  *[dir="rtl"] .ml-lg-auto,
 
+  *[dir="rtl"] .mx-lg-auto {
 
+    margin-right: auto !important;
 
+  }
 
+}
 
+
 
+@media (min-width: 1200px) {
 
+  *[dir="rtl"] .mr-xl-0,
 
+  *[dir="rtl"] .mx-xl-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-0,
 
+  *[dir="rtl"] .mx-xl-0 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-1,
 
+  *[dir="rtl"] .mx-xl-1 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-1,
 
+  *[dir="rtl"] .mx-xl-1 {
 
+    margin-right: 0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-2,
 
+  *[dir="rtl"] .mx-xl-2 {
 
+    margin-right: 0 !important;
 
+    margin-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-2,
 
+  *[dir="rtl"] .mx-xl-2 {
 
+    margin-right: 0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-3,
 
+  *[dir="rtl"] .mx-xl-3 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-3,
 
+  *[dir="rtl"] .mx-xl-3 {
 
+    margin-right: 1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-4,
 
+  *[dir="rtl"] .mx-xl-4 {
 
+    margin-right: 0 !important;
 
+    margin-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-4,
 
+  *[dir="rtl"] .mx-xl-4 {
 
+    margin-right: 1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-5,
 
+  *[dir="rtl"] .mx-xl-5 {
 
+    margin-right: 0 !important;
 
+    margin-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-5,
 
+  *[dir="rtl"] .mx-xl-5 {
 
+    margin-right: 3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-xl-0,
 
+  *[dir="rtl"] .px-xl-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pl-xl-0,
 
+  *[dir="rtl"] .px-xl-0 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-xl-1,
 
+  *[dir="rtl"] .px-xl-1 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-xl-1,
 
+  *[dir="rtl"] .px-xl-1 {
 
+    padding-right: 0.25rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-xl-2,
 
+  *[dir="rtl"] .px-xl-2 {
 
+    padding-right: 0 !important;
 
+    padding-left: 0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-xl-2,
 
+  *[dir="rtl"] .px-xl-2 {
 
+    padding-right: 0.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-xl-3,
 
+  *[dir="rtl"] .px-xl-3 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-xl-3,
 
+  *[dir="rtl"] .px-xl-3 {
 
+    padding-right: 1rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-xl-4,
 
+  *[dir="rtl"] .px-xl-4 {
 
+    padding-right: 0 !important;
 
+    padding-left: 1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-xl-4,
 
+  *[dir="rtl"] .px-xl-4 {
 
+    padding-right: 1.5rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .pr-xl-5,
 
+  *[dir="rtl"] .px-xl-5 {
 
+    padding-right: 0 !important;
 
+    padding-left: 3rem !important;
 
+  }
 
+  *[dir="rtl"] .pl-xl-5,
 
+  *[dir="rtl"] .px-xl-5 {
 
+    padding-right: 3rem !important;
 
+    padding-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-n1,
 
+  *[dir="rtl"] .mx-xl-n1 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.25rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-n1,
 
+  *[dir="rtl"] .mx-xl-n1 {
 
+    margin-right: -0.25rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-n2,
 
+  *[dir="rtl"] .mx-xl-n2 {
 
+    margin-right: 0 !important;
 
+    margin-left: -0.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-n2,
 
+  *[dir="rtl"] .mx-xl-n2 {
 
+    margin-right: -0.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-n3,
 
+  *[dir="rtl"] .mx-xl-n3 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-n3,
 
+  *[dir="rtl"] .mx-xl-n3 {
 
+    margin-right: -1rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-n4,
 
+  *[dir="rtl"] .mx-xl-n4 {
 
+    margin-right: 0 !important;
 
+    margin-left: -1.5rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-n4,
 
+  *[dir="rtl"] .mx-xl-n4 {
 
+    margin-right: -1.5rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-n5,
 
+  *[dir="rtl"] .mx-xl-n5 {
 
+    margin-right: 0 !important;
 
+    margin-left: -3rem !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-n5,
 
+  *[dir="rtl"] .mx-xl-n5 {
 
+    margin-right: -3rem !important;
 
+    margin-left: 0 !important;
 
+  }
 
+  *[dir="rtl"] .mr-xl-auto,
 
+  *[dir="rtl"] .mx-xl-auto {
 
+    margin-left: auto !important;
 
+  }
 
+  *[dir="rtl"] .ml-xl-auto,
 
+  *[dir="rtl"] .mx-xl-auto {
 
+    margin-right: auto !important;
 
+  }
 
+}
 
+
 
+.ie-custom-properties {
 
+  blue: #20a8d8;
 
+  indigo: #6610f2;
 
+  purple: #6f42c1;
 
+  pink: #e83e8c;
 
+  red: #f86c6b;
 
+  orange: #f8cb00;
 
+  yellow: #ffc107;
 
+  green: #4dbd74;
 
+  teal: #20c997;
 
+  cyan: #17a2b8;
 
+  white: #fff;
 
+  gray: #73818f;
 
+  gray-dark: #2f353a;
 
+  light-blue: #63c2de;
 
+  primary: #20a8d8;
 
+  secondary: #c8ced3;
 
+  success: #4dbd74;
 
+  info: #63c2de;
 
+  warning: #ffc107;
 
+  danger: #f86c6b;
 
+  light: #f0f3f5;
 
+  dark: #2f353a;
 
+  breakpoint-xs: 0;
 
+  breakpoint-sm: 576px;
 
+  breakpoint-md: 768px;
 
+  breakpoint-lg: 992px;
 
+  breakpoint-xl: 1200px;
 
+}
 
+
 
+.was-validated .form-control:valid, .form-control.is-valid {
 
+  background-position: right calc(0.375em + 0.1875rem) center;
 
+}
 
+
 
+.was-validated .form-control:invalid, .form-control.is-invalid {
 
+  background-position: right calc(0.375em + 0.1875rem) center;
 
+}
 
+/*# sourceMappingURL=style.css.map */

File diff suppressed because it is too large
+ 0 - 0
static/css/style.css.map


File diff suppressed because it is too large
+ 11 - 0
static/css/style.min.css


File diff suppressed because it is too large
+ 0 - 0
static/css/style.min.css.map


BIN
static/fonts/fontawesome-webfont.ttf
View File


BIN
static/fonts/fontawesome-webfont.woff
View File


BIN
static/fonts/fontawesome-webfont.woff2
View File


+ 1084 - 0
static/icons/coreui-icons.html
View File 

@@ -0,0 +1,1084 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card card-default">
 
+              <div class="card-header">
 
+                <i class="fa fa-picture-o"></i> CoreUI Icons
 
+                <div class="card-header-actions">
 
+                  <a class="card-header-action" href="https://github.com/coreui/coreui-icons" target="_blank">Github</a>
 
+                </div>
 
+              </div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-account-logout"></i>
 
+                    <div>account-logout</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-action-redo"></i>
 
+                    <div>action-redo</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-action-undo"></i>
 
+                    <div>action-undo</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-align-center"></i>
 
+                    <div>align-center</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-align-left"></i>
 
+                    <div>align-left</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-align-right"></i>
 
+                    <div>align-right</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-arrow-bottom"></i>
 
+                    <div>arrow-bottom</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-arrow-left"></i>
 
+                    <div>arrow-left</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-arrow-right"></i>
 
+                    <div>arrow-right</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-arrow-top"></i>
 
+                    <div>arrow-top</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-ban"></i>
 
+                    <div>ban</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-basket-loaded"></i>
 
+                    <div>basket-loaded</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-bell"></i>
 
+                    <div>bell</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-bold"></i>
 
+                    <div>bold</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-bookmark"></i>
 
+                    <div>bookmark</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-briefcase"></i>
 
+                    <div>briefcase</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-british-pound"></i>
 
+                    <div>british-pound</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-brush"></i>
 
+                    <div>brush</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-calculator"></i>
 
+                    <div>calculator</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-calendar"></i>
 
+                    <div>calendar</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-cart"></i>
 
+                    <div>cart</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-chart"></i>
 
+                    <div>chart</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-check"></i>
 
+                    <div>check</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-chevron-bottom"></i>
 
+                    <div>chevron-bottom</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-chevron-left"></i>
 
+                    <div>chevron-left</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-chevron-right"></i>
 
+                    <div>chevron-right</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-chevron-top"></i>
 
+                    <div>chevron-top</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-circle-check"></i>
 
+                    <div>circle-check</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-circle-x"></i>
 
+                    <div>circle-x</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-cloud"></i>
 
+                    <div>cloud</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-cloud-download"></i>
 
+                    <div>cloud-download</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-cloud-upload"></i>
 
+                    <div>cloud-upload</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-code"></i>
 
+                    <div>code</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-cog"></i>
 
+                    <div>cog</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-comment-square"></i>
 
+                    <div>comment-square</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-credit-card"></i>
 
+                    <div>credit-card</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-cursor"></i>
 
+                    <div>cursor</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-dashboard"></i>
 
+                    <div>dashboard</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-delete"></i>
 
+                    <div>delete</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-dollar"></i>
 
+                    <div>dollar</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-drop"></i>
 
+                    <div>drop</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-envelope-closed"></i>
 
+                    <div>envelope-closed</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-envelope-letter"></i>
 
+                    <div>envelope-letter</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-envelope-open"></i>
 
+                    <div>envelope-open</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-euro"></i>
 
+                    <div>euro</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-file"></i>
 
+                    <div>file</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-globe"></i>
 
+                    <div>globe</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-graph"></i>
 
+                    <div>graph</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-home"></i>
 
+                    <div>home</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-inbox"></i>
 
+                    <div>inbox</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-info"></i>
 
+                    <div>info</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-italic"></i>
 
+                    <div>italic</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-justify-center"></i>
 
+                    <div>justify-center</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-justify-left"></i>
 
+                    <div>justify-left</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-justify-right"></i>
 
+                    <div>justify-right</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-laptop"></i>
 
+                    <div>laptop</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-layers"></i>
 
+                    <div>layers</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-lightbulb"></i>
 
+                    <div>lightbulb</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-list"></i>
 
+                    <div>list</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-location-pin"></i>
 
+                    <div>location-pin</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-lock-locked"></i>
 
+                    <div>lock-locked</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-lock-unlocked"></i>
 
+                    <div>lock-unlocked</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-magnifying-glass"></i>
 
+                    <div>magnifying-glass</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-map"></i>
 
+                    <div>map</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-monitor"></i>
 
+                    <div>monitor</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-moon"></i>
 
+                    <div>moon</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-note"></i>
 
+                    <div>note</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-options"></i>
 
+                    <div>options</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-paperclip"></i>
 
+                    <div>paperclip</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-pencil"></i>
 
+                    <div>pencil</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-people"></i>
 
+                    <div>people</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-phone"></i>
 
+                    <div>phone</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-pie-chart"></i>
 
+                    <div>pie-chart</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-print"></i>
 
+                    <div>print</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-puzzle"></i>
 
+                    <div>puzzle</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-rss"></i>
 
+                    <div>rss</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-screen-desktop"></i>
 
+                    <div>screen-desktop</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-screen-smartphone"></i>
 
+                    <div>screen-smartphone</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-settings"></i>
 
+                    <div>settings</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-share"></i>
 
+                    <div>share</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-shield"></i>
 
+                    <div>shield</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-sort-ascending"></i>
 
+                    <div>sort-ascending</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-sort-descending"></i>
 
+                    <div>sort-descending</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-speech"></i>
 
+                    <div>speech</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-speedometer"></i>
 
+                    <div>speedometer</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-star"></i>
 
+                    <div>star</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-sun"></i>
 
+                    <div>sun</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-tablet"></i>
 
+                    <div>tablet</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-tags"></i>
 
+                    <div>tags</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-task"></i>
 
+                    <div>task</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-thumb-down"></i>
 
+                    <div>thumb-down</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-thumb-up"></i>
 
+                    <div>thumb-up</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-trash"></i>
 
+                    <div>trash</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-underline"></i>
 
+                    <div>underline</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-user"></i>
 
+                    <div>user</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-user-female"></i>
 
+                    <div>user-female</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-user-follow"></i>
 
+                    <div>user-follow</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-user-unfollow"></i>
 
+                    <div>user-unfollow</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-wrench"></i>
 
+                    <div>wrench</div>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-2">
 
+                    <i class="icons font-2xl d-block mt-5 cui-yen"></i>
 
+                    <div>yen</div>
 
+                  </div>
 
+                </div>
 
+                <!-- /.row-->
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1678 - 0
static/icons/flags.html
View File 

@@ -0,0 +1,1678 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <i class="fa fa-font-awesome"></i> Flags</div>
 
+              <div class="card-body">
 
+                <div class="row">
 
+                  <div class="col-12 mb-5">For using the flags inline with text add the classes
 
+                    <code>.flag-icon</code> and
 
+                    <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.</div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ad h1" id="ad" title="ad"></i>
 
+                    <div>flag-icon-ad</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ae h1" id="ae" title="ae"></i>
 
+                    <div>flag-icon-ae</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-af h1" id="af" title="af"></i>
 
+                    <div>flag-icon-af</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ag h1" id="ag" title="ag"></i>
 
+                    <div>flag-icon-ag</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ai h1" id="ai" title="ai"></i>
 
+                    <div>flag-icon-ai</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-al h1" id="al" title="al"></i>
 
+                    <div>flag-icon-al</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-am h1" id="am" title="am"></i>
 
+                    <div>flag-icon-am</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ao h1" id="ao" title="ao"></i>
 
+                    <div>flag-icon-ao</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-aq h1" id="aq" title="aq"></i>
 
+                    <div>flag-icon-aq</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ar h1" id="ar" title="ar"></i>
 
+                    <div>flag-icon-ar</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-as h1" id="as" title="as"></i>
 
+                    <div>flag-icon-as</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-at h1" id="at" title="at"></i>
 
+                    <div>flag-icon-at</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-au h1" id="au" title="au"></i>
 
+                    <div>flag-icon-au</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-aw h1" id="aw" title="aw"></i>
 
+                    <div>flag-icon-aw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ax h1" id="ax" title="ax"></i>
 
+                    <div>flag-icon-ax</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-az h1" id="az" title="az"></i>
 
+                    <div>flag-icon-az</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ba h1" id="ba" title="ba"></i>
 
+                    <div>flag-icon-ba</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bb h1" id="bb" title="bb"></i>
 
+                    <div>flag-icon-bb</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bd h1" id="bd" title="bd"></i>
 
+                    <div>flag-icon-bd</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-be h1" id="be" title="be"></i>
 
+                    <div>flag-icon-be</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bf h1" id="bf" title="bf"></i>
 
+                    <div>flag-icon-bf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bg h1" id="bg" title="bg"></i>
 
+                    <div>flag-icon-bg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bh h1" id="bh" title="bh"></i>
 
+                    <div>flag-icon-bh</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bi h1" id="bi" title="bi"></i>
 
+                    <div>flag-icon-bi</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bj h1" id="bj" title="bj"></i>
 
+                    <div>flag-icon-bj</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bl h1" id="bl" title="bl"></i>
 
+                    <div>flag-icon-bl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bm h1" id="bm" title="bm"></i>
 
+                    <div>flag-icon-bm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bn h1" id="bn" title="bn"></i>
 
+                    <div>flag-icon-bn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bo h1" id="bo" title="bo"></i>
 
+                    <div>flag-icon-bo</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bq h1" id="bq" title="bq"></i>
 
+                    <div>flag-icon-bq</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-br h1" id="br" title="br"></i>
 
+                    <div>flag-icon-br</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bs h1" id="bs" title="bs"></i>
 
+                    <div>flag-icon-bs</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bt h1" id="bt" title="bt"></i>
 
+                    <div>flag-icon-bt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bv h1" id="bv" title="bv"></i>
 
+                    <div>flag-icon-bv</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bw h1" id="bw" title="bw"></i>
 
+                    <div>flag-icon-bw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-by h1" id="by" title="by"></i>
 
+                    <div>flag-icon-by</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-bz h1" id="bz" title="bz"></i>
 
+                    <div>flag-icon-bz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ca h1" id="ca" title="ca"></i>
 
+                    <div>flag-icon-ca</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cc h1" id="cc" title="cc"></i>
 
+                    <div>flag-icon-cc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cd h1" id="cd" title="cd"></i>
 
+                    <div>flag-icon-cd</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cf h1" id="cf" title="cf"></i>
 
+                    <div>flag-icon-cf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cg h1" id="cg" title="cg"></i>
 
+                    <div>flag-icon-cg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ch h1" id="ch" title="ch"></i>
 
+                    <div>flag-icon-ch</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ci h1" id="ci" title="ci"></i>
 
+                    <div>flag-icon-ci</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ck h1" id="ck" title="ck"></i>
 
+                    <div>flag-icon-ck</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cl h1" id="cl" title="cl"></i>
 
+                    <div>flag-icon-cl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cm h1" id="cm" title="cm"></i>
 
+                    <div>flag-icon-cm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cn h1" id="cn" title="cn"></i>
 
+                    <div>flag-icon-cn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-co h1" id="co" title="co"></i>
 
+                    <div>flag-icon-co</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cr h1" id="cr" title="cr"></i>
 
+                    <div>flag-icon-cr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cu h1" id="cu" title="cu"></i>
 
+                    <div>flag-icon-cu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cv h1" id="cv" title="cv"></i>
 
+                    <div>flag-icon-cv</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cw h1" id="cw" title="cw"></i>
 
+                    <div>flag-icon-cw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cx h1" id="cx" title="cx"></i>
 
+                    <div>flag-icon-cx</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cy h1" id="cy" title="cy"></i>
 
+                    <div>flag-icon-cy</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-cz h1" id="cz" title="cz"></i>
 
+                    <div>flag-icon-cz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-de h1" id="de" title="de"></i>
 
+                    <div>flag-icon-de</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-dj h1" id="dj" title="dj"></i>
 
+                    <div>flag-icon-dj</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-dk h1" id="dk" title="dk"></i>
 
+                    <div>flag-icon-dk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-dm h1" id="dm" title="dm"></i>
 
+                    <div>flag-icon-dm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-do h1" id="do" title="do"></i>
 
+                    <div>flag-icon-do</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-dz h1" id="dz" title="dz"></i>
 
+                    <div>flag-icon-dz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ec h1" id="ec" title="ec"></i>
 
+                    <div>flag-icon-ec</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ee h1" id="ee" title="ee"></i>
 
+                    <div>flag-icon-ee</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-eg h1" id="eg" title="eg"></i>
 
+                    <div>flag-icon-eg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-eh h1" id="eh" title="eh"></i>
 
+                    <div>flag-icon-eh</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-er h1" id="er" title="er"></i>
 
+                    <div>flag-icon-er</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-es h1" id="es" title="es"></i>
 
+                    <div>flag-icon-es</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-et h1" id="et" title="et"></i>
 
+                    <div>flag-icon-et</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-fi h1" id="fi" title="fi"></i>
 
+                    <div>flag-icon-fi</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-fj h1" id="fj" title="fj"></i>
 
+                    <div>flag-icon-fj</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-fk h1" id="fk" title="fk"></i>
 
+                    <div>flag-icon-fk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-fm h1" id="fm" title="fm"></i>
 
+                    <div>flag-icon-fm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-fo h1" id="fo" title="fo"></i>
 
+                    <div>flag-icon-fo</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-fr h1" id="fr" title="fr"></i>
 
+                    <div>flag-icon-fr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ga h1" id="ga" title="ga"></i>
 
+                    <div>flag-icon-ga</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gb h1" id="gb" title="gb"></i>
 
+                    <div>flag-icon-gb</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gd h1" id="gd" title="gd"></i>
 
+                    <div>flag-icon-gd</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ge h1" id="ge" title="ge"></i>
 
+                    <div>flag-icon-ge</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gf h1" id="gf" title="gf"></i>
 
+                    <div>flag-icon-gf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gg h1" id="gg" title="gg"></i>
 
+                    <div>flag-icon-gg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gh h1" id="gh" title="gh"></i>
 
+                    <div>flag-icon-gh</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gi h1" id="gi" title="gi"></i>
 
+                    <div>flag-icon-gi</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gl h1" id="gl" title="gl"></i>
 
+                    <div>flag-icon-gl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gm h1" id="gm" title="gm"></i>
 
+                    <div>flag-icon-gm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gn h1" id="gn" title="gn"></i>
 
+                    <div>flag-icon-gn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gp h1" id="gp" title="gp"></i>
 
+                    <div>flag-icon-gp</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gq h1" id="gq" title="gq"></i>
 
+                    <div>flag-icon-gq</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gr h1" id="gr" title="gr"></i>
 
+                    <div>flag-icon-gr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gs h1" id="gs" title="gs"></i>
 
+                    <div>flag-icon-gs</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gt h1" id="gt" title="gt"></i>
 
+                    <div>flag-icon-gt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gu h1" id="gu" title="gu"></i>
 
+                    <div>flag-icon-gu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gw h1" id="gw" title="gw"></i>
 
+                    <div>flag-icon-gw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-gy h1" id="gy" title="gy"></i>
 
+                    <div>flag-icon-gy</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-hk h1" id="hk" title="hk"></i>
 
+                    <div>flag-icon-hk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-hm h1" id="hm" title="hm"></i>
 
+                    <div>flag-icon-hm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-hn h1" id="hn" title="hn"></i>
 
+                    <div>flag-icon-hn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-hr h1" id="hr" title="hr"></i>
 
+                    <div>flag-icon-hr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ht h1" id="ht" title="ht"></i>
 
+                    <div>flag-icon-ht</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-hu h1" id="hu" title="hu"></i>
 
+                    <div>flag-icon-hu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-id h1" id="id" title="id"></i>
 
+                    <div>flag-icon-id</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ie h1" id="ie" title="ie"></i>
 
+                    <div>flag-icon-ie</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-il h1" id="il" title="il"></i>
 
+                    <div>flag-icon-il</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-im h1" id="im" title="im"></i>
 
+                    <div>flag-icon-im</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-in h1" id="in" title="in"></i>
 
+                    <div>flag-icon-in</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-io h1" id="io" title="io"></i>
 
+                    <div>flag-icon-io</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-iq h1" id="iq" title="iq"></i>
 
+                    <div>flag-icon-iq</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ir h1" id="ir" title="ir"></i>
 
+                    <div>flag-icon-ir</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-is h1" id="is" title="is"></i>
 
+                    <div>flag-icon-is</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-it h1" id="it" title="it"></i>
 
+                    <div>flag-icon-it</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-je h1" id="je" title="je"></i>
 
+                    <div>flag-icon-je</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-jm h1" id="jm" title="jm"></i>
 
+                    <div>flag-icon-jm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-jo h1" id="jo" title="jo"></i>
 
+                    <div>flag-icon-jo</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-jp h1" id="jp" title="jp"></i>
 
+                    <div>flag-icon-jp</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ke h1" id="ke" title="ke"></i>
 
+                    <div>flag-icon-ke</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kg h1" id="kg" title="kg"></i>
 
+                    <div>flag-icon-kg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kh h1" id="kh" title="kh"></i>
 
+                    <div>flag-icon-kh</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ki h1" id="ki" title="ki"></i>
 
+                    <div>flag-icon-ki</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-km h1" id="km" title="km"></i>
 
+                    <div>flag-icon-km</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kn h1" id="kn" title="kn"></i>
 
+                    <div>flag-icon-kn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kp h1" id="kp" title="kp"></i>
 
+                    <div>flag-icon-kp</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kr h1" id="kr" title="kr"></i>
 
+                    <div>flag-icon-kr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kw h1" id="kw" title="kw"></i>
 
+                    <div>flag-icon-kw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ky h1" id="ky" title="ky"></i>
 
+                    <div>flag-icon-ky</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-kz h1" id="kz" title="kz"></i>
 
+                    <div>flag-icon-kz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-la h1" id="la" title="la"></i>
 
+                    <div>flag-icon-la</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lb h1" id="lb" title="lb"></i>
 
+                    <div>flag-icon-lb</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lc h1" id="lc" title="lc"></i>
 
+                    <div>flag-icon-lc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-li h1" id="li" title="li"></i>
 
+                    <div>flag-icon-li</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lk h1" id="lk" title="lk"></i>
 
+                    <div>flag-icon-lk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lr h1" id="lr" title="lr"></i>
 
+                    <div>flag-icon-lr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ls h1" id="ls" title="ls"></i>
 
+                    <div>flag-icon-ls</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lt h1" id="lt" title="lt"></i>
 
+                    <div>flag-icon-lt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lu h1" id="lu" title="lu"></i>
 
+                    <div>flag-icon-lu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-lv h1" id="lv" title="lv"></i>
 
+                    <div>flag-icon-lv</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ly h1" id="ly" title="ly"></i>
 
+                    <div>flag-icon-ly</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ma h1" id="ma" title="ma"></i>
 
+                    <div>flag-icon-ma</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mc h1" id="mc" title="mc"></i>
 
+                    <div>flag-icon-mc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-md h1" id="md" title="md"></i>
 
+                    <div>flag-icon-md</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-me h1" id="me" title="me"></i>
 
+                    <div>flag-icon-me</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mf h1" id="mf" title="mf"></i>
 
+                    <div>flag-icon-mf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mg h1" id="mg" title="mg"></i>
 
+                    <div>flag-icon-mg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mh h1" id="mh" title="mh"></i>
 
+                    <div>flag-icon-mh</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mk h1" id="mk" title="mk"></i>
 
+                    <div>flag-icon-mk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ml h1" id="ml" title="ml"></i>
 
+                    <div>flag-icon-ml</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mm h1" id="mm" title="mm"></i>
 
+                    <div>flag-icon-mm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mn h1" id="mn" title="mn"></i>
 
+                    <div>flag-icon-mn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mo h1" id="mo" title="mo"></i>
 
+                    <div>flag-icon-mo</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mp h1" id="mp" title="mp"></i>
 
+                    <div>flag-icon-mp</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mq h1" id="mq" title="mq"></i>
 
+                    <div>flag-icon-mq</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mr h1" id="mr" title="mr"></i>
 
+                    <div>flag-icon-mr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ms h1" id="ms" title="ms"></i>
 
+                    <div>flag-icon-ms</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mt h1" id="mt" title="mt"></i>
 
+                    <div>flag-icon-mt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mu h1" id="mu" title="mu"></i>
 
+                    <div>flag-icon-mu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mv h1" id="mv" title="mv"></i>
 
+                    <div>flag-icon-mv</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mw h1" id="mw" title="mw"></i>
 
+                    <div>flag-icon-mw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mx h1" id="mx" title="mx"></i>
 
+                    <div>flag-icon-mx</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-my h1" id="my" title="my"></i>
 
+                    <div>flag-icon-my</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-mz h1" id="mz" title="mz"></i>
 
+                    <div>flag-icon-mz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-na h1" id="na" title="na"></i>
 
+                    <div>flag-icon-na</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-nc h1" id="nc" title="nc"></i>
 
+                    <div>flag-icon-nc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ne h1" id="ne" title="ne"></i>
 
+                    <div>flag-icon-ne</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-nf h1" id="nf" title="nf"></i>
 
+                    <div>flag-icon-nf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ng h1" id="ng" title="ng"></i>
 
+                    <div>flag-icon-ng</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ni h1" id="ni" title="ni"></i>
 
+                    <div>flag-icon-ni</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-nl h1" id="nl" title="nl"></i>
 
+                    <div>flag-icon-nl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-no h1" id="no" title="no"></i>
 
+                    <div>flag-icon-no</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-np h1" id="np" title="np"></i>
 
+                    <div>flag-icon-np</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-nr h1" id="nr" title="nr"></i>
 
+                    <div>flag-icon-nr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-nu h1" id="nu" title="nu"></i>
 
+                    <div>flag-icon-nu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-nz h1" id="nz" title="nz"></i>
 
+                    <div>flag-icon-nz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-om h1" id="om" title="om"></i>
 
+                    <div>flag-icon-om</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pa h1" id="pa" title="pa"></i>
 
+                    <div>flag-icon-pa</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pe h1" id="pe" title="pe"></i>
 
+                    <div>flag-icon-pe</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pf h1" id="pf" title="pf"></i>
 
+                    <div>flag-icon-pf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pg h1" id="pg" title="pg"></i>
 
+                    <div>flag-icon-pg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ph h1" id="ph" title="ph"></i>
 
+                    <div>flag-icon-ph</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pk h1" id="pk" title="pk"></i>
 
+                    <div>flag-icon-pk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pl h1" id="pl" title="pl"></i>
 
+                    <div>flag-icon-pl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pm h1" id="pm" title="pm"></i>
 
+                    <div>flag-icon-pm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pn h1" id="pn" title="pn"></i>
 
+                    <div>flag-icon-pn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pr h1" id="pr" title="pr"></i>
 
+                    <div>flag-icon-pr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ps h1" id="ps" title="ps"></i>
 
+                    <div>flag-icon-ps</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pt h1" id="pt" title="pt"></i>
 
+                    <div>flag-icon-pt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-pw h1" id="pw" title="pw"></i>
 
+                    <div>flag-icon-pw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-py h1" id="py" title="py"></i>
 
+                    <div>flag-icon-py</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-qa h1" id="qa" title="qa"></i>
 
+                    <div>flag-icon-qa</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-re h1" id="re" title="re"></i>
 
+                    <div>flag-icon-re</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ro h1" id="ro" title="ro"></i>
 
+                    <div>flag-icon-ro</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-rs h1" id="rs" title="rs"></i>
 
+                    <div>flag-icon-rs</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ru h1" id="ru" title="ru"></i>
 
+                    <div>flag-icon-ru</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-rw h1" id="rw" title="rw"></i>
 
+                    <div>flag-icon-rw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sa h1" id="sa" title="sa"></i>
 
+                    <div>flag-icon-sa</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sb h1" id="sb" title="sb"></i>
 
+                    <div>flag-icon-sb</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sc h1" id="sc" title="sc"></i>
 
+                    <div>flag-icon-sc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sd h1" id="sd" title="sd"></i>
 
+                    <div>flag-icon-sd</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-se h1" id="se" title="se"></i>
 
+                    <div>flag-icon-se</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sg h1" id="sg" title="sg"></i>
 
+                    <div>flag-icon-sg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sh h1" id="sh" title="sh"></i>
 
+                    <div>flag-icon-sh</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-si h1" id="si" title="si"></i>
 
+                    <div>flag-icon-si</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sj h1" id="sj" title="sj"></i>
 
+                    <div>flag-icon-sj</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sk h1" id="sk" title="sk"></i>
 
+                    <div>flag-icon-sk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sl h1" id="sl" title="sl"></i>
 
+                    <div>flag-icon-sl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sm h1" id="sm" title="sm"></i>
 
+                    <div>flag-icon-sm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sn h1" id="sn" title="sn"></i>
 
+                    <div>flag-icon-sn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-so h1" id="so" title="so"></i>
 
+                    <div>flag-icon-so</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sr h1" id="sr" title="sr"></i>
 
+                    <div>flag-icon-sr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ss h1" id="ss" title="ss"></i>
 
+                    <div>flag-icon-ss</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-st h1" id="st" title="st"></i>
 
+                    <div>flag-icon-st</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sv h1" id="sv" title="sv"></i>
 
+                    <div>flag-icon-sv</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sx h1" id="sx" title="sx"></i>
 
+                    <div>flag-icon-sx</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sy h1" id="sy" title="sy"></i>
 
+                    <div>flag-icon-sy</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-sz h1" id="sz" title="sz"></i>
 
+                    <div>flag-icon-sz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tc h1" id="tc" title="tc"></i>
 
+                    <div>flag-icon-tc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-td h1" id="td" title="td"></i>
 
+                    <div>flag-icon-td</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tf h1" id="tf" title="tf"></i>
 
+                    <div>flag-icon-tf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tg h1" id="tg" title="tg"></i>
 
+                    <div>flag-icon-tg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-th h1" id="th" title="th"></i>
 
+                    <div>flag-icon-th</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tj h1" id="tj" title="tj"></i>
 
+                    <div>flag-icon-tj</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tk h1" id="tk" title="tk"></i>
 
+                    <div>flag-icon-tk</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tl h1" id="tl" title="tl"></i>
 
+                    <div>flag-icon-tl</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tm h1" id="tm" title="tm"></i>
 
+                    <div>flag-icon-tm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tn h1" id="tn" title="tn"></i>
 
+                    <div>flag-icon-tn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-to h1" id="to" title="to"></i>
 
+                    <div>flag-icon-to</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tr h1" id="tr" title="tr"></i>
 
+                    <div>flag-icon-tr</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tt h1" id="tt" title="tt"></i>
 
+                    <div>flag-icon-tt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tv h1" id="tv" title="tv"></i>
 
+                    <div>flag-icon-tv</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tw h1" id="tw" title="tw"></i>
 
+                    <div>flag-icon-tw</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-tz h1" id="tz" title="tz"></i>
 
+                    <div>flag-icon-tz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ua h1" id="ua" title="ua"></i>
 
+                    <div>flag-icon-ua</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ug h1" id="ug" title="ug"></i>
 
+                    <div>flag-icon-ug</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-um h1" id="um" title="um"></i>
 
+                    <div>flag-icon-um</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-us h1" id="us" title="us"></i>
 
+                    <div>flag-icon-us</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-uy h1" id="uy" title="uy"></i>
 
+                    <div>flag-icon-uy</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-uz h1" id="uz" title="uz"></i>
 
+                    <div>flag-icon-uz</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-va h1" id="va" title="va"></i>
 
+                    <div>flag-icon-va</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-vc h1" id="vc" title="vc"></i>
 
+                    <div>flag-icon-vc</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ve h1" id="ve" title="ve"></i>
 
+                    <div>flag-icon-ve</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-vg h1" id="vg" title="vg"></i>
 
+                    <div>flag-icon-vg</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-vi h1" id="vi" title="vi"></i>
 
+                    <div>flag-icon-vi</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-vn h1" id="vn" title="vn"></i>
 
+                    <div>flag-icon-vn</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-vu h1" id="vu" title="vu"></i>
 
+                    <div>flag-icon-vu</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-wf h1" id="wf" title="wf"></i>
 
+                    <div>flag-icon-wf</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ws h1" id="ws" title="ws"></i>
 
+                    <div>flag-icon-ws</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-ye h1" id="ye" title="ye"></i>
 
+                    <div>flag-icon-ye</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-yt h1" id="yt" title="yt"></i>
 
+                    <div>flag-icon-yt</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-za h1" id="za" title="za"></i>
 
+                    <div>flag-icon-za</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-zm h1" id="zm" title="zm"></i>
 
+                    <div>flag-icon-zm</div>
 
+                  </div>
 
+                  <div class="col-sm-2 col-xs-3 text-center mb-5">
 
+                    <i class="flag-icon flag-icon-zw h1" id="zw" title="zw"></i>
 
+                    <div>flag-icon-zw</div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 3694 - 0
static/icons/font-awesome.html
View File 

@@ -0,0 +1,3694 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card" id="new47">
 
+              <div class="card-header">
 
+                <i class="fa fa-font-awesome"></i> 50 New Icons in 4.7</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-address-book fa-lg mt-4"></i>
 
+                    <br>address-book</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-address-book-o fa-lg mt-4"></i>
 
+                    <br>address-book-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-address-card fa-lg mt-4"></i>
 
+                    <br>address-card</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-address-card-o fa-lg mt-4"></i>
 
+                    <br>address-card-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bandcamp fa-lg mt-4"></i>
 
+                    <br>bandcamp</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bath fa-lg mt-4"></i>
 
+                    <br>bath</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bathtub fa-lg mt-4"></i>
 
+                    <br>bathtub
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-drivers-license fa-lg mt-4"></i>
 
+                    <br>drivers-license
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-drivers-license-o fa-lg mt-4"></i>
 
+                    <br>drivers-license-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eercast fa-lg mt-4"></i>
 
+                    <br>eercast</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-envelope-open fa-lg mt-4"></i>
 
+                    <br>envelope-open</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-envelope-open-o fa-lg mt-4"></i>
 
+                    <br>envelope-open-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-etsy fa-lg mt-4"></i>
 
+                    <br>etsy</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-free-code-camp fa-lg mt-4"></i>
 
+                    <br>free-code-camp</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-grav fa-lg mt-4"></i>
 
+                    <br>grav</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-handshake-o fa-lg mt-4"></i>
 
+                    <br>handshake-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-id-badge fa-lg mt-4"></i>
 
+                    <br>id-badge</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-id-card fa-lg mt-4"></i>
 
+                    <br>id-card</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-id-card-o fa-lg mt-4"></i>
 
+                    <br>id-card-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-imdb fa-lg mt-4"></i>
 
+                    <br>imdb</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-linode fa-lg mt-4"></i>
 
+                    <br>linode</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-meetup fa-lg mt-4"></i>
 
+                    <br>meetup</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-microchip fa-lg mt-4"></i>
 
+                    <br>microchip</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-podcast fa-lg mt-4"></i>
 
+                    <br>podcast</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-quora fa-lg mt-4"></i>
 
+                    <br>quora</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ravelry fa-lg mt-4"></i>
 
+                    <br>ravelry</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-s15 fa-lg mt-4"></i>
 
+                    <br>s15
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shower fa-lg mt-4"></i>
 
+                    <br>shower</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-snowflake-o fa-lg mt-4"></i>
 
+                    <br>snowflake-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-superpowers fa-lg mt-4"></i>
 
+                    <br>superpowers</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-telegram fa-lg mt-4"></i>
 
+                    <br>telegram</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer fa-lg mt-4"></i>
 
+                    <br>thermometer
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-0 fa-lg mt-4"></i>
 
+                    <br>thermometer-0
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-1 fa-lg mt-4"></i>
 
+                    <br>thermometer-1
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-2 fa-lg mt-4"></i>
 
+                    <br>thermometer-2
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-3 fa-lg mt-4"></i>
 
+                    <br>thermometer-3
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-4 fa-lg mt-4"></i>
 
+                    <br>thermometer-4
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-empty fa-lg mt-4"></i>
 
+                    <br>thermometer-empty</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-full fa-lg mt-4"></i>
 
+                    <br>thermometer-full</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-half fa-lg mt-4"></i>
 
+                    <br>thermometer-half</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-quarter fa-lg mt-4"></i>
 
+                    <br>thermometer-quarter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thermometer-three-quarters fa-lg mt-4"></i>
 
+                    <br>thermometer-three-quarters</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-times-rectangle fa-lg mt-4"></i>
 
+                    <br>times-rectangle
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-times-rectangle-o fa-lg mt-4"></i>
 
+                    <br>times-rectangle-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-circle fa-lg mt-4"></i>
 
+                    <br>user-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-circle-o fa-lg mt-4"></i>
 
+                    <br>user-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-o fa-lg mt-4"></i>
 
+                    <br>user-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-vcard fa-lg mt-4"></i>
 
+                    <br>vcard
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-vcard-o fa-lg mt-4"></i>
 
+                    <br>vcard-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-window-close fa-lg mt-4"></i>
 
+                    <br>window-close</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-window-close-o fa-lg mt-4"></i>
 
+                    <br>window-close-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-window-maximize fa-lg mt-4"></i>
 
+                    <br>window-maximize</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-window-minimize fa-lg mt-4"></i>
 
+                    <br>window-minimize</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-window-restore fa-lg mt-4"></i>
 
+                    <br>window-restore</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wpexplorer fa-lg mt-4"></i>
 
+                    <br>wpexplorer</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="new">
 
+              <div class="card-header">20 New Icons in 4.5</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bluetooth fa-lg mt-4"></i>
 
+                    <br>bluetooth</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bluetooth-b fa-lg mt-4"></i>
 
+                    <br>bluetooth-b</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-codiepie fa-lg mt-4"></i>
 
+                    <br>codiepie</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-credit-card-alt fa-lg mt-4"></i>
 
+                    <br>credit-card-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-edge fa-lg mt-4"></i>
 
+                    <br>edge</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fort-awesome fa-lg mt-4"></i>
 
+                    <br>fort-awesome</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hashtag fa-lg mt-4"></i>
 
+                    <br>hashtag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mixcloud fa-lg mt-4"></i>
 
+                    <br>mixcloud</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-modx fa-lg mt-4"></i>
 
+                    <br>modx</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pause-circle fa-lg mt-4"></i>
 
+                    <br>pause-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pause-circle-o fa-lg mt-4"></i>
 
+                    <br>pause-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-percent fa-lg mt-4"></i>
 
+                    <br>percent</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-product-hunt fa-lg mt-4"></i>
 
+                    <br>product-hunt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reddit-alien fa-lg mt-4"></i>
 
+                    <br>reddit-alien</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-scribd fa-lg mt-4"></i>
 
+                    <br>scribd</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shopping-bag fa-lg mt-4"></i>
 
+                    <br>shopping-bag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shopping-basket fa-lg mt-4"></i>
 
+                    <br>shopping-basket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stop-circle fa-lg mt-4"></i>
 
+                    <br>stop-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stop-circle-o fa-lg mt-4"></i>
 
+                    <br>stop-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-usb fa-lg mt-4"></i>
 
+                    <br>usb</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="web-application">
 
+              <div class="card-header">Web Application Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-adjust fa-lg mt-4"></i>
 
+                    <br>adjust</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-anchor fa-lg mt-4"></i>
 
+                    <br>anchor</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-archive fa-lg mt-4"></i>
 
+                    <br>archive</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-area-chart fa-lg mt-4"></i>
 
+                    <br>area-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows fa-lg mt-4"></i>
 
+                    <br>arrows</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows-h fa-lg mt-4"></i>
 
+                    <br>arrows-h</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows-v fa-lg mt-4"></i>
 
+                    <br>arrows-v</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-asterisk fa-lg mt-4"></i>
 
+                    <br>asterisk</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-at fa-lg mt-4"></i>
 
+                    <br>at</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-automobile fa-lg mt-4"></i>
 
+                    <br>automobile
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-balance-scale fa-lg mt-4"></i>
 
+                    <br>balance-scale</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ban fa-lg mt-4"></i>
 
+                    <br>ban</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bank fa-lg mt-4"></i>
 
+                    <br>bank
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bar-chart fa-lg mt-4"></i>
 
+                    <br>bar-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bar-chart-o fa-lg mt-4"></i>
 
+                    <br>bar-chart-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-barcode fa-lg mt-4"></i>
 
+                    <br>barcode</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bars fa-lg mt-4"></i>
 
+                    <br>bars</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-0 fa-lg mt-4"></i>
 
+                    <br>battery-0
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-1 fa-lg mt-4"></i>
 
+                    <br>battery-1
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-2 fa-lg mt-4"></i>
 
+                    <br>battery-2
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-3 fa-lg mt-4"></i>
 
+                    <br>battery-3
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-4 fa-lg mt-4"></i>
 
+                    <br>battery-4
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-empty fa-lg mt-4"></i>
 
+                    <br>battery-empty</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-full fa-lg mt-4"></i>
 
+                    <br>battery-full</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-half fa-lg mt-4"></i>
 
+                    <br>battery-half</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-quarter fa-lg mt-4"></i>
 
+                    <br>battery-quarter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-battery-three-quarters fa-lg mt-4"></i>
 
+                    <br>battery-three-quarters</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bed fa-lg mt-4"></i>
 
+                    <br>bed</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-beer fa-lg mt-4"></i>
 
+                    <br>beer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bell fa-lg mt-4"></i>
 
+                    <br>bell</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bell-o fa-lg mt-4"></i>
 
+                    <br>bell-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bell-slash fa-lg mt-4"></i>
 
+                    <br>bell-slash</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bell-slash-o fa-lg mt-4"></i>
 
+                    <br>bell-slash-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bicycle fa-lg mt-4"></i>
 
+                    <br>bicycle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-binoculars fa-lg mt-4"></i>
 
+                    <br>binoculars</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-birthday-cake fa-lg mt-4"></i>
 
+                    <br>birthday-cake</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bluetooth fa-lg mt-4"></i>
 
+                    <br>bluetooth</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bluetooth-b fa-lg mt-4"></i>
 
+                    <br>bluetooth-b</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bolt fa-lg mt-4"></i>
 
+                    <br>bolt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bomb fa-lg mt-4"></i>
 
+                    <br>bomb</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-book fa-lg mt-4"></i>
 
+                    <br>book</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bookmark fa-lg mt-4"></i>
 
+                    <br>bookmark</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bookmark-o fa-lg mt-4"></i>
 
+                    <br>bookmark-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-briefcase fa-lg mt-4"></i>
 
+                    <br>briefcase</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bug fa-lg mt-4"></i>
 
+                    <br>bug</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-building fa-lg mt-4"></i>
 
+                    <br>building</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-building-o fa-lg mt-4"></i>
 
+                    <br>building-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bullhorn fa-lg mt-4"></i>
 
+                    <br>bullhorn</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bullseye fa-lg mt-4"></i>
 
+                    <br>bullseye</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bus fa-lg mt-4"></i>
 
+                    <br>bus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cab fa-lg mt-4"></i>
 
+                    <br>cab
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calculator fa-lg mt-4"></i>
 
+                    <br>calculator</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calendar fa-lg mt-4"></i>
 
+                    <br>calendar</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calendar-check-o fa-lg mt-4"></i>
 
+                    <br>calendar-check-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calendar-minus-o fa-lg mt-4"></i>
 
+                    <br>calendar-minus-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calendar-o fa-lg mt-4"></i>
 
+                    <br>calendar-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calendar-plus-o fa-lg mt-4"></i>
 
+                    <br>calendar-plus-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-calendar-times-o fa-lg mt-4"></i>
 
+                    <br>calendar-times-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-camera fa-lg mt-4"></i>
 
+                    <br>camera</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-camera-retro fa-lg mt-4"></i>
 
+                    <br>camera-retro</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-car fa-lg mt-4"></i>
 
+                    <br>car</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-down fa-lg mt-4"></i>
 
+                    <br>caret-square-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-left fa-lg mt-4"></i>
 
+                    <br>caret-square-o-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-right fa-lg mt-4"></i>
 
+                    <br>caret-square-o-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-up fa-lg mt-4"></i>
 
+                    <br>caret-square-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cart-arrow-down fa-lg mt-4"></i>
 
+                    <br>cart-arrow-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cart-plus fa-lg mt-4"></i>
 
+                    <br>cart-plus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc fa-lg mt-4"></i>
 
+                    <br>cc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-certificate fa-lg mt-4"></i>
 
+                    <br>certificate</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check fa-lg mt-4"></i>
 
+                    <br>check</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check-circle fa-lg mt-4"></i>
 
+                    <br>check-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check-circle-o fa-lg mt-4"></i>
 
+                    <br>check-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check-square fa-lg mt-4"></i>
 
+                    <br>check-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check-square-o fa-lg mt-4"></i>
 
+                    <br>check-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-child fa-lg mt-4"></i>
 
+                    <br>child</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle fa-lg mt-4"></i>
 
+                    <br>circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle-o fa-lg mt-4"></i>
 
+                    <br>circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle-o-notch fa-lg mt-4"></i>
 
+                    <br>circle-o-notch</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle-thin fa-lg mt-4"></i>
 
+                    <br>circle-thin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-clock-o fa-lg mt-4"></i>
 
+                    <br>clock-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-clone fa-lg mt-4"></i>
 
+                    <br>clone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-close fa-lg mt-4"></i>
 
+                    <br>close
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cloud fa-lg mt-4"></i>
 
+                    <br>cloud</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cloud-download fa-lg mt-4"></i>
 
+                    <br>cloud-download</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cloud-upload fa-lg mt-4"></i>
 
+                    <br>cloud-upload</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-code fa-lg mt-4"></i>
 
+                    <br>code</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-code-fork fa-lg mt-4"></i>
 
+                    <br>code-fork</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-coffee fa-lg mt-4"></i>
 
+                    <br>coffee</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cog fa-lg mt-4"></i>
 
+                    <br>cog</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cogs fa-lg mt-4"></i>
 
+                    <br>cogs</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-comment fa-lg mt-4"></i>
 
+                    <br>comment</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-comment-o fa-lg mt-4"></i>
 
+                    <br>comment-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-commenting fa-lg mt-4"></i>
 
+                    <br>commenting</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-commenting-o fa-lg mt-4"></i>
 
+                    <br>commenting-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-comments fa-lg mt-4"></i>
 
+                    <br>comments</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-comments-o fa-lg mt-4"></i>
 
+                    <br>comments-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-compass fa-lg mt-4"></i>
 
+                    <br>compass</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-copyright fa-lg mt-4"></i>
 
+                    <br>copyright</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-creative-commons fa-lg mt-4"></i>
 
+                    <br>creative-commons</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-credit-card fa-lg mt-4"></i>
 
+                    <br>credit-card</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-credit-card-alt fa-lg mt-4"></i>
 
+                    <br>credit-card-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-crop fa-lg mt-4"></i>
 
+                    <br>crop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-crosshairs fa-lg mt-4"></i>
 
+                    <br>crosshairs</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cube fa-lg mt-4"></i>
 
+                    <br>cube</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cubes fa-lg mt-4"></i>
 
+                    <br>cubes</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cutlery fa-lg mt-4"></i>
 
+                    <br>cutlery</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dashboard fa-lg mt-4"></i>
 
+                    <br>dashboard
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-database fa-lg mt-4"></i>
 
+                    <br>database</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-desktop fa-lg mt-4"></i>
 
+                    <br>desktop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-diamond fa-lg mt-4"></i>
 
+                    <br>diamond</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dot-circle-o fa-lg mt-4"></i>
 
+                    <br>dot-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-download fa-lg mt-4"></i>
 
+                    <br>download</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-edit fa-lg mt-4"></i>
 
+                    <br>edit
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ellipsis-h fa-lg mt-4"></i>
 
+                    <br>ellipsis-h</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ellipsis-v fa-lg mt-4"></i>
 
+                    <br>ellipsis-v</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-envelope fa-lg mt-4"></i>
 
+                    <br>envelope</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-envelope-o fa-lg mt-4"></i>
 
+                    <br>envelope-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-envelope-square fa-lg mt-4"></i>
 
+                    <br>envelope-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eraser fa-lg mt-4"></i>
 
+                    <br>eraser</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-exchange fa-lg mt-4"></i>
 
+                    <br>exchange</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-exclamation fa-lg mt-4"></i>
 
+                    <br>exclamation</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-exclamation-circle fa-lg mt-4"></i>
 
+                    <br>exclamation-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-exclamation-triangle fa-lg mt-4"></i>
 
+                    <br>exclamation-triangle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-external-link fa-lg mt-4"></i>
 
+                    <br>external-link</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-external-link-square fa-lg mt-4"></i>
 
+                    <br>external-link-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eye fa-lg mt-4"></i>
 
+                    <br>eye</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eye-slash fa-lg mt-4"></i>
 
+                    <br>eye-slash</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eyedropper fa-lg mt-4"></i>
 
+                    <br>eyedropper</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fax fa-lg mt-4"></i>
 
+                    <br>fax</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-feed fa-lg mt-4"></i>
 
+                    <br>feed
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-female fa-lg mt-4"></i>
 
+                    <br>female</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fighter-jet fa-lg mt-4"></i>
 
+                    <br>fighter-jet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-archive-o fa-lg mt-4"></i>
 
+                    <br>file-archive-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-audio-o fa-lg mt-4"></i>
 
+                    <br>file-audio-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-code-o fa-lg mt-4"></i>
 
+                    <br>file-code-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-excel-o fa-lg mt-4"></i>
 
+                    <br>file-excel-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-image-o fa-lg mt-4"></i>
 
+                    <br>file-image-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-movie-o fa-lg mt-4"></i>
 
+                    <br>file-movie-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-pdf-o fa-lg mt-4"></i>
 
+                    <br>file-pdf-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-photo-o fa-lg mt-4"></i>
 
+                    <br>file-photo-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-picture-o fa-lg mt-4"></i>
 
+                    <br>file-picture-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-powerpoint-o fa-lg mt-4"></i>
 
+                    <br>file-powerpoint-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-sound-o fa-lg mt-4"></i>
 
+                    <br>file-sound-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-video-o fa-lg mt-4"></i>
 
+                    <br>file-video-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-word-o fa-lg mt-4"></i>
 
+                    <br>file-word-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-zip-o fa-lg mt-4"></i>
 
+                    <br>file-zip-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-film fa-lg mt-4"></i>
 
+                    <br>film</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-filter fa-lg mt-4"></i>
 
+                    <br>filter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fire fa-lg mt-4"></i>
 
+                    <br>fire</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fire-extinguisher fa-lg mt-4"></i>
 
+                    <br>fire-extinguisher</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-flag fa-lg mt-4"></i>
 
+                    <br>flag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-flag-checkered fa-lg mt-4"></i>
 
+                    <br>flag-checkered</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-flag-o fa-lg mt-4"></i>
 
+                    <br>flag-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-flash fa-lg mt-4"></i>
 
+                    <br>flash
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-flask fa-lg mt-4"></i>
 
+                    <br>flask</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-folder fa-lg mt-4"></i>
 
+                    <br>folder</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-folder-o fa-lg mt-4"></i>
 
+                    <br>folder-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-folder-open fa-lg mt-4"></i>
 
+                    <br>folder-open</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-folder-open-o fa-lg mt-4"></i>
 
+                    <br>folder-open-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-frown-o fa-lg mt-4"></i>
 
+                    <br>frown-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-futbol-o fa-lg mt-4"></i>
 
+                    <br>futbol-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gamepad fa-lg mt-4"></i>
 
+                    <br>gamepad</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gavel fa-lg mt-4"></i>
 
+                    <br>gavel</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gear fa-lg mt-4"></i>
 
+                    <br>gear
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gears fa-lg mt-4"></i>
 
+                    <br>gears
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gift fa-lg mt-4"></i>
 
+                    <br>gift</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-glass fa-lg mt-4"></i>
 
+                    <br>glass</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-globe fa-lg mt-4"></i>
 
+                    <br>globe</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-graduation-cap fa-lg mt-4"></i>
 
+                    <br>graduation-cap</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-group fa-lg mt-4"></i>
 
+                    <br>group
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-grab-o fa-lg mt-4"></i>
 
+                    <br>hand-grab-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-lizard-o fa-lg mt-4"></i>
 
+                    <br>hand-lizard-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-paper-o fa-lg mt-4"></i>
 
+                    <br>hand-paper-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-peace-o fa-lg mt-4"></i>
 
+                    <br>hand-peace-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-pointer-o fa-lg mt-4"></i>
 
+                    <br>hand-pointer-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-rock-o fa-lg mt-4"></i>
 
+                    <br>hand-rock-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-scissors-o fa-lg mt-4"></i>
 
+                    <br>hand-scissors-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-spock-o fa-lg mt-4"></i>
 
+                    <br>hand-spock-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-stop-o fa-lg mt-4"></i>
 
+                    <br>hand-stop-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hashtag fa-lg mt-4"></i>
 
+                    <br>hashtag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hdd-o fa-lg mt-4"></i>
 
+                    <br>hdd-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-headphones fa-lg mt-4"></i>
 
+                    <br>headphones</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-heart fa-lg mt-4"></i>
 
+                    <br>heart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-heart-o fa-lg mt-4"></i>
 
+                    <br>heart-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-heartbeat fa-lg mt-4"></i>
 
+                    <br>heartbeat</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-history fa-lg mt-4"></i>
 
+                    <br>history</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-home fa-lg mt-4"></i>
 
+                    <br>home</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hotel fa-lg mt-4"></i>
 
+                    <br>hotel
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass fa-lg mt-4"></i>
 
+                    <br>hourglass</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-1 fa-lg mt-4"></i>
 
+                    <br>hourglass-1
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-2 fa-lg mt-4"></i>
 
+                    <br>hourglass-2
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-3 fa-lg mt-4"></i>
 
+                    <br>hourglass-3
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-end fa-lg mt-4"></i>
 
+                    <br>hourglass-end</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-half fa-lg mt-4"></i>
 
+                    <br>hourglass-half</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-o fa-lg mt-4"></i>
 
+                    <br>hourglass-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hourglass-start fa-lg mt-4"></i>
 
+                    <br>hourglass-start</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-i-cursor fa-lg mt-4"></i>
 
+                    <br>i-cursor</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-image fa-lg mt-4"></i>
 
+                    <br>image
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-inbox fa-lg mt-4"></i>
 
+                    <br>inbox</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-industry fa-lg mt-4"></i>
 
+                    <br>industry</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-info fa-lg mt-4"></i>
 
+                    <br>info</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-info-circle fa-lg mt-4"></i>
 
+                    <br>info-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-institution fa-lg mt-4"></i>
 
+                    <br>institution
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-key fa-lg mt-4"></i>
 
+                    <br>key</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-keyboard-o fa-lg mt-4"></i>
 
+                    <br>keyboard-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-language fa-lg mt-4"></i>
 
+                    <br>language</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-laptop fa-lg mt-4"></i>
 
+                    <br>laptop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-leaf fa-lg mt-4"></i>
 
+                    <br>leaf</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-legal fa-lg mt-4"></i>
 
+                    <br>legal
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-lemon-o fa-lg mt-4"></i>
 
+                    <br>lemon-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-level-down fa-lg mt-4"></i>
 
+                    <br>level-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-level-up fa-lg mt-4"></i>
 
+                    <br>level-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-life-bouy fa-lg mt-4"></i>
 
+                    <br>life-bouy
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-life-buoy fa-lg mt-4"></i>
 
+                    <br>life-buoy
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-life-ring fa-lg mt-4"></i>
 
+                    <br>life-ring</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-life-saver fa-lg mt-4"></i>
 
+                    <br>life-saver
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-lightbulb-o fa-lg mt-4"></i>
 
+                    <br>lightbulb-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-line-chart fa-lg mt-4"></i>
 
+                    <br>line-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-location-arrow fa-lg mt-4"></i>
 
+                    <br>location-arrow</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-lock fa-lg mt-4"></i>
 
+                    <br>lock</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-magic fa-lg mt-4"></i>
 
+                    <br>magic</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-magnet fa-lg mt-4"></i>
 
+                    <br>magnet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mail-forward fa-lg mt-4"></i>
 
+                    <br>mail-forward
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mail-reply fa-lg mt-4"></i>
 
+                    <br>mail-reply
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mail-reply-all fa-lg mt-4"></i>
 
+                    <br>mail-reply-all
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-male fa-lg mt-4"></i>
 
+                    <br>male</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-map fa-lg mt-4"></i>
 
+                    <br>map</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-map-marker fa-lg mt-4"></i>
 
+                    <br>map-marker</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-map-o fa-lg mt-4"></i>
 
+                    <br>map-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-map-pin fa-lg mt-4"></i>
 
+                    <br>map-pin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-map-signs fa-lg mt-4"></i>
 
+                    <br>map-signs</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-meh-o fa-lg mt-4"></i>
 
+                    <br>meh-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-microphone fa-lg mt-4"></i>
 
+                    <br>microphone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-microphone-slash fa-lg mt-4"></i>
 
+                    <br>microphone-slash</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-minus fa-lg mt-4"></i>
 
+                    <br>minus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-minus-circle fa-lg mt-4"></i>
 
+                    <br>minus-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-minus-square fa-lg mt-4"></i>
 
+                    <br>minus-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-minus-square-o fa-lg mt-4"></i>
 
+                    <br>minus-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mobile fa-lg mt-4"></i>
 
+                    <br>mobile</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mobile-phone fa-lg mt-4"></i>
 
+                    <br>mobile-phone
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-money fa-lg mt-4"></i>
 
+                    <br>money</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-moon-o fa-lg mt-4"></i>
 
+                    <br>moon-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mortar-board fa-lg mt-4"></i>
 
+                    <br>mortar-board
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-motorcycle fa-lg mt-4"></i>
 
+                    <br>motorcycle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mouse-pointer fa-lg mt-4"></i>
 
+                    <br>mouse-pointer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-music fa-lg mt-4"></i>
 
+                    <br>music</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-navicon fa-lg mt-4"></i>
 
+                    <br>navicon
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-newspaper-o fa-lg mt-4"></i>
 
+                    <br>newspaper-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-object-group fa-lg mt-4"></i>
 
+                    <br>object-group</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-object-ungroup fa-lg mt-4"></i>
 
+                    <br>object-ungroup</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paint-brush fa-lg mt-4"></i>
 
+                    <br>paint-brush</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paper-plane fa-lg mt-4"></i>
 
+                    <br>paper-plane</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paper-plane-o fa-lg mt-4"></i>
 
+                    <br>paper-plane-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paw fa-lg mt-4"></i>
 
+                    <br>paw</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pencil fa-lg mt-4"></i>
 
+                    <br>pencil</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pencil-square fa-lg mt-4"></i>
 
+                    <br>pencil-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pencil-square-o fa-lg mt-4"></i>
 
+                    <br>pencil-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-percent fa-lg mt-4"></i>
 
+                    <br>percent</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-phone fa-lg mt-4"></i>
 
+                    <br>phone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-phone-square fa-lg mt-4"></i>
 
+                    <br>phone-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-photo fa-lg mt-4"></i>
 
+                    <br>photo
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-picture-o fa-lg mt-4"></i>
 
+                    <br>picture-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pie-chart fa-lg mt-4"></i>
 
+                    <br>pie-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plane fa-lg mt-4"></i>
 
+                    <br>plane</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plug fa-lg mt-4"></i>
 
+                    <br>plug</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus fa-lg mt-4"></i>
 
+                    <br>plus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus-circle fa-lg mt-4"></i>
 
+                    <br>plus-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus-square fa-lg mt-4"></i>
 
+                    <br>plus-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus-square-o fa-lg mt-4"></i>
 
+                    <br>plus-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-power-off fa-lg mt-4"></i>
 
+                    <br>power-off</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-print fa-lg mt-4"></i>
 
+                    <br>print</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-puzzle-piece fa-lg mt-4"></i>
 
+                    <br>puzzle-piece</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-qrcode fa-lg mt-4"></i>
 
+                    <br>qrcode</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-question fa-lg mt-4"></i>
 
+                    <br>question</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-question-circle fa-lg mt-4"></i>
 
+                    <br>question-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-quote-left fa-lg mt-4"></i>
 
+                    <br>quote-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-quote-right fa-lg mt-4"></i>
 
+                    <br>quote-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-random fa-lg mt-4"></i>
 
+                    <br>random</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-recycle fa-lg mt-4"></i>
 
+                    <br>recycle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-refresh fa-lg mt-4"></i>
 
+                    <br>refresh</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-registered fa-lg mt-4"></i>
 
+                    <br>registered</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-remove fa-lg mt-4"></i>
 
+                    <br>remove
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reorder fa-lg mt-4"></i>
 
+                    <br>reorder
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reply fa-lg mt-4"></i>
 
+                    <br>reply</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reply-all fa-lg mt-4"></i>
 
+                    <br>reply-all</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-retweet fa-lg mt-4"></i>
 
+                    <br>retweet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-road fa-lg mt-4"></i>
 
+                    <br>road</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rocket fa-lg mt-4"></i>
 
+                    <br>rocket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rss fa-lg mt-4"></i>
 
+                    <br>rss</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rss-square fa-lg mt-4"></i>
 
+                    <br>rss-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-search fa-lg mt-4"></i>
 
+                    <br>search</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-search-minus fa-lg mt-4"></i>
 
+                    <br>search-minus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-search-plus fa-lg mt-4"></i>
 
+                    <br>search-plus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-send fa-lg mt-4"></i>
 
+                    <br>send
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-send-o fa-lg mt-4"></i>
 
+                    <br>send-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-server fa-lg mt-4"></i>
 
+                    <br>server</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share fa-lg mt-4"></i>
 
+                    <br>share</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share-alt fa-lg mt-4"></i>
 
+                    <br>share-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share-alt-square fa-lg mt-4"></i>
 
+                    <br>share-alt-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share-square fa-lg mt-4"></i>
 
+                    <br>share-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share-square-o fa-lg mt-4"></i>
 
+                    <br>share-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shield fa-lg mt-4"></i>
 
+                    <br>shield</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ship fa-lg mt-4"></i>
 
+                    <br>ship</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shopping-bag fa-lg mt-4"></i>
 
+                    <br>shopping-bag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shopping-basket fa-lg mt-4"></i>
 
+                    <br>shopping-basket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shopping-cart fa-lg mt-4"></i>
 
+                    <br>shopping-cart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sign-in fa-lg mt-4"></i>
 
+                    <br>sign-in</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sign-out fa-lg mt-4"></i>
 
+                    <br>sign-out</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-signal fa-lg mt-4"></i>
 
+                    <br>signal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sitemap fa-lg mt-4"></i>
 
+                    <br>sitemap</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sliders fa-lg mt-4"></i>
 
+                    <br>sliders</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-smile-o fa-lg mt-4"></i>
 
+                    <br>smile-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-soccer-ball-o fa-lg mt-4"></i>
 
+                    <br>soccer-ball-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort fa-lg mt-4"></i>
 
+                    <br>sort</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-alpha-asc fa-lg mt-4"></i>
 
+                    <br>sort-alpha-asc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-alpha-desc fa-lg mt-4"></i>
 
+                    <br>sort-alpha-desc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-amount-asc fa-lg mt-4"></i>
 
+                    <br>sort-amount-asc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-amount-desc fa-lg mt-4"></i>
 
+                    <br>sort-amount-desc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-asc fa-lg mt-4"></i>
 
+                    <br>sort-asc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-desc fa-lg mt-4"></i>
 
+                    <br>sort-desc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-down fa-lg mt-4"></i>
 
+                    <br>sort-down
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-numeric-asc fa-lg mt-4"></i>
 
+                    <br>sort-numeric-asc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-numeric-desc fa-lg mt-4"></i>
 
+                    <br>sort-numeric-desc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sort-up fa-lg mt-4"></i>
 
+                    <br>sort-up
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-space-shuttle fa-lg mt-4"></i>
 
+                    <br>space-shuttle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-spinner fa-lg mt-4"></i>
 
+                    <br>spinner</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-spoon fa-lg mt-4"></i>
 
+                    <br>spoon</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-square fa-lg mt-4"></i>
 
+                    <br>square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-square-o fa-lg mt-4"></i>
 
+                    <br>square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-star fa-lg mt-4"></i>
 
+                    <br>star</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-star-half fa-lg mt-4"></i>
 
+                    <br>star-half</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-star-half-empty fa-lg mt-4"></i>
 
+                    <br>star-half-empty
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-star-half-full fa-lg mt-4"></i>
 
+                    <br>star-half-full
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-star-half-o fa-lg mt-4"></i>
 
+                    <br>star-half-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-star-o fa-lg mt-4"></i>
 
+                    <br>star-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sticky-note fa-lg mt-4"></i>
 
+                    <br>sticky-note</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sticky-note-o fa-lg mt-4"></i>
 
+                    <br>sticky-note-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-street-view fa-lg mt-4"></i>
 
+                    <br>street-view</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-suitcase fa-lg mt-4"></i>
 
+                    <br>suitcase</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sun-o fa-lg mt-4"></i>
 
+                    <br>sun-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-support fa-lg mt-4"></i>
 
+                    <br>support
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tablet fa-lg mt-4"></i>
 
+                    <br>tablet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tachometer fa-lg mt-4"></i>
 
+                    <br>tachometer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tag fa-lg mt-4"></i>
 
+                    <br>tag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tags fa-lg mt-4"></i>
 
+                    <br>tags</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tasks fa-lg mt-4"></i>
 
+                    <br>tasks</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-taxi fa-lg mt-4"></i>
 
+                    <br>taxi</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-television fa-lg mt-4"></i>
 
+                    <br>television</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-terminal fa-lg mt-4"></i>
 
+                    <br>terminal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumb-tack fa-lg mt-4"></i>
 
+                    <br>thumb-tack</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-down fa-lg mt-4"></i>
 
+                    <br>thumbs-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-o-down fa-lg mt-4"></i>
 
+                    <br>thumbs-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-o-up fa-lg mt-4"></i>
 
+                    <br>thumbs-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-up fa-lg mt-4"></i>
 
+                    <br>thumbs-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ticket fa-lg mt-4"></i>
 
+                    <br>ticket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-times fa-lg mt-4"></i>
 
+                    <br>times</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-times-circle fa-lg mt-4"></i>
 
+                    <br>times-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-times-circle-o fa-lg mt-4"></i>
 
+                    <br>times-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tint fa-lg mt-4"></i>
 
+                    <br>tint</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-down fa-lg mt-4"></i>
 
+                    <br>toggle-down
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-left fa-lg mt-4"></i>
 
+                    <br>toggle-left
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-off fa-lg mt-4"></i>
 
+                    <br>toggle-off</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-on fa-lg mt-4"></i>
 
+                    <br>toggle-on</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-right fa-lg mt-4"></i>
 
+                    <br>toggle-right
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-up fa-lg mt-4"></i>
 
+                    <br>toggle-up
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-trademark fa-lg mt-4"></i>
 
+                    <br>trademark</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-trash fa-lg mt-4"></i>
 
+                    <br>trash</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-trash-o fa-lg mt-4"></i>
 
+                    <br>trash-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tree fa-lg mt-4"></i>
 
+                    <br>tree</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-trophy fa-lg mt-4"></i>
 
+                    <br>trophy</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-truck fa-lg mt-4"></i>
 
+                    <br>truck</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tty fa-lg mt-4"></i>
 
+                    <br>tty</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tv fa-lg mt-4"></i>
 
+                    <br>tv
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-umbrella fa-lg mt-4"></i>
 
+                    <br>umbrella</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-university fa-lg mt-4"></i>
 
+                    <br>university</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-unlock fa-lg mt-4"></i>
 
+                    <br>unlock</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-unlock-alt fa-lg mt-4"></i>
 
+                    <br>unlock-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-unsorted fa-lg mt-4"></i>
 
+                    <br>unsorted
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-upload fa-lg mt-4"></i>
 
+                    <br>upload</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user fa-lg mt-4"></i>
 
+                    <br>user</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-plus fa-lg mt-4"></i>
 
+                    <br>user-plus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-secret fa-lg mt-4"></i>
 
+                    <br>user-secret</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-times fa-lg mt-4"></i>
 
+                    <br>user-times</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-users fa-lg mt-4"></i>
 
+                    <br>users</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-video-camera fa-lg mt-4"></i>
 
+                    <br>video-camera</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-volume-down fa-lg mt-4"></i>
 
+                    <br>volume-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-volume-off fa-lg mt-4"></i>
 
+                    <br>volume-off</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-volume-up fa-lg mt-4"></i>
 
+                    <br>volume-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-warning fa-lg mt-4"></i>
 
+                    <br>warning
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wheelchair fa-lg mt-4"></i>
 
+                    <br>wheelchair</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wifi fa-lg mt-4"></i>
 
+                    <br>wifi</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wrench fa-lg mt-4"></i>
 
+                    <br>wrench</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="hand">
 
+              <div class="card-header">Hand Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-grab-o fa-lg mt-4"></i>
 
+                    <br>hand-grab-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-lizard-o fa-lg mt-4"></i>
 
+                    <br>hand-lizard-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-down fa-lg mt-4"></i>
 
+                    <br>hand-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-left fa-lg mt-4"></i>
 
+                    <br>hand-o-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-right fa-lg mt-4"></i>
 
+                    <br>hand-o-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-up fa-lg mt-4"></i>
 
+                    <br>hand-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-paper-o fa-lg mt-4"></i>
 
+                    <br>hand-paper-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-peace-o fa-lg mt-4"></i>
 
+                    <br>hand-peace-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-pointer-o fa-lg mt-4"></i>
 
+                    <br>hand-pointer-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-rock-o fa-lg mt-4"></i>
 
+                    <br>hand-rock-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-scissors-o fa-lg mt-4"></i>
 
+                    <br>hand-scissors-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-spock-o fa-lg mt-4"></i>
 
+                    <br>hand-spock-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-stop-o fa-lg mt-4"></i>
 
+                    <br>hand-stop-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-down fa-lg mt-4"></i>
 
+                    <br>thumbs-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-o-down fa-lg mt-4"></i>
 
+                    <br>thumbs-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-o-up fa-lg mt-4"></i>
 
+                    <br>thumbs-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-thumbs-up fa-lg mt-4"></i>
 
+                    <br>thumbs-up</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="transportation">
 
+              <div class="card-header">Transportation Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ambulance fa-lg mt-4"></i>
 
+                    <br>ambulance</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-automobile fa-lg mt-4"></i>
 
+                    <br>automobile
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bicycle fa-lg mt-4"></i>
 
+                    <br>bicycle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bus fa-lg mt-4"></i>
 
+                    <br>bus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cab fa-lg mt-4"></i>
 
+                    <br>cab
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-car fa-lg mt-4"></i>
 
+                    <br>car</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fighter-jet fa-lg mt-4"></i>
 
+                    <br>fighter-jet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-motorcycle fa-lg mt-4"></i>
 
+                    <br>motorcycle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plane fa-lg mt-4"></i>
 
+                    <br>plane</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rocket fa-lg mt-4"></i>
 
+                    <br>rocket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ship fa-lg mt-4"></i>
 
+                    <br>ship</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-space-shuttle fa-lg mt-4"></i>
 
+                    <br>space-shuttle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-subway fa-lg mt-4"></i>
 
+                    <br>subway</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-taxi fa-lg mt-4"></i>
 
+                    <br>taxi</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-train fa-lg mt-4"></i>
 
+                    <br>train</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-truck fa-lg mt-4"></i>
 
+                    <br>truck</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wheelchair fa-lg mt-4"></i>
 
+                    <br>wheelchair</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="gender">
 
+              <div class="card-header">Gender Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-genderless fa-lg mt-4"></i>
 
+                    <br>genderless</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-intersex fa-lg mt-4"></i>
 
+                    <br>intersex
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mars fa-lg mt-4"></i>
 
+                    <br>mars</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mars-double fa-lg mt-4"></i>
 
+                    <br>mars-double</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mars-stroke fa-lg mt-4"></i>
 
+                    <br>mars-stroke</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mars-stroke-h fa-lg mt-4"></i>
 
+                    <br>mars-stroke-h</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mars-stroke-v fa-lg mt-4"></i>
 
+                    <br>mars-stroke-v</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mercury fa-lg mt-4"></i>
 
+                    <br>mercury</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-neuter fa-lg mt-4"></i>
 
+                    <br>neuter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-transgender fa-lg mt-4"></i>
 
+                    <br>transgender</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-transgender-alt fa-lg mt-4"></i>
 
+                    <br>transgender-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-venus fa-lg mt-4"></i>
 
+                    <br>venus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-venus-double fa-lg mt-4"></i>
 
+                    <br>venus-double</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-venus-mars fa-lg mt-4"></i>
 
+                    <br>venus-mars</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="file-type">
 
+              <div class="card-header">File Type Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file fa-lg mt-4"></i>
 
+                    <br>file</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-archive-o fa-lg mt-4"></i>
 
+                    <br>file-archive-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-audio-o fa-lg mt-4"></i>
 
+                    <br>file-audio-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-code-o fa-lg mt-4"></i>
 
+                    <br>file-code-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-excel-o fa-lg mt-4"></i>
 
+                    <br>file-excel-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-image-o fa-lg mt-4"></i>
 
+                    <br>file-image-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-movie-o fa-lg mt-4"></i>
 
+                    <br>file-movie-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-o fa-lg mt-4"></i>
 
+                    <br>file-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-pdf-o fa-lg mt-4"></i>
 
+                    <br>file-pdf-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-photo-o fa-lg mt-4"></i>
 
+                    <br>file-photo-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-picture-o fa-lg mt-4"></i>
 
+                    <br>file-picture-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-powerpoint-o fa-lg mt-4"></i>
 
+                    <br>file-powerpoint-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-sound-o fa-lg mt-4"></i>
 
+                    <br>file-sound-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-text fa-lg mt-4"></i>
 
+                    <br>file-text</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-text-o fa-lg mt-4"></i>
 
+                    <br>file-text-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-video-o fa-lg mt-4"></i>
 
+                    <br>file-video-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-word-o fa-lg mt-4"></i>
 
+                    <br>file-word-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-zip-o fa-lg mt-4"></i>
 
+                    <br>file-zip-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="spinner">
 
+              <div class="card-header">Spinner Icons</div>
 
+              <div class="card-body">
 
+                <div class="alert alert-success">
 
+                  <ul class="fa-ul">
 
+                    <li>
 
+                      <i class="fa fa-info-circle fa-li"></i> These icons work great with the
 
+                      <code>fa-spin</code> class.</li>
 
+                  </ul>
 
+                </div>
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle-o-notch fa-lg mt-4 fa-spin"></i>
 
+                    <br>circle-o-notch</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cog fa-lg mt-4"></i>
 
+                    <br>cog</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gear fa-lg mt-4"></i>
 
+                    <br>gear
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-refresh fa-lg mt-4"></i>
 
+                    <br>refresh</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-spinner fa-lg mt-4"></i>
 
+                    <br>spinner</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="form-control">
 
+              <div class="card-header">Form Control Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check-square fa-lg mt-4"></i>
 
+                    <br>check-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-check-square-o fa-lg mt-4"></i>
 
+                    <br>check-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle fa-lg mt-4"></i>
 
+                    <br>circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-circle-o fa-lg mt-4"></i>
 
+                    <br>circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dot-circle-o fa-lg mt-4"></i>
 
+                    <br>dot-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-minus-square fa-lg mt-4"></i>
 
+                    <br>minus-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-minus-square-o fa-lg mt-4"></i>
 
+                    <br>minus-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus-square fa-lg mt-4"></i>
 
+                    <br>plus-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus-square-o fa-lg mt-4"></i>
 
+                    <br>plus-square-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-square fa-lg mt-4"></i>
 
+                    <br>square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-square-o fa-lg mt-4"></i>
 
+                    <br>square-o</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="payment">
 
+              <div class="card-header">Payment Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-amex fa-lg mt-4"></i>
 
+                    <br>cc-amex</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-diners-club fa-lg mt-4"></i>
 
+                    <br>cc-diners-club</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-discover fa-lg mt-4"></i>
 
+                    <br>cc-discover</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-jcb fa-lg mt-4"></i>
 
+                    <br>cc-jcb</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-mastercard fa-lg mt-4"></i>
 
+                    <br>cc-mastercard</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-paypal fa-lg mt-4"></i>
 
+                    <br>cc-paypal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-stripe fa-lg mt-4"></i>
 
+                    <br>cc-stripe</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-visa fa-lg mt-4"></i>
 
+                    <br>cc-visa</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-credit-card fa-lg mt-4"></i>
 
+                    <br>credit-card</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-credit-card-alt fa-lg mt-4"></i>
 
+                    <br>credit-card-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-google-wallet fa-lg mt-4"></i>
 
+                    <br>google-wallet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paypal fa-lg mt-4"></i>
 
+                    <br>paypal</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="chart">
 
+              <div class="card-header">Chart Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-area-chart fa-lg mt-4"></i>
 
+                    <br>area-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bar-chart fa-lg mt-4"></i>
 
+                    <br>bar-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bar-chart-o fa-lg mt-4"></i>
 
+                    <br>bar-chart-o
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-line-chart fa-lg mt-4"></i>
 
+                    <br>line-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pie-chart fa-lg mt-4"></i>
 
+                    <br>pie-chart</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="currency">
 
+              <div class="card-header">Currency Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bitcoin fa-lg mt-4"></i>
 
+                    <br>bitcoin
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-btc fa-lg mt-4"></i>
 
+                    <br>btc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cny fa-lg mt-4"></i>
 
+                    <br>cny
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dollar fa-lg mt-4"></i>
 
+                    <br>dollar
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eur fa-lg mt-4"></i>
 
+                    <br>eur</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-euro fa-lg mt-4"></i>
 
+                    <br>euro
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gbp fa-lg mt-4"></i>
 
+                    <br>gbp</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gg fa-lg mt-4"></i>
 
+                    <br>gg</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gg-circle fa-lg mt-4"></i>
 
+                    <br>gg-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ils fa-lg mt-4"></i>
 
+                    <br>ils</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-inr fa-lg mt-4"></i>
 
+                    <br>inr</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-jpy fa-lg mt-4"></i>
 
+                    <br>jpy</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-krw fa-lg mt-4"></i>
 
+                    <br>krw</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-money fa-lg mt-4"></i>
 
+                    <br>money</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rmb fa-lg mt-4"></i>
 
+                    <br>rmb
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rouble fa-lg mt-4"></i>
 
+                    <br>rouble
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rub fa-lg mt-4"></i>
 
+                    <br>rub</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ruble fa-lg mt-4"></i>
 
+                    <br>ruble
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rupee fa-lg mt-4"></i>
 
+                    <br>rupee
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shekel fa-lg mt-4"></i>
 
+                    <br>shekel
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sheqel fa-lg mt-4"></i>
 
+                    <br>sheqel
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-try fa-lg mt-4"></i>
 
+                    <br>try</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-turkish-lira fa-lg mt-4"></i>
 
+                    <br>turkish-lira
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-usd fa-lg mt-4"></i>
 
+                    <br>usd</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-won fa-lg mt-4"></i>
 
+                    <br>won
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-yen fa-lg mt-4"></i>
 
+                    <br>yen
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="text-editor">
 
+              <div class="card-header">Text Editor Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-align-center fa-lg mt-4"></i>
 
+                    <br>align-center</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-align-justify fa-lg mt-4"></i>
 
+                    <br>align-justify</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-align-left fa-lg mt-4"></i>
 
+                    <br>align-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-align-right fa-lg mt-4"></i>
 
+                    <br>align-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bold fa-lg mt-4"></i>
 
+                    <br>bold</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chain fa-lg mt-4"></i>
 
+                    <br>chain
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chain-broken fa-lg mt-4"></i>
 
+                    <br>chain-broken</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-clipboard fa-lg mt-4"></i>
 
+                    <br>clipboard</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-columns fa-lg mt-4"></i>
 
+                    <br>columns</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-copy fa-lg mt-4"></i>
 
+                    <br>copy
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cut fa-lg mt-4"></i>
 
+                    <br>cut
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dedent fa-lg mt-4"></i>
 
+                    <br>dedent
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eraser fa-lg mt-4"></i>
 
+                    <br>eraser</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file fa-lg mt-4"></i>
 
+                    <br>file</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-o fa-lg mt-4"></i>
 
+                    <br>file-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-text fa-lg mt-4"></i>
 
+                    <br>file-text</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-file-text-o fa-lg mt-4"></i>
 
+                    <br>file-text-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-files-o fa-lg mt-4"></i>
 
+                    <br>files-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-floppy-o fa-lg mt-4"></i>
 
+                    <br>floppy-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-font fa-lg mt-4"></i>
 
+                    <br>font</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-header fa-lg mt-4"></i>
 
+                    <br>header</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-indent fa-lg mt-4"></i>
 
+                    <br>indent</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-italic fa-lg mt-4"></i>
 
+                    <br>italic</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-link fa-lg mt-4"></i>
 
+                    <br>link</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-list fa-lg mt-4"></i>
 
+                    <br>list</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-list-alt fa-lg mt-4"></i>
 
+                    <br>list-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-list-ol fa-lg mt-4"></i>
 
+                    <br>list-ol</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-list-ul fa-lg mt-4"></i>
 
+                    <br>list-ul</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-outdent fa-lg mt-4"></i>
 
+                    <br>outdent</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paperclip fa-lg mt-4"></i>
 
+                    <br>paperclip</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paragraph fa-lg mt-4"></i>
 
+                    <br>paragraph</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paste fa-lg mt-4"></i>
 
+                    <br>paste
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-repeat fa-lg mt-4"></i>
 
+                    <br>repeat</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rotate-left fa-lg mt-4"></i>
 
+                    <br>rotate-left
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rotate-right fa-lg mt-4"></i>
 
+                    <br>rotate-right
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-save fa-lg mt-4"></i>
 
+                    <br>save
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-scissors fa-lg mt-4"></i>
 
+                    <br>scissors</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-strikethrough fa-lg mt-4"></i>
 
+                    <br>strikethrough</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-subscript fa-lg mt-4"></i>
 
+                    <br>subscript</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-superscript fa-lg mt-4"></i>
 
+                    <br>superscript</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-table fa-lg mt-4"></i>
 
+                    <br>table</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-text-height fa-lg mt-4"></i>
 
+                    <br>text-height</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-text-width fa-lg mt-4"></i>
 
+                    <br>text-width</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-th fa-lg mt-4"></i>
 
+                    <br>th</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-th-large fa-lg mt-4"></i>
 
+                    <br>th-large</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-th-list fa-lg mt-4"></i>
 
+                    <br>th-list</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-underline fa-lg mt-4"></i>
 
+                    <br>underline</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-undo fa-lg mt-4"></i>
 
+                    <br>undo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-unlink fa-lg mt-4"></i>
 
+                    <br>unlink
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="directional">
 
+              <div class="card-header">Directional Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-double-down fa-lg mt-4"></i>
 
+                    <br>angle-double-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-double-left fa-lg mt-4"></i>
 
+                    <br>angle-double-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-double-right fa-lg mt-4"></i>
 
+                    <br>angle-double-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-double-up fa-lg mt-4"></i>
 
+                    <br>angle-double-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-down fa-lg mt-4"></i>
 
+                    <br>angle-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-left fa-lg mt-4"></i>
 
+                    <br>angle-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-right fa-lg mt-4"></i>
 
+                    <br>angle-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angle-up fa-lg mt-4"></i>
 
+                    <br>angle-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-down fa-lg mt-4"></i>
 
+                    <br>arrow-circle-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-left fa-lg mt-4"></i>
 
+                    <br>arrow-circle-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-o-down fa-lg mt-4"></i>
 
+                    <br>arrow-circle-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-o-left fa-lg mt-4"></i>
 
+                    <br>arrow-circle-o-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-o-right fa-lg mt-4"></i>
 
+                    <br>arrow-circle-o-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-o-up fa-lg mt-4"></i>
 
+                    <br>arrow-circle-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-right fa-lg mt-4"></i>
 
+                    <br>arrow-circle-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-circle-up fa-lg mt-4"></i>
 
+                    <br>arrow-circle-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-down fa-lg mt-4"></i>
 
+                    <br>arrow-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-left fa-lg mt-4"></i>
 
+                    <br>arrow-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-right fa-lg mt-4"></i>
 
+                    <br>arrow-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrow-up fa-lg mt-4"></i>
 
+                    <br>arrow-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows fa-lg mt-4"></i>
 
+                    <br>arrows</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows-alt fa-lg mt-4"></i>
 
+                    <br>arrows-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows-h fa-lg mt-4"></i>
 
+                    <br>arrows-h</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows-v fa-lg mt-4"></i>
 
+                    <br>arrows-v</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-down fa-lg mt-4"></i>
 
+                    <br>caret-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-left fa-lg mt-4"></i>
 
+                    <br>caret-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-right fa-lg mt-4"></i>
 
+                    <br>caret-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-down fa-lg mt-4"></i>
 
+                    <br>caret-square-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-left fa-lg mt-4"></i>
 
+                    <br>caret-square-o-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-right fa-lg mt-4"></i>
 
+                    <br>caret-square-o-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-square-o-up fa-lg mt-4"></i>
 
+                    <br>caret-square-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-caret-up fa-lg mt-4"></i>
 
+                    <br>caret-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-circle-down fa-lg mt-4"></i>
 
+                    <br>chevron-circle-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-circle-left fa-lg mt-4"></i>
 
+                    <br>chevron-circle-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-circle-right fa-lg mt-4"></i>
 
+                    <br>chevron-circle-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-circle-up fa-lg mt-4"></i>
 
+                    <br>chevron-circle-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-down fa-lg mt-4"></i>
 
+                    <br>chevron-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-left fa-lg mt-4"></i>
 
+                    <br>chevron-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-right fa-lg mt-4"></i>
 
+                    <br>chevron-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chevron-up fa-lg mt-4"></i>
 
+                    <br>chevron-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-exchange fa-lg mt-4"></i>
 
+                    <br>exchange</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-down fa-lg mt-4"></i>
 
+                    <br>hand-o-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-left fa-lg mt-4"></i>
 
+                    <br>hand-o-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-right fa-lg mt-4"></i>
 
+                    <br>hand-o-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hand-o-up fa-lg mt-4"></i>
 
+                    <br>hand-o-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-long-arrow-down fa-lg mt-4"></i>
 
+                    <br>long-arrow-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-long-arrow-left fa-lg mt-4"></i>
 
+                    <br>long-arrow-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-long-arrow-right fa-lg mt-4"></i>
 
+                    <br>long-arrow-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-long-arrow-up fa-lg mt-4"></i>
 
+                    <br>long-arrow-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-down fa-lg mt-4"></i>
 
+                    <br>toggle-down
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-left fa-lg mt-4"></i>
 
+                    <br>toggle-left
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-right fa-lg mt-4"></i>
 
+                    <br>toggle-right
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-toggle-up fa-lg mt-4"></i>
 
+                    <br>toggle-up
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="video-player">
 
+              <div class="card-header">Video Player Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-arrows-alt fa-lg mt-4"></i>
 
+                    <br>arrows-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-backward fa-lg mt-4"></i>
 
+                    <br>backward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-compress fa-lg mt-4"></i>
 
+                    <br>compress</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-eject fa-lg mt-4"></i>
 
+                    <br>eject</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-expand fa-lg mt-4"></i>
 
+                    <br>expand</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fast-backward fa-lg mt-4"></i>
 
+                    <br>fast-backward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fast-forward fa-lg mt-4"></i>
 
+                    <br>fast-forward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-forward fa-lg mt-4"></i>
 
+                    <br>forward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pause fa-lg mt-4"></i>
 
+                    <br>pause</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pause-circle fa-lg mt-4"></i>
 
+                    <br>pause-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pause-circle-o fa-lg mt-4"></i>
 
+                    <br>pause-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-play fa-lg mt-4"></i>
 
+                    <br>play</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-play-circle fa-lg mt-4"></i>
 
+                    <br>play-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-play-circle-o fa-lg mt-4"></i>
 
+                    <br>play-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-random fa-lg mt-4"></i>
 
+                    <br>random</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-step-backward fa-lg mt-4"></i>
 
+                    <br>step-backward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-step-forward fa-lg mt-4"></i>
 
+                    <br>step-forward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stop fa-lg mt-4"></i>
 
+                    <br>stop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stop-circle fa-lg mt-4"></i>
 
+                    <br>stop-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stop-circle-o fa-lg mt-4"></i>
 
+                    <br>stop-circle-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-youtube-play fa-lg mt-4"></i>
 
+                    <br>youtube-play</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="brand">
 
+              <div class="card-header">Brand Icons</div>
 
+              <div class="card-body">
 
+                <div class="alert alert-warning">
 
+                  <h4>
 
+                    <i class="fa fa-warning"></i> Warning!</h4> Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please
 
+                  <a class="alert-link" href="https://adblockplus.org/en/bugs">report an issue with Adblock Plus</a> if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
 
+                </div>
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-500px fa-lg mt-4"></i>
 
+                    <br>500px</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-adn fa-lg mt-4"></i>
 
+                    <br>adn</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-amazon fa-lg mt-4"></i>
 
+                    <br>amazon</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-android fa-lg mt-4"></i>
 
+                    <br>android</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-angellist fa-lg mt-4"></i>
 
+                    <br>angellist</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-apple fa-lg mt-4"></i>
 
+                    <br>apple</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-behance fa-lg mt-4"></i>
 
+                    <br>behance</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-behance-square fa-lg mt-4"></i>
 
+                    <br>behance-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bitbucket fa-lg mt-4"></i>
 
+                    <br>bitbucket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bitbucket-square fa-lg mt-4"></i>
 
+                    <br>bitbucket-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bitcoin fa-lg mt-4"></i>
 
+                    <br>bitcoin
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-black-tie fa-lg mt-4"></i>
 
+                    <br>black-tie</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bluetooth fa-lg mt-4"></i>
 
+                    <br>bluetooth</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-bluetooth-b fa-lg mt-4"></i>
 
+                    <br>bluetooth-b</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-btc fa-lg mt-4"></i>
 
+                    <br>btc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-buysellads fa-lg mt-4"></i>
 
+                    <br>buysellads</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-amex fa-lg mt-4"></i>
 
+                    <br>cc-amex</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-diners-club fa-lg mt-4"></i>
 
+                    <br>cc-diners-club</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-discover fa-lg mt-4"></i>
 
+                    <br>cc-discover</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-jcb fa-lg mt-4"></i>
 
+                    <br>cc-jcb</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-mastercard fa-lg mt-4"></i>
 
+                    <br>cc-mastercard</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-paypal fa-lg mt-4"></i>
 
+                    <br>cc-paypal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-stripe fa-lg mt-4"></i>
 
+                    <br>cc-stripe</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-cc-visa fa-lg mt-4"></i>
 
+                    <br>cc-visa</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-chrome fa-lg mt-4"></i>
 
+                    <br>chrome</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-codepen fa-lg mt-4"></i>
 
+                    <br>codepen</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-codiepie fa-lg mt-4"></i>
 
+                    <br>codiepie</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-connectdevelop fa-lg mt-4"></i>
 
+                    <br>connectdevelop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-contao fa-lg mt-4"></i>
 
+                    <br>contao</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-css3 fa-lg mt-4"></i>
 
+                    <br>css3</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dashcube fa-lg mt-4"></i>
 
+                    <br>dashcube</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-delicious fa-lg mt-4"></i>
 
+                    <br>delicious</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-deviantart fa-lg mt-4"></i>
 
+                    <br>deviantart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-digg fa-lg mt-4"></i>
 
+                    <br>digg</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dribbble fa-lg mt-4"></i>
 
+                    <br>dribbble</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-dropbox fa-lg mt-4"></i>
 
+                    <br>dropbox</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-drupal fa-lg mt-4"></i>
 
+                    <br>drupal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-edge fa-lg mt-4"></i>
 
+                    <br>edge</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-empire fa-lg mt-4"></i>
 
+                    <br>empire</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-expeditedssl fa-lg mt-4"></i>
 
+                    <br>expeditedssl</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-facebook fa-lg mt-4"></i>
 
+                    <br>facebook</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-facebook-f fa-lg mt-4"></i>
 
+                    <br>facebook-f
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-facebook-official fa-lg mt-4"></i>
 
+                    <br>facebook-official</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-facebook-square fa-lg mt-4"></i>
 
+                    <br>facebook-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-firefox fa-lg mt-4"></i>
 
+                    <br>firefox</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-flickr fa-lg mt-4"></i>
 
+                    <br>flickr</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fonticons fa-lg mt-4"></i>
 
+                    <br>fonticons</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-fort-awesome fa-lg mt-4"></i>
 
+                    <br>fort-awesome</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-forumbee fa-lg mt-4"></i>
 
+                    <br>forumbee</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-foursquare fa-lg mt-4"></i>
 
+                    <br>foursquare</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ge fa-lg mt-4"></i>
 
+                    <br>ge
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-get-pocket fa-lg mt-4"></i>
 
+                    <br>get-pocket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gg fa-lg mt-4"></i>
 
+                    <br>gg</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gg-circle fa-lg mt-4"></i>
 
+                    <br>gg-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-git fa-lg mt-4"></i>
 
+                    <br>git</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-git-square fa-lg mt-4"></i>
 
+                    <br>git-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-github fa-lg mt-4"></i>
 
+                    <br>github</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-github-alt fa-lg mt-4"></i>
 
+                    <br>github-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-github-square fa-lg mt-4"></i>
 
+                    <br>github-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gittip fa-lg mt-4"></i>
 
+                    <br>gittip
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-google fa-lg mt-4"></i>
 
+                    <br>google</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-google-plus fa-lg mt-4"></i>
 
+                    <br>google-plus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-google-plus-square fa-lg mt-4"></i>
 
+                    <br>google-plus-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-google-wallet fa-lg mt-4"></i>
 
+                    <br>google-wallet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-gratipay fa-lg mt-4"></i>
 
+                    <br>gratipay</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hacker-news fa-lg mt-4"></i>
 
+                    <br>hacker-news</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-houzz fa-lg mt-4"></i>
 
+                    <br>houzz</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-html5 fa-lg mt-4"></i>
 
+                    <br>html5</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-instagram fa-lg mt-4"></i>
 
+                    <br>instagram</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-internet-explorer fa-lg mt-4"></i>
 
+                    <br>internet-explorer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ioxhost fa-lg mt-4"></i>
 
+                    <br>ioxhost</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-joomla fa-lg mt-4"></i>
 
+                    <br>joomla</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-jsfiddle fa-lg mt-4"></i>
 
+                    <br>jsfiddle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-lastfm fa-lg mt-4"></i>
 
+                    <br>lastfm</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-lastfm-square fa-lg mt-4"></i>
 
+                    <br>lastfm-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-leanpub fa-lg mt-4"></i>
 
+                    <br>leanpub</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-linkedin fa-lg mt-4"></i>
 
+                    <br>linkedin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-linkedin-square fa-lg mt-4"></i>
 
+                    <br>linkedin-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-linux fa-lg mt-4"></i>
 
+                    <br>linux</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-maxcdn fa-lg mt-4"></i>
 
+                    <br>maxcdn</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-meanpath fa-lg mt-4"></i>
 
+                    <br>meanpath</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-medium fa-lg mt-4"></i>
 
+                    <br>medium</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-mixcloud fa-lg mt-4"></i>
 
+                    <br>mixcloud</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-modx fa-lg mt-4"></i>
 
+                    <br>modx</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-odnoklassniki fa-lg mt-4"></i>
 
+                    <br>odnoklassniki</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-odnoklassniki-square fa-lg mt-4"></i>
 
+                    <br>odnoklassniki-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-opencart fa-lg mt-4"></i>
 
+                    <br>opencart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-openid fa-lg mt-4"></i>
 
+                    <br>openid</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-opera fa-lg mt-4"></i>
 
+                    <br>opera</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-optin-monster fa-lg mt-4"></i>
 
+                    <br>optin-monster</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pagelines fa-lg mt-4"></i>
 
+                    <br>pagelines</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-paypal fa-lg mt-4"></i>
 
+                    <br>paypal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pied-piper fa-lg mt-4"></i>
 
+                    <br>pied-piper</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pied-piper-alt fa-lg mt-4"></i>
 
+                    <br>pied-piper-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pinterest fa-lg mt-4"></i>
 
+                    <br>pinterest</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pinterest-p fa-lg mt-4"></i>
 
+                    <br>pinterest-p</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-pinterest-square fa-lg mt-4"></i>
 
+                    <br>pinterest-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-product-hunt fa-lg mt-4"></i>
 
+                    <br>product-hunt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-qq fa-lg mt-4"></i>
 
+                    <br>qq</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ra fa-lg mt-4"></i>
 
+                    <br>ra
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-rebel fa-lg mt-4"></i>
 
+                    <br>rebel</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reddit fa-lg mt-4"></i>
 
+                    <br>reddit</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reddit-alien fa-lg mt-4"></i>
 
+                    <br>reddit-alien</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-reddit-square fa-lg mt-4"></i>
 
+                    <br>reddit-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-renren fa-lg mt-4"></i>
 
+                    <br>renren</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-safari fa-lg mt-4"></i>
 
+                    <br>safari</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-scribd fa-lg mt-4"></i>
 
+                    <br>scribd</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-sellsy fa-lg mt-4"></i>
 
+                    <br>sellsy</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share-alt fa-lg mt-4"></i>
 
+                    <br>share-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-share-alt-square fa-lg mt-4"></i>
 
+                    <br>share-alt-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-shirtsinbulk fa-lg mt-4"></i>
 
+                    <br>shirtsinbulk</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-simplybuilt fa-lg mt-4"></i>
 
+                    <br>simplybuilt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-skyatlas fa-lg mt-4"></i>
 
+                    <br>skyatlas</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-skype fa-lg mt-4"></i>
 
+                    <br>skype</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-slack fa-lg mt-4"></i>
 
+                    <br>slack</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-slideshare fa-lg mt-4"></i>
 
+                    <br>slideshare</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-soundcloud fa-lg mt-4"></i>
 
+                    <br>soundcloud</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-spotify fa-lg mt-4"></i>
 
+                    <br>spotify</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stack-exchange fa-lg mt-4"></i>
 
+                    <br>stack-exchange</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stack-overflow fa-lg mt-4"></i>
 
+                    <br>stack-overflow</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-steam fa-lg mt-4"></i>
 
+                    <br>steam</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-steam-square fa-lg mt-4"></i>
 
+                    <br>steam-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stumbleupon fa-lg mt-4"></i>
 
+                    <br>stumbleupon</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stumbleupon-circle fa-lg mt-4"></i>
 
+                    <br>stumbleupon-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tencent-weibo fa-lg mt-4"></i>
 
+                    <br>tencent-weibo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-trello fa-lg mt-4"></i>
 
+                    <br>trello</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tripadvisor fa-lg mt-4"></i>
 
+                    <br>tripadvisor</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tumblr fa-lg mt-4"></i>
 
+                    <br>tumblr</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-tumblr-square fa-lg mt-4"></i>
 
+                    <br>tumblr-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-twitch fa-lg mt-4"></i>
 
+                    <br>twitch</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-twitter fa-lg mt-4"></i>
 
+                    <br>twitter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-twitter-square fa-lg mt-4"></i>
 
+                    <br>twitter-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-usb fa-lg mt-4"></i>
 
+                    <br>usb</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-viacoin fa-lg mt-4"></i>
 
+                    <br>viacoin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-vimeo fa-lg mt-4"></i>
 
+                    <br>vimeo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-vimeo-square fa-lg mt-4"></i>
 
+                    <br>vimeo-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-vine fa-lg mt-4"></i>
 
+                    <br>vine</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-vk fa-lg mt-4"></i>
 
+                    <br>vk</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wechat fa-lg mt-4"></i>
 
+                    <br>wechat
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-weibo fa-lg mt-4"></i>
 
+                    <br>weibo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-weixin fa-lg mt-4"></i>
 
+                    <br>weixin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-whatsapp fa-lg mt-4"></i>
 
+                    <br>whatsapp</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wikipedia-w fa-lg mt-4"></i>
 
+                    <br>wikipedia-w</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-windows fa-lg mt-4"></i>
 
+                    <br>windows</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wordpress fa-lg mt-4"></i>
 
+                    <br>wordpress</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-xing fa-lg mt-4"></i>
 
+                    <br>xing</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-xing-square fa-lg mt-4"></i>
 
+                    <br>xing-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-y-combinator fa-lg mt-4"></i>
 
+                    <br>y-combinator</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-y-combinator-square fa-lg mt-4"></i>
 
+                    <br>y-combinator-square
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-yahoo fa-lg mt-4"></i>
 
+                    <br>yahoo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-yc fa-lg mt-4"></i>
 
+                    <br>yc
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-yc-square fa-lg mt-4"></i>
 
+                    <br>yc-square
 
+                    <span class="text-muted">(alias)</span>
 
+                  </div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-yelp fa-lg mt-4"></i>
 
+                    <br>yelp</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-youtube fa-lg mt-4"></i>
 
+                    <br>youtube</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-youtube-play fa-lg mt-4"></i>
 
+                    <br>youtube-play</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-youtube-square fa-lg mt-4"></i>
 
+                    <br>youtube-square</div>
 
+                </div>
 
+                <div class="alert alert-success mt-4">
 
+                  <ul class="margin-bottom-none padding-left-lg">
 
+                    <li>All brand icons are trademarks of their respective owners.</li>
 
+                    <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
 
+                    <li>Brand icons should only be used to represent the company or product to which they refer.</li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="card" id="medical">
 
+              <div class="card-header">Medical Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-ambulance fa-lg mt-4"></i>
 
+                    <br>ambulance</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-h-square fa-lg mt-4"></i>
 
+                    <br>h-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-heart fa-lg mt-4"></i>
 
+                    <br>heart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-heart-o fa-lg mt-4"></i>
 
+                    <br>heart-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-heartbeat fa-lg mt-4"></i>
 
+                    <br>heartbeat</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-hospital-o fa-lg mt-4"></i>
 
+                    <br>hospital-o</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-medkit fa-lg mt-4"></i>
 
+                    <br>medkit</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-plus-square fa-lg mt-4"></i>
 
+                    <br>plus-square</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-stethoscope fa-lg mt-4"></i>
 
+                    <br>stethoscope</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-user-md fa-lg mt-4"></i>
 
+                    <br>user-md</div>
 
+                  <div class="col-6 col-sm-4 col-md-3 col-lg-2">
 
+                    <i class="fa fa-wheelchair fa-lg mt-4"></i>
 
+                    <br>wheelchair</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1046 - 0
static/icons/simple-line-icons.html
View File 

@@ -0,0 +1,1046 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="card card-default">
 
+              <div class="card-header">
 
+                <i class="fa fa-picture-o"></i> Simple Line Icons</div>
 
+              <div class="card-body">
 
+                <div class="row text-center">
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-user icons font-2xl d-block mt-4"></i>icon-user</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-people icons font-2xl d-block mt-4"></i>icon-people</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-login icons font-2xl d-block mt-4"></i>icon-login</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-map icons font-2xl d-block mt-4"></i>icon-map</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-list icons font-2xl d-block mt-4"></i>icon-list</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-options icons font-2xl d-block mt-4"></i>icon-options</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-check icons font-2xl d-block mt-4"></i>icon-check</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-close icons font-2xl d-block mt-4"></i>icon-close</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-present icons font-2xl d-block mt-4"></i>icon-present</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-film icons font-2xl d-block mt-4"></i>icon-film</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-support icons font-2xl d-block mt-4"></i>icon-support</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-share icons font-2xl d-block mt-4"></i>icon-share</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-question icons font-2xl d-block mt-4"></i>icon-question</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-note icons font-2xl d-block mt-4"></i>icon-note</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-home icons font-2xl d-block mt-4"></i>icon-home</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-like icons font-2xl d-block mt-4"></i>icon-like</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-info icons font-2xl d-block mt-4"></i>icon-info</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-key icons font-2xl d-block mt-4"></i>icon-key</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-link icons font-2xl d-block mt-4"></i>icon-link</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-power icons font-2xl d-block mt-4"></i>icon-power</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-star icons font-2xl d-block mt-4"></i>icon-star</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-target icons font-2xl d-block mt-4"></i>icon-target</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube</div>
 
+                  <div class="col-6 col-sm-4 col-md-3">
 
+                    <i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox</div>
 
+                </div>
 
+                <!-- /.row-->
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

BIN
static/img/avatars/1.jpg
View File


BIN
static/img/avatars/2.jpg
View File


BIN
static/img/avatars/3.jpg
View File


BIN
static/img/avatars/4.jpg
View File


BIN
static/img/avatars/5.jpg
View File


BIN
static/img/avatars/6.jpg
View File


BIN
static/img/avatars/7.jpg
View File


BIN
static/img/avatars/8.jpg
View File


+ 53 - 0
static/img/brand/logo.svg
View File 

@@ -0,0 +1,53 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
 
+<style type="text/css">
 
+	.st0{fill:#1FA8D7;}
 
+	.st1{fill:#FFFFFF;}
 
+	.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
 
+	.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
 
+	.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
 
+	.st5{fill:#333333;}
 
+	.st6{fill:#1EA7D6;}
 
+</style>
 
+<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
 
+<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 
+	86.6,166.7 144.3,133.3 115.5,116.7 "/>
 
+<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
 
+<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
 
+<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
 
+<polygon class="st4" points="86.6,100 0,50 0,150 "/>
 
+<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
 
+<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
 
+<g>
 
+	<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
 
+		c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
 
+		c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
 
+		c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
 
+		c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
 
+		c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
 
+		c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
 
+		C289.3,127.4,289.9,127.3,290.4,127.3z"/>
 
+	<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
 
+		c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
 
+		c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
 
+		c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
 
+		C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
 
+		c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
 
+		c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
 
+		c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
 
+	<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
 
+		c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
 
+		c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
 
+		c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
 
+		c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
 
+	<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
 
+	<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
 
+		h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
 
+		s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
 
+		c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
 
+	<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
 
+</g>
 
+</svg>

+ 17 - 0
static/img/brand/sygnet.svg
View File 

@@ -0,0 +1,17 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 width="173.2px" height="200px" viewBox="0 0 173.2 200" enable-background="new 0 0 173.2 200" xml:space="preserve">
 
+<polygon fill="#1FA8D7" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
 
+<polygon fill="#FFFFFF" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 
+	86.6,166.7 144.3,133.3 115.5,116.7 "/>
 
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,50 86.6,100 86.6,0 "/>
 
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,150 86.6,200 86.6,100 "/>
 
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="86.6,100 173.2,150 173.2,50 
+	"/>
 
+<polygon fill-opacity="0" points="86.6,100 0,50 0,150 "/>
 
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,150 86.6,100 86.6,200 
+	"/>
 
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,50 86.6,0 86.6,100 "/>
 
+</svg>

BIN
static/img/favicon.ico
View File


File diff suppressed because it is too large
+ 5 - 0
static/js/bootstrap.min.js


+ 141 - 0
static/js/charts.js
View File 

@@ -0,0 +1,141 @@
 
+"use strict";
 
+
 
+/* eslint-disable object-curly-newline */
 
+
 
+/* global Chart */
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): main.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+/* eslint-disable no-magic-numbers */
 
+// random Numbers
 
+var random = function random() {
 
+  return Math.round(Math.random() * 100);
 
+}; // eslint-disable-next-line no-unused-vars
 
+
 
+
 
+var lineChart = new Chart($('#canvas-1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(220, 220, 220, 0.2)',
 
+      borderColor: 'rgba(220, 220, 220, 1)',
 
+      pointBackgroundColor: 'rgba(220, 220, 220, 1)',
 
+      pointBorderColor: '#fff',
 
+      data: [random(), random(), random(), random(), random(), random(), random()]
 
+    }, {
 
+      label: 'My Second dataset',
 
+      backgroundColor: 'rgba(151, 187, 205, 0.2)',
 
+      borderColor: 'rgba(151, 187, 205, 1)',
 
+      pointBackgroundColor: 'rgba(151, 187, 205, 1)',
 
+      pointBorderColor: '#fff',
 
+      data: [random(), random(), random(), random(), random(), random(), random()]
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var barChart = new Chart($('#canvas-2'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      backgroundColor: 'rgba(220, 220, 220, 0.5)',
 
+      borderColor: 'rgba(220, 220, 220, 0.8)',
 
+      highlightFill: 'rgba(220, 220, 220, 0.75)',
 
+      highlightStroke: 'rgba(220, 220, 220, 1)',
 
+      data: [random(), random(), random(), random(), random(), random(), random()]
 
+    }, {
 
+      backgroundColor: 'rgba(151, 187, 205, 0.5)',
 
+      borderColor: 'rgba(151, 187, 205, 0.8)',
 
+      highlightFill: 'rgba(151, 187, 205, 0.75)',
 
+      highlightStroke: 'rgba(151, 187, 205, 1)',
 
+      data: [random(), random(), random(), random(), random(), random(), random()]
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var doughnutChart = new Chart($('#canvas-3'), {
 
+  type: 'doughnut',
 
+  data: {
 
+    labels: ['Red', 'Green', 'Yellow'],
 
+    datasets: [{
 
+      data: [300, 50, 100],
 
+      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
 
+      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var radarChart = new Chart($('#canvas-4'), {
 
+  type: 'radar',
 
+  data: {
 
+    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(220, 220, 220, 0.2)',
 
+      borderColor: 'rgba(220, 220, 220, 1)',
 
+      pointBackgroundColor: 'rgba(220, 220, 220, 1)',
 
+      pointBorderColor: '#fff',
 
+      pointHighlightFill: '#fff',
 
+      pointHighlightStroke: 'rgba(220, 220, 220, 1)',
 
+      data: [65, 59, 90, 81, 56, 55, 40]
 
+    }, {
 
+      label: 'My Second dataset',
 
+      backgroundColor: 'rgba(151, 187, 205, 0.2)',
 
+      borderColor: 'rgba(151, 187, 205, 1)',
 
+      pointBackgroundColor: 'rgba(151, 187, 205, 1)',
 
+      pointBorderColor: '#fff',
 
+      pointHighlightFill: '#fff',
 
+      pointHighlightStroke: 'rgba(151, 187, 205, 1)',
 
+      data: [28, 48, 40, 19, 96, 27, 100]
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var pieChart = new Chart($('#canvas-5'), {
 
+  type: 'pie',
 
+  data: {
 
+    labels: ['Red', 'Green', 'Yellow'],
 
+    datasets: [{
 
+      data: [300, 50, 100],
 
+      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
 
+      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var polarAreaChart = new Chart($('#canvas-6'), {
 
+  type: 'polarArea',
 
+  data: {
 
+    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
 
+    datasets: [{
 
+      data: [11, 16, 7, 3, 14],
 
+      backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+});
 
+//# sourceMappingURL=charts.js.map

File diff suppressed because it is too large
+ 0 - 0
static/js/charts.js.map


+ 15 - 0
static/js/colors.js
View File 

@@ -0,0 +1,15 @@
 
+"use strict";
 
+
 
+/* global rgbToHex */
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): colors.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+$('.theme-color').each(function () {
 
+  var Color = $(this).css('backgroundColor');
 
+  $(this).parent().append("\n    <table class=\"w-100\">\n      <tr>\n        <td class=\"text-muted\">HEX:</td>\n        <td class=\"font-weight-bold\">" + rgbToHex(Color) + "</td>\n      </tr>\n      <tr>\n        <td class=\"text-muted\">RGB:</td>\n        <td class=\"font-weight-bold\">" + Color + "</td>\n      </tr>\n    </table>\n  ");
 
+});
 
+//# sourceMappingURL=colors.js.map

+ 1 - 0
static/js/colors.js.map
View File 

@@ -0,0 +1 @@
 
+{"version":3,"sources":["src/colors.js"],"names":["$","each","Color","css","parent","append","rgbToHex"],"mappings":";;AAAA;;AAGA;;;;;;AAOAA,CAAC,CAAC,cAAD,CAAD,CAAkBC,IAAlB,CAAuB,YAAY;AACjC,MAAMC,KAAK,GAAGF,CAAC,CAAC,IAAD,CAAD,CAAQG,GAAR,CAAY,iBAAZ,CAAd;AACAH,EAAAA,CAAC,CAAC,IAAD,CAAD,CAAQI,MAAR,GAAiBC,MAAjB,oIAIqCC,QAAQ,CAACJ,KAAD,CAJ7C,2HAQqCA,KARrC;AAYD,CAdD","sourcesContent":["/* global rgbToHex */\nimport $ from 'jquery'\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Free Boostrap Admin Template (v2.1.15): colors.js\n * Licensed under MIT (https://coreui.io/license)\n * --------------------------------------------------------------------------\n */\n\n$('.theme-color').each(function () {\n  const Color = $(this).css('backgroundColor')\n  $(this).parent().append(`\n    <table class=\"w-100\">\n      <tr>\n        <td class=\"text-muted\">HEX:</td>\n        <td class=\"font-weight-bold\">${rgbToHex(Color)}</td>\n      </tr>\n      <tr>\n        <td class=\"text-muted\">RGB:</td>\n        <td class=\"font-weight-bold\">${Color}</td>\n      </tr>\n    </table>\n  `)\n})\n"],"file":"colors.js"}

File diff suppressed because it is too large
+ 4 - 0
static/js/core.min.js


File diff suppressed because it is too large
+ 1 - 0
static/js/dash.all.min.js


File diff suppressed because it is too large
+ 1 - 0
static/js/jquery.min.js


+ 340 - 0
static/js/main.js
View File 

@@ -0,0 +1,340 @@
 
+"use strict";
 
+
 
+/* eslint-disable object-shorthand */
 
+
 
+/* global Chart, CustomTooltips, getStyle, hexToRgba */
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): main.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+/* eslint-disable no-magic-numbers */
 
+// Disable the on-canvas tooltip
 
+Chart.defaults.global.pointHitDetectionRadius = 1;
 
+Chart.defaults.global.tooltips.enabled = false;
 
+Chart.defaults.global.tooltips.mode = 'index';
 
+Chart.defaults.global.tooltips.position = 'nearest';
 
+Chart.defaults.global.tooltips.custom = CustomTooltips;
 
+Chart.defaults.global.tooltips.intersect = true;
 
+
 
+Chart.defaults.global.tooltips.callbacks.labelColor = function (tooltipItem, chart) {
 
+  return {
 
+    backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor
 
+  };
 
+}; // eslint-disable-next-line no-unused-vars
 
+
 
+
 
+var cardChart1 = new Chart($('#card-chart1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: getStyle('--primary'),
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [65, 59, 84, 84, 51, 55, 40]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: 35,
 
+          max: 89
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart2 = new Chart($('#card-chart2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: getStyle('--info'),
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [1, 18, 9, 17, 34, 22, 11]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: -4,
 
+          max: 39
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        tension: 0.00001,
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart3 = new Chart($('#card-chart3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.2)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [78, 81, 80, 45, 34, 12, 40]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 2
 
+      },
 
+      point: {
 
+        radius: 0,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart4 = new Chart($('#card-chart4'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.2)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false,
 
+        barPercentage: 0.6
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var mainChart = new Chart($('#main-chart'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: hexToRgba(getStyle('--info'), 10),
 
+      borderColor: getStyle('--info'),
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [165, 180, 70, 69, 77, 57, 125, 165, 172, 91, 173, 138, 155, 89, 50, 161, 65, 163, 160, 103, 114, 185, 125, 196, 183, 64, 137, 95, 112, 175]
 
+    }, {
 
+      label: 'My Second dataset',
 
+      backgroundColor: 'transparent',
 
+      borderColor: getStyle('--success'),
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [92, 97, 80, 100, 86, 97, 83, 98, 87, 98, 93, 83, 87, 98, 96, 84, 91, 97, 88, 86, 94, 86, 95, 91, 98, 91, 92, 80, 83, 82]
 
+    }, {
 
+      label: 'My Third dataset',
 
+      backgroundColor: 'transparent',
 
+      borderColor: getStyle('--danger'),
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 1,
 
+      borderDash: [8, 5],
 
+      data: [65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          drawOnChartArea: false
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        ticks: {
 
+          beginAtZero: true,
 
+          maxTicksLimit: 5,
 
+          stepSize: Math.ceil(250 / 5),
 
+          max: 250
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0,
 
+        hitRadius: 10,
 
+        hoverRadius: 4,
 
+        hoverBorderWidth: 3
 
+      }
 
+    }
 
+  }
 
+});
 
+var brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 
+var brandBoxChartOptions = {
 
+  responsive: true,
 
+  maintainAspectRatio: false,
 
+  legend: {
 
+    display: false
 
+  },
 
+  scales: {
 
+    xAxes: [{
 
+      display: false
 
+    }],
 
+    yAxes: [{
 
+      display: false
 
+    }]
 
+  },
 
+  elements: {
 
+    point: {
 
+      radius: 0,
 
+      hitRadius: 10,
 
+      hoverRadius: 4,
 
+      hoverBorderWidth: 3
 
+    }
 
+  } // eslint-disable-next-line no-unused-vars
 
+
 
+};
 
+var brandBoxChart1 = new Chart($('#social-box-chart-1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [65, 59, 84, 84, 51, 55, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var brandBoxChart2 = new Chart($('#social-box-chart-2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [1, 13, 9, 17, 34, 41, 38]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var brandBoxChart3 = new Chart($('#social-box-chart-3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [78, 81, 80, 45, 34, 12, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var brandBoxChart4 = new Chart($('#social-box-chart-4'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [35, 23, 56, 22, 97, 23, 64]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+});
 
+//# sourceMappingURL=main.js.map

File diff suppressed because it is too large
+ 0 - 0
static/js/main.js.map


File diff suppressed because it is too large
+ 1 - 0
static/js/pace.min.js


File diff suppressed because it is too large
+ 5 - 0
static/js/perfect-scrollbar.min.js


+ 13 - 0
static/js/popovers.js
View File 

@@ -0,0 +1,13 @@
 
+"use strict";
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): popovers.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+$('[data-toggle="popover"]').popover();
 
+$('.popover-dismiss').popover({
 
+  trigger: 'focus'
 
+});
 
+//# sourceMappingURL=popovers.js.map

+ 1 - 0
static/js/popovers.js.map
View File 

@@ -0,0 +1 @@
 
+{"version":3,"sources":["src/popovers.js"],"names":["$","popover","trigger"],"mappings":";;AAEA;;;;;;AAOAA,CAAC,CAAC,yBAAD,CAAD,CAA6BC,OAA7B;AACAD,CAAC,CAAC,kBAAD,CAAD,CAAsBC,OAAtB,CAA8B;AAC5BC,EAAAA,OAAO,EAAE;AADmB,CAA9B","sourcesContent":["import $ from 'jquery'\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Free Boostrap Admin Template (v2.1.15): popovers.js\n * Licensed under MIT (https://coreui.io/license)\n * --------------------------------------------------------------------------\n */\n\n$('[data-toggle=\"popover\"]').popover()\n$('.popover-dismiss').popover({\n  trigger: 'focus'\n})\n"],"file":"popovers.js"}

File diff suppressed because it is too large
+ 3 - 0
static/js/popper.min.js


+ 150 - 0
static/js/src/charts.js
View File 

@@ -0,0 +1,150 @@
 
+/* eslint-disable object-curly-newline */
 
+/* global Chart */
 
+import $ from 'jquery'
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): main.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+/* eslint-disable no-magic-numbers */
 
+// random Numbers
 
+const random = () => Math.round(Math.random() * 100)
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const lineChart = new Chart($('#canvas-1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets : [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor : 'rgba(220, 220, 220, 0.2)',
 
+        borderColor : 'rgba(220, 220, 220, 1)',
 
+        pointBackgroundColor : 'rgba(220, 220, 220, 1)',
 
+        pointBorderColor : '#fff',
 
+        data : [random(), random(), random(), random(), random(), random(), random()]
 
+      },
 
+      {
 
+        label: 'My Second dataset',
 
+        backgroundColor : 'rgba(151, 187, 205, 0.2)',
 
+        borderColor : 'rgba(151, 187, 205, 1)',
 
+        pointBackgroundColor : 'rgba(151, 187, 205, 1)',
 
+        pointBorderColor : '#fff',
 
+        data : [random(), random(), random(), random(), random(), random(), random()]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const barChart = new Chart($('#canvas-2'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets : [
 
+      {
 
+        backgroundColor : 'rgba(220, 220, 220, 0.5)',
 
+        borderColor : 'rgba(220, 220, 220, 0.8)',
 
+        highlightFill: 'rgba(220, 220, 220, 0.75)',
 
+        highlightStroke: 'rgba(220, 220, 220, 1)',
 
+        data : [random(), random(), random(), random(), random(), random(), random()]
 
+      },
 
+      {
 
+        backgroundColor : 'rgba(151, 187, 205, 0.5)',
 
+        borderColor : 'rgba(151, 187, 205, 0.8)',
 
+        highlightFill : 'rgba(151, 187, 205, 0.75)',
 
+        highlightStroke : 'rgba(151, 187, 205, 1)',
 
+        data : [random(), random(), random(), random(), random(), random(), random()]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const doughnutChart = new Chart($('#canvas-3'), {
 
+  type: 'doughnut',
 
+  data: {
 
+    labels: ['Red', 'Green', 'Yellow'],
 
+    datasets: [{
 
+      data: [300, 50, 100],
 
+      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
 
+      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const radarChart = new Chart($('#canvas-4'), {
 
+  type: 'radar',
 
+  data: {
 
+    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: 'rgba(220, 220, 220, 0.2)',
 
+        borderColor: 'rgba(220, 220, 220, 1)',
 
+        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
 
+        pointBorderColor: '#fff',
 
+        pointHighlightFill: '#fff',
 
+        pointHighlightStroke: 'rgba(220, 220, 220, 1)',
 
+        data: [65, 59, 90, 81, 56, 55, 40]
 
+      },
 
+      {
 
+        label: 'My Second dataset',
 
+        backgroundColor: 'rgba(151, 187, 205, 0.2)',
 
+        borderColor: 'rgba(151, 187, 205, 1)',
 
+        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
 
+        pointBorderColor: '#fff',
 
+        pointHighlightFill: '#fff',
 
+        pointHighlightStroke: 'rgba(151, 187, 205, 1)',
 
+        data: [28, 48, 40, 19, 96, 27, 100]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const pieChart = new Chart($('#canvas-5'), {
 
+  type: 'pie',
 
+  data: {
 
+    labels: ['Red', 'Green', 'Yellow'],
 
+    datasets: [{
 
+      data: [300, 50, 100],
 
+      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
 
+      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const polarAreaChart = new Chart($('#canvas-6'), {
 
+  type: 'polarArea',
 
+  data: {
 
+    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
 
+    datasets: [{
 
+      data: [11, 16, 7, 3, 14],
 
+      backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
 
+    }]
 
+  },
 
+  options: {
 
+    responsive: true
 
+  }
 
+})

+ 25 - 0
static/js/src/colors.js
View File 

@@ -0,0 +1,25 @@
 
+/* global rgbToHex */
 
+import $ from 'jquery'
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): colors.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+$('.theme-color').each(function () {
 
+  const Color = $(this).css('backgroundColor')
 
+  $(this).parent().append(`
 
+    <table class="w-100">
 
+      <tr>
 
+        <td class="text-muted">HEX:</td>
 
+        <td class="font-weight-bold">${rgbToHex(Color)}</td>
 
+      </tr>
 
+      <tr>
 
+        <td class="text-muted">RGB:</td>
 
+        <td class="font-weight-bold">${Color}</td>
 
+      </tr>
 
+    </table>
 
+  `)
 
+})

+ 358 - 0
static/js/src/main.js
View File 

@@ -0,0 +1,358 @@
 
+/* eslint-disable object-shorthand */
 
+/* global Chart, CustomTooltips, getStyle, hexToRgba */
 
+import $ from 'jquery'
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): main.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+/* eslint-disable no-magic-numbers */
 
+// Disable the on-canvas tooltip
 
+Chart.defaults.global.pointHitDetectionRadius = 1
 
+Chart.defaults.global.tooltips.enabled = false
 
+Chart.defaults.global.tooltips.mode = 'index'
 
+Chart.defaults.global.tooltips.position = 'nearest'
 
+Chart.defaults.global.tooltips.custom = CustomTooltips
 
+Chart.defaults.global.tooltips.intersect = true
 
+Chart.defaults.global.tooltips.callbacks.labelColor = function (tooltipItem, chart) {
 
+  return {
 
+    backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor
 
+  }
 
+}
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart1 = new Chart($('#card-chart1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: getStyle('--primary'),
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [65, 59, 84, 84, 51, 55, 40]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: 35,
 
+          max: 89
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart2 = new Chart($('#card-chart2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: getStyle('--info'),
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [1, 18, 9, 17, 34, 22, 11]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: -4,
 
+          max: 39
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        tension: 0.00001,
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart3 = new Chart($('#card-chart3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: 'rgba(255,255,255,.2)',
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [78, 81, 80, 45, 34, 12, 40]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 2
 
+      },
 
+      point: {
 
+        radius: 0,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart4 = new Chart($('#card-chart4'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: 'rgba(255,255,255,.2)',
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false,
 
+        barPercentage: 0.6
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const mainChart = new Chart($('#main-chart'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: hexToRgba(getStyle('--info'), 10),
 
+        borderColor: getStyle('--info'),
 
+        pointHoverBackgroundColor: '#fff',
 
+        borderWidth: 2,
 
+        data: [165, 180, 70, 69, 77, 57, 125, 165, 172, 91, 173, 138, 155, 89, 50, 161, 65, 163, 160, 103, 114, 185, 125, 196, 183, 64, 137, 95, 112, 175]
 
+      },
 
+      {
 
+        label: 'My Second dataset',
 
+        backgroundColor: 'transparent',
 
+        borderColor: getStyle('--success'),
 
+        pointHoverBackgroundColor: '#fff',
 
+        borderWidth: 2,
 
+        data: [92, 97, 80, 100, 86, 97, 83, 98, 87, 98, 93, 83, 87, 98, 96, 84, 91, 97, 88, 86, 94, 86, 95, 91, 98, 91, 92, 80, 83, 82]
 
+      },
 
+      {
 
+        label: 'My Third dataset',
 
+        backgroundColor: 'transparent',
 
+        borderColor: getStyle('--danger'),
 
+        pointHoverBackgroundColor: '#fff',
 
+        borderWidth: 1,
 
+        borderDash: [8, 5],
 
+        data: [65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          drawOnChartArea: false
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        ticks: {
 
+          beginAtZero: true,
 
+          maxTicksLimit: 5,
 
+          stepSize: Math.ceil(250 / 5),
 
+          max: 250
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0,
 
+        hitRadius: 10,
 
+        hoverRadius: 4,
 
+        hoverBorderWidth: 3
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+const brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
 
+
 
+const brandBoxChartOptions = {
 
+  responsive: true,
 
+  maintainAspectRatio: false,
 
+  legend: {
 
+    display: false
 
+  },
 
+  scales: {
 
+    xAxes: [{
 
+      display:false
 
+    }],
 
+    yAxes: [{
 
+      display:false
 
+    }]
 
+  },
 
+  elements: {
 
+    point: {
 
+      radius: 0,
 
+      hitRadius: 10,
 
+      hoverRadius: 4,
 
+      hoverBorderWidth: 3
 
+    }
 
+  }
 
+}
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart1 = new Chart($('#social-box-chart-1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [65, 59, 84, 84, 51, 55, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart2 = new Chart($('#social-box-chart-2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [1, 13, 9, 17, 34, 41, 38]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart3 = new Chart($('#social-box-chart-3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [78, 81, 80, 45, 34, 12, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart4 = new Chart($('#social-box-chart-4'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [35, 23, 56, 22, 97, 23, 64]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})

+ 13 - 0
static/js/src/popovers.js
View File 

@@ -0,0 +1,13 @@
 
+import $ from 'jquery'
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): popovers.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+$('[data-toggle="popover"]').popover()
 
+$('.popover-dismiss').popover({
 
+  trigger: 'focus'
 
+})

+ 10 - 0
static/js/src/tooltips.js
View File 

@@ -0,0 +1,10 @@
 
+import $ from 'jquery'
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): tooltips.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+$('[data-toggle="tooltip"]').tooltip()

+ 480 - 0
static/js/src/widgets.js
View File 

@@ -0,0 +1,480 @@
 
+/* global Chart, CustomTooltips, getStyle */
 
+import $ from 'jquery'
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): main.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+/* eslint-disable no-magic-numbers */
 
+// Disable the on-canvas tooltip
 
+Chart.defaults.global.pointHitDetectionRadius = 1
 
+Chart.defaults.global.tooltips.enabled = false
 
+Chart.defaults.global.tooltips.mode = 'index'
 
+Chart.defaults.global.tooltips.position = 'nearest'
 
+Chart.defaults.global.tooltips.custom = CustomTooltips
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart1 = new Chart($('#card-chart1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: getStyle('--primary'),
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [65, 59, 84, 84, 51, 55, 40]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: 35,
 
+          max: 89
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart2 = new Chart($('#card-chart2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: getStyle('--info'),
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [1, 18, 9, 17, 34, 22, 11]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: -4,
 
+          max: 39
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        tension: 0.00001,
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart3 = new Chart($('#card-chart3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: 'rgba(255,255,255,.2)',
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [78, 81, 80, 45, 34, 12, 40]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 2
 
+      },
 
+      point: {
 
+        radius: 0,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const cardChart4 = new Chart($('#card-chart4'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
 
+    datasets: [
 
+      {
 
+        label: 'My First dataset',
 
+        backgroundColor: 'rgba(255,255,255,.2)',
 
+        borderColor: 'rgba(255,255,255,.55)',
 
+        data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false,
 
+        barPercentage: 0.6
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+})
 
+
 
+// Random Numbers
 
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const sparklineChart1 = new Chart($('#sparkline-chart-1'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
 
+    datasets: [
 
+      {
 
+        backgroundColor: getStyle('--primary'),
 
+        borderColor: 'transparent',
 
+        borderWidth: 1,
 
+        data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const sparklineChart2 = new Chart($('#sparkline-chart-2'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
 
+    datasets: [
 
+      {
 
+        backgroundColor: getStyle('--warning'),
 
+        borderColor: 'transparent',
 
+        borderWidth: 1,
 
+        data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const sparklineChart3 = new Chart($('#sparkline-chart-3'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
 
+    datasets: [
 
+      {
 
+        backgroundColor: getStyle('--success'),
 
+        borderColor: 'transparent',
 
+        borderWidth: 1,
 
+        data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const sparklineChart4 = new Chart($('#sparkline-chart-4'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [
 
+      {
 
+        backgroundColor: 'transparent',
 
+        borderColor: getStyle('--info'),
 
+        borderWidth: 2,
 
+        data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const sparklineChart5 = new Chart($('#sparkline-chart-5'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [
 
+      {
 
+        backgroundColor: 'transparent',
 
+        borderColor: getStyle('--success'),
 
+        borderWidth: 2,
 
+        data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const sparklineChart6 = new Chart($('#sparkline-chart-6'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [
 
+      {
 
+        backgroundColor: 'transparent',
 
+        borderColor: getStyle('--danger'),
 
+        borderWidth: 2,
 
+        data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+      }
 
+    ]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0
 
+      }
 
+    }
 
+  }
 
+})
 
+
 
+const brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
 
+const brandBoxChartOptions = {
 
+  responsive: true,
 
+  maintainAspectRatio: false,
 
+  legend: {
 
+    display: false
 
+  },
 
+  scales: {
 
+    xAxes: [{
 
+      display:false
 
+    }],
 
+    yAxes: [{
 
+      display:false
 
+    }]
 
+  },
 
+  elements: {
 
+    point: {
 
+      radius: 0,
 
+      hitRadius: 10,
 
+      hoverRadius: 4,
 
+      hoverBorderWidth: 3
 
+    }
 
+  }
 
+}
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart1 = new Chart($('#social-box-chart-1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [65, 59, 84, 84, 51, 55, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart2 = new Chart($('#social-box-chart-2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [1, 13, 9, 17, 34, 41, 38]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart3 = new Chart($('#social-box-chart-3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [78, 81, 80, 45, 34, 12, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})
 
+
 
+// eslint-disable-next-line no-unused-vars
 
+const brandBoxChart4 = new Chart($('#social-box-chart-4'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [35, 23, 56, 22, 97, 23, 64]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+})

+ 10 - 0
static/js/tooltips.js
View File 

@@ -0,0 +1,10 @@
 
+"use strict";
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): tooltips.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+$('[data-toggle="tooltip"]').tooltip();
 
+//# sourceMappingURL=tooltips.js.map

+ 1 - 0
static/js/tooltips.js.map
View File 

@@ -0,0 +1 @@
 
+{"version":3,"sources":["src/tooltips.js"],"names":["$","tooltip"],"mappings":";;AAEA;;;;;;AAOAA,CAAC,CAAC,yBAAD,CAAD,CAA6BC,OAA7B","sourcesContent":["import $ from 'jquery'\n\n/**\n * --------------------------------------------------------------------------\n * CoreUI Free Boostrap Admin Template (v2.1.15): tooltips.js\n * Licensed under MIT (https://coreui.io/license)\n * --------------------------------------------------------------------------\n */\n\n$('[data-toggle=\"tooltip\"]').tooltip()\n"],"file":"tooltips.js"}

+ 449 - 0
static/js/widgets.js
View File 

@@ -0,0 +1,449 @@
 
+"use strict";
 
+
 
+/* global Chart, CustomTooltips, getStyle */
 
+
 
+/**
 
+ * --------------------------------------------------------------------------
 
+ * CoreUI Free Boostrap Admin Template (v2.1.15): main.js
 
+ * Licensed under MIT (https://coreui.io/license)
 
+ * --------------------------------------------------------------------------
 
+ */
 
+
 
+/* eslint-disable no-magic-numbers */
 
+// Disable the on-canvas tooltip
 
+Chart.defaults.global.pointHitDetectionRadius = 1;
 
+Chart.defaults.global.tooltips.enabled = false;
 
+Chart.defaults.global.tooltips.mode = 'index';
 
+Chart.defaults.global.tooltips.position = 'nearest';
 
+Chart.defaults.global.tooltips.custom = CustomTooltips; // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart1 = new Chart($('#card-chart1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: getStyle('--primary'),
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [65, 59, 84, 84, 51, 55, 40]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: 35,
 
+          max: 89
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart2 = new Chart($('#card-chart2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: getStyle('--info'),
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [1, 18, 9, 17, 34, 22, 11]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        gridLines: {
 
+          color: 'transparent',
 
+          zeroLineColor: 'transparent'
 
+        },
 
+        ticks: {
 
+          fontSize: 2,
 
+          fontColor: 'transparent'
 
+        }
 
+      }],
 
+      yAxes: [{
 
+        display: false,
 
+        ticks: {
 
+          display: false,
 
+          min: -4,
 
+          max: 39
 
+        }
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        tension: 0.00001,
 
+        borderWidth: 1
 
+      },
 
+      point: {
 
+        radius: 4,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart3 = new Chart($('#card-chart3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.2)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [78, 81, 80, 45, 34, 12, 40]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      line: {
 
+        borderWidth: 2
 
+      },
 
+      point: {
 
+        radius: 0,
 
+        hitRadius: 10,
 
+        hoverRadius: 4
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var cardChart4 = new Chart($('#card-chart4'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
 
+    datasets: [{
 
+      label: 'My First dataset',
 
+      backgroundColor: 'rgba(255,255,255,.2)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false,
 
+        barPercentage: 0.6
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+}); // Random Numbers
 
+
 
+var random = function random(min, max) {
 
+  return Math.floor(Math.random() * (max - min + 1) + min);
 
+}; // eslint-disable-next-line no-unused-vars
 
+
 
+
 
+var sparklineChart1 = new Chart($('#sparkline-chart-1'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
 
+    datasets: [{
 
+      backgroundColor: getStyle('--primary'),
 
+      borderColor: 'transparent',
 
+      borderWidth: 1,
 
+      data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var sparklineChart2 = new Chart($('#sparkline-chart-2'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
 
+    datasets: [{
 
+      backgroundColor: getStyle('--warning'),
 
+      borderColor: 'transparent',
 
+      borderWidth: 1,
 
+      data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var sparklineChart3 = new Chart($('#sparkline-chart-3'), {
 
+  type: 'bar',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
 
+    datasets: [{
 
+      backgroundColor: getStyle('--success'),
 
+      borderColor: 'transparent',
 
+      borderWidth: 1,
 
+      data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var sparklineChart4 = new Chart($('#sparkline-chart-4'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [{
 
+      backgroundColor: 'transparent',
 
+      borderColor: getStyle('--info'),
 
+      borderWidth: 2,
 
+      data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var sparklineChart5 = new Chart($('#sparkline-chart-5'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [{
 
+      backgroundColor: 'transparent',
 
+      borderColor: getStyle('--success'),
 
+      borderWidth: 2,
 
+      data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0
 
+      }
 
+    }
 
+  }
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var sparklineChart6 = new Chart($('#sparkline-chart-6'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 
+    datasets: [{
 
+      backgroundColor: 'transparent',
 
+      borderColor: getStyle('--danger'),
 
+      borderWidth: 2,
 
+      data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
 
+    }]
 
+  },
 
+  options: {
 
+    maintainAspectRatio: false,
 
+    legend: {
 
+      display: false
 
+    },
 
+    scales: {
 
+      xAxes: [{
 
+        display: false
 
+      }],
 
+      yAxes: [{
 
+        display: false
 
+      }]
 
+    },
 
+    elements: {
 
+      point: {
 
+        radius: 0
 
+      }
 
+    }
 
+  }
 
+});
 
+var brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 
+var brandBoxChartOptions = {
 
+  responsive: true,
 
+  maintainAspectRatio: false,
 
+  legend: {
 
+    display: false
 
+  },
 
+  scales: {
 
+    xAxes: [{
 
+      display: false
 
+    }],
 
+    yAxes: [{
 
+      display: false
 
+    }]
 
+  },
 
+  elements: {
 
+    point: {
 
+      radius: 0,
 
+      hitRadius: 10,
 
+      hoverRadius: 4,
 
+      hoverBorderWidth: 3
 
+    }
 
+  } // eslint-disable-next-line no-unused-vars
 
+
 
+};
 
+var brandBoxChart1 = new Chart($('#social-box-chart-1'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [65, 59, 84, 84, 51, 55, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var brandBoxChart2 = new Chart($('#social-box-chart-2'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [1, 13, 9, 17, 34, 41, 38]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var brandBoxChart3 = new Chart($('#social-box-chart-3'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [78, 81, 80, 45, 34, 12, 40]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+}); // eslint-disable-next-line no-unused-vars
 
+
 
+var brandBoxChart4 = new Chart($('#social-box-chart-4'), {
 
+  type: 'line',
 
+  data: {
 
+    labels: brandBoxChartLabels,
 
+    datasets: [{
 
+      backgroundColor: 'rgba(255,255,255,.1)',
 
+      borderColor: 'rgba(255,255,255,.55)',
 
+      pointHoverBackgroundColor: '#fff',
 
+      borderWidth: 2,
 
+      data: [35, 23, 56, 22, 97, 23, 64]
 
+    }]
 
+  },
 
+  options: brandBoxChartOptions
 
+});
 
+//# sourceMappingURL=widgets.js.map

File diff suppressed because it is too large
+ 0 - 0
static/js/widgets.js.map


+ 760 - 0
static/notifications/alerts.html
View File 

@@ -0,0 +1,760 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Alerts
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-alerts/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>
 
+                    <div class="alert alert-secondary" role="alert">This is a secondary alert—check it out!</div>
 
+                    <div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
 
+                    <div class="alert alert-danger" role="alert">This is a danger alert—check it out!</div>
 
+                    <div class="alert alert-warning" role="alert">This is a warning alert—check it out!</div>
 
+                    <div class="alert alert-info" role="alert">This is a info alert—check it out!</div>
 
+                    <div class="alert alert-light" role="alert">This is a light alert—check it out!</div>
 
+                    <div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Alerts
 
+                    <small>use
 
+                      <code>.alert-link</code> to provide links</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="alert alert-primary" role="alert">This is a primary alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-secondary" role="alert">This is a secondary alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-success" role="alert">This is a success alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-danger" role="alert">This is a danger alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-warning" role="alert">This is a warning alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-info" role="alert">This is a info alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-light" role="alert">This is a light alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                    <div class="alert alert-dark" role="alert">This is a dark alert with
 
+                      <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+            <div class="row">
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Alerts
 
+                    <small>additional content</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="alert alert-success" role="alert">
 
+                      <h4 class="alert-heading">Well done!</h4>
 
+                      <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
 
+                      <hr>
 
+                      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Alerts
 
+                    <small>dismissing</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
 
+                      <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 
+                      <button class="close" type="button" data-dismiss="alert" aria-label="Close">
 
+                        <span aria-hidden="true">×</span>
 
+                      </button>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 761 - 0
static/notifications/badge.html
View File 

@@ -0,0 +1,761 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Badges
 
+                    <div class="card-header-actions">
 
+                      <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-badge/" target="_blank">
 
+                        <small class="text-muted">docs</small>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <h1>Example heading
 
+                      <span class="badge badge-secondary">New</span>
 
+                    </h1>
 
+                    <h2>Example heading
 
+                      <span class="badge badge-secondary">New</span>
 
+                    </h2>
 
+                    <h3>Example heading
 
+                      <span class="badge badge-secondary">New</span>
 
+                    </h3>
 
+                    <h4>Example heading
 
+                      <span class="badge badge-secondary">New</span>
 
+                    </h4>
 
+                    <h5>Example heading
 
+                      <span class="badge badge-secondary">New</span>
 
+                    </h5>
 
+                    <h6>Example heading
 
+                      <span class="badge badge-secondary">New</span>
 
+                    </h6>
 
+                  </div>
 
+                  <div class="card-footer">
 
+                    <button class="btn btn-primary" type="link">Notifications
 
+                      <span class="badge badge-light badge-pill" style="position: static;">9</span>
 
+                    </button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Badges
 
+                    <small>contextual variations</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <span class="badge badge-primary">Primary</span>
 
+                    <span class="badge badge-secondary">Secondary</span>
 
+                    <span class="badge badge-success">Success</span>
 
+                    <span class="badge badge-danger">Danger</span>
 
+                    <span class="badge badge-warning">Warning</span>
 
+                    <span class="badge badge-info">Info</span>
 
+                    <span class="badge badge-light">Light</span>
 
+                    <span class="badge badge-dark">Dark</span>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Badges
 
+                    <small>pill badges</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <span class="badge badge-pill badge-primary">Primary</span>
 
+                    <span class="badge badge-pill badge-secondary">Secondary</span>
 
+                    <span class="badge badge-pill badge-success">Success</span>
 
+                    <span class="badge badge-pill badge-danger">Danger</span>
 
+                    <span class="badge badge-pill badge-warning">Warning</span>
 
+                    <span class="badge badge-pill badge-info">Info</span>
 
+                    <span class="badge badge-pill badge-light">Light</span>
 
+                    <span class="badge badge-pill badge-dark">Dark</span>
 
+                  </div>
 
+                </div>
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Badges
 
+                    <small>links</small>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <a class="badge badge-primary" href="#">Primary</a>
 
+                    <a class="badge badge-secondary" href="#">Secondary</a>
 
+                    <a class="badge badge-success" href="#">Success</a>
 
+                    <a class="badge badge-danger" href="#">Danger</a>
 
+                    <a class="badge badge-warning" href="#">Warning</a>
 
+                    <a class="badge badge-info" href="#">Info</a>
 
+                    <a class="badge badge-light" href="#">Light</a>
 
+                    <a class="badge badge-dark" href="#">Dark</a>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 869 - 0
static/notifications/modals.html
View File 

@@ -0,0 +1,869 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* CoreUI - Free Bootstrap Admin Template
 
+* @version v2.1.15
 
+* @link https://coreui.io
 
+* Copyright (c) 2018 creativeLabs Łukasz Holeczek
 
+* Licensed under MIT (https://coreui.io/license)
 
+-->
 
+
 
+<html lang="en">
 
+  <head>
 
+    <base href="./../">
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
+    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
 
+    <meta name="author" content="Łukasz Holeczek">
 
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
 
+    <title>CoreUI Free Bootstrap Admin Template</title>
 
+    <!-- Icons-->
 
+    <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
 
+    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
+    <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
 
+    <!-- Main styles for this application-->
 
+    <link href="css/style.css" rel="stylesheet">
 
+    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
 
+    <!-- Global site tag (gtag.js) - Google Analytics-->
 
+    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
 
+    <script>
 
+      window.dataLayer = window.dataLayer || [];
 
+
 
+      function gtag() {
 
+        dataLayer.push(arguments);
 
+      }
 
+      gtag('js', new Date());
 
+      // Shared ID
 
+      gtag('config', 'UA-118965717-3');
 
+      // Bootstrap ID
 
+      gtag('config', 'UA-118965717-5');
 
+    </script>
 
+  </head>
 
+  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
 
+    <header class="app-header navbar">
 
+      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <a class="navbar-brand" href="#">
 
+        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
 
+        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
 
+      </a>
 
+      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <ul class="nav navbar-nav d-md-down-none">
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Dashboard</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Users</a>
 
+        </li>
 
+        <li class="nav-item px-3">
 
+          <a class="nav-link" href="#">Settings</a>
 
+        </li>
 
+      </ul>
 
+      <ul class="nav navbar-nav ml-auto">
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-bell"></i>
 
+            <span class="badge badge-pill badge-danger">5</span>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-list"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item d-md-down-none">
 
+          <a class="nav-link" href="#">
 
+            <i class="icon-location-pin"></i>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
 
+            <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+          </a>
 
+          <div class="dropdown-menu dropdown-menu-right">
 
+            <div class="dropdown-header text-center">
 
+              <strong>Account</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-bell-o"></i> Updates
 
+              <span class="badge badge-info">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-envelope-o"></i> Messages
 
+              <span class="badge badge-success">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-tasks"></i> Tasks
 
+              <span class="badge badge-danger">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-comments"></i> Comments
 
+              <span class="badge badge-warning">42</span>
 
+            </a>
 
+            <div class="dropdown-header text-center">
 
+              <strong>Settings</strong>
 
+            </div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-user"></i> Profile</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-wrench"></i> Settings</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-usd"></i> Payments
 
+              <span class="badge badge-secondary">42</span>
 
+            </a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-file"></i> Projects
 
+              <span class="badge badge-primary">42</span>
 
+            </a>
 
+            <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-shield"></i> Lock Account</a>
 
+            <a class="dropdown-item" href="#">
 
+              <i class="fa fa-lock"></i> Logout</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
+      <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+      <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
 
+        <span class="navbar-toggler-icon"></span>
 
+      </button>
 
+    </header>
 
+    <div class="app-body">
 
+      <div class="sidebar">
 
+        <nav class="sidebar-nav">
 
+          <ul class="nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="index.html">
 
+                <i class="nav-icon icon-speedometer"></i> Dashboard
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="nav-title">Theme</li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="colors.html">
 
+                <i class="nav-icon icon-drop"></i> Colors</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="typography.html">
 
+                <i class="nav-icon icon-pencil"></i> Typography</a>
 
+            </li>
 
+            <li class="nav-title">Components</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-puzzle"></i> Base</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/breadcrumb.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Breadcrumb</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/cards.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Cards</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/carousel.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Carousel</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/collapse.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Collapse</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/forms.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Forms</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/jumbotron.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Jumbotron</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/list-group.html">
 
+                    <i class="nav-icon icon-puzzle"></i> List group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/navs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Navs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/pagination.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Pagination</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/popovers.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Popovers</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/progress.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Progress</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/scrollspy.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Scrollspy</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/switches.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Switches</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tables.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tables</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tabs.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tabs</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="base/tooltips.html">
 
+                    <i class="nav-icon icon-puzzle"></i> Tooltips</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/button-group.html">
 
+                    <i class="nav-icon icon-cursor"></i> Buttons Group</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/dropdowns.html">
 
+                    <i class="nav-icon icon-cursor"></i> Dropdowns</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="buttons/brand-buttons.html">
 
+                    <i class="nav-icon icon-cursor"></i> Brand Buttons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="charts.html">
 
+                <i class="nav-icon icon-pie-chart"></i> Charts</a>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Icons</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/coreui-icons.html">
 
+                    <i class="nav-icon icon-star"></i> CoreUI Icons
 
+                    <span class="badge badge-success">NEW</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/flags.html">
 
+                    <i class="nav-icon icon-star"></i> Flags</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/font-awesome.html">
 
+                    <i class="nav-icon icon-star"></i> Font Awesome
 
+                    <span class="badge badge-secondary">4.7</span>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="icons/simple-line-icons.html">
 
+                    <i class="nav-icon icon-star"></i> Simple Line Icons</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-bell"></i> Notifications</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/alerts.html">
 
+                    <i class="nav-icon icon-bell"></i> Alerts</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/badge.html">
 
+                    <i class="nav-icon icon-bell"></i> Badge</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="notifications/modals.html">
 
+                    <i class="nav-icon icon-bell"></i> Modals</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="widgets.html">
 
+                <i class="nav-icon icon-calculator"></i> Widgets
 
+                <span class="badge badge-primary">NEW</span>
 
+              </a>
 
+            </li>
 
+            <li class="divider"></li>
 
+            <li class="nav-title">Extras</li>
 
+            <li class="nav-item nav-dropdown">
 
+              <a class="nav-link nav-dropdown-toggle" href="#">
 
+                <i class="nav-icon icon-star"></i> Pages</a>
 
+              <ul class="nav-dropdown-items">
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="login.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Login</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="register.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Register</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="404.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 404</a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a class="nav-link" href="500.html" target="_top">
 
+                    <i class="nav-icon icon-star"></i> Error 500</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item mt-auto">
 
+              <a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
 
+                <i class="nav-icon icon-cloud-download"></i> Download CoreUI</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
 
+                <i class="nav-icon icon-layers"></i> Try CoreUI
 
+                <strong>PRO</strong>
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
 
+      </div>
 
+      <main class="main">
 
+        <!-- Breadcrumb-->
 
+        <ol class="breadcrumb">
 
+          <li class="breadcrumb-item">Home</li>
 
+          <li class="breadcrumb-item">
 
+            <a href="#">Admin</a>
 
+          </li>
 
+          <li class="breadcrumb-item active">Dashboard</li>
 
+          <!-- Breadcrumb Menu-->
 
+          <li class="breadcrumb-menu d-md-down-none">
 
+            <div class="btn-group" role="group" aria-label="Button group">
 
+              <a class="btn" href="#">
 
+                <i class="icon-speech"></i>
 
+              </a>
 
+              <a class="btn" href="./">
 
+                <i class="icon-graph"></i>  Dashboard</a>
 
+              <a class="btn" href="#">
 
+                <i class="icon-settings"></i>  Settings</a>
 
+            </div>
 
+          </li>
 
+        </ol>
 
+        <div class="container-fluid">
 
+          <div class="animated fadeIn">
 
+            <div class="row">
 
+              <div class="col-lg-12">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <i class="fa fa-align-justify"></i> Bootstrap Modals</div>
 
+                  <div class="card-body">
 
+                    <!-- Button trigger modal-->
 
+                    <button class="btn btn-secondary mb-1" type="button" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
 
+                    <button class="btn btn-secondary mb-1" type="button" data-toggle="modal" data-target="#largeModal">Launch large modal</button>
 
+                    <button class="btn btn-secondary mb-1" type="button" data-toggle="modal" data-target="#smallModal">Launch small modal</button>
 
+                    <hr>
 
+                    <button class="btn btn-primary mb-1" type="button" data-toggle="modal" data-target="#primaryModal">Primary modal</button>
 
+                    <button class="btn btn-success mb-1" type="button" data-toggle="modal" data-target="#successModal">Success modal</button>
 
+                    <button class="btn btn-warning mb-1" type="button" data-toggle="modal" data-target="#warningModal">Warning modal</button>
 
+                    <button class="btn btn-danger mb-1" type="button" data-toggle="modal" data-target="#dangerModal">Danger modal</button>
 
+                    <button class="btn btn-info mb-1" type="button" data-toggle="modal" data-target="#infoModal">Info modal</button>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-->
 
+            </div>
 
+            <!-- /.row-->
 
+          </div>
 
+          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-primary" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-lg" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-primary" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-sm" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-primary" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-primary" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-primary" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-success" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-success" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-warning" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-warning" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-danger" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-danger" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+          <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
+            <div class="modal-dialog modal-info" role="document">
 
+              <div class="modal-content">
 
+                <div class="modal-header">
 
+                  <h4 class="modal-title">Modal title</h4>
 
+                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 
+                    <span aria-hidden="true">×</span>
 
+                  </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                  <p>One fine body…</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
 
+                  <button class="btn btn-info" type="button">Save changes</button>
 
+                </div>
 
+              </div>
 
+              <!-- /.modal-content-->
 
+            </div>
 
+            <!-- /.modal-dialog-->
 
+          </div>
 
+          <!-- /.modal-->
 
+        </div>
 
+      </main>
 
+      <aside class="aside-menu">
 
+        <ul class="nav nav-tabs" role="tablist">
 
+          <li class="nav-item">
 
+            <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
 
+              <i class="icon-list"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
 
+              <i class="icon-speech"></i>
 
+            </a>
 
+          </li>
 
+          <li class="nav-item">
 
+            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
 
+              <i class="icon-settings"></i>
 
+            </a>
 
+          </li>
 
+        </ul>
 
+        <!-- Tab panes-->
 
+        <div class="tab-content">
 
+          <div class="tab-pane active" id="timeline" role="tabpanel">
 
+            <div class="list-group list-group-accent">
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
 
+              <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Meeting with
 
+                  <strong>Lucas</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-info">
 
+                <div class="avatar float-right">
 
+                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                </div>
 
+                <div>Skype with
 
+                  <strong>Megan</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 5pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-social-skype"></i>  On-line</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
 
+              <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
 
+                <div>New UI Project -
 
+                  <strong>deadline</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  10 - 11pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-success list-group-item-divider">
 
+                <div>
 
+                  <strong>#10 Startups.Garden</strong> Meetup</div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  1 - 3pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-location-pin"></i>  Palo Alto, CA</small>
 
+              </div>
 
+              <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
 
+                <div>
 
+                  <strong>Team meeting</strong>
 
+                </div>
 
+                <small class="text-muted mr-3">
 
+                  <i class="icon-calendar"></i>  4 - 6pm</small>
 
+                <small class="text-muted">
 
+                  <i class="icon-home"></i>  creativeLabs HQ</small>
 
+                <div class="avatars-stack mt-2">
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                  <div class="avatar avatar-xs">
 
+                    <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="messages" role="tabpanel">
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+            <hr>
 
+            <div class="message">
 
+              <div class="py-3 pb-5 mr-3 float-left">
 
+                <div class="avatar">
 
+                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
 
+                  <span class="avatar-status badge-success"></span>
 
+                </div>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lukasz Holeczek</small>
 
+                <small class="text-muted float-right mt-1">1:52 PM</small>
 
+              </div>
 
+              <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
 
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
 
+            </div>
 
+          </div>
 
+          <div class="tab-pane p-3" id="settings" role="tabpanel">
 
+            <h6>Settings</h6>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-4">
 
+                <small>
 
+                  <b>Option 1</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 2</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+              <div>
 
+                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 3</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <div class="aside-options">
 
+              <div class="clearfix mt-3">
 
+                <small>
 
+                  <b>Option 4</b>
 
+                </small>
 
+                <label class="switch switch-label switch-pill switch-success switch-sm float-right">
 
+                  <input class="switch-input" type="checkbox" checked="">
 
+                  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+            <hr>
 
+            <h6>System Utilization</h6>
 
+            <div class="text-uppercase mb-1 mt-4">
 
+              <small>
 
+                <b>CPU Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">348 Processes. 1/4 Cores.</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>Memory Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">11444GB/16384MB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 1 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">243GB/256GB</small>
 
+            <div class="text-uppercase mb-1 mt-2">
 
+              <small>
 
+                <b>SSD 2 Usage</b>
 
+              </small>
 
+            </div>
 
+            <div class="progress progress-xs">
 
+              <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 
+            </div>
 
+            <small class="text-muted">25GB/256GB</small>
 
+          </div>
 
+        </div>
 
+      </aside>
 
+    </div>
 
+    <footer class="app-footer">
 
+      <div>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+        <span>&copy; 2018 creativeLabs.</span>
 
+      </div>
 
+      <div class="ml-auto">
 
+        <span>Powered by</span>
 
+        <a href="https://coreui.io">CoreUI</a>
 
+      </div>
 
+    </footer>
 
+    <!-- CoreUI and necessary plugins-->
 
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
 
+    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
+    <script src="node_modules/pace-progress/pace.min.js"></script>
 
+    <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
 
+    <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
 
+  </body>
 
+</html>

+ 1 - 0
static/scss/_custom.scss
View File 

@@ -0,0 +1 @@
 
+// Here you can add other styles

+ 1 - 0
static/scss/_variables.scss
View File 

@@ -0,0 +1 @@
 
+// Variable overrides

+ 8 - 0
static/scss/style.scss
View File 

@@ -0,0 +1,8 @@
 
+// If you want to override variables do it here
 
+@import "variables";
 
+
 
+// Import styles
 
+@import "node_modules/@coreui/coreui/scss/coreui";
 
+
 
+// If you want to add something do it here
 
+@import "custom";

+ 4 - 0
static/scss/vendors/_variables.scss
View File 

@@ -0,0 +1,4 @@
 
+// Override Boostrap variables
 
+@import "../variables";
 
+@import "node_modules/bootstrap/scss/mixins";
 
+@import "node_modules/@coreui/coreui/scss/variables";

+ 128 - 0
static/scss/vendors/pace-progress/pace.scss
View File 

@@ -0,0 +1,128 @@
 
+// Import variables
 
+@import "../variables";
 
+
 
+#loading-bar,
 
+#loading-bar-spinner {
 
+  -webkit-pointer-events: none;
 
+  pointer-events: none;
 
+  -moz-transition: 350ms linear all;
 
+  -o-transition: 350ms linear all;
 
+  -webkit-transition: 350ms linear all;
 
+  transition: 350ms linear all;
 
+}
 
+
 
+#loading-bar.ng-enter,
 
+#loading-bar.ng-leave.ng-leave-active,
 
+#loading-bar-spinner.ng-enter,
 
+#loading-bar-spinner.ng-leave.ng-leave-active {
 
+  opacity: 0;
 
+}
 
+
 
+#loading-bar.ng-enter.ng-enter-active,
 
+#loading-bar.ng-leave,
 
+#loading-bar-spinner.ng-enter.ng-enter-active,
 
+#loading-bar-spinner.ng-leave {
 
+  opacity: 1;
 
+}
 
+
 
+#loading-bar .bar {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  z-index: 20002;
 
+  width: 100%;
 
+  height: 2px;
 
+  background: theme-color("primary");
 
+  border-top-right-radius: 1px;
 
+  border-bottom-right-radius: 1px;
 
+  -moz-transition: width 350ms;
 
+  -o-transition: width 350ms;
 
+  -webkit-transition: width 350ms;
 
+  transition: width 350ms;
 
+}
 
+
 
+// Fancy blur effect
 
+#loading-bar .peg {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  width: 70px;
 
+  height: 2px;
 
+  -moz-border-radius: 100%;
 
+  -webkit-border-radius: 100%;
 
+  border-radius: 100%;
 
+  -moz-box-shadow: #29d 1px 0 6px 1px;
 
+  -ms-box-shadow: #29d 1px 0 6px 1px;
 
+  -webkit-box-shadow: #29d 1px 0 6px 1px;
 
+  box-shadow: #29d 1px 0 6px 1px;
 
+  opacity: .45;
 
+}
 
+
 
+#loading-bar-spinner {
 
+  position: fixed;
 
+  top: 10px;
 
+  left: 10px;
 
+  z-index: 10002;
 
+  display: block;
 
+}
 
+
 
+#loading-bar-spinner .spinner-icon {
 
+  width: 14px;
 
+  height: 14px;
 
+
 
+  border: solid 2px transparent;
 
+  border-top-color: #29d;
 
+  border-left-color: #29d;
 
+  border-radius: 50%;
 
+
 
+  -moz-animation: loading-bar-spinner 400ms linear infinite;
 
+  -ms-animation: loading-bar-spinner 400ms linear infinite;
 
+  -o-animation: loading-bar-spinner 400ms linear infinite;
 
+  -webkit-animation: loading-bar-spinner 400ms linear infinite;
 
+  animation: loading-bar-spinner 400ms linear infinite;
 
+}
 
+
 
+@-webkit-keyframes loading-bar-spinner {
 
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
 
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
 
+}
 
+@-moz-keyframes loading-bar-spinner {
 
+  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
 
+  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
 
+}
 
+@-o-keyframes loading-bar-spinner {
 
+  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
 
+  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
 
+}
 
+@-ms-keyframes loading-bar-spinner {
 
+  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
 
+  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
 
+}
 
+@keyframes loading-bar-spinner {
 
+  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
 
+  100% { transform: rotate(360deg); transform: rotate(360deg); }
 
+}
 
+
 
+//Ajax & Static Version
 
+.pace {
 
+  -webkit-pointer-events: none;
 
+  pointer-events: none;
 
+
 
+  -moz-user-select: none;
 
+  -webkit-user-select: none;
 
+  user-select: none;
 
+}
 
+
 
+.pace-inactive {
 
+  display: none;
 
+}
 
+
 
+.pace .pace-progress {
 
+  position: fixed;
 
+  top: 0;
 
+  right: 100%;
 
+  z-index: 2000;
 
+  width: 100%;
 
+  height: 2px;
 
+  background: theme-color("primary");
 
+}

+ 19288 - 0
static/vendors/chart.js/Chart.bundle.js
View File 

@@ -0,0 +1,19288 @@
 
+/*!
 
+ * Chart.js v2.8.0
 
+ * https://www.chartjs.org
 
+ * (c) 2019 Chart.js Contributors
 
+ * Released under the MIT License
 
+ */
 
+(function (global, factory) {
 
+typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 
+typeof define === 'function' && define.amd ? define(factory) :
 
+(global.Chart = factory());
 
+}(this, (function () { 'use strict';
 
+
 
+/* MIT license */
 
+
 
+var conversions = {
 
+  rgb2hsl: rgb2hsl,
 
+  rgb2hsv: rgb2hsv,
 
+  rgb2hwb: rgb2hwb,
 
+  rgb2cmyk: rgb2cmyk,
 
+  rgb2keyword: rgb2keyword,
 
+  rgb2xyz: rgb2xyz,
 
+  rgb2lab: rgb2lab,
 
+  rgb2lch: rgb2lch,
 
+
 
+  hsl2rgb: hsl2rgb,
 
+  hsl2hsv: hsl2hsv,
 
+  hsl2hwb: hsl2hwb,
 
+  hsl2cmyk: hsl2cmyk,
 
+  hsl2keyword: hsl2keyword,
 
+
 
+  hsv2rgb: hsv2rgb,
 
+  hsv2hsl: hsv2hsl,
 
+  hsv2hwb: hsv2hwb,
 
+  hsv2cmyk: hsv2cmyk,
 
+  hsv2keyword: hsv2keyword,
 
+
 
+  hwb2rgb: hwb2rgb,
 
+  hwb2hsl: hwb2hsl,
 
+  hwb2hsv: hwb2hsv,
 
+  hwb2cmyk: hwb2cmyk,
 
+  hwb2keyword: hwb2keyword,
 
+
 
+  cmyk2rgb: cmyk2rgb,
 
+  cmyk2hsl: cmyk2hsl,
 
+  cmyk2hsv: cmyk2hsv,
 
+  cmyk2hwb: cmyk2hwb,
 
+  cmyk2keyword: cmyk2keyword,
 
+
 
+  keyword2rgb: keyword2rgb,
 
+  keyword2hsl: keyword2hsl,
 
+  keyword2hsv: keyword2hsv,
 
+  keyword2hwb: keyword2hwb,
 
+  keyword2cmyk: keyword2cmyk,
 
+  keyword2lab: keyword2lab,
 
+  keyword2xyz: keyword2xyz,
 
+
 
+  xyz2rgb: xyz2rgb,
 
+  xyz2lab: xyz2lab,
 
+  xyz2lch: xyz2lch,
 
+
 
+  lab2xyz: lab2xyz,
 
+  lab2rgb: lab2rgb,
 
+  lab2lch: lab2lch,
 
+
 
+  lch2lab: lch2lab,
 
+  lch2xyz: lch2xyz,
 
+  lch2rgb: lch2rgb
 
+};
 
+
 
+
 
+function rgb2hsl(rgb) {
 
+  var r = rgb[0]/255,
 
+      g = rgb[1]/255,
 
+      b = rgb[2]/255,
 
+      min = Math.min(r, g, b),
 
+      max = Math.max(r, g, b),
 
+      delta = max - min,
 
+      h, s, l;
 
+
 
+  if (max == min)
 
+    h = 0;
 
+  else if (r == max)
 
+    h = (g - b) / delta;
 
+  else if (g == max)
 
+    h = 2 + (b - r) / delta;
 
+  else if (b == max)
 
+    h = 4 + (r - g)/ delta;
 
+
 
+  h = Math.min(h * 60, 360);
 
+
 
+  if (h < 0)
 
+    h += 360;
 
+
 
+  l = (min + max) / 2;
 
+
 
+  if (max == min)
 
+    s = 0;
 
+  else if (l <= 0.5)
 
+    s = delta / (max + min);
 
+  else
 
+    s = delta / (2 - max - min);
 
+
 
+  return [h, s * 100, l * 100];
 
+}
 
+
 
+function rgb2hsv(rgb) {
 
+  var r = rgb[0],
 
+      g = rgb[1],
 
+      b = rgb[2],
 
+      min = Math.min(r, g, b),
 
+      max = Math.max(r, g, b),
 
+      delta = max - min,
 
+      h, s, v;
 
+
 
+  if (max == 0)
 
+    s = 0;
 
+  else
 
+    s = (delta/max * 1000)/10;
 
+
 
+  if (max == min)
 
+    h = 0;
 
+  else if (r == max)
 
+    h = (g - b) / delta;
 
+  else if (g == max)
 
+    h = 2 + (b - r) / delta;
 
+  else if (b == max)
 
+    h = 4 + (r - g) / delta;
 
+
 
+  h = Math.min(h * 60, 360);
 
+
 
+  if (h < 0)
 
+    h += 360;
 
+
 
+  v = ((max / 255) * 1000) / 10;
 
+
 
+  return [h, s, v];
 
+}
 
+
 
+function rgb2hwb(rgb) {
 
+  var r = rgb[0],
 
+      g = rgb[1],
 
+      b = rgb[2],
 
+      h = rgb2hsl(rgb)[0],
 
+      w = 1/255 * Math.min(r, Math.min(g, b)),
 
+      b = 1 - 1/255 * Math.max(r, Math.max(g, b));
 
+
 
+  return [h, w * 100, b * 100];
 
+}
 
+
 
+function rgb2cmyk(rgb) {
 
+  var r = rgb[0] / 255,
 
+      g = rgb[1] / 255,
 
+      b = rgb[2] / 255,
 
+      c, m, y, k;
 
+
 
+  k = Math.min(1 - r, 1 - g, 1 - b);
 
+  c = (1 - r - k) / (1 - k) || 0;
 
+  m = (1 - g - k) / (1 - k) || 0;
 
+  y = (1 - b - k) / (1 - k) || 0;
 
+  return [c * 100, m * 100, y * 100, k * 100];
 
+}
 
+
 
+function rgb2keyword(rgb) {
 
+  return reverseKeywords[JSON.stringify(rgb)];
 
+}
 
+
 
+function rgb2xyz(rgb) {
 
+  var r = rgb[0] / 255,
 
+      g = rgb[1] / 255,
 
+      b = rgb[2] / 255;
 
+
 
+  // assume sRGB
 
+  r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
 
+  g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
 
+  b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
 
+
 
+  var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
 
+  var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
 
+  var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
 
+
 
+  return [x * 100, y *100, z * 100];
 
+}
 
+
 
+function rgb2lab(rgb) {
 
+  var xyz = rgb2xyz(rgb),
 
+        x = xyz[0],
 
+        y = xyz[1],
 
+        z = xyz[2],
 
+        l, a, b;
 
+
 
+  x /= 95.047;
 
+  y /= 100;
 
+  z /= 108.883;
 
+
 
+  x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
 
+  y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
 
+  z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
 
+
 
+  l = (116 * y) - 16;
 
+  a = 500 * (x - y);
 
+  b = 200 * (y - z);
 
+
 
+  return [l, a, b];
 
+}
 
+
 
+function rgb2lch(args) {
 
+  return lab2lch(rgb2lab(args));
 
+}
 
+
 
+function hsl2rgb(hsl) {
 
+  var h = hsl[0] / 360,
 
+      s = hsl[1] / 100,
 
+      l = hsl[2] / 100,
 
+      t1, t2, t3, rgb, val;
 
+
 
+  if (s == 0) {
 
+    val = l * 255;
 
+    return [val, val, val];
 
+  }
 
+
 
+  if (l < 0.5)
 
+    t2 = l * (1 + s);
 
+  else
 
+    t2 = l + s - l * s;
 
+  t1 = 2 * l - t2;
 
+
 
+  rgb = [0, 0, 0];
 
+  for (var i = 0; i < 3; i++) {
 
+    t3 = h + 1 / 3 * - (i - 1);
 
+    t3 < 0 && t3++;
 
+    t3 > 1 && t3--;
 
+
 
+    if (6 * t3 < 1)
 
+      val = t1 + (t2 - t1) * 6 * t3;
 
+    else if (2 * t3 < 1)
 
+      val = t2;
 
+    else if (3 * t3 < 2)
 
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
 
+    else
 
+      val = t1;
 
+
 
+    rgb[i] = val * 255;
 
+  }
 
+
 
+  return rgb;
 
+}
 
+
 
+function hsl2hsv(hsl) {
 
+  var h = hsl[0],
 
+      s = hsl[1] / 100,
 
+      l = hsl[2] / 100,
 
+      sv, v;
 
+
 
+  if(l === 0) {
 
+      // no need to do calc on black
 
+      // also avoids divide by 0 error
 
+      return [0, 0, 0];
 
+  }
 
+
 
+  l *= 2;
 
+  s *= (l <= 1) ? l : 2 - l;
 
+  v = (l + s) / 2;
 
+  sv = (2 * s) / (l + s);
 
+  return [h, sv * 100, v * 100];
 
+}
 
+
 
+function hsl2hwb(args) {
 
+  return rgb2hwb(hsl2rgb(args));
 
+}
 
+
 
+function hsl2cmyk(args) {
 
+  return rgb2cmyk(hsl2rgb(args));
 
+}
 
+
 
+function hsl2keyword(args) {
 
+  return rgb2keyword(hsl2rgb(args));
 
+}
 
+
 
+
 
+function hsv2rgb(hsv) {
 
+  var h = hsv[0] / 60,
 
+      s = hsv[1] / 100,
 
+      v = hsv[2] / 100,
 
+      hi = Math.floor(h) % 6;
 
+
 
+  var f = h - Math.floor(h),
 
+      p = 255 * v * (1 - s),
 
+      q = 255 * v * (1 - (s * f)),
 
+      t = 255 * v * (1 - (s * (1 - f))),
 
+      v = 255 * v;
 
+
 
+  switch(hi) {
 
+    case 0:
 
+      return [v, t, p];
 
+    case 1:
 
+      return [q, v, p];
 
+    case 2:
 
+      return [p, v, t];
 
+    case 3:
 
+      return [p, q, v];
 
+    case 4:
 
+      return [t, p, v];
 
+    case 5:
 
+      return [v, p, q];
 
+  }
 
+}
 
+
 
+function hsv2hsl(hsv) {
 
+  var h = hsv[0],
 
+      s = hsv[1] / 100,
 
+      v = hsv[2] / 100,
 
+      sl, l;
 
+
 
+  l = (2 - s) * v;
 
+  sl = s * v;
 
+  sl /= (l <= 1) ? l : 2 - l;
 
+  sl = sl || 0;
 
+  l /= 2;
 
+  return [h, sl * 100, l * 100];
 
+}
 
+
 
+function hsv2hwb(args) {
 
+  return rgb2hwb(hsv2rgb(args))
 
+}
 
+
 
+function hsv2cmyk(args) {
 
+  return rgb2cmyk(hsv2rgb(args));
 
+}
 
+
 
+function hsv2keyword(args) {
 
+  return rgb2keyword(hsv2rgb(args));
 
+}
 
+
 
+// http://dev.w3.org/csswg/css-color/#hwb-to-rgb
 
+function hwb2rgb(hwb) {
 
+  var h = hwb[0] / 360,
 
+      wh = hwb[1] / 100,
 
+      bl = hwb[2] / 100,
 
+      ratio = wh + bl,
 
+      i, v, f, n;
 
+
 
+  // wh + bl cant be > 1
 
+  if (ratio > 1) {
 
+    wh /= ratio;
 
+    bl /= ratio;
 
+  }
 
+
 
+  i = Math.floor(6 * h);
 
+  v = 1 - bl;
 
+  f = 6 * h - i;
 
+  if ((i & 0x01) != 0) {
 
+    f = 1 - f;
 
+  }
 
+  n = wh + f * (v - wh);  // linear interpolation
 
+
 
+  switch (i) {
 
+    default:
 
+    case 6:
 
+    case 0: r = v; g = n; b = wh; break;
 
+    case 1: r = n; g = v; b = wh; break;
 
+    case 2: r = wh; g = v; b = n; break;
 
+    case 3: r = wh; g = n; b = v; break;
 
+    case 4: r = n; g = wh; b = v; break;
 
+    case 5: r = v; g = wh; b = n; break;
 
+  }
 
+
 
+  return [r * 255, g * 255, b * 255];
 
+}
 
+
 
+function hwb2hsl(args) {
 
+  return rgb2hsl(hwb2rgb(args));
 
+}
 
+
 
+function hwb2hsv(args) {
 
+  return rgb2hsv(hwb2rgb(args));
 
+}
 
+
 
+function hwb2cmyk(args) {
 
+  return rgb2cmyk(hwb2rgb(args));
 
+}
 
+
 
+function hwb2keyword(args) {
 
+  return rgb2keyword(hwb2rgb(args));
 
+}
 
+
 
+function cmyk2rgb(cmyk) {
 
+  var c = cmyk[0] / 100,
 
+      m = cmyk[1] / 100,
 
+      y = cmyk[2] / 100,
 
+      k = cmyk[3] / 100,
 
+      r, g, b;
 
+
 
+  r = 1 - Math.min(1, c * (1 - k) + k);
 
+  g = 1 - Math.min(1, m * (1 - k) + k);
 
+  b = 1 - Math.min(1, y * (1 - k) + k);
 
+  return [r * 255, g * 255, b * 255];
 
+}
 
+
 
+function cmyk2hsl(args) {
 
+  return rgb2hsl(cmyk2rgb(args));
 
+}
 
+
 
+function cmyk2hsv(args) {
 
+  return rgb2hsv(cmyk2rgb(args));
 
+}
 
+
 
+function cmyk2hwb(args) {
 
+  return rgb2hwb(cmyk2rgb(args));
 
+}
 
+
 
+function cmyk2keyword(args) {
 
+  return rgb2keyword(cmyk2rgb(args));
 
+}
 
+
 
+
 
+function xyz2rgb(xyz) {
 
+  var x = xyz[0] / 100,
 
+      y = xyz[1] / 100,
 
+      z = xyz[2] / 100,
 
+      r, g, b;
 
+
 
+  r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);
 
+  g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);
 
+  b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);
 
+
 
+  // assume sRGB
 
+  r = r > 0.0031308 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
 
+    : r = (r * 12.92);
 
+
 
+  g = g > 0.0031308 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
 
+    : g = (g * 12.92);
 
+
 
+  b = b > 0.0031308 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
 
+    : b = (b * 12.92);
 
+
 
+  r = Math.min(Math.max(0, r), 1);
 
+  g = Math.min(Math.max(0, g), 1);
 
+  b = Math.min(Math.max(0, b), 1);
 
+
 
+  return [r * 255, g * 255, b * 255];
 
+}
 
+
 
+function xyz2lab(xyz) {
 
+  var x = xyz[0],
 
+      y = xyz[1],
 
+      z = xyz[2],
 
+      l, a, b;
 
+
 
+  x /= 95.047;
 
+  y /= 100;
 
+  z /= 108.883;
 
+
 
+  x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
 
+  y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
 
+  z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
 
+
 
+  l = (116 * y) - 16;
 
+  a = 500 * (x - y);
 
+  b = 200 * (y - z);
 
+
 
+  return [l, a, b];
 
+}
 
+
 
+function xyz2lch(args) {
 
+  return lab2lch(xyz2lab(args));
 
+}
 
+
 
+function lab2xyz(lab) {
 
+  var l = lab[0],
 
+      a = lab[1],
 
+      b = lab[2],
 
+      x, y, z, y2;
 
+
 
+  if (l <= 8) {
 
+    y = (l * 100) / 903.3;
 
+    y2 = (7.787 * (y / 100)) + (16 / 116);
 
+  } else {
 
+    y = 100 * Math.pow((l + 16) / 116, 3);
 
+    y2 = Math.pow(y / 100, 1/3);
 
+  }
 
+
 
+  x = x / 95.047 <= 0.008856 ? x = (95.047 * ((a / 500) + y2 - (16 / 116))) / 7.787 : 95.047 * Math.pow((a / 500) + y2, 3);
 
+
 
+  z = z / 108.883 <= 0.008859 ? z = (108.883 * (y2 - (b / 200) - (16 / 116))) / 7.787 : 108.883 * Math.pow(y2 - (b / 200), 3);
 
+
 
+  return [x, y, z];
 
+}
 
+
 
+function lab2lch(lab) {
 
+  var l = lab[0],
 
+      a = lab[1],
 
+      b = lab[2],
 
+      hr, h, c;
 
+
 
+  hr = Math.atan2(b, a);
 
+  h = hr * 360 / 2 / Math.PI;
 
+  if (h < 0) {
 
+    h += 360;
 
+  }
 
+  c = Math.sqrt(a * a + b * b);
 
+  return [l, c, h];
 
+}
 
+
 
+function lab2rgb(args) {
 
+  return xyz2rgb(lab2xyz(args));
 
+}
 
+
 
+function lch2lab(lch) {
 
+  var l = lch[0],
 
+      c = lch[1],
 
+      h = lch[2],
 
+      a, b, hr;
 
+
 
+  hr = h / 360 * 2 * Math.PI;
 
+  a = c * Math.cos(hr);
 
+  b = c * Math.sin(hr);
 
+  return [l, a, b];
 
+}
 
+
 
+function lch2xyz(args) {
 
+  return lab2xyz(lch2lab(args));
 
+}
 
+
 
+function lch2rgb(args) {
 
+  return lab2rgb(lch2lab(args));
 
+}
 
+
 
+function keyword2rgb(keyword) {
 
+  return cssKeywords[keyword];
 
+}
 
+
 
+function keyword2hsl(args) {
 
+  return rgb2hsl(keyword2rgb(args));
 
+}
 
+
 
+function keyword2hsv(args) {
 
+  return rgb2hsv(keyword2rgb(args));
 
+}
 
+
 
+function keyword2hwb(args) {
 
+  return rgb2hwb(keyword2rgb(args));
 
+}
 
+
 
+function keyword2cmyk(args) {
 
+  return rgb2cmyk(keyword2rgb(args));
 
+}
 
+
 
+function keyword2lab(args) {
 
+  return rgb2lab(keyword2rgb(args));
 
+}
 
+
 
+function keyword2xyz(args) {
 
+  return rgb2xyz(keyword2rgb(args));
 
+}
 
+
 
+var cssKeywords = {
 
+  aliceblue:  [240,248,255],
 
+  antiquewhite: [250,235,215],
 
+  aqua: [0,255,255],
 
+  aquamarine: [127,255,212],
 
+  azure:  [240,255,255],
 
+  beige:  [245,245,220],
 
+  bisque: [255,228,196],
 
+  black:  [0,0,0],
 
+  blanchedalmond: [255,235,205],
 
+  blue: [0,0,255],
 
+  blueviolet: [138,43,226],
 
+  brown:  [165,42,42],
 
+  burlywood:  [222,184,135],
 
+  cadetblue:  [95,158,160],
 
+  chartreuse: [127,255,0],
 
+  chocolate:  [210,105,30],
 
+  coral:  [255,127,80],
 
+  cornflowerblue: [100,149,237],
 
+  cornsilk: [255,248,220],
 
+  crimson:  [220,20,60],
 
+  cyan: [0,255,255],
 
+  darkblue: [0,0,139],
 
+  darkcyan: [0,139,139],
 
+  darkgoldenrod:  [184,134,11],
 
+  darkgray: [169,169,169],
 
+  darkgreen:  [0,100,0],
 
+  darkgrey: [169,169,169],
 
+  darkkhaki:  [189,183,107],
 
+  darkmagenta:  [139,0,139],
 
+  darkolivegreen: [85,107,47],
 
+  darkorange: [255,140,0],
 
+  darkorchid: [153,50,204],
 
+  darkred:  [139,0,0],
 
+  darksalmon: [233,150,122],
 
+  darkseagreen: [143,188,143],
 
+  darkslateblue:  [72,61,139],
 
+  darkslategray:  [47,79,79],
 
+  darkslategrey:  [47,79,79],
 
+  darkturquoise:  [0,206,209],
 
+  darkviolet: [148,0,211],
 
+  deeppink: [255,20,147],
 
+  deepskyblue:  [0,191,255],
 
+  dimgray:  [105,105,105],
 
+  dimgrey:  [105,105,105],
 
+  dodgerblue: [30,144,255],
 
+  firebrick:  [178,34,34],
 
+  floralwhite:  [255,250,240],
 
+  forestgreen:  [34,139,34],
 
+  fuchsia:  [255,0,255],
 
+  gainsboro:  [220,220,220],
 
+  ghostwhite: [248,248,255],
 
+  gold: [255,215,0],
 
+  goldenrod:  [218,165,32],
 
+  gray: [128,128,128],
 
+  green:  [0,128,0],
 
+  greenyellow:  [173,255,47],
 
+  grey: [128,128,128],
 
+  honeydew: [240,255,240],
 
+  hotpink:  [255,105,180],
 
+  indianred:  [205,92,92],
 
+  indigo: [75,0,130],
 
+  ivory:  [255,255,240],
 
+  khaki:  [240,230,140],
 
+  lavender: [230,230,250],
 
+  lavenderblush:  [255,240,245],
 
+  lawngreen:  [124,252,0],
 
+  lemonchiffon: [255,250,205],
 
+  lightblue:  [173,216,230],
 
+  lightcoral: [240,128,128],
 
+  lightcyan:  [224,255,255],
 
+  lightgoldenrodyellow: [250,250,210],
 
+  lightgray:  [211,211,211],
 
+  lightgreen: [144,238,144],
 
+  lightgrey:  [211,211,211],
 
+  lightpink:  [255,182,193],
 
+  lightsalmon:  [255,160,122],
 
+  lightseagreen:  [32,178,170],
 
+  lightskyblue: [135,206,250],
 
+  lightslategray: [119,136,153],
 
+  lightslategrey: [119,136,153],
 
+  lightsteelblue: [176,196,222],
 
+  lightyellow:  [255,255,224],
 
+  lime: [0,255,0],
 
+  limegreen:  [50,205,50],
 
+  linen:  [250,240,230],
 
+  magenta:  [255,0,255],
 
+  maroon: [128,0,0],
 
+  mediumaquamarine: [102,205,170],
 
+  mediumblue: [0,0,205],
 
+  mediumorchid: [186,85,211],
 
+  mediumpurple: [147,112,219],
 
+  mediumseagreen: [60,179,113],
 
+  mediumslateblue:  [123,104,238],
 
+  mediumspringgreen:  [0,250,154],
 
+  mediumturquoise:  [72,209,204],
 
+  mediumvioletred:  [199,21,133],
 
+  midnightblue: [25,25,112],
 
+  mintcream:  [245,255,250],
 
+  mistyrose:  [255,228,225],
 
+  moccasin: [255,228,181],
 
+  navajowhite:  [255,222,173],
 
+  navy: [0,0,128],
 
+  oldlace:  [253,245,230],
 
+  olive:  [128,128,0],
 
+  olivedrab:  [107,142,35],
 
+  orange: [255,165,0],
 
+  orangered:  [255,69,0],
 
+  orchid: [218,112,214],
 
+  palegoldenrod:  [238,232,170],
 
+  palegreen:  [152,251,152],
 
+  paleturquoise:  [175,238,238],
 
+  palevioletred:  [219,112,147],
 
+  papayawhip: [255,239,213],
 
+  peachpuff:  [255,218,185],
 
+  peru: [205,133,63],
 
+  pink: [255,192,203],
 
+  plum: [221,160,221],
 
+  powderblue: [176,224,230],
 
+  purple: [128,0,128],
 
+  rebeccapurple: [102, 51, 153],
 
+  red:  [255,0,0],
 
+  rosybrown:  [188,143,143],
 
+  royalblue:  [65,105,225],
 
+  saddlebrown:  [139,69,19],
 
+  salmon: [250,128,114],
 
+  sandybrown: [244,164,96],
 
+  seagreen: [46,139,87],
 
+  seashell: [255,245,238],
 
+  sienna: [160,82,45],
 
+  silver: [192,192,192],
 
+  skyblue:  [135,206,235],
 
+  slateblue:  [106,90,205],
 
+  slategray:  [112,128,144],
 
+  slategrey:  [112,128,144],
 
+  snow: [255,250,250],
 
+  springgreen:  [0,255,127],
 
+  steelblue:  [70,130,180],
 
+  tan:  [210,180,140],
 
+  teal: [0,128,128],
 
+  thistle:  [216,191,216],
 
+  tomato: [255,99,71],
 
+  turquoise:  [64,224,208],
 
+  violet: [238,130,238],
 
+  wheat:  [245,222,179],
 
+  white:  [255,255,255],
 
+  whitesmoke: [245,245,245],
 
+  yellow: [255,255,0],
 
+  yellowgreen:  [154,205,50]
 
+};
 
+
 
+var reverseKeywords = {};
 
+for (var key in cssKeywords) {
 
+  reverseKeywords[JSON.stringify(cssKeywords[key])] = key;
 
+}
 
+
 
+var convert = function() {
 
+   return new Converter();
 
+};
 
+
 
+for (var func in conversions) {
 
+  // export Raw versions
 
+  convert[func + "Raw"] =  (function(func) {
 
+    // accept array or plain args
 
+    return function(arg) {
 
+      if (typeof arg == "number")
 
+        arg = Array.prototype.slice.call(arguments);
 
+      return conversions[func](arg);
 
+    }
 
+  })(func);
 
+
 
+  var pair = /(\w+)2(\w+)/.exec(func),
 
+      from = pair[1],
 
+      to = pair[2];
 
+
 
+  // export rgb2hsl and ["rgb"]["hsl"]
 
+  convert[from] = convert[from] || {};
 
+
 
+  convert[from][to] = convert[func] = (function(func) { 
+    return function(arg) {
 
+      if (typeof arg == "number")
 
+        arg = Array.prototype.slice.call(arguments);
 
+      
+      var val = conversions[func](arg);
 
+      if (typeof val == "string" || val === undefined)
 
+        return val; // keyword
 
+
 
+      for (var i = 0; i < val.length; i++)
 
+        val[i] = Math.round(val[i]);
 
+      return val;
 
+    }
 
+  })(func);
 
+}
 
+
 
+
 
+/* Converter does lazy conversion and caching */
 
+var Converter = function() {
 
+   this.convs = {};
 
+};
 
+
 
+/* Either get the values for a space or
 
+  set the values for a space, depending on args */
 
+Converter.prototype.routeSpace = function(space, args) {
 
+   var values = args[0];
 
+   if (values === undefined) {
 
+      // color.rgb()
 
+      return this.getValues(space);
 
+   }
 
+   // color.rgb(10, 10, 10)
 
+   if (typeof values == "number") {
 
+      values = Array.prototype.slice.call(args);        
+   }
 
+
 
+   return this.setValues(space, values);
 
+};
 
+  
+/* Set the values for a space, invalidating cache */
 
+Converter.prototype.setValues = function(space, values) {
 
+   this.space = space;
 
+   this.convs = {};
 
+   this.convs[space] = values;
 
+   return this;
 
+};
 
+
 
+/* Get the values for a space. If there's already
 
+  a conversion for the space, fetch it, otherwise
 
+  compute it */
 
+Converter.prototype.getValues = function(space) {
 
+   var vals = this.convs[space];
 
+   if (!vals) {
 
+      var fspace = this.space,
 
+          from = this.convs[fspace];
 
+      vals = convert[fspace][space](from);
 
+
 
+      this.convs[space] = vals;
 
+   }
 
+  return vals;
 
+};
 
+
 
+["rgb", "hsl", "hsv", "cmyk", "keyword"].forEach(function(space) {
 
+   Converter.prototype[space] = function(vals) {
 
+      return this.routeSpace(space, arguments);
 
+   };
 
+});
 
+
 
+var colorConvert = convert;
 
+
 
+var colorName = {
 
+	"aliceblue": [240, 248, 255],
 
+	"antiquewhite": [250, 235, 215],
 
+	"aqua": [0, 255, 255],
 
+	"aquamarine": [127, 255, 212],
 
+	"azure": [240, 255, 255],
 
+	"beige": [245, 245, 220],
 
+	"bisque": [255, 228, 196],
 
+	"black": [0, 0, 0],
 
+	"blanchedalmond": [255, 235, 205],
 
+	"blue": [0, 0, 255],
 
+	"blueviolet": [138, 43, 226],
 
+	"brown": [165, 42, 42],
 
+	"burlywood": [222, 184, 135],
 
+	"cadetblue": [95, 158, 160],
 
+	"chartreuse": [127, 255, 0],
 
+	"chocolate": [210, 105, 30],
 
+	"coral": [255, 127, 80],
 
+	"cornflowerblue": [100, 149, 237],
 
+	"cornsilk": [255, 248, 220],
 
+	"crimson": [220, 20, 60],
 
+	"cyan": [0, 255, 255],
 
+	"darkblue": [0, 0, 139],
 
+	"darkcyan": [0, 139, 139],
 
+	"darkgoldenrod": [184, 134, 11],
 
+	"darkgray": [169, 169, 169],
 
+	"darkgreen": [0, 100, 0],
 
+	"darkgrey": [169, 169, 169],
 
+	"darkkhaki": [189, 183, 107],
 
+	"darkmagenta": [139, 0, 139],
 
+	"darkolivegreen": [85, 107, 47],
 
+	"darkorange": [255, 140, 0],
 
+	"darkorchid": [153, 50, 204],
 
+	"darkred": [139, 0, 0],
 
+	"darksalmon": [233, 150, 122],
 
+	"darkseagreen": [143, 188, 143],
 
+	"darkslateblue": [72, 61, 139],
 
+	"darkslategray": [47, 79, 79],
 
+	"darkslategrey": [47, 79, 79],
 
+	"darkturquoise": [0, 206, 209],
 
+	"darkviolet": [148, 0, 211],
 
+	"deeppink": [255, 20, 147],
 
+	"deepskyblue": [0, 191, 255],
 
+	"dimgray": [105, 105, 105],
 
+	"dimgrey": [105, 105, 105],
 
+	"dodgerblue": [30, 144, 255],
 
+	"firebrick": [178, 34, 34],
 
+	"floralwhite": [255, 250, 240],
 
+	"forestgreen": [34, 139, 34],
 
+	"fuchsia": [255, 0, 255],
 
+	"gainsboro": [220, 220, 220],
 
+	"ghostwhite": [248, 248, 255],
 
+	"gold": [255, 215, 0],
 
+	"goldenrod": [218, 165, 32],
 
+	"gray": [128, 128, 128],
 
+	"green": [0, 128, 0],
 
+	"greenyellow": [173, 255, 47],
 
+	"grey": [128, 128, 128],
 
+	"honeydew": [240, 255, 240],
 
+	"hotpink": [255, 105, 180],
 
+	"indianred": [205, 92, 92],
 
+	"indigo": [75, 0, 130],
 
+	"ivory": [255, 255, 240],
 
+	"khaki": [240, 230, 140],
 
+	"lavender": [230, 230, 250],
 
+	"lavenderblush": [255, 240, 245],
 
+	"lawngreen": [124, 252, 0],
 
+	"lemonchiffon": [255, 250, 205],
 
+	"lightblue": [173, 216, 230],
 
+	"lightcoral": [240, 128, 128],
 
+	"lightcyan": [224, 255, 255],
 
+	"lightgoldenrodyellow": [250, 250, 210],
 
+	"lightgray": [211, 211, 211],
 
+	"lightgreen": [144, 238, 144],
 
+	"lightgrey": [211, 211, 211],
 
+	"lightpink": [255, 182, 193],
 
+	"lightsalmon": [255, 160, 122],
 
+	"lightseagreen": [32, 178, 170],
 
+	"lightskyblue": [135, 206, 250],
 
+	"lightslategray": [119, 136, 153],
 
+	"lightslategrey": [119, 136, 153],
 
+	"lightsteelblue": [176, 196, 222],
 
+	"lightyellow": [255, 255, 224],
 
+	"lime": [0, 255, 0],
 
+	"limegreen": [50, 205, 50],
 
+	"linen": [250, 240, 230],
 
+	"magenta": [255, 0, 255],
 
+	"maroon": [128, 0, 0],
 
+	"mediumaquamarine": [102, 205, 170],
 
+	"mediumblue": [0, 0, 205],
 
+	"mediumorchid": [186, 85, 211],
 
+	"mediumpurple": [147, 112, 219],
 
+	"mediumseagreen": [60, 179, 113],
 
+	"mediumslateblue": [123, 104, 238],
 
+	"mediumspringgreen": [0, 250, 154],
 
+	"mediumturquoise": [72, 209, 204],
 
+	"mediumvioletred": [199, 21, 133],
 
+	"midnightblue": [25, 25, 112],
 
+	"mintcream": [245, 255, 250],
 
+	"mistyrose": [255, 228, 225],
 
+	"moccasin": [255, 228, 181],
 
+	"navajowhite": [255, 222, 173],
 
+	"navy": [0, 0, 128],
 
+	"oldlace": [253, 245, 230],
 
+	"olive": [128, 128, 0],
 
+	"olivedrab": [107, 142, 35],
 
+	"orange": [255, 165, 0],
 
+	"orangered": [255, 69, 0],
 
+	"orchid": [218, 112, 214],
 
+	"palegoldenrod": [238, 232, 170],
 
+	"palegreen": [152, 251, 152],
 
+	"paleturquoise": [175, 238, 238],
 
+	"palevioletred": [219, 112, 147],
 
+	"papayawhip": [255, 239, 213],
 
+	"peachpuff": [255, 218, 185],
 
+	"peru": [205, 133, 63],
 
+	"pink": [255, 192, 203],
 
+	"plum": [221, 160, 221],
 
+	"powderblue": [176, 224, 230],
 
+	"purple": [128, 0, 128],
 
+	"rebeccapurple": [102, 51, 153],
 
+	"red": [255, 0, 0],
 
+	"rosybrown": [188, 143, 143],
 
+	"royalblue": [65, 105, 225],
 
+	"saddlebrown": [139, 69, 19],
 
+	"salmon": [250, 128, 114],
 
+	"sandybrown": [244, 164, 96],
 
+	"seagreen": [46, 139, 87],
 
+	"seashell": [255, 245, 238],
 
+	"sienna": [160, 82, 45],
 
+	"silver": [192, 192, 192],
 
+	"skyblue": [135, 206, 235],
 
+	"slateblue": [106, 90, 205],
 
+	"slategray": [112, 128, 144],
 
+	"slategrey": [112, 128, 144],
 
+	"snow": [255, 250, 250],
 
+	"springgreen": [0, 255, 127],
 
+	"steelblue": [70, 130, 180],
 
+	"tan": [210, 180, 140],
 
+	"teal": [0, 128, 128],
 
+	"thistle": [216, 191, 216],
 
+	"tomato": [255, 99, 71],
 
+	"turquoise": [64, 224, 208],
 
+	"violet": [238, 130, 238],
 
+	"wheat": [245, 222, 179],
 
+	"white": [255, 255, 255],
 
+	"whitesmoke": [245, 245, 245],
 
+	"yellow": [255, 255, 0],
 
+	"yellowgreen": [154, 205, 50]
 
+};
 
+
 
+/* MIT license */
 
+
 
+
 
+var colorString = {
 
+   getRgba: getRgba,
 
+   getHsla: getHsla,
 
+   getRgb: getRgb,
 
+   getHsl: getHsl,
 
+   getHwb: getHwb,
 
+   getAlpha: getAlpha,
 
+
 
+   hexString: hexString,
 
+   rgbString: rgbString,
 
+   rgbaString: rgbaString,
 
+   percentString: percentString,
 
+   percentaString: percentaString,
 
+   hslString: hslString,
 
+   hslaString: hslaString,
 
+   hwbString: hwbString,
 
+   keyword: keyword
 
+};
 
+
 
+function getRgba(string) {
 
+   if (!string) {
 
+      return;
 
+   }
 
+   var abbr =  /^#([a-fA-F0-9]{3,4})$/i,
 
+       hex =  /^#([a-fA-F0-9]{6}([a-fA-F0-9]{2})?)$/i,
 
+       rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i,
 
+       per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i,
 
+       keyword = /(\w+)/;
 
+
 
+   var rgb = [0, 0, 0],
 
+       a = 1,
 
+       match = string.match(abbr),
 
+       hexAlpha = "";
 
+   if (match) {
 
+      match = match[1];
 
+      hexAlpha = match[3];
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = parseInt(match[i] + match[i], 16);
 
+      }
 
+      if (hexAlpha) {
 
+         a = Math.round((parseInt(hexAlpha + hexAlpha, 16) / 255) * 100) / 100;
 
+      }
 
+   }
 
+   else if (match = string.match(hex)) {
 
+      hexAlpha = match[2];
 
+      match = match[1];
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = parseInt(match.slice(i * 2, i * 2 + 2), 16);
 
+      }
 
+      if (hexAlpha) {
 
+         a = Math.round((parseInt(hexAlpha, 16) / 255) * 100) / 100;
 
+      }
 
+   }
 
+   else if (match = string.match(rgba)) {
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = parseInt(match[i + 1]);
 
+      }
 
+      a = parseFloat(match[4]);
 
+   }
 
+   else if (match = string.match(per)) {
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
 
+      }
 
+      a = parseFloat(match[4]);
 
+   }
 
+   else if (match = string.match(keyword)) {
 
+      if (match[1] == "transparent") {
 
+         return [0, 0, 0, 0];
 
+      }
 
+      rgb = colorName[match[1]];
 
+      if (!rgb) {
 
+         return;
 
+      }
 
+   }
 
+
 
+   for (var i = 0; i < rgb.length; i++) {
 
+      rgb[i] = scale(rgb[i], 0, 255);
 
+   }
 
+   if (!a && a != 0) {
 
+      a = 1;
 
+   }
 
+   else {
 
+      a = scale(a, 0, 1);
 
+   }
 
+   rgb[3] = a;
 
+   return rgb;
 
+}
 
+
 
+function getHsla(string) {
 
+   if (!string) {
 
+      return;
 
+   }
 
+   var hsl = /^hsla?\(\s*([+-]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
 
+   var match = string.match(hsl);
 
+   if (match) {
 
+      var alpha = parseFloat(match[4]);
 
+      var h = scale(parseInt(match[1]), 0, 360),
 
+          s = scale(parseFloat(match[2]), 0, 100),
 
+          l = scale(parseFloat(match[3]), 0, 100),
 
+          a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);
 
+      return [h, s, l, a];
 
+   }
 
+}
 
+
 
+function getHwb(string) {
 
+   if (!string) {
 
+      return;
 
+   }
 
+   var hwb = /^hwb\(\s*([+-]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
 
+   var match = string.match(hwb);
 
+   if (match) {
 
+    var alpha = parseFloat(match[4]);
 
+      var h = scale(parseInt(match[1]), 0, 360),
 
+          w = scale(parseFloat(match[2]), 0, 100),
 
+          b = scale(parseFloat(match[3]), 0, 100),
 
+          a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);
 
+      return [h, w, b, a];
 
+   }
 
+}
 
+
 
+function getRgb(string) {
 
+   var rgba = getRgba(string);
 
+   return rgba && rgba.slice(0, 3);
 
+}
 
+
 
+function getHsl(string) {
 
+  var hsla = getHsla(string);
 
+  return hsla && hsla.slice(0, 3);
 
+}
 
+
 
+function getAlpha(string) {
 
+   var vals = getRgba(string);
 
+   if (vals) {
 
+      return vals[3];
 
+   }
 
+   else if (vals = getHsla(string)) {
 
+      return vals[3];
 
+   }
 
+   else if (vals = getHwb(string)) {
 
+      return vals[3];
 
+   }
 
+}
 
+
 
+// generators
 
+function hexString(rgba, a) {
 
+   var a = (a !== undefined && rgba.length === 3) ? a : rgba[3];
 
+   return "#" + hexDouble(rgba[0]) 
+              + hexDouble(rgba[1])
 
+              + hexDouble(rgba[2])
 
+              + (
 
+                 (a >= 0 && a < 1)
 
+                 ? hexDouble(Math.round(a * 255))
 
+                 : ""
 
+              );
 
+}
 
+
 
+function rgbString(rgba, alpha) {
 
+   if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {
 
+      return rgbaString(rgba, alpha);
 
+   }
 
+   return "rgb(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ")";
 
+}
 
+
 
+function rgbaString(rgba, alpha) {
 
+   if (alpha === undefined) {
 
+      alpha = (rgba[3] !== undefined ? rgba[3] : 1);
 
+   }
 
+   return "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2]
 
+           + ", " + alpha + ")";
 
+}
 
+
 
+function percentString(rgba, alpha) {
 
+   if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {
 
+      return percentaString(rgba, alpha);
 
+   }
 
+   var r = Math.round(rgba[0]/255 * 100),
 
+       g = Math.round(rgba[1]/255 * 100),
 
+       b = Math.round(rgba[2]/255 * 100);
 
+
 
+   return "rgb(" + r + "%, " + g + "%, " + b + "%)";
 
+}
 
+
 
+function percentaString(rgba, alpha) {
 
+   var r = Math.round(rgba[0]/255 * 100),
 
+       g = Math.round(rgba[1]/255 * 100),
 
+       b = Math.round(rgba[2]/255 * 100);
 
+   return "rgba(" + r + "%, " + g + "%, " + b + "%, " + (alpha || rgba[3] || 1) + ")";
 
+}
 
+
 
+function hslString(hsla, alpha) {
 
+   if (alpha < 1 || (hsla[3] && hsla[3] < 1)) {
 
+      return hslaString(hsla, alpha);
 
+   }
 
+   return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
 
+}
 
+
 
+function hslaString(hsla, alpha) {
 
+   if (alpha === undefined) {
 
+      alpha = (hsla[3] !== undefined ? hsla[3] : 1);
 
+   }
 
+   return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, "
 
+           + alpha + ")";
 
+}
 
+
 
+// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
 
+// (hwb have alpha optional & 1 is default value)
 
+function hwbString(hwb, alpha) {
 
+   if (alpha === undefined) {
 
+      alpha = (hwb[3] !== undefined ? hwb[3] : 1);
 
+   }
 
+   return "hwb(" + hwb[0] + ", " + hwb[1] + "%, " + hwb[2] + "%"
 
+           + (alpha !== undefined && alpha !== 1 ? ", " + alpha : "") + ")";
 
+}
 
+
 
+function keyword(rgb) {
 
+  return reverseNames[rgb.slice(0, 3)];
 
+}
 
+
 
+// helpers
 
+function scale(num, min, max) {
 
+   return Math.min(Math.max(min, num), max);
 
+}
 
+
 
+function hexDouble(num) {
 
+  var str = num.toString(16).toUpperCase();
 
+  return (str.length < 2) ? "0" + str : str;
 
+}
 
+
 
+
 
+//create a list of reverse color names
 
+var reverseNames = {};
 
+for (var name in colorName) {
 
+   reverseNames[colorName[name]] = name;
 
+}
 
+
 
+/* MIT license */
 
+
 
+
 
+
 
+var Color = function (obj) {
 
+	if (obj instanceof Color) {
 
+		return obj;
 
+	}
 
+	if (!(this instanceof Color)) {
 
+		return new Color(obj);
 
+	}
 
+
 
+	this.valid = false;
 
+	this.values = {
 
+		rgb: [0, 0, 0],
 
+		hsl: [0, 0, 0],
 
+		hsv: [0, 0, 0],
 
+		hwb: [0, 0, 0],
 
+		cmyk: [0, 0, 0, 0],
 
+		alpha: 1
 
+	};
 
+
 
+	// parse Color() argument
 
+	var vals;
 
+	if (typeof obj === 'string') {
 
+		vals = colorString.getRgba(obj);
 
+		if (vals) {
 
+			this.setValues('rgb', vals);
 
+		} else if (vals = colorString.getHsla(obj)) {
 
+			this.setValues('hsl', vals);
 
+		} else if (vals = colorString.getHwb(obj)) {
 
+			this.setValues('hwb', vals);
 
+		}
 
+	} else if (typeof obj === 'object') {
 
+		vals = obj;
 
+		if (vals.r !== undefined || vals.red !== undefined) {
 
+			this.setValues('rgb', vals);
 
+		} else if (vals.l !== undefined || vals.lightness !== undefined) {
 
+			this.setValues('hsl', vals);
 
+		} else if (vals.v !== undefined || vals.value !== undefined) {
 
+			this.setValues('hsv', vals);
 
+		} else if (vals.w !== undefined || vals.whiteness !== undefined) {
 
+			this.setValues('hwb', vals);
 
+		} else if (vals.c !== undefined || vals.cyan !== undefined) {
 
+			this.setValues('cmyk', vals);
 
+		}
 
+	}
 
+};
 
+
 
+Color.prototype = {
 
+	isValid: function () {
 
+		return this.valid;
 
+	},
 
+	rgb: function () {
 
+		return this.setSpace('rgb', arguments);
 
+	},
 
+	hsl: function () {
 
+		return this.setSpace('hsl', arguments);
 
+	},
 
+	hsv: function () {
 
+		return this.setSpace('hsv', arguments);
 
+	},
 
+	hwb: function () {
 
+		return this.setSpace('hwb', arguments);
 
+	},
 
+	cmyk: function () {
 
+		return this.setSpace('cmyk', arguments);
 
+	},
 
+
 
+	rgbArray: function () {
 
+		return this.values.rgb;
 
+	},
 
+	hslArray: function () {
 
+		return this.values.hsl;
 
+	},
 
+	hsvArray: function () {
 
+		return this.values.hsv;
 
+	},
 
+	hwbArray: function () {
 
+		var values = this.values;
 
+		if (values.alpha !== 1) {
 
+			return values.hwb.concat([values.alpha]);
 
+		}
 
+		return values.hwb;
 
+	},
 
+	cmykArray: function () {
 
+		return this.values.cmyk;
 
+	},
 
+	rgbaArray: function () {
 
+		var values = this.values;
 
+		return values.rgb.concat([values.alpha]);
 
+	},
 
+	hslaArray: function () {
 
+		var values = this.values;
 
+		return values.hsl.concat([values.alpha]);
 
+	},
 
+	alpha: function (val) {
 
+		if (val === undefined) {
 
+			return this.values.alpha;
 
+		}
 
+		this.setValues('alpha', val);
 
+		return this;
 
+	},
 
+
 
+	red: function (val) {
 
+		return this.setChannel('rgb', 0, val);
 
+	},
 
+	green: function (val) {
 
+		return this.setChannel('rgb', 1, val);
 
+	},
 
+	blue: function (val) {
 
+		return this.setChannel('rgb', 2, val);
 
+	},
 
+	hue: function (val) {
 
+		if (val) {
 
+			val %= 360;
 
+			val = val < 0 ? 360 + val : val;
 
+		}
 
+		return this.setChannel('hsl', 0, val);
 
+	},
 
+	saturation: function (val) {
 
+		return this.setChannel('hsl', 1, val);
 
+	},
 
+	lightness: function (val) {
 
+		return this.setChannel('hsl', 2, val);
 
+	},
 
+	saturationv: function (val) {
 
+		return this.setChannel('hsv', 1, val);
 
+	},
 
+	whiteness: function (val) {
 
+		return this.setChannel('hwb', 1, val);
 
+	},
 
+	blackness: function (val) {
 
+		return this.setChannel('hwb', 2, val);
 
+	},
 
+	value: function (val) {
 
+		return this.setChannel('hsv', 2, val);
 
+	},
 
+	cyan: function (val) {
 
+		return this.setChannel('cmyk', 0, val);
 
+	},
 
+	magenta: function (val) {
 
+		return this.setChannel('cmyk', 1, val);
 
+	},
 
+	yellow: function (val) {
 
+		return this.setChannel('cmyk', 2, val);
 
+	},
 
+	black: function (val) {
 
+		return this.setChannel('cmyk', 3, val);
 
+	},
 
+
 
+	hexString: function () {
 
+		return colorString.hexString(this.values.rgb);
 
+	},
 
+	rgbString: function () {
 
+		return colorString.rgbString(this.values.rgb, this.values.alpha);
 
+	},
 
+	rgbaString: function () {
 
+		return colorString.rgbaString(this.values.rgb, this.values.alpha);
 
+	},
 
+	percentString: function () {
 
+		return colorString.percentString(this.values.rgb, this.values.alpha);
 
+	},
 
+	hslString: function () {
 
+		return colorString.hslString(this.values.hsl, this.values.alpha);
 
+	},
 
+	hslaString: function () {
 
+		return colorString.hslaString(this.values.hsl, this.values.alpha);
 
+	},
 
+	hwbString: function () {
 
+		return colorString.hwbString(this.values.hwb, this.values.alpha);
 
+	},
 
+	keyword: function () {
 
+		return colorString.keyword(this.values.rgb, this.values.alpha);
 
+	},
 
+
 
+	rgbNumber: function () {
 
+		var rgb = this.values.rgb;
 
+		return (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
 
+	},
 
+
 
+	luminosity: function () {
 
+		// http://www.w3.org/TR/WCAG20/#relativeluminancedef
 
+		var rgb = this.values.rgb;
 
+		var lum = [];
 
+		for (var i = 0; i < rgb.length; i++) {
 
+			var chan = rgb[i] / 255;
 
+			lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4);
 
+		}
 
+		return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
 
+	},
 
+
 
+	contrast: function (color2) {
 
+		// http://www.w3.org/TR/WCAG20/#contrast-ratiodef
 
+		var lum1 = this.luminosity();
 
+		var lum2 = color2.luminosity();
 
+		if (lum1 > lum2) {
 
+			return (lum1 + 0.05) / (lum2 + 0.05);
 
+		}
 
+		return (lum2 + 0.05) / (lum1 + 0.05);
 
+	},
 
+
 
+	level: function (color2) {
 
+		var contrastRatio = this.contrast(color2);
 
+		if (contrastRatio >= 7.1) {
 
+			return 'AAA';
 
+		}
 
+
 
+		return (contrastRatio >= 4.5) ? 'AA' : '';
 
+	},
 
+
 
+	dark: function () {
 
+		// YIQ equation from http://24ways.org/2010/calculating-color-contrast
 
+		var rgb = this.values.rgb;
 
+		var yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
 
+		return yiq < 128;
 
+	},
 
+
 
+	light: function () {
 
+		return !this.dark();
 
+	},
 
+
 
+	negate: function () {
 
+		var rgb = [];
 
+		for (var i = 0; i < 3; i++) {
 
+			rgb[i] = 255 - this.values.rgb[i];
 
+		}
 
+		this.setValues('rgb', rgb);
 
+		return this;
 
+	},
 
+
 
+	lighten: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[2] += hsl[2] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	darken: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[2] -= hsl[2] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	saturate: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[1] += hsl[1] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	desaturate: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[1] -= hsl[1] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	whiten: function (ratio) {
 
+		var hwb = this.values.hwb;
 
+		hwb[1] += hwb[1] * ratio;
 
+		this.setValues('hwb', hwb);
 
+		return this;
 
+	},
 
+
 
+	blacken: function (ratio) {
 
+		var hwb = this.values.hwb;
 
+		hwb[2] += hwb[2] * ratio;
 
+		this.setValues('hwb', hwb);
 
+		return this;
 
+	},
 
+
 
+	greyscale: function () {
 
+		var rgb = this.values.rgb;
 
+		// http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
 
+		var val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
 
+		this.setValues('rgb', [val, val, val]);
 
+		return this;
 
+	},
 
+
 
+	clearer: function (ratio) {
 
+		var alpha = this.values.alpha;
 
+		this.setValues('alpha', alpha - (alpha * ratio));
 
+		return this;
 
+	},
 
+
 
+	opaquer: function (ratio) {
 
+		var alpha = this.values.alpha;
 
+		this.setValues('alpha', alpha + (alpha * ratio));
 
+		return this;
 
+	},
 
+
 
+	rotate: function (degrees) {
 
+		var hsl = this.values.hsl;
 
+		var hue = (hsl[0] + degrees) % 360;
 
+		hsl[0] = hue < 0 ? 360 + hue : hue;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	/**
 
+	 * Ported from sass implementation in C
 
+	 * https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
 
+	 */
 
+	mix: function (mixinColor, weight) {
 
+		var color1 = this;
 
+		var color2 = mixinColor;
 
+		var p = weight === undefined ? 0.5 : weight;
 
+
 
+		var w = 2 * p - 1;
 
+		var a = color1.alpha() - color2.alpha();
 
+
 
+		var w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
 
+		var w2 = 1 - w1;
 
+
 
+		return this
 
+			.rgb(
 
+				w1 * color1.red() + w2 * color2.red(),
 
+				w1 * color1.green() + w2 * color2.green(),
 
+				w1 * color1.blue() + w2 * color2.blue()
 
+			)
 
+			.alpha(color1.alpha() * p + color2.alpha() * (1 - p));
 
+	},
 
+
 
+	toJSON: function () {
 
+		return this.rgb();
 
+	},
 
+
 
+	clone: function () {
 
+		// NOTE(SB): using node-clone creates a dependency to Buffer when using browserify,
 
+		// making the final build way to big to embed in Chart.js. So let's do it manually,
 
+		// assuming that values to clone are 1 dimension arrays containing only numbers,
 
+		// except 'alpha' which is a number.
 
+		var result = new Color();
 
+		var source = this.values;
 
+		var target = result.values;
 
+		var value, type;
 
+
 
+		for (var prop in source) {
 
+			if (source.hasOwnProperty(prop)) {
 
+				value = source[prop];
 
+				type = ({}).toString.call(value);
 
+				if (type === '[object Array]') {
 
+					target[prop] = value.slice(0);
 
+				} else if (type === '[object Number]') {
 
+					target[prop] = value;
 
+				} else {
 
+					console.error('unexpected color value:', value);
 
+				}
 
+			}
 
+		}
 
+
 
+		return result;
 
+	}
 
+};
 
+
 
+Color.prototype.spaces = {
 
+	rgb: ['red', 'green', 'blue'],
 
+	hsl: ['hue', 'saturation', 'lightness'],
 
+	hsv: ['hue', 'saturation', 'value'],
 
+	hwb: ['hue', 'whiteness', 'blackness'],
 
+	cmyk: ['cyan', 'magenta', 'yellow', 'black']
 
+};
 
+
 
+Color.prototype.maxes = {
 
+	rgb: [255, 255, 255],
 
+	hsl: [360, 100, 100],
 
+	hsv: [360, 100, 100],
 
+	hwb: [360, 100, 100],
 
+	cmyk: [100, 100, 100, 100]
 
+};
 
+
 
+Color.prototype.getValues = function (space) {
 
+	var values = this.values;
 
+	var vals = {};
 
+
 
+	for (var i = 0; i < space.length; i++) {
 
+		vals[space.charAt(i)] = values[space][i];
 
+	}
 
+
 
+	if (values.alpha !== 1) {
 
+		vals.a = values.alpha;
 
+	}
 
+
 
+	// {r: 255, g: 255, b: 255, a: 0.4}
 
+	return vals;
 
+};
 
+
 
+Color.prototype.setValues = function (space, vals) {
 
+	var values = this.values;
 
+	var spaces = this.spaces;
 
+	var maxes = this.maxes;
 
+	var alpha = 1;
 
+	var i;
 
+
 
+	this.valid = true;
 
+
 
+	if (space === 'alpha') {
 
+		alpha = vals;
 
+	} else if (vals.length) {
 
+		// [10, 10, 10]
 
+		values[space] = vals.slice(0, space.length);
 
+		alpha = vals[space.length];
 
+	} else if (vals[space.charAt(0)] !== undefined) {
 
+		// {r: 10, g: 10, b: 10}
 
+		for (i = 0; i < space.length; i++) {
 
+			values[space][i] = vals[space.charAt(i)];
 
+		}
 
+
 
+		alpha = vals.a;
 
+	} else if (vals[spaces[space][0]] !== undefined) {
 
+		// {red: 10, green: 10, blue: 10}
 
+		var chans = spaces[space];
 
+
 
+		for (i = 0; i < space.length; i++) {
 
+			values[space][i] = vals[chans[i]];
 
+		}
 
+
 
+		alpha = vals.alpha;
 
+	}
 
+
 
+	values.alpha = Math.max(0, Math.min(1, (alpha === undefined ? values.alpha : alpha)));
 
+
 
+	if (space === 'alpha') {
 
+		return false;
 
+	}
 
+
 
+	var capped;
 
+
 
+	// cap values of the space prior converting all values
 
+	for (i = 0; i < space.length; i++) {
 
+		capped = Math.max(0, Math.min(maxes[space][i], values[space][i]));
 
+		values[space][i] = Math.round(capped);
 
+	}
 
+
 
+	// convert to all the other color spaces
 
+	for (var sname in spaces) {
 
+		if (sname !== space) {
 
+			values[sname] = colorConvert[space][sname](values[space]);
 
+		}
 
+	}
 
+
 
+	return true;
 
+};
 
+
 
+Color.prototype.setSpace = function (space, args) {
 
+	var vals = args[0];
 
+
 
+	if (vals === undefined) {
 
+		// color.rgb()
 
+		return this.getValues(space);
 
+	}
 
+
 
+	// color.rgb(10, 10, 10)
 
+	if (typeof vals === 'number') {
 
+		vals = Array.prototype.slice.call(args);
 
+	}
 
+
 
+	this.setValues(space, vals);
 
+	return this;
 
+};
 
+
 
+Color.prototype.setChannel = function (space, index, val) {
 
+	var svalues = this.values[space];
 
+	if (val === undefined) {
 
+		// color.red()
 
+		return svalues[index];
 
+	} else if (val === svalues[index]) {
 
+		// color.red(color.red())
 
+		return this;
 
+	}
 
+
 
+	// color.red(100)
 
+	svalues[index] = val;
 
+	this.setValues(space, svalues);
 
+
 
+	return this;
 
+};
 
+
 
+if (typeof window !== 'undefined') {
 
+	window.Color = Color;
 
+}
 
+
 
+var chartjsColor = Color;
 
+
 
+/**
 
+ * @namespace Chart.helpers
 
+ */
 
+var helpers = {
 
+	/**
 
+	 * An empty function that can be used, for example, for optional callback.
 
+	 */
 
+	noop: function() {},
 
+
 
+	/**
 
+	 * Returns a unique id, sequentially generated from a global variable.
 
+	 * @returns {number}
 
+	 * @function
 
+	 */
 
+	uid: (function() {
 
+		var id = 0;
 
+		return function() {
 
+			return id++;
 
+		};
 
+	}()),
 
+
 
+	/**
 
+	 * Returns true if `value` is neither null nor undefined, else returns false.
 
+	 * @param {*} value - The value to test.
 
+	 * @returns {boolean}
 
+	 * @since 2.7.0
 
+	 */
 
+	isNullOrUndef: function(value) {
 
+		return value === null || typeof value === 'undefined';
 
+	},
 
+
 
+	/**
 
+	 * Returns true if `value` is an array (including typed arrays), else returns false.
 
+	 * @param {*} value - The value to test.
 
+	 * @returns {boolean}
 
+	 * @function
 
+	 */
 
+	isArray: function(value) {
 
+		if (Array.isArray && Array.isArray(value)) {
 
+			return true;
 
+		}
 
+		var type = Object.prototype.toString.call(value);
 
+		if (type.substr(0, 7) === '[object' && type.substr(-6) === 'Array]') {
 
+			return true;
 
+		}
 
+		return false;
 
+	},
 
+
 
+	/**
 
+	 * Returns true if `value` is an object (excluding null), else returns false.
 
+	 * @param {*} value - The value to test.
 
+	 * @returns {boolean}
 
+	 * @since 2.7.0
 
+	 */
 
+	isObject: function(value) {
 
+		return value !== null && Object.prototype.toString.call(value) === '[object Object]';
 
+	},
 
+
 
+	/**
 
+	 * Returns true if `value` is a finite number, else returns false
 
+	 * @param {*} value  - The value to test.
 
+	 * @returns {boolean}
 
+	 */
 
+	isFinite: function(value) {
 
+		return (typeof value === 'number' || value instanceof Number) && isFinite(value);
 
+	},
 
+
 
+	/**
 
+	 * Returns `value` if defined, else returns `defaultValue`.
 
+	 * @param {*} value - The value to return if defined.
 
+	 * @param {*} defaultValue - The value to return if `value` is undefined.
 
+	 * @returns {*}
 
+	 */
 
+	valueOrDefault: function(value, defaultValue) {
 
+		return typeof value === 'undefined' ? defaultValue : value;
 
+	},
 
+
 
+	/**
 
+	 * Returns value at the given `index` in array if defined, else returns `defaultValue`.
 
+	 * @param {Array} value - The array to lookup for value at `index`.
 
+	 * @param {number} index - The index in `value` to lookup for value.
 
+	 * @param {*} defaultValue - The value to return if `value[index]` is undefined.
 
+	 * @returns {*}
 
+	 */
 
+	valueAtIndexOrDefault: function(value, index, defaultValue) {
 
+		return helpers.valueOrDefault(helpers.isArray(value) ? value[index] : value, defaultValue);
 
+	},
 
+
 
+	/**
 
+	 * Calls `fn` with the given `args` in the scope defined by `thisArg` and returns the
 
+	 * value returned by `fn`. If `fn` is not a function, this method returns undefined.
 
+	 * @param {function} fn - The function to call.
 
+	 * @param {Array|undefined|null} args - The arguments with which `fn` should be called.
 
+	 * @param {object} [thisArg] - The value of `this` provided for the call to `fn`.
 
+	 * @returns {*}
 
+	 */
 
+	callback: function(fn, args, thisArg) {
 
+		if (fn && typeof fn.call === 'function') {
 
+			return fn.apply(thisArg, args);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Note(SB) for performance sake, this method should only be used when loopable type
 
+	 * is unknown or in none intensive code (not called often and small loopable). Else
 
+	 * it's preferable to use a regular for() loop and save extra function calls.
 
+	 * @param {object|Array} loopable - The object or array to be iterated.
 
+	 * @param {function} fn - The function to call for each item.
 
+	 * @param {object} [thisArg] - The value of `this` provided for the call to `fn`.
 
+	 * @param {boolean} [reverse] - If true, iterates backward on the loopable.
 
+	 */
 
+	each: function(loopable, fn, thisArg, reverse) {
 
+		var i, len, keys;
 
+		if (helpers.isArray(loopable)) {
 
+			len = loopable.length;
 
+			if (reverse) {
 
+				for (i = len - 1; i >= 0; i--) {
 
+					fn.call(thisArg, loopable[i], i);
 
+				}
 
+			} else {
 
+				for (i = 0; i < len; i++) {
 
+					fn.call(thisArg, loopable[i], i);
 
+				}
 
+			}
 
+		} else if (helpers.isObject(loopable)) {
 
+			keys = Object.keys(loopable);
 
+			len = keys.length;
 
+			for (i = 0; i < len; i++) {
 
+				fn.call(thisArg, loopable[keys[i]], keys[i]);
 
+			}
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Returns true if the `a0` and `a1` arrays have the same content, else returns false.
 
+	 * @see https://stackoverflow.com/a/14853974
 
+	 * @param {Array} a0 - The array to compare
 
+	 * @param {Array} a1 - The array to compare
 
+	 * @returns {boolean}
 
+	 */
 
+	arrayEquals: function(a0, a1) {
 
+		var i, ilen, v0, v1;
 
+
 
+		if (!a0 || !a1 || a0.length !== a1.length) {
 
+			return false;
 
+		}
 
+
 
+		for (i = 0, ilen = a0.length; i < ilen; ++i) {
 
+			v0 = a0[i];
 
+			v1 = a1[i];
 
+
 
+			if (v0 instanceof Array && v1 instanceof Array) {
 
+				if (!helpers.arrayEquals(v0, v1)) {
 
+					return false;
 
+				}
 
+			} else if (v0 !== v1) {
 
+				// NOTE: two different object instances will never be equal: {x:20} != {x:20}
 
+				return false;
 
+			}
 
+		}
 
+
 
+		return true;
 
+	},
 
+
 
+	/**
 
+	 * Returns a deep copy of `source` without keeping references on objects and arrays.
 
+	 * @param {*} source - The value to clone.
 
+	 * @returns {*}
 
+	 */
 
+	clone: function(source) {
 
+		if (helpers.isArray(source)) {
 
+			return source.map(helpers.clone);
 
+		}
 
+
 
+		if (helpers.isObject(source)) {
 
+			var target = {};
 
+			var keys = Object.keys(source);
 
+			var klen = keys.length;
 
+			var k = 0;
 
+
 
+			for (; k < klen; ++k) {
 
+				target[keys[k]] = helpers.clone(source[keys[k]]);
 
+			}
 
+
 
+			return target;
 
+		}
 
+
 
+		return source;
 
+	},
 
+
 
+	/**
 
+	 * The default merger when Chart.helpers.merge is called without merger option.
 
+	 * Note(SB): also used by mergeConfig and mergeScaleConfig as fallback.
 
+	 * @private
 
+	 */
 
+	_merger: function(key, target, source, options) {
 
+		var tval = target[key];
 
+		var sval = source[key];
 
+
 
+		if (helpers.isObject(tval) && helpers.isObject(sval)) {
 
+			helpers.merge(tval, sval, options);
 
+		} else {
 
+			target[key] = helpers.clone(sval);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Merges source[key] in target[key] only if target[key] is undefined.
 
+	 * @private
 
+	 */
 
+	_mergerIf: function(key, target, source) {
 
+		var tval = target[key];
 
+		var sval = source[key];
 
+
 
+		if (helpers.isObject(tval) && helpers.isObject(sval)) {
 
+			helpers.mergeIf(tval, sval);
 
+		} else if (!target.hasOwnProperty(key)) {
 
+			target[key] = helpers.clone(sval);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Recursively deep copies `source` properties into `target` with the given `options`.
 
+	 * IMPORTANT: `target` is not cloned and will be updated with `source` properties.
 
+	 * @param {object} target - The target object in which all sources are merged into.
 
+	 * @param {object|object[]} source - Object(s) to merge into `target`.
 
+	 * @param {object} [options] - Merging options:
 
+	 * @param {function} [options.merger] - The merge method (key, target, source, options)
 
+	 * @returns {object} The `target` object.
 
+	 */
 
+	merge: function(target, source, options) {
 
+		var sources = helpers.isArray(source) ? source : [source];
 
+		var ilen = sources.length;
 
+		var merge, i, keys, klen, k;
 
+
 
+		if (!helpers.isObject(target)) {
 
+			return target;
 
+		}
 
+
 
+		options = options || {};
 
+		merge = options.merger || helpers._merger;
 
+
 
+		for (i = 0; i < ilen; ++i) {
 
+			source = sources[i];
 
+			if (!helpers.isObject(source)) {
 
+				continue;
 
+			}
 
+
 
+			keys = Object.keys(source);
 
+			for (k = 0, klen = keys.length; k < klen; ++k) {
 
+				merge(keys[k], target, source, options);
 
+			}
 
+		}
 
+
 
+		return target;
 
+	},
 
+
 
+	/**
 
+	 * Recursively deep copies `source` properties into `target` *only* if not defined in target.
 
+	 * IMPORTANT: `target` is not cloned and will be updated with `source` properties.
 
+	 * @param {object} target - The target object in which all sources are merged into.
 
+	 * @param {object|object[]} source - Object(s) to merge into `target`.
 
+	 * @returns {object} The `target` object.
 
+	 */
 
+	mergeIf: function(target, source) {
 
+		return helpers.merge(target, source, {merger: helpers._mergerIf});
 
+	},
 
+
 
+	/**
 
+	 * Applies the contents of two or more objects together into the first object.
 
+	 * @param {object} target - The target object in which all objects are merged into.
 
+	 * @param {object} arg1 - Object containing additional properties to merge in target.
 
+	 * @param {object} argN - Additional objects containing properties to merge in target.
 
+	 * @returns {object} The `target` object.
 
+	 */
 
+	extend: function(target) {
 
+		var setFn = function(value, key) {
 
+			target[key] = value;
 
+		};
 
+		for (var i = 1, ilen = arguments.length; i < ilen; ++i) {
 
+			helpers.each(arguments[i], setFn);
 
+		}
 
+		return target;
 
+	},
 
+
 
+	/**
 
+	 * Basic javascript inheritance based on the model created in Backbone.js
 
+	 */
 
+	inherits: function(extensions) {
 
+		var me = this;
 
+		var ChartElement = (extensions && extensions.hasOwnProperty('constructor')) ? extensions.constructor : function() {
 
+			return me.apply(this, arguments);
 
+		};
 
+
 
+		var Surrogate = function() {
 
+			this.constructor = ChartElement;
 
+		};
 
+
 
+		Surrogate.prototype = me.prototype;
 
+		ChartElement.prototype = new Surrogate();
 
+		ChartElement.extend = helpers.inherits;
 
+
 
+		if (extensions) {
 
+			helpers.extend(ChartElement.prototype, extensions);
 
+		}
 
+
 
+		ChartElement.__super__ = me.prototype;
 
+		return ChartElement;
 
+	}
 
+};
 
+
 
+var helpers_core = helpers;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.callback instead.
 
+ * @function Chart.helpers.callCallback
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.callCallback = helpers.callback;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Array.prototype.indexOf instead.
 
+ * Array.prototype.indexOf compatibility: Chrome, Opera, Safari, FF1.5+, IE9+
 
+ * @function Chart.helpers.indexOf
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.indexOf = function(array, item, fromIndex) {
 
+	return Array.prototype.indexOf.call(array, item, fromIndex);
 
+};
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.valueOrDefault instead.
 
+ * @function Chart.helpers.getValueOrDefault
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.getValueOrDefault = helpers.valueOrDefault;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.valueAtIndexOrDefault instead.
 
+ * @function Chart.helpers.getValueAtIndexOrDefault
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.getValueAtIndexOrDefault = helpers.valueAtIndexOrDefault;
 
+
 
+/**
 
+ * Easing functions adapted from Robert Penner's easing equations.
 
+ * @namespace Chart.helpers.easingEffects
 
+ * @see http://www.robertpenner.com/easing/
 
+ */
 
+var effects = {
 
+	linear: function(t) {
 
+		return t;
 
+	},
 
+
 
+	easeInQuad: function(t) {
 
+		return t * t;
 
+	},
 
+
 
+	easeOutQuad: function(t) {
 
+		return -t * (t - 2);
 
+	},
 
+
 
+	easeInOutQuad: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t;
 
+		}
 
+		return -0.5 * ((--t) * (t - 2) - 1);
 
+	},
 
+
 
+	easeInCubic: function(t) {
 
+		return t * t * t;
 
+	},
 
+
 
+	easeOutCubic: function(t) {
 
+		return (t = t - 1) * t * t + 1;
 
+	},
 
+
 
+	easeInOutCubic: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t * t;
 
+		}
 
+		return 0.5 * ((t -= 2) * t * t + 2);
 
+	},
 
+
 
+	easeInQuart: function(t) {
 
+		return t * t * t * t;
 
+	},
 
+
 
+	easeOutQuart: function(t) {
 
+		return -((t = t - 1) * t * t * t - 1);
 
+	},
 
+
 
+	easeInOutQuart: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t * t * t;
 
+		}
 
+		return -0.5 * ((t -= 2) * t * t * t - 2);
 
+	},
 
+
 
+	easeInQuint: function(t) {
 
+		return t * t * t * t * t;
 
+	},
 
+
 
+	easeOutQuint: function(t) {
 
+		return (t = t - 1) * t * t * t * t + 1;
 
+	},
 
+
 
+	easeInOutQuint: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t * t * t * t;
 
+		}
 
+		return 0.5 * ((t -= 2) * t * t * t * t + 2);
 
+	},
 
+
 
+	easeInSine: function(t) {
 
+		return -Math.cos(t * (Math.PI / 2)) + 1;
 
+	},
 
+
 
+	easeOutSine: function(t) {
 
+		return Math.sin(t * (Math.PI / 2));
 
+	},
 
+
 
+	easeInOutSine: function(t) {
 
+		return -0.5 * (Math.cos(Math.PI * t) - 1);
 
+	},
 
+
 
+	easeInExpo: function(t) {
 
+		return (t === 0) ? 0 : Math.pow(2, 10 * (t - 1));
 
+	},
 
+
 
+	easeOutExpo: function(t) {
 
+		return (t === 1) ? 1 : -Math.pow(2, -10 * t) + 1;
 
+	},
 
+
 
+	easeInOutExpo: function(t) {
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if (t === 1) {
 
+			return 1;
 
+		}
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * Math.pow(2, 10 * (t - 1));
 
+		}
 
+		return 0.5 * (-Math.pow(2, -10 * --t) + 2);
 
+	},
 
+
 
+	easeInCirc: function(t) {
 
+		if (t >= 1) {
 
+			return t;
 
+		}
 
+		return -(Math.sqrt(1 - t * t) - 1);
 
+	},
 
+
 
+	easeOutCirc: function(t) {
 
+		return Math.sqrt(1 - (t = t - 1) * t);
 
+	},
 
+
 
+	easeInOutCirc: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return -0.5 * (Math.sqrt(1 - t * t) - 1);
 
+		}
 
+		return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
 
+	},
 
+
 
+	easeInElastic: function(t) {
 
+		var s = 1.70158;
 
+		var p = 0;
 
+		var a = 1;
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if (t === 1) {
 
+			return 1;
 
+		}
 
+		if (!p) {
 
+			p = 0.3;
 
+		}
 
+		if (a < 1) {
 
+			a = 1;
 
+			s = p / 4;
 
+		} else {
 
+			s = p / (2 * Math.PI) * Math.asin(1 / a);
 
+		}
 
+		return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));
 
+	},
 
+
 
+	easeOutElastic: function(t) {
 
+		var s = 1.70158;
 
+		var p = 0;
 
+		var a = 1;
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if (t === 1) {
 
+			return 1;
 
+		}
 
+		if (!p) {
 
+			p = 0.3;
 
+		}
 
+		if (a < 1) {
 
+			a = 1;
 
+			s = p / 4;
 
+		} else {
 
+			s = p / (2 * Math.PI) * Math.asin(1 / a);
 
+		}
 
+		return a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
 
+	},
 
+
 
+	easeInOutElastic: function(t) {
 
+		var s = 1.70158;
 
+		var p = 0;
 
+		var a = 1;
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if ((t /= 0.5) === 2) {
 
+			return 1;
 
+		}
 
+		if (!p) {
 
+			p = 0.45;
 
+		}
 
+		if (a < 1) {
 
+			a = 1;
 
+			s = p / 4;
 
+		} else {
 
+			s = p / (2 * Math.PI) * Math.asin(1 / a);
 
+		}
 
+		if (t < 1) {
 
+			return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));
 
+		}
 
+		return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p) * 0.5 + 1;
 
+	},
 
+	easeInBack: function(t) {
 
+		var s = 1.70158;
 
+		return t * t * ((s + 1) * t - s);
 
+	},
 
+
 
+	easeOutBack: function(t) {
 
+		var s = 1.70158;
 
+		return (t = t - 1) * t * ((s + 1) * t + s) + 1;
 
+	},
 
+
 
+	easeInOutBack: function(t) {
 
+		var s = 1.70158;
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * (t * t * (((s *= (1.525)) + 1) * t - s));
 
+		}
 
+		return 0.5 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
 
+	},
 
+
 
+	easeInBounce: function(t) {
 
+		return 1 - effects.easeOutBounce(1 - t);
 
+	},
 
+
 
+	easeOutBounce: function(t) {
 
+		if (t < (1 / 2.75)) {
 
+			return 7.5625 * t * t;
 
+		}
 
+		if (t < (2 / 2.75)) {
 
+			return 7.5625 * (t -= (1.5 / 2.75)) * t + 0.75;
 
+		}
 
+		if (t < (2.5 / 2.75)) {
 
+			return 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375;
 
+		}
 
+		return 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375;
 
+	},
 
+
 
+	easeInOutBounce: function(t) {
 
+		if (t < 0.5) {
 
+			return effects.easeInBounce(t * 2) * 0.5;
 
+		}
 
+		return effects.easeOutBounce(t * 2 - 1) * 0.5 + 0.5;
 
+	}
 
+};
 
+
 
+var helpers_easing = {
 
+	effects: effects
 
+};
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.easing.effects instead.
 
+ * @function Chart.helpers.easingEffects
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers_core.easingEffects = effects;
 
+
 
+var PI = Math.PI;
 
+var RAD_PER_DEG = PI / 180;
 
+var DOUBLE_PI = PI * 2;
 
+var HALF_PI = PI / 2;
 
+var QUARTER_PI = PI / 4;
 
+var TWO_THIRDS_PI = PI * 2 / 3;
 
+
 
+/**
 
+ * @namespace Chart.helpers.canvas
 
+ */
 
+var exports$1 = {
 
+	/**
 
+	 * Clears the entire canvas associated to the given `chart`.
 
+	 * @param {Chart} chart - The chart for which to clear the canvas.
 
+	 */
 
+	clear: function(chart) {
 
+		chart.ctx.clearRect(0, 0, chart.width, chart.height);
 
+	},
 
+
 
+	/**
 
+	 * Creates a "path" for a rectangle with rounded corners at position (x, y) with a
 
+	 * given size (width, height) and the same `radius` for all corners.
 
+	 * @param {CanvasRenderingContext2D} ctx - The canvas 2D Context.
 
+	 * @param {number} x - The x axis of the coordinate for the rectangle starting point.
 
+	 * @param {number} y - The y axis of the coordinate for the rectangle starting point.
 
+	 * @param {number} width - The rectangle's width.
 
+	 * @param {number} height - The rectangle's height.
 
+	 * @param {number} radius - The rounded amount (in pixels) for the four corners.
 
+	 * @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object?
 
+	 */
 
+	roundedRect: function(ctx, x, y, width, height, radius) {
 
+		if (radius) {
 
+			var r = Math.min(radius, height / 2, width / 2);
 
+			var left = x + r;
 
+			var top = y + r;
 
+			var right = x + width - r;
 
+			var bottom = y + height - r;
 
+
 
+			ctx.moveTo(x, top);
 
+			if (left < right && top < bottom) {
 
+				ctx.arc(left, top, r, -PI, -HALF_PI);
 
+				ctx.arc(right, top, r, -HALF_PI, 0);
 
+				ctx.arc(right, bottom, r, 0, HALF_PI);
 
+				ctx.arc(left, bottom, r, HALF_PI, PI);
 
+			} else if (left < right) {
 
+				ctx.moveTo(left, y);
 
+				ctx.arc(right, top, r, -HALF_PI, HALF_PI);
 
+				ctx.arc(left, top, r, HALF_PI, PI + HALF_PI);
 
+			} else if (top < bottom) {
 
+				ctx.arc(left, top, r, -PI, 0);
 
+				ctx.arc(left, bottom, r, 0, PI);
 
+			} else {
 
+				ctx.arc(left, top, r, -PI, PI);
 
+			}
 
+			ctx.closePath();
 
+			ctx.moveTo(x, y);
 
+		} else {
 
+			ctx.rect(x, y, width, height);
 
+		}
 
+	},
 
+
 
+	drawPoint: function(ctx, style, radius, x, y, rotation) {
 
+		var type, xOffset, yOffset, size, cornerRadius;
 
+		var rad = (rotation || 0) * RAD_PER_DEG;
 
+
 
+		if (style && typeof style === 'object') {
 
+			type = style.toString();
 
+			if (type === '[object HTMLImageElement]' || type === '[object HTMLCanvasElement]') {
 
+				ctx.drawImage(style, x - style.width / 2, y - style.height / 2, style.width, style.height);
 
+				return;
 
+			}
 
+		}
 
+
 
+		if (isNaN(radius) || radius <= 0) {
 
+			return;
 
+		}
 
+
 
+		ctx.beginPath();
 
+
 
+		switch (style) {
 
+		// Default includes circle
 
+		default:
 
+			ctx.arc(x, y, radius, 0, DOUBLE_PI);
 
+			ctx.closePath();
 
+			break;
 
+		case 'triangle':
 
+			ctx.moveTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
 
+			rad += TWO_THIRDS_PI;
 
+			ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
 
+			rad += TWO_THIRDS_PI;
 
+			ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
 
+			ctx.closePath();
 
+			break;
 
+		case 'rectRounded':
 
+			// NOTE: the rounded rect implementation changed to use `arc` instead of
 
+			// `quadraticCurveTo` since it generates better results when rect is
 
+			// almost a circle. 0.516 (instead of 0.5) produces results with visually
 
+			// closer proportion to the previous impl and it is inscribed in the
 
+			// circle with `radius`. For more details, see the following PRs:
 
+			// https://github.com/chartjs/Chart.js/issues/5597
 
+			// https://github.com/chartjs/Chart.js/issues/5858
 
+			cornerRadius = radius * 0.516;
 
+			size = radius - cornerRadius;
 
+			xOffset = Math.cos(rad + QUARTER_PI) * size;
 
+			yOffset = Math.sin(rad + QUARTER_PI) * size;
 
+			ctx.arc(x - xOffset, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);
 
+			ctx.arc(x + yOffset, y - xOffset, cornerRadius, rad - HALF_PI, rad);
 
+			ctx.arc(x + xOffset, y + yOffset, cornerRadius, rad, rad + HALF_PI);
 
+			ctx.arc(x - yOffset, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);
 
+			ctx.closePath();
 
+			break;
 
+		case 'rect':
 
+			if (!rotation) {
 
+				size = Math.SQRT1_2 * radius;
 
+				ctx.rect(x - size, y - size, 2 * size, 2 * size);
 
+				break;
 
+			}
 
+			rad += QUARTER_PI;
 
+			/* falls through */
 
+		case 'rectRot':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			ctx.closePath();
 
+			break;
 
+		case 'crossRot':
 
+			rad += QUARTER_PI;
 
+			/* falls through */
 
+		case 'cross':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.moveTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			break;
 
+		case 'star':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.moveTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			rad += QUARTER_PI;
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.moveTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			break;
 
+		case 'line':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			break;
 
+		case 'dash':
 
+			ctx.moveTo(x, y);
 
+			ctx.lineTo(x + Math.cos(rad) * radius, y + Math.sin(rad) * radius);
 
+			break;
 
+		}
 
+
 
+		ctx.fill();
 
+		ctx.stroke();
 
+	},
 
+
 
+	/**
 
+	 * Returns true if the point is inside the rectangle
 
+	 * @param {object} point - The point to test
 
+	 * @param {object} area - The rectangle
 
+	 * @returns {boolean}
 
+	 * @private
 
+	 */
 
+	_isPointInArea: function(point, area) {
 
+		var epsilon = 1e-6; // 1e-6 is margin in pixels for accumulated error.
 
+
 
+		return point.x > area.left - epsilon && point.x < area.right + epsilon &&
 
+			point.y > area.top - epsilon && point.y < area.bottom + epsilon;
 
+	},
 
+
 
+	clipArea: function(ctx, area) {
 
+		ctx.save();
 
+		ctx.beginPath();
 
+		ctx.rect(area.left, area.top, area.right - area.left, area.bottom - area.top);
 
+		ctx.clip();
 
+	},
 
+
 
+	unclipArea: function(ctx) {
 
+		ctx.restore();
 
+	},
 
+
 
+	lineTo: function(ctx, previous, target, flip) {
 
+		var stepped = target.steppedLine;
 
+		if (stepped) {
 
+			if (stepped === 'middle') {
 
+				var midpoint = (previous.x + target.x) / 2.0;
 
+				ctx.lineTo(midpoint, flip ? target.y : previous.y);
 
+				ctx.lineTo(midpoint, flip ? previous.y : target.y);
 
+			} else if ((stepped === 'after' && !flip) || (stepped !== 'after' && flip)) {
 
+				ctx.lineTo(previous.x, target.y);
 
+			} else {
 
+				ctx.lineTo(target.x, previous.y);
 
+			}
 
+			ctx.lineTo(target.x, target.y);
 
+			return;
 
+		}
 
+
 
+		if (!target.tension) {
 
+			ctx.lineTo(target.x, target.y);
 
+			return;
 
+		}
 
+
 
+		ctx.bezierCurveTo(
 
+			flip ? previous.controlPointPreviousX : previous.controlPointNextX,
 
+			flip ? previous.controlPointPreviousY : previous.controlPointNextY,
 
+			flip ? target.controlPointNextX : target.controlPointPreviousX,
 
+			flip ? target.controlPointNextY : target.controlPointPreviousY,
 
+			target.x,
 
+			target.y);
 
+	}
 
+};
 
+
 
+var helpers_canvas = exports$1;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.canvas.clear instead.
 
+ * @namespace Chart.helpers.clear
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers_core.clear = exports$1.clear;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.canvas.roundedRect instead.
 
+ * @namespace Chart.helpers.drawRoundedRectangle
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers_core.drawRoundedRectangle = function(ctx) {
 
+	ctx.beginPath();
 
+	exports$1.roundedRect.apply(exports$1, arguments);
 
+};
 
+
 
+var defaults = {
 
+	/**
 
+	 * @private
 
+	 */
 
+	_set: function(scope, values) {
 
+		return helpers_core.merge(this[scope] || (this[scope] = {}), values);
 
+	}
 
+};
 
+
 
+defaults._set('global', {
 
+	defaultColor: 'rgba(0,0,0,0.1)',
 
+	defaultFontColor: '#666',
 
+	defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
+	defaultFontSize: 12,
 
+	defaultFontStyle: 'normal',
 
+	defaultLineHeight: 1.2,
 
+	showLines: true
 
+});
 
+
 
+var core_defaults = defaults;
 
+
 
+var valueOrDefault = helpers_core.valueOrDefault;
 
+
 
+/**
 
+ * Converts the given font object into a CSS font string.
 
+ * @param {object} font - A font object.
 
+ * @return {string} The CSS font string. See https://developer.mozilla.org/en-US/docs/Web/CSS/font
 
+ * @private
 
+ */
 
+function toFontString(font) {
 
+	if (!font || helpers_core.isNullOrUndef(font.size) || helpers_core.isNullOrUndef(font.family)) {
 
+		return null;
 
+	}
 
+
 
+	return (font.style ? font.style + ' ' : '')
 
+		+ (font.weight ? font.weight + ' ' : '')
 
+		+ font.size + 'px '
 
+		+ font.family;
 
+}
 
+
 
+/**
 
+ * @alias Chart.helpers.options
 
+ * @namespace
 
+ */
 
+var helpers_options = {
 
+	/**
 
+	 * Converts the given line height `value` in pixels for a specific font `size`.
 
+	 * @param {number|string} value - The lineHeight to parse (eg. 1.6, '14px', '75%', '1.6em').
 
+	 * @param {number} size - The font size (in pixels) used to resolve relative `value`.
 
+	 * @returns {number} The effective line height in pixels (size * 1.2 if value is invalid).
 
+	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
 
+	 * @since 2.7.0
 
+	 */
 
+	toLineHeight: function(value, size) {
 
+		var matches = ('' + value).match(/^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/);
 
+		if (!matches || matches[1] === 'normal') {
 
+			return size * 1.2;
 
+		}
 
+
 
+		value = +matches[2];
 
+
 
+		switch (matches[3]) {
 
+		case 'px':
 
+			return value;
 
+		case '%':
 
+			value /= 100;
 
+			break;
 
+		default:
 
+			break;
 
+		}
 
+
 
+		return size * value;
 
+	},
 
+
 
+	/**
 
+	 * Converts the given value into a padding object with pre-computed width/height.
 
+	 * @param {number|object} value - If a number, set the value to all TRBL component,
 
+	 *  else, if and object, use defined properties and sets undefined ones to 0.
 
+	 * @returns {object} The padding values (top, right, bottom, left, width, height)
 
+	 * @since 2.7.0
 
+	 */
 
+	toPadding: function(value) {
 
+		var t, r, b, l;
 
+
 
+		if (helpers_core.isObject(value)) {
 
+			t = +value.top || 0;
 
+			r = +value.right || 0;
 
+			b = +value.bottom || 0;
 
+			l = +value.left || 0;
 
+		} else {
 
+			t = r = b = l = +value || 0;
 
+		}
 
+
 
+		return {
 
+			top: t,
 
+			right: r,
 
+			bottom: b,
 
+			left: l,
 
+			height: t + b,
 
+			width: l + r
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Parses font options and returns the font object.
 
+	 * @param {object} options - A object that contains font options to be parsed.
 
+	 * @return {object} The font object.
 
+	 * @todo Support font.* options and renamed to toFont().
 
+	 * @private
 
+	 */
 
+	_parseFont: function(options) {
 
+		var globalDefaults = core_defaults.global;
 
+		var size = valueOrDefault(options.fontSize, globalDefaults.defaultFontSize);
 
+		var font = {
 
+			family: valueOrDefault(options.fontFamily, globalDefaults.defaultFontFamily),
 
+			lineHeight: helpers_core.options.toLineHeight(valueOrDefault(options.lineHeight, globalDefaults.defaultLineHeight), size),
 
+			size: size,
 
+			style: valueOrDefault(options.fontStyle, globalDefaults.defaultFontStyle),
 
+			weight: null,
 
+			string: ''
 
+		};
 
+
 
+		font.string = toFontString(font);
 
+		return font;
 
+	},
 
+
 
+	/**
 
+	 * Evaluates the given `inputs` sequentially and returns the first defined value.
 
+	 * @param {Array} inputs - An array of values, falling back to the last value.
 
+	 * @param {object} [context] - If defined and the current value is a function, the value
 
+	 * is called with `context` as first argument and the result becomes the new input.
 
+	 * @param {number} [index] - If defined and the current value is an array, the value
 
+	 * at `index` become the new input.
 
+	 * @since 2.7.0
 
+	 */
 
+	resolve: function(inputs, context, index) {
 
+		var i, ilen, value;
 
+
 
+		for (i = 0, ilen = inputs.length; i < ilen; ++i) {
 
+			value = inputs[i];
 
+			if (value === undefined) {
 
+				continue;
 
+			}
 
+			if (context !== undefined && typeof value === 'function') {
 
+				value = value(context);
 
+			}
 
+			if (index !== undefined && helpers_core.isArray(value)) {
 
+				value = value[index];
 
+			}
 
+			if (value !== undefined) {
 
+				return value;
 
+			}
 
+		}
 
+	}
 
+};
 
+
 
+var helpers$1 = helpers_core;
 
+var easing = helpers_easing;
 
+var canvas = helpers_canvas;
 
+var options = helpers_options;
 
+helpers$1.easing = easing;
 
+helpers$1.canvas = canvas;
 
+helpers$1.options = options;
 
+
 
+function interpolate(start, view, model, ease) {
 
+	var keys = Object.keys(model);
 
+	var i, ilen, key, actual, origin, target, type, c0, c1;
 
+
 
+	for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+		key = keys[i];
 
+
 
+		target = model[key];
 
+
 
+		// if a value is added to the model after pivot() has been called, the view
 
+		// doesn't contain it, so let's initialize the view to the target value.
 
+		if (!view.hasOwnProperty(key)) {
 
+			view[key] = target;
 
+		}
 
+
 
+		actual = view[key];
 
+
 
+		if (actual === target || key[0] === '_') {
 
+			continue;
 
+		}
 
+
 
+		if (!start.hasOwnProperty(key)) {
 
+			start[key] = actual;
 
+		}
 
+
 
+		origin = start[key];
 
+
 
+		type = typeof target;
 
+
 
+		if (type === typeof origin) {
 
+			if (type === 'string') {
 
+				c0 = chartjsColor(origin);
 
+				if (c0.valid) {
 
+					c1 = chartjsColor(target);
 
+					if (c1.valid) {
 
+						view[key] = c1.mix(c0, ease).rgbString();
 
+						continue;
 
+					}
 
+				}
 
+			} else if (helpers$1.isFinite(origin) && helpers$1.isFinite(target)) {
 
+				view[key] = origin + (target - origin) * ease;
 
+				continue;
 
+			}
 
+		}
 
+
 
+		view[key] = target;
 
+	}
 
+}
 
+
 
+var Element = function(configuration) {
 
+	helpers$1.extend(this, configuration);
 
+	this.initialize.apply(this, arguments);
 
+};
 
+
 
+helpers$1.extend(Element.prototype, {
 
+
 
+	initialize: function() {
 
+		this.hidden = false;
 
+	},
 
+
 
+	pivot: function() {
 
+		var me = this;
 
+		if (!me._view) {
 
+			me._view = helpers$1.clone(me._model);
 
+		}
 
+		me._start = {};
 
+		return me;
 
+	},
 
+
 
+	transition: function(ease) {
 
+		var me = this;
 
+		var model = me._model;
 
+		var start = me._start;
 
+		var view = me._view;
 
+
 
+		// No animation -> No Transition
 
+		if (!model || ease === 1) {
 
+			me._view = model;
 
+			me._start = null;
 
+			return me;
 
+		}
 
+
 
+		if (!view) {
 
+			view = me._view = {};
 
+		}
 
+
 
+		if (!start) {
 
+			start = me._start = {};
 
+		}
 
+
 
+		interpolate(start, view, model, ease);
 
+
 
+		return me;
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		return {
 
+			x: this._model.x,
 
+			y: this._model.y
 
+		};
 
+	},
 
+
 
+	hasValue: function() {
 
+		return helpers$1.isNumber(this._model.x) && helpers$1.isNumber(this._model.y);
 
+	}
 
+});
 
+
 
+Element.extend = helpers$1.inherits;
 
+
 
+var core_element = Element;
 
+
 
+var exports$2 = core_element.extend({
 
+	chart: null, // the animation associated chart instance
 
+	currentStep: 0, // the current animation step
 
+	numSteps: 60, // default number of steps
 
+	easing: '', // the easing to use for this animation
 
+	render: null, // render function used by the animation service
 
+
 
+	onAnimationProgress: null, // user specified callback to fire on each step of the animation
 
+	onAnimationComplete: null, // user specified callback to fire when the animation finishes
 
+});
 
+
 
+var core_animation = exports$2;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.Animation instead
 
+ * @prop Chart.Animation#animationObject
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ */
 
+Object.defineProperty(exports$2.prototype, 'animationObject', {
 
+	get: function() {
 
+		return this;
 
+	}
 
+});
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.Animation#chart instead
 
+ * @prop Chart.Animation#chartInstance
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ */
 
+Object.defineProperty(exports$2.prototype, 'chartInstance', {
 
+	get: function() {
 
+		return this.chart;
 
+	},
 
+	set: function(value) {
 
+		this.chart = value;
 
+	}
 
+});
 
+
 
+core_defaults._set('global', {
 
+	animation: {
 
+		duration: 1000,
 
+		easing: 'easeOutQuart',
 
+		onProgress: helpers$1.noop,
 
+		onComplete: helpers$1.noop
 
+	}
 
+});
 
+
 
+var core_animations = {
 
+	animations: [],
 
+	request: null,
 
+
 
+	/**
 
+	 * @param {Chart} chart - The chart to animate.
 
+	 * @param {Chart.Animation} animation - The animation that we will animate.
 
+	 * @param {number} duration - The animation duration in ms.
 
+	 * @param {boolean} lazy - if true, the chart is not marked as animating to enable more responsive interactions
 
+	 */
 
+	addAnimation: function(chart, animation, duration, lazy) {
 
+		var animations = this.animations;
 
+		var i, ilen;
 
+
 
+		animation.chart = chart;
 
+		animation.startTime = Date.now();
 
+		animation.duration = duration;
 
+
 
+		if (!lazy) {
 
+			chart.animating = true;
 
+		}
 
+
 
+		for (i = 0, ilen = animations.length; i < ilen; ++i) {
 
+			if (animations[i].chart === chart) {
 
+				animations[i] = animation;
 
+				return;
 
+			}
 
+		}
 
+
 
+		animations.push(animation);
 
+
 
+		// If there are no animations queued, manually kickstart a digest, for lack of a better word
 
+		if (animations.length === 1) {
 
+			this.requestAnimationFrame();
 
+		}
 
+	},
 
+
 
+	cancelAnimation: function(chart) {
 
+		var index = helpers$1.findIndex(this.animations, function(animation) {
 
+			return animation.chart === chart;
 
+		});
 
+
 
+		if (index !== -1) {
 
+			this.animations.splice(index, 1);
 
+			chart.animating = false;
 
+		}
 
+	},
 
+
 
+	requestAnimationFrame: function() {
 
+		var me = this;
 
+		if (me.request === null) {
 
+			// Skip animation frame requests until the active one is executed.
 
+			// This can happen when processing mouse events, e.g. 'mousemove'
 
+			// and 'mouseout' events will trigger multiple renders.
 
+			me.request = helpers$1.requestAnimFrame.call(window, function() {
 
+				me.request = null;
 
+				me.startDigest();
 
+			});
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	startDigest: function() {
 
+		var me = this;
 
+
 
+		me.advance();
 
+
 
+		// Do we have more stuff to animate?
 
+		if (me.animations.length > 0) {
 
+			me.requestAnimationFrame();
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	advance: function() {
 
+		var animations = this.animations;
 
+		var animation, chart, numSteps, nextStep;
 
+		var i = 0;
 
+
 
+		// 1 animation per chart, so we are looping charts here
 
+		while (i < animations.length) {
 
+			animation = animations[i];
 
+			chart = animation.chart;
 
+			numSteps = animation.numSteps;
 
+
 
+			// Make sure that currentStep starts at 1
 
+			// https://github.com/chartjs/Chart.js/issues/6104
 
+			nextStep = Math.floor((Date.now() - animation.startTime) / animation.duration * numSteps) + 1;
 
+			animation.currentStep = Math.min(nextStep, numSteps);
 
+
 
+			helpers$1.callback(animation.render, [chart, animation], chart);
 
+			helpers$1.callback(animation.onAnimationProgress, [animation], chart);
 
+
 
+			if (animation.currentStep >= numSteps) {
 
+				helpers$1.callback(animation.onAnimationComplete, [animation], chart);
 
+				chart.animating = false;
 
+				animations.splice(i, 1);
 
+			} else {
 
+				++i;
 
+			}
 
+		}
 
+	}
 
+};
 
+
 
+var resolve = helpers$1.options.resolve;
 
+
 
+var arrayEvents = ['push', 'pop', 'shift', 'splice', 'unshift'];
 
+
 
+/**
 
+ * Hooks the array methods that add or remove values ('push', pop', 'shift', 'splice',
 
+ * 'unshift') and notify the listener AFTER the array has been altered. Listeners are
 
+ * called on the 'onData*' callbacks (e.g. onDataPush, etc.) with same arguments.
 
+ */
 
+function listenArrayEvents(array, listener) {
 
+	if (array._chartjs) {
 
+		array._chartjs.listeners.push(listener);
 
+		return;
 
+	}
 
+
 
+	Object.defineProperty(array, '_chartjs', {
 
+		configurable: true,
 
+		enumerable: false,
 
+		value: {
 
+			listeners: [listener]
 
+		}
 
+	});
 
+
 
+	arrayEvents.forEach(function(key) {
 
+		var method = 'onData' + key.charAt(0).toUpperCase() + key.slice(1);
 
+		var base = array[key];
 
+
 
+		Object.defineProperty(array, key, {
 
+			configurable: true,
 
+			enumerable: false,
 
+			value: function() {
 
+				var args = Array.prototype.slice.call(arguments);
 
+				var res = base.apply(this, args);
 
+
 
+				helpers$1.each(array._chartjs.listeners, function(object) {
 
+					if (typeof object[method] === 'function') {
 
+						object[method].apply(object, args);
 
+					}
 
+				});
 
+
 
+				return res;
 
+			}
 
+		});
 
+	});
 
+}
 
+
 
+/**
 
+ * Removes the given array event listener and cleanup extra attached properties (such as
 
+ * the _chartjs stub and overridden methods) if array doesn't have any more listeners.
 
+ */
 
+function unlistenArrayEvents(array, listener) {
 
+	var stub = array._chartjs;
 
+	if (!stub) {
 
+		return;
 
+	}
 
+
 
+	var listeners = stub.listeners;
 
+	var index = listeners.indexOf(listener);
 
+	if (index !== -1) {
 
+		listeners.splice(index, 1);
 
+	}
 
+
 
+	if (listeners.length > 0) {
 
+		return;
 
+	}
 
+
 
+	arrayEvents.forEach(function(key) {
 
+		delete array[key];
 
+	});
 
+
 
+	delete array._chartjs;
 
+}
 
+
 
+// Base class for all dataset controllers (line, bar, etc)
 
+var DatasetController = function(chart, datasetIndex) {
 
+	this.initialize(chart, datasetIndex);
 
+};
 
+
 
+helpers$1.extend(DatasetController.prototype, {
 
+
 
+	/**
 
+	 * Element type used to generate a meta dataset (e.g. Chart.element.Line).
 
+	 * @type {Chart.core.element}
 
+	 */
 
+	datasetElementType: null,
 
+
 
+	/**
 
+	 * Element type used to generate a meta data (e.g. Chart.element.Point).
 
+	 * @type {Chart.core.element}
 
+	 */
 
+	dataElementType: null,
 
+
 
+	initialize: function(chart, datasetIndex) {
 
+		var me = this;
 
+		me.chart = chart;
 
+		me.index = datasetIndex;
 
+		me.linkScales();
 
+		me.addElements();
 
+	},
 
+
 
+	updateIndex: function(datasetIndex) {
 
+		this.index = datasetIndex;
 
+	},
 
+
 
+	linkScales: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var dataset = me.getDataset();
 
+
 
+		if (meta.xAxisID === null || !(meta.xAxisID in me.chart.scales)) {
 
+			meta.xAxisID = dataset.xAxisID || me.chart.options.scales.xAxes[0].id;
 
+		}
 
+		if (meta.yAxisID === null || !(meta.yAxisID in me.chart.scales)) {
 
+			meta.yAxisID = dataset.yAxisID || me.chart.options.scales.yAxes[0].id;
 
+		}
 
+	},
 
+
 
+	getDataset: function() {
 
+		return this.chart.data.datasets[this.index];
 
+	},
 
+
 
+	getMeta: function() {
 
+		return this.chart.getDatasetMeta(this.index);
 
+	},
 
+
 
+	getScaleForId: function(scaleID) {
 
+		return this.chart.scales[scaleID];
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getValueScaleId: function() {
 
+		return this.getMeta().yAxisID;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getIndexScaleId: function() {
 
+		return this.getMeta().xAxisID;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getValueScale: function() {
 
+		return this.getScaleForId(this._getValueScaleId());
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getIndexScale: function() {
 
+		return this.getScaleForId(this._getIndexScaleId());
 
+	},
 
+
 
+	reset: function() {
 
+		this.update(true);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	destroy: function() {
 
+		if (this._data) {
 
+			unlistenArrayEvents(this._data, this);
 
+		}
 
+	},
 
+
 
+	createMetaDataset: function() {
 
+		var me = this;
 
+		var type = me.datasetElementType;
 
+		return type && new type({
 
+			_chart: me.chart,
 
+			_datasetIndex: me.index
 
+		});
 
+	},
 
+
 
+	createMetaData: function(index) {
 
+		var me = this;
 
+		var type = me.dataElementType;
 
+		return type && new type({
 
+			_chart: me.chart,
 
+			_datasetIndex: me.index,
 
+			_index: index
 
+		});
 
+	},
 
+
 
+	addElements: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var data = me.getDataset().data || [];
 
+		var metaData = meta.data;
 
+		var i, ilen;
 
+
 
+		for (i = 0, ilen = data.length; i < ilen; ++i) {
 
+			metaData[i] = metaData[i] || me.createMetaData(i);
 
+		}
 
+
 
+		meta.dataset = meta.dataset || me.createMetaDataset();
 
+	},
 
+
 
+	addElementAndReset: function(index) {
 
+		var element = this.createMetaData(index);
 
+		this.getMeta().data.splice(index, 0, element);
 
+		this.updateElement(element, index, true);
 
+	},
 
+
 
+	buildOrUpdateElements: function() {
 
+		var me = this;
 
+		var dataset = me.getDataset();
 
+		var data = dataset.data || (dataset.data = []);
 
+
 
+		// In order to correctly handle data addition/deletion animation (an thus simulate
 
+		// real-time charts), we need to monitor these data modifications and synchronize
 
+		// the internal meta data accordingly.
 
+		if (me._data !== data) {
 
+			if (me._data) {
 
+				// This case happens when the user replaced the data array instance.
 
+				unlistenArrayEvents(me._data, me);
 
+			}
 
+
 
+			if (data && Object.isExtensible(data)) {
 
+				listenArrayEvents(data, me);
 
+			}
 
+			me._data = data;
 
+		}
 
+
 
+		// Re-sync meta data in case the user replaced the data array or if we missed
 
+		// any updates and so make sure that we handle number of datapoints changing.
 
+		me.resyncElements();
 
+	},
 
+
 
+	update: helpers$1.noop,
 
+
 
+	transition: function(easingValue) {
 
+		var meta = this.getMeta();
 
+		var elements = meta.data || [];
 
+		var ilen = elements.length;
 
+		var i = 0;
 
+
 
+		for (; i < ilen; ++i) {
 
+			elements[i].transition(easingValue);
 
+		}
 
+
 
+		if (meta.dataset) {
 
+			meta.dataset.transition(easingValue);
 
+		}
 
+	},
 
+
 
+	draw: function() {
 
+		var meta = this.getMeta();
 
+		var elements = meta.data || [];
 
+		var ilen = elements.length;
 
+		var i = 0;
 
+
 
+		if (meta.dataset) {
 
+			meta.dataset.draw();
 
+		}
 
+
 
+		for (; i < ilen; ++i) {
 
+			elements[i].draw();
 
+		}
 
+	},
 
+
 
+	removeHoverStyle: function(element) {
 
+		helpers$1.merge(element._model, element.$previousStyle || {});
 
+		delete element.$previousStyle;
 
+	},
 
+
 
+	setHoverStyle: function(element) {
 
+		var dataset = this.chart.data.datasets[element._datasetIndex];
 
+		var index = element._index;
 
+		var custom = element.custom || {};
 
+		var model = element._model;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		element.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth
 
+		};
 
+
 
+		model.backgroundColor = resolve([custom.hoverBackgroundColor, dataset.hoverBackgroundColor, getHoverColor(model.backgroundColor)], undefined, index);
 
+		model.borderColor = resolve([custom.hoverBorderColor, dataset.hoverBorderColor, getHoverColor(model.borderColor)], undefined, index);
 
+		model.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	resyncElements: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var data = me.getDataset().data;
 
+		var numMeta = meta.data.length;
 
+		var numData = data.length;
 
+
 
+		if (numData < numMeta) {
 
+			meta.data.splice(numData, numMeta - numData);
 
+		} else if (numData > numMeta) {
 
+			me.insertElements(numMeta, numData - numMeta);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	insertElements: function(start, count) {
 
+		for (var i = 0; i < count; ++i) {
 
+			this.addElementAndReset(start + i);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataPush: function() {
 
+		var count = arguments.length;
 
+		this.insertElements(this.getDataset().data.length - count, count);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataPop: function() {
 
+		this.getMeta().data.pop();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataShift: function() {
 
+		this.getMeta().data.shift();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataSplice: function(start, count) {
 
+		this.getMeta().data.splice(start, count);
 
+		this.insertElements(start, arguments.length - 2);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataUnshift: function() {
 
+		this.insertElements(0, arguments.length);
 
+	}
 
+});
 
+
 
+DatasetController.extend = helpers$1.inherits;
 
+
 
+var core_datasetController = DatasetController;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		arc: {
 
+			backgroundColor: core_defaults.global.defaultColor,
 
+			borderColor: '#fff',
 
+			borderWidth: 2,
 
+			borderAlign: 'center'
 
+		}
 
+	}
 
+});
 
+
 
+var element_arc = core_element.extend({
 
+	inLabelRange: function(mouseX) {
 
+		var vm = this._view;
 
+
 
+		if (vm) {
 
+			return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
 
+		}
 
+		return false;
 
+	},
 
+
 
+	inRange: function(chartX, chartY) {
 
+		var vm = this._view;
 
+
 
+		if (vm) {
 
+			var pointRelativePosition = helpers$1.getAngleFromPoint(vm, {x: chartX, y: chartY});
 
+			var	angle = pointRelativePosition.angle;
 
+			var distance = pointRelativePosition.distance;
 
+
 
+			// Sanitise angle range
 
+			var startAngle = vm.startAngle;
 
+			var endAngle = vm.endAngle;
 
+			while (endAngle < startAngle) {
 
+				endAngle += 2.0 * Math.PI;
 
+			}
 
+			while (angle > endAngle) {
 
+				angle -= 2.0 * Math.PI;
 
+			}
 
+			while (angle < startAngle) {
 
+				angle += 2.0 * Math.PI;
 
+			}
 
+
 
+			// Check if within the range of the open/close angle
 
+			var betweenAngles = (angle >= startAngle && angle <= endAngle);
 
+			var withinRadius = (distance >= vm.innerRadius && distance <= vm.outerRadius);
 
+
 
+			return (betweenAngles && withinRadius);
 
+		}
 
+		return false;
 
+	},
 
+
 
+	getCenterPoint: function() {
 
+		var vm = this._view;
 
+		var halfAngle = (vm.startAngle + vm.endAngle) / 2;
 
+		var halfRadius = (vm.innerRadius + vm.outerRadius) / 2;
 
+		return {
 
+			x: vm.x + Math.cos(halfAngle) * halfRadius,
 
+			y: vm.y + Math.sin(halfAngle) * halfRadius
 
+		};
 
+	},
 
+
 
+	getArea: function() {
 
+		var vm = this._view;
 
+		return Math.PI * ((vm.endAngle - vm.startAngle) / (2 * Math.PI)) * (Math.pow(vm.outerRadius, 2) - Math.pow(vm.innerRadius, 2));
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		var vm = this._view;
 
+		var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2);
 
+		var rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;
 
+
 
+		return {
 
+			x: vm.x + (Math.cos(centreAngle) * rangeFromCentre),
 
+			y: vm.y + (Math.sin(centreAngle) * rangeFromCentre)
 
+		};
 
+	},
 
+
 
+	draw: function() {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+		var sA = vm.startAngle;
 
+		var eA = vm.endAngle;
 
+		var pixelMargin = (vm.borderAlign === 'inner') ? 0.33 : 0;
 
+		var angleMargin;
 
+
 
+		ctx.save();
 
+
 
+		ctx.beginPath();
 
+		ctx.arc(vm.x, vm.y, Math.max(vm.outerRadius - pixelMargin, 0), sA, eA);
 
+		ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
 
+		ctx.closePath();
 
+
 
+		ctx.fillStyle = vm.backgroundColor;
 
+		ctx.fill();
 
+
 
+		if (vm.borderWidth) {
 
+			if (vm.borderAlign === 'inner') {
 
+				// Draw an inner border by cliping the arc and drawing a double-width border
 
+				// Enlarge the clipping arc by 0.33 pixels to eliminate glitches between borders
 
+				ctx.beginPath();
 
+				angleMargin = pixelMargin / vm.outerRadius;
 
+				ctx.arc(vm.x, vm.y, vm.outerRadius, sA - angleMargin, eA + angleMargin);
 
+				if (vm.innerRadius > pixelMargin) {
 
+					angleMargin = pixelMargin / vm.innerRadius;
 
+					ctx.arc(vm.x, vm.y, vm.innerRadius - pixelMargin, eA + angleMargin, sA - angleMargin, true);
 
+				} else {
 
+					ctx.arc(vm.x, vm.y, pixelMargin, eA + Math.PI / 2, sA - Math.PI / 2);
 
+				}
 
+				ctx.closePath();
 
+				ctx.clip();
 
+
 
+				ctx.beginPath();
 
+				ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
 
+				ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
 
+				ctx.closePath();
 
+
 
+				ctx.lineWidth = vm.borderWidth * 2;
 
+				ctx.lineJoin = 'round';
 
+			} else {
 
+				ctx.lineWidth = vm.borderWidth;
 
+				ctx.lineJoin = 'bevel';
 
+			}
 
+
 
+			ctx.strokeStyle = vm.borderColor;
 
+			ctx.stroke();
 
+		}
 
+
 
+		ctx.restore();
 
+	}
 
+});
 
+
 
+var valueOrDefault$1 = helpers$1.valueOrDefault;
 
+
 
+var defaultColor = core_defaults.global.defaultColor;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		line: {
 
+			tension: 0.4,
 
+			backgroundColor: defaultColor,
 
+			borderWidth: 3,
 
+			borderColor: defaultColor,
 
+			borderCapStyle: 'butt',
 
+			borderDash: [],
 
+			borderDashOffset: 0.0,
 
+			borderJoinStyle: 'miter',
 
+			capBezierPoints: true,
 
+			fill: true, // do we fill in the area between the line and its base axis
 
+		}
 
+	}
 
+});
 
+
 
+var element_line = core_element.extend({
 
+	draw: function() {
 
+		var me = this;
 
+		var vm = me._view;
 
+		var ctx = me._chart.ctx;
 
+		var spanGaps = vm.spanGaps;
 
+		var points = me._children.slice(); // clone array
 
+		var globalDefaults = core_defaults.global;
 
+		var globalOptionLineElements = globalDefaults.elements.line;
 
+		var lastDrawnIndex = -1;
 
+		var index, current, previous, currentVM;
 
+
 
+		// If we are looping, adding the first point again
 
+		if (me._loop && points.length) {
 
+			points.push(points[0]);
 
+		}
 
+
 
+		ctx.save();
 
+
 
+		// Stroke Line Options
 
+		ctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle;
 
+
 
+		// IE 9 and 10 do not support line dash
 
+		if (ctx.setLineDash) {
 
+			ctx.setLineDash(vm.borderDash || globalOptionLineElements.borderDash);
 
+		}
 
+
 
+		ctx.lineDashOffset = valueOrDefault$1(vm.borderDashOffset, globalOptionLineElements.borderDashOffset);
 
+		ctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle;
 
+		ctx.lineWidth = valueOrDefault$1(vm.borderWidth, globalOptionLineElements.borderWidth);
 
+		ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;
 
+
 
+		// Stroke Line
 
+		ctx.beginPath();
 
+		lastDrawnIndex = -1;
 
+
 
+		for (index = 0; index < points.length; ++index) {
 
+			current = points[index];
 
+			previous = helpers$1.previousItem(points, index);
 
+			currentVM = current._view;
 
+
 
+			// First point moves to it's starting position no matter what
 
+			if (index === 0) {
 
+				if (!currentVM.skip) {
 
+					ctx.moveTo(currentVM.x, currentVM.y);
 
+					lastDrawnIndex = index;
 
+				}
 
+			} else {
 
+				previous = lastDrawnIndex === -1 ? previous : points[lastDrawnIndex];
 
+
 
+				if (!currentVM.skip) {
 
+					if ((lastDrawnIndex !== (index - 1) && !spanGaps) || lastDrawnIndex === -1) {
 
+						// There was a gap and this is the first point after the gap
 
+						ctx.moveTo(currentVM.x, currentVM.y);
 
+					} else {
 
+						// Line to next point
 
+						helpers$1.canvas.lineTo(ctx, previous._view, current._view);
 
+					}
 
+					lastDrawnIndex = index;
 
+				}
 
+			}
 
+		}
 
+
 
+		ctx.stroke();
 
+		ctx.restore();
 
+	}
 
+});
 
+
 
+var valueOrDefault$2 = helpers$1.valueOrDefault;
 
+
 
+var defaultColor$1 = core_defaults.global.defaultColor;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		point: {
 
+			radius: 3,
 
+			pointStyle: 'circle',
 
+			backgroundColor: defaultColor$1,
 
+			borderColor: defaultColor$1,
 
+			borderWidth: 1,
 
+			// Hover
 
+			hitRadius: 1,
 
+			hoverRadius: 4,
 
+			hoverBorderWidth: 1
 
+		}
 
+	}
 
+});
 
+
 
+function xRange(mouseX) {
 
+	var vm = this._view;
 
+	return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false;
 
+}
 
+
 
+function yRange(mouseY) {
 
+	var vm = this._view;
 
+	return vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false;
 
+}
 
+
 
+var element_point = core_element.extend({
 
+	inRange: function(mouseX, mouseY) {
 
+		var vm = this._view;
 
+		return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false;
 
+	},
 
+
 
+	inLabelRange: xRange,
 
+	inXRange: xRange,
 
+	inYRange: yRange,
 
+
 
+	getCenterPoint: function() {
 
+		var vm = this._view;
 
+		return {
 
+			x: vm.x,
 
+			y: vm.y
 
+		};
 
+	},
 
+
 
+	getArea: function() {
 
+		return Math.PI * Math.pow(this._view.radius, 2);
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		var vm = this._view;
 
+		return {
 
+			x: vm.x,
 
+			y: vm.y,
 
+			padding: vm.radius + vm.borderWidth
 
+		};
 
+	},
 
+
 
+	draw: function(chartArea) {
 
+		var vm = this._view;
 
+		var ctx = this._chart.ctx;
 
+		var pointStyle = vm.pointStyle;
 
+		var rotation = vm.rotation;
 
+		var radius = vm.radius;
 
+		var x = vm.x;
 
+		var y = vm.y;
 
+		var globalDefaults = core_defaults.global;
 
+		var defaultColor = globalDefaults.defaultColor; // eslint-disable-line no-shadow
 
+
 
+		if (vm.skip) {
 
+			return;
 
+		}
 
+
 
+		// Clipping for Points.
 
+		if (chartArea === undefined || helpers$1.canvas._isPointInArea(vm, chartArea)) {
 
+			ctx.strokeStyle = vm.borderColor || defaultColor;
 
+			ctx.lineWidth = valueOrDefault$2(vm.borderWidth, globalDefaults.elements.point.borderWidth);
 
+			ctx.fillStyle = vm.backgroundColor || defaultColor;
 
+			helpers$1.canvas.drawPoint(ctx, pointStyle, radius, x, y, rotation);
 
+		}
 
+	}
 
+});
 
+
 
+var defaultColor$2 = core_defaults.global.defaultColor;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		rectangle: {
 
+			backgroundColor: defaultColor$2,
 
+			borderColor: defaultColor$2,
 
+			borderSkipped: 'bottom',
 
+			borderWidth: 0
 
+		}
 
+	}
 
+});
 
+
 
+function isVertical(vm) {
 
+	return vm && vm.width !== undefined;
 
+}
 
+
 
+/**
 
+ * Helper function to get the bounds of the bar regardless of the orientation
 
+ * @param bar {Chart.Element.Rectangle} the bar
 
+ * @return {Bounds} bounds of the bar
 
+ * @private
 
+ */
 
+function getBarBounds(vm) {
 
+	var x1, x2, y1, y2, half;
 
+
 
+	if (isVertical(vm)) {
 
+		half = vm.width / 2;
 
+		x1 = vm.x - half;
 
+		x2 = vm.x + half;
 
+		y1 = Math.min(vm.y, vm.base);
 
+		y2 = Math.max(vm.y, vm.base);
 
+	} else {
 
+		half = vm.height / 2;
 
+		x1 = Math.min(vm.x, vm.base);
 
+		x2 = Math.max(vm.x, vm.base);
 
+		y1 = vm.y - half;
 
+		y2 = vm.y + half;
 
+	}
 
+
 
+	return {
 
+		left: x1,
 
+		top: y1,
 
+		right: x2,
 
+		bottom: y2
 
+	};
 
+}
 
+
 
+function swap(orig, v1, v2) {
 
+	return orig === v1 ? v2 : orig === v2 ? v1 : orig;
 
+}
 
+
 
+function parseBorderSkipped(vm) {
 
+	var edge = vm.borderSkipped;
 
+	var res = {};
 
+
 
+	if (!edge) {
 
+		return res;
 
+	}
 
+
 
+	if (vm.horizontal) {
 
+		if (vm.base > vm.x) {
 
+			edge = swap(edge, 'left', 'right');
 
+		}
 
+	} else if (vm.base < vm.y) {
 
+		edge = swap(edge, 'bottom', 'top');
 
+	}
 
+
 
+	res[edge] = true;
 
+	return res;
 
+}
 
+
 
+function parseBorderWidth(vm, maxW, maxH) {
 
+	var value = vm.borderWidth;
 
+	var skip = parseBorderSkipped(vm);
 
+	var t, r, b, l;
 
+
 
+	if (helpers$1.isObject(value)) {
 
+		t = +value.top || 0;
 
+		r = +value.right || 0;
 
+		b = +value.bottom || 0;
 
+		l = +value.left || 0;
 
+	} else {
 
+		t = r = b = l = +value || 0;
 
+	}
 
+
 
+	return {
 
+		t: skip.top || (t < 0) ? 0 : t > maxH ? maxH : t,
 
+		r: skip.right || (r < 0) ? 0 : r > maxW ? maxW : r,
 
+		b: skip.bottom || (b < 0) ? 0 : b > maxH ? maxH : b,
 
+		l: skip.left || (l < 0) ? 0 : l > maxW ? maxW : l
 
+	};
 
+}
 
+
 
+function boundingRects(vm) {
 
+	var bounds = getBarBounds(vm);
 
+	var width = bounds.right - bounds.left;
 
+	var height = bounds.bottom - bounds.top;
 
+	var border = parseBorderWidth(vm, width / 2, height / 2);
 
+
 
+	return {
 
+		outer: {
 
+			x: bounds.left,
 
+			y: bounds.top,
 
+			w: width,
 
+			h: height
 
+		},
 
+		inner: {
 
+			x: bounds.left + border.l,
 
+			y: bounds.top + border.t,
 
+			w: width - border.l - border.r,
 
+			h: height - border.t - border.b
 
+		}
 
+	};
 
+}
 
+
 
+function inRange(vm, x, y) {
 
+	var skipX = x === null;
 
+	var skipY = y === null;
 
+	var bounds = !vm || (skipX && skipY) ? false : getBarBounds(vm);
 
+
 
+	return bounds
 
+		&& (skipX || x >= bounds.left && x <= bounds.right)
 
+		&& (skipY || y >= bounds.top && y <= bounds.bottom);
 
+}
 
+
 
+var element_rectangle = core_element.extend({
 
+	draw: function() {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+		var rects = boundingRects(vm);
 
+		var outer = rects.outer;
 
+		var inner = rects.inner;
 
+
 
+		ctx.fillStyle = vm.backgroundColor;
 
+		ctx.fillRect(outer.x, outer.y, outer.w, outer.h);
 
+
 
+		if (outer.w === inner.w && outer.h === inner.h) {
 
+			return;
 
+		}
 
+
 
+		ctx.save();
 
+		ctx.beginPath();
 
+		ctx.rect(outer.x, outer.y, outer.w, outer.h);
 
+		ctx.clip();
 
+		ctx.fillStyle = vm.borderColor;
 
+		ctx.rect(inner.x, inner.y, inner.w, inner.h);
 
+		ctx.fill('evenodd');
 
+		ctx.restore();
 
+	},
 
+
 
+	height: function() {
 
+		var vm = this._view;
 
+		return vm.base - vm.y;
 
+	},
 
+
 
+	inRange: function(mouseX, mouseY) {
 
+		return inRange(this._view, mouseX, mouseY);
 
+	},
 
+
 
+	inLabelRange: function(mouseX, mouseY) {
 
+		var vm = this._view;
 
+		return isVertical(vm)
 
+			? inRange(vm, mouseX, null)
 
+			: inRange(vm, null, mouseY);
 
+	},
 
+
 
+	inXRange: function(mouseX) {
 
+		return inRange(this._view, mouseX, null);
 
+	},
 
+
 
+	inYRange: function(mouseY) {
 
+		return inRange(this._view, null, mouseY);
 
+	},
 
+
 
+	getCenterPoint: function() {
 
+		var vm = this._view;
 
+		var x, y;
 
+		if (isVertical(vm)) {
 
+			x = vm.x;
 
+			y = (vm.y + vm.base) / 2;
 
+		} else {
 
+			x = (vm.x + vm.base) / 2;
 
+			y = vm.y;
 
+		}
 
+
 
+		return {x: x, y: y};
 
+	},
 
+
 
+	getArea: function() {
 
+		var vm = this._view;
 
+
 
+		return isVertical(vm)
 
+			? vm.width * Math.abs(vm.y - vm.base)
 
+			: vm.height * Math.abs(vm.x - vm.base);
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		var vm = this._view;
 
+		return {
 
+			x: vm.x,
 
+			y: vm.y
 
+		};
 
+	}
 
+});
 
+
 
+var elements = {};
 
+var Arc = element_arc;
 
+var Line = element_line;
 
+var Point = element_point;
 
+var Rectangle = element_rectangle;
 
+elements.Arc = Arc;
 
+elements.Line = Line;
 
+elements.Point = Point;
 
+elements.Rectangle = Rectangle;
 
+
 
+var resolve$1 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('bar', {
 
+	hover: {
 
+		mode: 'label'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'category',
 
+			categoryPercentage: 0.8,
 
+			barPercentage: 0.9,
 
+			offset: true,
 
+			gridLines: {
 
+				offsetGridLines: true
 
+			}
 
+		}],
 
+
 
+		yAxes: [{
 
+			type: 'linear'
 
+		}]
 
+	}
 
+});
 
+
 
+/**
 
+ * Computes the "optimal" sample size to maintain bars equally sized while preventing overlap.
 
+ * @private
 
+ */
 
+function computeMinSampleSize(scale, pixels) {
 
+	var min = scale.isHorizontal() ? scale.width : scale.height;
 
+	var ticks = scale.getTicks();
 
+	var prev, curr, i, ilen;
 
+
 
+	for (i = 1, ilen = pixels.length; i < ilen; ++i) {
 
+		min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
 
+	}
 
+
 
+	for (i = 0, ilen = ticks.length; i < ilen; ++i) {
 
+		curr = scale.getPixelForTick(i);
 
+		min = i > 0 ? Math.min(min, curr - prev) : min;
 
+		prev = curr;
 
+	}
 
+
 
+	return min;
 
+}
 
+
 
+/**
 
+ * Computes an "ideal" category based on the absolute bar thickness or, if undefined or null,
 
+ * uses the smallest interval (see computeMinSampleSize) that prevents bar overlapping. This
 
+ * mode currently always generates bars equally sized (until we introduce scriptable options?).
 
+ * @private
 
+ */
 
+function computeFitCategoryTraits(index, ruler, options) {
 
+	var thickness = options.barThickness;
 
+	var count = ruler.stackCount;
 
+	var curr = ruler.pixels[index];
 
+	var size, ratio;
 
+
 
+	if (helpers$1.isNullOrUndef(thickness)) {
 
+		size = ruler.min * options.categoryPercentage;
 
+		ratio = options.barPercentage;
 
+	} else {
 
+		// When bar thickness is enforced, category and bar percentages are ignored.
 
+		// Note(SB): we could add support for relative bar thickness (e.g. barThickness: '50%')
 
+		// and deprecate barPercentage since this value is ignored when thickness is absolute.
 
+		size = thickness * count;
 
+		ratio = 1;
 
+	}
 
+
 
+	return {
 
+		chunk: size / count,
 
+		ratio: ratio,
 
+		start: curr - (size / 2)
 
+	};
 
+}
 
+
 
+/**
 
+ * Computes an "optimal" category that globally arranges bars side by side (no gap when
 
+ * percentage options are 1), based on the previous and following categories. This mode
 
+ * generates bars with different widths when data are not evenly spaced.
 
+ * @private
 
+ */
 
+function computeFlexCategoryTraits(index, ruler, options) {
 
+	var pixels = ruler.pixels;
 
+	var curr = pixels[index];
 
+	var prev = index > 0 ? pixels[index - 1] : null;
 
+	var next = index < pixels.length - 1 ? pixels[index + 1] : null;
 
+	var percent = options.categoryPercentage;
 
+	var start, size;
 
+
 
+	if (prev === null) {
 
+		// first data: its size is double based on the next point or,
 
+		// if it's also the last data, we use the scale size.
 
+		prev = curr - (next === null ? ruler.end - ruler.start : next - curr);
 
+	}
 
+
 
+	if (next === null) {
 
+		// last data: its size is also double based on the previous point.
 
+		next = curr + curr - prev;
 
+	}
 
+
 
+	start = curr - (curr - Math.min(prev, next)) / 2 * percent;
 
+	size = Math.abs(next - prev) / 2 * percent;
 
+
 
+	return {
 
+		chunk: size / ruler.stackCount,
 
+		ratio: options.barPercentage,
 
+		start: start
 
+	};
 
+}
 
+
 
+var controller_bar = core_datasetController.extend({
 
+
 
+	dataElementType: elements.Rectangle,
 
+
 
+	initialize: function() {
 
+		var me = this;
 
+		var meta;
 
+
 
+		core_datasetController.prototype.initialize.apply(me, arguments);
 
+
 
+		meta = me.getMeta();
 
+		meta.stack = me.getDataset().stack;
 
+		meta.bar = true;
 
+	},
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var rects = me.getMeta().data;
 
+		var i, ilen;
 
+
 
+		me._ruler = me.getRuler();
 
+
 
+		for (i = 0, ilen = rects.length; i < ilen; ++i) {
 
+			me.updateElement(rects[i], i, reset);
 
+		}
 
+	},
 
+
 
+	updateElement: function(rectangle, index, reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var dataset = me.getDataset();
 
+		var options = me._resolveElementOptions(rectangle, index);
 
+
 
+		rectangle._xScale = me.getScaleForId(meta.xAxisID);
 
+		rectangle._yScale = me.getScaleForId(meta.yAxisID);
 
+		rectangle._datasetIndex = me.index;
 
+		rectangle._index = index;
 
+		rectangle._model = {
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderSkipped: options.borderSkipped,
 
+			borderWidth: options.borderWidth,
 
+			datasetLabel: dataset.label,
 
+			label: me.chart.data.labels[index]
 
+		};
 
+
 
+		me._updateElementGeometry(rectangle, index, reset);
 
+
 
+		rectangle.pivot();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_updateElementGeometry: function(rectangle, index, reset) {
 
+		var me = this;
 
+		var model = rectangle._model;
 
+		var vscale = me._getValueScale();
 
+		var base = vscale.getBasePixel();
 
+		var horizontal = vscale.isHorizontal();
 
+		var ruler = me._ruler || me.getRuler();
 
+		var vpixels = me.calculateBarValuePixels(me.index, index);
 
+		var ipixels = me.calculateBarIndexPixels(me.index, index, ruler);
 
+
 
+		model.horizontal = horizontal;
 
+		model.base = reset ? base : vpixels.base;
 
+		model.x = horizontal ? reset ? base : vpixels.head : ipixels.center;
 
+		model.y = horizontal ? ipixels.center : reset ? base : vpixels.head;
 
+		model.height = horizontal ? ipixels.size : undefined;
 
+		model.width = horizontal ? undefined : ipixels.size;
 
+	},
 
+
 
+	/**
 
+	 * Returns the stacks based on groups and bar visibility.
 
+	 * @param {number} [last] - The dataset index
 
+	 * @returns {string[]} The list of stack IDs
 
+	 * @private
 
+	 */
 
+	_getStacks: function(last) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var scale = me._getIndexScale();
 
+		var stacked = scale.options.stacked;
 
+		var ilen = last === undefined ? chart.data.datasets.length : last + 1;
 
+		var stacks = [];
 
+		var i, meta;
 
+
 
+		for (i = 0; i < ilen; ++i) {
 
+			meta = chart.getDatasetMeta(i);
 
+			if (meta.bar && chart.isDatasetVisible(i) &&
 
+				(stacked === false ||
 
+				(stacked === true && stacks.indexOf(meta.stack) === -1) ||
 
+				(stacked === undefined && (meta.stack === undefined || stacks.indexOf(meta.stack) === -1)))) {
 
+				stacks.push(meta.stack);
 
+			}
 
+		}
 
+
 
+		return stacks;
 
+	},
 
+
 
+	/**
 
+	 * Returns the effective number of stacks based on groups and bar visibility.
 
+	 * @private
 
+	 */
 
+	getStackCount: function() {
 
+		return this._getStacks().length;
 
+	},
 
+
 
+	/**
 
+	 * Returns the stack index for the given dataset based on groups and bar visibility.
 
+	 * @param {number} [datasetIndex] - The dataset index
 
+	 * @param {string} [name] - The stack name to find
 
+	 * @returns {number} The stack index
 
+	 * @private
 
+	 */
 
+	getStackIndex: function(datasetIndex, name) {
 
+		var stacks = this._getStacks(datasetIndex);
 
+		var index = (name !== undefined)
 
+			? stacks.indexOf(name)
 
+			: -1; // indexOf returns -1 if element is not present
 
+
 
+		return (index === -1)
 
+			? stacks.length - 1
 
+			: index;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	getRuler: function() {
 
+		var me = this;
 
+		var scale = me._getIndexScale();
 
+		var stackCount = me.getStackCount();
 
+		var datasetIndex = me.index;
 
+		var isHorizontal = scale.isHorizontal();
 
+		var start = isHorizontal ? scale.left : scale.top;
 
+		var end = start + (isHorizontal ? scale.width : scale.height);
 
+		var pixels = [];
 
+		var i, ilen, min;
 
+
 
+		for (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {
 
+			pixels.push(scale.getPixelForValue(null, i, datasetIndex));
 
+		}
 
+
 
+		min = helpers$1.isNullOrUndef(scale.options.barThickness)
 
+			? computeMinSampleSize(scale, pixels)
 
+			: -1;
 
+
 
+		return {
 
+			min: min,
 
+			pixels: pixels,
 
+			start: start,
 
+			end: end,
 
+			stackCount: stackCount,
 
+			scale: scale
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Note: pixel values are not clamped to the scale area.
 
+	 * @private
 
+	 */
 
+	calculateBarValuePixels: function(datasetIndex, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var scale = me._getValueScale();
 
+		var isHorizontal = scale.isHorizontal();
 
+		var datasets = chart.data.datasets;
 
+		var value = +scale.getRightValue(datasets[datasetIndex].data[index]);
 
+		var minBarLength = scale.options.minBarLength;
 
+		var stacked = scale.options.stacked;
 
+		var stack = meta.stack;
 
+		var start = 0;
 
+		var i, imeta, ivalue, base, head, size;
 
+
 
+		if (stacked || (stacked === undefined && stack !== undefined)) {
 
+			for (i = 0; i < datasetIndex; ++i) {
 
+				imeta = chart.getDatasetMeta(i);
 
+
 
+				if (imeta.bar &&
 
+					imeta.stack === stack &&
 
+					imeta.controller._getValueScaleId() === scale.id &&
 
+					chart.isDatasetVisible(i)) {
 
+
 
+					ivalue = +scale.getRightValue(datasets[i].data[index]);
 
+					if ((value < 0 && ivalue < 0) || (value >= 0 && ivalue > 0)) {
 
+						start += ivalue;
 
+					}
 
+				}
 
+			}
 
+		}
 
+
 
+		base = scale.getPixelForValue(start);
 
+		head = scale.getPixelForValue(start + value);
 
+		size = head - base;
 
+
 
+		if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
 
+			size = minBarLength;
 
+			if (value >= 0 && !isHorizontal || value < 0 && isHorizontal) {
 
+				head = base - minBarLength;
 
+			} else {
 
+				head = base + minBarLength;
 
+			}
 
+		}
 
+
 
+		return {
 
+			size: size,
 
+			base: base,
 
+			head: head,
 
+			center: head + size / 2
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	calculateBarIndexPixels: function(datasetIndex, index, ruler) {
 
+		var me = this;
 
+		var options = ruler.scale.options;
 
+		var range = options.barThickness === 'flex'
 
+			? computeFlexCategoryTraits(index, ruler, options)
 
+			: computeFitCategoryTraits(index, ruler, options);
 
+
 
+		var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);
 
+		var center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
 
+		var size = Math.min(
 
+			helpers$1.valueOrDefault(options.maxBarThickness, Infinity),
 
+			range.chunk * range.ratio);
 
+
 
+		return {
 
+			base: center - size / 2,
 
+			head: center + size / 2,
 
+			center: center,
 
+			size: size
 
+		};
 
+	},
 
+
 
+	draw: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var scale = me._getValueScale();
 
+		var rects = me.getMeta().data;
 
+		var dataset = me.getDataset();
 
+		var ilen = rects.length;
 
+		var i = 0;
 
+
 
+		helpers$1.canvas.clipArea(chart.ctx, chart.chartArea);
 
+
 
+		for (; i < ilen; ++i) {
 
+			if (!isNaN(scale.getRightValue(dataset.data[i]))) {
 
+				rects[i].draw();
 
+			}
 
+		}
 
+
 
+		helpers$1.canvas.unclipArea(chart.ctx);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(rectangle, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var datasets = chart.data.datasets;
 
+		var dataset = datasets[me.index];
 
+		var custom = rectangle.custom || {};
 
+		var options = chart.options.elements.rectangle;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderSkipped',
 
+			'borderWidth'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$1([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	}
 
+});
 
+
 
+var valueOrDefault$3 = helpers$1.valueOrDefault;
 
+var resolve$2 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('bubble', {
 
+	hover: {
 
+		mode: 'single'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'linear', // bubble should probably use a linear scale by default
 
+			position: 'bottom',
 
+			id: 'x-axis-0' // need an ID so datasets can reference the scale
 
+		}],
 
+		yAxes: [{
 
+			type: 'linear',
 
+			position: 'left',
 
+			id: 'y-axis-0'
 
+		}]
 
+	},
 
+
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				// Title doesn't make sense for scatter since we format the data as a point
 
+				return '';
 
+			},
 
+			label: function(item, data) {
 
+				var datasetLabel = data.datasets[item.datasetIndex].label || '';
 
+				var dataPoint = data.datasets[item.datasetIndex].data[item.index];
 
+				return datasetLabel + ': (' + item.xLabel + ', ' + item.yLabel + ', ' + dataPoint.r + ')';
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+var controller_bubble = core_datasetController.extend({
 
+	/**
 
+	 * @protected
 
+	 */
 
+	dataElementType: elements.Point,
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	update: function(reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var points = meta.data;
 
+
 
+		// Update Points
 
+		helpers$1.each(points, function(point, index) {
 
+			me.updateElement(point, index, reset);
 
+		});
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	updateElement: function(point, index, reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var custom = point.custom || {};
 
+		var xScale = me.getScaleForId(meta.xAxisID);
 
+		var yScale = me.getScaleForId(meta.yAxisID);
 
+		var options = me._resolveElementOptions(point, index);
 
+		var data = me.getDataset().data[index];
 
+		var dsIndex = me.index;
 
+
 
+		var x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex);
 
+		var y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, dsIndex);
 
+
 
+		point._xScale = xScale;
 
+		point._yScale = yScale;
 
+		point._options = options;
 
+		point._datasetIndex = dsIndex;
 
+		point._index = index;
 
+		point._model = {
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderWidth: options.borderWidth,
 
+			hitRadius: options.hitRadius,
 
+			pointStyle: options.pointStyle,
 
+			rotation: options.rotation,
 
+			radius: reset ? 0 : options.radius,
 
+			skip: custom.skip || isNaN(x) || isNaN(y),
 
+			x: x,
 
+			y: y,
 
+		};
 
+
 
+		point.pivot();
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(point) {
 
+		var model = point._model;
 
+		var options = point._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		point.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+			radius: model.radius
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$3(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$3(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$3(options.hoverBorderWidth, options.borderWidth);
 
+		model.radius = options.radius + options.hoverRadius;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(point, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var datasets = chart.data.datasets;
 
+		var dataset = datasets[me.index];
 
+		var custom = point.custom || {};
 
+		var options = chart.options.elements.point;
 
+		var data = dataset.data[index];
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderWidth',
 
+			'hoverBackgroundColor',
 
+			'hoverBorderColor',
 
+			'hoverBorderWidth',
 
+			'hoverRadius',
 
+			'hitRadius',
 
+			'pointStyle',
 
+			'rotation'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$2([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		// Custom radius resolution
 
+		values.radius = resolve$2([
 
+			custom.radius,
 
+			data ? data.r : undefined,
 
+			dataset.radius,
 
+			options.radius
 
+		], context, index);
 
+
 
+		return values;
 
+	}
 
+});
 
+
 
+var resolve$3 = helpers$1.options.resolve;
 
+var valueOrDefault$4 = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('doughnut', {
 
+	animation: {
 
+		// Boolean - Whether we animate the rotation of the Doughnut
 
+		animateRotate: true,
 
+		// Boolean - Whether we animate scaling the Doughnut from the centre
 
+		animateScale: false
 
+	},
 
+	hover: {
 
+		mode: 'single'
 
+	},
 
+	legendCallback: function(chart) {
 
+		var text = [];
 
+		text.push('<ul class="' + chart.id + '-legend">');
 
+
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var labels = data.labels;
 
+
 
+		if (datasets.length) {
 
+			for (var i = 0; i < datasets[0].data.length; ++i) {
 
+				text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
 
+				if (labels[i]) {
 
+					text.push(labels[i]);
 
+				}
 
+				text.push('</li>');
 
+			}
 
+		}
 
+
 
+		text.push('</ul>');
 
+		return text.join('');
 
+	},
 
+	legend: {
 
+		labels: {
 
+			generateLabels: function(chart) {
 
+				var data = chart.data;
 
+				if (data.labels.length && data.datasets.length) {
 
+					return data.labels.map(function(label, i) {
 
+						var meta = chart.getDatasetMeta(0);
 
+						var ds = data.datasets[0];
 
+						var arc = meta.data[i];
 
+						var custom = arc && arc.custom || {};
 
+						var arcOpts = chart.options.elements.arc;
 
+						var fill = resolve$3([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
 
+						var stroke = resolve$3([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
 
+						var bw = resolve$3([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
 
+
 
+						return {
 
+							text: label,
 
+							fillStyle: fill,
 
+							strokeStyle: stroke,
 
+							lineWidth: bw,
 
+							hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
 
+
 
+							// Extra data used for toggling the correct item
 
+							index: i
 
+						};
 
+					});
 
+				}
 
+				return [];
 
+			}
 
+		},
 
+
 
+		onClick: function(e, legendItem) {
 
+			var index = legendItem.index;
 
+			var chart = this.chart;
 
+			var i, ilen, meta;
 
+
 
+			for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
 
+				meta = chart.getDatasetMeta(i);
 
+				// toggle visibility of index if exists
 
+				if (meta.data[index]) {
 
+					meta.data[index].hidden = !meta.data[index].hidden;
 
+				}
 
+			}
 
+
 
+			chart.update();
 
+		}
 
+	},
 
+
 
+	// The percentage of the chart that we cut out of the middle.
 
+	cutoutPercentage: 50,
 
+
 
+	// The rotation of the chart, where the first data arc begins.
 
+	rotation: Math.PI * -0.5,
 
+
 
+	// The total circumference of the chart.
 
+	circumference: Math.PI * 2.0,
 
+
 
+	// Need to override these to give a nice default
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				return '';
 
+			},
 
+			label: function(tooltipItem, data) {
 
+				var dataLabel = data.labels[tooltipItem.index];
 
+				var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
 
+
 
+				if (helpers$1.isArray(dataLabel)) {
 
+					// show value on first line of multiline label
 
+					// need to clone because we are changing the value
 
+					dataLabel = dataLabel.slice();
 
+					dataLabel[0] += value;
 
+				} else {
 
+					dataLabel += value;
 
+				}
 
+
 
+				return dataLabel;
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+var controller_doughnut = core_datasetController.extend({
 
+
 
+	dataElementType: elements.Arc,
 
+
 
+	linkScales: helpers$1.noop,
 
+
 
+	// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
 
+	getRingIndex: function(datasetIndex) {
 
+		var ringIndex = 0;
 
+
 
+		for (var j = 0; j < datasetIndex; ++j) {
 
+			if (this.chart.isDatasetVisible(j)) {
 
+				++ringIndex;
 
+			}
 
+		}
 
+
 
+		return ringIndex;
 
+	},
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var chartArea = chart.chartArea;
 
+		var opts = chart.options;
 
+		var availableWidth = chartArea.right - chartArea.left;
 
+		var availableHeight = chartArea.bottom - chartArea.top;
 
+		var minSize = Math.min(availableWidth, availableHeight);
 
+		var offset = {x: 0, y: 0};
 
+		var meta = me.getMeta();
 
+		var arcs = meta.data;
 
+		var cutoutPercentage = opts.cutoutPercentage;
 
+		var circumference = opts.circumference;
 
+		var chartWeight = me._getRingWeight(me.index);
 
+		var i, ilen;
 
+
 
+		// If the chart's circumference isn't a full circle, calculate minSize as a ratio of the width/height of the arc
 
+		if (circumference < Math.PI * 2.0) {
 
+			var startAngle = opts.rotation % (Math.PI * 2.0);
 
+			startAngle += Math.PI * 2.0 * (startAngle >= Math.PI ? -1 : startAngle < -Math.PI ? 1 : 0);
 
+			var endAngle = startAngle + circumference;
 
+			var start = {x: Math.cos(startAngle), y: Math.sin(startAngle)};
 
+			var end = {x: Math.cos(endAngle), y: Math.sin(endAngle)};
 
+			var contains0 = (startAngle <= 0 && endAngle >= 0) || (startAngle <= Math.PI * 2.0 && Math.PI * 2.0 <= endAngle);
 
+			var contains90 = (startAngle <= Math.PI * 0.5 && Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 2.5 && Math.PI * 2.5 <= endAngle);
 
+			var contains180 = (startAngle <= -Math.PI && -Math.PI <= endAngle) || (startAngle <= Math.PI && Math.PI <= endAngle);
 
+			var contains270 = (startAngle <= -Math.PI * 0.5 && -Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 1.5 && Math.PI * 1.5 <= endAngle);
 
+			var cutout = cutoutPercentage / 100.0;
 
+			var min = {x: contains180 ? -1 : Math.min(start.x * (start.x < 0 ? 1 : cutout), end.x * (end.x < 0 ? 1 : cutout)), y: contains270 ? -1 : Math.min(start.y * (start.y < 0 ? 1 : cutout), end.y * (end.y < 0 ? 1 : cutout))};
 
+			var max = {x: contains0 ? 1 : Math.max(start.x * (start.x > 0 ? 1 : cutout), end.x * (end.x > 0 ? 1 : cutout)), y: contains90 ? 1 : Math.max(start.y * (start.y > 0 ? 1 : cutout), end.y * (end.y > 0 ? 1 : cutout))};
 
+			var size = {width: (max.x - min.x) * 0.5, height: (max.y - min.y) * 0.5};
 
+			minSize = Math.min(availableWidth / size.width, availableHeight / size.height);
 
+			offset = {x: (max.x + min.x) * -0.5, y: (max.y + min.y) * -0.5};
 
+		}
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			arcs[i]._options = me._resolveElementOptions(arcs[i], i);
 
+		}
 
+
 
+		chart.borderWidth = me.getMaxBorderWidth();
 
+		chart.outerRadius = Math.max((minSize - chart.borderWidth) / 2, 0);
 
+		chart.innerRadius = Math.max(cutoutPercentage ? (chart.outerRadius / 100) * (cutoutPercentage) : 0, 0);
 
+		chart.radiusLength = (chart.outerRadius - chart.innerRadius) / (me._getVisibleDatasetWeightTotal() || 1);
 
+		chart.offsetX = offset.x * chart.outerRadius;
 
+		chart.offsetY = offset.y * chart.outerRadius;
 
+
 
+		meta.total = me.calculateTotal();
 
+
 
+		me.outerRadius = chart.outerRadius - chart.radiusLength * me._getRingWeightOffset(me.index);
 
+		me.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0);
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			me.updateElement(arcs[i], i, reset);
 
+		}
 
+	},
 
+
 
+	updateElement: function(arc, index, reset) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var chartArea = chart.chartArea;
 
+		var opts = chart.options;
 
+		var animationOpts = opts.animation;
 
+		var centerX = (chartArea.left + chartArea.right) / 2;
 
+		var centerY = (chartArea.top + chartArea.bottom) / 2;
 
+		var startAngle = opts.rotation; // non reset case handled later
 
+		var endAngle = opts.rotation; // non reset case handled later
 
+		var dataset = me.getDataset();
 
+		var circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI));
 
+		var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
 
+		var outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;
 
+		var options = arc._options || {};
 
+
 
+		helpers$1.extend(arc, {
 
+			// Utility
 
+			_datasetIndex: me.index,
 
+			_index: index,
 
+
 
+			// Desired view properties
 
+			_model: {
 
+				backgroundColor: options.backgroundColor,
 
+				borderColor: options.borderColor,
 
+				borderWidth: options.borderWidth,
 
+				borderAlign: options.borderAlign,
 
+				x: centerX + chart.offsetX,
 
+				y: centerY + chart.offsetY,
 
+				startAngle: startAngle,
 
+				endAngle: endAngle,
 
+				circumference: circumference,
 
+				outerRadius: outerRadius,
 
+				innerRadius: innerRadius,
 
+				label: helpers$1.valueAtIndexOrDefault(dataset.label, index, chart.data.labels[index])
 
+			}
 
+		});
 
+
 
+		var model = arc._model;
 
+
 
+		// Set correct angles if not resetting
 
+		if (!reset || !animationOpts.animateRotate) {
 
+			if (index === 0) {
 
+				model.startAngle = opts.rotation;
 
+			} else {
 
+				model.startAngle = me.getMeta().data[index - 1]._model.endAngle;
 
+			}
 
+
 
+			model.endAngle = model.startAngle + model.circumference;
 
+		}
 
+
 
+		arc.pivot();
 
+	},
 
+
 
+	calculateTotal: function() {
 
+		var dataset = this.getDataset();
 
+		var meta = this.getMeta();
 
+		var total = 0;
 
+		var value;
 
+
 
+		helpers$1.each(meta.data, function(element, index) {
 
+			value = dataset.data[index];
 
+			if (!isNaN(value) && !element.hidden) {
 
+				total += Math.abs(value);
 
+			}
 
+		});
 
+
 
+		/* if (total === 0) {
 
+			total = NaN;
 
+		}*/
 
+
 
+		return total;
 
+	},
 
+
 
+	calculateCircumference: function(value) {
 
+		var total = this.getMeta().total;
 
+		if (total > 0 && !isNaN(value)) {
 
+			return (Math.PI * 2.0) * (Math.abs(value) / total);
 
+		}
 
+		return 0;
 
+	},
 
+
 
+	// gets the max border or hover width to properly scale pie charts
 
+	getMaxBorderWidth: function(arcs) {
 
+		var me = this;
 
+		var max = 0;
 
+		var chart = me.chart;
 
+		var i, ilen, meta, arc, controller, options, borderWidth, hoverWidth;
 
+
 
+		if (!arcs) {
 
+			// Find the outmost visible dataset
 
+			for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
 
+				if (chart.isDatasetVisible(i)) {
 
+					meta = chart.getDatasetMeta(i);
 
+					arcs = meta.data;
 
+					if (i !== me.index) {
 
+						controller = meta.controller;
 
+					}
 
+					break;
 
+				}
 
+			}
 
+		}
 
+
 
+		if (!arcs) {
 
+			return 0;
 
+		}
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			arc = arcs[i];
 
+			options = controller ? controller._resolveElementOptions(arc, i) : arc._options;
 
+			if (options.borderAlign !== 'inner') {
 
+				borderWidth = options.borderWidth;
 
+				hoverWidth = options.hoverBorderWidth;
 
+
 
+				max = borderWidth > max ? borderWidth : max;
 
+				max = hoverWidth > max ? hoverWidth : max;
 
+			}
 
+		}
 
+		return max;
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(arc) {
 
+		var model = arc._model;
 
+		var options = arc._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		arc.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$4(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$4(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$4(options.hoverBorderWidth, options.borderWidth);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(arc, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = me.getDataset();
 
+		var custom = arc.custom || {};
 
+		var options = chart.options.elements.arc;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderWidth',
 
+			'borderAlign',
 
+			'hoverBackgroundColor',
 
+			'hoverBorderColor',
 
+			'hoverBorderWidth',
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$3([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly
 
+	 * @private
 
+	 */
 
+	_getRingWeightOffset: function(datasetIndex) {
 
+		var ringWeightOffset = 0;
 
+
 
+		for (var i = 0; i < datasetIndex; ++i) {
 
+			if (this.chart.isDatasetVisible(i)) {
 
+				ringWeightOffset += this._getRingWeight(i);
 
+			}
 
+		}
 
+
 
+		return ringWeightOffset;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getRingWeight: function(dataSetIndex) {
 
+		return Math.max(valueOrDefault$4(this.chart.data.datasets[dataSetIndex].weight, 1), 0);
 
+	},
 
+
 
+	/**
 
+	 * Returns the sum of all visibile data set weights.  This value can be 0.
 
+	 * @private
 
+	 */
 
+	_getVisibleDatasetWeightTotal: function() {
 
+		return this._getRingWeightOffset(this.chart.data.datasets.length);
 
+	}
 
+});
 
+
 
+core_defaults._set('horizontalBar', {
 
+	hover: {
 
+		mode: 'index',
 
+		axis: 'y'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'linear',
 
+			position: 'bottom'
 
+		}],
 
+
 
+		yAxes: [{
 
+			type: 'category',
 
+			position: 'left',
 
+			categoryPercentage: 0.8,
 
+			barPercentage: 0.9,
 
+			offset: true,
 
+			gridLines: {
 
+				offsetGridLines: true
 
+			}
 
+		}]
 
+	},
 
+
 
+	elements: {
 
+		rectangle: {
 
+			borderSkipped: 'left'
 
+		}
 
+	},
 
+
 
+	tooltips: {
 
+		mode: 'index',
 
+		axis: 'y'
 
+	}
 
+});
 
+
 
+var controller_horizontalBar = controller_bar.extend({
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getValueScaleId: function() {
 
+		return this.getMeta().xAxisID;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getIndexScaleId: function() {
 
+		return this.getMeta().yAxisID;
 
+	}
 
+});
 
+
 
+var valueOrDefault$5 = helpers$1.valueOrDefault;
 
+var resolve$4 = helpers$1.options.resolve;
 
+var isPointInArea = helpers$1.canvas._isPointInArea;
 
+
 
+core_defaults._set('line', {
 
+	showLines: true,
 
+	spanGaps: false,
 
+
 
+	hover: {
 
+		mode: 'label'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'category',
 
+			id: 'x-axis-0'
 
+		}],
 
+		yAxes: [{
 
+			type: 'linear',
 
+			id: 'y-axis-0'
 
+		}]
 
+	}
 
+});
 
+
 
+function lineEnabled(dataset, options) {
 
+	return valueOrDefault$5(dataset.showLine, options.showLines);
 
+}
 
+
 
+var controller_line = core_datasetController.extend({
 
+
 
+	datasetElementType: elements.Line,
 
+
 
+	dataElementType: elements.Point,
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var line = meta.dataset;
 
+		var points = meta.data || [];
 
+		var scale = me.getScaleForId(meta.yAxisID);
 
+		var dataset = me.getDataset();
 
+		var showLine = lineEnabled(dataset, me.chart.options);
 
+		var i, ilen;
 
+
 
+		// Update Line
 
+		if (showLine) {
 
+			// Compatibility: If the properties are defined with only the old name, use those values
 
+			if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
 
+				dataset.lineTension = dataset.tension;
 
+			}
 
+
 
+			// Utility
 
+			line._scale = scale;
 
+			line._datasetIndex = me.index;
 
+			// Data
 
+			line._children = points;
 
+			// Model
 
+			line._model = me._resolveLineOptions(line);
 
+
 
+			line.pivot();
 
+		}
 
+
 
+		// Update Points
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			me.updateElement(points[i], i, reset);
 
+		}
 
+
 
+		if (showLine && line._model.tension !== 0) {
 
+			me.updateBezierControlPoints();
 
+		}
 
+
 
+		// Now pivot the point for animation
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			points[i].pivot();
 
+		}
 
+	},
 
+
 
+	updateElement: function(point, index, reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var custom = point.custom || {};
 
+		var dataset = me.getDataset();
 
+		var datasetIndex = me.index;
 
+		var value = dataset.data[index];
 
+		var yScale = me.getScaleForId(meta.yAxisID);
 
+		var xScale = me.getScaleForId(meta.xAxisID);
 
+		var lineModel = meta.dataset._model;
 
+		var x, y;
 
+
 
+		var options = me._resolvePointOptions(point, index);
 
+
 
+		x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);
 
+		y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);
 
+
 
+		// Utility
 
+		point._xScale = xScale;
 
+		point._yScale = yScale;
 
+		point._options = options;
 
+		point._datasetIndex = datasetIndex;
 
+		point._index = index;
 
+
 
+		// Desired view properties
 
+		point._model = {
 
+			x: x,
 
+			y: y,
 
+			skip: custom.skip || isNaN(x) || isNaN(y),
 
+			// Appearance
 
+			radius: options.radius,
 
+			pointStyle: options.pointStyle,
 
+			rotation: options.rotation,
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderWidth: options.borderWidth,
 
+			tension: valueOrDefault$5(custom.tension, lineModel ? lineModel.tension : 0),
 
+			steppedLine: lineModel ? lineModel.steppedLine : false,
 
+			// Tooltip
 
+			hitRadius: options.hitRadius
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolvePointOptions: function(element, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options.elements.point;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var ELEMENT_OPTIONS = {
 
+			backgroundColor: 'pointBackgroundColor',
 
+			borderColor: 'pointBorderColor',
 
+			borderWidth: 'pointBorderWidth',
 
+			hitRadius: 'pointHitRadius',
 
+			hoverBackgroundColor: 'pointHoverBackgroundColor',
 
+			hoverBorderColor: 'pointHoverBorderColor',
 
+			hoverBorderWidth: 'pointHoverBorderWidth',
 
+			hoverRadius: 'pointHoverRadius',
 
+			pointStyle: 'pointStyle',
 
+			radius: 'pointRadius',
 
+			rotation: 'pointRotation'
 
+		};
 
+		var keys = Object.keys(ELEMENT_OPTIONS);
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$4([
 
+				custom[key],
 
+				dataset[ELEMENT_OPTIONS[key]],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveLineOptions: function(element) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options;
 
+		var elementOptions = options.elements.line;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderWidth',
 
+			'borderColor',
 
+			'borderCapStyle',
 
+			'borderDash',
 
+			'borderDashOffset',
 
+			'borderJoinStyle',
 
+			'fill',
 
+			'cubicInterpolationMode'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$4([
 
+				custom[key],
 
+				dataset[key],
 
+				elementOptions[key]
 
+			]);
 
+		}
 
+
 
+		// The default behavior of lines is to break at null values, according
 
+		// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
 
+		// This option gives lines the ability to span gaps
 
+		values.spanGaps = valueOrDefault$5(dataset.spanGaps, options.spanGaps);
 
+		values.tension = valueOrDefault$5(dataset.lineTension, elementOptions.tension);
 
+		values.steppedLine = resolve$4([custom.steppedLine, dataset.steppedLine, elementOptions.stepped]);
 
+
 
+		return values;
 
+	},
 
+
 
+	calculatePointY: function(value, index, datasetIndex) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var yScale = me.getScaleForId(meta.yAxisID);
 
+		var sumPos = 0;
 
+		var sumNeg = 0;
 
+		var i, ds, dsMeta;
 
+
 
+		if (yScale.options.stacked) {
 
+			for (i = 0; i < datasetIndex; i++) {
 
+				ds = chart.data.datasets[i];
 
+				dsMeta = chart.getDatasetMeta(i);
 
+				if (dsMeta.type === 'line' && dsMeta.yAxisID === yScale.id && chart.isDatasetVisible(i)) {
 
+					var stackedRightValue = Number(yScale.getRightValue(ds.data[index]));
 
+					if (stackedRightValue < 0) {
 
+						sumNeg += stackedRightValue || 0;
 
+					} else {
 
+						sumPos += stackedRightValue || 0;
 
+					}
 
+				}
 
+			}
 
+
 
+			var rightValue = Number(yScale.getRightValue(value));
 
+			if (rightValue < 0) {
 
+				return yScale.getPixelForValue(sumNeg + rightValue);
 
+			}
 
+			return yScale.getPixelForValue(sumPos + rightValue);
 
+		}
 
+
 
+		return yScale.getPixelForValue(value);
 
+	},
 
+
 
+	updateBezierControlPoints: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var lineModel = meta.dataset._model;
 
+		var area = chart.chartArea;
 
+		var points = meta.data || [];
 
+		var i, ilen, model, controlPoints;
 
+
 
+		// Only consider points that are drawn in case the spanGaps option is used
 
+		if (lineModel.spanGaps) {
 
+			points = points.filter(function(pt) {
 
+				return !pt._model.skip;
 
+			});
 
+		}
 
+
 
+		function capControlPoint(pt, min, max) {
 
+			return Math.max(Math.min(pt, max), min);
 
+		}
 
+
 
+		if (lineModel.cubicInterpolationMode === 'monotone') {
 
+			helpers$1.splineCurveMonotone(points);
 
+		} else {
 
+			for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+				model = points[i]._model;
 
+				controlPoints = helpers$1.splineCurve(
 
+					helpers$1.previousItem(points, i)._model,
 
+					model,
 
+					helpers$1.nextItem(points, i)._model,
 
+					lineModel.tension
 
+				);
 
+				model.controlPointPreviousX = controlPoints.previous.x;
 
+				model.controlPointPreviousY = controlPoints.previous.y;
 
+				model.controlPointNextX = controlPoints.next.x;
 
+				model.controlPointNextY = controlPoints.next.y;
 
+			}
 
+		}
 
+
 
+		if (chart.options.elements.line.capBezierPoints) {
 
+			for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+				model = points[i]._model;
 
+				if (isPointInArea(model, area)) {
 
+					if (i > 0 && isPointInArea(points[i - 1]._model, area)) {
 
+						model.controlPointPreviousX = capControlPoint(model.controlPointPreviousX, area.left, area.right);
 
+						model.controlPointPreviousY = capControlPoint(model.controlPointPreviousY, area.top, area.bottom);
 
+					}
 
+					if (i < points.length - 1 && isPointInArea(points[i + 1]._model, area)) {
 
+						model.controlPointNextX = capControlPoint(model.controlPointNextX, area.left, area.right);
 
+						model.controlPointNextY = capControlPoint(model.controlPointNextY, area.top, area.bottom);
 
+					}
 
+				}
 
+			}
 
+		}
 
+	},
 
+
 
+	draw: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var points = meta.data || [];
 
+		var area = chart.chartArea;
 
+		var ilen = points.length;
 
+		var halfBorderWidth;
 
+		var i = 0;
 
+
 
+		if (lineEnabled(me.getDataset(), chart.options)) {
 
+			halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2;
 
+
 
+			helpers$1.canvas.clipArea(chart.ctx, {
 
+				left: area.left,
 
+				right: area.right,
 
+				top: area.top - halfBorderWidth,
 
+				bottom: area.bottom + halfBorderWidth
 
+			});
 
+
 
+			meta.dataset.draw();
 
+
 
+			helpers$1.canvas.unclipArea(chart.ctx);
 
+		}
 
+
 
+		// Draw the points
 
+		for (; i < ilen; ++i) {
 
+			points[i].draw(area);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(point) {
 
+		var model = point._model;
 
+		var options = point._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		point.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+			radius: model.radius
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$5(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$5(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$5(options.hoverBorderWidth, options.borderWidth);
 
+		model.radius = valueOrDefault$5(options.hoverRadius, options.radius);
 
+	},
 
+});
 
+
 
+var resolve$5 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('polarArea', {
 
+	scale: {
 
+		type: 'radialLinear',
 
+		angleLines: {
 
+			display: false
 
+		},
 
+		gridLines: {
 
+			circular: true
 
+		},
 
+		pointLabels: {
 
+			display: false
 
+		},
 
+		ticks: {
 
+			beginAtZero: true
 
+		}
 
+	},
 
+
 
+	// Boolean - Whether to animate the rotation of the chart
 
+	animation: {
 
+		animateRotate: true,
 
+		animateScale: true
 
+	},
 
+
 
+	startAngle: -0.5 * Math.PI,
 
+	legendCallback: function(chart) {
 
+		var text = [];
 
+		text.push('<ul class="' + chart.id + '-legend">');
 
+
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var labels = data.labels;
 
+
 
+		if (datasets.length) {
 
+			for (var i = 0; i < datasets[0].data.length; ++i) {
 
+				text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
 
+				if (labels[i]) {
 
+					text.push(labels[i]);
 
+				}
 
+				text.push('</li>');
 
+			}
 
+		}
 
+
 
+		text.push('</ul>');
 
+		return text.join('');
 
+	},
 
+	legend: {
 
+		labels: {
 
+			generateLabels: function(chart) {
 
+				var data = chart.data;
 
+				if (data.labels.length && data.datasets.length) {
 
+					return data.labels.map(function(label, i) {
 
+						var meta = chart.getDatasetMeta(0);
 
+						var ds = data.datasets[0];
 
+						var arc = meta.data[i];
 
+						var custom = arc.custom || {};
 
+						var arcOpts = chart.options.elements.arc;
 
+						var fill = resolve$5([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
 
+						var stroke = resolve$5([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
 
+						var bw = resolve$5([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
 
+
 
+						return {
 
+							text: label,
 
+							fillStyle: fill,
 
+							strokeStyle: stroke,
 
+							lineWidth: bw,
 
+							hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
 
+
 
+							// Extra data used for toggling the correct item
 
+							index: i
 
+						};
 
+					});
 
+				}
 
+				return [];
 
+			}
 
+		},
 
+
 
+		onClick: function(e, legendItem) {
 
+			var index = legendItem.index;
 
+			var chart = this.chart;
 
+			var i, ilen, meta;
 
+
 
+			for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
 
+				meta = chart.getDatasetMeta(i);
 
+				meta.data[index].hidden = !meta.data[index].hidden;
 
+			}
 
+
 
+			chart.update();
 
+		}
 
+	},
 
+
 
+	// Need to override these to give a nice default
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				return '';
 
+			},
 
+			label: function(item, data) {
 
+				return data.labels[item.index] + ': ' + item.yLabel;
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+var controller_polarArea = core_datasetController.extend({
 
+
 
+	dataElementType: elements.Arc,
 
+
 
+	linkScales: helpers$1.noop,
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var dataset = me.getDataset();
 
+		var meta = me.getMeta();
 
+		var start = me.chart.options.startAngle || 0;
 
+		var starts = me._starts = [];
 
+		var angles = me._angles = [];
 
+		var arcs = meta.data;
 
+		var i, ilen, angle;
 
+
 
+		me._updateRadius();
 
+
 
+		meta.count = me.countVisibleElements();
 
+
 
+		for (i = 0, ilen = dataset.data.length; i < ilen; i++) {
 
+			starts[i] = start;
 
+			angle = me._computeAngle(i);
 
+			angles[i] = angle;
 
+			start += angle;
 
+		}
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			arcs[i]._options = me._resolveElementOptions(arcs[i], i);
 
+			me.updateElement(arcs[i], i, reset);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_updateRadius: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var chartArea = chart.chartArea;
 
+		var opts = chart.options;
 
+		var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
 
+
 
+		chart.outerRadius = Math.max(minSize / 2, 0);
 
+		chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);
 
+		chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
 
+
 
+		me.outerRadius = chart.outerRadius - (chart.radiusLength * me.index);
 
+		me.innerRadius = me.outerRadius - chart.radiusLength;
 
+	},
 
+
 
+	updateElement: function(arc, index, reset) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = me.getDataset();
 
+		var opts = chart.options;
 
+		var animationOpts = opts.animation;
 
+		var scale = chart.scale;
 
+		var labels = chart.data.labels;
 
+
 
+		var centerX = scale.xCenter;
 
+		var centerY = scale.yCenter;
 
+
 
+		// var negHalfPI = -0.5 * Math.PI;
 
+		var datasetStartAngle = opts.startAngle;
 
+		var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
 
+		var startAngle = me._starts[index];
 
+		var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);
 
+
 
+		var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
 
+		var options = arc._options || {};
 
+
 
+		helpers$1.extend(arc, {
 
+			// Utility
 
+			_datasetIndex: me.index,
 
+			_index: index,
 
+			_scale: scale,
 
+
 
+			// Desired view properties
 
+			_model: {
 
+				backgroundColor: options.backgroundColor,
 
+				borderColor: options.borderColor,
 
+				borderWidth: options.borderWidth,
 
+				borderAlign: options.borderAlign,
 
+				x: centerX,
 
+				y: centerY,
 
+				innerRadius: 0,
 
+				outerRadius: reset ? resetRadius : distance,
 
+				startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,
 
+				endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle,
 
+				label: helpers$1.valueAtIndexOrDefault(labels, index, labels[index])
 
+			}
 
+		});
 
+
 
+		arc.pivot();
 
+	},
 
+
 
+	countVisibleElements: function() {
 
+		var dataset = this.getDataset();
 
+		var meta = this.getMeta();
 
+		var count = 0;
 
+
 
+		helpers$1.each(meta.data, function(element, index) {
 
+			if (!isNaN(dataset.data[index]) && !element.hidden) {
 
+				count++;
 
+			}
 
+		});
 
+
 
+		return count;
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(arc) {
 
+		var model = arc._model;
 
+		var options = arc._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+		var valueOrDefault = helpers$1.valueOrDefault;
 
+
 
+		arc.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(arc, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = me.getDataset();
 
+		var custom = arc.custom || {};
 
+		var options = chart.options.elements.arc;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderWidth',
 
+			'borderAlign',
 
+			'hoverBackgroundColor',
 
+			'hoverBorderColor',
 
+			'hoverBorderWidth',
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$5([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_computeAngle: function(index) {
 
+		var me = this;
 
+		var count = this.getMeta().count;
 
+		var dataset = me.getDataset();
 
+		var meta = me.getMeta();
 
+
 
+		if (isNaN(dataset.data[index]) || meta.data[index].hidden) {
 
+			return 0;
 
+		}
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: me.chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		return resolve$5([
 
+			me.chart.options.elements.arc.angle,
 
+			(2 * Math.PI) / count
 
+		], context, index);
 
+	}
 
+});
 
+
 
+core_defaults._set('pie', helpers$1.clone(core_defaults.doughnut));
 
+core_defaults._set('pie', {
 
+	cutoutPercentage: 0
 
+});
 
+
 
+// Pie charts are Doughnut chart with different defaults
 
+var controller_pie = controller_doughnut;
 
+
 
+var valueOrDefault$6 = helpers$1.valueOrDefault;
 
+var resolve$6 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('radar', {
 
+	scale: {
 
+		type: 'radialLinear'
 
+	},
 
+	elements: {
 
+		line: {
 
+			tension: 0 // no bezier in radar
 
+		}
 
+	}
 
+});
 
+
 
+var controller_radar = core_datasetController.extend({
 
+
 
+	datasetElementType: elements.Line,
 
+
 
+	dataElementType: elements.Point,
 
+
 
+	linkScales: helpers$1.noop,
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var line = meta.dataset;
 
+		var points = meta.data || [];
 
+		var scale = me.chart.scale;
 
+		var dataset = me.getDataset();
 
+		var i, ilen;
 
+
 
+		// Compatibility: If the properties are defined with only the old name, use those values
 
+		if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
 
+			dataset.lineTension = dataset.tension;
 
+		}
 
+
 
+		// Utility
 
+		line._scale = scale;
 
+		line._datasetIndex = me.index;
 
+		// Data
 
+		line._children = points;
 
+		line._loop = true;
 
+		// Model
 
+		line._model = me._resolveLineOptions(line);
 
+
 
+		line.pivot();
 
+
 
+		// Update Points
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			me.updateElement(points[i], i, reset);
 
+		}
 
+
 
+		// Update bezier control points
 
+		me.updateBezierControlPoints();
 
+
 
+		// Now pivot the point for animation
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			points[i].pivot();
 
+		}
 
+	},
 
+
 
+	updateElement: function(point, index, reset) {
 
+		var me = this;
 
+		var custom = point.custom || {};
 
+		var dataset = me.getDataset();
 
+		var scale = me.chart.scale;
 
+		var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
 
+		var options = me._resolvePointOptions(point, index);
 
+		var lineModel = me.getMeta().dataset._model;
 
+		var x = reset ? scale.xCenter : pointPosition.x;
 
+		var y = reset ? scale.yCenter : pointPosition.y;
 
+
 
+		// Utility
 
+		point._scale = scale;
 
+		point._options = options;
 
+		point._datasetIndex = me.index;
 
+		point._index = index;
 
+
 
+		// Desired view properties
 
+		point._model = {
 
+			x: x, // value not used in dataset scale, but we want a consistent API between scales
 
+			y: y,
 
+			skip: custom.skip || isNaN(x) || isNaN(y),
 
+			// Appearance
 
+			radius: options.radius,
 
+			pointStyle: options.pointStyle,
 
+			rotation: options.rotation,
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderWidth: options.borderWidth,
 
+			tension: valueOrDefault$6(custom.tension, lineModel ? lineModel.tension : 0),
 
+
 
+			// Tooltip
 
+			hitRadius: options.hitRadius
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolvePointOptions: function(element, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options.elements.point;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var ELEMENT_OPTIONS = {
 
+			backgroundColor: 'pointBackgroundColor',
 
+			borderColor: 'pointBorderColor',
 
+			borderWidth: 'pointBorderWidth',
 
+			hitRadius: 'pointHitRadius',
 
+			hoverBackgroundColor: 'pointHoverBackgroundColor',
 
+			hoverBorderColor: 'pointHoverBorderColor',
 
+			hoverBorderWidth: 'pointHoverBorderWidth',
 
+			hoverRadius: 'pointHoverRadius',
 
+			pointStyle: 'pointStyle',
 
+			radius: 'pointRadius',
 
+			rotation: 'pointRotation'
 
+		};
 
+		var keys = Object.keys(ELEMENT_OPTIONS);
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$6([
 
+				custom[key],
 
+				dataset[ELEMENT_OPTIONS[key]],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveLineOptions: function(element) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options.elements.line;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderWidth',
 
+			'borderColor',
 
+			'borderCapStyle',
 
+			'borderDash',
 
+			'borderDashOffset',
 
+			'borderJoinStyle',
 
+			'fill'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$6([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			]);
 
+		}
 
+
 
+		values.tension = valueOrDefault$6(dataset.lineTension, options.tension);
 
+
 
+		return values;
 
+	},
 
+
 
+	updateBezierControlPoints: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var area = me.chart.chartArea;
 
+		var points = meta.data || [];
 
+		var i, ilen, model, controlPoints;
 
+
 
+		function capControlPoint(pt, min, max) {
 
+			return Math.max(Math.min(pt, max), min);
 
+		}
 
+
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			model = points[i]._model;
 
+			controlPoints = helpers$1.splineCurve(
 
+				helpers$1.previousItem(points, i, true)._model,
 
+				model,
 
+				helpers$1.nextItem(points, i, true)._model,
 
+				model.tension
 
+			);
 
+
 
+			// Prevent the bezier going outside of the bounds of the graph
 
+			model.controlPointPreviousX = capControlPoint(controlPoints.previous.x, area.left, area.right);
 
+			model.controlPointPreviousY = capControlPoint(controlPoints.previous.y, area.top, area.bottom);
 
+			model.controlPointNextX = capControlPoint(controlPoints.next.x, area.left, area.right);
 
+			model.controlPointNextY = capControlPoint(controlPoints.next.y, area.top, area.bottom);
 
+		}
 
+	},
 
+
 
+	setHoverStyle: function(point) {
 
+		var model = point._model;
 
+		var options = point._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		point.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+			radius: model.radius
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$6(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$6(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$6(options.hoverBorderWidth, options.borderWidth);
 
+		model.radius = valueOrDefault$6(options.hoverRadius, options.radius);
 
+	}
 
+});
 
+
 
+core_defaults._set('scatter', {
 
+	hover: {
 
+		mode: 'single'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			id: 'x-axis-1',    // need an ID so datasets can reference the scale
 
+			type: 'linear',    // scatter should not use a category axis
 
+			position: 'bottom'
 
+		}],
 
+		yAxes: [{
 
+			id: 'y-axis-1',
 
+			type: 'linear',
 
+			position: 'left'
 
+		}]
 
+	},
 
+
 
+	showLines: false,
 
+
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				return '';     // doesn't make sense for scatter since data are formatted as a point
 
+			},
 
+			label: function(item) {
 
+				return '(' + item.xLabel + ', ' + item.yLabel + ')';
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+// Scatter charts use line controllers
 
+var controller_scatter = controller_line;
 
+
 
+// NOTE export a map in which the key represents the controller type, not
 
+// the class, and so must be CamelCase in order to be correctly retrieved
 
+// by the controller in core.controller.js (`controllers[meta.type]`).
 
+
 
+var controllers = {
 
+	bar: controller_bar,
 
+	bubble: controller_bubble,
 
+	doughnut: controller_doughnut,
 
+	horizontalBar: controller_horizontalBar,
 
+	line: controller_line,
 
+	polarArea: controller_polarArea,
 
+	pie: controller_pie,
 
+	radar: controller_radar,
 
+	scatter: controller_scatter
 
+};
 
+
 
+/**
 
+ * Helper function to get relative position for an event
 
+ * @param {Event|IEvent} event - The event to get the position for
 
+ * @param {Chart} chart - The chart
 
+ * @returns {object} the event position
 
+ */
 
+function getRelativePosition(e, chart) {
 
+	if (e.native) {
 
+		return {
 
+			x: e.x,
 
+			y: e.y
 
+		};
 
+	}
 
+
 
+	return helpers$1.getRelativePosition(e, chart);
 
+}
 
+
 
+/**
 
+ * Helper function to traverse all of the visible elements in the chart
 
+ * @param {Chart} chart - the chart
 
+ * @param {function} handler - the callback to execute for each visible item
 
+ */
 
+function parseVisibleItems(chart, handler) {
 
+	var datasets = chart.data.datasets;
 
+	var meta, i, j, ilen, jlen;
 
+
 
+	for (i = 0, ilen = datasets.length; i < ilen; ++i) {
 
+		if (!chart.isDatasetVisible(i)) {
 
+			continue;
 
+		}
 
+
 
+		meta = chart.getDatasetMeta(i);
 
+		for (j = 0, jlen = meta.data.length; j < jlen; ++j) {
 
+			var element = meta.data[j];
 
+			if (!element._view.skip) {
 
+				handler(element);
 
+			}
 
+		}
 
+	}
 
+}
 
+
 
+/**
 
+ * Helper function to get the items that intersect the event position
 
+ * @param {ChartElement[]} items - elements to filter
 
+ * @param {object} position - the point to be nearest to
 
+ * @return {ChartElement[]} the nearest items
 
+ */
 
+function getIntersectItems(chart, position) {
 
+	var elements = [];
 
+
 
+	parseVisibleItems(chart, function(element) {
 
+		if (element.inRange(position.x, position.y)) {
 
+			elements.push(element);
 
+		}
 
+	});
 
+
 
+	return elements;
 
+}
 
+
 
+/**
 
+ * Helper function to get the items nearest to the event position considering all visible items in teh chart
 
+ * @param {Chart} chart - the chart to look at elements from
 
+ * @param {object} position - the point to be nearest to
 
+ * @param {boolean} intersect - if true, only consider items that intersect the position
 
+ * @param {function} distanceMetric - function to provide the distance between points
 
+ * @return {ChartElement[]} the nearest items
 
+ */
 
+function getNearestItems(chart, position, intersect, distanceMetric) {
 
+	var minDistance = Number.POSITIVE_INFINITY;
 
+	var nearestItems = [];
 
+
 
+	parseVisibleItems(chart, function(element) {
 
+		if (intersect && !element.inRange(position.x, position.y)) {
 
+			return;
 
+		}
 
+
 
+		var center = element.getCenterPoint();
 
+		var distance = distanceMetric(position, center);
 
+		if (distance < minDistance) {
 
+			nearestItems = [element];
 
+			minDistance = distance;
 
+		} else if (distance === minDistance) {
 
+			// Can have multiple items at the same distance in which case we sort by size
 
+			nearestItems.push(element);
 
+		}
 
+	});
 
+
 
+	return nearestItems;
 
+}
 
+
 
+/**
 
+ * Get a distance metric function for two points based on the
 
+ * axis mode setting
 
+ * @param {string} axis - the axis mode. x|y|xy
 
+ */
 
+function getDistanceMetricForAxis(axis) {
 
+	var useX = axis.indexOf('x') !== -1;
 
+	var useY = axis.indexOf('y') !== -1;
 
+
 
+	return function(pt1, pt2) {
 
+		var deltaX = useX ? Math.abs(pt1.x - pt2.x) : 0;
 
+		var deltaY = useY ? Math.abs(pt1.y - pt2.y) : 0;
 
+		return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
 
+	};
 
+}
 
+
 
+function indexMode(chart, e, options) {
 
+	var position = getRelativePosition(e, chart);
 
+	// Default axis for index mode is 'x' to match old behaviour
 
+	options.axis = options.axis || 'x';
 
+	var distanceMetric = getDistanceMetricForAxis(options.axis);
 
+	var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
 
+	var elements = [];
 
+
 
+	if (!items.length) {
 
+		return [];
 
+	}
 
+
 
+	chart.data.datasets.forEach(function(dataset, datasetIndex) {
 
+		if (chart.isDatasetVisible(datasetIndex)) {
 
+			var meta = chart.getDatasetMeta(datasetIndex);
 
+			var element = meta.data[items[0]._index];
 
+
 
+			// don't count items that are skipped (null data)
 
+			if (element && !element._view.skip) {
 
+				elements.push(element);
 
+			}
 
+		}
 
+	});
 
+
 
+	return elements;
 
+}
 
+
 
+/**
 
+ * @interface IInteractionOptions
 
+ */
 
+/**
 
+ * If true, only consider items that intersect the point
 
+ * @name IInterfaceOptions#boolean
 
+ * @type Boolean
 
+ */
 
+
 
+/**
 
+ * Contains interaction related functions
 
+ * @namespace Chart.Interaction
 
+ */
 
+var core_interaction = {
 
+	// Helper function for different modes
 
+	modes: {
 
+		single: function(chart, e) {
 
+			var position = getRelativePosition(e, chart);
 
+			var elements = [];
 
+
 
+			parseVisibleItems(chart, function(element) {
 
+				if (element.inRange(position.x, position.y)) {
 
+					elements.push(element);
 
+					return elements;
 
+				}
 
+			});
 
+
 
+			return elements.slice(0, 1);
 
+		},
 
+
 
+		/**
 
+		 * @function Chart.Interaction.modes.label
 
+		 * @deprecated since version 2.4.0
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		label: indexMode,
 
+
 
+		/**
 
+		 * Returns items at the same index. If the options.intersect parameter is true, we only return items if we intersect something
 
+		 * If the options.intersect mode is false, we find the nearest item and return the items at the same index as that item
 
+		 * @function Chart.Interaction.modes.index
 
+		 * @since v2.4.0
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use during interaction
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		index: indexMode,
 
+
 
+		/**
 
+		 * Returns items in the same dataset. If the options.intersect parameter is true, we only return items if we intersect something
 
+		 * If the options.intersect is false, we find the nearest item and return the items in that dataset
 
+		 * @function Chart.Interaction.modes.dataset
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use during interaction
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		dataset: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			options.axis = options.axis || 'xy';
 
+			var distanceMetric = getDistanceMetricForAxis(options.axis);
 
+			var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
 
+
 
+			if (items.length > 0) {
 
+				items = chart.getDatasetMeta(items[0]._datasetIndex).data;
 
+			}
 
+
 
+			return items;
 
+		},
 
+
 
+		/**
 
+		 * @function Chart.Interaction.modes.x-axis
 
+		 * @deprecated since version 2.4.0. Use index mode and intersect == true
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		'x-axis': function(chart, e) {
 
+			return indexMode(chart, e, {intersect: false});
 
+		},
 
+
 
+		/**
 
+		 * Point mode returns all elements that hit test based on the event position
 
+		 * of the event
 
+		 * @function Chart.Interaction.modes.intersect
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		point: function(chart, e) {
 
+			var position = getRelativePosition(e, chart);
 
+			return getIntersectItems(chart, position);
 
+		},
 
+
 
+		/**
 
+		 * nearest mode returns the element closest to the point
 
+		 * @function Chart.Interaction.modes.intersect
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		nearest: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			options.axis = options.axis || 'xy';
 
+			var distanceMetric = getDistanceMetricForAxis(options.axis);
 
+			return getNearestItems(chart, position, options.intersect, distanceMetric);
 
+		},
 
+
 
+		/**
 
+		 * x mode returns the elements that hit-test at the current x coordinate
 
+		 * @function Chart.Interaction.modes.x
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		x: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			var items = [];
 
+			var intersectsItem = false;
 
+
 
+			parseVisibleItems(chart, function(element) {
 
+				if (element.inXRange(position.x)) {
 
+					items.push(element);
 
+				}
 
+
 
+				if (element.inRange(position.x, position.y)) {
 
+					intersectsItem = true;
 
+				}
 
+			});
 
+
 
+			// If we want to trigger on an intersect and we don't have any items
 
+			// that intersect the position, return nothing
 
+			if (options.intersect && !intersectsItem) {
 
+				items = [];
 
+			}
 
+			return items;
 
+		},
 
+
 
+		/**
 
+		 * y mode returns the elements that hit-test at the current y coordinate
 
+		 * @function Chart.Interaction.modes.y
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		y: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			var items = [];
 
+			var intersectsItem = false;
 
+
 
+			parseVisibleItems(chart, function(element) {
 
+				if (element.inYRange(position.y)) {
 
+					items.push(element);
 
+				}
 
+
 
+				if (element.inRange(position.x, position.y)) {
 
+					intersectsItem = true;
 
+				}
 
+			});
 
+
 
+			// If we want to trigger on an intersect and we don't have any items
 
+			// that intersect the position, return nothing
 
+			if (options.intersect && !intersectsItem) {
 
+				items = [];
 
+			}
 
+			return items;
 
+		}
 
+	}
 
+};
 
+
 
+function filterByPosition(array, position) {
 
+	return helpers$1.where(array, function(v) {
 
+		return v.position === position;
 
+	});
 
+}
 
+
 
+function sortByWeight(array, reverse) {
 
+	array.forEach(function(v, i) {
 
+		v._tmpIndex_ = i;
 
+		return v;
 
+	});
 
+	array.sort(function(a, b) {
 
+		var v0 = reverse ? b : a;
 
+		var v1 = reverse ? a : b;
 
+		return v0.weight === v1.weight ?
 
+			v0._tmpIndex_ - v1._tmpIndex_ :
 
+			v0.weight - v1.weight;
 
+	});
 
+	array.forEach(function(v) {
 
+		delete v._tmpIndex_;
 
+	});
 
+}
 
+
 
+function findMaxPadding(boxes) {
 
+	var top = 0;
 
+	var left = 0;
 
+	var bottom = 0;
 
+	var right = 0;
 
+	helpers$1.each(boxes, function(box) {
 
+		if (box.getPadding) {
 
+			var boxPadding = box.getPadding();
 
+			top = Math.max(top, boxPadding.top);
 
+			left = Math.max(left, boxPadding.left);
 
+			bottom = Math.max(bottom, boxPadding.bottom);
 
+			right = Math.max(right, boxPadding.right);
 
+		}
 
+	});
 
+	return {
 
+		top: top,
 
+		left: left,
 
+		bottom: bottom,
 
+		right: right
 
+	};
 
+}
 
+
 
+function addSizeByPosition(boxes, size) {
 
+	helpers$1.each(boxes, function(box) {
 
+		size[box.position] += box.isHorizontal() ? box.height : box.width;
 
+	});
 
+}
 
+
 
+core_defaults._set('global', {
 
+	layout: {
 
+		padding: {
 
+			top: 0,
 
+			right: 0,
 
+			bottom: 0,
 
+			left: 0
 
+		}
 
+	}
 
+});
 
+
 
+/**
 
+ * @interface ILayoutItem
 
+ * @prop {string} position - The position of the item in the chart layout. Possible values are
 
+ * 'left', 'top', 'right', 'bottom', and 'chartArea'
 
+ * @prop {number} weight - The weight used to sort the item. Higher weights are further away from the chart area
 
+ * @prop {boolean} fullWidth - if true, and the item is horizontal, then push vertical boxes down
 
+ * @prop {function} isHorizontal - returns true if the layout item is horizontal (ie. top or bottom)
 
+ * @prop {function} update - Takes two parameters: width and height. Returns size of item
 
+ * @prop {function} getPadding -  Returns an object with padding on the edges
 
+ * @prop {number} width - Width of item. Must be valid after update()
 
+ * @prop {number} height - Height of item. Must be valid after update()
 
+ * @prop {number} left - Left edge of the item. Set by layout system and cannot be used in update
 
+ * @prop {number} top - Top edge of the item. Set by layout system and cannot be used in update
 
+ * @prop {number} right - Right edge of the item. Set by layout system and cannot be used in update
 
+ * @prop {number} bottom - Bottom edge of the item. Set by layout system and cannot be used in update
 
+ */
 
+
 
+// The layout service is very self explanatory.  It's responsible for the layout within a chart.
 
+// Scales, Legends and Plugins all rely on the layout service and can easily register to be placed anywhere they need
 
+// It is this service's responsibility of carrying out that layout.
 
+var core_layouts = {
 
+	defaults: {},
 
+
 
+	/**
 
+	 * Register a box to a chart.
 
+	 * A box is simply a reference to an object that requires layout. eg. Scales, Legend, Title.
 
+	 * @param {Chart} chart - the chart to use
 
+	 * @param {ILayoutItem} item - the item to add to be layed out
 
+	 */
 
+	addBox: function(chart, item) {
 
+		if (!chart.boxes) {
 
+			chart.boxes = [];
 
+		}
 
+
 
+		// initialize item with default values
 
+		item.fullWidth = item.fullWidth || false;
 
+		item.position = item.position || 'top';
 
+		item.weight = item.weight || 0;
 
+
 
+		chart.boxes.push(item);
 
+	},
 
+
 
+	/**
 
+	 * Remove a layoutItem from a chart
 
+	 * @param {Chart} chart - the chart to remove the box from
 
+	 * @param {ILayoutItem} layoutItem - the item to remove from the layout
 
+	 */
 
+	removeBox: function(chart, layoutItem) {
 
+		var index = chart.boxes ? chart.boxes.indexOf(layoutItem) : -1;
 
+		if (index !== -1) {
 
+			chart.boxes.splice(index, 1);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Sets (or updates) options on the given `item`.
 
+	 * @param {Chart} chart - the chart in which the item lives (or will be added to)
 
+	 * @param {ILayoutItem} item - the item to configure with the given options
 
+	 * @param {object} options - the new item options.
 
+	 */
 
+	configure: function(chart, item, options) {
 
+		var props = ['fullWidth', 'position', 'weight'];
 
+		var ilen = props.length;
 
+		var i = 0;
 
+		var prop;
 
+
 
+		for (; i < ilen; ++i) {
 
+			prop = props[i];
 
+			if (options.hasOwnProperty(prop)) {
 
+				item[prop] = options[prop];
 
+			}
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Fits boxes of the given chart into the given size by having each box measure itself
 
+	 * then running a fitting algorithm
 
+	 * @param {Chart} chart - the chart
 
+	 * @param {number} width - the width to fit into
 
+	 * @param {number} height - the height to fit into
 
+	 */
 
+	update: function(chart, width, height) {
 
+		if (!chart) {
 
+			return;
 
+		}
 
+
 
+		var layoutOptions = chart.options.layout || {};
 
+		var padding = helpers$1.options.toPadding(layoutOptions.padding);
 
+		var leftPadding = padding.left;
 
+		var rightPadding = padding.right;
 
+		var topPadding = padding.top;
 
+		var bottomPadding = padding.bottom;
 
+
 
+		var leftBoxes = filterByPosition(chart.boxes, 'left');
 
+		var rightBoxes = filterByPosition(chart.boxes, 'right');
 
+		var topBoxes = filterByPosition(chart.boxes, 'top');
 
+		var bottomBoxes = filterByPosition(chart.boxes, 'bottom');
 
+		var chartAreaBoxes = filterByPosition(chart.boxes, 'chartArea');
 
+
 
+		// Sort boxes by weight. A higher weight is further away from the chart area
 
+		sortByWeight(leftBoxes, true);
 
+		sortByWeight(rightBoxes, false);
 
+		sortByWeight(topBoxes, true);
 
+		sortByWeight(bottomBoxes, false);
 
+
 
+		var verticalBoxes = leftBoxes.concat(rightBoxes);
 
+		var horizontalBoxes = topBoxes.concat(bottomBoxes);
 
+		var outerBoxes = verticalBoxes.concat(horizontalBoxes);
 
+
 
+		// Essentially we now have any number of boxes on each of the 4 sides.
 
+		// Our canvas looks like the following.
 
+		// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and
 
+		// B1 is the bottom axis
 
+		// There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays
 
+		// These locations are single-box locations only, when trying to register a chartArea location that is already taken,
 
+		// an error will be thrown.
 
+		//
 
+		// |----------------------------------------------------|
 
+		// |                  T1 (Full Width)                   |
 
+		// |----------------------------------------------------|
 
+		// |    |    |                 T2                  |    |
 
+		// |    |----|-------------------------------------|----|
 
+		// |    |    | C1 |                           | C2 |    |
 
+		// |    |    |----|                           |----|    |
 
+		// |    |    |                                     |    |
 
+		// | L1 | L2 |           ChartArea (C0)            | R1 |
 
+		// |    |    |                                     |    |
 
+		// |    |    |----|                           |----|    |
 
+		// |    |    | C3 |                           | C4 |    |
 
+		// |    |----|-------------------------------------|----|
 
+		// |    |    |                 B1                  |    |
 
+		// |----------------------------------------------------|
 
+		// |                  B2 (Full Width)                   |
 
+		// |----------------------------------------------------|
 
+		//
 
+		// What we do to find the best sizing, we do the following
 
+		// 1. Determine the minimum size of the chart area.
 
+		// 2. Split the remaining width equally between each vertical axis
 
+		// 3. Split the remaining height equally between each horizontal axis
 
+		// 4. Give each layout the maximum size it can be. The layout will return it's minimum size
 
+		// 5. Adjust the sizes of each axis based on it's minimum reported size.
 
+		// 6. Refit each axis
 
+		// 7. Position each axis in the final location
 
+		// 8. Tell the chart the final location of the chart area
 
+		// 9. Tell any axes that overlay the chart area the positions of the chart area
 
+
 
+		// Step 1
 
+		var chartWidth = width - leftPadding - rightPadding;
 
+		var chartHeight = height - topPadding - bottomPadding;
 
+		var chartAreaWidth = chartWidth / 2; // min 50%
 
+
 
+		// Step 2
 
+		var verticalBoxWidth = (width - chartAreaWidth) / verticalBoxes.length;
 
+
 
+		// Step 3
 
+		// TODO re-limit horizontal axis height (this limit has affected only padding calculation since PR 1837)
 
+		// var horizontalBoxHeight = (height - chartAreaHeight) / horizontalBoxes.length;
 
+
 
+		// Step 4
 
+		var maxChartAreaWidth = chartWidth;
 
+		var maxChartAreaHeight = chartHeight;
 
+		var outerBoxSizes = {top: topPadding, left: leftPadding, bottom: bottomPadding, right: rightPadding};
 
+		var minBoxSizes = [];
 
+		var maxPadding;
 
+
 
+		function getMinimumBoxSize(box) {
 
+			var minSize;
 
+			var isHorizontal = box.isHorizontal();
 
+
 
+			if (isHorizontal) {
 
+				minSize = box.update(box.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2);
 
+				maxChartAreaHeight -= minSize.height;
 
+			} else {
 
+				minSize = box.update(verticalBoxWidth, maxChartAreaHeight);
 
+				maxChartAreaWidth -= minSize.width;
 
+			}
 
+
 
+			minBoxSizes.push({
 
+				horizontal: isHorizontal,
 
+				width: minSize.width,
 
+				box: box,
 
+			});
 
+		}
 
+
 
+		helpers$1.each(outerBoxes, getMinimumBoxSize);
 
+
 
+		// If a horizontal box has padding, we move the left boxes over to avoid ugly charts (see issue #2478)
 
+		maxPadding = findMaxPadding(outerBoxes);
 
+
 
+		// At this point, maxChartAreaHeight and maxChartAreaWidth are the size the chart area could
 
+		// be if the axes are drawn at their minimum sizes.
 
+		// Steps 5 & 6
 
+
 
+		// Function to fit a box
 
+		function fitBox(box) {
 
+			var minBoxSize = helpers$1.findNextWhere(minBoxSizes, function(minBox) {
 
+				return minBox.box === box;
 
+			});
 
+
 
+			if (minBoxSize) {
 
+				if (minBoxSize.horizontal) {
 
+					var scaleMargin = {
 
+						left: Math.max(outerBoxSizes.left, maxPadding.left),
 
+						right: Math.max(outerBoxSizes.right, maxPadding.right),
 
+						top: 0,
 
+						bottom: 0
 
+					};
 
+
 
+					// Don't use min size here because of label rotation. When the labels are rotated, their rotation highly depends
 
+					// on the margin. Sometimes they need to increase in size slightly
 
+					box.update(box.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2, scaleMargin);
 
+				} else {
 
+					box.update(minBoxSize.width, maxChartAreaHeight);
 
+				}
 
+			}
 
+		}
 
+
 
+		// Update, and calculate the left and right margins for the horizontal boxes
 
+		helpers$1.each(verticalBoxes, fitBox);
 
+		addSizeByPosition(verticalBoxes, outerBoxSizes);
 
+
 
+		// Set the Left and Right margins for the horizontal boxes
 
+		helpers$1.each(horizontalBoxes, fitBox);
 
+		addSizeByPosition(horizontalBoxes, outerBoxSizes);
 
+
 
+		function finalFitVerticalBox(box) {
 
+			var minBoxSize = helpers$1.findNextWhere(minBoxSizes, function(minSize) {
 
+				return minSize.box === box;
 
+			});
 
+
 
+			var scaleMargin = {
 
+				left: 0,
 
+				right: 0,
 
+				top: outerBoxSizes.top,
 
+				bottom: outerBoxSizes.bottom
 
+			};
 
+
 
+			if (minBoxSize) {
 
+				box.update(minBoxSize.width, maxChartAreaHeight, scaleMargin);
 
+			}
 
+		}
 
+
 
+		// Let the left layout know the final margin
 
+		helpers$1.each(verticalBoxes, finalFitVerticalBox);
 
+
 
+		// Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
 
+		outerBoxSizes = {top: topPadding, left: leftPadding, bottom: bottomPadding, right: rightPadding};
 
+		addSizeByPosition(outerBoxes, outerBoxSizes);
 
+
 
+		// We may be adding some padding to account for rotated x axis labels
 
+		var leftPaddingAddition = Math.max(maxPadding.left - outerBoxSizes.left, 0);
 
+		outerBoxSizes.left += leftPaddingAddition;
 
+		outerBoxSizes.right += Math.max(maxPadding.right - outerBoxSizes.right, 0);
 
+
 
+		var topPaddingAddition = Math.max(maxPadding.top - outerBoxSizes.top, 0);
 
+		outerBoxSizes.top += topPaddingAddition;
 
+		outerBoxSizes.bottom += Math.max(maxPadding.bottom - outerBoxSizes.bottom, 0);
 
+
 
+		// Figure out if our chart area changed. This would occur if the dataset layout label rotation
 
+		// changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do
 
+		// without calling `fit` again
 
+		var newMaxChartAreaHeight = height - outerBoxSizes.top - outerBoxSizes.bottom;
 
+		var newMaxChartAreaWidth = width - outerBoxSizes.left - outerBoxSizes.right;
 
+
 
+		if (newMaxChartAreaWidth !== maxChartAreaWidth || newMaxChartAreaHeight !== maxChartAreaHeight) {
 
+			helpers$1.each(verticalBoxes, function(box) {
 
+				box.height = newMaxChartAreaHeight;
 
+			});
 
+
 
+			helpers$1.each(horizontalBoxes, function(box) {
 
+				if (!box.fullWidth) {
 
+					box.width = newMaxChartAreaWidth;
 
+				}
 
+			});
 
+
 
+			maxChartAreaHeight = newMaxChartAreaHeight;
 
+			maxChartAreaWidth = newMaxChartAreaWidth;
 
+		}
 
+
 
+		// Step 7 - Position the boxes
 
+		var left = leftPadding + leftPaddingAddition;
 
+		var top = topPadding + topPaddingAddition;
 
+
 
+		function placeBox(box) {
 
+			if (box.isHorizontal()) {
 
+				box.left = box.fullWidth ? leftPadding : outerBoxSizes.left;
 
+				box.right = box.fullWidth ? width - rightPadding : outerBoxSizes.left + maxChartAreaWidth;
 
+				box.top = top;
 
+				box.bottom = top + box.height;
 
+
 
+				// Move to next point
 
+				top = box.bottom;
 
+
 
+			} else {
 
+
 
+				box.left = left;
 
+				box.right = left + box.width;
 
+				box.top = outerBoxSizes.top;
 
+				box.bottom = outerBoxSizes.top + maxChartAreaHeight;
 
+
 
+				// Move to next point
 
+				left = box.right;
 
+			}
 
+		}
 
+
 
+		helpers$1.each(leftBoxes.concat(topBoxes), placeBox);
 
+
 
+		// Account for chart width and height
 
+		left += maxChartAreaWidth;
 
+		top += maxChartAreaHeight;
 
+
 
+		helpers$1.each(rightBoxes, placeBox);
 
+		helpers$1.each(bottomBoxes, placeBox);
 
+
 
+		// Step 8
 
+		chart.chartArea = {
 
+			left: outerBoxSizes.left,
 
+			top: outerBoxSizes.top,
 
+			right: outerBoxSizes.left + maxChartAreaWidth,
 
+			bottom: outerBoxSizes.top + maxChartAreaHeight
 
+		};
 
+
 
+		// Step 9
 
+		helpers$1.each(chartAreaBoxes, function(box) {
 
+			box.left = chart.chartArea.left;
 
+			box.top = chart.chartArea.top;
 
+			box.right = chart.chartArea.right;
 
+			box.bottom = chart.chartArea.bottom;
 
+
 
+			box.update(maxChartAreaWidth, maxChartAreaHeight);
 
+		});
 
+	}
 
+};
 
+
 
+/**
 
+ * Platform fallback implementation (minimal).
 
+ * @see https://github.com/chartjs/Chart.js/pull/4591#issuecomment-319575939
 
+ */
 
+
 
+var platform_basic = {
 
+	acquireContext: function(item) {
 
+		if (item && item.canvas) {
 
+			// Support for any object associated to a canvas (including a context2d)
 
+			item = item.canvas;
 
+		}
 
+
 
+		return item && item.getContext('2d') || null;
 
+	}
 
+};
 
+
 
+var platform_dom = "/*\n * DOM element rendering detection\n * https://davidwalsh.name/detect-node-insertion\n */\n@keyframes chartjs-render-animation {\n\tfrom { opacity: 0.99; }\n\tto { opacity: 1; }\n}\n\n.chartjs-render-monitor {\n\tanimation: chartjs-render-animation 0.001s;\n}\n\n/*\n * DOM element resizing detection\n * https://github.com/marcj/css-element-queries\n */\n.chartjs-size-monitor,\n.chartjs-size-monitor-expand,\n.chartjs-size-monitor-shrink {\n\tposition: absolute;\n\tdirection: ltr;\n\tleft: 0;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n\tvisibility: hidden;\n\tz-index: -1;\n}\n\n.chartjs-size-monitor-expand > div {\n\tposition: absolute;\n\twidth: 1000000px;\n\theight: 1000000px;\n\tleft: 0;\n\ttop: 0;\n}\n\n.chartjs-size-monitor-shrink > div {\n\tposition: absolute;\n\twidth: 200%;\n\theight: 200%;\n\tleft: 0;\n\ttop: 0;\n}\n";
 
+
 
+var platform_dom$1 = /*#__PURE__*/Object.freeze({
 
+default: platform_dom
 
+});
 
+
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+
 
+function commonjsRequire () {
 
+	throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs');
 
+}
 
+
 
+function createCommonjsModule(fn, module) {
 
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
 
+}
 
+
 
+function getCjsExportFromNamespace (n) {
 
+	return n && n.default || n;
 
+}
 
+
 
+var stylesheet = getCjsExportFromNamespace(platform_dom$1);
 
+
 
+var EXPANDO_KEY = '$chartjs';
 
+var CSS_PREFIX = 'chartjs-';
 
+var CSS_SIZE_MONITOR = CSS_PREFIX + 'size-monitor';
 
+var CSS_RENDER_MONITOR = CSS_PREFIX + 'render-monitor';
 
+var CSS_RENDER_ANIMATION = CSS_PREFIX + 'render-animation';
 
+var ANIMATION_START_EVENTS = ['animationstart', 'webkitAnimationStart'];
 
+
 
+/**
 
+ * DOM event types -> Chart.js event types.
 
+ * Note: only events with different types are mapped.
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/Events
 
+ */
 
+var EVENT_TYPES = {
 
+	touchstart: 'mousedown',
 
+	touchmove: 'mousemove',
 
+	touchend: 'mouseup',
 
+	pointerenter: 'mouseenter',
 
+	pointerdown: 'mousedown',
 
+	pointermove: 'mousemove',
 
+	pointerup: 'mouseup',
 
+	pointerleave: 'mouseout',
 
+	pointerout: 'mouseout'
 
+};
 
+
 
+/**
 
+ * The "used" size is the final value of a dimension property after all calculations have
 
+ * been performed. This method uses the computed style of `element` but returns undefined
 
+ * if the computed style is not expressed in pixels. That can happen in some cases where
 
+ * `element` has a size relative to its parent and this last one is not yet displayed,
 
+ * for example because of `display: none` on a parent node.
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/used_value
 
+ * @returns {number} Size in pixels or undefined if unknown.
 
+ */
 
+function readUsedSize(element, property) {
 
+	var value = helpers$1.getStyle(element, property);
 
+	var matches = value && value.match(/^(\d+)(\.\d+)?px$/);
 
+	return matches ? Number(matches[1]) : undefined;
 
+}
 
+
 
+/**
 
+ * Initializes the canvas style and render size without modifying the canvas display size,
 
+ * since responsiveness is handled by the controller.resize() method. The config is used
 
+ * to determine the aspect ratio to apply in case no explicit height has been specified.
 
+ */
 
+function initCanvas(canvas, config) {
 
+	var style = canvas.style;
 
+
 
+	// NOTE(SB) canvas.getAttribute('width') !== canvas.width: in the first case it
 
+	// returns null or '' if no explicit value has been set to the canvas attribute.
 
+	var renderHeight = canvas.getAttribute('height');
 
+	var renderWidth = canvas.getAttribute('width');
 
+
 
+	// Chart.js modifies some canvas values that we want to restore on destroy
 
+	canvas[EXPANDO_KEY] = {
 
+		initial: {
 
+			height: renderHeight,
 
+			width: renderWidth,
 
+			style: {
 
+				display: style.display,
 
+				height: style.height,
 
+				width: style.width
 
+			}
 
+		}
 
+	};
 
+
 
+	// Force canvas to display as block to avoid extra space caused by inline
 
+	// elements, which would interfere with the responsive resize process.
 
+	// https://github.com/chartjs/Chart.js/issues/2538
 
+	style.display = style.display || 'block';
 
+
 
+	if (renderWidth === null || renderWidth === '') {
 
+		var displayWidth = readUsedSize(canvas, 'width');
 
+		if (displayWidth !== undefined) {
 
+			canvas.width = displayWidth;
 
+		}
 
+	}
 
+
 
+	if (renderHeight === null || renderHeight === '') {
 
+		if (canvas.style.height === '') {
 
+			// If no explicit render height and style height, let's apply the aspect ratio,
 
+			// which one can be specified by the user but also by charts as default option
 
+			// (i.e. options.aspectRatio). If not specified, use canvas aspect ratio of 2.
 
+			canvas.height = canvas.width / (config.options.aspectRatio || 2);
 
+		} else {
 
+			var displayHeight = readUsedSize(canvas, 'height');
 
+			if (displayWidth !== undefined) {
 
+				canvas.height = displayHeight;
 
+			}
 
+		}
 
+	}
 
+
 
+	return canvas;
 
+}
 
+
 
+/**
 
+ * Detects support for options object argument in addEventListener.
 
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
 
+ * @private
 
+ */
 
+var supportsEventListenerOptions = (function() {
 
+	var supports = false;
 
+	try {
 
+		var options = Object.defineProperty({}, 'passive', {
 
+			// eslint-disable-next-line getter-return
 
+			get: function() {
 
+				supports = true;
 
+			}
 
+		});
 
+		window.addEventListener('e', null, options);
 
+	} catch (e) {
 
+		// continue regardless of error
 
+	}
 
+	return supports;
 
+}());
 
+
 
+// Default passive to true as expected by Chrome for 'touchstart' and 'touchend' events.
 
+// https://github.com/chartjs/Chart.js/issues/4287
 
+var eventListenerOptions = supportsEventListenerOptions ? {passive: true} : false;
 
+
 
+function addListener(node, type, listener) {
 
+	node.addEventListener(type, listener, eventListenerOptions);
 
+}
 
+
 
+function removeListener(node, type, listener) {
 
+	node.removeEventListener(type, listener, eventListenerOptions);
 
+}
 
+
 
+function createEvent(type, chart, x, y, nativeEvent) {
 
+	return {
 
+		type: type,
 
+		chart: chart,
 
+		native: nativeEvent || null,
 
+		x: x !== undefined ? x : null,
 
+		y: y !== undefined ? y : null,
 
+	};
 
+}
 
+
 
+function fromNativeEvent(event, chart) {
 
+	var type = EVENT_TYPES[event.type] || event.type;
 
+	var pos = helpers$1.getRelativePosition(event, chart);
 
+	return createEvent(type, chart, pos.x, pos.y, event);
 
+}
 
+
 
+function throttled(fn, thisArg) {
 
+	var ticking = false;
 
+	var args = [];
 
+
 
+	return function() {
 
+		args = Array.prototype.slice.call(arguments);
 
+		thisArg = thisArg || this;
 
+
 
+		if (!ticking) {
 
+			ticking = true;
 
+			helpers$1.requestAnimFrame.call(window, function() {
 
+				ticking = false;
 
+				fn.apply(thisArg, args);
 
+			});
 
+		}
 
+	};
 
+}
 
+
 
+function createDiv(cls) {
 
+	var el = document.createElement('div');
 
+	el.className = cls || '';
 
+	return el;
 
+}
 
+
 
+// Implementation based on https://github.com/marcj/css-element-queries
 
+function createResizer(handler) {
 
+	var maxSize = 1000000;
 
+
 
+	// NOTE(SB) Don't use innerHTML because it could be considered unsafe.
 
+	// https://github.com/chartjs/Chart.js/issues/5902
 
+	var resizer = createDiv(CSS_SIZE_MONITOR);
 
+	var expand = createDiv(CSS_SIZE_MONITOR + '-expand');
 
+	var shrink = createDiv(CSS_SIZE_MONITOR + '-shrink');
 
+
 
+	expand.appendChild(createDiv());
 
+	shrink.appendChild(createDiv());
 
+
 
+	resizer.appendChild(expand);
 
+	resizer.appendChild(shrink);
 
+	resizer._reset = function() {
 
+		expand.scrollLeft = maxSize;
 
+		expand.scrollTop = maxSize;
 
+		shrink.scrollLeft = maxSize;
 
+		shrink.scrollTop = maxSize;
 
+	};
 
+
 
+	var onScroll = function() {
 
+		resizer._reset();
 
+		handler();
 
+	};
 
+
 
+	addListener(expand, 'scroll', onScroll.bind(expand, 'expand'));
 
+	addListener(shrink, 'scroll', onScroll.bind(shrink, 'shrink'));
 
+
 
+	return resizer;
 
+}
 
+
 
+// https://davidwalsh.name/detect-node-insertion
 
+function watchForRender(node, handler) {
 
+	var expando = node[EXPANDO_KEY] || (node[EXPANDO_KEY] = {});
 
+	var proxy = expando.renderProxy = function(e) {
 
+		if (e.animationName === CSS_RENDER_ANIMATION) {
 
+			handler();
 
+		}
 
+	};
 
+
 
+	helpers$1.each(ANIMATION_START_EVENTS, function(type) {
 
+		addListener(node, type, proxy);
 
+	});
 
+
 
+	// #4737: Chrome might skip the CSS animation when the CSS_RENDER_MONITOR class
 
+	// is removed then added back immediately (same animation frame?). Accessing the
 
+	// `offsetParent` property will force a reflow and re-evaluate the CSS animation.
 
+	// https://gist.github.com/paulirish/5d52fb081b3570c81e3a#box-metrics
 
+	// https://github.com/chartjs/Chart.js/issues/4737
 
+	expando.reflow = !!node.offsetParent;
 
+
 
+	node.classList.add(CSS_RENDER_MONITOR);
 
+}
 
+
 
+function unwatchForRender(node) {
 
+	var expando = node[EXPANDO_KEY] || {};
 
+	var proxy = expando.renderProxy;
 
+
 
+	if (proxy) {
 
+		helpers$1.each(ANIMATION_START_EVENTS, function(type) {
 
+			removeListener(node, type, proxy);
 
+		});
 
+
 
+		delete expando.renderProxy;
 
+	}
 
+
 
+	node.classList.remove(CSS_RENDER_MONITOR);
 
+}
 
+
 
+function addResizeListener(node, listener, chart) {
 
+	var expando = node[EXPANDO_KEY] || (node[EXPANDO_KEY] = {});
 
+
 
+	// Let's keep track of this added resizer and thus avoid DOM query when removing it.
 
+	var resizer = expando.resizer = createResizer(throttled(function() {
 
+		if (expando.resizer) {
 
+			var container = chart.options.maintainAspectRatio && node.parentNode;
 
+			var w = container ? container.clientWidth : 0;
 
+			listener(createEvent('resize', chart));
 
+			if (container && container.clientWidth < w && chart.canvas) {
 
+				// If the container size shrank during chart resize, let's assume
 
+				// scrollbar appeared. So we resize again with the scrollbar visible -
 
+				// effectively making chart smaller and the scrollbar hidden again.
 
+				// Because we are inside `throttled`, and currently `ticking`, scroll
 
+				// events are ignored during this whole 2 resize process.
 
+				// If we assumed wrong and something else happened, we are resizing
 
+				// twice in a frame (potential performance issue)
 
+				listener(createEvent('resize', chart));
 
+			}
 
+		}
 
+	}));
 
+
 
+	// The resizer needs to be attached to the node parent, so we first need to be
 
+	// sure that `node` is attached to the DOM before injecting the resizer element.
 
+	watchForRender(node, function() {
 
+		if (expando.resizer) {
 
+			var container = node.parentNode;
 
+			if (container && container !== resizer.parentNode) {
 
+				container.insertBefore(resizer, container.firstChild);
 
+			}
 
+
 
+			// The container size might have changed, let's reset the resizer state.
 
+			resizer._reset();
 
+		}
 
+	});
 
+}
 
+
 
+function removeResizeListener(node) {
 
+	var expando = node[EXPANDO_KEY] || {};
 
+	var resizer = expando.resizer;
 
+
 
+	delete expando.resizer;
 
+	unwatchForRender(node);
 
+
 
+	if (resizer && resizer.parentNode) {
 
+		resizer.parentNode.removeChild(resizer);
 
+	}
 
+}
 
+
 
+function injectCSS(platform, css) {
 
+	// https://stackoverflow.com/q/3922139
 
+	var style = platform._style || document.createElement('style');
 
+	if (!platform._style) {
 
+		platform._style = style;
 
+		css = '/* Chart.js */\n' + css;
 
+		style.setAttribute('type', 'text/css');
 
+		document.getElementsByTagName('head')[0].appendChild(style);
 
+	}
 
+
 
+	style.appendChild(document.createTextNode(css));
 
+}
 
+
 
+var platform_dom$2 = {
 
+	/**
 
+	 * When `true`, prevents the automatic injection of the stylesheet required to
 
+	 * correctly detect when the chart is added to the DOM and then resized. This
 
+	 * switch has been added to allow external stylesheet (`dist/Chart(.min)?.js`)
 
+	 * to be manually imported to make this library compatible with any CSP.
 
+	 * See https://github.com/chartjs/Chart.js/issues/5208
 
+	 */
 
+	disableCSSInjection: false,
 
+
 
+	/**
 
+	 * This property holds whether this platform is enabled for the current environment.
 
+	 * Currently used by platform.js to select the proper implementation.
 
+	 * @private
 
+	 */
 
+	_enabled: typeof window !== 'undefined' && typeof document !== 'undefined',
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_ensureLoaded: function() {
 
+		if (this._loaded) {
 
+			return;
 
+		}
 
+
 
+		this._loaded = true;
 
+
 
+		// https://github.com/chartjs/Chart.js/issues/5208
 
+		if (!this.disableCSSInjection) {
 
+			injectCSS(this, stylesheet);
 
+		}
 
+	},
 
+
 
+	acquireContext: function(item, config) {
 
+		if (typeof item === 'string') {
 
+			item = document.getElementById(item);
 
+		} else if (item.length) {
 
+			// Support for array based queries (such as jQuery)
 
+			item = item[0];
 
+		}
 
+
 
+		if (item && item.canvas) {
 
+			// Support for any object associated to a canvas (including a context2d)
 
+			item = item.canvas;
 
+		}
 
+
 
+		// To prevent canvas fingerprinting, some add-ons undefine the getContext
 
+		// method, for example: https://github.com/kkapsner/CanvasBlocker
 
+		// https://github.com/chartjs/Chart.js/issues/2807
 
+		var context = item && item.getContext && item.getContext('2d');
 
+
 
+		// Load platform resources on first chart creation, to make possible to change
 
+		// platform options after importing the library (e.g. `disableCSSInjection`).
 
+		this._ensureLoaded();
 
+
 
+		// `instanceof HTMLCanvasElement/CanvasRenderingContext2D` fails when the item is
 
+		// inside an iframe or when running in a protected environment. We could guess the
 
+		// types from their toString() value but let's keep things flexible and assume it's
 
+		// a sufficient condition if the item has a context2D which has item as `canvas`.
 
+		// https://github.com/chartjs/Chart.js/issues/3887
 
+		// https://github.com/chartjs/Chart.js/issues/4102
 
+		// https://github.com/chartjs/Chart.js/issues/4152
 
+		if (context && context.canvas === item) {
 
+			initCanvas(item, config);
 
+			return context;
 
+		}
 
+
 
+		return null;
 
+	},
 
+
 
+	releaseContext: function(context) {
 
+		var canvas = context.canvas;
 
+		if (!canvas[EXPANDO_KEY]) {
 
+			return;
 
+		}
 
+
 
+		var initial = canvas[EXPANDO_KEY].initial;
 
+		['height', 'width'].forEach(function(prop) {
 
+			var value = initial[prop];
 
+			if (helpers$1.isNullOrUndef(value)) {
 
+				canvas.removeAttribute(prop);
 
+			} else {
 
+				canvas.setAttribute(prop, value);
 
+			}
 
+		});
 
+
 
+		helpers$1.each(initial.style || {}, function(value, key) {
 
+			canvas.style[key] = value;
 
+		});
 
+
 
+		// The canvas render size might have been changed (and thus the state stack discarded),
 
+		// we can't use save() and restore() to restore the initial state. So make sure that at
 
+		// least the canvas context is reset to the default state by setting the canvas width.
 
+		// https://www.w3.org/TR/2011/WD-html5-20110525/the-canvas-element.html
 
+		// eslint-disable-next-line no-self-assign
 
+		canvas.width = canvas.width;
 
+
 
+		delete canvas[EXPANDO_KEY];
 
+	},
 
+
 
+	addEventListener: function(chart, type, listener) {
 
+		var canvas = chart.canvas;
 
+		if (type === 'resize') {
 
+			// Note: the resize event is not supported on all browsers.
 
+			addResizeListener(canvas, listener, chart);
 
+			return;
 
+		}
 
+
 
+		var expando = listener[EXPANDO_KEY] || (listener[EXPANDO_KEY] = {});
 
+		var proxies = expando.proxies || (expando.proxies = {});
 
+		var proxy = proxies[chart.id + '_' + type] = function(event) {
 
+			listener(fromNativeEvent(event, chart));
 
+		};
 
+
 
+		addListener(canvas, type, proxy);
 
+	},
 
+
 
+	removeEventListener: function(chart, type, listener) {
 
+		var canvas = chart.canvas;
 
+		if (type === 'resize') {
 
+			// Note: the resize event is not supported on all browsers.
 
+			removeResizeListener(canvas);
 
+			return;
 
+		}
 
+
 
+		var expando = listener[EXPANDO_KEY] || {};
 
+		var proxies = expando.proxies || {};
 
+		var proxy = proxies[chart.id + '_' + type];
 
+		if (!proxy) {
 
+			return;
 
+		}
 
+
 
+		removeListener(canvas, type, proxy);
 
+	}
 
+};
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use EventTarget.addEventListener instead.
 
+ * EventTarget.addEventListener compatibility: Chrome, Opera 7, Safari, FF1.5+, IE9+
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 
+ * @function Chart.helpers.addEvent
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.addEvent = addListener;
 
+
 
+/**
 
+ * Provided for backward compatibility, use EventTarget.removeEventListener instead.
 
+ * EventTarget.removeEventListener compatibility: Chrome, Opera 7, Safari, FF1.5+, IE9+
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
 
+ * @function Chart.helpers.removeEvent
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.removeEvent = removeListener;
 
+
 
+// @TODO Make possible to select another platform at build time.
 
+var implementation = platform_dom$2._enabled ? platform_dom$2 : platform_basic;
 
+
 
+/**
 
+ * @namespace Chart.platform
 
+ * @see https://chartjs.gitbooks.io/proposals/content/Platform.html
 
+ * @since 2.4.0
 
+ */
 
+var platform = helpers$1.extend({
 
+	/**
 
+	 * @since 2.7.0
 
+	 */
 
+	initialize: function() {},
 
+
 
+	/**
 
+	 * Called at chart construction time, returns a context2d instance implementing
 
+	 * the [W3C Canvas 2D Context API standard]{@link https://www.w3.org/TR/2dcontext/}.
 
+	 * @param {*} item - The native item from which to acquire context (platform specific)
 
+	 * @param {object} options - The chart options
 
+	 * @returns {CanvasRenderingContext2D} context2d instance
 
+	 */
 
+	acquireContext: function() {},
 
+
 
+	/**
 
+	 * Called at chart destruction time, releases any resources associated to the context
 
+	 * previously returned by the acquireContext() method.
 
+	 * @param {CanvasRenderingContext2D} context - The context2d instance
 
+	 * @returns {boolean} true if the method succeeded, else false
 
+	 */
 
+	releaseContext: function() {},
 
+
 
+	/**
 
+	 * Registers the specified listener on the given chart.
 
+	 * @param {Chart} chart - Chart from which to listen for event
 
+	 * @param {string} type - The ({@link IEvent}) type to listen for
 
+	 * @param {function} listener - Receives a notification (an object that implements
 
+	 * the {@link IEvent} interface) when an event of the specified type occurs.
 
+	 */
 
+	addEventListener: function() {},
 
+
 
+	/**
 
+	 * Removes the specified listener previously registered with addEventListener.
 
+	 * @param {Chart} chart - Chart from which to remove the listener
 
+	 * @param {string} type - The ({@link IEvent}) type to remove
 
+	 * @param {function} listener - The listener function to remove from the event target.
 
+	 */
 
+	removeEventListener: function() {}
 
+
 
+}, implementation);
 
+
 
+core_defaults._set('global', {
 
+	plugins: {}
 
+});
 
+
 
+/**
 
+ * The plugin service singleton
 
+ * @namespace Chart.plugins
 
+ * @since 2.1.0
 
+ */
 
+var core_plugins = {
 
+	/**
 
+	 * Globally registered plugins.
 
+	 * @private
 
+	 */
 
+	_plugins: [],
 
+
 
+	/**
 
+	 * This identifier is used to invalidate the descriptors cache attached to each chart
 
+	 * when a global plugin is registered or unregistered. In this case, the cache ID is
 
+	 * incremented and descriptors are regenerated during following API calls.
 
+	 * @private
 
+	 */
 
+	_cacheId: 0,
 
+
 
+	/**
 
+	 * Registers the given plugin(s) if not already registered.
 
+	 * @param {IPlugin[]|IPlugin} plugins plugin instance(s).
 
+	 */
 
+	register: function(plugins) {
 
+		var p = this._plugins;
 
+		([]).concat(plugins).forEach(function(plugin) {
 
+			if (p.indexOf(plugin) === -1) {
 
+				p.push(plugin);
 
+			}
 
+		});
 
+
 
+		this._cacheId++;
 
+	},
 
+
 
+	/**
 
+	 * Unregisters the given plugin(s) only if registered.
 
+	 * @param {IPlugin[]|IPlugin} plugins plugin instance(s).
 
+	 */
 
+	unregister: function(plugins) {
 
+		var p = this._plugins;
 
+		([]).concat(plugins).forEach(function(plugin) {
 
+			var idx = p.indexOf(plugin);
 
+			if (idx !== -1) {
 
+				p.splice(idx, 1);
 
+			}
 
+		});
 
+
 
+		this._cacheId++;
 
+	},
 
+
 
+	/**
 
+	 * Remove all registered plugins.
 
+	 * @since 2.1.5
 
+	 */
 
+	clear: function() {
 
+		this._plugins = [];
 
+		this._cacheId++;
 
+	},
 
+
 
+	/**
 
+	 * Returns the number of registered plugins?
 
+	 * @returns {number}
 
+	 * @since 2.1.5
 
+	 */
 
+	count: function() {
 
+		return this._plugins.length;
 
+	},
 
+
 
+	/**
 
+	 * Returns all registered plugin instances.
 
+	 * @returns {IPlugin[]} array of plugin objects.
 
+	 * @since 2.1.5
 
+	 */
 
+	getAll: function() {
 
+		return this._plugins;
 
+	},
 
+
 
+	/**
 
+	 * Calls enabled plugins for `chart` on the specified hook and with the given args.
 
+	 * This method immediately returns as soon as a plugin explicitly returns false. The
 
+	 * returned value can be used, for instance, to interrupt the current action.
 
+	 * @param {Chart} chart - The chart instance for which plugins should be called.
 
+	 * @param {string} hook - The name of the plugin method to call (e.g. 'beforeUpdate').
 
+	 * @param {Array} [args] - Extra arguments to apply to the hook call.
 
+	 * @returns {boolean} false if any of the plugins return false, else returns true.
 
+	 */
 
+	notify: function(chart, hook, args) {
 
+		var descriptors = this.descriptors(chart);
 
+		var ilen = descriptors.length;
 
+		var i, descriptor, plugin, params, method;
 
+
 
+		for (i = 0; i < ilen; ++i) {
 
+			descriptor = descriptors[i];
 
+			plugin = descriptor.plugin;
 
+			method = plugin[hook];
 
+			if (typeof method === 'function') {
 
+				params = [chart].concat(args || []);
 
+				params.push(descriptor.options);
 
+				if (method.apply(plugin, params) === false) {
 
+					return false;
 
+				}
 
+			}
 
+		}
 
+
 
+		return true;
 
+	},
 
+
 
+	/**
 
+	 * Returns descriptors of enabled plugins for the given chart.
 
+	 * @returns {object[]} [{ plugin, options }]
 
+	 * @private
 
+	 */
 
+	descriptors: function(chart) {
 
+		var cache = chart.$plugins || (chart.$plugins = {});
 
+		if (cache.id === this._cacheId) {
 
+			return cache.descriptors;
 
+		}
 
+
 
+		var plugins = [];
 
+		var descriptors = [];
 
+		var config = (chart && chart.config) || {};
 
+		var options = (config.options && config.options.plugins) || {};
 
+
 
+		this._plugins.concat(config.plugins || []).forEach(function(plugin) {
 
+			var idx = plugins.indexOf(plugin);
 
+			if (idx !== -1) {
 
+				return;
 
+			}
 
+
 
+			var id = plugin.id;
 
+			var opts = options[id];
 
+			if (opts === false) {
 
+				return;
 
+			}
 
+
 
+			if (opts === true) {
 
+				opts = helpers$1.clone(core_defaults.global.plugins[id]);
 
+			}
 
+
 
+			plugins.push(plugin);
 
+			descriptors.push({
 
+				plugin: plugin,
 
+				options: opts || {}
 
+			});
 
+		});
 
+
 
+		cache.descriptors = descriptors;
 
+		cache.id = this._cacheId;
 
+		return descriptors;
 
+	},
 
+
 
+	/**
 
+	 * Invalidates cache for the given chart: descriptors hold a reference on plugin option,
 
+	 * but in some cases, this reference can be changed by the user when updating options.
 
+	 * https://github.com/chartjs/Chart.js/issues/5111#issuecomment-355934167
 
+	 * @private
 
+	 */
 
+	_invalidate: function(chart) {
 
+		delete chart.$plugins;
 
+	}
 
+};
 
+
 
+var core_scaleService = {
 
+	// Scale registration object. Extensions can register new scale types (such as log or DB scales) and then
 
+	// use the new chart options to grab the correct scale
 
+	constructors: {},
 
+	// Use a registration function so that we can move to an ES6 map when we no longer need to support
 
+	// old browsers
 
+
 
+	// Scale config defaults
 
+	defaults: {},
 
+	registerScaleType: function(type, scaleConstructor, scaleDefaults) {
 
+		this.constructors[type] = scaleConstructor;
 
+		this.defaults[type] = helpers$1.clone(scaleDefaults);
 
+	},
 
+	getScaleConstructor: function(type) {
 
+		return this.constructors.hasOwnProperty(type) ? this.constructors[type] : undefined;
 
+	},
 
+	getScaleDefaults: function(type) {
 
+		// Return the scale defaults merged with the global settings so that we always use the latest ones
 
+		return this.defaults.hasOwnProperty(type) ? helpers$1.merge({}, [core_defaults.scale, this.defaults[type]]) : {};
 
+	},
 
+	updateScaleDefaults: function(type, additions) {
 
+		var me = this;
 
+		if (me.defaults.hasOwnProperty(type)) {
 
+			me.defaults[type] = helpers$1.extend(me.defaults[type], additions);
 
+		}
 
+	},
 
+	addScalesToLayout: function(chart) {
 
+		// Adds each scale to the chart.boxes array to be sized accordingly
 
+		helpers$1.each(chart.scales, function(scale) {
 
+			// Set ILayoutItem parameters for backwards compatibility
 
+			scale.fullWidth = scale.options.fullWidth;
 
+			scale.position = scale.options.position;
 
+			scale.weight = scale.options.weight;
 
+			core_layouts.addBox(chart, scale);
 
+		});
 
+	}
 
+};
 
+
 
+var valueOrDefault$7 = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('global', {
 
+	tooltips: {
 
+		enabled: true,
 
+		custom: null,
 
+		mode: 'nearest',
 
+		position: 'average',
 
+		intersect: true,
 
+		backgroundColor: 'rgba(0,0,0,0.8)',
 
+		titleFontStyle: 'bold',
 
+		titleSpacing: 2,
 
+		titleMarginBottom: 6,
 
+		titleFontColor: '#fff',
 
+		titleAlign: 'left',
 
+		bodySpacing: 2,
 
+		bodyFontColor: '#fff',
 
+		bodyAlign: 'left',
 
+		footerFontStyle: 'bold',
 
+		footerSpacing: 2,
 
+		footerMarginTop: 6,
 
+		footerFontColor: '#fff',
 
+		footerAlign: 'left',
 
+		yPadding: 6,
 
+		xPadding: 6,
 
+		caretPadding: 2,
 
+		caretSize: 5,
 
+		cornerRadius: 6,
 
+		multiKeyBackground: '#fff',
 
+		displayColors: true,
 
+		borderColor: 'rgba(0,0,0,0)',
 
+		borderWidth: 0,
 
+		callbacks: {
 
+			// Args are: (tooltipItems, data)
 
+			beforeTitle: helpers$1.noop,
 
+			title: function(tooltipItems, data) {
 
+				var title = '';
 
+				var labels = data.labels;
 
+				var labelCount = labels ? labels.length : 0;
 
+
 
+				if (tooltipItems.length > 0) {
 
+					var item = tooltipItems[0];
 
+					if (item.label) {
 
+						title = item.label;
 
+					} else if (item.xLabel) {
 
+						title = item.xLabel;
 
+					} else if (labelCount > 0 && item.index < labelCount) {
 
+						title = labels[item.index];
 
+					}
 
+				}
 
+
 
+				return title;
 
+			},
 
+			afterTitle: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItems, data)
 
+			beforeBody: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItem, data)
 
+			beforeLabel: helpers$1.noop,
 
+			label: function(tooltipItem, data) {
 
+				var label = data.datasets[tooltipItem.datasetIndex].label || '';
 
+
 
+				if (label) {
 
+					label += ': ';
 
+				}
 
+				if (!helpers$1.isNullOrUndef(tooltipItem.value)) {
 
+					label += tooltipItem.value;
 
+				} else {
 
+					label += tooltipItem.yLabel;
 
+				}
 
+				return label;
 
+			},
 
+			labelColor: function(tooltipItem, chart) {
 
+				var meta = chart.getDatasetMeta(tooltipItem.datasetIndex);
 
+				var activeElement = meta.data[tooltipItem.index];
 
+				var view = activeElement._view;
 
+				return {
 
+					borderColor: view.borderColor,
 
+					backgroundColor: view.backgroundColor
 
+				};
 
+			},
 
+			labelTextColor: function() {
 
+				return this._options.bodyFontColor;
 
+			},
 
+			afterLabel: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItems, data)
 
+			afterBody: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItems, data)
 
+			beforeFooter: helpers$1.noop,
 
+			footer: helpers$1.noop,
 
+			afterFooter: helpers$1.noop
 
+		}
 
+	}
 
+});
 
+
 
+var positioners = {
 
+	/**
 
+	 * Average mode places the tooltip at the average position of the elements shown
 
+	 * @function Chart.Tooltip.positioners.average
 
+	 * @param elements {ChartElement[]} the elements being displayed in the tooltip
 
+	 * @returns {object} tooltip position
 
+	 */
 
+	average: function(elements) {
 
+		if (!elements.length) {
 
+			return false;
 
+		}
 
+
 
+		var i, len;
 
+		var x = 0;
 
+		var y = 0;
 
+		var count = 0;
 
+
 
+		for (i = 0, len = elements.length; i < len; ++i) {
 
+			var el = elements[i];
 
+			if (el && el.hasValue()) {
 
+				var pos = el.tooltipPosition();
 
+				x += pos.x;
 
+				y += pos.y;
 
+				++count;
 
+			}
 
+		}
 
+
 
+		return {
 
+			x: x / count,
 
+			y: y / count
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Gets the tooltip position nearest of the item nearest to the event position
 
+	 * @function Chart.Tooltip.positioners.nearest
 
+	 * @param elements {Chart.Element[]} the tooltip elements
 
+	 * @param eventPosition {object} the position of the event in canvas coordinates
 
+	 * @returns {object} the tooltip position
 
+	 */
 
+	nearest: function(elements, eventPosition) {
 
+		var x = eventPosition.x;
 
+		var y = eventPosition.y;
 
+		var minDistance = Number.POSITIVE_INFINITY;
 
+		var i, len, nearestElement;
 
+
 
+		for (i = 0, len = elements.length; i < len; ++i) {
 
+			var el = elements[i];
 
+			if (el && el.hasValue()) {
 
+				var center = el.getCenterPoint();
 
+				var d = helpers$1.distanceBetweenPoints(eventPosition, center);
 
+
 
+				if (d < minDistance) {
 
+					minDistance = d;
 
+					nearestElement = el;
 
+				}
 
+			}
 
+		}
 
+
 
+		if (nearestElement) {
 
+			var tp = nearestElement.tooltipPosition();
 
+			x = tp.x;
 
+			y = tp.y;
 
+		}
 
+
 
+		return {
 
+			x: x,
 
+			y: y
 
+		};
 
+	}
 
+};
 
+
 
+// Helper to push or concat based on if the 2nd parameter is an array or not
 
+function pushOrConcat(base, toPush) {
 
+	if (toPush) {
 
+		if (helpers$1.isArray(toPush)) {
 
+			// base = base.concat(toPush);
 
+			Array.prototype.push.apply(base, toPush);
 
+		} else {
 
+			base.push(toPush);
 
+		}
 
+	}
 
+
 
+	return base;
 
+}
 
+
 
+/**
 
+ * Returns array of strings split by newline
 
+ * @param {string} value - The value to split by newline.
 
+ * @returns {string[]} value if newline present - Returned from String split() method
 
+ * @function
 
+ */
 
+function splitNewlines(str) {
 
+	if ((typeof str === 'string' || str instanceof String) && str.indexOf('\n') > -1) {
 
+		return str.split('\n');
 
+	}
 
+	return str;
 
+}
 
+
 
+
 
+/**
 
+ * Private helper to create a tooltip item model
 
+ * @param element - the chart element (point, arc, bar) to create the tooltip item for
 
+ * @return new tooltip item
 
+ */
 
+function createTooltipItem(element) {
 
+	var xScale = element._xScale;
 
+	var yScale = element._yScale || element._scale; // handle radar || polarArea charts
 
+	var index = element._index;
 
+	var datasetIndex = element._datasetIndex;
 
+	var controller = element._chart.getDatasetMeta(datasetIndex).controller;
 
+	var indexScale = controller._getIndexScale();
 
+	var valueScale = controller._getValueScale();
 
+
 
+	return {
 
+		xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '',
 
+		yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '',
 
+		label: indexScale ? '' + indexScale.getLabelForIndex(index, datasetIndex) : '',
 
+		value: valueScale ? '' + valueScale.getLabelForIndex(index, datasetIndex) : '',
 
+		index: index,
 
+		datasetIndex: datasetIndex,
 
+		x: element._model.x,
 
+		y: element._model.y
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper to get the reset model for the tooltip
 
+ * @param tooltipOpts {object} the tooltip options
 
+ */
 
+function getBaseModel(tooltipOpts) {
 
+	var globalDefaults = core_defaults.global;
 
+
 
+	return {
 
+		// Positioning
 
+		xPadding: tooltipOpts.xPadding,
 
+		yPadding: tooltipOpts.yPadding,
 
+		xAlign: tooltipOpts.xAlign,
 
+		yAlign: tooltipOpts.yAlign,
 
+
 
+		// Body
 
+		bodyFontColor: tooltipOpts.bodyFontColor,
 
+		_bodyFontFamily: valueOrDefault$7(tooltipOpts.bodyFontFamily, globalDefaults.defaultFontFamily),
 
+		_bodyFontStyle: valueOrDefault$7(tooltipOpts.bodyFontStyle, globalDefaults.defaultFontStyle),
 
+		_bodyAlign: tooltipOpts.bodyAlign,
 
+		bodyFontSize: valueOrDefault$7(tooltipOpts.bodyFontSize, globalDefaults.defaultFontSize),
 
+		bodySpacing: tooltipOpts.bodySpacing,
 
+
 
+		// Title
 
+		titleFontColor: tooltipOpts.titleFontColor,
 
+		_titleFontFamily: valueOrDefault$7(tooltipOpts.titleFontFamily, globalDefaults.defaultFontFamily),
 
+		_titleFontStyle: valueOrDefault$7(tooltipOpts.titleFontStyle, globalDefaults.defaultFontStyle),
 
+		titleFontSize: valueOrDefault$7(tooltipOpts.titleFontSize, globalDefaults.defaultFontSize),
 
+		_titleAlign: tooltipOpts.titleAlign,
 
+		titleSpacing: tooltipOpts.titleSpacing,
 
+		titleMarginBottom: tooltipOpts.titleMarginBottom,
 
+
 
+		// Footer
 
+		footerFontColor: tooltipOpts.footerFontColor,
 
+		_footerFontFamily: valueOrDefault$7(tooltipOpts.footerFontFamily, globalDefaults.defaultFontFamily),
 
+		_footerFontStyle: valueOrDefault$7(tooltipOpts.footerFontStyle, globalDefaults.defaultFontStyle),
 
+		footerFontSize: valueOrDefault$7(tooltipOpts.footerFontSize, globalDefaults.defaultFontSize),
 
+		_footerAlign: tooltipOpts.footerAlign,
 
+		footerSpacing: tooltipOpts.footerSpacing,
 
+		footerMarginTop: tooltipOpts.footerMarginTop,
 
+
 
+		// Appearance
 
+		caretSize: tooltipOpts.caretSize,
 
+		cornerRadius: tooltipOpts.cornerRadius,
 
+		backgroundColor: tooltipOpts.backgroundColor,
 
+		opacity: 0,
 
+		legendColorBackground: tooltipOpts.multiKeyBackground,
 
+		displayColors: tooltipOpts.displayColors,
 
+		borderColor: tooltipOpts.borderColor,
 
+		borderWidth: tooltipOpts.borderWidth
 
+	};
 
+}
 
+
 
+/**
 
+ * Get the size of the tooltip
 
+ */
 
+function getTooltipSize(tooltip, model) {
 
+	var ctx = tooltip._chart.ctx;
 
+
 
+	var height = model.yPadding * 2; // Tooltip Padding
 
+	var width = 0;
 
+
 
+	// Count of all lines in the body
 
+	var body = model.body;
 
+	var combinedBodyLength = body.reduce(function(count, bodyItem) {
 
+		return count + bodyItem.before.length + bodyItem.lines.length + bodyItem.after.length;
 
+	}, 0);
 
+	combinedBodyLength += model.beforeBody.length + model.afterBody.length;
 
+
 
+	var titleLineCount = model.title.length;
 
+	var footerLineCount = model.footer.length;
 
+	var titleFontSize = model.titleFontSize;
 
+	var bodyFontSize = model.bodyFontSize;
 
+	var footerFontSize = model.footerFontSize;
 
+
 
+	height += titleLineCount * titleFontSize; // Title Lines
 
+	height += titleLineCount ? (titleLineCount - 1) * model.titleSpacing : 0; // Title Line Spacing
 
+	height += titleLineCount ? model.titleMarginBottom : 0; // Title's bottom Margin
 
+	height += combinedBodyLength * bodyFontSize; // Body Lines
 
+	height += combinedBodyLength ? (combinedBodyLength - 1) * model.bodySpacing : 0; // Body Line Spacing
 
+	height += footerLineCount ? model.footerMarginTop : 0; // Footer Margin
 
+	height += footerLineCount * (footerFontSize); // Footer Lines
 
+	height += footerLineCount ? (footerLineCount - 1) * model.footerSpacing : 0; // Footer Line Spacing
 
+
 
+	// Title width
 
+	var widthPadding = 0;
 
+	var maxLineWidth = function(line) {
 
+		width = Math.max(width, ctx.measureText(line).width + widthPadding);
 
+	};
 
+
 
+	ctx.font = helpers$1.fontString(titleFontSize, model._titleFontStyle, model._titleFontFamily);
 
+	helpers$1.each(model.title, maxLineWidth);
 
+
 
+	// Body width
 
+	ctx.font = helpers$1.fontString(bodyFontSize, model._bodyFontStyle, model._bodyFontFamily);
 
+	helpers$1.each(model.beforeBody.concat(model.afterBody), maxLineWidth);
 
+
 
+	// Body lines may include some extra width due to the color box
 
+	widthPadding = model.displayColors ? (bodyFontSize + 2) : 0;
 
+	helpers$1.each(body, function(bodyItem) {
 
+		helpers$1.each(bodyItem.before, maxLineWidth);
 
+		helpers$1.each(bodyItem.lines, maxLineWidth);
 
+		helpers$1.each(bodyItem.after, maxLineWidth);
 
+	});
 
+
 
+	// Reset back to 0
 
+	widthPadding = 0;
 
+
 
+	// Footer width
 
+	ctx.font = helpers$1.fontString(footerFontSize, model._footerFontStyle, model._footerFontFamily);
 
+	helpers$1.each(model.footer, maxLineWidth);
 
+
 
+	// Add padding
 
+	width += 2 * model.xPadding;
 
+
 
+	return {
 
+		width: width,
 
+		height: height
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper to get the alignment of a tooltip given the size
 
+ */
 
+function determineAlignment(tooltip, size) {
 
+	var model = tooltip._model;
 
+	var chart = tooltip._chart;
 
+	var chartArea = tooltip._chart.chartArea;
 
+	var xAlign = 'center';
 
+	var yAlign = 'center';
 
+
 
+	if (model.y < size.height) {
 
+		yAlign = 'top';
 
+	} else if (model.y > (chart.height - size.height)) {
 
+		yAlign = 'bottom';
 
+	}
 
+
 
+	var lf, rf; // functions to determine left, right alignment
 
+	var olf, orf; // functions to determine if left/right alignment causes tooltip to go outside chart
 
+	var yf; // function to get the y alignment if the tooltip goes outside of the left or right edges
 
+	var midX = (chartArea.left + chartArea.right) / 2;
 
+	var midY = (chartArea.top + chartArea.bottom) / 2;
 
+
 
+	if (yAlign === 'center') {
 
+		lf = function(x) {
 
+			return x <= midX;
 
+		};
 
+		rf = function(x) {
 
+			return x > midX;
 
+		};
 
+	} else {
 
+		lf = function(x) {
 
+			return x <= (size.width / 2);
 
+		};
 
+		rf = function(x) {
 
+			return x >= (chart.width - (size.width / 2));
 
+		};
 
+	}
 
+
 
+	olf = function(x) {
 
+		return x + size.width + model.caretSize + model.caretPadding > chart.width;
 
+	};
 
+	orf = function(x) {
 
+		return x - size.width - model.caretSize - model.caretPadding < 0;
 
+	};
 
+	yf = function(y) {
 
+		return y <= midY ? 'top' : 'bottom';
 
+	};
 
+
 
+	if (lf(model.x)) {
 
+		xAlign = 'left';
 
+
 
+		// Is tooltip too wide and goes over the right side of the chart.?
 
+		if (olf(model.x)) {
 
+			xAlign = 'center';
 
+			yAlign = yf(model.y);
 
+		}
 
+	} else if (rf(model.x)) {
 
+		xAlign = 'right';
 
+
 
+		// Is tooltip too wide and goes outside left edge of canvas?
 
+		if (orf(model.x)) {
 
+			xAlign = 'center';
 
+			yAlign = yf(model.y);
 
+		}
 
+	}
 
+
 
+	var opts = tooltip._options;
 
+	return {
 
+		xAlign: opts.xAlign ? opts.xAlign : xAlign,
 
+		yAlign: opts.yAlign ? opts.yAlign : yAlign
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper to get the location a tooltip needs to be placed at given the initial position (via the vm) and the size and alignment
 
+ */
 
+function getBackgroundPoint(vm, size, alignment, chart) {
 
+	// Background Position
 
+	var x = vm.x;
 
+	var y = vm.y;
 
+
 
+	var caretSize = vm.caretSize;
 
+	var caretPadding = vm.caretPadding;
 
+	var cornerRadius = vm.cornerRadius;
 
+	var xAlign = alignment.xAlign;
 
+	var yAlign = alignment.yAlign;
 
+	var paddingAndSize = caretSize + caretPadding;
 
+	var radiusAndPadding = cornerRadius + caretPadding;
 
+
 
+	if (xAlign === 'right') {
 
+		x -= size.width;
 
+	} else if (xAlign === 'center') {
 
+		x -= (size.width / 2);
 
+		if (x + size.width > chart.width) {
 
+			x = chart.width - size.width;
 
+		}
 
+		if (x < 0) {
 
+			x = 0;
 
+		}
 
+	}
 
+
 
+	if (yAlign === 'top') {
 
+		y += paddingAndSize;
 
+	} else if (yAlign === 'bottom') {
 
+		y -= size.height + paddingAndSize;
 
+	} else {
 
+		y -= (size.height / 2);
 
+	}
 
+
 
+	if (yAlign === 'center') {
 
+		if (xAlign === 'left') {
 
+			x += paddingAndSize;
 
+		} else if (xAlign === 'right') {
 
+			x -= paddingAndSize;
 
+		}
 
+	} else if (xAlign === 'left') {
 
+		x -= radiusAndPadding;
 
+	} else if (xAlign === 'right') {
 
+		x += radiusAndPadding;
 
+	}
 
+
 
+	return {
 
+		x: x,
 
+		y: y
 
+	};
 
+}
 
+
 
+function getAlignedX(vm, align) {
 
+	return align === 'center'
 
+		? vm.x + vm.width / 2
 
+		: align === 'right'
 
+			? vm.x + vm.width - vm.xPadding
 
+			: vm.x + vm.xPadding;
 
+}
 
+
 
+/**
 
+ * Helper to build before and after body lines
 
+ */
 
+function getBeforeAfterBodyLines(callback) {
 
+	return pushOrConcat([], splitNewlines(callback));
 
+}
 
+
 
+var exports$3 = core_element.extend({
 
+	initialize: function() {
 
+		this._model = getBaseModel(this._options);
 
+		this._lastActive = [];
 
+	},
 
+
 
+	// Get the title
 
+	// Args are: (tooltipItem, data)
 
+	getTitle: function() {
 
+		var me = this;
 
+		var opts = me._options;
 
+		var callbacks = opts.callbacks;
 
+
 
+		var beforeTitle = callbacks.beforeTitle.apply(me, arguments);
 
+		var title = callbacks.title.apply(me, arguments);
 
+		var afterTitle = callbacks.afterTitle.apply(me, arguments);
 
+
 
+		var lines = [];
 
+		lines = pushOrConcat(lines, splitNewlines(beforeTitle));
 
+		lines = pushOrConcat(lines, splitNewlines(title));
 
+		lines = pushOrConcat(lines, splitNewlines(afterTitle));
 
+
 
+		return lines;
 
+	},
 
+
 
+	// Args are: (tooltipItem, data)
 
+	getBeforeBody: function() {
 
+		return getBeforeAfterBodyLines(this._options.callbacks.beforeBody.apply(this, arguments));
 
+	},
 
+
 
+	// Args are: (tooltipItem, data)
 
+	getBody: function(tooltipItems, data) {
 
+		var me = this;
 
+		var callbacks = me._options.callbacks;
 
+		var bodyItems = [];
 
+
 
+		helpers$1.each(tooltipItems, function(tooltipItem) {
 
+			var bodyItem = {
 
+				before: [],
 
+				lines: [],
 
+				after: []
 
+			};
 
+			pushOrConcat(bodyItem.before, splitNewlines(callbacks.beforeLabel.call(me, tooltipItem, data)));
 
+			pushOrConcat(bodyItem.lines, callbacks.label.call(me, tooltipItem, data));
 
+			pushOrConcat(bodyItem.after, splitNewlines(callbacks.afterLabel.call(me, tooltipItem, data)));
 
+
 
+			bodyItems.push(bodyItem);
 
+		});
 
+
 
+		return bodyItems;
 
+	},
 
+
 
+	// Args are: (tooltipItem, data)
 
+	getAfterBody: function() {
 
+		return getBeforeAfterBodyLines(this._options.callbacks.afterBody.apply(this, arguments));
 
+	},
 
+
 
+	// Get the footer and beforeFooter and afterFooter lines
 
+	// Args are: (tooltipItem, data)
 
+	getFooter: function() {
 
+		var me = this;
 
+		var callbacks = me._options.callbacks;
 
+
 
+		var beforeFooter = callbacks.beforeFooter.apply(me, arguments);
 
+		var footer = callbacks.footer.apply(me, arguments);
 
+		var afterFooter = callbacks.afterFooter.apply(me, arguments);
 
+
 
+		var lines = [];
 
+		lines = pushOrConcat(lines, splitNewlines(beforeFooter));
 
+		lines = pushOrConcat(lines, splitNewlines(footer));
 
+		lines = pushOrConcat(lines, splitNewlines(afterFooter));
 
+
 
+		return lines;
 
+	},
 
+
 
+	update: function(changed) {
 
+		var me = this;
 
+		var opts = me._options;
 
+
 
+		// Need to regenerate the model because its faster than using extend and it is necessary due to the optimization in Chart.Element.transition
 
+		// that does _view = _model if ease === 1. This causes the 2nd tooltip update to set properties in both the view and model at the same time
 
+		// which breaks any animations.
 
+		var existingModel = me._model;
 
+		var model = me._model = getBaseModel(opts);
 
+		var active = me._active;
 
+
 
+		var data = me._data;
 
+
 
+		// In the case where active.length === 0 we need to keep these at existing values for good animations
 
+		var alignment = {
 
+			xAlign: existingModel.xAlign,
 
+			yAlign: existingModel.yAlign
 
+		};
 
+		var backgroundPoint = {
 
+			x: existingModel.x,
 
+			y: existingModel.y
 
+		};
 
+		var tooltipSize = {
 
+			width: existingModel.width,
 
+			height: existingModel.height
 
+		};
 
+		var tooltipPosition = {
 
+			x: existingModel.caretX,
 
+			y: existingModel.caretY
 
+		};
 
+
 
+		var i, len;
 
+
 
+		if (active.length) {
 
+			model.opacity = 1;
 
+
 
+			var labelColors = [];
 
+			var labelTextColors = [];
 
+			tooltipPosition = positioners[opts.position].call(me, active, me._eventPosition);
 
+
 
+			var tooltipItems = [];
 
+			for (i = 0, len = active.length; i < len; ++i) {
 
+				tooltipItems.push(createTooltipItem(active[i]));
 
+			}
 
+
 
+			// If the user provided a filter function, use it to modify the tooltip items
 
+			if (opts.filter) {
 
+				tooltipItems = tooltipItems.filter(function(a) {
 
+					return opts.filter(a, data);
 
+				});
 
+			}
 
+
 
+			// If the user provided a sorting function, use it to modify the tooltip items
 
+			if (opts.itemSort) {
 
+				tooltipItems = tooltipItems.sort(function(a, b) {
 
+					return opts.itemSort(a, b, data);
 
+				});
 
+			}
 
+
 
+			// Determine colors for boxes
 
+			helpers$1.each(tooltipItems, function(tooltipItem) {
 
+				labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart));
 
+				labelTextColors.push(opts.callbacks.labelTextColor.call(me, tooltipItem, me._chart));
 
+			});
 
+
 
+
 
+			// Build the Text Lines
 
+			model.title = me.getTitle(tooltipItems, data);
 
+			model.beforeBody = me.getBeforeBody(tooltipItems, data);
 
+			model.body = me.getBody(tooltipItems, data);
 
+			model.afterBody = me.getAfterBody(tooltipItems, data);
 
+			model.footer = me.getFooter(tooltipItems, data);
 
+
 
+			// Initial positioning and colors
 
+			model.x = tooltipPosition.x;
 
+			model.y = tooltipPosition.y;
 
+			model.caretPadding = opts.caretPadding;
 
+			model.labelColors = labelColors;
 
+			model.labelTextColors = labelTextColors;
 
+
 
+			// data points
 
+			model.dataPoints = tooltipItems;
 
+
 
+			// We need to determine alignment of the tooltip
 
+			tooltipSize = getTooltipSize(this, model);
 
+			alignment = determineAlignment(this, tooltipSize);
 
+			// Final Size and Position
 
+			backgroundPoint = getBackgroundPoint(model, tooltipSize, alignment, me._chart);
 
+		} else {
 
+			model.opacity = 0;
 
+		}
 
+
 
+		model.xAlign = alignment.xAlign;
 
+		model.yAlign = alignment.yAlign;
 
+		model.x = backgroundPoint.x;
 
+		model.y = backgroundPoint.y;
 
+		model.width = tooltipSize.width;
 
+		model.height = tooltipSize.height;
 
+
 
+		// Point where the caret on the tooltip points to
 
+		model.caretX = tooltipPosition.x;
 
+		model.caretY = tooltipPosition.y;
 
+
 
+		me._model = model;
 
+
 
+		if (changed && opts.custom) {
 
+			opts.custom.call(me, model);
 
+		}
 
+
 
+		return me;
 
+	},
 
+
 
+	drawCaret: function(tooltipPoint, size) {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+		var caretPosition = this.getCaretPosition(tooltipPoint, size, vm);
 
+
 
+		ctx.lineTo(caretPosition.x1, caretPosition.y1);
 
+		ctx.lineTo(caretPosition.x2, caretPosition.y2);
 
+		ctx.lineTo(caretPosition.x3, caretPosition.y3);
 
+	},
 
+	getCaretPosition: function(tooltipPoint, size, vm) {
 
+		var x1, x2, x3, y1, y2, y3;
 
+		var caretSize = vm.caretSize;
 
+		var cornerRadius = vm.cornerRadius;
 
+		var xAlign = vm.xAlign;
 
+		var yAlign = vm.yAlign;
 
+		var ptX = tooltipPoint.x;
 
+		var ptY = tooltipPoint.y;
 
+		var width = size.width;
 
+		var height = size.height;
 
+
 
+		if (yAlign === 'center') {
 
+			y2 = ptY + (height / 2);
 
+
 
+			if (xAlign === 'left') {
 
+				x1 = ptX;
 
+				x2 = x1 - caretSize;
 
+				x3 = x1;
 
+
 
+				y1 = y2 + caretSize;
 
+				y3 = y2 - caretSize;
 
+			} else {
 
+				x1 = ptX + width;
 
+				x2 = x1 + caretSize;
 
+				x3 = x1;
 
+
 
+				y1 = y2 - caretSize;
 
+				y3 = y2 + caretSize;
 
+			}
 
+		} else {
 
+			if (xAlign === 'left') {
 
+				x2 = ptX + cornerRadius + (caretSize);
 
+				x1 = x2 - caretSize;
 
+				x3 = x2 + caretSize;
 
+			} else if (xAlign === 'right') {
 
+				x2 = ptX + width - cornerRadius - caretSize;
 
+				x1 = x2 - caretSize;
 
+				x3 = x2 + caretSize;
 
+			} else {
 
+				x2 = vm.caretX;
 
+				x1 = x2 - caretSize;
 
+				x3 = x2 + caretSize;
 
+			}
 
+			if (yAlign === 'top') {
 
+				y1 = ptY;
 
+				y2 = y1 - caretSize;
 
+				y3 = y1;
 
+			} else {
 
+				y1 = ptY + height;
 
+				y2 = y1 + caretSize;
 
+				y3 = y1;
 
+				// invert drawing order
 
+				var tmp = x3;
 
+				x3 = x1;
 
+				x1 = tmp;
 
+			}
 
+		}
 
+		return {x1: x1, x2: x2, x3: x3, y1: y1, y2: y2, y3: y3};
 
+	},
 
+
 
+	drawTitle: function(pt, vm, ctx) {
 
+		var title = vm.title;
 
+
 
+		if (title.length) {
 
+			pt.x = getAlignedX(vm, vm._titleAlign);
 
+
 
+			ctx.textAlign = vm._titleAlign;
 
+			ctx.textBaseline = 'top';
 
+
 
+			var titleFontSize = vm.titleFontSize;
 
+			var titleSpacing = vm.titleSpacing;
 
+
 
+			ctx.fillStyle = vm.titleFontColor;
 
+			ctx.font = helpers$1.fontString(titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
 
+
 
+			var i, len;
 
+			for (i = 0, len = title.length; i < len; ++i) {
 
+				ctx.fillText(title[i], pt.x, pt.y);
 
+				pt.y += titleFontSize + titleSpacing; // Line Height and spacing
 
+
 
+				if (i + 1 === title.length) {
 
+					pt.y += vm.titleMarginBottom - titleSpacing; // If Last, add margin, remove spacing
 
+				}
 
+			}
 
+		}
 
+	},
 
+
 
+	drawBody: function(pt, vm, ctx) {
 
+		var bodyFontSize = vm.bodyFontSize;
 
+		var bodySpacing = vm.bodySpacing;
 
+		var bodyAlign = vm._bodyAlign;
 
+		var body = vm.body;
 
+		var drawColorBoxes = vm.displayColors;
 
+		var labelColors = vm.labelColors;
 
+		var xLinePadding = 0;
 
+		var colorX = drawColorBoxes ? getAlignedX(vm, 'left') : 0;
 
+		var textColor;
 
+
 
+		ctx.textAlign = bodyAlign;
 
+		ctx.textBaseline = 'top';
 
+		ctx.font = helpers$1.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 
+
 
+		pt.x = getAlignedX(vm, bodyAlign);
 
+
 
+		// Before Body
 
+		var fillLineOfText = function(line) {
 
+			ctx.fillText(line, pt.x + xLinePadding, pt.y);
 
+			pt.y += bodyFontSize + bodySpacing;
 
+		};
 
+
 
+		// Before body lines
 
+		ctx.fillStyle = vm.bodyFontColor;
 
+		helpers$1.each(vm.beforeBody, fillLineOfText);
 
+
 
+		xLinePadding = drawColorBoxes && bodyAlign !== 'right'
 
+			? bodyAlign === 'center' ? (bodyFontSize / 2 + 1) : (bodyFontSize + 2)
 
+			: 0;
 
+
 
+		// Draw body lines now
 
+		helpers$1.each(body, function(bodyItem, i) {
 
+			textColor = vm.labelTextColors[i];
 
+			ctx.fillStyle = textColor;
 
+			helpers$1.each(bodyItem.before, fillLineOfText);
 
+
 
+			helpers$1.each(bodyItem.lines, function(line) {
 
+				// Draw Legend-like boxes if needed
 
+				if (drawColorBoxes) {
 
+					// Fill a white rect so that colours merge nicely if the opacity is < 1
 
+					ctx.fillStyle = vm.legendColorBackground;
 
+					ctx.fillRect(colorX, pt.y, bodyFontSize, bodyFontSize);
 
+
 
+					// Border
 
+					ctx.lineWidth = 1;
 
+					ctx.strokeStyle = labelColors[i].borderColor;
 
+					ctx.strokeRect(colorX, pt.y, bodyFontSize, bodyFontSize);
 
+
 
+					// Inner square
 
+					ctx.fillStyle = labelColors[i].backgroundColor;
 
+					ctx.fillRect(colorX + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
 
+					ctx.fillStyle = textColor;
 
+				}
 
+
 
+				fillLineOfText(line);
 
+			});
 
+
 
+			helpers$1.each(bodyItem.after, fillLineOfText);
 
+		});
 
+
 
+		// Reset back to 0 for after body
 
+		xLinePadding = 0;
 
+
 
+		// After body lines
 
+		helpers$1.each(vm.afterBody, fillLineOfText);
 
+		pt.y -= bodySpacing; // Remove last body spacing
 
+	},
 
+
 
+	drawFooter: function(pt, vm, ctx) {
 
+		var footer = vm.footer;
 
+
 
+		if (footer.length) {
 
+			pt.x = getAlignedX(vm, vm._footerAlign);
 
+			pt.y += vm.footerMarginTop;
 
+
 
+			ctx.textAlign = vm._footerAlign;
 
+			ctx.textBaseline = 'top';
 
+
 
+			ctx.fillStyle = vm.footerFontColor;
 
+			ctx.font = helpers$1.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
 
+
 
+			helpers$1.each(footer, function(line) {
 
+				ctx.fillText(line, pt.x, pt.y);
 
+				pt.y += vm.footerFontSize + vm.footerSpacing;
 
+			});
 
+		}
 
+	},
 
+
 
+	drawBackground: function(pt, vm, ctx, tooltipSize) {
 
+		ctx.fillStyle = vm.backgroundColor;
 
+		ctx.strokeStyle = vm.borderColor;
 
+		ctx.lineWidth = vm.borderWidth;
 
+		var xAlign = vm.xAlign;
 
+		var yAlign = vm.yAlign;
 
+		var x = pt.x;
 
+		var y = pt.y;
 
+		var width = tooltipSize.width;
 
+		var height = tooltipSize.height;
 
+		var radius = vm.cornerRadius;
 
+
 
+		ctx.beginPath();
 
+		ctx.moveTo(x + radius, y);
 
+		if (yAlign === 'top') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x + width - radius, y);
 
+		ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
 
+		if (yAlign === 'center' && xAlign === 'right') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x + width, y + height - radius);
 
+		ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
 
+		if (yAlign === 'bottom') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x + radius, y + height);
 
+		ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
 
+		if (yAlign === 'center' && xAlign === 'left') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x, y + radius);
 
+		ctx.quadraticCurveTo(x, y, x + radius, y);
 
+		ctx.closePath();
 
+
 
+		ctx.fill();
 
+
 
+		if (vm.borderWidth > 0) {
 
+			ctx.stroke();
 
+		}
 
+	},
 
+
 
+	draw: function() {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+
 
+		if (vm.opacity === 0) {
 
+			return;
 
+		}
 
+
 
+		var tooltipSize = {
 
+			width: vm.width,
 
+			height: vm.height
 
+		};
 
+		var pt = {
 
+			x: vm.x,
 
+			y: vm.y
 
+		};
 
+
 
+		// IE11/Edge does not like very small opacities, so snap to 0
 
+		var opacity = Math.abs(vm.opacity < 1e-3) ? 0 : vm.opacity;
 
+
 
+		// Truthy/falsey value for empty tooltip
 
+		var hasTooltipContent = vm.title.length || vm.beforeBody.length || vm.body.length || vm.afterBody.length || vm.footer.length;
 
+
 
+		if (this._options.enabled && hasTooltipContent) {
 
+			ctx.save();
 
+			ctx.globalAlpha = opacity;
 
+
 
+			// Draw Background
 
+			this.drawBackground(pt, vm, ctx, tooltipSize);
 
+
 
+			// Draw Title, Body, and Footer
 
+			pt.y += vm.yPadding;
 
+
 
+			// Titles
 
+			this.drawTitle(pt, vm, ctx);
 
+
 
+			// Body
 
+			this.drawBody(pt, vm, ctx);
 
+
 
+			// Footer
 
+			this.drawFooter(pt, vm, ctx);
 
+
 
+			ctx.restore();
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Handle an event
 
+	 * @private
 
+	 * @param {IEvent} event - The event to handle
 
+	 * @returns {boolean} true if the tooltip changed
 
+	 */
 
+	handleEvent: function(e) {
 
+		var me = this;
 
+		var options = me._options;
 
+		var changed = false;
 
+
 
+		me._lastActive = me._lastActive || [];
 
+
 
+		// Find Active Elements for tooltips
 
+		if (e.type === 'mouseout') {
 
+			me._active = [];
 
+		} else {
 
+			me._active = me._chart.getElementsAtEventForMode(e, options.mode, options);
 
+		}
 
+
 
+		// Remember Last Actives
 
+		changed = !helpers$1.arrayEquals(me._active, me._lastActive);
 
+
 
+		// Only handle target event on tooltip change
 
+		if (changed) {
 
+			me._lastActive = me._active;
 
+
 
+			if (options.enabled || options.custom) {
 
+				me._eventPosition = {
 
+					x: e.x,
 
+					y: e.y
 
+				};
 
+
 
+				me.update(true);
 
+				me.pivot();
 
+			}
 
+		}
 
+
 
+		return changed;
 
+	}
 
+});
 
+
 
+/**
 
+ * @namespace Chart.Tooltip.positioners
 
+ */
 
+var positioners_1 = positioners;
 
+
 
+var core_tooltip = exports$3;
 
+core_tooltip.positioners = positioners_1;
 
+
 
+var valueOrDefault$8 = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('global', {
 
+	elements: {},
 
+	events: [
 
+		'mousemove',
 
+		'mouseout',
 
+		'click',
 
+		'touchstart',
 
+		'touchmove'
 
+	],
 
+	hover: {
 
+		onHover: null,
 
+		mode: 'nearest',
 
+		intersect: true,
 
+		animationDuration: 400
 
+	},
 
+	onClick: null,
 
+	maintainAspectRatio: true,
 
+	responsive: true,
 
+	responsiveAnimationDuration: 0
 
+});
 
+
 
+/**
 
+ * Recursively merge the given config objects representing the `scales` option
 
+ * by incorporating scale defaults in `xAxes` and `yAxes` array items, then
 
+ * returns a deep copy of the result, thus doesn't alter inputs.
 
+ */
 
+function mergeScaleConfig(/* config objects ... */) {
 
+	return helpers$1.merge({}, [].slice.call(arguments), {
 
+		merger: function(key, target, source, options) {
 
+			if (key === 'xAxes' || key === 'yAxes') {
 
+				var slen = source[key].length;
 
+				var i, type, scale;
 
+
 
+				if (!target[key]) {
 
+					target[key] = [];
 
+				}
 
+
 
+				for (i = 0; i < slen; ++i) {
 
+					scale = source[key][i];
 
+					type = valueOrDefault$8(scale.type, key === 'xAxes' ? 'category' : 'linear');
 
+
 
+					if (i >= target[key].length) {
 
+						target[key].push({});
 
+					}
 
+
 
+					if (!target[key][i].type || (scale.type && scale.type !== target[key][i].type)) {
 
+						// new/untyped scale or type changed: let's apply the new defaults
 
+						// then merge source scale to correctly overwrite the defaults.
 
+						helpers$1.merge(target[key][i], [core_scaleService.getScaleDefaults(type), scale]);
 
+					} else {
 
+						// scales type are the same
 
+						helpers$1.merge(target[key][i], scale);
 
+					}
 
+				}
 
+			} else {
 
+				helpers$1._merger(key, target, source, options);
 
+			}
 
+		}
 
+	});
 
+}
 
+
 
+/**
 
+ * Recursively merge the given config objects as the root options by handling
 
+ * default scale options for the `scales` and `scale` properties, then returns
 
+ * a deep copy of the result, thus doesn't alter inputs.
 
+ */
 
+function mergeConfig(/* config objects ... */) {
 
+	return helpers$1.merge({}, [].slice.call(arguments), {
 
+		merger: function(key, target, source, options) {
 
+			var tval = target[key] || {};
 
+			var sval = source[key];
 
+
 
+			if (key === 'scales') {
 
+				// scale config merging is complex. Add our own function here for that
 
+				target[key] = mergeScaleConfig(tval, sval);
 
+			} else if (key === 'scale') {
 
+				// used in polar area & radar charts since there is only one scale
 
+				target[key] = helpers$1.merge(tval, [core_scaleService.getScaleDefaults(sval.type), sval]);
 
+			} else {
 
+				helpers$1._merger(key, target, source, options);
 
+			}
 
+		}
 
+	});
 
+}
 
+
 
+function initConfig(config) {
 
+	config = config || {};
 
+
 
+	// Do NOT use mergeConfig for the data object because this method merges arrays
 
+	// and so would change references to labels and datasets, preventing data updates.
 
+	var data = config.data = config.data || {};
 
+	data.datasets = data.datasets || [];
 
+	data.labels = data.labels || [];
 
+
 
+	config.options = mergeConfig(
 
+		core_defaults.global,
 
+		core_defaults[config.type],
 
+		config.options || {});
 
+
 
+	return config;
 
+}
 
+
 
+function updateConfig(chart) {
 
+	var newOptions = chart.options;
 
+
 
+	helpers$1.each(chart.scales, function(scale) {
 
+		core_layouts.removeBox(chart, scale);
 
+	});
 
+
 
+	newOptions = mergeConfig(
 
+		core_defaults.global,
 
+		core_defaults[chart.config.type],
 
+		newOptions);
 
+
 
+	chart.options = chart.config.options = newOptions;
 
+	chart.ensureScalesHaveIDs();
 
+	chart.buildOrUpdateScales();
 
+
 
+	// Tooltip
 
+	chart.tooltip._options = newOptions.tooltips;
 
+	chart.tooltip.initialize();
 
+}
 
+
 
+function positionIsHorizontal(position) {
 
+	return position === 'top' || position === 'bottom';
 
+}
 
+
 
+var Chart = function(item, config) {
 
+	this.construct(item, config);
 
+	return this;
 
+};
 
+
 
+helpers$1.extend(Chart.prototype, /** @lends Chart */ {
 
+	/**
 
+	 * @private
 
+	 */
 
+	construct: function(item, config) {
 
+		var me = this;
 
+
 
+		config = initConfig(config);
 
+
 
+		var context = platform.acquireContext(item, config);
 
+		var canvas = context && context.canvas;
 
+		var height = canvas && canvas.height;
 
+		var width = canvas && canvas.width;
 
+
 
+		me.id = helpers$1.uid();
 
+		me.ctx = context;
 
+		me.canvas = canvas;
 
+		me.config = config;
 
+		me.width = width;
 
+		me.height = height;
 
+		me.aspectRatio = height ? width / height : null;
 
+		me.options = config.options;
 
+		me._bufferedRender = false;
 
+
 
+		/**
 
+		 * Provided for backward compatibility, Chart and Chart.Controller have been merged,
 
+		 * the "instance" still need to be defined since it might be called from plugins.
 
+		 * @prop Chart#chart
 
+		 * @deprecated since version 2.6.0
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		me.chart = me;
 
+		me.controller = me; // chart.chart.controller #inception
 
+
 
+		// Add the chart instance to the global namespace
 
+		Chart.instances[me.id] = me;
 
+
 
+		// Define alias to the config data: `chart.data === chart.config.data`
 
+		Object.defineProperty(me, 'data', {
 
+			get: function() {
 
+				return me.config.data;
 
+			},
 
+			set: function(value) {
 
+				me.config.data = value;
 
+			}
 
+		});
 
+
 
+		if (!context || !canvas) {
 
+			// The given item is not a compatible context2d element, let's return before finalizing
 
+			// the chart initialization but after setting basic chart / controller properties that
 
+			// can help to figure out that the chart is not valid (e.g chart.canvas !== null);
 
+			// https://github.com/chartjs/Chart.js/issues/2807
 
+			console.error("Failed to create chart: can't acquire context from the given item");
 
+			return;
 
+		}
 
+
 
+		me.initialize();
 
+		me.update();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	initialize: function() {
 
+		var me = this;
 
+
 
+		// Before init plugin notification
 
+		core_plugins.notify(me, 'beforeInit');
 
+
 
+		helpers$1.retinaScale(me, me.options.devicePixelRatio);
 
+
 
+		me.bindEvents();
 
+
 
+		if (me.options.responsive) {
 
+			// Initial resize before chart draws (must be silent to preserve initial animations).
 
+			me.resize(true);
 
+		}
 
+
 
+		// Make sure scales have IDs and are built before we build any controllers.
 
+		me.ensureScalesHaveIDs();
 
+		me.buildOrUpdateScales();
 
+		me.initToolTip();
 
+
 
+		// After init plugin notification
 
+		core_plugins.notify(me, 'afterInit');
 
+
 
+		return me;
 
+	},
 
+
 
+	clear: function() {
 
+		helpers$1.canvas.clear(this);
 
+		return this;
 
+	},
 
+
 
+	stop: function() {
 
+		// Stops any current animation loop occurring
 
+		core_animations.cancelAnimation(this);
 
+		return this;
 
+	},
 
+
 
+	resize: function(silent) {
 
+		var me = this;
 
+		var options = me.options;
 
+		var canvas = me.canvas;
 
+		var aspectRatio = (options.maintainAspectRatio && me.aspectRatio) || null;
 
+
 
+		// the canvas render width and height will be casted to integers so make sure that
 
+		// the canvas display style uses the same integer values to avoid blurring effect.
 
+
 
+		// Set to 0 instead of canvas.size because the size defaults to 300x150 if the element is collapsed
 
+		var newWidth = Math.max(0, Math.floor(helpers$1.getMaximumWidth(canvas)));
 
+		var newHeight = Math.max(0, Math.floor(aspectRatio ? newWidth / aspectRatio : helpers$1.getMaximumHeight(canvas)));
 
+
 
+		if (me.width === newWidth && me.height === newHeight) {
 
+			return;
 
+		}
 
+
 
+		canvas.width = me.width = newWidth;
 
+		canvas.height = me.height = newHeight;
 
+		canvas.style.width = newWidth + 'px';
 
+		canvas.style.height = newHeight + 'px';
 
+
 
+		helpers$1.retinaScale(me, options.devicePixelRatio);
 
+
 
+		if (!silent) {
 
+			// Notify any plugins about the resize
 
+			var newSize = {width: newWidth, height: newHeight};
 
+			core_plugins.notify(me, 'resize', [newSize]);
 
+
 
+			// Notify of resize
 
+			if (options.onResize) {
 
+				options.onResize(me, newSize);
 
+			}
 
+
 
+			me.stop();
 
+			me.update({
 
+				duration: options.responsiveAnimationDuration
 
+			});
 
+		}
 
+	},
 
+
 
+	ensureScalesHaveIDs: function() {
 
+		var options = this.options;
 
+		var scalesOptions = options.scales || {};
 
+		var scaleOptions = options.scale;
 
+
 
+		helpers$1.each(scalesOptions.xAxes, function(xAxisOptions, index) {
 
+			xAxisOptions.id = xAxisOptions.id || ('x-axis-' + index);
 
+		});
 
+
 
+		helpers$1.each(scalesOptions.yAxes, function(yAxisOptions, index) {
 
+			yAxisOptions.id = yAxisOptions.id || ('y-axis-' + index);
 
+		});
 
+
 
+		if (scaleOptions) {
 
+			scaleOptions.id = scaleOptions.id || 'scale';
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Builds a map of scale ID to scale object for future lookup.
 
+	 */
 
+	buildOrUpdateScales: function() {
 
+		var me = this;
 
+		var options = me.options;
 
+		var scales = me.scales || {};
 
+		var items = [];
 
+		var updated = Object.keys(scales).reduce(function(obj, id) {
 
+			obj[id] = false;
 
+			return obj;
 
+		}, {});
 
+
 
+		if (options.scales) {
 
+			items = items.concat(
 
+				(options.scales.xAxes || []).map(function(xAxisOptions) {
 
+					return {options: xAxisOptions, dtype: 'category', dposition: 'bottom'};
 
+				}),
 
+				(options.scales.yAxes || []).map(function(yAxisOptions) {
 
+					return {options: yAxisOptions, dtype: 'linear', dposition: 'left'};
 
+				})
 
+			);
 
+		}
 
+
 
+		if (options.scale) {
 
+			items.push({
 
+				options: options.scale,
 
+				dtype: 'radialLinear',
 
+				isDefault: true,
 
+				dposition: 'chartArea'
 
+			});
 
+		}
 
+
 
+		helpers$1.each(items, function(item) {
 
+			var scaleOptions = item.options;
 
+			var id = scaleOptions.id;
 
+			var scaleType = valueOrDefault$8(scaleOptions.type, item.dtype);
 
+
 
+			if (positionIsHorizontal(scaleOptions.position) !== positionIsHorizontal(item.dposition)) {
 
+				scaleOptions.position = item.dposition;
 
+			}
 
+
 
+			updated[id] = true;
 
+			var scale = null;
 
+			if (id in scales && scales[id].type === scaleType) {
 
+				scale = scales[id];
 
+				scale.options = scaleOptions;
 
+				scale.ctx = me.ctx;
 
+				scale.chart = me;
 
+			} else {
 
+				var scaleClass = core_scaleService.getScaleConstructor(scaleType);
 
+				if (!scaleClass) {
 
+					return;
 
+				}
 
+				scale = new scaleClass({
 
+					id: id,
 
+					type: scaleType,
 
+					options: scaleOptions,
 
+					ctx: me.ctx,
 
+					chart: me
 
+				});
 
+				scales[scale.id] = scale;
 
+			}
 
+
 
+			scale.mergeTicksOptions();
 
+
 
+			// TODO(SB): I think we should be able to remove this custom case (options.scale)
 
+			// and consider it as a regular scale part of the "scales"" map only! This would
 
+			// make the logic easier and remove some useless? custom code.
 
+			if (item.isDefault) {
 
+				me.scale = scale;
 
+			}
 
+		});
 
+		// clear up discarded scales
 
+		helpers$1.each(updated, function(hasUpdated, id) {
 
+			if (!hasUpdated) {
 
+				delete scales[id];
 
+			}
 
+		});
 
+
 
+		me.scales = scales;
 
+
 
+		core_scaleService.addScalesToLayout(this);
 
+	},
 
+
 
+	buildOrUpdateControllers: function() {
 
+		var me = this;
 
+		var newControllers = [];
 
+
 
+		helpers$1.each(me.data.datasets, function(dataset, datasetIndex) {
 
+			var meta = me.getDatasetMeta(datasetIndex);
 
+			var type = dataset.type || me.config.type;
 
+
 
+			if (meta.type && meta.type !== type) {
 
+				me.destroyDatasetMeta(datasetIndex);
 
+				meta = me.getDatasetMeta(datasetIndex);
 
+			}
 
+			meta.type = type;
 
+
 
+			if (meta.controller) {
 
+				meta.controller.updateIndex(datasetIndex);
 
+				meta.controller.linkScales();
 
+			} else {
 
+				var ControllerClass = controllers[meta.type];
 
+				if (ControllerClass === undefined) {
 
+					throw new Error('"' + meta.type + '" is not a chart type.');
 
+				}
 
+
 
+				meta.controller = new ControllerClass(me, datasetIndex);
 
+				newControllers.push(meta.controller);
 
+			}
 
+		}, me);
 
+
 
+		return newControllers;
 
+	},
 
+
 
+	/**
 
+	 * Reset the elements of all datasets
 
+	 * @private
 
+	 */
 
+	resetElements: function() {
 
+		var me = this;
 
+		helpers$1.each(me.data.datasets, function(dataset, datasetIndex) {
 
+			me.getDatasetMeta(datasetIndex).controller.reset();
 
+		}, me);
 
+	},
 
+
 
+	/**
 
+	* Resets the chart back to it's state before the initial animation
 
+	*/
 
+	reset: function() {
 
+		this.resetElements();
 
+		this.tooltip.initialize();
 
+	},
 
+
 
+	update: function(config) {
 
+		var me = this;
 
+
 
+		if (!config || typeof config !== 'object') {
 
+			// backwards compatibility
 
+			config = {
 
+				duration: config,
 
+				lazy: arguments[1]
 
+			};
 
+		}
 
+
 
+		updateConfig(me);
 
+
 
+		// plugins options references might have change, let's invalidate the cache
 
+		// https://github.com/chartjs/Chart.js/issues/5111#issuecomment-355934167
 
+		core_plugins._invalidate(me);
 
+
 
+		if (core_plugins.notify(me, 'beforeUpdate') === false) {
 
+			return;
 
+		}
 
+
 
+		// In case the entire data object changed
 
+		me.tooltip._data = me.data;
 
+
 
+		// Make sure dataset controllers are updated and new controllers are reset
 
+		var newControllers = me.buildOrUpdateControllers();
 
+
 
+		// Make sure all dataset controllers have correct meta data counts
 
+		helpers$1.each(me.data.datasets, function(dataset, datasetIndex) {
 
+			me.getDatasetMeta(datasetIndex).controller.buildOrUpdateElements();
 
+		}, me);
 
+
 
+		me.updateLayout();
 
+
 
+		// Can only reset the new controllers after the scales have been updated
 
+		if (me.options.animation && me.options.animation.duration) {
 
+			helpers$1.each(newControllers, function(controller) {
 
+				controller.reset();
 
+			});
 
+		}
 
+
 
+		me.updateDatasets();
 
+
 
+		// Need to reset tooltip in case it is displayed with elements that are removed
 
+		// after update.
 
+		me.tooltip.initialize();
 
+
 
+		// Last active contains items that were previously in the tooltip.
 
+		// When we reset the tooltip, we need to clear it
 
+		me.lastActive = [];
 
+
 
+		// Do this before render so that any plugins that need final scale updates can use it
 
+		core_plugins.notify(me, 'afterUpdate');
 
+
 
+		if (me._bufferedRender) {
 
+			me._bufferedRequest = {
 
+				duration: config.duration,
 
+				easing: config.easing,
 
+				lazy: config.lazy
 
+			};
 
+		} else {
 
+			me.render(config);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Updates the chart layout unless a plugin returns `false` to the `beforeLayout`
 
+	 * hook, in which case, plugins will not be called on `afterLayout`.
 
+	 * @private
 
+	 */
 
+	updateLayout: function() {
 
+		var me = this;
 
+
 
+		if (core_plugins.notify(me, 'beforeLayout') === false) {
 
+			return;
 
+		}
 
+
 
+		core_layouts.update(this, this.width, this.height);
 
+
 
+		/**
 
+		 * Provided for backward compatibility, use `afterLayout` instead.
 
+		 * @method IPlugin#afterScaleUpdate
 
+		 * @deprecated since version 2.5.0
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		core_plugins.notify(me, 'afterScaleUpdate');
 
+		core_plugins.notify(me, 'afterLayout');
 
+	},
 
+
 
+	/**
 
+	 * Updates all datasets unless a plugin returns `false` to the `beforeDatasetsUpdate`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetsUpdate`.
 
+	 * @private
 
+	 */
 
+	updateDatasets: function() {
 
+		var me = this;
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetsUpdate') === false) {
 
+			return;
 
+		}
 
+
 
+		for (var i = 0, ilen = me.data.datasets.length; i < ilen; ++i) {
 
+			me.updateDataset(i);
 
+		}
 
+
 
+		core_plugins.notify(me, 'afterDatasetsUpdate');
 
+	},
 
+
 
+	/**
 
+	 * Updates dataset at index unless a plugin returns `false` to the `beforeDatasetUpdate`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetUpdate`.
 
+	 * @private
 
+	 */
 
+	updateDataset: function(index) {
 
+		var me = this;
 
+		var meta = me.getDatasetMeta(index);
 
+		var args = {
 
+			meta: meta,
 
+			index: index
 
+		};
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetUpdate', [args]) === false) {
 
+			return;
 
+		}
 
+
 
+		meta.controller.update();
 
+
 
+		core_plugins.notify(me, 'afterDatasetUpdate', [args]);
 
+	},
 
+
 
+	render: function(config) {
 
+		var me = this;
 
+
 
+		if (!config || typeof config !== 'object') {
 
+			// backwards compatibility
 
+			config = {
 
+				duration: config,
 
+				lazy: arguments[1]
 
+			};
 
+		}
 
+
 
+		var animationOptions = me.options.animation;
 
+		var duration = valueOrDefault$8(config.duration, animationOptions && animationOptions.duration);
 
+		var lazy = config.lazy;
 
+
 
+		if (core_plugins.notify(me, 'beforeRender') === false) {
 
+			return;
 
+		}
 
+
 
+		var onComplete = function(animation) {
 
+			core_plugins.notify(me, 'afterRender');
 
+			helpers$1.callback(animationOptions && animationOptions.onComplete, [animation], me);
 
+		};
 
+
 
+		if (animationOptions && duration) {
 
+			var animation = new core_animation({
 
+				numSteps: duration / 16.66, // 60 fps
 
+				easing: config.easing || animationOptions.easing,
 
+
 
+				render: function(chart, animationObject) {
 
+					var easingFunction = helpers$1.easing.effects[animationObject.easing];
 
+					var currentStep = animationObject.currentStep;
 
+					var stepDecimal = currentStep / animationObject.numSteps;
 
+
 
+					chart.draw(easingFunction(stepDecimal), stepDecimal, currentStep);
 
+				},
 
+
 
+				onAnimationProgress: animationOptions.onProgress,
 
+				onAnimationComplete: onComplete
 
+			});
 
+
 
+			core_animations.addAnimation(me, animation, duration, lazy);
 
+		} else {
 
+			me.draw();
 
+
 
+			// See https://github.com/chartjs/Chart.js/issues/3781
 
+			onComplete(new core_animation({numSteps: 0, chart: me}));
 
+		}
 
+
 
+		return me;
 
+	},
 
+
 
+	draw: function(easingValue) {
 
+		var me = this;
 
+
 
+		me.clear();
 
+
 
+		if (helpers$1.isNullOrUndef(easingValue)) {
 
+			easingValue = 1;
 
+		}
 
+
 
+		me.transition(easingValue);
 
+
 
+		if (me.width <= 0 || me.height <= 0) {
 
+			return;
 
+		}
 
+
 
+		if (core_plugins.notify(me, 'beforeDraw', [easingValue]) === false) {
 
+			return;
 
+		}
 
+
 
+		// Draw all the scales
 
+		helpers$1.each(me.boxes, function(box) {
 
+			box.draw(me.chartArea);
 
+		}, me);
 
+
 
+		me.drawDatasets(easingValue);
 
+		me._drawTooltip(easingValue);
 
+
 
+		core_plugins.notify(me, 'afterDraw', [easingValue]);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	transition: function(easingValue) {
 
+		var me = this;
 
+
 
+		for (var i = 0, ilen = (me.data.datasets || []).length; i < ilen; ++i) {
 
+			if (me.isDatasetVisible(i)) {
 
+				me.getDatasetMeta(i).controller.transition(easingValue);
 
+			}
 
+		}
 
+
 
+		me.tooltip.transition(easingValue);
 
+	},
 
+
 
+	/**
 
+	 * Draws all datasets unless a plugin returns `false` to the `beforeDatasetsDraw`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetsDraw`.
 
+	 * @private
 
+	 */
 
+	drawDatasets: function(easingValue) {
 
+		var me = this;
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetsDraw', [easingValue]) === false) {
 
+			return;
 
+		}
 
+
 
+		// Draw datasets reversed to support proper line stacking
 
+		for (var i = (me.data.datasets || []).length - 1; i >= 0; --i) {
 
+			if (me.isDatasetVisible(i)) {
 
+				me.drawDataset(i, easingValue);
 
+			}
 
+		}
 
+
 
+		core_plugins.notify(me, 'afterDatasetsDraw', [easingValue]);
 
+	},
 
+
 
+	/**
 
+	 * Draws dataset at index unless a plugin returns `false` to the `beforeDatasetDraw`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetDraw`.
 
+	 * @private
 
+	 */
 
+	drawDataset: function(index, easingValue) {
 
+		var me = this;
 
+		var meta = me.getDatasetMeta(index);
 
+		var args = {
 
+			meta: meta,
 
+			index: index,
 
+			easingValue: easingValue
 
+		};
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetDraw', [args]) === false) {
 
+			return;
 
+		}
 
+
 
+		meta.controller.draw(easingValue);
 
+
 
+		core_plugins.notify(me, 'afterDatasetDraw', [args]);
 
+	},
 
+
 
+	/**
 
+	 * Draws tooltip unless a plugin returns `false` to the `beforeTooltipDraw`
 
+	 * hook, in which case, plugins will not be called on `afterTooltipDraw`.
 
+	 * @private
 
+	 */
 
+	_drawTooltip: function(easingValue) {
 
+		var me = this;
 
+		var tooltip = me.tooltip;
 
+		var args = {
 
+			tooltip: tooltip,
 
+			easingValue: easingValue
 
+		};
 
+
 
+		if (core_plugins.notify(me, 'beforeTooltipDraw', [args]) === false) {
 
+			return;
 
+		}
 
+
 
+		tooltip.draw();
 
+
 
+		core_plugins.notify(me, 'afterTooltipDraw', [args]);
 
+	},
 
+
 
+	/**
 
+	 * Get the single element that was clicked on
 
+	 * @return An object containing the dataset index and element index of the matching element. Also contains the rectangle that was draw
 
+	 */
 
+	getElementAtEvent: function(e) {
 
+		return core_interaction.modes.single(this, e);
 
+	},
 
+
 
+	getElementsAtEvent: function(e) {
 
+		return core_interaction.modes.label(this, e, {intersect: true});
 
+	},
 
+
 
+	getElementsAtXAxis: function(e) {
 
+		return core_interaction.modes['x-axis'](this, e, {intersect: true});
 
+	},
 
+
 
+	getElementsAtEventForMode: function(e, mode, options) {
 
+		var method = core_interaction.modes[mode];
 
+		if (typeof method === 'function') {
 
+			return method(this, e, options);
 
+		}
 
+
 
+		return [];
 
+	},
 
+
 
+	getDatasetAtEvent: function(e) {
 
+		return core_interaction.modes.dataset(this, e, {intersect: true});
 
+	},
 
+
 
+	getDatasetMeta: function(datasetIndex) {
 
+		var me = this;
 
+		var dataset = me.data.datasets[datasetIndex];
 
+		if (!dataset._meta) {
 
+			dataset._meta = {};
 
+		}
 
+
 
+		var meta = dataset._meta[me.id];
 
+		if (!meta) {
 
+			meta = dataset._meta[me.id] = {
 
+				type: null,
 
+				data: [],
 
+				dataset: null,
 
+				controller: null,
 
+				hidden: null,			// See isDatasetVisible() comment
 
+				xAxisID: null,
 
+				yAxisID: null
 
+			};
 
+		}
 
+
 
+		return meta;
 
+	},
 
+
 
+	getVisibleDatasetCount: function() {
 
+		var count = 0;
 
+		for (var i = 0, ilen = this.data.datasets.length; i < ilen; ++i) {
 
+			if (this.isDatasetVisible(i)) {
 
+				count++;
 
+			}
 
+		}
 
+		return count;
 
+	},
 
+
 
+	isDatasetVisible: function(datasetIndex) {
 
+		var meta = this.getDatasetMeta(datasetIndex);
 
+
 
+		// meta.hidden is a per chart dataset hidden flag override with 3 states: if true or false,
 
+		// the dataset.hidden value is ignored, else if null, the dataset hidden state is returned.
 
+		return typeof meta.hidden === 'boolean' ? !meta.hidden : !this.data.datasets[datasetIndex].hidden;
 
+	},
 
+
 
+	generateLegend: function() {
 
+		return this.options.legendCallback(this);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	destroyDatasetMeta: function(datasetIndex) {
 
+		var id = this.id;
 
+		var dataset = this.data.datasets[datasetIndex];
 
+		var meta = dataset._meta && dataset._meta[id];
 
+
 
+		if (meta) {
 
+			meta.controller.destroy();
 
+			delete dataset._meta[id];
 
+		}
 
+	},
 
+
 
+	destroy: function() {
 
+		var me = this;
 
+		var canvas = me.canvas;
 
+		var i, ilen;
 
+
 
+		me.stop();
 
+
 
+		// dataset controllers need to cleanup associated data
 
+		for (i = 0, ilen = me.data.datasets.length; i < ilen; ++i) {
 
+			me.destroyDatasetMeta(i);
 
+		}
 
+
 
+		if (canvas) {
 
+			me.unbindEvents();
 
+			helpers$1.canvas.clear(me);
 
+			platform.releaseContext(me.ctx);
 
+			me.canvas = null;
 
+			me.ctx = null;
 
+		}
 
+
 
+		core_plugins.notify(me, 'destroy');
 
+
 
+		delete Chart.instances[me.id];
 
+	},
 
+
 
+	toBase64Image: function() {
 
+		return this.canvas.toDataURL.apply(this.canvas, arguments);
 
+	},
 
+
 
+	initToolTip: function() {
 
+		var me = this;
 
+		me.tooltip = new core_tooltip({
 
+			_chart: me,
 
+			_chartInstance: me, // deprecated, backward compatibility
 
+			_data: me.data,
 
+			_options: me.options.tooltips
 
+		}, me);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	bindEvents: function() {
 
+		var me = this;
 
+		var listeners = me._listeners = {};
 
+		var listener = function() {
 
+			me.eventHandler.apply(me, arguments);
 
+		};
 
+
 
+		helpers$1.each(me.options.events, function(type) {
 
+			platform.addEventListener(me, type, listener);
 
+			listeners[type] = listener;
 
+		});
 
+
 
+		// Elements used to detect size change should not be injected for non responsive charts.
 
+		// See https://github.com/chartjs/Chart.js/issues/2210
 
+		if (me.options.responsive) {
 
+			listener = function() {
 
+				me.resize();
 
+			};
 
+
 
+			platform.addEventListener(me, 'resize', listener);
 
+			listeners.resize = listener;
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	unbindEvents: function() {
 
+		var me = this;
 
+		var listeners = me._listeners;
 
+		if (!listeners) {
 
+			return;
 
+		}
 
+
 
+		delete me._listeners;
 
+		helpers$1.each(listeners, function(listener, type) {
 
+			platform.removeEventListener(me, type, listener);
 
+		});
 
+	},
 
+
 
+	updateHoverStyle: function(elements, mode, enabled) {
 
+		var method = enabled ? 'setHoverStyle' : 'removeHoverStyle';
 
+		var element, i, ilen;
 
+
 
+		for (i = 0, ilen = elements.length; i < ilen; ++i) {
 
+			element = elements[i];
 
+			if (element) {
 
+				this.getDatasetMeta(element._datasetIndex).controller[method](element);
 
+			}
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	eventHandler: function(e) {
 
+		var me = this;
 
+		var tooltip = me.tooltip;
 
+
 
+		if (core_plugins.notify(me, 'beforeEvent', [e]) === false) {
 
+			return;
 
+		}
 
+
 
+		// Buffer any update calls so that renders do not occur
 
+		me._bufferedRender = true;
 
+		me._bufferedRequest = null;
 
+
 
+		var changed = me.handleEvent(e);
 
+		// for smooth tooltip animations issue #4989
 
+		// the tooltip should be the source of change
 
+		// Animation check workaround:
 
+		// tooltip._start will be null when tooltip isn't animating
 
+		if (tooltip) {
 
+			changed = tooltip._start
 
+				? tooltip.handleEvent(e)
 
+				: changed | tooltip.handleEvent(e);
 
+		}
 
+
 
+		core_plugins.notify(me, 'afterEvent', [e]);
 
+
 
+		var bufferedRequest = me._bufferedRequest;
 
+		if (bufferedRequest) {
 
+			// If we have an update that was triggered, we need to do a normal render
 
+			me.render(bufferedRequest);
 
+		} else if (changed && !me.animating) {
 
+			// If entering, leaving, or changing elements, animate the change via pivot
 
+			me.stop();
 
+
 
+			// We only need to render at this point. Updating will cause scales to be
 
+			// recomputed generating flicker & using more memory than necessary.
 
+			me.render({
 
+				duration: me.options.hover.animationDuration,
 
+				lazy: true
 
+			});
 
+		}
 
+
 
+		me._bufferedRender = false;
 
+		me._bufferedRequest = null;
 
+
 
+		return me;
 
+	},
 
+
 
+	/**
 
+	 * Handle an event
 
+	 * @private
 
+	 * @param {IEvent} event the event to handle
 
+	 * @return {boolean} true if the chart needs to re-render
 
+	 */
 
+	handleEvent: function(e) {
 
+		var me = this;
 
+		var options = me.options || {};
 
+		var hoverOptions = options.hover;
 
+		var changed = false;
 
+
 
+		me.lastActive = me.lastActive || [];
 
+
 
+		// Find Active Elements for hover and tooltips
 
+		if (e.type === 'mouseout') {
 
+			me.active = [];
 
+		} else {
 
+			me.active = me.getElementsAtEventForMode(e, hoverOptions.mode, hoverOptions);
 
+		}
 
+
 
+		// Invoke onHover hook
 
+		// Need to call with native event here to not break backwards compatibility
 
+		helpers$1.callback(options.onHover || options.hover.onHover, [e.native, me.active], me);
 
+
 
+		if (e.type === 'mouseup' || e.type === 'click') {
 
+			if (options.onClick) {
 
+				// Use e.native here for backwards compatibility
 
+				options.onClick.call(me, e.native, me.active);
 
+			}
 
+		}
 
+
 
+		// Remove styling for last active (even if it may still be active)
 
+		if (me.lastActive.length) {
 
+			me.updateHoverStyle(me.lastActive, hoverOptions.mode, false);
 
+		}
 
+
 
+		// Built in hover styling
 
+		if (me.active.length && hoverOptions.mode) {
 
+			me.updateHoverStyle(me.active, hoverOptions.mode, true);
 
+		}
 
+
 
+		changed = !helpers$1.arrayEquals(me.active, me.lastActive);
 
+
 
+		// Remember Last Actives
 
+		me.lastActive = me.active;
 
+
 
+		return changed;
 
+	}
 
+});
 
+
 
+/**
 
+ * NOTE(SB) We actually don't use this container anymore but we need to keep it
 
+ * for backward compatibility. Though, it can still be useful for plugins that
 
+ * would need to work on multiple charts?!
 
+ */
 
+Chart.instances = {};
 
+
 
+var core_controller = Chart;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart instead.
 
+ * @class Chart.Controller
 
+ * @deprecated since version 2.6
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+Chart.Controller = Chart;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart
 
+ * @deprecated since version 2.8
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+Chart.types = {};
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart.helpers.configMerge
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.configMerge = mergeConfig;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart.helpers.scaleMerge
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.scaleMerge = mergeScaleConfig;
 
+
 
+var core_helpers = function() {
 
+
 
+	// -- Basic js utility methods
 
+
 
+	helpers$1.where = function(collection, filterCallback) {
 
+		if (helpers$1.isArray(collection) && Array.prototype.filter) {
 
+			return collection.filter(filterCallback);
 
+		}
 
+		var filtered = [];
 
+
 
+		helpers$1.each(collection, function(item) {
 
+			if (filterCallback(item)) {
 
+				filtered.push(item);
 
+			}
 
+		});
 
+
 
+		return filtered;
 
+	};
 
+	helpers$1.findIndex = Array.prototype.findIndex ?
 
+		function(array, callback, scope) {
 
+			return array.findIndex(callback, scope);
 
+		} :
 
+		function(array, callback, scope) {
 
+			scope = scope === undefined ? array : scope;
 
+			for (var i = 0, ilen = array.length; i < ilen; ++i) {
 
+				if (callback.call(scope, array[i], i, array)) {
 
+					return i;
 
+				}
 
+			}
 
+			return -1;
 
+		};
 
+	helpers$1.findNextWhere = function(arrayToSearch, filterCallback, startIndex) {
 
+		// Default to start of the array
 
+		if (helpers$1.isNullOrUndef(startIndex)) {
 
+			startIndex = -1;
 
+		}
 
+		for (var i = startIndex + 1; i < arrayToSearch.length; i++) {
 
+			var currentItem = arrayToSearch[i];
 
+			if (filterCallback(currentItem)) {
 
+				return currentItem;
 
+			}
 
+		}
 
+	};
 
+	helpers$1.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex) {
 
+		// Default to end of the array
 
+		if (helpers$1.isNullOrUndef(startIndex)) {
 
+			startIndex = arrayToSearch.length;
 
+		}
 
+		for (var i = startIndex - 1; i >= 0; i--) {
 
+			var currentItem = arrayToSearch[i];
 
+			if (filterCallback(currentItem)) {
 
+				return currentItem;
 
+			}
 
+		}
 
+	};
 
+
 
+	// -- Math methods
 
+	helpers$1.isNumber = function(n) {
 
+		return !isNaN(parseFloat(n)) && isFinite(n);
 
+	};
 
+	helpers$1.almostEquals = function(x, y, epsilon) {
 
+		return Math.abs(x - y) < epsilon;
 
+	};
 
+	helpers$1.almostWhole = function(x, epsilon) {
 
+		var rounded = Math.round(x);
 
+		return (((rounded - epsilon) < x) && ((rounded + epsilon) > x));
 
+	};
 
+	helpers$1.max = function(array) {
 
+		return array.reduce(function(max, value) {
 
+			if (!isNaN(value)) {
 
+				return Math.max(max, value);
 
+			}
 
+			return max;
 
+		}, Number.NEGATIVE_INFINITY);
 
+	};
 
+	helpers$1.min = function(array) {
 
+		return array.reduce(function(min, value) {
 
+			if (!isNaN(value)) {
 
+				return Math.min(min, value);
 
+			}
 
+			return min;
 
+		}, Number.POSITIVE_INFINITY);
 
+	};
 
+	helpers$1.sign = Math.sign ?
 
+		function(x) {
 
+			return Math.sign(x);
 
+		} :
 
+		function(x) {
 
+			x = +x; // convert to a number
 
+			if (x === 0 || isNaN(x)) {
 
+				return x;
 
+			}
 
+			return x > 0 ? 1 : -1;
 
+		};
 
+	helpers$1.log10 = Math.log10 ?
 
+		function(x) {
 
+			return Math.log10(x);
 
+		} :
 
+		function(x) {
 
+			var exponent = Math.log(x) * Math.LOG10E; // Math.LOG10E = 1 / Math.LN10.
 
+			// Check for whole powers of 10,
 
+			// which due to floating point rounding error should be corrected.
 
+			var powerOf10 = Math.round(exponent);
 
+			var isPowerOf10 = x === Math.pow(10, powerOf10);
 
+
 
+			return isPowerOf10 ? powerOf10 : exponent;
 
+		};
 
+	helpers$1.toRadians = function(degrees) {
 
+		return degrees * (Math.PI / 180);
 
+	};
 
+	helpers$1.toDegrees = function(radians) {
 
+		return radians * (180 / Math.PI);
 
+	};
 
+
 
+	/**
 
+	 * Returns the number of decimal places
 
+	 * i.e. the number of digits after the decimal point, of the value of this Number.
 
+	 * @param {number} x - A number.
 
+	 * @returns {number} The number of decimal places.
 
+	 * @private
 
+	 */
 
+	helpers$1._decimalPlaces = function(x) {
 
+		if (!helpers$1.isFinite(x)) {
 
+			return;
 
+		}
 
+		var e = 1;
 
+		var p = 0;
 
+		while (Math.round(x * e) / e !== x) {
 
+			e *= 10;
 
+			p++;
 
+		}
 
+		return p;
 
+	};
 
+
 
+	// Gets the angle from vertical upright to the point about a centre.
 
+	helpers$1.getAngleFromPoint = function(centrePoint, anglePoint) {
 
+		var distanceFromXCenter = anglePoint.x - centrePoint.x;
 
+		var distanceFromYCenter = anglePoint.y - centrePoint.y;
 
+		var radialDistanceFromCenter = Math.sqrt(distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
 
+
 
+		var angle = Math.atan2(distanceFromYCenter, distanceFromXCenter);
 
+
 
+		if (angle < (-0.5 * Math.PI)) {
 
+			angle += 2.0 * Math.PI; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
 
+		}
 
+
 
+		return {
 
+			angle: angle,
 
+			distance: radialDistanceFromCenter
 
+		};
 
+	};
 
+	helpers$1.distanceBetweenPoints = function(pt1, pt2) {
 
+		return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));
 
+	};
 
+
 
+	/**
 
+	 * Provided for backward compatibility, not available anymore
 
+	 * @function Chart.helpers.aliasPixel
 
+	 * @deprecated since version 2.8.0
 
+	 * @todo remove at version 3
 
+	 */
 
+	helpers$1.aliasPixel = function(pixelWidth) {
 
+		return (pixelWidth % 2 === 0) ? 0 : 0.5;
 
+	};
 
+
 
+	/**
 
+	 * Returns the aligned pixel value to avoid anti-aliasing blur
 
+	 * @param {Chart} chart - The chart instance.
 
+	 * @param {number} pixel - A pixel value.
 
+	 * @param {number} width - The width of the element.
 
+	 * @returns {number} The aligned pixel value.
 
+	 * @private
 
+	 */
 
+	helpers$1._alignPixel = function(chart, pixel, width) {
 
+		var devicePixelRatio = chart.currentDevicePixelRatio;
 
+		var halfWidth = width / 2;
 
+		return Math.round((pixel - halfWidth) * devicePixelRatio) / devicePixelRatio + halfWidth;
 
+	};
 
+
 
+	helpers$1.splineCurve = function(firstPoint, middlePoint, afterPoint, t) {
 
+		// Props to Rob Spencer at scaled innovation for his post on splining between points
 
+		// http://scaledinnovation.com/analytics/splines/aboutSplines.html
 
+
 
+		// This function must also respect "skipped" points
 
+
 
+		var previous = firstPoint.skip ? middlePoint : firstPoint;
 
+		var current = middlePoint;
 
+		var next = afterPoint.skip ? middlePoint : afterPoint;
 
+
 
+		var d01 = Math.sqrt(Math.pow(current.x - previous.x, 2) + Math.pow(current.y - previous.y, 2));
 
+		var d12 = Math.sqrt(Math.pow(next.x - current.x, 2) + Math.pow(next.y - current.y, 2));
 
+
 
+		var s01 = d01 / (d01 + d12);
 
+		var s12 = d12 / (d01 + d12);
 
+
 
+		// If all points are the same, s01 & s02 will be inf
 
+		s01 = isNaN(s01) ? 0 : s01;
 
+		s12 = isNaN(s12) ? 0 : s12;
 
+
 
+		var fa = t * s01; // scaling factor for triangle Ta
 
+		var fb = t * s12;
 
+
 
+		return {
 
+			previous: {
 
+				x: current.x - fa * (next.x - previous.x),
 
+				y: current.y - fa * (next.y - previous.y)
 
+			},
 
+			next: {
 
+				x: current.x + fb * (next.x - previous.x),
 
+				y: current.y + fb * (next.y - previous.y)
 
+			}
 
+		};
 
+	};
 
+	helpers$1.EPSILON = Number.EPSILON || 1e-14;
 
+	helpers$1.splineCurveMonotone = function(points) {
 
+		// This function calculates Bézier control points in a similar way than |splineCurve|,
 
+		// but preserves monotonicity of the provided data and ensures no local extremums are added
 
+		// between the dataset discrete points due to the interpolation.
 
+		// See : https://en.wikipedia.org/wiki/Monotone_cubic_interpolation
 
+
 
+		var pointsWithTangents = (points || []).map(function(point) {
 
+			return {
 
+				model: point._model,
 
+				deltaK: 0,
 
+				mK: 0
 
+			};
 
+		});
 
+
 
+		// Calculate slopes (deltaK) and initialize tangents (mK)
 
+		var pointsLen = pointsWithTangents.length;
 
+		var i, pointBefore, pointCurrent, pointAfter;
 
+		for (i = 0; i < pointsLen; ++i) {
 
+			pointCurrent = pointsWithTangents[i];
 
+			if (pointCurrent.model.skip) {
 
+				continue;
 
+			}
 
+
 
+			pointBefore = i > 0 ? pointsWithTangents[i - 1] : null;
 
+			pointAfter = i < pointsLen - 1 ? pointsWithTangents[i + 1] : null;
 
+			if (pointAfter && !pointAfter.model.skip) {
 
+				var slopeDeltaX = (pointAfter.model.x - pointCurrent.model.x);
 
+
 
+				// In the case of two points that appear at the same x pixel, slopeDeltaX is 0
 
+				pointCurrent.deltaK = slopeDeltaX !== 0 ? (pointAfter.model.y - pointCurrent.model.y) / slopeDeltaX : 0;
 
+			}
 
+
 
+			if (!pointBefore || pointBefore.model.skip) {
 
+				pointCurrent.mK = pointCurrent.deltaK;
 
+			} else if (!pointAfter || pointAfter.model.skip) {
 
+				pointCurrent.mK = pointBefore.deltaK;
 
+			} else if (this.sign(pointBefore.deltaK) !== this.sign(pointCurrent.deltaK)) {
 
+				pointCurrent.mK = 0;
 
+			} else {
 
+				pointCurrent.mK = (pointBefore.deltaK + pointCurrent.deltaK) / 2;
 
+			}
 
+		}
 
+
 
+		// Adjust tangents to ensure monotonic properties
 
+		var alphaK, betaK, tauK, squaredMagnitude;
 
+		for (i = 0; i < pointsLen - 1; ++i) {
 
+			pointCurrent = pointsWithTangents[i];
 
+			pointAfter = pointsWithTangents[i + 1];
 
+			if (pointCurrent.model.skip || pointAfter.model.skip) {
 
+				continue;
 
+			}
 
+
 
+			if (helpers$1.almostEquals(pointCurrent.deltaK, 0, this.EPSILON)) {
 
+				pointCurrent.mK = pointAfter.mK = 0;
 
+				continue;
 
+			}
 
+
 
+			alphaK = pointCurrent.mK / pointCurrent.deltaK;
 
+			betaK = pointAfter.mK / pointCurrent.deltaK;
 
+			squaredMagnitude = Math.pow(alphaK, 2) + Math.pow(betaK, 2);
 
+			if (squaredMagnitude <= 9) {
 
+				continue;
 
+			}
 
+
 
+			tauK = 3 / Math.sqrt(squaredMagnitude);
 
+			pointCurrent.mK = alphaK * tauK * pointCurrent.deltaK;
 
+			pointAfter.mK = betaK * tauK * pointCurrent.deltaK;
 
+		}
 
+
 
+		// Compute control points
 
+		var deltaX;
 
+		for (i = 0; i < pointsLen; ++i) {
 
+			pointCurrent = pointsWithTangents[i];
 
+			if (pointCurrent.model.skip) {
 
+				continue;
 
+			}
 
+
 
+			pointBefore = i > 0 ? pointsWithTangents[i - 1] : null;
 
+			pointAfter = i < pointsLen - 1 ? pointsWithTangents[i + 1] : null;
 
+			if (pointBefore && !pointBefore.model.skip) {
 
+				deltaX = (pointCurrent.model.x - pointBefore.model.x) / 3;
 
+				pointCurrent.model.controlPointPreviousX = pointCurrent.model.x - deltaX;
 
+				pointCurrent.model.controlPointPreviousY = pointCurrent.model.y - deltaX * pointCurrent.mK;
 
+			}
 
+			if (pointAfter && !pointAfter.model.skip) {
 
+				deltaX = (pointAfter.model.x - pointCurrent.model.x) / 3;
 
+				pointCurrent.model.controlPointNextX = pointCurrent.model.x + deltaX;
 
+				pointCurrent.model.controlPointNextY = pointCurrent.model.y + deltaX * pointCurrent.mK;
 
+			}
 
+		}
 
+	};
 
+	helpers$1.nextItem = function(collection, index, loop) {
 
+		if (loop) {
 
+			return index >= collection.length - 1 ? collection[0] : collection[index + 1];
 
+		}
 
+		return index >= collection.length - 1 ? collection[collection.length - 1] : collection[index + 1];
 
+	};
 
+	helpers$1.previousItem = function(collection, index, loop) {
 
+		if (loop) {
 
+			return index <= 0 ? collection[collection.length - 1] : collection[index - 1];
 
+		}
 
+		return index <= 0 ? collection[0] : collection[index - 1];
 
+	};
 
+	// Implementation of the nice number algorithm used in determining where axis labels will go
 
+	helpers$1.niceNum = function(range, round) {
 
+		var exponent = Math.floor(helpers$1.log10(range));
 
+		var fraction = range / Math.pow(10, exponent);
 
+		var niceFraction;
 
+
 
+		if (round) {
 
+			if (fraction < 1.5) {
 
+				niceFraction = 1;
 
+			} else if (fraction < 3) {
 
+				niceFraction = 2;
 
+			} else if (fraction < 7) {
 
+				niceFraction = 5;
 
+			} else {
 
+				niceFraction = 10;
 
+			}
 
+		} else if (fraction <= 1.0) {
 
+			niceFraction = 1;
 
+		} else if (fraction <= 2) {
 
+			niceFraction = 2;
 
+		} else if (fraction <= 5) {
 
+			niceFraction = 5;
 
+		} else {
 
+			niceFraction = 10;
 
+		}
 
+
 
+		return niceFraction * Math.pow(10, exponent);
 
+	};
 
+	// Request animation polyfill - https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
 
+	helpers$1.requestAnimFrame = (function() {
 
+		if (typeof window === 'undefined') {
 
+			return function(callback) {
 
+				callback();
 
+			};
 
+		}
 
+		return window.requestAnimationFrame ||
 
+			window.webkitRequestAnimationFrame ||
 
+			window.mozRequestAnimationFrame ||
 
+			window.oRequestAnimationFrame ||
 
+			window.msRequestAnimationFrame ||
 
+			function(callback) {
 
+				return window.setTimeout(callback, 1000 / 60);
 
+			};
 
+	}());
 
+	// -- DOM methods
 
+	helpers$1.getRelativePosition = function(evt, chart) {
 
+		var mouseX, mouseY;
 
+		var e = evt.originalEvent || evt;
 
+		var canvas = evt.target || evt.srcElement;
 
+		var boundingRect = canvas.getBoundingClientRect();
 
+
 
+		var touches = e.touches;
 
+		if (touches && touches.length > 0) {
 
+			mouseX = touches[0].clientX;
 
+			mouseY = touches[0].clientY;
 
+
 
+		} else {
 
+			mouseX = e.clientX;
 
+			mouseY = e.clientY;
 
+		}
 
+
 
+		// Scale mouse coordinates into canvas coordinates
 
+		// by following the pattern laid out by 'jerryj' in the comments of
 
+		// https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
 
+		var paddingLeft = parseFloat(helpers$1.getStyle(canvas, 'padding-left'));
 
+		var paddingTop = parseFloat(helpers$1.getStyle(canvas, 'padding-top'));
 
+		var paddingRight = parseFloat(helpers$1.getStyle(canvas, 'padding-right'));
 
+		var paddingBottom = parseFloat(helpers$1.getStyle(canvas, 'padding-bottom'));
 
+		var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
 
+		var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
 
+
 
+		// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
 
+		// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
 
+		mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
 
+		mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
 
+
 
+		return {
 
+			x: mouseX,
 
+			y: mouseY
 
+		};
 
+
 
+	};
 
+
 
+	// Private helper function to convert max-width/max-height values that may be percentages into a number
 
+	function parseMaxStyle(styleValue, node, parentProperty) {
 
+		var valueInPixels;
 
+		if (typeof styleValue === 'string') {
 
+			valueInPixels = parseInt(styleValue, 10);
 
+
 
+			if (styleValue.indexOf('%') !== -1) {
 
+				// percentage * size in dimension
 
+				valueInPixels = valueInPixels / 100 * node.parentNode[parentProperty];
 
+			}
 
+		} else {
 
+			valueInPixels = styleValue;
 
+		}
 
+
 
+		return valueInPixels;
 
+	}
 
+
 
+	/**
 
+	 * Returns if the given value contains an effective constraint.
 
+	 * @private
 
+	 */
 
+	function isConstrainedValue(value) {
 
+		return value !== undefined && value !== null && value !== 'none';
 
+	}
 
+
 
+	/**
 
+	 * Returns the max width or height of the given DOM node in a cross-browser compatible fashion
 
+	 * @param {HTMLElement} domNode - the node to check the constraint on
 
+	 * @param {string} maxStyle - the style that defines the maximum for the direction we are using ('max-width' / 'max-height')
 
+	 * @param {string} percentageProperty - property of parent to use when calculating width as a percentage
 
+	 * @see {@link https://www.nathanaeljones.com/blog/2013/reading-max-width-cross-browser}
 
+	 */
 
+	function getConstraintDimension(domNode, maxStyle, percentageProperty) {
 
+		var view = document.defaultView;
 
+		var parentNode = helpers$1._getParentNode(domNode);
 
+		var constrainedNode = view.getComputedStyle(domNode)[maxStyle];
 
+		var constrainedContainer = view.getComputedStyle(parentNode)[maxStyle];
 
+		var hasCNode = isConstrainedValue(constrainedNode);
 
+		var hasCContainer = isConstrainedValue(constrainedContainer);
 
+		var infinity = Number.POSITIVE_INFINITY;
 
+
 
+		if (hasCNode || hasCContainer) {
 
+			return Math.min(
 
+				hasCNode ? parseMaxStyle(constrainedNode, domNode, percentageProperty) : infinity,
 
+				hasCContainer ? parseMaxStyle(constrainedContainer, parentNode, percentageProperty) : infinity);
 
+		}
 
+
 
+		return 'none';
 
+	}
 
+	// returns Number or undefined if no constraint
 
+	helpers$1.getConstraintWidth = function(domNode) {
 
+		return getConstraintDimension(domNode, 'max-width', 'clientWidth');
 
+	};
 
+	// returns Number or undefined if no constraint
 
+	helpers$1.getConstraintHeight = function(domNode) {
 
+		return getConstraintDimension(domNode, 'max-height', 'clientHeight');
 
+	};
 
+	/**
 
+	 * @private
 
+ 	 */
 
+	helpers$1._calculatePadding = function(container, padding, parentDimension) {
 
+		padding = helpers$1.getStyle(container, padding);
 
+
 
+		return padding.indexOf('%') > -1 ? parentDimension * parseInt(padding, 10) / 100 : parseInt(padding, 10);
 
+	};
 
+	/**
 
+	 * @private
 
+	 */
 
+	helpers$1._getParentNode = function(domNode) {
 
+		var parent = domNode.parentNode;
 
+		if (parent && parent.toString() === '[object ShadowRoot]') {
 
+			parent = parent.host;
 
+		}
 
+		return parent;
 
+	};
 
+	helpers$1.getMaximumWidth = function(domNode) {
 
+		var container = helpers$1._getParentNode(domNode);
 
+		if (!container) {
 
+			return domNode.clientWidth;
 
+		}
 
+
 
+		var clientWidth = container.clientWidth;
 
+		var paddingLeft = helpers$1._calculatePadding(container, 'padding-left', clientWidth);
 
+		var paddingRight = helpers$1._calculatePadding(container, 'padding-right', clientWidth);
 
+
 
+		var w = clientWidth - paddingLeft - paddingRight;
 
+		var cw = helpers$1.getConstraintWidth(domNode);
 
+		return isNaN(cw) ? w : Math.min(w, cw);
 
+	};
 
+	helpers$1.getMaximumHeight = function(domNode) {
 
+		var container = helpers$1._getParentNode(domNode);
 
+		if (!container) {
 
+			return domNode.clientHeight;
 
+		}
 
+
 
+		var clientHeight = container.clientHeight;
 
+		var paddingTop = helpers$1._calculatePadding(container, 'padding-top', clientHeight);
 
+		var paddingBottom = helpers$1._calculatePadding(container, 'padding-bottom', clientHeight);
 
+
 
+		var h = clientHeight - paddingTop - paddingBottom;
 
+		var ch = helpers$1.getConstraintHeight(domNode);
 
+		return isNaN(ch) ? h : Math.min(h, ch);
 
+	};
 
+	helpers$1.getStyle = function(el, property) {
 
+		return el.currentStyle ?
 
+			el.currentStyle[property] :
 
+			document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
 
+	};
 
+	helpers$1.retinaScale = function(chart, forceRatio) {
 
+		var pixelRatio = chart.currentDevicePixelRatio = forceRatio || (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
 
+		if (pixelRatio === 1) {
 
+			return;
 
+		}
 
+
 
+		var canvas = chart.canvas;
 
+		var height = chart.height;
 
+		var width = chart.width;
 
+
 
+		canvas.height = height * pixelRatio;
 
+		canvas.width = width * pixelRatio;
 
+		chart.ctx.scale(pixelRatio, pixelRatio);
 
+
 
+		// If no style has been set on the canvas, the render size is used as display size,
 
+		// making the chart visually bigger, so let's enforce it to the "correct" values.
 
+		// See https://github.com/chartjs/Chart.js/issues/3575
 
+		if (!canvas.style.height && !canvas.style.width) {
 
+			canvas.style.height = height + 'px';
 
+			canvas.style.width = width + 'px';
 
+		}
 
+	};
 
+	// -- Canvas methods
 
+	helpers$1.fontString = function(pixelSize, fontStyle, fontFamily) {
 
+		return fontStyle + ' ' + pixelSize + 'px ' + fontFamily;
 
+	};
 
+	helpers$1.longestText = function(ctx, font, arrayOfThings, cache) {
 
+		cache = cache || {};
 
+		var data = cache.data = cache.data || {};
 
+		var gc = cache.garbageCollect = cache.garbageCollect || [];
 
+
 
+		if (cache.font !== font) {
 
+			data = cache.data = {};
 
+			gc = cache.garbageCollect = [];
 
+			cache.font = font;
 
+		}
 
+
 
+		ctx.font = font;
 
+		var longest = 0;
 
+		helpers$1.each(arrayOfThings, function(thing) {
 
+			// Undefined strings and arrays should not be measured
 
+			if (thing !== undefined && thing !== null && helpers$1.isArray(thing) !== true) {
 
+				longest = helpers$1.measureText(ctx, data, gc, longest, thing);
 
+			} else if (helpers$1.isArray(thing)) {
 
+				// if it is an array lets measure each element
 
+				// to do maybe simplify this function a bit so we can do this more recursively?
 
+				helpers$1.each(thing, function(nestedThing) {
 
+					// Undefined strings and arrays should not be measured
 
+					if (nestedThing !== undefined && nestedThing !== null && !helpers$1.isArray(nestedThing)) {
 
+						longest = helpers$1.measureText(ctx, data, gc, longest, nestedThing);
 
+					}
 
+				});
 
+			}
 
+		});
 
+
 
+		var gcLen = gc.length / 2;
 
+		if (gcLen > arrayOfThings.length) {
 
+			for (var i = 0; i < gcLen; i++) {
 
+				delete data[gc[i]];
 
+			}
 
+			gc.splice(0, gcLen);
 
+		}
 
+		return longest;
 
+	};
 
+	helpers$1.measureText = function(ctx, data, gc, longest, string) {
 
+		var textWidth = data[string];
 
+		if (!textWidth) {
 
+			textWidth = data[string] = ctx.measureText(string).width;
 
+			gc.push(string);
 
+		}
 
+		if (textWidth > longest) {
 
+			longest = textWidth;
 
+		}
 
+		return longest;
 
+	};
 
+	helpers$1.numberOfLabelLines = function(arrayOfThings) {
 
+		var numberOfLines = 1;
 
+		helpers$1.each(arrayOfThings, function(thing) {
 
+			if (helpers$1.isArray(thing)) {
 
+				if (thing.length > numberOfLines) {
 
+					numberOfLines = thing.length;
 
+				}
 
+			}
 
+		});
 
+		return numberOfLines;
 
+	};
 
+
 
+	helpers$1.color = !chartjsColor ?
 
+		function(value) {
 
+			console.error('Color.js not found!');
 
+			return value;
 
+		} :
 
+		function(value) {
 
+			/* global CanvasGradient */
 
+			if (value instanceof CanvasGradient) {
 
+				value = core_defaults.global.defaultColor;
 
+			}
 
+
 
+			return chartjsColor(value);
 
+		};
 
+
 
+	helpers$1.getHoverColor = function(colorValue) {
 
+		/* global CanvasPattern */
 
+		return (colorValue instanceof CanvasPattern || colorValue instanceof CanvasGradient) ?
 
+			colorValue :
 
+			helpers$1.color(colorValue).saturate(0.5).darken(0.1).rgbString();
 
+	};
 
+};
 
+
 
+function abstract() {
 
+	throw new Error(
 
+		'This method is not implemented: either no adapter can ' +
 
+		'be found or an incomplete integration was provided.'
 
+	);
 
+}
 
+
 
+/**
 
+ * Date adapter (current used by the time scale)
 
+ * @namespace Chart._adapters._date
 
+ * @memberof Chart._adapters
 
+ * @private
 
+ */
 
+
 
+/**
 
+ * Currently supported unit string values.
 
+ * @typedef {('millisecond'|'second'|'minute'|'hour'|'day'|'week'|'month'|'quarter'|'year')}
 
+ * @memberof Chart._adapters._date
 
+ * @name Unit
 
+ */
 
+
 
+/**
 
+ * @class
 
+ */
 
+function DateAdapter(options) {
 
+	this.options = options || {};
 
+}
 
+
 
+helpers$1.extend(DateAdapter.prototype, /** @lends DateAdapter */ {
 
+	/**
 
+	 * Returns a map of time formats for the supported formatting units defined
 
+	 * in Unit as well as 'datetime' representing a detailed date/time string.
 
+	 * @returns {{string: string}}
 
+	 */
 
+	formats: abstract,
 
+
 
+	/**
 
+	 * Parses the given `value` and return the associated timestamp.
 
+	 * @param {any} value - the value to parse (usually comes from the data)
 
+	 * @param {string} [format] - the expected data format
 
+	 * @returns {(number|null)}
 
+	 * @function
 
+	 */
 
+	parse: abstract,
 
+
 
+	/**
 
+	 * Returns the formatted date in the specified `format` for a given `timestamp`.
 
+	 * @param {number} timestamp - the timestamp to format
 
+	 * @param {string} format - the date/time token
 
+	 * @return {string}
 
+	 * @function
 
+	 */
 
+	format: abstract,
 
+
 
+	/**
 
+	 * Adds the specified `amount` of `unit` to the given `timestamp`.
 
+	 * @param {number} timestamp - the input timestamp
 
+	 * @param {number} amount - the amount to add
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @return {number}
 
+	 * @function
 
+	 */
 
+	add: abstract,
 
+
 
+	/**
 
+	 * Returns the number of `unit` between the given timestamps.
 
+	 * @param {number} max - the input timestamp (reference)
 
+	 * @param {number} min - the timestamp to substract
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @return {number}
 
+	 * @function
 
+	 */
 
+	diff: abstract,
 
+
 
+	/**
 
+	 * Returns start of `unit` for the given `timestamp`.
 
+	 * @param {number} timestamp - the input timestamp
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @param {number} [weekday] - the ISO day of the week with 1 being Monday
 
+	 * and 7 being Sunday (only needed if param *unit* is `isoWeek`).
 
+	 * @function
 
+	 */
 
+	startOf: abstract,
 
+
 
+	/**
 
+	 * Returns end of `unit` for the given `timestamp`.
 
+	 * @param {number} timestamp - the input timestamp
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @function
 
+	 */
 
+	endOf: abstract,
 
+
 
+	// DEPRECATIONS
 
+
 
+	/**
 
+	 * Provided for backward compatibility for scale.getValueForPixel(),
 
+	 * this method should be overridden only by the moment adapter.
 
+	 * @deprecated since version 2.8.0
 
+	 * @todo remove at version 3
 
+	 * @private
 
+	 */
 
+	_create: function(value) {
 
+		return value;
 
+	}
 
+});
 
+
 
+DateAdapter.override = function(members) {
 
+	helpers$1.extend(DateAdapter.prototype, members);
 
+};
 
+
 
+var _date = DateAdapter;
 
+
 
+var core_adapters = {
 
+	_date: _date
 
+};
 
+
 
+/**
 
+ * Namespace to hold static tick generation functions
 
+ * @namespace Chart.Ticks
 
+ */
 
+var core_ticks = {
 
+	/**
 
+	 * Namespace to hold formatters for different types of ticks
 
+	 * @namespace Chart.Ticks.formatters
 
+	 */
 
+	formatters: {
 
+		/**
 
+		 * Formatter for value labels
 
+		 * @method Chart.Ticks.formatters.values
 
+		 * @param value the value to display
 
+		 * @return {string|string[]} the label to display
 
+		 */
 
+		values: function(value) {
 
+			return helpers$1.isArray(value) ? value : '' + value;
 
+		},
 
+
 
+		/**
 
+		 * Formatter for linear numeric ticks
 
+		 * @method Chart.Ticks.formatters.linear
 
+		 * @param tickValue {number} the value to be formatted
 
+		 * @param index {number} the position of the tickValue parameter in the ticks array
 
+		 * @param ticks {number[]} the list of ticks being converted
 
+		 * @return {string} string representation of the tickValue parameter
 
+		 */
 
+		linear: function(tickValue, index, ticks) {
 
+			// If we have lots of ticks, don't use the ones
 
+			var delta = ticks.length > 3 ? ticks[2] - ticks[1] : ticks[1] - ticks[0];
 
+
 
+			// If we have a number like 2.5 as the delta, figure out how many decimal places we need
 
+			if (Math.abs(delta) > 1) {
 
+				if (tickValue !== Math.floor(tickValue)) {
 
+					// not an integer
 
+					delta = tickValue - Math.floor(tickValue);
 
+				}
 
+			}
 
+
 
+			var logDelta = helpers$1.log10(Math.abs(delta));
 
+			var tickString = '';
 
+
 
+			if (tickValue !== 0) {
 
+				var maxTick = Math.max(Math.abs(ticks[0]), Math.abs(ticks[ticks.length - 1]));
 
+				if (maxTick < 1e-4) { // all ticks are small numbers; use scientific notation
 
+					var logTick = helpers$1.log10(Math.abs(tickValue));
 
+					tickString = tickValue.toExponential(Math.floor(logTick) - Math.floor(logDelta));
 
+				} else {
 
+					var numDecimal = -1 * Math.floor(logDelta);
 
+					numDecimal = Math.max(Math.min(numDecimal, 20), 0); // toFixed has a max of 20 decimal places
 
+					tickString = tickValue.toFixed(numDecimal);
 
+				}
 
+			} else {
 
+				tickString = '0'; // never show decimal places for 0
 
+			}
 
+
 
+			return tickString;
 
+		},
 
+
 
+		logarithmic: function(tickValue, index, ticks) {
 
+			var remain = tickValue / (Math.pow(10, Math.floor(helpers$1.log10(tickValue))));
 
+
 
+			if (tickValue === 0) {
 
+				return '0';
 
+			} else if (remain === 1 || remain === 2 || remain === 5 || index === 0 || index === ticks.length - 1) {
 
+				return tickValue.toExponential();
 
+			}
 
+			return '';
 
+		}
 
+	}
 
+};
 
+
 
+var valueOrDefault$9 = helpers$1.valueOrDefault;
 
+var valueAtIndexOrDefault = helpers$1.valueAtIndexOrDefault;
 
+
 
+core_defaults._set('scale', {
 
+	display: true,
 
+	position: 'left',
 
+	offset: false,
 
+
 
+	// grid line settings
 
+	gridLines: {
 
+		display: true,
 
+		color: 'rgba(0, 0, 0, 0.1)',
 
+		lineWidth: 1,
 
+		drawBorder: true,
 
+		drawOnChartArea: true,
 
+		drawTicks: true,
 
+		tickMarkLength: 10,
 
+		zeroLineWidth: 1,
 
+		zeroLineColor: 'rgba(0,0,0,0.25)',
 
+		zeroLineBorderDash: [],
 
+		zeroLineBorderDashOffset: 0.0,
 
+		offsetGridLines: false,
 
+		borderDash: [],
 
+		borderDashOffset: 0.0
 
+	},
 
+
 
+	// scale label
 
+	scaleLabel: {
 
+		// display property
 
+		display: false,
 
+
 
+		// actual label
 
+		labelString: '',
 
+
 
+		// top/bottom padding
 
+		padding: {
 
+			top: 4,
 
+			bottom: 4
 
+		}
 
+	},
 
+
 
+	// label settings
 
+	ticks: {
 
+		beginAtZero: false,
 
+		minRotation: 0,
 
+		maxRotation: 50,
 
+		mirror: false,
 
+		padding: 0,
 
+		reverse: false,
 
+		display: true,
 
+		autoSkip: true,
 
+		autoSkipPadding: 0,
 
+		labelOffset: 0,
 
+		// We pass through arrays to be rendered as multiline labels, we convert Others to strings here.
 
+		callback: core_ticks.formatters.values,
 
+		minor: {},
 
+		major: {}
 
+	}
 
+});
 
+
 
+function labelsFromTicks(ticks) {
 
+	var labels = [];
 
+	var i, ilen;
 
+
 
+	for (i = 0, ilen = ticks.length; i < ilen; ++i) {
 
+		labels.push(ticks[i].label);
 
+	}
 
+
 
+	return labels;
 
+}
 
+
 
+function getPixelForGridLine(scale, index, offsetGridLines) {
 
+	var lineValue = scale.getPixelForTick(index);
 
+
 
+	if (offsetGridLines) {
 
+		if (scale.getTicks().length === 1) {
 
+			lineValue -= scale.isHorizontal() ?
 
+				Math.max(lineValue - scale.left, scale.right - lineValue) :
 
+				Math.max(lineValue - scale.top, scale.bottom - lineValue);
 
+		} else if (index === 0) {
 
+			lineValue -= (scale.getPixelForTick(1) - lineValue) / 2;
 
+		} else {
 
+			lineValue -= (lineValue - scale.getPixelForTick(index - 1)) / 2;
 
+		}
 
+	}
 
+	return lineValue;
 
+}
 
+
 
+function computeTextSize(context, tick, font) {
 
+	return helpers$1.isArray(tick) ?
 
+		helpers$1.longestText(context, font, tick) :
 
+		context.measureText(tick).width;
 
+}
 
+
 
+var core_scale = core_element.extend({
 
+	/**
 
+	 * Get the padding needed for the scale
 
+	 * @method getPadding
 
+	 * @private
 
+	 * @returns {Padding} the necessary padding
 
+	 */
 
+	getPadding: function() {
 
+		var me = this;
 
+		return {
 
+			left: me.paddingLeft || 0,
 
+			top: me.paddingTop || 0,
 
+			right: me.paddingRight || 0,
 
+			bottom: me.paddingBottom || 0
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Returns the scale tick objects ({label, major})
 
+	 * @since 2.7
 
+	 */
 
+	getTicks: function() {
 
+		return this._ticks;
 
+	},
 
+
 
+	// These methods are ordered by lifecyle. Utilities then follow.
 
+	// Any function defined here is inherited by all scale types.
 
+	// Any function can be extended by the scale type
 
+
 
+	mergeTicksOptions: function() {
 
+		var ticks = this.options.ticks;
 
+		if (ticks.minor === false) {
 
+			ticks.minor = {
 
+				display: false
 
+			};
 
+		}
 
+		if (ticks.major === false) {
 
+			ticks.major = {
 
+				display: false
 
+			};
 
+		}
 
+		for (var key in ticks) {
 
+			if (key !== 'major' && key !== 'minor') {
 
+				if (typeof ticks.minor[key] === 'undefined') {
 
+					ticks.minor[key] = ticks[key];
 
+				}
 
+				if (typeof ticks.major[key] === 'undefined') {
 
+					ticks.major[key] = ticks[key];
 
+				}
 
+			}
 
+		}
 
+	},
 
+	beforeUpdate: function() {
 
+		helpers$1.callback(this.options.beforeUpdate, [this]);
 
+	},
 
+
 
+	update: function(maxWidth, maxHeight, margins) {
 
+		var me = this;
 
+		var i, ilen, labels, label, ticks, tick;
 
+
 
+		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 
+		me.beforeUpdate();
 
+
 
+		// Absorb the master measurements
 
+		me.maxWidth = maxWidth;
 
+		me.maxHeight = maxHeight;
 
+		me.margins = helpers$1.extend({
 
+			left: 0,
 
+			right: 0,
 
+			top: 0,
 
+			bottom: 0
 
+		}, margins);
 
+
 
+		me._maxLabelLines = 0;
 
+		me.longestLabelWidth = 0;
 
+		me.longestTextCache = me.longestTextCache || {};
 
+
 
+		// Dimensions
 
+		me.beforeSetDimensions();
 
+		me.setDimensions();
 
+		me.afterSetDimensions();
 
+
 
+		// Data min/max
 
+		me.beforeDataLimits();
 
+		me.determineDataLimits();
 
+		me.afterDataLimits();
 
+
 
+		// Ticks - `this.ticks` is now DEPRECATED!
 
+		// Internal ticks are now stored as objects in the PRIVATE `this._ticks` member
 
+		// and must not be accessed directly from outside this class. `this.ticks` being
 
+		// around for long time and not marked as private, we can't change its structure
 
+		// without unexpected breaking changes. If you need to access the scale ticks,
 
+		// use scale.getTicks() instead.
 
+
 
+		me.beforeBuildTicks();
 
+
 
+		// New implementations should return an array of objects but for BACKWARD COMPAT,
 
+		// we still support no return (`this.ticks` internally set by calling this method).
 
+		ticks = me.buildTicks() || [];
 
+
 
+		// Allow modification of ticks in callback.
 
+		ticks = me.afterBuildTicks(ticks) || ticks;
 
+
 
+		me.beforeTickToLabelConversion();
 
+
 
+		// New implementations should return the formatted tick labels but for BACKWARD
 
+		// COMPAT, we still support no return (`this.ticks` internally changed by calling
 
+		// this method and supposed to contain only string values).
 
+		labels = me.convertTicksToLabels(ticks) || me.ticks;
 
+
 
+		me.afterTickToLabelConversion();
 
+
 
+		me.ticks = labels;   // BACKWARD COMPATIBILITY
 
+
 
+		// IMPORTANT: from this point, we consider that `this.ticks` will NEVER change!
 
+
 
+		// BACKWARD COMPAT: synchronize `_ticks` with labels (so potentially `this.ticks`)
 
+		for (i = 0, ilen = labels.length; i < ilen; ++i) {
 
+			label = labels[i];
 
+			tick = ticks[i];
 
+			if (!tick) {
 
+				ticks.push(tick = {
 
+					label: label,
 
+					major: false
 
+				});
 
+			} else {
 
+				tick.label = label;
 
+			}
 
+		}
 
+
 
+		me._ticks = ticks;
 
+
 
+		// Tick Rotation
 
+		me.beforeCalculateTickRotation();
 
+		me.calculateTickRotation();
 
+		me.afterCalculateTickRotation();
 
+		// Fit
 
+		me.beforeFit();
 
+		me.fit();
 
+		me.afterFit();
 
+		//
 
+		me.afterUpdate();
 
+
 
+		return me.minSize;
 
+
 
+	},
 
+	afterUpdate: function() {
 
+		helpers$1.callback(this.options.afterUpdate, [this]);
 
+	},
 
+
 
+	//
 
+
 
+	beforeSetDimensions: function() {
 
+		helpers$1.callback(this.options.beforeSetDimensions, [this]);
 
+	},
 
+	setDimensions: function() {
 
+		var me = this;
 
+		// Set the unconstrained dimension before label rotation
 
+		if (me.isHorizontal()) {
 
+			// Reset position before calculating rotation
 
+			me.width = me.maxWidth;
 
+			me.left = 0;
 
+			me.right = me.width;
 
+		} else {
 
+			me.height = me.maxHeight;
 
+
 
+			// Reset position before calculating rotation
 
+			me.top = 0;
 
+			me.bottom = me.height;
 
+		}
 
+
 
+		// Reset padding
 
+		me.paddingLeft = 0;
 
+		me.paddingTop = 0;
 
+		me.paddingRight = 0;
 
+		me.paddingBottom = 0;
 
+	},
 
+	afterSetDimensions: function() {
 
+		helpers$1.callback(this.options.afterSetDimensions, [this]);
 
+	},
 
+
 
+	// Data limits
 
+	beforeDataLimits: function() {
 
+		helpers$1.callback(this.options.beforeDataLimits, [this]);
 
+	},
 
+	determineDataLimits: helpers$1.noop,
 
+	afterDataLimits: function() {
 
+		helpers$1.callback(this.options.afterDataLimits, [this]);
 
+	},
 
+
 
+	//
 
+	beforeBuildTicks: function() {
 
+		helpers$1.callback(this.options.beforeBuildTicks, [this]);
 
+	},
 
+	buildTicks: helpers$1.noop,
 
+	afterBuildTicks: function(ticks) {
 
+		var me = this;
 
+		// ticks is empty for old axis implementations here
 
+		if (helpers$1.isArray(ticks) && ticks.length) {
 
+			return helpers$1.callback(me.options.afterBuildTicks, [me, ticks]);
 
+		}
 
+		// Support old implementations (that modified `this.ticks` directly in buildTicks)
 
+		me.ticks = helpers$1.callback(me.options.afterBuildTicks, [me, me.ticks]) || me.ticks;
 
+		return ticks;
 
+	},
 
+
 
+	beforeTickToLabelConversion: function() {
 
+		helpers$1.callback(this.options.beforeTickToLabelConversion, [this]);
 
+	},
 
+	convertTicksToLabels: function() {
 
+		var me = this;
 
+		// Convert ticks to strings
 
+		var tickOpts = me.options.ticks;
 
+		me.ticks = me.ticks.map(tickOpts.userCallback || tickOpts.callback, this);
 
+	},
 
+	afterTickToLabelConversion: function() {
 
+		helpers$1.callback(this.options.afterTickToLabelConversion, [this]);
 
+	},
 
+
 
+	//
 
+
 
+	beforeCalculateTickRotation: function() {
 
+		helpers$1.callback(this.options.beforeCalculateTickRotation, [this]);
 
+	},
 
+	calculateTickRotation: function() {
 
+		var me = this;
 
+		var context = me.ctx;
 
+		var tickOpts = me.options.ticks;
 
+		var labels = labelsFromTicks(me._ticks);
 
+
 
+		// Get the width of each grid by calculating the difference
 
+		// between x offsets between 0 and 1.
 
+		var tickFont = helpers$1.options._parseFont(tickOpts);
 
+		context.font = tickFont.string;
 
+
 
+		var labelRotation = tickOpts.minRotation || 0;
 
+
 
+		if (labels.length && me.options.display && me.isHorizontal()) {
 
+			var originalLabelWidth = helpers$1.longestText(context, tickFont.string, labels, me.longestTextCache);
 
+			var labelWidth = originalLabelWidth;
 
+			var cosRotation, sinRotation;
 
+
 
+			// Allow 3 pixels x2 padding either side for label readability
 
+			var tickWidth = me.getPixelForTick(1) - me.getPixelForTick(0) - 6;
 
+
 
+			// Max label rotation can be set or default to 90 - also act as a loop counter
 
+			while (labelWidth > tickWidth && labelRotation < tickOpts.maxRotation) {
 
+				var angleRadians = helpers$1.toRadians(labelRotation);
 
+				cosRotation = Math.cos(angleRadians);
 
+				sinRotation = Math.sin(angleRadians);
 
+
 
+				if (sinRotation * originalLabelWidth > me.maxHeight) {
 
+					// go back one step
 
+					labelRotation--;
 
+					break;
 
+				}
 
+
 
+				labelRotation++;
 
+				labelWidth = cosRotation * originalLabelWidth;
 
+			}
 
+		}
 
+
 
+		me.labelRotation = labelRotation;
 
+	},
 
+	afterCalculateTickRotation: function() {
 
+		helpers$1.callback(this.options.afterCalculateTickRotation, [this]);
 
+	},
 
+
 
+	//
 
+
 
+	beforeFit: function() {
 
+		helpers$1.callback(this.options.beforeFit, [this]);
 
+	},
 
+	fit: function() {
 
+		var me = this;
 
+		// Reset
 
+		var minSize = me.minSize = {
 
+			width: 0,
 
+			height: 0
 
+		};
 
+
 
+		var labels = labelsFromTicks(me._ticks);
 
+
 
+		var opts = me.options;
 
+		var tickOpts = opts.ticks;
 
+		var scaleLabelOpts = opts.scaleLabel;
 
+		var gridLineOpts = opts.gridLines;
 
+		var display = me._isVisible();
 
+		var position = opts.position;
 
+		var isHorizontal = me.isHorizontal();
 
+
 
+		var parseFont = helpers$1.options._parseFont;
 
+		var tickFont = parseFont(tickOpts);
 
+		var tickMarkLength = opts.gridLines.tickMarkLength;
 
+
 
+		// Width
 
+		if (isHorizontal) {
 
+			// subtract the margins to line up with the chartArea if we are a full width scale
 
+			minSize.width = me.isFullWidth() ? me.maxWidth - me.margins.left - me.margins.right : me.maxWidth;
 
+		} else {
 
+			minSize.width = display && gridLineOpts.drawTicks ? tickMarkLength : 0;
 
+		}
 
+
 
+		// height
 
+		if (isHorizontal) {
 
+			minSize.height = display && gridLineOpts.drawTicks ? tickMarkLength : 0;
 
+		} else {
 
+			minSize.height = me.maxHeight; // fill all the height
 
+		}
 
+
 
+		// Are we showing a title for the scale?
 
+		if (scaleLabelOpts.display && display) {
 
+			var scaleLabelFont = parseFont(scaleLabelOpts);
 
+			var scaleLabelPadding = helpers$1.options.toPadding(scaleLabelOpts.padding);
 
+			var deltaHeight = scaleLabelFont.lineHeight + scaleLabelPadding.height;
 
+
 
+			if (isHorizontal) {
 
+				minSize.height += deltaHeight;
 
+			} else {
 
+				minSize.width += deltaHeight;
 
+			}
 
+		}
 
+
 
+		// Don't bother fitting the ticks if we are not showing the labels
 
+		if (tickOpts.display && display) {
 
+			var largestTextWidth = helpers$1.longestText(me.ctx, tickFont.string, labels, me.longestTextCache);
 
+			var tallestLabelHeightInLines = helpers$1.numberOfLabelLines(labels);
 
+			var lineSpace = tickFont.size * 0.5;
 
+			var tickPadding = me.options.ticks.padding;
 
+
 
+			// Store max number of lines and widest label for _autoSkip
 
+			me._maxLabelLines = tallestLabelHeightInLines;
 
+			me.longestLabelWidth = largestTextWidth;
 
+
 
+			if (isHorizontal) {
 
+				var angleRadians = helpers$1.toRadians(me.labelRotation);
 
+				var cosRotation = Math.cos(angleRadians);
 
+				var sinRotation = Math.sin(angleRadians);
 
+
 
+				// TODO - improve this calculation
 
+				var labelHeight = (sinRotation * largestTextWidth)
 
+					+ (tickFont.lineHeight * tallestLabelHeightInLines)
 
+					+ lineSpace; // padding
 
+
 
+				minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding);
 
+
 
+				me.ctx.font = tickFont.string;
 
+				var firstLabelWidth = computeTextSize(me.ctx, labels[0], tickFont.string);
 
+				var lastLabelWidth = computeTextSize(me.ctx, labels[labels.length - 1], tickFont.string);
 
+				var offsetLeft = me.getPixelForTick(0) - me.left;
 
+				var offsetRight = me.right - me.getPixelForTick(labels.length - 1);
 
+				var paddingLeft, paddingRight;
 
+
 
+				// Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned
 
+				// which means that the right padding is dominated by the font height
 
+				if (me.labelRotation !== 0) {
 
+					paddingLeft = position === 'bottom' ? (cosRotation * firstLabelWidth) : (cosRotation * lineSpace);
 
+					paddingRight = position === 'bottom' ? (cosRotation * lineSpace) : (cosRotation * lastLabelWidth);
 
+				} else {
 
+					paddingLeft = firstLabelWidth / 2;
 
+					paddingRight = lastLabelWidth / 2;
 
+				}
 
+				me.paddingLeft = Math.max(paddingLeft - offsetLeft, 0) + 3; // add 3 px to move away from canvas edges
 
+				me.paddingRight = Math.max(paddingRight - offsetRight, 0) + 3;
 
+			} else {
 
+				// A vertical axis is more constrained by the width. Labels are the
 
+				// dominant factor here, so get that length first and account for padding
 
+				if (tickOpts.mirror) {
 
+					largestTextWidth = 0;
 
+				} else {
 
+					// use lineSpace for consistency with horizontal axis
 
+					// tickPadding is not implemented for horizontal
 
+					largestTextWidth += tickPadding + lineSpace;
 
+				}
 
+
 
+				minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
 
+
 
+				me.paddingTop = tickFont.size / 2;
 
+				me.paddingBottom = tickFont.size / 2;
 
+			}
 
+		}
 
+
 
+		me.handleMargins();
 
+
 
+		me.width = minSize.width;
 
+		me.height = minSize.height;
 
+	},
 
+
 
+	/**
 
+	 * Handle margins and padding interactions
 
+	 * @private
 
+	 */
 
+	handleMargins: function() {
 
+		var me = this;
 
+		if (me.margins) {
 
+			me.paddingLeft = Math.max(me.paddingLeft - me.margins.left, 0);
 
+			me.paddingTop = Math.max(me.paddingTop - me.margins.top, 0);
 
+			me.paddingRight = Math.max(me.paddingRight - me.margins.right, 0);
 
+			me.paddingBottom = Math.max(me.paddingBottom - me.margins.bottom, 0);
 
+		}
 
+	},
 
+
 
+	afterFit: function() {
 
+		helpers$1.callback(this.options.afterFit, [this]);
 
+	},
 
+
 
+	// Shared Methods
 
+	isHorizontal: function() {
 
+		return this.options.position === 'top' || this.options.position === 'bottom';
 
+	},
 
+	isFullWidth: function() {
 
+		return (this.options.fullWidth);
 
+	},
 
+
 
+	// Get the correct value. NaN bad inputs, If the value type is object get the x or y based on whether we are horizontal or not
 
+	getRightValue: function(rawValue) {
 
+		// Null and undefined values first
 
+		if (helpers$1.isNullOrUndef(rawValue)) {
 
+			return NaN;
 
+		}
 
+		// isNaN(object) returns true, so make sure NaN is checking for a number; Discard Infinite values
 
+		if ((typeof rawValue === 'number' || rawValue instanceof Number) && !isFinite(rawValue)) {
 
+			return NaN;
 
+		}
 
+		// If it is in fact an object, dive in one more level
 
+		if (rawValue) {
 
+			if (this.isHorizontal()) {
 
+				if (rawValue.x !== undefined) {
 
+					return this.getRightValue(rawValue.x);
 
+				}
 
+			} else if (rawValue.y !== undefined) {
 
+				return this.getRightValue(rawValue.y);
 
+			}
 
+		}
 
+
 
+		// Value is good, return it
 
+		return rawValue;
 
+	},
 
+
 
+	/**
 
+	 * Used to get the value to display in the tooltip for the data at the given index
 
+	 * @param index
 
+	 * @param datasetIndex
 
+	 */
 
+	getLabelForIndex: helpers$1.noop,
 
+
 
+	/**
 
+	 * Returns the location of the given data point. Value can either be an index or a numerical value
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 * @param value
 
+	 * @param index
 
+	 * @param datasetIndex
 
+	 */
 
+	getPixelForValue: helpers$1.noop,
 
+
 
+	/**
 
+	 * Used to get the data value from a given pixel. This is the inverse of getPixelForValue
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 * @param pixel
 
+	 */
 
+	getValueForPixel: helpers$1.noop,
 
+
 
+	/**
 
+	 * Returns the location of the tick at the given index
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 */
 
+	getPixelForTick: function(index) {
 
+		var me = this;
 
+		var offset = me.options.offset;
 
+		if (me.isHorizontal()) {
 
+			var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
 
+			var tickWidth = innerWidth / Math.max((me._ticks.length - (offset ? 0 : 1)), 1);
 
+			var pixel = (tickWidth * index) + me.paddingLeft;
 
+
 
+			if (offset) {
 
+				pixel += tickWidth / 2;
 
+			}
 
+
 
+			var finalVal = me.left + pixel;
 
+			finalVal += me.isFullWidth() ? me.margins.left : 0;
 
+			return finalVal;
 
+		}
 
+		var innerHeight = me.height - (me.paddingTop + me.paddingBottom);
 
+		return me.top + (index * (innerHeight / (me._ticks.length - 1)));
 
+	},
 
+
 
+	/**
 
+	 * Utility for getting the pixel location of a percentage of scale
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 */
 
+	getPixelForDecimal: function(decimal) {
 
+		var me = this;
 
+		if (me.isHorizontal()) {
 
+			var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
 
+			var valueOffset = (innerWidth * decimal) + me.paddingLeft;
 
+
 
+			var finalVal = me.left + valueOffset;
 
+			finalVal += me.isFullWidth() ? me.margins.left : 0;
 
+			return finalVal;
 
+		}
 
+		return me.top + (decimal * me.height);
 
+	},
 
+
 
+	/**
 
+	 * Returns the pixel for the minimum chart value
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 */
 
+	getBasePixel: function() {
 
+		return this.getPixelForValue(this.getBaseValue());
 
+	},
 
+
 
+	getBaseValue: function() {
 
+		var me = this;
 
+		var min = me.min;
 
+		var max = me.max;
 
+
 
+		return me.beginAtZero ? 0 :
 
+			min < 0 && max < 0 ? max :
 
+			min > 0 && max > 0 ? min :
 
+			0;
 
+	},
 
+
 
+	/**
 
+	 * Returns a subset of ticks to be plotted to avoid overlapping labels.
 
+	 * @private
 
+	 */
 
+	_autoSkip: function(ticks) {
 
+		var me = this;
 
+		var isHorizontal = me.isHorizontal();
 
+		var optionTicks = me.options.ticks.minor;
 
+		var tickCount = ticks.length;
 
+		var skipRatio = false;
 
+		var maxTicks = optionTicks.maxTicksLimit;
 
+
 
+		// Total space needed to display all ticks. First and last ticks are
 
+		// drawn as their center at end of axis, so tickCount-1
 
+		var ticksLength = me._tickSize() * (tickCount - 1);
 
+
 
+		// Axis length
 
+		var axisLength = isHorizontal
 
+			? me.width - (me.paddingLeft + me.paddingRight)
 
+			: me.height - (me.paddingTop + me.PaddingBottom);
 
+
 
+		var result = [];
 
+		var i, tick;
 
+
 
+		if (ticksLength > axisLength) {
 
+			skipRatio = 1 + Math.floor(ticksLength / axisLength);
 
+		}
 
+
 
+		// if they defined a max number of optionTicks,
 
+		// increase skipRatio until that number is met
 
+		if (tickCount > maxTicks) {
 
+			skipRatio = Math.max(skipRatio, 1 + Math.floor(tickCount / maxTicks));
 
+		}
 
+
 
+		for (i = 0; i < tickCount; i++) {
 
+			tick = ticks[i];
 
+
 
+			if (skipRatio > 1 && i % skipRatio > 0) {
 
+				// leave tick in place but make sure it's not displayed (#4635)
 
+				delete tick.label;
 
+			}
 
+			result.push(tick);
 
+		}
 
+		return result;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_tickSize: function() {
 
+		var me = this;
 
+		var isHorizontal = me.isHorizontal();
 
+		var optionTicks = me.options.ticks.minor;
 
+
 
+		// Calculate space needed by label in axis direction.
 
+		var rot = helpers$1.toRadians(me.labelRotation);
 
+		var cos = Math.abs(Math.cos(rot));
 
+		var sin = Math.abs(Math.sin(rot));
 
+
 
+		var padding = optionTicks.autoSkipPadding || 0;
 
+		var w = (me.longestLabelWidth + padding) || 0;
 
+
 
+		var tickFont = helpers$1.options._parseFont(optionTicks);
 
+		var h = (me._maxLabelLines * tickFont.lineHeight + padding) || 0;
 
+
 
+		// Calculate space needed for 1 tick in axis direction.
 
+		return isHorizontal
 
+			? h * cos > w * sin ? w / cos : h / sin
 
+			: h * sin < w * cos ? h / cos : w / sin;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_isVisible: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var display = me.options.display;
 
+		var i, ilen, meta;
 
+
 
+		if (display !== 'auto') {
 
+			return !!display;
 
+		}
 
+
 
+		// When 'auto', the scale is visible if at least one associated dataset is visible.
 
+		for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
 
+			if (chart.isDatasetVisible(i)) {
 
+				meta = chart.getDatasetMeta(i);
 
+				if (meta.xAxisID === me.id || meta.yAxisID === me.id) {
 
+					return true;
 
+				}
 
+			}
 
+		}
 
+
 
+		return false;
 
+	},
 
+
 
+	/**
 
+	 * Actually draw the scale on the canvas
 
+	 * @param {object} chartArea - the area of the chart to draw full grid lines on
 
+	 */
 
+	draw: function(chartArea) {
 
+		var me = this;
 
+		var options = me.options;
 
+
 
+		if (!me._isVisible()) {
 
+			return;
 
+		}
 
+
 
+		var chart = me.chart;
 
+		var context = me.ctx;
 
+		var globalDefaults = core_defaults.global;
 
+		var defaultFontColor = globalDefaults.defaultFontColor;
 
+		var optionTicks = options.ticks.minor;
 
+		var optionMajorTicks = options.ticks.major || optionTicks;
 
+		var gridLines = options.gridLines;
 
+		var scaleLabel = options.scaleLabel;
 
+		var position = options.position;
 
+
 
+		var isRotated = me.labelRotation !== 0;
 
+		var isMirrored = optionTicks.mirror;
 
+		var isHorizontal = me.isHorizontal();
 
+
 
+		var parseFont = helpers$1.options._parseFont;
 
+		var ticks = optionTicks.display && optionTicks.autoSkip ? me._autoSkip(me.getTicks()) : me.getTicks();
 
+		var tickFontColor = valueOrDefault$9(optionTicks.fontColor, defaultFontColor);
 
+		var tickFont = parseFont(optionTicks);
 
+		var lineHeight = tickFont.lineHeight;
 
+		var majorTickFontColor = valueOrDefault$9(optionMajorTicks.fontColor, defaultFontColor);
 
+		var majorTickFont = parseFont(optionMajorTicks);
 
+		var tickPadding = optionTicks.padding;
 
+		var labelOffset = optionTicks.labelOffset;
 
+
 
+		var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0;
 
+
 
+		var scaleLabelFontColor = valueOrDefault$9(scaleLabel.fontColor, defaultFontColor);
 
+		var scaleLabelFont = parseFont(scaleLabel);
 
+		var scaleLabelPadding = helpers$1.options.toPadding(scaleLabel.padding);
 
+		var labelRotationRadians = helpers$1.toRadians(me.labelRotation);
 
+
 
+		var itemsToDraw = [];
 
+
 
+		var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
 
+		var alignPixel = helpers$1._alignPixel;
 
+		var borderValue, tickStart, tickEnd;
 
+
 
+		if (position === 'top') {
 
+			borderValue = alignPixel(chart, me.bottom, axisWidth);
 
+			tickStart = me.bottom - tl;
 
+			tickEnd = borderValue - axisWidth / 2;
 
+		} else if (position === 'bottom') {
 
+			borderValue = alignPixel(chart, me.top, axisWidth);
 
+			tickStart = borderValue + axisWidth / 2;
 
+			tickEnd = me.top + tl;
 
+		} else if (position === 'left') {
 
+			borderValue = alignPixel(chart, me.right, axisWidth);
 
+			tickStart = me.right - tl;
 
+			tickEnd = borderValue - axisWidth / 2;
 
+		} else {
 
+			borderValue = alignPixel(chart, me.left, axisWidth);
 
+			tickStart = borderValue + axisWidth / 2;
 
+			tickEnd = me.left + tl;
 
+		}
 
+
 
+		var epsilon = 0.0000001; // 0.0000001 is margin in pixels for Accumulated error.
 
+
 
+		helpers$1.each(ticks, function(tick, index) {
 
+			// autoskipper skipped this tick (#4635)
 
+			if (helpers$1.isNullOrUndef(tick.label)) {
 
+				return;
 
+			}
 
+
 
+			var label = tick.label;
 
+			var lineWidth, lineColor, borderDash, borderDashOffset;
 
+			if (index === me.zeroLineIndex && options.offset === gridLines.offsetGridLines) {
 
+				// Draw the first index specially
 
+				lineWidth = gridLines.zeroLineWidth;
 
+				lineColor = gridLines.zeroLineColor;
 
+				borderDash = gridLines.zeroLineBorderDash || [];
 
+				borderDashOffset = gridLines.zeroLineBorderDashOffset || 0.0;
 
+			} else {
 
+				lineWidth = valueAtIndexOrDefault(gridLines.lineWidth, index);
 
+				lineColor = valueAtIndexOrDefault(gridLines.color, index);
 
+				borderDash = gridLines.borderDash || [];
 
+				borderDashOffset = gridLines.borderDashOffset || 0.0;
 
+			}
 
+
 
+			// Common properties
 
+			var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY, textOffset, textAlign;
 
+			var labelCount = helpers$1.isArray(label) ? label.length : 1;
 
+			var lineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);
 
+
 
+			if (isHorizontal) {
 
+				var labelYOffset = tl + tickPadding;
 
+
 
+				if (lineValue < me.left - epsilon) {
 
+					lineColor = 'rgba(0,0,0,0)';
 
+				}
 
+
 
+				tx1 = tx2 = x1 = x2 = alignPixel(chart, lineValue, lineWidth);
 
+				ty1 = tickStart;
 
+				ty2 = tickEnd;
 
+				labelX = me.getPixelForTick(index) + labelOffset; // x values for optionTicks (need to consider offsetLabel option)
 
+
 
+				if (position === 'top') {
 
+					y1 = alignPixel(chart, chartArea.top, axisWidth) + axisWidth / 2;
 
+					y2 = chartArea.bottom;
 
+					textOffset = ((!isRotated ? 0.5 : 1) - labelCount) * lineHeight;
 
+					textAlign = !isRotated ? 'center' : 'left';
 
+					labelY = me.bottom - labelYOffset;
 
+				} else {
 
+					y1 = chartArea.top;
 
+					y2 = alignPixel(chart, chartArea.bottom, axisWidth) - axisWidth / 2;
 
+					textOffset = (!isRotated ? 0.5 : 0) * lineHeight;
 
+					textAlign = !isRotated ? 'center' : 'right';
 
+					labelY = me.top + labelYOffset;
 
+				}
 
+			} else {
 
+				var labelXOffset = (isMirrored ? 0 : tl) + tickPadding;
 
+
 
+				if (lineValue < me.top - epsilon) {
 
+					lineColor = 'rgba(0,0,0,0)';
 
+				}
 
+
 
+				tx1 = tickStart;
 
+				tx2 = tickEnd;
 
+				ty1 = ty2 = y1 = y2 = alignPixel(chart, lineValue, lineWidth);
 
+				labelY = me.getPixelForTick(index) + labelOffset;
 
+				textOffset = (1 - labelCount) * lineHeight / 2;
 
+
 
+				if (position === 'left') {
 
+					x1 = alignPixel(chart, chartArea.left, axisWidth) + axisWidth / 2;
 
+					x2 = chartArea.right;
 
+					textAlign = isMirrored ? 'left' : 'right';
 
+					labelX = me.right - labelXOffset;
 
+				} else {
 
+					x1 = chartArea.left;
 
+					x2 = alignPixel(chart, chartArea.right, axisWidth) - axisWidth / 2;
 
+					textAlign = isMirrored ? 'right' : 'left';
 
+					labelX = me.left + labelXOffset;
 
+				}
 
+			}
 
+
 
+			itemsToDraw.push({
 
+				tx1: tx1,
 
+				ty1: ty1,
 
+				tx2: tx2,
 
+				ty2: ty2,
 
+				x1: x1,
 
+				y1: y1,
 
+				x2: x2,
 
+				y2: y2,
 
+				labelX: labelX,
 
+				labelY: labelY,
 
+				glWidth: lineWidth,
 
+				glColor: lineColor,
 
+				glBorderDash: borderDash,
 
+				glBorderDashOffset: borderDashOffset,
 
+				rotation: -1 * labelRotationRadians,
 
+				label: label,
 
+				major: tick.major,
 
+				textOffset: textOffset,
 
+				textAlign: textAlign
 
+			});
 
+		});
 
+
 
+		// Draw all of the tick labels, tick marks, and grid lines at the correct places
 
+		helpers$1.each(itemsToDraw, function(itemToDraw) {
 
+			var glWidth = itemToDraw.glWidth;
 
+			var glColor = itemToDraw.glColor;
 
+
 
+			if (gridLines.display && glWidth && glColor) {
 
+				context.save();
 
+				context.lineWidth = glWidth;
 
+				context.strokeStyle = glColor;
 
+				if (context.setLineDash) {
 
+					context.setLineDash(itemToDraw.glBorderDash);
 
+					context.lineDashOffset = itemToDraw.glBorderDashOffset;
 
+				}
 
+
 
+				context.beginPath();
 
+
 
+				if (gridLines.drawTicks) {
 
+					context.moveTo(itemToDraw.tx1, itemToDraw.ty1);
 
+					context.lineTo(itemToDraw.tx2, itemToDraw.ty2);
 
+				}
 
+
 
+				if (gridLines.drawOnChartArea) {
 
+					context.moveTo(itemToDraw.x1, itemToDraw.y1);
 
+					context.lineTo(itemToDraw.x2, itemToDraw.y2);
 
+				}
 
+
 
+				context.stroke();
 
+				context.restore();
 
+			}
 
+
 
+			if (optionTicks.display) {
 
+				// Make sure we draw text in the correct color and font
 
+				context.save();
 
+				context.translate(itemToDraw.labelX, itemToDraw.labelY);
 
+				context.rotate(itemToDraw.rotation);
 
+				context.font = itemToDraw.major ? majorTickFont.string : tickFont.string;
 
+				context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
 
+				context.textBaseline = 'middle';
 
+				context.textAlign = itemToDraw.textAlign;
 
+
 
+				var label = itemToDraw.label;
 
+				var y = itemToDraw.textOffset;
 
+				if (helpers$1.isArray(label)) {
 
+					for (var i = 0; i < label.length; ++i) {
 
+						// We just make sure the multiline element is a string here..
 
+						context.fillText('' + label[i], 0, y);
 
+						y += lineHeight;
 
+					}
 
+				} else {
 
+					context.fillText(label, 0, y);
 
+				}
 
+				context.restore();
 
+			}
 
+		});
 
+
 
+		if (scaleLabel.display) {
 
+			// Draw the scale label
 
+			var scaleLabelX;
 
+			var scaleLabelY;
 
+			var rotation = 0;
 
+			var halfLineHeight = scaleLabelFont.lineHeight / 2;
 
+
 
+			if (isHorizontal) {
 
+				scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
 
+				scaleLabelY = position === 'bottom'
 
+					? me.bottom - halfLineHeight - scaleLabelPadding.bottom
 
+					: me.top + halfLineHeight + scaleLabelPadding.top;
 
+			} else {
 
+				var isLeft = position === 'left';
 
+				scaleLabelX = isLeft
 
+					? me.left + halfLineHeight + scaleLabelPadding.top
 
+					: me.right - halfLineHeight - scaleLabelPadding.top;
 
+				scaleLabelY = me.top + ((me.bottom - me.top) / 2);
 
+				rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
 
+			}
 
+
 
+			context.save();
 
+			context.translate(scaleLabelX, scaleLabelY);
 
+			context.rotate(rotation);
 
+			context.textAlign = 'center';
 
+			context.textBaseline = 'middle';
 
+			context.fillStyle = scaleLabelFontColor; // render in correct colour
 
+			context.font = scaleLabelFont.string;
 
+			context.fillText(scaleLabel.labelString, 0, 0);
 
+			context.restore();
 
+		}
 
+
 
+		if (axisWidth) {
 
+			// Draw the line at the edge of the axis
 
+			var firstLineWidth = axisWidth;
 
+			var lastLineWidth = valueAtIndexOrDefault(gridLines.lineWidth, ticks.length - 1, 0);
 
+			var x1, x2, y1, y2;
 
+
 
+			if (isHorizontal) {
 
+				x1 = alignPixel(chart, me.left, firstLineWidth) - firstLineWidth / 2;
 
+				x2 = alignPixel(chart, me.right, lastLineWidth) + lastLineWidth / 2;
 
+				y1 = y2 = borderValue;
 
+			} else {
 
+				y1 = alignPixel(chart, me.top, firstLineWidth) - firstLineWidth / 2;
 
+				y2 = alignPixel(chart, me.bottom, lastLineWidth) + lastLineWidth / 2;
 
+				x1 = x2 = borderValue;
 
+			}
 
+
 
+			context.lineWidth = axisWidth;
 
+			context.strokeStyle = valueAtIndexOrDefault(gridLines.color, 0);
 
+			context.beginPath();
 
+			context.moveTo(x1, y1);
 
+			context.lineTo(x2, y2);
 
+			context.stroke();
 
+		}
 
+	}
 
+});
 
+
 
+var defaultConfig = {
 
+	position: 'bottom'
 
+};
 
+
 
+var scale_category = core_scale.extend({
 
+	/**
 
+	* Internal function to get the correct labels. If data.xLabels or data.yLabels are defined, use those
 
+	* else fall back to data.labels
 
+	* @private
 
+	*/
 
+	getLabels: function() {
 
+		var data = this.chart.data;
 
+		return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels;
 
+	},
 
+
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var labels = me.getLabels();
 
+		me.minIndex = 0;
 
+		me.maxIndex = labels.length - 1;
 
+		var findIndex;
 
+
 
+		if (me.options.ticks.min !== undefined) {
 
+			// user specified min value
 
+			findIndex = labels.indexOf(me.options.ticks.min);
 
+			me.minIndex = findIndex !== -1 ? findIndex : me.minIndex;
 
+		}
 
+
 
+		if (me.options.ticks.max !== undefined) {
 
+			// user specified max value
 
+			findIndex = labels.indexOf(me.options.ticks.max);
 
+			me.maxIndex = findIndex !== -1 ? findIndex : me.maxIndex;
 
+		}
 
+
 
+		me.min = labels[me.minIndex];
 
+		me.max = labels[me.maxIndex];
 
+	},
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var labels = me.getLabels();
 
+		// If we are viewing some subset of labels, slice the original array
 
+		me.ticks = (me.minIndex === 0 && me.maxIndex === labels.length - 1) ? labels : labels.slice(me.minIndex, me.maxIndex + 1);
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+
 
+		if (chart.getDatasetMeta(datasetIndex).controller._getValueScaleId() === me.id) {
 
+			return me.getRightValue(chart.data.datasets[datasetIndex].data[index]);
 
+		}
 
+
 
+		return me.ticks[index - me.minIndex];
 
+	},
 
+
 
+	// Used to get data value locations.  Value can either be an index or a numerical value
 
+	getPixelForValue: function(value, index) {
 
+		var me = this;
 
+		var offset = me.options.offset;
 
+		// 1 is added because we need the length but we have the indexes
 
+		var offsetAmt = Math.max((me.maxIndex + 1 - me.minIndex - (offset ? 0 : 1)), 1);
 
+
 
+		// If value is a data object, then index is the index in the data array,
 
+		// not the index of the scale. We need to change that.
 
+		var valueCategory;
 
+		if (value !== undefined && value !== null) {
 
+			valueCategory = me.isHorizontal() ? value.x : value.y;
 
+		}
 
+		if (valueCategory !== undefined || (value !== undefined && isNaN(index))) {
 
+			var labels = me.getLabels();
 
+			value = valueCategory || value;
 
+			var idx = labels.indexOf(value);
 
+			index = idx !== -1 ? idx : index;
 
+		}
 
+
 
+		if (me.isHorizontal()) {
 
+			var valueWidth = me.width / offsetAmt;
 
+			var widthOffset = (valueWidth * (index - me.minIndex));
 
+
 
+			if (offset) {
 
+				widthOffset += (valueWidth / 2);
 
+			}
 
+
 
+			return me.left + widthOffset;
 
+		}
 
+		var valueHeight = me.height / offsetAmt;
 
+		var heightOffset = (valueHeight * (index - me.minIndex));
 
+
 
+		if (offset) {
 
+			heightOffset += (valueHeight / 2);
 
+		}
 
+
 
+		return me.top + heightOffset;
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		return this.getPixelForValue(this.ticks[index], index + this.minIndex, null);
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var offset = me.options.offset;
 
+		var value;
 
+		var offsetAmt = Math.max((me._ticks.length - (offset ? 0 : 1)), 1);
 
+		var horz = me.isHorizontal();
 
+		var valueDimension = (horz ? me.width : me.height) / offsetAmt;
 
+
 
+		pixel -= horz ? me.left : me.top;
 
+
 
+		if (offset) {
 
+			pixel -= (valueDimension / 2);
 
+		}
 
+
 
+		if (pixel <= 0) {
 
+			value = 0;
 
+		} else {
 
+			value = Math.round(pixel / valueDimension);
 
+		}
 
+
 
+		return value + me.minIndex;
 
+	},
 
+
 
+	getBasePixel: function() {
 
+		return this.bottom;
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults = defaultConfig;
 
+scale_category._defaults = _defaults;
 
+
 
+var noop = helpers$1.noop;
 
+var isNullOrUndef = helpers$1.isNullOrUndef;
 
+
 
+/**
 
+ * Generate a set of linear ticks
 
+ * @param generationOptions the options used to generate the ticks
 
+ * @param dataRange the range of the data
 
+ * @returns {number[]} array of tick values
 
+ */
 
+function generateTicks(generationOptions, dataRange) {
 
+	var ticks = [];
 
+	// To get a "nice" value for the tick spacing, we will use the appropriately named
 
+	// "nice number" algorithm. See https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
 
+	// for details.
 
+
 
+	var MIN_SPACING = 1e-14;
 
+	var stepSize = generationOptions.stepSize;
 
+	var unit = stepSize || 1;
 
+	var maxNumSpaces = generationOptions.maxTicks - 1;
 
+	var min = generationOptions.min;
 
+	var max = generationOptions.max;
 
+	var precision = generationOptions.precision;
 
+	var rmin = dataRange.min;
 
+	var rmax = dataRange.max;
 
+	var spacing = helpers$1.niceNum((rmax - rmin) / maxNumSpaces / unit) * unit;
 
+	var factor, niceMin, niceMax, numSpaces;
 
+
 
+	// Beyond MIN_SPACING floating point numbers being to lose precision
 
+	// such that we can't do the math necessary to generate ticks
 
+	if (spacing < MIN_SPACING && isNullOrUndef(min) && isNullOrUndef(max)) {
 
+		return [rmin, rmax];
 
+	}
 
+
 
+	numSpaces = Math.ceil(rmax / spacing) - Math.floor(rmin / spacing);
 
+	if (numSpaces > maxNumSpaces) {
 
+		// If the calculated num of spaces exceeds maxNumSpaces, recalculate it
 
+		spacing = helpers$1.niceNum(numSpaces * spacing / maxNumSpaces / unit) * unit;
 
+	}
 
+
 
+	if (stepSize || isNullOrUndef(precision)) {
 
+		// If a precision is not specified, calculate factor based on spacing
 
+		factor = Math.pow(10, helpers$1._decimalPlaces(spacing));
 
+	} else {
 
+		// If the user specified a precision, round to that number of decimal places
 
+		factor = Math.pow(10, precision);
 
+		spacing = Math.ceil(spacing * factor) / factor;
 
+	}
 
+
 
+	niceMin = Math.floor(rmin / spacing) * spacing;
 
+	niceMax = Math.ceil(rmax / spacing) * spacing;
 
+
 
+	// If min, max and stepSize is set and they make an evenly spaced scale use it.
 
+	if (stepSize) {
 
+		// If very close to our whole number, use it.
 
+		if (!isNullOrUndef(min) && helpers$1.almostWhole(min / spacing, spacing / 1000)) {
 
+			niceMin = min;
 
+		}
 
+		if (!isNullOrUndef(max) && helpers$1.almostWhole(max / spacing, spacing / 1000)) {
 
+			niceMax = max;
 
+		}
 
+	}
 
+
 
+	numSpaces = (niceMax - niceMin) / spacing;
 
+	// If very close to our rounded value, use it.
 
+	if (helpers$1.almostEquals(numSpaces, Math.round(numSpaces), spacing / 1000)) {
 
+		numSpaces = Math.round(numSpaces);
 
+	} else {
 
+		numSpaces = Math.ceil(numSpaces);
 
+	}
 
+
 
+	niceMin = Math.round(niceMin * factor) / factor;
 
+	niceMax = Math.round(niceMax * factor) / factor;
 
+	ticks.push(isNullOrUndef(min) ? niceMin : min);
 
+	for (var j = 1; j < numSpaces; ++j) {
 
+		ticks.push(Math.round((niceMin + j * spacing) * factor) / factor);
 
+	}
 
+	ticks.push(isNullOrUndef(max) ? niceMax : max);
 
+
 
+	return ticks;
 
+}
 
+
 
+var scale_linearbase = core_scale.extend({
 
+	getRightValue: function(value) {
 
+		if (typeof value === 'string') {
 
+			return +value;
 
+		}
 
+		return core_scale.prototype.getRightValue.call(this, value);
 
+	},
 
+
 
+	handleTickRangeOptions: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var tickOpts = opts.ticks;
 
+
 
+		// If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
 
+		// do nothing since that would make the chart weird. If the user really wants a weird chart
 
+		// axis, they can manually override it
 
+		if (tickOpts.beginAtZero) {
 
+			var minSign = helpers$1.sign(me.min);
 
+			var maxSign = helpers$1.sign(me.max);
 
+
 
+			if (minSign < 0 && maxSign < 0) {
 
+				// move the top up to 0
 
+				me.max = 0;
 
+			} else if (minSign > 0 && maxSign > 0) {
 
+				// move the bottom down to 0
 
+				me.min = 0;
 
+			}
 
+		}
 
+
 
+		var setMin = tickOpts.min !== undefined || tickOpts.suggestedMin !== undefined;
 
+		var setMax = tickOpts.max !== undefined || tickOpts.suggestedMax !== undefined;
 
+
 
+		if (tickOpts.min !== undefined) {
 
+			me.min = tickOpts.min;
 
+		} else if (tickOpts.suggestedMin !== undefined) {
 
+			if (me.min === null) {
 
+				me.min = tickOpts.suggestedMin;
 
+			} else {
 
+				me.min = Math.min(me.min, tickOpts.suggestedMin);
 
+			}
 
+		}
 
+
 
+		if (tickOpts.max !== undefined) {
 
+			me.max = tickOpts.max;
 
+		} else if (tickOpts.suggestedMax !== undefined) {
 
+			if (me.max === null) {
 
+				me.max = tickOpts.suggestedMax;
 
+			} else {
 
+				me.max = Math.max(me.max, tickOpts.suggestedMax);
 
+			}
 
+		}
 
+
 
+		if (setMin !== setMax) {
 
+			// We set the min or the max but not both.
 
+			// So ensure that our range is good
 
+			// Inverted or 0 length range can happen when
 
+			// ticks.min is set, and no datasets are visible
 
+			if (me.min >= me.max) {
 
+				if (setMin) {
 
+					me.max = me.min + 1;
 
+				} else {
 
+					me.min = me.max - 1;
 
+				}
 
+			}
 
+		}
 
+
 
+		if (me.min === me.max) {
 
+			me.max++;
 
+
 
+			if (!tickOpts.beginAtZero) {
 
+				me.min--;
 
+			}
 
+		}
 
+	},
 
+
 
+	getTickLimit: function() {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var stepSize = tickOpts.stepSize;
 
+		var maxTicksLimit = tickOpts.maxTicksLimit;
 
+		var maxTicks;
 
+
 
+		if (stepSize) {
 
+			maxTicks = Math.ceil(me.max / stepSize) - Math.floor(me.min / stepSize) + 1;
 
+		} else {
 
+			maxTicks = me._computeTickLimit();
 
+			maxTicksLimit = maxTicksLimit || 11;
 
+		}
 
+
 
+		if (maxTicksLimit) {
 
+			maxTicks = Math.min(maxTicksLimit, maxTicks);
 
+		}
 
+
 
+		return maxTicks;
 
+	},
 
+
 
+	_computeTickLimit: function() {
 
+		return Number.POSITIVE_INFINITY;
 
+	},
 
+
 
+	handleDirectionalChanges: noop,
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var tickOpts = opts.ticks;
 
+
 
+		// Figure out what the max number of ticks we can support it is based on the size of
 
+		// the axis area. For now, we say that the minimum tick spacing in pixels must be 40
 
+		// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
 
+		// the graph. Make sure we always have at least 2 ticks
 
+		var maxTicks = me.getTickLimit();
 
+		maxTicks = Math.max(2, maxTicks);
 
+
 
+		var numericGeneratorOptions = {
 
+			maxTicks: maxTicks,
 
+			min: tickOpts.min,
 
+			max: tickOpts.max,
 
+			precision: tickOpts.precision,
 
+			stepSize: helpers$1.valueOrDefault(tickOpts.fixedStepSize, tickOpts.stepSize)
 
+		};
 
+		var ticks = me.ticks = generateTicks(numericGeneratorOptions, me);
 
+
 
+		me.handleDirectionalChanges();
 
+
 
+		// At this point, we need to update our max and min given the tick values since we have expanded the
 
+		// range of the scale
 
+		me.max = helpers$1.max(ticks);
 
+		me.min = helpers$1.min(ticks);
 
+
 
+		if (tickOpts.reverse) {
 
+			ticks.reverse();
 
+
 
+			me.start = me.max;
 
+			me.end = me.min;
 
+		} else {
 
+			me.start = me.min;
 
+			me.end = me.max;
 
+		}
 
+	},
 
+
 
+	convertTicksToLabels: function() {
 
+		var me = this;
 
+		me.ticksAsNumbers = me.ticks.slice();
 
+		me.zeroLineIndex = me.ticks.indexOf(0);
 
+
 
+		core_scale.prototype.convertTicksToLabels.call(me);
 
+	}
 
+});
 
+
 
+var defaultConfig$1 = {
 
+	position: 'left',
 
+	ticks: {
 
+		callback: core_ticks.formatters.linear
 
+	}
 
+};
 
+
 
+var scale_linear = scale_linearbase.extend({
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var chart = me.chart;
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var isHorizontal = me.isHorizontal();
 
+		var DEFAULT_MIN = 0;
 
+		var DEFAULT_MAX = 1;
 
+
 
+		function IDMatches(meta) {
 
+			return isHorizontal ? meta.xAxisID === me.id : meta.yAxisID === me.id;
 
+		}
 
+
 
+		// First Calculate the range
 
+		me.min = null;
 
+		me.max = null;
 
+
 
+		var hasStacks = opts.stacked;
 
+		if (hasStacks === undefined) {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				if (hasStacks) {
 
+					return;
 
+				}
 
+
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta) &&
 
+					meta.stack !== undefined) {
 
+					hasStacks = true;
 
+				}
 
+			});
 
+		}
 
+
 
+		if (opts.stacked || hasStacks) {
 
+			var valuesPerStack = {};
 
+
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				var key = [
 
+					meta.type,
 
+					// we have a separate stack for stack=undefined datasets when the opts.stacked is undefined
 
+					((opts.stacked === undefined && meta.stack === undefined) ? datasetIndex : ''),
 
+					meta.stack
 
+				].join('.');
 
+
 
+				if (valuesPerStack[key] === undefined) {
 
+					valuesPerStack[key] = {
 
+						positiveValues: [],
 
+						negativeValues: []
 
+					};
 
+				}
 
+
 
+				// Store these per type
 
+				var positiveValues = valuesPerStack[key].positiveValues;
 
+				var negativeValues = valuesPerStack[key].negativeValues;
 
+
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var value = +me.getRightValue(rawValue);
 
+						if (isNaN(value) || meta.data[index].hidden) {
 
+							return;
 
+						}
 
+
 
+						positiveValues[index] = positiveValues[index] || 0;
 
+						negativeValues[index] = negativeValues[index] || 0;
 
+
 
+						if (opts.relativePoints) {
 
+							positiveValues[index] = 100;
 
+						} else if (value < 0) {
 
+							negativeValues[index] += value;
 
+						} else {
 
+							positiveValues[index] += value;
 
+						}
 
+					});
 
+				}
 
+			});
 
+
 
+			helpers$1.each(valuesPerStack, function(valuesForType) {
 
+				var values = valuesForType.positiveValues.concat(valuesForType.negativeValues);
 
+				var minVal = helpers$1.min(values);
 
+				var maxVal = helpers$1.max(values);
 
+				me.min = me.min === null ? minVal : Math.min(me.min, minVal);
 
+				me.max = me.max === null ? maxVal : Math.max(me.max, maxVal);
 
+			});
 
+
 
+		} else {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var value = +me.getRightValue(rawValue);
 
+						if (isNaN(value) || meta.data[index].hidden) {
 
+							return;
 
+						}
 
+
 
+						if (me.min === null) {
 
+							me.min = value;
 
+						} else if (value < me.min) {
 
+							me.min = value;
 
+						}
 
+
 
+						if (me.max === null) {
 
+							me.max = value;
 
+						} else if (value > me.max) {
 
+							me.max = value;
 
+						}
 
+					});
 
+				}
 
+			});
 
+		}
 
+
 
+		me.min = isFinite(me.min) && !isNaN(me.min) ? me.min : DEFAULT_MIN;
 
+		me.max = isFinite(me.max) && !isNaN(me.max) ? me.max : DEFAULT_MAX;
 
+
 
+		// Common base implementation to handle ticks.min, ticks.max, ticks.beginAtZero
 
+		this.handleTickRangeOptions();
 
+	},
 
+
 
+	// Returns the maximum number of ticks based on the scale dimension
 
+	_computeTickLimit: function() {
 
+		var me = this;
 
+		var tickFont;
 
+
 
+		if (me.isHorizontal()) {
 
+			return Math.ceil(me.width / 40);
 
+		}
 
+		tickFont = helpers$1.options._parseFont(me.options.ticks);
 
+		return Math.ceil(me.height / tickFont.lineHeight);
 
+	},
 
+
 
+	// Called after the ticks are built. We need
 
+	handleDirectionalChanges: function() {
 
+		if (!this.isHorizontal()) {
 
+			// We are in a vertical orientation. The top value is the highest. So reverse the array
 
+			this.ticks.reverse();
 
+		}
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 
+	},
 
+
 
+	// Utils
 
+	getPixelForValue: function(value) {
 
+		// This must be called after fit has been run so that
 
+		// this.left, this.top, this.right, and this.bottom have been defined
 
+		var me = this;
 
+		var start = me.start;
 
+
 
+		var rightValue = +me.getRightValue(value);
 
+		var pixel;
 
+		var range = me.end - start;
 
+
 
+		if (me.isHorizontal()) {
 
+			pixel = me.left + (me.width / range * (rightValue - start));
 
+		} else {
 
+			pixel = me.bottom - (me.height / range * (rightValue - start));
 
+		}
 
+		return pixel;
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var isHorizontal = me.isHorizontal();
 
+		var innerDimension = isHorizontal ? me.width : me.height;
 
+		var offset = (isHorizontal ? pixel - me.left : me.bottom - pixel) / innerDimension;
 
+		return me.start + ((me.end - me.start) * offset);
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		return this.getPixelForValue(this.ticksAsNumbers[index]);
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$1 = defaultConfig$1;
 
+scale_linear._defaults = _defaults$1;
 
+
 
+var valueOrDefault$a = helpers$1.valueOrDefault;
 
+
 
+/**
 
+ * Generate a set of logarithmic ticks
 
+ * @param generationOptions the options used to generate the ticks
 
+ * @param dataRange the range of the data
 
+ * @returns {number[]} array of tick values
 
+ */
 
+function generateTicks$1(generationOptions, dataRange) {
 
+	var ticks = [];
 
+
 
+	var tickVal = valueOrDefault$a(generationOptions.min, Math.pow(10, Math.floor(helpers$1.log10(dataRange.min))));
 
+
 
+	var endExp = Math.floor(helpers$1.log10(dataRange.max));
 
+	var endSignificand = Math.ceil(dataRange.max / Math.pow(10, endExp));
 
+	var exp, significand;
 
+
 
+	if (tickVal === 0) {
 
+		exp = Math.floor(helpers$1.log10(dataRange.minNotZero));
 
+		significand = Math.floor(dataRange.minNotZero / Math.pow(10, exp));
 
+
 
+		ticks.push(tickVal);
 
+		tickVal = significand * Math.pow(10, exp);
 
+	} else {
 
+		exp = Math.floor(helpers$1.log10(tickVal));
 
+		significand = Math.floor(tickVal / Math.pow(10, exp));
 
+	}
 
+	var precision = exp < 0 ? Math.pow(10, Math.abs(exp)) : 1;
 
+
 
+	do {
 
+		ticks.push(tickVal);
 
+
 
+		++significand;
 
+		if (significand === 10) {
 
+			significand = 1;
 
+			++exp;
 
+			precision = exp >= 0 ? 1 : precision;
 
+		}
 
+
 
+		tickVal = Math.round(significand * Math.pow(10, exp) * precision) / precision;
 
+	} while (exp < endExp || (exp === endExp && significand < endSignificand));
 
+
 
+	var lastTick = valueOrDefault$a(generationOptions.max, tickVal);
 
+	ticks.push(lastTick);
 
+
 
+	return ticks;
 
+}
 
+
 
+var defaultConfig$2 = {
 
+	position: 'left',
 
+
 
+	// label settings
 
+	ticks: {
 
+		callback: core_ticks.formatters.logarithmic
 
+	}
 
+};
 
+
 
+// TODO(v3): change this to positiveOrDefault
 
+function nonNegativeOrDefault(value, defaultValue) {
 
+	return helpers$1.isFinite(value) && value >= 0 ? value : defaultValue;
 
+}
 
+
 
+var scale_logarithmic = core_scale.extend({
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var chart = me.chart;
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var isHorizontal = me.isHorizontal();
 
+		function IDMatches(meta) {
 
+			return isHorizontal ? meta.xAxisID === me.id : meta.yAxisID === me.id;
 
+		}
 
+
 
+		// Calculate Range
 
+		me.min = null;
 
+		me.max = null;
 
+		me.minNotZero = null;
 
+
 
+		var hasStacks = opts.stacked;
 
+		if (hasStacks === undefined) {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				if (hasStacks) {
 
+					return;
 
+				}
 
+
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta) &&
 
+					meta.stack !== undefined) {
 
+					hasStacks = true;
 
+				}
 
+			});
 
+		}
 
+
 
+		if (opts.stacked || hasStacks) {
 
+			var valuesPerStack = {};
 
+
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				var key = [
 
+					meta.type,
 
+					// we have a separate stack for stack=undefined datasets when the opts.stacked is undefined
 
+					((opts.stacked === undefined && meta.stack === undefined) ? datasetIndex : ''),
 
+					meta.stack
 
+				].join('.');
 
+
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					if (valuesPerStack[key] === undefined) {
 
+						valuesPerStack[key] = [];
 
+					}
 
+
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var values = valuesPerStack[key];
 
+						var value = +me.getRightValue(rawValue);
 
+						// invalid, hidden and negative values are ignored
 
+						if (isNaN(value) || meta.data[index].hidden || value < 0) {
 
+							return;
 
+						}
 
+						values[index] = values[index] || 0;
 
+						values[index] += value;
 
+					});
 
+				}
 
+			});
 
+
 
+			helpers$1.each(valuesPerStack, function(valuesForType) {
 
+				if (valuesForType.length > 0) {
 
+					var minVal = helpers$1.min(valuesForType);
 
+					var maxVal = helpers$1.max(valuesForType);
 
+					me.min = me.min === null ? minVal : Math.min(me.min, minVal);
 
+					me.max = me.max === null ? maxVal : Math.max(me.max, maxVal);
 
+				}
 
+			});
 
+
 
+		} else {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var value = +me.getRightValue(rawValue);
 
+						// invalid, hidden and negative values are ignored
 
+						if (isNaN(value) || meta.data[index].hidden || value < 0) {
 
+							return;
 
+						}
 
+
 
+						if (me.min === null) {
 
+							me.min = value;
 
+						} else if (value < me.min) {
 
+							me.min = value;
 
+						}
 
+
 
+						if (me.max === null) {
 
+							me.max = value;
 
+						} else if (value > me.max) {
 
+							me.max = value;
 
+						}
 
+
 
+						if (value !== 0 && (me.minNotZero === null || value < me.minNotZero)) {
 
+							me.minNotZero = value;
 
+						}
 
+					});
 
+				}
 
+			});
 
+		}
 
+
 
+		// Common base implementation to handle ticks.min, ticks.max
 
+		this.handleTickRangeOptions();
 
+	},
 
+
 
+	handleTickRangeOptions: function() {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var DEFAULT_MIN = 1;
 
+		var DEFAULT_MAX = 10;
 
+
 
+		me.min = nonNegativeOrDefault(tickOpts.min, me.min);
 
+		me.max = nonNegativeOrDefault(tickOpts.max, me.max);
 
+
 
+		if (me.min === me.max) {
 
+			if (me.min !== 0 && me.min !== null) {
 
+				me.min = Math.pow(10, Math.floor(helpers$1.log10(me.min)) - 1);
 
+				me.max = Math.pow(10, Math.floor(helpers$1.log10(me.max)) + 1);
 
+			} else {
 
+				me.min = DEFAULT_MIN;
 
+				me.max = DEFAULT_MAX;
 
+			}
 
+		}
 
+		if (me.min === null) {
 
+			me.min = Math.pow(10, Math.floor(helpers$1.log10(me.max)) - 1);
 
+		}
 
+		if (me.max === null) {
 
+			me.max = me.min !== 0
 
+				? Math.pow(10, Math.floor(helpers$1.log10(me.min)) + 1)
 
+				: DEFAULT_MAX;
 
+		}
 
+		if (me.minNotZero === null) {
 
+			if (me.min > 0) {
 
+				me.minNotZero = me.min;
 
+			} else if (me.max < 1) {
 
+				me.minNotZero = Math.pow(10, Math.floor(helpers$1.log10(me.max)));
 
+			} else {
 
+				me.minNotZero = DEFAULT_MIN;
 
+			}
 
+		}
 
+	},
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var reverse = !me.isHorizontal();
 
+
 
+		var generationOptions = {
 
+			min: nonNegativeOrDefault(tickOpts.min),
 
+			max: nonNegativeOrDefault(tickOpts.max)
 
+		};
 
+		var ticks = me.ticks = generateTicks$1(generationOptions, me);
 
+
 
+		// At this point, we need to update our max and min given the tick values since we have expanded the
 
+		// range of the scale
 
+		me.max = helpers$1.max(ticks);
 
+		me.min = helpers$1.min(ticks);
 
+
 
+		if (tickOpts.reverse) {
 
+			reverse = !reverse;
 
+			me.start = me.max;
 
+			me.end = me.min;
 
+		} else {
 
+			me.start = me.min;
 
+			me.end = me.max;
 
+		}
 
+		if (reverse) {
 
+			ticks.reverse();
 
+		}
 
+	},
 
+
 
+	convertTicksToLabels: function() {
 
+		this.tickValues = this.ticks.slice();
 
+
 
+		core_scale.prototype.convertTicksToLabels.call(this);
 
+	},
 
+
 
+	// Get the correct tooltip label
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		return this.getPixelForValue(this.tickValues[index]);
 
+	},
 
+
 
+	/**
 
+	 * Returns the value of the first tick.
 
+	 * @param {number} value - The minimum not zero value.
 
+	 * @return {number} The first tick value.
 
+	 * @private
 
+	 */
 
+	_getFirstTickValue: function(value) {
 
+		var exp = Math.floor(helpers$1.log10(value));
 
+		var significand = Math.floor(value / Math.pow(10, exp));
 
+
 
+		return significand * Math.pow(10, exp);
 
+	},
 
+
 
+	getPixelForValue: function(value) {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var reverse = tickOpts.reverse;
 
+		var log10 = helpers$1.log10;
 
+		var firstTickValue = me._getFirstTickValue(me.minNotZero);
 
+		var offset = 0;
 
+		var innerDimension, pixel, start, end, sign;
 
+
 
+		value = +me.getRightValue(value);
 
+		if (reverse) {
 
+			start = me.end;
 
+			end = me.start;
 
+			sign = -1;
 
+		} else {
 
+			start = me.start;
 
+			end = me.end;
 
+			sign = 1;
 
+		}
 
+		if (me.isHorizontal()) {
 
+			innerDimension = me.width;
 
+			pixel = reverse ? me.right : me.left;
 
+		} else {
 
+			innerDimension = me.height;
 
+			sign *= -1; // invert, since the upper-left corner of the canvas is at pixel (0, 0)
 
+			pixel = reverse ? me.top : me.bottom;
 
+		}
 
+		if (value !== start) {
 
+			if (start === 0) { // include zero tick
 
+				offset = valueOrDefault$a(tickOpts.fontSize, core_defaults.global.defaultFontSize);
 
+				innerDimension -= offset;
 
+				start = firstTickValue;
 
+			}
 
+			if (value !== 0) {
 
+				offset += innerDimension / (log10(end) - log10(start)) * (log10(value) - log10(start));
 
+			}
 
+			pixel += sign * offset;
 
+		}
 
+		return pixel;
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var reverse = tickOpts.reverse;
 
+		var log10 = helpers$1.log10;
 
+		var firstTickValue = me._getFirstTickValue(me.minNotZero);
 
+		var innerDimension, start, end, value;
 
+
 
+		if (reverse) {
 
+			start = me.end;
 
+			end = me.start;
 
+		} else {
 
+			start = me.start;
 
+			end = me.end;
 
+		}
 
+		if (me.isHorizontal()) {
 
+			innerDimension = me.width;
 
+			value = reverse ? me.right - pixel : pixel - me.left;
 
+		} else {
 
+			innerDimension = me.height;
 
+			value = reverse ? pixel - me.top : me.bottom - pixel;
 
+		}
 
+		if (value !== start) {
 
+			if (start === 0) { // include zero tick
 
+				var offset = valueOrDefault$a(tickOpts.fontSize, core_defaults.global.defaultFontSize);
 
+				value -= offset;
 
+				innerDimension -= offset;
 
+				start = firstTickValue;
 
+			}
 
+			value *= log10(end) - log10(start);
 
+			value /= innerDimension;
 
+			value = Math.pow(10, log10(start) + value);
 
+		}
 
+		return value;
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$2 = defaultConfig$2;
 
+scale_logarithmic._defaults = _defaults$2;
 
+
 
+var valueOrDefault$b = helpers$1.valueOrDefault;
 
+var valueAtIndexOrDefault$1 = helpers$1.valueAtIndexOrDefault;
 
+var resolve$7 = helpers$1.options.resolve;
 
+
 
+var defaultConfig$3 = {
 
+	display: true,
 
+
 
+	// Boolean - Whether to animate scaling the chart from the centre
 
+	animate: true,
 
+	position: 'chartArea',
 
+
 
+	angleLines: {
 
+		display: true,
 
+		color: 'rgba(0, 0, 0, 0.1)',
 
+		lineWidth: 1,
 
+		borderDash: [],
 
+		borderDashOffset: 0.0
 
+	},
 
+
 
+	gridLines: {
 
+		circular: false
 
+	},
 
+
 
+	// label settings
 
+	ticks: {
 
+		// Boolean - Show a backdrop to the scale label
 
+		showLabelBackdrop: true,
 
+
 
+		// String - The colour of the label backdrop
 
+		backdropColor: 'rgba(255,255,255,0.75)',
 
+
 
+		// Number - The backdrop padding above & below the label in pixels
 
+		backdropPaddingY: 2,
 
+
 
+		// Number - The backdrop padding to the side of the label in pixels
 
+		backdropPaddingX: 2,
 
+
 
+		callback: core_ticks.formatters.linear
 
+	},
 
+
 
+	pointLabels: {
 
+		// Boolean - if true, show point labels
 
+		display: true,
 
+
 
+		// Number - Point label font size in pixels
 
+		fontSize: 10,
 
+
 
+		// Function - Used to convert point labels
 
+		callback: function(label) {
 
+			return label;
 
+		}
 
+	}
 
+};
 
+
 
+function getValueCount(scale) {
 
+	var opts = scale.options;
 
+	return opts.angleLines.display || opts.pointLabels.display ? scale.chart.data.labels.length : 0;
 
+}
 
+
 
+function getTickBackdropHeight(opts) {
 
+	var tickOpts = opts.ticks;
 
+
 
+	if (tickOpts.display && opts.display) {
 
+		return valueOrDefault$b(tickOpts.fontSize, core_defaults.global.defaultFontSize) + tickOpts.backdropPaddingY * 2;
 
+	}
 
+	return 0;
 
+}
 
+
 
+function measureLabelSize(ctx, lineHeight, label) {
 
+	if (helpers$1.isArray(label)) {
 
+		return {
 
+			w: helpers$1.longestText(ctx, ctx.font, label),
 
+			h: label.length * lineHeight
 
+		};
 
+	}
 
+
 
+	return {
 
+		w: ctx.measureText(label).width,
 
+		h: lineHeight
 
+	};
 
+}
 
+
 
+function determineLimits(angle, pos, size, min, max) {
 
+	if (angle === min || angle === max) {
 
+		return {
 
+			start: pos - (size / 2),
 
+			end: pos + (size / 2)
 
+		};
 
+	} else if (angle < min || angle > max) {
 
+		return {
 
+			start: pos - size,
 
+			end: pos
 
+		};
 
+	}
 
+
 
+	return {
 
+		start: pos,
 
+		end: pos + size
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper function to fit a radial linear scale with point labels
 
+ */
 
+function fitWithPointLabels(scale) {
 
+
 
+	// Right, this is really confusing and there is a lot of maths going on here
 
+	// The gist of the problem is here: https://gist.github.com/nnnick/696cc9c55f4b0beb8fe9
 
+	//
 
+	// Reaction: https://dl.dropboxusercontent.com/u/34601363/toomuchscience.gif
 
+	//
 
+	// Solution:
 
+	//
 
+	// We assume the radius of the polygon is half the size of the canvas at first
 
+	// at each index we check if the text overlaps.
 
+	//
 
+	// Where it does, we store that angle and that index.
 
+	//
 
+	// After finding the largest index and angle we calculate how much we need to remove
 
+	// from the shape radius to move the point inwards by that x.
 
+	//
 
+	// We average the left and right distances to get the maximum shape radius that can fit in the box
 
+	// along with labels.
 
+	//
 
+	// Once we have that, we can find the centre point for the chart, by taking the x text protrusion
 
+	// on each side, removing that from the size, halving it and adding the left x protrusion width.
 
+	//
 
+	// This will mean we have a shape fitted to the canvas, as large as it can be with the labels
 
+	// and position it in the most space efficient manner
 
+	//
 
+	// https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
 
+
 
+	var plFont = helpers$1.options._parseFont(scale.options.pointLabels);
 
+
 
+	// Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
 
+	// Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
 
+	var furthestLimits = {
 
+		l: 0,
 
+		r: scale.width,
 
+		t: 0,
 
+		b: scale.height - scale.paddingTop
 
+	};
 
+	var furthestAngles = {};
 
+	var i, textSize, pointPosition;
 
+
 
+	scale.ctx.font = plFont.string;
 
+	scale._pointLabelSizes = [];
 
+
 
+	var valueCount = getValueCount(scale);
 
+	for (i = 0; i < valueCount; i++) {
 
+		pointPosition = scale.getPointPosition(i, scale.drawingArea + 5);
 
+		textSize = measureLabelSize(scale.ctx, plFont.lineHeight, scale.pointLabels[i] || '');
 
+		scale._pointLabelSizes[i] = textSize;
 
+
 
+		// Add quarter circle to make degree 0 mean top of circle
 
+		var angleRadians = scale.getIndexAngle(i);
 
+		var angle = helpers$1.toDegrees(angleRadians) % 360;
 
+		var hLimits = determineLimits(angle, pointPosition.x, textSize.w, 0, 180);
 
+		var vLimits = determineLimits(angle, pointPosition.y, textSize.h, 90, 270);
 
+
 
+		if (hLimits.start < furthestLimits.l) {
 
+			furthestLimits.l = hLimits.start;
 
+			furthestAngles.l = angleRadians;
 
+		}
 
+
 
+		if (hLimits.end > furthestLimits.r) {
 
+			furthestLimits.r = hLimits.end;
 
+			furthestAngles.r = angleRadians;
 
+		}
 
+
 
+		if (vLimits.start < furthestLimits.t) {
 
+			furthestLimits.t = vLimits.start;
 
+			furthestAngles.t = angleRadians;
 
+		}
 
+
 
+		if (vLimits.end > furthestLimits.b) {
 
+			furthestLimits.b = vLimits.end;
 
+			furthestAngles.b = angleRadians;
 
+		}
 
+	}
 
+
 
+	scale.setReductions(scale.drawingArea, furthestLimits, furthestAngles);
 
+}
 
+
 
+function getTextAlignForAngle(angle) {
 
+	if (angle === 0 || angle === 180) {
 
+		return 'center';
 
+	} else if (angle < 180) {
 
+		return 'left';
 
+	}
 
+
 
+	return 'right';
 
+}
 
+
 
+function fillText(ctx, text, position, lineHeight) {
 
+	var y = position.y + lineHeight / 2;
 
+	var i, ilen;
 
+
 
+	if (helpers$1.isArray(text)) {
 
+		for (i = 0, ilen = text.length; i < ilen; ++i) {
 
+			ctx.fillText(text[i], position.x, y);
 
+			y += lineHeight;
 
+		}
 
+	} else {
 
+		ctx.fillText(text, position.x, y);
 
+	}
 
+}
 
+
 
+function adjustPointPositionForLabelHeight(angle, textSize, position) {
 
+	if (angle === 90 || angle === 270) {
 
+		position.y -= (textSize.h / 2);
 
+	} else if (angle > 270 || angle < 90) {
 
+		position.y -= textSize.h;
 
+	}
 
+}
 
+
 
+function drawPointLabels(scale) {
 
+	var ctx = scale.ctx;
 
+	var opts = scale.options;
 
+	var angleLineOpts = opts.angleLines;
 
+	var gridLineOpts = opts.gridLines;
 
+	var pointLabelOpts = opts.pointLabels;
 
+	var lineWidth = valueOrDefault$b(angleLineOpts.lineWidth, gridLineOpts.lineWidth);
 
+	var lineColor = valueOrDefault$b(angleLineOpts.color, gridLineOpts.color);
 
+	var tickBackdropHeight = getTickBackdropHeight(opts);
 
+
 
+	ctx.save();
 
+	ctx.lineWidth = lineWidth;
 
+	ctx.strokeStyle = lineColor;
 
+	if (ctx.setLineDash) {
 
+		ctx.setLineDash(resolve$7([angleLineOpts.borderDash, gridLineOpts.borderDash, []]));
 
+		ctx.lineDashOffset = resolve$7([angleLineOpts.borderDashOffset, gridLineOpts.borderDashOffset, 0.0]);
 
+	}
 
+
 
+	var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
 
+
 
+	// Point Label Font
 
+	var plFont = helpers$1.options._parseFont(pointLabelOpts);
 
+
 
+	ctx.font = plFont.string;
 
+	ctx.textBaseline = 'middle';
 
+
 
+	for (var i = getValueCount(scale) - 1; i >= 0; i--) {
 
+		if (angleLineOpts.display && lineWidth && lineColor) {
 
+			var outerPosition = scale.getPointPosition(i, outerDistance);
 
+			ctx.beginPath();
 
+			ctx.moveTo(scale.xCenter, scale.yCenter);
 
+			ctx.lineTo(outerPosition.x, outerPosition.y);
 
+			ctx.stroke();
 
+		}
 
+
 
+		if (pointLabelOpts.display) {
 
+			// Extra pixels out for some label spacing
 
+			var extra = (i === 0 ? tickBackdropHeight / 2 : 0);
 
+			var pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
 
+
 
+			// Keep this in loop since we may support array properties here
 
+			var pointLabelFontColor = valueAtIndexOrDefault$1(pointLabelOpts.fontColor, i, core_defaults.global.defaultFontColor);
 
+			ctx.fillStyle = pointLabelFontColor;
 
+
 
+			var angleRadians = scale.getIndexAngle(i);
 
+			var angle = helpers$1.toDegrees(angleRadians);
 
+			ctx.textAlign = getTextAlignForAngle(angle);
 
+			adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition);
 
+			fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.lineHeight);
 
+		}
 
+	}
 
+	ctx.restore();
 
+}
 
+
 
+function drawRadiusLine(scale, gridLineOpts, radius, index) {
 
+	var ctx = scale.ctx;
 
+	var circular = gridLineOpts.circular;
 
+	var valueCount = getValueCount(scale);
 
+	var lineColor = valueAtIndexOrDefault$1(gridLineOpts.color, index - 1);
 
+	var lineWidth = valueAtIndexOrDefault$1(gridLineOpts.lineWidth, index - 1);
 
+	var pointPosition;
 
+
 
+	if ((!circular && !valueCount) || !lineColor || !lineWidth) {
 
+		return;
 
+	}
 
+
 
+	ctx.save();
 
+	ctx.strokeStyle = lineColor;
 
+	ctx.lineWidth = lineWidth;
 
+	if (ctx.setLineDash) {
 
+		ctx.setLineDash(gridLineOpts.borderDash || []);
 
+		ctx.lineDashOffset = gridLineOpts.borderDashOffset || 0.0;
 
+	}
 
+
 
+	ctx.beginPath();
 
+	if (circular) {
 
+		// Draw circular arcs between the points
 
+		ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2);
 
+	} else {
 
+		// Draw straight lines connecting each index
 
+		pointPosition = scale.getPointPosition(0, radius);
 
+		ctx.moveTo(pointPosition.x, pointPosition.y);
 
+
 
+		for (var i = 1; i < valueCount; i++) {
 
+			pointPosition = scale.getPointPosition(i, radius);
 
+			ctx.lineTo(pointPosition.x, pointPosition.y);
 
+		}
 
+	}
 
+	ctx.closePath();
 
+	ctx.stroke();
 
+	ctx.restore();
 
+}
 
+
 
+function numberOrZero(param) {
 
+	return helpers$1.isNumber(param) ? param : 0;
 
+}
 
+
 
+var scale_radialLinear = scale_linearbase.extend({
 
+	setDimensions: function() {
 
+		var me = this;
 
+
 
+		// Set the unconstrained dimension before label rotation
 
+		me.width = me.maxWidth;
 
+		me.height = me.maxHeight;
 
+		me.paddingTop = getTickBackdropHeight(me.options) / 2;
 
+		me.xCenter = Math.floor(me.width / 2);
 
+		me.yCenter = Math.floor((me.height - me.paddingTop) / 2);
 
+		me.drawingArea = Math.min(me.height - me.paddingTop, me.width) / 2;
 
+	},
 
+
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var min = Number.POSITIVE_INFINITY;
 
+		var max = Number.NEGATIVE_INFINITY;
 
+
 
+		helpers$1.each(chart.data.datasets, function(dataset, datasetIndex) {
 
+			if (chart.isDatasetVisible(datasetIndex)) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+
 
+				helpers$1.each(dataset.data, function(rawValue, index) {
 
+					var value = +me.getRightValue(rawValue);
 
+					if (isNaN(value) || meta.data[index].hidden) {
 
+						return;
 
+					}
 
+
 
+					min = Math.min(value, min);
 
+					max = Math.max(value, max);
 
+				});
 
+			}
 
+		});
 
+
 
+		me.min = (min === Number.POSITIVE_INFINITY ? 0 : min);
 
+		me.max = (max === Number.NEGATIVE_INFINITY ? 0 : max);
 
+
 
+		// Common base implementation to handle ticks.min, ticks.max, ticks.beginAtZero
 
+		me.handleTickRangeOptions();
 
+	},
 
+
 
+	// Returns the maximum number of ticks based on the scale dimension
 
+	_computeTickLimit: function() {
 
+		return Math.ceil(this.drawingArea / getTickBackdropHeight(this.options));
 
+	},
 
+
 
+	convertTicksToLabels: function() {
 
+		var me = this;
 
+
 
+		scale_linearbase.prototype.convertTicksToLabels.call(me);
 
+
 
+		// Point labels
 
+		me.pointLabels = me.chart.data.labels.map(me.options.pointLabels.callback, me);
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 
+	},
 
+
 
+	fit: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+
 
+		if (opts.display && opts.pointLabels.display) {
 
+			fitWithPointLabels(me);
 
+		} else {
 
+			me.setCenterPoint(0, 0, 0, 0);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Set radius reductions and determine new radius and center point
 
+	 * @private
 
+	 */
 
+	setReductions: function(largestPossibleRadius, furthestLimits, furthestAngles) {
 
+		var me = this;
 
+		var radiusReductionLeft = furthestLimits.l / Math.sin(furthestAngles.l);
 
+		var radiusReductionRight = Math.max(furthestLimits.r - me.width, 0) / Math.sin(furthestAngles.r);
 
+		var radiusReductionTop = -furthestLimits.t / Math.cos(furthestAngles.t);
 
+		var radiusReductionBottom = -Math.max(furthestLimits.b - (me.height - me.paddingTop), 0) / Math.cos(furthestAngles.b);
 
+
 
+		radiusReductionLeft = numberOrZero(radiusReductionLeft);
 
+		radiusReductionRight = numberOrZero(radiusReductionRight);
 
+		radiusReductionTop = numberOrZero(radiusReductionTop);
 
+		radiusReductionBottom = numberOrZero(radiusReductionBottom);
 
+
 
+		me.drawingArea = Math.min(
 
+			Math.floor(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2),
 
+			Math.floor(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2));
 
+		me.setCenterPoint(radiusReductionLeft, radiusReductionRight, radiusReductionTop, radiusReductionBottom);
 
+	},
 
+
 
+	setCenterPoint: function(leftMovement, rightMovement, topMovement, bottomMovement) {
 
+		var me = this;
 
+		var maxRight = me.width - rightMovement - me.drawingArea;
 
+		var maxLeft = leftMovement + me.drawingArea;
 
+		var maxTop = topMovement + me.drawingArea;
 
+		var maxBottom = (me.height - me.paddingTop) - bottomMovement - me.drawingArea;
 
+
 
+		me.xCenter = Math.floor(((maxLeft + maxRight) / 2) + me.left);
 
+		me.yCenter = Math.floor(((maxTop + maxBottom) / 2) + me.top + me.paddingTop);
 
+	},
 
+
 
+	getIndexAngle: function(index) {
 
+		var angleMultiplier = (Math.PI * 2) / getValueCount(this);
 
+		var startAngle = this.chart.options && this.chart.options.startAngle ?
 
+			this.chart.options.startAngle :
 
+			0;
 
+
 
+		var startAngleRadians = startAngle * Math.PI * 2 / 360;
 
+
 
+		// Start from the top instead of right, so remove a quarter of the circle
 
+		return index * angleMultiplier + startAngleRadians;
 
+	},
 
+
 
+	getDistanceFromCenterForValue: function(value) {
 
+		var me = this;
 
+
 
+		if (value === null) {
 
+			return 0; // null always in center
 
+		}
 
+
 
+		// Take into account half font size + the yPadding of the top value
 
+		var scalingFactor = me.drawingArea / (me.max - me.min);
 
+		if (me.options.ticks.reverse) {
 
+			return (me.max - value) * scalingFactor;
 
+		}
 
+		return (value - me.min) * scalingFactor;
 
+	},
 
+
 
+	getPointPosition: function(index, distanceFromCenter) {
 
+		var me = this;
 
+		var thisAngle = me.getIndexAngle(index) - (Math.PI / 2);
 
+		return {
 
+			x: Math.cos(thisAngle) * distanceFromCenter + me.xCenter,
 
+			y: Math.sin(thisAngle) * distanceFromCenter + me.yCenter
 
+		};
 
+	},
 
+
 
+	getPointPositionForValue: function(index, value) {
 
+		return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
 
+	},
 
+
 
+	getBasePosition: function() {
 
+		var me = this;
 
+		var min = me.min;
 
+		var max = me.max;
 
+
 
+		return me.getPointPositionForValue(0,
 
+			me.beginAtZero ? 0 :
 
+			min < 0 && max < 0 ? max :
 
+			min > 0 && max > 0 ? min :
 
+			0);
 
+	},
 
+
 
+	draw: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var gridLineOpts = opts.gridLines;
 
+		var tickOpts = opts.ticks;
 
+
 
+		if (opts.display) {
 
+			var ctx = me.ctx;
 
+			var startAngle = this.getIndexAngle(0);
 
+			var tickFont = helpers$1.options._parseFont(tickOpts);
 
+
 
+			if (opts.angleLines.display || opts.pointLabels.display) {
 
+				drawPointLabels(me);
 
+			}
 
+
 
+			helpers$1.each(me.ticks, function(label, index) {
 
+				// Don't draw a centre value (if it is minimum)
 
+				if (index > 0 || tickOpts.reverse) {
 
+					var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
 
+
 
+					// Draw circular lines around the scale
 
+					if (gridLineOpts.display && index !== 0) {
 
+						drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
 
+					}
 
+
 
+					if (tickOpts.display) {
 
+						var tickFontColor = valueOrDefault$b(tickOpts.fontColor, core_defaults.global.defaultFontColor);
 
+						ctx.font = tickFont.string;
 
+
 
+						ctx.save();
 
+						ctx.translate(me.xCenter, me.yCenter);
 
+						ctx.rotate(startAngle);
 
+
 
+						if (tickOpts.showLabelBackdrop) {
 
+							var labelWidth = ctx.measureText(label).width;
 
+							ctx.fillStyle = tickOpts.backdropColor;
 
+							ctx.fillRect(
 
+								-labelWidth / 2 - tickOpts.backdropPaddingX,
 
+								-yCenterOffset - tickFont.size / 2 - tickOpts.backdropPaddingY,
 
+								labelWidth + tickOpts.backdropPaddingX * 2,
 
+								tickFont.size + tickOpts.backdropPaddingY * 2
 
+							);
 
+						}
 
+
 
+						ctx.textAlign = 'center';
 
+						ctx.textBaseline = 'middle';
 
+						ctx.fillStyle = tickFontColor;
 
+						ctx.fillText(label, 0, -yCenterOffset);
 
+						ctx.restore();
 
+					}
 
+				}
 
+			});
 
+		}
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$3 = defaultConfig$3;
 
+scale_radialLinear._defaults = _defaults$3;
 
+
 
+var valueOrDefault$c = helpers$1.valueOrDefault;
 
+
 
+// Integer constants are from the ES6 spec.
 
+var MIN_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991;
 
+var MAX_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;
 
+
 
+var INTERVALS = {
 
+	millisecond: {
 
+		common: true,
 
+		size: 1,
 
+		steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
 
+	},
 
+	second: {
 
+		common: true,
 
+		size: 1000,
 
+		steps: [1, 2, 5, 10, 15, 30]
 
+	},
 
+	minute: {
 
+		common: true,
 
+		size: 60000,
 
+		steps: [1, 2, 5, 10, 15, 30]
 
+	},
 
+	hour: {
 
+		common: true,
 
+		size: 3600000,
 
+		steps: [1, 2, 3, 6, 12]
 
+	},
 
+	day: {
 
+		common: true,
 
+		size: 86400000,
 
+		steps: [1, 2, 5]
 
+	},
 
+	week: {
 
+		common: false,
 
+		size: 604800000,
 
+		steps: [1, 2, 3, 4]
 
+	},
 
+	month: {
 
+		common: true,
 
+		size: 2.628e9,
 
+		steps: [1, 2, 3]
 
+	},
 
+	quarter: {
 
+		common: false,
 
+		size: 7.884e9,
 
+		steps: [1, 2, 3, 4]
 
+	},
 
+	year: {
 
+		common: true,
 
+		size: 3.154e10
 
+	}
 
+};
 
+
 
+var UNITS = Object.keys(INTERVALS);
 
+
 
+function sorter(a, b) {
 
+	return a - b;
 
+}
 
+
 
+function arrayUnique(items) {
 
+	var hash = {};
 
+	var out = [];
 
+	var i, ilen, item;
 
+
 
+	for (i = 0, ilen = items.length; i < ilen; ++i) {
 
+		item = items[i];
 
+		if (!hash[item]) {
 
+			hash[item] = true;
 
+			out.push(item);
 
+		}
 
+	}
 
+
 
+	return out;
 
+}
 
+
 
+/**
 
+ * Returns an array of {time, pos} objects used to interpolate a specific `time` or position
 
+ * (`pos`) on the scale, by searching entries before and after the requested value. `pos` is
 
+ * a decimal between 0 and 1: 0 being the start of the scale (left or top) and 1 the other
 
+ * extremity (left + width or top + height). Note that it would be more optimized to directly
 
+ * store pre-computed pixels, but the scale dimensions are not guaranteed at the time we need
 
+ * to create the lookup table. The table ALWAYS contains at least two items: min and max.
 
+ *
 
+ * @param {number[]} timestamps - timestamps sorted from lowest to highest.
 
+ * @param {string} distribution - If 'linear', timestamps will be spread linearly along the min
 
+ * and max range, so basically, the table will contains only two items: {min, 0} and {max, 1}.
 
+ * If 'series', timestamps will be positioned at the same distance from each other. In this
 
+ * case, only timestamps that break the time linearity are registered, meaning that in the
 
+ * best case, all timestamps are linear, the table contains only min and max.
 
+ */
 
+function buildLookupTable(timestamps, min, max, distribution) {
 
+	if (distribution === 'linear' || !timestamps.length) {
 
+		return [
 
+			{time: min, pos: 0},
 
+			{time: max, pos: 1}
 
+		];
 
+	}
 
+
 
+	var table = [];
 
+	var items = [min];
 
+	var i, ilen, prev, curr, next;
 
+
 
+	for (i = 0, ilen = timestamps.length; i < ilen; ++i) {
 
+		curr = timestamps[i];
 
+		if (curr > min && curr < max) {
 
+			items.push(curr);
 
+		}
 
+	}
 
+
 
+	items.push(max);
 
+
 
+	for (i = 0, ilen = items.length; i < ilen; ++i) {
 
+		next = items[i + 1];
 
+		prev = items[i - 1];
 
+		curr = items[i];
 
+
 
+		// only add points that breaks the scale linearity
 
+		if (prev === undefined || next === undefined || Math.round((next + prev) / 2) !== curr) {
 
+			table.push({time: curr, pos: i / (ilen - 1)});
 
+		}
 
+	}
 
+
 
+	return table;
 
+}
 
+
 
+// @see adapted from https://www.anujgakhar.com/2014/03/01/binary-search-in-javascript/
 
+function lookup(table, key, value) {
 
+	var lo = 0;
 
+	var hi = table.length - 1;
 
+	var mid, i0, i1;
 
+
 
+	while (lo >= 0 && lo <= hi) {
 
+		mid = (lo + hi) >> 1;
 
+		i0 = table[mid - 1] || null;
 
+		i1 = table[mid];
 
+
 
+		if (!i0) {
 
+			// given value is outside table (before first item)
 
+			return {lo: null, hi: i1};
 
+		} else if (i1[key] < value) {
 
+			lo = mid + 1;
 
+		} else if (i0[key] > value) {
 
+			hi = mid - 1;
 
+		} else {
 
+			return {lo: i0, hi: i1};
 
+		}
 
+	}
 
+
 
+	// given value is outside table (after last item)
 
+	return {lo: i1, hi: null};
 
+}
 
+
 
+/**
 
+ * Linearly interpolates the given source `value` using the table items `skey` values and
 
+ * returns the associated `tkey` value. For example, interpolate(table, 'time', 42, 'pos')
 
+ * returns the position for a timestamp equal to 42. If value is out of bounds, values at
 
+ * index [0, 1] or [n - 1, n] are used for the interpolation.
 
+ */
 
+function interpolate$1(table, skey, sval, tkey) {
 
+	var range = lookup(table, skey, sval);
 
+
 
+	// Note: the lookup table ALWAYS contains at least 2 items (min and max)
 
+	var prev = !range.lo ? table[0] : !range.hi ? table[table.length - 2] : range.lo;
 
+	var next = !range.lo ? table[1] : !range.hi ? table[table.length - 1] : range.hi;
 
+
 
+	var span = next[skey] - prev[skey];
 
+	var ratio = span ? (sval - prev[skey]) / span : 0;
 
+	var offset = (next[tkey] - prev[tkey]) * ratio;
 
+
 
+	return prev[tkey] + offset;
 
+}
 
+
 
+function toTimestamp(scale, input) {
 
+	var adapter = scale._adapter;
 
+	var options = scale.options.time;
 
+	var parser = options.parser;
 
+	var format = parser || options.format;
 
+	var value = input;
 
+
 
+	if (typeof parser === 'function') {
 
+		value = parser(value);
 
+	}
 
+
 
+	// Only parse if its not a timestamp already
 
+	if (!helpers$1.isFinite(value)) {
 
+		value = typeof format === 'string'
 
+			? adapter.parse(value, format)
 
+			: adapter.parse(value);
 
+	}
 
+
 
+	if (value !== null) {
 
+		return +value;
 
+	}
 
+
 
+	// Labels are in an incompatible format and no `parser` has been provided.
 
+	// The user might still use the deprecated `format` option for parsing.
 
+	if (!parser && typeof format === 'function') {
 
+		value = format(input);
 
+
 
+		// `format` could return something else than a timestamp, if so, parse it
 
+		if (!helpers$1.isFinite(value)) {
 
+			value = adapter.parse(value);
 
+		}
 
+	}
 
+
 
+	return value;
 
+}
 
+
 
+function parse(scale, input) {
 
+	if (helpers$1.isNullOrUndef(input)) {
 
+		return null;
 
+	}
 
+
 
+	var options = scale.options.time;
 
+	var value = toTimestamp(scale, scale.getRightValue(input));
 
+	if (value === null) {
 
+		return value;
 
+	}
 
+
 
+	if (options.round) {
 
+		value = +scale._adapter.startOf(value, options.round);
 
+	}
 
+
 
+	return value;
 
+}
 
+
 
+/**
 
+ * Returns the number of unit to skip to be able to display up to `capacity` number of ticks
 
+ * in `unit` for the given `min` / `max` range and respecting the interval steps constraints.
 
+ */
 
+function determineStepSize(min, max, unit, capacity) {
 
+	var range = max - min;
 
+	var interval = INTERVALS[unit];
 
+	var milliseconds = interval.size;
 
+	var steps = interval.steps;
 
+	var i, ilen, factor;
 
+
 
+	if (!steps) {
 
+		return Math.ceil(range / (capacity * milliseconds));
 
+	}
 
+
 
+	for (i = 0, ilen = steps.length; i < ilen; ++i) {
 
+		factor = steps[i];
 
+		if (Math.ceil(range / (milliseconds * factor)) <= capacity) {
 
+			break;
 
+		}
 
+	}
 
+
 
+	return factor;
 
+}
 
+
 
+/**
 
+ * Figures out what unit results in an appropriate number of auto-generated ticks
 
+ */
 
+function determineUnitForAutoTicks(minUnit, min, max, capacity) {
 
+	var ilen = UNITS.length;
 
+	var i, interval, factor;
 
+
 
+	for (i = UNITS.indexOf(minUnit); i < ilen - 1; ++i) {
 
+		interval = INTERVALS[UNITS[i]];
 
+		factor = interval.steps ? interval.steps[interval.steps.length - 1] : MAX_INTEGER;
 
+
 
+		if (interval.common && Math.ceil((max - min) / (factor * interval.size)) <= capacity) {
 
+			return UNITS[i];
 
+		}
 
+	}
 
+
 
+	return UNITS[ilen - 1];
 
+}
 
+
 
+/**
 
+ * Figures out what unit to format a set of ticks with
 
+ */
 
+function determineUnitForFormatting(scale, ticks, minUnit, min, max) {
 
+	var ilen = UNITS.length;
 
+	var i, unit;
 
+
 
+	for (i = ilen - 1; i >= UNITS.indexOf(minUnit); i--) {
 
+		unit = UNITS[i];
 
+		if (INTERVALS[unit].common && scale._adapter.diff(max, min, unit) >= ticks.length) {
 
+			return unit;
 
+		}
 
+	}
 
+
 
+	return UNITS[minUnit ? UNITS.indexOf(minUnit) : 0];
 
+}
 
+
 
+function determineMajorUnit(unit) {
 
+	for (var i = UNITS.indexOf(unit) + 1, ilen = UNITS.length; i < ilen; ++i) {
 
+		if (INTERVALS[UNITS[i]].common) {
 
+			return UNITS[i];
 
+		}
 
+	}
 
+}
 
+
 
+/**
 
+ * Generates a maximum of `capacity` timestamps between min and max, rounded to the
 
+ * `minor` unit, aligned on the `major` unit and using the given scale time `options`.
 
+ * Important: this method can return ticks outside the min and max range, it's the
 
+ * responsibility of the calling code to clamp values if needed.
 
+ */
 
+function generate(scale, min, max, capacity) {
 
+	var adapter = scale._adapter;
 
+	var options = scale.options;
 
+	var timeOpts = options.time;
 
+	var minor = timeOpts.unit || determineUnitForAutoTicks(timeOpts.minUnit, min, max, capacity);
 
+	var major = determineMajorUnit(minor);
 
+	var stepSize = valueOrDefault$c(timeOpts.stepSize, timeOpts.unitStepSize);
 
+	var weekday = minor === 'week' ? timeOpts.isoWeekday : false;
 
+	var majorTicksEnabled = options.ticks.major.enabled;
 
+	var interval = INTERVALS[minor];
 
+	var first = min;
 
+	var last = max;
 
+	var ticks = [];
 
+	var time;
 
+
 
+	if (!stepSize) {
 
+		stepSize = determineStepSize(min, max, minor, capacity);
 
+	}
 
+
 
+	// For 'week' unit, handle the first day of week option
 
+	if (weekday) {
 
+		first = +adapter.startOf(first, 'isoWeek', weekday);
 
+		last = +adapter.startOf(last, 'isoWeek', weekday);
 
+	}
 
+
 
+	// Align first/last ticks on unit
 
+	first = +adapter.startOf(first, weekday ? 'day' : minor);
 
+	last = +adapter.startOf(last, weekday ? 'day' : minor);
 
+
 
+	// Make sure that the last tick include max
 
+	if (last < max) {
 
+		last = +adapter.add(last, 1, minor);
 
+	}
 
+
 
+	time = first;
 
+
 
+	if (majorTicksEnabled && major && !weekday && !timeOpts.round) {
 
+		// Align the first tick on the previous `minor` unit aligned on the `major` unit:
 
+		// we first aligned time on the previous `major` unit then add the number of full
 
+		// stepSize there is between first and the previous major time.
 
+		time = +adapter.startOf(time, major);
 
+		time = +adapter.add(time, ~~((first - time) / (interval.size * stepSize)) * stepSize, minor);
 
+	}
 
+
 
+	for (; time < last; time = +adapter.add(time, stepSize, minor)) {
 
+		ticks.push(+time);
 
+	}
 
+
 
+	ticks.push(+time);
 
+
 
+	return ticks;
 
+}
 
+
 
+/**
 
+ * Returns the start and end offsets from edges in the form of {start, end}
 
+ * where each value is a relative width to the scale and ranges between 0 and 1.
 
+ * They add extra margins on the both sides by scaling down the original scale.
 
+ * Offsets are added when the `offset` option is true.
 
+ */
 
+function computeOffsets(table, ticks, min, max, options) {
 
+	var start = 0;
 
+	var end = 0;
 
+	var first, last;
 
+
 
+	if (options.offset && ticks.length) {
 
+		if (!options.time.min) {
 
+			first = interpolate$1(table, 'time', ticks[0], 'pos');
 
+			if (ticks.length === 1) {
 
+				start = 1 - first;
 
+			} else {
 
+				start = (interpolate$1(table, 'time', ticks[1], 'pos') - first) / 2;
 
+			}
 
+		}
 
+		if (!options.time.max) {
 
+			last = interpolate$1(table, 'time', ticks[ticks.length - 1], 'pos');
 
+			if (ticks.length === 1) {
 
+				end = last;
 
+			} else {
 
+				end = (last - interpolate$1(table, 'time', ticks[ticks.length - 2], 'pos')) / 2;
 
+			}
 
+		}
 
+	}
 
+
 
+	return {start: start, end: end};
 
+}
 
+
 
+function ticksFromTimestamps(scale, values, majorUnit) {
 
+	var ticks = [];
 
+	var i, ilen, value, major;
 
+
 
+	for (i = 0, ilen = values.length; i < ilen; ++i) {
 
+		value = values[i];
 
+		major = majorUnit ? value === +scale._adapter.startOf(value, majorUnit) : false;
 
+
 
+		ticks.push({
 
+			value: value,
 
+			major: major
 
+		});
 
+	}
 
+
 
+	return ticks;
 
+}
 
+
 
+var defaultConfig$4 = {
 
+	position: 'bottom',
 
+
 
+	/**
 
+	 * Data distribution along the scale:
 
+	 * - 'linear': data are spread according to their time (distances can vary),
 
+	 * - 'series': data are spread at the same distance from each other.
 
+	 * @see https://github.com/chartjs/Chart.js/pull/4507
 
+	 * @since 2.7.0
 
+	 */
 
+	distribution: 'linear',
 
+
 
+	/**
 
+	 * Scale boundary strategy (bypassed by min/max time options)
 
+	 * - `data`: make sure data are fully visible, ticks outside are removed
 
+	 * - `ticks`: make sure ticks are fully visible, data outside are truncated
 
+	 * @see https://github.com/chartjs/Chart.js/pull/4556
 
+	 * @since 2.7.0
 
+	 */
 
+	bounds: 'data',
 
+
 
+	adapters: {},
 
+	time: {
 
+		parser: false, // false == a pattern string from https://momentjs.com/docs/#/parsing/string-format/ or a custom callback that converts its argument to a moment
 
+		format: false, // DEPRECATED false == date objects, moment object, callback or a pattern string from https://momentjs.com/docs/#/parsing/string-format/
 
+		unit: false, // false == automatic or override with week, month, year, etc.
 
+		round: false, // none, or override with week, month, year, etc.
 
+		displayFormat: false, // DEPRECATED
 
+		isoWeekday: false, // override week start day - see https://momentjs.com/docs/#/get-set/iso-weekday/
 
+		minUnit: 'millisecond',
 
+		displayFormats: {}
 
+	},
 
+	ticks: {
 
+		autoSkip: false,
 
+
 
+		/**
 
+		 * Ticks generation input values:
 
+		 * - 'auto': generates "optimal" ticks based on scale size and time options.
 
+		 * - 'data': generates ticks from data (including labels from data {t|x|y} objects).
 
+		 * - 'labels': generates ticks from user given `data.labels` values ONLY.
 
+		 * @see https://github.com/chartjs/Chart.js/pull/4507
 
+		 * @since 2.7.0
 
+		 */
 
+		source: 'auto',
 
+
 
+		major: {
 
+			enabled: false
 
+		}
 
+	}
 
+};
 
+
 
+var scale_time = core_scale.extend({
 
+	initialize: function() {
 
+		this.mergeTicksOptions();
 
+		core_scale.prototype.initialize.call(this);
 
+	},
 
+
 
+	update: function() {
 
+		var me = this;
 
+		var options = me.options;
 
+		var time = options.time || (options.time = {});
 
+		var adapter = me._adapter = new core_adapters._date(options.adapters.date);
 
+
 
+		// DEPRECATIONS: output a message only one time per update
 
+		if (time.format) {
 
+			console.warn('options.time.format is deprecated and replaced by options.time.parser.');
 
+		}
 
+
 
+		// Backward compatibility: before introducing adapter, `displayFormats` was
 
+		// supposed to contain *all* unit/string pairs but this can't be resolved
 
+		// when loading the scale (adapters are loaded afterward), so let's populate
 
+		// missing formats on update
 
+		helpers$1.mergeIf(time.displayFormats, adapter.formats());
 
+
 
+		return core_scale.prototype.update.apply(me, arguments);
 
+	},
 
+
 
+	/**
 
+	 * Allows data to be referenced via 't' attribute
 
+	 */
 
+	getRightValue: function(rawValue) {
 
+		if (rawValue && rawValue.t !== undefined) {
 
+			rawValue = rawValue.t;
 
+		}
 
+		return core_scale.prototype.getRightValue.call(this, rawValue);
 
+	},
 
+
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var adapter = me._adapter;
 
+		var timeOpts = me.options.time;
 
+		var unit = timeOpts.unit || 'day';
 
+		var min = MAX_INTEGER;
 
+		var max = MIN_INTEGER;
 
+		var timestamps = [];
 
+		var datasets = [];
 
+		var labels = [];
 
+		var i, j, ilen, jlen, data, timestamp;
 
+		var dataLabels = chart.data.labels || [];
 
+
 
+		// Convert labels to timestamps
 
+		for (i = 0, ilen = dataLabels.length; i < ilen; ++i) {
 
+			labels.push(parse(me, dataLabels[i]));
 
+		}
 
+
 
+		// Convert data to timestamps
 
+		for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
 
+			if (chart.isDatasetVisible(i)) {
 
+				data = chart.data.datasets[i].data;
 
+
 
+				// Let's consider that all data have the same format.
 
+				if (helpers$1.isObject(data[0])) {
 
+					datasets[i] = [];
 
+
 
+					for (j = 0, jlen = data.length; j < jlen; ++j) {
 
+						timestamp = parse(me, data[j]);
 
+						timestamps.push(timestamp);
 
+						datasets[i][j] = timestamp;
 
+					}
 
+				} else {
 
+					for (j = 0, jlen = labels.length; j < jlen; ++j) {
 
+						timestamps.push(labels[j]);
 
+					}
 
+					datasets[i] = labels.slice(0);
 
+				}
 
+			} else {
 
+				datasets[i] = [];
 
+			}
 
+		}
 
+
 
+		if (labels.length) {
 
+			// Sort labels **after** data have been converted
 
+			labels = arrayUnique(labels).sort(sorter);
 
+			min = Math.min(min, labels[0]);
 
+			max = Math.max(max, labels[labels.length - 1]);
 
+		}
 
+
 
+		if (timestamps.length) {
 
+			timestamps = arrayUnique(timestamps).sort(sorter);
 
+			min = Math.min(min, timestamps[0]);
 
+			max = Math.max(max, timestamps[timestamps.length - 1]);
 
+		}
 
+
 
+		min = parse(me, timeOpts.min) || min;
 
+		max = parse(me, timeOpts.max) || max;
 
+
 
+		// In case there is no valid min/max, set limits based on unit time option
 
+		min = min === MAX_INTEGER ? +adapter.startOf(Date.now(), unit) : min;
 
+		max = max === MIN_INTEGER ? +adapter.endOf(Date.now(), unit) + 1 : max;
 
+
 
+		// Make sure that max is strictly higher than min (required by the lookup table)
 
+		me.min = Math.min(min, max);
 
+		me.max = Math.max(min + 1, max);
 
+
 
+		// PRIVATE
 
+		me._horizontal = me.isHorizontal();
 
+		me._table = [];
 
+		me._timestamps = {
 
+			data: timestamps,
 
+			datasets: datasets,
 
+			labels: labels
 
+		};
 
+	},
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var min = me.min;
 
+		var max = me.max;
 
+		var options = me.options;
 
+		var timeOpts = options.time;
 
+		var timestamps = [];
 
+		var ticks = [];
 
+		var i, ilen, timestamp;
 
+
 
+		switch (options.ticks.source) {
 
+		case 'data':
 
+			timestamps = me._timestamps.data;
 
+			break;
 
+		case 'labels':
 
+			timestamps = me._timestamps.labels;
 
+			break;
 
+		case 'auto':
 
+		default:
 
+			timestamps = generate(me, min, max, me.getLabelCapacity(min), options);
 
+		}
 
+
 
+		if (options.bounds === 'ticks' && timestamps.length) {
 
+			min = timestamps[0];
 
+			max = timestamps[timestamps.length - 1];
 
+		}
 
+
 
+		// Enforce limits with user min/max options
 
+		min = parse(me, timeOpts.min) || min;
 
+		max = parse(me, timeOpts.max) || max;
 
+
 
+		// Remove ticks outside the min/max range
 
+		for (i = 0, ilen = timestamps.length; i < ilen; ++i) {
 
+			timestamp = timestamps[i];
 
+			if (timestamp >= min && timestamp <= max) {
 
+				ticks.push(timestamp);
 
+			}
 
+		}
 
+
 
+		me.min = min;
 
+		me.max = max;
 
+
 
+		// PRIVATE
 
+		me._unit = timeOpts.unit || determineUnitForFormatting(me, ticks, timeOpts.minUnit, me.min, me.max);
 
+		me._majorUnit = determineMajorUnit(me._unit);
 
+		me._table = buildLookupTable(me._timestamps.data, min, max, options.distribution);
 
+		me._offsets = computeOffsets(me._table, ticks, min, max, options);
 
+
 
+		if (options.ticks.reverse) {
 
+			ticks.reverse();
 
+		}
 
+
 
+		return ticksFromTimestamps(me, ticks, me._majorUnit);
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		var me = this;
 
+		var adapter = me._adapter;
 
+		var data = me.chart.data;
 
+		var timeOpts = me.options.time;
 
+		var label = data.labels && index < data.labels.length ? data.labels[index] : '';
 
+		var value = data.datasets[datasetIndex].data[index];
 
+
 
+		if (helpers$1.isObject(value)) {
 
+			label = me.getRightValue(value);
 
+		}
 
+		if (timeOpts.tooltipFormat) {
 
+			return adapter.format(toTimestamp(me, label), timeOpts.tooltipFormat);
 
+		}
 
+		if (typeof label === 'string') {
 
+			return label;
 
+		}
 
+		return adapter.format(toTimestamp(me, label), timeOpts.displayFormats.datetime);
 
+	},
 
+
 
+	/**
 
+	 * Function to format an individual tick mark
 
+	 * @private
 
+	 */
 
+	tickFormatFunction: function(time, index, ticks, format) {
 
+		var me = this;
 
+		var adapter = me._adapter;
 
+		var options = me.options;
 
+		var formats = options.time.displayFormats;
 
+		var minorFormat = formats[me._unit];
 
+		var majorUnit = me._majorUnit;
 
+		var majorFormat = formats[majorUnit];
 
+		var majorTime = +adapter.startOf(time, majorUnit);
 
+		var majorTickOpts = options.ticks.major;
 
+		var major = majorTickOpts.enabled && majorUnit && majorFormat && time === majorTime;
 
+		var label = adapter.format(time, format ? format : major ? majorFormat : minorFormat);
 
+		var tickOpts = major ? majorTickOpts : options.ticks.minor;
 
+		var formatter = valueOrDefault$c(tickOpts.callback, tickOpts.userCallback);
 
+
 
+		return formatter ? formatter(label, index, ticks) : label;
 
+	},
 
+
 
+	convertTicksToLabels: function(ticks) {
 
+		var labels = [];
 
+		var i, ilen;
 
+
 
+		for (i = 0, ilen = ticks.length; i < ilen; ++i) {
 
+			labels.push(this.tickFormatFunction(ticks[i].value, i, ticks));
 
+		}
 
+
 
+		return labels;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	getPixelForOffset: function(time) {
 
+		var me = this;
 
+		var isReverse = me.options.ticks.reverse;
 
+		var size = me._horizontal ? me.width : me.height;
 
+		var start = me._horizontal ? isReverse ? me.right : me.left : isReverse ? me.bottom : me.top;
 
+		var pos = interpolate$1(me._table, 'time', time, 'pos');
 
+		var offset = size * (me._offsets.start + pos) / (me._offsets.start + 1 + me._offsets.end);
 
+
 
+		return isReverse ? start - offset : start + offset;
 
+	},
 
+
 
+	getPixelForValue: function(value, index, datasetIndex) {
 
+		var me = this;
 
+		var time = null;
 
+
 
+		if (index !== undefined && datasetIndex !== undefined) {
 
+			time = me._timestamps.datasets[datasetIndex][index];
 
+		}
 
+
 
+		if (time === null) {
 
+			time = parse(me, value);
 
+		}
 
+
 
+		if (time !== null) {
 
+			return me.getPixelForOffset(time);
 
+		}
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		var ticks = this.getTicks();
 
+		return index >= 0 && index < ticks.length ?
 
+			this.getPixelForOffset(ticks[index].value) :
 
+			null;
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var size = me._horizontal ? me.width : me.height;
 
+		var start = me._horizontal ? me.left : me.top;
 
+		var pos = (size ? (pixel - start) / size : 0) * (me._offsets.start + 1 + me._offsets.start) - me._offsets.end;
 
+		var time = interpolate$1(me._table, 'pos', pos, 'time');
 
+
 
+		// DEPRECATION, we should return time directly
 
+		return me._adapter._create(time);
 
+	},
 
+
 
+	/**
 
+	 * Crude approximation of what the label width might be
 
+	 * @private
 
+	 */
 
+	getLabelWidth: function(label) {
 
+		var me = this;
 
+		var ticksOpts = me.options.ticks;
 
+		var tickLabelWidth = me.ctx.measureText(label).width;
 
+		var angle = helpers$1.toRadians(ticksOpts.maxRotation);
 
+		var cosRotation = Math.cos(angle);
 
+		var sinRotation = Math.sin(angle);
 
+		var tickFontSize = valueOrDefault$c(ticksOpts.fontSize, core_defaults.global.defaultFontSize);
 
+
 
+		return (tickLabelWidth * cosRotation) + (tickFontSize * sinRotation);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	getLabelCapacity: function(exampleTime) {
 
+		var me = this;
 
+
 
+		// pick the longest format (milliseconds) for guestimation
 
+		var format = me.options.time.displayFormats.millisecond;
 
+		var exampleLabel = me.tickFormatFunction(exampleTime, 0, [], format);
 
+		var tickLabelWidth = me.getLabelWidth(exampleLabel);
 
+		var innerWidth = me.isHorizontal() ? me.width : me.height;
 
+		var capacity = Math.floor(innerWidth / tickLabelWidth);
 
+
 
+		return capacity > 0 ? capacity : 1;
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$4 = defaultConfig$4;
 
+scale_time._defaults = _defaults$4;
 
+
 
+var scales = {
 
+	category: scale_category,
 
+	linear: scale_linear,
 
+	logarithmic: scale_logarithmic,
 
+	radialLinear: scale_radialLinear,
 
+	time: scale_time
 
+};
 
+
 
+var moment = createCommonjsModule(function (module, exports) {
 
+(function (global, factory) {
 
+    module.exports = factory();
 
+}(commonjsGlobal, (function () {
 
+    var hookCallback;
 
+
 
+    function hooks () {
 
+        return hookCallback.apply(null, arguments);
 
+    }
 
+
 
+    // This is done to register the method called with moment()
 
+    // without creating circular dependencies.
 
+    function setHookCallback (callback) {
 
+        hookCallback = callback;
 
+    }
 
+
 
+    function isArray(input) {
 
+        return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]';
 
+    }
 
+
 
+    function isObject(input) {
 
+        // IE8 will treat undefined and null as object if it wasn't for
 
+        // input != null
 
+        return input != null && Object.prototype.toString.call(input) === '[object Object]';
 
+    }
 
+
 
+    function isObjectEmpty(obj) {
 
+        if (Object.getOwnPropertyNames) {
 
+            return (Object.getOwnPropertyNames(obj).length === 0);
 
+        } else {
 
+            var k;
 
+            for (k in obj) {
 
+                if (obj.hasOwnProperty(k)) {
 
+                    return false;
 
+                }
 
+            }
 
+            return true;
 
+        }
 
+    }
 
+
 
+    function isUndefined(input) {
 
+        return input === void 0;
 
+    }
 
+
 
+    function isNumber(input) {
 
+        return typeof input === 'number' || Object.prototype.toString.call(input) === '[object Number]';
 
+    }
 
+
 
+    function isDate(input) {
 
+        return input instanceof Date || Object.prototype.toString.call(input) === '[object Date]';
 
+    }
 
+
 
+    function map(arr, fn) {
 
+        var res = [], i;
 
+        for (i = 0; i < arr.length; ++i) {
 
+            res.push(fn(arr[i], i));
 
+        }
 
+        return res;
 
+    }
 
+
 
+    function hasOwnProp(a, b) {
 
+        return Object.prototype.hasOwnProperty.call(a, b);
 
+    }
 
+
 
+    function extend(a, b) {
 
+        for (var i in b) {
 
+            if (hasOwnProp(b, i)) {
 
+                a[i] = b[i];
 
+            }
 
+        }
 
+
 
+        if (hasOwnProp(b, 'toString')) {
 
+            a.toString = b.toString;
 
+        }
 
+
 
+        if (hasOwnProp(b, 'valueOf')) {
 
+            a.valueOf = b.valueOf;
 
+        }
 
+
 
+        return a;
 
+    }
 
+
 
+    function createUTC (input, format, locale, strict) {
 
+        return createLocalOrUTC(input, format, locale, strict, true).utc();
 
+    }
 
+
 
+    function defaultParsingFlags() {
 
+        // We need to deep clone this object.
 
+        return {
 
+            empty           : false,
 
+            unusedTokens    : [],
 
+            unusedInput     : [],
 
+            overflow        : -2,
 
+            charsLeftOver   : 0,
 
+            nullInput       : false,
 
+            invalidMonth    : null,
 
+            invalidFormat   : false,
 
+            userInvalidated : false,
 
+            iso             : false,
 
+            parsedDateParts : [],
 
+            meridiem        : null,
 
+            rfc2822         : false,
 
+            weekdayMismatch : false
 
+        };
 
+    }
 
+
 
+    function getParsingFlags(m) {
 
+        if (m._pf == null) {
 
+            m._pf = defaultParsingFlags();
 
+        }
 
+        return m._pf;
 
+    }
 
+
 
+    var some;
 
+    if (Array.prototype.some) {
 
+        some = Array.prototype.some;
 
+    } else {
 
+        some = function (fun) {
 
+            var t = Object(this);
 
+            var len = t.length >>> 0;
 
+
 
+            for (var i = 0; i < len; i++) {
 
+                if (i in t && fun.call(this, t[i], i, t)) {
 
+                    return true;
 
+                }
 
+            }
 
+
 
+            return false;
 
+        };
 
+    }
 
+
 
+    function isValid(m) {
 
+        if (m._isValid == null) {
 
+            var flags = getParsingFlags(m);
 
+            var parsedParts = some.call(flags.parsedDateParts, function (i) {
 
+                return i != null;
 
+            });
 
+            var isNowValid = !isNaN(m._d.getTime()) &&
 
+                flags.overflow < 0 &&
 
+                !flags.empty &&
 
+                !flags.invalidMonth &&
 
+                !flags.invalidWeekday &&
 
+                !flags.weekdayMismatch &&
 
+                !flags.nullInput &&
 
+                !flags.invalidFormat &&
 
+                !flags.userInvalidated &&
 
+                (!flags.meridiem || (flags.meridiem && parsedParts));
 
+
 
+            if (m._strict) {
 
+                isNowValid = isNowValid &&
 
+                    flags.charsLeftOver === 0 &&
 
+                    flags.unusedTokens.length === 0 &&
 
+                    flags.bigHour === undefined;
 
+            }
 
+
 
+            if (Object.isFrozen == null || !Object.isFrozen(m)) {
 
+                m._isValid = isNowValid;
 
+            }
 
+            else {
 
+                return isNowValid;
 
+            }
 
+        }
 
+        return m._isValid;
 
+    }
 
+
 
+    function createInvalid (flags) {
 
+        var m = createUTC(NaN);
 
+        if (flags != null) {
 
+            extend(getParsingFlags(m), flags);
 
+        }
 
+        else {
 
+            getParsingFlags(m).userInvalidated = true;
 
+        }
 
+
 
+        return m;
 
+    }
 
+
 
+    // Plugins that add properties should also add the key here (null value),
 
+    // so we can properly clone ourselves.
 
+    var momentProperties = hooks.momentProperties = [];
 
+
 
+    function copyConfig(to, from) {
 
+        var i, prop, val;
 
+
 
+        if (!isUndefined(from._isAMomentObject)) {
 
+            to._isAMomentObject = from._isAMomentObject;
 
+        }
 
+        if (!isUndefined(from._i)) {
 
+            to._i = from._i;
 
+        }
 
+        if (!isUndefined(from._f)) {
 
+            to._f = from._f;
 
+        }
 
+        if (!isUndefined(from._l)) {
 
+            to._l = from._l;
 
+        }
 
+        if (!isUndefined(from._strict)) {
 
+            to._strict = from._strict;
 
+        }
 
+        if (!isUndefined(from._tzm)) {
 
+            to._tzm = from._tzm;
 
+        }
 
+        if (!isUndefined(from._isUTC)) {
 
+            to._isUTC = from._isUTC;
 
+        }
 
+        if (!isUndefined(from._offset)) {
 
+            to._offset = from._offset;
 
+        }
 
+        if (!isUndefined(from._pf)) {
 
+            to._pf = getParsingFlags(from);
 
+        }
 
+        if (!isUndefined(from._locale)) {
 
+            to._locale = from._locale;
 
+        }
 
+
 
+        if (momentProperties.length > 0) {
 
+            for (i = 0; i < momentProperties.length; i++) {
 
+                prop = momentProperties[i];
 
+                val = from[prop];
 
+                if (!isUndefined(val)) {
 
+                    to[prop] = val;
 
+                }
 
+            }
 
+        }
 
+
 
+        return to;
 
+    }
 
+
 
+    var updateInProgress = false;
 
+
 
+    // Moment prototype object
 
+    function Moment(config) {
 
+        copyConfig(this, config);
 
+        this._d = new Date(config._d != null ? config._d.getTime() : NaN);
 
+        if (!this.isValid()) {
 
+            this._d = new Date(NaN);
 
+        }
 
+        // Prevent infinite loop in case updateOffset creates new moment
 
+        // objects.
 
+        if (updateInProgress === false) {
 
+            updateInProgress = true;
 
+            hooks.updateOffset(this);
 
+            updateInProgress = false;
 
+        }
 
+    }
 
+
 
+    function isMoment (obj) {
 
+        return obj instanceof Moment || (obj != null && obj._isAMomentObject != null);
 
+    }
 
+
 
+    function absFloor (number) {
 
+        if (number < 0) {
 
+            // -0 -> 0
 
+            return Math.ceil(number) || 0;
 
+        } else {
 
+            return Math.floor(number);
 
+        }
 
+    }
 
+
 
+    function toInt(argumentForCoercion) {
 
+        var coercedNumber = +argumentForCoercion,
 
+            value = 0;
 
+
 
+        if (coercedNumber !== 0 && isFinite(coercedNumber)) {
 
+            value = absFloor(coercedNumber);
 
+        }
 
+
 
+        return value;
 
+    }
 
+
 
+    // compare two arrays, return the number of differences
 
+    function compareArrays(array1, array2, dontConvert) {
 
+        var len = Math.min(array1.length, array2.length),
 
+            lengthDiff = Math.abs(array1.length - array2.length),
 
+            diffs = 0,
 
+            i;
 
+        for (i = 0; i < len; i++) {
 
+            if ((dontConvert && array1[i] !== array2[i]) ||
 
+                (!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
 
+                diffs++;
 
+            }
 
+        }
 
+        return diffs + lengthDiff;
 
+    }
 
+
 
+    function warn(msg) {
 
+        if (hooks.suppressDeprecationWarnings === false &&
 
+                (typeof console !==  'undefined') && console.warn) {
 
+            console.warn('Deprecation warning: ' + msg);
 
+        }
 
+    }
 
+
 
+    function deprecate(msg, fn) {
 
+        var firstTime = true;
 
+
 
+        return extend(function () {
 
+            if (hooks.deprecationHandler != null) {
 
+                hooks.deprecationHandler(null, msg);
 
+            }
 
+            if (firstTime) {
 
+                var args = [];
 
+                var arg;
 
+                for (var i = 0; i < arguments.length; i++) {
 
+                    arg = '';
 
+                    if (typeof arguments[i] === 'object') {
 
+                        arg += '\n[' + i + '] ';
 
+                        for (var key in arguments[0]) {
 
+                            arg += key + ': ' + arguments[0][key] + ', ';
 
+                        }
 
+                        arg = arg.slice(0, -2); // Remove trailing comma and space
 
+                    } else {
 
+                        arg = arguments[i];
 
+                    }
 
+                    args.push(arg);
 
+                }
 
+                warn(msg + '\nArguments: ' + Array.prototype.slice.call(args).join('') + '\n' + (new Error()).stack);
 
+                firstTime = false;
 
+            }
 
+            return fn.apply(this, arguments);
 
+        }, fn);
 
+    }
 
+
 
+    var deprecations = {};
 
+
 
+    function deprecateSimple(name, msg) {
 
+        if (hooks.deprecationHandler != null) {
 
+            hooks.deprecationHandler(name, msg);
 
+        }
 
+        if (!deprecations[name]) {
 
+            warn(msg);
 
+            deprecations[name] = true;
 
+        }
 
+    }
 
+
 
+    hooks.suppressDeprecationWarnings = false;
 
+    hooks.deprecationHandler = null;
 
+
 
+    function isFunction(input) {
 
+        return input instanceof Function || Object.prototype.toString.call(input) === '[object Function]';
 
+    }
 
+
 
+    function set (config) {
 
+        var prop, i;
 
+        for (i in config) {
 
+            prop = config[i];
 
+            if (isFunction(prop)) {
 
+                this[i] = prop;
 
+            } else {
 
+                this['_' + i] = prop;
 
+            }
 
+        }
 
+        this._config = config;
 
+        // Lenient ordinal parsing accepts just a number in addition to
 
+        // number + (possibly) stuff coming from _dayOfMonthOrdinalParse.
 
+        // TODO: Remove "ordinalParse" fallback in next major release.
 
+        this._dayOfMonthOrdinalParseLenient = new RegExp(
 
+            (this._dayOfMonthOrdinalParse.source || this._ordinalParse.source) +
 
+                '|' + (/\d{1,2}/).source);
 
+    }
 
+
 
+    function mergeConfigs(parentConfig, childConfig) {
 
+        var res = extend({}, parentConfig), prop;
 
+        for (prop in childConfig) {
 
+            if (hasOwnProp(childConfig, prop)) {
 
+                if (isObject(parentConfig[prop]) && isObject(childConfig[prop])) {
 
+                    res[prop] = {};
 
+                    extend(res[prop], parentConfig[prop]);
 
+                    extend(res[prop], childConfig[prop]);
 
+                } else if (childConfig[prop] != null) {
 
+                    res[prop] = childConfig[prop];
 
+                } else {
 
+                    delete res[prop];
 
+                }
 
+            }
 
+        }
 
+        for (prop in parentConfig) {
 
+            if (hasOwnProp(parentConfig, prop) &&
 
+                    !hasOwnProp(childConfig, prop) &&
 
+                    isObject(parentConfig[prop])) {
 
+                // make sure changes to properties don't modify parent config
 
+                res[prop] = extend({}, res[prop]);
 
+            }
 
+        }
 
+        return res;
 
+    }
 
+
 
+    function Locale(config) {
 
+        if (config != null) {
 
+            this.set(config);
 
+        }
 
+    }
 
+
 
+    var keys;
 
+
 
+    if (Object.keys) {
 
+        keys = Object.keys;
 
+    } else {
 
+        keys = function (obj) {
 
+            var i, res = [];
 
+            for (i in obj) {
 
+                if (hasOwnProp(obj, i)) {
 
+                    res.push(i);
 
+                }
 
+            }
 
+            return res;
 
+        };
 
+    }
 
+
 
+    var defaultCalendar = {
 
+        sameDay : '[Today at] LT',
 
+        nextDay : '[Tomorrow at] LT',
 
+        nextWeek : 'dddd [at] LT',
 
+        lastDay : '[Yesterday at] LT',
 
+        lastWeek : '[Last] dddd [at] LT',
 
+        sameElse : 'L'
 
+    };
 
+
 
+    function calendar (key, mom, now) {
 
+        var output = this._calendar[key] || this._calendar['sameElse'];
 
+        return isFunction(output) ? output.call(mom, now) : output;
 
+    }
 
+
 
+    var defaultLongDateFormat = {
 
+        LTS  : 'h:mm:ss A',
 
+        LT   : 'h:mm A',
 
+        L    : 'MM/DD/YYYY',
 
+        LL   : 'MMMM D, YYYY',
 
+        LLL  : 'MMMM D, YYYY h:mm A',
 
+        LLLL : 'dddd, MMMM D, YYYY h:mm A'
 
+    };
 
+
 
+    function longDateFormat (key) {
 
+        var format = this._longDateFormat[key],
 
+            formatUpper = this._longDateFormat[key.toUpperCase()];
 
+
 
+        if (format || !formatUpper) {
 
+            return format;
 
+        }
 
+
 
+        this._longDateFormat[key] = formatUpper.replace(/MMMM|MM|DD|dddd/g, function (val) {
 
+            return val.slice(1);
 
+        });
 
+
 
+        return this._longDateFormat[key];
 
+    }
 
+
 
+    var defaultInvalidDate = 'Invalid date';
 
+
 
+    function invalidDate () {
 
+        return this._invalidDate;
 
+    }
 
+
 
+    var defaultOrdinal = '%d';
 
+    var defaultDayOfMonthOrdinalParse = /\d{1,2}/;
 
+
 
+    function ordinal (number) {
 
+        return this._ordinal.replace('%d', number);
 
+    }
 
+
 
+    var defaultRelativeTime = {
 
+        future : 'in %s',
 
+        past   : '%s ago',
 
+        s  : 'a few seconds',
 
+        ss : '%d seconds',
 
+        m  : 'a minute',
 
+        mm : '%d minutes',
 
+        h  : 'an hour',
 
+        hh : '%d hours',
 
+        d  : 'a day',
 
+        dd : '%d days',
 
+        M  : 'a month',
 
+        MM : '%d months',
 
+        y  : 'a year',
 
+        yy : '%d years'
 
+    };
 
+
 
+    function relativeTime (number, withoutSuffix, string, isFuture) {
 
+        var output = this._relativeTime[string];
 
+        return (isFunction(output)) ?
 
+            output(number, withoutSuffix, string, isFuture) :
 
+            output.replace(/%d/i, number);
 
+    }
 
+
 
+    function pastFuture (diff, output) {
 
+        var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
 
+        return isFunction(format) ? format(output) : format.replace(/%s/i, output);
 
+    }
 
+
 
+    var aliases = {};
 
+
 
+    function addUnitAlias (unit, shorthand) {
 
+        var lowerCase = unit.toLowerCase();
 
+        aliases[lowerCase] = aliases[lowerCase + 's'] = aliases[shorthand] = unit;
 
+    }
 
+
 
+    function normalizeUnits(units) {
 
+        return typeof units === 'string' ? aliases[units] || aliases[units.toLowerCase()] : undefined;
 
+    }
 
+
 
+    function normalizeObjectUnits(inputObject) {
 
+        var normalizedInput = {},
 
+            normalizedProp,
 
+            prop;
 
+
 
+        for (prop in inputObject) {
 
+            if (hasOwnProp(inputObject, prop)) {
 
+                normalizedProp = normalizeUnits(prop);
 
+                if (normalizedProp) {
 
+                    normalizedInput[normalizedProp] = inputObject[prop];
 
+                }
 
+            }
 
+        }
 
+
 
+        return normalizedInput;
 
+    }
 
+
 
+    var priorities = {};
 
+
 
+    function addUnitPriority(unit, priority) {
 
+        priorities[unit] = priority;
 
+    }
 
+
 
+    function getPrioritizedUnits(unitsObj) {
 
+        var units = [];
 
+        for (var u in unitsObj) {
 
+            units.push({unit: u, priority: priorities[u]});
 
+        }
 
+        units.sort(function (a, b) {
 
+            return a.priority - b.priority;
 
+        });
 
+        return units;
 
+    }
 
+
 
+    function zeroFill(number, targetLength, forceSign) {
 
+        var absNumber = '' + Math.abs(number),
 
+            zerosToFill = targetLength - absNumber.length,
 
+            sign = number >= 0;
 
+        return (sign ? (forceSign ? '+' : '') : '-') +
 
+            Math.pow(10, Math.max(0, zerosToFill)).toString().substr(1) + absNumber;
 
+    }
 
+
 
+    var formattingTokens = /(\[[^\[]*\])|(\\)?([Hh]mm(ss)?|Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Qo?|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|kk?|mm?|ss?|S{1,9}|x|X|zz?|ZZ?|.)/g;
 
+
 
+    var localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g;
 
+
 
+    var formatFunctions = {};
 
+
 
+    var formatTokenFunctions = {};
 
+
 
+    // token:    'M'
 
+    // padded:   ['MM', 2]
 
+    // ordinal:  'Mo'
 
+    // callback: function () { this.month() + 1 }
 
+    function addFormatToken (token, padded, ordinal, callback) {
 
+        var func = callback;
 
+        if (typeof callback === 'string') {
 
+            func = function () {
 
+                return this[callback]();
 
+            };
 
+        }
 
+        if (token) {
 
+            formatTokenFunctions[token] = func;
 
+        }
 
+        if (padded) {
 
+            formatTokenFunctions[padded[0]] = function () {
 
+                return zeroFill(func.apply(this, arguments), padded[1], padded[2]);
 
+            };
 
+        }
 
+        if (ordinal) {
 
+            formatTokenFunctions[ordinal] = function () {
 
+                return this.localeData().ordinal(func.apply(this, arguments), token);
 
+            };
 
+        }
 
+    }
 
+
 
+    function removeFormattingTokens(input) {
 
+        if (input.match(/\[[\s\S]/)) {
 
+            return input.replace(/^\[|\]$/g, '');
 
+        }
 
+        return input.replace(/\\/g, '');
 
+    }
 
+
 
+    function makeFormatFunction(format) {
 
+        var array = format.match(formattingTokens), i, length;
 
+
 
+        for (i = 0, length = array.length; i < length; i++) {
 
+            if (formatTokenFunctions[array[i]]) {
 
+                array[i] = formatTokenFunctions[array[i]];
 
+            } else {
 
+                array[i] = removeFormattingTokens(array[i]);
 
+            }
 
+        }
 
+
 
+        return function (mom) {
 
+            var output = '', i;
 
+            for (i = 0; i < length; i++) {
 
+                output += isFunction(array[i]) ? array[i].call(mom, format) : array[i];
 
+            }
 
+            return output;
 
+        };
 
+    }
 
+
 
+    // format date using native date object
 
+    function formatMoment(m, format) {
 
+        if (!m.isValid()) {
 
+            return m.localeData().invalidDate();
 
+        }
 
+
 
+        format = expandFormat(format, m.localeData());
 
+        formatFunctions[format] = formatFunctions[format] || makeFormatFunction(format);
 
+
 
+        return formatFunctions[format](m);
 
+    }
 
+
 
+    function expandFormat(format, locale) {
 
+        var i = 5;
 
+
 
+        function replaceLongDateFormatTokens(input) {
 
+            return locale.longDateFormat(input) || input;
 
+        }
 
+
 
+        localFormattingTokens.lastIndex = 0;
 
+        while (i >= 0 && localFormattingTokens.test(format)) {
 
+            format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
 
+            localFormattingTokens.lastIndex = 0;
 
+            i -= 1;
 
+        }
 
+
 
+        return format;
 
+    }
 
+
 
+    var match1         = /\d/;            //       0 - 9
 
+    var match2         = /\d\d/;          //      00 - 99
 
+    var match3         = /\d{3}/;         //     000 - 999
 
+    var match4         = /\d{4}/;         //    0000 - 9999
 
+    var match6         = /[+-]?\d{6}/;    // -999999 - 999999
 
+    var match1to2      = /\d\d?/;         //       0 - 99
 
+    var match3to4      = /\d\d\d\d?/;     //     999 - 9999
 
+    var match5to6      = /\d\d\d\d\d\d?/; //   99999 - 999999
 
+    var match1to3      = /\d{1,3}/;       //       0 - 999
 
+    var match1to4      = /\d{1,4}/;       //       0 - 9999
 
+    var match1to6      = /[+-]?\d{1,6}/;  // -999999 - 999999
 
+
 
+    var matchUnsigned  = /\d+/;           //       0 - inf
 
+    var matchSigned    = /[+-]?\d+/;      //    -inf - inf
 
+
 
+    var matchOffset    = /Z|[+-]\d\d:?\d\d/gi; // +00:00 -00:00 +0000 -0000 or Z
 
+    var matchShortOffset = /Z|[+-]\d\d(?::?\d\d)?/gi; // +00 -00 +00:00 -00:00 +0000 -0000 or Z
 
+
 
+    var matchTimestamp = /[+-]?\d+(\.\d{1,3})?/; // 123456789 123456789.123
 
+
 
+    // any word (or two) characters or numbers including two/three word month in arabic.
 
+    // includes scottish gaelic two word and hyphenated months
 
+    var matchWord = /[0-9]{0,256}['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFF07\uFF10-\uFFEF]{1,256}|[\u0600-\u06FF\/]{1,256}(\s*?[\u0600-\u06FF]{1,256}){1,2}/i;
 
+
 
+    var regexes = {};
 
+
 
+    function addRegexToken (token, regex, strictRegex) {
 
+        regexes[token] = isFunction(regex) ? regex : function (isStrict, localeData) {
 
+            return (isStrict && strictRegex) ? strictRegex : regex;
 
+        };
 
+    }
 
+
 
+    function getParseRegexForToken (token, config) {
 
+        if (!hasOwnProp(regexes, token)) {
 
+            return new RegExp(unescapeFormat(token));
 
+        }
 
+
 
+        return regexes[token](config._strict, config._locale);
 
+    }
 
+
 
+    // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
 
+    function unescapeFormat(s) {
 
+        return regexEscape(s.replace('\\', '').replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
 
+            return p1 || p2 || p3 || p4;
 
+        }));
 
+    }
 
+
 
+    function regexEscape(s) {
 
+        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
 
+    }
 
+
 
+    var tokens = {};
 
+
 
+    function addParseToken (token, callback) {
 
+        var i, func = callback;
 
+        if (typeof token === 'string') {
 
+            token = [token];
 
+        }
 
+        if (isNumber(callback)) {
 
+            func = function (input, array) {
 
+                array[callback] = toInt(input);
 
+            };
 
+        }
 
+        for (i = 0; i < token.length; i++) {
 
+            tokens[token[i]] = func;
 
+        }
 
+    }
 
+
 
+    function addWeekParseToken (token, callback) {
 
+        addParseToken(token, function (input, array, config, token) {
 
+            config._w = config._w || {};
 
+            callback(input, config._w, config, token);
 
+        });
 
+    }
 
+
 
+    function addTimeToArrayFromToken(token, input, config) {
 
+        if (input != null && hasOwnProp(tokens, token)) {
 
+            tokens[token](input, config._a, config, token);
 
+        }
 
+    }
 
+
 
+    var YEAR = 0;
 
+    var MONTH = 1;
 
+    var DATE = 2;
 
+    var HOUR = 3;
 
+    var MINUTE = 4;
 
+    var SECOND = 5;
 
+    var MILLISECOND = 6;
 
+    var WEEK = 7;
 
+    var WEEKDAY = 8;
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('Y', 0, 0, function () {
 
+        var y = this.year();
 
+        return y <= 9999 ? '' + y : '+' + y;
 
+    });
 
+
 
+    addFormatToken(0, ['YY', 2], 0, function () {
 
+        return this.year() % 100;
 
+    });
 
+
 
+    addFormatToken(0, ['YYYY',   4],       0, 'year');
 
+    addFormatToken(0, ['YYYYY',  5],       0, 'year');
 
+    addFormatToken(0, ['YYYYYY', 6, true], 0, 'year');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('year', 'y');
 
+
 
+    // PRIORITIES
 
+
 
+    addUnitPriority('year', 1);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('Y',      matchSigned);
 
+    addRegexToken('YY',     match1to2, match2);
 
+    addRegexToken('YYYY',   match1to4, match4);
 
+    addRegexToken('YYYYY',  match1to6, match6);
 
+    addRegexToken('YYYYYY', match1to6, match6);
 
+
 
+    addParseToken(['YYYYY', 'YYYYYY'], YEAR);
 
+    addParseToken('YYYY', function (input, array) {
 
+        array[YEAR] = input.length === 2 ? hooks.parseTwoDigitYear(input) : toInt(input);
 
+    });
 
+    addParseToken('YY', function (input, array) {
 
+        array[YEAR] = hooks.parseTwoDigitYear(input);
 
+    });
 
+    addParseToken('Y', function (input, array) {
 
+        array[YEAR] = parseInt(input, 10);
 
+    });
 
+
 
+    // HELPERS
 
+
 
+    function daysInYear(year) {
 
+        return isLeapYear(year) ? 366 : 365;
 
+    }
 
+
 
+    function isLeapYear(year) {
 
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
 
+    }
 
+
 
+    // HOOKS
 
+
 
+    hooks.parseTwoDigitYear = function (input) {
 
+        return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
 
+    };
 
+
 
+    // MOMENTS
 
+
 
+    var getSetYear = makeGetSet('FullYear', true);
 
+
 
+    function getIsLeapYear () {
 
+        return isLeapYear(this.year());
 
+    }
 
+
 
+    function makeGetSet (unit, keepTime) {
 
+        return function (value) {
 
+            if (value != null) {
 
+                set$1(this, unit, value);
 
+                hooks.updateOffset(this, keepTime);
 
+                return this;
 
+            } else {
 
+                return get(this, unit);
 
+            }
 
+        };
 
+    }
 
+
 
+    function get (mom, unit) {
 
+        return mom.isValid() ?
 
+            mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]() : NaN;
 
+    }
 
+
 
+    function set$1 (mom, unit, value) {
 
+        if (mom.isValid() && !isNaN(value)) {
 
+            if (unit === 'FullYear' && isLeapYear(mom.year()) && mom.month() === 1 && mom.date() === 29) {
 
+                mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value, mom.month(), daysInMonth(value, mom.month()));
 
+            }
 
+            else {
 
+                mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
 
+            }
 
+        }
 
+    }
 
+
 
+    // MOMENTS
 
+
 
+    function stringGet (units) {
 
+        units = normalizeUnits(units);
 
+        if (isFunction(this[units])) {
 
+            return this[units]();
 
+        }
 
+        return this;
 
+    }
 
+
 
+
 
+    function stringSet (units, value) {
 
+        if (typeof units === 'object') {
 
+            units = normalizeObjectUnits(units);
 
+            var prioritized = getPrioritizedUnits(units);
 
+            for (var i = 0; i < prioritized.length; i++) {
 
+                this[prioritized[i].unit](units[prioritized[i].unit]);
 
+            }
 
+        } else {
 
+            units = normalizeUnits(units);
 
+            if (isFunction(this[units])) {
 
+                return this[units](value);
 
+            }
 
+        }
 
+        return this;
 
+    }
 
+
 
+    function mod(n, x) {
 
+        return ((n % x) + x) % x;
 
+    }
 
+
 
+    var indexOf;
 
+
 
+    if (Array.prototype.indexOf) {
 
+        indexOf = Array.prototype.indexOf;
 
+    } else {
 
+        indexOf = function (o) {
 
+            // I know
 
+            var i;
 
+            for (i = 0; i < this.length; ++i) {
 
+                if (this[i] === o) {
 
+                    return i;
 
+                }
 
+            }
 
+            return -1;
 
+        };
 
+    }
 
+
 
+    function daysInMonth(year, month) {
 
+        if (isNaN(year) || isNaN(month)) {
 
+            return NaN;
 
+        }
 
+        var modMonth = mod(month, 12);
 
+        year += (month - modMonth) / 12;
 
+        return modMonth === 1 ? (isLeapYear(year) ? 29 : 28) : (31 - modMonth % 7 % 2);
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('M', ['MM', 2], 'Mo', function () {
 
+        return this.month() + 1;
 
+    });
 
+
 
+    addFormatToken('MMM', 0, 0, function (format) {
 
+        return this.localeData().monthsShort(this, format);
 
+    });
 
+
 
+    addFormatToken('MMMM', 0, 0, function (format) {
 
+        return this.localeData().months(this, format);
 
+    });
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('month', 'M');
 
+
 
+    // PRIORITY
 
+
 
+    addUnitPriority('month', 8);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('M',    match1to2);
 
+    addRegexToken('MM',   match1to2, match2);
 
+    addRegexToken('MMM',  function (isStrict, locale) {
 
+        return locale.monthsShortRegex(isStrict);
 
+    });
 
+    addRegexToken('MMMM', function (isStrict, locale) {
 
+        return locale.monthsRegex(isStrict);
 
+    });
 
+
 
+    addParseToken(['M', 'MM'], function (input, array) {
 
+        array[MONTH] = toInt(input) - 1;
 
+    });
 
+
 
+    addParseToken(['MMM', 'MMMM'], function (input, array, config, token) {
 
+        var month = config._locale.monthsParse(input, token, config._strict);
 
+        // if we didn't find a month name, mark the date as invalid.
 
+        if (month != null) {
 
+            array[MONTH] = month;
 
+        } else {
 
+            getParsingFlags(config).invalidMonth = input;
 
+        }
 
+    });
 
+
 
+    // LOCALES
 
+
 
+    var MONTHS_IN_FORMAT = /D[oD]?(\[[^\[\]]*\]|\s)+MMMM?/;
 
+    var defaultLocaleMonths = 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_');
 
+    function localeMonths (m, format) {
 
+        if (!m) {
 
+            return isArray(this._months) ? this._months :
 
+                this._months['standalone'];
 
+        }
 
+        return isArray(this._months) ? this._months[m.month()] :
 
+            this._months[(this._months.isFormat || MONTHS_IN_FORMAT).test(format) ? 'format' : 'standalone'][m.month()];
 
+    }
 
+
 
+    var defaultLocaleMonthsShort = 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_');
 
+    function localeMonthsShort (m, format) {
 
+        if (!m) {
 
+            return isArray(this._monthsShort) ? this._monthsShort :
 
+                this._monthsShort['standalone'];
 
+        }
 
+        return isArray(this._monthsShort) ? this._monthsShort[m.month()] :
 
+            this._monthsShort[MONTHS_IN_FORMAT.test(format) ? 'format' : 'standalone'][m.month()];
 
+    }
 
+
 
+    function handleStrictParse(monthName, format, strict) {
 
+        var i, ii, mom, llc = monthName.toLocaleLowerCase();
 
+        if (!this._monthsParse) {
 
+            // this is not used
 
+            this._monthsParse = [];
 
+            this._longMonthsParse = [];
 
+            this._shortMonthsParse = [];
 
+            for (i = 0; i < 12; ++i) {
 
+                mom = createUTC([2000, i]);
 
+                this._shortMonthsParse[i] = this.monthsShort(mom, '').toLocaleLowerCase();
 
+                this._longMonthsParse[i] = this.months(mom, '').toLocaleLowerCase();
 
+            }
 
+        }
 
+
 
+        if (strict) {
 
+            if (format === 'MMM') {
 
+                ii = indexOf.call(this._shortMonthsParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            } else {
 
+                ii = indexOf.call(this._longMonthsParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            }
 
+        } else {
 
+            if (format === 'MMM') {
 
+                ii = indexOf.call(this._shortMonthsParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._longMonthsParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            } else {
 
+                ii = indexOf.call(this._longMonthsParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._shortMonthsParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            }
 
+        }
 
+    }
 
+
 
+    function localeMonthsParse (monthName, format, strict) {
 
+        var i, mom, regex;
 
+
 
+        if (this._monthsParseExact) {
 
+            return handleStrictParse.call(this, monthName, format, strict);
 
+        }
 
+
 
+        if (!this._monthsParse) {
 
+            this._monthsParse = [];
 
+            this._longMonthsParse = [];
 
+            this._shortMonthsParse = [];
 
+        }
 
+
 
+        // TODO: add sorting
 
+        // Sorting makes sure if one month (or abbr) is a prefix of another
 
+        // see sorting in computeMonthsParse
 
+        for (i = 0; i < 12; i++) {
 
+            // make the regex if we don't have it already
 
+            mom = createUTC([2000, i]);
 
+            if (strict && !this._longMonthsParse[i]) {
 
+                this._longMonthsParse[i] = new RegExp('^' + this.months(mom, '').replace('.', '') + '$', 'i');
 
+                this._shortMonthsParse[i] = new RegExp('^' + this.monthsShort(mom, '').replace('.', '') + '$', 'i');
 
+            }
 
+            if (!strict && !this._monthsParse[i]) {
 
+                regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
 
+                this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
 
+            }
 
+            // test the regex
 
+            if (strict && format === 'MMMM' && this._longMonthsParse[i].test(monthName)) {
 
+                return i;
 
+            } else if (strict && format === 'MMM' && this._shortMonthsParse[i].test(monthName)) {
 
+                return i;
 
+            } else if (!strict && this._monthsParse[i].test(monthName)) {
 
+                return i;
 
+            }
 
+        }
 
+    }
 
+
 
+    // MOMENTS
 
+
 
+    function setMonth (mom, value) {
 
+        var dayOfMonth;
 
+
 
+        if (!mom.isValid()) {
 
+            // No op
 
+            return mom;
 
+        }
 
+
 
+        if (typeof value === 'string') {
 
+            if (/^\d+$/.test(value)) {
 
+                value = toInt(value);
 
+            } else {
 
+                value = mom.localeData().monthsParse(value);
 
+                // TODO: Another silent failure?
 
+                if (!isNumber(value)) {
 
+                    return mom;
 
+                }
 
+            }
 
+        }
 
+
 
+        dayOfMonth = Math.min(mom.date(), daysInMonth(mom.year(), value));
 
+        mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
 
+        return mom;
 
+    }
 
+
 
+    function getSetMonth (value) {
 
+        if (value != null) {
 
+            setMonth(this, value);
 
+            hooks.updateOffset(this, true);
 
+            return this;
 
+        } else {
 
+            return get(this, 'Month');
 
+        }
 
+    }
 
+
 
+    function getDaysInMonth () {
 
+        return daysInMonth(this.year(), this.month());
 
+    }
 
+
 
+    var defaultMonthsShortRegex = matchWord;
 
+    function monthsShortRegex (isStrict) {
 
+        if (this._monthsParseExact) {
 
+            if (!hasOwnProp(this, '_monthsRegex')) {
 
+                computeMonthsParse.call(this);
 
+            }
 
+            if (isStrict) {
 
+                return this._monthsShortStrictRegex;
 
+            } else {
 
+                return this._monthsShortRegex;
 
+            }
 
+        } else {
 
+            if (!hasOwnProp(this, '_monthsShortRegex')) {
 
+                this._monthsShortRegex = defaultMonthsShortRegex;
 
+            }
 
+            return this._monthsShortStrictRegex && isStrict ?
 
+                this._monthsShortStrictRegex : this._monthsShortRegex;
 
+        }
 
+    }
 
+
 
+    var defaultMonthsRegex = matchWord;
 
+    function monthsRegex (isStrict) {
 
+        if (this._monthsParseExact) {
 
+            if (!hasOwnProp(this, '_monthsRegex')) {
 
+                computeMonthsParse.call(this);
 
+            }
 
+            if (isStrict) {
 
+                return this._monthsStrictRegex;
 
+            } else {
 
+                return this._monthsRegex;
 
+            }
 
+        } else {
 
+            if (!hasOwnProp(this, '_monthsRegex')) {
 
+                this._monthsRegex = defaultMonthsRegex;
 
+            }
 
+            return this._monthsStrictRegex && isStrict ?
 
+                this._monthsStrictRegex : this._monthsRegex;
 
+        }
 
+    }
 
+
 
+    function computeMonthsParse () {
 
+        function cmpLenRev(a, b) {
 
+            return b.length - a.length;
 
+        }
 
+
 
+        var shortPieces = [], longPieces = [], mixedPieces = [],
 
+            i, mom;
 
+        for (i = 0; i < 12; i++) {
 
+            // make the regex if we don't have it already
 
+            mom = createUTC([2000, i]);
 
+            shortPieces.push(this.monthsShort(mom, ''));
 
+            longPieces.push(this.months(mom, ''));
 
+            mixedPieces.push(this.months(mom, ''));
 
+            mixedPieces.push(this.monthsShort(mom, ''));
 
+        }
 
+        // Sorting makes sure if one month (or abbr) is a prefix of another it
 
+        // will match the longer piece.
 
+        shortPieces.sort(cmpLenRev);
 
+        longPieces.sort(cmpLenRev);
 
+        mixedPieces.sort(cmpLenRev);
 
+        for (i = 0; i < 12; i++) {
 
+            shortPieces[i] = regexEscape(shortPieces[i]);
 
+            longPieces[i] = regexEscape(longPieces[i]);
 
+        }
 
+        for (i = 0; i < 24; i++) {
 
+            mixedPieces[i] = regexEscape(mixedPieces[i]);
 
+        }
 
+
 
+        this._monthsRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i');
 
+        this._monthsShortRegex = this._monthsRegex;
 
+        this._monthsStrictRegex = new RegExp('^(' + longPieces.join('|') + ')', 'i');
 
+        this._monthsShortStrictRegex = new RegExp('^(' + shortPieces.join('|') + ')', 'i');
 
+    }
 
+
 
+    function createDate (y, m, d, h, M, s, ms) {
 
+        // can't just apply() to create a date:
 
+        // https://stackoverflow.com/q/181348
 
+        var date;
 
+        // the date constructor remaps years 0-99 to 1900-1999
 
+        if (y < 100 && y >= 0) {
 
+            // preserve leap years using a full 400 year cycle, then reset
 
+            date = new Date(y + 400, m, d, h, M, s, ms);
 
+            if (isFinite(date.getFullYear())) {
 
+                date.setFullYear(y);
 
+            }
 
+        } else {
 
+            date = new Date(y, m, d, h, M, s, ms);
 
+        }
 
+
 
+        return date;
 
+    }
 
+
 
+    function createUTCDate (y) {
 
+        var date;
 
+        // the Date.UTC function remaps years 0-99 to 1900-1999
 
+        if (y < 100 && y >= 0) {
 
+            var args = Array.prototype.slice.call(arguments);
 
+            // preserve leap years using a full 400 year cycle, then reset
 
+            args[0] = y + 400;
 
+            date = new Date(Date.UTC.apply(null, args));
 
+            if (isFinite(date.getUTCFullYear())) {
 
+                date.setUTCFullYear(y);
 
+            }
 
+        } else {
 
+            date = new Date(Date.UTC.apply(null, arguments));
 
+        }
 
+
 
+        return date;
 
+    }
 
+
 
+    // start-of-first-week - start-of-year
 
+    function firstWeekOffset(year, dow, doy) {
 
+        var // first-week day -- which january is always in the first week (4 for iso, 1 for other)
 
+            fwd = 7 + dow - doy,
 
+            // first-week day local weekday -- which local weekday is fwd
 
+            fwdlw = (7 + createUTCDate(year, 0, fwd).getUTCDay() - dow) % 7;
 
+
 
+        return -fwdlw + fwd - 1;
 
+    }
 
+
 
+    // https://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday
 
+    function dayOfYearFromWeeks(year, week, weekday, dow, doy) {
 
+        var localWeekday = (7 + weekday - dow) % 7,
 
+            weekOffset = firstWeekOffset(year, dow, doy),
 
+            dayOfYear = 1 + 7 * (week - 1) + localWeekday + weekOffset,
 
+            resYear, resDayOfYear;
 
+
 
+        if (dayOfYear <= 0) {
 
+            resYear = year - 1;
 
+            resDayOfYear = daysInYear(resYear) + dayOfYear;
 
+        } else if (dayOfYear > daysInYear(year)) {
 
+            resYear = year + 1;
 
+            resDayOfYear = dayOfYear - daysInYear(year);
 
+        } else {
 
+            resYear = year;
 
+            resDayOfYear = dayOfYear;
 
+        }
 
+
 
+        return {
 
+            year: resYear,
 
+            dayOfYear: resDayOfYear
 
+        };
 
+    }
 
+
 
+    function weekOfYear(mom, dow, doy) {
 
+        var weekOffset = firstWeekOffset(mom.year(), dow, doy),
 
+            week = Math.floor((mom.dayOfYear() - weekOffset - 1) / 7) + 1,
 
+            resWeek, resYear;
 
+
 
+        if (week < 1) {
 
+            resYear = mom.year() - 1;
 
+            resWeek = week + weeksInYear(resYear, dow, doy);
 
+        } else if (week > weeksInYear(mom.year(), dow, doy)) {
 
+            resWeek = week - weeksInYear(mom.year(), dow, doy);
 
+            resYear = mom.year() + 1;
 
+        } else {
 
+            resYear = mom.year();
 
+            resWeek = week;
 
+        }
 
+
 
+        return {
 
+            week: resWeek,
 
+            year: resYear
 
+        };
 
+    }
 
+
 
+    function weeksInYear(year, dow, doy) {
 
+        var weekOffset = firstWeekOffset(year, dow, doy),
 
+            weekOffsetNext = firstWeekOffset(year + 1, dow, doy);
 
+        return (daysInYear(year) - weekOffset + weekOffsetNext) / 7;
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('w', ['ww', 2], 'wo', 'week');
 
+    addFormatToken('W', ['WW', 2], 'Wo', 'isoWeek');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('week', 'w');
 
+    addUnitAlias('isoWeek', 'W');
 
+
 
+    // PRIORITIES
 
+
 
+    addUnitPriority('week', 5);
 
+    addUnitPriority('isoWeek', 5);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('w',  match1to2);
 
+    addRegexToken('ww', match1to2, match2);
 
+    addRegexToken('W',  match1to2);
 
+    addRegexToken('WW', match1to2, match2);
 
+
 
+    addWeekParseToken(['w', 'ww', 'W', 'WW'], function (input, week, config, token) {
 
+        week[token.substr(0, 1)] = toInt(input);
 
+    });
 
+
 
+    // HELPERS
 
+
 
+    // LOCALES
 
+
 
+    function localeWeek (mom) {
 
+        return weekOfYear(mom, this._week.dow, this._week.doy).week;
 
+    }
 
+
 
+    var defaultLocaleWeek = {
 
+        dow : 0, // Sunday is the first day of the week.
 
+        doy : 6  // The week that contains Jan 6th is the first week of the year.
 
+    };
 
+
 
+    function localeFirstDayOfWeek () {
 
+        return this._week.dow;
 
+    }
 
+
 
+    function localeFirstDayOfYear () {
 
+        return this._week.doy;
 
+    }
 
+
 
+    // MOMENTS
 
+
 
+    function getSetWeek (input) {
 
+        var week = this.localeData().week(this);
 
+        return input == null ? week : this.add((input - week) * 7, 'd');
 
+    }
 
+
 
+    function getSetISOWeek (input) {
 
+        var week = weekOfYear(this, 1, 4).week;
 
+        return input == null ? week : this.add((input - week) * 7, 'd');
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('d', 0, 'do', 'day');
 
+
 
+    addFormatToken('dd', 0, 0, function (format) {
 
+        return this.localeData().weekdaysMin(this, format);
 
+    });
 
+
 
+    addFormatToken('ddd', 0, 0, function (format) {
 
+        return this.localeData().weekdaysShort(this, format);
 
+    });
 
+
 
+    addFormatToken('dddd', 0, 0, function (format) {
 
+        return this.localeData().weekdays(this, format);
 
+    });
 
+
 
+    addFormatToken('e', 0, 0, 'weekday');
 
+    addFormatToken('E', 0, 0, 'isoWeekday');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('day', 'd');
 
+    addUnitAlias('weekday', 'e');
 
+    addUnitAlias('isoWeekday', 'E');
 
+
 
+    // PRIORITY
 
+    addUnitPriority('day', 11);
 
+    addUnitPriority('weekday', 11);
 
+    addUnitPriority('isoWeekday', 11);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('d',    match1to2);
 
+    addRegexToken('e',    match1to2);
 
+    addRegexToken('E',    match1to2);
 
+    addRegexToken('dd',   function (isStrict, locale) {
 
+        return locale.weekdaysMinRegex(isStrict);
 
+    });
 
+    addRegexToken('ddd',   function (isStrict, locale) {
 
+        return locale.weekdaysShortRegex(isStrict);
 
+    });
 
+    addRegexToken('dddd',   function (isStrict, locale) {
 
+        return locale.weekdaysRegex(isStrict);
 
+    });
 
+
 
+    addWeekParseToken(['dd', 'ddd', 'dddd'], function (input, week, config, token) {
 
+        var weekday = config._locale.weekdaysParse(input, token, config._strict);
 
+        // if we didn't get a weekday name, mark the date as invalid
 
+        if (weekday != null) {
 
+            week.d = weekday;
 
+        } else {
 
+            getParsingFlags(config).invalidWeekday = input;
 
+        }
 
+    });
 
+
 
+    addWeekParseToken(['d', 'e', 'E'], function (input, week, config, token) {
 
+        week[token] = toInt(input);
 
+    });
 
+
 
+    // HELPERS
 
+
 
+    function parseWeekday(input, locale) {
 
+        if (typeof input !== 'string') {
 
+            return input;
 
+        }
 
+
 
+        if (!isNaN(input)) {
 
+            return parseInt(input, 10);
 
+        }
 
+
 
+        input = locale.weekdaysParse(input);
 
+        if (typeof input === 'number') {
 
+            return input;
 
+        }
 
+
 
+        return null;
 
+    }
 
+
 
+    function parseIsoWeekday(input, locale) {
 
+        if (typeof input === 'string') {
 
+            return locale.weekdaysParse(input) % 7 || 7;
 
+        }
 
+        return isNaN(input) ? null : input;
 
+    }
 
+
 
+    // LOCALES
 
+    function shiftWeekdays (ws, n) {
 
+        return ws.slice(n, 7).concat(ws.slice(0, n));
 
+    }
 
+
 
+    var defaultLocaleWeekdays = 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_');
 
+    function localeWeekdays (m, format) {
 
+        var weekdays = isArray(this._weekdays) ? this._weekdays :
 
+            this._weekdays[(m && m !== true && this._weekdays.isFormat.test(format)) ? 'format' : 'standalone'];
 
+        return (m === true) ? shiftWeekdays(weekdays, this._week.dow)
 
+            : (m) ? weekdays[m.day()] : weekdays;
 
+    }
 
+
 
+    var defaultLocaleWeekdaysShort = 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_');
 
+    function localeWeekdaysShort (m) {
 
+        return (m === true) ? shiftWeekdays(this._weekdaysShort, this._week.dow)
 
+            : (m) ? this._weekdaysShort[m.day()] : this._weekdaysShort;
 
+    }
 
+
 
+    var defaultLocaleWeekdaysMin = 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_');
 
+    function localeWeekdaysMin (m) {
 
+        return (m === true) ? shiftWeekdays(this._weekdaysMin, this._week.dow)
 
+            : (m) ? this._weekdaysMin[m.day()] : this._weekdaysMin;
 
+    }
 
+
 
+    function handleStrictParse$1(weekdayName, format, strict) {
 
+        var i, ii, mom, llc = weekdayName.toLocaleLowerCase();
 
+        if (!this._weekdaysParse) {
 
+            this._weekdaysParse = [];
 
+            this._shortWeekdaysParse = [];
 
+            this._minWeekdaysParse = [];
 
+
 
+            for (i = 0; i < 7; ++i) {
 
+                mom = createUTC([2000, 1]).day(i);
 
+                this._minWeekdaysParse[i] = this.weekdaysMin(mom, '').toLocaleLowerCase();
 
+                this._shortWeekdaysParse[i] = this.weekdaysShort(mom, '').toLocaleLowerCase();
 
+                this._weekdaysParse[i] = this.weekdays(mom, '').toLocaleLowerCase();
 
+            }
 
+        }
 
+
 
+        if (strict) {
 
+            if (format === 'dddd') {
 
+                ii = indexOf.call(this._weekdaysParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            } else if (format === 'ddd') {
 
+                ii = indexOf.call(this._shortWeekdaysParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            } else {
 
+                ii = indexOf.call(this._minWeekdaysParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            }
 
+        } else {
 
+            if (format === 'dddd') {
 
+                ii = indexOf.call(this._weekdaysParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._shortWeekdaysParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._minWeekdaysParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            } else if (format === 'ddd') {
 
+                ii = indexOf.call(this._shortWeekdaysParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._weekdaysParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._minWeekdaysParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            } else {
 
+                ii = indexOf.call(this._minWeekdaysParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._weekdaysParse, llc);
 
+                if (ii !== -1) {
 
+                    return ii;
 
+                }
 
+                ii = indexOf.call(this._shortWeekdaysParse, llc);
 
+                return ii !== -1 ? ii : null;
 
+            }
 
+        }
 
+    }
 
+
 
+    function localeWeekdaysParse (weekdayName, format, strict) {
 
+        var i, mom, regex;
 
+
 
+        if (this._weekdaysParseExact) {
 
+            return handleStrictParse$1.call(this, weekdayName, format, strict);
 
+        }
 
+
 
+        if (!this._weekdaysParse) {
 
+            this._weekdaysParse = [];
 
+            this._minWeekdaysParse = [];
 
+            this._shortWeekdaysParse = [];
 
+            this._fullWeekdaysParse = [];
 
+        }
 
+
 
+        for (i = 0; i < 7; i++) {
 
+            // make the regex if we don't have it already
 
+
 
+            mom = createUTC([2000, 1]).day(i);
 
+            if (strict && !this._fullWeekdaysParse[i]) {
 
+                this._fullWeekdaysParse[i] = new RegExp('^' + this.weekdays(mom, '').replace('.', '\\.?') + '$', 'i');
 
+                this._shortWeekdaysParse[i] = new RegExp('^' + this.weekdaysShort(mom, '').replace('.', '\\.?') + '$', 'i');
 
+                this._minWeekdaysParse[i] = new RegExp('^' + this.weekdaysMin(mom, '').replace('.', '\\.?') + '$', 'i');
 
+            }
 
+            if (!this._weekdaysParse[i]) {
 
+                regex = '^' + this.weekdays(mom, '') + '|^' + this.weekdaysShort(mom, '') + '|^' + this.weekdaysMin(mom, '');
 
+                this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i');
 
+            }
 
+            // test the regex
 
+            if (strict && format === 'dddd' && this._fullWeekdaysParse[i].test(weekdayName)) {
 
+                return i;
 
+            } else if (strict && format === 'ddd' && this._shortWeekdaysParse[i].test(weekdayName)) {
 
+                return i;
 
+            } else if (strict && format === 'dd' && this._minWeekdaysParse[i].test(weekdayName)) {
 
+                return i;
 
+            } else if (!strict && this._weekdaysParse[i].test(weekdayName)) {
 
+                return i;
 
+            }
 
+        }
 
+    }
 
+
 
+    // MOMENTS
 
+
 
+    function getSetDayOfWeek (input) {
 
+        if (!this.isValid()) {
 
+            return input != null ? this : NaN;
 
+        }
 
+        var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
 
+        if (input != null) {
 
+            input = parseWeekday(input, this.localeData());
 
+            return this.add(input - day, 'd');
 
+        } else {
 
+            return day;
 
+        }
 
+    }
 
+
 
+    function getSetLocaleDayOfWeek (input) {
 
+        if (!this.isValid()) {
 
+            return input != null ? this : NaN;
 
+        }
 
+        var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7;
 
+        return input == null ? weekday : this.add(input - weekday, 'd');
 
+    }
 
+
 
+    function getSetISODayOfWeek (input) {
 
+        if (!this.isValid()) {
 
+            return input != null ? this : NaN;
 
+        }
 
+
 
+        // behaves the same as moment#day except
 
+        // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6)
 
+        // as a setter, sunday should belong to the previous week.
 
+
 
+        if (input != null) {
 
+            var weekday = parseIsoWeekday(input, this.localeData());
 
+            return this.day(this.day() % 7 ? weekday : weekday - 7);
 
+        } else {
 
+            return this.day() || 7;
 
+        }
 
+    }
 
+
 
+    var defaultWeekdaysRegex = matchWord;
 
+    function weekdaysRegex (isStrict) {
 
+        if (this._weekdaysParseExact) {
 
+            if (!hasOwnProp(this, '_weekdaysRegex')) {
 
+                computeWeekdaysParse.call(this);
 
+            }
 
+            if (isStrict) {
 
+                return this._weekdaysStrictRegex;
 
+            } else {
 
+                return this._weekdaysRegex;
 
+            }
 
+        } else {
 
+            if (!hasOwnProp(this, '_weekdaysRegex')) {
 
+                this._weekdaysRegex = defaultWeekdaysRegex;
 
+            }
 
+            return this._weekdaysStrictRegex && isStrict ?
 
+                this._weekdaysStrictRegex : this._weekdaysRegex;
 
+        }
 
+    }
 
+
 
+    var defaultWeekdaysShortRegex = matchWord;
 
+    function weekdaysShortRegex (isStrict) {
 
+        if (this._weekdaysParseExact) {
 
+            if (!hasOwnProp(this, '_weekdaysRegex')) {
 
+                computeWeekdaysParse.call(this);
 
+            }
 
+            if (isStrict) {
 
+                return this._weekdaysShortStrictRegex;
 
+            } else {
 
+                return this._weekdaysShortRegex;
 
+            }
 
+        } else {
 
+            if (!hasOwnProp(this, '_weekdaysShortRegex')) {
 
+                this._weekdaysShortRegex = defaultWeekdaysShortRegex;
 
+            }
 
+            return this._weekdaysShortStrictRegex && isStrict ?
 
+                this._weekdaysShortStrictRegex : this._weekdaysShortRegex;
 
+        }
 
+    }
 
+
 
+    var defaultWeekdaysMinRegex = matchWord;
 
+    function weekdaysMinRegex (isStrict) {
 
+        if (this._weekdaysParseExact) {
 
+            if (!hasOwnProp(this, '_weekdaysRegex')) {
 
+                computeWeekdaysParse.call(this);
 
+            }
 
+            if (isStrict) {
 
+                return this._weekdaysMinStrictRegex;
 
+            } else {
 
+                return this._weekdaysMinRegex;
 
+            }
 
+        } else {
 
+            if (!hasOwnProp(this, '_weekdaysMinRegex')) {
 
+                this._weekdaysMinRegex = defaultWeekdaysMinRegex;
 
+            }
 
+            return this._weekdaysMinStrictRegex && isStrict ?
 
+                this._weekdaysMinStrictRegex : this._weekdaysMinRegex;
 
+        }
 
+    }
 
+
 
+
 
+    function computeWeekdaysParse () {
 
+        function cmpLenRev(a, b) {
 
+            return b.length - a.length;
 
+        }
 
+
 
+        var minPieces = [], shortPieces = [], longPieces = [], mixedPieces = [],
 
+            i, mom, minp, shortp, longp;
 
+        for (i = 0; i < 7; i++) {
 
+            // make the regex if we don't have it already
 
+            mom = createUTC([2000, 1]).day(i);
 
+            minp = this.weekdaysMin(mom, '');
 
+            shortp = this.weekdaysShort(mom, '');
 
+            longp = this.weekdays(mom, '');
 
+            minPieces.push(minp);
 
+            shortPieces.push(shortp);
 
+            longPieces.push(longp);
 
+            mixedPieces.push(minp);
 
+            mixedPieces.push(shortp);
 
+            mixedPieces.push(longp);
 
+        }
 
+        // Sorting makes sure if one weekday (or abbr) is a prefix of another it
 
+        // will match the longer piece.
 
+        minPieces.sort(cmpLenRev);
 
+        shortPieces.sort(cmpLenRev);
 
+        longPieces.sort(cmpLenRev);
 
+        mixedPieces.sort(cmpLenRev);
 
+        for (i = 0; i < 7; i++) {
 
+            shortPieces[i] = regexEscape(shortPieces[i]);
 
+            longPieces[i] = regexEscape(longPieces[i]);
 
+            mixedPieces[i] = regexEscape(mixedPieces[i]);
 
+        }
 
+
 
+        this._weekdaysRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i');
 
+        this._weekdaysShortRegex = this._weekdaysRegex;
 
+        this._weekdaysMinRegex = this._weekdaysRegex;
 
+
 
+        this._weekdaysStrictRegex = new RegExp('^(' + longPieces.join('|') + ')', 'i');
 
+        this._weekdaysShortStrictRegex = new RegExp('^(' + shortPieces.join('|') + ')', 'i');
 
+        this._weekdaysMinStrictRegex = new RegExp('^(' + minPieces.join('|') + ')', 'i');
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    function hFormat() {
 
+        return this.hours() % 12 || 12;
 
+    }
 
+
 
+    function kFormat() {
 
+        return this.hours() || 24;
 
+    }
 
+
 
+    addFormatToken('H', ['HH', 2], 0, 'hour');
 
+    addFormatToken('h', ['hh', 2], 0, hFormat);
 
+    addFormatToken('k', ['kk', 2], 0, kFormat);
 
+
 
+    addFormatToken('hmm', 0, 0, function () {
 
+        return '' + hFormat.apply(this) + zeroFill(this.minutes(), 2);
 
+    });
 
+
 
+    addFormatToken('hmmss', 0, 0, function () {
 
+        return '' + hFormat.apply(this) + zeroFill(this.minutes(), 2) +
 
+            zeroFill(this.seconds(), 2);
 
+    });
 
+
 
+    addFormatToken('Hmm', 0, 0, function () {
 
+        return '' + this.hours() + zeroFill(this.minutes(), 2);
 
+    });
 
+
 
+    addFormatToken('Hmmss', 0, 0, function () {
 
+        return '' + this.hours() + zeroFill(this.minutes(), 2) +
 
+            zeroFill(this.seconds(), 2);
 
+    });
 
+
 
+    function meridiem (token, lowercase) {
 
+        addFormatToken(token, 0, 0, function () {
 
+            return this.localeData().meridiem(this.hours(), this.minutes(), lowercase);
 
+        });
 
+    }
 
+
 
+    meridiem('a', true);
 
+    meridiem('A', false);
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('hour', 'h');
 
+
 
+    // PRIORITY
 
+    addUnitPriority('hour', 13);
 
+
 
+    // PARSING
 
+
 
+    function matchMeridiem (isStrict, locale) {
 
+        return locale._meridiemParse;
 
+    }
 
+
 
+    addRegexToken('a',  matchMeridiem);
 
+    addRegexToken('A',  matchMeridiem);
 
+    addRegexToken('H',  match1to2);
 
+    addRegexToken('h',  match1to2);
 
+    addRegexToken('k',  match1to2);
 
+    addRegexToken('HH', match1to2, match2);
 
+    addRegexToken('hh', match1to2, match2);
 
+    addRegexToken('kk', match1to2, match2);
 
+
 
+    addRegexToken('hmm', match3to4);
 
+    addRegexToken('hmmss', match5to6);
 
+    addRegexToken('Hmm', match3to4);
 
+    addRegexToken('Hmmss', match5to6);
 
+
 
+    addParseToken(['H', 'HH'], HOUR);
 
+    addParseToken(['k', 'kk'], function (input, array, config) {
 
+        var kInput = toInt(input);
 
+        array[HOUR] = kInput === 24 ? 0 : kInput;
 
+    });
 
+    addParseToken(['a', 'A'], function (input, array, config) {
 
+        config._isPm = config._locale.isPM(input);
 
+        config._meridiem = input;
 
+    });
 
+    addParseToken(['h', 'hh'], function (input, array, config) {
 
+        array[HOUR] = toInt(input);
 
+        getParsingFlags(config).bigHour = true;
 
+    });
 
+    addParseToken('hmm', function (input, array, config) {
 
+        var pos = input.length - 2;
 
+        array[HOUR] = toInt(input.substr(0, pos));
 
+        array[MINUTE] = toInt(input.substr(pos));
 
+        getParsingFlags(config).bigHour = true;
 
+    });
 
+    addParseToken('hmmss', function (input, array, config) {
 
+        var pos1 = input.length - 4;
 
+        var pos2 = input.length - 2;
 
+        array[HOUR] = toInt(input.substr(0, pos1));
 
+        array[MINUTE] = toInt(input.substr(pos1, 2));
 
+        array[SECOND] = toInt(input.substr(pos2));
 
+        getParsingFlags(config).bigHour = true;
 
+    });
 
+    addParseToken('Hmm', function (input, array, config) {
 
+        var pos = input.length - 2;
 
+        array[HOUR] = toInt(input.substr(0, pos));
 
+        array[MINUTE] = toInt(input.substr(pos));
 
+    });
 
+    addParseToken('Hmmss', function (input, array, config) {
 
+        var pos1 = input.length - 4;
 
+        var pos2 = input.length - 2;
 
+        array[HOUR] = toInt(input.substr(0, pos1));
 
+        array[MINUTE] = toInt(input.substr(pos1, 2));
 
+        array[SECOND] = toInt(input.substr(pos2));
 
+    });
 
+
 
+    // LOCALES
 
+
 
+    function localeIsPM (input) {
 
+        // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays
 
+        // Using charAt should be more compatible.
 
+        return ((input + '').toLowerCase().charAt(0) === 'p');
 
+    }
 
+
 
+    var defaultLocaleMeridiemParse = /[ap]\.?m?\.?/i;
 
+    function localeMeridiem (hours, minutes, isLower) {
 
+        if (hours > 11) {
 
+            return isLower ? 'pm' : 'PM';
 
+        } else {
 
+            return isLower ? 'am' : 'AM';
 
+        }
 
+    }
 
+
 
+
 
+    // MOMENTS
 
+
 
+    // Setting the hour should keep the time, because the user explicitly
 
+    // specified which hour they want. So trying to maintain the same hour (in
 
+    // a new timezone) makes sense. Adding/subtracting hours does not follow
 
+    // this rule.
 
+    var getSetHour = makeGetSet('Hours', true);
 
+
 
+    var baseConfig = {
 
+        calendar: defaultCalendar,
 
+        longDateFormat: defaultLongDateFormat,
 
+        invalidDate: defaultInvalidDate,
 
+        ordinal: defaultOrdinal,
 
+        dayOfMonthOrdinalParse: defaultDayOfMonthOrdinalParse,
 
+        relativeTime: defaultRelativeTime,
 
+
 
+        months: defaultLocaleMonths,
 
+        monthsShort: defaultLocaleMonthsShort,
 
+
 
+        week: defaultLocaleWeek,
 
+
 
+        weekdays: defaultLocaleWeekdays,
 
+        weekdaysMin: defaultLocaleWeekdaysMin,
 
+        weekdaysShort: defaultLocaleWeekdaysShort,
 
+
 
+        meridiemParse: defaultLocaleMeridiemParse
 
+    };
 
+
 
+    // internal storage for locale config files
 
+    var locales = {};
 
+    var localeFamilies = {};
 
+    var globalLocale;
 
+
 
+    function normalizeLocale(key) {
 
+        return key ? key.toLowerCase().replace('_', '-') : key;
 
+    }
 
+
 
+    // pick the locale from the array
 
+    // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each
 
+    // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root
 
+    function chooseLocale(names) {
 
+        var i = 0, j, next, locale, split;
 
+
 
+        while (i < names.length) {
 
+            split = normalizeLocale(names[i]).split('-');
 
+            j = split.length;
 
+            next = normalizeLocale(names[i + 1]);
 
+            next = next ? next.split('-') : null;
 
+            while (j > 0) {
 
+                locale = loadLocale(split.slice(0, j).join('-'));
 
+                if (locale) {
 
+                    return locale;
 
+                }
 
+                if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) {
 
+                    //the next array item is better than a shallower substring of this one
 
+                    break;
 
+                }
 
+                j--;
 
+            }
 
+            i++;
 
+        }
 
+        return globalLocale;
 
+    }
 
+
 
+    function loadLocale(name) {
 
+        var oldLocale = null;
 
+        // TODO: Find a better way to register and load all the locales in Node
 
+        if (!locales[name] && ('object' !== 'undefined') &&
 
+                module && module.exports) {
 
+            try {
 
+                oldLocale = globalLocale._abbr;
 
+                var aliasedRequire = commonjsRequire;
 
+                aliasedRequire('./locale/' + name);
 
+                getSetGlobalLocale(oldLocale);
 
+            } catch (e) {}
 
+        }
 
+        return locales[name];
 
+    }
 
+
 
+    // This function will load locale and then set the global locale.  If
 
+    // no arguments are passed in, it will simply return the current global
 
+    // locale key.
 
+    function getSetGlobalLocale (key, values) {
 
+        var data;
 
+        if (key) {
 
+            if (isUndefined(values)) {
 
+                data = getLocale(key);
 
+            }
 
+            else {
 
+                data = defineLocale(key, values);
 
+            }
 
+
 
+            if (data) {
 
+                // moment.duration._locale = moment._locale = data;
 
+                globalLocale = data;
 
+            }
 
+            else {
 
+                if ((typeof console !==  'undefined') && console.warn) {
 
+                    //warn user if arguments are passed but the locale could not be set
 
+                    console.warn('Locale ' + key +  ' not found. Did you forget to load it?');
 
+                }
 
+            }
 
+        }
 
+
 
+        return globalLocale._abbr;
 
+    }
 
+
 
+    function defineLocale (name, config) {
 
+        if (config !== null) {
 
+            var locale, parentConfig = baseConfig;
 
+            config.abbr = name;
 
+            if (locales[name] != null) {
 
+                deprecateSimple('defineLocaleOverride',
 
+                        'use moment.updateLocale(localeName, config) to change ' +
 
+                        'an existing locale. moment.defineLocale(localeName, ' +
 
+                        'config) should only be used for creating a new locale ' +
 
+                        'See http://momentjs.com/guides/#/warnings/define-locale/ for more info.');
 
+                parentConfig = locales[name]._config;
 
+            } else if (config.parentLocale != null) {
 
+                if (locales[config.parentLocale] != null) {
 
+                    parentConfig = locales[config.parentLocale]._config;
 
+                } else {
 
+                    locale = loadLocale(config.parentLocale);
 
+                    if (locale != null) {
 
+                        parentConfig = locale._config;
 
+                    } else {
 
+                        if (!localeFamilies[config.parentLocale]) {
 
+                            localeFamilies[config.parentLocale] = [];
 
+                        }
 
+                        localeFamilies[config.parentLocale].push({
 
+                            name: name,
 
+                            config: config
 
+                        });
 
+                        return null;
 
+                    }
 
+                }
 
+            }
 
+            locales[name] = new Locale(mergeConfigs(parentConfig, config));
 
+
 
+            if (localeFamilies[name]) {
 
+                localeFamilies[name].forEach(function (x) {
 
+                    defineLocale(x.name, x.config);
 
+                });
 
+            }
 
+
 
+            // backwards compat for now: also set the locale
 
+            // make sure we set the locale AFTER all child locales have been
 
+            // created, so we won't end up with the child locale set.
 
+            getSetGlobalLocale(name);
 
+
 
+
 
+            return locales[name];
 
+        } else {
 
+            // useful for testing
 
+            delete locales[name];
 
+            return null;
 
+        }
 
+    }
 
+
 
+    function updateLocale(name, config) {
 
+        if (config != null) {
 
+            var locale, tmpLocale, parentConfig = baseConfig;
 
+            // MERGE
 
+            tmpLocale = loadLocale(name);
 
+            if (tmpLocale != null) {
 
+                parentConfig = tmpLocale._config;
 
+            }
 
+            config = mergeConfigs(parentConfig, config);
 
+            locale = new Locale(config);
 
+            locale.parentLocale = locales[name];
 
+            locales[name] = locale;
 
+
 
+            // backwards compat for now: also set the locale
 
+            getSetGlobalLocale(name);
 
+        } else {
 
+            // pass null for config to unupdate, useful for tests
 
+            if (locales[name] != null) {
 
+                if (locales[name].parentLocale != null) {
 
+                    locales[name] = locales[name].parentLocale;
 
+                } else if (locales[name] != null) {
 
+                    delete locales[name];
 
+                }
 
+            }
 
+        }
 
+        return locales[name];
 
+    }
 
+
 
+    // returns locale data
 
+    function getLocale (key) {
 
+        var locale;
 
+
 
+        if (key && key._locale && key._locale._abbr) {
 
+            key = key._locale._abbr;
 
+        }
 
+
 
+        if (!key) {
 
+            return globalLocale;
 
+        }
 
+
 
+        if (!isArray(key)) {
 
+            //short-circuit everything else
 
+            locale = loadLocale(key);
 
+            if (locale) {
 
+                return locale;
 
+            }
 
+            key = [key];
 
+        }
 
+
 
+        return chooseLocale(key);
 
+    }
 
+
 
+    function listLocales() {
 
+        return keys(locales);
 
+    }
 
+
 
+    function checkOverflow (m) {
 
+        var overflow;
 
+        var a = m._a;
 
+
 
+        if (a && getParsingFlags(m).overflow === -2) {
 
+            overflow =
 
+                a[MONTH]       < 0 || a[MONTH]       > 11  ? MONTH :
 
+                a[DATE]        < 1 || a[DATE]        > daysInMonth(a[YEAR], a[MONTH]) ? DATE :
 
+                a[HOUR]        < 0 || a[HOUR]        > 24 || (a[HOUR] === 24 && (a[MINUTE] !== 0 || a[SECOND] !== 0 || a[MILLISECOND] !== 0)) ? HOUR :
 
+                a[MINUTE]      < 0 || a[MINUTE]      > 59  ? MINUTE :
 
+                a[SECOND]      < 0 || a[SECOND]      > 59  ? SECOND :
 
+                a[MILLISECOND] < 0 || a[MILLISECOND] > 999 ? MILLISECOND :
 
+                -1;
 
+
 
+            if (getParsingFlags(m)._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
 
+                overflow = DATE;
 
+            }
 
+            if (getParsingFlags(m)._overflowWeeks && overflow === -1) {
 
+                overflow = WEEK;
 
+            }
 
+            if (getParsingFlags(m)._overflowWeekday && overflow === -1) {
 
+                overflow = WEEKDAY;
 
+            }
 
+
 
+            getParsingFlags(m).overflow = overflow;
 
+        }
 
+
 
+        return m;
 
+    }
 
+
 
+    // Pick the first defined of two or three arguments.
 
+    function defaults(a, b, c) {
 
+        if (a != null) {
 
+            return a;
 
+        }
 
+        if (b != null) {
 
+            return b;
 
+        }
 
+        return c;
 
+    }
 
+
 
+    function currentDateArray(config) {
 
+        // hooks is actually the exported moment object
 
+        var nowValue = new Date(hooks.now());
 
+        if (config._useUTC) {
 
+            return [nowValue.getUTCFullYear(), nowValue.getUTCMonth(), nowValue.getUTCDate()];
 
+        }
 
+        return [nowValue.getFullYear(), nowValue.getMonth(), nowValue.getDate()];
 
+    }
 
+
 
+    // convert an array to a date.
 
+    // the array should mirror the parameters below
 
+    // note: all values past the year are optional and will default to the lowest possible value.
 
+    // [year, month, day , hour, minute, second, millisecond]
 
+    function configFromArray (config) {
 
+        var i, date, input = [], currentDate, expectedWeekday, yearToUse;
 
+
 
+        if (config._d) {
 
+            return;
 
+        }
 
+
 
+        currentDate = currentDateArray(config);
 
+
 
+        //compute day of the year from weeks and weekdays
 
+        if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
 
+            dayOfYearFromWeekInfo(config);
 
+        }
 
+
 
+        //if the day of the year is set, figure out what it is
 
+        if (config._dayOfYear != null) {
 
+            yearToUse = defaults(config._a[YEAR], currentDate[YEAR]);
 
+
 
+            if (config._dayOfYear > daysInYear(yearToUse) || config._dayOfYear === 0) {
 
+                getParsingFlags(config)._overflowDayOfYear = true;
 
+            }
 
+
 
+            date = createUTCDate(yearToUse, 0, config._dayOfYear);
 
+            config._a[MONTH] = date.getUTCMonth();
 
+            config._a[DATE] = date.getUTCDate();
 
+        }
 
+
 
+        // Default to current date.
 
+        // * if no year, month, day of month are given, default to today
 
+        // * if day of month is given, default month and year
 
+        // * if month is given, default only year
 
+        // * if year is given, don't default anything
 
+        for (i = 0; i < 3 && config._a[i] == null; ++i) {
 
+            config._a[i] = input[i] = currentDate[i];
 
+        }
 
+
 
+        // Zero out whatever was not defaulted, including time
 
+        for (; i < 7; i++) {
 
+            config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
 
+        }
 
+
 
+        // Check for 24:00:00.000
 
+        if (config._a[HOUR] === 24 &&
 
+                config._a[MINUTE] === 0 &&
 
+                config._a[SECOND] === 0 &&
 
+                config._a[MILLISECOND] === 0) {
 
+            config._nextDay = true;
 
+            config._a[HOUR] = 0;
 
+        }
 
+
 
+        config._d = (config._useUTC ? createUTCDate : createDate).apply(null, input);
 
+        expectedWeekday = config._useUTC ? config._d.getUTCDay() : config._d.getDay();
 
+
 
+        // Apply timezone offset from input. The actual utcOffset can be changed
 
+        // with parseZone.
 
+        if (config._tzm != null) {
 
+            config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);
 
+        }
 
+
 
+        if (config._nextDay) {
 
+            config._a[HOUR] = 24;
 
+        }
 
+
 
+        // check for mismatching day of week
 
+        if (config._w && typeof config._w.d !== 'undefined' && config._w.d !== expectedWeekday) {
 
+            getParsingFlags(config).weekdayMismatch = true;
 
+        }
 
+    }
 
+
 
+    function dayOfYearFromWeekInfo(config) {
 
+        var w, weekYear, week, weekday, dow, doy, temp, weekdayOverflow;
 
+
 
+        w = config._w;
 
+        if (w.GG != null || w.W != null || w.E != null) {
 
+            dow = 1;
 
+            doy = 4;
 
+
 
+            // TODO: We need to take the current isoWeekYear, but that depends on
 
+            // how we interpret now (local, utc, fixed offset). So create
 
+            // a now version of current config (take local/utc/offset flags, and
 
+            // create now).
 
+            weekYear = defaults(w.GG, config._a[YEAR], weekOfYear(createLocal(), 1, 4).year);
 
+            week = defaults(w.W, 1);
 
+            weekday = defaults(w.E, 1);
 
+            if (weekday < 1 || weekday > 7) {
 
+                weekdayOverflow = true;
 
+            }
 
+        } else {
 
+            dow = config._locale._week.dow;
 
+            doy = config._locale._week.doy;
 
+
 
+            var curWeek = weekOfYear(createLocal(), dow, doy);
 
+
 
+            weekYear = defaults(w.gg, config._a[YEAR], curWeek.year);
 
+
 
+            // Default to current week.
 
+            week = defaults(w.w, curWeek.week);
 
+
 
+            if (w.d != null) {
 
+                // weekday -- low day numbers are considered next week
 
+                weekday = w.d;
 
+                if (weekday < 0 || weekday > 6) {
 
+                    weekdayOverflow = true;
 
+                }
 
+            } else if (w.e != null) {
 
+                // local weekday -- counting starts from beginning of week
 
+                weekday = w.e + dow;
 
+                if (w.e < 0 || w.e > 6) {
 
+                    weekdayOverflow = true;
 
+                }
 
+            } else {
 
+                // default to beginning of week
 
+                weekday = dow;
 
+            }
 
+        }
 
+        if (week < 1 || week > weeksInYear(weekYear, dow, doy)) {
 
+            getParsingFlags(config)._overflowWeeks = true;
 
+        } else if (weekdayOverflow != null) {
 
+            getParsingFlags(config)._overflowWeekday = true;
 
+        } else {
 
+            temp = dayOfYearFromWeeks(weekYear, week, weekday, dow, doy);
 
+            config._a[YEAR] = temp.year;
 
+            config._dayOfYear = temp.dayOfYear;
 
+        }
 
+    }
 
+
 
+    // iso 8601 regex
 
+    // 0000-00-00 0000-W00 or 0000-W00-0 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 or +00)
 
+    var extendedIsoRegex = /^\s*((?:[+-]\d{6}|\d{4})-(?:\d\d-\d\d|W\d\d-\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?::\d\d(?::\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/;
 
+    var basicIsoRegex = /^\s*((?:[+-]\d{6}|\d{4})(?:\d\d\d\d|W\d\d\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?:\d\d(?:\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/;
 
+
 
+    var tzRegex = /Z|[+-]\d\d(?::?\d\d)?/;
 
+
 
+    var isoDates = [
 
+        ['YYYYYY-MM-DD', /[+-]\d{6}-\d\d-\d\d/],
 
+        ['YYYY-MM-DD', /\d{4}-\d\d-\d\d/],
 
+        ['GGGG-[W]WW-E', /\d{4}-W\d\d-\d/],
 
+        ['GGGG-[W]WW', /\d{4}-W\d\d/, false],
 
+        ['YYYY-DDD', /\d{4}-\d{3}/],
 
+        ['YYYY-MM', /\d{4}-\d\d/, false],
 
+        ['YYYYYYMMDD', /[+-]\d{10}/],
 
+        ['YYYYMMDD', /\d{8}/],
 
+        // YYYYMM is NOT allowed by the standard
 
+        ['GGGG[W]WWE', /\d{4}W\d{3}/],
 
+        ['GGGG[W]WW', /\d{4}W\d{2}/, false],
 
+        ['YYYYDDD', /\d{7}/]
 
+    ];
 
+
 
+    // iso time formats and regexes
 
+    var isoTimes = [
 
+        ['HH:mm:ss.SSSS', /\d\d:\d\d:\d\d\.\d+/],
 
+        ['HH:mm:ss,SSSS', /\d\d:\d\d:\d\d,\d+/],
 
+        ['HH:mm:ss', /\d\d:\d\d:\d\d/],
 
+        ['HH:mm', /\d\d:\d\d/],
 
+        ['HHmmss.SSSS', /\d\d\d\d\d\d\.\d+/],
 
+        ['HHmmss,SSSS', /\d\d\d\d\d\d,\d+/],
 
+        ['HHmmss', /\d\d\d\d\d\d/],
 
+        ['HHmm', /\d\d\d\d/],
 
+        ['HH', /\d\d/]
 
+    ];
 
+
 
+    var aspNetJsonRegex = /^\/?Date\((\-?\d+)/i;
 
+
 
+    // date from iso format
 
+    function configFromISO(config) {
 
+        var i, l,
 
+            string = config._i,
 
+            match = extendedIsoRegex.exec(string) || basicIsoRegex.exec(string),
 
+            allowTime, dateFormat, timeFormat, tzFormat;
 
+
 
+        if (match) {
 
+            getParsingFlags(config).iso = true;
 
+
 
+            for (i = 0, l = isoDates.length; i < l; i++) {
 
+                if (isoDates[i][1].exec(match[1])) {
 
+                    dateFormat = isoDates[i][0];
 
+                    allowTime = isoDates[i][2] !== false;
 
+                    break;
 
+                }
 
+            }
 
+            if (dateFormat == null) {
 
+                config._isValid = false;
 
+                return;
 
+            }
 
+            if (match[3]) {
 
+                for (i = 0, l = isoTimes.length; i < l; i++) {
 
+                    if (isoTimes[i][1].exec(match[3])) {
 
+                        // match[2] should be 'T' or space
 
+                        timeFormat = (match[2] || ' ') + isoTimes[i][0];
 
+                        break;
 
+                    }
 
+                }
 
+                if (timeFormat == null) {
 
+                    config._isValid = false;
 
+                    return;
 
+                }
 
+            }
 
+            if (!allowTime && timeFormat != null) {
 
+                config._isValid = false;
 
+                return;
 
+            }
 
+            if (match[4]) {
 
+                if (tzRegex.exec(match[4])) {
 
+                    tzFormat = 'Z';
 
+                } else {
 
+                    config._isValid = false;
 
+                    return;
 
+                }
 
+            }
 
+            config._f = dateFormat + (timeFormat || '') + (tzFormat || '');
 
+            configFromStringAndFormat(config);
 
+        } else {
 
+            config._isValid = false;
 
+        }
 
+    }
 
+
 
+    // RFC 2822 regex: For details see https://tools.ietf.org/html/rfc2822#section-3.3
 
+    var rfc2822 = /^(?:(Mon|Tue|Wed|Thu|Fri|Sat|Sun),?\s)?(\d{1,2})\s(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s(\d{2,4})\s(\d\d):(\d\d)(?::(\d\d))?\s(?:(UT|GMT|[ECMP][SD]T)|([Zz])|([+-]\d{4}))$/;
 
+
 
+    function extractFromRFC2822Strings(yearStr, monthStr, dayStr, hourStr, minuteStr, secondStr) {
 
+        var result = [
 
+            untruncateYear(yearStr),
 
+            defaultLocaleMonthsShort.indexOf(monthStr),
 
+            parseInt(dayStr, 10),
 
+            parseInt(hourStr, 10),
 
+            parseInt(minuteStr, 10)
 
+        ];
 
+
 
+        if (secondStr) {
 
+            result.push(parseInt(secondStr, 10));
 
+        }
 
+
 
+        return result;
 
+    }
 
+
 
+    function untruncateYear(yearStr) {
 
+        var year = parseInt(yearStr, 10);
 
+        if (year <= 49) {
 
+            return 2000 + year;
 
+        } else if (year <= 999) {
 
+            return 1900 + year;
 
+        }
 
+        return year;
 
+    }
 
+
 
+    function preprocessRFC2822(s) {
 
+        // Remove comments and folding whitespace and replace multiple-spaces with a single space
 
+        return s.replace(/\([^)]*\)|[\n\t]/g, ' ').replace(/(\s\s+)/g, ' ').replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 
+    }
 
+
 
+    function checkWeekday(weekdayStr, parsedInput, config) {
 
+        if (weekdayStr) {
 
+            // TODO: Replace the vanilla JS Date object with an indepentent day-of-week check.
 
+            var weekdayProvided = defaultLocaleWeekdaysShort.indexOf(weekdayStr),
 
+                weekdayActual = new Date(parsedInput[0], parsedInput[1], parsedInput[2]).getDay();
 
+            if (weekdayProvided !== weekdayActual) {
 
+                getParsingFlags(config).weekdayMismatch = true;
 
+                config._isValid = false;
 
+                return false;
 
+            }
 
+        }
 
+        return true;
 
+    }
 
+
 
+    var obsOffsets = {
 
+        UT: 0,
 
+        GMT: 0,
 
+        EDT: -4 * 60,
 
+        EST: -5 * 60,
 
+        CDT: -5 * 60,
 
+        CST: -6 * 60,
 
+        MDT: -6 * 60,
 
+        MST: -7 * 60,
 
+        PDT: -7 * 60,
 
+        PST: -8 * 60
 
+    };
 
+
 
+    function calculateOffset(obsOffset, militaryOffset, numOffset) {
 
+        if (obsOffset) {
 
+            return obsOffsets[obsOffset];
 
+        } else if (militaryOffset) {
 
+            // the only allowed military tz is Z
 
+            return 0;
 
+        } else {
 
+            var hm = parseInt(numOffset, 10);
 
+            var m = hm % 100, h = (hm - m) / 100;
 
+            return h * 60 + m;
 
+        }
 
+    }
 
+
 
+    // date and time from ref 2822 format
 
+    function configFromRFC2822(config) {
 
+        var match = rfc2822.exec(preprocessRFC2822(config._i));
 
+        if (match) {
 
+            var parsedArray = extractFromRFC2822Strings(match[4], match[3], match[2], match[5], match[6], match[7]);
 
+            if (!checkWeekday(match[1], parsedArray, config)) {
 
+                return;
 
+            }
 
+
 
+            config._a = parsedArray;
 
+            config._tzm = calculateOffset(match[8], match[9], match[10]);
 
+
 
+            config._d = createUTCDate.apply(null, config._a);
 
+            config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);
 
+
 
+            getParsingFlags(config).rfc2822 = true;
 
+        } else {
 
+            config._isValid = false;
 
+        }
 
+    }
 
+
 
+    // date from iso format or fallback
 
+    function configFromString(config) {
 
+        var matched = aspNetJsonRegex.exec(config._i);
 
+
 
+        if (matched !== null) {
 
+            config._d = new Date(+matched[1]);
 
+            return;
 
+        }
 
+
 
+        configFromISO(config);
 
+        if (config._isValid === false) {
 
+            delete config._isValid;
 
+        } else {
 
+            return;
 
+        }
 
+
 
+        configFromRFC2822(config);
 
+        if (config._isValid === false) {
 
+            delete config._isValid;
 
+        } else {
 
+            return;
 
+        }
 
+
 
+        // Final attempt, use Input Fallback
 
+        hooks.createFromInputFallback(config);
 
+    }
 
+
 
+    hooks.createFromInputFallback = deprecate(
 
+        'value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), ' +
 
+        'which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are ' +
 
+        'discouraged and will be removed in an upcoming major release. Please refer to ' +
 
+        'http://momentjs.com/guides/#/warnings/js-date/ for more info.',
 
+        function (config) {
 
+            config._d = new Date(config._i + (config._useUTC ? ' UTC' : ''));
 
+        }
 
+    );
 
+
 
+    // constant that refers to the ISO standard
 
+    hooks.ISO_8601 = function () {};
 
+
 
+    // constant that refers to the RFC 2822 form
 
+    hooks.RFC_2822 = function () {};
 
+
 
+    // date from string and format string
 
+    function configFromStringAndFormat(config) {
 
+        // TODO: Move this to another part of the creation flow to prevent circular deps
 
+        if (config._f === hooks.ISO_8601) {
 
+            configFromISO(config);
 
+            return;
 
+        }
 
+        if (config._f === hooks.RFC_2822) {
 
+            configFromRFC2822(config);
 
+            return;
 
+        }
 
+        config._a = [];
 
+        getParsingFlags(config).empty = true;
 
+
 
+        // This array is used to make a Date, either with `new Date` or `Date.UTC`
 
+        var string = '' + config._i,
 
+            i, parsedInput, tokens, token, skipped,
 
+            stringLength = string.length,
 
+            totalParsedInputLength = 0;
 
+
 
+        tokens = expandFormat(config._f, config._locale).match(formattingTokens) || [];
 
+
 
+        for (i = 0; i < tokens.length; i++) {
 
+            token = tokens[i];
 
+            parsedInput = (string.match(getParseRegexForToken(token, config)) || [])[0];
 
+            // console.log('token', token, 'parsedInput', parsedInput,
 
+            //         'regex', getParseRegexForToken(token, config));
 
+            if (parsedInput) {
 
+                skipped = string.substr(0, string.indexOf(parsedInput));
 
+                if (skipped.length > 0) {
 
+                    getParsingFlags(config).unusedInput.push(skipped);
 
+                }
 
+                string = string.slice(string.indexOf(parsedInput) + parsedInput.length);
 
+                totalParsedInputLength += parsedInput.length;
 
+            }
 
+            // don't parse if it's not a known token
 
+            if (formatTokenFunctions[token]) {
 
+                if (parsedInput) {
 
+                    getParsingFlags(config).empty = false;
 
+                }
 
+                else {
 
+                    getParsingFlags(config).unusedTokens.push(token);
 
+                }
 
+                addTimeToArrayFromToken(token, parsedInput, config);
 
+            }
 
+            else if (config._strict && !parsedInput) {
 
+                getParsingFlags(config).unusedTokens.push(token);
 
+            }
 
+        }
 
+
 
+        // add remaining unparsed input length to the string
 
+        getParsingFlags(config).charsLeftOver = stringLength - totalParsedInputLength;
 
+        if (string.length > 0) {
 
+            getParsingFlags(config).unusedInput.push(string);
 
+        }
 
+
 
+        // clear _12h flag if hour is <= 12
 
+        if (config._a[HOUR] <= 12 &&
 
+            getParsingFlags(config).bigHour === true &&
 
+            config._a[HOUR] > 0) {
 
+            getParsingFlags(config).bigHour = undefined;
 
+        }
 
+
 
+        getParsingFlags(config).parsedDateParts = config._a.slice(0);
 
+        getParsingFlags(config).meridiem = config._meridiem;
 
+        // handle meridiem
 
+        config._a[HOUR] = meridiemFixWrap(config._locale, config._a[HOUR], config._meridiem);
 
+
 
+        configFromArray(config);
 
+        checkOverflow(config);
 
+    }
 
+
 
+
 
+    function meridiemFixWrap (locale, hour, meridiem) {
 
+        var isPm;
 
+
 
+        if (meridiem == null) {
 
+            // nothing to do
 
+            return hour;
 
+        }
 
+        if (locale.meridiemHour != null) {
 
+            return locale.meridiemHour(hour, meridiem);
 
+        } else if (locale.isPM != null) {
 
+            // Fallback
 
+            isPm = locale.isPM(meridiem);
 
+            if (isPm && hour < 12) {
 
+                hour += 12;
 
+            }
 
+            if (!isPm && hour === 12) {
 
+                hour = 0;
 
+            }
 
+            return hour;
 
+        } else {
 
+            // this is not supposed to happen
 
+            return hour;
 
+        }
 
+    }
 
+
 
+    // date from string and array of format strings
 
+    function configFromStringAndArray(config) {
 
+        var tempConfig,
 
+            bestMoment,
 
+
 
+            scoreToBeat,
 
+            i,
 
+            currentScore;
 
+
 
+        if (config._f.length === 0) {
 
+            getParsingFlags(config).invalidFormat = true;
 
+            config._d = new Date(NaN);
 
+            return;
 
+        }
 
+
 
+        for (i = 0; i < config._f.length; i++) {
 
+            currentScore = 0;
 
+            tempConfig = copyConfig({}, config);
 
+            if (config._useUTC != null) {
 
+                tempConfig._useUTC = config._useUTC;
 
+            }
 
+            tempConfig._f = config._f[i];
 
+            configFromStringAndFormat(tempConfig);
 
+
 
+            if (!isValid(tempConfig)) {
 
+                continue;
 
+            }
 
+
 
+            // if there is any input that was not parsed add a penalty for that format
 
+            currentScore += getParsingFlags(tempConfig).charsLeftOver;
 
+
 
+            //or tokens
 
+            currentScore += getParsingFlags(tempConfig).unusedTokens.length * 10;
 
+
 
+            getParsingFlags(tempConfig).score = currentScore;
 
+
 
+            if (scoreToBeat == null || currentScore < scoreToBeat) {
 
+                scoreToBeat = currentScore;
 
+                bestMoment = tempConfig;
 
+            }
 
+        }
 
+
 
+        extend(config, bestMoment || tempConfig);
 
+    }
 
+
 
+    function configFromObject(config) {
 
+        if (config._d) {
 
+            return;
 
+        }
 
+
 
+        var i = normalizeObjectUnits(config._i);
 
+        config._a = map([i.year, i.month, i.day || i.date, i.hour, i.minute, i.second, i.millisecond], function (obj) {
 
+            return obj && parseInt(obj, 10);
 
+        });
 
+
 
+        configFromArray(config);
 
+    }
 
+
 
+    function createFromConfig (config) {
 
+        var res = new Moment(checkOverflow(prepareConfig(config)));
 
+        if (res._nextDay) {
 
+            // Adding is smart enough around DST
 
+            res.add(1, 'd');
 
+            res._nextDay = undefined;
 
+        }
 
+
 
+        return res;
 
+    }
 
+
 
+    function prepareConfig (config) {
 
+        var input = config._i,
 
+            format = config._f;
 
+
 
+        config._locale = config._locale || getLocale(config._l);
 
+
 
+        if (input === null || (format === undefined && input === '')) {
 
+            return createInvalid({nullInput: true});
 
+        }
 
+
 
+        if (typeof input === 'string') {
 
+            config._i = input = config._locale.preparse(input);
 
+        }
 
+
 
+        if (isMoment(input)) {
 
+            return new Moment(checkOverflow(input));
 
+        } else if (isDate(input)) {
 
+            config._d = input;
 
+        } else if (isArray(format)) {
 
+            configFromStringAndArray(config);
 
+        } else if (format) {
 
+            configFromStringAndFormat(config);
 
+        }  else {
 
+            configFromInput(config);
 
+        }
 
+
 
+        if (!isValid(config)) {
 
+            config._d = null;
 
+        }
 
+
 
+        return config;
 
+    }
 
+
 
+    function configFromInput(config) {
 
+        var input = config._i;
 
+        if (isUndefined(input)) {
 
+            config._d = new Date(hooks.now());
 
+        } else if (isDate(input)) {
 
+            config._d = new Date(input.valueOf());
 
+        } else if (typeof input === 'string') {
 
+            configFromString(config);
 
+        } else if (isArray(input)) {
 
+            config._a = map(input.slice(0), function (obj) {
 
+                return parseInt(obj, 10);
 
+            });
 
+            configFromArray(config);
 
+        } else if (isObject(input)) {
 
+            configFromObject(config);
 
+        } else if (isNumber(input)) {
 
+            // from milliseconds
 
+            config._d = new Date(input);
 
+        } else {
 
+            hooks.createFromInputFallback(config);
 
+        }
 
+    }
 
+
 
+    function createLocalOrUTC (input, format, locale, strict, isUTC) {
 
+        var c = {};
 
+
 
+        if (locale === true || locale === false) {
 
+            strict = locale;
 
+            locale = undefined;
 
+        }
 
+
 
+        if ((isObject(input) && isObjectEmpty(input)) ||
 
+                (isArray(input) && input.length === 0)) {
 
+            input = undefined;
 
+        }
 
+        // object construction must be done this way.
 
+        // https://github.com/moment/moment/issues/1423
 
+        c._isAMomentObject = true;
 
+        c._useUTC = c._isUTC = isUTC;
 
+        c._l = locale;
 
+        c._i = input;
 
+        c._f = format;
 
+        c._strict = strict;
 
+
 
+        return createFromConfig(c);
 
+    }
 
+
 
+    function createLocal (input, format, locale, strict) {
 
+        return createLocalOrUTC(input, format, locale, strict, false);
 
+    }
 
+
 
+    var prototypeMin = deprecate(
 
+        'moment().min is deprecated, use moment.max instead. http://momentjs.com/guides/#/warnings/min-max/',
 
+        function () {
 
+            var other = createLocal.apply(null, arguments);
 
+            if (this.isValid() && other.isValid()) {
 
+                return other < this ? this : other;
 
+            } else {
 
+                return createInvalid();
 
+            }
 
+        }
 
+    );
 
+
 
+    var prototypeMax = deprecate(
 
+        'moment().max is deprecated, use moment.min instead. http://momentjs.com/guides/#/warnings/min-max/',
 
+        function () {
 
+            var other = createLocal.apply(null, arguments);
 
+            if (this.isValid() && other.isValid()) {
 
+                return other > this ? this : other;
 
+            } else {
 
+                return createInvalid();
 
+            }
 
+        }
 
+    );
 
+
 
+    // Pick a moment m from moments so that m[fn](other) is true for all
 
+    // other. This relies on the function fn to be transitive.
 
+    //
 
+    // moments should either be an array of moment objects or an array, whose
 
+    // first element is an array of moment objects.
 
+    function pickBy(fn, moments) {
 
+        var res, i;
 
+        if (moments.length === 1 && isArray(moments[0])) {
 
+            moments = moments[0];
 
+        }
 
+        if (!moments.length) {
 
+            return createLocal();
 
+        }
 
+        res = moments[0];
 
+        for (i = 1; i < moments.length; ++i) {
 
+            if (!moments[i].isValid() || moments[i][fn](res)) {
 
+                res = moments[i];
 
+            }
 
+        }
 
+        return res;
 
+    }
 
+
 
+    // TODO: Use [].sort instead?
 
+    function min () {
 
+        var args = [].slice.call(arguments, 0);
 
+
 
+        return pickBy('isBefore', args);
 
+    }
 
+
 
+    function max () {
 
+        var args = [].slice.call(arguments, 0);
 
+
 
+        return pickBy('isAfter', args);
 
+    }
 
+
 
+    var now = function () {
 
+        return Date.now ? Date.now() : +(new Date());
 
+    };
 
+
 
+    var ordering = ['year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second', 'millisecond'];
 
+
 
+    function isDurationValid(m) {
 
+        for (var key in m) {
 
+            if (!(indexOf.call(ordering, key) !== -1 && (m[key] == null || !isNaN(m[key])))) {
 
+                return false;
 
+            }
 
+        }
 
+
 
+        var unitHasDecimal = false;
 
+        for (var i = 0; i < ordering.length; ++i) {
 
+            if (m[ordering[i]]) {
 
+                if (unitHasDecimal) {
 
+                    return false; // only allow non-integers for smallest unit
 
+                }
 
+                if (parseFloat(m[ordering[i]]) !== toInt(m[ordering[i]])) {
 
+                    unitHasDecimal = true;
 
+                }
 
+            }
 
+        }
 
+
 
+        return true;
 
+    }
 
+
 
+    function isValid$1() {
 
+        return this._isValid;
 
+    }
 
+
 
+    function createInvalid$1() {
 
+        return createDuration(NaN);
 
+    }
 
+
 
+    function Duration (duration) {
 
+        var normalizedInput = normalizeObjectUnits(duration),
 
+            years = normalizedInput.year || 0,
 
+            quarters = normalizedInput.quarter || 0,
 
+            months = normalizedInput.month || 0,
 
+            weeks = normalizedInput.week || normalizedInput.isoWeek || 0,
 
+            days = normalizedInput.day || 0,
 
+            hours = normalizedInput.hour || 0,
 
+            minutes = normalizedInput.minute || 0,
 
+            seconds = normalizedInput.second || 0,
 
+            milliseconds = normalizedInput.millisecond || 0;
 
+
 
+        this._isValid = isDurationValid(normalizedInput);
 
+
 
+        // representation for dateAddRemove
 
+        this._milliseconds = +milliseconds +
 
+            seconds * 1e3 + // 1000
 
+            minutes * 6e4 + // 1000 * 60
 
+            hours * 1000 * 60 * 60; //using 1000 * 60 * 60 instead of 36e5 to avoid floating point rounding errors https://github.com/moment/moment/issues/2978
 
+        // Because of dateAddRemove treats 24 hours as different from a
 
+        // day when working around DST, we need to store them separately
 
+        this._days = +days +
 
+            weeks * 7;
 
+        // It is impossible to translate months into days without knowing
 
+        // which months you are are talking about, so we have to store
 
+        // it separately.
 
+        this._months = +months +
 
+            quarters * 3 +
 
+            years * 12;
 
+
 
+        this._data = {};
 
+
 
+        this._locale = getLocale();
 
+
 
+        this._bubble();
 
+    }
 
+
 
+    function isDuration (obj) {
 
+        return obj instanceof Duration;
 
+    }
 
+
 
+    function absRound (number) {
 
+        if (number < 0) {
 
+            return Math.round(-1 * number) * -1;
 
+        } else {
 
+            return Math.round(number);
 
+        }
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    function offset (token, separator) {
 
+        addFormatToken(token, 0, 0, function () {
 
+            var offset = this.utcOffset();
 
+            var sign = '+';
 
+            if (offset < 0) {
 
+                offset = -offset;
 
+                sign = '-';
 
+            }
 
+            return sign + zeroFill(~~(offset / 60), 2) + separator + zeroFill(~~(offset) % 60, 2);
 
+        });
 
+    }
 
+
 
+    offset('Z', ':');
 
+    offset('ZZ', '');
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('Z',  matchShortOffset);
 
+    addRegexToken('ZZ', matchShortOffset);
 
+    addParseToken(['Z', 'ZZ'], function (input, array, config) {
 
+        config._useUTC = true;
 
+        config._tzm = offsetFromString(matchShortOffset, input);
 
+    });
 
+
 
+    // HELPERS
 
+
 
+    // timezone chunker
 
+    // '+10:00' > ['10',  '00']
 
+    // '-1530'  > ['-15', '30']
 
+    var chunkOffset = /([\+\-]|\d\d)/gi;
 
+
 
+    function offsetFromString(matcher, string) {
 
+        var matches = (string || '').match(matcher);
 
+
 
+        if (matches === null) {
 
+            return null;
 
+        }
 
+
 
+        var chunk   = matches[matches.length - 1] || [];
 
+        var parts   = (chunk + '').match(chunkOffset) || ['-', 0, 0];
 
+        var minutes = +(parts[1] * 60) + toInt(parts[2]);
 
+
 
+        return minutes === 0 ?
 
+          0 :
 
+          parts[0] === '+' ? minutes : -minutes;
 
+    }
 
+
 
+    // Return a moment from input, that is local/utc/zone equivalent to model.
 
+    function cloneWithOffset(input, model) {
 
+        var res, diff;
 
+        if (model._isUTC) {
 
+            res = model.clone();
 
+            diff = (isMoment(input) || isDate(input) ? input.valueOf() : createLocal(input).valueOf()) - res.valueOf();
 
+            // Use low-level api, because this fn is low-level api.
 
+            res._d.setTime(res._d.valueOf() + diff);
 
+            hooks.updateOffset(res, false);
 
+            return res;
 
+        } else {
 
+            return createLocal(input).local();
 
+        }
 
+    }
 
+
 
+    function getDateOffset (m) {
 
+        // On Firefox.24 Date#getTimezoneOffset returns a floating point.
 
+        // https://github.com/moment/moment/pull/1871
 
+        return -Math.round(m._d.getTimezoneOffset() / 15) * 15;
 
+    }
 
+
 
+    // HOOKS
 
+
 
+    // This function will be called whenever a moment is mutated.
 
+    // It is intended to keep the offset in sync with the timezone.
 
+    hooks.updateOffset = function () {};
 
+
 
+    // MOMENTS
 
+
 
+    // keepLocalTime = true means only change the timezone, without
 
+    // affecting the local hour. So 5:31:26 +0300 --[utcOffset(2, true)]-->
 
+    // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist with offset
 
+    // +0200, so we adjust the time as needed, to be valid.
 
+    //
 
+    // Keeping the time actually adds/subtracts (one hour)
 
+    // from the actual represented time. That is why we call updateOffset
 
+    // a second time. In case it wants us to change the offset again
 
+    // _changeInProgress == true case, then we have to adjust, because
 
+    // there is no such time in the given timezone.
 
+    function getSetOffset (input, keepLocalTime, keepMinutes) {
 
+        var offset = this._offset || 0,
 
+            localAdjust;
 
+        if (!this.isValid()) {
 
+            return input != null ? this : NaN;
 
+        }
 
+        if (input != null) {
 
+            if (typeof input === 'string') {
 
+                input = offsetFromString(matchShortOffset, input);
 
+                if (input === null) {
 
+                    return this;
 
+                }
 
+            } else if (Math.abs(input) < 16 && !keepMinutes) {
 
+                input = input * 60;
 
+            }
 
+            if (!this._isUTC && keepLocalTime) {
 
+                localAdjust = getDateOffset(this);
 
+            }
 
+            this._offset = input;
 
+            this._isUTC = true;
 
+            if (localAdjust != null) {
 
+                this.add(localAdjust, 'm');
 
+            }
 
+            if (offset !== input) {
 
+                if (!keepLocalTime || this._changeInProgress) {
 
+                    addSubtract(this, createDuration(input - offset, 'm'), 1, false);
 
+                } else if (!this._changeInProgress) {
 
+                    this._changeInProgress = true;
 
+                    hooks.updateOffset(this, true);
 
+                    this._changeInProgress = null;
 
+                }
 
+            }
 
+            return this;
 
+        } else {
 
+            return this._isUTC ? offset : getDateOffset(this);
 
+        }
 
+    }
 
+
 
+    function getSetZone (input, keepLocalTime) {
 
+        if (input != null) {
 
+            if (typeof input !== 'string') {
 
+                input = -input;
 
+            }
 
+
 
+            this.utcOffset(input, keepLocalTime);
 
+
 
+            return this;
 
+        } else {
 
+            return -this.utcOffset();
 
+        }
 
+    }
 
+
 
+    function setOffsetToUTC (keepLocalTime) {
 
+        return this.utcOffset(0, keepLocalTime);
 
+    }
 
+
 
+    function setOffsetToLocal (keepLocalTime) {
 
+        if (this._isUTC) {
 
+            this.utcOffset(0, keepLocalTime);
 
+            this._isUTC = false;
 
+
 
+            if (keepLocalTime) {
 
+                this.subtract(getDateOffset(this), 'm');
 
+            }
 
+        }
 
+        return this;
 
+    }
 
+
 
+    function setOffsetToParsedOffset () {
 
+        if (this._tzm != null) {
 
+            this.utcOffset(this._tzm, false, true);
 
+        } else if (typeof this._i === 'string') {
 
+            var tZone = offsetFromString(matchOffset, this._i);
 
+            if (tZone != null) {
 
+                this.utcOffset(tZone);
 
+            }
 
+            else {
 
+                this.utcOffset(0, true);
 
+            }
 
+        }
 
+        return this;
 
+    }
 
+
 
+    function hasAlignedHourOffset (input) {
 
+        if (!this.isValid()) {
 
+            return false;
 
+        }
 
+        input = input ? createLocal(input).utcOffset() : 0;
 
+
 
+        return (this.utcOffset() - input) % 60 === 0;
 
+    }
 
+
 
+    function isDaylightSavingTime () {
 
+        return (
 
+            this.utcOffset() > this.clone().month(0).utcOffset() ||
 
+            this.utcOffset() > this.clone().month(5).utcOffset()
 
+        );
 
+    }
 
+
 
+    function isDaylightSavingTimeShifted () {
 
+        if (!isUndefined(this._isDSTShifted)) {
 
+            return this._isDSTShifted;
 
+        }
 
+
 
+        var c = {};
 
+
 
+        copyConfig(c, this);
 
+        c = prepareConfig(c);
 
+
 
+        if (c._a) {
 
+            var other = c._isUTC ? createUTC(c._a) : createLocal(c._a);
 
+            this._isDSTShifted = this.isValid() &&
 
+                compareArrays(c._a, other.toArray()) > 0;
 
+        } else {
 
+            this._isDSTShifted = false;
 
+        }
 
+
 
+        return this._isDSTShifted;
 
+    }
 
+
 
+    function isLocal () {
 
+        return this.isValid() ? !this._isUTC : false;
 
+    }
 
+
 
+    function isUtcOffset () {
 
+        return this.isValid() ? this._isUTC : false;
 
+    }
 
+
 
+    function isUtc () {
 
+        return this.isValid() ? this._isUTC && this._offset === 0 : false;
 
+    }
 
+
 
+    // ASP.NET json date format regex
 
+    var aspNetRegex = /^(\-|\+)?(?:(\d*)[. ])?(\d+)\:(\d+)(?:\:(\d+)(\.\d*)?)?$/;
 
+
 
+    // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html
 
+    // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere
 
+    // and further modified to allow for strings containing both week and day
 
+    var isoRegex = /^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/;
 
+
 
+    function createDuration (input, key) {
 
+        var duration = input,
 
+            // matching against regexp is expensive, do it on demand
 
+            match = null,
 
+            sign,
 
+            ret,
 
+            diffRes;
 
+
 
+        if (isDuration(input)) {
 
+            duration = {
 
+                ms : input._milliseconds,
 
+                d  : input._days,
 
+                M  : input._months
 
+            };
 
+        } else if (isNumber(input)) {
 
+            duration = {};
 
+            if (key) {
 
+                duration[key] = input;
 
+            } else {
 
+                duration.milliseconds = input;
 
+            }
 
+        } else if (!!(match = aspNetRegex.exec(input))) {
 
+            sign = (match[1] === '-') ? -1 : 1;
 
+            duration = {
 
+                y  : 0,
 
+                d  : toInt(match[DATE])                         * sign,
 
+                h  : toInt(match[HOUR])                         * sign,
 
+                m  : toInt(match[MINUTE])                       * sign,
 
+                s  : toInt(match[SECOND])                       * sign,
 
+                ms : toInt(absRound(match[MILLISECOND] * 1000)) * sign // the millisecond decimal point is included in the match
 
+            };
 
+        } else if (!!(match = isoRegex.exec(input))) {
 
+            sign = (match[1] === '-') ? -1 : 1;
 
+            duration = {
 
+                y : parseIso(match[2], sign),
 
+                M : parseIso(match[3], sign),
 
+                w : parseIso(match[4], sign),
 
+                d : parseIso(match[5], sign),
 
+                h : parseIso(match[6], sign),
 
+                m : parseIso(match[7], sign),
 
+                s : parseIso(match[8], sign)
 
+            };
 
+        } else if (duration == null) {// checks for null or undefined
 
+            duration = {};
 
+        } else if (typeof duration === 'object' && ('from' in duration || 'to' in duration)) {
 
+            diffRes = momentsDifference(createLocal(duration.from), createLocal(duration.to));
 
+
 
+            duration = {};
 
+            duration.ms = diffRes.milliseconds;
 
+            duration.M = diffRes.months;
 
+        }
 
+
 
+        ret = new Duration(duration);
 
+
 
+        if (isDuration(input) && hasOwnProp(input, '_locale')) {
 
+            ret._locale = input._locale;
 
+        }
 
+
 
+        return ret;
 
+    }
 
+
 
+    createDuration.fn = Duration.prototype;
 
+    createDuration.invalid = createInvalid$1;
 
+
 
+    function parseIso (inp, sign) {
 
+        // We'd normally use ~~inp for this, but unfortunately it also
 
+        // converts floats to ints.
 
+        // inp may be undefined, so careful calling replace on it.
 
+        var res = inp && parseFloat(inp.replace(',', '.'));
 
+        // apply sign while we're at it
 
+        return (isNaN(res) ? 0 : res) * sign;
 
+    }
 
+
 
+    function positiveMomentsDifference(base, other) {
 
+        var res = {};
 
+
 
+        res.months = other.month() - base.month() +
 
+            (other.year() - base.year()) * 12;
 
+        if (base.clone().add(res.months, 'M').isAfter(other)) {
 
+            --res.months;
 
+        }
 
+
 
+        res.milliseconds = +other - +(base.clone().add(res.months, 'M'));
 
+
 
+        return res;
 
+    }
 
+
 
+    function momentsDifference(base, other) {
 
+        var res;
 
+        if (!(base.isValid() && other.isValid())) {
 
+            return {milliseconds: 0, months: 0};
 
+        }
 
+
 
+        other = cloneWithOffset(other, base);
 
+        if (base.isBefore(other)) {
 
+            res = positiveMomentsDifference(base, other);
 
+        } else {
 
+            res = positiveMomentsDifference(other, base);
 
+            res.milliseconds = -res.milliseconds;
 
+            res.months = -res.months;
 
+        }
 
+
 
+        return res;
 
+    }
 
+
 
+    // TODO: remove 'name' arg after deprecation is removed
 
+    function createAdder(direction, name) {
 
+        return function (val, period) {
 
+            var dur, tmp;
 
+            //invert the arguments, but complain about it
 
+            if (period !== null && !isNaN(+period)) {
 
+                deprecateSimple(name, 'moment().' + name  + '(period, number) is deprecated. Please use moment().' + name + '(number, period). ' +
 
+                'See http://momentjs.com/guides/#/warnings/add-inverted-param/ for more info.');
 
+                tmp = val; val = period; period = tmp;
 
+            }
 
+
 
+            val = typeof val === 'string' ? +val : val;
 
+            dur = createDuration(val, period);
 
+            addSubtract(this, dur, direction);
 
+            return this;
 
+        };
 
+    }
 
+
 
+    function addSubtract (mom, duration, isAdding, updateOffset) {
 
+        var milliseconds = duration._milliseconds,
 
+            days = absRound(duration._days),
 
+            months = absRound(duration._months);
 
+
 
+        if (!mom.isValid()) {
 
+            // No op
 
+            return;
 
+        }
 
+
 
+        updateOffset = updateOffset == null ? true : updateOffset;
 
+
 
+        if (months) {
 
+            setMonth(mom, get(mom, 'Month') + months * isAdding);
 
+        }
 
+        if (days) {
 
+            set$1(mom, 'Date', get(mom, 'Date') + days * isAdding);
 
+        }
 
+        if (milliseconds) {
 
+            mom._d.setTime(mom._d.valueOf() + milliseconds * isAdding);
 
+        }
 
+        if (updateOffset) {
 
+            hooks.updateOffset(mom, days || months);
 
+        }
 
+    }
 
+
 
+    var add      = createAdder(1, 'add');
 
+    var subtract = createAdder(-1, 'subtract');
 
+
 
+    function getCalendarFormat(myMoment, now) {
 
+        var diff = myMoment.diff(now, 'days', true);
 
+        return diff < -6 ? 'sameElse' :
 
+                diff < -1 ? 'lastWeek' :
 
+                diff < 0 ? 'lastDay' :
 
+                diff < 1 ? 'sameDay' :
 
+                diff < 2 ? 'nextDay' :
 
+                diff < 7 ? 'nextWeek' : 'sameElse';
 
+    }
 
+
 
+    function calendar$1 (time, formats) {
 
+        // We want to compare the start of today, vs this.
 
+        // Getting start-of-today depends on whether we're local/utc/offset or not.
 
+        var now = time || createLocal(),
 
+            sod = cloneWithOffset(now, this).startOf('day'),
 
+            format = hooks.calendarFormat(this, sod) || 'sameElse';
 
+
 
+        var output = formats && (isFunction(formats[format]) ? formats[format].call(this, now) : formats[format]);
 
+
 
+        return this.format(output || this.localeData().calendar(format, this, createLocal(now)));
 
+    }
 
+
 
+    function clone () {
 
+        return new Moment(this);
 
+    }
 
+
 
+    function isAfter (input, units) {
 
+        var localInput = isMoment(input) ? input : createLocal(input);
 
+        if (!(this.isValid() && localInput.isValid())) {
 
+            return false;
 
+        }
 
+        units = normalizeUnits(units) || 'millisecond';
 
+        if (units === 'millisecond') {
 
+            return this.valueOf() > localInput.valueOf();
 
+        } else {
 
+            return localInput.valueOf() < this.clone().startOf(units).valueOf();
 
+        }
 
+    }
 
+
 
+    function isBefore (input, units) {
 
+        var localInput = isMoment(input) ? input : createLocal(input);
 
+        if (!(this.isValid() && localInput.isValid())) {
 
+            return false;
 
+        }
 
+        units = normalizeUnits(units) || 'millisecond';
 
+        if (units === 'millisecond') {
 
+            return this.valueOf() < localInput.valueOf();
 
+        } else {
 
+            return this.clone().endOf(units).valueOf() < localInput.valueOf();
 
+        }
 
+    }
 
+
 
+    function isBetween (from, to, units, inclusivity) {
 
+        var localFrom = isMoment(from) ? from : createLocal(from),
 
+            localTo = isMoment(to) ? to : createLocal(to);
 
+        if (!(this.isValid() && localFrom.isValid() && localTo.isValid())) {
 
+            return false;
 
+        }
 
+        inclusivity = inclusivity || '()';
 
+        return (inclusivity[0] === '(' ? this.isAfter(localFrom, units) : !this.isBefore(localFrom, units)) &&
 
+            (inclusivity[1] === ')' ? this.isBefore(localTo, units) : !this.isAfter(localTo, units));
 
+    }
 
+
 
+    function isSame (input, units) {
 
+        var localInput = isMoment(input) ? input : createLocal(input),
 
+            inputMs;
 
+        if (!(this.isValid() && localInput.isValid())) {
 
+            return false;
 
+        }
 
+        units = normalizeUnits(units) || 'millisecond';
 
+        if (units === 'millisecond') {
 
+            return this.valueOf() === localInput.valueOf();
 
+        } else {
 
+            inputMs = localInput.valueOf();
 
+            return this.clone().startOf(units).valueOf() <= inputMs && inputMs <= this.clone().endOf(units).valueOf();
 
+        }
 
+    }
 
+
 
+    function isSameOrAfter (input, units) {
 
+        return this.isSame(input, units) || this.isAfter(input, units);
 
+    }
 
+
 
+    function isSameOrBefore (input, units) {
 
+        return this.isSame(input, units) || this.isBefore(input, units);
 
+    }
 
+
 
+    function diff (input, units, asFloat) {
 
+        var that,
 
+            zoneDelta,
 
+            output;
 
+
 
+        if (!this.isValid()) {
 
+            return NaN;
 
+        }
 
+
 
+        that = cloneWithOffset(input, this);
 
+
 
+        if (!that.isValid()) {
 
+            return NaN;
 
+        }
 
+
 
+        zoneDelta = (that.utcOffset() - this.utcOffset()) * 6e4;
 
+
 
+        units = normalizeUnits(units);
 
+
 
+        switch (units) {
 
+            case 'year': output = monthDiff(this, that) / 12; break;
 
+            case 'month': output = monthDiff(this, that); break;
 
+            case 'quarter': output = monthDiff(this, that) / 3; break;
 
+            case 'second': output = (this - that) / 1e3; break; // 1000
 
+            case 'minute': output = (this - that) / 6e4; break; // 1000 * 60
 
+            case 'hour': output = (this - that) / 36e5; break; // 1000 * 60 * 60
 
+            case 'day': output = (this - that - zoneDelta) / 864e5; break; // 1000 * 60 * 60 * 24, negate dst
 
+            case 'week': output = (this - that - zoneDelta) / 6048e5; break; // 1000 * 60 * 60 * 24 * 7, negate dst
 
+            default: output = this - that;
 
+        }
 
+
 
+        return asFloat ? output : absFloor(output);
 
+    }
 
+
 
+    function monthDiff (a, b) {
 
+        // difference in months
 
+        var wholeMonthDiff = ((b.year() - a.year()) * 12) + (b.month() - a.month()),
 
+            // b is in (anchor - 1 month, anchor + 1 month)
 
+            anchor = a.clone().add(wholeMonthDiff, 'months'),
 
+            anchor2, adjust;
 
+
 
+        if (b - anchor < 0) {
 
+            anchor2 = a.clone().add(wholeMonthDiff - 1, 'months');
 
+            // linear across the month
 
+            adjust = (b - anchor) / (anchor - anchor2);
 
+        } else {
 
+            anchor2 = a.clone().add(wholeMonthDiff + 1, 'months');
 
+            // linear across the month
 
+            adjust = (b - anchor) / (anchor2 - anchor);
 
+        }
 
+
 
+        //check for negative zero, return zero if negative zero
 
+        return -(wholeMonthDiff + adjust) || 0;
 
+    }
 
+
 
+    hooks.defaultFormat = 'YYYY-MM-DDTHH:mm:ssZ';
 
+    hooks.defaultFormatUtc = 'YYYY-MM-DDTHH:mm:ss[Z]';
 
+
 
+    function toString () {
 
+        return this.clone().locale('en').format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ');
 
+    }
 
+
 
+    function toISOString(keepOffset) {
 
+        if (!this.isValid()) {
 
+            return null;
 
+        }
 
+        var utc = keepOffset !== true;
 
+        var m = utc ? this.clone().utc() : this;
 
+        if (m.year() < 0 || m.year() > 9999) {
 
+            return formatMoment(m, utc ? 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]' : 'YYYYYY-MM-DD[T]HH:mm:ss.SSSZ');
 
+        }
 
+        if (isFunction(Date.prototype.toISOString)) {
 
+            // native implementation is ~50x faster, use it when we can
 
+            if (utc) {
 
+                return this.toDate().toISOString();
 
+            } else {
 
+                return new Date(this.valueOf() + this.utcOffset() * 60 * 1000).toISOString().replace('Z', formatMoment(m, 'Z'));
 
+            }
 
+        }
 
+        return formatMoment(m, utc ? 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' : 'YYYY-MM-DD[T]HH:mm:ss.SSSZ');
 
+    }
 
+
 
+    /**
 
+     * Return a human readable representation of a moment that can
 
+     * also be evaluated to get a new moment which is the same
 
+     *
 
+     * @link https://nodejs.org/dist/latest/docs/api/util.html#util_custom_inspect_function_on_objects
 
+     */
 
+    function inspect () {
 
+        if (!this.isValid()) {
 
+            return 'moment.invalid(/* ' + this._i + ' */)';
 
+        }
 
+        var func = 'moment';
 
+        var zone = '';
 
+        if (!this.isLocal()) {
 
+            func = this.utcOffset() === 0 ? 'moment.utc' : 'moment.parseZone';
 
+            zone = 'Z';
 
+        }
 
+        var prefix = '[' + func + '("]';
 
+        var year = (0 <= this.year() && this.year() <= 9999) ? 'YYYY' : 'YYYYYY';
 
+        var datetime = '-MM-DD[T]HH:mm:ss.SSS';
 
+        var suffix = zone + '[")]';
 
+
 
+        return this.format(prefix + year + datetime + suffix);
 
+    }
 
+
 
+    function format (inputString) {
 
+        if (!inputString) {
 
+            inputString = this.isUtc() ? hooks.defaultFormatUtc : hooks.defaultFormat;
 
+        }
 
+        var output = formatMoment(this, inputString);
 
+        return this.localeData().postformat(output);
 
+    }
 
+
 
+    function from (time, withoutSuffix) {
 
+        if (this.isValid() &&
 
+                ((isMoment(time) && time.isValid()) ||
 
+                 createLocal(time).isValid())) {
 
+            return createDuration({to: this, from: time}).locale(this.locale()).humanize(!withoutSuffix);
 
+        } else {
 
+            return this.localeData().invalidDate();
 
+        }
 
+    }
 
+
 
+    function fromNow (withoutSuffix) {
 
+        return this.from(createLocal(), withoutSuffix);
 
+    }
 
+
 
+    function to (time, withoutSuffix) {
 
+        if (this.isValid() &&
 
+                ((isMoment(time) && time.isValid()) ||
 
+                 createLocal(time).isValid())) {
 
+            return createDuration({from: this, to: time}).locale(this.locale()).humanize(!withoutSuffix);
 
+        } else {
 
+            return this.localeData().invalidDate();
 
+        }
 
+    }
 
+
 
+    function toNow (withoutSuffix) {
 
+        return this.to(createLocal(), withoutSuffix);
 
+    }
 
+
 
+    // If passed a locale key, it will set the locale for this
 
+    // instance.  Otherwise, it will return the locale configuration
 
+    // variables for this instance.
 
+    function locale (key) {
 
+        var newLocaleData;
 
+
 
+        if (key === undefined) {
 
+            return this._locale._abbr;
 
+        } else {
 
+            newLocaleData = getLocale(key);
 
+            if (newLocaleData != null) {
 
+                this._locale = newLocaleData;
 
+            }
 
+            return this;
 
+        }
 
+    }
 
+
 
+    var lang = deprecate(
 
+        'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.',
 
+        function (key) {
 
+            if (key === undefined) {
 
+                return this.localeData();
 
+            } else {
 
+                return this.locale(key);
 
+            }
 
+        }
 
+    );
 
+
 
+    function localeData () {
 
+        return this._locale;
 
+    }
 
+
 
+    var MS_PER_SECOND = 1000;
 
+    var MS_PER_MINUTE = 60 * MS_PER_SECOND;
 
+    var MS_PER_HOUR = 60 * MS_PER_MINUTE;
 
+    var MS_PER_400_YEARS = (365 * 400 + 97) * 24 * MS_PER_HOUR;
 
+
 
+    // actual modulo - handles negative numbers (for dates before 1970):
 
+    function mod$1(dividend, divisor) {
 
+        return (dividend % divisor + divisor) % divisor;
 
+    }
 
+
 
+    function localStartOfDate(y, m, d) {
 
+        // the date constructor remaps years 0-99 to 1900-1999
 
+        if (y < 100 && y >= 0) {
 
+            // preserve leap years using a full 400 year cycle, then reset
 
+            return new Date(y + 400, m, d) - MS_PER_400_YEARS;
 
+        } else {
 
+            return new Date(y, m, d).valueOf();
 
+        }
 
+    }
 
+
 
+    function utcStartOfDate(y, m, d) {
 
+        // Date.UTC remaps years 0-99 to 1900-1999
 
+        if (y < 100 && y >= 0) {
 
+            // preserve leap years using a full 400 year cycle, then reset
 
+            return Date.UTC(y + 400, m, d) - MS_PER_400_YEARS;
 
+        } else {
 
+            return Date.UTC(y, m, d);
 
+        }
 
+    }
 
+
 
+    function startOf (units) {
 
+        var time;
 
+        units = normalizeUnits(units);
 
+        if (units === undefined || units === 'millisecond' || !this.isValid()) {
 
+            return this;
 
+        }
 
+
 
+        var startOfDate = this._isUTC ? utcStartOfDate : localStartOfDate;
 
+
 
+        switch (units) {
 
+            case 'year':
 
+                time = startOfDate(this.year(), 0, 1);
 
+                break;
 
+            case 'quarter':
 
+                time = startOfDate(this.year(), this.month() - this.month() % 3, 1);
 
+                break;
 
+            case 'month':
 
+                time = startOfDate(this.year(), this.month(), 1);
 
+                break;
 
+            case 'week':
 
+                time = startOfDate(this.year(), this.month(), this.date() - this.weekday());
 
+                break;
 
+            case 'isoWeek':
 
+                time = startOfDate(this.year(), this.month(), this.date() - (this.isoWeekday() - 1));
 
+                break;
 
+            case 'day':
 
+            case 'date':
 
+                time = startOfDate(this.year(), this.month(), this.date());
 
+                break;
 
+            case 'hour':
 
+                time = this._d.valueOf();
 
+                time -= mod$1(time + (this._isUTC ? 0 : this.utcOffset() * MS_PER_MINUTE), MS_PER_HOUR);
 
+                break;
 
+            case 'minute':
 
+                time = this._d.valueOf();
 
+                time -= mod$1(time, MS_PER_MINUTE);
 
+                break;
 
+            case 'second':
 
+                time = this._d.valueOf();
 
+                time -= mod$1(time, MS_PER_SECOND);
 
+                break;
 
+        }
 
+
 
+        this._d.setTime(time);
 
+        hooks.updateOffset(this, true);
 
+        return this;
 
+    }
 
+
 
+    function endOf (units) {
 
+        var time;
 
+        units = normalizeUnits(units);
 
+        if (units === undefined || units === 'millisecond' || !this.isValid()) {
 
+            return this;
 
+        }
 
+
 
+        var startOfDate = this._isUTC ? utcStartOfDate : localStartOfDate;
 
+
 
+        switch (units) {
 
+            case 'year':
 
+                time = startOfDate(this.year() + 1, 0, 1) - 1;
 
+                break;
 
+            case 'quarter':
 
+                time = startOfDate(this.year(), this.month() - this.month() % 3 + 3, 1) - 1;
 
+                break;
 
+            case 'month':
 
+                time = startOfDate(this.year(), this.month() + 1, 1) - 1;
 
+                break;
 
+            case 'week':
 
+                time = startOfDate(this.year(), this.month(), this.date() - this.weekday() + 7) - 1;
 
+                break;
 
+            case 'isoWeek':
 
+                time = startOfDate(this.year(), this.month(), this.date() - (this.isoWeekday() - 1) + 7) - 1;
 
+                break;
 
+            case 'day':
 
+            case 'date':
 
+                time = startOfDate(this.year(), this.month(), this.date() + 1) - 1;
 
+                break;
 
+            case 'hour':
 
+                time = this._d.valueOf();
 
+                time += MS_PER_HOUR - mod$1(time + (this._isUTC ? 0 : this.utcOffset() * MS_PER_MINUTE), MS_PER_HOUR) - 1;
 
+                break;
 
+            case 'minute':
 
+                time = this._d.valueOf();
 
+                time += MS_PER_MINUTE - mod$1(time, MS_PER_MINUTE) - 1;
 
+                break;
 
+            case 'second':
 
+                time = this._d.valueOf();
 
+                time += MS_PER_SECOND - mod$1(time, MS_PER_SECOND) - 1;
 
+                break;
 
+        }
 
+
 
+        this._d.setTime(time);
 
+        hooks.updateOffset(this, true);
 
+        return this;
 
+    }
 
+
 
+    function valueOf () {
 
+        return this._d.valueOf() - ((this._offset || 0) * 60000);
 
+    }
 
+
 
+    function unix () {
 
+        return Math.floor(this.valueOf() / 1000);
 
+    }
 
+
 
+    function toDate () {
 
+        return new Date(this.valueOf());
 
+    }
 
+
 
+    function toArray () {
 
+        var m = this;
 
+        return [m.year(), m.month(), m.date(), m.hour(), m.minute(), m.second(), m.millisecond()];
 
+    }
 
+
 
+    function toObject () {
 
+        var m = this;
 
+        return {
 
+            years: m.year(),
 
+            months: m.month(),
 
+            date: m.date(),
 
+            hours: m.hours(),
 
+            minutes: m.minutes(),
 
+            seconds: m.seconds(),
 
+            milliseconds: m.milliseconds()
 
+        };
 
+    }
 
+
 
+    function toJSON () {
 
+        // new Date(NaN).toJSON() === null
 
+        return this.isValid() ? this.toISOString() : null;
 
+    }
 
+
 
+    function isValid$2 () {
 
+        return isValid(this);
 
+    }
 
+
 
+    function parsingFlags () {
 
+        return extend({}, getParsingFlags(this));
 
+    }
 
+
 
+    function invalidAt () {
 
+        return getParsingFlags(this).overflow;
 
+    }
 
+
 
+    function creationData() {
 
+        return {
 
+            input: this._i,
 
+            format: this._f,
 
+            locale: this._locale,
 
+            isUTC: this._isUTC,
 
+            strict: this._strict
 
+        };
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken(0, ['gg', 2], 0, function () {
 
+        return this.weekYear() % 100;
 
+    });
 
+
 
+    addFormatToken(0, ['GG', 2], 0, function () {
 
+        return this.isoWeekYear() % 100;
 
+    });
 
+
 
+    function addWeekYearFormatToken (token, getter) {
 
+        addFormatToken(0, [token, token.length], 0, getter);
 
+    }
 
+
 
+    addWeekYearFormatToken('gggg',     'weekYear');
 
+    addWeekYearFormatToken('ggggg',    'weekYear');
 
+    addWeekYearFormatToken('GGGG',  'isoWeekYear');
 
+    addWeekYearFormatToken('GGGGG', 'isoWeekYear');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('weekYear', 'gg');
 
+    addUnitAlias('isoWeekYear', 'GG');
 
+
 
+    // PRIORITY
 
+
 
+    addUnitPriority('weekYear', 1);
 
+    addUnitPriority('isoWeekYear', 1);
 
+
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('G',      matchSigned);
 
+    addRegexToken('g',      matchSigned);
 
+    addRegexToken('GG',     match1to2, match2);
 
+    addRegexToken('gg',     match1to2, match2);
 
+    addRegexToken('GGGG',   match1to4, match4);
 
+    addRegexToken('gggg',   match1to4, match4);
 
+    addRegexToken('GGGGG',  match1to6, match6);
 
+    addRegexToken('ggggg',  match1to6, match6);
 
+
 
+    addWeekParseToken(['gggg', 'ggggg', 'GGGG', 'GGGGG'], function (input, week, config, token) {
 
+        week[token.substr(0, 2)] = toInt(input);
 
+    });
 
+
 
+    addWeekParseToken(['gg', 'GG'], function (input, week, config, token) {
 
+        week[token] = hooks.parseTwoDigitYear(input);
 
+    });
 
+
 
+    // MOMENTS
 
+
 
+    function getSetWeekYear (input) {
 
+        return getSetWeekYearHelper.call(this,
 
+                input,
 
+                this.week(),
 
+                this.weekday(),
 
+                this.localeData()._week.dow,
 
+                this.localeData()._week.doy);
 
+    }
 
+
 
+    function getSetISOWeekYear (input) {
 
+        return getSetWeekYearHelper.call(this,
 
+                input, this.isoWeek(), this.isoWeekday(), 1, 4);
 
+    }
 
+
 
+    function getISOWeeksInYear () {
 
+        return weeksInYear(this.year(), 1, 4);
 
+    }
 
+
 
+    function getWeeksInYear () {
 
+        var weekInfo = this.localeData()._week;
 
+        return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
 
+    }
 
+
 
+    function getSetWeekYearHelper(input, week, weekday, dow, doy) {
 
+        var weeksTarget;
 
+        if (input == null) {
 
+            return weekOfYear(this, dow, doy).year;
 
+        } else {
 
+            weeksTarget = weeksInYear(input, dow, doy);
 
+            if (week > weeksTarget) {
 
+                week = weeksTarget;
 
+            }
 
+            return setWeekAll.call(this, input, week, weekday, dow, doy);
 
+        }
 
+    }
 
+
 
+    function setWeekAll(weekYear, week, weekday, dow, doy) {
 
+        var dayOfYearData = dayOfYearFromWeeks(weekYear, week, weekday, dow, doy),
 
+            date = createUTCDate(dayOfYearData.year, 0, dayOfYearData.dayOfYear);
 
+
 
+        this.year(date.getUTCFullYear());
 
+        this.month(date.getUTCMonth());
 
+        this.date(date.getUTCDate());
 
+        return this;
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('Q', 0, 'Qo', 'quarter');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('quarter', 'Q');
 
+
 
+    // PRIORITY
 
+
 
+    addUnitPriority('quarter', 7);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('Q', match1);
 
+    addParseToken('Q', function (input, array) {
 
+        array[MONTH] = (toInt(input) - 1) * 3;
 
+    });
 
+
 
+    // MOMENTS
 
+
 
+    function getSetQuarter (input) {
 
+        return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('D', ['DD', 2], 'Do', 'date');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('date', 'D');
 
+
 
+    // PRIORITY
 
+    addUnitPriority('date', 9);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('D',  match1to2);
 
+    addRegexToken('DD', match1to2, match2);
 
+    addRegexToken('Do', function (isStrict, locale) {
 
+        // TODO: Remove "ordinalParse" fallback in next major release.
 
+        return isStrict ?
 
+          (locale._dayOfMonthOrdinalParse || locale._ordinalParse) :
 
+          locale._dayOfMonthOrdinalParseLenient;
 
+    });
 
+
 
+    addParseToken(['D', 'DD'], DATE);
 
+    addParseToken('Do', function (input, array) {
 
+        array[DATE] = toInt(input.match(match1to2)[0]);
 
+    });
 
+
 
+    // MOMENTS
 
+
 
+    var getSetDayOfMonth = makeGetSet('Date', true);
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('DDD', ['DDDD', 3], 'DDDo', 'dayOfYear');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('dayOfYear', 'DDD');
 
+
 
+    // PRIORITY
 
+    addUnitPriority('dayOfYear', 4);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('DDD',  match1to3);
 
+    addRegexToken('DDDD', match3);
 
+    addParseToken(['DDD', 'DDDD'], function (input, array, config) {
 
+        config._dayOfYear = toInt(input);
 
+    });
 
+
 
+    // HELPERS
 
+
 
+    // MOMENTS
 
+
 
+    function getSetDayOfYear (input) {
 
+        var dayOfYear = Math.round((this.clone().startOf('day') - this.clone().startOf('year')) / 864e5) + 1;
 
+        return input == null ? dayOfYear : this.add((input - dayOfYear), 'd');
 
+    }
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('m', ['mm', 2], 0, 'minute');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('minute', 'm');
 
+
 
+    // PRIORITY
 
+
 
+    addUnitPriority('minute', 14);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('m',  match1to2);
 
+    addRegexToken('mm', match1to2, match2);
 
+    addParseToken(['m', 'mm'], MINUTE);
 
+
 
+    // MOMENTS
 
+
 
+    var getSetMinute = makeGetSet('Minutes', false);
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('s', ['ss', 2], 0, 'second');
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('second', 's');
 
+
 
+    // PRIORITY
 
+
 
+    addUnitPriority('second', 15);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('s',  match1to2);
 
+    addRegexToken('ss', match1to2, match2);
 
+    addParseToken(['s', 'ss'], SECOND);
 
+
 
+    // MOMENTS
 
+
 
+    var getSetSecond = makeGetSet('Seconds', false);
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('S', 0, 0, function () {
 
+        return ~~(this.millisecond() / 100);
 
+    });
 
+
 
+    addFormatToken(0, ['SS', 2], 0, function () {
 
+        return ~~(this.millisecond() / 10);
 
+    });
 
+
 
+    addFormatToken(0, ['SSS', 3], 0, 'millisecond');
 
+    addFormatToken(0, ['SSSS', 4], 0, function () {
 
+        return this.millisecond() * 10;
 
+    });
 
+    addFormatToken(0, ['SSSSS', 5], 0, function () {
 
+        return this.millisecond() * 100;
 
+    });
 
+    addFormatToken(0, ['SSSSSS', 6], 0, function () {
 
+        return this.millisecond() * 1000;
 
+    });
 
+    addFormatToken(0, ['SSSSSSS', 7], 0, function () {
 
+        return this.millisecond() * 10000;
 
+    });
 
+    addFormatToken(0, ['SSSSSSSS', 8], 0, function () {
 
+        return this.millisecond() * 100000;
 
+    });
 
+    addFormatToken(0, ['SSSSSSSSS', 9], 0, function () {
 
+        return this.millisecond() * 1000000;
 
+    });
 
+
 
+
 
+    // ALIASES
 
+
 
+    addUnitAlias('millisecond', 'ms');
 
+
 
+    // PRIORITY
 
+
 
+    addUnitPriority('millisecond', 16);
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('S',    match1to3, match1);
 
+    addRegexToken('SS',   match1to3, match2);
 
+    addRegexToken('SSS',  match1to3, match3);
 
+
 
+    var token;
 
+    for (token = 'SSSS'; token.length <= 9; token += 'S') {
 
+        addRegexToken(token, matchUnsigned);
 
+    }
 
+
 
+    function parseMs(input, array) {
 
+        array[MILLISECOND] = toInt(('0.' + input) * 1000);
 
+    }
 
+
 
+    for (token = 'S'; token.length <= 9; token += 'S') {
 
+        addParseToken(token, parseMs);
 
+    }
 
+    // MOMENTS
 
+
 
+    var getSetMillisecond = makeGetSet('Milliseconds', false);
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('z',  0, 0, 'zoneAbbr');
 
+    addFormatToken('zz', 0, 0, 'zoneName');
 
+
 
+    // MOMENTS
 
+
 
+    function getZoneAbbr () {
 
+        return this._isUTC ? 'UTC' : '';
 
+    }
 
+
 
+    function getZoneName () {
 
+        return this._isUTC ? 'Coordinated Universal Time' : '';
 
+    }
 
+
 
+    var proto = Moment.prototype;
 
+
 
+    proto.add               = add;
 
+    proto.calendar          = calendar$1;
 
+    proto.clone             = clone;
 
+    proto.diff              = diff;
 
+    proto.endOf             = endOf;
 
+    proto.format            = format;
 
+    proto.from              = from;
 
+    proto.fromNow           = fromNow;
 
+    proto.to                = to;
 
+    proto.toNow             = toNow;
 
+    proto.get               = stringGet;
 
+    proto.invalidAt         = invalidAt;
 
+    proto.isAfter           = isAfter;
 
+    proto.isBefore          = isBefore;
 
+    proto.isBetween         = isBetween;
 
+    proto.isSame            = isSame;
 
+    proto.isSameOrAfter     = isSameOrAfter;
 
+    proto.isSameOrBefore    = isSameOrBefore;
 
+    proto.isValid           = isValid$2;
 
+    proto.lang              = lang;
 
+    proto.locale            = locale;
 
+    proto.localeData        = localeData;
 
+    proto.max               = prototypeMax;
 
+    proto.min               = prototypeMin;
 
+    proto.parsingFlags      = parsingFlags;
 
+    proto.set               = stringSet;
 
+    proto.startOf           = startOf;
 
+    proto.subtract          = subtract;
 
+    proto.toArray           = toArray;
 
+    proto.toObject          = toObject;
 
+    proto.toDate            = toDate;
 
+    proto.toISOString       = toISOString;
 
+    proto.inspect           = inspect;
 
+    proto.toJSON            = toJSON;
 
+    proto.toString          = toString;
 
+    proto.unix              = unix;
 
+    proto.valueOf           = valueOf;
 
+    proto.creationData      = creationData;
 
+    proto.year       = getSetYear;
 
+    proto.isLeapYear = getIsLeapYear;
 
+    proto.weekYear    = getSetWeekYear;
 
+    proto.isoWeekYear = getSetISOWeekYear;
 
+    proto.quarter = proto.quarters = getSetQuarter;
 
+    proto.month       = getSetMonth;
 
+    proto.daysInMonth = getDaysInMonth;
 
+    proto.week           = proto.weeks        = getSetWeek;
 
+    proto.isoWeek        = proto.isoWeeks     = getSetISOWeek;
 
+    proto.weeksInYear    = getWeeksInYear;
 
+    proto.isoWeeksInYear = getISOWeeksInYear;
 
+    proto.date       = getSetDayOfMonth;
 
+    proto.day        = proto.days             = getSetDayOfWeek;
 
+    proto.weekday    = getSetLocaleDayOfWeek;
 
+    proto.isoWeekday = getSetISODayOfWeek;
 
+    proto.dayOfYear  = getSetDayOfYear;
 
+    proto.hour = proto.hours = getSetHour;
 
+    proto.minute = proto.minutes = getSetMinute;
 
+    proto.second = proto.seconds = getSetSecond;
 
+    proto.millisecond = proto.milliseconds = getSetMillisecond;
 
+    proto.utcOffset            = getSetOffset;
 
+    proto.utc                  = setOffsetToUTC;
 
+    proto.local                = setOffsetToLocal;
 
+    proto.parseZone            = setOffsetToParsedOffset;
 
+    proto.hasAlignedHourOffset = hasAlignedHourOffset;
 
+    proto.isDST                = isDaylightSavingTime;
 
+    proto.isLocal              = isLocal;
 
+    proto.isUtcOffset          = isUtcOffset;
 
+    proto.isUtc                = isUtc;
 
+    proto.isUTC                = isUtc;
 
+    proto.zoneAbbr = getZoneAbbr;
 
+    proto.zoneName = getZoneName;
 
+    proto.dates  = deprecate('dates accessor is deprecated. Use date instead.', getSetDayOfMonth);
 
+    proto.months = deprecate('months accessor is deprecated. Use month instead', getSetMonth);
 
+    proto.years  = deprecate('years accessor is deprecated. Use year instead', getSetYear);
 
+    proto.zone   = deprecate('moment().zone is deprecated, use moment().utcOffset instead. http://momentjs.com/guides/#/warnings/zone/', getSetZone);
 
+    proto.isDSTShifted = deprecate('isDSTShifted is deprecated. See http://momentjs.com/guides/#/warnings/dst-shifted/ for more information', isDaylightSavingTimeShifted);
 
+
 
+    function createUnix (input) {
 
+        return createLocal(input * 1000);
 
+    }
 
+
 
+    function createInZone () {
 
+        return createLocal.apply(null, arguments).parseZone();
 
+    }
 
+
 
+    function preParsePostFormat (string) {
 
+        return string;
 
+    }
 
+
 
+    var proto$1 = Locale.prototype;
 
+
 
+    proto$1.calendar        = calendar;
 
+    proto$1.longDateFormat  = longDateFormat;
 
+    proto$1.invalidDate     = invalidDate;
 
+    proto$1.ordinal         = ordinal;
 
+    proto$1.preparse        = preParsePostFormat;
 
+    proto$1.postformat      = preParsePostFormat;
 
+    proto$1.relativeTime    = relativeTime;
 
+    proto$1.pastFuture      = pastFuture;
 
+    proto$1.set             = set;
 
+
 
+    proto$1.months            =        localeMonths;
 
+    proto$1.monthsShort       =        localeMonthsShort;
 
+    proto$1.monthsParse       =        localeMonthsParse;
 
+    proto$1.monthsRegex       = monthsRegex;
 
+    proto$1.monthsShortRegex  = monthsShortRegex;
 
+    proto$1.week = localeWeek;
 
+    proto$1.firstDayOfYear = localeFirstDayOfYear;
 
+    proto$1.firstDayOfWeek = localeFirstDayOfWeek;
 
+
 
+    proto$1.weekdays       =        localeWeekdays;
 
+    proto$1.weekdaysMin    =        localeWeekdaysMin;
 
+    proto$1.weekdaysShort  =        localeWeekdaysShort;
 
+    proto$1.weekdaysParse  =        localeWeekdaysParse;
 
+
 
+    proto$1.weekdaysRegex       =        weekdaysRegex;
 
+    proto$1.weekdaysShortRegex  =        weekdaysShortRegex;
 
+    proto$1.weekdaysMinRegex    =        weekdaysMinRegex;
 
+
 
+    proto$1.isPM = localeIsPM;
 
+    proto$1.meridiem = localeMeridiem;
 
+
 
+    function get$1 (format, index, field, setter) {
 
+        var locale = getLocale();
 
+        var utc = createUTC().set(setter, index);
 
+        return locale[field](utc, format);
 
+    }
 
+
 
+    function listMonthsImpl (format, index, field) {
 
+        if (isNumber(format)) {
 
+            index = format;
 
+            format = undefined;
 
+        }
 
+
 
+        format = format || '';
 
+
 
+        if (index != null) {
 
+            return get$1(format, index, field, 'month');
 
+        }
 
+
 
+        var i;
 
+        var out = [];
 
+        for (i = 0; i < 12; i++) {
 
+            out[i] = get$1(format, i, field, 'month');
 
+        }
 
+        return out;
 
+    }
 
+
 
+    // ()
 
+    // (5)
 
+    // (fmt, 5)
 
+    // (fmt)
 
+    // (true)
 
+    // (true, 5)
 
+    // (true, fmt, 5)
 
+    // (true, fmt)
 
+    function listWeekdaysImpl (localeSorted, format, index, field) {
 
+        if (typeof localeSorted === 'boolean') {
 
+            if (isNumber(format)) {
 
+                index = format;
 
+                format = undefined;
 
+            }
 
+
 
+            format = format || '';
 
+        } else {
 
+            format = localeSorted;
 
+            index = format;
 
+            localeSorted = false;
 
+
 
+            if (isNumber(format)) {
 
+                index = format;
 
+                format = undefined;
 
+            }
 
+
 
+            format = format || '';
 
+        }
 
+
 
+        var locale = getLocale(),
 
+            shift = localeSorted ? locale._week.dow : 0;
 
+
 
+        if (index != null) {
 
+            return get$1(format, (index + shift) % 7, field, 'day');
 
+        }
 
+
 
+        var i;
 
+        var out = [];
 
+        for (i = 0; i < 7; i++) {
 
+            out[i] = get$1(format, (i + shift) % 7, field, 'day');
 
+        }
 
+        return out;
 
+    }
 
+
 
+    function listMonths (format, index) {
 
+        return listMonthsImpl(format, index, 'months');
 
+    }
 
+
 
+    function listMonthsShort (format, index) {
 
+        return listMonthsImpl(format, index, 'monthsShort');
 
+    }
 
+
 
+    function listWeekdays (localeSorted, format, index) {
 
+        return listWeekdaysImpl(localeSorted, format, index, 'weekdays');
 
+    }
 
+
 
+    function listWeekdaysShort (localeSorted, format, index) {
 
+        return listWeekdaysImpl(localeSorted, format, index, 'weekdaysShort');
 
+    }
 
+
 
+    function listWeekdaysMin (localeSorted, format, index) {
 
+        return listWeekdaysImpl(localeSorted, format, index, 'weekdaysMin');
 
+    }
 
+
 
+    getSetGlobalLocale('en', {
 
+        dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/,
 
+        ordinal : function (number) {
 
+            var b = number % 10,
 
+                output = (toInt(number % 100 / 10) === 1) ? 'th' :
 
+                (b === 1) ? 'st' :
 
+                (b === 2) ? 'nd' :
 
+                (b === 3) ? 'rd' : 'th';
 
+            return number + output;
 
+        }
 
+    });
 
+
 
+    // Side effect imports
 
+
 
+    hooks.lang = deprecate('moment.lang is deprecated. Use moment.locale instead.', getSetGlobalLocale);
 
+    hooks.langData = deprecate('moment.langData is deprecated. Use moment.localeData instead.', getLocale);
 
+
 
+    var mathAbs = Math.abs;
 
+
 
+    function abs () {
 
+        var data           = this._data;
 
+
 
+        this._milliseconds = mathAbs(this._milliseconds);
 
+        this._days         = mathAbs(this._days);
 
+        this._months       = mathAbs(this._months);
 
+
 
+        data.milliseconds  = mathAbs(data.milliseconds);
 
+        data.seconds       = mathAbs(data.seconds);
 
+        data.minutes       = mathAbs(data.minutes);
 
+        data.hours         = mathAbs(data.hours);
 
+        data.months        = mathAbs(data.months);
 
+        data.years         = mathAbs(data.years);
 
+
 
+        return this;
 
+    }
 
+
 
+    function addSubtract$1 (duration, input, value, direction) {
 
+        var other = createDuration(input, value);
 
+
 
+        duration._milliseconds += direction * other._milliseconds;
 
+        duration._days         += direction * other._days;
 
+        duration._months       += direction * other._months;
 
+
 
+        return duration._bubble();
 
+    }
 
+
 
+    // supports only 2.0-style add(1, 's') or add(duration)
 
+    function add$1 (input, value) {
 
+        return addSubtract$1(this, input, value, 1);
 
+    }
 
+
 
+    // supports only 2.0-style subtract(1, 's') or subtract(duration)
 
+    function subtract$1 (input, value) {
 
+        return addSubtract$1(this, input, value, -1);
 
+    }
 
+
 
+    function absCeil (number) {
 
+        if (number < 0) {
 
+            return Math.floor(number);
 
+        } else {
 
+            return Math.ceil(number);
 
+        }
 
+    }
 
+
 
+    function bubble () {
 
+        var milliseconds = this._milliseconds;
 
+        var days         = this._days;
 
+        var months       = this._months;
 
+        var data         = this._data;
 
+        var seconds, minutes, hours, years, monthsFromDays;
 
+
 
+        // if we have a mix of positive and negative values, bubble down first
 
+        // check: https://github.com/moment/moment/issues/2166
 
+        if (!((milliseconds >= 0 && days >= 0 && months >= 0) ||
 
+                (milliseconds <= 0 && days <= 0 && months <= 0))) {
 
+            milliseconds += absCeil(monthsToDays(months) + days) * 864e5;
 
+            days = 0;
 
+            months = 0;
 
+        }
 
+
 
+        // The following code bubbles up values, see the tests for
 
+        // examples of what that means.
 
+        data.milliseconds = milliseconds % 1000;
 
+
 
+        seconds           = absFloor(milliseconds / 1000);
 
+        data.seconds      = seconds % 60;
 
+
 
+        minutes           = absFloor(seconds / 60);
 
+        data.minutes      = minutes % 60;
 
+
 
+        hours             = absFloor(minutes / 60);
 
+        data.hours        = hours % 24;
 
+
 
+        days += absFloor(hours / 24);
 
+
 
+        // convert days to months
 
+        monthsFromDays = absFloor(daysToMonths(days));
 
+        months += monthsFromDays;
 
+        days -= absCeil(monthsToDays(monthsFromDays));
 
+
 
+        // 12 months -> 1 year
 
+        years = absFloor(months / 12);
 
+        months %= 12;
 
+
 
+        data.days   = days;
 
+        data.months = months;
 
+        data.years  = years;
 
+
 
+        return this;
 
+    }
 
+
 
+    function daysToMonths (days) {
 
+        // 400 years have 146097 days (taking into account leap year rules)
 
+        // 400 years have 12 months === 4800
 
+        return days * 4800 / 146097;
 
+    }
 
+
 
+    function monthsToDays (months) {
 
+        // the reverse of daysToMonths
 
+        return months * 146097 / 4800;
 
+    }
 
+
 
+    function as (units) {
 
+        if (!this.isValid()) {
 
+            return NaN;
 
+        }
 
+        var days;
 
+        var months;
 
+        var milliseconds = this._milliseconds;
 
+
 
+        units = normalizeUnits(units);
 
+
 
+        if (units === 'month' || units === 'quarter' || units === 'year') {
 
+            days = this._days + milliseconds / 864e5;
 
+            months = this._months + daysToMonths(days);
 
+            switch (units) {
 
+                case 'month':   return months;
 
+                case 'quarter': return months / 3;
 
+                case 'year':    return months / 12;
 
+            }
 
+        } else {
 
+            // handle milliseconds separately because of floating point math errors (issue #1867)
 
+            days = this._days + Math.round(monthsToDays(this._months));
 
+            switch (units) {
 
+                case 'week'   : return days / 7     + milliseconds / 6048e5;
 
+                case 'day'    : return days         + milliseconds / 864e5;
 
+                case 'hour'   : return days * 24    + milliseconds / 36e5;
 
+                case 'minute' : return days * 1440  + milliseconds / 6e4;
 
+                case 'second' : return days * 86400 + milliseconds / 1000;
 
+                // Math.floor prevents floating point math errors here
 
+                case 'millisecond': return Math.floor(days * 864e5) + milliseconds;
 
+                default: throw new Error('Unknown unit ' + units);
 
+            }
 
+        }
 
+    }
 
+
 
+    // TODO: Use this.as('ms')?
 
+    function valueOf$1 () {
 
+        if (!this.isValid()) {
 
+            return NaN;
 
+        }
 
+        return (
 
+            this._milliseconds +
 
+            this._days * 864e5 +
 
+            (this._months % 12) * 2592e6 +
 
+            toInt(this._months / 12) * 31536e6
 
+        );
 
+    }
 
+
 
+    function makeAs (alias) {
 
+        return function () {
 
+            return this.as(alias);
 
+        };
 
+    }
 
+
 
+    var asMilliseconds = makeAs('ms');
 
+    var asSeconds      = makeAs('s');
 
+    var asMinutes      = makeAs('m');
 
+    var asHours        = makeAs('h');
 
+    var asDays         = makeAs('d');
 
+    var asWeeks        = makeAs('w');
 
+    var asMonths       = makeAs('M');
 
+    var asQuarters     = makeAs('Q');
 
+    var asYears        = makeAs('y');
 
+
 
+    function clone$1 () {
 
+        return createDuration(this);
 
+    }
 
+
 
+    function get$2 (units) {
 
+        units = normalizeUnits(units);
 
+        return this.isValid() ? this[units + 's']() : NaN;
 
+    }
 
+
 
+    function makeGetter(name) {
 
+        return function () {
 
+            return this.isValid() ? this._data[name] : NaN;
 
+        };
 
+    }
 
+
 
+    var milliseconds = makeGetter('milliseconds');
 
+    var seconds      = makeGetter('seconds');
 
+    var minutes      = makeGetter('minutes');
 
+    var hours        = makeGetter('hours');
 
+    var days         = makeGetter('days');
 
+    var months       = makeGetter('months');
 
+    var years        = makeGetter('years');
 
+
 
+    function weeks () {
 
+        return absFloor(this.days() / 7);
 
+    }
 
+
 
+    var round = Math.round;
 
+    var thresholds = {
 
+        ss: 44,         // a few seconds to seconds
 
+        s : 45,         // seconds to minute
 
+        m : 45,         // minutes to hour
 
+        h : 22,         // hours to day
 
+        d : 26,         // days to month
 
+        M : 11          // months to year
 
+    };
 
+
 
+    // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
 
+    function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) {
 
+        return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
 
+    }
 
+
 
+    function relativeTime$1 (posNegDuration, withoutSuffix, locale) {
 
+        var duration = createDuration(posNegDuration).abs();
 
+        var seconds  = round(duration.as('s'));
 
+        var minutes  = round(duration.as('m'));
 
+        var hours    = round(duration.as('h'));
 
+        var days     = round(duration.as('d'));
 
+        var months   = round(duration.as('M'));
 
+        var years    = round(duration.as('y'));
 
+
 
+        var a = seconds <= thresholds.ss && ['s', seconds]  ||
 
+                seconds < thresholds.s   && ['ss', seconds] ||
 
+                minutes <= 1             && ['m']           ||
 
+                minutes < thresholds.m   && ['mm', minutes] ||
 
+                hours   <= 1             && ['h']           ||
 
+                hours   < thresholds.h   && ['hh', hours]   ||
 
+                days    <= 1             && ['d']           ||
 
+                days    < thresholds.d   && ['dd', days]    ||
 
+                months  <= 1             && ['M']           ||
 
+                months  < thresholds.M   && ['MM', months]  ||
 
+                years   <= 1             && ['y']           || ['yy', years];
 
+
 
+        a[2] = withoutSuffix;
 
+        a[3] = +posNegDuration > 0;
 
+        a[4] = locale;
 
+        return substituteTimeAgo.apply(null, a);
 
+    }
 
+
 
+    // This function allows you to set the rounding function for relative time strings
 
+    function getSetRelativeTimeRounding (roundingFunction) {
 
+        if (roundingFunction === undefined) {
 
+            return round;
 
+        }
 
+        if (typeof(roundingFunction) === 'function') {
 
+            round = roundingFunction;
 
+            return true;
 
+        }
 
+        return false;
 
+    }
 
+
 
+    // This function allows you to set a threshold for relative time strings
 
+    function getSetRelativeTimeThreshold (threshold, limit) {
 
+        if (thresholds[threshold] === undefined) {
 
+            return false;
 
+        }
 
+        if (limit === undefined) {
 
+            return thresholds[threshold];
 
+        }
 
+        thresholds[threshold] = limit;
 
+        if (threshold === 's') {
 
+            thresholds.ss = limit - 1;
 
+        }
 
+        return true;
 
+    }
 
+
 
+    function humanize (withSuffix) {
 
+        if (!this.isValid()) {
 
+            return this.localeData().invalidDate();
 
+        }
 
+
 
+        var locale = this.localeData();
 
+        var output = relativeTime$1(this, !withSuffix, locale);
 
+
 
+        if (withSuffix) {
 
+            output = locale.pastFuture(+this, output);
 
+        }
 
+
 
+        return locale.postformat(output);
 
+    }
 
+
 
+    var abs$1 = Math.abs;
 
+
 
+    function sign(x) {
 
+        return ((x > 0) - (x < 0)) || +x;
 
+    }
 
+
 
+    function toISOString$1() {
 
+        // for ISO strings we do not use the normal bubbling rules:
 
+        //  * milliseconds bubble up until they become hours
 
+        //  * days do not bubble at all
 
+        //  * months bubble up until they become years
 
+        // This is because there is no context-free conversion between hours and days
 
+        // (think of clock changes)
 
+        // and also not between days and months (28-31 days per month)
 
+        if (!this.isValid()) {
 
+            return this.localeData().invalidDate();
 
+        }
 
+
 
+        var seconds = abs$1(this._milliseconds) / 1000;
 
+        var days         = abs$1(this._days);
 
+        var months       = abs$1(this._months);
 
+        var minutes, hours, years;
 
+
 
+        // 3600 seconds -> 60 minutes -> 1 hour
 
+        minutes           = absFloor(seconds / 60);
 
+        hours             = absFloor(minutes / 60);
 
+        seconds %= 60;
 
+        minutes %= 60;
 
+
 
+        // 12 months -> 1 year
 
+        years  = absFloor(months / 12);
 
+        months %= 12;
 
+
 
+
 
+        // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
 
+        var Y = years;
 
+        var M = months;
 
+        var D = days;
 
+        var h = hours;
 
+        var m = minutes;
 
+        var s = seconds ? seconds.toFixed(3).replace(/\.?0+$/, '') : '';
 
+        var total = this.asSeconds();
 
+
 
+        if (!total) {
 
+            // this is the same as C#'s (Noda) and python (isodate)...
 
+            // but not other JS (goog.date)
 
+            return 'P0D';
 
+        }
 
+
 
+        var totalSign = total < 0 ? '-' : '';
 
+        var ymSign = sign(this._months) !== sign(total) ? '-' : '';
 
+        var daysSign = sign(this._days) !== sign(total) ? '-' : '';
 
+        var hmsSign = sign(this._milliseconds) !== sign(total) ? '-' : '';
 
+
 
+        return totalSign + 'P' +
 
+            (Y ? ymSign + Y + 'Y' : '') +
 
+            (M ? ymSign + M + 'M' : '') +
 
+            (D ? daysSign + D + 'D' : '') +
 
+            ((h || m || s) ? 'T' : '') +
 
+            (h ? hmsSign + h + 'H' : '') +
 
+            (m ? hmsSign + m + 'M' : '') +
 
+            (s ? hmsSign + s + 'S' : '');
 
+    }
 
+
 
+    var proto$2 = Duration.prototype;
 
+
 
+    proto$2.isValid        = isValid$1;
 
+    proto$2.abs            = abs;
 
+    proto$2.add            = add$1;
 
+    proto$2.subtract       = subtract$1;
 
+    proto$2.as             = as;
 
+    proto$2.asMilliseconds = asMilliseconds;
 
+    proto$2.asSeconds      = asSeconds;
 
+    proto$2.asMinutes      = asMinutes;
 
+    proto$2.asHours        = asHours;
 
+    proto$2.asDays         = asDays;
 
+    proto$2.asWeeks        = asWeeks;
 
+    proto$2.asMonths       = asMonths;
 
+    proto$2.asQuarters     = asQuarters;
 
+    proto$2.asYears        = asYears;
 
+    proto$2.valueOf        = valueOf$1;
 
+    proto$2._bubble        = bubble;
 
+    proto$2.clone          = clone$1;
 
+    proto$2.get            = get$2;
 
+    proto$2.milliseconds   = milliseconds;
 
+    proto$2.seconds        = seconds;
 
+    proto$2.minutes        = minutes;
 
+    proto$2.hours          = hours;
 
+    proto$2.days           = days;
 
+    proto$2.weeks          = weeks;
 
+    proto$2.months         = months;
 
+    proto$2.years          = years;
 
+    proto$2.humanize       = humanize;
 
+    proto$2.toISOString    = toISOString$1;
 
+    proto$2.toString       = toISOString$1;
 
+    proto$2.toJSON         = toISOString$1;
 
+    proto$2.locale         = locale;
 
+    proto$2.localeData     = localeData;
 
+
 
+    proto$2.toIsoString = deprecate('toIsoString() is deprecated. Please use toISOString() instead (notice the capitals)', toISOString$1);
 
+    proto$2.lang = lang;
 
+
 
+    // Side effect imports
 
+
 
+    // FORMATTING
 
+
 
+    addFormatToken('X', 0, 0, 'unix');
 
+    addFormatToken('x', 0, 0, 'valueOf');
 
+
 
+    // PARSING
 
+
 
+    addRegexToken('x', matchSigned);
 
+    addRegexToken('X', matchTimestamp);
 
+    addParseToken('X', function (input, array, config) {
 
+        config._d = new Date(parseFloat(input, 10) * 1000);
 
+    });
 
+    addParseToken('x', function (input, array, config) {
 
+        config._d = new Date(toInt(input));
 
+    });
 
+
 
+    // Side effect imports
 
+
 
+
 
+    hooks.version = '2.24.0';
 
+
 
+    setHookCallback(createLocal);
 
+
 
+    hooks.fn                    = proto;
 
+    hooks.min                   = min;
 
+    hooks.max                   = max;
 
+    hooks.now                   = now;
 
+    hooks.utc                   = createUTC;
 
+    hooks.unix                  = createUnix;
 
+    hooks.months                = listMonths;
 
+    hooks.isDate                = isDate;
 
+    hooks.locale                = getSetGlobalLocale;
 
+    hooks.invalid               = createInvalid;
 
+    hooks.duration              = createDuration;
 
+    hooks.isMoment              = isMoment;
 
+    hooks.weekdays              = listWeekdays;
 
+    hooks.parseZone             = createInZone;
 
+    hooks.localeData            = getLocale;
 
+    hooks.isDuration            = isDuration;
 
+    hooks.monthsShort           = listMonthsShort;
 
+    hooks.weekdaysMin           = listWeekdaysMin;
 
+    hooks.defineLocale          = defineLocale;
 
+    hooks.updateLocale          = updateLocale;
 
+    hooks.locales               = listLocales;
 
+    hooks.weekdaysShort         = listWeekdaysShort;
 
+    hooks.normalizeUnits        = normalizeUnits;
 
+    hooks.relativeTimeRounding  = getSetRelativeTimeRounding;
 
+    hooks.relativeTimeThreshold = getSetRelativeTimeThreshold;
 
+    hooks.calendarFormat        = getCalendarFormat;
 
+    hooks.prototype             = proto;
 
+
 
+    // currently HTML5 input type only supports 24-hour formats
 
+    hooks.HTML5_FMT = {
 
+        DATETIME_LOCAL: 'YYYY-MM-DDTHH:mm',             // <input type="datetime-local" />
 
+        DATETIME_LOCAL_SECONDS: 'YYYY-MM-DDTHH:mm:ss',  // <input type="datetime-local" step="1" />
 
+        DATETIME_LOCAL_MS: 'YYYY-MM-DDTHH:mm:ss.SSS',   // <input type="datetime-local" step="0.001" />
 
+        DATE: 'YYYY-MM-DD',                             // <input type="date" />
 
+        TIME: 'HH:mm',                                  // <input type="time" />
 
+        TIME_SECONDS: 'HH:mm:ss',                       // <input type="time" step="1" />
 
+        TIME_MS: 'HH:mm:ss.SSS',                        // <input type="time" step="0.001" />
 
+        WEEK: 'GGGG-[W]WW',                             // <input type="week" />
 
+        MONTH: 'YYYY-MM'                                // <input type="month" />
 
+    };
 
+
 
+    return hooks;
 
+
 
+})));
 
+});
 
+
 
+var FORMATS = {
 
+	datetime: 'MMM D, YYYY, h:mm:ss a',
 
+	millisecond: 'h:mm:ss.SSS a',
 
+	second: 'h:mm:ss a',
 
+	minute: 'h:mm a',
 
+	hour: 'hA',
 
+	day: 'MMM D',
 
+	week: 'll',
 
+	month: 'MMM YYYY',
 
+	quarter: '[Q]Q - YYYY',
 
+	year: 'YYYY'
 
+};
 
+
 
+core_adapters._date.override(typeof moment === 'function' ? {
 
+	_id: 'moment', // DEBUG ONLY
 
+
 
+	formats: function() {
 
+		return FORMATS;
 
+	},
 
+
 
+	parse: function(value, format) {
 
+		if (typeof value === 'string' && typeof format === 'string') {
 
+			value = moment(value, format);
 
+		} else if (!(value instanceof moment)) {
 
+			value = moment(value);
 
+		}
 
+		return value.isValid() ? value.valueOf() : null;
 
+	},
 
+
 
+	format: function(time, format) {
 
+		return moment(time).format(format);
 
+	},
 
+
 
+	add: function(time, amount, unit) {
 
+		return moment(time).add(amount, unit).valueOf();
 
+	},
 
+
 
+	diff: function(max, min, unit) {
 
+		return moment.duration(moment(max).diff(moment(min))).as(unit);
 
+	},
 
+
 
+	startOf: function(time, unit, weekday) {
 
+		time = moment(time);
 
+		if (unit === 'isoWeek') {
 
+			return time.isoWeekday(weekday).valueOf();
 
+		}
 
+		return time.startOf(unit).valueOf();
 
+	},
 
+
 
+	endOf: function(time, unit) {
 
+		return moment(time).endOf(unit).valueOf();
 
+	},
 
+
 
+	// DEPRECATIONS
 
+
 
+	/**
 
+	 * Provided for backward compatibility with scale.getValueForPixel().
 
+	 * @deprecated since version 2.8.0
 
+	 * @todo remove at version 3
 
+	 * @private
 
+	 */
 
+	_create: function(time) {
 
+		return moment(time);
 
+	},
 
+} : {});
 
+
 
+core_defaults._set('global', {
 
+	plugins: {
 
+		filler: {
 
+			propagate: true
 
+		}
 
+	}
 
+});
 
+
 
+var mappers = {
 
+	dataset: function(source) {
 
+		var index = source.fill;
 
+		var chart = source.chart;
 
+		var meta = chart.getDatasetMeta(index);
 
+		var visible = meta && chart.isDatasetVisible(index);
 
+		var points = (visible && meta.dataset._children) || [];
 
+		var length = points.length || 0;
 
+
 
+		return !length ? null : function(point, i) {
 
+			return (i < length && points[i]._view) || null;
 
+		};
 
+	},
 
+
 
+	boundary: function(source) {
 
+		var boundary = source.boundary;
 
+		var x = boundary ? boundary.x : null;
 
+		var y = boundary ? boundary.y : null;
 
+
 
+		return function(point) {
 
+			return {
 
+				x: x === null ? point.x : x,
 
+				y: y === null ? point.y : y,
 
+			};
 
+		};
 
+	}
 
+};
 
+
 
+// @todo if (fill[0] === '#')
 
+function decodeFill(el, index, count) {
 
+	var model = el._model || {};
 
+	var fill = model.fill;
 
+	var target;
 
+
 
+	if (fill === undefined) {
 
+		fill = !!model.backgroundColor;
 
+	}
 
+
 
+	if (fill === false || fill === null) {
 
+		return false;
 
+	}
 
+
 
+	if (fill === true) {
 
+		return 'origin';
 
+	}
 
+
 
+	target = parseFloat(fill, 10);
 
+	if (isFinite(target) && Math.floor(target) === target) {
 
+		if (fill[0] === '-' || fill[0] === '+') {
 
+			target = index + target;
 
+		}
 
+
 
+		if (target === index || target < 0 || target >= count) {
 
+			return false;
 
+		}
 
+
 
+		return target;
 
+	}
 
+
 
+	switch (fill) {
 
+	// compatibility
 
+	case 'bottom':
 
+		return 'start';
 
+	case 'top':
 
+		return 'end';
 
+	case 'zero':
 
+		return 'origin';
 
+	// supported boundaries
 
+	case 'origin':
 
+	case 'start':
 
+	case 'end':
 
+		return fill;
 
+	// invalid fill values
 
+	default:
 
+		return false;
 
+	}
 
+}
 
+
 
+function computeBoundary(source) {
 
+	var model = source.el._model || {};
 
+	var scale = source.el._scale || {};
 
+	var fill = source.fill;
 
+	var target = null;
 
+	var horizontal;
 
+
 
+	if (isFinite(fill)) {
 
+		return null;
 
+	}
 
+
 
+	// Backward compatibility: until v3, we still need to support boundary values set on
 
+	// the model (scaleTop, scaleBottom and scaleZero) because some external plugins and
 
+	// controllers might still use it (e.g. the Smith chart).
 
+
 
+	if (fill === 'start') {
 
+		target = model.scaleBottom === undefined ? scale.bottom : model.scaleBottom;
 
+	} else if (fill === 'end') {
 
+		target = model.scaleTop === undefined ? scale.top : model.scaleTop;
 
+	} else if (model.scaleZero !== undefined) {
 
+		target = model.scaleZero;
 
+	} else if (scale.getBasePosition) {
 
+		target = scale.getBasePosition();
 
+	} else if (scale.getBasePixel) {
 
+		target = scale.getBasePixel();
 
+	}
 
+
 
+	if (target !== undefined && target !== null) {
 
+		if (target.x !== undefined && target.y !== undefined) {
 
+			return target;
 
+		}
 
+
 
+		if (helpers$1.isFinite(target)) {
 
+			horizontal = scale.isHorizontal();
 
+			return {
 
+				x: horizontal ? target : null,
 
+				y: horizontal ? null : target
 
+			};
 
+		}
 
+	}
 
+
 
+	return null;
 
+}
 
+
 
+function resolveTarget(sources, index, propagate) {
 
+	var source = sources[index];
 
+	var fill = source.fill;
 
+	var visited = [index];
 
+	var target;
 
+
 
+	if (!propagate) {
 
+		return fill;
 
+	}
 
+
 
+	while (fill !== false && visited.indexOf(fill) === -1) {
 
+		if (!isFinite(fill)) {
 
+			return fill;
 
+		}
 
+
 
+		target = sources[fill];
 
+		if (!target) {
 
+			return false;
 
+		}
 
+
 
+		if (target.visible) {
 
+			return fill;
 
+		}
 
+
 
+		visited.push(fill);
 
+		fill = target.fill;
 
+	}
 
+
 
+	return false;
 
+}
 
+
 
+function createMapper(source) {
 
+	var fill = source.fill;
 
+	var type = 'dataset';
 
+
 
+	if (fill === false) {
 
+		return null;
 
+	}
 
+
 
+	if (!isFinite(fill)) {
 
+		type = 'boundary';
 
+	}
 
+
 
+	return mappers[type](source);
 
+}
 
+
 
+function isDrawable(point) {
 
+	return point && !point.skip;
 
+}
 
+
 
+function drawArea(ctx, curve0, curve1, len0, len1) {
 
+	var i;
 
+
 
+	if (!len0 || !len1) {
 
+		return;
 
+	}
 
+
 
+	// building first area curve (normal)
 
+	ctx.moveTo(curve0[0].x, curve0[0].y);
 
+	for (i = 1; i < len0; ++i) {
 
+		helpers$1.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
 
+	}
 
+
 
+	// joining the two area curves
 
+	ctx.lineTo(curve1[len1 - 1].x, curve1[len1 - 1].y);
 
+
 
+	// building opposite area curve (reverse)
 
+	for (i = len1 - 1; i > 0; --i) {
 
+		helpers$1.canvas.lineTo(ctx, curve1[i], curve1[i - 1], true);
 
+	}
 
+}
 
+
 
+function doFill(ctx, points, mapper, view, color, loop) {
 
+	var count = points.length;
 
+	var span = view.spanGaps;
 
+	var curve0 = [];
 
+	var curve1 = [];
 
+	var len0 = 0;
 
+	var len1 = 0;
 
+	var i, ilen, index, p0, p1, d0, d1;
 
+
 
+	ctx.beginPath();
 
+
 
+	for (i = 0, ilen = (count + !!loop); i < ilen; ++i) {
 
+		index = i % count;
 
+		p0 = points[index]._view;
 
+		p1 = mapper(p0, index, view);
 
+		d0 = isDrawable(p0);
 
+		d1 = isDrawable(p1);
 
+
 
+		if (d0 && d1) {
 
+			len0 = curve0.push(p0);
 
+			len1 = curve1.push(p1);
 
+		} else if (len0 && len1) {
 
+			if (!span) {
 
+				drawArea(ctx, curve0, curve1, len0, len1);
 
+				len0 = len1 = 0;
 
+				curve0 = [];
 
+				curve1 = [];
 
+			} else {
 
+				if (d0) {
 
+					curve0.push(p0);
 
+				}
 
+				if (d1) {
 
+					curve1.push(p1);
 
+				}
 
+			}
 
+		}
 
+	}
 
+
 
+	drawArea(ctx, curve0, curve1, len0, len1);
 
+
 
+	ctx.closePath();
 
+	ctx.fillStyle = color;
 
+	ctx.fill();
 
+}
 
+
 
+var plugin_filler = {
 
+	id: 'filler',
 
+
 
+	afterDatasetsUpdate: function(chart, options) {
 
+		var count = (chart.data.datasets || []).length;
 
+		var propagate = options.propagate;
 
+		var sources = [];
 
+		var meta, i, el, source;
 
+
 
+		for (i = 0; i < count; ++i) {
 
+			meta = chart.getDatasetMeta(i);
 
+			el = meta.dataset;
 
+			source = null;
 
+
 
+			if (el && el._model && el instanceof elements.Line) {
 
+				source = {
 
+					visible: chart.isDatasetVisible(i),
 
+					fill: decodeFill(el, i, count),
 
+					chart: chart,
 
+					el: el
 
+				};
 
+			}
 
+
 
+			meta.$filler = source;
 
+			sources.push(source);
 
+		}
 
+
 
+		for (i = 0; i < count; ++i) {
 
+			source = sources[i];
 
+			if (!source) {
 
+				continue;
 
+			}
 
+
 
+			source.fill = resolveTarget(sources, i, propagate);
 
+			source.boundary = computeBoundary(source);
 
+			source.mapper = createMapper(source);
 
+		}
 
+	},
 
+
 
+	beforeDatasetDraw: function(chart, args) {
 
+		var meta = args.meta.$filler;
 
+		if (!meta) {
 
+			return;
 
+		}
 
+
 
+		var ctx = chart.ctx;
 
+		var el = meta.el;
 
+		var view = el._view;
 
+		var points = el._children || [];
 
+		var mapper = meta.mapper;
 
+		var color = view.backgroundColor || core_defaults.global.defaultColor;
 
+
 
+		if (mapper && color && points.length) {
 
+			helpers$1.canvas.clipArea(ctx, chart.chartArea);
 
+			doFill(ctx, points, mapper, view, color, el._loop);
 
+			helpers$1.canvas.unclipArea(ctx);
 
+		}
 
+	}
 
+};
 
+
 
+var noop$1 = helpers$1.noop;
 
+var valueOrDefault$d = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('global', {
 
+	legend: {
 
+		display: true,
 
+		position: 'top',
 
+		fullWidth: true,
 
+		reverse: false,
 
+		weight: 1000,
 
+
 
+		// a callback that will handle
 
+		onClick: function(e, legendItem) {
 
+			var index = legendItem.datasetIndex;
 
+			var ci = this.chart;
 
+			var meta = ci.getDatasetMeta(index);
 
+
 
+			// See controller.isDatasetVisible comment
 
+			meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
 
+
 
+			// We hid a dataset ... rerender the chart
 
+			ci.update();
 
+		},
 
+
 
+		onHover: null,
 
+		onLeave: null,
 
+
 
+		labels: {
 
+			boxWidth: 40,
 
+			padding: 10,
 
+			// Generates labels shown in the legend
 
+			// Valid properties to return:
 
+			// text : text to display
 
+			// fillStyle : fill of coloured box
 
+			// strokeStyle: stroke of coloured box
 
+			// hidden : if this legend item refers to a hidden item
 
+			// lineCap : cap style for line
 
+			// lineDash
 
+			// lineDashOffset :
 
+			// lineJoin :
 
+			// lineWidth :
 
+			generateLabels: function(chart) {
 
+				var data = chart.data;
 
+				return helpers$1.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
 
+					return {
 
+						text: dataset.label,
 
+						fillStyle: (!helpers$1.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
 
+						hidden: !chart.isDatasetVisible(i),
 
+						lineCap: dataset.borderCapStyle,
 
+						lineDash: dataset.borderDash,
 
+						lineDashOffset: dataset.borderDashOffset,
 
+						lineJoin: dataset.borderJoinStyle,
 
+						lineWidth: dataset.borderWidth,
 
+						strokeStyle: dataset.borderColor,
 
+						pointStyle: dataset.pointStyle,
 
+
 
+						// Below is extra data used for toggling the datasets
 
+						datasetIndex: i
 
+					};
 
+				}, this) : [];
 
+			}
 
+		}
 
+	},
 
+
 
+	legendCallback: function(chart) {
 
+		var text = [];
 
+		text.push('<ul class="' + chart.id + '-legend">');
 
+		for (var i = 0; i < chart.data.datasets.length; i++) {
 
+			text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
 
+			if (chart.data.datasets[i].label) {
 
+				text.push(chart.data.datasets[i].label);
 
+			}
 
+			text.push('</li>');
 
+		}
 
+		text.push('</ul>');
 
+		return text.join('');
 
+	}
 
+});
 
+
 
+/**
 
+ * Helper function to get the box width based on the usePointStyle option
 
+ * @param {object} labelopts - the label options on the legend
 
+ * @param {number} fontSize - the label font size
 
+ * @return {number} width of the color box area
 
+ */
 
+function getBoxWidth(labelOpts, fontSize) {
 
+	return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
 
+		fontSize :
 
+		labelOpts.boxWidth;
 
+}
 
+
 
+/**
 
+ * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required!
 
+ */
 
+var Legend = core_element.extend({
 
+
 
+	initialize: function(config) {
 
+		helpers$1.extend(this, config);
 
+
 
+		// Contains hit boxes for each dataset (in dataset order)
 
+		this.legendHitBoxes = [];
 
+
 
+		/**
 
+ 		 * @private
 
+ 		 */
 
+		this._hoveredItem = null;
 
+
 
+		// Are we in doughnut mode which has a different data type
 
+		this.doughnutMode = false;
 
+	},
 
+
 
+	// These methods are ordered by lifecycle. Utilities then follow.
 
+	// Any function defined here is inherited by all legend types.
 
+	// Any function can be extended by the legend type
 
+
 
+	beforeUpdate: noop$1,
 
+	update: function(maxWidth, maxHeight, margins) {
 
+		var me = this;
 
+
 
+		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 
+		me.beforeUpdate();
 
+
 
+		// Absorb the master measurements
 
+		me.maxWidth = maxWidth;
 
+		me.maxHeight = maxHeight;
 
+		me.margins = margins;
 
+
 
+		// Dimensions
 
+		me.beforeSetDimensions();
 
+		me.setDimensions();
 
+		me.afterSetDimensions();
 
+		// Labels
 
+		me.beforeBuildLabels();
 
+		me.buildLabels();
 
+		me.afterBuildLabels();
 
+
 
+		// Fit
 
+		me.beforeFit();
 
+		me.fit();
 
+		me.afterFit();
 
+		//
 
+		me.afterUpdate();
 
+
 
+		return me.minSize;
 
+	},
 
+	afterUpdate: noop$1,
 
+
 
+	//
 
+
 
+	beforeSetDimensions: noop$1,
 
+	setDimensions: function() {
 
+		var me = this;
 
+		// Set the unconstrained dimension before label rotation
 
+		if (me.isHorizontal()) {
 
+			// Reset position before calculating rotation
 
+			me.width = me.maxWidth;
 
+			me.left = 0;
 
+			me.right = me.width;
 
+		} else {
 
+			me.height = me.maxHeight;
 
+
 
+			// Reset position before calculating rotation
 
+			me.top = 0;
 
+			me.bottom = me.height;
 
+		}
 
+
 
+		// Reset padding
 
+		me.paddingLeft = 0;
 
+		me.paddingTop = 0;
 
+		me.paddingRight = 0;
 
+		me.paddingBottom = 0;
 
+
 
+		// Reset minSize
 
+		me.minSize = {
 
+			width: 0,
 
+			height: 0
 
+		};
 
+	},
 
+	afterSetDimensions: noop$1,
 
+
 
+	//
 
+
 
+	beforeBuildLabels: noop$1,
 
+	buildLabels: function() {
 
+		var me = this;
 
+		var labelOpts = me.options.labels || {};
 
+		var legendItems = helpers$1.callback(labelOpts.generateLabels, [me.chart], me) || [];
 
+
 
+		if (labelOpts.filter) {
 
+			legendItems = legendItems.filter(function(item) {
 
+				return labelOpts.filter(item, me.chart.data);
 
+			});
 
+		}
 
+
 
+		if (me.options.reverse) {
 
+			legendItems.reverse();
 
+		}
 
+
 
+		me.legendItems = legendItems;
 
+	},
 
+	afterBuildLabels: noop$1,
 
+
 
+	//
 
+
 
+	beforeFit: noop$1,
 
+	fit: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var labelOpts = opts.labels;
 
+		var display = opts.display;
 
+
 
+		var ctx = me.ctx;
 
+
 
+		var labelFont = helpers$1.options._parseFont(labelOpts);
 
+		var fontSize = labelFont.size;
 
+
 
+		// Reset hit boxes
 
+		var hitboxes = me.legendHitBoxes = [];
 
+
 
+		var minSize = me.minSize;
 
+		var isHorizontal = me.isHorizontal();
 
+
 
+		if (isHorizontal) {
 
+			minSize.width = me.maxWidth; // fill all the width
 
+			minSize.height = display ? 10 : 0;
 
+		} else {
 
+			minSize.width = display ? 10 : 0;
 
+			minSize.height = me.maxHeight; // fill all the height
 
+		}
 
+
 
+		// Increase sizes here
 
+		if (display) {
 
+			ctx.font = labelFont.string;
 
+
 
+			if (isHorizontal) {
 
+				// Labels
 
+
 
+				// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
 
+				var lineWidths = me.lineWidths = [0];
 
+				var totalHeight = 0;
 
+
 
+				ctx.textAlign = 'left';
 
+				ctx.textBaseline = 'top';
 
+
 
+				helpers$1.each(me.legendItems, function(legendItem, i) {
 
+					var boxWidth = getBoxWidth(labelOpts, fontSize);
 
+					var width = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 
+
 
+					if (i === 0 || lineWidths[lineWidths.length - 1] + width + labelOpts.padding > minSize.width) {
 
+						totalHeight += fontSize + labelOpts.padding;
 
+						lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = labelOpts.padding;
 
+					}
 
+
 
+					// Store the hitbox width and height here. Final position will be updated in `draw`
 
+					hitboxes[i] = {
 
+						left: 0,
 
+						top: 0,
 
+						width: width,
 
+						height: fontSize
 
+					};
 
+
 
+					lineWidths[lineWidths.length - 1] += width + labelOpts.padding;
 
+				});
 
+
 
+				minSize.height += totalHeight;
 
+
 
+			} else {
 
+				var vPadding = labelOpts.padding;
 
+				var columnWidths = me.columnWidths = [];
 
+				var totalWidth = labelOpts.padding;
 
+				var currentColWidth = 0;
 
+				var currentColHeight = 0;
 
+				var itemHeight = fontSize + vPadding;
 
+
 
+				helpers$1.each(me.legendItems, function(legendItem, i) {
 
+					var boxWidth = getBoxWidth(labelOpts, fontSize);
 
+					var itemWidth = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 
+
 
+					// If too tall, go to new column
 
+					if (i > 0 && currentColHeight + itemHeight > minSize.height - vPadding) {
 
+						totalWidth += currentColWidth + labelOpts.padding;
 
+						columnWidths.push(currentColWidth); // previous column width
 
+
 
+						currentColWidth = 0;
 
+						currentColHeight = 0;
 
+					}
 
+
 
+					// Get max width
 
+					currentColWidth = Math.max(currentColWidth, itemWidth);
 
+					currentColHeight += itemHeight;
 
+
 
+					// Store the hitbox width and height here. Final position will be updated in `draw`
 
+					hitboxes[i] = {
 
+						left: 0,
 
+						top: 0,
 
+						width: itemWidth,
 
+						height: fontSize
 
+					};
 
+				});
 
+
 
+				totalWidth += currentColWidth;
 
+				columnWidths.push(currentColWidth);
 
+				minSize.width += totalWidth;
 
+			}
 
+		}
 
+
 
+		me.width = minSize.width;
 
+		me.height = minSize.height;
 
+	},
 
+	afterFit: noop$1,
 
+
 
+	// Shared Methods
 
+	isHorizontal: function() {
 
+		return this.options.position === 'top' || this.options.position === 'bottom';
 
+	},
 
+
 
+	// Actually draw the legend on the canvas
 
+	draw: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var labelOpts = opts.labels;
 
+		var globalDefaults = core_defaults.global;
 
+		var defaultColor = globalDefaults.defaultColor;
 
+		var lineDefault = globalDefaults.elements.line;
 
+		var legendWidth = me.width;
 
+		var lineWidths = me.lineWidths;
 
+
 
+		if (opts.display) {
 
+			var ctx = me.ctx;
 
+			var fontColor = valueOrDefault$d(labelOpts.fontColor, globalDefaults.defaultFontColor);
 
+			var labelFont = helpers$1.options._parseFont(labelOpts);
 
+			var fontSize = labelFont.size;
 
+			var cursor;
 
+
 
+			// Canvas setup
 
+			ctx.textAlign = 'left';
 
+			ctx.textBaseline = 'middle';
 
+			ctx.lineWidth = 0.5;
 
+			ctx.strokeStyle = fontColor; // for strikethrough effect
 
+			ctx.fillStyle = fontColor; // render in correct colour
 
+			ctx.font = labelFont.string;
 
+
 
+			var boxWidth = getBoxWidth(labelOpts, fontSize);
 
+			var hitboxes = me.legendHitBoxes;
 
+
 
+			// current position
 
+			var drawLegendBox = function(x, y, legendItem) {
 
+				if (isNaN(boxWidth) || boxWidth <= 0) {
 
+					return;
 
+				}
 
+
 
+				// Set the ctx for the box
 
+				ctx.save();
 
+
 
+				var lineWidth = valueOrDefault$d(legendItem.lineWidth, lineDefault.borderWidth);
 
+				ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
 
+				ctx.lineCap = valueOrDefault$d(legendItem.lineCap, lineDefault.borderCapStyle);
 
+				ctx.lineDashOffset = valueOrDefault$d(legendItem.lineDashOffset, lineDefault.borderDashOffset);
 
+				ctx.lineJoin = valueOrDefault$d(legendItem.lineJoin, lineDefault.borderJoinStyle);
 
+				ctx.lineWidth = lineWidth;
 
+				ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);
 
+
 
+				if (ctx.setLineDash) {
 
+					// IE 9 and 10 do not support line dash
 
+					ctx.setLineDash(valueOrDefault$d(legendItem.lineDash, lineDefault.borderDash));
 
+				}
 
+
 
+				if (opts.labels && opts.labels.usePointStyle) {
 
+					// Recalculate x and y for drawPoint() because its expecting
 
+					// x and y to be center of figure (instead of top left)
 
+					var radius = boxWidth * Math.SQRT2 / 2;
 
+					var centerX = x + boxWidth / 2;
 
+					var centerY = y + fontSize / 2;
 
+
 
+					// Draw pointStyle as legend symbol
 
+					helpers$1.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
 
+				} else {
 
+					// Draw box as legend symbol
 
+					if (lineWidth !== 0) {
 
+						ctx.strokeRect(x, y, boxWidth, fontSize);
 
+					}
 
+					ctx.fillRect(x, y, boxWidth, fontSize);
 
+				}
 
+
 
+				ctx.restore();
 
+			};
 
+			var fillText = function(x, y, legendItem, textWidth) {
 
+				var halfFontSize = fontSize / 2;
 
+				var xLeft = boxWidth + halfFontSize + x;
 
+				var yMiddle = y + halfFontSize;
 
+
 
+				ctx.fillText(legendItem.text, xLeft, yMiddle);
 
+
 
+				if (legendItem.hidden) {
 
+					// Strikethrough the text if hidden
 
+					ctx.beginPath();
 
+					ctx.lineWidth = 2;
 
+					ctx.moveTo(xLeft, yMiddle);
 
+					ctx.lineTo(xLeft + textWidth, yMiddle);
 
+					ctx.stroke();
 
+				}
 
+			};
 
+
 
+			// Horizontal
 
+			var isHorizontal = me.isHorizontal();
 
+			if (isHorizontal) {
 
+				cursor = {
 
+					x: me.left + ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding,
 
+					y: me.top + labelOpts.padding,
 
+					line: 0
 
+				};
 
+			} else {
 
+				cursor = {
 
+					x: me.left + labelOpts.padding,
 
+					y: me.top + labelOpts.padding,
 
+					line: 0
 
+				};
 
+			}
 
+
 
+			var itemHeight = fontSize + labelOpts.padding;
 
+			helpers$1.each(me.legendItems, function(legendItem, i) {
 
+				var textWidth = ctx.measureText(legendItem.text).width;
 
+				var width = boxWidth + (fontSize / 2) + textWidth;
 
+				var x = cursor.x;
 
+				var y = cursor.y;
 
+
 
+				// Use (me.left + me.minSize.width) and (me.top + me.minSize.height)
 
+				// instead of me.right and me.bottom because me.width and me.height
 
+				// may have been changed since me.minSize was calculated
 
+				if (isHorizontal) {
 
+					if (i > 0 && x + width + labelOpts.padding > me.left + me.minSize.width) {
 
+						y = cursor.y += itemHeight;
 
+						cursor.line++;
 
+						x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2) + labelOpts.padding;
 
+					}
 
+				} else if (i > 0 && y + itemHeight > me.top + me.minSize.height) {
 
+					x = cursor.x = x + me.columnWidths[cursor.line] + labelOpts.padding;
 
+					y = cursor.y = me.top + labelOpts.padding;
 
+					cursor.line++;
 
+				}
 
+
 
+				drawLegendBox(x, y, legendItem);
 
+
 
+				hitboxes[i].left = x;
 
+				hitboxes[i].top = y;
 
+
 
+				// Fill the actual label
 
+				fillText(x, y, legendItem, textWidth);
 
+
 
+				if (isHorizontal) {
 
+					cursor.x += width + labelOpts.padding;
 
+				} else {
 
+					cursor.y += itemHeight;
 
+				}
 
+
 
+			});
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getLegendItemAt: function(x, y) {
 
+		var me = this;
 
+		var i, hitBox, lh;
 
+
 
+		if (x >= me.left && x <= me.right && y >= me.top && y <= me.bottom) {
 
+			// See if we are touching one of the dataset boxes
 
+			lh = me.legendHitBoxes;
 
+			for (i = 0; i < lh.length; ++i) {
 
+				hitBox = lh[i];
 
+
 
+				if (x >= hitBox.left && x <= hitBox.left + hitBox.width && y >= hitBox.top && y <= hitBox.top + hitBox.height) {
 
+					// Touching an element
 
+					return me.legendItems[i];
 
+				}
 
+			}
 
+		}
 
+
 
+		return null;
 
+	},
 
+
 
+	/**
 
+	 * Handle an event
 
+	 * @private
 
+	 * @param {IEvent} event - The event to handle
 
+	 */
 
+	handleEvent: function(e) {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var type = e.type === 'mouseup' ? 'click' : e.type;
 
+		var hoveredItem;
 
+
 
+		if (type === 'mousemove') {
 
+			if (!opts.onHover && !opts.onLeave) {
 
+				return;
 
+			}
 
+		} else if (type === 'click') {
 
+			if (!opts.onClick) {
 
+				return;
 
+			}
 
+		} else {
 
+			return;
 
+		}
 
+
 
+		// Chart event already has relative position in it
 
+		hoveredItem = me._getLegendItemAt(e.x, e.y);
 
+
 
+		if (type === 'click') {
 
+			if (hoveredItem && opts.onClick) {
 
+				// use e.native for backwards compatibility
 
+				opts.onClick.call(me, e.native, hoveredItem);
 
+			}
 
+		} else {
 
+			if (opts.onLeave && hoveredItem !== me._hoveredItem) {
 
+				if (me._hoveredItem) {
 
+					opts.onLeave.call(me, e.native, me._hoveredItem);
 
+				}
 
+				me._hoveredItem = hoveredItem;
 
+			}
 
+
 
+			if (opts.onHover && hoveredItem) {
 
+				// use e.native for backwards compatibility
 
+				opts.onHover.call(me, e.native, hoveredItem);
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+function createNewLegendAndAttach(chart, legendOpts) {
 
+	var legend = new Legend({
 
+		ctx: chart.ctx,
 
+		options: legendOpts,
 
+		chart: chart
 
+	});
 
+
 
+	core_layouts.configure(chart, legend, legendOpts);
 
+	core_layouts.addBox(chart, legend);
 
+	chart.legend = legend;
 
+}
 
+
 
+var plugin_legend = {
 
+	id: 'legend',
 
+
 
+	/**
 
+	 * Backward compatibility: since 2.1.5, the legend is registered as a plugin, making
 
+	 * Chart.Legend obsolete. To avoid a breaking change, we export the Legend as part of
 
+	 * the plugin, which one will be re-exposed in the chart.js file.
 
+	 * https://github.com/chartjs/Chart.js/pull/2640
 
+	 * @private
 
+	 */
 
+	_element: Legend,
 
+
 
+	beforeInit: function(chart) {
 
+		var legendOpts = chart.options.legend;
 
+
 
+		if (legendOpts) {
 
+			createNewLegendAndAttach(chart, legendOpts);
 
+		}
 
+	},
 
+
 
+	beforeUpdate: function(chart) {
 
+		var legendOpts = chart.options.legend;
 
+		var legend = chart.legend;
 
+
 
+		if (legendOpts) {
 
+			helpers$1.mergeIf(legendOpts, core_defaults.global.legend);
 
+
 
+			if (legend) {
 
+				core_layouts.configure(chart, legend, legendOpts);
 
+				legend.options = legendOpts;
 
+			} else {
 
+				createNewLegendAndAttach(chart, legendOpts);
 
+			}
 
+		} else if (legend) {
 
+			core_layouts.removeBox(chart, legend);
 
+			delete chart.legend;
 
+		}
 
+	},
 
+
 
+	afterEvent: function(chart, e) {
 
+		var legend = chart.legend;
 
+		if (legend) {
 
+			legend.handleEvent(e);
 
+		}
 
+	}
 
+};
 
+
 
+var noop$2 = helpers$1.noop;
 
+
 
+core_defaults._set('global', {
 
+	title: {
 
+		display: false,
 
+		fontStyle: 'bold',
 
+		fullWidth: true,
 
+		padding: 10,
 
+		position: 'top',
 
+		text: '',
 
+		weight: 2000         // by default greater than legend (1000) to be above
 
+	}
 
+});
 
+
 
+/**
 
+ * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required!
 
+ */
 
+var Title = core_element.extend({
 
+	initialize: function(config) {
 
+		var me = this;
 
+		helpers$1.extend(me, config);
 
+
 
+		// Contains hit boxes for each dataset (in dataset order)
 
+		me.legendHitBoxes = [];
 
+	},
 
+
 
+	// These methods are ordered by lifecycle. Utilities then follow.
 
+
 
+	beforeUpdate: noop$2,
 
+	update: function(maxWidth, maxHeight, margins) {
 
+		var me = this;
 
+
 
+		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 
+		me.beforeUpdate();
 
+
 
+		// Absorb the master measurements
 
+		me.maxWidth = maxWidth;
 
+		me.maxHeight = maxHeight;
 
+		me.margins = margins;
 
+
 
+		// Dimensions
 
+		me.beforeSetDimensions();
 
+		me.setDimensions();
 
+		me.afterSetDimensions();
 
+		// Labels
 
+		me.beforeBuildLabels();
 
+		me.buildLabels();
 
+		me.afterBuildLabels();
 
+
 
+		// Fit
 
+		me.beforeFit();
 
+		me.fit();
 
+		me.afterFit();
 
+		//
 
+		me.afterUpdate();
 
+
 
+		return me.minSize;
 
+
 
+	},
 
+	afterUpdate: noop$2,
 
+
 
+	//
 
+
 
+	beforeSetDimensions: noop$2,
 
+	setDimensions: function() {
 
+		var me = this;
 
+		// Set the unconstrained dimension before label rotation
 
+		if (me.isHorizontal()) {
 
+			// Reset position before calculating rotation
 
+			me.width = me.maxWidth;
 
+			me.left = 0;
 
+			me.right = me.width;
 
+		} else {
 
+			me.height = me.maxHeight;
 
+
 
+			// Reset position before calculating rotation
 
+			me.top = 0;
 
+			me.bottom = me.height;
 
+		}
 
+
 
+		// Reset padding
 
+		me.paddingLeft = 0;
 
+		me.paddingTop = 0;
 
+		me.paddingRight = 0;
 
+		me.paddingBottom = 0;
 
+
 
+		// Reset minSize
 
+		me.minSize = {
 
+			width: 0,
 
+			height: 0
 
+		};
 
+	},
 
+	afterSetDimensions: noop$2,
 
+
 
+	//
 
+
 
+	beforeBuildLabels: noop$2,
 
+	buildLabels: noop$2,
 
+	afterBuildLabels: noop$2,
 
+
 
+	//
 
+
 
+	beforeFit: noop$2,
 
+	fit: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var display = opts.display;
 
+		var minSize = me.minSize;
 
+		var lineCount = helpers$1.isArray(opts.text) ? opts.text.length : 1;
 
+		var fontOpts = helpers$1.options._parseFont(opts);
 
+		var textSize = display ? (lineCount * fontOpts.lineHeight) + (opts.padding * 2) : 0;
 
+
 
+		if (me.isHorizontal()) {
 
+			minSize.width = me.maxWidth; // fill all the width
 
+			minSize.height = textSize;
 
+		} else {
 
+			minSize.width = textSize;
 
+			minSize.height = me.maxHeight; // fill all the height
 
+		}
 
+
 
+		me.width = minSize.width;
 
+		me.height = minSize.height;
 
+
 
+	},
 
+	afterFit: noop$2,
 
+
 
+	// Shared Methods
 
+	isHorizontal: function() {
 
+		var pos = this.options.position;
 
+		return pos === 'top' || pos === 'bottom';
 
+	},
 
+
 
+	// Actually draw the title block on the canvas
 
+	draw: function() {
 
+		var me = this;
 
+		var ctx = me.ctx;
 
+		var opts = me.options;
 
+
 
+		if (opts.display) {
 
+			var fontOpts = helpers$1.options._parseFont(opts);
 
+			var lineHeight = fontOpts.lineHeight;
 
+			var offset = lineHeight / 2 + opts.padding;
 
+			var rotation = 0;
 
+			var top = me.top;
 
+			var left = me.left;
 
+			var bottom = me.bottom;
 
+			var right = me.right;
 
+			var maxWidth, titleX, titleY;
 
+
 
+			ctx.fillStyle = helpers$1.valueOrDefault(opts.fontColor, core_defaults.global.defaultFontColor); // render in correct colour
 
+			ctx.font = fontOpts.string;
 
+
 
+			// Horizontal
 
+			if (me.isHorizontal()) {
 
+				titleX = left + ((right - left) / 2); // midpoint of the width
 
+				titleY = top + offset;
 
+				maxWidth = right - left;
 
+			} else {
 
+				titleX = opts.position === 'left' ? left + offset : right - offset;
 
+				titleY = top + ((bottom - top) / 2);
 
+				maxWidth = bottom - top;
 
+				rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5);
 
+			}
 
+
 
+			ctx.save();
 
+			ctx.translate(titleX, titleY);
 
+			ctx.rotate(rotation);
 
+			ctx.textAlign = 'center';
 
+			ctx.textBaseline = 'middle';
 
+
 
+			var text = opts.text;
 
+			if (helpers$1.isArray(text)) {
 
+				var y = 0;
 
+				for (var i = 0; i < text.length; ++i) {
 
+					ctx.fillText(text[i], 0, y, maxWidth);
 
+					y += lineHeight;
 
+				}
 
+			} else {
 
+				ctx.fillText(text, 0, 0, maxWidth);
 
+			}
 
+
 
+			ctx.restore();
 
+		}
 
+	}
 
+});
 
+
 
+function createNewTitleBlockAndAttach(chart, titleOpts) {
 
+	var title = new Title({
 
+		ctx: chart.ctx,
 
+		options: titleOpts,
 
+		chart: chart
 
+	});
 
+
 
+	core_layouts.configure(chart, title, titleOpts);
 
+	core_layouts.addBox(chart, title);
 
+	chart.titleBlock = title;
 
+}
 
+
 
+var plugin_title = {
 
+	id: 'title',
 
+
 
+	/**
 
+	 * Backward compatibility: since 2.1.5, the title is registered as a plugin, making
 
+	 * Chart.Title obsolete. To avoid a breaking change, we export the Title as part of
 
+	 * the plugin, which one will be re-exposed in the chart.js file.
 
+	 * https://github.com/chartjs/Chart.js/pull/2640
 
+	 * @private
 
+	 */
 
+	_element: Title,
 
+
 
+	beforeInit: function(chart) {
 
+		var titleOpts = chart.options.title;
 
+
 
+		if (titleOpts) {
 
+			createNewTitleBlockAndAttach(chart, titleOpts);
 
+		}
 
+	},
 
+
 
+	beforeUpdate: function(chart) {
 
+		var titleOpts = chart.options.title;
 
+		var titleBlock = chart.titleBlock;
 
+
 
+		if (titleOpts) {
 
+			helpers$1.mergeIf(titleOpts, core_defaults.global.title);
 
+
 
+			if (titleBlock) {
 
+				core_layouts.configure(chart, titleBlock, titleOpts);
 
+				titleBlock.options = titleOpts;
 
+			} else {
 
+				createNewTitleBlockAndAttach(chart, titleOpts);
 
+			}
 
+		} else if (titleBlock) {
 
+			core_layouts.removeBox(chart, titleBlock);
 
+			delete chart.titleBlock;
 
+		}
 
+	}
 
+};
 
+
 
+var plugins = {};
 
+var filler = plugin_filler;
 
+var legend = plugin_legend;
 
+var title = plugin_title;
 
+plugins.filler = filler;
 
+plugins.legend = legend;
 
+plugins.title = title;
 
+
 
+/**
 
+ * @namespace Chart
 
+ */
 
+
 
+
 
+core_controller.helpers = helpers$1;
 
+
 
+// @todo dispatch these helpers into appropriated helpers/helpers.* file and write unit tests!
 
+core_helpers(core_controller);
 
+
 
+core_controller._adapters = core_adapters;
 
+core_controller.Animation = core_animation;
 
+core_controller.animationService = core_animations;
 
+core_controller.controllers = controllers;
 
+core_controller.DatasetController = core_datasetController;
 
+core_controller.defaults = core_defaults;
 
+core_controller.Element = core_element;
 
+core_controller.elements = elements;
 
+core_controller.Interaction = core_interaction;
 
+core_controller.layouts = core_layouts;
 
+core_controller.platform = platform;
 
+core_controller.plugins = core_plugins;
 
+core_controller.Scale = core_scale;
 
+core_controller.scaleService = core_scaleService;
 
+core_controller.Ticks = core_ticks;
 
+core_controller.Tooltip = core_tooltip;
 
+
 
+// Register built-in scales
 
+
 
+core_controller.helpers.each(scales, function(scale, type) {
 
+	core_controller.scaleService.registerScaleType(type, scale, scale._defaults);
 
+});
 
+
 
+// Load to register built-in adapters (as side effects)
 
+
 
+
 
+// Loading built-in plugins
 
+
 
+for (var k in plugins) {
 
+	if (plugins.hasOwnProperty(k)) {
 
+		core_controller.plugins.register(plugins[k]);
 
+	}
 
+}
 
+
 
+core_controller.platform.initialize();
 
+
 
+var src = core_controller;
 
+if (typeof window !== 'undefined') {
 
+	window.Chart = core_controller;
 
+}
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore
 
+ * @namespace Chart.Chart
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.Chart = core_controller;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore
 
+ * @namespace Chart.Legend
 
+ * @deprecated since version 2.1.5
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.Legend = plugins.legend._element;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore
 
+ * @namespace Chart.Title
 
+ * @deprecated since version 2.1.5
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.Title = plugins.title._element;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.plugins instead
 
+ * @namespace Chart.pluginService
 
+ * @deprecated since version 2.1.5
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.pluginService = core_controller.plugins;
 
+
 
+/**
 
+ * Provided for backward compatibility, inheriting from Chart.PlugingBase has no
 
+ * effect, instead simply create/register plugins via plain JavaScript objects.
 
+ * @interface Chart.PluginBase
 
+ * @deprecated since version 2.5.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.PluginBase = core_controller.Element.extend({});
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.canvas instead.
 
+ * @namespace Chart.canvasHelpers
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.canvasHelpers = core_controller.helpers.canvas;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.layouts instead.
 
+ * @namespace Chart.layoutService
 
+ * @deprecated since version 2.7.3
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.layoutService = core_controller.layouts;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart.LinearScaleBase
 
+ * @deprecated since version 2.8
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.LinearScaleBase = scale_linearbase;
 
+
 
+/**
 
+ * Provided for backward compatibility, instead we should create a new Chart
 
+ * by setting the type in the config (`new Chart(id, {type: '{chart-type}'}`).
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ */
 
+core_controller.helpers.each(
 
+	[
 
+		'Bar',
 
+		'Bubble',
 
+		'Doughnut',
 
+		'Line',
 
+		'PolarArea',
 
+		'Radar',
 
+		'Scatter'
 
+	],
 
+	function(klass) {
 
+		core_controller[klass] = function(ctx, cfg) {
 
+			return new core_controller(ctx, core_controller.helpers.merge(cfg || {}, {
 
+				type: klass.charAt(0).toLowerCase() + klass.slice(1)
 
+			}));
 
+		};
 
+	}
 
+);
 
+
 
+return src;
 
+
 
+})));

File diff suppressed because it is too large
+ 6 - 0
static/vendors/chart.js/Chart.bundle.min.js


+ 14680 - 0
static/vendors/chart.js/Chart.js
View File 

@@ -0,0 +1,14680 @@
 
+/*!
 
+ * Chart.js v2.8.0
 
+ * https://www.chartjs.org
 
+ * (c) 2019 Chart.js Contributors
 
+ * Released under the MIT License
 
+ */
 
+(function (global, factory) {
 
+typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(function() { try { return require('moment'); } catch(e) { } }()) :
 
+typeof define === 'function' && define.amd ? define(['require'], function(require) { return factory(function() { try { return require('moment'); } catch(e) { } }()); }) :
 
+(global.Chart = factory(global.moment));
 
+}(this, (function (moment) { 'use strict';
 
+
 
+moment = moment && moment.hasOwnProperty('default') ? moment['default'] : moment;
 
+
 
+/* MIT license */
 
+
 
+var conversions = {
 
+  rgb2hsl: rgb2hsl,
 
+  rgb2hsv: rgb2hsv,
 
+  rgb2hwb: rgb2hwb,
 
+  rgb2cmyk: rgb2cmyk,
 
+  rgb2keyword: rgb2keyword,
 
+  rgb2xyz: rgb2xyz,
 
+  rgb2lab: rgb2lab,
 
+  rgb2lch: rgb2lch,
 
+
 
+  hsl2rgb: hsl2rgb,
 
+  hsl2hsv: hsl2hsv,
 
+  hsl2hwb: hsl2hwb,
 
+  hsl2cmyk: hsl2cmyk,
 
+  hsl2keyword: hsl2keyword,
 
+
 
+  hsv2rgb: hsv2rgb,
 
+  hsv2hsl: hsv2hsl,
 
+  hsv2hwb: hsv2hwb,
 
+  hsv2cmyk: hsv2cmyk,
 
+  hsv2keyword: hsv2keyword,
 
+
 
+  hwb2rgb: hwb2rgb,
 
+  hwb2hsl: hwb2hsl,
 
+  hwb2hsv: hwb2hsv,
 
+  hwb2cmyk: hwb2cmyk,
 
+  hwb2keyword: hwb2keyword,
 
+
 
+  cmyk2rgb: cmyk2rgb,
 
+  cmyk2hsl: cmyk2hsl,
 
+  cmyk2hsv: cmyk2hsv,
 
+  cmyk2hwb: cmyk2hwb,
 
+  cmyk2keyword: cmyk2keyword,
 
+
 
+  keyword2rgb: keyword2rgb,
 
+  keyword2hsl: keyword2hsl,
 
+  keyword2hsv: keyword2hsv,
 
+  keyword2hwb: keyword2hwb,
 
+  keyword2cmyk: keyword2cmyk,
 
+  keyword2lab: keyword2lab,
 
+  keyword2xyz: keyword2xyz,
 
+
 
+  xyz2rgb: xyz2rgb,
 
+  xyz2lab: xyz2lab,
 
+  xyz2lch: xyz2lch,
 
+
 
+  lab2xyz: lab2xyz,
 
+  lab2rgb: lab2rgb,
 
+  lab2lch: lab2lch,
 
+
 
+  lch2lab: lch2lab,
 
+  lch2xyz: lch2xyz,
 
+  lch2rgb: lch2rgb
 
+};
 
+
 
+
 
+function rgb2hsl(rgb) {
 
+  var r = rgb[0]/255,
 
+      g = rgb[1]/255,
 
+      b = rgb[2]/255,
 
+      min = Math.min(r, g, b),
 
+      max = Math.max(r, g, b),
 
+      delta = max - min,
 
+      h, s, l;
 
+
 
+  if (max == min)
 
+    h = 0;
 
+  else if (r == max)
 
+    h = (g - b) / delta;
 
+  else if (g == max)
 
+    h = 2 + (b - r) / delta;
 
+  else if (b == max)
 
+    h = 4 + (r - g)/ delta;
 
+
 
+  h = Math.min(h * 60, 360);
 
+
 
+  if (h < 0)
 
+    h += 360;
 
+
 
+  l = (min + max) / 2;
 
+
 
+  if (max == min)
 
+    s = 0;
 
+  else if (l <= 0.5)
 
+    s = delta / (max + min);
 
+  else
 
+    s = delta / (2 - max - min);
 
+
 
+  return [h, s * 100, l * 100];
 
+}
 
+
 
+function rgb2hsv(rgb) {
 
+  var r = rgb[0],
 
+      g = rgb[1],
 
+      b = rgb[2],
 
+      min = Math.min(r, g, b),
 
+      max = Math.max(r, g, b),
 
+      delta = max - min,
 
+      h, s, v;
 
+
 
+  if (max == 0)
 
+    s = 0;
 
+  else
 
+    s = (delta/max * 1000)/10;
 
+
 
+  if (max == min)
 
+    h = 0;
 
+  else if (r == max)
 
+    h = (g - b) / delta;
 
+  else if (g == max)
 
+    h = 2 + (b - r) / delta;
 
+  else if (b == max)
 
+    h = 4 + (r - g) / delta;
 
+
 
+  h = Math.min(h * 60, 360);
 
+
 
+  if (h < 0)
 
+    h += 360;
 
+
 
+  v = ((max / 255) * 1000) / 10;
 
+
 
+  return [h, s, v];
 
+}
 
+
 
+function rgb2hwb(rgb) {
 
+  var r = rgb[0],
 
+      g = rgb[1],
 
+      b = rgb[2],
 
+      h = rgb2hsl(rgb)[0],
 
+      w = 1/255 * Math.min(r, Math.min(g, b)),
 
+      b = 1 - 1/255 * Math.max(r, Math.max(g, b));
 
+
 
+  return [h, w * 100, b * 100];
 
+}
 
+
 
+function rgb2cmyk(rgb) {
 
+  var r = rgb[0] / 255,
 
+      g = rgb[1] / 255,
 
+      b = rgb[2] / 255,
 
+      c, m, y, k;
 
+
 
+  k = Math.min(1 - r, 1 - g, 1 - b);
 
+  c = (1 - r - k) / (1 - k) || 0;
 
+  m = (1 - g - k) / (1 - k) || 0;
 
+  y = (1 - b - k) / (1 - k) || 0;
 
+  return [c * 100, m * 100, y * 100, k * 100];
 
+}
 
+
 
+function rgb2keyword(rgb) {
 
+  return reverseKeywords[JSON.stringify(rgb)];
 
+}
 
+
 
+function rgb2xyz(rgb) {
 
+  var r = rgb[0] / 255,
 
+      g = rgb[1] / 255,
 
+      b = rgb[2] / 255;
 
+
 
+  // assume sRGB
 
+  r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
 
+  g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
 
+  b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
 
+
 
+  var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
 
+  var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
 
+  var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
 
+
 
+  return [x * 100, y *100, z * 100];
 
+}
 
+
 
+function rgb2lab(rgb) {
 
+  var xyz = rgb2xyz(rgb),
 
+        x = xyz[0],
 
+        y = xyz[1],
 
+        z = xyz[2],
 
+        l, a, b;
 
+
 
+  x /= 95.047;
 
+  y /= 100;
 
+  z /= 108.883;
 
+
 
+  x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
 
+  y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
 
+  z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
 
+
 
+  l = (116 * y) - 16;
 
+  a = 500 * (x - y);
 
+  b = 200 * (y - z);
 
+
 
+  return [l, a, b];
 
+}
 
+
 
+function rgb2lch(args) {
 
+  return lab2lch(rgb2lab(args));
 
+}
 
+
 
+function hsl2rgb(hsl) {
 
+  var h = hsl[0] / 360,
 
+      s = hsl[1] / 100,
 
+      l = hsl[2] / 100,
 
+      t1, t2, t3, rgb, val;
 
+
 
+  if (s == 0) {
 
+    val = l * 255;
 
+    return [val, val, val];
 
+  }
 
+
 
+  if (l < 0.5)
 
+    t2 = l * (1 + s);
 
+  else
 
+    t2 = l + s - l * s;
 
+  t1 = 2 * l - t2;
 
+
 
+  rgb = [0, 0, 0];
 
+  for (var i = 0; i < 3; i++) {
 
+    t3 = h + 1 / 3 * - (i - 1);
 
+    t3 < 0 && t3++;
 
+    t3 > 1 && t3--;
 
+
 
+    if (6 * t3 < 1)
 
+      val = t1 + (t2 - t1) * 6 * t3;
 
+    else if (2 * t3 < 1)
 
+      val = t2;
 
+    else if (3 * t3 < 2)
 
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
 
+    else
 
+      val = t1;
 
+
 
+    rgb[i] = val * 255;
 
+  }
 
+
 
+  return rgb;
 
+}
 
+
 
+function hsl2hsv(hsl) {
 
+  var h = hsl[0],
 
+      s = hsl[1] / 100,
 
+      l = hsl[2] / 100,
 
+      sv, v;
 
+
 
+  if(l === 0) {
 
+      // no need to do calc on black
 
+      // also avoids divide by 0 error
 
+      return [0, 0, 0];
 
+  }
 
+
 
+  l *= 2;
 
+  s *= (l <= 1) ? l : 2 - l;
 
+  v = (l + s) / 2;
 
+  sv = (2 * s) / (l + s);
 
+  return [h, sv * 100, v * 100];
 
+}
 
+
 
+function hsl2hwb(args) {
 
+  return rgb2hwb(hsl2rgb(args));
 
+}
 
+
 
+function hsl2cmyk(args) {
 
+  return rgb2cmyk(hsl2rgb(args));
 
+}
 
+
 
+function hsl2keyword(args) {
 
+  return rgb2keyword(hsl2rgb(args));
 
+}
 
+
 
+
 
+function hsv2rgb(hsv) {
 
+  var h = hsv[0] / 60,
 
+      s = hsv[1] / 100,
 
+      v = hsv[2] / 100,
 
+      hi = Math.floor(h) % 6;
 
+
 
+  var f = h - Math.floor(h),
 
+      p = 255 * v * (1 - s),
 
+      q = 255 * v * (1 - (s * f)),
 
+      t = 255 * v * (1 - (s * (1 - f))),
 
+      v = 255 * v;
 
+
 
+  switch(hi) {
 
+    case 0:
 
+      return [v, t, p];
 
+    case 1:
 
+      return [q, v, p];
 
+    case 2:
 
+      return [p, v, t];
 
+    case 3:
 
+      return [p, q, v];
 
+    case 4:
 
+      return [t, p, v];
 
+    case 5:
 
+      return [v, p, q];
 
+  }
 
+}
 
+
 
+function hsv2hsl(hsv) {
 
+  var h = hsv[0],
 
+      s = hsv[1] / 100,
 
+      v = hsv[2] / 100,
 
+      sl, l;
 
+
 
+  l = (2 - s) * v;
 
+  sl = s * v;
 
+  sl /= (l <= 1) ? l : 2 - l;
 
+  sl = sl || 0;
 
+  l /= 2;
 
+  return [h, sl * 100, l * 100];
 
+}
 
+
 
+function hsv2hwb(args) {
 
+  return rgb2hwb(hsv2rgb(args))
 
+}
 
+
 
+function hsv2cmyk(args) {
 
+  return rgb2cmyk(hsv2rgb(args));
 
+}
 
+
 
+function hsv2keyword(args) {
 
+  return rgb2keyword(hsv2rgb(args));
 
+}
 
+
 
+// http://dev.w3.org/csswg/css-color/#hwb-to-rgb
 
+function hwb2rgb(hwb) {
 
+  var h = hwb[0] / 360,
 
+      wh = hwb[1] / 100,
 
+      bl = hwb[2] / 100,
 
+      ratio = wh + bl,
 
+      i, v, f, n;
 
+
 
+  // wh + bl cant be > 1
 
+  if (ratio > 1) {
 
+    wh /= ratio;
 
+    bl /= ratio;
 
+  }
 
+
 
+  i = Math.floor(6 * h);
 
+  v = 1 - bl;
 
+  f = 6 * h - i;
 
+  if ((i & 0x01) != 0) {
 
+    f = 1 - f;
 
+  }
 
+  n = wh + f * (v - wh);  // linear interpolation
 
+
 
+  switch (i) {
 
+    default:
 
+    case 6:
 
+    case 0: r = v; g = n; b = wh; break;
 
+    case 1: r = n; g = v; b = wh; break;
 
+    case 2: r = wh; g = v; b = n; break;
 
+    case 3: r = wh; g = n; b = v; break;
 
+    case 4: r = n; g = wh; b = v; break;
 
+    case 5: r = v; g = wh; b = n; break;
 
+  }
 
+
 
+  return [r * 255, g * 255, b * 255];
 
+}
 
+
 
+function hwb2hsl(args) {
 
+  return rgb2hsl(hwb2rgb(args));
 
+}
 
+
 
+function hwb2hsv(args) {
 
+  return rgb2hsv(hwb2rgb(args));
 
+}
 
+
 
+function hwb2cmyk(args) {
 
+  return rgb2cmyk(hwb2rgb(args));
 
+}
 
+
 
+function hwb2keyword(args) {
 
+  return rgb2keyword(hwb2rgb(args));
 
+}
 
+
 
+function cmyk2rgb(cmyk) {
 
+  var c = cmyk[0] / 100,
 
+      m = cmyk[1] / 100,
 
+      y = cmyk[2] / 100,
 
+      k = cmyk[3] / 100,
 
+      r, g, b;
 
+
 
+  r = 1 - Math.min(1, c * (1 - k) + k);
 
+  g = 1 - Math.min(1, m * (1 - k) + k);
 
+  b = 1 - Math.min(1, y * (1 - k) + k);
 
+  return [r * 255, g * 255, b * 255];
 
+}
 
+
 
+function cmyk2hsl(args) {
 
+  return rgb2hsl(cmyk2rgb(args));
 
+}
 
+
 
+function cmyk2hsv(args) {
 
+  return rgb2hsv(cmyk2rgb(args));
 
+}
 
+
 
+function cmyk2hwb(args) {
 
+  return rgb2hwb(cmyk2rgb(args));
 
+}
 
+
 
+function cmyk2keyword(args) {
 
+  return rgb2keyword(cmyk2rgb(args));
 
+}
 
+
 
+
 
+function xyz2rgb(xyz) {
 
+  var x = xyz[0] / 100,
 
+      y = xyz[1] / 100,
 
+      z = xyz[2] / 100,
 
+      r, g, b;
 
+
 
+  r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);
 
+  g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);
 
+  b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);
 
+
 
+  // assume sRGB
 
+  r = r > 0.0031308 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
 
+    : r = (r * 12.92);
 
+
 
+  g = g > 0.0031308 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
 
+    : g = (g * 12.92);
 
+
 
+  b = b > 0.0031308 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
 
+    : b = (b * 12.92);
 
+
 
+  r = Math.min(Math.max(0, r), 1);
 
+  g = Math.min(Math.max(0, g), 1);
 
+  b = Math.min(Math.max(0, b), 1);
 
+
 
+  return [r * 255, g * 255, b * 255];
 
+}
 
+
 
+function xyz2lab(xyz) {
 
+  var x = xyz[0],
 
+      y = xyz[1],
 
+      z = xyz[2],
 
+      l, a, b;
 
+
 
+  x /= 95.047;
 
+  y /= 100;
 
+  z /= 108.883;
 
+
 
+  x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
 
+  y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
 
+  z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
 
+
 
+  l = (116 * y) - 16;
 
+  a = 500 * (x - y);
 
+  b = 200 * (y - z);
 
+
 
+  return [l, a, b];
 
+}
 
+
 
+function xyz2lch(args) {
 
+  return lab2lch(xyz2lab(args));
 
+}
 
+
 
+function lab2xyz(lab) {
 
+  var l = lab[0],
 
+      a = lab[1],
 
+      b = lab[2],
 
+      x, y, z, y2;
 
+
 
+  if (l <= 8) {
 
+    y = (l * 100) / 903.3;
 
+    y2 = (7.787 * (y / 100)) + (16 / 116);
 
+  } else {
 
+    y = 100 * Math.pow((l + 16) / 116, 3);
 
+    y2 = Math.pow(y / 100, 1/3);
 
+  }
 
+
 
+  x = x / 95.047 <= 0.008856 ? x = (95.047 * ((a / 500) + y2 - (16 / 116))) / 7.787 : 95.047 * Math.pow((a / 500) + y2, 3);
 
+
 
+  z = z / 108.883 <= 0.008859 ? z = (108.883 * (y2 - (b / 200) - (16 / 116))) / 7.787 : 108.883 * Math.pow(y2 - (b / 200), 3);
 
+
 
+  return [x, y, z];
 
+}
 
+
 
+function lab2lch(lab) {
 
+  var l = lab[0],
 
+      a = lab[1],
 
+      b = lab[2],
 
+      hr, h, c;
 
+
 
+  hr = Math.atan2(b, a);
 
+  h = hr * 360 / 2 / Math.PI;
 
+  if (h < 0) {
 
+    h += 360;
 
+  }
 
+  c = Math.sqrt(a * a + b * b);
 
+  return [l, c, h];
 
+}
 
+
 
+function lab2rgb(args) {
 
+  return xyz2rgb(lab2xyz(args));
 
+}
 
+
 
+function lch2lab(lch) {
 
+  var l = lch[0],
 
+      c = lch[1],
 
+      h = lch[2],
 
+      a, b, hr;
 
+
 
+  hr = h / 360 * 2 * Math.PI;
 
+  a = c * Math.cos(hr);
 
+  b = c * Math.sin(hr);
 
+  return [l, a, b];
 
+}
 
+
 
+function lch2xyz(args) {
 
+  return lab2xyz(lch2lab(args));
 
+}
 
+
 
+function lch2rgb(args) {
 
+  return lab2rgb(lch2lab(args));
 
+}
 
+
 
+function keyword2rgb(keyword) {
 
+  return cssKeywords[keyword];
 
+}
 
+
 
+function keyword2hsl(args) {
 
+  return rgb2hsl(keyword2rgb(args));
 
+}
 
+
 
+function keyword2hsv(args) {
 
+  return rgb2hsv(keyword2rgb(args));
 
+}
 
+
 
+function keyword2hwb(args) {
 
+  return rgb2hwb(keyword2rgb(args));
 
+}
 
+
 
+function keyword2cmyk(args) {
 
+  return rgb2cmyk(keyword2rgb(args));
 
+}
 
+
 
+function keyword2lab(args) {
 
+  return rgb2lab(keyword2rgb(args));
 
+}
 
+
 
+function keyword2xyz(args) {
 
+  return rgb2xyz(keyword2rgb(args));
 
+}
 
+
 
+var cssKeywords = {
 
+  aliceblue:  [240,248,255],
 
+  antiquewhite: [250,235,215],
 
+  aqua: [0,255,255],
 
+  aquamarine: [127,255,212],
 
+  azure:  [240,255,255],
 
+  beige:  [245,245,220],
 
+  bisque: [255,228,196],
 
+  black:  [0,0,0],
 
+  blanchedalmond: [255,235,205],
 
+  blue: [0,0,255],
 
+  blueviolet: [138,43,226],
 
+  brown:  [165,42,42],
 
+  burlywood:  [222,184,135],
 
+  cadetblue:  [95,158,160],
 
+  chartreuse: [127,255,0],
 
+  chocolate:  [210,105,30],
 
+  coral:  [255,127,80],
 
+  cornflowerblue: [100,149,237],
 
+  cornsilk: [255,248,220],
 
+  crimson:  [220,20,60],
 
+  cyan: [0,255,255],
 
+  darkblue: [0,0,139],
 
+  darkcyan: [0,139,139],
 
+  darkgoldenrod:  [184,134,11],
 
+  darkgray: [169,169,169],
 
+  darkgreen:  [0,100,0],
 
+  darkgrey: [169,169,169],
 
+  darkkhaki:  [189,183,107],
 
+  darkmagenta:  [139,0,139],
 
+  darkolivegreen: [85,107,47],
 
+  darkorange: [255,140,0],
 
+  darkorchid: [153,50,204],
 
+  darkred:  [139,0,0],
 
+  darksalmon: [233,150,122],
 
+  darkseagreen: [143,188,143],
 
+  darkslateblue:  [72,61,139],
 
+  darkslategray:  [47,79,79],
 
+  darkslategrey:  [47,79,79],
 
+  darkturquoise:  [0,206,209],
 
+  darkviolet: [148,0,211],
 
+  deeppink: [255,20,147],
 
+  deepskyblue:  [0,191,255],
 
+  dimgray:  [105,105,105],
 
+  dimgrey:  [105,105,105],
 
+  dodgerblue: [30,144,255],
 
+  firebrick:  [178,34,34],
 
+  floralwhite:  [255,250,240],
 
+  forestgreen:  [34,139,34],
 
+  fuchsia:  [255,0,255],
 
+  gainsboro:  [220,220,220],
 
+  ghostwhite: [248,248,255],
 
+  gold: [255,215,0],
 
+  goldenrod:  [218,165,32],
 
+  gray: [128,128,128],
 
+  green:  [0,128,0],
 
+  greenyellow:  [173,255,47],
 
+  grey: [128,128,128],
 
+  honeydew: [240,255,240],
 
+  hotpink:  [255,105,180],
 
+  indianred:  [205,92,92],
 
+  indigo: [75,0,130],
 
+  ivory:  [255,255,240],
 
+  khaki:  [240,230,140],
 
+  lavender: [230,230,250],
 
+  lavenderblush:  [255,240,245],
 
+  lawngreen:  [124,252,0],
 
+  lemonchiffon: [255,250,205],
 
+  lightblue:  [173,216,230],
 
+  lightcoral: [240,128,128],
 
+  lightcyan:  [224,255,255],
 
+  lightgoldenrodyellow: [250,250,210],
 
+  lightgray:  [211,211,211],
 
+  lightgreen: [144,238,144],
 
+  lightgrey:  [211,211,211],
 
+  lightpink:  [255,182,193],
 
+  lightsalmon:  [255,160,122],
 
+  lightseagreen:  [32,178,170],
 
+  lightskyblue: [135,206,250],
 
+  lightslategray: [119,136,153],
 
+  lightslategrey: [119,136,153],
 
+  lightsteelblue: [176,196,222],
 
+  lightyellow:  [255,255,224],
 
+  lime: [0,255,0],
 
+  limegreen:  [50,205,50],
 
+  linen:  [250,240,230],
 
+  magenta:  [255,0,255],
 
+  maroon: [128,0,0],
 
+  mediumaquamarine: [102,205,170],
 
+  mediumblue: [0,0,205],
 
+  mediumorchid: [186,85,211],
 
+  mediumpurple: [147,112,219],
 
+  mediumseagreen: [60,179,113],
 
+  mediumslateblue:  [123,104,238],
 
+  mediumspringgreen:  [0,250,154],
 
+  mediumturquoise:  [72,209,204],
 
+  mediumvioletred:  [199,21,133],
 
+  midnightblue: [25,25,112],
 
+  mintcream:  [245,255,250],
 
+  mistyrose:  [255,228,225],
 
+  moccasin: [255,228,181],
 
+  navajowhite:  [255,222,173],
 
+  navy: [0,0,128],
 
+  oldlace:  [253,245,230],
 
+  olive:  [128,128,0],
 
+  olivedrab:  [107,142,35],
 
+  orange: [255,165,0],
 
+  orangered:  [255,69,0],
 
+  orchid: [218,112,214],
 
+  palegoldenrod:  [238,232,170],
 
+  palegreen:  [152,251,152],
 
+  paleturquoise:  [175,238,238],
 
+  palevioletred:  [219,112,147],
 
+  papayawhip: [255,239,213],
 
+  peachpuff:  [255,218,185],
 
+  peru: [205,133,63],
 
+  pink: [255,192,203],
 
+  plum: [221,160,221],
 
+  powderblue: [176,224,230],
 
+  purple: [128,0,128],
 
+  rebeccapurple: [102, 51, 153],
 
+  red:  [255,0,0],
 
+  rosybrown:  [188,143,143],
 
+  royalblue:  [65,105,225],
 
+  saddlebrown:  [139,69,19],
 
+  salmon: [250,128,114],
 
+  sandybrown: [244,164,96],
 
+  seagreen: [46,139,87],
 
+  seashell: [255,245,238],
 
+  sienna: [160,82,45],
 
+  silver: [192,192,192],
 
+  skyblue:  [135,206,235],
 
+  slateblue:  [106,90,205],
 
+  slategray:  [112,128,144],
 
+  slategrey:  [112,128,144],
 
+  snow: [255,250,250],
 
+  springgreen:  [0,255,127],
 
+  steelblue:  [70,130,180],
 
+  tan:  [210,180,140],
 
+  teal: [0,128,128],
 
+  thistle:  [216,191,216],
 
+  tomato: [255,99,71],
 
+  turquoise:  [64,224,208],
 
+  violet: [238,130,238],
 
+  wheat:  [245,222,179],
 
+  white:  [255,255,255],
 
+  whitesmoke: [245,245,245],
 
+  yellow: [255,255,0],
 
+  yellowgreen:  [154,205,50]
 
+};
 
+
 
+var reverseKeywords = {};
 
+for (var key in cssKeywords) {
 
+  reverseKeywords[JSON.stringify(cssKeywords[key])] = key;
 
+}
 
+
 
+var convert = function() {
 
+   return new Converter();
 
+};
 
+
 
+for (var func in conversions) {
 
+  // export Raw versions
 
+  convert[func + "Raw"] =  (function(func) {
 
+    // accept array or plain args
 
+    return function(arg) {
 
+      if (typeof arg == "number")
 
+        arg = Array.prototype.slice.call(arguments);
 
+      return conversions[func](arg);
 
+    }
 
+  })(func);
 
+
 
+  var pair = /(\w+)2(\w+)/.exec(func),
 
+      from = pair[1],
 
+      to = pair[2];
 
+
 
+  // export rgb2hsl and ["rgb"]["hsl"]
 
+  convert[from] = convert[from] || {};
 
+
 
+  convert[from][to] = convert[func] = (function(func) { 
+    return function(arg) {
 
+      if (typeof arg == "number")
 
+        arg = Array.prototype.slice.call(arguments);
 
+      
+      var val = conversions[func](arg);
 
+      if (typeof val == "string" || val === undefined)
 
+        return val; // keyword
 
+
 
+      for (var i = 0; i < val.length; i++)
 
+        val[i] = Math.round(val[i]);
 
+      return val;
 
+    }
 
+  })(func);
 
+}
 
+
 
+
 
+/* Converter does lazy conversion and caching */
 
+var Converter = function() {
 
+   this.convs = {};
 
+};
 
+
 
+/* Either get the values for a space or
 
+  set the values for a space, depending on args */
 
+Converter.prototype.routeSpace = function(space, args) {
 
+   var values = args[0];
 
+   if (values === undefined) {
 
+      // color.rgb()
 
+      return this.getValues(space);
 
+   }
 
+   // color.rgb(10, 10, 10)
 
+   if (typeof values == "number") {
 
+      values = Array.prototype.slice.call(args);        
+   }
 
+
 
+   return this.setValues(space, values);
 
+};
 
+  
+/* Set the values for a space, invalidating cache */
 
+Converter.prototype.setValues = function(space, values) {
 
+   this.space = space;
 
+   this.convs = {};
 
+   this.convs[space] = values;
 
+   return this;
 
+};
 
+
 
+/* Get the values for a space. If there's already
 
+  a conversion for the space, fetch it, otherwise
 
+  compute it */
 
+Converter.prototype.getValues = function(space) {
 
+   var vals = this.convs[space];
 
+   if (!vals) {
 
+      var fspace = this.space,
 
+          from = this.convs[fspace];
 
+      vals = convert[fspace][space](from);
 
+
 
+      this.convs[space] = vals;
 
+   }
 
+  return vals;
 
+};
 
+
 
+["rgb", "hsl", "hsv", "cmyk", "keyword"].forEach(function(space) {
 
+   Converter.prototype[space] = function(vals) {
 
+      return this.routeSpace(space, arguments);
 
+   };
 
+});
 
+
 
+var colorConvert = convert;
 
+
 
+var colorName = {
 
+	"aliceblue": [240, 248, 255],
 
+	"antiquewhite": [250, 235, 215],
 
+	"aqua": [0, 255, 255],
 
+	"aquamarine": [127, 255, 212],
 
+	"azure": [240, 255, 255],
 
+	"beige": [245, 245, 220],
 
+	"bisque": [255, 228, 196],
 
+	"black": [0, 0, 0],
 
+	"blanchedalmond": [255, 235, 205],
 
+	"blue": [0, 0, 255],
 
+	"blueviolet": [138, 43, 226],
 
+	"brown": [165, 42, 42],
 
+	"burlywood": [222, 184, 135],
 
+	"cadetblue": [95, 158, 160],
 
+	"chartreuse": [127, 255, 0],
 
+	"chocolate": [210, 105, 30],
 
+	"coral": [255, 127, 80],
 
+	"cornflowerblue": [100, 149, 237],
 
+	"cornsilk": [255, 248, 220],
 
+	"crimson": [220, 20, 60],
 
+	"cyan": [0, 255, 255],
 
+	"darkblue": [0, 0, 139],
 
+	"darkcyan": [0, 139, 139],
 
+	"darkgoldenrod": [184, 134, 11],
 
+	"darkgray": [169, 169, 169],
 
+	"darkgreen": [0, 100, 0],
 
+	"darkgrey": [169, 169, 169],
 
+	"darkkhaki": [189, 183, 107],
 
+	"darkmagenta": [139, 0, 139],
 
+	"darkolivegreen": [85, 107, 47],
 
+	"darkorange": [255, 140, 0],
 
+	"darkorchid": [153, 50, 204],
 
+	"darkred": [139, 0, 0],
 
+	"darksalmon": [233, 150, 122],
 
+	"darkseagreen": [143, 188, 143],
 
+	"darkslateblue": [72, 61, 139],
 
+	"darkslategray": [47, 79, 79],
 
+	"darkslategrey": [47, 79, 79],
 
+	"darkturquoise": [0, 206, 209],
 
+	"darkviolet": [148, 0, 211],
 
+	"deeppink": [255, 20, 147],
 
+	"deepskyblue": [0, 191, 255],
 
+	"dimgray": [105, 105, 105],
 
+	"dimgrey": [105, 105, 105],
 
+	"dodgerblue": [30, 144, 255],
 
+	"firebrick": [178, 34, 34],
 
+	"floralwhite": [255, 250, 240],
 
+	"forestgreen": [34, 139, 34],
 
+	"fuchsia": [255, 0, 255],
 
+	"gainsboro": [220, 220, 220],
 
+	"ghostwhite": [248, 248, 255],
 
+	"gold": [255, 215, 0],
 
+	"goldenrod": [218, 165, 32],
 
+	"gray": [128, 128, 128],
 
+	"green": [0, 128, 0],
 
+	"greenyellow": [173, 255, 47],
 
+	"grey": [128, 128, 128],
 
+	"honeydew": [240, 255, 240],
 
+	"hotpink": [255, 105, 180],
 
+	"indianred": [205, 92, 92],
 
+	"indigo": [75, 0, 130],
 
+	"ivory": [255, 255, 240],
 
+	"khaki": [240, 230, 140],
 
+	"lavender": [230, 230, 250],
 
+	"lavenderblush": [255, 240, 245],
 
+	"lawngreen": [124, 252, 0],
 
+	"lemonchiffon": [255, 250, 205],
 
+	"lightblue": [173, 216, 230],
 
+	"lightcoral": [240, 128, 128],
 
+	"lightcyan": [224, 255, 255],
 
+	"lightgoldenrodyellow": [250, 250, 210],
 
+	"lightgray": [211, 211, 211],
 
+	"lightgreen": [144, 238, 144],
 
+	"lightgrey": [211, 211, 211],
 
+	"lightpink": [255, 182, 193],
 
+	"lightsalmon": [255, 160, 122],
 
+	"lightseagreen": [32, 178, 170],
 
+	"lightskyblue": [135, 206, 250],
 
+	"lightslategray": [119, 136, 153],
 
+	"lightslategrey": [119, 136, 153],
 
+	"lightsteelblue": [176, 196, 222],
 
+	"lightyellow": [255, 255, 224],
 
+	"lime": [0, 255, 0],
 
+	"limegreen": [50, 205, 50],
 
+	"linen": [250, 240, 230],
 
+	"magenta": [255, 0, 255],
 
+	"maroon": [128, 0, 0],
 
+	"mediumaquamarine": [102, 205, 170],
 
+	"mediumblue": [0, 0, 205],
 
+	"mediumorchid": [186, 85, 211],
 
+	"mediumpurple": [147, 112, 219],
 
+	"mediumseagreen": [60, 179, 113],
 
+	"mediumslateblue": [123, 104, 238],
 
+	"mediumspringgreen": [0, 250, 154],
 
+	"mediumturquoise": [72, 209, 204],
 
+	"mediumvioletred": [199, 21, 133],
 
+	"midnightblue": [25, 25, 112],
 
+	"mintcream": [245, 255, 250],
 
+	"mistyrose": [255, 228, 225],
 
+	"moccasin": [255, 228, 181],
 
+	"navajowhite": [255, 222, 173],
 
+	"navy": [0, 0, 128],
 
+	"oldlace": [253, 245, 230],
 
+	"olive": [128, 128, 0],
 
+	"olivedrab": [107, 142, 35],
 
+	"orange": [255, 165, 0],
 
+	"orangered": [255, 69, 0],
 
+	"orchid": [218, 112, 214],
 
+	"palegoldenrod": [238, 232, 170],
 
+	"palegreen": [152, 251, 152],
 
+	"paleturquoise": [175, 238, 238],
 
+	"palevioletred": [219, 112, 147],
 
+	"papayawhip": [255, 239, 213],
 
+	"peachpuff": [255, 218, 185],
 
+	"peru": [205, 133, 63],
 
+	"pink": [255, 192, 203],
 
+	"plum": [221, 160, 221],
 
+	"powderblue": [176, 224, 230],
 
+	"purple": [128, 0, 128],
 
+	"rebeccapurple": [102, 51, 153],
 
+	"red": [255, 0, 0],
 
+	"rosybrown": [188, 143, 143],
 
+	"royalblue": [65, 105, 225],
 
+	"saddlebrown": [139, 69, 19],
 
+	"salmon": [250, 128, 114],
 
+	"sandybrown": [244, 164, 96],
 
+	"seagreen": [46, 139, 87],
 
+	"seashell": [255, 245, 238],
 
+	"sienna": [160, 82, 45],
 
+	"silver": [192, 192, 192],
 
+	"skyblue": [135, 206, 235],
 
+	"slateblue": [106, 90, 205],
 
+	"slategray": [112, 128, 144],
 
+	"slategrey": [112, 128, 144],
 
+	"snow": [255, 250, 250],
 
+	"springgreen": [0, 255, 127],
 
+	"steelblue": [70, 130, 180],
 
+	"tan": [210, 180, 140],
 
+	"teal": [0, 128, 128],
 
+	"thistle": [216, 191, 216],
 
+	"tomato": [255, 99, 71],
 
+	"turquoise": [64, 224, 208],
 
+	"violet": [238, 130, 238],
 
+	"wheat": [245, 222, 179],
 
+	"white": [255, 255, 255],
 
+	"whitesmoke": [245, 245, 245],
 
+	"yellow": [255, 255, 0],
 
+	"yellowgreen": [154, 205, 50]
 
+};
 
+
 
+/* MIT license */
 
+
 
+
 
+var colorString = {
 
+   getRgba: getRgba,
 
+   getHsla: getHsla,
 
+   getRgb: getRgb,
 
+   getHsl: getHsl,
 
+   getHwb: getHwb,
 
+   getAlpha: getAlpha,
 
+
 
+   hexString: hexString,
 
+   rgbString: rgbString,
 
+   rgbaString: rgbaString,
 
+   percentString: percentString,
 
+   percentaString: percentaString,
 
+   hslString: hslString,
 
+   hslaString: hslaString,
 
+   hwbString: hwbString,
 
+   keyword: keyword
 
+};
 
+
 
+function getRgba(string) {
 
+   if (!string) {
 
+      return;
 
+   }
 
+   var abbr =  /^#([a-fA-F0-9]{3,4})$/i,
 
+       hex =  /^#([a-fA-F0-9]{6}([a-fA-F0-9]{2})?)$/i,
 
+       rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i,
 
+       per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i,
 
+       keyword = /(\w+)/;
 
+
 
+   var rgb = [0, 0, 0],
 
+       a = 1,
 
+       match = string.match(abbr),
 
+       hexAlpha = "";
 
+   if (match) {
 
+      match = match[1];
 
+      hexAlpha = match[3];
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = parseInt(match[i] + match[i], 16);
 
+      }
 
+      if (hexAlpha) {
 
+         a = Math.round((parseInt(hexAlpha + hexAlpha, 16) / 255) * 100) / 100;
 
+      }
 
+   }
 
+   else if (match = string.match(hex)) {
 
+      hexAlpha = match[2];
 
+      match = match[1];
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = parseInt(match.slice(i * 2, i * 2 + 2), 16);
 
+      }
 
+      if (hexAlpha) {
 
+         a = Math.round((parseInt(hexAlpha, 16) / 255) * 100) / 100;
 
+      }
 
+   }
 
+   else if (match = string.match(rgba)) {
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = parseInt(match[i + 1]);
 
+      }
 
+      a = parseFloat(match[4]);
 
+   }
 
+   else if (match = string.match(per)) {
 
+      for (var i = 0; i < rgb.length; i++) {
 
+         rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
 
+      }
 
+      a = parseFloat(match[4]);
 
+   }
 
+   else if (match = string.match(keyword)) {
 
+      if (match[1] == "transparent") {
 
+         return [0, 0, 0, 0];
 
+      }
 
+      rgb = colorName[match[1]];
 
+      if (!rgb) {
 
+         return;
 
+      }
 
+   }
 
+
 
+   for (var i = 0; i < rgb.length; i++) {
 
+      rgb[i] = scale(rgb[i], 0, 255);
 
+   }
 
+   if (!a && a != 0) {
 
+      a = 1;
 
+   }
 
+   else {
 
+      a = scale(a, 0, 1);
 
+   }
 
+   rgb[3] = a;
 
+   return rgb;
 
+}
 
+
 
+function getHsla(string) {
 
+   if (!string) {
 
+      return;
 
+   }
 
+   var hsl = /^hsla?\(\s*([+-]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
 
+   var match = string.match(hsl);
 
+   if (match) {
 
+      var alpha = parseFloat(match[4]);
 
+      var h = scale(parseInt(match[1]), 0, 360),
 
+          s = scale(parseFloat(match[2]), 0, 100),
 
+          l = scale(parseFloat(match[3]), 0, 100),
 
+          a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);
 
+      return [h, s, l, a];
 
+   }
 
+}
 
+
 
+function getHwb(string) {
 
+   if (!string) {
 
+      return;
 
+   }
 
+   var hwb = /^hwb\(\s*([+-]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
 
+   var match = string.match(hwb);
 
+   if (match) {
 
+    var alpha = parseFloat(match[4]);
 
+      var h = scale(parseInt(match[1]), 0, 360),
 
+          w = scale(parseFloat(match[2]), 0, 100),
 
+          b = scale(parseFloat(match[3]), 0, 100),
 
+          a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);
 
+      return [h, w, b, a];
 
+   }
 
+}
 
+
 
+function getRgb(string) {
 
+   var rgba = getRgba(string);
 
+   return rgba && rgba.slice(0, 3);
 
+}
 
+
 
+function getHsl(string) {
 
+  var hsla = getHsla(string);
 
+  return hsla && hsla.slice(0, 3);
 
+}
 
+
 
+function getAlpha(string) {
 
+   var vals = getRgba(string);
 
+   if (vals) {
 
+      return vals[3];
 
+   }
 
+   else if (vals = getHsla(string)) {
 
+      return vals[3];
 
+   }
 
+   else if (vals = getHwb(string)) {
 
+      return vals[3];
 
+   }
 
+}
 
+
 
+// generators
 
+function hexString(rgba, a) {
 
+   var a = (a !== undefined && rgba.length === 3) ? a : rgba[3];
 
+   return "#" + hexDouble(rgba[0]) 
+              + hexDouble(rgba[1])
 
+              + hexDouble(rgba[2])
 
+              + (
 
+                 (a >= 0 && a < 1)
 
+                 ? hexDouble(Math.round(a * 255))
 
+                 : ""
 
+              );
 
+}
 
+
 
+function rgbString(rgba, alpha) {
 
+   if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {
 
+      return rgbaString(rgba, alpha);
 
+   }
 
+   return "rgb(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ")";
 
+}
 
+
 
+function rgbaString(rgba, alpha) {
 
+   if (alpha === undefined) {
 
+      alpha = (rgba[3] !== undefined ? rgba[3] : 1);
 
+   }
 
+   return "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2]
 
+           + ", " + alpha + ")";
 
+}
 
+
 
+function percentString(rgba, alpha) {
 
+   if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {
 
+      return percentaString(rgba, alpha);
 
+   }
 
+   var r = Math.round(rgba[0]/255 * 100),
 
+       g = Math.round(rgba[1]/255 * 100),
 
+       b = Math.round(rgba[2]/255 * 100);
 
+
 
+   return "rgb(" + r + "%, " + g + "%, " + b + "%)";
 
+}
 
+
 
+function percentaString(rgba, alpha) {
 
+   var r = Math.round(rgba[0]/255 * 100),
 
+       g = Math.round(rgba[1]/255 * 100),
 
+       b = Math.round(rgba[2]/255 * 100);
 
+   return "rgba(" + r + "%, " + g + "%, " + b + "%, " + (alpha || rgba[3] || 1) + ")";
 
+}
 
+
 
+function hslString(hsla, alpha) {
 
+   if (alpha < 1 || (hsla[3] && hsla[3] < 1)) {
 
+      return hslaString(hsla, alpha);
 
+   }
 
+   return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
 
+}
 
+
 
+function hslaString(hsla, alpha) {
 
+   if (alpha === undefined) {
 
+      alpha = (hsla[3] !== undefined ? hsla[3] : 1);
 
+   }
 
+   return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, "
 
+           + alpha + ")";
 
+}
 
+
 
+// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
 
+// (hwb have alpha optional & 1 is default value)
 
+function hwbString(hwb, alpha) {
 
+   if (alpha === undefined) {
 
+      alpha = (hwb[3] !== undefined ? hwb[3] : 1);
 
+   }
 
+   return "hwb(" + hwb[0] + ", " + hwb[1] + "%, " + hwb[2] + "%"
 
+           + (alpha !== undefined && alpha !== 1 ? ", " + alpha : "") + ")";
 
+}
 
+
 
+function keyword(rgb) {
 
+  return reverseNames[rgb.slice(0, 3)];
 
+}
 
+
 
+// helpers
 
+function scale(num, min, max) {
 
+   return Math.min(Math.max(min, num), max);
 
+}
 
+
 
+function hexDouble(num) {
 
+  var str = num.toString(16).toUpperCase();
 
+  return (str.length < 2) ? "0" + str : str;
 
+}
 
+
 
+
 
+//create a list of reverse color names
 
+var reverseNames = {};
 
+for (var name in colorName) {
 
+   reverseNames[colorName[name]] = name;
 
+}
 
+
 
+/* MIT license */
 
+
 
+
 
+
 
+var Color = function (obj) {
 
+	if (obj instanceof Color) {
 
+		return obj;
 
+	}
 
+	if (!(this instanceof Color)) {
 
+		return new Color(obj);
 
+	}
 
+
 
+	this.valid = false;
 
+	this.values = {
 
+		rgb: [0, 0, 0],
 
+		hsl: [0, 0, 0],
 
+		hsv: [0, 0, 0],
 
+		hwb: [0, 0, 0],
 
+		cmyk: [0, 0, 0, 0],
 
+		alpha: 1
 
+	};
 
+
 
+	// parse Color() argument
 
+	var vals;
 
+	if (typeof obj === 'string') {
 
+		vals = colorString.getRgba(obj);
 
+		if (vals) {
 
+			this.setValues('rgb', vals);
 
+		} else if (vals = colorString.getHsla(obj)) {
 
+			this.setValues('hsl', vals);
 
+		} else if (vals = colorString.getHwb(obj)) {
 
+			this.setValues('hwb', vals);
 
+		}
 
+	} else if (typeof obj === 'object') {
 
+		vals = obj;
 
+		if (vals.r !== undefined || vals.red !== undefined) {
 
+			this.setValues('rgb', vals);
 
+		} else if (vals.l !== undefined || vals.lightness !== undefined) {
 
+			this.setValues('hsl', vals);
 
+		} else if (vals.v !== undefined || vals.value !== undefined) {
 
+			this.setValues('hsv', vals);
 
+		} else if (vals.w !== undefined || vals.whiteness !== undefined) {
 
+			this.setValues('hwb', vals);
 
+		} else if (vals.c !== undefined || vals.cyan !== undefined) {
 
+			this.setValues('cmyk', vals);
 
+		}
 
+	}
 
+};
 
+
 
+Color.prototype = {
 
+	isValid: function () {
 
+		return this.valid;
 
+	},
 
+	rgb: function () {
 
+		return this.setSpace('rgb', arguments);
 
+	},
 
+	hsl: function () {
 
+		return this.setSpace('hsl', arguments);
 
+	},
 
+	hsv: function () {
 
+		return this.setSpace('hsv', arguments);
 
+	},
 
+	hwb: function () {
 
+		return this.setSpace('hwb', arguments);
 
+	},
 
+	cmyk: function () {
 
+		return this.setSpace('cmyk', arguments);
 
+	},
 
+
 
+	rgbArray: function () {
 
+		return this.values.rgb;
 
+	},
 
+	hslArray: function () {
 
+		return this.values.hsl;
 
+	},
 
+	hsvArray: function () {
 
+		return this.values.hsv;
 
+	},
 
+	hwbArray: function () {
 
+		var values = this.values;
 
+		if (values.alpha !== 1) {
 
+			return values.hwb.concat([values.alpha]);
 
+		}
 
+		return values.hwb;
 
+	},
 
+	cmykArray: function () {
 
+		return this.values.cmyk;
 
+	},
 
+	rgbaArray: function () {
 
+		var values = this.values;
 
+		return values.rgb.concat([values.alpha]);
 
+	},
 
+	hslaArray: function () {
 
+		var values = this.values;
 
+		return values.hsl.concat([values.alpha]);
 
+	},
 
+	alpha: function (val) {
 
+		if (val === undefined) {
 
+			return this.values.alpha;
 
+		}
 
+		this.setValues('alpha', val);
 
+		return this;
 
+	},
 
+
 
+	red: function (val) {
 
+		return this.setChannel('rgb', 0, val);
 
+	},
 
+	green: function (val) {
 
+		return this.setChannel('rgb', 1, val);
 
+	},
 
+	blue: function (val) {
 
+		return this.setChannel('rgb', 2, val);
 
+	},
 
+	hue: function (val) {
 
+		if (val) {
 
+			val %= 360;
 
+			val = val < 0 ? 360 + val : val;
 
+		}
 
+		return this.setChannel('hsl', 0, val);
 
+	},
 
+	saturation: function (val) {
 
+		return this.setChannel('hsl', 1, val);
 
+	},
 
+	lightness: function (val) {
 
+		return this.setChannel('hsl', 2, val);
 
+	},
 
+	saturationv: function (val) {
 
+		return this.setChannel('hsv', 1, val);
 
+	},
 
+	whiteness: function (val) {
 
+		return this.setChannel('hwb', 1, val);
 
+	},
 
+	blackness: function (val) {
 
+		return this.setChannel('hwb', 2, val);
 
+	},
 
+	value: function (val) {
 
+		return this.setChannel('hsv', 2, val);
 
+	},
 
+	cyan: function (val) {
 
+		return this.setChannel('cmyk', 0, val);
 
+	},
 
+	magenta: function (val) {
 
+		return this.setChannel('cmyk', 1, val);
 
+	},
 
+	yellow: function (val) {
 
+		return this.setChannel('cmyk', 2, val);
 
+	},
 
+	black: function (val) {
 
+		return this.setChannel('cmyk', 3, val);
 
+	},
 
+
 
+	hexString: function () {
 
+		return colorString.hexString(this.values.rgb);
 
+	},
 
+	rgbString: function () {
 
+		return colorString.rgbString(this.values.rgb, this.values.alpha);
 
+	},
 
+	rgbaString: function () {
 
+		return colorString.rgbaString(this.values.rgb, this.values.alpha);
 
+	},
 
+	percentString: function () {
 
+		return colorString.percentString(this.values.rgb, this.values.alpha);
 
+	},
 
+	hslString: function () {
 
+		return colorString.hslString(this.values.hsl, this.values.alpha);
 
+	},
 
+	hslaString: function () {
 
+		return colorString.hslaString(this.values.hsl, this.values.alpha);
 
+	},
 
+	hwbString: function () {
 
+		return colorString.hwbString(this.values.hwb, this.values.alpha);
 
+	},
 
+	keyword: function () {
 
+		return colorString.keyword(this.values.rgb, this.values.alpha);
 
+	},
 
+
 
+	rgbNumber: function () {
 
+		var rgb = this.values.rgb;
 
+		return (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
 
+	},
 
+
 
+	luminosity: function () {
 
+		// http://www.w3.org/TR/WCAG20/#relativeluminancedef
 
+		var rgb = this.values.rgb;
 
+		var lum = [];
 
+		for (var i = 0; i < rgb.length; i++) {
 
+			var chan = rgb[i] / 255;
 
+			lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4);
 
+		}
 
+		return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
 
+	},
 
+
 
+	contrast: function (color2) {
 
+		// http://www.w3.org/TR/WCAG20/#contrast-ratiodef
 
+		var lum1 = this.luminosity();
 
+		var lum2 = color2.luminosity();
 
+		if (lum1 > lum2) {
 
+			return (lum1 + 0.05) / (lum2 + 0.05);
 
+		}
 
+		return (lum2 + 0.05) / (lum1 + 0.05);
 
+	},
 
+
 
+	level: function (color2) {
 
+		var contrastRatio = this.contrast(color2);
 
+		if (contrastRatio >= 7.1) {
 
+			return 'AAA';
 
+		}
 
+
 
+		return (contrastRatio >= 4.5) ? 'AA' : '';
 
+	},
 
+
 
+	dark: function () {
 
+		// YIQ equation from http://24ways.org/2010/calculating-color-contrast
 
+		var rgb = this.values.rgb;
 
+		var yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
 
+		return yiq < 128;
 
+	},
 
+
 
+	light: function () {
 
+		return !this.dark();
 
+	},
 
+
 
+	negate: function () {
 
+		var rgb = [];
 
+		for (var i = 0; i < 3; i++) {
 
+			rgb[i] = 255 - this.values.rgb[i];
 
+		}
 
+		this.setValues('rgb', rgb);
 
+		return this;
 
+	},
 
+
 
+	lighten: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[2] += hsl[2] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	darken: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[2] -= hsl[2] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	saturate: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[1] += hsl[1] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	desaturate: function (ratio) {
 
+		var hsl = this.values.hsl;
 
+		hsl[1] -= hsl[1] * ratio;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	whiten: function (ratio) {
 
+		var hwb = this.values.hwb;
 
+		hwb[1] += hwb[1] * ratio;
 
+		this.setValues('hwb', hwb);
 
+		return this;
 
+	},
 
+
 
+	blacken: function (ratio) {
 
+		var hwb = this.values.hwb;
 
+		hwb[2] += hwb[2] * ratio;
 
+		this.setValues('hwb', hwb);
 
+		return this;
 
+	},
 
+
 
+	greyscale: function () {
 
+		var rgb = this.values.rgb;
 
+		// http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
 
+		var val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
 
+		this.setValues('rgb', [val, val, val]);
 
+		return this;
 
+	},
 
+
 
+	clearer: function (ratio) {
 
+		var alpha = this.values.alpha;
 
+		this.setValues('alpha', alpha - (alpha * ratio));
 
+		return this;
 
+	},
 
+
 
+	opaquer: function (ratio) {
 
+		var alpha = this.values.alpha;
 
+		this.setValues('alpha', alpha + (alpha * ratio));
 
+		return this;
 
+	},
 
+
 
+	rotate: function (degrees) {
 
+		var hsl = this.values.hsl;
 
+		var hue = (hsl[0] + degrees) % 360;
 
+		hsl[0] = hue < 0 ? 360 + hue : hue;
 
+		this.setValues('hsl', hsl);
 
+		return this;
 
+	},
 
+
 
+	/**
 
+	 * Ported from sass implementation in C
 
+	 * https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
 
+	 */
 
+	mix: function (mixinColor, weight) {
 
+		var color1 = this;
 
+		var color2 = mixinColor;
 
+		var p = weight === undefined ? 0.5 : weight;
 
+
 
+		var w = 2 * p - 1;
 
+		var a = color1.alpha() - color2.alpha();
 
+
 
+		var w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
 
+		var w2 = 1 - w1;
 
+
 
+		return this
 
+			.rgb(
 
+				w1 * color1.red() + w2 * color2.red(),
 
+				w1 * color1.green() + w2 * color2.green(),
 
+				w1 * color1.blue() + w2 * color2.blue()
 
+			)
 
+			.alpha(color1.alpha() * p + color2.alpha() * (1 - p));
 
+	},
 
+
 
+	toJSON: function () {
 
+		return this.rgb();
 
+	},
 
+
 
+	clone: function () {
 
+		// NOTE(SB): using node-clone creates a dependency to Buffer when using browserify,
 
+		// making the final build way to big to embed in Chart.js. So let's do it manually,
 
+		// assuming that values to clone are 1 dimension arrays containing only numbers,
 
+		// except 'alpha' which is a number.
 
+		var result = new Color();
 
+		var source = this.values;
 
+		var target = result.values;
 
+		var value, type;
 
+
 
+		for (var prop in source) {
 
+			if (source.hasOwnProperty(prop)) {
 
+				value = source[prop];
 
+				type = ({}).toString.call(value);
 
+				if (type === '[object Array]') {
 
+					target[prop] = value.slice(0);
 
+				} else if (type === '[object Number]') {
 
+					target[prop] = value;
 
+				} else {
 
+					console.error('unexpected color value:', value);
 
+				}
 
+			}
 
+		}
 
+
 
+		return result;
 
+	}
 
+};
 
+
 
+Color.prototype.spaces = {
 
+	rgb: ['red', 'green', 'blue'],
 
+	hsl: ['hue', 'saturation', 'lightness'],
 
+	hsv: ['hue', 'saturation', 'value'],
 
+	hwb: ['hue', 'whiteness', 'blackness'],
 
+	cmyk: ['cyan', 'magenta', 'yellow', 'black']
 
+};
 
+
 
+Color.prototype.maxes = {
 
+	rgb: [255, 255, 255],
 
+	hsl: [360, 100, 100],
 
+	hsv: [360, 100, 100],
 
+	hwb: [360, 100, 100],
 
+	cmyk: [100, 100, 100, 100]
 
+};
 
+
 
+Color.prototype.getValues = function (space) {
 
+	var values = this.values;
 
+	var vals = {};
 
+
 
+	for (var i = 0; i < space.length; i++) {
 
+		vals[space.charAt(i)] = values[space][i];
 
+	}
 
+
 
+	if (values.alpha !== 1) {
 
+		vals.a = values.alpha;
 
+	}
 
+
 
+	// {r: 255, g: 255, b: 255, a: 0.4}
 
+	return vals;
 
+};
 
+
 
+Color.prototype.setValues = function (space, vals) {
 
+	var values = this.values;
 
+	var spaces = this.spaces;
 
+	var maxes = this.maxes;
 
+	var alpha = 1;
 
+	var i;
 
+
 
+	this.valid = true;
 
+
 
+	if (space === 'alpha') {
 
+		alpha = vals;
 
+	} else if (vals.length) {
 
+		// [10, 10, 10]
 
+		values[space] = vals.slice(0, space.length);
 
+		alpha = vals[space.length];
 
+	} else if (vals[space.charAt(0)] !== undefined) {
 
+		// {r: 10, g: 10, b: 10}
 
+		for (i = 0; i < space.length; i++) {
 
+			values[space][i] = vals[space.charAt(i)];
 
+		}
 
+
 
+		alpha = vals.a;
 
+	} else if (vals[spaces[space][0]] !== undefined) {
 
+		// {red: 10, green: 10, blue: 10}
 
+		var chans = spaces[space];
 
+
 
+		for (i = 0; i < space.length; i++) {
 
+			values[space][i] = vals[chans[i]];
 
+		}
 
+
 
+		alpha = vals.alpha;
 
+	}
 
+
 
+	values.alpha = Math.max(0, Math.min(1, (alpha === undefined ? values.alpha : alpha)));
 
+
 
+	if (space === 'alpha') {
 
+		return false;
 
+	}
 
+
 
+	var capped;
 
+
 
+	// cap values of the space prior converting all values
 
+	for (i = 0; i < space.length; i++) {
 
+		capped = Math.max(0, Math.min(maxes[space][i], values[space][i]));
 
+		values[space][i] = Math.round(capped);
 
+	}
 
+
 
+	// convert to all the other color spaces
 
+	for (var sname in spaces) {
 
+		if (sname !== space) {
 
+			values[sname] = colorConvert[space][sname](values[space]);
 
+		}
 
+	}
 
+
 
+	return true;
 
+};
 
+
 
+Color.prototype.setSpace = function (space, args) {
 
+	var vals = args[0];
 
+
 
+	if (vals === undefined) {
 
+		// color.rgb()
 
+		return this.getValues(space);
 
+	}
 
+
 
+	// color.rgb(10, 10, 10)
 
+	if (typeof vals === 'number') {
 
+		vals = Array.prototype.slice.call(args);
 
+	}
 
+
 
+	this.setValues(space, vals);
 
+	return this;
 
+};
 
+
 
+Color.prototype.setChannel = function (space, index, val) {
 
+	var svalues = this.values[space];
 
+	if (val === undefined) {
 
+		// color.red()
 
+		return svalues[index];
 
+	} else if (val === svalues[index]) {
 
+		// color.red(color.red())
 
+		return this;
 
+	}
 
+
 
+	// color.red(100)
 
+	svalues[index] = val;
 
+	this.setValues(space, svalues);
 
+
 
+	return this;
 
+};
 
+
 
+if (typeof window !== 'undefined') {
 
+	window.Color = Color;
 
+}
 
+
 
+var chartjsColor = Color;
 
+
 
+/**
 
+ * @namespace Chart.helpers
 
+ */
 
+var helpers = {
 
+	/**
 
+	 * An empty function that can be used, for example, for optional callback.
 
+	 */
 
+	noop: function() {},
 
+
 
+	/**
 
+	 * Returns a unique id, sequentially generated from a global variable.
 
+	 * @returns {number}
 
+	 * @function
 
+	 */
 
+	uid: (function() {
 
+		var id = 0;
 
+		return function() {
 
+			return id++;
 
+		};
 
+	}()),
 
+
 
+	/**
 
+	 * Returns true if `value` is neither null nor undefined, else returns false.
 
+	 * @param {*} value - The value to test.
 
+	 * @returns {boolean}
 
+	 * @since 2.7.0
 
+	 */
 
+	isNullOrUndef: function(value) {
 
+		return value === null || typeof value === 'undefined';
 
+	},
 
+
 
+	/**
 
+	 * Returns true if `value` is an array (including typed arrays), else returns false.
 
+	 * @param {*} value - The value to test.
 
+	 * @returns {boolean}
 
+	 * @function
 
+	 */
 
+	isArray: function(value) {
 
+		if (Array.isArray && Array.isArray(value)) {
 
+			return true;
 
+		}
 
+		var type = Object.prototype.toString.call(value);
 
+		if (type.substr(0, 7) === '[object' && type.substr(-6) === 'Array]') {
 
+			return true;
 
+		}
 
+		return false;
 
+	},
 
+
 
+	/**
 
+	 * Returns true if `value` is an object (excluding null), else returns false.
 
+	 * @param {*} value - The value to test.
 
+	 * @returns {boolean}
 
+	 * @since 2.7.0
 
+	 */
 
+	isObject: function(value) {
 
+		return value !== null && Object.prototype.toString.call(value) === '[object Object]';
 
+	},
 
+
 
+	/**
 
+	 * Returns true if `value` is a finite number, else returns false
 
+	 * @param {*} value  - The value to test.
 
+	 * @returns {boolean}
 
+	 */
 
+	isFinite: function(value) {
 
+		return (typeof value === 'number' || value instanceof Number) && isFinite(value);
 
+	},
 
+
 
+	/**
 
+	 * Returns `value` if defined, else returns `defaultValue`.
 
+	 * @param {*} value - The value to return if defined.
 
+	 * @param {*} defaultValue - The value to return if `value` is undefined.
 
+	 * @returns {*}
 
+	 */
 
+	valueOrDefault: function(value, defaultValue) {
 
+		return typeof value === 'undefined' ? defaultValue : value;
 
+	},
 
+
 
+	/**
 
+	 * Returns value at the given `index` in array if defined, else returns `defaultValue`.
 
+	 * @param {Array} value - The array to lookup for value at `index`.
 
+	 * @param {number} index - The index in `value` to lookup for value.
 
+	 * @param {*} defaultValue - The value to return if `value[index]` is undefined.
 
+	 * @returns {*}
 
+	 */
 
+	valueAtIndexOrDefault: function(value, index, defaultValue) {
 
+		return helpers.valueOrDefault(helpers.isArray(value) ? value[index] : value, defaultValue);
 
+	},
 
+
 
+	/**
 
+	 * Calls `fn` with the given `args` in the scope defined by `thisArg` and returns the
 
+	 * value returned by `fn`. If `fn` is not a function, this method returns undefined.
 
+	 * @param {function} fn - The function to call.
 
+	 * @param {Array|undefined|null} args - The arguments with which `fn` should be called.
 
+	 * @param {object} [thisArg] - The value of `this` provided for the call to `fn`.
 
+	 * @returns {*}
 
+	 */
 
+	callback: function(fn, args, thisArg) {
 
+		if (fn && typeof fn.call === 'function') {
 
+			return fn.apply(thisArg, args);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Note(SB) for performance sake, this method should only be used when loopable type
 
+	 * is unknown or in none intensive code (not called often and small loopable). Else
 
+	 * it's preferable to use a regular for() loop and save extra function calls.
 
+	 * @param {object|Array} loopable - The object or array to be iterated.
 
+	 * @param {function} fn - The function to call for each item.
 
+	 * @param {object} [thisArg] - The value of `this` provided for the call to `fn`.
 
+	 * @param {boolean} [reverse] - If true, iterates backward on the loopable.
 
+	 */
 
+	each: function(loopable, fn, thisArg, reverse) {
 
+		var i, len, keys;
 
+		if (helpers.isArray(loopable)) {
 
+			len = loopable.length;
 
+			if (reverse) {
 
+				for (i = len - 1; i >= 0; i--) {
 
+					fn.call(thisArg, loopable[i], i);
 
+				}
 
+			} else {
 
+				for (i = 0; i < len; i++) {
 
+					fn.call(thisArg, loopable[i], i);
 
+				}
 
+			}
 
+		} else if (helpers.isObject(loopable)) {
 
+			keys = Object.keys(loopable);
 
+			len = keys.length;
 
+			for (i = 0; i < len; i++) {
 
+				fn.call(thisArg, loopable[keys[i]], keys[i]);
 
+			}
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Returns true if the `a0` and `a1` arrays have the same content, else returns false.
 
+	 * @see https://stackoverflow.com/a/14853974
 
+	 * @param {Array} a0 - The array to compare
 
+	 * @param {Array} a1 - The array to compare
 
+	 * @returns {boolean}
 
+	 */
 
+	arrayEquals: function(a0, a1) {
 
+		var i, ilen, v0, v1;
 
+
 
+		if (!a0 || !a1 || a0.length !== a1.length) {
 
+			return false;
 
+		}
 
+
 
+		for (i = 0, ilen = a0.length; i < ilen; ++i) {
 
+			v0 = a0[i];
 
+			v1 = a1[i];
 
+
 
+			if (v0 instanceof Array && v1 instanceof Array) {
 
+				if (!helpers.arrayEquals(v0, v1)) {
 
+					return false;
 
+				}
 
+			} else if (v0 !== v1) {
 
+				// NOTE: two different object instances will never be equal: {x:20} != {x:20}
 
+				return false;
 
+			}
 
+		}
 
+
 
+		return true;
 
+	},
 
+
 
+	/**
 
+	 * Returns a deep copy of `source` without keeping references on objects and arrays.
 
+	 * @param {*} source - The value to clone.
 
+	 * @returns {*}
 
+	 */
 
+	clone: function(source) {
 
+		if (helpers.isArray(source)) {
 
+			return source.map(helpers.clone);
 
+		}
 
+
 
+		if (helpers.isObject(source)) {
 
+			var target = {};
 
+			var keys = Object.keys(source);
 
+			var klen = keys.length;
 
+			var k = 0;
 
+
 
+			for (; k < klen; ++k) {
 
+				target[keys[k]] = helpers.clone(source[keys[k]]);
 
+			}
 
+
 
+			return target;
 
+		}
 
+
 
+		return source;
 
+	},
 
+
 
+	/**
 
+	 * The default merger when Chart.helpers.merge is called without merger option.
 
+	 * Note(SB): also used by mergeConfig and mergeScaleConfig as fallback.
 
+	 * @private
 
+	 */
 
+	_merger: function(key, target, source, options) {
 
+		var tval = target[key];
 
+		var sval = source[key];
 
+
 
+		if (helpers.isObject(tval) && helpers.isObject(sval)) {
 
+			helpers.merge(tval, sval, options);
 
+		} else {
 
+			target[key] = helpers.clone(sval);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Merges source[key] in target[key] only if target[key] is undefined.
 
+	 * @private
 
+	 */
 
+	_mergerIf: function(key, target, source) {
 
+		var tval = target[key];
 
+		var sval = source[key];
 
+
 
+		if (helpers.isObject(tval) && helpers.isObject(sval)) {
 
+			helpers.mergeIf(tval, sval);
 
+		} else if (!target.hasOwnProperty(key)) {
 
+			target[key] = helpers.clone(sval);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Recursively deep copies `source` properties into `target` with the given `options`.
 
+	 * IMPORTANT: `target` is not cloned and will be updated with `source` properties.
 
+	 * @param {object} target - The target object in which all sources are merged into.
 
+	 * @param {object|object[]} source - Object(s) to merge into `target`.
 
+	 * @param {object} [options] - Merging options:
 
+	 * @param {function} [options.merger] - The merge method (key, target, source, options)
 
+	 * @returns {object} The `target` object.
 
+	 */
 
+	merge: function(target, source, options) {
 
+		var sources = helpers.isArray(source) ? source : [source];
 
+		var ilen = sources.length;
 
+		var merge, i, keys, klen, k;
 
+
 
+		if (!helpers.isObject(target)) {
 
+			return target;
 
+		}
 
+
 
+		options = options || {};
 
+		merge = options.merger || helpers._merger;
 
+
 
+		for (i = 0; i < ilen; ++i) {
 
+			source = sources[i];
 
+			if (!helpers.isObject(source)) {
 
+				continue;
 
+			}
 
+
 
+			keys = Object.keys(source);
 
+			for (k = 0, klen = keys.length; k < klen; ++k) {
 
+				merge(keys[k], target, source, options);
 
+			}
 
+		}
 
+
 
+		return target;
 
+	},
 
+
 
+	/**
 
+	 * Recursively deep copies `source` properties into `target` *only* if not defined in target.
 
+	 * IMPORTANT: `target` is not cloned and will be updated with `source` properties.
 
+	 * @param {object} target - The target object in which all sources are merged into.
 
+	 * @param {object|object[]} source - Object(s) to merge into `target`.
 
+	 * @returns {object} The `target` object.
 
+	 */
 
+	mergeIf: function(target, source) {
 
+		return helpers.merge(target, source, {merger: helpers._mergerIf});
 
+	},
 
+
 
+	/**
 
+	 * Applies the contents of two or more objects together into the first object.
 
+	 * @param {object} target - The target object in which all objects are merged into.
 
+	 * @param {object} arg1 - Object containing additional properties to merge in target.
 
+	 * @param {object} argN - Additional objects containing properties to merge in target.
 
+	 * @returns {object} The `target` object.
 
+	 */
 
+	extend: function(target) {
 
+		var setFn = function(value, key) {
 
+			target[key] = value;
 
+		};
 
+		for (var i = 1, ilen = arguments.length; i < ilen; ++i) {
 
+			helpers.each(arguments[i], setFn);
 
+		}
 
+		return target;
 
+	},
 
+
 
+	/**
 
+	 * Basic javascript inheritance based on the model created in Backbone.js
 
+	 */
 
+	inherits: function(extensions) {
 
+		var me = this;
 
+		var ChartElement = (extensions && extensions.hasOwnProperty('constructor')) ? extensions.constructor : function() {
 
+			return me.apply(this, arguments);
 
+		};
 
+
 
+		var Surrogate = function() {
 
+			this.constructor = ChartElement;
 
+		};
 
+
 
+		Surrogate.prototype = me.prototype;
 
+		ChartElement.prototype = new Surrogate();
 
+		ChartElement.extend = helpers.inherits;
 
+
 
+		if (extensions) {
 
+			helpers.extend(ChartElement.prototype, extensions);
 
+		}
 
+
 
+		ChartElement.__super__ = me.prototype;
 
+		return ChartElement;
 
+	}
 
+};
 
+
 
+var helpers_core = helpers;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.callback instead.
 
+ * @function Chart.helpers.callCallback
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.callCallback = helpers.callback;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Array.prototype.indexOf instead.
 
+ * Array.prototype.indexOf compatibility: Chrome, Opera, Safari, FF1.5+, IE9+
 
+ * @function Chart.helpers.indexOf
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.indexOf = function(array, item, fromIndex) {
 
+	return Array.prototype.indexOf.call(array, item, fromIndex);
 
+};
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.valueOrDefault instead.
 
+ * @function Chart.helpers.getValueOrDefault
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.getValueOrDefault = helpers.valueOrDefault;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.valueAtIndexOrDefault instead.
 
+ * @function Chart.helpers.getValueAtIndexOrDefault
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers.getValueAtIndexOrDefault = helpers.valueAtIndexOrDefault;
 
+
 
+/**
 
+ * Easing functions adapted from Robert Penner's easing equations.
 
+ * @namespace Chart.helpers.easingEffects
 
+ * @see http://www.robertpenner.com/easing/
 
+ */
 
+var effects = {
 
+	linear: function(t) {
 
+		return t;
 
+	},
 
+
 
+	easeInQuad: function(t) {
 
+		return t * t;
 
+	},
 
+
 
+	easeOutQuad: function(t) {
 
+		return -t * (t - 2);
 
+	},
 
+
 
+	easeInOutQuad: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t;
 
+		}
 
+		return -0.5 * ((--t) * (t - 2) - 1);
 
+	},
 
+
 
+	easeInCubic: function(t) {
 
+		return t * t * t;
 
+	},
 
+
 
+	easeOutCubic: function(t) {
 
+		return (t = t - 1) * t * t + 1;
 
+	},
 
+
 
+	easeInOutCubic: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t * t;
 
+		}
 
+		return 0.5 * ((t -= 2) * t * t + 2);
 
+	},
 
+
 
+	easeInQuart: function(t) {
 
+		return t * t * t * t;
 
+	},
 
+
 
+	easeOutQuart: function(t) {
 
+		return -((t = t - 1) * t * t * t - 1);
 
+	},
 
+
 
+	easeInOutQuart: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t * t * t;
 
+		}
 
+		return -0.5 * ((t -= 2) * t * t * t - 2);
 
+	},
 
+
 
+	easeInQuint: function(t) {
 
+		return t * t * t * t * t;
 
+	},
 
+
 
+	easeOutQuint: function(t) {
 
+		return (t = t - 1) * t * t * t * t + 1;
 
+	},
 
+
 
+	easeInOutQuint: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * t * t * t * t * t;
 
+		}
 
+		return 0.5 * ((t -= 2) * t * t * t * t + 2);
 
+	},
 
+
 
+	easeInSine: function(t) {
 
+		return -Math.cos(t * (Math.PI / 2)) + 1;
 
+	},
 
+
 
+	easeOutSine: function(t) {
 
+		return Math.sin(t * (Math.PI / 2));
 
+	},
 
+
 
+	easeInOutSine: function(t) {
 
+		return -0.5 * (Math.cos(Math.PI * t) - 1);
 
+	},
 
+
 
+	easeInExpo: function(t) {
 
+		return (t === 0) ? 0 : Math.pow(2, 10 * (t - 1));
 
+	},
 
+
 
+	easeOutExpo: function(t) {
 
+		return (t === 1) ? 1 : -Math.pow(2, -10 * t) + 1;
 
+	},
 
+
 
+	easeInOutExpo: function(t) {
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if (t === 1) {
 
+			return 1;
 
+		}
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * Math.pow(2, 10 * (t - 1));
 
+		}
 
+		return 0.5 * (-Math.pow(2, -10 * --t) + 2);
 
+	},
 
+
 
+	easeInCirc: function(t) {
 
+		if (t >= 1) {
 
+			return t;
 
+		}
 
+		return -(Math.sqrt(1 - t * t) - 1);
 
+	},
 
+
 
+	easeOutCirc: function(t) {
 
+		return Math.sqrt(1 - (t = t - 1) * t);
 
+	},
 
+
 
+	easeInOutCirc: function(t) {
 
+		if ((t /= 0.5) < 1) {
 
+			return -0.5 * (Math.sqrt(1 - t * t) - 1);
 
+		}
 
+		return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
 
+	},
 
+
 
+	easeInElastic: function(t) {
 
+		var s = 1.70158;
 
+		var p = 0;
 
+		var a = 1;
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if (t === 1) {
 
+			return 1;
 
+		}
 
+		if (!p) {
 
+			p = 0.3;
 
+		}
 
+		if (a < 1) {
 
+			a = 1;
 
+			s = p / 4;
 
+		} else {
 
+			s = p / (2 * Math.PI) * Math.asin(1 / a);
 
+		}
 
+		return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));
 
+	},
 
+
 
+	easeOutElastic: function(t) {
 
+		var s = 1.70158;
 
+		var p = 0;
 
+		var a = 1;
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if (t === 1) {
 
+			return 1;
 
+		}
 
+		if (!p) {
 
+			p = 0.3;
 
+		}
 
+		if (a < 1) {
 
+			a = 1;
 
+			s = p / 4;
 
+		} else {
 
+			s = p / (2 * Math.PI) * Math.asin(1 / a);
 
+		}
 
+		return a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
 
+	},
 
+
 
+	easeInOutElastic: function(t) {
 
+		var s = 1.70158;
 
+		var p = 0;
 
+		var a = 1;
 
+		if (t === 0) {
 
+			return 0;
 
+		}
 
+		if ((t /= 0.5) === 2) {
 
+			return 1;
 
+		}
 
+		if (!p) {
 
+			p = 0.45;
 
+		}
 
+		if (a < 1) {
 
+			a = 1;
 
+			s = p / 4;
 
+		} else {
 
+			s = p / (2 * Math.PI) * Math.asin(1 / a);
 
+		}
 
+		if (t < 1) {
 
+			return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));
 
+		}
 
+		return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p) * 0.5 + 1;
 
+	},
 
+	easeInBack: function(t) {
 
+		var s = 1.70158;
 
+		return t * t * ((s + 1) * t - s);
 
+	},
 
+
 
+	easeOutBack: function(t) {
 
+		var s = 1.70158;
 
+		return (t = t - 1) * t * ((s + 1) * t + s) + 1;
 
+	},
 
+
 
+	easeInOutBack: function(t) {
 
+		var s = 1.70158;
 
+		if ((t /= 0.5) < 1) {
 
+			return 0.5 * (t * t * (((s *= (1.525)) + 1) * t - s));
 
+		}
 
+		return 0.5 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
 
+	},
 
+
 
+	easeInBounce: function(t) {
 
+		return 1 - effects.easeOutBounce(1 - t);
 
+	},
 
+
 
+	easeOutBounce: function(t) {
 
+		if (t < (1 / 2.75)) {
 
+			return 7.5625 * t * t;
 
+		}
 
+		if (t < (2 / 2.75)) {
 
+			return 7.5625 * (t -= (1.5 / 2.75)) * t + 0.75;
 
+		}
 
+		if (t < (2.5 / 2.75)) {
 
+			return 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375;
 
+		}
 
+		return 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375;
 
+	},
 
+
 
+	easeInOutBounce: function(t) {
 
+		if (t < 0.5) {
 
+			return effects.easeInBounce(t * 2) * 0.5;
 
+		}
 
+		return effects.easeOutBounce(t * 2 - 1) * 0.5 + 0.5;
 
+	}
 
+};
 
+
 
+var helpers_easing = {
 
+	effects: effects
 
+};
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.easing.effects instead.
 
+ * @function Chart.helpers.easingEffects
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers_core.easingEffects = effects;
 
+
 
+var PI = Math.PI;
 
+var RAD_PER_DEG = PI / 180;
 
+var DOUBLE_PI = PI * 2;
 
+var HALF_PI = PI / 2;
 
+var QUARTER_PI = PI / 4;
 
+var TWO_THIRDS_PI = PI * 2 / 3;
 
+
 
+/**
 
+ * @namespace Chart.helpers.canvas
 
+ */
 
+var exports$1 = {
 
+	/**
 
+	 * Clears the entire canvas associated to the given `chart`.
 
+	 * @param {Chart} chart - The chart for which to clear the canvas.
 
+	 */
 
+	clear: function(chart) {
 
+		chart.ctx.clearRect(0, 0, chart.width, chart.height);
 
+	},
 
+
 
+	/**
 
+	 * Creates a "path" for a rectangle with rounded corners at position (x, y) with a
 
+	 * given size (width, height) and the same `radius` for all corners.
 
+	 * @param {CanvasRenderingContext2D} ctx - The canvas 2D Context.
 
+	 * @param {number} x - The x axis of the coordinate for the rectangle starting point.
 
+	 * @param {number} y - The y axis of the coordinate for the rectangle starting point.
 
+	 * @param {number} width - The rectangle's width.
 
+	 * @param {number} height - The rectangle's height.
 
+	 * @param {number} radius - The rounded amount (in pixels) for the four corners.
 
+	 * @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object?
 
+	 */
 
+	roundedRect: function(ctx, x, y, width, height, radius) {
 
+		if (radius) {
 
+			var r = Math.min(radius, height / 2, width / 2);
 
+			var left = x + r;
 
+			var top = y + r;
 
+			var right = x + width - r;
 
+			var bottom = y + height - r;
 
+
 
+			ctx.moveTo(x, top);
 
+			if (left < right && top < bottom) {
 
+				ctx.arc(left, top, r, -PI, -HALF_PI);
 
+				ctx.arc(right, top, r, -HALF_PI, 0);
 
+				ctx.arc(right, bottom, r, 0, HALF_PI);
 
+				ctx.arc(left, bottom, r, HALF_PI, PI);
 
+			} else if (left < right) {
 
+				ctx.moveTo(left, y);
 
+				ctx.arc(right, top, r, -HALF_PI, HALF_PI);
 
+				ctx.arc(left, top, r, HALF_PI, PI + HALF_PI);
 
+			} else if (top < bottom) {
 
+				ctx.arc(left, top, r, -PI, 0);
 
+				ctx.arc(left, bottom, r, 0, PI);
 
+			} else {
 
+				ctx.arc(left, top, r, -PI, PI);
 
+			}
 
+			ctx.closePath();
 
+			ctx.moveTo(x, y);
 
+		} else {
 
+			ctx.rect(x, y, width, height);
 
+		}
 
+	},
 
+
 
+	drawPoint: function(ctx, style, radius, x, y, rotation) {
 
+		var type, xOffset, yOffset, size, cornerRadius;
 
+		var rad = (rotation || 0) * RAD_PER_DEG;
 
+
 
+		if (style && typeof style === 'object') {
 
+			type = style.toString();
 
+			if (type === '[object HTMLImageElement]' || type === '[object HTMLCanvasElement]') {
 
+				ctx.drawImage(style, x - style.width / 2, y - style.height / 2, style.width, style.height);
 
+				return;
 
+			}
 
+		}
 
+
 
+		if (isNaN(radius) || radius <= 0) {
 
+			return;
 
+		}
 
+
 
+		ctx.beginPath();
 
+
 
+		switch (style) {
 
+		// Default includes circle
 
+		default:
 
+			ctx.arc(x, y, radius, 0, DOUBLE_PI);
 
+			ctx.closePath();
 
+			break;
 
+		case 'triangle':
 
+			ctx.moveTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
 
+			rad += TWO_THIRDS_PI;
 
+			ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
 
+			rad += TWO_THIRDS_PI;
 
+			ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
 
+			ctx.closePath();
 
+			break;
 
+		case 'rectRounded':
 
+			// NOTE: the rounded rect implementation changed to use `arc` instead of
 
+			// `quadraticCurveTo` since it generates better results when rect is
 
+			// almost a circle. 0.516 (instead of 0.5) produces results with visually
 
+			// closer proportion to the previous impl and it is inscribed in the
 
+			// circle with `radius`. For more details, see the following PRs:
 
+			// https://github.com/chartjs/Chart.js/issues/5597
 
+			// https://github.com/chartjs/Chart.js/issues/5858
 
+			cornerRadius = radius * 0.516;
 
+			size = radius - cornerRadius;
 
+			xOffset = Math.cos(rad + QUARTER_PI) * size;
 
+			yOffset = Math.sin(rad + QUARTER_PI) * size;
 
+			ctx.arc(x - xOffset, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);
 
+			ctx.arc(x + yOffset, y - xOffset, cornerRadius, rad - HALF_PI, rad);
 
+			ctx.arc(x + xOffset, y + yOffset, cornerRadius, rad, rad + HALF_PI);
 
+			ctx.arc(x - yOffset, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);
 
+			ctx.closePath();
 
+			break;
 
+		case 'rect':
 
+			if (!rotation) {
 
+				size = Math.SQRT1_2 * radius;
 
+				ctx.rect(x - size, y - size, 2 * size, 2 * size);
 
+				break;
 
+			}
 
+			rad += QUARTER_PI;
 
+			/* falls through */
 
+		case 'rectRot':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			ctx.closePath();
 
+			break;
 
+		case 'crossRot':
 
+			rad += QUARTER_PI;
 
+			/* falls through */
 
+		case 'cross':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.moveTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			break;
 
+		case 'star':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.moveTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			rad += QUARTER_PI;
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			ctx.moveTo(x + yOffset, y - xOffset);
 
+			ctx.lineTo(x - yOffset, y + xOffset);
 
+			break;
 
+		case 'line':
 
+			xOffset = Math.cos(rad) * radius;
 
+			yOffset = Math.sin(rad) * radius;
 
+			ctx.moveTo(x - xOffset, y - yOffset);
 
+			ctx.lineTo(x + xOffset, y + yOffset);
 
+			break;
 
+		case 'dash':
 
+			ctx.moveTo(x, y);
 
+			ctx.lineTo(x + Math.cos(rad) * radius, y + Math.sin(rad) * radius);
 
+			break;
 
+		}
 
+
 
+		ctx.fill();
 
+		ctx.stroke();
 
+	},
 
+
 
+	/**
 
+	 * Returns true if the point is inside the rectangle
 
+	 * @param {object} point - The point to test
 
+	 * @param {object} area - The rectangle
 
+	 * @returns {boolean}
 
+	 * @private
 
+	 */
 
+	_isPointInArea: function(point, area) {
 
+		var epsilon = 1e-6; // 1e-6 is margin in pixels for accumulated error.
 
+
 
+		return point.x > area.left - epsilon && point.x < area.right + epsilon &&
 
+			point.y > area.top - epsilon && point.y < area.bottom + epsilon;
 
+	},
 
+
 
+	clipArea: function(ctx, area) {
 
+		ctx.save();
 
+		ctx.beginPath();
 
+		ctx.rect(area.left, area.top, area.right - area.left, area.bottom - area.top);
 
+		ctx.clip();
 
+	},
 
+
 
+	unclipArea: function(ctx) {
 
+		ctx.restore();
 
+	},
 
+
 
+	lineTo: function(ctx, previous, target, flip) {
 
+		var stepped = target.steppedLine;
 
+		if (stepped) {
 
+			if (stepped === 'middle') {
 
+				var midpoint = (previous.x + target.x) / 2.0;
 
+				ctx.lineTo(midpoint, flip ? target.y : previous.y);
 
+				ctx.lineTo(midpoint, flip ? previous.y : target.y);
 
+			} else if ((stepped === 'after' && !flip) || (stepped !== 'after' && flip)) {
 
+				ctx.lineTo(previous.x, target.y);
 
+			} else {
 
+				ctx.lineTo(target.x, previous.y);
 
+			}
 
+			ctx.lineTo(target.x, target.y);
 
+			return;
 
+		}
 
+
 
+		if (!target.tension) {
 
+			ctx.lineTo(target.x, target.y);
 
+			return;
 
+		}
 
+
 
+		ctx.bezierCurveTo(
 
+			flip ? previous.controlPointPreviousX : previous.controlPointNextX,
 
+			flip ? previous.controlPointPreviousY : previous.controlPointNextY,
 
+			flip ? target.controlPointNextX : target.controlPointPreviousX,
 
+			flip ? target.controlPointNextY : target.controlPointPreviousY,
 
+			target.x,
 
+			target.y);
 
+	}
 
+};
 
+
 
+var helpers_canvas = exports$1;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.canvas.clear instead.
 
+ * @namespace Chart.helpers.clear
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers_core.clear = exports$1.clear;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.canvas.roundedRect instead.
 
+ * @namespace Chart.helpers.drawRoundedRectangle
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers_core.drawRoundedRectangle = function(ctx) {
 
+	ctx.beginPath();
 
+	exports$1.roundedRect.apply(exports$1, arguments);
 
+};
 
+
 
+var defaults = {
 
+	/**
 
+	 * @private
 
+	 */
 
+	_set: function(scope, values) {
 
+		return helpers_core.merge(this[scope] || (this[scope] = {}), values);
 
+	}
 
+};
 
+
 
+defaults._set('global', {
 
+	defaultColor: 'rgba(0,0,0,0.1)',
 
+	defaultFontColor: '#666',
 
+	defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
+	defaultFontSize: 12,
 
+	defaultFontStyle: 'normal',
 
+	defaultLineHeight: 1.2,
 
+	showLines: true
 
+});
 
+
 
+var core_defaults = defaults;
 
+
 
+var valueOrDefault = helpers_core.valueOrDefault;
 
+
 
+/**
 
+ * Converts the given font object into a CSS font string.
 
+ * @param {object} font - A font object.
 
+ * @return {string} The CSS font string. See https://developer.mozilla.org/en-US/docs/Web/CSS/font
 
+ * @private
 
+ */
 
+function toFontString(font) {
 
+	if (!font || helpers_core.isNullOrUndef(font.size) || helpers_core.isNullOrUndef(font.family)) {
 
+		return null;
 
+	}
 
+
 
+	return (font.style ? font.style + ' ' : '')
 
+		+ (font.weight ? font.weight + ' ' : '')
 
+		+ font.size + 'px '
 
+		+ font.family;
 
+}
 
+
 
+/**
 
+ * @alias Chart.helpers.options
 
+ * @namespace
 
+ */
 
+var helpers_options = {
 
+	/**
 
+	 * Converts the given line height `value` in pixels for a specific font `size`.
 
+	 * @param {number|string} value - The lineHeight to parse (eg. 1.6, '14px', '75%', '1.6em').
 
+	 * @param {number} size - The font size (in pixels) used to resolve relative `value`.
 
+	 * @returns {number} The effective line height in pixels (size * 1.2 if value is invalid).
 
+	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
 
+	 * @since 2.7.0
 
+	 */
 
+	toLineHeight: function(value, size) {
 
+		var matches = ('' + value).match(/^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/);
 
+		if (!matches || matches[1] === 'normal') {
 
+			return size * 1.2;
 
+		}
 
+
 
+		value = +matches[2];
 
+
 
+		switch (matches[3]) {
 
+		case 'px':
 
+			return value;
 
+		case '%':
 
+			value /= 100;
 
+			break;
 
+		default:
 
+			break;
 
+		}
 
+
 
+		return size * value;
 
+	},
 
+
 
+	/**
 
+	 * Converts the given value into a padding object with pre-computed width/height.
 
+	 * @param {number|object} value - If a number, set the value to all TRBL component,
 
+	 *  else, if and object, use defined properties and sets undefined ones to 0.
 
+	 * @returns {object} The padding values (top, right, bottom, left, width, height)
 
+	 * @since 2.7.0
 
+	 */
 
+	toPadding: function(value) {
 
+		var t, r, b, l;
 
+
 
+		if (helpers_core.isObject(value)) {
 
+			t = +value.top || 0;
 
+			r = +value.right || 0;
 
+			b = +value.bottom || 0;
 
+			l = +value.left || 0;
 
+		} else {
 
+			t = r = b = l = +value || 0;
 
+		}
 
+
 
+		return {
 
+			top: t,
 
+			right: r,
 
+			bottom: b,
 
+			left: l,
 
+			height: t + b,
 
+			width: l + r
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Parses font options and returns the font object.
 
+	 * @param {object} options - A object that contains font options to be parsed.
 
+	 * @return {object} The font object.
 
+	 * @todo Support font.* options and renamed to toFont().
 
+	 * @private
 
+	 */
 
+	_parseFont: function(options) {
 
+		var globalDefaults = core_defaults.global;
 
+		var size = valueOrDefault(options.fontSize, globalDefaults.defaultFontSize);
 
+		var font = {
 
+			family: valueOrDefault(options.fontFamily, globalDefaults.defaultFontFamily),
 
+			lineHeight: helpers_core.options.toLineHeight(valueOrDefault(options.lineHeight, globalDefaults.defaultLineHeight), size),
 
+			size: size,
 
+			style: valueOrDefault(options.fontStyle, globalDefaults.defaultFontStyle),
 
+			weight: null,
 
+			string: ''
 
+		};
 
+
 
+		font.string = toFontString(font);
 
+		return font;
 
+	},
 
+
 
+	/**
 
+	 * Evaluates the given `inputs` sequentially and returns the first defined value.
 
+	 * @param {Array} inputs - An array of values, falling back to the last value.
 
+	 * @param {object} [context] - If defined and the current value is a function, the value
 
+	 * is called with `context` as first argument and the result becomes the new input.
 
+	 * @param {number} [index] - If defined and the current value is an array, the value
 
+	 * at `index` become the new input.
 
+	 * @since 2.7.0
 
+	 */
 
+	resolve: function(inputs, context, index) {
 
+		var i, ilen, value;
 
+
 
+		for (i = 0, ilen = inputs.length; i < ilen; ++i) {
 
+			value = inputs[i];
 
+			if (value === undefined) {
 
+				continue;
 
+			}
 
+			if (context !== undefined && typeof value === 'function') {
 
+				value = value(context);
 
+			}
 
+			if (index !== undefined && helpers_core.isArray(value)) {
 
+				value = value[index];
 
+			}
 
+			if (value !== undefined) {
 
+				return value;
 
+			}
 
+		}
 
+	}
 
+};
 
+
 
+var helpers$1 = helpers_core;
 
+var easing = helpers_easing;
 
+var canvas = helpers_canvas;
 
+var options = helpers_options;
 
+helpers$1.easing = easing;
 
+helpers$1.canvas = canvas;
 
+helpers$1.options = options;
 
+
 
+function interpolate(start, view, model, ease) {
 
+	var keys = Object.keys(model);
 
+	var i, ilen, key, actual, origin, target, type, c0, c1;
 
+
 
+	for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+		key = keys[i];
 
+
 
+		target = model[key];
 
+
 
+		// if a value is added to the model after pivot() has been called, the view
 
+		// doesn't contain it, so let's initialize the view to the target value.
 
+		if (!view.hasOwnProperty(key)) {
 
+			view[key] = target;
 
+		}
 
+
 
+		actual = view[key];
 
+
 
+		if (actual === target || key[0] === '_') {
 
+			continue;
 
+		}
 
+
 
+		if (!start.hasOwnProperty(key)) {
 
+			start[key] = actual;
 
+		}
 
+
 
+		origin = start[key];
 
+
 
+		type = typeof target;
 
+
 
+		if (type === typeof origin) {
 
+			if (type === 'string') {
 
+				c0 = chartjsColor(origin);
 
+				if (c0.valid) {
 
+					c1 = chartjsColor(target);
 
+					if (c1.valid) {
 
+						view[key] = c1.mix(c0, ease).rgbString();
 
+						continue;
 
+					}
 
+				}
 
+			} else if (helpers$1.isFinite(origin) && helpers$1.isFinite(target)) {
 
+				view[key] = origin + (target - origin) * ease;
 
+				continue;
 
+			}
 
+		}
 
+
 
+		view[key] = target;
 
+	}
 
+}
 
+
 
+var Element = function(configuration) {
 
+	helpers$1.extend(this, configuration);
 
+	this.initialize.apply(this, arguments);
 
+};
 
+
 
+helpers$1.extend(Element.prototype, {
 
+
 
+	initialize: function() {
 
+		this.hidden = false;
 
+	},
 
+
 
+	pivot: function() {
 
+		var me = this;
 
+		if (!me._view) {
 
+			me._view = helpers$1.clone(me._model);
 
+		}
 
+		me._start = {};
 
+		return me;
 
+	},
 
+
 
+	transition: function(ease) {
 
+		var me = this;
 
+		var model = me._model;
 
+		var start = me._start;
 
+		var view = me._view;
 
+
 
+		// No animation -> No Transition
 
+		if (!model || ease === 1) {
 
+			me._view = model;
 
+			me._start = null;
 
+			return me;
 
+		}
 
+
 
+		if (!view) {
 
+			view = me._view = {};
 
+		}
 
+
 
+		if (!start) {
 
+			start = me._start = {};
 
+		}
 
+
 
+		interpolate(start, view, model, ease);
 
+
 
+		return me;
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		return {
 
+			x: this._model.x,
 
+			y: this._model.y
 
+		};
 
+	},
 
+
 
+	hasValue: function() {
 
+		return helpers$1.isNumber(this._model.x) && helpers$1.isNumber(this._model.y);
 
+	}
 
+});
 
+
 
+Element.extend = helpers$1.inherits;
 
+
 
+var core_element = Element;
 
+
 
+var exports$2 = core_element.extend({
 
+	chart: null, // the animation associated chart instance
 
+	currentStep: 0, // the current animation step
 
+	numSteps: 60, // default number of steps
 
+	easing: '', // the easing to use for this animation
 
+	render: null, // render function used by the animation service
 
+
 
+	onAnimationProgress: null, // user specified callback to fire on each step of the animation
 
+	onAnimationComplete: null, // user specified callback to fire when the animation finishes
 
+});
 
+
 
+var core_animation = exports$2;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.Animation instead
 
+ * @prop Chart.Animation#animationObject
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ */
 
+Object.defineProperty(exports$2.prototype, 'animationObject', {
 
+	get: function() {
 
+		return this;
 
+	}
 
+});
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.Animation#chart instead
 
+ * @prop Chart.Animation#chartInstance
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ */
 
+Object.defineProperty(exports$2.prototype, 'chartInstance', {
 
+	get: function() {
 
+		return this.chart;
 
+	},
 
+	set: function(value) {
 
+		this.chart = value;
 
+	}
 
+});
 
+
 
+core_defaults._set('global', {
 
+	animation: {
 
+		duration: 1000,
 
+		easing: 'easeOutQuart',
 
+		onProgress: helpers$1.noop,
 
+		onComplete: helpers$1.noop
 
+	}
 
+});
 
+
 
+var core_animations = {
 
+	animations: [],
 
+	request: null,
 
+
 
+	/**
 
+	 * @param {Chart} chart - The chart to animate.
 
+	 * @param {Chart.Animation} animation - The animation that we will animate.
 
+	 * @param {number} duration - The animation duration in ms.
 
+	 * @param {boolean} lazy - if true, the chart is not marked as animating to enable more responsive interactions
 
+	 */
 
+	addAnimation: function(chart, animation, duration, lazy) {
 
+		var animations = this.animations;
 
+		var i, ilen;
 
+
 
+		animation.chart = chart;
 
+		animation.startTime = Date.now();
 
+		animation.duration = duration;
 
+
 
+		if (!lazy) {
 
+			chart.animating = true;
 
+		}
 
+
 
+		for (i = 0, ilen = animations.length; i < ilen; ++i) {
 
+			if (animations[i].chart === chart) {
 
+				animations[i] = animation;
 
+				return;
 
+			}
 
+		}
 
+
 
+		animations.push(animation);
 
+
 
+		// If there are no animations queued, manually kickstart a digest, for lack of a better word
 
+		if (animations.length === 1) {
 
+			this.requestAnimationFrame();
 
+		}
 
+	},
 
+
 
+	cancelAnimation: function(chart) {
 
+		var index = helpers$1.findIndex(this.animations, function(animation) {
 
+			return animation.chart === chart;
 
+		});
 
+
 
+		if (index !== -1) {
 
+			this.animations.splice(index, 1);
 
+			chart.animating = false;
 
+		}
 
+	},
 
+
 
+	requestAnimationFrame: function() {
 
+		var me = this;
 
+		if (me.request === null) {
 
+			// Skip animation frame requests until the active one is executed.
 
+			// This can happen when processing mouse events, e.g. 'mousemove'
 
+			// and 'mouseout' events will trigger multiple renders.
 
+			me.request = helpers$1.requestAnimFrame.call(window, function() {
 
+				me.request = null;
 
+				me.startDigest();
 
+			});
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	startDigest: function() {
 
+		var me = this;
 
+
 
+		me.advance();
 
+
 
+		// Do we have more stuff to animate?
 
+		if (me.animations.length > 0) {
 
+			me.requestAnimationFrame();
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	advance: function() {
 
+		var animations = this.animations;
 
+		var animation, chart, numSteps, nextStep;
 
+		var i = 0;
 
+
 
+		// 1 animation per chart, so we are looping charts here
 
+		while (i < animations.length) {
 
+			animation = animations[i];
 
+			chart = animation.chart;
 
+			numSteps = animation.numSteps;
 
+
 
+			// Make sure that currentStep starts at 1
 
+			// https://github.com/chartjs/Chart.js/issues/6104
 
+			nextStep = Math.floor((Date.now() - animation.startTime) / animation.duration * numSteps) + 1;
 
+			animation.currentStep = Math.min(nextStep, numSteps);
 
+
 
+			helpers$1.callback(animation.render, [chart, animation], chart);
 
+			helpers$1.callback(animation.onAnimationProgress, [animation], chart);
 
+
 
+			if (animation.currentStep >= numSteps) {
 
+				helpers$1.callback(animation.onAnimationComplete, [animation], chart);
 
+				chart.animating = false;
 
+				animations.splice(i, 1);
 
+			} else {
 
+				++i;
 
+			}
 
+		}
 
+	}
 
+};
 
+
 
+var resolve = helpers$1.options.resolve;
 
+
 
+var arrayEvents = ['push', 'pop', 'shift', 'splice', 'unshift'];
 
+
 
+/**
 
+ * Hooks the array methods that add or remove values ('push', pop', 'shift', 'splice',
 
+ * 'unshift') and notify the listener AFTER the array has been altered. Listeners are
 
+ * called on the 'onData*' callbacks (e.g. onDataPush, etc.) with same arguments.
 
+ */
 
+function listenArrayEvents(array, listener) {
 
+	if (array._chartjs) {
 
+		array._chartjs.listeners.push(listener);
 
+		return;
 
+	}
 
+
 
+	Object.defineProperty(array, '_chartjs', {
 
+		configurable: true,
 
+		enumerable: false,
 
+		value: {
 
+			listeners: [listener]
 
+		}
 
+	});
 
+
 
+	arrayEvents.forEach(function(key) {
 
+		var method = 'onData' + key.charAt(0).toUpperCase() + key.slice(1);
 
+		var base = array[key];
 
+
 
+		Object.defineProperty(array, key, {
 
+			configurable: true,
 
+			enumerable: false,
 
+			value: function() {
 
+				var args = Array.prototype.slice.call(arguments);
 
+				var res = base.apply(this, args);
 
+
 
+				helpers$1.each(array._chartjs.listeners, function(object) {
 
+					if (typeof object[method] === 'function') {
 
+						object[method].apply(object, args);
 
+					}
 
+				});
 
+
 
+				return res;
 
+			}
 
+		});
 
+	});
 
+}
 
+
 
+/**
 
+ * Removes the given array event listener and cleanup extra attached properties (such as
 
+ * the _chartjs stub and overridden methods) if array doesn't have any more listeners.
 
+ */
 
+function unlistenArrayEvents(array, listener) {
 
+	var stub = array._chartjs;
 
+	if (!stub) {
 
+		return;
 
+	}
 
+
 
+	var listeners = stub.listeners;
 
+	var index = listeners.indexOf(listener);
 
+	if (index !== -1) {
 
+		listeners.splice(index, 1);
 
+	}
 
+
 
+	if (listeners.length > 0) {
 
+		return;
 
+	}
 
+
 
+	arrayEvents.forEach(function(key) {
 
+		delete array[key];
 
+	});
 
+
 
+	delete array._chartjs;
 
+}
 
+
 
+// Base class for all dataset controllers (line, bar, etc)
 
+var DatasetController = function(chart, datasetIndex) {
 
+	this.initialize(chart, datasetIndex);
 
+};
 
+
 
+helpers$1.extend(DatasetController.prototype, {
 
+
 
+	/**
 
+	 * Element type used to generate a meta dataset (e.g. Chart.element.Line).
 
+	 * @type {Chart.core.element}
 
+	 */
 
+	datasetElementType: null,
 
+
 
+	/**
 
+	 * Element type used to generate a meta data (e.g. Chart.element.Point).
 
+	 * @type {Chart.core.element}
 
+	 */
 
+	dataElementType: null,
 
+
 
+	initialize: function(chart, datasetIndex) {
 
+		var me = this;
 
+		me.chart = chart;
 
+		me.index = datasetIndex;
 
+		me.linkScales();
 
+		me.addElements();
 
+	},
 
+
 
+	updateIndex: function(datasetIndex) {
 
+		this.index = datasetIndex;
 
+	},
 
+
 
+	linkScales: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var dataset = me.getDataset();
 
+
 
+		if (meta.xAxisID === null || !(meta.xAxisID in me.chart.scales)) {
 
+			meta.xAxisID = dataset.xAxisID || me.chart.options.scales.xAxes[0].id;
 
+		}
 
+		if (meta.yAxisID === null || !(meta.yAxisID in me.chart.scales)) {
 
+			meta.yAxisID = dataset.yAxisID || me.chart.options.scales.yAxes[0].id;
 
+		}
 
+	},
 
+
 
+	getDataset: function() {
 
+		return this.chart.data.datasets[this.index];
 
+	},
 
+
 
+	getMeta: function() {
 
+		return this.chart.getDatasetMeta(this.index);
 
+	},
 
+
 
+	getScaleForId: function(scaleID) {
 
+		return this.chart.scales[scaleID];
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getValueScaleId: function() {
 
+		return this.getMeta().yAxisID;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getIndexScaleId: function() {
 
+		return this.getMeta().xAxisID;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getValueScale: function() {
 
+		return this.getScaleForId(this._getValueScaleId());
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getIndexScale: function() {
 
+		return this.getScaleForId(this._getIndexScaleId());
 
+	},
 
+
 
+	reset: function() {
 
+		this.update(true);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	destroy: function() {
 
+		if (this._data) {
 
+			unlistenArrayEvents(this._data, this);
 
+		}
 
+	},
 
+
 
+	createMetaDataset: function() {
 
+		var me = this;
 
+		var type = me.datasetElementType;
 
+		return type && new type({
 
+			_chart: me.chart,
 
+			_datasetIndex: me.index
 
+		});
 
+	},
 
+
 
+	createMetaData: function(index) {
 
+		var me = this;
 
+		var type = me.dataElementType;
 
+		return type && new type({
 
+			_chart: me.chart,
 
+			_datasetIndex: me.index,
 
+			_index: index
 
+		});
 
+	},
 
+
 
+	addElements: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var data = me.getDataset().data || [];
 
+		var metaData = meta.data;
 
+		var i, ilen;
 
+
 
+		for (i = 0, ilen = data.length; i < ilen; ++i) {
 
+			metaData[i] = metaData[i] || me.createMetaData(i);
 
+		}
 
+
 
+		meta.dataset = meta.dataset || me.createMetaDataset();
 
+	},
 
+
 
+	addElementAndReset: function(index) {
 
+		var element = this.createMetaData(index);
 
+		this.getMeta().data.splice(index, 0, element);
 
+		this.updateElement(element, index, true);
 
+	},
 
+
 
+	buildOrUpdateElements: function() {
 
+		var me = this;
 
+		var dataset = me.getDataset();
 
+		var data = dataset.data || (dataset.data = []);
 
+
 
+		// In order to correctly handle data addition/deletion animation (an thus simulate
 
+		// real-time charts), we need to monitor these data modifications and synchronize
 
+		// the internal meta data accordingly.
 
+		if (me._data !== data) {
 
+			if (me._data) {
 
+				// This case happens when the user replaced the data array instance.
 
+				unlistenArrayEvents(me._data, me);
 
+			}
 
+
 
+			if (data && Object.isExtensible(data)) {
 
+				listenArrayEvents(data, me);
 
+			}
 
+			me._data = data;
 
+		}
 
+
 
+		// Re-sync meta data in case the user replaced the data array or if we missed
 
+		// any updates and so make sure that we handle number of datapoints changing.
 
+		me.resyncElements();
 
+	},
 
+
 
+	update: helpers$1.noop,
 
+
 
+	transition: function(easingValue) {
 
+		var meta = this.getMeta();
 
+		var elements = meta.data || [];
 
+		var ilen = elements.length;
 
+		var i = 0;
 
+
 
+		for (; i < ilen; ++i) {
 
+			elements[i].transition(easingValue);
 
+		}
 
+
 
+		if (meta.dataset) {
 
+			meta.dataset.transition(easingValue);
 
+		}
 
+	},
 
+
 
+	draw: function() {
 
+		var meta = this.getMeta();
 
+		var elements = meta.data || [];
 
+		var ilen = elements.length;
 
+		var i = 0;
 
+
 
+		if (meta.dataset) {
 
+			meta.dataset.draw();
 
+		}
 
+
 
+		for (; i < ilen; ++i) {
 
+			elements[i].draw();
 
+		}
 
+	},
 
+
 
+	removeHoverStyle: function(element) {
 
+		helpers$1.merge(element._model, element.$previousStyle || {});
 
+		delete element.$previousStyle;
 
+	},
 
+
 
+	setHoverStyle: function(element) {
 
+		var dataset = this.chart.data.datasets[element._datasetIndex];
 
+		var index = element._index;
 
+		var custom = element.custom || {};
 
+		var model = element._model;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		element.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth
 
+		};
 
+
 
+		model.backgroundColor = resolve([custom.hoverBackgroundColor, dataset.hoverBackgroundColor, getHoverColor(model.backgroundColor)], undefined, index);
 
+		model.borderColor = resolve([custom.hoverBorderColor, dataset.hoverBorderColor, getHoverColor(model.borderColor)], undefined, index);
 
+		model.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	resyncElements: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var data = me.getDataset().data;
 
+		var numMeta = meta.data.length;
 
+		var numData = data.length;
 
+
 
+		if (numData < numMeta) {
 
+			meta.data.splice(numData, numMeta - numData);
 
+		} else if (numData > numMeta) {
 
+			me.insertElements(numMeta, numData - numMeta);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	insertElements: function(start, count) {
 
+		for (var i = 0; i < count; ++i) {
 
+			this.addElementAndReset(start + i);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataPush: function() {
 
+		var count = arguments.length;
 
+		this.insertElements(this.getDataset().data.length - count, count);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataPop: function() {
 
+		this.getMeta().data.pop();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataShift: function() {
 
+		this.getMeta().data.shift();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataSplice: function(start, count) {
 
+		this.getMeta().data.splice(start, count);
 
+		this.insertElements(start, arguments.length - 2);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	onDataUnshift: function() {
 
+		this.insertElements(0, arguments.length);
 
+	}
 
+});
 
+
 
+DatasetController.extend = helpers$1.inherits;
 
+
 
+var core_datasetController = DatasetController;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		arc: {
 
+			backgroundColor: core_defaults.global.defaultColor,
 
+			borderColor: '#fff',
 
+			borderWidth: 2,
 
+			borderAlign: 'center'
 
+		}
 
+	}
 
+});
 
+
 
+var element_arc = core_element.extend({
 
+	inLabelRange: function(mouseX) {
 
+		var vm = this._view;
 
+
 
+		if (vm) {
 
+			return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
 
+		}
 
+		return false;
 
+	},
 
+
 
+	inRange: function(chartX, chartY) {
 
+		var vm = this._view;
 
+
 
+		if (vm) {
 
+			var pointRelativePosition = helpers$1.getAngleFromPoint(vm, {x: chartX, y: chartY});
 
+			var	angle = pointRelativePosition.angle;
 
+			var distance = pointRelativePosition.distance;
 
+
 
+			// Sanitise angle range
 
+			var startAngle = vm.startAngle;
 
+			var endAngle = vm.endAngle;
 
+			while (endAngle < startAngle) {
 
+				endAngle += 2.0 * Math.PI;
 
+			}
 
+			while (angle > endAngle) {
 
+				angle -= 2.0 * Math.PI;
 
+			}
 
+			while (angle < startAngle) {
 
+				angle += 2.0 * Math.PI;
 
+			}
 
+
 
+			// Check if within the range of the open/close angle
 
+			var betweenAngles = (angle >= startAngle && angle <= endAngle);
 
+			var withinRadius = (distance >= vm.innerRadius && distance <= vm.outerRadius);
 
+
 
+			return (betweenAngles && withinRadius);
 
+		}
 
+		return false;
 
+	},
 
+
 
+	getCenterPoint: function() {
 
+		var vm = this._view;
 
+		var halfAngle = (vm.startAngle + vm.endAngle) / 2;
 
+		var halfRadius = (vm.innerRadius + vm.outerRadius) / 2;
 
+		return {
 
+			x: vm.x + Math.cos(halfAngle) * halfRadius,
 
+			y: vm.y + Math.sin(halfAngle) * halfRadius
 
+		};
 
+	},
 
+
 
+	getArea: function() {
 
+		var vm = this._view;
 
+		return Math.PI * ((vm.endAngle - vm.startAngle) / (2 * Math.PI)) * (Math.pow(vm.outerRadius, 2) - Math.pow(vm.innerRadius, 2));
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		var vm = this._view;
 
+		var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2);
 
+		var rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;
 
+
 
+		return {
 
+			x: vm.x + (Math.cos(centreAngle) * rangeFromCentre),
 
+			y: vm.y + (Math.sin(centreAngle) * rangeFromCentre)
 
+		};
 
+	},
 
+
 
+	draw: function() {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+		var sA = vm.startAngle;
 
+		var eA = vm.endAngle;
 
+		var pixelMargin = (vm.borderAlign === 'inner') ? 0.33 : 0;
 
+		var angleMargin;
 
+
 
+		ctx.save();
 
+
 
+		ctx.beginPath();
 
+		ctx.arc(vm.x, vm.y, Math.max(vm.outerRadius - pixelMargin, 0), sA, eA);
 
+		ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
 
+		ctx.closePath();
 
+
 
+		ctx.fillStyle = vm.backgroundColor;
 
+		ctx.fill();
 
+
 
+		if (vm.borderWidth) {
 
+			if (vm.borderAlign === 'inner') {
 
+				// Draw an inner border by cliping the arc and drawing a double-width border
 
+				// Enlarge the clipping arc by 0.33 pixels to eliminate glitches between borders
 
+				ctx.beginPath();
 
+				angleMargin = pixelMargin / vm.outerRadius;
 
+				ctx.arc(vm.x, vm.y, vm.outerRadius, sA - angleMargin, eA + angleMargin);
 
+				if (vm.innerRadius > pixelMargin) {
 
+					angleMargin = pixelMargin / vm.innerRadius;
 
+					ctx.arc(vm.x, vm.y, vm.innerRadius - pixelMargin, eA + angleMargin, sA - angleMargin, true);
 
+				} else {
 
+					ctx.arc(vm.x, vm.y, pixelMargin, eA + Math.PI / 2, sA - Math.PI / 2);
 
+				}
 
+				ctx.closePath();
 
+				ctx.clip();
 
+
 
+				ctx.beginPath();
 
+				ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
 
+				ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
 
+				ctx.closePath();
 
+
 
+				ctx.lineWidth = vm.borderWidth * 2;
 
+				ctx.lineJoin = 'round';
 
+			} else {
 
+				ctx.lineWidth = vm.borderWidth;
 
+				ctx.lineJoin = 'bevel';
 
+			}
 
+
 
+			ctx.strokeStyle = vm.borderColor;
 
+			ctx.stroke();
 
+		}
 
+
 
+		ctx.restore();
 
+	}
 
+});
 
+
 
+var valueOrDefault$1 = helpers$1.valueOrDefault;
 
+
 
+var defaultColor = core_defaults.global.defaultColor;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		line: {
 
+			tension: 0.4,
 
+			backgroundColor: defaultColor,
 
+			borderWidth: 3,
 
+			borderColor: defaultColor,
 
+			borderCapStyle: 'butt',
 
+			borderDash: [],
 
+			borderDashOffset: 0.0,
 
+			borderJoinStyle: 'miter',
 
+			capBezierPoints: true,
 
+			fill: true, // do we fill in the area between the line and its base axis
 
+		}
 
+	}
 
+});
 
+
 
+var element_line = core_element.extend({
 
+	draw: function() {
 
+		var me = this;
 
+		var vm = me._view;
 
+		var ctx = me._chart.ctx;
 
+		var spanGaps = vm.spanGaps;
 
+		var points = me._children.slice(); // clone array
 
+		var globalDefaults = core_defaults.global;
 
+		var globalOptionLineElements = globalDefaults.elements.line;
 
+		var lastDrawnIndex = -1;
 
+		var index, current, previous, currentVM;
 
+
 
+		// If we are looping, adding the first point again
 
+		if (me._loop && points.length) {
 
+			points.push(points[0]);
 
+		}
 
+
 
+		ctx.save();
 
+
 
+		// Stroke Line Options
 
+		ctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle;
 
+
 
+		// IE 9 and 10 do not support line dash
 
+		if (ctx.setLineDash) {
 
+			ctx.setLineDash(vm.borderDash || globalOptionLineElements.borderDash);
 
+		}
 
+
 
+		ctx.lineDashOffset = valueOrDefault$1(vm.borderDashOffset, globalOptionLineElements.borderDashOffset);
 
+		ctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle;
 
+		ctx.lineWidth = valueOrDefault$1(vm.borderWidth, globalOptionLineElements.borderWidth);
 
+		ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;
 
+
 
+		// Stroke Line
 
+		ctx.beginPath();
 
+		lastDrawnIndex = -1;
 
+
 
+		for (index = 0; index < points.length; ++index) {
 
+			current = points[index];
 
+			previous = helpers$1.previousItem(points, index);
 
+			currentVM = current._view;
 
+
 
+			// First point moves to it's starting position no matter what
 
+			if (index === 0) {
 
+				if (!currentVM.skip) {
 
+					ctx.moveTo(currentVM.x, currentVM.y);
 
+					lastDrawnIndex = index;
 
+				}
 
+			} else {
 
+				previous = lastDrawnIndex === -1 ? previous : points[lastDrawnIndex];
 
+
 
+				if (!currentVM.skip) {
 
+					if ((lastDrawnIndex !== (index - 1) && !spanGaps) || lastDrawnIndex === -1) {
 
+						// There was a gap and this is the first point after the gap
 
+						ctx.moveTo(currentVM.x, currentVM.y);
 
+					} else {
 
+						// Line to next point
 
+						helpers$1.canvas.lineTo(ctx, previous._view, current._view);
 
+					}
 
+					lastDrawnIndex = index;
 
+				}
 
+			}
 
+		}
 
+
 
+		ctx.stroke();
 
+		ctx.restore();
 
+	}
 
+});
 
+
 
+var valueOrDefault$2 = helpers$1.valueOrDefault;
 
+
 
+var defaultColor$1 = core_defaults.global.defaultColor;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		point: {
 
+			radius: 3,
 
+			pointStyle: 'circle',
 
+			backgroundColor: defaultColor$1,
 
+			borderColor: defaultColor$1,
 
+			borderWidth: 1,
 
+			// Hover
 
+			hitRadius: 1,
 
+			hoverRadius: 4,
 
+			hoverBorderWidth: 1
 
+		}
 
+	}
 
+});
 
+
 
+function xRange(mouseX) {
 
+	var vm = this._view;
 
+	return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false;
 
+}
 
+
 
+function yRange(mouseY) {
 
+	var vm = this._view;
 
+	return vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false;
 
+}
 
+
 
+var element_point = core_element.extend({
 
+	inRange: function(mouseX, mouseY) {
 
+		var vm = this._view;
 
+		return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false;
 
+	},
 
+
 
+	inLabelRange: xRange,
 
+	inXRange: xRange,
 
+	inYRange: yRange,
 
+
 
+	getCenterPoint: function() {
 
+		var vm = this._view;
 
+		return {
 
+			x: vm.x,
 
+			y: vm.y
 
+		};
 
+	},
 
+
 
+	getArea: function() {
 
+		return Math.PI * Math.pow(this._view.radius, 2);
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		var vm = this._view;
 
+		return {
 
+			x: vm.x,
 
+			y: vm.y,
 
+			padding: vm.radius + vm.borderWidth
 
+		};
 
+	},
 
+
 
+	draw: function(chartArea) {
 
+		var vm = this._view;
 
+		var ctx = this._chart.ctx;
 
+		var pointStyle = vm.pointStyle;
 
+		var rotation = vm.rotation;
 
+		var radius = vm.radius;
 
+		var x = vm.x;
 
+		var y = vm.y;
 
+		var globalDefaults = core_defaults.global;
 
+		var defaultColor = globalDefaults.defaultColor; // eslint-disable-line no-shadow
 
+
 
+		if (vm.skip) {
 
+			return;
 
+		}
 
+
 
+		// Clipping for Points.
 
+		if (chartArea === undefined || helpers$1.canvas._isPointInArea(vm, chartArea)) {
 
+			ctx.strokeStyle = vm.borderColor || defaultColor;
 
+			ctx.lineWidth = valueOrDefault$2(vm.borderWidth, globalDefaults.elements.point.borderWidth);
 
+			ctx.fillStyle = vm.backgroundColor || defaultColor;
 
+			helpers$1.canvas.drawPoint(ctx, pointStyle, radius, x, y, rotation);
 
+		}
 
+	}
 
+});
 
+
 
+var defaultColor$2 = core_defaults.global.defaultColor;
 
+
 
+core_defaults._set('global', {
 
+	elements: {
 
+		rectangle: {
 
+			backgroundColor: defaultColor$2,
 
+			borderColor: defaultColor$2,
 
+			borderSkipped: 'bottom',
 
+			borderWidth: 0
 
+		}
 
+	}
 
+});
 
+
 
+function isVertical(vm) {
 
+	return vm && vm.width !== undefined;
 
+}
 
+
 
+/**
 
+ * Helper function to get the bounds of the bar regardless of the orientation
 
+ * @param bar {Chart.Element.Rectangle} the bar
 
+ * @return {Bounds} bounds of the bar
 
+ * @private
 
+ */
 
+function getBarBounds(vm) {
 
+	var x1, x2, y1, y2, half;
 
+
 
+	if (isVertical(vm)) {
 
+		half = vm.width / 2;
 
+		x1 = vm.x - half;
 
+		x2 = vm.x + half;
 
+		y1 = Math.min(vm.y, vm.base);
 
+		y2 = Math.max(vm.y, vm.base);
 
+	} else {
 
+		half = vm.height / 2;
 
+		x1 = Math.min(vm.x, vm.base);
 
+		x2 = Math.max(vm.x, vm.base);
 
+		y1 = vm.y - half;
 
+		y2 = vm.y + half;
 
+	}
 
+
 
+	return {
 
+		left: x1,
 
+		top: y1,
 
+		right: x2,
 
+		bottom: y2
 
+	};
 
+}
 
+
 
+function swap(orig, v1, v2) {
 
+	return orig === v1 ? v2 : orig === v2 ? v1 : orig;
 
+}
 
+
 
+function parseBorderSkipped(vm) {
 
+	var edge = vm.borderSkipped;
 
+	var res = {};
 
+
 
+	if (!edge) {
 
+		return res;
 
+	}
 
+
 
+	if (vm.horizontal) {
 
+		if (vm.base > vm.x) {
 
+			edge = swap(edge, 'left', 'right');
 
+		}
 
+	} else if (vm.base < vm.y) {
 
+		edge = swap(edge, 'bottom', 'top');
 
+	}
 
+
 
+	res[edge] = true;
 
+	return res;
 
+}
 
+
 
+function parseBorderWidth(vm, maxW, maxH) {
 
+	var value = vm.borderWidth;
 
+	var skip = parseBorderSkipped(vm);
 
+	var t, r, b, l;
 
+
 
+	if (helpers$1.isObject(value)) {
 
+		t = +value.top || 0;
 
+		r = +value.right || 0;
 
+		b = +value.bottom || 0;
 
+		l = +value.left || 0;
 
+	} else {
 
+		t = r = b = l = +value || 0;
 
+	}
 
+
 
+	return {
 
+		t: skip.top || (t < 0) ? 0 : t > maxH ? maxH : t,
 
+		r: skip.right || (r < 0) ? 0 : r > maxW ? maxW : r,
 
+		b: skip.bottom || (b < 0) ? 0 : b > maxH ? maxH : b,
 
+		l: skip.left || (l < 0) ? 0 : l > maxW ? maxW : l
 
+	};
 
+}
 
+
 
+function boundingRects(vm) {
 
+	var bounds = getBarBounds(vm);
 
+	var width = bounds.right - bounds.left;
 
+	var height = bounds.bottom - bounds.top;
 
+	var border = parseBorderWidth(vm, width / 2, height / 2);
 
+
 
+	return {
 
+		outer: {
 
+			x: bounds.left,
 
+			y: bounds.top,
 
+			w: width,
 
+			h: height
 
+		},
 
+		inner: {
 
+			x: bounds.left + border.l,
 
+			y: bounds.top + border.t,
 
+			w: width - border.l - border.r,
 
+			h: height - border.t - border.b
 
+		}
 
+	};
 
+}
 
+
 
+function inRange(vm, x, y) {
 
+	var skipX = x === null;
 
+	var skipY = y === null;
 
+	var bounds = !vm || (skipX && skipY) ? false : getBarBounds(vm);
 
+
 
+	return bounds
 
+		&& (skipX || x >= bounds.left && x <= bounds.right)
 
+		&& (skipY || y >= bounds.top && y <= bounds.bottom);
 
+}
 
+
 
+var element_rectangle = core_element.extend({
 
+	draw: function() {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+		var rects = boundingRects(vm);
 
+		var outer = rects.outer;
 
+		var inner = rects.inner;
 
+
 
+		ctx.fillStyle = vm.backgroundColor;
 
+		ctx.fillRect(outer.x, outer.y, outer.w, outer.h);
 
+
 
+		if (outer.w === inner.w && outer.h === inner.h) {
 
+			return;
 
+		}
 
+
 
+		ctx.save();
 
+		ctx.beginPath();
 
+		ctx.rect(outer.x, outer.y, outer.w, outer.h);
 
+		ctx.clip();
 
+		ctx.fillStyle = vm.borderColor;
 
+		ctx.rect(inner.x, inner.y, inner.w, inner.h);
 
+		ctx.fill('evenodd');
 
+		ctx.restore();
 
+	},
 
+
 
+	height: function() {
 
+		var vm = this._view;
 
+		return vm.base - vm.y;
 
+	},
 
+
 
+	inRange: function(mouseX, mouseY) {
 
+		return inRange(this._view, mouseX, mouseY);
 
+	},
 
+
 
+	inLabelRange: function(mouseX, mouseY) {
 
+		var vm = this._view;
 
+		return isVertical(vm)
 
+			? inRange(vm, mouseX, null)
 
+			: inRange(vm, null, mouseY);
 
+	},
 
+
 
+	inXRange: function(mouseX) {
 
+		return inRange(this._view, mouseX, null);
 
+	},
 
+
 
+	inYRange: function(mouseY) {
 
+		return inRange(this._view, null, mouseY);
 
+	},
 
+
 
+	getCenterPoint: function() {
 
+		var vm = this._view;
 
+		var x, y;
 
+		if (isVertical(vm)) {
 
+			x = vm.x;
 
+			y = (vm.y + vm.base) / 2;
 
+		} else {
 
+			x = (vm.x + vm.base) / 2;
 
+			y = vm.y;
 
+		}
 
+
 
+		return {x: x, y: y};
 
+	},
 
+
 
+	getArea: function() {
 
+		var vm = this._view;
 
+
 
+		return isVertical(vm)
 
+			? vm.width * Math.abs(vm.y - vm.base)
 
+			: vm.height * Math.abs(vm.x - vm.base);
 
+	},
 
+
 
+	tooltipPosition: function() {
 
+		var vm = this._view;
 
+		return {
 
+			x: vm.x,
 
+			y: vm.y
 
+		};
 
+	}
 
+});
 
+
 
+var elements = {};
 
+var Arc = element_arc;
 
+var Line = element_line;
 
+var Point = element_point;
 
+var Rectangle = element_rectangle;
 
+elements.Arc = Arc;
 
+elements.Line = Line;
 
+elements.Point = Point;
 
+elements.Rectangle = Rectangle;
 
+
 
+var resolve$1 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('bar', {
 
+	hover: {
 
+		mode: 'label'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'category',
 
+			categoryPercentage: 0.8,
 
+			barPercentage: 0.9,
 
+			offset: true,
 
+			gridLines: {
 
+				offsetGridLines: true
 
+			}
 
+		}],
 
+
 
+		yAxes: [{
 
+			type: 'linear'
 
+		}]
 
+	}
 
+});
 
+
 
+/**
 
+ * Computes the "optimal" sample size to maintain bars equally sized while preventing overlap.
 
+ * @private
 
+ */
 
+function computeMinSampleSize(scale, pixels) {
 
+	var min = scale.isHorizontal() ? scale.width : scale.height;
 
+	var ticks = scale.getTicks();
 
+	var prev, curr, i, ilen;
 
+
 
+	for (i = 1, ilen = pixels.length; i < ilen; ++i) {
 
+		min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
 
+	}
 
+
 
+	for (i = 0, ilen = ticks.length; i < ilen; ++i) {
 
+		curr = scale.getPixelForTick(i);
 
+		min = i > 0 ? Math.min(min, curr - prev) : min;
 
+		prev = curr;
 
+	}
 
+
 
+	return min;
 
+}
 
+
 
+/**
 
+ * Computes an "ideal" category based on the absolute bar thickness or, if undefined or null,
 
+ * uses the smallest interval (see computeMinSampleSize) that prevents bar overlapping. This
 
+ * mode currently always generates bars equally sized (until we introduce scriptable options?).
 
+ * @private
 
+ */
 
+function computeFitCategoryTraits(index, ruler, options) {
 
+	var thickness = options.barThickness;
 
+	var count = ruler.stackCount;
 
+	var curr = ruler.pixels[index];
 
+	var size, ratio;
 
+
 
+	if (helpers$1.isNullOrUndef(thickness)) {
 
+		size = ruler.min * options.categoryPercentage;
 
+		ratio = options.barPercentage;
 
+	} else {
 
+		// When bar thickness is enforced, category and bar percentages are ignored.
 
+		// Note(SB): we could add support for relative bar thickness (e.g. barThickness: '50%')
 
+		// and deprecate barPercentage since this value is ignored when thickness is absolute.
 
+		size = thickness * count;
 
+		ratio = 1;
 
+	}
 
+
 
+	return {
 
+		chunk: size / count,
 
+		ratio: ratio,
 
+		start: curr - (size / 2)
 
+	};
 
+}
 
+
 
+/**
 
+ * Computes an "optimal" category that globally arranges bars side by side (no gap when
 
+ * percentage options are 1), based on the previous and following categories. This mode
 
+ * generates bars with different widths when data are not evenly spaced.
 
+ * @private
 
+ */
 
+function computeFlexCategoryTraits(index, ruler, options) {
 
+	var pixels = ruler.pixels;
 
+	var curr = pixels[index];
 
+	var prev = index > 0 ? pixels[index - 1] : null;
 
+	var next = index < pixels.length - 1 ? pixels[index + 1] : null;
 
+	var percent = options.categoryPercentage;
 
+	var start, size;
 
+
 
+	if (prev === null) {
 
+		// first data: its size is double based on the next point or,
 
+		// if it's also the last data, we use the scale size.
 
+		prev = curr - (next === null ? ruler.end - ruler.start : next - curr);
 
+	}
 
+
 
+	if (next === null) {
 
+		// last data: its size is also double based on the previous point.
 
+		next = curr + curr - prev;
 
+	}
 
+
 
+	start = curr - (curr - Math.min(prev, next)) / 2 * percent;
 
+	size = Math.abs(next - prev) / 2 * percent;
 
+
 
+	return {
 
+		chunk: size / ruler.stackCount,
 
+		ratio: options.barPercentage,
 
+		start: start
 
+	};
 
+}
 
+
 
+var controller_bar = core_datasetController.extend({
 
+
 
+	dataElementType: elements.Rectangle,
 
+
 
+	initialize: function() {
 
+		var me = this;
 
+		var meta;
 
+
 
+		core_datasetController.prototype.initialize.apply(me, arguments);
 
+
 
+		meta = me.getMeta();
 
+		meta.stack = me.getDataset().stack;
 
+		meta.bar = true;
 
+	},
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var rects = me.getMeta().data;
 
+		var i, ilen;
 
+
 
+		me._ruler = me.getRuler();
 
+
 
+		for (i = 0, ilen = rects.length; i < ilen; ++i) {
 
+			me.updateElement(rects[i], i, reset);
 
+		}
 
+	},
 
+
 
+	updateElement: function(rectangle, index, reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var dataset = me.getDataset();
 
+		var options = me._resolveElementOptions(rectangle, index);
 
+
 
+		rectangle._xScale = me.getScaleForId(meta.xAxisID);
 
+		rectangle._yScale = me.getScaleForId(meta.yAxisID);
 
+		rectangle._datasetIndex = me.index;
 
+		rectangle._index = index;
 
+		rectangle._model = {
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderSkipped: options.borderSkipped,
 
+			borderWidth: options.borderWidth,
 
+			datasetLabel: dataset.label,
 
+			label: me.chart.data.labels[index]
 
+		};
 
+
 
+		me._updateElementGeometry(rectangle, index, reset);
 
+
 
+		rectangle.pivot();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_updateElementGeometry: function(rectangle, index, reset) {
 
+		var me = this;
 
+		var model = rectangle._model;
 
+		var vscale = me._getValueScale();
 
+		var base = vscale.getBasePixel();
 
+		var horizontal = vscale.isHorizontal();
 
+		var ruler = me._ruler || me.getRuler();
 
+		var vpixels = me.calculateBarValuePixels(me.index, index);
 
+		var ipixels = me.calculateBarIndexPixels(me.index, index, ruler);
 
+
 
+		model.horizontal = horizontal;
 
+		model.base = reset ? base : vpixels.base;
 
+		model.x = horizontal ? reset ? base : vpixels.head : ipixels.center;
 
+		model.y = horizontal ? ipixels.center : reset ? base : vpixels.head;
 
+		model.height = horizontal ? ipixels.size : undefined;
 
+		model.width = horizontal ? undefined : ipixels.size;
 
+	},
 
+
 
+	/**
 
+	 * Returns the stacks based on groups and bar visibility.
 
+	 * @param {number} [last] - The dataset index
 
+	 * @returns {string[]} The list of stack IDs
 
+	 * @private
 
+	 */
 
+	_getStacks: function(last) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var scale = me._getIndexScale();
 
+		var stacked = scale.options.stacked;
 
+		var ilen = last === undefined ? chart.data.datasets.length : last + 1;
 
+		var stacks = [];
 
+		var i, meta;
 
+
 
+		for (i = 0; i < ilen; ++i) {
 
+			meta = chart.getDatasetMeta(i);
 
+			if (meta.bar && chart.isDatasetVisible(i) &&
 
+				(stacked === false ||
 
+				(stacked === true && stacks.indexOf(meta.stack) === -1) ||
 
+				(stacked === undefined && (meta.stack === undefined || stacks.indexOf(meta.stack) === -1)))) {
 
+				stacks.push(meta.stack);
 
+			}
 
+		}
 
+
 
+		return stacks;
 
+	},
 
+
 
+	/**
 
+	 * Returns the effective number of stacks based on groups and bar visibility.
 
+	 * @private
 
+	 */
 
+	getStackCount: function() {
 
+		return this._getStacks().length;
 
+	},
 
+
 
+	/**
 
+	 * Returns the stack index for the given dataset based on groups and bar visibility.
 
+	 * @param {number} [datasetIndex] - The dataset index
 
+	 * @param {string} [name] - The stack name to find
 
+	 * @returns {number} The stack index
 
+	 * @private
 
+	 */
 
+	getStackIndex: function(datasetIndex, name) {
 
+		var stacks = this._getStacks(datasetIndex);
 
+		var index = (name !== undefined)
 
+			? stacks.indexOf(name)
 
+			: -1; // indexOf returns -1 if element is not present
 
+
 
+		return (index === -1)
 
+			? stacks.length - 1
 
+			: index;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	getRuler: function() {
 
+		var me = this;
 
+		var scale = me._getIndexScale();
 
+		var stackCount = me.getStackCount();
 
+		var datasetIndex = me.index;
 
+		var isHorizontal = scale.isHorizontal();
 
+		var start = isHorizontal ? scale.left : scale.top;
 
+		var end = start + (isHorizontal ? scale.width : scale.height);
 
+		var pixels = [];
 
+		var i, ilen, min;
 
+
 
+		for (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {
 
+			pixels.push(scale.getPixelForValue(null, i, datasetIndex));
 
+		}
 
+
 
+		min = helpers$1.isNullOrUndef(scale.options.barThickness)
 
+			? computeMinSampleSize(scale, pixels)
 
+			: -1;
 
+
 
+		return {
 
+			min: min,
 
+			pixels: pixels,
 
+			start: start,
 
+			end: end,
 
+			stackCount: stackCount,
 
+			scale: scale
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Note: pixel values are not clamped to the scale area.
 
+	 * @private
 
+	 */
 
+	calculateBarValuePixels: function(datasetIndex, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var scale = me._getValueScale();
 
+		var isHorizontal = scale.isHorizontal();
 
+		var datasets = chart.data.datasets;
 
+		var value = +scale.getRightValue(datasets[datasetIndex].data[index]);
 
+		var minBarLength = scale.options.minBarLength;
 
+		var stacked = scale.options.stacked;
 
+		var stack = meta.stack;
 
+		var start = 0;
 
+		var i, imeta, ivalue, base, head, size;
 
+
 
+		if (stacked || (stacked === undefined && stack !== undefined)) {
 
+			for (i = 0; i < datasetIndex; ++i) {
 
+				imeta = chart.getDatasetMeta(i);
 
+
 
+				if (imeta.bar &&
 
+					imeta.stack === stack &&
 
+					imeta.controller._getValueScaleId() === scale.id &&
 
+					chart.isDatasetVisible(i)) {
 
+
 
+					ivalue = +scale.getRightValue(datasets[i].data[index]);
 
+					if ((value < 0 && ivalue < 0) || (value >= 0 && ivalue > 0)) {
 
+						start += ivalue;
 
+					}
 
+				}
 
+			}
 
+		}
 
+
 
+		base = scale.getPixelForValue(start);
 
+		head = scale.getPixelForValue(start + value);
 
+		size = head - base;
 
+
 
+		if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
 
+			size = minBarLength;
 
+			if (value >= 0 && !isHorizontal || value < 0 && isHorizontal) {
 
+				head = base - minBarLength;
 
+			} else {
 
+				head = base + minBarLength;
 
+			}
 
+		}
 
+
 
+		return {
 
+			size: size,
 
+			base: base,
 
+			head: head,
 
+			center: head + size / 2
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	calculateBarIndexPixels: function(datasetIndex, index, ruler) {
 
+		var me = this;
 
+		var options = ruler.scale.options;
 
+		var range = options.barThickness === 'flex'
 
+			? computeFlexCategoryTraits(index, ruler, options)
 
+			: computeFitCategoryTraits(index, ruler, options);
 
+
 
+		var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);
 
+		var center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
 
+		var size = Math.min(
 
+			helpers$1.valueOrDefault(options.maxBarThickness, Infinity),
 
+			range.chunk * range.ratio);
 
+
 
+		return {
 
+			base: center - size / 2,
 
+			head: center + size / 2,
 
+			center: center,
 
+			size: size
 
+		};
 
+	},
 
+
 
+	draw: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var scale = me._getValueScale();
 
+		var rects = me.getMeta().data;
 
+		var dataset = me.getDataset();
 
+		var ilen = rects.length;
 
+		var i = 0;
 
+
 
+		helpers$1.canvas.clipArea(chart.ctx, chart.chartArea);
 
+
 
+		for (; i < ilen; ++i) {
 
+			if (!isNaN(scale.getRightValue(dataset.data[i]))) {
 
+				rects[i].draw();
 
+			}
 
+		}
 
+
 
+		helpers$1.canvas.unclipArea(chart.ctx);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(rectangle, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var datasets = chart.data.datasets;
 
+		var dataset = datasets[me.index];
 
+		var custom = rectangle.custom || {};
 
+		var options = chart.options.elements.rectangle;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderSkipped',
 
+			'borderWidth'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$1([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	}
 
+});
 
+
 
+var valueOrDefault$3 = helpers$1.valueOrDefault;
 
+var resolve$2 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('bubble', {
 
+	hover: {
 
+		mode: 'single'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'linear', // bubble should probably use a linear scale by default
 
+			position: 'bottom',
 
+			id: 'x-axis-0' // need an ID so datasets can reference the scale
 
+		}],
 
+		yAxes: [{
 
+			type: 'linear',
 
+			position: 'left',
 
+			id: 'y-axis-0'
 
+		}]
 
+	},
 
+
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				// Title doesn't make sense for scatter since we format the data as a point
 
+				return '';
 
+			},
 
+			label: function(item, data) {
 
+				var datasetLabel = data.datasets[item.datasetIndex].label || '';
 
+				var dataPoint = data.datasets[item.datasetIndex].data[item.index];
 
+				return datasetLabel + ': (' + item.xLabel + ', ' + item.yLabel + ', ' + dataPoint.r + ')';
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+var controller_bubble = core_datasetController.extend({
 
+	/**
 
+	 * @protected
 
+	 */
 
+	dataElementType: elements.Point,
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	update: function(reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var points = meta.data;
 
+
 
+		// Update Points
 
+		helpers$1.each(points, function(point, index) {
 
+			me.updateElement(point, index, reset);
 
+		});
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	updateElement: function(point, index, reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var custom = point.custom || {};
 
+		var xScale = me.getScaleForId(meta.xAxisID);
 
+		var yScale = me.getScaleForId(meta.yAxisID);
 
+		var options = me._resolveElementOptions(point, index);
 
+		var data = me.getDataset().data[index];
 
+		var dsIndex = me.index;
 
+
 
+		var x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex);
 
+		var y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, dsIndex);
 
+
 
+		point._xScale = xScale;
 
+		point._yScale = yScale;
 
+		point._options = options;
 
+		point._datasetIndex = dsIndex;
 
+		point._index = index;
 
+		point._model = {
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderWidth: options.borderWidth,
 
+			hitRadius: options.hitRadius,
 
+			pointStyle: options.pointStyle,
 
+			rotation: options.rotation,
 
+			radius: reset ? 0 : options.radius,
 
+			skip: custom.skip || isNaN(x) || isNaN(y),
 
+			x: x,
 
+			y: y,
 
+		};
 
+
 
+		point.pivot();
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(point) {
 
+		var model = point._model;
 
+		var options = point._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		point.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+			radius: model.radius
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$3(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$3(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$3(options.hoverBorderWidth, options.borderWidth);
 
+		model.radius = options.radius + options.hoverRadius;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(point, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var datasets = chart.data.datasets;
 
+		var dataset = datasets[me.index];
 
+		var custom = point.custom || {};
 
+		var options = chart.options.elements.point;
 
+		var data = dataset.data[index];
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderWidth',
 
+			'hoverBackgroundColor',
 
+			'hoverBorderColor',
 
+			'hoverBorderWidth',
 
+			'hoverRadius',
 
+			'hitRadius',
 
+			'pointStyle',
 
+			'rotation'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$2([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		// Custom radius resolution
 
+		values.radius = resolve$2([
 
+			custom.radius,
 
+			data ? data.r : undefined,
 
+			dataset.radius,
 
+			options.radius
 
+		], context, index);
 
+
 
+		return values;
 
+	}
 
+});
 
+
 
+var resolve$3 = helpers$1.options.resolve;
 
+var valueOrDefault$4 = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('doughnut', {
 
+	animation: {
 
+		// Boolean - Whether we animate the rotation of the Doughnut
 
+		animateRotate: true,
 
+		// Boolean - Whether we animate scaling the Doughnut from the centre
 
+		animateScale: false
 
+	},
 
+	hover: {
 
+		mode: 'single'
 
+	},
 
+	legendCallback: function(chart) {
 
+		var text = [];
 
+		text.push('<ul class="' + chart.id + '-legend">');
 
+
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var labels = data.labels;
 
+
 
+		if (datasets.length) {
 
+			for (var i = 0; i < datasets[0].data.length; ++i) {
 
+				text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
 
+				if (labels[i]) {
 
+					text.push(labels[i]);
 
+				}
 
+				text.push('</li>');
 
+			}
 
+		}
 
+
 
+		text.push('</ul>');
 
+		return text.join('');
 
+	},
 
+	legend: {
 
+		labels: {
 
+			generateLabels: function(chart) {
 
+				var data = chart.data;
 
+				if (data.labels.length && data.datasets.length) {
 
+					return data.labels.map(function(label, i) {
 
+						var meta = chart.getDatasetMeta(0);
 
+						var ds = data.datasets[0];
 
+						var arc = meta.data[i];
 
+						var custom = arc && arc.custom || {};
 
+						var arcOpts = chart.options.elements.arc;
 
+						var fill = resolve$3([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
 
+						var stroke = resolve$3([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
 
+						var bw = resolve$3([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
 
+
 
+						return {
 
+							text: label,
 
+							fillStyle: fill,
 
+							strokeStyle: stroke,
 
+							lineWidth: bw,
 
+							hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
 
+
 
+							// Extra data used for toggling the correct item
 
+							index: i
 
+						};
 
+					});
 
+				}
 
+				return [];
 
+			}
 
+		},
 
+
 
+		onClick: function(e, legendItem) {
 
+			var index = legendItem.index;
 
+			var chart = this.chart;
 
+			var i, ilen, meta;
 
+
 
+			for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
 
+				meta = chart.getDatasetMeta(i);
 
+				// toggle visibility of index if exists
 
+				if (meta.data[index]) {
 
+					meta.data[index].hidden = !meta.data[index].hidden;
 
+				}
 
+			}
 
+
 
+			chart.update();
 
+		}
 
+	},
 
+
 
+	// The percentage of the chart that we cut out of the middle.
 
+	cutoutPercentage: 50,
 
+
 
+	// The rotation of the chart, where the first data arc begins.
 
+	rotation: Math.PI * -0.5,
 
+
 
+	// The total circumference of the chart.
 
+	circumference: Math.PI * 2.0,
 
+
 
+	// Need to override these to give a nice default
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				return '';
 
+			},
 
+			label: function(tooltipItem, data) {
 
+				var dataLabel = data.labels[tooltipItem.index];
 
+				var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
 
+
 
+				if (helpers$1.isArray(dataLabel)) {
 
+					// show value on first line of multiline label
 
+					// need to clone because we are changing the value
 
+					dataLabel = dataLabel.slice();
 
+					dataLabel[0] += value;
 
+				} else {
 
+					dataLabel += value;
 
+				}
 
+
 
+				return dataLabel;
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+var controller_doughnut = core_datasetController.extend({
 
+
 
+	dataElementType: elements.Arc,
 
+
 
+	linkScales: helpers$1.noop,
 
+
 
+	// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
 
+	getRingIndex: function(datasetIndex) {
 
+		var ringIndex = 0;
 
+
 
+		for (var j = 0; j < datasetIndex; ++j) {
 
+			if (this.chart.isDatasetVisible(j)) {
 
+				++ringIndex;
 
+			}
 
+		}
 
+
 
+		return ringIndex;
 
+	},
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var chartArea = chart.chartArea;
 
+		var opts = chart.options;
 
+		var availableWidth = chartArea.right - chartArea.left;
 
+		var availableHeight = chartArea.bottom - chartArea.top;
 
+		var minSize = Math.min(availableWidth, availableHeight);
 
+		var offset = {x: 0, y: 0};
 
+		var meta = me.getMeta();
 
+		var arcs = meta.data;
 
+		var cutoutPercentage = opts.cutoutPercentage;
 
+		var circumference = opts.circumference;
 
+		var chartWeight = me._getRingWeight(me.index);
 
+		var i, ilen;
 
+
 
+		// If the chart's circumference isn't a full circle, calculate minSize as a ratio of the width/height of the arc
 
+		if (circumference < Math.PI * 2.0) {
 
+			var startAngle = opts.rotation % (Math.PI * 2.0);
 
+			startAngle += Math.PI * 2.0 * (startAngle >= Math.PI ? -1 : startAngle < -Math.PI ? 1 : 0);
 
+			var endAngle = startAngle + circumference;
 
+			var start = {x: Math.cos(startAngle), y: Math.sin(startAngle)};
 
+			var end = {x: Math.cos(endAngle), y: Math.sin(endAngle)};
 
+			var contains0 = (startAngle <= 0 && endAngle >= 0) || (startAngle <= Math.PI * 2.0 && Math.PI * 2.0 <= endAngle);
 
+			var contains90 = (startAngle <= Math.PI * 0.5 && Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 2.5 && Math.PI * 2.5 <= endAngle);
 
+			var contains180 = (startAngle <= -Math.PI && -Math.PI <= endAngle) || (startAngle <= Math.PI && Math.PI <= endAngle);
 
+			var contains270 = (startAngle <= -Math.PI * 0.5 && -Math.PI * 0.5 <= endAngle) || (startAngle <= Math.PI * 1.5 && Math.PI * 1.5 <= endAngle);
 
+			var cutout = cutoutPercentage / 100.0;
 
+			var min = {x: contains180 ? -1 : Math.min(start.x * (start.x < 0 ? 1 : cutout), end.x * (end.x < 0 ? 1 : cutout)), y: contains270 ? -1 : Math.min(start.y * (start.y < 0 ? 1 : cutout), end.y * (end.y < 0 ? 1 : cutout))};
 
+			var max = {x: contains0 ? 1 : Math.max(start.x * (start.x > 0 ? 1 : cutout), end.x * (end.x > 0 ? 1 : cutout)), y: contains90 ? 1 : Math.max(start.y * (start.y > 0 ? 1 : cutout), end.y * (end.y > 0 ? 1 : cutout))};
 
+			var size = {width: (max.x - min.x) * 0.5, height: (max.y - min.y) * 0.5};
 
+			minSize = Math.min(availableWidth / size.width, availableHeight / size.height);
 
+			offset = {x: (max.x + min.x) * -0.5, y: (max.y + min.y) * -0.5};
 
+		}
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			arcs[i]._options = me._resolveElementOptions(arcs[i], i);
 
+		}
 
+
 
+		chart.borderWidth = me.getMaxBorderWidth();
 
+		chart.outerRadius = Math.max((minSize - chart.borderWidth) / 2, 0);
 
+		chart.innerRadius = Math.max(cutoutPercentage ? (chart.outerRadius / 100) * (cutoutPercentage) : 0, 0);
 
+		chart.radiusLength = (chart.outerRadius - chart.innerRadius) / (me._getVisibleDatasetWeightTotal() || 1);
 
+		chart.offsetX = offset.x * chart.outerRadius;
 
+		chart.offsetY = offset.y * chart.outerRadius;
 
+
 
+		meta.total = me.calculateTotal();
 
+
 
+		me.outerRadius = chart.outerRadius - chart.radiusLength * me._getRingWeightOffset(me.index);
 
+		me.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0);
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			me.updateElement(arcs[i], i, reset);
 
+		}
 
+	},
 
+
 
+	updateElement: function(arc, index, reset) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var chartArea = chart.chartArea;
 
+		var opts = chart.options;
 
+		var animationOpts = opts.animation;
 
+		var centerX = (chartArea.left + chartArea.right) / 2;
 
+		var centerY = (chartArea.top + chartArea.bottom) / 2;
 
+		var startAngle = opts.rotation; // non reset case handled later
 
+		var endAngle = opts.rotation; // non reset case handled later
 
+		var dataset = me.getDataset();
 
+		var circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI));
 
+		var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
 
+		var outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;
 
+		var options = arc._options || {};
 
+
 
+		helpers$1.extend(arc, {
 
+			// Utility
 
+			_datasetIndex: me.index,
 
+			_index: index,
 
+
 
+			// Desired view properties
 
+			_model: {
 
+				backgroundColor: options.backgroundColor,
 
+				borderColor: options.borderColor,
 
+				borderWidth: options.borderWidth,
 
+				borderAlign: options.borderAlign,
 
+				x: centerX + chart.offsetX,
 
+				y: centerY + chart.offsetY,
 
+				startAngle: startAngle,
 
+				endAngle: endAngle,
 
+				circumference: circumference,
 
+				outerRadius: outerRadius,
 
+				innerRadius: innerRadius,
 
+				label: helpers$1.valueAtIndexOrDefault(dataset.label, index, chart.data.labels[index])
 
+			}
 
+		});
 
+
 
+		var model = arc._model;
 
+
 
+		// Set correct angles if not resetting
 
+		if (!reset || !animationOpts.animateRotate) {
 
+			if (index === 0) {
 
+				model.startAngle = opts.rotation;
 
+			} else {
 
+				model.startAngle = me.getMeta().data[index - 1]._model.endAngle;
 
+			}
 
+
 
+			model.endAngle = model.startAngle + model.circumference;
 
+		}
 
+
 
+		arc.pivot();
 
+	},
 
+
 
+	calculateTotal: function() {
 
+		var dataset = this.getDataset();
 
+		var meta = this.getMeta();
 
+		var total = 0;
 
+		var value;
 
+
 
+		helpers$1.each(meta.data, function(element, index) {
 
+			value = dataset.data[index];
 
+			if (!isNaN(value) && !element.hidden) {
 
+				total += Math.abs(value);
 
+			}
 
+		});
 
+
 
+		/* if (total === 0) {
 
+			total = NaN;
 
+		}*/
 
+
 
+		return total;
 
+	},
 
+
 
+	calculateCircumference: function(value) {
 
+		var total = this.getMeta().total;
 
+		if (total > 0 && !isNaN(value)) {
 
+			return (Math.PI * 2.0) * (Math.abs(value) / total);
 
+		}
 
+		return 0;
 
+	},
 
+
 
+	// gets the max border or hover width to properly scale pie charts
 
+	getMaxBorderWidth: function(arcs) {
 
+		var me = this;
 
+		var max = 0;
 
+		var chart = me.chart;
 
+		var i, ilen, meta, arc, controller, options, borderWidth, hoverWidth;
 
+
 
+		if (!arcs) {
 
+			// Find the outmost visible dataset
 
+			for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
 
+				if (chart.isDatasetVisible(i)) {
 
+					meta = chart.getDatasetMeta(i);
 
+					arcs = meta.data;
 
+					if (i !== me.index) {
 
+						controller = meta.controller;
 
+					}
 
+					break;
 
+				}
 
+			}
 
+		}
 
+
 
+		if (!arcs) {
 
+			return 0;
 
+		}
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			arc = arcs[i];
 
+			options = controller ? controller._resolveElementOptions(arc, i) : arc._options;
 
+			if (options.borderAlign !== 'inner') {
 
+				borderWidth = options.borderWidth;
 
+				hoverWidth = options.hoverBorderWidth;
 
+
 
+				max = borderWidth > max ? borderWidth : max;
 
+				max = hoverWidth > max ? hoverWidth : max;
 
+			}
 
+		}
 
+		return max;
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(arc) {
 
+		var model = arc._model;
 
+		var options = arc._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		arc.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$4(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$4(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$4(options.hoverBorderWidth, options.borderWidth);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(arc, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = me.getDataset();
 
+		var custom = arc.custom || {};
 
+		var options = chart.options.elements.arc;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderWidth',
 
+			'borderAlign',
 
+			'hoverBackgroundColor',
 
+			'hoverBorderColor',
 
+			'hoverBorderWidth',
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$3([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly
 
+	 * @private
 
+	 */
 
+	_getRingWeightOffset: function(datasetIndex) {
 
+		var ringWeightOffset = 0;
 
+
 
+		for (var i = 0; i < datasetIndex; ++i) {
 
+			if (this.chart.isDatasetVisible(i)) {
 
+				ringWeightOffset += this._getRingWeight(i);
 
+			}
 
+		}
 
+
 
+		return ringWeightOffset;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getRingWeight: function(dataSetIndex) {
 
+		return Math.max(valueOrDefault$4(this.chart.data.datasets[dataSetIndex].weight, 1), 0);
 
+	},
 
+
 
+	/**
 
+	 * Returns the sum of all visibile data set weights.  This value can be 0.
 
+	 * @private
 
+	 */
 
+	_getVisibleDatasetWeightTotal: function() {
 
+		return this._getRingWeightOffset(this.chart.data.datasets.length);
 
+	}
 
+});
 
+
 
+core_defaults._set('horizontalBar', {
 
+	hover: {
 
+		mode: 'index',
 
+		axis: 'y'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'linear',
 
+			position: 'bottom'
 
+		}],
 
+
 
+		yAxes: [{
 
+			type: 'category',
 
+			position: 'left',
 
+			categoryPercentage: 0.8,
 
+			barPercentage: 0.9,
 
+			offset: true,
 
+			gridLines: {
 
+				offsetGridLines: true
 
+			}
 
+		}]
 
+	},
 
+
 
+	elements: {
 
+		rectangle: {
 
+			borderSkipped: 'left'
 
+		}
 
+	},
 
+
 
+	tooltips: {
 
+		mode: 'index',
 
+		axis: 'y'
 
+	}
 
+});
 
+
 
+var controller_horizontalBar = controller_bar.extend({
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getValueScaleId: function() {
 
+		return this.getMeta().xAxisID;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getIndexScaleId: function() {
 
+		return this.getMeta().yAxisID;
 
+	}
 
+});
 
+
 
+var valueOrDefault$5 = helpers$1.valueOrDefault;
 
+var resolve$4 = helpers$1.options.resolve;
 
+var isPointInArea = helpers$1.canvas._isPointInArea;
 
+
 
+core_defaults._set('line', {
 
+	showLines: true,
 
+	spanGaps: false,
 
+
 
+	hover: {
 
+		mode: 'label'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			type: 'category',
 
+			id: 'x-axis-0'
 
+		}],
 
+		yAxes: [{
 
+			type: 'linear',
 
+			id: 'y-axis-0'
 
+		}]
 
+	}
 
+});
 
+
 
+function lineEnabled(dataset, options) {
 
+	return valueOrDefault$5(dataset.showLine, options.showLines);
 
+}
 
+
 
+var controller_line = core_datasetController.extend({
 
+
 
+	datasetElementType: elements.Line,
 
+
 
+	dataElementType: elements.Point,
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var line = meta.dataset;
 
+		var points = meta.data || [];
 
+		var scale = me.getScaleForId(meta.yAxisID);
 
+		var dataset = me.getDataset();
 
+		var showLine = lineEnabled(dataset, me.chart.options);
 
+		var i, ilen;
 
+
 
+		// Update Line
 
+		if (showLine) {
 
+			// Compatibility: If the properties are defined with only the old name, use those values
 
+			if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
 
+				dataset.lineTension = dataset.tension;
 
+			}
 
+
 
+			// Utility
 
+			line._scale = scale;
 
+			line._datasetIndex = me.index;
 
+			// Data
 
+			line._children = points;
 
+			// Model
 
+			line._model = me._resolveLineOptions(line);
 
+
 
+			line.pivot();
 
+		}
 
+
 
+		// Update Points
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			me.updateElement(points[i], i, reset);
 
+		}
 
+
 
+		if (showLine && line._model.tension !== 0) {
 
+			me.updateBezierControlPoints();
 
+		}
 
+
 
+		// Now pivot the point for animation
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			points[i].pivot();
 
+		}
 
+	},
 
+
 
+	updateElement: function(point, index, reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var custom = point.custom || {};
 
+		var dataset = me.getDataset();
 
+		var datasetIndex = me.index;
 
+		var value = dataset.data[index];
 
+		var yScale = me.getScaleForId(meta.yAxisID);
 
+		var xScale = me.getScaleForId(meta.xAxisID);
 
+		var lineModel = meta.dataset._model;
 
+		var x, y;
 
+
 
+		var options = me._resolvePointOptions(point, index);
 
+
 
+		x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);
 
+		y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);
 
+
 
+		// Utility
 
+		point._xScale = xScale;
 
+		point._yScale = yScale;
 
+		point._options = options;
 
+		point._datasetIndex = datasetIndex;
 
+		point._index = index;
 
+
 
+		// Desired view properties
 
+		point._model = {
 
+			x: x,
 
+			y: y,
 
+			skip: custom.skip || isNaN(x) || isNaN(y),
 
+			// Appearance
 
+			radius: options.radius,
 
+			pointStyle: options.pointStyle,
 
+			rotation: options.rotation,
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderWidth: options.borderWidth,
 
+			tension: valueOrDefault$5(custom.tension, lineModel ? lineModel.tension : 0),
 
+			steppedLine: lineModel ? lineModel.steppedLine : false,
 
+			// Tooltip
 
+			hitRadius: options.hitRadius
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolvePointOptions: function(element, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options.elements.point;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var ELEMENT_OPTIONS = {
 
+			backgroundColor: 'pointBackgroundColor',
 
+			borderColor: 'pointBorderColor',
 
+			borderWidth: 'pointBorderWidth',
 
+			hitRadius: 'pointHitRadius',
 
+			hoverBackgroundColor: 'pointHoverBackgroundColor',
 
+			hoverBorderColor: 'pointHoverBorderColor',
 
+			hoverBorderWidth: 'pointHoverBorderWidth',
 
+			hoverRadius: 'pointHoverRadius',
 
+			pointStyle: 'pointStyle',
 
+			radius: 'pointRadius',
 
+			rotation: 'pointRotation'
 
+		};
 
+		var keys = Object.keys(ELEMENT_OPTIONS);
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$4([
 
+				custom[key],
 
+				dataset[ELEMENT_OPTIONS[key]],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveLineOptions: function(element) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options;
 
+		var elementOptions = options.elements.line;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderWidth',
 
+			'borderColor',
 
+			'borderCapStyle',
 
+			'borderDash',
 
+			'borderDashOffset',
 
+			'borderJoinStyle',
 
+			'fill',
 
+			'cubicInterpolationMode'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$4([
 
+				custom[key],
 
+				dataset[key],
 
+				elementOptions[key]
 
+			]);
 
+		}
 
+
 
+		// The default behavior of lines is to break at null values, according
 
+		// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
 
+		// This option gives lines the ability to span gaps
 
+		values.spanGaps = valueOrDefault$5(dataset.spanGaps, options.spanGaps);
 
+		values.tension = valueOrDefault$5(dataset.lineTension, elementOptions.tension);
 
+		values.steppedLine = resolve$4([custom.steppedLine, dataset.steppedLine, elementOptions.stepped]);
 
+
 
+		return values;
 
+	},
 
+
 
+	calculatePointY: function(value, index, datasetIndex) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var yScale = me.getScaleForId(meta.yAxisID);
 
+		var sumPos = 0;
 
+		var sumNeg = 0;
 
+		var i, ds, dsMeta;
 
+
 
+		if (yScale.options.stacked) {
 
+			for (i = 0; i < datasetIndex; i++) {
 
+				ds = chart.data.datasets[i];
 
+				dsMeta = chart.getDatasetMeta(i);
 
+				if (dsMeta.type === 'line' && dsMeta.yAxisID === yScale.id && chart.isDatasetVisible(i)) {
 
+					var stackedRightValue = Number(yScale.getRightValue(ds.data[index]));
 
+					if (stackedRightValue < 0) {
 
+						sumNeg += stackedRightValue || 0;
 
+					} else {
 
+						sumPos += stackedRightValue || 0;
 
+					}
 
+				}
 
+			}
 
+
 
+			var rightValue = Number(yScale.getRightValue(value));
 
+			if (rightValue < 0) {
 
+				return yScale.getPixelForValue(sumNeg + rightValue);
 
+			}
 
+			return yScale.getPixelForValue(sumPos + rightValue);
 
+		}
 
+
 
+		return yScale.getPixelForValue(value);
 
+	},
 
+
 
+	updateBezierControlPoints: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var lineModel = meta.dataset._model;
 
+		var area = chart.chartArea;
 
+		var points = meta.data || [];
 
+		var i, ilen, model, controlPoints;
 
+
 
+		// Only consider points that are drawn in case the spanGaps option is used
 
+		if (lineModel.spanGaps) {
 
+			points = points.filter(function(pt) {
 
+				return !pt._model.skip;
 
+			});
 
+		}
 
+
 
+		function capControlPoint(pt, min, max) {
 
+			return Math.max(Math.min(pt, max), min);
 
+		}
 
+
 
+		if (lineModel.cubicInterpolationMode === 'monotone') {
 
+			helpers$1.splineCurveMonotone(points);
 
+		} else {
 
+			for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+				model = points[i]._model;
 
+				controlPoints = helpers$1.splineCurve(
 
+					helpers$1.previousItem(points, i)._model,
 
+					model,
 
+					helpers$1.nextItem(points, i)._model,
 
+					lineModel.tension
 
+				);
 
+				model.controlPointPreviousX = controlPoints.previous.x;
 
+				model.controlPointPreviousY = controlPoints.previous.y;
 
+				model.controlPointNextX = controlPoints.next.x;
 
+				model.controlPointNextY = controlPoints.next.y;
 
+			}
 
+		}
 
+
 
+		if (chart.options.elements.line.capBezierPoints) {
 
+			for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+				model = points[i]._model;
 
+				if (isPointInArea(model, area)) {
 
+					if (i > 0 && isPointInArea(points[i - 1]._model, area)) {
 
+						model.controlPointPreviousX = capControlPoint(model.controlPointPreviousX, area.left, area.right);
 
+						model.controlPointPreviousY = capControlPoint(model.controlPointPreviousY, area.top, area.bottom);
 
+					}
 
+					if (i < points.length - 1 && isPointInArea(points[i + 1]._model, area)) {
 
+						model.controlPointNextX = capControlPoint(model.controlPointNextX, area.left, area.right);
 
+						model.controlPointNextY = capControlPoint(model.controlPointNextY, area.top, area.bottom);
 
+					}
 
+				}
 
+			}
 
+		}
 
+	},
 
+
 
+	draw: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var meta = me.getMeta();
 
+		var points = meta.data || [];
 
+		var area = chart.chartArea;
 
+		var ilen = points.length;
 
+		var halfBorderWidth;
 
+		var i = 0;
 
+
 
+		if (lineEnabled(me.getDataset(), chart.options)) {
 
+			halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2;
 
+
 
+			helpers$1.canvas.clipArea(chart.ctx, {
 
+				left: area.left,
 
+				right: area.right,
 
+				top: area.top - halfBorderWidth,
 
+				bottom: area.bottom + halfBorderWidth
 
+			});
 
+
 
+			meta.dataset.draw();
 
+
 
+			helpers$1.canvas.unclipArea(chart.ctx);
 
+		}
 
+
 
+		// Draw the points
 
+		for (; i < ilen; ++i) {
 
+			points[i].draw(area);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(point) {
 
+		var model = point._model;
 
+		var options = point._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		point.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+			radius: model.radius
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$5(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$5(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$5(options.hoverBorderWidth, options.borderWidth);
 
+		model.radius = valueOrDefault$5(options.hoverRadius, options.radius);
 
+	},
 
+});
 
+
 
+var resolve$5 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('polarArea', {
 
+	scale: {
 
+		type: 'radialLinear',
 
+		angleLines: {
 
+			display: false
 
+		},
 
+		gridLines: {
 
+			circular: true
 
+		},
 
+		pointLabels: {
 
+			display: false
 
+		},
 
+		ticks: {
 
+			beginAtZero: true
 
+		}
 
+	},
 
+
 
+	// Boolean - Whether to animate the rotation of the chart
 
+	animation: {
 
+		animateRotate: true,
 
+		animateScale: true
 
+	},
 
+
 
+	startAngle: -0.5 * Math.PI,
 
+	legendCallback: function(chart) {
 
+		var text = [];
 
+		text.push('<ul class="' + chart.id + '-legend">');
 
+
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var labels = data.labels;
 
+
 
+		if (datasets.length) {
 
+			for (var i = 0; i < datasets[0].data.length; ++i) {
 
+				text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
 
+				if (labels[i]) {
 
+					text.push(labels[i]);
 
+				}
 
+				text.push('</li>');
 
+			}
 
+		}
 
+
 
+		text.push('</ul>');
 
+		return text.join('');
 
+	},
 
+	legend: {
 
+		labels: {
 
+			generateLabels: function(chart) {
 
+				var data = chart.data;
 
+				if (data.labels.length && data.datasets.length) {
 
+					return data.labels.map(function(label, i) {
 
+						var meta = chart.getDatasetMeta(0);
 
+						var ds = data.datasets[0];
 
+						var arc = meta.data[i];
 
+						var custom = arc.custom || {};
 
+						var arcOpts = chart.options.elements.arc;
 
+						var fill = resolve$5([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
 
+						var stroke = resolve$5([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
 
+						var bw = resolve$5([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
 
+
 
+						return {
 
+							text: label,
 
+							fillStyle: fill,
 
+							strokeStyle: stroke,
 
+							lineWidth: bw,
 
+							hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
 
+
 
+							// Extra data used for toggling the correct item
 
+							index: i
 
+						};
 
+					});
 
+				}
 
+				return [];
 
+			}
 
+		},
 
+
 
+		onClick: function(e, legendItem) {
 
+			var index = legendItem.index;
 
+			var chart = this.chart;
 
+			var i, ilen, meta;
 
+
 
+			for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
 
+				meta = chart.getDatasetMeta(i);
 
+				meta.data[index].hidden = !meta.data[index].hidden;
 
+			}
 
+
 
+			chart.update();
 
+		}
 
+	},
 
+
 
+	// Need to override these to give a nice default
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				return '';
 
+			},
 
+			label: function(item, data) {
 
+				return data.labels[item.index] + ': ' + item.yLabel;
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+var controller_polarArea = core_datasetController.extend({
 
+
 
+	dataElementType: elements.Arc,
 
+
 
+	linkScales: helpers$1.noop,
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var dataset = me.getDataset();
 
+		var meta = me.getMeta();
 
+		var start = me.chart.options.startAngle || 0;
 
+		var starts = me._starts = [];
 
+		var angles = me._angles = [];
 
+		var arcs = meta.data;
 
+		var i, ilen, angle;
 
+
 
+		me._updateRadius();
 
+
 
+		meta.count = me.countVisibleElements();
 
+
 
+		for (i = 0, ilen = dataset.data.length; i < ilen; i++) {
 
+			starts[i] = start;
 
+			angle = me._computeAngle(i);
 
+			angles[i] = angle;
 
+			start += angle;
 
+		}
 
+
 
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
 
+			arcs[i]._options = me._resolveElementOptions(arcs[i], i);
 
+			me.updateElement(arcs[i], i, reset);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_updateRadius: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var chartArea = chart.chartArea;
 
+		var opts = chart.options;
 
+		var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
 
+
 
+		chart.outerRadius = Math.max(minSize / 2, 0);
 
+		chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);
 
+		chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
 
+
 
+		me.outerRadius = chart.outerRadius - (chart.radiusLength * me.index);
 
+		me.innerRadius = me.outerRadius - chart.radiusLength;
 
+	},
 
+
 
+	updateElement: function(arc, index, reset) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = me.getDataset();
 
+		var opts = chart.options;
 
+		var animationOpts = opts.animation;
 
+		var scale = chart.scale;
 
+		var labels = chart.data.labels;
 
+
 
+		var centerX = scale.xCenter;
 
+		var centerY = scale.yCenter;
 
+
 
+		// var negHalfPI = -0.5 * Math.PI;
 
+		var datasetStartAngle = opts.startAngle;
 
+		var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
 
+		var startAngle = me._starts[index];
 
+		var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);
 
+
 
+		var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
 
+		var options = arc._options || {};
 
+
 
+		helpers$1.extend(arc, {
 
+			// Utility
 
+			_datasetIndex: me.index,
 
+			_index: index,
 
+			_scale: scale,
 
+
 
+			// Desired view properties
 
+			_model: {
 
+				backgroundColor: options.backgroundColor,
 
+				borderColor: options.borderColor,
 
+				borderWidth: options.borderWidth,
 
+				borderAlign: options.borderAlign,
 
+				x: centerX,
 
+				y: centerY,
 
+				innerRadius: 0,
 
+				outerRadius: reset ? resetRadius : distance,
 
+				startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,
 
+				endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle,
 
+				label: helpers$1.valueAtIndexOrDefault(labels, index, labels[index])
 
+			}
 
+		});
 
+
 
+		arc.pivot();
 
+	},
 
+
 
+	countVisibleElements: function() {
 
+		var dataset = this.getDataset();
 
+		var meta = this.getMeta();
 
+		var count = 0;
 
+
 
+		helpers$1.each(meta.data, function(element, index) {
 
+			if (!isNaN(dataset.data[index]) && !element.hidden) {
 
+				count++;
 
+			}
 
+		});
 
+
 
+		return count;
 
+	},
 
+
 
+	/**
 
+	 * @protected
 
+	 */
 
+	setHoverStyle: function(arc) {
 
+		var model = arc._model;
 
+		var options = arc._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+		var valueOrDefault = helpers$1.valueOrDefault;
 
+
 
+		arc.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveElementOptions: function(arc, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = me.getDataset();
 
+		var custom = arc.custom || {};
 
+		var options = chart.options.elements.arc;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderColor',
 
+			'borderWidth',
 
+			'borderAlign',
 
+			'hoverBackgroundColor',
 
+			'hoverBorderColor',
 
+			'hoverBorderWidth',
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$5([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_computeAngle: function(index) {
 
+		var me = this;
 
+		var count = this.getMeta().count;
 
+		var dataset = me.getDataset();
 
+		var meta = me.getMeta();
 
+
 
+		if (isNaN(dataset.data[index]) || meta.data[index].hidden) {
 
+			return 0;
 
+		}
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: me.chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		return resolve$5([
 
+			me.chart.options.elements.arc.angle,
 
+			(2 * Math.PI) / count
 
+		], context, index);
 
+	}
 
+});
 
+
 
+core_defaults._set('pie', helpers$1.clone(core_defaults.doughnut));
 
+core_defaults._set('pie', {
 
+	cutoutPercentage: 0
 
+});
 
+
 
+// Pie charts are Doughnut chart with different defaults
 
+var controller_pie = controller_doughnut;
 
+
 
+var valueOrDefault$6 = helpers$1.valueOrDefault;
 
+var resolve$6 = helpers$1.options.resolve;
 
+
 
+core_defaults._set('radar', {
 
+	scale: {
 
+		type: 'radialLinear'
 
+	},
 
+	elements: {
 
+		line: {
 
+			tension: 0 // no bezier in radar
 
+		}
 
+	}
 
+});
 
+
 
+var controller_radar = core_datasetController.extend({
 
+
 
+	datasetElementType: elements.Line,
 
+
 
+	dataElementType: elements.Point,
 
+
 
+	linkScales: helpers$1.noop,
 
+
 
+	update: function(reset) {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var line = meta.dataset;
 
+		var points = meta.data || [];
 
+		var scale = me.chart.scale;
 
+		var dataset = me.getDataset();
 
+		var i, ilen;
 
+
 
+		// Compatibility: If the properties are defined with only the old name, use those values
 
+		if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
 
+			dataset.lineTension = dataset.tension;
 
+		}
 
+
 
+		// Utility
 
+		line._scale = scale;
 
+		line._datasetIndex = me.index;
 
+		// Data
 
+		line._children = points;
 
+		line._loop = true;
 
+		// Model
 
+		line._model = me._resolveLineOptions(line);
 
+
 
+		line.pivot();
 
+
 
+		// Update Points
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			me.updateElement(points[i], i, reset);
 
+		}
 
+
 
+		// Update bezier control points
 
+		me.updateBezierControlPoints();
 
+
 
+		// Now pivot the point for animation
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			points[i].pivot();
 
+		}
 
+	},
 
+
 
+	updateElement: function(point, index, reset) {
 
+		var me = this;
 
+		var custom = point.custom || {};
 
+		var dataset = me.getDataset();
 
+		var scale = me.chart.scale;
 
+		var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
 
+		var options = me._resolvePointOptions(point, index);
 
+		var lineModel = me.getMeta().dataset._model;
 
+		var x = reset ? scale.xCenter : pointPosition.x;
 
+		var y = reset ? scale.yCenter : pointPosition.y;
 
+
 
+		// Utility
 
+		point._scale = scale;
 
+		point._options = options;
 
+		point._datasetIndex = me.index;
 
+		point._index = index;
 
+
 
+		// Desired view properties
 
+		point._model = {
 
+			x: x, // value not used in dataset scale, but we want a consistent API between scales
 
+			y: y,
 
+			skip: custom.skip || isNaN(x) || isNaN(y),
 
+			// Appearance
 
+			radius: options.radius,
 
+			pointStyle: options.pointStyle,
 
+			rotation: options.rotation,
 
+			backgroundColor: options.backgroundColor,
 
+			borderColor: options.borderColor,
 
+			borderWidth: options.borderWidth,
 
+			tension: valueOrDefault$6(custom.tension, lineModel ? lineModel.tension : 0),
 
+
 
+			// Tooltip
 
+			hitRadius: options.hitRadius
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolvePointOptions: function(element, index) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options.elements.point;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		// Scriptable options
 
+		var context = {
 
+			chart: chart,
 
+			dataIndex: index,
 
+			dataset: dataset,
 
+			datasetIndex: me.index
 
+		};
 
+
 
+		var ELEMENT_OPTIONS = {
 
+			backgroundColor: 'pointBackgroundColor',
 
+			borderColor: 'pointBorderColor',
 
+			borderWidth: 'pointBorderWidth',
 
+			hitRadius: 'pointHitRadius',
 
+			hoverBackgroundColor: 'pointHoverBackgroundColor',
 
+			hoverBorderColor: 'pointHoverBorderColor',
 
+			hoverBorderWidth: 'pointHoverBorderWidth',
 
+			hoverRadius: 'pointHoverRadius',
 
+			pointStyle: 'pointStyle',
 
+			radius: 'pointRadius',
 
+			rotation: 'pointRotation'
 
+		};
 
+		var keys = Object.keys(ELEMENT_OPTIONS);
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$6([
 
+				custom[key],
 
+				dataset[ELEMENT_OPTIONS[key]],
 
+				dataset[key],
 
+				options[key]
 
+			], context, index);
 
+		}
 
+
 
+		return values;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_resolveLineOptions: function(element) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var dataset = chart.data.datasets[me.index];
 
+		var custom = element.custom || {};
 
+		var options = chart.options.elements.line;
 
+		var values = {};
 
+		var i, ilen, key;
 
+
 
+		var keys = [
 
+			'backgroundColor',
 
+			'borderWidth',
 
+			'borderColor',
 
+			'borderCapStyle',
 
+			'borderDash',
 
+			'borderDashOffset',
 
+			'borderJoinStyle',
 
+			'fill'
 
+		];
 
+
 
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 
+			key = keys[i];
 
+			values[key] = resolve$6([
 
+				custom[key],
 
+				dataset[key],
 
+				options[key]
 
+			]);
 
+		}
 
+
 
+		values.tension = valueOrDefault$6(dataset.lineTension, options.tension);
 
+
 
+		return values;
 
+	},
 
+
 
+	updateBezierControlPoints: function() {
 
+		var me = this;
 
+		var meta = me.getMeta();
 
+		var area = me.chart.chartArea;
 
+		var points = meta.data || [];
 
+		var i, ilen, model, controlPoints;
 
+
 
+		function capControlPoint(pt, min, max) {
 
+			return Math.max(Math.min(pt, max), min);
 
+		}
 
+
 
+		for (i = 0, ilen = points.length; i < ilen; ++i) {
 
+			model = points[i]._model;
 
+			controlPoints = helpers$1.splineCurve(
 
+				helpers$1.previousItem(points, i, true)._model,
 
+				model,
 
+				helpers$1.nextItem(points, i, true)._model,
 
+				model.tension
 
+			);
 
+
 
+			// Prevent the bezier going outside of the bounds of the graph
 
+			model.controlPointPreviousX = capControlPoint(controlPoints.previous.x, area.left, area.right);
 
+			model.controlPointPreviousY = capControlPoint(controlPoints.previous.y, area.top, area.bottom);
 
+			model.controlPointNextX = capControlPoint(controlPoints.next.x, area.left, area.right);
 
+			model.controlPointNextY = capControlPoint(controlPoints.next.y, area.top, area.bottom);
 
+		}
 
+	},
 
+
 
+	setHoverStyle: function(point) {
 
+		var model = point._model;
 
+		var options = point._options;
 
+		var getHoverColor = helpers$1.getHoverColor;
 
+
 
+		point.$previousStyle = {
 
+			backgroundColor: model.backgroundColor,
 
+			borderColor: model.borderColor,
 
+			borderWidth: model.borderWidth,
 
+			radius: model.radius
 
+		};
 
+
 
+		model.backgroundColor = valueOrDefault$6(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
 
+		model.borderColor = valueOrDefault$6(options.hoverBorderColor, getHoverColor(options.borderColor));
 
+		model.borderWidth = valueOrDefault$6(options.hoverBorderWidth, options.borderWidth);
 
+		model.radius = valueOrDefault$6(options.hoverRadius, options.radius);
 
+	}
 
+});
 
+
 
+core_defaults._set('scatter', {
 
+	hover: {
 
+		mode: 'single'
 
+	},
 
+
 
+	scales: {
 
+		xAxes: [{
 
+			id: 'x-axis-1',    // need an ID so datasets can reference the scale
 
+			type: 'linear',    // scatter should not use a category axis
 
+			position: 'bottom'
 
+		}],
 
+		yAxes: [{
 
+			id: 'y-axis-1',
 
+			type: 'linear',
 
+			position: 'left'
 
+		}]
 
+	},
 
+
 
+	showLines: false,
 
+
 
+	tooltips: {
 
+		callbacks: {
 
+			title: function() {
 
+				return '';     // doesn't make sense for scatter since data are formatted as a point
 
+			},
 
+			label: function(item) {
 
+				return '(' + item.xLabel + ', ' + item.yLabel + ')';
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+// Scatter charts use line controllers
 
+var controller_scatter = controller_line;
 
+
 
+// NOTE export a map in which the key represents the controller type, not
 
+// the class, and so must be CamelCase in order to be correctly retrieved
 
+// by the controller in core.controller.js (`controllers[meta.type]`).
 
+
 
+var controllers = {
 
+	bar: controller_bar,
 
+	bubble: controller_bubble,
 
+	doughnut: controller_doughnut,
 
+	horizontalBar: controller_horizontalBar,
 
+	line: controller_line,
 
+	polarArea: controller_polarArea,
 
+	pie: controller_pie,
 
+	radar: controller_radar,
 
+	scatter: controller_scatter
 
+};
 
+
 
+/**
 
+ * Helper function to get relative position for an event
 
+ * @param {Event|IEvent} event - The event to get the position for
 
+ * @param {Chart} chart - The chart
 
+ * @returns {object} the event position
 
+ */
 
+function getRelativePosition(e, chart) {
 
+	if (e.native) {
 
+		return {
 
+			x: e.x,
 
+			y: e.y
 
+		};
 
+	}
 
+
 
+	return helpers$1.getRelativePosition(e, chart);
 
+}
 
+
 
+/**
 
+ * Helper function to traverse all of the visible elements in the chart
 
+ * @param {Chart} chart - the chart
 
+ * @param {function} handler - the callback to execute for each visible item
 
+ */
 
+function parseVisibleItems(chart, handler) {
 
+	var datasets = chart.data.datasets;
 
+	var meta, i, j, ilen, jlen;
 
+
 
+	for (i = 0, ilen = datasets.length; i < ilen; ++i) {
 
+		if (!chart.isDatasetVisible(i)) {
 
+			continue;
 
+		}
 
+
 
+		meta = chart.getDatasetMeta(i);
 
+		for (j = 0, jlen = meta.data.length; j < jlen; ++j) {
 
+			var element = meta.data[j];
 
+			if (!element._view.skip) {
 
+				handler(element);
 
+			}
 
+		}
 
+	}
 
+}
 
+
 
+/**
 
+ * Helper function to get the items that intersect the event position
 
+ * @param {ChartElement[]} items - elements to filter
 
+ * @param {object} position - the point to be nearest to
 
+ * @return {ChartElement[]} the nearest items
 
+ */
 
+function getIntersectItems(chart, position) {
 
+	var elements = [];
 
+
 
+	parseVisibleItems(chart, function(element) {
 
+		if (element.inRange(position.x, position.y)) {
 
+			elements.push(element);
 
+		}
 
+	});
 
+
 
+	return elements;
 
+}
 
+
 
+/**
 
+ * Helper function to get the items nearest to the event position considering all visible items in teh chart
 
+ * @param {Chart} chart - the chart to look at elements from
 
+ * @param {object} position - the point to be nearest to
 
+ * @param {boolean} intersect - if true, only consider items that intersect the position
 
+ * @param {function} distanceMetric - function to provide the distance between points
 
+ * @return {ChartElement[]} the nearest items
 
+ */
 
+function getNearestItems(chart, position, intersect, distanceMetric) {
 
+	var minDistance = Number.POSITIVE_INFINITY;
 
+	var nearestItems = [];
 
+
 
+	parseVisibleItems(chart, function(element) {
 
+		if (intersect && !element.inRange(position.x, position.y)) {
 
+			return;
 
+		}
 
+
 
+		var center = element.getCenterPoint();
 
+		var distance = distanceMetric(position, center);
 
+		if (distance < minDistance) {
 
+			nearestItems = [element];
 
+			minDistance = distance;
 
+		} else if (distance === minDistance) {
 
+			// Can have multiple items at the same distance in which case we sort by size
 
+			nearestItems.push(element);
 
+		}
 
+	});
 
+
 
+	return nearestItems;
 
+}
 
+
 
+/**
 
+ * Get a distance metric function for two points based on the
 
+ * axis mode setting
 
+ * @param {string} axis - the axis mode. x|y|xy
 
+ */
 
+function getDistanceMetricForAxis(axis) {
 
+	var useX = axis.indexOf('x') !== -1;
 
+	var useY = axis.indexOf('y') !== -1;
 
+
 
+	return function(pt1, pt2) {
 
+		var deltaX = useX ? Math.abs(pt1.x - pt2.x) : 0;
 
+		var deltaY = useY ? Math.abs(pt1.y - pt2.y) : 0;
 
+		return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
 
+	};
 
+}
 
+
 
+function indexMode(chart, e, options) {
 
+	var position = getRelativePosition(e, chart);
 
+	// Default axis for index mode is 'x' to match old behaviour
 
+	options.axis = options.axis || 'x';
 
+	var distanceMetric = getDistanceMetricForAxis(options.axis);
 
+	var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
 
+	var elements = [];
 
+
 
+	if (!items.length) {
 
+		return [];
 
+	}
 
+
 
+	chart.data.datasets.forEach(function(dataset, datasetIndex) {
 
+		if (chart.isDatasetVisible(datasetIndex)) {
 
+			var meta = chart.getDatasetMeta(datasetIndex);
 
+			var element = meta.data[items[0]._index];
 
+
 
+			// don't count items that are skipped (null data)
 
+			if (element && !element._view.skip) {
 
+				elements.push(element);
 
+			}
 
+		}
 
+	});
 
+
 
+	return elements;
 
+}
 
+
 
+/**
 
+ * @interface IInteractionOptions
 
+ */
 
+/**
 
+ * If true, only consider items that intersect the point
 
+ * @name IInterfaceOptions#boolean
 
+ * @type Boolean
 
+ */
 
+
 
+/**
 
+ * Contains interaction related functions
 
+ * @namespace Chart.Interaction
 
+ */
 
+var core_interaction = {
 
+	// Helper function for different modes
 
+	modes: {
 
+		single: function(chart, e) {
 
+			var position = getRelativePosition(e, chart);
 
+			var elements = [];
 
+
 
+			parseVisibleItems(chart, function(element) {
 
+				if (element.inRange(position.x, position.y)) {
 
+					elements.push(element);
 
+					return elements;
 
+				}
 
+			});
 
+
 
+			return elements.slice(0, 1);
 
+		},
 
+
 
+		/**
 
+		 * @function Chart.Interaction.modes.label
 
+		 * @deprecated since version 2.4.0
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		label: indexMode,
 
+
 
+		/**
 
+		 * Returns items at the same index. If the options.intersect parameter is true, we only return items if we intersect something
 
+		 * If the options.intersect mode is false, we find the nearest item and return the items at the same index as that item
 
+		 * @function Chart.Interaction.modes.index
 
+		 * @since v2.4.0
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use during interaction
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		index: indexMode,
 
+
 
+		/**
 
+		 * Returns items in the same dataset. If the options.intersect parameter is true, we only return items if we intersect something
 
+		 * If the options.intersect is false, we find the nearest item and return the items in that dataset
 
+		 * @function Chart.Interaction.modes.dataset
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use during interaction
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		dataset: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			options.axis = options.axis || 'xy';
 
+			var distanceMetric = getDistanceMetricForAxis(options.axis);
 
+			var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
 
+
 
+			if (items.length > 0) {
 
+				items = chart.getDatasetMeta(items[0]._datasetIndex).data;
 
+			}
 
+
 
+			return items;
 
+		},
 
+
 
+		/**
 
+		 * @function Chart.Interaction.modes.x-axis
 
+		 * @deprecated since version 2.4.0. Use index mode and intersect == true
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		'x-axis': function(chart, e) {
 
+			return indexMode(chart, e, {intersect: false});
 
+		},
 
+
 
+		/**
 
+		 * Point mode returns all elements that hit test based on the event position
 
+		 * of the event
 
+		 * @function Chart.Interaction.modes.intersect
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		point: function(chart, e) {
 
+			var position = getRelativePosition(e, chart);
 
+			return getIntersectItems(chart, position);
 
+		},
 
+
 
+		/**
 
+		 * nearest mode returns the element closest to the point
 
+		 * @function Chart.Interaction.modes.intersect
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		nearest: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			options.axis = options.axis || 'xy';
 
+			var distanceMetric = getDistanceMetricForAxis(options.axis);
 
+			return getNearestItems(chart, position, options.intersect, distanceMetric);
 
+		},
 
+
 
+		/**
 
+		 * x mode returns the elements that hit-test at the current x coordinate
 
+		 * @function Chart.Interaction.modes.x
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		x: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			var items = [];
 
+			var intersectsItem = false;
 
+
 
+			parseVisibleItems(chart, function(element) {
 
+				if (element.inXRange(position.x)) {
 
+					items.push(element);
 
+				}
 
+
 
+				if (element.inRange(position.x, position.y)) {
 
+					intersectsItem = true;
 
+				}
 
+			});
 
+
 
+			// If we want to trigger on an intersect and we don't have any items
 
+			// that intersect the position, return nothing
 
+			if (options.intersect && !intersectsItem) {
 
+				items = [];
 
+			}
 
+			return items;
 
+		},
 
+
 
+		/**
 
+		 * y mode returns the elements that hit-test at the current y coordinate
 
+		 * @function Chart.Interaction.modes.y
 
+		 * @param {Chart} chart - the chart we are returning items from
 
+		 * @param {Event} e - the event we are find things at
 
+		 * @param {IInteractionOptions} options - options to use
 
+		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
 
+		 */
 
+		y: function(chart, e, options) {
 
+			var position = getRelativePosition(e, chart);
 
+			var items = [];
 
+			var intersectsItem = false;
 
+
 
+			parseVisibleItems(chart, function(element) {
 
+				if (element.inYRange(position.y)) {
 
+					items.push(element);
 
+				}
 
+
 
+				if (element.inRange(position.x, position.y)) {
 
+					intersectsItem = true;
 
+				}
 
+			});
 
+
 
+			// If we want to trigger on an intersect and we don't have any items
 
+			// that intersect the position, return nothing
 
+			if (options.intersect && !intersectsItem) {
 
+				items = [];
 
+			}
 
+			return items;
 
+		}
 
+	}
 
+};
 
+
 
+function filterByPosition(array, position) {
 
+	return helpers$1.where(array, function(v) {
 
+		return v.position === position;
 
+	});
 
+}
 
+
 
+function sortByWeight(array, reverse) {
 
+	array.forEach(function(v, i) {
 
+		v._tmpIndex_ = i;
 
+		return v;
 
+	});
 
+	array.sort(function(a, b) {
 
+		var v0 = reverse ? b : a;
 
+		var v1 = reverse ? a : b;
 
+		return v0.weight === v1.weight ?
 
+			v0._tmpIndex_ - v1._tmpIndex_ :
 
+			v0.weight - v1.weight;
 
+	});
 
+	array.forEach(function(v) {
 
+		delete v._tmpIndex_;
 
+	});
 
+}
 
+
 
+function findMaxPadding(boxes) {
 
+	var top = 0;
 
+	var left = 0;
 
+	var bottom = 0;
 
+	var right = 0;
 
+	helpers$1.each(boxes, function(box) {
 
+		if (box.getPadding) {
 
+			var boxPadding = box.getPadding();
 
+			top = Math.max(top, boxPadding.top);
 
+			left = Math.max(left, boxPadding.left);
 
+			bottom = Math.max(bottom, boxPadding.bottom);
 
+			right = Math.max(right, boxPadding.right);
 
+		}
 
+	});
 
+	return {
 
+		top: top,
 
+		left: left,
 
+		bottom: bottom,
 
+		right: right
 
+	};
 
+}
 
+
 
+function addSizeByPosition(boxes, size) {
 
+	helpers$1.each(boxes, function(box) {
 
+		size[box.position] += box.isHorizontal() ? box.height : box.width;
 
+	});
 
+}
 
+
 
+core_defaults._set('global', {
 
+	layout: {
 
+		padding: {
 
+			top: 0,
 
+			right: 0,
 
+			bottom: 0,
 
+			left: 0
 
+		}
 
+	}
 
+});
 
+
 
+/**
 
+ * @interface ILayoutItem
 
+ * @prop {string} position - The position of the item in the chart layout. Possible values are
 
+ * 'left', 'top', 'right', 'bottom', and 'chartArea'
 
+ * @prop {number} weight - The weight used to sort the item. Higher weights are further away from the chart area
 
+ * @prop {boolean} fullWidth - if true, and the item is horizontal, then push vertical boxes down
 
+ * @prop {function} isHorizontal - returns true if the layout item is horizontal (ie. top or bottom)
 
+ * @prop {function} update - Takes two parameters: width and height. Returns size of item
 
+ * @prop {function} getPadding -  Returns an object with padding on the edges
 
+ * @prop {number} width - Width of item. Must be valid after update()
 
+ * @prop {number} height - Height of item. Must be valid after update()
 
+ * @prop {number} left - Left edge of the item. Set by layout system and cannot be used in update
 
+ * @prop {number} top - Top edge of the item. Set by layout system and cannot be used in update
 
+ * @prop {number} right - Right edge of the item. Set by layout system and cannot be used in update
 
+ * @prop {number} bottom - Bottom edge of the item. Set by layout system and cannot be used in update
 
+ */
 
+
 
+// The layout service is very self explanatory.  It's responsible for the layout within a chart.
 
+// Scales, Legends and Plugins all rely on the layout service and can easily register to be placed anywhere they need
 
+// It is this service's responsibility of carrying out that layout.
 
+var core_layouts = {
 
+	defaults: {},
 
+
 
+	/**
 
+	 * Register a box to a chart.
 
+	 * A box is simply a reference to an object that requires layout. eg. Scales, Legend, Title.
 
+	 * @param {Chart} chart - the chart to use
 
+	 * @param {ILayoutItem} item - the item to add to be layed out
 
+	 */
 
+	addBox: function(chart, item) {
 
+		if (!chart.boxes) {
 
+			chart.boxes = [];
 
+		}
 
+
 
+		// initialize item with default values
 
+		item.fullWidth = item.fullWidth || false;
 
+		item.position = item.position || 'top';
 
+		item.weight = item.weight || 0;
 
+
 
+		chart.boxes.push(item);
 
+	},
 
+
 
+	/**
 
+	 * Remove a layoutItem from a chart
 
+	 * @param {Chart} chart - the chart to remove the box from
 
+	 * @param {ILayoutItem} layoutItem - the item to remove from the layout
 
+	 */
 
+	removeBox: function(chart, layoutItem) {
 
+		var index = chart.boxes ? chart.boxes.indexOf(layoutItem) : -1;
 
+		if (index !== -1) {
 
+			chart.boxes.splice(index, 1);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Sets (or updates) options on the given `item`.
 
+	 * @param {Chart} chart - the chart in which the item lives (or will be added to)
 
+	 * @param {ILayoutItem} item - the item to configure with the given options
 
+	 * @param {object} options - the new item options.
 
+	 */
 
+	configure: function(chart, item, options) {
 
+		var props = ['fullWidth', 'position', 'weight'];
 
+		var ilen = props.length;
 
+		var i = 0;
 
+		var prop;
 
+
 
+		for (; i < ilen; ++i) {
 
+			prop = props[i];
 
+			if (options.hasOwnProperty(prop)) {
 
+				item[prop] = options[prop];
 
+			}
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Fits boxes of the given chart into the given size by having each box measure itself
 
+	 * then running a fitting algorithm
 
+	 * @param {Chart} chart - the chart
 
+	 * @param {number} width - the width to fit into
 
+	 * @param {number} height - the height to fit into
 
+	 */
 
+	update: function(chart, width, height) {
 
+		if (!chart) {
 
+			return;
 
+		}
 
+
 
+		var layoutOptions = chart.options.layout || {};
 
+		var padding = helpers$1.options.toPadding(layoutOptions.padding);
 
+		var leftPadding = padding.left;
 
+		var rightPadding = padding.right;
 
+		var topPadding = padding.top;
 
+		var bottomPadding = padding.bottom;
 
+
 
+		var leftBoxes = filterByPosition(chart.boxes, 'left');
 
+		var rightBoxes = filterByPosition(chart.boxes, 'right');
 
+		var topBoxes = filterByPosition(chart.boxes, 'top');
 
+		var bottomBoxes = filterByPosition(chart.boxes, 'bottom');
 
+		var chartAreaBoxes = filterByPosition(chart.boxes, 'chartArea');
 
+
 
+		// Sort boxes by weight. A higher weight is further away from the chart area
 
+		sortByWeight(leftBoxes, true);
 
+		sortByWeight(rightBoxes, false);
 
+		sortByWeight(topBoxes, true);
 
+		sortByWeight(bottomBoxes, false);
 
+
 
+		var verticalBoxes = leftBoxes.concat(rightBoxes);
 
+		var horizontalBoxes = topBoxes.concat(bottomBoxes);
 
+		var outerBoxes = verticalBoxes.concat(horizontalBoxes);
 
+
 
+		// Essentially we now have any number of boxes on each of the 4 sides.
 
+		// Our canvas looks like the following.
 
+		// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and
 
+		// B1 is the bottom axis
 
+		// There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays
 
+		// These locations are single-box locations only, when trying to register a chartArea location that is already taken,
 
+		// an error will be thrown.
 
+		//
 
+		// |----------------------------------------------------|
 
+		// |                  T1 (Full Width)                   |
 
+		// |----------------------------------------------------|
 
+		// |    |    |                 T2                  |    |
 
+		// |    |----|-------------------------------------|----|
 
+		// |    |    | C1 |                           | C2 |    |
 
+		// |    |    |----|                           |----|    |
 
+		// |    |    |                                     |    |
 
+		// | L1 | L2 |           ChartArea (C0)            | R1 |
 
+		// |    |    |                                     |    |
 
+		// |    |    |----|                           |----|    |
 
+		// |    |    | C3 |                           | C4 |    |
 
+		// |    |----|-------------------------------------|----|
 
+		// |    |    |                 B1                  |    |
 
+		// |----------------------------------------------------|
 
+		// |                  B2 (Full Width)                   |
 
+		// |----------------------------------------------------|
 
+		//
 
+		// What we do to find the best sizing, we do the following
 
+		// 1. Determine the minimum size of the chart area.
 
+		// 2. Split the remaining width equally between each vertical axis
 
+		// 3. Split the remaining height equally between each horizontal axis
 
+		// 4. Give each layout the maximum size it can be. The layout will return it's minimum size
 
+		// 5. Adjust the sizes of each axis based on it's minimum reported size.
 
+		// 6. Refit each axis
 
+		// 7. Position each axis in the final location
 
+		// 8. Tell the chart the final location of the chart area
 
+		// 9. Tell any axes that overlay the chart area the positions of the chart area
 
+
 
+		// Step 1
 
+		var chartWidth = width - leftPadding - rightPadding;
 
+		var chartHeight = height - topPadding - bottomPadding;
 
+		var chartAreaWidth = chartWidth / 2; // min 50%
 
+
 
+		// Step 2
 
+		var verticalBoxWidth = (width - chartAreaWidth) / verticalBoxes.length;
 
+
 
+		// Step 3
 
+		// TODO re-limit horizontal axis height (this limit has affected only padding calculation since PR 1837)
 
+		// var horizontalBoxHeight = (height - chartAreaHeight) / horizontalBoxes.length;
 
+
 
+		// Step 4
 
+		var maxChartAreaWidth = chartWidth;
 
+		var maxChartAreaHeight = chartHeight;
 
+		var outerBoxSizes = {top: topPadding, left: leftPadding, bottom: bottomPadding, right: rightPadding};
 
+		var minBoxSizes = [];
 
+		var maxPadding;
 
+
 
+		function getMinimumBoxSize(box) {
 
+			var minSize;
 
+			var isHorizontal = box.isHorizontal();
 
+
 
+			if (isHorizontal) {
 
+				minSize = box.update(box.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2);
 
+				maxChartAreaHeight -= minSize.height;
 
+			} else {
 
+				minSize = box.update(verticalBoxWidth, maxChartAreaHeight);
 
+				maxChartAreaWidth -= minSize.width;
 
+			}
 
+
 
+			minBoxSizes.push({
 
+				horizontal: isHorizontal,
 
+				width: minSize.width,
 
+				box: box,
 
+			});
 
+		}
 
+
 
+		helpers$1.each(outerBoxes, getMinimumBoxSize);
 
+
 
+		// If a horizontal box has padding, we move the left boxes over to avoid ugly charts (see issue #2478)
 
+		maxPadding = findMaxPadding(outerBoxes);
 
+
 
+		// At this point, maxChartAreaHeight and maxChartAreaWidth are the size the chart area could
 
+		// be if the axes are drawn at their minimum sizes.
 
+		// Steps 5 & 6
 
+
 
+		// Function to fit a box
 
+		function fitBox(box) {
 
+			var minBoxSize = helpers$1.findNextWhere(minBoxSizes, function(minBox) {
 
+				return minBox.box === box;
 
+			});
 
+
 
+			if (minBoxSize) {
 
+				if (minBoxSize.horizontal) {
 
+					var scaleMargin = {
 
+						left: Math.max(outerBoxSizes.left, maxPadding.left),
 
+						right: Math.max(outerBoxSizes.right, maxPadding.right),
 
+						top: 0,
 
+						bottom: 0
 
+					};
 
+
 
+					// Don't use min size here because of label rotation. When the labels are rotated, their rotation highly depends
 
+					// on the margin. Sometimes they need to increase in size slightly
 
+					box.update(box.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2, scaleMargin);
 
+				} else {
 
+					box.update(minBoxSize.width, maxChartAreaHeight);
 
+				}
 
+			}
 
+		}
 
+
 
+		// Update, and calculate the left and right margins for the horizontal boxes
 
+		helpers$1.each(verticalBoxes, fitBox);
 
+		addSizeByPosition(verticalBoxes, outerBoxSizes);
 
+
 
+		// Set the Left and Right margins for the horizontal boxes
 
+		helpers$1.each(horizontalBoxes, fitBox);
 
+		addSizeByPosition(horizontalBoxes, outerBoxSizes);
 
+
 
+		function finalFitVerticalBox(box) {
 
+			var minBoxSize = helpers$1.findNextWhere(minBoxSizes, function(minSize) {
 
+				return minSize.box === box;
 
+			});
 
+
 
+			var scaleMargin = {
 
+				left: 0,
 
+				right: 0,
 
+				top: outerBoxSizes.top,
 
+				bottom: outerBoxSizes.bottom
 
+			};
 
+
 
+			if (minBoxSize) {
 
+				box.update(minBoxSize.width, maxChartAreaHeight, scaleMargin);
 
+			}
 
+		}
 
+
 
+		// Let the left layout know the final margin
 
+		helpers$1.each(verticalBoxes, finalFitVerticalBox);
 
+
 
+		// Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
 
+		outerBoxSizes = {top: topPadding, left: leftPadding, bottom: bottomPadding, right: rightPadding};
 
+		addSizeByPosition(outerBoxes, outerBoxSizes);
 
+
 
+		// We may be adding some padding to account for rotated x axis labels
 
+		var leftPaddingAddition = Math.max(maxPadding.left - outerBoxSizes.left, 0);
 
+		outerBoxSizes.left += leftPaddingAddition;
 
+		outerBoxSizes.right += Math.max(maxPadding.right - outerBoxSizes.right, 0);
 
+
 
+		var topPaddingAddition = Math.max(maxPadding.top - outerBoxSizes.top, 0);
 
+		outerBoxSizes.top += topPaddingAddition;
 
+		outerBoxSizes.bottom += Math.max(maxPadding.bottom - outerBoxSizes.bottom, 0);
 
+
 
+		// Figure out if our chart area changed. This would occur if the dataset layout label rotation
 
+		// changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do
 
+		// without calling `fit` again
 
+		var newMaxChartAreaHeight = height - outerBoxSizes.top - outerBoxSizes.bottom;
 
+		var newMaxChartAreaWidth = width - outerBoxSizes.left - outerBoxSizes.right;
 
+
 
+		if (newMaxChartAreaWidth !== maxChartAreaWidth || newMaxChartAreaHeight !== maxChartAreaHeight) {
 
+			helpers$1.each(verticalBoxes, function(box) {
 
+				box.height = newMaxChartAreaHeight;
 
+			});
 
+
 
+			helpers$1.each(horizontalBoxes, function(box) {
 
+				if (!box.fullWidth) {
 
+					box.width = newMaxChartAreaWidth;
 
+				}
 
+			});
 
+
 
+			maxChartAreaHeight = newMaxChartAreaHeight;
 
+			maxChartAreaWidth = newMaxChartAreaWidth;
 
+		}
 
+
 
+		// Step 7 - Position the boxes
 
+		var left = leftPadding + leftPaddingAddition;
 
+		var top = topPadding + topPaddingAddition;
 
+
 
+		function placeBox(box) {
 
+			if (box.isHorizontal()) {
 
+				box.left = box.fullWidth ? leftPadding : outerBoxSizes.left;
 
+				box.right = box.fullWidth ? width - rightPadding : outerBoxSizes.left + maxChartAreaWidth;
 
+				box.top = top;
 
+				box.bottom = top + box.height;
 
+
 
+				// Move to next point
 
+				top = box.bottom;
 
+
 
+			} else {
 
+
 
+				box.left = left;
 
+				box.right = left + box.width;
 
+				box.top = outerBoxSizes.top;
 
+				box.bottom = outerBoxSizes.top + maxChartAreaHeight;
 
+
 
+				// Move to next point
 
+				left = box.right;
 
+			}
 
+		}
 
+
 
+		helpers$1.each(leftBoxes.concat(topBoxes), placeBox);
 
+
 
+		// Account for chart width and height
 
+		left += maxChartAreaWidth;
 
+		top += maxChartAreaHeight;
 
+
 
+		helpers$1.each(rightBoxes, placeBox);
 
+		helpers$1.each(bottomBoxes, placeBox);
 
+
 
+		// Step 8
 
+		chart.chartArea = {
 
+			left: outerBoxSizes.left,
 
+			top: outerBoxSizes.top,
 
+			right: outerBoxSizes.left + maxChartAreaWidth,
 
+			bottom: outerBoxSizes.top + maxChartAreaHeight
 
+		};
 
+
 
+		// Step 9
 
+		helpers$1.each(chartAreaBoxes, function(box) {
 
+			box.left = chart.chartArea.left;
 
+			box.top = chart.chartArea.top;
 
+			box.right = chart.chartArea.right;
 
+			box.bottom = chart.chartArea.bottom;
 
+
 
+			box.update(maxChartAreaWidth, maxChartAreaHeight);
 
+		});
 
+	}
 
+};
 
+
 
+/**
 
+ * Platform fallback implementation (minimal).
 
+ * @see https://github.com/chartjs/Chart.js/pull/4591#issuecomment-319575939
 
+ */
 
+
 
+var platform_basic = {
 
+	acquireContext: function(item) {
 
+		if (item && item.canvas) {
 
+			// Support for any object associated to a canvas (including a context2d)
 
+			item = item.canvas;
 
+		}
 
+
 
+		return item && item.getContext('2d') || null;
 
+	}
 
+};
 
+
 
+var platform_dom = "/*\n * DOM element rendering detection\n * https://davidwalsh.name/detect-node-insertion\n */\n@keyframes chartjs-render-animation {\n\tfrom { opacity: 0.99; }\n\tto { opacity: 1; }\n}\n\n.chartjs-render-monitor {\n\tanimation: chartjs-render-animation 0.001s;\n}\n\n/*\n * DOM element resizing detection\n * https://github.com/marcj/css-element-queries\n */\n.chartjs-size-monitor,\n.chartjs-size-monitor-expand,\n.chartjs-size-monitor-shrink {\n\tposition: absolute;\n\tdirection: ltr;\n\tleft: 0;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n\tvisibility: hidden;\n\tz-index: -1;\n}\n\n.chartjs-size-monitor-expand > div {\n\tposition: absolute;\n\twidth: 1000000px;\n\theight: 1000000px;\n\tleft: 0;\n\ttop: 0;\n}\n\n.chartjs-size-monitor-shrink > div {\n\tposition: absolute;\n\twidth: 200%;\n\theight: 200%;\n\tleft: 0;\n\ttop: 0;\n}\n";
 
+
 
+var platform_dom$1 = /*#__PURE__*/Object.freeze({
 
+default: platform_dom
 
+});
 
+
 
+function getCjsExportFromNamespace (n) {
 
+	return n && n.default || n;
 
+}
 
+
 
+var stylesheet = getCjsExportFromNamespace(platform_dom$1);
 
+
 
+var EXPANDO_KEY = '$chartjs';
 
+var CSS_PREFIX = 'chartjs-';
 
+var CSS_SIZE_MONITOR = CSS_PREFIX + 'size-monitor';
 
+var CSS_RENDER_MONITOR = CSS_PREFIX + 'render-monitor';
 
+var CSS_RENDER_ANIMATION = CSS_PREFIX + 'render-animation';
 
+var ANIMATION_START_EVENTS = ['animationstart', 'webkitAnimationStart'];
 
+
 
+/**
 
+ * DOM event types -> Chart.js event types.
 
+ * Note: only events with different types are mapped.
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/Events
 
+ */
 
+var EVENT_TYPES = {
 
+	touchstart: 'mousedown',
 
+	touchmove: 'mousemove',
 
+	touchend: 'mouseup',
 
+	pointerenter: 'mouseenter',
 
+	pointerdown: 'mousedown',
 
+	pointermove: 'mousemove',
 
+	pointerup: 'mouseup',
 
+	pointerleave: 'mouseout',
 
+	pointerout: 'mouseout'
 
+};
 
+
 
+/**
 
+ * The "used" size is the final value of a dimension property after all calculations have
 
+ * been performed. This method uses the computed style of `element` but returns undefined
 
+ * if the computed style is not expressed in pixels. That can happen in some cases where
 
+ * `element` has a size relative to its parent and this last one is not yet displayed,
 
+ * for example because of `display: none` on a parent node.
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/used_value
 
+ * @returns {number} Size in pixels or undefined if unknown.
 
+ */
 
+function readUsedSize(element, property) {
 
+	var value = helpers$1.getStyle(element, property);
 
+	var matches = value && value.match(/^(\d+)(\.\d+)?px$/);
 
+	return matches ? Number(matches[1]) : undefined;
 
+}
 
+
 
+/**
 
+ * Initializes the canvas style and render size without modifying the canvas display size,
 
+ * since responsiveness is handled by the controller.resize() method. The config is used
 
+ * to determine the aspect ratio to apply in case no explicit height has been specified.
 
+ */
 
+function initCanvas(canvas, config) {
 
+	var style = canvas.style;
 
+
 
+	// NOTE(SB) canvas.getAttribute('width') !== canvas.width: in the first case it
 
+	// returns null or '' if no explicit value has been set to the canvas attribute.
 
+	var renderHeight = canvas.getAttribute('height');
 
+	var renderWidth = canvas.getAttribute('width');
 
+
 
+	// Chart.js modifies some canvas values that we want to restore on destroy
 
+	canvas[EXPANDO_KEY] = {
 
+		initial: {
 
+			height: renderHeight,
 
+			width: renderWidth,
 
+			style: {
 
+				display: style.display,
 
+				height: style.height,
 
+				width: style.width
 
+			}
 
+		}
 
+	};
 
+
 
+	// Force canvas to display as block to avoid extra space caused by inline
 
+	// elements, which would interfere with the responsive resize process.
 
+	// https://github.com/chartjs/Chart.js/issues/2538
 
+	style.display = style.display || 'block';
 
+
 
+	if (renderWidth === null || renderWidth === '') {
 
+		var displayWidth = readUsedSize(canvas, 'width');
 
+		if (displayWidth !== undefined) {
 
+			canvas.width = displayWidth;
 
+		}
 
+	}
 
+
 
+	if (renderHeight === null || renderHeight === '') {
 
+		if (canvas.style.height === '') {
 
+			// If no explicit render height and style height, let's apply the aspect ratio,
 
+			// which one can be specified by the user but also by charts as default option
 
+			// (i.e. options.aspectRatio). If not specified, use canvas aspect ratio of 2.
 
+			canvas.height = canvas.width / (config.options.aspectRatio || 2);
 
+		} else {
 
+			var displayHeight = readUsedSize(canvas, 'height');
 
+			if (displayWidth !== undefined) {
 
+				canvas.height = displayHeight;
 
+			}
 
+		}
 
+	}
 
+
 
+	return canvas;
 
+}
 
+
 
+/**
 
+ * Detects support for options object argument in addEventListener.
 
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
 
+ * @private
 
+ */
 
+var supportsEventListenerOptions = (function() {
 
+	var supports = false;
 
+	try {
 
+		var options = Object.defineProperty({}, 'passive', {
 
+			// eslint-disable-next-line getter-return
 
+			get: function() {
 
+				supports = true;
 
+			}
 
+		});
 
+		window.addEventListener('e', null, options);
 
+	} catch (e) {
 
+		// continue regardless of error
 
+	}
 
+	return supports;
 
+}());
 
+
 
+// Default passive to true as expected by Chrome for 'touchstart' and 'touchend' events.
 
+// https://github.com/chartjs/Chart.js/issues/4287
 
+var eventListenerOptions = supportsEventListenerOptions ? {passive: true} : false;
 
+
 
+function addListener(node, type, listener) {
 
+	node.addEventListener(type, listener, eventListenerOptions);
 
+}
 
+
 
+function removeListener(node, type, listener) {
 
+	node.removeEventListener(type, listener, eventListenerOptions);
 
+}
 
+
 
+function createEvent(type, chart, x, y, nativeEvent) {
 
+	return {
 
+		type: type,
 
+		chart: chart,
 
+		native: nativeEvent || null,
 
+		x: x !== undefined ? x : null,
 
+		y: y !== undefined ? y : null,
 
+	};
 
+}
 
+
 
+function fromNativeEvent(event, chart) {
 
+	var type = EVENT_TYPES[event.type] || event.type;
 
+	var pos = helpers$1.getRelativePosition(event, chart);
 
+	return createEvent(type, chart, pos.x, pos.y, event);
 
+}
 
+
 
+function throttled(fn, thisArg) {
 
+	var ticking = false;
 
+	var args = [];
 
+
 
+	return function() {
 
+		args = Array.prototype.slice.call(arguments);
 
+		thisArg = thisArg || this;
 
+
 
+		if (!ticking) {
 
+			ticking = true;
 
+			helpers$1.requestAnimFrame.call(window, function() {
 
+				ticking = false;
 
+				fn.apply(thisArg, args);
 
+			});
 
+		}
 
+	};
 
+}
 
+
 
+function createDiv(cls) {
 
+	var el = document.createElement('div');
 
+	el.className = cls || '';
 
+	return el;
 
+}
 
+
 
+// Implementation based on https://github.com/marcj/css-element-queries
 
+function createResizer(handler) {
 
+	var maxSize = 1000000;
 
+
 
+	// NOTE(SB) Don't use innerHTML because it could be considered unsafe.
 
+	// https://github.com/chartjs/Chart.js/issues/5902
 
+	var resizer = createDiv(CSS_SIZE_MONITOR);
 
+	var expand = createDiv(CSS_SIZE_MONITOR + '-expand');
 
+	var shrink = createDiv(CSS_SIZE_MONITOR + '-shrink');
 
+
 
+	expand.appendChild(createDiv());
 
+	shrink.appendChild(createDiv());
 
+
 
+	resizer.appendChild(expand);
 
+	resizer.appendChild(shrink);
 
+	resizer._reset = function() {
 
+		expand.scrollLeft = maxSize;
 
+		expand.scrollTop = maxSize;
 
+		shrink.scrollLeft = maxSize;
 
+		shrink.scrollTop = maxSize;
 
+	};
 
+
 
+	var onScroll = function() {
 
+		resizer._reset();
 
+		handler();
 
+	};
 
+
 
+	addListener(expand, 'scroll', onScroll.bind(expand, 'expand'));
 
+	addListener(shrink, 'scroll', onScroll.bind(shrink, 'shrink'));
 
+
 
+	return resizer;
 
+}
 
+
 
+// https://davidwalsh.name/detect-node-insertion
 
+function watchForRender(node, handler) {
 
+	var expando = node[EXPANDO_KEY] || (node[EXPANDO_KEY] = {});
 
+	var proxy = expando.renderProxy = function(e) {
 
+		if (e.animationName === CSS_RENDER_ANIMATION) {
 
+			handler();
 
+		}
 
+	};
 
+
 
+	helpers$1.each(ANIMATION_START_EVENTS, function(type) {
 
+		addListener(node, type, proxy);
 
+	});
 
+
 
+	// #4737: Chrome might skip the CSS animation when the CSS_RENDER_MONITOR class
 
+	// is removed then added back immediately (same animation frame?). Accessing the
 
+	// `offsetParent` property will force a reflow and re-evaluate the CSS animation.
 
+	// https://gist.github.com/paulirish/5d52fb081b3570c81e3a#box-metrics
 
+	// https://github.com/chartjs/Chart.js/issues/4737
 
+	expando.reflow = !!node.offsetParent;
 
+
 
+	node.classList.add(CSS_RENDER_MONITOR);
 
+}
 
+
 
+function unwatchForRender(node) {
 
+	var expando = node[EXPANDO_KEY] || {};
 
+	var proxy = expando.renderProxy;
 
+
 
+	if (proxy) {
 
+		helpers$1.each(ANIMATION_START_EVENTS, function(type) {
 
+			removeListener(node, type, proxy);
 
+		});
 
+
 
+		delete expando.renderProxy;
 
+	}
 
+
 
+	node.classList.remove(CSS_RENDER_MONITOR);
 
+}
 
+
 
+function addResizeListener(node, listener, chart) {
 
+	var expando = node[EXPANDO_KEY] || (node[EXPANDO_KEY] = {});
 
+
 
+	// Let's keep track of this added resizer and thus avoid DOM query when removing it.
 
+	var resizer = expando.resizer = createResizer(throttled(function() {
 
+		if (expando.resizer) {
 
+			var container = chart.options.maintainAspectRatio && node.parentNode;
 
+			var w = container ? container.clientWidth : 0;
 
+			listener(createEvent('resize', chart));
 
+			if (container && container.clientWidth < w && chart.canvas) {
 
+				// If the container size shrank during chart resize, let's assume
 
+				// scrollbar appeared. So we resize again with the scrollbar visible -
 
+				// effectively making chart smaller and the scrollbar hidden again.
 
+				// Because we are inside `throttled`, and currently `ticking`, scroll
 
+				// events are ignored during this whole 2 resize process.
 
+				// If we assumed wrong and something else happened, we are resizing
 
+				// twice in a frame (potential performance issue)
 
+				listener(createEvent('resize', chart));
 
+			}
 
+		}
 
+	}));
 
+
 
+	// The resizer needs to be attached to the node parent, so we first need to be
 
+	// sure that `node` is attached to the DOM before injecting the resizer element.
 
+	watchForRender(node, function() {
 
+		if (expando.resizer) {
 
+			var container = node.parentNode;
 
+			if (container && container !== resizer.parentNode) {
 
+				container.insertBefore(resizer, container.firstChild);
 
+			}
 
+
 
+			// The container size might have changed, let's reset the resizer state.
 
+			resizer._reset();
 
+		}
 
+	});
 
+}
 
+
 
+function removeResizeListener(node) {
 
+	var expando = node[EXPANDO_KEY] || {};
 
+	var resizer = expando.resizer;
 
+
 
+	delete expando.resizer;
 
+	unwatchForRender(node);
 
+
 
+	if (resizer && resizer.parentNode) {
 
+		resizer.parentNode.removeChild(resizer);
 
+	}
 
+}
 
+
 
+function injectCSS(platform, css) {
 
+	// https://stackoverflow.com/q/3922139
 
+	var style = platform._style || document.createElement('style');
 
+	if (!platform._style) {
 
+		platform._style = style;
 
+		css = '/* Chart.js */\n' + css;
 
+		style.setAttribute('type', 'text/css');
 
+		document.getElementsByTagName('head')[0].appendChild(style);
 
+	}
 
+
 
+	style.appendChild(document.createTextNode(css));
 
+}
 
+
 
+var platform_dom$2 = {
 
+	/**
 
+	 * When `true`, prevents the automatic injection of the stylesheet required to
 
+	 * correctly detect when the chart is added to the DOM and then resized. This
 
+	 * switch has been added to allow external stylesheet (`dist/Chart(.min)?.js`)
 
+	 * to be manually imported to make this library compatible with any CSP.
 
+	 * See https://github.com/chartjs/Chart.js/issues/5208
 
+	 */
 
+	disableCSSInjection: false,
 
+
 
+	/**
 
+	 * This property holds whether this platform is enabled for the current environment.
 
+	 * Currently used by platform.js to select the proper implementation.
 
+	 * @private
 
+	 */
 
+	_enabled: typeof window !== 'undefined' && typeof document !== 'undefined',
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_ensureLoaded: function() {
 
+		if (this._loaded) {
 
+			return;
 
+		}
 
+
 
+		this._loaded = true;
 
+
 
+		// https://github.com/chartjs/Chart.js/issues/5208
 
+		if (!this.disableCSSInjection) {
 
+			injectCSS(this, stylesheet);
 
+		}
 
+	},
 
+
 
+	acquireContext: function(item, config) {
 
+		if (typeof item === 'string') {
 
+			item = document.getElementById(item);
 
+		} else if (item.length) {
 
+			// Support for array based queries (such as jQuery)
 
+			item = item[0];
 
+		}
 
+
 
+		if (item && item.canvas) {
 
+			// Support for any object associated to a canvas (including a context2d)
 
+			item = item.canvas;
 
+		}
 
+
 
+		// To prevent canvas fingerprinting, some add-ons undefine the getContext
 
+		// method, for example: https://github.com/kkapsner/CanvasBlocker
 
+		// https://github.com/chartjs/Chart.js/issues/2807
 
+		var context = item && item.getContext && item.getContext('2d');
 
+
 
+		// Load platform resources on first chart creation, to make possible to change
 
+		// platform options after importing the library (e.g. `disableCSSInjection`).
 
+		this._ensureLoaded();
 
+
 
+		// `instanceof HTMLCanvasElement/CanvasRenderingContext2D` fails when the item is
 
+		// inside an iframe or when running in a protected environment. We could guess the
 
+		// types from their toString() value but let's keep things flexible and assume it's
 
+		// a sufficient condition if the item has a context2D which has item as `canvas`.
 
+		// https://github.com/chartjs/Chart.js/issues/3887
 
+		// https://github.com/chartjs/Chart.js/issues/4102
 
+		// https://github.com/chartjs/Chart.js/issues/4152
 
+		if (context && context.canvas === item) {
 
+			initCanvas(item, config);
 
+			return context;
 
+		}
 
+
 
+		return null;
 
+	},
 
+
 
+	releaseContext: function(context) {
 
+		var canvas = context.canvas;
 
+		if (!canvas[EXPANDO_KEY]) {
 
+			return;
 
+		}
 
+
 
+		var initial = canvas[EXPANDO_KEY].initial;
 
+		['height', 'width'].forEach(function(prop) {
 
+			var value = initial[prop];
 
+			if (helpers$1.isNullOrUndef(value)) {
 
+				canvas.removeAttribute(prop);
 
+			} else {
 
+				canvas.setAttribute(prop, value);
 
+			}
 
+		});
 
+
 
+		helpers$1.each(initial.style || {}, function(value, key) {
 
+			canvas.style[key] = value;
 
+		});
 
+
 
+		// The canvas render size might have been changed (and thus the state stack discarded),
 
+		// we can't use save() and restore() to restore the initial state. So make sure that at
 
+		// least the canvas context is reset to the default state by setting the canvas width.
 
+		// https://www.w3.org/TR/2011/WD-html5-20110525/the-canvas-element.html
 
+		// eslint-disable-next-line no-self-assign
 
+		canvas.width = canvas.width;
 
+
 
+		delete canvas[EXPANDO_KEY];
 
+	},
 
+
 
+	addEventListener: function(chart, type, listener) {
 
+		var canvas = chart.canvas;
 
+		if (type === 'resize') {
 
+			// Note: the resize event is not supported on all browsers.
 
+			addResizeListener(canvas, listener, chart);
 
+			return;
 
+		}
 
+
 
+		var expando = listener[EXPANDO_KEY] || (listener[EXPANDO_KEY] = {});
 
+		var proxies = expando.proxies || (expando.proxies = {});
 
+		var proxy = proxies[chart.id + '_' + type] = function(event) {
 
+			listener(fromNativeEvent(event, chart));
 
+		};
 
+
 
+		addListener(canvas, type, proxy);
 
+	},
 
+
 
+	removeEventListener: function(chart, type, listener) {
 
+		var canvas = chart.canvas;
 
+		if (type === 'resize') {
 
+			// Note: the resize event is not supported on all browsers.
 
+			removeResizeListener(canvas);
 
+			return;
 
+		}
 
+
 
+		var expando = listener[EXPANDO_KEY] || {};
 
+		var proxies = expando.proxies || {};
 
+		var proxy = proxies[chart.id + '_' + type];
 
+		if (!proxy) {
 
+			return;
 
+		}
 
+
 
+		removeListener(canvas, type, proxy);
 
+	}
 
+};
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use EventTarget.addEventListener instead.
 
+ * EventTarget.addEventListener compatibility: Chrome, Opera 7, Safari, FF1.5+, IE9+
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 
+ * @function Chart.helpers.addEvent
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.addEvent = addListener;
 
+
 
+/**
 
+ * Provided for backward compatibility, use EventTarget.removeEventListener instead.
 
+ * EventTarget.removeEventListener compatibility: Chrome, Opera 7, Safari, FF1.5+, IE9+
 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
 
+ * @function Chart.helpers.removeEvent
 
+ * @deprecated since version 2.7.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.removeEvent = removeListener;
 
+
 
+// @TODO Make possible to select another platform at build time.
 
+var implementation = platform_dom$2._enabled ? platform_dom$2 : platform_basic;
 
+
 
+/**
 
+ * @namespace Chart.platform
 
+ * @see https://chartjs.gitbooks.io/proposals/content/Platform.html
 
+ * @since 2.4.0
 
+ */
 
+var platform = helpers$1.extend({
 
+	/**
 
+	 * @since 2.7.0
 
+	 */
 
+	initialize: function() {},
 
+
 
+	/**
 
+	 * Called at chart construction time, returns a context2d instance implementing
 
+	 * the [W3C Canvas 2D Context API standard]{@link https://www.w3.org/TR/2dcontext/}.
 
+	 * @param {*} item - The native item from which to acquire context (platform specific)
 
+	 * @param {object} options - The chart options
 
+	 * @returns {CanvasRenderingContext2D} context2d instance
 
+	 */
 
+	acquireContext: function() {},
 
+
 
+	/**
 
+	 * Called at chart destruction time, releases any resources associated to the context
 
+	 * previously returned by the acquireContext() method.
 
+	 * @param {CanvasRenderingContext2D} context - The context2d instance
 
+	 * @returns {boolean} true if the method succeeded, else false
 
+	 */
 
+	releaseContext: function() {},
 
+
 
+	/**
 
+	 * Registers the specified listener on the given chart.
 
+	 * @param {Chart} chart - Chart from which to listen for event
 
+	 * @param {string} type - The ({@link IEvent}) type to listen for
 
+	 * @param {function} listener - Receives a notification (an object that implements
 
+	 * the {@link IEvent} interface) when an event of the specified type occurs.
 
+	 */
 
+	addEventListener: function() {},
 
+
 
+	/**
 
+	 * Removes the specified listener previously registered with addEventListener.
 
+	 * @param {Chart} chart - Chart from which to remove the listener
 
+	 * @param {string} type - The ({@link IEvent}) type to remove
 
+	 * @param {function} listener - The listener function to remove from the event target.
 
+	 */
 
+	removeEventListener: function() {}
 
+
 
+}, implementation);
 
+
 
+core_defaults._set('global', {
 
+	plugins: {}
 
+});
 
+
 
+/**
 
+ * The plugin service singleton
 
+ * @namespace Chart.plugins
 
+ * @since 2.1.0
 
+ */
 
+var core_plugins = {
 
+	/**
 
+	 * Globally registered plugins.
 
+	 * @private
 
+	 */
 
+	_plugins: [],
 
+
 
+	/**
 
+	 * This identifier is used to invalidate the descriptors cache attached to each chart
 
+	 * when a global plugin is registered or unregistered. In this case, the cache ID is
 
+	 * incremented and descriptors are regenerated during following API calls.
 
+	 * @private
 
+	 */
 
+	_cacheId: 0,
 
+
 
+	/**
 
+	 * Registers the given plugin(s) if not already registered.
 
+	 * @param {IPlugin[]|IPlugin} plugins plugin instance(s).
 
+	 */
 
+	register: function(plugins) {
 
+		var p = this._plugins;
 
+		([]).concat(plugins).forEach(function(plugin) {
 
+			if (p.indexOf(plugin) === -1) {
 
+				p.push(plugin);
 
+			}
 
+		});
 
+
 
+		this._cacheId++;
 
+	},
 
+
 
+	/**
 
+	 * Unregisters the given plugin(s) only if registered.
 
+	 * @param {IPlugin[]|IPlugin} plugins plugin instance(s).
 
+	 */
 
+	unregister: function(plugins) {
 
+		var p = this._plugins;
 
+		([]).concat(plugins).forEach(function(plugin) {
 
+			var idx = p.indexOf(plugin);
 
+			if (idx !== -1) {
 
+				p.splice(idx, 1);
 
+			}
 
+		});
 
+
 
+		this._cacheId++;
 
+	},
 
+
 
+	/**
 
+	 * Remove all registered plugins.
 
+	 * @since 2.1.5
 
+	 */
 
+	clear: function() {
 
+		this._plugins = [];
 
+		this._cacheId++;
 
+	},
 
+
 
+	/**
 
+	 * Returns the number of registered plugins?
 
+	 * @returns {number}
 
+	 * @since 2.1.5
 
+	 */
 
+	count: function() {
 
+		return this._plugins.length;
 
+	},
 
+
 
+	/**
 
+	 * Returns all registered plugin instances.
 
+	 * @returns {IPlugin[]} array of plugin objects.
 
+	 * @since 2.1.5
 
+	 */
 
+	getAll: function() {
 
+		return this._plugins;
 
+	},
 
+
 
+	/**
 
+	 * Calls enabled plugins for `chart` on the specified hook and with the given args.
 
+	 * This method immediately returns as soon as a plugin explicitly returns false. The
 
+	 * returned value can be used, for instance, to interrupt the current action.
 
+	 * @param {Chart} chart - The chart instance for which plugins should be called.
 
+	 * @param {string} hook - The name of the plugin method to call (e.g. 'beforeUpdate').
 
+	 * @param {Array} [args] - Extra arguments to apply to the hook call.
 
+	 * @returns {boolean} false if any of the plugins return false, else returns true.
 
+	 */
 
+	notify: function(chart, hook, args) {
 
+		var descriptors = this.descriptors(chart);
 
+		var ilen = descriptors.length;
 
+		var i, descriptor, plugin, params, method;
 
+
 
+		for (i = 0; i < ilen; ++i) {
 
+			descriptor = descriptors[i];
 
+			plugin = descriptor.plugin;
 
+			method = plugin[hook];
 
+			if (typeof method === 'function') {
 
+				params = [chart].concat(args || []);
 
+				params.push(descriptor.options);
 
+				if (method.apply(plugin, params) === false) {
 
+					return false;
 
+				}
 
+			}
 
+		}
 
+
 
+		return true;
 
+	},
 
+
 
+	/**
 
+	 * Returns descriptors of enabled plugins for the given chart.
 
+	 * @returns {object[]} [{ plugin, options }]
 
+	 * @private
 
+	 */
 
+	descriptors: function(chart) {
 
+		var cache = chart.$plugins || (chart.$plugins = {});
 
+		if (cache.id === this._cacheId) {
 
+			return cache.descriptors;
 
+		}
 
+
 
+		var plugins = [];
 
+		var descriptors = [];
 
+		var config = (chart && chart.config) || {};
 
+		var options = (config.options && config.options.plugins) || {};
 
+
 
+		this._plugins.concat(config.plugins || []).forEach(function(plugin) {
 
+			var idx = plugins.indexOf(plugin);
 
+			if (idx !== -1) {
 
+				return;
 
+			}
 
+
 
+			var id = plugin.id;
 
+			var opts = options[id];
 
+			if (opts === false) {
 
+				return;
 
+			}
 
+
 
+			if (opts === true) {
 
+				opts = helpers$1.clone(core_defaults.global.plugins[id]);
 
+			}
 
+
 
+			plugins.push(plugin);
 
+			descriptors.push({
 
+				plugin: plugin,
 
+				options: opts || {}
 
+			});
 
+		});
 
+
 
+		cache.descriptors = descriptors;
 
+		cache.id = this._cacheId;
 
+		return descriptors;
 
+	},
 
+
 
+	/**
 
+	 * Invalidates cache for the given chart: descriptors hold a reference on plugin option,
 
+	 * but in some cases, this reference can be changed by the user when updating options.
 
+	 * https://github.com/chartjs/Chart.js/issues/5111#issuecomment-355934167
 
+	 * @private
 
+	 */
 
+	_invalidate: function(chart) {
 
+		delete chart.$plugins;
 
+	}
 
+};
 
+
 
+var core_scaleService = {
 
+	// Scale registration object. Extensions can register new scale types (such as log or DB scales) and then
 
+	// use the new chart options to grab the correct scale
 
+	constructors: {},
 
+	// Use a registration function so that we can move to an ES6 map when we no longer need to support
 
+	// old browsers
 
+
 
+	// Scale config defaults
 
+	defaults: {},
 
+	registerScaleType: function(type, scaleConstructor, scaleDefaults) {
 
+		this.constructors[type] = scaleConstructor;
 
+		this.defaults[type] = helpers$1.clone(scaleDefaults);
 
+	},
 
+	getScaleConstructor: function(type) {
 
+		return this.constructors.hasOwnProperty(type) ? this.constructors[type] : undefined;
 
+	},
 
+	getScaleDefaults: function(type) {
 
+		// Return the scale defaults merged with the global settings so that we always use the latest ones
 
+		return this.defaults.hasOwnProperty(type) ? helpers$1.merge({}, [core_defaults.scale, this.defaults[type]]) : {};
 
+	},
 
+	updateScaleDefaults: function(type, additions) {
 
+		var me = this;
 
+		if (me.defaults.hasOwnProperty(type)) {
 
+			me.defaults[type] = helpers$1.extend(me.defaults[type], additions);
 
+		}
 
+	},
 
+	addScalesToLayout: function(chart) {
 
+		// Adds each scale to the chart.boxes array to be sized accordingly
 
+		helpers$1.each(chart.scales, function(scale) {
 
+			// Set ILayoutItem parameters for backwards compatibility
 
+			scale.fullWidth = scale.options.fullWidth;
 
+			scale.position = scale.options.position;
 
+			scale.weight = scale.options.weight;
 
+			core_layouts.addBox(chart, scale);
 
+		});
 
+	}
 
+};
 
+
 
+var valueOrDefault$7 = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('global', {
 
+	tooltips: {
 
+		enabled: true,
 
+		custom: null,
 
+		mode: 'nearest',
 
+		position: 'average',
 
+		intersect: true,
 
+		backgroundColor: 'rgba(0,0,0,0.8)',
 
+		titleFontStyle: 'bold',
 
+		titleSpacing: 2,
 
+		titleMarginBottom: 6,
 
+		titleFontColor: '#fff',
 
+		titleAlign: 'left',
 
+		bodySpacing: 2,
 
+		bodyFontColor: '#fff',
 
+		bodyAlign: 'left',
 
+		footerFontStyle: 'bold',
 
+		footerSpacing: 2,
 
+		footerMarginTop: 6,
 
+		footerFontColor: '#fff',
 
+		footerAlign: 'left',
 
+		yPadding: 6,
 
+		xPadding: 6,
 
+		caretPadding: 2,
 
+		caretSize: 5,
 
+		cornerRadius: 6,
 
+		multiKeyBackground: '#fff',
 
+		displayColors: true,
 
+		borderColor: 'rgba(0,0,0,0)',
 
+		borderWidth: 0,
 
+		callbacks: {
 
+			// Args are: (tooltipItems, data)
 
+			beforeTitle: helpers$1.noop,
 
+			title: function(tooltipItems, data) {
 
+				var title = '';
 
+				var labels = data.labels;
 
+				var labelCount = labels ? labels.length : 0;
 
+
 
+				if (tooltipItems.length > 0) {
 
+					var item = tooltipItems[0];
 
+					if (item.label) {
 
+						title = item.label;
 
+					} else if (item.xLabel) {
 
+						title = item.xLabel;
 
+					} else if (labelCount > 0 && item.index < labelCount) {
 
+						title = labels[item.index];
 
+					}
 
+				}
 
+
 
+				return title;
 
+			},
 
+			afterTitle: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItems, data)
 
+			beforeBody: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItem, data)
 
+			beforeLabel: helpers$1.noop,
 
+			label: function(tooltipItem, data) {
 
+				var label = data.datasets[tooltipItem.datasetIndex].label || '';
 
+
 
+				if (label) {
 
+					label += ': ';
 
+				}
 
+				if (!helpers$1.isNullOrUndef(tooltipItem.value)) {
 
+					label += tooltipItem.value;
 
+				} else {
 
+					label += tooltipItem.yLabel;
 
+				}
 
+				return label;
 
+			},
 
+			labelColor: function(tooltipItem, chart) {
 
+				var meta = chart.getDatasetMeta(tooltipItem.datasetIndex);
 
+				var activeElement = meta.data[tooltipItem.index];
 
+				var view = activeElement._view;
 
+				return {
 
+					borderColor: view.borderColor,
 
+					backgroundColor: view.backgroundColor
 
+				};
 
+			},
 
+			labelTextColor: function() {
 
+				return this._options.bodyFontColor;
 
+			},
 
+			afterLabel: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItems, data)
 
+			afterBody: helpers$1.noop,
 
+
 
+			// Args are: (tooltipItems, data)
 
+			beforeFooter: helpers$1.noop,
 
+			footer: helpers$1.noop,
 
+			afterFooter: helpers$1.noop
 
+		}
 
+	}
 
+});
 
+
 
+var positioners = {
 
+	/**
 
+	 * Average mode places the tooltip at the average position of the elements shown
 
+	 * @function Chart.Tooltip.positioners.average
 
+	 * @param elements {ChartElement[]} the elements being displayed in the tooltip
 
+	 * @returns {object} tooltip position
 
+	 */
 
+	average: function(elements) {
 
+		if (!elements.length) {
 
+			return false;
 
+		}
 
+
 
+		var i, len;
 
+		var x = 0;
 
+		var y = 0;
 
+		var count = 0;
 
+
 
+		for (i = 0, len = elements.length; i < len; ++i) {
 
+			var el = elements[i];
 
+			if (el && el.hasValue()) {
 
+				var pos = el.tooltipPosition();
 
+				x += pos.x;
 
+				y += pos.y;
 
+				++count;
 
+			}
 
+		}
 
+
 
+		return {
 
+			x: x / count,
 
+			y: y / count
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Gets the tooltip position nearest of the item nearest to the event position
 
+	 * @function Chart.Tooltip.positioners.nearest
 
+	 * @param elements {Chart.Element[]} the tooltip elements
 
+	 * @param eventPosition {object} the position of the event in canvas coordinates
 
+	 * @returns {object} the tooltip position
 
+	 */
 
+	nearest: function(elements, eventPosition) {
 
+		var x = eventPosition.x;
 
+		var y = eventPosition.y;
 
+		var minDistance = Number.POSITIVE_INFINITY;
 
+		var i, len, nearestElement;
 
+
 
+		for (i = 0, len = elements.length; i < len; ++i) {
 
+			var el = elements[i];
 
+			if (el && el.hasValue()) {
 
+				var center = el.getCenterPoint();
 
+				var d = helpers$1.distanceBetweenPoints(eventPosition, center);
 
+
 
+				if (d < minDistance) {
 
+					minDistance = d;
 
+					nearestElement = el;
 
+				}
 
+			}
 
+		}
 
+
 
+		if (nearestElement) {
 
+			var tp = nearestElement.tooltipPosition();
 
+			x = tp.x;
 
+			y = tp.y;
 
+		}
 
+
 
+		return {
 
+			x: x,
 
+			y: y
 
+		};
 
+	}
 
+};
 
+
 
+// Helper to push or concat based on if the 2nd parameter is an array or not
 
+function pushOrConcat(base, toPush) {
 
+	if (toPush) {
 
+		if (helpers$1.isArray(toPush)) {
 
+			// base = base.concat(toPush);
 
+			Array.prototype.push.apply(base, toPush);
 
+		} else {
 
+			base.push(toPush);
 
+		}
 
+	}
 
+
 
+	return base;
 
+}
 
+
 
+/**
 
+ * Returns array of strings split by newline
 
+ * @param {string} value - The value to split by newline.
 
+ * @returns {string[]} value if newline present - Returned from String split() method
 
+ * @function
 
+ */
 
+function splitNewlines(str) {
 
+	if ((typeof str === 'string' || str instanceof String) && str.indexOf('\n') > -1) {
 
+		return str.split('\n');
 
+	}
 
+	return str;
 
+}
 
+
 
+
 
+/**
 
+ * Private helper to create a tooltip item model
 
+ * @param element - the chart element (point, arc, bar) to create the tooltip item for
 
+ * @return new tooltip item
 
+ */
 
+function createTooltipItem(element) {
 
+	var xScale = element._xScale;
 
+	var yScale = element._yScale || element._scale; // handle radar || polarArea charts
 
+	var index = element._index;
 
+	var datasetIndex = element._datasetIndex;
 
+	var controller = element._chart.getDatasetMeta(datasetIndex).controller;
 
+	var indexScale = controller._getIndexScale();
 
+	var valueScale = controller._getValueScale();
 
+
 
+	return {
 
+		xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '',
 
+		yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '',
 
+		label: indexScale ? '' + indexScale.getLabelForIndex(index, datasetIndex) : '',
 
+		value: valueScale ? '' + valueScale.getLabelForIndex(index, datasetIndex) : '',
 
+		index: index,
 
+		datasetIndex: datasetIndex,
 
+		x: element._model.x,
 
+		y: element._model.y
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper to get the reset model for the tooltip
 
+ * @param tooltipOpts {object} the tooltip options
 
+ */
 
+function getBaseModel(tooltipOpts) {
 
+	var globalDefaults = core_defaults.global;
 
+
 
+	return {
 
+		// Positioning
 
+		xPadding: tooltipOpts.xPadding,
 
+		yPadding: tooltipOpts.yPadding,
 
+		xAlign: tooltipOpts.xAlign,
 
+		yAlign: tooltipOpts.yAlign,
 
+
 
+		// Body
 
+		bodyFontColor: tooltipOpts.bodyFontColor,
 
+		_bodyFontFamily: valueOrDefault$7(tooltipOpts.bodyFontFamily, globalDefaults.defaultFontFamily),
 
+		_bodyFontStyle: valueOrDefault$7(tooltipOpts.bodyFontStyle, globalDefaults.defaultFontStyle),
 
+		_bodyAlign: tooltipOpts.bodyAlign,
 
+		bodyFontSize: valueOrDefault$7(tooltipOpts.bodyFontSize, globalDefaults.defaultFontSize),
 
+		bodySpacing: tooltipOpts.bodySpacing,
 
+
 
+		// Title
 
+		titleFontColor: tooltipOpts.titleFontColor,
 
+		_titleFontFamily: valueOrDefault$7(tooltipOpts.titleFontFamily, globalDefaults.defaultFontFamily),
 
+		_titleFontStyle: valueOrDefault$7(tooltipOpts.titleFontStyle, globalDefaults.defaultFontStyle),
 
+		titleFontSize: valueOrDefault$7(tooltipOpts.titleFontSize, globalDefaults.defaultFontSize),
 
+		_titleAlign: tooltipOpts.titleAlign,
 
+		titleSpacing: tooltipOpts.titleSpacing,
 
+		titleMarginBottom: tooltipOpts.titleMarginBottom,
 
+
 
+		// Footer
 
+		footerFontColor: tooltipOpts.footerFontColor,
 
+		_footerFontFamily: valueOrDefault$7(tooltipOpts.footerFontFamily, globalDefaults.defaultFontFamily),
 
+		_footerFontStyle: valueOrDefault$7(tooltipOpts.footerFontStyle, globalDefaults.defaultFontStyle),
 
+		footerFontSize: valueOrDefault$7(tooltipOpts.footerFontSize, globalDefaults.defaultFontSize),
 
+		_footerAlign: tooltipOpts.footerAlign,
 
+		footerSpacing: tooltipOpts.footerSpacing,
 
+		footerMarginTop: tooltipOpts.footerMarginTop,
 
+
 
+		// Appearance
 
+		caretSize: tooltipOpts.caretSize,
 
+		cornerRadius: tooltipOpts.cornerRadius,
 
+		backgroundColor: tooltipOpts.backgroundColor,
 
+		opacity: 0,
 
+		legendColorBackground: tooltipOpts.multiKeyBackground,
 
+		displayColors: tooltipOpts.displayColors,
 
+		borderColor: tooltipOpts.borderColor,
 
+		borderWidth: tooltipOpts.borderWidth
 
+	};
 
+}
 
+
 
+/**
 
+ * Get the size of the tooltip
 
+ */
 
+function getTooltipSize(tooltip, model) {
 
+	var ctx = tooltip._chart.ctx;
 
+
 
+	var height = model.yPadding * 2; // Tooltip Padding
 
+	var width = 0;
 
+
 
+	// Count of all lines in the body
 
+	var body = model.body;
 
+	var combinedBodyLength = body.reduce(function(count, bodyItem) {
 
+		return count + bodyItem.before.length + bodyItem.lines.length + bodyItem.after.length;
 
+	}, 0);
 
+	combinedBodyLength += model.beforeBody.length + model.afterBody.length;
 
+
 
+	var titleLineCount = model.title.length;
 
+	var footerLineCount = model.footer.length;
 
+	var titleFontSize = model.titleFontSize;
 
+	var bodyFontSize = model.bodyFontSize;
 
+	var footerFontSize = model.footerFontSize;
 
+
 
+	height += titleLineCount * titleFontSize; // Title Lines
 
+	height += titleLineCount ? (titleLineCount - 1) * model.titleSpacing : 0; // Title Line Spacing
 
+	height += titleLineCount ? model.titleMarginBottom : 0; // Title's bottom Margin
 
+	height += combinedBodyLength * bodyFontSize; // Body Lines
 
+	height += combinedBodyLength ? (combinedBodyLength - 1) * model.bodySpacing : 0; // Body Line Spacing
 
+	height += footerLineCount ? model.footerMarginTop : 0; // Footer Margin
 
+	height += footerLineCount * (footerFontSize); // Footer Lines
 
+	height += footerLineCount ? (footerLineCount - 1) * model.footerSpacing : 0; // Footer Line Spacing
 
+
 
+	// Title width
 
+	var widthPadding = 0;
 
+	var maxLineWidth = function(line) {
 
+		width = Math.max(width, ctx.measureText(line).width + widthPadding);
 
+	};
 
+
 
+	ctx.font = helpers$1.fontString(titleFontSize, model._titleFontStyle, model._titleFontFamily);
 
+	helpers$1.each(model.title, maxLineWidth);
 
+
 
+	// Body width
 
+	ctx.font = helpers$1.fontString(bodyFontSize, model._bodyFontStyle, model._bodyFontFamily);
 
+	helpers$1.each(model.beforeBody.concat(model.afterBody), maxLineWidth);
 
+
 
+	// Body lines may include some extra width due to the color box
 
+	widthPadding = model.displayColors ? (bodyFontSize + 2) : 0;
 
+	helpers$1.each(body, function(bodyItem) {
 
+		helpers$1.each(bodyItem.before, maxLineWidth);
 
+		helpers$1.each(bodyItem.lines, maxLineWidth);
 
+		helpers$1.each(bodyItem.after, maxLineWidth);
 
+	});
 
+
 
+	// Reset back to 0
 
+	widthPadding = 0;
 
+
 
+	// Footer width
 
+	ctx.font = helpers$1.fontString(footerFontSize, model._footerFontStyle, model._footerFontFamily);
 
+	helpers$1.each(model.footer, maxLineWidth);
 
+
 
+	// Add padding
 
+	width += 2 * model.xPadding;
 
+
 
+	return {
 
+		width: width,
 
+		height: height
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper to get the alignment of a tooltip given the size
 
+ */
 
+function determineAlignment(tooltip, size) {
 
+	var model = tooltip._model;
 
+	var chart = tooltip._chart;
 
+	var chartArea = tooltip._chart.chartArea;
 
+	var xAlign = 'center';
 
+	var yAlign = 'center';
 
+
 
+	if (model.y < size.height) {
 
+		yAlign = 'top';
 
+	} else if (model.y > (chart.height - size.height)) {
 
+		yAlign = 'bottom';
 
+	}
 
+
 
+	var lf, rf; // functions to determine left, right alignment
 
+	var olf, orf; // functions to determine if left/right alignment causes tooltip to go outside chart
 
+	var yf; // function to get the y alignment if the tooltip goes outside of the left or right edges
 
+	var midX = (chartArea.left + chartArea.right) / 2;
 
+	var midY = (chartArea.top + chartArea.bottom) / 2;
 
+
 
+	if (yAlign === 'center') {
 
+		lf = function(x) {
 
+			return x <= midX;
 
+		};
 
+		rf = function(x) {
 
+			return x > midX;
 
+		};
 
+	} else {
 
+		lf = function(x) {
 
+			return x <= (size.width / 2);
 
+		};
 
+		rf = function(x) {
 
+			return x >= (chart.width - (size.width / 2));
 
+		};
 
+	}
 
+
 
+	olf = function(x) {
 
+		return x + size.width + model.caretSize + model.caretPadding > chart.width;
 
+	};
 
+	orf = function(x) {
 
+		return x - size.width - model.caretSize - model.caretPadding < 0;
 
+	};
 
+	yf = function(y) {
 
+		return y <= midY ? 'top' : 'bottom';
 
+	};
 
+
 
+	if (lf(model.x)) {
 
+		xAlign = 'left';
 
+
 
+		// Is tooltip too wide and goes over the right side of the chart.?
 
+		if (olf(model.x)) {
 
+			xAlign = 'center';
 
+			yAlign = yf(model.y);
 
+		}
 
+	} else if (rf(model.x)) {
 
+		xAlign = 'right';
 
+
 
+		// Is tooltip too wide and goes outside left edge of canvas?
 
+		if (orf(model.x)) {
 
+			xAlign = 'center';
 
+			yAlign = yf(model.y);
 
+		}
 
+	}
 
+
 
+	var opts = tooltip._options;
 
+	return {
 
+		xAlign: opts.xAlign ? opts.xAlign : xAlign,
 
+		yAlign: opts.yAlign ? opts.yAlign : yAlign
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper to get the location a tooltip needs to be placed at given the initial position (via the vm) and the size and alignment
 
+ */
 
+function getBackgroundPoint(vm, size, alignment, chart) {
 
+	// Background Position
 
+	var x = vm.x;
 
+	var y = vm.y;
 
+
 
+	var caretSize = vm.caretSize;
 
+	var caretPadding = vm.caretPadding;
 
+	var cornerRadius = vm.cornerRadius;
 
+	var xAlign = alignment.xAlign;
 
+	var yAlign = alignment.yAlign;
 
+	var paddingAndSize = caretSize + caretPadding;
 
+	var radiusAndPadding = cornerRadius + caretPadding;
 
+
 
+	if (xAlign === 'right') {
 
+		x -= size.width;
 
+	} else if (xAlign === 'center') {
 
+		x -= (size.width / 2);
 
+		if (x + size.width > chart.width) {
 
+			x = chart.width - size.width;
 
+		}
 
+		if (x < 0) {
 
+			x = 0;
 
+		}
 
+	}
 
+
 
+	if (yAlign === 'top') {
 
+		y += paddingAndSize;
 
+	} else if (yAlign === 'bottom') {
 
+		y -= size.height + paddingAndSize;
 
+	} else {
 
+		y -= (size.height / 2);
 
+	}
 
+
 
+	if (yAlign === 'center') {
 
+		if (xAlign === 'left') {
 
+			x += paddingAndSize;
 
+		} else if (xAlign === 'right') {
 
+			x -= paddingAndSize;
 
+		}
 
+	} else if (xAlign === 'left') {
 
+		x -= radiusAndPadding;
 
+	} else if (xAlign === 'right') {
 
+		x += radiusAndPadding;
 
+	}
 
+
 
+	return {
 
+		x: x,
 
+		y: y
 
+	};
 
+}
 
+
 
+function getAlignedX(vm, align) {
 
+	return align === 'center'
 
+		? vm.x + vm.width / 2
 
+		: align === 'right'
 
+			? vm.x + vm.width - vm.xPadding
 
+			: vm.x + vm.xPadding;
 
+}
 
+
 
+/**
 
+ * Helper to build before and after body lines
 
+ */
 
+function getBeforeAfterBodyLines(callback) {
 
+	return pushOrConcat([], splitNewlines(callback));
 
+}
 
+
 
+var exports$3 = core_element.extend({
 
+	initialize: function() {
 
+		this._model = getBaseModel(this._options);
 
+		this._lastActive = [];
 
+	},
 
+
 
+	// Get the title
 
+	// Args are: (tooltipItem, data)
 
+	getTitle: function() {
 
+		var me = this;
 
+		var opts = me._options;
 
+		var callbacks = opts.callbacks;
 
+
 
+		var beforeTitle = callbacks.beforeTitle.apply(me, arguments);
 
+		var title = callbacks.title.apply(me, arguments);
 
+		var afterTitle = callbacks.afterTitle.apply(me, arguments);
 
+
 
+		var lines = [];
 
+		lines = pushOrConcat(lines, splitNewlines(beforeTitle));
 
+		lines = pushOrConcat(lines, splitNewlines(title));
 
+		lines = pushOrConcat(lines, splitNewlines(afterTitle));
 
+
 
+		return lines;
 
+	},
 
+
 
+	// Args are: (tooltipItem, data)
 
+	getBeforeBody: function() {
 
+		return getBeforeAfterBodyLines(this._options.callbacks.beforeBody.apply(this, arguments));
 
+	},
 
+
 
+	// Args are: (tooltipItem, data)
 
+	getBody: function(tooltipItems, data) {
 
+		var me = this;
 
+		var callbacks = me._options.callbacks;
 
+		var bodyItems = [];
 
+
 
+		helpers$1.each(tooltipItems, function(tooltipItem) {
 
+			var bodyItem = {
 
+				before: [],
 
+				lines: [],
 
+				after: []
 
+			};
 
+			pushOrConcat(bodyItem.before, splitNewlines(callbacks.beforeLabel.call(me, tooltipItem, data)));
 
+			pushOrConcat(bodyItem.lines, callbacks.label.call(me, tooltipItem, data));
 
+			pushOrConcat(bodyItem.after, splitNewlines(callbacks.afterLabel.call(me, tooltipItem, data)));
 
+
 
+			bodyItems.push(bodyItem);
 
+		});
 
+
 
+		return bodyItems;
 
+	},
 
+
 
+	// Args are: (tooltipItem, data)
 
+	getAfterBody: function() {
 
+		return getBeforeAfterBodyLines(this._options.callbacks.afterBody.apply(this, arguments));
 
+	},
 
+
 
+	// Get the footer and beforeFooter and afterFooter lines
 
+	// Args are: (tooltipItem, data)
 
+	getFooter: function() {
 
+		var me = this;
 
+		var callbacks = me._options.callbacks;
 
+
 
+		var beforeFooter = callbacks.beforeFooter.apply(me, arguments);
 
+		var footer = callbacks.footer.apply(me, arguments);
 
+		var afterFooter = callbacks.afterFooter.apply(me, arguments);
 
+
 
+		var lines = [];
 
+		lines = pushOrConcat(lines, splitNewlines(beforeFooter));
 
+		lines = pushOrConcat(lines, splitNewlines(footer));
 
+		lines = pushOrConcat(lines, splitNewlines(afterFooter));
 
+
 
+		return lines;
 
+	},
 
+
 
+	update: function(changed) {
 
+		var me = this;
 
+		var opts = me._options;
 
+
 
+		// Need to regenerate the model because its faster than using extend and it is necessary due to the optimization in Chart.Element.transition
 
+		// that does _view = _model if ease === 1. This causes the 2nd tooltip update to set properties in both the view and model at the same time
 
+		// which breaks any animations.
 
+		var existingModel = me._model;
 
+		var model = me._model = getBaseModel(opts);
 
+		var active = me._active;
 
+
 
+		var data = me._data;
 
+
 
+		// In the case where active.length === 0 we need to keep these at existing values for good animations
 
+		var alignment = {
 
+			xAlign: existingModel.xAlign,
 
+			yAlign: existingModel.yAlign
 
+		};
 
+		var backgroundPoint = {
 
+			x: existingModel.x,
 
+			y: existingModel.y
 
+		};
 
+		var tooltipSize = {
 
+			width: existingModel.width,
 
+			height: existingModel.height
 
+		};
 
+		var tooltipPosition = {
 
+			x: existingModel.caretX,
 
+			y: existingModel.caretY
 
+		};
 
+
 
+		var i, len;
 
+
 
+		if (active.length) {
 
+			model.opacity = 1;
 
+
 
+			var labelColors = [];
 
+			var labelTextColors = [];
 
+			tooltipPosition = positioners[opts.position].call(me, active, me._eventPosition);
 
+
 
+			var tooltipItems = [];
 
+			for (i = 0, len = active.length; i < len; ++i) {
 
+				tooltipItems.push(createTooltipItem(active[i]));
 
+			}
 
+
 
+			// If the user provided a filter function, use it to modify the tooltip items
 
+			if (opts.filter) {
 
+				tooltipItems = tooltipItems.filter(function(a) {
 
+					return opts.filter(a, data);
 
+				});
 
+			}
 
+
 
+			// If the user provided a sorting function, use it to modify the tooltip items
 
+			if (opts.itemSort) {
 
+				tooltipItems = tooltipItems.sort(function(a, b) {
 
+					return opts.itemSort(a, b, data);
 
+				});
 
+			}
 
+
 
+			// Determine colors for boxes
 
+			helpers$1.each(tooltipItems, function(tooltipItem) {
 
+				labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart));
 
+				labelTextColors.push(opts.callbacks.labelTextColor.call(me, tooltipItem, me._chart));
 
+			});
 
+
 
+
 
+			// Build the Text Lines
 
+			model.title = me.getTitle(tooltipItems, data);
 
+			model.beforeBody = me.getBeforeBody(tooltipItems, data);
 
+			model.body = me.getBody(tooltipItems, data);
 
+			model.afterBody = me.getAfterBody(tooltipItems, data);
 
+			model.footer = me.getFooter(tooltipItems, data);
 
+
 
+			// Initial positioning and colors
 
+			model.x = tooltipPosition.x;
 
+			model.y = tooltipPosition.y;
 
+			model.caretPadding = opts.caretPadding;
 
+			model.labelColors = labelColors;
 
+			model.labelTextColors = labelTextColors;
 
+
 
+			// data points
 
+			model.dataPoints = tooltipItems;
 
+
 
+			// We need to determine alignment of the tooltip
 
+			tooltipSize = getTooltipSize(this, model);
 
+			alignment = determineAlignment(this, tooltipSize);
 
+			// Final Size and Position
 
+			backgroundPoint = getBackgroundPoint(model, tooltipSize, alignment, me._chart);
 
+		} else {
 
+			model.opacity = 0;
 
+		}
 
+
 
+		model.xAlign = alignment.xAlign;
 
+		model.yAlign = alignment.yAlign;
 
+		model.x = backgroundPoint.x;
 
+		model.y = backgroundPoint.y;
 
+		model.width = tooltipSize.width;
 
+		model.height = tooltipSize.height;
 
+
 
+		// Point where the caret on the tooltip points to
 
+		model.caretX = tooltipPosition.x;
 
+		model.caretY = tooltipPosition.y;
 
+
 
+		me._model = model;
 
+
 
+		if (changed && opts.custom) {
 
+			opts.custom.call(me, model);
 
+		}
 
+
 
+		return me;
 
+	},
 
+
 
+	drawCaret: function(tooltipPoint, size) {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+		var caretPosition = this.getCaretPosition(tooltipPoint, size, vm);
 
+
 
+		ctx.lineTo(caretPosition.x1, caretPosition.y1);
 
+		ctx.lineTo(caretPosition.x2, caretPosition.y2);
 
+		ctx.lineTo(caretPosition.x3, caretPosition.y3);
 
+	},
 
+	getCaretPosition: function(tooltipPoint, size, vm) {
 
+		var x1, x2, x3, y1, y2, y3;
 
+		var caretSize = vm.caretSize;
 
+		var cornerRadius = vm.cornerRadius;
 
+		var xAlign = vm.xAlign;
 
+		var yAlign = vm.yAlign;
 
+		var ptX = tooltipPoint.x;
 
+		var ptY = tooltipPoint.y;
 
+		var width = size.width;
 
+		var height = size.height;
 
+
 
+		if (yAlign === 'center') {
 
+			y2 = ptY + (height / 2);
 
+
 
+			if (xAlign === 'left') {
 
+				x1 = ptX;
 
+				x2 = x1 - caretSize;
 
+				x3 = x1;
 
+
 
+				y1 = y2 + caretSize;
 
+				y3 = y2 - caretSize;
 
+			} else {
 
+				x1 = ptX + width;
 
+				x2 = x1 + caretSize;
 
+				x3 = x1;
 
+
 
+				y1 = y2 - caretSize;
 
+				y3 = y2 + caretSize;
 
+			}
 
+		} else {
 
+			if (xAlign === 'left') {
 
+				x2 = ptX + cornerRadius + (caretSize);
 
+				x1 = x2 - caretSize;
 
+				x3 = x2 + caretSize;
 
+			} else if (xAlign === 'right') {
 
+				x2 = ptX + width - cornerRadius - caretSize;
 
+				x1 = x2 - caretSize;
 
+				x3 = x2 + caretSize;
 
+			} else {
 
+				x2 = vm.caretX;
 
+				x1 = x2 - caretSize;
 
+				x3 = x2 + caretSize;
 
+			}
 
+			if (yAlign === 'top') {
 
+				y1 = ptY;
 
+				y2 = y1 - caretSize;
 
+				y3 = y1;
 
+			} else {
 
+				y1 = ptY + height;
 
+				y2 = y1 + caretSize;
 
+				y3 = y1;
 
+				// invert drawing order
 
+				var tmp = x3;
 
+				x3 = x1;
 
+				x1 = tmp;
 
+			}
 
+		}
 
+		return {x1: x1, x2: x2, x3: x3, y1: y1, y2: y2, y3: y3};
 
+	},
 
+
 
+	drawTitle: function(pt, vm, ctx) {
 
+		var title = vm.title;
 
+
 
+		if (title.length) {
 
+			pt.x = getAlignedX(vm, vm._titleAlign);
 
+
 
+			ctx.textAlign = vm._titleAlign;
 
+			ctx.textBaseline = 'top';
 
+
 
+			var titleFontSize = vm.titleFontSize;
 
+			var titleSpacing = vm.titleSpacing;
 
+
 
+			ctx.fillStyle = vm.titleFontColor;
 
+			ctx.font = helpers$1.fontString(titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
 
+
 
+			var i, len;
 
+			for (i = 0, len = title.length; i < len; ++i) {
 
+				ctx.fillText(title[i], pt.x, pt.y);
 
+				pt.y += titleFontSize + titleSpacing; // Line Height and spacing
 
+
 
+				if (i + 1 === title.length) {
 
+					pt.y += vm.titleMarginBottom - titleSpacing; // If Last, add margin, remove spacing
 
+				}
 
+			}
 
+		}
 
+	},
 
+
 
+	drawBody: function(pt, vm, ctx) {
 
+		var bodyFontSize = vm.bodyFontSize;
 
+		var bodySpacing = vm.bodySpacing;
 
+		var bodyAlign = vm._bodyAlign;
 
+		var body = vm.body;
 
+		var drawColorBoxes = vm.displayColors;
 
+		var labelColors = vm.labelColors;
 
+		var xLinePadding = 0;
 
+		var colorX = drawColorBoxes ? getAlignedX(vm, 'left') : 0;
 
+		var textColor;
 
+
 
+		ctx.textAlign = bodyAlign;
 
+		ctx.textBaseline = 'top';
 
+		ctx.font = helpers$1.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 
+
 
+		pt.x = getAlignedX(vm, bodyAlign);
 
+
 
+		// Before Body
 
+		var fillLineOfText = function(line) {
 
+			ctx.fillText(line, pt.x + xLinePadding, pt.y);
 
+			pt.y += bodyFontSize + bodySpacing;
 
+		};
 
+
 
+		// Before body lines
 
+		ctx.fillStyle = vm.bodyFontColor;
 
+		helpers$1.each(vm.beforeBody, fillLineOfText);
 
+
 
+		xLinePadding = drawColorBoxes && bodyAlign !== 'right'
 
+			? bodyAlign === 'center' ? (bodyFontSize / 2 + 1) : (bodyFontSize + 2)
 
+			: 0;
 
+
 
+		// Draw body lines now
 
+		helpers$1.each(body, function(bodyItem, i) {
 
+			textColor = vm.labelTextColors[i];
 
+			ctx.fillStyle = textColor;
 
+			helpers$1.each(bodyItem.before, fillLineOfText);
 
+
 
+			helpers$1.each(bodyItem.lines, function(line) {
 
+				// Draw Legend-like boxes if needed
 
+				if (drawColorBoxes) {
 
+					// Fill a white rect so that colours merge nicely if the opacity is < 1
 
+					ctx.fillStyle = vm.legendColorBackground;
 
+					ctx.fillRect(colorX, pt.y, bodyFontSize, bodyFontSize);
 
+
 
+					// Border
 
+					ctx.lineWidth = 1;
 
+					ctx.strokeStyle = labelColors[i].borderColor;
 
+					ctx.strokeRect(colorX, pt.y, bodyFontSize, bodyFontSize);
 
+
 
+					// Inner square
 
+					ctx.fillStyle = labelColors[i].backgroundColor;
 
+					ctx.fillRect(colorX + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
 
+					ctx.fillStyle = textColor;
 
+				}
 
+
 
+				fillLineOfText(line);
 
+			});
 
+
 
+			helpers$1.each(bodyItem.after, fillLineOfText);
 
+		});
 
+
 
+		// Reset back to 0 for after body
 
+		xLinePadding = 0;
 
+
 
+		// After body lines
 
+		helpers$1.each(vm.afterBody, fillLineOfText);
 
+		pt.y -= bodySpacing; // Remove last body spacing
 
+	},
 
+
 
+	drawFooter: function(pt, vm, ctx) {
 
+		var footer = vm.footer;
 
+
 
+		if (footer.length) {
 
+			pt.x = getAlignedX(vm, vm._footerAlign);
 
+			pt.y += vm.footerMarginTop;
 
+
 
+			ctx.textAlign = vm._footerAlign;
 
+			ctx.textBaseline = 'top';
 
+
 
+			ctx.fillStyle = vm.footerFontColor;
 
+			ctx.font = helpers$1.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
 
+
 
+			helpers$1.each(footer, function(line) {
 
+				ctx.fillText(line, pt.x, pt.y);
 
+				pt.y += vm.footerFontSize + vm.footerSpacing;
 
+			});
 
+		}
 
+	},
 
+
 
+	drawBackground: function(pt, vm, ctx, tooltipSize) {
 
+		ctx.fillStyle = vm.backgroundColor;
 
+		ctx.strokeStyle = vm.borderColor;
 
+		ctx.lineWidth = vm.borderWidth;
 
+		var xAlign = vm.xAlign;
 
+		var yAlign = vm.yAlign;
 
+		var x = pt.x;
 
+		var y = pt.y;
 
+		var width = tooltipSize.width;
 
+		var height = tooltipSize.height;
 
+		var radius = vm.cornerRadius;
 
+
 
+		ctx.beginPath();
 
+		ctx.moveTo(x + radius, y);
 
+		if (yAlign === 'top') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x + width - radius, y);
 
+		ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
 
+		if (yAlign === 'center' && xAlign === 'right') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x + width, y + height - radius);
 
+		ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
 
+		if (yAlign === 'bottom') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x + radius, y + height);
 
+		ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
 
+		if (yAlign === 'center' && xAlign === 'left') {
 
+			this.drawCaret(pt, tooltipSize);
 
+		}
 
+		ctx.lineTo(x, y + radius);
 
+		ctx.quadraticCurveTo(x, y, x + radius, y);
 
+		ctx.closePath();
 
+
 
+		ctx.fill();
 
+
 
+		if (vm.borderWidth > 0) {
 
+			ctx.stroke();
 
+		}
 
+	},
 
+
 
+	draw: function() {
 
+		var ctx = this._chart.ctx;
 
+		var vm = this._view;
 
+
 
+		if (vm.opacity === 0) {
 
+			return;
 
+		}
 
+
 
+		var tooltipSize = {
 
+			width: vm.width,
 
+			height: vm.height
 
+		};
 
+		var pt = {
 
+			x: vm.x,
 
+			y: vm.y
 
+		};
 
+
 
+		// IE11/Edge does not like very small opacities, so snap to 0
 
+		var opacity = Math.abs(vm.opacity < 1e-3) ? 0 : vm.opacity;
 
+
 
+		// Truthy/falsey value for empty tooltip
 
+		var hasTooltipContent = vm.title.length || vm.beforeBody.length || vm.body.length || vm.afterBody.length || vm.footer.length;
 
+
 
+		if (this._options.enabled && hasTooltipContent) {
 
+			ctx.save();
 
+			ctx.globalAlpha = opacity;
 
+
 
+			// Draw Background
 
+			this.drawBackground(pt, vm, ctx, tooltipSize);
 
+
 
+			// Draw Title, Body, and Footer
 
+			pt.y += vm.yPadding;
 
+
 
+			// Titles
 
+			this.drawTitle(pt, vm, ctx);
 
+
 
+			// Body
 
+			this.drawBody(pt, vm, ctx);
 
+
 
+			// Footer
 
+			this.drawFooter(pt, vm, ctx);
 
+
 
+			ctx.restore();
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Handle an event
 
+	 * @private
 
+	 * @param {IEvent} event - The event to handle
 
+	 * @returns {boolean} true if the tooltip changed
 
+	 */
 
+	handleEvent: function(e) {
 
+		var me = this;
 
+		var options = me._options;
 
+		var changed = false;
 
+
 
+		me._lastActive = me._lastActive || [];
 
+
 
+		// Find Active Elements for tooltips
 
+		if (e.type === 'mouseout') {
 
+			me._active = [];
 
+		} else {
 
+			me._active = me._chart.getElementsAtEventForMode(e, options.mode, options);
 
+		}
 
+
 
+		// Remember Last Actives
 
+		changed = !helpers$1.arrayEquals(me._active, me._lastActive);
 
+
 
+		// Only handle target event on tooltip change
 
+		if (changed) {
 
+			me._lastActive = me._active;
 
+
 
+			if (options.enabled || options.custom) {
 
+				me._eventPosition = {
 
+					x: e.x,
 
+					y: e.y
 
+				};
 
+
 
+				me.update(true);
 
+				me.pivot();
 
+			}
 
+		}
 
+
 
+		return changed;
 
+	}
 
+});
 
+
 
+/**
 
+ * @namespace Chart.Tooltip.positioners
 
+ */
 
+var positioners_1 = positioners;
 
+
 
+var core_tooltip = exports$3;
 
+core_tooltip.positioners = positioners_1;
 
+
 
+var valueOrDefault$8 = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('global', {
 
+	elements: {},
 
+	events: [
 
+		'mousemove',
 
+		'mouseout',
 
+		'click',
 
+		'touchstart',
 
+		'touchmove'
 
+	],
 
+	hover: {
 
+		onHover: null,
 
+		mode: 'nearest',
 
+		intersect: true,
 
+		animationDuration: 400
 
+	},
 
+	onClick: null,
 
+	maintainAspectRatio: true,
 
+	responsive: true,
 
+	responsiveAnimationDuration: 0
 
+});
 
+
 
+/**
 
+ * Recursively merge the given config objects representing the `scales` option
 
+ * by incorporating scale defaults in `xAxes` and `yAxes` array items, then
 
+ * returns a deep copy of the result, thus doesn't alter inputs.
 
+ */
 
+function mergeScaleConfig(/* config objects ... */) {
 
+	return helpers$1.merge({}, [].slice.call(arguments), {
 
+		merger: function(key, target, source, options) {
 
+			if (key === 'xAxes' || key === 'yAxes') {
 
+				var slen = source[key].length;
 
+				var i, type, scale;
 
+
 
+				if (!target[key]) {
 
+					target[key] = [];
 
+				}
 
+
 
+				for (i = 0; i < slen; ++i) {
 
+					scale = source[key][i];
 
+					type = valueOrDefault$8(scale.type, key === 'xAxes' ? 'category' : 'linear');
 
+
 
+					if (i >= target[key].length) {
 
+						target[key].push({});
 
+					}
 
+
 
+					if (!target[key][i].type || (scale.type && scale.type !== target[key][i].type)) {
 
+						// new/untyped scale or type changed: let's apply the new defaults
 
+						// then merge source scale to correctly overwrite the defaults.
 
+						helpers$1.merge(target[key][i], [core_scaleService.getScaleDefaults(type), scale]);
 
+					} else {
 
+						// scales type are the same
 
+						helpers$1.merge(target[key][i], scale);
 
+					}
 
+				}
 
+			} else {
 
+				helpers$1._merger(key, target, source, options);
 
+			}
 
+		}
 
+	});
 
+}
 
+
 
+/**
 
+ * Recursively merge the given config objects as the root options by handling
 
+ * default scale options for the `scales` and `scale` properties, then returns
 
+ * a deep copy of the result, thus doesn't alter inputs.
 
+ */
 
+function mergeConfig(/* config objects ... */) {
 
+	return helpers$1.merge({}, [].slice.call(arguments), {
 
+		merger: function(key, target, source, options) {
 
+			var tval = target[key] || {};
 
+			var sval = source[key];
 
+
 
+			if (key === 'scales') {
 
+				// scale config merging is complex. Add our own function here for that
 
+				target[key] = mergeScaleConfig(tval, sval);
 
+			} else if (key === 'scale') {
 
+				// used in polar area & radar charts since there is only one scale
 
+				target[key] = helpers$1.merge(tval, [core_scaleService.getScaleDefaults(sval.type), sval]);
 
+			} else {
 
+				helpers$1._merger(key, target, source, options);
 
+			}
 
+		}
 
+	});
 
+}
 
+
 
+function initConfig(config) {
 
+	config = config || {};
 
+
 
+	// Do NOT use mergeConfig for the data object because this method merges arrays
 
+	// and so would change references to labels and datasets, preventing data updates.
 
+	var data = config.data = config.data || {};
 
+	data.datasets = data.datasets || [];
 
+	data.labels = data.labels || [];
 
+
 
+	config.options = mergeConfig(
 
+		core_defaults.global,
 
+		core_defaults[config.type],
 
+		config.options || {});
 
+
 
+	return config;
 
+}
 
+
 
+function updateConfig(chart) {
 
+	var newOptions = chart.options;
 
+
 
+	helpers$1.each(chart.scales, function(scale) {
 
+		core_layouts.removeBox(chart, scale);
 
+	});
 
+
 
+	newOptions = mergeConfig(
 
+		core_defaults.global,
 
+		core_defaults[chart.config.type],
 
+		newOptions);
 
+
 
+	chart.options = chart.config.options = newOptions;
 
+	chart.ensureScalesHaveIDs();
 
+	chart.buildOrUpdateScales();
 
+
 
+	// Tooltip
 
+	chart.tooltip._options = newOptions.tooltips;
 
+	chart.tooltip.initialize();
 
+}
 
+
 
+function positionIsHorizontal(position) {
 
+	return position === 'top' || position === 'bottom';
 
+}
 
+
 
+var Chart = function(item, config) {
 
+	this.construct(item, config);
 
+	return this;
 
+};
 
+
 
+helpers$1.extend(Chart.prototype, /** @lends Chart */ {
 
+	/**
 
+	 * @private
 
+	 */
 
+	construct: function(item, config) {
 
+		var me = this;
 
+
 
+		config = initConfig(config);
 
+
 
+		var context = platform.acquireContext(item, config);
 
+		var canvas = context && context.canvas;
 
+		var height = canvas && canvas.height;
 
+		var width = canvas && canvas.width;
 
+
 
+		me.id = helpers$1.uid();
 
+		me.ctx = context;
 
+		me.canvas = canvas;
 
+		me.config = config;
 
+		me.width = width;
 
+		me.height = height;
 
+		me.aspectRatio = height ? width / height : null;
 
+		me.options = config.options;
 
+		me._bufferedRender = false;
 
+
 
+		/**
 
+		 * Provided for backward compatibility, Chart and Chart.Controller have been merged,
 
+		 * the "instance" still need to be defined since it might be called from plugins.
 
+		 * @prop Chart#chart
 
+		 * @deprecated since version 2.6.0
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		me.chart = me;
 
+		me.controller = me; // chart.chart.controller #inception
 
+
 
+		// Add the chart instance to the global namespace
 
+		Chart.instances[me.id] = me;
 
+
 
+		// Define alias to the config data: `chart.data === chart.config.data`
 
+		Object.defineProperty(me, 'data', {
 
+			get: function() {
 
+				return me.config.data;
 
+			},
 
+			set: function(value) {
 
+				me.config.data = value;
 
+			}
 
+		});
 
+
 
+		if (!context || !canvas) {
 
+			// The given item is not a compatible context2d element, let's return before finalizing
 
+			// the chart initialization but after setting basic chart / controller properties that
 
+			// can help to figure out that the chart is not valid (e.g chart.canvas !== null);
 
+			// https://github.com/chartjs/Chart.js/issues/2807
 
+			console.error("Failed to create chart: can't acquire context from the given item");
 
+			return;
 
+		}
 
+
 
+		me.initialize();
 
+		me.update();
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	initialize: function() {
 
+		var me = this;
 
+
 
+		// Before init plugin notification
 
+		core_plugins.notify(me, 'beforeInit');
 
+
 
+		helpers$1.retinaScale(me, me.options.devicePixelRatio);
 
+
 
+		me.bindEvents();
 
+
 
+		if (me.options.responsive) {
 
+			// Initial resize before chart draws (must be silent to preserve initial animations).
 
+			me.resize(true);
 
+		}
 
+
 
+		// Make sure scales have IDs and are built before we build any controllers.
 
+		me.ensureScalesHaveIDs();
 
+		me.buildOrUpdateScales();
 
+		me.initToolTip();
 
+
 
+		// After init plugin notification
 
+		core_plugins.notify(me, 'afterInit');
 
+
 
+		return me;
 
+	},
 
+
 
+	clear: function() {
 
+		helpers$1.canvas.clear(this);
 
+		return this;
 
+	},
 
+
 
+	stop: function() {
 
+		// Stops any current animation loop occurring
 
+		core_animations.cancelAnimation(this);
 
+		return this;
 
+	},
 
+
 
+	resize: function(silent) {
 
+		var me = this;
 
+		var options = me.options;
 
+		var canvas = me.canvas;
 
+		var aspectRatio = (options.maintainAspectRatio && me.aspectRatio) || null;
 
+
 
+		// the canvas render width and height will be casted to integers so make sure that
 
+		// the canvas display style uses the same integer values to avoid blurring effect.
 
+
 
+		// Set to 0 instead of canvas.size because the size defaults to 300x150 if the element is collapsed
 
+		var newWidth = Math.max(0, Math.floor(helpers$1.getMaximumWidth(canvas)));
 
+		var newHeight = Math.max(0, Math.floor(aspectRatio ? newWidth / aspectRatio : helpers$1.getMaximumHeight(canvas)));
 
+
 
+		if (me.width === newWidth && me.height === newHeight) {
 
+			return;
 
+		}
 
+
 
+		canvas.width = me.width = newWidth;
 
+		canvas.height = me.height = newHeight;
 
+		canvas.style.width = newWidth + 'px';
 
+		canvas.style.height = newHeight + 'px';
 
+
 
+		helpers$1.retinaScale(me, options.devicePixelRatio);
 
+
 
+		if (!silent) {
 
+			// Notify any plugins about the resize
 
+			var newSize = {width: newWidth, height: newHeight};
 
+			core_plugins.notify(me, 'resize', [newSize]);
 
+
 
+			// Notify of resize
 
+			if (options.onResize) {
 
+				options.onResize(me, newSize);
 
+			}
 
+
 
+			me.stop();
 
+			me.update({
 
+				duration: options.responsiveAnimationDuration
 
+			});
 
+		}
 
+	},
 
+
 
+	ensureScalesHaveIDs: function() {
 
+		var options = this.options;
 
+		var scalesOptions = options.scales || {};
 
+		var scaleOptions = options.scale;
 
+
 
+		helpers$1.each(scalesOptions.xAxes, function(xAxisOptions, index) {
 
+			xAxisOptions.id = xAxisOptions.id || ('x-axis-' + index);
 
+		});
 
+
 
+		helpers$1.each(scalesOptions.yAxes, function(yAxisOptions, index) {
 
+			yAxisOptions.id = yAxisOptions.id || ('y-axis-' + index);
 
+		});
 
+
 
+		if (scaleOptions) {
 
+			scaleOptions.id = scaleOptions.id || 'scale';
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Builds a map of scale ID to scale object for future lookup.
 
+	 */
 
+	buildOrUpdateScales: function() {
 
+		var me = this;
 
+		var options = me.options;
 
+		var scales = me.scales || {};
 
+		var items = [];
 
+		var updated = Object.keys(scales).reduce(function(obj, id) {
 
+			obj[id] = false;
 
+			return obj;
 
+		}, {});
 
+
 
+		if (options.scales) {
 
+			items = items.concat(
 
+				(options.scales.xAxes || []).map(function(xAxisOptions) {
 
+					return {options: xAxisOptions, dtype: 'category', dposition: 'bottom'};
 
+				}),
 
+				(options.scales.yAxes || []).map(function(yAxisOptions) {
 
+					return {options: yAxisOptions, dtype: 'linear', dposition: 'left'};
 
+				})
 
+			);
 
+		}
 
+
 
+		if (options.scale) {
 
+			items.push({
 
+				options: options.scale,
 
+				dtype: 'radialLinear',
 
+				isDefault: true,
 
+				dposition: 'chartArea'
 
+			});
 
+		}
 
+
 
+		helpers$1.each(items, function(item) {
 
+			var scaleOptions = item.options;
 
+			var id = scaleOptions.id;
 
+			var scaleType = valueOrDefault$8(scaleOptions.type, item.dtype);
 
+
 
+			if (positionIsHorizontal(scaleOptions.position) !== positionIsHorizontal(item.dposition)) {
 
+				scaleOptions.position = item.dposition;
 
+			}
 
+
 
+			updated[id] = true;
 
+			var scale = null;
 
+			if (id in scales && scales[id].type === scaleType) {
 
+				scale = scales[id];
 
+				scale.options = scaleOptions;
 
+				scale.ctx = me.ctx;
 
+				scale.chart = me;
 
+			} else {
 
+				var scaleClass = core_scaleService.getScaleConstructor(scaleType);
 
+				if (!scaleClass) {
 
+					return;
 
+				}
 
+				scale = new scaleClass({
 
+					id: id,
 
+					type: scaleType,
 
+					options: scaleOptions,
 
+					ctx: me.ctx,
 
+					chart: me
 
+				});
 
+				scales[scale.id] = scale;
 
+			}
 
+
 
+			scale.mergeTicksOptions();
 
+
 
+			// TODO(SB): I think we should be able to remove this custom case (options.scale)
 
+			// and consider it as a regular scale part of the "scales"" map only! This would
 
+			// make the logic easier and remove some useless? custom code.
 
+			if (item.isDefault) {
 
+				me.scale = scale;
 
+			}
 
+		});
 
+		// clear up discarded scales
 
+		helpers$1.each(updated, function(hasUpdated, id) {
 
+			if (!hasUpdated) {
 
+				delete scales[id];
 
+			}
 
+		});
 
+
 
+		me.scales = scales;
 
+
 
+		core_scaleService.addScalesToLayout(this);
 
+	},
 
+
 
+	buildOrUpdateControllers: function() {
 
+		var me = this;
 
+		var newControllers = [];
 
+
 
+		helpers$1.each(me.data.datasets, function(dataset, datasetIndex) {
 
+			var meta = me.getDatasetMeta(datasetIndex);
 
+			var type = dataset.type || me.config.type;
 
+
 
+			if (meta.type && meta.type !== type) {
 
+				me.destroyDatasetMeta(datasetIndex);
 
+				meta = me.getDatasetMeta(datasetIndex);
 
+			}
 
+			meta.type = type;
 
+
 
+			if (meta.controller) {
 
+				meta.controller.updateIndex(datasetIndex);
 
+				meta.controller.linkScales();
 
+			} else {
 
+				var ControllerClass = controllers[meta.type];
 
+				if (ControllerClass === undefined) {
 
+					throw new Error('"' + meta.type + '" is not a chart type.');
 
+				}
 
+
 
+				meta.controller = new ControllerClass(me, datasetIndex);
 
+				newControllers.push(meta.controller);
 
+			}
 
+		}, me);
 
+
 
+		return newControllers;
 
+	},
 
+
 
+	/**
 
+	 * Reset the elements of all datasets
 
+	 * @private
 
+	 */
 
+	resetElements: function() {
 
+		var me = this;
 
+		helpers$1.each(me.data.datasets, function(dataset, datasetIndex) {
 
+			me.getDatasetMeta(datasetIndex).controller.reset();
 
+		}, me);
 
+	},
 
+
 
+	/**
 
+	* Resets the chart back to it's state before the initial animation
 
+	*/
 
+	reset: function() {
 
+		this.resetElements();
 
+		this.tooltip.initialize();
 
+	},
 
+
 
+	update: function(config) {
 
+		var me = this;
 
+
 
+		if (!config || typeof config !== 'object') {
 
+			// backwards compatibility
 
+			config = {
 
+				duration: config,
 
+				lazy: arguments[1]
 
+			};
 
+		}
 
+
 
+		updateConfig(me);
 
+
 
+		// plugins options references might have change, let's invalidate the cache
 
+		// https://github.com/chartjs/Chart.js/issues/5111#issuecomment-355934167
 
+		core_plugins._invalidate(me);
 
+
 
+		if (core_plugins.notify(me, 'beforeUpdate') === false) {
 
+			return;
 
+		}
 
+
 
+		// In case the entire data object changed
 
+		me.tooltip._data = me.data;
 
+
 
+		// Make sure dataset controllers are updated and new controllers are reset
 
+		var newControllers = me.buildOrUpdateControllers();
 
+
 
+		// Make sure all dataset controllers have correct meta data counts
 
+		helpers$1.each(me.data.datasets, function(dataset, datasetIndex) {
 
+			me.getDatasetMeta(datasetIndex).controller.buildOrUpdateElements();
 
+		}, me);
 
+
 
+		me.updateLayout();
 
+
 
+		// Can only reset the new controllers after the scales have been updated
 
+		if (me.options.animation && me.options.animation.duration) {
 
+			helpers$1.each(newControllers, function(controller) {
 
+				controller.reset();
 
+			});
 
+		}
 
+
 
+		me.updateDatasets();
 
+
 
+		// Need to reset tooltip in case it is displayed with elements that are removed
 
+		// after update.
 
+		me.tooltip.initialize();
 
+
 
+		// Last active contains items that were previously in the tooltip.
 
+		// When we reset the tooltip, we need to clear it
 
+		me.lastActive = [];
 
+
 
+		// Do this before render so that any plugins that need final scale updates can use it
 
+		core_plugins.notify(me, 'afterUpdate');
 
+
 
+		if (me._bufferedRender) {
 
+			me._bufferedRequest = {
 
+				duration: config.duration,
 
+				easing: config.easing,
 
+				lazy: config.lazy
 
+			};
 
+		} else {
 
+			me.render(config);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Updates the chart layout unless a plugin returns `false` to the `beforeLayout`
 
+	 * hook, in which case, plugins will not be called on `afterLayout`.
 
+	 * @private
 
+	 */
 
+	updateLayout: function() {
 
+		var me = this;
 
+
 
+		if (core_plugins.notify(me, 'beforeLayout') === false) {
 
+			return;
 
+		}
 
+
 
+		core_layouts.update(this, this.width, this.height);
 
+
 
+		/**
 
+		 * Provided for backward compatibility, use `afterLayout` instead.
 
+		 * @method IPlugin#afterScaleUpdate
 
+		 * @deprecated since version 2.5.0
 
+		 * @todo remove at version 3
 
+		 * @private
 
+		 */
 
+		core_plugins.notify(me, 'afterScaleUpdate');
 
+		core_plugins.notify(me, 'afterLayout');
 
+	},
 
+
 
+	/**
 
+	 * Updates all datasets unless a plugin returns `false` to the `beforeDatasetsUpdate`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetsUpdate`.
 
+	 * @private
 
+	 */
 
+	updateDatasets: function() {
 
+		var me = this;
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetsUpdate') === false) {
 
+			return;
 
+		}
 
+
 
+		for (var i = 0, ilen = me.data.datasets.length; i < ilen; ++i) {
 
+			me.updateDataset(i);
 
+		}
 
+
 
+		core_plugins.notify(me, 'afterDatasetsUpdate');
 
+	},
 
+
 
+	/**
 
+	 * Updates dataset at index unless a plugin returns `false` to the `beforeDatasetUpdate`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetUpdate`.
 
+	 * @private
 
+	 */
 
+	updateDataset: function(index) {
 
+		var me = this;
 
+		var meta = me.getDatasetMeta(index);
 
+		var args = {
 
+			meta: meta,
 
+			index: index
 
+		};
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetUpdate', [args]) === false) {
 
+			return;
 
+		}
 
+
 
+		meta.controller.update();
 
+
 
+		core_plugins.notify(me, 'afterDatasetUpdate', [args]);
 
+	},
 
+
 
+	render: function(config) {
 
+		var me = this;
 
+
 
+		if (!config || typeof config !== 'object') {
 
+			// backwards compatibility
 
+			config = {
 
+				duration: config,
 
+				lazy: arguments[1]
 
+			};
 
+		}
 
+
 
+		var animationOptions = me.options.animation;
 
+		var duration = valueOrDefault$8(config.duration, animationOptions && animationOptions.duration);
 
+		var lazy = config.lazy;
 
+
 
+		if (core_plugins.notify(me, 'beforeRender') === false) {
 
+			return;
 
+		}
 
+
 
+		var onComplete = function(animation) {
 
+			core_plugins.notify(me, 'afterRender');
 
+			helpers$1.callback(animationOptions && animationOptions.onComplete, [animation], me);
 
+		};
 
+
 
+		if (animationOptions && duration) {
 
+			var animation = new core_animation({
 
+				numSteps: duration / 16.66, // 60 fps
 
+				easing: config.easing || animationOptions.easing,
 
+
 
+				render: function(chart, animationObject) {
 
+					var easingFunction = helpers$1.easing.effects[animationObject.easing];
 
+					var currentStep = animationObject.currentStep;
 
+					var stepDecimal = currentStep / animationObject.numSteps;
 
+
 
+					chart.draw(easingFunction(stepDecimal), stepDecimal, currentStep);
 
+				},
 
+
 
+				onAnimationProgress: animationOptions.onProgress,
 
+				onAnimationComplete: onComplete
 
+			});
 
+
 
+			core_animations.addAnimation(me, animation, duration, lazy);
 
+		} else {
 
+			me.draw();
 
+
 
+			// See https://github.com/chartjs/Chart.js/issues/3781
 
+			onComplete(new core_animation({numSteps: 0, chart: me}));
 
+		}
 
+
 
+		return me;
 
+	},
 
+
 
+	draw: function(easingValue) {
 
+		var me = this;
 
+
 
+		me.clear();
 
+
 
+		if (helpers$1.isNullOrUndef(easingValue)) {
 
+			easingValue = 1;
 
+		}
 
+
 
+		me.transition(easingValue);
 
+
 
+		if (me.width <= 0 || me.height <= 0) {
 
+			return;
 
+		}
 
+
 
+		if (core_plugins.notify(me, 'beforeDraw', [easingValue]) === false) {
 
+			return;
 
+		}
 
+
 
+		// Draw all the scales
 
+		helpers$1.each(me.boxes, function(box) {
 
+			box.draw(me.chartArea);
 
+		}, me);
 
+
 
+		me.drawDatasets(easingValue);
 
+		me._drawTooltip(easingValue);
 
+
 
+		core_plugins.notify(me, 'afterDraw', [easingValue]);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	transition: function(easingValue) {
 
+		var me = this;
 
+
 
+		for (var i = 0, ilen = (me.data.datasets || []).length; i < ilen; ++i) {
 
+			if (me.isDatasetVisible(i)) {
 
+				me.getDatasetMeta(i).controller.transition(easingValue);
 
+			}
 
+		}
 
+
 
+		me.tooltip.transition(easingValue);
 
+	},
 
+
 
+	/**
 
+	 * Draws all datasets unless a plugin returns `false` to the `beforeDatasetsDraw`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetsDraw`.
 
+	 * @private
 
+	 */
 
+	drawDatasets: function(easingValue) {
 
+		var me = this;
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetsDraw', [easingValue]) === false) {
 
+			return;
 
+		}
 
+
 
+		// Draw datasets reversed to support proper line stacking
 
+		for (var i = (me.data.datasets || []).length - 1; i >= 0; --i) {
 
+			if (me.isDatasetVisible(i)) {
 
+				me.drawDataset(i, easingValue);
 
+			}
 
+		}
 
+
 
+		core_plugins.notify(me, 'afterDatasetsDraw', [easingValue]);
 
+	},
 
+
 
+	/**
 
+	 * Draws dataset at index unless a plugin returns `false` to the `beforeDatasetDraw`
 
+	 * hook, in which case, plugins will not be called on `afterDatasetDraw`.
 
+	 * @private
 
+	 */
 
+	drawDataset: function(index, easingValue) {
 
+		var me = this;
 
+		var meta = me.getDatasetMeta(index);
 
+		var args = {
 
+			meta: meta,
 
+			index: index,
 
+			easingValue: easingValue
 
+		};
 
+
 
+		if (core_plugins.notify(me, 'beforeDatasetDraw', [args]) === false) {
 
+			return;
 
+		}
 
+
 
+		meta.controller.draw(easingValue);
 
+
 
+		core_plugins.notify(me, 'afterDatasetDraw', [args]);
 
+	},
 
+
 
+	/**
 
+	 * Draws tooltip unless a plugin returns `false` to the `beforeTooltipDraw`
 
+	 * hook, in which case, plugins will not be called on `afterTooltipDraw`.
 
+	 * @private
 
+	 */
 
+	_drawTooltip: function(easingValue) {
 
+		var me = this;
 
+		var tooltip = me.tooltip;
 
+		var args = {
 
+			tooltip: tooltip,
 
+			easingValue: easingValue
 
+		};
 
+
 
+		if (core_plugins.notify(me, 'beforeTooltipDraw', [args]) === false) {
 
+			return;
 
+		}
 
+
 
+		tooltip.draw();
 
+
 
+		core_plugins.notify(me, 'afterTooltipDraw', [args]);
 
+	},
 
+
 
+	/**
 
+	 * Get the single element that was clicked on
 
+	 * @return An object containing the dataset index and element index of the matching element. Also contains the rectangle that was draw
 
+	 */
 
+	getElementAtEvent: function(e) {
 
+		return core_interaction.modes.single(this, e);
 
+	},
 
+
 
+	getElementsAtEvent: function(e) {
 
+		return core_interaction.modes.label(this, e, {intersect: true});
 
+	},
 
+
 
+	getElementsAtXAxis: function(e) {
 
+		return core_interaction.modes['x-axis'](this, e, {intersect: true});
 
+	},
 
+
 
+	getElementsAtEventForMode: function(e, mode, options) {
 
+		var method = core_interaction.modes[mode];
 
+		if (typeof method === 'function') {
 
+			return method(this, e, options);
 
+		}
 
+
 
+		return [];
 
+	},
 
+
 
+	getDatasetAtEvent: function(e) {
 
+		return core_interaction.modes.dataset(this, e, {intersect: true});
 
+	},
 
+
 
+	getDatasetMeta: function(datasetIndex) {
 
+		var me = this;
 
+		var dataset = me.data.datasets[datasetIndex];
 
+		if (!dataset._meta) {
 
+			dataset._meta = {};
 
+		}
 
+
 
+		var meta = dataset._meta[me.id];
 
+		if (!meta) {
 
+			meta = dataset._meta[me.id] = {
 
+				type: null,
 
+				data: [],
 
+				dataset: null,
 
+				controller: null,
 
+				hidden: null,			// See isDatasetVisible() comment
 
+				xAxisID: null,
 
+				yAxisID: null
 
+			};
 
+		}
 
+
 
+		return meta;
 
+	},
 
+
 
+	getVisibleDatasetCount: function() {
 
+		var count = 0;
 
+		for (var i = 0, ilen = this.data.datasets.length; i < ilen; ++i) {
 
+			if (this.isDatasetVisible(i)) {
 
+				count++;
 
+			}
 
+		}
 
+		return count;
 
+	},
 
+
 
+	isDatasetVisible: function(datasetIndex) {
 
+		var meta = this.getDatasetMeta(datasetIndex);
 
+
 
+		// meta.hidden is a per chart dataset hidden flag override with 3 states: if true or false,
 
+		// the dataset.hidden value is ignored, else if null, the dataset hidden state is returned.
 
+		return typeof meta.hidden === 'boolean' ? !meta.hidden : !this.data.datasets[datasetIndex].hidden;
 
+	},
 
+
 
+	generateLegend: function() {
 
+		return this.options.legendCallback(this);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	destroyDatasetMeta: function(datasetIndex) {
 
+		var id = this.id;
 
+		var dataset = this.data.datasets[datasetIndex];
 
+		var meta = dataset._meta && dataset._meta[id];
 
+
 
+		if (meta) {
 
+			meta.controller.destroy();
 
+			delete dataset._meta[id];
 
+		}
 
+	},
 
+
 
+	destroy: function() {
 
+		var me = this;
 
+		var canvas = me.canvas;
 
+		var i, ilen;
 
+
 
+		me.stop();
 
+
 
+		// dataset controllers need to cleanup associated data
 
+		for (i = 0, ilen = me.data.datasets.length; i < ilen; ++i) {
 
+			me.destroyDatasetMeta(i);
 
+		}
 
+
 
+		if (canvas) {
 
+			me.unbindEvents();
 
+			helpers$1.canvas.clear(me);
 
+			platform.releaseContext(me.ctx);
 
+			me.canvas = null;
 
+			me.ctx = null;
 
+		}
 
+
 
+		core_plugins.notify(me, 'destroy');
 
+
 
+		delete Chart.instances[me.id];
 
+	},
 
+
 
+	toBase64Image: function() {
 
+		return this.canvas.toDataURL.apply(this.canvas, arguments);
 
+	},
 
+
 
+	initToolTip: function() {
 
+		var me = this;
 
+		me.tooltip = new core_tooltip({
 
+			_chart: me,
 
+			_chartInstance: me, // deprecated, backward compatibility
 
+			_data: me.data,
 
+			_options: me.options.tooltips
 
+		}, me);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	bindEvents: function() {
 
+		var me = this;
 
+		var listeners = me._listeners = {};
 
+		var listener = function() {
 
+			me.eventHandler.apply(me, arguments);
 
+		};
 
+
 
+		helpers$1.each(me.options.events, function(type) {
 
+			platform.addEventListener(me, type, listener);
 
+			listeners[type] = listener;
 
+		});
 
+
 
+		// Elements used to detect size change should not be injected for non responsive charts.
 
+		// See https://github.com/chartjs/Chart.js/issues/2210
 
+		if (me.options.responsive) {
 
+			listener = function() {
 
+				me.resize();
 
+			};
 
+
 
+			platform.addEventListener(me, 'resize', listener);
 
+			listeners.resize = listener;
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	unbindEvents: function() {
 
+		var me = this;
 
+		var listeners = me._listeners;
 
+		if (!listeners) {
 
+			return;
 
+		}
 
+
 
+		delete me._listeners;
 
+		helpers$1.each(listeners, function(listener, type) {
 
+			platform.removeEventListener(me, type, listener);
 
+		});
 
+	},
 
+
 
+	updateHoverStyle: function(elements, mode, enabled) {
 
+		var method = enabled ? 'setHoverStyle' : 'removeHoverStyle';
 
+		var element, i, ilen;
 
+
 
+		for (i = 0, ilen = elements.length; i < ilen; ++i) {
 
+			element = elements[i];
 
+			if (element) {
 
+				this.getDatasetMeta(element._datasetIndex).controller[method](element);
 
+			}
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	eventHandler: function(e) {
 
+		var me = this;
 
+		var tooltip = me.tooltip;
 
+
 
+		if (core_plugins.notify(me, 'beforeEvent', [e]) === false) {
 
+			return;
 
+		}
 
+
 
+		// Buffer any update calls so that renders do not occur
 
+		me._bufferedRender = true;
 
+		me._bufferedRequest = null;
 
+
 
+		var changed = me.handleEvent(e);
 
+		// for smooth tooltip animations issue #4989
 
+		// the tooltip should be the source of change
 
+		// Animation check workaround:
 
+		// tooltip._start will be null when tooltip isn't animating
 
+		if (tooltip) {
 
+			changed = tooltip._start
 
+				? tooltip.handleEvent(e)
 
+				: changed | tooltip.handleEvent(e);
 
+		}
 
+
 
+		core_plugins.notify(me, 'afterEvent', [e]);
 
+
 
+		var bufferedRequest = me._bufferedRequest;
 
+		if (bufferedRequest) {
 
+			// If we have an update that was triggered, we need to do a normal render
 
+			me.render(bufferedRequest);
 
+		} else if (changed && !me.animating) {
 
+			// If entering, leaving, or changing elements, animate the change via pivot
 
+			me.stop();
 
+
 
+			// We only need to render at this point. Updating will cause scales to be
 
+			// recomputed generating flicker & using more memory than necessary.
 
+			me.render({
 
+				duration: me.options.hover.animationDuration,
 
+				lazy: true
 
+			});
 
+		}
 
+
 
+		me._bufferedRender = false;
 
+		me._bufferedRequest = null;
 
+
 
+		return me;
 
+	},
 
+
 
+	/**
 
+	 * Handle an event
 
+	 * @private
 
+	 * @param {IEvent} event the event to handle
 
+	 * @return {boolean} true if the chart needs to re-render
 
+	 */
 
+	handleEvent: function(e) {
 
+		var me = this;
 
+		var options = me.options || {};
 
+		var hoverOptions = options.hover;
 
+		var changed = false;
 
+
 
+		me.lastActive = me.lastActive || [];
 
+
 
+		// Find Active Elements for hover and tooltips
 
+		if (e.type === 'mouseout') {
 
+			me.active = [];
 
+		} else {
 
+			me.active = me.getElementsAtEventForMode(e, hoverOptions.mode, hoverOptions);
 
+		}
 
+
 
+		// Invoke onHover hook
 
+		// Need to call with native event here to not break backwards compatibility
 
+		helpers$1.callback(options.onHover || options.hover.onHover, [e.native, me.active], me);
 
+
 
+		if (e.type === 'mouseup' || e.type === 'click') {
 
+			if (options.onClick) {
 
+				// Use e.native here for backwards compatibility
 
+				options.onClick.call(me, e.native, me.active);
 
+			}
 
+		}
 
+
 
+		// Remove styling for last active (even if it may still be active)
 
+		if (me.lastActive.length) {
 
+			me.updateHoverStyle(me.lastActive, hoverOptions.mode, false);
 
+		}
 
+
 
+		// Built in hover styling
 
+		if (me.active.length && hoverOptions.mode) {
 
+			me.updateHoverStyle(me.active, hoverOptions.mode, true);
 
+		}
 
+
 
+		changed = !helpers$1.arrayEquals(me.active, me.lastActive);
 
+
 
+		// Remember Last Actives
 
+		me.lastActive = me.active;
 
+
 
+		return changed;
 
+	}
 
+});
 
+
 
+/**
 
+ * NOTE(SB) We actually don't use this container anymore but we need to keep it
 
+ * for backward compatibility. Though, it can still be useful for plugins that
 
+ * would need to work on multiple charts?!
 
+ */
 
+Chart.instances = {};
 
+
 
+var core_controller = Chart;
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart instead.
 
+ * @class Chart.Controller
 
+ * @deprecated since version 2.6
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+Chart.Controller = Chart;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart
 
+ * @deprecated since version 2.8
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+Chart.types = {};
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart.helpers.configMerge
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.configMerge = mergeConfig;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart.helpers.scaleMerge
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+helpers$1.scaleMerge = mergeScaleConfig;
 
+
 
+var core_helpers = function() {
 
+
 
+	// -- Basic js utility methods
 
+
 
+	helpers$1.where = function(collection, filterCallback) {
 
+		if (helpers$1.isArray(collection) && Array.prototype.filter) {
 
+			return collection.filter(filterCallback);
 
+		}
 
+		var filtered = [];
 
+
 
+		helpers$1.each(collection, function(item) {
 
+			if (filterCallback(item)) {
 
+				filtered.push(item);
 
+			}
 
+		});
 
+
 
+		return filtered;
 
+	};
 
+	helpers$1.findIndex = Array.prototype.findIndex ?
 
+		function(array, callback, scope) {
 
+			return array.findIndex(callback, scope);
 
+		} :
 
+		function(array, callback, scope) {
 
+			scope = scope === undefined ? array : scope;
 
+			for (var i = 0, ilen = array.length; i < ilen; ++i) {
 
+				if (callback.call(scope, array[i], i, array)) {
 
+					return i;
 
+				}
 
+			}
 
+			return -1;
 
+		};
 
+	helpers$1.findNextWhere = function(arrayToSearch, filterCallback, startIndex) {
 
+		// Default to start of the array
 
+		if (helpers$1.isNullOrUndef(startIndex)) {
 
+			startIndex = -1;
 
+		}
 
+		for (var i = startIndex + 1; i < arrayToSearch.length; i++) {
 
+			var currentItem = arrayToSearch[i];
 
+			if (filterCallback(currentItem)) {
 
+				return currentItem;
 
+			}
 
+		}
 
+	};
 
+	helpers$1.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex) {
 
+		// Default to end of the array
 
+		if (helpers$1.isNullOrUndef(startIndex)) {
 
+			startIndex = arrayToSearch.length;
 
+		}
 
+		for (var i = startIndex - 1; i >= 0; i--) {
 
+			var currentItem = arrayToSearch[i];
 
+			if (filterCallback(currentItem)) {
 
+				return currentItem;
 
+			}
 
+		}
 
+	};
 
+
 
+	// -- Math methods
 
+	helpers$1.isNumber = function(n) {
 
+		return !isNaN(parseFloat(n)) && isFinite(n);
 
+	};
 
+	helpers$1.almostEquals = function(x, y, epsilon) {
 
+		return Math.abs(x - y) < epsilon;
 
+	};
 
+	helpers$1.almostWhole = function(x, epsilon) {
 
+		var rounded = Math.round(x);
 
+		return (((rounded - epsilon) < x) && ((rounded + epsilon) > x));
 
+	};
 
+	helpers$1.max = function(array) {
 
+		return array.reduce(function(max, value) {
 
+			if (!isNaN(value)) {
 
+				return Math.max(max, value);
 
+			}
 
+			return max;
 
+		}, Number.NEGATIVE_INFINITY);
 
+	};
 
+	helpers$1.min = function(array) {
 
+		return array.reduce(function(min, value) {
 
+			if (!isNaN(value)) {
 
+				return Math.min(min, value);
 
+			}
 
+			return min;
 
+		}, Number.POSITIVE_INFINITY);
 
+	};
 
+	helpers$1.sign = Math.sign ?
 
+		function(x) {
 
+			return Math.sign(x);
 
+		} :
 
+		function(x) {
 
+			x = +x; // convert to a number
 
+			if (x === 0 || isNaN(x)) {
 
+				return x;
 
+			}
 
+			return x > 0 ? 1 : -1;
 
+		};
 
+	helpers$1.log10 = Math.log10 ?
 
+		function(x) {
 
+			return Math.log10(x);
 
+		} :
 
+		function(x) {
 
+			var exponent = Math.log(x) * Math.LOG10E; // Math.LOG10E = 1 / Math.LN10.
 
+			// Check for whole powers of 10,
 
+			// which due to floating point rounding error should be corrected.
 
+			var powerOf10 = Math.round(exponent);
 
+			var isPowerOf10 = x === Math.pow(10, powerOf10);
 
+
 
+			return isPowerOf10 ? powerOf10 : exponent;
 
+		};
 
+	helpers$1.toRadians = function(degrees) {
 
+		return degrees * (Math.PI / 180);
 
+	};
 
+	helpers$1.toDegrees = function(radians) {
 
+		return radians * (180 / Math.PI);
 
+	};
 
+
 
+	/**
 
+	 * Returns the number of decimal places
 
+	 * i.e. the number of digits after the decimal point, of the value of this Number.
 
+	 * @param {number} x - A number.
 
+	 * @returns {number} The number of decimal places.
 
+	 * @private
 
+	 */
 
+	helpers$1._decimalPlaces = function(x) {
 
+		if (!helpers$1.isFinite(x)) {
 
+			return;
 
+		}
 
+		var e = 1;
 
+		var p = 0;
 
+		while (Math.round(x * e) / e !== x) {
 
+			e *= 10;
 
+			p++;
 
+		}
 
+		return p;
 
+	};
 
+
 
+	// Gets the angle from vertical upright to the point about a centre.
 
+	helpers$1.getAngleFromPoint = function(centrePoint, anglePoint) {
 
+		var distanceFromXCenter = anglePoint.x - centrePoint.x;
 
+		var distanceFromYCenter = anglePoint.y - centrePoint.y;
 
+		var radialDistanceFromCenter = Math.sqrt(distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
 
+
 
+		var angle = Math.atan2(distanceFromYCenter, distanceFromXCenter);
 
+
 
+		if (angle < (-0.5 * Math.PI)) {
 
+			angle += 2.0 * Math.PI; // make sure the returned angle is in the range of (-PI/2, 3PI/2]
 
+		}
 
+
 
+		return {
 
+			angle: angle,
 
+			distance: radialDistanceFromCenter
 
+		};
 
+	};
 
+	helpers$1.distanceBetweenPoints = function(pt1, pt2) {
 
+		return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));
 
+	};
 
+
 
+	/**
 
+	 * Provided for backward compatibility, not available anymore
 
+	 * @function Chart.helpers.aliasPixel
 
+	 * @deprecated since version 2.8.0
 
+	 * @todo remove at version 3
 
+	 */
 
+	helpers$1.aliasPixel = function(pixelWidth) {
 
+		return (pixelWidth % 2 === 0) ? 0 : 0.5;
 
+	};
 
+
 
+	/**
 
+	 * Returns the aligned pixel value to avoid anti-aliasing blur
 
+	 * @param {Chart} chart - The chart instance.
 
+	 * @param {number} pixel - A pixel value.
 
+	 * @param {number} width - The width of the element.
 
+	 * @returns {number} The aligned pixel value.
 
+	 * @private
 
+	 */
 
+	helpers$1._alignPixel = function(chart, pixel, width) {
 
+		var devicePixelRatio = chart.currentDevicePixelRatio;
 
+		var halfWidth = width / 2;
 
+		return Math.round((pixel - halfWidth) * devicePixelRatio) / devicePixelRatio + halfWidth;
 
+	};
 
+
 
+	helpers$1.splineCurve = function(firstPoint, middlePoint, afterPoint, t) {
 
+		// Props to Rob Spencer at scaled innovation for his post on splining between points
 
+		// http://scaledinnovation.com/analytics/splines/aboutSplines.html
 
+
 
+		// This function must also respect "skipped" points
 
+
 
+		var previous = firstPoint.skip ? middlePoint : firstPoint;
 
+		var current = middlePoint;
 
+		var next = afterPoint.skip ? middlePoint : afterPoint;
 
+
 
+		var d01 = Math.sqrt(Math.pow(current.x - previous.x, 2) + Math.pow(current.y - previous.y, 2));
 
+		var d12 = Math.sqrt(Math.pow(next.x - current.x, 2) + Math.pow(next.y - current.y, 2));
 
+
 
+		var s01 = d01 / (d01 + d12);
 
+		var s12 = d12 / (d01 + d12);
 
+
 
+		// If all points are the same, s01 & s02 will be inf
 
+		s01 = isNaN(s01) ? 0 : s01;
 
+		s12 = isNaN(s12) ? 0 : s12;
 
+
 
+		var fa = t * s01; // scaling factor for triangle Ta
 
+		var fb = t * s12;
 
+
 
+		return {
 
+			previous: {
 
+				x: current.x - fa * (next.x - previous.x),
 
+				y: current.y - fa * (next.y - previous.y)
 
+			},
 
+			next: {
 
+				x: current.x + fb * (next.x - previous.x),
 
+				y: current.y + fb * (next.y - previous.y)
 
+			}
 
+		};
 
+	};
 
+	helpers$1.EPSILON = Number.EPSILON || 1e-14;
 
+	helpers$1.splineCurveMonotone = function(points) {
 
+		// This function calculates Bézier control points in a similar way than |splineCurve|,
 
+		// but preserves monotonicity of the provided data and ensures no local extremums are added
 
+		// between the dataset discrete points due to the interpolation.
 
+		// See : https://en.wikipedia.org/wiki/Monotone_cubic_interpolation
 
+
 
+		var pointsWithTangents = (points || []).map(function(point) {
 
+			return {
 
+				model: point._model,
 
+				deltaK: 0,
 
+				mK: 0
 
+			};
 
+		});
 
+
 
+		// Calculate slopes (deltaK) and initialize tangents (mK)
 
+		var pointsLen = pointsWithTangents.length;
 
+		var i, pointBefore, pointCurrent, pointAfter;
 
+		for (i = 0; i < pointsLen; ++i) {
 
+			pointCurrent = pointsWithTangents[i];
 
+			if (pointCurrent.model.skip) {
 
+				continue;
 
+			}
 
+
 
+			pointBefore = i > 0 ? pointsWithTangents[i - 1] : null;
 
+			pointAfter = i < pointsLen - 1 ? pointsWithTangents[i + 1] : null;
 
+			if (pointAfter && !pointAfter.model.skip) {
 
+				var slopeDeltaX = (pointAfter.model.x - pointCurrent.model.x);
 
+
 
+				// In the case of two points that appear at the same x pixel, slopeDeltaX is 0
 
+				pointCurrent.deltaK = slopeDeltaX !== 0 ? (pointAfter.model.y - pointCurrent.model.y) / slopeDeltaX : 0;
 
+			}
 
+
 
+			if (!pointBefore || pointBefore.model.skip) {
 
+				pointCurrent.mK = pointCurrent.deltaK;
 
+			} else if (!pointAfter || pointAfter.model.skip) {
 
+				pointCurrent.mK = pointBefore.deltaK;
 
+			} else if (this.sign(pointBefore.deltaK) !== this.sign(pointCurrent.deltaK)) {
 
+				pointCurrent.mK = 0;
 
+			} else {
 
+				pointCurrent.mK = (pointBefore.deltaK + pointCurrent.deltaK) / 2;
 
+			}
 
+		}
 
+
 
+		// Adjust tangents to ensure monotonic properties
 
+		var alphaK, betaK, tauK, squaredMagnitude;
 
+		for (i = 0; i < pointsLen - 1; ++i) {
 
+			pointCurrent = pointsWithTangents[i];
 
+			pointAfter = pointsWithTangents[i + 1];
 
+			if (pointCurrent.model.skip || pointAfter.model.skip) {
 
+				continue;
 
+			}
 
+
 
+			if (helpers$1.almostEquals(pointCurrent.deltaK, 0, this.EPSILON)) {
 
+				pointCurrent.mK = pointAfter.mK = 0;
 
+				continue;
 
+			}
 
+
 
+			alphaK = pointCurrent.mK / pointCurrent.deltaK;
 
+			betaK = pointAfter.mK / pointCurrent.deltaK;
 
+			squaredMagnitude = Math.pow(alphaK, 2) + Math.pow(betaK, 2);
 
+			if (squaredMagnitude <= 9) {
 
+				continue;
 
+			}
 
+
 
+			tauK = 3 / Math.sqrt(squaredMagnitude);
 
+			pointCurrent.mK = alphaK * tauK * pointCurrent.deltaK;
 
+			pointAfter.mK = betaK * tauK * pointCurrent.deltaK;
 
+		}
 
+
 
+		// Compute control points
 
+		var deltaX;
 
+		for (i = 0; i < pointsLen; ++i) {
 
+			pointCurrent = pointsWithTangents[i];
 
+			if (pointCurrent.model.skip) {
 
+				continue;
 
+			}
 
+
 
+			pointBefore = i > 0 ? pointsWithTangents[i - 1] : null;
 
+			pointAfter = i < pointsLen - 1 ? pointsWithTangents[i + 1] : null;
 
+			if (pointBefore && !pointBefore.model.skip) {
 
+				deltaX = (pointCurrent.model.x - pointBefore.model.x) / 3;
 
+				pointCurrent.model.controlPointPreviousX = pointCurrent.model.x - deltaX;
 
+				pointCurrent.model.controlPointPreviousY = pointCurrent.model.y - deltaX * pointCurrent.mK;
 
+			}
 
+			if (pointAfter && !pointAfter.model.skip) {
 
+				deltaX = (pointAfter.model.x - pointCurrent.model.x) / 3;
 
+				pointCurrent.model.controlPointNextX = pointCurrent.model.x + deltaX;
 
+				pointCurrent.model.controlPointNextY = pointCurrent.model.y + deltaX * pointCurrent.mK;
 
+			}
 
+		}
 
+	};
 
+	helpers$1.nextItem = function(collection, index, loop) {
 
+		if (loop) {
 
+			return index >= collection.length - 1 ? collection[0] : collection[index + 1];
 
+		}
 
+		return index >= collection.length - 1 ? collection[collection.length - 1] : collection[index + 1];
 
+	};
 
+	helpers$1.previousItem = function(collection, index, loop) {
 
+		if (loop) {
 
+			return index <= 0 ? collection[collection.length - 1] : collection[index - 1];
 
+		}
 
+		return index <= 0 ? collection[0] : collection[index - 1];
 
+	};
 
+	// Implementation of the nice number algorithm used in determining where axis labels will go
 
+	helpers$1.niceNum = function(range, round) {
 
+		var exponent = Math.floor(helpers$1.log10(range));
 
+		var fraction = range / Math.pow(10, exponent);
 
+		var niceFraction;
 
+
 
+		if (round) {
 
+			if (fraction < 1.5) {
 
+				niceFraction = 1;
 
+			} else if (fraction < 3) {
 
+				niceFraction = 2;
 
+			} else if (fraction < 7) {
 
+				niceFraction = 5;
 
+			} else {
 
+				niceFraction = 10;
 
+			}
 
+		} else if (fraction <= 1.0) {
 
+			niceFraction = 1;
 
+		} else if (fraction <= 2) {
 
+			niceFraction = 2;
 
+		} else if (fraction <= 5) {
 
+			niceFraction = 5;
 
+		} else {
 
+			niceFraction = 10;
 
+		}
 
+
 
+		return niceFraction * Math.pow(10, exponent);
 
+	};
 
+	// Request animation polyfill - https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
 
+	helpers$1.requestAnimFrame = (function() {
 
+		if (typeof window === 'undefined') {
 
+			return function(callback) {
 
+				callback();
 
+			};
 
+		}
 
+		return window.requestAnimationFrame ||
 
+			window.webkitRequestAnimationFrame ||
 
+			window.mozRequestAnimationFrame ||
 
+			window.oRequestAnimationFrame ||
 
+			window.msRequestAnimationFrame ||
 
+			function(callback) {
 
+				return window.setTimeout(callback, 1000 / 60);
 
+			};
 
+	}());
 
+	// -- DOM methods
 
+	helpers$1.getRelativePosition = function(evt, chart) {
 
+		var mouseX, mouseY;
 
+		var e = evt.originalEvent || evt;
 
+		var canvas = evt.target || evt.srcElement;
 
+		var boundingRect = canvas.getBoundingClientRect();
 
+
 
+		var touches = e.touches;
 
+		if (touches && touches.length > 0) {
 
+			mouseX = touches[0].clientX;
 
+			mouseY = touches[0].clientY;
 
+
 
+		} else {
 
+			mouseX = e.clientX;
 
+			mouseY = e.clientY;
 
+		}
 
+
 
+		// Scale mouse coordinates into canvas coordinates
 
+		// by following the pattern laid out by 'jerryj' in the comments of
 
+		// https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
 
+		var paddingLeft = parseFloat(helpers$1.getStyle(canvas, 'padding-left'));
 
+		var paddingTop = parseFloat(helpers$1.getStyle(canvas, 'padding-top'));
 
+		var paddingRight = parseFloat(helpers$1.getStyle(canvas, 'padding-right'));
 
+		var paddingBottom = parseFloat(helpers$1.getStyle(canvas, 'padding-bottom'));
 
+		var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
 
+		var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
 
+
 
+		// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
 
+		// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
 
+		mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
 
+		mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
 
+
 
+		return {
 
+			x: mouseX,
 
+			y: mouseY
 
+		};
 
+
 
+	};
 
+
 
+	// Private helper function to convert max-width/max-height values that may be percentages into a number
 
+	function parseMaxStyle(styleValue, node, parentProperty) {
 
+		var valueInPixels;
 
+		if (typeof styleValue === 'string') {
 
+			valueInPixels = parseInt(styleValue, 10);
 
+
 
+			if (styleValue.indexOf('%') !== -1) {
 
+				// percentage * size in dimension
 
+				valueInPixels = valueInPixels / 100 * node.parentNode[parentProperty];
 
+			}
 
+		} else {
 
+			valueInPixels = styleValue;
 
+		}
 
+
 
+		return valueInPixels;
 
+	}
 
+
 
+	/**
 
+	 * Returns if the given value contains an effective constraint.
 
+	 * @private
 
+	 */
 
+	function isConstrainedValue(value) {
 
+		return value !== undefined && value !== null && value !== 'none';
 
+	}
 
+
 
+	/**
 
+	 * Returns the max width or height of the given DOM node in a cross-browser compatible fashion
 
+	 * @param {HTMLElement} domNode - the node to check the constraint on
 
+	 * @param {string} maxStyle - the style that defines the maximum for the direction we are using ('max-width' / 'max-height')
 
+	 * @param {string} percentageProperty - property of parent to use when calculating width as a percentage
 
+	 * @see {@link https://www.nathanaeljones.com/blog/2013/reading-max-width-cross-browser}
 
+	 */
 
+	function getConstraintDimension(domNode, maxStyle, percentageProperty) {
 
+		var view = document.defaultView;
 
+		var parentNode = helpers$1._getParentNode(domNode);
 
+		var constrainedNode = view.getComputedStyle(domNode)[maxStyle];
 
+		var constrainedContainer = view.getComputedStyle(parentNode)[maxStyle];
 
+		var hasCNode = isConstrainedValue(constrainedNode);
 
+		var hasCContainer = isConstrainedValue(constrainedContainer);
 
+		var infinity = Number.POSITIVE_INFINITY;
 
+
 
+		if (hasCNode || hasCContainer) {
 
+			return Math.min(
 
+				hasCNode ? parseMaxStyle(constrainedNode, domNode, percentageProperty) : infinity,
 
+				hasCContainer ? parseMaxStyle(constrainedContainer, parentNode, percentageProperty) : infinity);
 
+		}
 
+
 
+		return 'none';
 
+	}
 
+	// returns Number or undefined if no constraint
 
+	helpers$1.getConstraintWidth = function(domNode) {
 
+		return getConstraintDimension(domNode, 'max-width', 'clientWidth');
 
+	};
 
+	// returns Number or undefined if no constraint
 
+	helpers$1.getConstraintHeight = function(domNode) {
 
+		return getConstraintDimension(domNode, 'max-height', 'clientHeight');
 
+	};
 
+	/**
 
+	 * @private
 
+ 	 */
 
+	helpers$1._calculatePadding = function(container, padding, parentDimension) {
 
+		padding = helpers$1.getStyle(container, padding);
 
+
 
+		return padding.indexOf('%') > -1 ? parentDimension * parseInt(padding, 10) / 100 : parseInt(padding, 10);
 
+	};
 
+	/**
 
+	 * @private
 
+	 */
 
+	helpers$1._getParentNode = function(domNode) {
 
+		var parent = domNode.parentNode;
 
+		if (parent && parent.toString() === '[object ShadowRoot]') {
 
+			parent = parent.host;
 
+		}
 
+		return parent;
 
+	};
 
+	helpers$1.getMaximumWidth = function(domNode) {
 
+		var container = helpers$1._getParentNode(domNode);
 
+		if (!container) {
 
+			return domNode.clientWidth;
 
+		}
 
+
 
+		var clientWidth = container.clientWidth;
 
+		var paddingLeft = helpers$1._calculatePadding(container, 'padding-left', clientWidth);
 
+		var paddingRight = helpers$1._calculatePadding(container, 'padding-right', clientWidth);
 
+
 
+		var w = clientWidth - paddingLeft - paddingRight;
 
+		var cw = helpers$1.getConstraintWidth(domNode);
 
+		return isNaN(cw) ? w : Math.min(w, cw);
 
+	};
 
+	helpers$1.getMaximumHeight = function(domNode) {
 
+		var container = helpers$1._getParentNode(domNode);
 
+		if (!container) {
 
+			return domNode.clientHeight;
 
+		}
 
+
 
+		var clientHeight = container.clientHeight;
 
+		var paddingTop = helpers$1._calculatePadding(container, 'padding-top', clientHeight);
 
+		var paddingBottom = helpers$1._calculatePadding(container, 'padding-bottom', clientHeight);
 
+
 
+		var h = clientHeight - paddingTop - paddingBottom;
 
+		var ch = helpers$1.getConstraintHeight(domNode);
 
+		return isNaN(ch) ? h : Math.min(h, ch);
 
+	};
 
+	helpers$1.getStyle = function(el, property) {
 
+		return el.currentStyle ?
 
+			el.currentStyle[property] :
 
+			document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
 
+	};
 
+	helpers$1.retinaScale = function(chart, forceRatio) {
 
+		var pixelRatio = chart.currentDevicePixelRatio = forceRatio || (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
 
+		if (pixelRatio === 1) {
 
+			return;
 
+		}
 
+
 
+		var canvas = chart.canvas;
 
+		var height = chart.height;
 
+		var width = chart.width;
 
+
 
+		canvas.height = height * pixelRatio;
 
+		canvas.width = width * pixelRatio;
 
+		chart.ctx.scale(pixelRatio, pixelRatio);
 
+
 
+		// If no style has been set on the canvas, the render size is used as display size,
 
+		// making the chart visually bigger, so let's enforce it to the "correct" values.
 
+		// See https://github.com/chartjs/Chart.js/issues/3575
 
+		if (!canvas.style.height && !canvas.style.width) {
 
+			canvas.style.height = height + 'px';
 
+			canvas.style.width = width + 'px';
 
+		}
 
+	};
 
+	// -- Canvas methods
 
+	helpers$1.fontString = function(pixelSize, fontStyle, fontFamily) {
 
+		return fontStyle + ' ' + pixelSize + 'px ' + fontFamily;
 
+	};
 
+	helpers$1.longestText = function(ctx, font, arrayOfThings, cache) {
 
+		cache = cache || {};
 
+		var data = cache.data = cache.data || {};
 
+		var gc = cache.garbageCollect = cache.garbageCollect || [];
 
+
 
+		if (cache.font !== font) {
 
+			data = cache.data = {};
 
+			gc = cache.garbageCollect = [];
 
+			cache.font = font;
 
+		}
 
+
 
+		ctx.font = font;
 
+		var longest = 0;
 
+		helpers$1.each(arrayOfThings, function(thing) {
 
+			// Undefined strings and arrays should not be measured
 
+			if (thing !== undefined && thing !== null && helpers$1.isArray(thing) !== true) {
 
+				longest = helpers$1.measureText(ctx, data, gc, longest, thing);
 
+			} else if (helpers$1.isArray(thing)) {
 
+				// if it is an array lets measure each element
 
+				// to do maybe simplify this function a bit so we can do this more recursively?
 
+				helpers$1.each(thing, function(nestedThing) {
 
+					// Undefined strings and arrays should not be measured
 
+					if (nestedThing !== undefined && nestedThing !== null && !helpers$1.isArray(nestedThing)) {
 
+						longest = helpers$1.measureText(ctx, data, gc, longest, nestedThing);
 
+					}
 
+				});
 
+			}
 
+		});
 
+
 
+		var gcLen = gc.length / 2;
 
+		if (gcLen > arrayOfThings.length) {
 
+			for (var i = 0; i < gcLen; i++) {
 
+				delete data[gc[i]];
 
+			}
 
+			gc.splice(0, gcLen);
 
+		}
 
+		return longest;
 
+	};
 
+	helpers$1.measureText = function(ctx, data, gc, longest, string) {
 
+		var textWidth = data[string];
 
+		if (!textWidth) {
 
+			textWidth = data[string] = ctx.measureText(string).width;
 
+			gc.push(string);
 
+		}
 
+		if (textWidth > longest) {
 
+			longest = textWidth;
 
+		}
 
+		return longest;
 
+	};
 
+	helpers$1.numberOfLabelLines = function(arrayOfThings) {
 
+		var numberOfLines = 1;
 
+		helpers$1.each(arrayOfThings, function(thing) {
 
+			if (helpers$1.isArray(thing)) {
 
+				if (thing.length > numberOfLines) {
 
+					numberOfLines = thing.length;
 
+				}
 
+			}
 
+		});
 
+		return numberOfLines;
 
+	};
 
+
 
+	helpers$1.color = !chartjsColor ?
 
+		function(value) {
 
+			console.error('Color.js not found!');
 
+			return value;
 
+		} :
 
+		function(value) {
 
+			/* global CanvasGradient */
 
+			if (value instanceof CanvasGradient) {
 
+				value = core_defaults.global.defaultColor;
 
+			}
 
+
 
+			return chartjsColor(value);
 
+		};
 
+
 
+	helpers$1.getHoverColor = function(colorValue) {
 
+		/* global CanvasPattern */
 
+		return (colorValue instanceof CanvasPattern || colorValue instanceof CanvasGradient) ?
 
+			colorValue :
 
+			helpers$1.color(colorValue).saturate(0.5).darken(0.1).rgbString();
 
+	};
 
+};
 
+
 
+function abstract() {
 
+	throw new Error(
 
+		'This method is not implemented: either no adapter can ' +
 
+		'be found or an incomplete integration was provided.'
 
+	);
 
+}
 
+
 
+/**
 
+ * Date adapter (current used by the time scale)
 
+ * @namespace Chart._adapters._date
 
+ * @memberof Chart._adapters
 
+ * @private
 
+ */
 
+
 
+/**
 
+ * Currently supported unit string values.
 
+ * @typedef {('millisecond'|'second'|'minute'|'hour'|'day'|'week'|'month'|'quarter'|'year')}
 
+ * @memberof Chart._adapters._date
 
+ * @name Unit
 
+ */
 
+
 
+/**
 
+ * @class
 
+ */
 
+function DateAdapter(options) {
 
+	this.options = options || {};
 
+}
 
+
 
+helpers$1.extend(DateAdapter.prototype, /** @lends DateAdapter */ {
 
+	/**
 
+	 * Returns a map of time formats for the supported formatting units defined
 
+	 * in Unit as well as 'datetime' representing a detailed date/time string.
 
+	 * @returns {{string: string}}
 
+	 */
 
+	formats: abstract,
 
+
 
+	/**
 
+	 * Parses the given `value` and return the associated timestamp.
 
+	 * @param {any} value - the value to parse (usually comes from the data)
 
+	 * @param {string} [format] - the expected data format
 
+	 * @returns {(number|null)}
 
+	 * @function
 
+	 */
 
+	parse: abstract,
 
+
 
+	/**
 
+	 * Returns the formatted date in the specified `format` for a given `timestamp`.
 
+	 * @param {number} timestamp - the timestamp to format
 
+	 * @param {string} format - the date/time token
 
+	 * @return {string}
 
+	 * @function
 
+	 */
 
+	format: abstract,
 
+
 
+	/**
 
+	 * Adds the specified `amount` of `unit` to the given `timestamp`.
 
+	 * @param {number} timestamp - the input timestamp
 
+	 * @param {number} amount - the amount to add
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @return {number}
 
+	 * @function
 
+	 */
 
+	add: abstract,
 
+
 
+	/**
 
+	 * Returns the number of `unit` between the given timestamps.
 
+	 * @param {number} max - the input timestamp (reference)
 
+	 * @param {number} min - the timestamp to substract
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @return {number}
 
+	 * @function
 
+	 */
 
+	diff: abstract,
 
+
 
+	/**
 
+	 * Returns start of `unit` for the given `timestamp`.
 
+	 * @param {number} timestamp - the input timestamp
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @param {number} [weekday] - the ISO day of the week with 1 being Monday
 
+	 * and 7 being Sunday (only needed if param *unit* is `isoWeek`).
 
+	 * @function
 
+	 */
 
+	startOf: abstract,
 
+
 
+	/**
 
+	 * Returns end of `unit` for the given `timestamp`.
 
+	 * @param {number} timestamp - the input timestamp
 
+	 * @param {Unit} unit - the unit as string
 
+	 * @function
 
+	 */
 
+	endOf: abstract,
 
+
 
+	// DEPRECATIONS
 
+
 
+	/**
 
+	 * Provided for backward compatibility for scale.getValueForPixel(),
 
+	 * this method should be overridden only by the moment adapter.
 
+	 * @deprecated since version 2.8.0
 
+	 * @todo remove at version 3
 
+	 * @private
 
+	 */
 
+	_create: function(value) {
 
+		return value;
 
+	}
 
+});
 
+
 
+DateAdapter.override = function(members) {
 
+	helpers$1.extend(DateAdapter.prototype, members);
 
+};
 
+
 
+var _date = DateAdapter;
 
+
 
+var core_adapters = {
 
+	_date: _date
 
+};
 
+
 
+/**
 
+ * Namespace to hold static tick generation functions
 
+ * @namespace Chart.Ticks
 
+ */
 
+var core_ticks = {
 
+	/**
 
+	 * Namespace to hold formatters for different types of ticks
 
+	 * @namespace Chart.Ticks.formatters
 
+	 */
 
+	formatters: {
 
+		/**
 
+		 * Formatter for value labels
 
+		 * @method Chart.Ticks.formatters.values
 
+		 * @param value the value to display
 
+		 * @return {string|string[]} the label to display
 
+		 */
 
+		values: function(value) {
 
+			return helpers$1.isArray(value) ? value : '' + value;
 
+		},
 
+
 
+		/**
 
+		 * Formatter for linear numeric ticks
 
+		 * @method Chart.Ticks.formatters.linear
 
+		 * @param tickValue {number} the value to be formatted
 
+		 * @param index {number} the position of the tickValue parameter in the ticks array
 
+		 * @param ticks {number[]} the list of ticks being converted
 
+		 * @return {string} string representation of the tickValue parameter
 
+		 */
 
+		linear: function(tickValue, index, ticks) {
 
+			// If we have lots of ticks, don't use the ones
 
+			var delta = ticks.length > 3 ? ticks[2] - ticks[1] : ticks[1] - ticks[0];
 
+
 
+			// If we have a number like 2.5 as the delta, figure out how many decimal places we need
 
+			if (Math.abs(delta) > 1) {
 
+				if (tickValue !== Math.floor(tickValue)) {
 
+					// not an integer
 
+					delta = tickValue - Math.floor(tickValue);
 
+				}
 
+			}
 
+
 
+			var logDelta = helpers$1.log10(Math.abs(delta));
 
+			var tickString = '';
 
+
 
+			if (tickValue !== 0) {
 
+				var maxTick = Math.max(Math.abs(ticks[0]), Math.abs(ticks[ticks.length - 1]));
 
+				if (maxTick < 1e-4) { // all ticks are small numbers; use scientific notation
 
+					var logTick = helpers$1.log10(Math.abs(tickValue));
 
+					tickString = tickValue.toExponential(Math.floor(logTick) - Math.floor(logDelta));
 
+				} else {
 
+					var numDecimal = -1 * Math.floor(logDelta);
 
+					numDecimal = Math.max(Math.min(numDecimal, 20), 0); // toFixed has a max of 20 decimal places
 
+					tickString = tickValue.toFixed(numDecimal);
 
+				}
 
+			} else {
 
+				tickString = '0'; // never show decimal places for 0
 
+			}
 
+
 
+			return tickString;
 
+		},
 
+
 
+		logarithmic: function(tickValue, index, ticks) {
 
+			var remain = tickValue / (Math.pow(10, Math.floor(helpers$1.log10(tickValue))));
 
+
 
+			if (tickValue === 0) {
 
+				return '0';
 
+			} else if (remain === 1 || remain === 2 || remain === 5 || index === 0 || index === ticks.length - 1) {
 
+				return tickValue.toExponential();
 
+			}
 
+			return '';
 
+		}
 
+	}
 
+};
 
+
 
+var valueOrDefault$9 = helpers$1.valueOrDefault;
 
+var valueAtIndexOrDefault = helpers$1.valueAtIndexOrDefault;
 
+
 
+core_defaults._set('scale', {
 
+	display: true,
 
+	position: 'left',
 
+	offset: false,
 
+
 
+	// grid line settings
 
+	gridLines: {
 
+		display: true,
 
+		color: 'rgba(0, 0, 0, 0.1)',
 
+		lineWidth: 1,
 
+		drawBorder: true,
 
+		drawOnChartArea: true,
 
+		drawTicks: true,
 
+		tickMarkLength: 10,
 
+		zeroLineWidth: 1,
 
+		zeroLineColor: 'rgba(0,0,0,0.25)',
 
+		zeroLineBorderDash: [],
 
+		zeroLineBorderDashOffset: 0.0,
 
+		offsetGridLines: false,
 
+		borderDash: [],
 
+		borderDashOffset: 0.0
 
+	},
 
+
 
+	// scale label
 
+	scaleLabel: {
 
+		// display property
 
+		display: false,
 
+
 
+		// actual label
 
+		labelString: '',
 
+
 
+		// top/bottom padding
 
+		padding: {
 
+			top: 4,
 
+			bottom: 4
 
+		}
 
+	},
 
+
 
+	// label settings
 
+	ticks: {
 
+		beginAtZero: false,
 
+		minRotation: 0,
 
+		maxRotation: 50,
 
+		mirror: false,
 
+		padding: 0,
 
+		reverse: false,
 
+		display: true,
 
+		autoSkip: true,
 
+		autoSkipPadding: 0,
 
+		labelOffset: 0,
 
+		// We pass through arrays to be rendered as multiline labels, we convert Others to strings here.
 
+		callback: core_ticks.formatters.values,
 
+		minor: {},
 
+		major: {}
 
+	}
 
+});
 
+
 
+function labelsFromTicks(ticks) {
 
+	var labels = [];
 
+	var i, ilen;
 
+
 
+	for (i = 0, ilen = ticks.length; i < ilen; ++i) {
 
+		labels.push(ticks[i].label);
 
+	}
 
+
 
+	return labels;
 
+}
 
+
 
+function getPixelForGridLine(scale, index, offsetGridLines) {
 
+	var lineValue = scale.getPixelForTick(index);
 
+
 
+	if (offsetGridLines) {
 
+		if (scale.getTicks().length === 1) {
 
+			lineValue -= scale.isHorizontal() ?
 
+				Math.max(lineValue - scale.left, scale.right - lineValue) :
 
+				Math.max(lineValue - scale.top, scale.bottom - lineValue);
 
+		} else if (index === 0) {
 
+			lineValue -= (scale.getPixelForTick(1) - lineValue) / 2;
 
+		} else {
 
+			lineValue -= (lineValue - scale.getPixelForTick(index - 1)) / 2;
 
+		}
 
+	}
 
+	return lineValue;
 
+}
 
+
 
+function computeTextSize(context, tick, font) {
 
+	return helpers$1.isArray(tick) ?
 
+		helpers$1.longestText(context, font, tick) :
 
+		context.measureText(tick).width;
 
+}
 
+
 
+var core_scale = core_element.extend({
 
+	/**
 
+	 * Get the padding needed for the scale
 
+	 * @method getPadding
 
+	 * @private
 
+	 * @returns {Padding} the necessary padding
 
+	 */
 
+	getPadding: function() {
 
+		var me = this;
 
+		return {
 
+			left: me.paddingLeft || 0,
 
+			top: me.paddingTop || 0,
 
+			right: me.paddingRight || 0,
 
+			bottom: me.paddingBottom || 0
 
+		};
 
+	},
 
+
 
+	/**
 
+	 * Returns the scale tick objects ({label, major})
 
+	 * @since 2.7
 
+	 */
 
+	getTicks: function() {
 
+		return this._ticks;
 
+	},
 
+
 
+	// These methods are ordered by lifecyle. Utilities then follow.
 
+	// Any function defined here is inherited by all scale types.
 
+	// Any function can be extended by the scale type
 
+
 
+	mergeTicksOptions: function() {
 
+		var ticks = this.options.ticks;
 
+		if (ticks.minor === false) {
 
+			ticks.minor = {
 
+				display: false
 
+			};
 
+		}
 
+		if (ticks.major === false) {
 
+			ticks.major = {
 
+				display: false
 
+			};
 
+		}
 
+		for (var key in ticks) {
 
+			if (key !== 'major' && key !== 'minor') {
 
+				if (typeof ticks.minor[key] === 'undefined') {
 
+					ticks.minor[key] = ticks[key];
 
+				}
 
+				if (typeof ticks.major[key] === 'undefined') {
 
+					ticks.major[key] = ticks[key];
 
+				}
 
+			}
 
+		}
 
+	},
 
+	beforeUpdate: function() {
 
+		helpers$1.callback(this.options.beforeUpdate, [this]);
 
+	},
 
+
 
+	update: function(maxWidth, maxHeight, margins) {
 
+		var me = this;
 
+		var i, ilen, labels, label, ticks, tick;
 
+
 
+		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 
+		me.beforeUpdate();
 
+
 
+		// Absorb the master measurements
 
+		me.maxWidth = maxWidth;
 
+		me.maxHeight = maxHeight;
 
+		me.margins = helpers$1.extend({
 
+			left: 0,
 
+			right: 0,
 
+			top: 0,
 
+			bottom: 0
 
+		}, margins);
 
+
 
+		me._maxLabelLines = 0;
 
+		me.longestLabelWidth = 0;
 
+		me.longestTextCache = me.longestTextCache || {};
 
+
 
+		// Dimensions
 
+		me.beforeSetDimensions();
 
+		me.setDimensions();
 
+		me.afterSetDimensions();
 
+
 
+		// Data min/max
 
+		me.beforeDataLimits();
 
+		me.determineDataLimits();
 
+		me.afterDataLimits();
 
+
 
+		// Ticks - `this.ticks` is now DEPRECATED!
 
+		// Internal ticks are now stored as objects in the PRIVATE `this._ticks` member
 
+		// and must not be accessed directly from outside this class. `this.ticks` being
 
+		// around for long time and not marked as private, we can't change its structure
 
+		// without unexpected breaking changes. If you need to access the scale ticks,
 
+		// use scale.getTicks() instead.
 
+
 
+		me.beforeBuildTicks();
 
+
 
+		// New implementations should return an array of objects but for BACKWARD COMPAT,
 
+		// we still support no return (`this.ticks` internally set by calling this method).
 
+		ticks = me.buildTicks() || [];
 
+
 
+		// Allow modification of ticks in callback.
 
+		ticks = me.afterBuildTicks(ticks) || ticks;
 
+
 
+		me.beforeTickToLabelConversion();
 
+
 
+		// New implementations should return the formatted tick labels but for BACKWARD
 
+		// COMPAT, we still support no return (`this.ticks` internally changed by calling
 
+		// this method and supposed to contain only string values).
 
+		labels = me.convertTicksToLabels(ticks) || me.ticks;
 
+
 
+		me.afterTickToLabelConversion();
 
+
 
+		me.ticks = labels;   // BACKWARD COMPATIBILITY
 
+
 
+		// IMPORTANT: from this point, we consider that `this.ticks` will NEVER change!
 
+
 
+		// BACKWARD COMPAT: synchronize `_ticks` with labels (so potentially `this.ticks`)
 
+		for (i = 0, ilen = labels.length; i < ilen; ++i) {
 
+			label = labels[i];
 
+			tick = ticks[i];
 
+			if (!tick) {
 
+				ticks.push(tick = {
 
+					label: label,
 
+					major: false
 
+				});
 
+			} else {
 
+				tick.label = label;
 
+			}
 
+		}
 
+
 
+		me._ticks = ticks;
 
+
 
+		// Tick Rotation
 
+		me.beforeCalculateTickRotation();
 
+		me.calculateTickRotation();
 
+		me.afterCalculateTickRotation();
 
+		// Fit
 
+		me.beforeFit();
 
+		me.fit();
 
+		me.afterFit();
 
+		//
 
+		me.afterUpdate();
 
+
 
+		return me.minSize;
 
+
 
+	},
 
+	afterUpdate: function() {
 
+		helpers$1.callback(this.options.afterUpdate, [this]);
 
+	},
 
+
 
+	//
 
+
 
+	beforeSetDimensions: function() {
 
+		helpers$1.callback(this.options.beforeSetDimensions, [this]);
 
+	},
 
+	setDimensions: function() {
 
+		var me = this;
 
+		// Set the unconstrained dimension before label rotation
 
+		if (me.isHorizontal()) {
 
+			// Reset position before calculating rotation
 
+			me.width = me.maxWidth;
 
+			me.left = 0;
 
+			me.right = me.width;
 
+		} else {
 
+			me.height = me.maxHeight;
 
+
 
+			// Reset position before calculating rotation
 
+			me.top = 0;
 
+			me.bottom = me.height;
 
+		}
 
+
 
+		// Reset padding
 
+		me.paddingLeft = 0;
 
+		me.paddingTop = 0;
 
+		me.paddingRight = 0;
 
+		me.paddingBottom = 0;
 
+	},
 
+	afterSetDimensions: function() {
 
+		helpers$1.callback(this.options.afterSetDimensions, [this]);
 
+	},
 
+
 
+	// Data limits
 
+	beforeDataLimits: function() {
 
+		helpers$1.callback(this.options.beforeDataLimits, [this]);
 
+	},
 
+	determineDataLimits: helpers$1.noop,
 
+	afterDataLimits: function() {
 
+		helpers$1.callback(this.options.afterDataLimits, [this]);
 
+	},
 
+
 
+	//
 
+	beforeBuildTicks: function() {
 
+		helpers$1.callback(this.options.beforeBuildTicks, [this]);
 
+	},
 
+	buildTicks: helpers$1.noop,
 
+	afterBuildTicks: function(ticks) {
 
+		var me = this;
 
+		// ticks is empty for old axis implementations here
 
+		if (helpers$1.isArray(ticks) && ticks.length) {
 
+			return helpers$1.callback(me.options.afterBuildTicks, [me, ticks]);
 
+		}
 
+		// Support old implementations (that modified `this.ticks` directly in buildTicks)
 
+		me.ticks = helpers$1.callback(me.options.afterBuildTicks, [me, me.ticks]) || me.ticks;
 
+		return ticks;
 
+	},
 
+
 
+	beforeTickToLabelConversion: function() {
 
+		helpers$1.callback(this.options.beforeTickToLabelConversion, [this]);
 
+	},
 
+	convertTicksToLabels: function() {
 
+		var me = this;
 
+		// Convert ticks to strings
 
+		var tickOpts = me.options.ticks;
 
+		me.ticks = me.ticks.map(tickOpts.userCallback || tickOpts.callback, this);
 
+	},
 
+	afterTickToLabelConversion: function() {
 
+		helpers$1.callback(this.options.afterTickToLabelConversion, [this]);
 
+	},
 
+
 
+	//
 
+
 
+	beforeCalculateTickRotation: function() {
 
+		helpers$1.callback(this.options.beforeCalculateTickRotation, [this]);
 
+	},
 
+	calculateTickRotation: function() {
 
+		var me = this;
 
+		var context = me.ctx;
 
+		var tickOpts = me.options.ticks;
 
+		var labels = labelsFromTicks(me._ticks);
 
+
 
+		// Get the width of each grid by calculating the difference
 
+		// between x offsets between 0 and 1.
 
+		var tickFont = helpers$1.options._parseFont(tickOpts);
 
+		context.font = tickFont.string;
 
+
 
+		var labelRotation = tickOpts.minRotation || 0;
 
+
 
+		if (labels.length && me.options.display && me.isHorizontal()) {
 
+			var originalLabelWidth = helpers$1.longestText(context, tickFont.string, labels, me.longestTextCache);
 
+			var labelWidth = originalLabelWidth;
 
+			var cosRotation, sinRotation;
 
+
 
+			// Allow 3 pixels x2 padding either side for label readability
 
+			var tickWidth = me.getPixelForTick(1) - me.getPixelForTick(0) - 6;
 
+
 
+			// Max label rotation can be set or default to 90 - also act as a loop counter
 
+			while (labelWidth > tickWidth && labelRotation < tickOpts.maxRotation) {
 
+				var angleRadians = helpers$1.toRadians(labelRotation);
 
+				cosRotation = Math.cos(angleRadians);
 
+				sinRotation = Math.sin(angleRadians);
 
+
 
+				if (sinRotation * originalLabelWidth > me.maxHeight) {
 
+					// go back one step
 
+					labelRotation--;
 
+					break;
 
+				}
 
+
 
+				labelRotation++;
 
+				labelWidth = cosRotation * originalLabelWidth;
 
+			}
 
+		}
 
+
 
+		me.labelRotation = labelRotation;
 
+	},
 
+	afterCalculateTickRotation: function() {
 
+		helpers$1.callback(this.options.afterCalculateTickRotation, [this]);
 
+	},
 
+
 
+	//
 
+
 
+	beforeFit: function() {
 
+		helpers$1.callback(this.options.beforeFit, [this]);
 
+	},
 
+	fit: function() {
 
+		var me = this;
 
+		// Reset
 
+		var minSize = me.minSize = {
 
+			width: 0,
 
+			height: 0
 
+		};
 
+
 
+		var labels = labelsFromTicks(me._ticks);
 
+
 
+		var opts = me.options;
 
+		var tickOpts = opts.ticks;
 
+		var scaleLabelOpts = opts.scaleLabel;
 
+		var gridLineOpts = opts.gridLines;
 
+		var display = me._isVisible();
 
+		var position = opts.position;
 
+		var isHorizontal = me.isHorizontal();
 
+
 
+		var parseFont = helpers$1.options._parseFont;
 
+		var tickFont = parseFont(tickOpts);
 
+		var tickMarkLength = opts.gridLines.tickMarkLength;
 
+
 
+		// Width
 
+		if (isHorizontal) {
 
+			// subtract the margins to line up with the chartArea if we are a full width scale
 
+			minSize.width = me.isFullWidth() ? me.maxWidth - me.margins.left - me.margins.right : me.maxWidth;
 
+		} else {
 
+			minSize.width = display && gridLineOpts.drawTicks ? tickMarkLength : 0;
 
+		}
 
+
 
+		// height
 
+		if (isHorizontal) {
 
+			minSize.height = display && gridLineOpts.drawTicks ? tickMarkLength : 0;
 
+		} else {
 
+			minSize.height = me.maxHeight; // fill all the height
 
+		}
 
+
 
+		// Are we showing a title for the scale?
 
+		if (scaleLabelOpts.display && display) {
 
+			var scaleLabelFont = parseFont(scaleLabelOpts);
 
+			var scaleLabelPadding = helpers$1.options.toPadding(scaleLabelOpts.padding);
 
+			var deltaHeight = scaleLabelFont.lineHeight + scaleLabelPadding.height;
 
+
 
+			if (isHorizontal) {
 
+				minSize.height += deltaHeight;
 
+			} else {
 
+				minSize.width += deltaHeight;
 
+			}
 
+		}
 
+
 
+		// Don't bother fitting the ticks if we are not showing the labels
 
+		if (tickOpts.display && display) {
 
+			var largestTextWidth = helpers$1.longestText(me.ctx, tickFont.string, labels, me.longestTextCache);
 
+			var tallestLabelHeightInLines = helpers$1.numberOfLabelLines(labels);
 
+			var lineSpace = tickFont.size * 0.5;
 
+			var tickPadding = me.options.ticks.padding;
 
+
 
+			// Store max number of lines and widest label for _autoSkip
 
+			me._maxLabelLines = tallestLabelHeightInLines;
 
+			me.longestLabelWidth = largestTextWidth;
 
+
 
+			if (isHorizontal) {
 
+				var angleRadians = helpers$1.toRadians(me.labelRotation);
 
+				var cosRotation = Math.cos(angleRadians);
 
+				var sinRotation = Math.sin(angleRadians);
 
+
 
+				// TODO - improve this calculation
 
+				var labelHeight = (sinRotation * largestTextWidth)
 
+					+ (tickFont.lineHeight * tallestLabelHeightInLines)
 
+					+ lineSpace; // padding
 
+
 
+				minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding);
 
+
 
+				me.ctx.font = tickFont.string;
 
+				var firstLabelWidth = computeTextSize(me.ctx, labels[0], tickFont.string);
 
+				var lastLabelWidth = computeTextSize(me.ctx, labels[labels.length - 1], tickFont.string);
 
+				var offsetLeft = me.getPixelForTick(0) - me.left;
 
+				var offsetRight = me.right - me.getPixelForTick(labels.length - 1);
 
+				var paddingLeft, paddingRight;
 
+
 
+				// Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned
 
+				// which means that the right padding is dominated by the font height
 
+				if (me.labelRotation !== 0) {
 
+					paddingLeft = position === 'bottom' ? (cosRotation * firstLabelWidth) : (cosRotation * lineSpace);
 
+					paddingRight = position === 'bottom' ? (cosRotation * lineSpace) : (cosRotation * lastLabelWidth);
 
+				} else {
 
+					paddingLeft = firstLabelWidth / 2;
 
+					paddingRight = lastLabelWidth / 2;
 
+				}
 
+				me.paddingLeft = Math.max(paddingLeft - offsetLeft, 0) + 3; // add 3 px to move away from canvas edges
 
+				me.paddingRight = Math.max(paddingRight - offsetRight, 0) + 3;
 
+			} else {
 
+				// A vertical axis is more constrained by the width. Labels are the
 
+				// dominant factor here, so get that length first and account for padding
 
+				if (tickOpts.mirror) {
 
+					largestTextWidth = 0;
 
+				} else {
 
+					// use lineSpace for consistency with horizontal axis
 
+					// tickPadding is not implemented for horizontal
 
+					largestTextWidth += tickPadding + lineSpace;
 
+				}
 
+
 
+				minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
 
+
 
+				me.paddingTop = tickFont.size / 2;
 
+				me.paddingBottom = tickFont.size / 2;
 
+			}
 
+		}
 
+
 
+		me.handleMargins();
 
+
 
+		me.width = minSize.width;
 
+		me.height = minSize.height;
 
+	},
 
+
 
+	/**
 
+	 * Handle margins and padding interactions
 
+	 * @private
 
+	 */
 
+	handleMargins: function() {
 
+		var me = this;
 
+		if (me.margins) {
 
+			me.paddingLeft = Math.max(me.paddingLeft - me.margins.left, 0);
 
+			me.paddingTop = Math.max(me.paddingTop - me.margins.top, 0);
 
+			me.paddingRight = Math.max(me.paddingRight - me.margins.right, 0);
 
+			me.paddingBottom = Math.max(me.paddingBottom - me.margins.bottom, 0);
 
+		}
 
+	},
 
+
 
+	afterFit: function() {
 
+		helpers$1.callback(this.options.afterFit, [this]);
 
+	},
 
+
 
+	// Shared Methods
 
+	isHorizontal: function() {
 
+		return this.options.position === 'top' || this.options.position === 'bottom';
 
+	},
 
+	isFullWidth: function() {
 
+		return (this.options.fullWidth);
 
+	},
 
+
 
+	// Get the correct value. NaN bad inputs, If the value type is object get the x or y based on whether we are horizontal or not
 
+	getRightValue: function(rawValue) {
 
+		// Null and undefined values first
 
+		if (helpers$1.isNullOrUndef(rawValue)) {
 
+			return NaN;
 
+		}
 
+		// isNaN(object) returns true, so make sure NaN is checking for a number; Discard Infinite values
 
+		if ((typeof rawValue === 'number' || rawValue instanceof Number) && !isFinite(rawValue)) {
 
+			return NaN;
 
+		}
 
+		// If it is in fact an object, dive in one more level
 
+		if (rawValue) {
 
+			if (this.isHorizontal()) {
 
+				if (rawValue.x !== undefined) {
 
+					return this.getRightValue(rawValue.x);
 
+				}
 
+			} else if (rawValue.y !== undefined) {
 
+				return this.getRightValue(rawValue.y);
 
+			}
 
+		}
 
+
 
+		// Value is good, return it
 
+		return rawValue;
 
+	},
 
+
 
+	/**
 
+	 * Used to get the value to display in the tooltip for the data at the given index
 
+	 * @param index
 
+	 * @param datasetIndex
 
+	 */
 
+	getLabelForIndex: helpers$1.noop,
 
+
 
+	/**
 
+	 * Returns the location of the given data point. Value can either be an index or a numerical value
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 * @param value
 
+	 * @param index
 
+	 * @param datasetIndex
 
+	 */
 
+	getPixelForValue: helpers$1.noop,
 
+
 
+	/**
 
+	 * Used to get the data value from a given pixel. This is the inverse of getPixelForValue
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 * @param pixel
 
+	 */
 
+	getValueForPixel: helpers$1.noop,
 
+
 
+	/**
 
+	 * Returns the location of the tick at the given index
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 */
 
+	getPixelForTick: function(index) {
 
+		var me = this;
 
+		var offset = me.options.offset;
 
+		if (me.isHorizontal()) {
 
+			var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
 
+			var tickWidth = innerWidth / Math.max((me._ticks.length - (offset ? 0 : 1)), 1);
 
+			var pixel = (tickWidth * index) + me.paddingLeft;
 
+
 
+			if (offset) {
 
+				pixel += tickWidth / 2;
 
+			}
 
+
 
+			var finalVal = me.left + pixel;
 
+			finalVal += me.isFullWidth() ? me.margins.left : 0;
 
+			return finalVal;
 
+		}
 
+		var innerHeight = me.height - (me.paddingTop + me.paddingBottom);
 
+		return me.top + (index * (innerHeight / (me._ticks.length - 1)));
 
+	},
 
+
 
+	/**
 
+	 * Utility for getting the pixel location of a percentage of scale
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 */
 
+	getPixelForDecimal: function(decimal) {
 
+		var me = this;
 
+		if (me.isHorizontal()) {
 
+			var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
 
+			var valueOffset = (innerWidth * decimal) + me.paddingLeft;
 
+
 
+			var finalVal = me.left + valueOffset;
 
+			finalVal += me.isFullWidth() ? me.margins.left : 0;
 
+			return finalVal;
 
+		}
 
+		return me.top + (decimal * me.height);
 
+	},
 
+
 
+	/**
 
+	 * Returns the pixel for the minimum chart value
 
+	 * The coordinate (0, 0) is at the upper-left corner of the canvas
 
+	 */
 
+	getBasePixel: function() {
 
+		return this.getPixelForValue(this.getBaseValue());
 
+	},
 
+
 
+	getBaseValue: function() {
 
+		var me = this;
 
+		var min = me.min;
 
+		var max = me.max;
 
+
 
+		return me.beginAtZero ? 0 :
 
+			min < 0 && max < 0 ? max :
 
+			min > 0 && max > 0 ? min :
 
+			0;
 
+	},
 
+
 
+	/**
 
+	 * Returns a subset of ticks to be plotted to avoid overlapping labels.
 
+	 * @private
 
+	 */
 
+	_autoSkip: function(ticks) {
 
+		var me = this;
 
+		var isHorizontal = me.isHorizontal();
 
+		var optionTicks = me.options.ticks.minor;
 
+		var tickCount = ticks.length;
 
+		var skipRatio = false;
 
+		var maxTicks = optionTicks.maxTicksLimit;
 
+
 
+		// Total space needed to display all ticks. First and last ticks are
 
+		// drawn as their center at end of axis, so tickCount-1
 
+		var ticksLength = me._tickSize() * (tickCount - 1);
 
+
 
+		// Axis length
 
+		var axisLength = isHorizontal
 
+			? me.width - (me.paddingLeft + me.paddingRight)
 
+			: me.height - (me.paddingTop + me.PaddingBottom);
 
+
 
+		var result = [];
 
+		var i, tick;
 
+
 
+		if (ticksLength > axisLength) {
 
+			skipRatio = 1 + Math.floor(ticksLength / axisLength);
 
+		}
 
+
 
+		// if they defined a max number of optionTicks,
 
+		// increase skipRatio until that number is met
 
+		if (tickCount > maxTicks) {
 
+			skipRatio = Math.max(skipRatio, 1 + Math.floor(tickCount / maxTicks));
 
+		}
 
+
 
+		for (i = 0; i < tickCount; i++) {
 
+			tick = ticks[i];
 
+
 
+			if (skipRatio > 1 && i % skipRatio > 0) {
 
+				// leave tick in place but make sure it's not displayed (#4635)
 
+				delete tick.label;
 
+			}
 
+			result.push(tick);
 
+		}
 
+		return result;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_tickSize: function() {
 
+		var me = this;
 
+		var isHorizontal = me.isHorizontal();
 
+		var optionTicks = me.options.ticks.minor;
 
+
 
+		// Calculate space needed by label in axis direction.
 
+		var rot = helpers$1.toRadians(me.labelRotation);
 
+		var cos = Math.abs(Math.cos(rot));
 
+		var sin = Math.abs(Math.sin(rot));
 
+
 
+		var padding = optionTicks.autoSkipPadding || 0;
 
+		var w = (me.longestLabelWidth + padding) || 0;
 
+
 
+		var tickFont = helpers$1.options._parseFont(optionTicks);
 
+		var h = (me._maxLabelLines * tickFont.lineHeight + padding) || 0;
 
+
 
+		// Calculate space needed for 1 tick in axis direction.
 
+		return isHorizontal
 
+			? h * cos > w * sin ? w / cos : h / sin
 
+			: h * sin < w * cos ? h / cos : w / sin;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_isVisible: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var display = me.options.display;
 
+		var i, ilen, meta;
 
+
 
+		if (display !== 'auto') {
 
+			return !!display;
 
+		}
 
+
 
+		// When 'auto', the scale is visible if at least one associated dataset is visible.
 
+		for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
 
+			if (chart.isDatasetVisible(i)) {
 
+				meta = chart.getDatasetMeta(i);
 
+				if (meta.xAxisID === me.id || meta.yAxisID === me.id) {
 
+					return true;
 
+				}
 
+			}
 
+		}
 
+
 
+		return false;
 
+	},
 
+
 
+	/**
 
+	 * Actually draw the scale on the canvas
 
+	 * @param {object} chartArea - the area of the chart to draw full grid lines on
 
+	 */
 
+	draw: function(chartArea) {
 
+		var me = this;
 
+		var options = me.options;
 
+
 
+		if (!me._isVisible()) {
 
+			return;
 
+		}
 
+
 
+		var chart = me.chart;
 
+		var context = me.ctx;
 
+		var globalDefaults = core_defaults.global;
 
+		var defaultFontColor = globalDefaults.defaultFontColor;
 
+		var optionTicks = options.ticks.minor;
 
+		var optionMajorTicks = options.ticks.major || optionTicks;
 
+		var gridLines = options.gridLines;
 
+		var scaleLabel = options.scaleLabel;
 
+		var position = options.position;
 
+
 
+		var isRotated = me.labelRotation !== 0;
 
+		var isMirrored = optionTicks.mirror;
 
+		var isHorizontal = me.isHorizontal();
 
+
 
+		var parseFont = helpers$1.options._parseFont;
 
+		var ticks = optionTicks.display && optionTicks.autoSkip ? me._autoSkip(me.getTicks()) : me.getTicks();
 
+		var tickFontColor = valueOrDefault$9(optionTicks.fontColor, defaultFontColor);
 
+		var tickFont = parseFont(optionTicks);
 
+		var lineHeight = tickFont.lineHeight;
 
+		var majorTickFontColor = valueOrDefault$9(optionMajorTicks.fontColor, defaultFontColor);
 
+		var majorTickFont = parseFont(optionMajorTicks);
 
+		var tickPadding = optionTicks.padding;
 
+		var labelOffset = optionTicks.labelOffset;
 
+
 
+		var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0;
 
+
 
+		var scaleLabelFontColor = valueOrDefault$9(scaleLabel.fontColor, defaultFontColor);
 
+		var scaleLabelFont = parseFont(scaleLabel);
 
+		var scaleLabelPadding = helpers$1.options.toPadding(scaleLabel.padding);
 
+		var labelRotationRadians = helpers$1.toRadians(me.labelRotation);
 
+
 
+		var itemsToDraw = [];
 
+
 
+		var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
 
+		var alignPixel = helpers$1._alignPixel;
 
+		var borderValue, tickStart, tickEnd;
 
+
 
+		if (position === 'top') {
 
+			borderValue = alignPixel(chart, me.bottom, axisWidth);
 
+			tickStart = me.bottom - tl;
 
+			tickEnd = borderValue - axisWidth / 2;
 
+		} else if (position === 'bottom') {
 
+			borderValue = alignPixel(chart, me.top, axisWidth);
 
+			tickStart = borderValue + axisWidth / 2;
 
+			tickEnd = me.top + tl;
 
+		} else if (position === 'left') {
 
+			borderValue = alignPixel(chart, me.right, axisWidth);
 
+			tickStart = me.right - tl;
 
+			tickEnd = borderValue - axisWidth / 2;
 
+		} else {
 
+			borderValue = alignPixel(chart, me.left, axisWidth);
 
+			tickStart = borderValue + axisWidth / 2;
 
+			tickEnd = me.left + tl;
 
+		}
 
+
 
+		var epsilon = 0.0000001; // 0.0000001 is margin in pixels for Accumulated error.
 
+
 
+		helpers$1.each(ticks, function(tick, index) {
 
+			// autoskipper skipped this tick (#4635)
 
+			if (helpers$1.isNullOrUndef(tick.label)) {
 
+				return;
 
+			}
 
+
 
+			var label = tick.label;
 
+			var lineWidth, lineColor, borderDash, borderDashOffset;
 
+			if (index === me.zeroLineIndex && options.offset === gridLines.offsetGridLines) {
 
+				// Draw the first index specially
 
+				lineWidth = gridLines.zeroLineWidth;
 
+				lineColor = gridLines.zeroLineColor;
 
+				borderDash = gridLines.zeroLineBorderDash || [];
 
+				borderDashOffset = gridLines.zeroLineBorderDashOffset || 0.0;
 
+			} else {
 
+				lineWidth = valueAtIndexOrDefault(gridLines.lineWidth, index);
 
+				lineColor = valueAtIndexOrDefault(gridLines.color, index);
 
+				borderDash = gridLines.borderDash || [];
 
+				borderDashOffset = gridLines.borderDashOffset || 0.0;
 
+			}
 
+
 
+			// Common properties
 
+			var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY, textOffset, textAlign;
 
+			var labelCount = helpers$1.isArray(label) ? label.length : 1;
 
+			var lineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);
 
+
 
+			if (isHorizontal) {
 
+				var labelYOffset = tl + tickPadding;
 
+
 
+				if (lineValue < me.left - epsilon) {
 
+					lineColor = 'rgba(0,0,0,0)';
 
+				}
 
+
 
+				tx1 = tx2 = x1 = x2 = alignPixel(chart, lineValue, lineWidth);
 
+				ty1 = tickStart;
 
+				ty2 = tickEnd;
 
+				labelX = me.getPixelForTick(index) + labelOffset; // x values for optionTicks (need to consider offsetLabel option)
 
+
 
+				if (position === 'top') {
 
+					y1 = alignPixel(chart, chartArea.top, axisWidth) + axisWidth / 2;
 
+					y2 = chartArea.bottom;
 
+					textOffset = ((!isRotated ? 0.5 : 1) - labelCount) * lineHeight;
 
+					textAlign = !isRotated ? 'center' : 'left';
 
+					labelY = me.bottom - labelYOffset;
 
+				} else {
 
+					y1 = chartArea.top;
 
+					y2 = alignPixel(chart, chartArea.bottom, axisWidth) - axisWidth / 2;
 
+					textOffset = (!isRotated ? 0.5 : 0) * lineHeight;
 
+					textAlign = !isRotated ? 'center' : 'right';
 
+					labelY = me.top + labelYOffset;
 
+				}
 
+			} else {
 
+				var labelXOffset = (isMirrored ? 0 : tl) + tickPadding;
 
+
 
+				if (lineValue < me.top - epsilon) {
 
+					lineColor = 'rgba(0,0,0,0)';
 
+				}
 
+
 
+				tx1 = tickStart;
 
+				tx2 = tickEnd;
 
+				ty1 = ty2 = y1 = y2 = alignPixel(chart, lineValue, lineWidth);
 
+				labelY = me.getPixelForTick(index) + labelOffset;
 
+				textOffset = (1 - labelCount) * lineHeight / 2;
 
+
 
+				if (position === 'left') {
 
+					x1 = alignPixel(chart, chartArea.left, axisWidth) + axisWidth / 2;
 
+					x2 = chartArea.right;
 
+					textAlign = isMirrored ? 'left' : 'right';
 
+					labelX = me.right - labelXOffset;
 
+				} else {
 
+					x1 = chartArea.left;
 
+					x2 = alignPixel(chart, chartArea.right, axisWidth) - axisWidth / 2;
 
+					textAlign = isMirrored ? 'right' : 'left';
 
+					labelX = me.left + labelXOffset;
 
+				}
 
+			}
 
+
 
+			itemsToDraw.push({
 
+				tx1: tx1,
 
+				ty1: ty1,
 
+				tx2: tx2,
 
+				ty2: ty2,
 
+				x1: x1,
 
+				y1: y1,
 
+				x2: x2,
 
+				y2: y2,
 
+				labelX: labelX,
 
+				labelY: labelY,
 
+				glWidth: lineWidth,
 
+				glColor: lineColor,
 
+				glBorderDash: borderDash,
 
+				glBorderDashOffset: borderDashOffset,
 
+				rotation: -1 * labelRotationRadians,
 
+				label: label,
 
+				major: tick.major,
 
+				textOffset: textOffset,
 
+				textAlign: textAlign
 
+			});
 
+		});
 
+
 
+		// Draw all of the tick labels, tick marks, and grid lines at the correct places
 
+		helpers$1.each(itemsToDraw, function(itemToDraw) {
 
+			var glWidth = itemToDraw.glWidth;
 
+			var glColor = itemToDraw.glColor;
 
+
 
+			if (gridLines.display && glWidth && glColor) {
 
+				context.save();
 
+				context.lineWidth = glWidth;
 
+				context.strokeStyle = glColor;
 
+				if (context.setLineDash) {
 
+					context.setLineDash(itemToDraw.glBorderDash);
 
+					context.lineDashOffset = itemToDraw.glBorderDashOffset;
 
+				}
 
+
 
+				context.beginPath();
 
+
 
+				if (gridLines.drawTicks) {
 
+					context.moveTo(itemToDraw.tx1, itemToDraw.ty1);
 
+					context.lineTo(itemToDraw.tx2, itemToDraw.ty2);
 
+				}
 
+
 
+				if (gridLines.drawOnChartArea) {
 
+					context.moveTo(itemToDraw.x1, itemToDraw.y1);
 
+					context.lineTo(itemToDraw.x2, itemToDraw.y2);
 
+				}
 
+
 
+				context.stroke();
 
+				context.restore();
 
+			}
 
+
 
+			if (optionTicks.display) {
 
+				// Make sure we draw text in the correct color and font
 
+				context.save();
 
+				context.translate(itemToDraw.labelX, itemToDraw.labelY);
 
+				context.rotate(itemToDraw.rotation);
 
+				context.font = itemToDraw.major ? majorTickFont.string : tickFont.string;
 
+				context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
 
+				context.textBaseline = 'middle';
 
+				context.textAlign = itemToDraw.textAlign;
 
+
 
+				var label = itemToDraw.label;
 
+				var y = itemToDraw.textOffset;
 
+				if (helpers$1.isArray(label)) {
 
+					for (var i = 0; i < label.length; ++i) {
 
+						// We just make sure the multiline element is a string here..
 
+						context.fillText('' + label[i], 0, y);
 
+						y += lineHeight;
 
+					}
 
+				} else {
 
+					context.fillText(label, 0, y);
 
+				}
 
+				context.restore();
 
+			}
 
+		});
 
+
 
+		if (scaleLabel.display) {
 
+			// Draw the scale label
 
+			var scaleLabelX;
 
+			var scaleLabelY;
 
+			var rotation = 0;
 
+			var halfLineHeight = scaleLabelFont.lineHeight / 2;
 
+
 
+			if (isHorizontal) {
 
+				scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
 
+				scaleLabelY = position === 'bottom'
 
+					? me.bottom - halfLineHeight - scaleLabelPadding.bottom
 
+					: me.top + halfLineHeight + scaleLabelPadding.top;
 
+			} else {
 
+				var isLeft = position === 'left';
 
+				scaleLabelX = isLeft
 
+					? me.left + halfLineHeight + scaleLabelPadding.top
 
+					: me.right - halfLineHeight - scaleLabelPadding.top;
 
+				scaleLabelY = me.top + ((me.bottom - me.top) / 2);
 
+				rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
 
+			}
 
+
 
+			context.save();
 
+			context.translate(scaleLabelX, scaleLabelY);
 
+			context.rotate(rotation);
 
+			context.textAlign = 'center';
 
+			context.textBaseline = 'middle';
 
+			context.fillStyle = scaleLabelFontColor; // render in correct colour
 
+			context.font = scaleLabelFont.string;
 
+			context.fillText(scaleLabel.labelString, 0, 0);
 
+			context.restore();
 
+		}
 
+
 
+		if (axisWidth) {
 
+			// Draw the line at the edge of the axis
 
+			var firstLineWidth = axisWidth;
 
+			var lastLineWidth = valueAtIndexOrDefault(gridLines.lineWidth, ticks.length - 1, 0);
 
+			var x1, x2, y1, y2;
 
+
 
+			if (isHorizontal) {
 
+				x1 = alignPixel(chart, me.left, firstLineWidth) - firstLineWidth / 2;
 
+				x2 = alignPixel(chart, me.right, lastLineWidth) + lastLineWidth / 2;
 
+				y1 = y2 = borderValue;
 
+			} else {
 
+				y1 = alignPixel(chart, me.top, firstLineWidth) - firstLineWidth / 2;
 
+				y2 = alignPixel(chart, me.bottom, lastLineWidth) + lastLineWidth / 2;
 
+				x1 = x2 = borderValue;
 
+			}
 
+
 
+			context.lineWidth = axisWidth;
 
+			context.strokeStyle = valueAtIndexOrDefault(gridLines.color, 0);
 
+			context.beginPath();
 
+			context.moveTo(x1, y1);
 
+			context.lineTo(x2, y2);
 
+			context.stroke();
 
+		}
 
+	}
 
+});
 
+
 
+var defaultConfig = {
 
+	position: 'bottom'
 
+};
 
+
 
+var scale_category = core_scale.extend({
 
+	/**
 
+	* Internal function to get the correct labels. If data.xLabels or data.yLabels are defined, use those
 
+	* else fall back to data.labels
 
+	* @private
 
+	*/
 
+	getLabels: function() {
 
+		var data = this.chart.data;
 
+		return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels;
 
+	},
 
+
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var labels = me.getLabels();
 
+		me.minIndex = 0;
 
+		me.maxIndex = labels.length - 1;
 
+		var findIndex;
 
+
 
+		if (me.options.ticks.min !== undefined) {
 
+			// user specified min value
 
+			findIndex = labels.indexOf(me.options.ticks.min);
 
+			me.minIndex = findIndex !== -1 ? findIndex : me.minIndex;
 
+		}
 
+
 
+		if (me.options.ticks.max !== undefined) {
 
+			// user specified max value
 
+			findIndex = labels.indexOf(me.options.ticks.max);
 
+			me.maxIndex = findIndex !== -1 ? findIndex : me.maxIndex;
 
+		}
 
+
 
+		me.min = labels[me.minIndex];
 
+		me.max = labels[me.maxIndex];
 
+	},
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var labels = me.getLabels();
 
+		// If we are viewing some subset of labels, slice the original array
 
+		me.ticks = (me.minIndex === 0 && me.maxIndex === labels.length - 1) ? labels : labels.slice(me.minIndex, me.maxIndex + 1);
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		var me = this;
 
+		var chart = me.chart;
 
+
 
+		if (chart.getDatasetMeta(datasetIndex).controller._getValueScaleId() === me.id) {
 
+			return me.getRightValue(chart.data.datasets[datasetIndex].data[index]);
 
+		}
 
+
 
+		return me.ticks[index - me.minIndex];
 
+	},
 
+
 
+	// Used to get data value locations.  Value can either be an index or a numerical value
 
+	getPixelForValue: function(value, index) {
 
+		var me = this;
 
+		var offset = me.options.offset;
 
+		// 1 is added because we need the length but we have the indexes
 
+		var offsetAmt = Math.max((me.maxIndex + 1 - me.minIndex - (offset ? 0 : 1)), 1);
 
+
 
+		// If value is a data object, then index is the index in the data array,
 
+		// not the index of the scale. We need to change that.
 
+		var valueCategory;
 
+		if (value !== undefined && value !== null) {
 
+			valueCategory = me.isHorizontal() ? value.x : value.y;
 
+		}
 
+		if (valueCategory !== undefined || (value !== undefined && isNaN(index))) {
 
+			var labels = me.getLabels();
 
+			value = valueCategory || value;
 
+			var idx = labels.indexOf(value);
 
+			index = idx !== -1 ? idx : index;
 
+		}
 
+
 
+		if (me.isHorizontal()) {
 
+			var valueWidth = me.width / offsetAmt;
 
+			var widthOffset = (valueWidth * (index - me.minIndex));
 
+
 
+			if (offset) {
 
+				widthOffset += (valueWidth / 2);
 
+			}
 
+
 
+			return me.left + widthOffset;
 
+		}
 
+		var valueHeight = me.height / offsetAmt;
 
+		var heightOffset = (valueHeight * (index - me.minIndex));
 
+
 
+		if (offset) {
 
+			heightOffset += (valueHeight / 2);
 
+		}
 
+
 
+		return me.top + heightOffset;
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		return this.getPixelForValue(this.ticks[index], index + this.minIndex, null);
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var offset = me.options.offset;
 
+		var value;
 
+		var offsetAmt = Math.max((me._ticks.length - (offset ? 0 : 1)), 1);
 
+		var horz = me.isHorizontal();
 
+		var valueDimension = (horz ? me.width : me.height) / offsetAmt;
 
+
 
+		pixel -= horz ? me.left : me.top;
 
+
 
+		if (offset) {
 
+			pixel -= (valueDimension / 2);
 
+		}
 
+
 
+		if (pixel <= 0) {
 
+			value = 0;
 
+		} else {
 
+			value = Math.round(pixel / valueDimension);
 
+		}
 
+
 
+		return value + me.minIndex;
 
+	},
 
+
 
+	getBasePixel: function() {
 
+		return this.bottom;
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults = defaultConfig;
 
+scale_category._defaults = _defaults;
 
+
 
+var noop = helpers$1.noop;
 
+var isNullOrUndef = helpers$1.isNullOrUndef;
 
+
 
+/**
 
+ * Generate a set of linear ticks
 
+ * @param generationOptions the options used to generate the ticks
 
+ * @param dataRange the range of the data
 
+ * @returns {number[]} array of tick values
 
+ */
 
+function generateTicks(generationOptions, dataRange) {
 
+	var ticks = [];
 
+	// To get a "nice" value for the tick spacing, we will use the appropriately named
 
+	// "nice number" algorithm. See https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
 
+	// for details.
 
+
 
+	var MIN_SPACING = 1e-14;
 
+	var stepSize = generationOptions.stepSize;
 
+	var unit = stepSize || 1;
 
+	var maxNumSpaces = generationOptions.maxTicks - 1;
 
+	var min = generationOptions.min;
 
+	var max = generationOptions.max;
 
+	var precision = generationOptions.precision;
 
+	var rmin = dataRange.min;
 
+	var rmax = dataRange.max;
 
+	var spacing = helpers$1.niceNum((rmax - rmin) / maxNumSpaces / unit) * unit;
 
+	var factor, niceMin, niceMax, numSpaces;
 
+
 
+	// Beyond MIN_SPACING floating point numbers being to lose precision
 
+	// such that we can't do the math necessary to generate ticks
 
+	if (spacing < MIN_SPACING && isNullOrUndef(min) && isNullOrUndef(max)) {
 
+		return [rmin, rmax];
 
+	}
 
+
 
+	numSpaces = Math.ceil(rmax / spacing) - Math.floor(rmin / spacing);
 
+	if (numSpaces > maxNumSpaces) {
 
+		// If the calculated num of spaces exceeds maxNumSpaces, recalculate it
 
+		spacing = helpers$1.niceNum(numSpaces * spacing / maxNumSpaces / unit) * unit;
 
+	}
 
+
 
+	if (stepSize || isNullOrUndef(precision)) {
 
+		// If a precision is not specified, calculate factor based on spacing
 
+		factor = Math.pow(10, helpers$1._decimalPlaces(spacing));
 
+	} else {
 
+		// If the user specified a precision, round to that number of decimal places
 
+		factor = Math.pow(10, precision);
 
+		spacing = Math.ceil(spacing * factor) / factor;
 
+	}
 
+
 
+	niceMin = Math.floor(rmin / spacing) * spacing;
 
+	niceMax = Math.ceil(rmax / spacing) * spacing;
 
+
 
+	// If min, max and stepSize is set and they make an evenly spaced scale use it.
 
+	if (stepSize) {
 
+		// If very close to our whole number, use it.
 
+		if (!isNullOrUndef(min) && helpers$1.almostWhole(min / spacing, spacing / 1000)) {
 
+			niceMin = min;
 
+		}
 
+		if (!isNullOrUndef(max) && helpers$1.almostWhole(max / spacing, spacing / 1000)) {
 
+			niceMax = max;
 
+		}
 
+	}
 
+
 
+	numSpaces = (niceMax - niceMin) / spacing;
 
+	// If very close to our rounded value, use it.
 
+	if (helpers$1.almostEquals(numSpaces, Math.round(numSpaces), spacing / 1000)) {
 
+		numSpaces = Math.round(numSpaces);
 
+	} else {
 
+		numSpaces = Math.ceil(numSpaces);
 
+	}
 
+
 
+	niceMin = Math.round(niceMin * factor) / factor;
 
+	niceMax = Math.round(niceMax * factor) / factor;
 
+	ticks.push(isNullOrUndef(min) ? niceMin : min);
 
+	for (var j = 1; j < numSpaces; ++j) {
 
+		ticks.push(Math.round((niceMin + j * spacing) * factor) / factor);
 
+	}
 
+	ticks.push(isNullOrUndef(max) ? niceMax : max);
 
+
 
+	return ticks;
 
+}
 
+
 
+var scale_linearbase = core_scale.extend({
 
+	getRightValue: function(value) {
 
+		if (typeof value === 'string') {
 
+			return +value;
 
+		}
 
+		return core_scale.prototype.getRightValue.call(this, value);
 
+	},
 
+
 
+	handleTickRangeOptions: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var tickOpts = opts.ticks;
 
+
 
+		// If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
 
+		// do nothing since that would make the chart weird. If the user really wants a weird chart
 
+		// axis, they can manually override it
 
+		if (tickOpts.beginAtZero) {
 
+			var minSign = helpers$1.sign(me.min);
 
+			var maxSign = helpers$1.sign(me.max);
 
+
 
+			if (minSign < 0 && maxSign < 0) {
 
+				// move the top up to 0
 
+				me.max = 0;
 
+			} else if (minSign > 0 && maxSign > 0) {
 
+				// move the bottom down to 0
 
+				me.min = 0;
 
+			}
 
+		}
 
+
 
+		var setMin = tickOpts.min !== undefined || tickOpts.suggestedMin !== undefined;
 
+		var setMax = tickOpts.max !== undefined || tickOpts.suggestedMax !== undefined;
 
+
 
+		if (tickOpts.min !== undefined) {
 
+			me.min = tickOpts.min;
 
+		} else if (tickOpts.suggestedMin !== undefined) {
 
+			if (me.min === null) {
 
+				me.min = tickOpts.suggestedMin;
 
+			} else {
 
+				me.min = Math.min(me.min, tickOpts.suggestedMin);
 
+			}
 
+		}
 
+
 
+		if (tickOpts.max !== undefined) {
 
+			me.max = tickOpts.max;
 
+		} else if (tickOpts.suggestedMax !== undefined) {
 
+			if (me.max === null) {
 
+				me.max = tickOpts.suggestedMax;
 
+			} else {
 
+				me.max = Math.max(me.max, tickOpts.suggestedMax);
 
+			}
 
+		}
 
+
 
+		if (setMin !== setMax) {
 
+			// We set the min or the max but not both.
 
+			// So ensure that our range is good
 
+			// Inverted or 0 length range can happen when
 
+			// ticks.min is set, and no datasets are visible
 
+			if (me.min >= me.max) {
 
+				if (setMin) {
 
+					me.max = me.min + 1;
 
+				} else {
 
+					me.min = me.max - 1;
 
+				}
 
+			}
 
+		}
 
+
 
+		if (me.min === me.max) {
 
+			me.max++;
 
+
 
+			if (!tickOpts.beginAtZero) {
 
+				me.min--;
 
+			}
 
+		}
 
+	},
 
+
 
+	getTickLimit: function() {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var stepSize = tickOpts.stepSize;
 
+		var maxTicksLimit = tickOpts.maxTicksLimit;
 
+		var maxTicks;
 
+
 
+		if (stepSize) {
 
+			maxTicks = Math.ceil(me.max / stepSize) - Math.floor(me.min / stepSize) + 1;
 
+		} else {
 
+			maxTicks = me._computeTickLimit();
 
+			maxTicksLimit = maxTicksLimit || 11;
 
+		}
 
+
 
+		if (maxTicksLimit) {
 
+			maxTicks = Math.min(maxTicksLimit, maxTicks);
 
+		}
 
+
 
+		return maxTicks;
 
+	},
 
+
 
+	_computeTickLimit: function() {
 
+		return Number.POSITIVE_INFINITY;
 
+	},
 
+
 
+	handleDirectionalChanges: noop,
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var tickOpts = opts.ticks;
 
+
 
+		// Figure out what the max number of ticks we can support it is based on the size of
 
+		// the axis area. For now, we say that the minimum tick spacing in pixels must be 40
 
+		// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
 
+		// the graph. Make sure we always have at least 2 ticks
 
+		var maxTicks = me.getTickLimit();
 
+		maxTicks = Math.max(2, maxTicks);
 
+
 
+		var numericGeneratorOptions = {
 
+			maxTicks: maxTicks,
 
+			min: tickOpts.min,
 
+			max: tickOpts.max,
 
+			precision: tickOpts.precision,
 
+			stepSize: helpers$1.valueOrDefault(tickOpts.fixedStepSize, tickOpts.stepSize)
 
+		};
 
+		var ticks = me.ticks = generateTicks(numericGeneratorOptions, me);
 
+
 
+		me.handleDirectionalChanges();
 
+
 
+		// At this point, we need to update our max and min given the tick values since we have expanded the
 
+		// range of the scale
 
+		me.max = helpers$1.max(ticks);
 
+		me.min = helpers$1.min(ticks);
 
+
 
+		if (tickOpts.reverse) {
 
+			ticks.reverse();
 
+
 
+			me.start = me.max;
 
+			me.end = me.min;
 
+		} else {
 
+			me.start = me.min;
 
+			me.end = me.max;
 
+		}
 
+	},
 
+
 
+	convertTicksToLabels: function() {
 
+		var me = this;
 
+		me.ticksAsNumbers = me.ticks.slice();
 
+		me.zeroLineIndex = me.ticks.indexOf(0);
 
+
 
+		core_scale.prototype.convertTicksToLabels.call(me);
 
+	}
 
+});
 
+
 
+var defaultConfig$1 = {
 
+	position: 'left',
 
+	ticks: {
 
+		callback: core_ticks.formatters.linear
 
+	}
 
+};
 
+
 
+var scale_linear = scale_linearbase.extend({
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var chart = me.chart;
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var isHorizontal = me.isHorizontal();
 
+		var DEFAULT_MIN = 0;
 
+		var DEFAULT_MAX = 1;
 
+
 
+		function IDMatches(meta) {
 
+			return isHorizontal ? meta.xAxisID === me.id : meta.yAxisID === me.id;
 
+		}
 
+
 
+		// First Calculate the range
 
+		me.min = null;
 
+		me.max = null;
 
+
 
+		var hasStacks = opts.stacked;
 
+		if (hasStacks === undefined) {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				if (hasStacks) {
 
+					return;
 
+				}
 
+
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta) &&
 
+					meta.stack !== undefined) {
 
+					hasStacks = true;
 
+				}
 
+			});
 
+		}
 
+
 
+		if (opts.stacked || hasStacks) {
 
+			var valuesPerStack = {};
 
+
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				var key = [
 
+					meta.type,
 
+					// we have a separate stack for stack=undefined datasets when the opts.stacked is undefined
 
+					((opts.stacked === undefined && meta.stack === undefined) ? datasetIndex : ''),
 
+					meta.stack
 
+				].join('.');
 
+
 
+				if (valuesPerStack[key] === undefined) {
 
+					valuesPerStack[key] = {
 
+						positiveValues: [],
 
+						negativeValues: []
 
+					};
 
+				}
 
+
 
+				// Store these per type
 
+				var positiveValues = valuesPerStack[key].positiveValues;
 
+				var negativeValues = valuesPerStack[key].negativeValues;
 
+
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var value = +me.getRightValue(rawValue);
 
+						if (isNaN(value) || meta.data[index].hidden) {
 
+							return;
 
+						}
 
+
 
+						positiveValues[index] = positiveValues[index] || 0;
 
+						negativeValues[index] = negativeValues[index] || 0;
 
+
 
+						if (opts.relativePoints) {
 
+							positiveValues[index] = 100;
 
+						} else if (value < 0) {
 
+							negativeValues[index] += value;
 
+						} else {
 
+							positiveValues[index] += value;
 
+						}
 
+					});
 
+				}
 
+			});
 
+
 
+			helpers$1.each(valuesPerStack, function(valuesForType) {
 
+				var values = valuesForType.positiveValues.concat(valuesForType.negativeValues);
 
+				var minVal = helpers$1.min(values);
 
+				var maxVal = helpers$1.max(values);
 
+				me.min = me.min === null ? minVal : Math.min(me.min, minVal);
 
+				me.max = me.max === null ? maxVal : Math.max(me.max, maxVal);
 
+			});
 
+
 
+		} else {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var value = +me.getRightValue(rawValue);
 
+						if (isNaN(value) || meta.data[index].hidden) {
 
+							return;
 
+						}
 
+
 
+						if (me.min === null) {
 
+							me.min = value;
 
+						} else if (value < me.min) {
 
+							me.min = value;
 
+						}
 
+
 
+						if (me.max === null) {
 
+							me.max = value;
 
+						} else if (value > me.max) {
 
+							me.max = value;
 
+						}
 
+					});
 
+				}
 
+			});
 
+		}
 
+
 
+		me.min = isFinite(me.min) && !isNaN(me.min) ? me.min : DEFAULT_MIN;
 
+		me.max = isFinite(me.max) && !isNaN(me.max) ? me.max : DEFAULT_MAX;
 
+
 
+		// Common base implementation to handle ticks.min, ticks.max, ticks.beginAtZero
 
+		this.handleTickRangeOptions();
 
+	},
 
+
 
+	// Returns the maximum number of ticks based on the scale dimension
 
+	_computeTickLimit: function() {
 
+		var me = this;
 
+		var tickFont;
 
+
 
+		if (me.isHorizontal()) {
 
+			return Math.ceil(me.width / 40);
 
+		}
 
+		tickFont = helpers$1.options._parseFont(me.options.ticks);
 
+		return Math.ceil(me.height / tickFont.lineHeight);
 
+	},
 
+
 
+	// Called after the ticks are built. We need
 
+	handleDirectionalChanges: function() {
 
+		if (!this.isHorizontal()) {
 
+			// We are in a vertical orientation. The top value is the highest. So reverse the array
 
+			this.ticks.reverse();
 
+		}
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 
+	},
 
+
 
+	// Utils
 
+	getPixelForValue: function(value) {
 
+		// This must be called after fit has been run so that
 
+		// this.left, this.top, this.right, and this.bottom have been defined
 
+		var me = this;
 
+		var start = me.start;
 
+
 
+		var rightValue = +me.getRightValue(value);
 
+		var pixel;
 
+		var range = me.end - start;
 
+
 
+		if (me.isHorizontal()) {
 
+			pixel = me.left + (me.width / range * (rightValue - start));
 
+		} else {
 
+			pixel = me.bottom - (me.height / range * (rightValue - start));
 
+		}
 
+		return pixel;
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var isHorizontal = me.isHorizontal();
 
+		var innerDimension = isHorizontal ? me.width : me.height;
 
+		var offset = (isHorizontal ? pixel - me.left : me.bottom - pixel) / innerDimension;
 
+		return me.start + ((me.end - me.start) * offset);
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		return this.getPixelForValue(this.ticksAsNumbers[index]);
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$1 = defaultConfig$1;
 
+scale_linear._defaults = _defaults$1;
 
+
 
+var valueOrDefault$a = helpers$1.valueOrDefault;
 
+
 
+/**
 
+ * Generate a set of logarithmic ticks
 
+ * @param generationOptions the options used to generate the ticks
 
+ * @param dataRange the range of the data
 
+ * @returns {number[]} array of tick values
 
+ */
 
+function generateTicks$1(generationOptions, dataRange) {
 
+	var ticks = [];
 
+
 
+	var tickVal = valueOrDefault$a(generationOptions.min, Math.pow(10, Math.floor(helpers$1.log10(dataRange.min))));
 
+
 
+	var endExp = Math.floor(helpers$1.log10(dataRange.max));
 
+	var endSignificand = Math.ceil(dataRange.max / Math.pow(10, endExp));
 
+	var exp, significand;
 
+
 
+	if (tickVal === 0) {
 
+		exp = Math.floor(helpers$1.log10(dataRange.minNotZero));
 
+		significand = Math.floor(dataRange.minNotZero / Math.pow(10, exp));
 
+
 
+		ticks.push(tickVal);
 
+		tickVal = significand * Math.pow(10, exp);
 
+	} else {
 
+		exp = Math.floor(helpers$1.log10(tickVal));
 
+		significand = Math.floor(tickVal / Math.pow(10, exp));
 
+	}
 
+	var precision = exp < 0 ? Math.pow(10, Math.abs(exp)) : 1;
 
+
 
+	do {
 
+		ticks.push(tickVal);
 
+
 
+		++significand;
 
+		if (significand === 10) {
 
+			significand = 1;
 
+			++exp;
 
+			precision = exp >= 0 ? 1 : precision;
 
+		}
 
+
 
+		tickVal = Math.round(significand * Math.pow(10, exp) * precision) / precision;
 
+	} while (exp < endExp || (exp === endExp && significand < endSignificand));
 
+
 
+	var lastTick = valueOrDefault$a(generationOptions.max, tickVal);
 
+	ticks.push(lastTick);
 
+
 
+	return ticks;
 
+}
 
+
 
+var defaultConfig$2 = {
 
+	position: 'left',
 
+
 
+	// label settings
 
+	ticks: {
 
+		callback: core_ticks.formatters.logarithmic
 
+	}
 
+};
 
+
 
+// TODO(v3): change this to positiveOrDefault
 
+function nonNegativeOrDefault(value, defaultValue) {
 
+	return helpers$1.isFinite(value) && value >= 0 ? value : defaultValue;
 
+}
 
+
 
+var scale_logarithmic = core_scale.extend({
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var chart = me.chart;
 
+		var data = chart.data;
 
+		var datasets = data.datasets;
 
+		var isHorizontal = me.isHorizontal();
 
+		function IDMatches(meta) {
 
+			return isHorizontal ? meta.xAxisID === me.id : meta.yAxisID === me.id;
 
+		}
 
+
 
+		// Calculate Range
 
+		me.min = null;
 
+		me.max = null;
 
+		me.minNotZero = null;
 
+
 
+		var hasStacks = opts.stacked;
 
+		if (hasStacks === undefined) {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				if (hasStacks) {
 
+					return;
 
+				}
 
+
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta) &&
 
+					meta.stack !== undefined) {
 
+					hasStacks = true;
 
+				}
 
+			});
 
+		}
 
+
 
+		if (opts.stacked || hasStacks) {
 
+			var valuesPerStack = {};
 
+
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				var key = [
 
+					meta.type,
 
+					// we have a separate stack for stack=undefined datasets when the opts.stacked is undefined
 
+					((opts.stacked === undefined && meta.stack === undefined) ? datasetIndex : ''),
 
+					meta.stack
 
+				].join('.');
 
+
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					if (valuesPerStack[key] === undefined) {
 
+						valuesPerStack[key] = [];
 
+					}
 
+
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var values = valuesPerStack[key];
 
+						var value = +me.getRightValue(rawValue);
 
+						// invalid, hidden and negative values are ignored
 
+						if (isNaN(value) || meta.data[index].hidden || value < 0) {
 
+							return;
 
+						}
 
+						values[index] = values[index] || 0;
 
+						values[index] += value;
 
+					});
 
+				}
 
+			});
 
+
 
+			helpers$1.each(valuesPerStack, function(valuesForType) {
 
+				if (valuesForType.length > 0) {
 
+					var minVal = helpers$1.min(valuesForType);
 
+					var maxVal = helpers$1.max(valuesForType);
 
+					me.min = me.min === null ? minVal : Math.min(me.min, minVal);
 
+					me.max = me.max === null ? maxVal : Math.max(me.max, maxVal);
 
+				}
 
+			});
 
+
 
+		} else {
 
+			helpers$1.each(datasets, function(dataset, datasetIndex) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+				if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 
+					helpers$1.each(dataset.data, function(rawValue, index) {
 
+						var value = +me.getRightValue(rawValue);
 
+						// invalid, hidden and negative values are ignored
 
+						if (isNaN(value) || meta.data[index].hidden || value < 0) {
 
+							return;
 
+						}
 
+
 
+						if (me.min === null) {
 
+							me.min = value;
 
+						} else if (value < me.min) {
 
+							me.min = value;
 
+						}
 
+
 
+						if (me.max === null) {
 
+							me.max = value;
 
+						} else if (value > me.max) {
 
+							me.max = value;
 
+						}
 
+
 
+						if (value !== 0 && (me.minNotZero === null || value < me.minNotZero)) {
 
+							me.minNotZero = value;
 
+						}
 
+					});
 
+				}
 
+			});
 
+		}
 
+
 
+		// Common base implementation to handle ticks.min, ticks.max
 
+		this.handleTickRangeOptions();
 
+	},
 
+
 
+	handleTickRangeOptions: function() {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var DEFAULT_MIN = 1;
 
+		var DEFAULT_MAX = 10;
 
+
 
+		me.min = nonNegativeOrDefault(tickOpts.min, me.min);
 
+		me.max = nonNegativeOrDefault(tickOpts.max, me.max);
 
+
 
+		if (me.min === me.max) {
 
+			if (me.min !== 0 && me.min !== null) {
 
+				me.min = Math.pow(10, Math.floor(helpers$1.log10(me.min)) - 1);
 
+				me.max = Math.pow(10, Math.floor(helpers$1.log10(me.max)) + 1);
 
+			} else {
 
+				me.min = DEFAULT_MIN;
 
+				me.max = DEFAULT_MAX;
 
+			}
 
+		}
 
+		if (me.min === null) {
 
+			me.min = Math.pow(10, Math.floor(helpers$1.log10(me.max)) - 1);
 
+		}
 
+		if (me.max === null) {
 
+			me.max = me.min !== 0
 
+				? Math.pow(10, Math.floor(helpers$1.log10(me.min)) + 1)
 
+				: DEFAULT_MAX;
 
+		}
 
+		if (me.minNotZero === null) {
 
+			if (me.min > 0) {
 
+				me.minNotZero = me.min;
 
+			} else if (me.max < 1) {
 
+				me.minNotZero = Math.pow(10, Math.floor(helpers$1.log10(me.max)));
 
+			} else {
 
+				me.minNotZero = DEFAULT_MIN;
 
+			}
 
+		}
 
+	},
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var reverse = !me.isHorizontal();
 
+
 
+		var generationOptions = {
 
+			min: nonNegativeOrDefault(tickOpts.min),
 
+			max: nonNegativeOrDefault(tickOpts.max)
 
+		};
 
+		var ticks = me.ticks = generateTicks$1(generationOptions, me);
 
+
 
+		// At this point, we need to update our max and min given the tick values since we have expanded the
 
+		// range of the scale
 
+		me.max = helpers$1.max(ticks);
 
+		me.min = helpers$1.min(ticks);
 
+
 
+		if (tickOpts.reverse) {
 
+			reverse = !reverse;
 
+			me.start = me.max;
 
+			me.end = me.min;
 
+		} else {
 
+			me.start = me.min;
 
+			me.end = me.max;
 
+		}
 
+		if (reverse) {
 
+			ticks.reverse();
 
+		}
 
+	},
 
+
 
+	convertTicksToLabels: function() {
 
+		this.tickValues = this.ticks.slice();
 
+
 
+		core_scale.prototype.convertTicksToLabels.call(this);
 
+	},
 
+
 
+	// Get the correct tooltip label
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		return this.getPixelForValue(this.tickValues[index]);
 
+	},
 
+
 
+	/**
 
+	 * Returns the value of the first tick.
 
+	 * @param {number} value - The minimum not zero value.
 
+	 * @return {number} The first tick value.
 
+	 * @private
 
+	 */
 
+	_getFirstTickValue: function(value) {
 
+		var exp = Math.floor(helpers$1.log10(value));
 
+		var significand = Math.floor(value / Math.pow(10, exp));
 
+
 
+		return significand * Math.pow(10, exp);
 
+	},
 
+
 
+	getPixelForValue: function(value) {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var reverse = tickOpts.reverse;
 
+		var log10 = helpers$1.log10;
 
+		var firstTickValue = me._getFirstTickValue(me.minNotZero);
 
+		var offset = 0;
 
+		var innerDimension, pixel, start, end, sign;
 
+
 
+		value = +me.getRightValue(value);
 
+		if (reverse) {
 
+			start = me.end;
 
+			end = me.start;
 
+			sign = -1;
 
+		} else {
 
+			start = me.start;
 
+			end = me.end;
 
+			sign = 1;
 
+		}
 
+		if (me.isHorizontal()) {
 
+			innerDimension = me.width;
 
+			pixel = reverse ? me.right : me.left;
 
+		} else {
 
+			innerDimension = me.height;
 
+			sign *= -1; // invert, since the upper-left corner of the canvas is at pixel (0, 0)
 
+			pixel = reverse ? me.top : me.bottom;
 
+		}
 
+		if (value !== start) {
 
+			if (start === 0) { // include zero tick
 
+				offset = valueOrDefault$a(tickOpts.fontSize, core_defaults.global.defaultFontSize);
 
+				innerDimension -= offset;
 
+				start = firstTickValue;
 
+			}
 
+			if (value !== 0) {
 
+				offset += innerDimension / (log10(end) - log10(start)) * (log10(value) - log10(start));
 
+			}
 
+			pixel += sign * offset;
 
+		}
 
+		return pixel;
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var tickOpts = me.options.ticks;
 
+		var reverse = tickOpts.reverse;
 
+		var log10 = helpers$1.log10;
 
+		var firstTickValue = me._getFirstTickValue(me.minNotZero);
 
+		var innerDimension, start, end, value;
 
+
 
+		if (reverse) {
 
+			start = me.end;
 
+			end = me.start;
 
+		} else {
 
+			start = me.start;
 
+			end = me.end;
 
+		}
 
+		if (me.isHorizontal()) {
 
+			innerDimension = me.width;
 
+			value = reverse ? me.right - pixel : pixel - me.left;
 
+		} else {
 
+			innerDimension = me.height;
 
+			value = reverse ? pixel - me.top : me.bottom - pixel;
 
+		}
 
+		if (value !== start) {
 
+			if (start === 0) { // include zero tick
 
+				var offset = valueOrDefault$a(tickOpts.fontSize, core_defaults.global.defaultFontSize);
 
+				value -= offset;
 
+				innerDimension -= offset;
 
+				start = firstTickValue;
 
+			}
 
+			value *= log10(end) - log10(start);
 
+			value /= innerDimension;
 
+			value = Math.pow(10, log10(start) + value);
 
+		}
 
+		return value;
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$2 = defaultConfig$2;
 
+scale_logarithmic._defaults = _defaults$2;
 
+
 
+var valueOrDefault$b = helpers$1.valueOrDefault;
 
+var valueAtIndexOrDefault$1 = helpers$1.valueAtIndexOrDefault;
 
+var resolve$7 = helpers$1.options.resolve;
 
+
 
+var defaultConfig$3 = {
 
+	display: true,
 
+
 
+	// Boolean - Whether to animate scaling the chart from the centre
 
+	animate: true,
 
+	position: 'chartArea',
 
+
 
+	angleLines: {
 
+		display: true,
 
+		color: 'rgba(0, 0, 0, 0.1)',
 
+		lineWidth: 1,
 
+		borderDash: [],
 
+		borderDashOffset: 0.0
 
+	},
 
+
 
+	gridLines: {
 
+		circular: false
 
+	},
 
+
 
+	// label settings
 
+	ticks: {
 
+		// Boolean - Show a backdrop to the scale label
 
+		showLabelBackdrop: true,
 
+
 
+		// String - The colour of the label backdrop
 
+		backdropColor: 'rgba(255,255,255,0.75)',
 
+
 
+		// Number - The backdrop padding above & below the label in pixels
 
+		backdropPaddingY: 2,
 
+
 
+		// Number - The backdrop padding to the side of the label in pixels
 
+		backdropPaddingX: 2,
 
+
 
+		callback: core_ticks.formatters.linear
 
+	},
 
+
 
+	pointLabels: {
 
+		// Boolean - if true, show point labels
 
+		display: true,
 
+
 
+		// Number - Point label font size in pixels
 
+		fontSize: 10,
 
+
 
+		// Function - Used to convert point labels
 
+		callback: function(label) {
 
+			return label;
 
+		}
 
+	}
 
+};
 
+
 
+function getValueCount(scale) {
 
+	var opts = scale.options;
 
+	return opts.angleLines.display || opts.pointLabels.display ? scale.chart.data.labels.length : 0;
 
+}
 
+
 
+function getTickBackdropHeight(opts) {
 
+	var tickOpts = opts.ticks;
 
+
 
+	if (tickOpts.display && opts.display) {
 
+		return valueOrDefault$b(tickOpts.fontSize, core_defaults.global.defaultFontSize) + tickOpts.backdropPaddingY * 2;
 
+	}
 
+	return 0;
 
+}
 
+
 
+function measureLabelSize(ctx, lineHeight, label) {
 
+	if (helpers$1.isArray(label)) {
 
+		return {
 
+			w: helpers$1.longestText(ctx, ctx.font, label),
 
+			h: label.length * lineHeight
 
+		};
 
+	}
 
+
 
+	return {
 
+		w: ctx.measureText(label).width,
 
+		h: lineHeight
 
+	};
 
+}
 
+
 
+function determineLimits(angle, pos, size, min, max) {
 
+	if (angle === min || angle === max) {
 
+		return {
 
+			start: pos - (size / 2),
 
+			end: pos + (size / 2)
 
+		};
 
+	} else if (angle < min || angle > max) {
 
+		return {
 
+			start: pos - size,
 
+			end: pos
 
+		};
 
+	}
 
+
 
+	return {
 
+		start: pos,
 
+		end: pos + size
 
+	};
 
+}
 
+
 
+/**
 
+ * Helper function to fit a radial linear scale with point labels
 
+ */
 
+function fitWithPointLabels(scale) {
 
+
 
+	// Right, this is really confusing and there is a lot of maths going on here
 
+	// The gist of the problem is here: https://gist.github.com/nnnick/696cc9c55f4b0beb8fe9
 
+	//
 
+	// Reaction: https://dl.dropboxusercontent.com/u/34601363/toomuchscience.gif
 
+	//
 
+	// Solution:
 
+	//
 
+	// We assume the radius of the polygon is half the size of the canvas at first
 
+	// at each index we check if the text overlaps.
 
+	//
 
+	// Where it does, we store that angle and that index.
 
+	//
 
+	// After finding the largest index and angle we calculate how much we need to remove
 
+	// from the shape radius to move the point inwards by that x.
 
+	//
 
+	// We average the left and right distances to get the maximum shape radius that can fit in the box
 
+	// along with labels.
 
+	//
 
+	// Once we have that, we can find the centre point for the chart, by taking the x text protrusion
 
+	// on each side, removing that from the size, halving it and adding the left x protrusion width.
 
+	//
 
+	// This will mean we have a shape fitted to the canvas, as large as it can be with the labels
 
+	// and position it in the most space efficient manner
 
+	//
 
+	// https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
 
+
 
+	var plFont = helpers$1.options._parseFont(scale.options.pointLabels);
 
+
 
+	// Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
 
+	// Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
 
+	var furthestLimits = {
 
+		l: 0,
 
+		r: scale.width,
 
+		t: 0,
 
+		b: scale.height - scale.paddingTop
 
+	};
 
+	var furthestAngles = {};
 
+	var i, textSize, pointPosition;
 
+
 
+	scale.ctx.font = plFont.string;
 
+	scale._pointLabelSizes = [];
 
+
 
+	var valueCount = getValueCount(scale);
 
+	for (i = 0; i < valueCount; i++) {
 
+		pointPosition = scale.getPointPosition(i, scale.drawingArea + 5);
 
+		textSize = measureLabelSize(scale.ctx, plFont.lineHeight, scale.pointLabels[i] || '');
 
+		scale._pointLabelSizes[i] = textSize;
 
+
 
+		// Add quarter circle to make degree 0 mean top of circle
 
+		var angleRadians = scale.getIndexAngle(i);
 
+		var angle = helpers$1.toDegrees(angleRadians) % 360;
 
+		var hLimits = determineLimits(angle, pointPosition.x, textSize.w, 0, 180);
 
+		var vLimits = determineLimits(angle, pointPosition.y, textSize.h, 90, 270);
 
+
 
+		if (hLimits.start < furthestLimits.l) {
 
+			furthestLimits.l = hLimits.start;
 
+			furthestAngles.l = angleRadians;
 
+		}
 
+
 
+		if (hLimits.end > furthestLimits.r) {
 
+			furthestLimits.r = hLimits.end;
 
+			furthestAngles.r = angleRadians;
 
+		}
 
+
 
+		if (vLimits.start < furthestLimits.t) {
 
+			furthestLimits.t = vLimits.start;
 
+			furthestAngles.t = angleRadians;
 
+		}
 
+
 
+		if (vLimits.end > furthestLimits.b) {
 
+			furthestLimits.b = vLimits.end;
 
+			furthestAngles.b = angleRadians;
 
+		}
 
+	}
 
+
 
+	scale.setReductions(scale.drawingArea, furthestLimits, furthestAngles);
 
+}
 
+
 
+function getTextAlignForAngle(angle) {
 
+	if (angle === 0 || angle === 180) {
 
+		return 'center';
 
+	} else if (angle < 180) {
 
+		return 'left';
 
+	}
 
+
 
+	return 'right';
 
+}
 
+
 
+function fillText(ctx, text, position, lineHeight) {
 
+	var y = position.y + lineHeight / 2;
 
+	var i, ilen;
 
+
 
+	if (helpers$1.isArray(text)) {
 
+		for (i = 0, ilen = text.length; i < ilen; ++i) {
 
+			ctx.fillText(text[i], position.x, y);
 
+			y += lineHeight;
 
+		}
 
+	} else {
 
+		ctx.fillText(text, position.x, y);
 
+	}
 
+}
 
+
 
+function adjustPointPositionForLabelHeight(angle, textSize, position) {
 
+	if (angle === 90 || angle === 270) {
 
+		position.y -= (textSize.h / 2);
 
+	} else if (angle > 270 || angle < 90) {
 
+		position.y -= textSize.h;
 
+	}
 
+}
 
+
 
+function drawPointLabels(scale) {
 
+	var ctx = scale.ctx;
 
+	var opts = scale.options;
 
+	var angleLineOpts = opts.angleLines;
 
+	var gridLineOpts = opts.gridLines;
 
+	var pointLabelOpts = opts.pointLabels;
 
+	var lineWidth = valueOrDefault$b(angleLineOpts.lineWidth, gridLineOpts.lineWidth);
 
+	var lineColor = valueOrDefault$b(angleLineOpts.color, gridLineOpts.color);
 
+	var tickBackdropHeight = getTickBackdropHeight(opts);
 
+
 
+	ctx.save();
 
+	ctx.lineWidth = lineWidth;
 
+	ctx.strokeStyle = lineColor;
 
+	if (ctx.setLineDash) {
 
+		ctx.setLineDash(resolve$7([angleLineOpts.borderDash, gridLineOpts.borderDash, []]));
 
+		ctx.lineDashOffset = resolve$7([angleLineOpts.borderDashOffset, gridLineOpts.borderDashOffset, 0.0]);
 
+	}
 
+
 
+	var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
 
+
 
+	// Point Label Font
 
+	var plFont = helpers$1.options._parseFont(pointLabelOpts);
 
+
 
+	ctx.font = plFont.string;
 
+	ctx.textBaseline = 'middle';
 
+
 
+	for (var i = getValueCount(scale) - 1; i >= 0; i--) {
 
+		if (angleLineOpts.display && lineWidth && lineColor) {
 
+			var outerPosition = scale.getPointPosition(i, outerDistance);
 
+			ctx.beginPath();
 
+			ctx.moveTo(scale.xCenter, scale.yCenter);
 
+			ctx.lineTo(outerPosition.x, outerPosition.y);
 
+			ctx.stroke();
 
+		}
 
+
 
+		if (pointLabelOpts.display) {
 
+			// Extra pixels out for some label spacing
 
+			var extra = (i === 0 ? tickBackdropHeight / 2 : 0);
 
+			var pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
 
+
 
+			// Keep this in loop since we may support array properties here
 
+			var pointLabelFontColor = valueAtIndexOrDefault$1(pointLabelOpts.fontColor, i, core_defaults.global.defaultFontColor);
 
+			ctx.fillStyle = pointLabelFontColor;
 
+
 
+			var angleRadians = scale.getIndexAngle(i);
 
+			var angle = helpers$1.toDegrees(angleRadians);
 
+			ctx.textAlign = getTextAlignForAngle(angle);
 
+			adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition);
 
+			fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.lineHeight);
 
+		}
 
+	}
 
+	ctx.restore();
 
+}
 
+
 
+function drawRadiusLine(scale, gridLineOpts, radius, index) {
 
+	var ctx = scale.ctx;
 
+	var circular = gridLineOpts.circular;
 
+	var valueCount = getValueCount(scale);
 
+	var lineColor = valueAtIndexOrDefault$1(gridLineOpts.color, index - 1);
 
+	var lineWidth = valueAtIndexOrDefault$1(gridLineOpts.lineWidth, index - 1);
 
+	var pointPosition;
 
+
 
+	if ((!circular && !valueCount) || !lineColor || !lineWidth) {
 
+		return;
 
+	}
 
+
 
+	ctx.save();
 
+	ctx.strokeStyle = lineColor;
 
+	ctx.lineWidth = lineWidth;
 
+	if (ctx.setLineDash) {
 
+		ctx.setLineDash(gridLineOpts.borderDash || []);
 
+		ctx.lineDashOffset = gridLineOpts.borderDashOffset || 0.0;
 
+	}
 
+
 
+	ctx.beginPath();
 
+	if (circular) {
 
+		// Draw circular arcs between the points
 
+		ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2);
 
+	} else {
 
+		// Draw straight lines connecting each index
 
+		pointPosition = scale.getPointPosition(0, radius);
 
+		ctx.moveTo(pointPosition.x, pointPosition.y);
 
+
 
+		for (var i = 1; i < valueCount; i++) {
 
+			pointPosition = scale.getPointPosition(i, radius);
 
+			ctx.lineTo(pointPosition.x, pointPosition.y);
 
+		}
 
+	}
 
+	ctx.closePath();
 
+	ctx.stroke();
 
+	ctx.restore();
 
+}
 
+
 
+function numberOrZero(param) {
 
+	return helpers$1.isNumber(param) ? param : 0;
 
+}
 
+
 
+var scale_radialLinear = scale_linearbase.extend({
 
+	setDimensions: function() {
 
+		var me = this;
 
+
 
+		// Set the unconstrained dimension before label rotation
 
+		me.width = me.maxWidth;
 
+		me.height = me.maxHeight;
 
+		me.paddingTop = getTickBackdropHeight(me.options) / 2;
 
+		me.xCenter = Math.floor(me.width / 2);
 
+		me.yCenter = Math.floor((me.height - me.paddingTop) / 2);
 
+		me.drawingArea = Math.min(me.height - me.paddingTop, me.width) / 2;
 
+	},
 
+
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var min = Number.POSITIVE_INFINITY;
 
+		var max = Number.NEGATIVE_INFINITY;
 
+
 
+		helpers$1.each(chart.data.datasets, function(dataset, datasetIndex) {
 
+			if (chart.isDatasetVisible(datasetIndex)) {
 
+				var meta = chart.getDatasetMeta(datasetIndex);
 
+
 
+				helpers$1.each(dataset.data, function(rawValue, index) {
 
+					var value = +me.getRightValue(rawValue);
 
+					if (isNaN(value) || meta.data[index].hidden) {
 
+						return;
 
+					}
 
+
 
+					min = Math.min(value, min);
 
+					max = Math.max(value, max);
 
+				});
 
+			}
 
+		});
 
+
 
+		me.min = (min === Number.POSITIVE_INFINITY ? 0 : min);
 
+		me.max = (max === Number.NEGATIVE_INFINITY ? 0 : max);
 
+
 
+		// Common base implementation to handle ticks.min, ticks.max, ticks.beginAtZero
 
+		me.handleTickRangeOptions();
 
+	},
 
+
 
+	// Returns the maximum number of ticks based on the scale dimension
 
+	_computeTickLimit: function() {
 
+		return Math.ceil(this.drawingArea / getTickBackdropHeight(this.options));
 
+	},
 
+
 
+	convertTicksToLabels: function() {
 
+		var me = this;
 
+
 
+		scale_linearbase.prototype.convertTicksToLabels.call(me);
 
+
 
+		// Point labels
 
+		me.pointLabels = me.chart.data.labels.map(me.options.pointLabels.callback, me);
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 
+	},
 
+
 
+	fit: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+
 
+		if (opts.display && opts.pointLabels.display) {
 
+			fitWithPointLabels(me);
 
+		} else {
 
+			me.setCenterPoint(0, 0, 0, 0);
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * Set radius reductions and determine new radius and center point
 
+	 * @private
 
+	 */
 
+	setReductions: function(largestPossibleRadius, furthestLimits, furthestAngles) {
 
+		var me = this;
 
+		var radiusReductionLeft = furthestLimits.l / Math.sin(furthestAngles.l);
 
+		var radiusReductionRight = Math.max(furthestLimits.r - me.width, 0) / Math.sin(furthestAngles.r);
 
+		var radiusReductionTop = -furthestLimits.t / Math.cos(furthestAngles.t);
 
+		var radiusReductionBottom = -Math.max(furthestLimits.b - (me.height - me.paddingTop), 0) / Math.cos(furthestAngles.b);
 
+
 
+		radiusReductionLeft = numberOrZero(radiusReductionLeft);
 
+		radiusReductionRight = numberOrZero(radiusReductionRight);
 
+		radiusReductionTop = numberOrZero(radiusReductionTop);
 
+		radiusReductionBottom = numberOrZero(radiusReductionBottom);
 
+
 
+		me.drawingArea = Math.min(
 
+			Math.floor(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2),
 
+			Math.floor(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2));
 
+		me.setCenterPoint(radiusReductionLeft, radiusReductionRight, radiusReductionTop, radiusReductionBottom);
 
+	},
 
+
 
+	setCenterPoint: function(leftMovement, rightMovement, topMovement, bottomMovement) {
 
+		var me = this;
 
+		var maxRight = me.width - rightMovement - me.drawingArea;
 
+		var maxLeft = leftMovement + me.drawingArea;
 
+		var maxTop = topMovement + me.drawingArea;
 
+		var maxBottom = (me.height - me.paddingTop) - bottomMovement - me.drawingArea;
 
+
 
+		me.xCenter = Math.floor(((maxLeft + maxRight) / 2) + me.left);
 
+		me.yCenter = Math.floor(((maxTop + maxBottom) / 2) + me.top + me.paddingTop);
 
+	},
 
+
 
+	getIndexAngle: function(index) {
 
+		var angleMultiplier = (Math.PI * 2) / getValueCount(this);
 
+		var startAngle = this.chart.options && this.chart.options.startAngle ?
 
+			this.chart.options.startAngle :
 
+			0;
 
+
 
+		var startAngleRadians = startAngle * Math.PI * 2 / 360;
 
+
 
+		// Start from the top instead of right, so remove a quarter of the circle
 
+		return index * angleMultiplier + startAngleRadians;
 
+	},
 
+
 
+	getDistanceFromCenterForValue: function(value) {
 
+		var me = this;
 
+
 
+		if (value === null) {
 
+			return 0; // null always in center
 
+		}
 
+
 
+		// Take into account half font size + the yPadding of the top value
 
+		var scalingFactor = me.drawingArea / (me.max - me.min);
 
+		if (me.options.ticks.reverse) {
 
+			return (me.max - value) * scalingFactor;
 
+		}
 
+		return (value - me.min) * scalingFactor;
 
+	},
 
+
 
+	getPointPosition: function(index, distanceFromCenter) {
 
+		var me = this;
 
+		var thisAngle = me.getIndexAngle(index) - (Math.PI / 2);
 
+		return {
 
+			x: Math.cos(thisAngle) * distanceFromCenter + me.xCenter,
 
+			y: Math.sin(thisAngle) * distanceFromCenter + me.yCenter
 
+		};
 
+	},
 
+
 
+	getPointPositionForValue: function(index, value) {
 
+		return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
 
+	},
 
+
 
+	getBasePosition: function() {
 
+		var me = this;
 
+		var min = me.min;
 
+		var max = me.max;
 
+
 
+		return me.getPointPositionForValue(0,
 
+			me.beginAtZero ? 0 :
 
+			min < 0 && max < 0 ? max :
 
+			min > 0 && max > 0 ? min :
 
+			0);
 
+	},
 
+
 
+	draw: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var gridLineOpts = opts.gridLines;
 
+		var tickOpts = opts.ticks;
 
+
 
+		if (opts.display) {
 
+			var ctx = me.ctx;
 
+			var startAngle = this.getIndexAngle(0);
 
+			var tickFont = helpers$1.options._parseFont(tickOpts);
 
+
 
+			if (opts.angleLines.display || opts.pointLabels.display) {
 
+				drawPointLabels(me);
 
+			}
 
+
 
+			helpers$1.each(me.ticks, function(label, index) {
 
+				// Don't draw a centre value (if it is minimum)
 
+				if (index > 0 || tickOpts.reverse) {
 
+					var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
 
+
 
+					// Draw circular lines around the scale
 
+					if (gridLineOpts.display && index !== 0) {
 
+						drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
 
+					}
 
+
 
+					if (tickOpts.display) {
 
+						var tickFontColor = valueOrDefault$b(tickOpts.fontColor, core_defaults.global.defaultFontColor);
 
+						ctx.font = tickFont.string;
 
+
 
+						ctx.save();
 
+						ctx.translate(me.xCenter, me.yCenter);
 
+						ctx.rotate(startAngle);
 
+
 
+						if (tickOpts.showLabelBackdrop) {
 
+							var labelWidth = ctx.measureText(label).width;
 
+							ctx.fillStyle = tickOpts.backdropColor;
 
+							ctx.fillRect(
 
+								-labelWidth / 2 - tickOpts.backdropPaddingX,
 
+								-yCenterOffset - tickFont.size / 2 - tickOpts.backdropPaddingY,
 
+								labelWidth + tickOpts.backdropPaddingX * 2,
 
+								tickFont.size + tickOpts.backdropPaddingY * 2
 
+							);
 
+						}
 
+
 
+						ctx.textAlign = 'center';
 
+						ctx.textBaseline = 'middle';
 
+						ctx.fillStyle = tickFontColor;
 
+						ctx.fillText(label, 0, -yCenterOffset);
 
+						ctx.restore();
 
+					}
 
+				}
 
+			});
 
+		}
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$3 = defaultConfig$3;
 
+scale_radialLinear._defaults = _defaults$3;
 
+
 
+var valueOrDefault$c = helpers$1.valueOrDefault;
 
+
 
+// Integer constants are from the ES6 spec.
 
+var MIN_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991;
 
+var MAX_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;
 
+
 
+var INTERVALS = {
 
+	millisecond: {
 
+		common: true,
 
+		size: 1,
 
+		steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
 
+	},
 
+	second: {
 
+		common: true,
 
+		size: 1000,
 
+		steps: [1, 2, 5, 10, 15, 30]
 
+	},
 
+	minute: {
 
+		common: true,
 
+		size: 60000,
 
+		steps: [1, 2, 5, 10, 15, 30]
 
+	},
 
+	hour: {
 
+		common: true,
 
+		size: 3600000,
 
+		steps: [1, 2, 3, 6, 12]
 
+	},
 
+	day: {
 
+		common: true,
 
+		size: 86400000,
 
+		steps: [1, 2, 5]
 
+	},
 
+	week: {
 
+		common: false,
 
+		size: 604800000,
 
+		steps: [1, 2, 3, 4]
 
+	},
 
+	month: {
 
+		common: true,
 
+		size: 2.628e9,
 
+		steps: [1, 2, 3]
 
+	},
 
+	quarter: {
 
+		common: false,
 
+		size: 7.884e9,
 
+		steps: [1, 2, 3, 4]
 
+	},
 
+	year: {
 
+		common: true,
 
+		size: 3.154e10
 
+	}
 
+};
 
+
 
+var UNITS = Object.keys(INTERVALS);
 
+
 
+function sorter(a, b) {
 
+	return a - b;
 
+}
 
+
 
+function arrayUnique(items) {
 
+	var hash = {};
 
+	var out = [];
 
+	var i, ilen, item;
 
+
 
+	for (i = 0, ilen = items.length; i < ilen; ++i) {
 
+		item = items[i];
 
+		if (!hash[item]) {
 
+			hash[item] = true;
 
+			out.push(item);
 
+		}
 
+	}
 
+
 
+	return out;
 
+}
 
+
 
+/**
 
+ * Returns an array of {time, pos} objects used to interpolate a specific `time` or position
 
+ * (`pos`) on the scale, by searching entries before and after the requested value. `pos` is
 
+ * a decimal between 0 and 1: 0 being the start of the scale (left or top) and 1 the other
 
+ * extremity (left + width or top + height). Note that it would be more optimized to directly
 
+ * store pre-computed pixels, but the scale dimensions are not guaranteed at the time we need
 
+ * to create the lookup table. The table ALWAYS contains at least two items: min and max.
 
+ *
 
+ * @param {number[]} timestamps - timestamps sorted from lowest to highest.
 
+ * @param {string} distribution - If 'linear', timestamps will be spread linearly along the min
 
+ * and max range, so basically, the table will contains only two items: {min, 0} and {max, 1}.
 
+ * If 'series', timestamps will be positioned at the same distance from each other. In this
 
+ * case, only timestamps that break the time linearity are registered, meaning that in the
 
+ * best case, all timestamps are linear, the table contains only min and max.
 
+ */
 
+function buildLookupTable(timestamps, min, max, distribution) {
 
+	if (distribution === 'linear' || !timestamps.length) {
 
+		return [
 
+			{time: min, pos: 0},
 
+			{time: max, pos: 1}
 
+		];
 
+	}
 
+
 
+	var table = [];
 
+	var items = [min];
 
+	var i, ilen, prev, curr, next;
 
+
 
+	for (i = 0, ilen = timestamps.length; i < ilen; ++i) {
 
+		curr = timestamps[i];
 
+		if (curr > min && curr < max) {
 
+			items.push(curr);
 
+		}
 
+	}
 
+
 
+	items.push(max);
 
+
 
+	for (i = 0, ilen = items.length; i < ilen; ++i) {
 
+		next = items[i + 1];
 
+		prev = items[i - 1];
 
+		curr = items[i];
 
+
 
+		// only add points that breaks the scale linearity
 
+		if (prev === undefined || next === undefined || Math.round((next + prev) / 2) !== curr) {
 
+			table.push({time: curr, pos: i / (ilen - 1)});
 
+		}
 
+	}
 
+
 
+	return table;
 
+}
 
+
 
+// @see adapted from https://www.anujgakhar.com/2014/03/01/binary-search-in-javascript/
 
+function lookup(table, key, value) {
 
+	var lo = 0;
 
+	var hi = table.length - 1;
 
+	var mid, i0, i1;
 
+
 
+	while (lo >= 0 && lo <= hi) {
 
+		mid = (lo + hi) >> 1;
 
+		i0 = table[mid - 1] || null;
 
+		i1 = table[mid];
 
+
 
+		if (!i0) {
 
+			// given value is outside table (before first item)
 
+			return {lo: null, hi: i1};
 
+		} else if (i1[key] < value) {
 
+			lo = mid + 1;
 
+		} else if (i0[key] > value) {
 
+			hi = mid - 1;
 
+		} else {
 
+			return {lo: i0, hi: i1};
 
+		}
 
+	}
 
+
 
+	// given value is outside table (after last item)
 
+	return {lo: i1, hi: null};
 
+}
 
+
 
+/**
 
+ * Linearly interpolates the given source `value` using the table items `skey` values and
 
+ * returns the associated `tkey` value. For example, interpolate(table, 'time', 42, 'pos')
 
+ * returns the position for a timestamp equal to 42. If value is out of bounds, values at
 
+ * index [0, 1] or [n - 1, n] are used for the interpolation.
 
+ */
 
+function interpolate$1(table, skey, sval, tkey) {
 
+	var range = lookup(table, skey, sval);
 
+
 
+	// Note: the lookup table ALWAYS contains at least 2 items (min and max)
 
+	var prev = !range.lo ? table[0] : !range.hi ? table[table.length - 2] : range.lo;
 
+	var next = !range.lo ? table[1] : !range.hi ? table[table.length - 1] : range.hi;
 
+
 
+	var span = next[skey] - prev[skey];
 
+	var ratio = span ? (sval - prev[skey]) / span : 0;
 
+	var offset = (next[tkey] - prev[tkey]) * ratio;
 
+
 
+	return prev[tkey] + offset;
 
+}
 
+
 
+function toTimestamp(scale, input) {
 
+	var adapter = scale._adapter;
 
+	var options = scale.options.time;
 
+	var parser = options.parser;
 
+	var format = parser || options.format;
 
+	var value = input;
 
+
 
+	if (typeof parser === 'function') {
 
+		value = parser(value);
 
+	}
 
+
 
+	// Only parse if its not a timestamp already
 
+	if (!helpers$1.isFinite(value)) {
 
+		value = typeof format === 'string'
 
+			? adapter.parse(value, format)
 
+			: adapter.parse(value);
 
+	}
 
+
 
+	if (value !== null) {
 
+		return +value;
 
+	}
 
+
 
+	// Labels are in an incompatible format and no `parser` has been provided.
 
+	// The user might still use the deprecated `format` option for parsing.
 
+	if (!parser && typeof format === 'function') {
 
+		value = format(input);
 
+
 
+		// `format` could return something else than a timestamp, if so, parse it
 
+		if (!helpers$1.isFinite(value)) {
 
+			value = adapter.parse(value);
 
+		}
 
+	}
 
+
 
+	return value;
 
+}
 
+
 
+function parse(scale, input) {
 
+	if (helpers$1.isNullOrUndef(input)) {
 
+		return null;
 
+	}
 
+
 
+	var options = scale.options.time;
 
+	var value = toTimestamp(scale, scale.getRightValue(input));
 
+	if (value === null) {
 
+		return value;
 
+	}
 
+
 
+	if (options.round) {
 
+		value = +scale._adapter.startOf(value, options.round);
 
+	}
 
+
 
+	return value;
 
+}
 
+
 
+/**
 
+ * Returns the number of unit to skip to be able to display up to `capacity` number of ticks
 
+ * in `unit` for the given `min` / `max` range and respecting the interval steps constraints.
 
+ */
 
+function determineStepSize(min, max, unit, capacity) {
 
+	var range = max - min;
 
+	var interval = INTERVALS[unit];
 
+	var milliseconds = interval.size;
 
+	var steps = interval.steps;
 
+	var i, ilen, factor;
 
+
 
+	if (!steps) {
 
+		return Math.ceil(range / (capacity * milliseconds));
 
+	}
 
+
 
+	for (i = 0, ilen = steps.length; i < ilen; ++i) {
 
+		factor = steps[i];
 
+		if (Math.ceil(range / (milliseconds * factor)) <= capacity) {
 
+			break;
 
+		}
 
+	}
 
+
 
+	return factor;
 
+}
 
+
 
+/**
 
+ * Figures out what unit results in an appropriate number of auto-generated ticks
 
+ */
 
+function determineUnitForAutoTicks(minUnit, min, max, capacity) {
 
+	var ilen = UNITS.length;
 
+	var i, interval, factor;
 
+
 
+	for (i = UNITS.indexOf(minUnit); i < ilen - 1; ++i) {
 
+		interval = INTERVALS[UNITS[i]];
 
+		factor = interval.steps ? interval.steps[interval.steps.length - 1] : MAX_INTEGER;
 
+
 
+		if (interval.common && Math.ceil((max - min) / (factor * interval.size)) <= capacity) {
 
+			return UNITS[i];
 
+		}
 
+	}
 
+
 
+	return UNITS[ilen - 1];
 
+}
 
+
 
+/**
 
+ * Figures out what unit to format a set of ticks with
 
+ */
 
+function determineUnitForFormatting(scale, ticks, minUnit, min, max) {
 
+	var ilen = UNITS.length;
 
+	var i, unit;
 
+
 
+	for (i = ilen - 1; i >= UNITS.indexOf(minUnit); i--) {
 
+		unit = UNITS[i];
 
+		if (INTERVALS[unit].common && scale._adapter.diff(max, min, unit) >= ticks.length) {
 
+			return unit;
 
+		}
 
+	}
 
+
 
+	return UNITS[minUnit ? UNITS.indexOf(minUnit) : 0];
 
+}
 
+
 
+function determineMajorUnit(unit) {
 
+	for (var i = UNITS.indexOf(unit) + 1, ilen = UNITS.length; i < ilen; ++i) {
 
+		if (INTERVALS[UNITS[i]].common) {
 
+			return UNITS[i];
 
+		}
 
+	}
 
+}
 
+
 
+/**
 
+ * Generates a maximum of `capacity` timestamps between min and max, rounded to the
 
+ * `minor` unit, aligned on the `major` unit and using the given scale time `options`.
 
+ * Important: this method can return ticks outside the min and max range, it's the
 
+ * responsibility of the calling code to clamp values if needed.
 
+ */
 
+function generate(scale, min, max, capacity) {
 
+	var adapter = scale._adapter;
 
+	var options = scale.options;
 
+	var timeOpts = options.time;
 
+	var minor = timeOpts.unit || determineUnitForAutoTicks(timeOpts.minUnit, min, max, capacity);
 
+	var major = determineMajorUnit(minor);
 
+	var stepSize = valueOrDefault$c(timeOpts.stepSize, timeOpts.unitStepSize);
 
+	var weekday = minor === 'week' ? timeOpts.isoWeekday : false;
 
+	var majorTicksEnabled = options.ticks.major.enabled;
 
+	var interval = INTERVALS[minor];
 
+	var first = min;
 
+	var last = max;
 
+	var ticks = [];
 
+	var time;
 
+
 
+	if (!stepSize) {
 
+		stepSize = determineStepSize(min, max, minor, capacity);
 
+	}
 
+
 
+	// For 'week' unit, handle the first day of week option
 
+	if (weekday) {
 
+		first = +adapter.startOf(first, 'isoWeek', weekday);
 
+		last = +adapter.startOf(last, 'isoWeek', weekday);
 
+	}
 
+
 
+	// Align first/last ticks on unit
 
+	first = +adapter.startOf(first, weekday ? 'day' : minor);
 
+	last = +adapter.startOf(last, weekday ? 'day' : minor);
 
+
 
+	// Make sure that the last tick include max
 
+	if (last < max) {
 
+		last = +adapter.add(last, 1, minor);
 
+	}
 
+
 
+	time = first;
 
+
 
+	if (majorTicksEnabled && major && !weekday && !timeOpts.round) {
 
+		// Align the first tick on the previous `minor` unit aligned on the `major` unit:
 
+		// we first aligned time on the previous `major` unit then add the number of full
 
+		// stepSize there is between first and the previous major time.
 
+		time = +adapter.startOf(time, major);
 
+		time = +adapter.add(time, ~~((first - time) / (interval.size * stepSize)) * stepSize, minor);
 
+	}
 
+
 
+	for (; time < last; time = +adapter.add(time, stepSize, minor)) {
 
+		ticks.push(+time);
 
+	}
 
+
 
+	ticks.push(+time);
 
+
 
+	return ticks;
 
+}
 
+
 
+/**
 
+ * Returns the start and end offsets from edges in the form of {start, end}
 
+ * where each value is a relative width to the scale and ranges between 0 and 1.
 
+ * They add extra margins on the both sides by scaling down the original scale.
 
+ * Offsets are added when the `offset` option is true.
 
+ */
 
+function computeOffsets(table, ticks, min, max, options) {
 
+	var start = 0;
 
+	var end = 0;
 
+	var first, last;
 
+
 
+	if (options.offset && ticks.length) {
 
+		if (!options.time.min) {
 
+			first = interpolate$1(table, 'time', ticks[0], 'pos');
 
+			if (ticks.length === 1) {
 
+				start = 1 - first;
 
+			} else {
 
+				start = (interpolate$1(table, 'time', ticks[1], 'pos') - first) / 2;
 
+			}
 
+		}
 
+		if (!options.time.max) {
 
+			last = interpolate$1(table, 'time', ticks[ticks.length - 1], 'pos');
 
+			if (ticks.length === 1) {
 
+				end = last;
 
+			} else {
 
+				end = (last - interpolate$1(table, 'time', ticks[ticks.length - 2], 'pos')) / 2;
 
+			}
 
+		}
 
+	}
 
+
 
+	return {start: start, end: end};
 
+}
 
+
 
+function ticksFromTimestamps(scale, values, majorUnit) {
 
+	var ticks = [];
 
+	var i, ilen, value, major;
 
+
 
+	for (i = 0, ilen = values.length; i < ilen; ++i) {
 
+		value = values[i];
 
+		major = majorUnit ? value === +scale._adapter.startOf(value, majorUnit) : false;
 
+
 
+		ticks.push({
 
+			value: value,
 
+			major: major
 
+		});
 
+	}
 
+
 
+	return ticks;
 
+}
 
+
 
+var defaultConfig$4 = {
 
+	position: 'bottom',
 
+
 
+	/**
 
+	 * Data distribution along the scale:
 
+	 * - 'linear': data are spread according to their time (distances can vary),
 
+	 * - 'series': data are spread at the same distance from each other.
 
+	 * @see https://github.com/chartjs/Chart.js/pull/4507
 
+	 * @since 2.7.0
 
+	 */
 
+	distribution: 'linear',
 
+
 
+	/**
 
+	 * Scale boundary strategy (bypassed by min/max time options)
 
+	 * - `data`: make sure data are fully visible, ticks outside are removed
 
+	 * - `ticks`: make sure ticks are fully visible, data outside are truncated
 
+	 * @see https://github.com/chartjs/Chart.js/pull/4556
 
+	 * @since 2.7.0
 
+	 */
 
+	bounds: 'data',
 
+
 
+	adapters: {},
 
+	time: {
 
+		parser: false, // false == a pattern string from https://momentjs.com/docs/#/parsing/string-format/ or a custom callback that converts its argument to a moment
 
+		format: false, // DEPRECATED false == date objects, moment object, callback or a pattern string from https://momentjs.com/docs/#/parsing/string-format/
 
+		unit: false, // false == automatic or override with week, month, year, etc.
 
+		round: false, // none, or override with week, month, year, etc.
 
+		displayFormat: false, // DEPRECATED
 
+		isoWeekday: false, // override week start day - see https://momentjs.com/docs/#/get-set/iso-weekday/
 
+		minUnit: 'millisecond',
 
+		displayFormats: {}
 
+	},
 
+	ticks: {
 
+		autoSkip: false,
 
+
 
+		/**
 
+		 * Ticks generation input values:
 
+		 * - 'auto': generates "optimal" ticks based on scale size and time options.
 
+		 * - 'data': generates ticks from data (including labels from data {t|x|y} objects).
 
+		 * - 'labels': generates ticks from user given `data.labels` values ONLY.
 
+		 * @see https://github.com/chartjs/Chart.js/pull/4507
 
+		 * @since 2.7.0
 
+		 */
 
+		source: 'auto',
 
+
 
+		major: {
 
+			enabled: false
 
+		}
 
+	}
 
+};
 
+
 
+var scale_time = core_scale.extend({
 
+	initialize: function() {
 
+		this.mergeTicksOptions();
 
+		core_scale.prototype.initialize.call(this);
 
+	},
 
+
 
+	update: function() {
 
+		var me = this;
 
+		var options = me.options;
 
+		var time = options.time || (options.time = {});
 
+		var adapter = me._adapter = new core_adapters._date(options.adapters.date);
 
+
 
+		// DEPRECATIONS: output a message only one time per update
 
+		if (time.format) {
 
+			console.warn('options.time.format is deprecated and replaced by options.time.parser.');
 
+		}
 
+
 
+		// Backward compatibility: before introducing adapter, `displayFormats` was
 
+		// supposed to contain *all* unit/string pairs but this can't be resolved
 
+		// when loading the scale (adapters are loaded afterward), so let's populate
 
+		// missing formats on update
 
+		helpers$1.mergeIf(time.displayFormats, adapter.formats());
 
+
 
+		return core_scale.prototype.update.apply(me, arguments);
 
+	},
 
+
 
+	/**
 
+	 * Allows data to be referenced via 't' attribute
 
+	 */
 
+	getRightValue: function(rawValue) {
 
+		if (rawValue && rawValue.t !== undefined) {
 
+			rawValue = rawValue.t;
 
+		}
 
+		return core_scale.prototype.getRightValue.call(this, rawValue);
 
+	},
 
+
 
+	determineDataLimits: function() {
 
+		var me = this;
 
+		var chart = me.chart;
 
+		var adapter = me._adapter;
 
+		var timeOpts = me.options.time;
 
+		var unit = timeOpts.unit || 'day';
 
+		var min = MAX_INTEGER;
 
+		var max = MIN_INTEGER;
 
+		var timestamps = [];
 
+		var datasets = [];
 
+		var labels = [];
 
+		var i, j, ilen, jlen, data, timestamp;
 
+		var dataLabels = chart.data.labels || [];
 
+
 
+		// Convert labels to timestamps
 
+		for (i = 0, ilen = dataLabels.length; i < ilen; ++i) {
 
+			labels.push(parse(me, dataLabels[i]));
 
+		}
 
+
 
+		// Convert data to timestamps
 
+		for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
 
+			if (chart.isDatasetVisible(i)) {
 
+				data = chart.data.datasets[i].data;
 
+
 
+				// Let's consider that all data have the same format.
 
+				if (helpers$1.isObject(data[0])) {
 
+					datasets[i] = [];
 
+
 
+					for (j = 0, jlen = data.length; j < jlen; ++j) {
 
+						timestamp = parse(me, data[j]);
 
+						timestamps.push(timestamp);
 
+						datasets[i][j] = timestamp;
 
+					}
 
+				} else {
 
+					for (j = 0, jlen = labels.length; j < jlen; ++j) {
 
+						timestamps.push(labels[j]);
 
+					}
 
+					datasets[i] = labels.slice(0);
 
+				}
 
+			} else {
 
+				datasets[i] = [];
 
+			}
 
+		}
 
+
 
+		if (labels.length) {
 
+			// Sort labels **after** data have been converted
 
+			labels = arrayUnique(labels).sort(sorter);
 
+			min = Math.min(min, labels[0]);
 
+			max = Math.max(max, labels[labels.length - 1]);
 
+		}
 
+
 
+		if (timestamps.length) {
 
+			timestamps = arrayUnique(timestamps).sort(sorter);
 
+			min = Math.min(min, timestamps[0]);
 
+			max = Math.max(max, timestamps[timestamps.length - 1]);
 
+		}
 
+
 
+		min = parse(me, timeOpts.min) || min;
 
+		max = parse(me, timeOpts.max) || max;
 
+
 
+		// In case there is no valid min/max, set limits based on unit time option
 
+		min = min === MAX_INTEGER ? +adapter.startOf(Date.now(), unit) : min;
 
+		max = max === MIN_INTEGER ? +adapter.endOf(Date.now(), unit) + 1 : max;
 
+
 
+		// Make sure that max is strictly higher than min (required by the lookup table)
 
+		me.min = Math.min(min, max);
 
+		me.max = Math.max(min + 1, max);
 
+
 
+		// PRIVATE
 
+		me._horizontal = me.isHorizontal();
 
+		me._table = [];
 
+		me._timestamps = {
 
+			data: timestamps,
 
+			datasets: datasets,
 
+			labels: labels
 
+		};
 
+	},
 
+
 
+	buildTicks: function() {
 
+		var me = this;
 
+		var min = me.min;
 
+		var max = me.max;
 
+		var options = me.options;
 
+		var timeOpts = options.time;
 
+		var timestamps = [];
 
+		var ticks = [];
 
+		var i, ilen, timestamp;
 
+
 
+		switch (options.ticks.source) {
 
+		case 'data':
 
+			timestamps = me._timestamps.data;
 
+			break;
 
+		case 'labels':
 
+			timestamps = me._timestamps.labels;
 
+			break;
 
+		case 'auto':
 
+		default:
 
+			timestamps = generate(me, min, max, me.getLabelCapacity(min), options);
 
+		}
 
+
 
+		if (options.bounds === 'ticks' && timestamps.length) {
 
+			min = timestamps[0];
 
+			max = timestamps[timestamps.length - 1];
 
+		}
 
+
 
+		// Enforce limits with user min/max options
 
+		min = parse(me, timeOpts.min) || min;
 
+		max = parse(me, timeOpts.max) || max;
 
+
 
+		// Remove ticks outside the min/max range
 
+		for (i = 0, ilen = timestamps.length; i < ilen; ++i) {
 
+			timestamp = timestamps[i];
 
+			if (timestamp >= min && timestamp <= max) {
 
+				ticks.push(timestamp);
 
+			}
 
+		}
 
+
 
+		me.min = min;
 
+		me.max = max;
 
+
 
+		// PRIVATE
 
+		me._unit = timeOpts.unit || determineUnitForFormatting(me, ticks, timeOpts.minUnit, me.min, me.max);
 
+		me._majorUnit = determineMajorUnit(me._unit);
 
+		me._table = buildLookupTable(me._timestamps.data, min, max, options.distribution);
 
+		me._offsets = computeOffsets(me._table, ticks, min, max, options);
 
+
 
+		if (options.ticks.reverse) {
 
+			ticks.reverse();
 
+		}
 
+
 
+		return ticksFromTimestamps(me, ticks, me._majorUnit);
 
+	},
 
+
 
+	getLabelForIndex: function(index, datasetIndex) {
 
+		var me = this;
 
+		var adapter = me._adapter;
 
+		var data = me.chart.data;
 
+		var timeOpts = me.options.time;
 
+		var label = data.labels && index < data.labels.length ? data.labels[index] : '';
 
+		var value = data.datasets[datasetIndex].data[index];
 
+
 
+		if (helpers$1.isObject(value)) {
 
+			label = me.getRightValue(value);
 
+		}
 
+		if (timeOpts.tooltipFormat) {
 
+			return adapter.format(toTimestamp(me, label), timeOpts.tooltipFormat);
 
+		}
 
+		if (typeof label === 'string') {
 
+			return label;
 
+		}
 
+		return adapter.format(toTimestamp(me, label), timeOpts.displayFormats.datetime);
 
+	},
 
+
 
+	/**
 
+	 * Function to format an individual tick mark
 
+	 * @private
 
+	 */
 
+	tickFormatFunction: function(time, index, ticks, format) {
 
+		var me = this;
 
+		var adapter = me._adapter;
 
+		var options = me.options;
 
+		var formats = options.time.displayFormats;
 
+		var minorFormat = formats[me._unit];
 
+		var majorUnit = me._majorUnit;
 
+		var majorFormat = formats[majorUnit];
 
+		var majorTime = +adapter.startOf(time, majorUnit);
 
+		var majorTickOpts = options.ticks.major;
 
+		var major = majorTickOpts.enabled && majorUnit && majorFormat && time === majorTime;
 
+		var label = adapter.format(time, format ? format : major ? majorFormat : minorFormat);
 
+		var tickOpts = major ? majorTickOpts : options.ticks.minor;
 
+		var formatter = valueOrDefault$c(tickOpts.callback, tickOpts.userCallback);
 
+
 
+		return formatter ? formatter(label, index, ticks) : label;
 
+	},
 
+
 
+	convertTicksToLabels: function(ticks) {
 
+		var labels = [];
 
+		var i, ilen;
 
+
 
+		for (i = 0, ilen = ticks.length; i < ilen; ++i) {
 
+			labels.push(this.tickFormatFunction(ticks[i].value, i, ticks));
 
+		}
 
+
 
+		return labels;
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	getPixelForOffset: function(time) {
 
+		var me = this;
 
+		var isReverse = me.options.ticks.reverse;
 
+		var size = me._horizontal ? me.width : me.height;
 
+		var start = me._horizontal ? isReverse ? me.right : me.left : isReverse ? me.bottom : me.top;
 
+		var pos = interpolate$1(me._table, 'time', time, 'pos');
 
+		var offset = size * (me._offsets.start + pos) / (me._offsets.start + 1 + me._offsets.end);
 
+
 
+		return isReverse ? start - offset : start + offset;
 
+	},
 
+
 
+	getPixelForValue: function(value, index, datasetIndex) {
 
+		var me = this;
 
+		var time = null;
 
+
 
+		if (index !== undefined && datasetIndex !== undefined) {
 
+			time = me._timestamps.datasets[datasetIndex][index];
 
+		}
 
+
 
+		if (time === null) {
 
+			time = parse(me, value);
 
+		}
 
+
 
+		if (time !== null) {
 
+			return me.getPixelForOffset(time);
 
+		}
 
+	},
 
+
 
+	getPixelForTick: function(index) {
 
+		var ticks = this.getTicks();
 
+		return index >= 0 && index < ticks.length ?
 
+			this.getPixelForOffset(ticks[index].value) :
 
+			null;
 
+	},
 
+
 
+	getValueForPixel: function(pixel) {
 
+		var me = this;
 
+		var size = me._horizontal ? me.width : me.height;
 
+		var start = me._horizontal ? me.left : me.top;
 
+		var pos = (size ? (pixel - start) / size : 0) * (me._offsets.start + 1 + me._offsets.start) - me._offsets.end;
 
+		var time = interpolate$1(me._table, 'pos', pos, 'time');
 
+
 
+		// DEPRECATION, we should return time directly
 
+		return me._adapter._create(time);
 
+	},
 
+
 
+	/**
 
+	 * Crude approximation of what the label width might be
 
+	 * @private
 
+	 */
 
+	getLabelWidth: function(label) {
 
+		var me = this;
 
+		var ticksOpts = me.options.ticks;
 
+		var tickLabelWidth = me.ctx.measureText(label).width;
 
+		var angle = helpers$1.toRadians(ticksOpts.maxRotation);
 
+		var cosRotation = Math.cos(angle);
 
+		var sinRotation = Math.sin(angle);
 
+		var tickFontSize = valueOrDefault$c(ticksOpts.fontSize, core_defaults.global.defaultFontSize);
 
+
 
+		return (tickLabelWidth * cosRotation) + (tickFontSize * sinRotation);
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	getLabelCapacity: function(exampleTime) {
 
+		var me = this;
 
+
 
+		// pick the longest format (milliseconds) for guestimation
 
+		var format = me.options.time.displayFormats.millisecond;
 
+		var exampleLabel = me.tickFormatFunction(exampleTime, 0, [], format);
 
+		var tickLabelWidth = me.getLabelWidth(exampleLabel);
 
+		var innerWidth = me.isHorizontal() ? me.width : me.height;
 
+		var capacity = Math.floor(innerWidth / tickLabelWidth);
 
+
 
+		return capacity > 0 ? capacity : 1;
 
+	}
 
+});
 
+
 
+// INTERNAL: static default options, registered in src/index.js
 
+var _defaults$4 = defaultConfig$4;
 
+scale_time._defaults = _defaults$4;
 
+
 
+var scales = {
 
+	category: scale_category,
 
+	linear: scale_linear,
 
+	logarithmic: scale_logarithmic,
 
+	radialLinear: scale_radialLinear,
 
+	time: scale_time
 
+};
 
+
 
+var FORMATS = {
 
+	datetime: 'MMM D, YYYY, h:mm:ss a',
 
+	millisecond: 'h:mm:ss.SSS a',
 
+	second: 'h:mm:ss a',
 
+	minute: 'h:mm a',
 
+	hour: 'hA',
 
+	day: 'MMM D',
 
+	week: 'll',
 
+	month: 'MMM YYYY',
 
+	quarter: '[Q]Q - YYYY',
 
+	year: 'YYYY'
 
+};
 
+
 
+core_adapters._date.override(typeof moment === 'function' ? {
 
+	_id: 'moment', // DEBUG ONLY
 
+
 
+	formats: function() {
 
+		return FORMATS;
 
+	},
 
+
 
+	parse: function(value, format) {
 
+		if (typeof value === 'string' && typeof format === 'string') {
 
+			value = moment(value, format);
 
+		} else if (!(value instanceof moment)) {
 
+			value = moment(value);
 
+		}
 
+		return value.isValid() ? value.valueOf() : null;
 
+	},
 
+
 
+	format: function(time, format) {
 
+		return moment(time).format(format);
 
+	},
 
+
 
+	add: function(time, amount, unit) {
 
+		return moment(time).add(amount, unit).valueOf();
 
+	},
 
+
 
+	diff: function(max, min, unit) {
 
+		return moment.duration(moment(max).diff(moment(min))).as(unit);
 
+	},
 
+
 
+	startOf: function(time, unit, weekday) {
 
+		time = moment(time);
 
+		if (unit === 'isoWeek') {
 
+			return time.isoWeekday(weekday).valueOf();
 
+		}
 
+		return time.startOf(unit).valueOf();
 
+	},
 
+
 
+	endOf: function(time, unit) {
 
+		return moment(time).endOf(unit).valueOf();
 
+	},
 
+
 
+	// DEPRECATIONS
 
+
 
+	/**
 
+	 * Provided for backward compatibility with scale.getValueForPixel().
 
+	 * @deprecated since version 2.8.0
 
+	 * @todo remove at version 3
 
+	 * @private
 
+	 */
 
+	_create: function(time) {
 
+		return moment(time);
 
+	},
 
+} : {});
 
+
 
+core_defaults._set('global', {
 
+	plugins: {
 
+		filler: {
 
+			propagate: true
 
+		}
 
+	}
 
+});
 
+
 
+var mappers = {
 
+	dataset: function(source) {
 
+		var index = source.fill;
 
+		var chart = source.chart;
 
+		var meta = chart.getDatasetMeta(index);
 
+		var visible = meta && chart.isDatasetVisible(index);
 
+		var points = (visible && meta.dataset._children) || [];
 
+		var length = points.length || 0;
 
+
 
+		return !length ? null : function(point, i) {
 
+			return (i < length && points[i]._view) || null;
 
+		};
 
+	},
 
+
 
+	boundary: function(source) {
 
+		var boundary = source.boundary;
 
+		var x = boundary ? boundary.x : null;
 
+		var y = boundary ? boundary.y : null;
 
+
 
+		return function(point) {
 
+			return {
 
+				x: x === null ? point.x : x,
 
+				y: y === null ? point.y : y,
 
+			};
 
+		};
 
+	}
 
+};
 
+
 
+// @todo if (fill[0] === '#')
 
+function decodeFill(el, index, count) {
 
+	var model = el._model || {};
 
+	var fill = model.fill;
 
+	var target;
 
+
 
+	if (fill === undefined) {
 
+		fill = !!model.backgroundColor;
 
+	}
 
+
 
+	if (fill === false || fill === null) {
 
+		return false;
 
+	}
 
+
 
+	if (fill === true) {
 
+		return 'origin';
 
+	}
 
+
 
+	target = parseFloat(fill, 10);
 
+	if (isFinite(target) && Math.floor(target) === target) {
 
+		if (fill[0] === '-' || fill[0] === '+') {
 
+			target = index + target;
 
+		}
 
+
 
+		if (target === index || target < 0 || target >= count) {
 
+			return false;
 
+		}
 
+
 
+		return target;
 
+	}
 
+
 
+	switch (fill) {
 
+	// compatibility
 
+	case 'bottom':
 
+		return 'start';
 
+	case 'top':
 
+		return 'end';
 
+	case 'zero':
 
+		return 'origin';
 
+	// supported boundaries
 
+	case 'origin':
 
+	case 'start':
 
+	case 'end':
 
+		return fill;
 
+	// invalid fill values
 
+	default:
 
+		return false;
 
+	}
 
+}
 
+
 
+function computeBoundary(source) {
 
+	var model = source.el._model || {};
 
+	var scale = source.el._scale || {};
 
+	var fill = source.fill;
 
+	var target = null;
 
+	var horizontal;
 
+
 
+	if (isFinite(fill)) {
 
+		return null;
 
+	}
 
+
 
+	// Backward compatibility: until v3, we still need to support boundary values set on
 
+	// the model (scaleTop, scaleBottom and scaleZero) because some external plugins and
 
+	// controllers might still use it (e.g. the Smith chart).
 
+
 
+	if (fill === 'start') {
 
+		target = model.scaleBottom === undefined ? scale.bottom : model.scaleBottom;
 
+	} else if (fill === 'end') {
 
+		target = model.scaleTop === undefined ? scale.top : model.scaleTop;
 
+	} else if (model.scaleZero !== undefined) {
 
+		target = model.scaleZero;
 
+	} else if (scale.getBasePosition) {
 
+		target = scale.getBasePosition();
 
+	} else if (scale.getBasePixel) {
 
+		target = scale.getBasePixel();
 
+	}
 
+
 
+	if (target !== undefined && target !== null) {
 
+		if (target.x !== undefined && target.y !== undefined) {
 
+			return target;
 
+		}
 
+
 
+		if (helpers$1.isFinite(target)) {
 
+			horizontal = scale.isHorizontal();
 
+			return {
 
+				x: horizontal ? target : null,
 
+				y: horizontal ? null : target
 
+			};
 
+		}
 
+	}
 
+
 
+	return null;
 
+}
 
+
 
+function resolveTarget(sources, index, propagate) {
 
+	var source = sources[index];
 
+	var fill = source.fill;
 
+	var visited = [index];
 
+	var target;
 
+
 
+	if (!propagate) {
 
+		return fill;
 
+	}
 
+
 
+	while (fill !== false && visited.indexOf(fill) === -1) {
 
+		if (!isFinite(fill)) {
 
+			return fill;
 
+		}
 
+
 
+		target = sources[fill];
 
+		if (!target) {
 
+			return false;
 
+		}
 
+
 
+		if (target.visible) {
 
+			return fill;
 
+		}
 
+
 
+		visited.push(fill);
 
+		fill = target.fill;
 
+	}
 
+
 
+	return false;
 
+}
 
+
 
+function createMapper(source) {
 
+	var fill = source.fill;
 
+	var type = 'dataset';
 
+
 
+	if (fill === false) {
 
+		return null;
 
+	}
 
+
 
+	if (!isFinite(fill)) {
 
+		type = 'boundary';
 
+	}
 
+
 
+	return mappers[type](source);
 
+}
 
+
 
+function isDrawable(point) {
 
+	return point && !point.skip;
 
+}
 
+
 
+function drawArea(ctx, curve0, curve1, len0, len1) {
 
+	var i;
 
+
 
+	if (!len0 || !len1) {
 
+		return;
 
+	}
 
+
 
+	// building first area curve (normal)
 
+	ctx.moveTo(curve0[0].x, curve0[0].y);
 
+	for (i = 1; i < len0; ++i) {
 
+		helpers$1.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
 
+	}
 
+
 
+	// joining the two area curves
 
+	ctx.lineTo(curve1[len1 - 1].x, curve1[len1 - 1].y);
 
+
 
+	// building opposite area curve (reverse)
 
+	for (i = len1 - 1; i > 0; --i) {
 
+		helpers$1.canvas.lineTo(ctx, curve1[i], curve1[i - 1], true);
 
+	}
 
+}
 
+
 
+function doFill(ctx, points, mapper, view, color, loop) {
 
+	var count = points.length;
 
+	var span = view.spanGaps;
 
+	var curve0 = [];
 
+	var curve1 = [];
 
+	var len0 = 0;
 
+	var len1 = 0;
 
+	var i, ilen, index, p0, p1, d0, d1;
 
+
 
+	ctx.beginPath();
 
+
 
+	for (i = 0, ilen = (count + !!loop); i < ilen; ++i) {
 
+		index = i % count;
 
+		p0 = points[index]._view;
 
+		p1 = mapper(p0, index, view);
 
+		d0 = isDrawable(p0);
 
+		d1 = isDrawable(p1);
 
+
 
+		if (d0 && d1) {
 
+			len0 = curve0.push(p0);
 
+			len1 = curve1.push(p1);
 
+		} else if (len0 && len1) {
 
+			if (!span) {
 
+				drawArea(ctx, curve0, curve1, len0, len1);
 
+				len0 = len1 = 0;
 
+				curve0 = [];
 
+				curve1 = [];
 
+			} else {
 
+				if (d0) {
 
+					curve0.push(p0);
 
+				}
 
+				if (d1) {
 
+					curve1.push(p1);
 
+				}
 
+			}
 
+		}
 
+	}
 
+
 
+	drawArea(ctx, curve0, curve1, len0, len1);
 
+
 
+	ctx.closePath();
 
+	ctx.fillStyle = color;
 
+	ctx.fill();
 
+}
 
+
 
+var plugin_filler = {
 
+	id: 'filler',
 
+
 
+	afterDatasetsUpdate: function(chart, options) {
 
+		var count = (chart.data.datasets || []).length;
 
+		var propagate = options.propagate;
 
+		var sources = [];
 
+		var meta, i, el, source;
 
+
 
+		for (i = 0; i < count; ++i) {
 
+			meta = chart.getDatasetMeta(i);
 
+			el = meta.dataset;
 
+			source = null;
 
+
 
+			if (el && el._model && el instanceof elements.Line) {
 
+				source = {
 
+					visible: chart.isDatasetVisible(i),
 
+					fill: decodeFill(el, i, count),
 
+					chart: chart,
 
+					el: el
 
+				};
 
+			}
 
+
 
+			meta.$filler = source;
 
+			sources.push(source);
 
+		}
 
+
 
+		for (i = 0; i < count; ++i) {
 
+			source = sources[i];
 
+			if (!source) {
 
+				continue;
 
+			}
 
+
 
+			source.fill = resolveTarget(sources, i, propagate);
 
+			source.boundary = computeBoundary(source);
 
+			source.mapper = createMapper(source);
 
+		}
 
+	},
 
+
 
+	beforeDatasetDraw: function(chart, args) {
 
+		var meta = args.meta.$filler;
 
+		if (!meta) {
 
+			return;
 
+		}
 
+
 
+		var ctx = chart.ctx;
 
+		var el = meta.el;
 
+		var view = el._view;
 
+		var points = el._children || [];
 
+		var mapper = meta.mapper;
 
+		var color = view.backgroundColor || core_defaults.global.defaultColor;
 
+
 
+		if (mapper && color && points.length) {
 
+			helpers$1.canvas.clipArea(ctx, chart.chartArea);
 
+			doFill(ctx, points, mapper, view, color, el._loop);
 
+			helpers$1.canvas.unclipArea(ctx);
 
+		}
 
+	}
 
+};
 
+
 
+var noop$1 = helpers$1.noop;
 
+var valueOrDefault$d = helpers$1.valueOrDefault;
 
+
 
+core_defaults._set('global', {
 
+	legend: {
 
+		display: true,
 
+		position: 'top',
 
+		fullWidth: true,
 
+		reverse: false,
 
+		weight: 1000,
 
+
 
+		// a callback that will handle
 
+		onClick: function(e, legendItem) {
 
+			var index = legendItem.datasetIndex;
 
+			var ci = this.chart;
 
+			var meta = ci.getDatasetMeta(index);
 
+
 
+			// See controller.isDatasetVisible comment
 
+			meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
 
+
 
+			// We hid a dataset ... rerender the chart
 
+			ci.update();
 
+		},
 
+
 
+		onHover: null,
 
+		onLeave: null,
 
+
 
+		labels: {
 
+			boxWidth: 40,
 
+			padding: 10,
 
+			// Generates labels shown in the legend
 
+			// Valid properties to return:
 
+			// text : text to display
 
+			// fillStyle : fill of coloured box
 
+			// strokeStyle: stroke of coloured box
 
+			// hidden : if this legend item refers to a hidden item
 
+			// lineCap : cap style for line
 
+			// lineDash
 
+			// lineDashOffset :
 
+			// lineJoin :
 
+			// lineWidth :
 
+			generateLabels: function(chart) {
 
+				var data = chart.data;
 
+				return helpers$1.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
 
+					return {
 
+						text: dataset.label,
 
+						fillStyle: (!helpers$1.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
 
+						hidden: !chart.isDatasetVisible(i),
 
+						lineCap: dataset.borderCapStyle,
 
+						lineDash: dataset.borderDash,
 
+						lineDashOffset: dataset.borderDashOffset,
 
+						lineJoin: dataset.borderJoinStyle,
 
+						lineWidth: dataset.borderWidth,
 
+						strokeStyle: dataset.borderColor,
 
+						pointStyle: dataset.pointStyle,
 
+
 
+						// Below is extra data used for toggling the datasets
 
+						datasetIndex: i
 
+					};
 
+				}, this) : [];
 
+			}
 
+		}
 
+	},
 
+
 
+	legendCallback: function(chart) {
 
+		var text = [];
 
+		text.push('<ul class="' + chart.id + '-legend">');
 
+		for (var i = 0; i < chart.data.datasets.length; i++) {
 
+			text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
 
+			if (chart.data.datasets[i].label) {
 
+				text.push(chart.data.datasets[i].label);
 
+			}
 
+			text.push('</li>');
 
+		}
 
+		text.push('</ul>');
 
+		return text.join('');
 
+	}
 
+});
 
+
 
+/**
 
+ * Helper function to get the box width based on the usePointStyle option
 
+ * @param {object} labelopts - the label options on the legend
 
+ * @param {number} fontSize - the label font size
 
+ * @return {number} width of the color box area
 
+ */
 
+function getBoxWidth(labelOpts, fontSize) {
 
+	return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
 
+		fontSize :
 
+		labelOpts.boxWidth;
 
+}
 
+
 
+/**
 
+ * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required!
 
+ */
 
+var Legend = core_element.extend({
 
+
 
+	initialize: function(config) {
 
+		helpers$1.extend(this, config);
 
+
 
+		// Contains hit boxes for each dataset (in dataset order)
 
+		this.legendHitBoxes = [];
 
+
 
+		/**
 
+ 		 * @private
 
+ 		 */
 
+		this._hoveredItem = null;
 
+
 
+		// Are we in doughnut mode which has a different data type
 
+		this.doughnutMode = false;
 
+	},
 
+
 
+	// These methods are ordered by lifecycle. Utilities then follow.
 
+	// Any function defined here is inherited by all legend types.
 
+	// Any function can be extended by the legend type
 
+
 
+	beforeUpdate: noop$1,
 
+	update: function(maxWidth, maxHeight, margins) {
 
+		var me = this;
 
+
 
+		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 
+		me.beforeUpdate();
 
+
 
+		// Absorb the master measurements
 
+		me.maxWidth = maxWidth;
 
+		me.maxHeight = maxHeight;
 
+		me.margins = margins;
 
+
 
+		// Dimensions
 
+		me.beforeSetDimensions();
 
+		me.setDimensions();
 
+		me.afterSetDimensions();
 
+		// Labels
 
+		me.beforeBuildLabels();
 
+		me.buildLabels();
 
+		me.afterBuildLabels();
 
+
 
+		// Fit
 
+		me.beforeFit();
 
+		me.fit();
 
+		me.afterFit();
 
+		//
 
+		me.afterUpdate();
 
+
 
+		return me.minSize;
 
+	},
 
+	afterUpdate: noop$1,
 
+
 
+	//
 
+
 
+	beforeSetDimensions: noop$1,
 
+	setDimensions: function() {
 
+		var me = this;
 
+		// Set the unconstrained dimension before label rotation
 
+		if (me.isHorizontal()) {
 
+			// Reset position before calculating rotation
 
+			me.width = me.maxWidth;
 
+			me.left = 0;
 
+			me.right = me.width;
 
+		} else {
 
+			me.height = me.maxHeight;
 
+
 
+			// Reset position before calculating rotation
 
+			me.top = 0;
 
+			me.bottom = me.height;
 
+		}
 
+
 
+		// Reset padding
 
+		me.paddingLeft = 0;
 
+		me.paddingTop = 0;
 
+		me.paddingRight = 0;
 
+		me.paddingBottom = 0;
 
+
 
+		// Reset minSize
 
+		me.minSize = {
 
+			width: 0,
 
+			height: 0
 
+		};
 
+	},
 
+	afterSetDimensions: noop$1,
 
+
 
+	//
 
+
 
+	beforeBuildLabels: noop$1,
 
+	buildLabels: function() {
 
+		var me = this;
 
+		var labelOpts = me.options.labels || {};
 
+		var legendItems = helpers$1.callback(labelOpts.generateLabels, [me.chart], me) || [];
 
+
 
+		if (labelOpts.filter) {
 
+			legendItems = legendItems.filter(function(item) {
 
+				return labelOpts.filter(item, me.chart.data);
 
+			});
 
+		}
 
+
 
+		if (me.options.reverse) {
 
+			legendItems.reverse();
 
+		}
 
+
 
+		me.legendItems = legendItems;
 
+	},
 
+	afterBuildLabels: noop$1,
 
+
 
+	//
 
+
 
+	beforeFit: noop$1,
 
+	fit: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var labelOpts = opts.labels;
 
+		var display = opts.display;
 
+
 
+		var ctx = me.ctx;
 
+
 
+		var labelFont = helpers$1.options._parseFont(labelOpts);
 
+		var fontSize = labelFont.size;
 
+
 
+		// Reset hit boxes
 
+		var hitboxes = me.legendHitBoxes = [];
 
+
 
+		var minSize = me.minSize;
 
+		var isHorizontal = me.isHorizontal();
 
+
 
+		if (isHorizontal) {
 
+			minSize.width = me.maxWidth; // fill all the width
 
+			minSize.height = display ? 10 : 0;
 
+		} else {
 
+			minSize.width = display ? 10 : 0;
 
+			minSize.height = me.maxHeight; // fill all the height
 
+		}
 
+
 
+		// Increase sizes here
 
+		if (display) {
 
+			ctx.font = labelFont.string;
 
+
 
+			if (isHorizontal) {
 
+				// Labels
 
+
 
+				// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
 
+				var lineWidths = me.lineWidths = [0];
 
+				var totalHeight = 0;
 
+
 
+				ctx.textAlign = 'left';
 
+				ctx.textBaseline = 'top';
 
+
 
+				helpers$1.each(me.legendItems, function(legendItem, i) {
 
+					var boxWidth = getBoxWidth(labelOpts, fontSize);
 
+					var width = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 
+
 
+					if (i === 0 || lineWidths[lineWidths.length - 1] + width + labelOpts.padding > minSize.width) {
 
+						totalHeight += fontSize + labelOpts.padding;
 
+						lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = labelOpts.padding;
 
+					}
 
+
 
+					// Store the hitbox width and height here. Final position will be updated in `draw`
 
+					hitboxes[i] = {
 
+						left: 0,
 
+						top: 0,
 
+						width: width,
 
+						height: fontSize
 
+					};
 
+
 
+					lineWidths[lineWidths.length - 1] += width + labelOpts.padding;
 
+				});
 
+
 
+				minSize.height += totalHeight;
 
+
 
+			} else {
 
+				var vPadding = labelOpts.padding;
 
+				var columnWidths = me.columnWidths = [];
 
+				var totalWidth = labelOpts.padding;
 
+				var currentColWidth = 0;
 
+				var currentColHeight = 0;
 
+				var itemHeight = fontSize + vPadding;
 
+
 
+				helpers$1.each(me.legendItems, function(legendItem, i) {
 
+					var boxWidth = getBoxWidth(labelOpts, fontSize);
 
+					var itemWidth = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 
+
 
+					// If too tall, go to new column
 
+					if (i > 0 && currentColHeight + itemHeight > minSize.height - vPadding) {
 
+						totalWidth += currentColWidth + labelOpts.padding;
 
+						columnWidths.push(currentColWidth); // previous column width
 
+
 
+						currentColWidth = 0;
 
+						currentColHeight = 0;
 
+					}
 
+
 
+					// Get max width
 
+					currentColWidth = Math.max(currentColWidth, itemWidth);
 
+					currentColHeight += itemHeight;
 
+
 
+					// Store the hitbox width and height here. Final position will be updated in `draw`
 
+					hitboxes[i] = {
 
+						left: 0,
 
+						top: 0,
 
+						width: itemWidth,
 
+						height: fontSize
 
+					};
 
+				});
 
+
 
+				totalWidth += currentColWidth;
 
+				columnWidths.push(currentColWidth);
 
+				minSize.width += totalWidth;
 
+			}
 
+		}
 
+
 
+		me.width = minSize.width;
 
+		me.height = minSize.height;
 
+	},
 
+	afterFit: noop$1,
 
+
 
+	// Shared Methods
 
+	isHorizontal: function() {
 
+		return this.options.position === 'top' || this.options.position === 'bottom';
 
+	},
 
+
 
+	// Actually draw the legend on the canvas
 
+	draw: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var labelOpts = opts.labels;
 
+		var globalDefaults = core_defaults.global;
 
+		var defaultColor = globalDefaults.defaultColor;
 
+		var lineDefault = globalDefaults.elements.line;
 
+		var legendWidth = me.width;
 
+		var lineWidths = me.lineWidths;
 
+
 
+		if (opts.display) {
 
+			var ctx = me.ctx;
 
+			var fontColor = valueOrDefault$d(labelOpts.fontColor, globalDefaults.defaultFontColor);
 
+			var labelFont = helpers$1.options._parseFont(labelOpts);
 
+			var fontSize = labelFont.size;
 
+			var cursor;
 
+
 
+			// Canvas setup
 
+			ctx.textAlign = 'left';
 
+			ctx.textBaseline = 'middle';
 
+			ctx.lineWidth = 0.5;
 
+			ctx.strokeStyle = fontColor; // for strikethrough effect
 
+			ctx.fillStyle = fontColor; // render in correct colour
 
+			ctx.font = labelFont.string;
 
+
 
+			var boxWidth = getBoxWidth(labelOpts, fontSize);
 
+			var hitboxes = me.legendHitBoxes;
 
+
 
+			// current position
 
+			var drawLegendBox = function(x, y, legendItem) {
 
+				if (isNaN(boxWidth) || boxWidth <= 0) {
 
+					return;
 
+				}
 
+
 
+				// Set the ctx for the box
 
+				ctx.save();
 
+
 
+				var lineWidth = valueOrDefault$d(legendItem.lineWidth, lineDefault.borderWidth);
 
+				ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
 
+				ctx.lineCap = valueOrDefault$d(legendItem.lineCap, lineDefault.borderCapStyle);
 
+				ctx.lineDashOffset = valueOrDefault$d(legendItem.lineDashOffset, lineDefault.borderDashOffset);
 
+				ctx.lineJoin = valueOrDefault$d(legendItem.lineJoin, lineDefault.borderJoinStyle);
 
+				ctx.lineWidth = lineWidth;
 
+				ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);
 
+
 
+				if (ctx.setLineDash) {
 
+					// IE 9 and 10 do not support line dash
 
+					ctx.setLineDash(valueOrDefault$d(legendItem.lineDash, lineDefault.borderDash));
 
+				}
 
+
 
+				if (opts.labels && opts.labels.usePointStyle) {
 
+					// Recalculate x and y for drawPoint() because its expecting
 
+					// x and y to be center of figure (instead of top left)
 
+					var radius = boxWidth * Math.SQRT2 / 2;
 
+					var centerX = x + boxWidth / 2;
 
+					var centerY = y + fontSize / 2;
 
+
 
+					// Draw pointStyle as legend symbol
 
+					helpers$1.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
 
+				} else {
 
+					// Draw box as legend symbol
 
+					if (lineWidth !== 0) {
 
+						ctx.strokeRect(x, y, boxWidth, fontSize);
 
+					}
 
+					ctx.fillRect(x, y, boxWidth, fontSize);
 
+				}
 
+
 
+				ctx.restore();
 
+			};
 
+			var fillText = function(x, y, legendItem, textWidth) {
 
+				var halfFontSize = fontSize / 2;
 
+				var xLeft = boxWidth + halfFontSize + x;
 
+				var yMiddle = y + halfFontSize;
 
+
 
+				ctx.fillText(legendItem.text, xLeft, yMiddle);
 
+
 
+				if (legendItem.hidden) {
 
+					// Strikethrough the text if hidden
 
+					ctx.beginPath();
 
+					ctx.lineWidth = 2;
 
+					ctx.moveTo(xLeft, yMiddle);
 
+					ctx.lineTo(xLeft + textWidth, yMiddle);
 
+					ctx.stroke();
 
+				}
 
+			};
 
+
 
+			// Horizontal
 
+			var isHorizontal = me.isHorizontal();
 
+			if (isHorizontal) {
 
+				cursor = {
 
+					x: me.left + ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding,
 
+					y: me.top + labelOpts.padding,
 
+					line: 0
 
+				};
 
+			} else {
 
+				cursor = {
 
+					x: me.left + labelOpts.padding,
 
+					y: me.top + labelOpts.padding,
 
+					line: 0
 
+				};
 
+			}
 
+
 
+			var itemHeight = fontSize + labelOpts.padding;
 
+			helpers$1.each(me.legendItems, function(legendItem, i) {
 
+				var textWidth = ctx.measureText(legendItem.text).width;
 
+				var width = boxWidth + (fontSize / 2) + textWidth;
 
+				var x = cursor.x;
 
+				var y = cursor.y;
 
+
 
+				// Use (me.left + me.minSize.width) and (me.top + me.minSize.height)
 
+				// instead of me.right and me.bottom because me.width and me.height
 
+				// may have been changed since me.minSize was calculated
 
+				if (isHorizontal) {
 
+					if (i > 0 && x + width + labelOpts.padding > me.left + me.minSize.width) {
 
+						y = cursor.y += itemHeight;
 
+						cursor.line++;
 
+						x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2) + labelOpts.padding;
 
+					}
 
+				} else if (i > 0 && y + itemHeight > me.top + me.minSize.height) {
 
+					x = cursor.x = x + me.columnWidths[cursor.line] + labelOpts.padding;
 
+					y = cursor.y = me.top + labelOpts.padding;
 
+					cursor.line++;
 
+				}
 
+
 
+				drawLegendBox(x, y, legendItem);
 
+
 
+				hitboxes[i].left = x;
 
+				hitboxes[i].top = y;
 
+
 
+				// Fill the actual label
 
+				fillText(x, y, legendItem, textWidth);
 
+
 
+				if (isHorizontal) {
 
+					cursor.x += width + labelOpts.padding;
 
+				} else {
 
+					cursor.y += itemHeight;
 
+				}
 
+
 
+			});
 
+		}
 
+	},
 
+
 
+	/**
 
+	 * @private
 
+	 */
 
+	_getLegendItemAt: function(x, y) {
 
+		var me = this;
 
+		var i, hitBox, lh;
 
+
 
+		if (x >= me.left && x <= me.right && y >= me.top && y <= me.bottom) {
 
+			// See if we are touching one of the dataset boxes
 
+			lh = me.legendHitBoxes;
 
+			for (i = 0; i < lh.length; ++i) {
 
+				hitBox = lh[i];
 
+
 
+				if (x >= hitBox.left && x <= hitBox.left + hitBox.width && y >= hitBox.top && y <= hitBox.top + hitBox.height) {
 
+					// Touching an element
 
+					return me.legendItems[i];
 
+				}
 
+			}
 
+		}
 
+
 
+		return null;
 
+	},
 
+
 
+	/**
 
+	 * Handle an event
 
+	 * @private
 
+	 * @param {IEvent} event - The event to handle
 
+	 */
 
+	handleEvent: function(e) {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var type = e.type === 'mouseup' ? 'click' : e.type;
 
+		var hoveredItem;
 
+
 
+		if (type === 'mousemove') {
 
+			if (!opts.onHover && !opts.onLeave) {
 
+				return;
 
+			}
 
+		} else if (type === 'click') {
 
+			if (!opts.onClick) {
 
+				return;
 
+			}
 
+		} else {
 
+			return;
 
+		}
 
+
 
+		// Chart event already has relative position in it
 
+		hoveredItem = me._getLegendItemAt(e.x, e.y);
 
+
 
+		if (type === 'click') {
 
+			if (hoveredItem && opts.onClick) {
 
+				// use e.native for backwards compatibility
 
+				opts.onClick.call(me, e.native, hoveredItem);
 
+			}
 
+		} else {
 
+			if (opts.onLeave && hoveredItem !== me._hoveredItem) {
 
+				if (me._hoveredItem) {
 
+					opts.onLeave.call(me, e.native, me._hoveredItem);
 
+				}
 
+				me._hoveredItem = hoveredItem;
 
+			}
 
+
 
+			if (opts.onHover && hoveredItem) {
 
+				// use e.native for backwards compatibility
 
+				opts.onHover.call(me, e.native, hoveredItem);
 
+			}
 
+		}
 
+	}
 
+});
 
+
 
+function createNewLegendAndAttach(chart, legendOpts) {
 
+	var legend = new Legend({
 
+		ctx: chart.ctx,
 
+		options: legendOpts,
 
+		chart: chart
 
+	});
 
+
 
+	core_layouts.configure(chart, legend, legendOpts);
 
+	core_layouts.addBox(chart, legend);
 
+	chart.legend = legend;
 
+}
 
+
 
+var plugin_legend = {
 
+	id: 'legend',
 
+
 
+	/**
 
+	 * Backward compatibility: since 2.1.5, the legend is registered as a plugin, making
 
+	 * Chart.Legend obsolete. To avoid a breaking change, we export the Legend as part of
 
+	 * the plugin, which one will be re-exposed in the chart.js file.
 
+	 * https://github.com/chartjs/Chart.js/pull/2640
 
+	 * @private
 
+	 */
 
+	_element: Legend,
 
+
 
+	beforeInit: function(chart) {
 
+		var legendOpts = chart.options.legend;
 
+
 
+		if (legendOpts) {
 
+			createNewLegendAndAttach(chart, legendOpts);
 
+		}
 
+	},
 
+
 
+	beforeUpdate: function(chart) {
 
+		var legendOpts = chart.options.legend;
 
+		var legend = chart.legend;
 
+
 
+		if (legendOpts) {
 
+			helpers$1.mergeIf(legendOpts, core_defaults.global.legend);
 
+
 
+			if (legend) {
 
+				core_layouts.configure(chart, legend, legendOpts);
 
+				legend.options = legendOpts;
 
+			} else {
 
+				createNewLegendAndAttach(chart, legendOpts);
 
+			}
 
+		} else if (legend) {
 
+			core_layouts.removeBox(chart, legend);
 
+			delete chart.legend;
 
+		}
 
+	},
 
+
 
+	afterEvent: function(chart, e) {
 
+		var legend = chart.legend;
 
+		if (legend) {
 
+			legend.handleEvent(e);
 
+		}
 
+	}
 
+};
 
+
 
+var noop$2 = helpers$1.noop;
 
+
 
+core_defaults._set('global', {
 
+	title: {
 
+		display: false,
 
+		fontStyle: 'bold',
 
+		fullWidth: true,
 
+		padding: 10,
 
+		position: 'top',
 
+		text: '',
 
+		weight: 2000         // by default greater than legend (1000) to be above
 
+	}
 
+});
 
+
 
+/**
 
+ * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required!
 
+ */
 
+var Title = core_element.extend({
 
+	initialize: function(config) {
 
+		var me = this;
 
+		helpers$1.extend(me, config);
 
+
 
+		// Contains hit boxes for each dataset (in dataset order)
 
+		me.legendHitBoxes = [];
 
+	},
 
+
 
+	// These methods are ordered by lifecycle. Utilities then follow.
 
+
 
+	beforeUpdate: noop$2,
 
+	update: function(maxWidth, maxHeight, margins) {
 
+		var me = this;
 
+
 
+		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 
+		me.beforeUpdate();
 
+
 
+		// Absorb the master measurements
 
+		me.maxWidth = maxWidth;
 
+		me.maxHeight = maxHeight;
 
+		me.margins = margins;
 
+
 
+		// Dimensions
 
+		me.beforeSetDimensions();
 
+		me.setDimensions();
 
+		me.afterSetDimensions();
 
+		// Labels
 
+		me.beforeBuildLabels();
 
+		me.buildLabels();
 
+		me.afterBuildLabels();
 
+
 
+		// Fit
 
+		me.beforeFit();
 
+		me.fit();
 
+		me.afterFit();
 
+		//
 
+		me.afterUpdate();
 
+
 
+		return me.minSize;
 
+
 
+	},
 
+	afterUpdate: noop$2,
 
+
 
+	//
 
+
 
+	beforeSetDimensions: noop$2,
 
+	setDimensions: function() {
 
+		var me = this;
 
+		// Set the unconstrained dimension before label rotation
 
+		if (me.isHorizontal()) {
 
+			// Reset position before calculating rotation
 
+			me.width = me.maxWidth;
 
+			me.left = 0;
 
+			me.right = me.width;
 
+		} else {
 
+			me.height = me.maxHeight;
 
+
 
+			// Reset position before calculating rotation
 
+			me.top = 0;
 
+			me.bottom = me.height;
 
+		}
 
+
 
+		// Reset padding
 
+		me.paddingLeft = 0;
 
+		me.paddingTop = 0;
 
+		me.paddingRight = 0;
 
+		me.paddingBottom = 0;
 
+
 
+		// Reset minSize
 
+		me.minSize = {
 
+			width: 0,
 
+			height: 0
 
+		};
 
+	},
 
+	afterSetDimensions: noop$2,
 
+
 
+	//
 
+
 
+	beforeBuildLabels: noop$2,
 
+	buildLabels: noop$2,
 
+	afterBuildLabels: noop$2,
 
+
 
+	//
 
+
 
+	beforeFit: noop$2,
 
+	fit: function() {
 
+		var me = this;
 
+		var opts = me.options;
 
+		var display = opts.display;
 
+		var minSize = me.minSize;
 
+		var lineCount = helpers$1.isArray(opts.text) ? opts.text.length : 1;
 
+		var fontOpts = helpers$1.options._parseFont(opts);
 
+		var textSize = display ? (lineCount * fontOpts.lineHeight) + (opts.padding * 2) : 0;
 
+
 
+		if (me.isHorizontal()) {
 
+			minSize.width = me.maxWidth; // fill all the width
 
+			minSize.height = textSize;
 
+		} else {
 
+			minSize.width = textSize;
 
+			minSize.height = me.maxHeight; // fill all the height
 
+		}
 
+
 
+		me.width = minSize.width;
 
+		me.height = minSize.height;
 
+
 
+	},
 
+	afterFit: noop$2,
 
+
 
+	// Shared Methods
 
+	isHorizontal: function() {
 
+		var pos = this.options.position;
 
+		return pos === 'top' || pos === 'bottom';
 
+	},
 
+
 
+	// Actually draw the title block on the canvas
 
+	draw: function() {
 
+		var me = this;
 
+		var ctx = me.ctx;
 
+		var opts = me.options;
 
+
 
+		if (opts.display) {
 
+			var fontOpts = helpers$1.options._parseFont(opts);
 
+			var lineHeight = fontOpts.lineHeight;
 
+			var offset = lineHeight / 2 + opts.padding;
 
+			var rotation = 0;
 
+			var top = me.top;
 
+			var left = me.left;
 
+			var bottom = me.bottom;
 
+			var right = me.right;
 
+			var maxWidth, titleX, titleY;
 
+
 
+			ctx.fillStyle = helpers$1.valueOrDefault(opts.fontColor, core_defaults.global.defaultFontColor); // render in correct colour
 
+			ctx.font = fontOpts.string;
 
+
 
+			// Horizontal
 
+			if (me.isHorizontal()) {
 
+				titleX = left + ((right - left) / 2); // midpoint of the width
 
+				titleY = top + offset;
 
+				maxWidth = right - left;
 
+			} else {
 
+				titleX = opts.position === 'left' ? left + offset : right - offset;
 
+				titleY = top + ((bottom - top) / 2);
 
+				maxWidth = bottom - top;
 
+				rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5);
 
+			}
 
+
 
+			ctx.save();
 
+			ctx.translate(titleX, titleY);
 
+			ctx.rotate(rotation);
 
+			ctx.textAlign = 'center';
 
+			ctx.textBaseline = 'middle';
 
+
 
+			var text = opts.text;
 
+			if (helpers$1.isArray(text)) {
 
+				var y = 0;
 
+				for (var i = 0; i < text.length; ++i) {
 
+					ctx.fillText(text[i], 0, y, maxWidth);
 
+					y += lineHeight;
 
+				}
 
+			} else {
 
+				ctx.fillText(text, 0, 0, maxWidth);
 
+			}
 
+
 
+			ctx.restore();
 
+		}
 
+	}
 
+});
 
+
 
+function createNewTitleBlockAndAttach(chart, titleOpts) {
 
+	var title = new Title({
 
+		ctx: chart.ctx,
 
+		options: titleOpts,
 
+		chart: chart
 
+	});
 
+
 
+	core_layouts.configure(chart, title, titleOpts);
 
+	core_layouts.addBox(chart, title);
 
+	chart.titleBlock = title;
 
+}
 
+
 
+var plugin_title = {
 
+	id: 'title',
 
+
 
+	/**
 
+	 * Backward compatibility: since 2.1.5, the title is registered as a plugin, making
 
+	 * Chart.Title obsolete. To avoid a breaking change, we export the Title as part of
 
+	 * the plugin, which one will be re-exposed in the chart.js file.
 
+	 * https://github.com/chartjs/Chart.js/pull/2640
 
+	 * @private
 
+	 */
 
+	_element: Title,
 
+
 
+	beforeInit: function(chart) {
 
+		var titleOpts = chart.options.title;
 
+
 
+		if (titleOpts) {
 
+			createNewTitleBlockAndAttach(chart, titleOpts);
 
+		}
 
+	},
 
+
 
+	beforeUpdate: function(chart) {
 
+		var titleOpts = chart.options.title;
 
+		var titleBlock = chart.titleBlock;
 
+
 
+		if (titleOpts) {
 
+			helpers$1.mergeIf(titleOpts, core_defaults.global.title);
 
+
 
+			if (titleBlock) {
 
+				core_layouts.configure(chart, titleBlock, titleOpts);
 
+				titleBlock.options = titleOpts;
 
+			} else {
 
+				createNewTitleBlockAndAttach(chart, titleOpts);
 
+			}
 
+		} else if (titleBlock) {
 
+			core_layouts.removeBox(chart, titleBlock);
 
+			delete chart.titleBlock;
 
+		}
 
+	}
 
+};
 
+
 
+var plugins = {};
 
+var filler = plugin_filler;
 
+var legend = plugin_legend;
 
+var title = plugin_title;
 
+plugins.filler = filler;
 
+plugins.legend = legend;
 
+plugins.title = title;
 
+
 
+/**
 
+ * @namespace Chart
 
+ */
 
+
 
+
 
+core_controller.helpers = helpers$1;
 
+
 
+// @todo dispatch these helpers into appropriated helpers/helpers.* file and write unit tests!
 
+core_helpers(core_controller);
 
+
 
+core_controller._adapters = core_adapters;
 
+core_controller.Animation = core_animation;
 
+core_controller.animationService = core_animations;
 
+core_controller.controllers = controllers;
 
+core_controller.DatasetController = core_datasetController;
 
+core_controller.defaults = core_defaults;
 
+core_controller.Element = core_element;
 
+core_controller.elements = elements;
 
+core_controller.Interaction = core_interaction;
 
+core_controller.layouts = core_layouts;
 
+core_controller.platform = platform;
 
+core_controller.plugins = core_plugins;
 
+core_controller.Scale = core_scale;
 
+core_controller.scaleService = core_scaleService;
 
+core_controller.Ticks = core_ticks;
 
+core_controller.Tooltip = core_tooltip;
 
+
 
+// Register built-in scales
 
+
 
+core_controller.helpers.each(scales, function(scale, type) {
 
+	core_controller.scaleService.registerScaleType(type, scale, scale._defaults);
 
+});
 
+
 
+// Load to register built-in adapters (as side effects)
 
+
 
+
 
+// Loading built-in plugins
 
+
 
+for (var k in plugins) {
 
+	if (plugins.hasOwnProperty(k)) {
 
+		core_controller.plugins.register(plugins[k]);
 
+	}
 
+}
 
+
 
+core_controller.platform.initialize();
 
+
 
+var src = core_controller;
 
+if (typeof window !== 'undefined') {
 
+	window.Chart = core_controller;
 
+}
 
+
 
+// DEPRECATIONS
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore
 
+ * @namespace Chart.Chart
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.Chart = core_controller;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore
 
+ * @namespace Chart.Legend
 
+ * @deprecated since version 2.1.5
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.Legend = plugins.legend._element;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore
 
+ * @namespace Chart.Title
 
+ * @deprecated since version 2.1.5
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.Title = plugins.title._element;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.plugins instead
 
+ * @namespace Chart.pluginService
 
+ * @deprecated since version 2.1.5
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.pluginService = core_controller.plugins;
 
+
 
+/**
 
+ * Provided for backward compatibility, inheriting from Chart.PlugingBase has no
 
+ * effect, instead simply create/register plugins via plain JavaScript objects.
 
+ * @interface Chart.PluginBase
 
+ * @deprecated since version 2.5.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.PluginBase = core_controller.Element.extend({});
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.helpers.canvas instead.
 
+ * @namespace Chart.canvasHelpers
 
+ * @deprecated since version 2.6.0
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.canvasHelpers = core_controller.helpers.canvas;
 
+
 
+/**
 
+ * Provided for backward compatibility, use Chart.layouts instead.
 
+ * @namespace Chart.layoutService
 
+ * @deprecated since version 2.7.3
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.layoutService = core_controller.layouts;
 
+
 
+/**
 
+ * Provided for backward compatibility, not available anymore.
 
+ * @namespace Chart.LinearScaleBase
 
+ * @deprecated since version 2.8
 
+ * @todo remove at version 3
 
+ * @private
 
+ */
 
+core_controller.LinearScaleBase = scale_linearbase;
 
+
 
+/**
 
+ * Provided for backward compatibility, instead we should create a new Chart
 
+ * by setting the type in the config (`new Chart(id, {type: '{chart-type}'}`).
 
+ * @deprecated since version 2.8.0
 
+ * @todo remove at version 3
 
+ */
 
+core_controller.helpers.each(
 
+	[
 
+		'Bar',
 
+		'Bubble',
 
+		'Doughnut',
 
+		'Line',
 
+		'PolarArea',
 
+		'Radar',
 
+		'Scatter'
 
+	],
 
+	function(klass) {
 
+		core_controller[klass] = function(ctx, cfg) {
 
+			return new core_controller(ctx, core_controller.helpers.merge(cfg || {}, {
 
+				type: klass.charAt(0).toLowerCase() + klass.slice(1)
 
+			}));
 
+		};
 
+	}
 
+);
 
+
 
+return src;
 
+
 
+})));

File diff suppressed because it is too large
+ 6 - 0
static/vendors/chart.js/Chart.min.js


+ 477 - 0
static/vendors/datepicker/bootstrap-datepicker.css
View File 

@@ -0,0 +1,477 @@
 
+/*!
 
+ * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 
+ *
 
+ * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 
+ */
 
+
 
+.datepicker {
 
+  padding: 4px;
 
+  -webkit-border-radius: 4px;
 
+  -moz-border-radius: 4px;
 
+  border-radius: 4px;
 
+  direction: ltr;
 
+}
 
+.datepicker-inline {
 
+  width: 220px;
 
+}
 
+.datepicker-rtl {
 
+  direction: rtl;
 
+}
 
+.datepicker-rtl.dropdown-menu {
 
+  left: auto;
 
+}
 
+.datepicker-rtl table tr td span {
 
+  float: right;
 
+}
 
+.datepicker-dropdown {
 
+  top: 0;
 
+  left: 0;
 
+}
 
+.datepicker-dropdown:before {
 
+  content: '';
 
+  display: inline-block;
 
+  border-left: 7px solid transparent;
 
+  border-right: 7px solid transparent;
 
+  border-bottom: 7px solid #999;
 
+  border-top: 0;
 
+  border-bottom-color: rgba(0, 0, 0, 0.2);
 
+  position: absolute;
 
+}
 
+.datepicker-dropdown:after {
 
+  content: '';
 
+  display: inline-block;
 
+  border-left: 6px solid transparent;
 
+  border-right: 6px solid transparent;
 
+  border-bottom: 6px solid #fff;
 
+  border-top: 0;
 
+  position: absolute;
 
+}
 
+.datepicker-dropdown.datepicker-orient-left:before {
 
+  left: 6px;
 
+}
 
+.datepicker-dropdown.datepicker-orient-left:after {
 
+  left: 7px;
 
+}
 
+.datepicker-dropdown.datepicker-orient-right:before {
 
+  right: 6px;
 
+}
 
+.datepicker-dropdown.datepicker-orient-right:after {
 
+  right: 7px;
 
+}
 
+.datepicker-dropdown.datepicker-orient-bottom:before {
 
+  top: -7px;
 
+}
 
+.datepicker-dropdown.datepicker-orient-bottom:after {
 
+  top: -6px;
 
+}
 
+.datepicker-dropdown.datepicker-orient-top:before {
 
+  bottom: -7px;
 
+  border-bottom: 0;
 
+  border-top: 7px solid #999;
 
+}
 
+.datepicker-dropdown.datepicker-orient-top:after {
 
+  bottom: -6px;
 
+  border-bottom: 0;
 
+  border-top: 6px solid #fff;
 
+}
 
+.datepicker table {
 
+  margin: 0;
 
+  -webkit-touch-callout: none;
 
+  -webkit-user-select: none;
 
+  -khtml-user-select: none;
 
+  -moz-user-select: none;
 
+  -ms-user-select: none;
 
+  user-select: none;
 
+}
 
+.datepicker td,
 
+.datepicker th {
 
+  text-align: center;
 
+  width: 20px;
 
+  height: 20px;
 
+  -webkit-border-radius: 4px;
 
+  -moz-border-radius: 4px;
 
+  border-radius: 4px;
 
+  border: none;
 
+}
 
+.table-striped .datepicker table tr td,
 
+.table-striped .datepicker table tr th {
 
+  background-color: transparent;
 
+}
 
+.datepicker table tr td.day:hover,
 
+.datepicker table tr td.day.focused {
 
+  background: #eee;
 
+  cursor: pointer;
 
+}
 
+.datepicker table tr td.old,
 
+.datepicker table tr td.new {
 
+  color: #999;
 
+}
 
+.datepicker table tr td.disabled,
 
+.datepicker table tr td.disabled:hover {
 
+  background: none;
 
+  color: #999;
 
+  cursor: default;
 
+}
 
+.datepicker table tr td.highlighted {
 
+  background: #d9edf7;
 
+  border-radius: 0;
 
+}
 
+.datepicker table tr td.today,
 
+.datepicker table tr td.today:hover,
 
+.datepicker table tr td.today.disabled,
 
+.datepicker table tr td.today.disabled:hover {
 
+  background-color: #fde19a;
 
+  background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
 
+  background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
 
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
 
+  background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
 
+  background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
 
+  background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
 
+  background-repeat: repeat-x;
 
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
 
+  border-color: #fdf59a #fdf59a #fbed50;
 
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 
+  color: #000;
 
+}
 
+.datepicker table tr td.today:hover,
 
+.datepicker table tr td.today:hover:hover,
 
+.datepicker table tr td.today.disabled:hover,
 
+.datepicker table tr td.today.disabled:hover:hover,
 
+.datepicker table tr td.today:active,
 
+.datepicker table tr td.today:hover:active,
 
+.datepicker table tr td.today.disabled:active,
 
+.datepicker table tr td.today.disabled:hover:active,
 
+.datepicker table tr td.today.active,
 
+.datepicker table tr td.today:hover.active,
 
+.datepicker table tr td.today.disabled.active,
 
+.datepicker table tr td.today.disabled:hover.active,
 
+.datepicker table tr td.today.disabled,
 
+.datepicker table tr td.today:hover.disabled,
 
+.datepicker table tr td.today.disabled.disabled,
 
+.datepicker table tr td.today.disabled:hover.disabled,
 
+.datepicker table tr td.today[disabled],
 
+.datepicker table tr td.today:hover[disabled],
 
+.datepicker table tr td.today.disabled[disabled],
 
+.datepicker table tr td.today.disabled:hover[disabled] {
 
+  background-color: #fdf59a;
 
+}
 
+.datepicker table tr td.today:active,
 
+.datepicker table tr td.today:hover:active,
 
+.datepicker table tr td.today.disabled:active,
 
+.datepicker table tr td.today.disabled:hover:active,
 
+.datepicker table tr td.today.active,
 
+.datepicker table tr td.today:hover.active,
 
+.datepicker table tr td.today.disabled.active,
 
+.datepicker table tr td.today.disabled:hover.active {
 
+  background-color: #fbf069 \9;
 
+}
 
+.datepicker table tr td.today:hover:hover {
 
+  color: #000;
 
+}
 
+.datepicker table tr td.today.active:hover {
 
+  color: #fff;
 
+}
 
+.datepicker table tr td.range,
 
+.datepicker table tr td.range:hover,
 
+.datepicker table tr td.range.disabled,
 
+.datepicker table tr td.range.disabled:hover {
 
+  background: #eee;
 
+  -webkit-border-radius: 0;
 
+  -moz-border-radius: 0;
 
+  border-radius: 0;
 
+}
 
+.datepicker table tr td.range.today,
 
+.datepicker table tr td.range.today:hover,
 
+.datepicker table tr td.range.today.disabled,
 
+.datepicker table tr td.range.today.disabled:hover {
 
+  background-color: #f3d17a;
 
+  background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
 
+  background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
 
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
 
+  background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
 
+  background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
 
+  background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
 
+  background-repeat: repeat-x;
 
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
 
+  border-color: #f3e97a #f3e97a #edde34;
 
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 
+  -webkit-border-radius: 0;
 
+  -moz-border-radius: 0;
 
+  border-radius: 0;
 
+}
 
+.datepicker table tr td.range.today:hover,
 
+.datepicker table tr td.range.today:hover:hover,
 
+.datepicker table tr td.range.today.disabled:hover,
 
+.datepicker table tr td.range.today.disabled:hover:hover,
 
+.datepicker table tr td.range.today:active,
 
+.datepicker table tr td.range.today:hover:active,
 
+.datepicker table tr td.range.today.disabled:active,
 
+.datepicker table tr td.range.today.disabled:hover:active,
 
+.datepicker table tr td.range.today.active,
 
+.datepicker table tr td.range.today:hover.active,
 
+.datepicker table tr td.range.today.disabled.active,
 
+.datepicker table tr td.range.today.disabled:hover.active,
 
+.datepicker table tr td.range.today.disabled,
 
+.datepicker table tr td.range.today:hover.disabled,
 
+.datepicker table tr td.range.today.disabled.disabled,
 
+.datepicker table tr td.range.today.disabled:hover.disabled,
 
+.datepicker table tr td.range.today[disabled],
 
+.datepicker table tr td.range.today:hover[disabled],
 
+.datepicker table tr td.range.today.disabled[disabled],
 
+.datepicker table tr td.range.today.disabled:hover[disabled] {
 
+  background-color: #f3e97a;
 
+}
 
+.datepicker table tr td.range.today:active,
 
+.datepicker table tr td.range.today:hover:active,
 
+.datepicker table tr td.range.today.disabled:active,
 
+.datepicker table tr td.range.today.disabled:hover:active,
 
+.datepicker table tr td.range.today.active,
 
+.datepicker table tr td.range.today:hover.active,
 
+.datepicker table tr td.range.today.disabled.active,
 
+.datepicker table tr td.range.today.disabled:hover.active {
 
+  background-color: #efe24b \9;
 
+}
 
+.datepicker table tr td.selected,
 
+.datepicker table tr td.selected:hover,
 
+.datepicker table tr td.selected.disabled,
 
+.datepicker table tr td.selected.disabled:hover {
 
+  background-color: #9e9e9e;
 
+  background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
 
+  background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
 
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
 
+  background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
 
+  background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
 
+  background-image: linear-gradient(to bottom, #b3b3b3, #808080);
 
+  background-repeat: repeat-x;
 
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
 
+  border-color: #808080 #808080 #595959;
 
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 
+  color: #fff;
 
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 
+}
 
+.datepicker table tr td.selected:hover,
 
+.datepicker table tr td.selected:hover:hover,
 
+.datepicker table tr td.selected.disabled:hover,
 
+.datepicker table tr td.selected.disabled:hover:hover,
 
+.datepicker table tr td.selected:active,
 
+.datepicker table tr td.selected:hover:active,
 
+.datepicker table tr td.selected.disabled:active,
 
+.datepicker table tr td.selected.disabled:hover:active,
 
+.datepicker table tr td.selected.active,
 
+.datepicker table tr td.selected:hover.active,
 
+.datepicker table tr td.selected.disabled.active,
 
+.datepicker table tr td.selected.disabled:hover.active,
 
+.datepicker table tr td.selected.disabled,
 
+.datepicker table tr td.selected:hover.disabled,
 
+.datepicker table tr td.selected.disabled.disabled,
 
+.datepicker table tr td.selected.disabled:hover.disabled,
 
+.datepicker table tr td.selected[disabled],
 
+.datepicker table tr td.selected:hover[disabled],
 
+.datepicker table tr td.selected.disabled[disabled],
 
+.datepicker table tr td.selected.disabled:hover[disabled] {
 
+  background-color: #808080;
 
+}
 
+.datepicker table tr td.selected:active,
 
+.datepicker table tr td.selected:hover:active,
 
+.datepicker table tr td.selected.disabled:active,
 
+.datepicker table tr td.selected.disabled:hover:active,
 
+.datepicker table tr td.selected.active,
 
+.datepicker table tr td.selected:hover.active,
 
+.datepicker table tr td.selected.disabled.active,
 
+.datepicker table tr td.selected.disabled:hover.active {
 
+  background-color: #666666 \9;
 
+}
 
+.datepicker table tr td.active,
 
+.datepicker table tr td.active:hover,
 
+.datepicker table tr td.active.disabled,
 
+.datepicker table tr td.active.disabled:hover {
 
+  background-color: #006dcc;
 
+  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
 
+  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: linear-gradient(to bottom, #08c, #0044cc);
 
+  background-repeat: repeat-x;
 
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
 
+  border-color: #0044cc #0044cc #002a80;
 
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 
+  color: #fff;
 
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 
+}
 
+.datepicker table tr td.active:hover,
 
+.datepicker table tr td.active:hover:hover,
 
+.datepicker table tr td.active.disabled:hover,
 
+.datepicker table tr td.active.disabled:hover:hover,
 
+.datepicker table tr td.active:active,
 
+.datepicker table tr td.active:hover:active,
 
+.datepicker table tr td.active.disabled:active,
 
+.datepicker table tr td.active.disabled:hover:active,
 
+.datepicker table tr td.active.active,
 
+.datepicker table tr td.active:hover.active,
 
+.datepicker table tr td.active.disabled.active,
 
+.datepicker table tr td.active.disabled:hover.active,
 
+.datepicker table tr td.active.disabled,
 
+.datepicker table tr td.active:hover.disabled,
 
+.datepicker table tr td.active.disabled.disabled,
 
+.datepicker table tr td.active.disabled:hover.disabled,
 
+.datepicker table tr td.active[disabled],
 
+.datepicker table tr td.active:hover[disabled],
 
+.datepicker table tr td.active.disabled[disabled],
 
+.datepicker table tr td.active.disabled:hover[disabled] {
 
+  background-color: #0044cc;
 
+}
 
+.datepicker table tr td.active:active,
 
+.datepicker table tr td.active:hover:active,
 
+.datepicker table tr td.active.disabled:active,
 
+.datepicker table tr td.active.disabled:hover:active,
 
+.datepicker table tr td.active.active,
 
+.datepicker table tr td.active:hover.active,
 
+.datepicker table tr td.active.disabled.active,
 
+.datepicker table tr td.active.disabled:hover.active {
 
+  background-color: #003399 \9;
 
+}
 
+.datepicker table tr td span {
 
+  display: block;
 
+  width: 23%;
 
+  height: 54px;
 
+  line-height: 54px;
 
+  float: left;
 
+  margin: 1%;
 
+  cursor: pointer;
 
+  -webkit-border-radius: 4px;
 
+  -moz-border-radius: 4px;
 
+  border-radius: 4px;
 
+}
 
+.datepicker table tr td span:hover,
 
+.datepicker table tr td span.focused {
 
+  background: #eee;
 
+}
 
+.datepicker table tr td span.disabled,
 
+.datepicker table tr td span.disabled:hover {
 
+  background: none;
 
+  color: #999;
 
+  cursor: default;
 
+}
 
+.datepicker table tr td span.active,
 
+.datepicker table tr td span.active:hover,
 
+.datepicker table tr td span.active.disabled,
 
+.datepicker table tr td span.active.disabled:hover {
 
+  background-color: #006dcc;
 
+  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
 
+  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
 
+  background-image: linear-gradient(to bottom, #08c, #0044cc);
 
+  background-repeat: repeat-x;
 
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
 
+  border-color: #0044cc #0044cc #002a80;
 
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 
+  color: #fff;
 
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 
+}
 
+.datepicker table tr td span.active:hover,
 
+.datepicker table tr td span.active:hover:hover,
 
+.datepicker table tr td span.active.disabled:hover,
 
+.datepicker table tr td span.active.disabled:hover:hover,
 
+.datepicker table tr td span.active:active,
 
+.datepicker table tr td span.active:hover:active,
 
+.datepicker table tr td span.active.disabled:active,
 
+.datepicker table tr td span.active.disabled:hover:active,
 
+.datepicker table tr td span.active.active,
 
+.datepicker table tr td span.active:hover.active,
 
+.datepicker table tr td span.active.disabled.active,
 
+.datepicker table tr td span.active.disabled:hover.active,
 
+.datepicker table tr td span.active.disabled,
 
+.datepicker table tr td span.active:hover.disabled,
 
+.datepicker table tr td span.active.disabled.disabled,
 
+.datepicker table tr td span.active.disabled:hover.disabled,
 
+.datepicker table tr td span.active[disabled],
 
+.datepicker table tr td span.active:hover[disabled],
 
+.datepicker table tr td span.active.disabled[disabled],
 
+.datepicker table tr td span.active.disabled:hover[disabled] {
 
+  background-color: #0044cc;
 
+}
 
+.datepicker table tr td span.active:active,
 
+.datepicker table tr td span.active:hover:active,
 
+.datepicker table tr td span.active.disabled:active,
 
+.datepicker table tr td span.active.disabled:hover:active,
 
+.datepicker table tr td span.active.active,
 
+.datepicker table tr td span.active:hover.active,
 
+.datepicker table tr td span.active.disabled.active,
 
+.datepicker table tr td span.active.disabled:hover.active {
 
+  background-color: #003399 \9;
 
+}
 
+.datepicker table tr td span.old,
 
+.datepicker table tr td span.new {
 
+  color: #999;
 
+}
 
+.datepicker .datepicker-switch {
 
+  width: 145px;
 
+}
 
+.datepicker .datepicker-switch,
 
+.datepicker .prev,
 
+.datepicker .next,
 
+.datepicker tfoot tr th {
 
+  cursor: pointer;
 
+}
 
+.datepicker .datepicker-switch:hover,
 
+.datepicker .prev:hover,
 
+.datepicker .next:hover,
 
+.datepicker tfoot tr th:hover {
 
+  background: #eee;
 
+}
 
+.datepicker .prev.disabled,
 
+.datepicker .next.disabled {
 
+  visibility: hidden;
 
+}
 
+.datepicker .cw {
 
+  font-size: 10px;
 
+  width: 12px;
 
+  padding: 0 2px 0 5px;
 
+  vertical-align: middle;
 
+}
 
+.input-append.date .add-on,
 
+.input-prepend.date .add-on {
 
+  cursor: pointer;
 
+}
 
+.input-append.date .add-on i,
 
+.input-prepend.date .add-on i {
 
+  margin-top: 3px;
 
+}
 
+.input-daterange input {
 
+  text-align: center;
 
+}
 
+.input-daterange input:first-child {
 
+  -webkit-border-radius: 3px 0 0 3px;
 
+  -moz-border-radius: 3px 0 0 3px;
 
+  border-radius: 3px 0 0 3px;
 
+}
 
+.input-daterange input:last-child {
 
+  -webkit-border-radius: 0 3px 3px 0;
 
+  -moz-border-radius: 0 3px 3px 0;
 
+  border-radius: 0 3px 3px 0;
 
+}
 
+.input-daterange .add-on {
 
+  display: inline-block;
 
+  width: auto;
 
+  min-width: 16px;
 
+  height: 18px;
 
+  padding: 4px 5px;
 
+  font-weight: normal;
 
+  line-height: 18px;
 
+  text-align: center;
 
+  text-shadow: 0 1px 0 #fff;
 
+  vertical-align: middle;
 
+  background-color: #eee;
 
+  border: 1px solid #ccc;
 
+  margin-left: -5px;
 
+  margin-right: -5px;
 
+}
 
+/*# sourceMappingURL=bootstrap-datepicker.css.map */

Some files were not shown because too many files changed in this diff